Node.js සිංහලෙන් ඉගෙන ගමු - පාඩම් මාලාව 7

    අපගේ Dummy Website එකෙහි ArticlesPage.html එකෙහි ක්‍රියාකාරීත්වය මෙම පාඩමෙන් සාදාගමු. මෙහිදී පරිශීලකයා ArticlesPage.html එකට පැමිනි පසු Articles Load වී පෙන්විය යුතුය. මේ සඳහා පලමුව DummyWebsite Folder එක තුල articles.js File එක සාදාගන්න. එයට පහත Code එක ඇතුලත් කරන්න.

var articles = [
    {

        "id": "article_1",
        "title": "NodeJS Lesson 1",
        "author": "Nilupul Sandeepa",
        "publishedDate": "20/06/2021",
        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit non dolor et semper. Nulla diam elit, semper sit amet ante in, efficitur efficitur velit. Etiam id ultricies purus, iaculis mollis urna. Proin a elementum felis. Nullam varius tristique porttitor. Quisque commodo ornare elit nec faucibus. Phasellus erat ante, vulputate non lorem eget, imperdiet elementum est. Donec sagittis nibh non vehicula tincidunt.",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus nibh nec justo fringilla egestas. Cras vitae ex volutpat, finibus libero vel, dictum felis. In eu elementum nisl. Etiam at augue tristique, pretium lectus eget, laoreet tellus. Pellentesque varius magna libero, nec dapibus urna sagittis ut. Donec fringilla ex ex, id consectetur massa aliquam ut. Fusce ullamcorper sagittis luctus. Curabitur ac sapien in lacus volutpat ultrices at vel lectus. In suscipit lacus lorem, sed varius dolor rutrum eu. \
        <br />Nullam dignissim euismod nulla, vel dignissim tellus pellentesque eu. Vivamus elementum arcu ac efficitur ornare. Pellentesque nec pellentesque mauris. Phasellus consequat ex non enim faucibus fringilla. Integer sodales sit amet elit nec lobortis. Morbi aliquet vitae urna ac vehicula. Sed eget laoreet diam. Duis sit amet scelerisque velit. Cras gravida nibh et mauris elementum faucibus. Morbi egestas consectetur ornare. Aenean et odio a tellus pellentesque condimentum ac et libero. Sed pharetra tristique lacus, sed ultricies arcu consequat quis. Aliquam sed aliquam orci, ac tincidunt lectus. In efficitur mauris quis sapien rhoncus efficitur. Integer maximus feugiat egestas. Integer eu nibh auctor, commodo mauris in, sodales mauris.\
        <br />Donec ornare enim sit amet ex semper, a interdum tortor mattis. Maecenas tempor interdum sapien. Nullam diam sem, consequat eu fringilla ac, placerat in erat. Fusce eleifend erat vitae lacus aliquam efficitur. Curabitur rutrum, dolor ut cursus lacinia, sem lorem suscipit nunc, ut ullamcorper eros purus et metus. Vestibulum elit orci, ultrices vitae mauris sit amet, tristique tristique felis. Sed vestibulum consequat ante, hendrerit tincidunt ex ornare id. Curabitur nec dolor vestibulum, egestas odio a, ullamcorper nunc. Phasellus maximus laoreet eros ut efficitur. Nulla quis dolor ac nisl aliquam tincidunt. Aliquam erat volutpat. Cras vel metus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat magna metus, nec iaculis mauris scelerisque et. Vestibulum vel tristique urna, non convallis ante. \
        <br />Nunc fringilla sapien vitae erat pretium, vitae rutrum mi malesuada. Sed ut elit nec diam suscipit vestibulum. Aliquam in bibendum sem. Fusce justo tortor, lobortis id orci in, viverra facilisis odio. Maecenas non enim feugiat, accumsan ipsum non, eleifend enim. Suspendisse ac libero ipsum. Donec a aliquet nibh, ut sodales justo. Nam sit amet lacinia arcu. Vestibulum a volutpat neque. Vestibulum nulla mi, faucibus sed odio vel, gravida rhoncus ipsum. Sed a viverra purus. Pellentesque quis diam massa. Curabitur posuere iaculis tempor. Nullam sollicitudin, urna at dictum volutpat, felis dolor egestas nibh, eu pulvinar enim tellus a sapien. Nunc at quam ex. Etiam dictum euismod ex sit amet pharetra.\
        <br />Etiam ac lorem erat. Vestibulum a rhoncus diam, id pellentesque enim. Donec elementum sem volutpat, laoreet ante eu, suscipit diam. Praesent ultricies vehicula ligula, eget pellentesque mi lobortis vitae. Vivamus dignissim, lacus quis eleifend mollis, ante mauris aliquet sem, quis porttitor lorem nunc id nulla. Duis maximus tortor ante, vitae rhoncus neque pharetra in. Integer posuere arcu non urna aliquam egestas. Maecenas tristique, libero vel rhoncus posuere, leo sapien euismod augue, vitae luctus magna augue quis massa. Nulla nec felis et lacus rutrum laoreet. Donec pulvinar auctor tempor. Integer vitae urna lectus. Integer tincidunt nisl at velit luctus, non fermentum dolor efficitur. Quisque lobortis imperdiet urna, non pellentesque mauris mattis vel. Nullam congue et diam eget molestie. In hac habitasse platea dictumst.\
        <br />Nullam felis arcu, venenatis nec aliquet ac, feugiat ut elit. Nulla ullamcorper bibendum quam nec volutpat. In sed ex finibus, rhoncus mi quis, fermentum tortor. Suspendisse ornare, diam et aliquet gravida, risus purus ultricies elit, et pretium turpis mauris vel magna. Curabitur dictum leo nec cursus elementum. Integer eget ante risus. In finibus nibh eget ipsum elementum maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi eleifend nisl lorem. Curabitur vulputate ultrices lectus, eu lobortis urna porta eget. Nam arcu massa, congue sit amet dolor eget, ornare lacinia dui.\
        <br />Ut nec congue ex. Donec lorem felis, volutpat at massa sed, scelerisque efficitur dui. Praesent eget ex interdum, mollis odio quis, commodo risus. Vivamus aliquet massa in ipsum gravida, at dapibus urna sodales. Aenean massa nisi, porttitor eu dolor et, sagittis suscipit est. Donec eget imperdiet tortor. Duis ut velit sed augue porta semper sed quis orci. Fusce facilisis scelerisque diam, sit amet pulvinar felis hendrerit sed. Mauris finibus condimentum risus a vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium vitae erat non auctor. Quisque rutrum suscipit turpis vitae tincidunt. Aliquam erat volutpat.\
        <br />Mauris at viverra odio. Etiam nec mollis tortor, non eleifend nulla. In turpis elit, finibus et ipsum eu, rutrum convallis risus. Maecenas varius lorem id felis ullamcorper, commodo consectetur lacus interdum. Duis at libero quis nulla bibendum dignissim non ut diam. Sed tempus, nunc in efficitur elementum, dui metus laoreet tortor, in scelerisque tellus nibh eget elit. Cras tincidunt, lacus quis rhoncus pretium, felis leo pretium ipsum, sed vulputate eros metus ut purus. Nunc vehicula ligula eget metus auctor, eget accumsan lorem fermentum. Vestibulum nec mauris turpis. Nullam euismod facilisis odio, a bibendum metus vestibulum eu. In turpis neque, ultrices a tortor non, lobortis accumsan lorem.\
        <br />In interdum auctor sapien. Donec in interdum magna, nec aliquet odio. Nam viverra, odio at lacinia molestie, purus neque consequat felis, eget pellentesque quam dui id purus. Morbi at felis orci. Suspendisse pellentesque auctor arcu, et congue dui condimentum quis. Curabitur dictum odio quis libero imperdiet, quis tincidunt libero iaculis. Suspendisse in velit non orci tincidunt pretium ut eget tortor. In a congue velit. Nulla a enim nisi. Phasellus molestie justo sit amet tortor rutrum ultrices vitae nec erat. Quisque semper, nisi at scelerisque congue, ipsum lectus tristique urna, nec scelerisque nisi velit sed dolor. Nulla facilisi. In sed vulputate justo. Phasellus eget ipsum tellus. Morbi sodales purus ligula, nec dignissim enim suscipit et.\
        <br />In hac habitasse platea dictumst. Donec porttitor dapibus sem, sed iaculis orci blandit quis. Phasellus eleifend libero metus, eget fringilla est ultrices et. Vestibulum ligula nibh, faucibus non iaculis eu, elementum at purus. Ut interdum velit eu mi porttitor, eget ultrices augue tempor. Etiam nec ante fermentum, molestie ex nec, elementum lacus. Praesent tempus.\
        "
    },
    {

        "id": "article_2",
        "title": "NodeJS Lesson 2",
        "author": "Nilupul Sandeepa",
        "publishedDate": "22/06/2021",
        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit non dolor et semper. Nulla diam elit, semper sit amet ante in, efficitur efficitur velit. Etiam id ultricies purus, iaculis mollis urna. Proin a elementum felis. Nullam varius tristique porttitor. Quisque commodo ornare elit nec faucibus. Phasellus erat ante, vulputate non lorem eget, imperdiet elementum est. Donec sagittis nibh non vehicula tincidunt.",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus nibh nec justo fringilla egestas. Cras vitae ex volutpat, finibus libero vel, dictum felis. In eu elementum nisl. Etiam at augue tristique, pretium lectus eget, laoreet tellus. Pellentesque varius magna libero, nec dapibus urna sagittis ut. Donec fringilla ex ex, id consectetur massa aliquam ut. Fusce ullamcorper sagittis luctus. Curabitur ac sapien in lacus volutpat ultrices at vel lectus. In suscipit lacus lorem, sed varius dolor rutrum eu. \
        <br />Nullam dignissim euismod nulla, vel dignissim tellus pellentesque eu. Vivamus elementum arcu ac efficitur ornare. Pellentesque nec pellentesque mauris. Phasellus consequat ex non enim faucibus fringilla. Integer sodales sit amet elit nec lobortis. Morbi aliquet vitae urna ac vehicula. Sed eget laoreet diam. Duis sit amet scelerisque velit. Cras gravida nibh et mauris elementum faucibus. Morbi egestas consectetur ornare. Aenean et odio a tellus pellentesque condimentum ac et libero. Sed pharetra tristique lacus, sed ultricies arcu consequat quis. Aliquam sed aliquam orci, ac tincidunt lectus. In efficitur mauris quis sapien rhoncus efficitur. Integer maximus feugiat egestas. Integer eu nibh auctor, commodo mauris in, sodales mauris.\
        <br />Donec ornare enim sit amet ex semper, a interdum tortor mattis. Maecenas tempor interdum sapien. Nullam diam sem, consequat eu fringilla ac, placerat in erat. Fusce eleifend erat vitae lacus aliquam efficitur. Curabitur rutrum, dolor ut cursus lacinia, sem lorem suscipit nunc, ut ullamcorper eros purus et metus. Vestibulum elit orci, ultrices vitae mauris sit amet, tristique tristique felis. Sed vestibulum consequat ante, hendrerit tincidunt ex ornare id. Curabitur nec dolor vestibulum, egestas odio a, ullamcorper nunc. Phasellus maximus laoreet eros ut efficitur. Nulla quis dolor ac nisl aliquam tincidunt. Aliquam erat volutpat. Cras vel metus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat magna metus, nec iaculis mauris scelerisque et. Vestibulum vel tristique urna, non convallis ante. \
        <br />Nunc fringilla sapien vitae erat pretium, vitae rutrum mi malesuada. Sed ut elit nec diam suscipit vestibulum. Aliquam in bibendum sem. Fusce justo tortor, lobortis id orci in, viverra facilisis odio. Maecenas non enim feugiat, accumsan ipsum non, eleifend enim. Suspendisse ac libero ipsum. Donec a aliquet nibh, ut sodales justo. Nam sit amet lacinia arcu. Vestibulum a volutpat neque. Vestibulum nulla mi, faucibus sed odio vel, gravida rhoncus ipsum. Sed a viverra purus. Pellentesque quis diam massa. Curabitur posuere iaculis tempor. Nullam sollicitudin, urna at dictum volutpat, felis dolor egestas nibh, eu pulvinar enim tellus a sapien. Nunc at quam ex. Etiam dictum euismod ex sit amet pharetra.\
        <br />Etiam ac lorem erat. Vestibulum a rhoncus diam, id pellentesque enim. Donec elementum sem volutpat, laoreet ante eu, suscipit diam. Praesent ultricies vehicula ligula, eget pellentesque mi lobortis vitae. Vivamus dignissim, lacus quis eleifend mollis, ante mauris aliquet sem, quis porttitor lorem nunc id nulla. Duis maximus tortor ante, vitae rhoncus neque pharetra in. Integer posuere arcu non urna aliquam egestas. Maecenas tristique, libero vel rhoncus posuere, leo sapien euismod augue, vitae luctus magna augue quis massa. Nulla nec felis et lacus rutrum laoreet. Donec pulvinar auctor tempor. Integer vitae urna lectus. Integer tincidunt nisl at velit luctus, non fermentum dolor efficitur. Quisque lobortis imperdiet urna, non pellentesque mauris mattis vel. Nullam congue et diam eget molestie. In hac habitasse platea dictumst.\
        <br />Nullam felis arcu, venenatis nec aliquet ac, feugiat ut elit. Nulla ullamcorper bibendum quam nec volutpat. In sed ex finibus, rhoncus mi quis, fermentum tortor. Suspendisse ornare, diam et aliquet gravida, risus purus ultricies elit, et pretium turpis mauris vel magna. Curabitur dictum leo nec cursus elementum. Integer eget ante risus. In finibus nibh eget ipsum elementum maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi eleifend nisl lorem. Curabitur vulputate ultrices lectus, eu lobortis urna porta eget. Nam arcu massa, congue sit amet dolor eget, ornare lacinia dui.\
        <br />Ut nec congue ex. Donec lorem felis, volutpat at massa sed, scelerisque efficitur dui. Praesent eget ex interdum, mollis odio quis, commodo risus. Vivamus aliquet massa in ipsum gravida, at dapibus urna sodales. Aenean massa nisi, porttitor eu dolor et, sagittis suscipit est. Donec eget imperdiet tortor. Duis ut velit sed augue porta semper sed quis orci. Fusce facilisis scelerisque diam, sit amet pulvinar felis hendrerit sed. Mauris finibus condimentum risus a vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium vitae erat non auctor. Quisque rutrum suscipit turpis vitae tincidunt. Aliquam erat volutpat.\
        <br />Mauris at viverra odio. Etiam nec mollis tortor, non eleifend nulla. In turpis elit, finibus et ipsum eu, rutrum convallis risus. Maecenas varius lorem id felis ullamcorper, commodo consectetur lacus interdum. Duis at libero quis nulla bibendum dignissim non ut diam. Sed tempus, nunc in efficitur elementum, dui metus laoreet tortor, in scelerisque tellus nibh eget elit. Cras tincidunt, lacus quis rhoncus pretium, felis leo pretium ipsum, sed vulputate eros metus ut purus. Nunc vehicula ligula eget metus auctor, eget accumsan lorem fermentum. Vestibulum nec mauris turpis. Nullam euismod facilisis odio, a bibendum metus vestibulum eu. In turpis neque, ultrices a tortor non, lobortis accumsan lorem.\
        <br />In interdum auctor sapien. Donec in interdum magna, nec aliquet odio. Nam viverra, odio at lacinia molestie, purus neque consequat felis, eget pellentesque quam dui id purus. Morbi at felis orci. Suspendisse pellentesque auctor arcu, et congue dui condimentum quis. Curabitur dictum odio quis libero imperdiet, quis tincidunt libero iaculis. Suspendisse in velit non orci tincidunt pretium ut eget tortor. In a congue velit. Nulla a enim nisi. Phasellus molestie justo sit amet tortor rutrum ultrices vitae nec erat. Quisque semper, nisi at scelerisque congue, ipsum lectus tristique urna, nec scelerisque nisi velit sed dolor. Nulla facilisi. In sed vulputate justo. Phasellus eget ipsum tellus. Morbi sodales purus ligula, nec dignissim enim suscipit et.\
        <br />In hac habitasse platea dictumst. Donec porttitor dapibus sem, sed iaculis orci blandit quis. Phasellus eleifend libero metus, eget fringilla est ultrices et. Vestibulum ligula nibh, faucibus non iaculis eu, elementum at purus. Ut interdum velit eu mi porttitor, eget ultrices augue tempor. Etiam nec ante fermentum, molestie ex nec, elementum lacus. Praesent tempus.\
        "
    },
    {

        "id": "article_3",
        "title": "Java Lesson 1",
        "author": "Nilupul Sandeepa",
        "publishedDate": "24/06/2021",
        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit non dolor et semper. Nulla diam elit, semper sit amet ante in, efficitur efficitur velit. Etiam id ultricies purus, iaculis mollis urna. Proin a elementum felis. Nullam varius tristique porttitor. Quisque commodo ornare elit nec faucibus. Phasellus erat ante, vulputate non lorem eget, imperdiet elementum est. Donec sagittis nibh non vehicula tincidunt.",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus nibh nec justo fringilla egestas. Cras vitae ex volutpat, finibus libero vel, dictum felis. In eu elementum nisl. Etiam at augue tristique, pretium lectus eget, laoreet tellus. Pellentesque varius magna libero, nec dapibus urna sagittis ut. Donec fringilla ex ex, id consectetur massa aliquam ut. Fusce ullamcorper sagittis luctus. Curabitur ac sapien in lacus volutpat ultrices at vel lectus. In suscipit lacus lorem, sed varius dolor rutrum eu. \
        <br />Nullam dignissim euismod nulla, vel dignissim tellus pellentesque eu. Vivamus elementum arcu ac efficitur ornare. Pellentesque nec pellentesque mauris. Phasellus consequat ex non enim faucibus fringilla. Integer sodales sit amet elit nec lobortis. Morbi aliquet vitae urna ac vehicula. Sed eget laoreet diam. Duis sit amet scelerisque velit. Cras gravida nibh et mauris elementum faucibus. Morbi egestas consectetur ornare. Aenean et odio a tellus pellentesque condimentum ac et libero. Sed pharetra tristique lacus, sed ultricies arcu consequat quis. Aliquam sed aliquam orci, ac tincidunt lectus. In efficitur mauris quis sapien rhoncus efficitur. Integer maximus feugiat egestas. Integer eu nibh auctor, commodo mauris in, sodales mauris.\
        <br />Donec ornare enim sit amet ex semper, a interdum tortor mattis. Maecenas tempor interdum sapien. Nullam diam sem, consequat eu fringilla ac, placerat in erat. Fusce eleifend erat vitae lacus aliquam efficitur. Curabitur rutrum, dolor ut cursus lacinia, sem lorem suscipit nunc, ut ullamcorper eros purus et metus. Vestibulum elit orci, ultrices vitae mauris sit amet, tristique tristique felis. Sed vestibulum consequat ante, hendrerit tincidunt ex ornare id. Curabitur nec dolor vestibulum, egestas odio a, ullamcorper nunc. Phasellus maximus laoreet eros ut efficitur. Nulla quis dolor ac nisl aliquam tincidunt. Aliquam erat volutpat. Cras vel metus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat magna metus, nec iaculis mauris scelerisque et. Vestibulum vel tristique urna, non convallis ante. \
        <br />Nunc fringilla sapien vitae erat pretium, vitae rutrum mi malesuada. Sed ut elit nec diam suscipit vestibulum. Aliquam in bibendum sem. Fusce justo tortor, lobortis id orci in, viverra facilisis odio. Maecenas non enim feugiat, accumsan ipsum non, eleifend enim. Suspendisse ac libero ipsum. Donec a aliquet nibh, ut sodales justo. Nam sit amet lacinia arcu. Vestibulum a volutpat neque. Vestibulum nulla mi, faucibus sed odio vel, gravida rhoncus ipsum. Sed a viverra purus. Pellentesque quis diam massa. Curabitur posuere iaculis tempor. Nullam sollicitudin, urna at dictum volutpat, felis dolor egestas nibh, eu pulvinar enim tellus a sapien. Nunc at quam ex. Etiam dictum euismod ex sit amet pharetra.\
        <br />Etiam ac lorem erat. Vestibulum a rhoncus diam, id pellentesque enim. Donec elementum sem volutpat, laoreet ante eu, suscipit diam. Praesent ultricies vehicula ligula, eget pellentesque mi lobortis vitae. Vivamus dignissim, lacus quis eleifend mollis, ante mauris aliquet sem, quis porttitor lorem nunc id nulla. Duis maximus tortor ante, vitae rhoncus neque pharetra in. Integer posuere arcu non urna aliquam egestas. Maecenas tristique, libero vel rhoncus posuere, leo sapien euismod augue, vitae luctus magna augue quis massa. Nulla nec felis et lacus rutrum laoreet. Donec pulvinar auctor tempor. Integer vitae urna lectus. Integer tincidunt nisl at velit luctus, non fermentum dolor efficitur. Quisque lobortis imperdiet urna, non pellentesque mauris mattis vel. Nullam congue et diam eget molestie. In hac habitasse platea dictumst.\
        <br />Nullam felis arcu, venenatis nec aliquet ac, feugiat ut elit. Nulla ullamcorper bibendum quam nec volutpat. In sed ex finibus, rhoncus mi quis, fermentum tortor. Suspendisse ornare, diam et aliquet gravida, risus purus ultricies elit, et pretium turpis mauris vel magna. Curabitur dictum leo nec cursus elementum. Integer eget ante risus. In finibus nibh eget ipsum elementum maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi eleifend nisl lorem. Curabitur vulputate ultrices lectus, eu lobortis urna porta eget. Nam arcu massa, congue sit amet dolor eget, ornare lacinia dui.\
        <br />Ut nec congue ex. Donec lorem felis, volutpat at massa sed, scelerisque efficitur dui. Praesent eget ex interdum, mollis odio quis, commodo risus. Vivamus aliquet massa in ipsum gravida, at dapibus urna sodales. Aenean massa nisi, porttitor eu dolor et, sagittis suscipit est. Donec eget imperdiet tortor. Duis ut velit sed augue porta semper sed quis orci. Fusce facilisis scelerisque diam, sit amet pulvinar felis hendrerit sed. Mauris finibus condimentum risus a vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium vitae erat non auctor. Quisque rutrum suscipit turpis vitae tincidunt. Aliquam erat volutpat.\
        <br />Mauris at viverra odio. Etiam nec mollis tortor, non eleifend nulla. In turpis elit, finibus et ipsum eu, rutrum convallis risus. Maecenas varius lorem id felis ullamcorper, commodo consectetur lacus interdum. Duis at libero quis nulla bibendum dignissim non ut diam. Sed tempus, nunc in efficitur elementum, dui metus laoreet tortor, in scelerisque tellus nibh eget elit. Cras tincidunt, lacus quis rhoncus pretium, felis leo pretium ipsum, sed vulputate eros metus ut purus. Nunc vehicula ligula eget metus auctor, eget accumsan lorem fermentum. Vestibulum nec mauris turpis. Nullam euismod facilisis odio, a bibendum metus vestibulum eu. In turpis neque, ultrices a tortor non, lobortis accumsan lorem.\
        <br />In interdum auctor sapien. Donec in interdum magna, nec aliquet odio. Nam viverra, odio at lacinia molestie, purus neque consequat felis, eget pellentesque quam dui id purus. Morbi at felis orci. Suspendisse pellentesque auctor arcu, et congue dui condimentum quis. Curabitur dictum odio quis libero imperdiet, quis tincidunt libero iaculis. Suspendisse in velit non orci tincidunt pretium ut eget tortor. In a congue velit. Nulla a enim nisi. Phasellus molestie justo sit amet tortor rutrum ultrices vitae nec erat. Quisque semper, nisi at scelerisque congue, ipsum lectus tristique urna, nec scelerisque nisi velit sed dolor. Nulla facilisi. In sed vulputate justo. Phasellus eget ipsum tellus. Morbi sodales purus ligula, nec dignissim enim suscipit et.\
        <br />In hac habitasse platea dictumst. Donec porttitor dapibus sem, sed iaculis orci blandit quis. Phasellus eleifend libero metus, eget fringilla est ultrices et. Vestibulum ligula nibh, faucibus non iaculis eu, elementum at purus. Ut interdum velit eu mi porttitor, eget ultrices augue tempor. Etiam nec ante fermentum, molestie ex nec, elementum lacus. Praesent tempus.\
        "
    },
    {

        "id": "article_4",
        "title": "NodeJS Lesson 3",
        "author": "Nilupul Sandeepa",
        "publishedDate": "25/06/2021",
        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit non dolor et semper. Nulla diam elit, semper sit amet ante in, efficitur efficitur velit. Etiam id ultricies purus, iaculis mollis urna. Proin a elementum felis. Nullam varius tristique porttitor. Quisque commodo ornare elit nec faucibus. Phasellus erat ante, vulputate non lorem eget, imperdiet elementum est. Donec sagittis nibh non vehicula tincidunt.",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus nibh nec justo fringilla egestas. Cras vitae ex volutpat, finibus libero vel, dictum felis. In eu elementum nisl. Etiam at augue tristique, pretium lectus eget, laoreet tellus. Pellentesque varius magna libero, nec dapibus urna sagittis ut. Donec fringilla ex ex, id consectetur massa aliquam ut. Fusce ullamcorper sagittis luctus. Curabitur ac sapien in lacus volutpat ultrices at vel lectus. In suscipit lacus lorem, sed varius dolor rutrum eu. \
        <br />Nullam dignissim euismod nulla, vel dignissim tellus pellentesque eu. Vivamus elementum arcu ac efficitur ornare. Pellentesque nec pellentesque mauris. Phasellus consequat ex non enim faucibus fringilla. Integer sodales sit amet elit nec lobortis. Morbi aliquet vitae urna ac vehicula. Sed eget laoreet diam. Duis sit amet scelerisque velit. Cras gravida nibh et mauris elementum faucibus. Morbi egestas consectetur ornare. Aenean et odio a tellus pellentesque condimentum ac et libero. Sed pharetra tristique lacus, sed ultricies arcu consequat quis. Aliquam sed aliquam orci, ac tincidunt lectus. In efficitur mauris quis sapien rhoncus efficitur. Integer maximus feugiat egestas. Integer eu nibh auctor, commodo mauris in, sodales mauris.\
        <br />Donec ornare enim sit amet ex semper, a interdum tortor mattis. Maecenas tempor interdum sapien. Nullam diam sem, consequat eu fringilla ac, placerat in erat. Fusce eleifend erat vitae lacus aliquam efficitur. Curabitur rutrum, dolor ut cursus lacinia, sem lorem suscipit nunc, ut ullamcorper eros purus et metus. Vestibulum elit orci, ultrices vitae mauris sit amet, tristique tristique felis. Sed vestibulum consequat ante, hendrerit tincidunt ex ornare id. Curabitur nec dolor vestibulum, egestas odio a, ullamcorper nunc. Phasellus maximus laoreet eros ut efficitur. Nulla quis dolor ac nisl aliquam tincidunt. Aliquam erat volutpat. Cras vel metus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat magna metus, nec iaculis mauris scelerisque et. Vestibulum vel tristique urna, non convallis ante. \
        <br />Nunc fringilla sapien vitae erat pretium, vitae rutrum mi malesuada. Sed ut elit nec diam suscipit vestibulum. Aliquam in bibendum sem. Fusce justo tortor, lobortis id orci in, viverra facilisis odio. Maecenas non enim feugiat, accumsan ipsum non, eleifend enim. Suspendisse ac libero ipsum. Donec a aliquet nibh, ut sodales justo. Nam sit amet lacinia arcu. Vestibulum a volutpat neque. Vestibulum nulla mi, faucibus sed odio vel, gravida rhoncus ipsum. Sed a viverra purus. Pellentesque quis diam massa. Curabitur posuere iaculis tempor. Nullam sollicitudin, urna at dictum volutpat, felis dolor egestas nibh, eu pulvinar enim tellus a sapien. Nunc at quam ex. Etiam dictum euismod ex sit amet pharetra.\
        <br />Etiam ac lorem erat. Vestibulum a rhoncus diam, id pellentesque enim. Donec elementum sem volutpat, laoreet ante eu, suscipit diam. Praesent ultricies vehicula ligula, eget pellentesque mi lobortis vitae. Vivamus dignissim, lacus quis eleifend mollis, ante mauris aliquet sem, quis porttitor lorem nunc id nulla. Duis maximus tortor ante, vitae rhoncus neque pharetra in. Integer posuere arcu non urna aliquam egestas. Maecenas tristique, libero vel rhoncus posuere, leo sapien euismod augue, vitae luctus magna augue quis massa. Nulla nec felis et lacus rutrum laoreet. Donec pulvinar auctor tempor. Integer vitae urna lectus. Integer tincidunt nisl at velit luctus, non fermentum dolor efficitur. Quisque lobortis imperdiet urna, non pellentesque mauris mattis vel. Nullam congue et diam eget molestie. In hac habitasse platea dictumst.\
        <br />Nullam felis arcu, venenatis nec aliquet ac, feugiat ut elit. Nulla ullamcorper bibendum quam nec volutpat. In sed ex finibus, rhoncus mi quis, fermentum tortor. Suspendisse ornare, diam et aliquet gravida, risus purus ultricies elit, et pretium turpis mauris vel magna. Curabitur dictum leo nec cursus elementum. Integer eget ante risus. In finibus nibh eget ipsum elementum maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi eleifend nisl lorem. Curabitur vulputate ultrices lectus, eu lobortis urna porta eget. Nam arcu massa, congue sit amet dolor eget, ornare lacinia dui.\
        <br />Ut nec congue ex. Donec lorem felis, volutpat at massa sed, scelerisque efficitur dui. Praesent eget ex interdum, mollis odio quis, commodo risus. Vivamus aliquet massa in ipsum gravida, at dapibus urna sodales. Aenean massa nisi, porttitor eu dolor et, sagittis suscipit est. Donec eget imperdiet tortor. Duis ut velit sed augue porta semper sed quis orci. Fusce facilisis scelerisque diam, sit amet pulvinar felis hendrerit sed. Mauris finibus condimentum risus a vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium vitae erat non auctor. Quisque rutrum suscipit turpis vitae tincidunt. Aliquam erat volutpat.\
        <br />Mauris at viverra odio. Etiam nec mollis tortor, non eleifend nulla. In turpis elit, finibus et ipsum eu, rutrum convallis risus. Maecenas varius lorem id felis ullamcorper, commodo consectetur lacus interdum. Duis at libero quis nulla bibendum dignissim non ut diam. Sed tempus, nunc in efficitur elementum, dui metus laoreet tortor, in scelerisque tellus nibh eget elit. Cras tincidunt, lacus quis rhoncus pretium, felis leo pretium ipsum, sed vulputate eros metus ut purus. Nunc vehicula ligula eget metus auctor, eget accumsan lorem fermentum. Vestibulum nec mauris turpis. Nullam euismod facilisis odio, a bibendum metus vestibulum eu. In turpis neque, ultrices a tortor non, lobortis accumsan lorem.\
        <br />In interdum auctor sapien. Donec in interdum magna, nec aliquet odio. Nam viverra, odio at lacinia molestie, purus neque consequat felis, eget pellentesque quam dui id purus. Morbi at felis orci. Suspendisse pellentesque auctor arcu, et congue dui condimentum quis. Curabitur dictum odio quis libero imperdiet, quis tincidunt libero iaculis. Suspendisse in velit non orci tincidunt pretium ut eget tortor. In a congue velit. Nulla a enim nisi. Phasellus molestie justo sit amet tortor rutrum ultrices vitae nec erat. Quisque semper, nisi at scelerisque congue, ipsum lectus tristique urna, nec scelerisque nisi velit sed dolor. Nulla facilisi. In sed vulputate justo. Phasellus eget ipsum tellus. Morbi sodales purus ligula, nec dignissim enim suscipit et.\
        <br />In hac habitasse platea dictumst. Donec porttitor dapibus sem, sed iaculis orci blandit quis. Phasellus eleifend libero metus, eget fringilla est ultrices et. Vestibulum ligula nibh, faucibus non iaculis eu, elementum at purus. Ut interdum velit eu mi porttitor, eget ultrices augue tempor. Etiam nec ante fermentum, molestie ex nec, elementum lacus. Praesent tempus.\
        "
    },
    {

        "id": "article_5",
        "title": "Java Lesson 2",
        "author": "Nilupul Sandeepa",
        "publishedDate": "28/06/2021",
        "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit non dolor et semper. Nulla diam elit, semper sit amet ante in, efficitur efficitur velit. Etiam id ultricies purus, iaculis mollis urna. Proin a elementum felis. Nullam varius tristique porttitor. Quisque commodo ornare elit nec faucibus. Phasellus erat ante, vulputate non lorem eget, imperdiet elementum est. Donec sagittis nibh non vehicula tincidunt.",
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus nibh nec justo fringilla egestas. Cras vitae ex volutpat, finibus libero vel, dictum felis. In eu elementum nisl. Etiam at augue tristique, pretium lectus eget, laoreet tellus. Pellentesque varius magna libero, nec dapibus urna sagittis ut. Donec fringilla ex ex, id consectetur massa aliquam ut. Fusce ullamcorper sagittis luctus. Curabitur ac sapien in lacus volutpat ultrices at vel lectus. In suscipit lacus lorem, sed varius dolor rutrum eu. \
        <br />Nullam dignissim euismod nulla, vel dignissim tellus pellentesque eu. Vivamus elementum arcu ac efficitur ornare. Pellentesque nec pellentesque mauris. Phasellus consequat ex non enim faucibus fringilla. Integer sodales sit amet elit nec lobortis. Morbi aliquet vitae urna ac vehicula. Sed eget laoreet diam. Duis sit amet scelerisque velit. Cras gravida nibh et mauris elementum faucibus. Morbi egestas consectetur ornare. Aenean et odio a tellus pellentesque condimentum ac et libero. Sed pharetra tristique lacus, sed ultricies arcu consequat quis. Aliquam sed aliquam orci, ac tincidunt lectus. In efficitur mauris quis sapien rhoncus efficitur. Integer maximus feugiat egestas. Integer eu nibh auctor, commodo mauris in, sodales mauris.\
        <br />Donec ornare enim sit amet ex semper, a interdum tortor mattis. Maecenas tempor interdum sapien. Nullam diam sem, consequat eu fringilla ac, placerat in erat. Fusce eleifend erat vitae lacus aliquam efficitur. Curabitur rutrum, dolor ut cursus lacinia, sem lorem suscipit nunc, ut ullamcorper eros purus et metus. Vestibulum elit orci, ultrices vitae mauris sit amet, tristique tristique felis. Sed vestibulum consequat ante, hendrerit tincidunt ex ornare id. Curabitur nec dolor vestibulum, egestas odio a, ullamcorper nunc. Phasellus maximus laoreet eros ut efficitur. Nulla quis dolor ac nisl aliquam tincidunt. Aliquam erat volutpat. Cras vel metus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat magna metus, nec iaculis mauris scelerisque et. Vestibulum vel tristique urna, non convallis ante. \
        <br />Nunc fringilla sapien vitae erat pretium, vitae rutrum mi malesuada. Sed ut elit nec diam suscipit vestibulum. Aliquam in bibendum sem. Fusce justo tortor, lobortis id orci in, viverra facilisis odio. Maecenas non enim feugiat, accumsan ipsum non, eleifend enim. Suspendisse ac libero ipsum. Donec a aliquet nibh, ut sodales justo. Nam sit amet lacinia arcu. Vestibulum a volutpat neque. Vestibulum nulla mi, faucibus sed odio vel, gravida rhoncus ipsum. Sed a viverra purus. Pellentesque quis diam massa. Curabitur posuere iaculis tempor. Nullam sollicitudin, urna at dictum volutpat, felis dolor egestas nibh, eu pulvinar enim tellus a sapien. Nunc at quam ex. Etiam dictum euismod ex sit amet pharetra.\
        <br />Etiam ac lorem erat. Vestibulum a rhoncus diam, id pellentesque enim. Donec elementum sem volutpat, laoreet ante eu, suscipit diam. Praesent ultricies vehicula ligula, eget pellentesque mi lobortis vitae. Vivamus dignissim, lacus quis eleifend mollis, ante mauris aliquet sem, quis porttitor lorem nunc id nulla. Duis maximus tortor ante, vitae rhoncus neque pharetra in. Integer posuere arcu non urna aliquam egestas. Maecenas tristique, libero vel rhoncus posuere, leo sapien euismod augue, vitae luctus magna augue quis massa. Nulla nec felis et lacus rutrum laoreet. Donec pulvinar auctor tempor. Integer vitae urna lectus. Integer tincidunt nisl at velit luctus, non fermentum dolor efficitur. Quisque lobortis imperdiet urna, non pellentesque mauris mattis vel. Nullam congue et diam eget molestie. In hac habitasse platea dictumst.\
        <br />Nullam felis arcu, venenatis nec aliquet ac, feugiat ut elit. Nulla ullamcorper bibendum quam nec volutpat. In sed ex finibus, rhoncus mi quis, fermentum tortor. Suspendisse ornare, diam et aliquet gravida, risus purus ultricies elit, et pretium turpis mauris vel magna. Curabitur dictum leo nec cursus elementum. Integer eget ante risus. In finibus nibh eget ipsum elementum maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi eleifend nisl lorem. Curabitur vulputate ultrices lectus, eu lobortis urna porta eget. Nam arcu massa, congue sit amet dolor eget, ornare lacinia dui.\
        <br />Ut nec congue ex. Donec lorem felis, volutpat at massa sed, scelerisque efficitur dui. Praesent eget ex interdum, mollis odio quis, commodo risus. Vivamus aliquet massa in ipsum gravida, at dapibus urna sodales. Aenean massa nisi, porttitor eu dolor et, sagittis suscipit est. Donec eget imperdiet tortor. Duis ut velit sed augue porta semper sed quis orci. Fusce facilisis scelerisque diam, sit amet pulvinar felis hendrerit sed. Mauris finibus condimentum risus a vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium vitae erat non auctor. Quisque rutrum suscipit turpis vitae tincidunt. Aliquam erat volutpat.\
        <br />Mauris at viverra odio. Etiam nec mollis tortor, non eleifend nulla. In turpis elit, finibus et ipsum eu, rutrum convallis risus. Maecenas varius lorem id felis ullamcorper, commodo consectetur lacus interdum. Duis at libero quis nulla bibendum dignissim non ut diam. Sed tempus, nunc in efficitur elementum, dui metus laoreet tortor, in scelerisque tellus nibh eget elit. Cras tincidunt, lacus quis rhoncus pretium, felis leo pretium ipsum, sed vulputate eros metus ut purus. Nunc vehicula ligula eget metus auctor, eget accumsan lorem fermentum. Vestibulum nec mauris turpis. Nullam euismod facilisis odio, a bibendum metus vestibulum eu. In turpis neque, ultrices a tortor non, lobortis accumsan lorem.\
        <br />In interdum auctor sapien. Donec in interdum magna, nec aliquet odio. Nam viverra, odio at lacinia molestie, purus neque consequat felis, eget pellentesque quam dui id purus. Morbi at felis orci. Suspendisse pellentesque auctor arcu, et congue dui condimentum quis. Curabitur dictum odio quis libero imperdiet, quis tincidunt libero iaculis. Suspendisse in velit non orci tincidunt pretium ut eget tortor. In a congue velit. Nulla a enim nisi. Phasellus molestie justo sit amet tortor rutrum ultrices vitae nec erat. Quisque semper, nisi at scelerisque congue, ipsum lectus tristique urna, nec scelerisque nisi velit sed dolor. Nulla facilisi. In sed vulputate justo. Phasellus eget ipsum tellus. Morbi sodales purus ligula, nec dignissim enim suscipit et.\
        <br />In hac habitasse platea dictumst. Donec porttitor dapibus sem, sed iaculis orci blandit quis. Phasellus eleifend libero metus, eget fringilla est ultrices et. Vestibulum ligula nibh, faucibus non iaculis eu, elementum at purus. Ut interdum velit eu mi porttitor, eget ultrices augue tempor. Etiam nec ante fermentum, molestie ex nec, elementum lacus. Praesent tempus.\
        "
    }
];

module.exports.articles = articles;

    මෙහිදී සිදුවන්නේ articles නම් JSON Object Array එකක් සෑදීමයි. Array එක තුළ ඇති සෑම JSON Object එකක්ම Article එකක් වන අතර, Article එකක Title, Author, Published Date, Summary හා Content යන තොරතුරු ඇතුලත් වේ. ඉන් පසුව module.exports.articles = articles; භාවිතා කර එම articles JSON Object Array එක වෙනත් JavaScript File එකක් තුලදී භාවිතා කිරීමට හැකියාව ලබාදී තිබේ. දැන් articles.js එක තුල ඇති articles JSON Object Array එක server.js එක තුලට මේ ආකාරයෙන් Import කරගමු.

    const { articles } = require('./articles');

    දැන් Webpage එකට articles ලබාදීම සඳහා Server එකෙහි Endpoint එකක් පහත ආකාරයට සකසාගමු.

app.get("/articles", (request, response) => {
    var authHeader = request.headers["authorization"];
    if ((session[authHeader] != null) && (session[authHeader] != undefined)) {
        response.json(articles);
    } else {
        response.statusCode = 401;
        response.json({"status": "failed", "message": "Currently not logged in"});
    }
});

    මෙහිදී අපි User Login වී ඇතිදැයි සෙවීම පළමුව සිදුකරයි. ඒ සඳහා Authorization Header එක භාවිතා කරයි. එහිදී සිදුවන්නේ සාර්ථකව Login වූ පසු User ට LocalStorage එකෙහි රඳවා ගැනීමට ලබාදුන් Email Address එක Authorization Header එක යටතේ නැවත Server එකට ගෙන්වා ගැනීමයි. එම Email Address එක session Object එක තුල තිබේදැයි පරීක්ශා කිරීමෙන් User Login වී ඇතිදැයි සෙවීම සිදුකරයි. එලෙස Login වී ඇත්නම් articles JSON Object Array එක Webpage එකට යැවීම සිදු කරයි. එසේ නොමැතිනම් අසාර්ථක බව Webpage එකට යැවීම සිදු කරයි. මීලගට ArticlesPage.html File එක පහත පරිදි වෙනස් කරගමු.

<!DOCTYPE html>
<html>

<head>
    <link href="assets/css/bulma.min.css" rel="stylesheet" />
    <link href="assets/css/styles.css" rel="stylesheet" />
    <script src="assets/js/scripts.js" type="text/javascript"></script>
    <title>My Blog</title>
</head>

<body onload="checkLogin()">
    <div class="box flex-wrap">
        <h1 class="subtitle is-1">My Blog</h1>
    </div>
    <div class="columns">
        <div class="column has-text-centered">
            <h3 class="title is-3">Articles</h3>
        </div>
    </div>
    <div class="columns is-centered">
        <div id="articles_container" class="column is-half">
        </div>
    </div>
</body>

</html>

    දැන් script.js File එකේ checkLogin() Function එක පහත පරිදි වෙනස් කරගන්න:

function checkLogin() {
    var checkingUserDetails = {
        "email": getLoggedInUserIdentifier()
    };

    var checkingRequest = new XMLHttpRequest();
    checkingRequest.onreadystatechange = function() {
        if(checkingRequest.readyState === XMLHttpRequest.DONE) {
            var status = checkingRequest.status;
            if (!(status === 0 || (status >= 200 && status < 400))) {
                alert("You have to login first");
                onLoginClick();
            } else {
                getArticles();
            }
        }
    }
    checkingRequest.open("POST", "http://localhost:3000/login_status", true);
    checkingRequest.setRequestHeader("Content-Type", "application/json");
    checkingRequest.send(JSON.stringify(checkingUserDetails));
}

    පසුව script.js එකට getArticles හා showArticles Functions පහත පරිදි එකතු කරගන්න.

function getArticles() {
    var articlesRequest = new XMLHttpRequest();
    articlesRequest.onreadystatechange = function() {
        if (articlesRequest.readyState === XMLHttpRequest.DONE) {
            var status = articlesRequest.status;
            if (!(status === 0 || (status >= 200 && status < 400))) {
                alert("You have to login first");
                onLoginClick();
            } else {
                var response = JSON.parse(articlesRequest.response);
                showArticles(response);
            }
        }
    }
    articlesRequest.open("GET", "http://localhost:3000/articles", true);
    articlesRequest.setRequestHeader("Authorization", getLoggedInUserIdentifier());
    articlesRequest.send();
}

function showArticles(articles) {
    var articlesContainer = document.getElementById("articles_container");
    articlesContainer.innerHTML = "";
    var articlesHTMLString = "";
    for (var i = 0; i < articles.length; i++) {
        articlesHTMLString += `<div class="tile is-ancestor"><div class="tile is-parent"><div class="tile is-child box">`;
        articlesHTMLString += `<p class="title"><a onclick="showArticle('${articles[i].id}')">${articles[i].id}</a></p>`;
        articlesHTMLString += `<p class="subtitle">${articles[i].author} - ${articles[i].publishedDate}</p>`;
        articlesHTMLString += `<p>${articles[i].summary}</p>`;
        articlesHTMLString += `</div></div></div>`;
    }
    articlesContainer.innerHTML = articlesHTMLString;
}

    මෙහිදී localhost:3000/articles යන Endpoint එකට GET Request එකක් යවන අතර එම Request එක සමග LocalStorage එකෙහි ඇති Email Address එකද Authorization Header එක ලෙස යවයි. පසුව ලැබෙන Response එකෙන් අපගේ ArticlesPage.html එකට Articles එකින් එක ඇතුලත් කරගැනීම සිදුකරගනී.

    අවසාන වශයෙන් Server එක Run කරගෙන Registration, Login ක්‍රියාවලි සම්පූර්ණ කිරීමෙන් අනතුරුව ArticlesPage.html Page එකෙහි Articles පෙන්වන ආකාරය බලාගත හැකිය. මීලග පාඩමෙන් එක් Article එකක් Click කල විට එම Article එක වෙනම Page එකක පෙන්වාගන්නේ කෙසේදැයි විමසා බලමු.