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

    අපි පසුගිය පාඩම් දෙකෙන් GET Request හා POST Request Handle කරන්නෙ කොහොමද කියල ඉගෙන ගත්තා. මේ පාඩමෙන් අපි බලමු ඒ ඉගෙන ගත් කරුණු භාවිතයෙන් සරල Website එකක් Node.js backend එකක් සමග නිර්මාණය කරගන්නෙ කොහොමද කියලා. මෙහිදී අපි ඉතා සරලව තාක්ෂණික ලිපි අඩංගු Website එකක් නිර්මානය කරගමු. මෙම ලිපි කියවීමට පරිශීලකයා මෙම Website එකේ ගිණුමක්(Account) සාදා තිබිය යුතු අතර ඒ ගිණුමට Login වී සිටිය යුතුය. මෙම Website එක Database එකක් සමග සම්බන්ධ කර ඇති සත්‍ය Website එකක් නොවන අතර, පසුගිය පාඩම් වලදී ඉගෙන ගත් කරුනු භාවිතා කරන ආකාරය සාකච්චා කිරීමට සකසනු ලබන ව්‍යාජ වෙබ් අඩවියකි (Dummy Website). මුලින්ම අපි භාවිතා කරන Webpages මොනවාද. API Endpoints මොනවාද සහ ක්‍රියාවලිය සිදුවන ආකාරය කෙසේද යන්න සැලසුමක් සකසාගමු. 

  • localhost:3000/ 
    • GET Method
    • Website එකෙහි Home page එකට ගමන් කිරීමට භාවිතා කරයි.
    • HomePage.html Webpage එක පරිශීලකයාට පෙන්වයි.
  • localhost:3000/register
    • GET Method
    • Website එකෙහි Register page එකට ගමන් කිරීමට භාවිතා කරයි.
    • RegisterPage.html Webpage එක පරිශීලකයාට පෙන්වයි.
  • localhost:3000/register
    • POST Method
    • Register page හි ඇතුලත් කරන දත්ත Server එකට යවා පරිශීලකයා හට නව ගිණුමක් විවෘත කර දෙනු ලබයි.
    • සාර්ථකව නව ගිණුමක් විවෘත කල පසු එක පරිශීලකයාට පෙන්වයි.
  • localhost:3000/login
    • GET Method
    • Website එකෙහි Login page එකට ගමන් කිරීමට භාවිතා කරයි.
    • LoginPage.html Webpage එක පරිශීලකයාට පෙන්වයි.
  • localhost:3000/login
    • POST Method
    • Login page හි ඇතුලත් කරන දත්ත Server එකට යවා Login කරනු ලබයි.
    • සාර්ථකව Login වූ පසු පරිශීලකයාට සියලු ලිපි සහිත Home page එක පෙන්වයි.
  • localhost:3000/posts/post1
    • GET Method
    • ලිපියක් මත Click කල පසු එම ලිපියේ ID එක URL එකේ Parameter එකක් ලෙස Server එකට යවයි.
    • Click කරන ලද ලිපියට අදාල සියලුම විස්තර නව පිටුවක පෙන්වයි.
  • localhost:3000/search
    • GET Method
    • Website එකෙහි Search page එකට ගමන් කිරීමට භාවිතා කරයි.
    • SearchPage.html Webpage එක පරිශීලකයාට පෙන්වයි.
  • localhost:3000/search?label=NodeJS
    • GET Method
    • URL එකේ Query Paramenter එකක් ලෙස label=NodeJS යන්න Server එකට යවා NodeJS label එක යටතේ ඇති ලිපි ලබා දෙන ලෙස Server එකෙන් ඉල්ලීමක් කරයි.
    • ඉල්ලුම් කරන ලද ල්ල් එක ඇති ලිපි පරිශීලකයාට පෙන්වයි.
    මෙම සැලසුමට අනුව අපි Website එක හා Node.js backend එක නිර්මාණය කරගන්නා ආකරය දැන් අපි බලමු. මේ සඳහා අපි පහත ආකාරයේ Folder Structure එකක් භාවිතා කරමු.


    මෙහි ප්‍රධාන Folder එක DummyWebsite වන අතර ඒ යටතේ server.js හා public Folder එක තිබේ. public Folder එක තුල සියලුම Webpages අන්තර්ගත වන අතර ඒ තුල අති assets Folder එක තුල අති css js හා images Folders තුල Webpages වලට අදාල css files, javascript files හා images අන්තර්ගත වේ.

1. පලමුව DummyWebsite Folder එකට command prompt හෝ terminal එක භාවිතා කර ගමන් කරන්න. දැන් පෙර පරිදි npm init command එක ලබාදී අදාල තොරතුරු අතුලත් කර Project එක සාදාගන්න. මීලගට Express.js install කරගැනීම සඳහා npm install express --save command එක ලබාදෙන්න. දැන් server.js එක පහත පරිදි වෙනස් කරගන්න.

    const express = require('express');
    const app = express();

2. අපි දැන් localhost:3000/ Endpoint එකට අදාල Backend සහ Website ක්‍රියාකාරීත්වය සකසා ගමු. මේ සඳහා පලමුව HomePage.html එක ඉතා සරලව සකසාගමු. මේ සඳහා Bulma නැමැති css framework එක භාවිතා කරන කරයි. මෙයද Bootstrap ආකාරයේ css framework එකක් වන අතර Bootstrap framework එකට වඩා ප්‍රමාණයෙන් අඩු සරල framework එකකි. bulma.io website එකෙන් එය Download කරගෙන එහි ඇති bumla.min.css file එක css Folder එකට Copy කරගන්න. දැන් css Folder එක තුල styles.css නමින් File එකක් නිර්මානය කරගෙන එම File එකට පහත Code එක ඇතුලත් කරන්න.
    .footer-button {
        display: flex;
        flex-basis: 0;
        flex-grow: 1;
        flex-shrink: 0;
    }
මීලගට js Folder එක තුල scripts.js නමින් File එකක් නිර්මාණය කර පහත code එක එයට අතුලත් කරන්න.
    function onRegisterClick() {
        window.location.href = "http://localhost:3000/register";
    }
    function onLoginClick() {
        window.location.href = "http://localhost:3000/login";
    }
දැන් public Folder එක තුල HomePage.html නමින් File එකක් නිර්මාණය කර පහත code එක එකතු කරන්න.
<!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>
    <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">Welcome</h3>
            <div class="columns">
                <div class="column is-half is-offset-one-quarter">
                    <div class="card">
                        <div class="card-content">
                            <div class="content">
                                Get access to more than a thousand tutorials. Learn NodeJS, Java, Swift, Python,
                                Android, and many other technologies by joining with us.
                            </div>
                        </div>
                        <footer class="card-footer">
                            <div class="buttons has-addons card-footer-item">
                                <button class="button is-success is-outlined footer-button" onclick="onRegisterClick()">Register</button>
                                <button class="button is-info is-outlined footer-button" onclick="onLoginClick()">Login</button>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
මෙහිදී HomePage.html එකේ Register හා Login Button දෙක පෙන්වන අතර Register Click කිරීමේදී localhost:3000:/register වෙත ගමන් කිරීම හා Login Click කිරීමේදී localhost:3000/login වෙත ගමන් කිරීම සිදු වේ. මෙම සාදාගත් HomePage.html එක Node.js Server එක භාවිතා කර Browser එකෙන් බලාගන්නා ආකාරය දැන් බලමු. මේ සඳහා අපේ server.js එක පහත පරිදි වෙනස් කරන්න.
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, '/public')));

app.get("/", (request, response) => {
    response.sendFile(path.join(__dirname, "/public/HomePage.html"));
});

app.listen(3000, (err) => {
    console.log("Server Running");
});
මෙහි විවිධ කොටස් වලින් සිදු වන්නෙ කුමක් දැයි විමසා බලමු.

1. const express = require('express');

    Install කරගත් Express.js Framework එක අපේ server.js File එකට අන්තර්ගත කරගැනීම සිදු කරගනී.

2. const path = require('path');

    මෙහිදී භාවිතා කර ඇති path Module එක Node.js මගින්ම ලබා දී ඇති Module එකක් වේ. මෙමගින් අපිට පහසුවෙන් අපගේ Project එක තුල ඇති යම් File එකක හෝ Folder එකක Path එක ලබාගත හැක. ඒවාගේම File/Folder Path දෙකක් එකට එකතු කිරීම වැනි තවත් ප්‍රයෝජනවත් පහසුකම් කිහිපයක් path Module එක සලසා දෙයි.

3. app.use(express.static(path.join(__dirname, '/public')));

    මෙහිදී සිදුවන්නේ අපගේ Website එකේ ඇති Asset Files එසේත් නැතිනම් වෙනස් නොවන Static Files Handle කිරීමයි. එනම් අපගේ Website එකේ Styles අඩංගු CSS Files, Script අඩංගු JS Files, ඒවාගේම Website එකට අවශ්‍ය කරන Image Files වැනි දෑ Webpage එක වෙනස් වූවාට වෙනස් නොවේ. මේවා Static Files වේ. නමුත් මෙවැනි Files විශාල ප්‍රමානයක් Website එකක තිබෙන බැවින් ඒ සෑම File එකටම app.get ලෙස Endpoints ලිවීම ප්‍රායෝගික නොවන නිසාවෙන් express.static භාවිතා කරයි. එමගින් එම Static Files ඉල්ලුම් කරන අවස්තාවේදී Express.js මගින්ම එවා Handle කරයි. මෙමගින් අනවශ්‍ය ලෙස Code ලිවීමට ගතවන කාලය ඉතිරි වේ.

    __dirname යනු අපගේ server.js File එක අති Folder එකේ Path එකයි. එනම් DummyWebsite Folder එක Hard Drive එකේ C Partition එකේ NodeJS Folder එක තුල ඇත්නම්, __dirname එක c:\NodeJS\DummyWebsite යන්න ලබා දේ. පසුව අපි path Module එකේ join භාවිතයෙන් __dirname එක හා අපගේ public Folder එක එකතු කර ගැනීම සිදුකරගනී. එවිට path එක c:\NodeJS\DummyWebsite\public එක සකස් වේ. එවිට අපගේ Browser මගින් අපගේ Webpage එකේ <link href="assets/css/styles.css" rel="stylesheet" /> මගින් styles.css File එක Server එකෙන් ඉල්ලුම් කරන විට Express.js මගින්ම c:\NodeJS\DummyWebsite\public\assets\css\styles.css යන්න Browser එකට ලබා දේ.

4. app.get("/", (request, response) => {

    පෙර ඉගෙන ගත් පරිදි Server පැමිනෙන localhost:3000/ Request එක Handle කිරීම මෙතනදී සිදුවේ.

5. response.sendFile(path.join(__dirname, "/public/HomePage.html"));

    මෙහිදී public Folder එක තුල තිබෙන HomePage.html File එක Response එක ලෙස Browser එකට යැවීම සිදුවේ

දැන් අපි RegisterPage.html නමින් File එකක් public Folder එක තුල නිර්මාණය කරගෙන එයට පහත Code එක ඇතුලත් කරන්න.

<!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>
    <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">Register</h3>
            <div class="columns">
                <div class="column is-half is-offset-one-quarter">
                    <div class="card">
                        <div class="card-content">
                            <div class="content">
                                <div class="field has-text-left">
                                    <label class="label">Name</label>
                                    <div class="control">
                                        <input id="reg_name" class="input" type="text" placeholder="John">
                                    </div>
                                </div>

                                <div class="field has-text-left">
                                    <label class="label">Email</label>
                                    <div class="control">
                                        <input id="reg_email" class="input" type="email" placeholder="john@email.com">
                                    </div>
                                </div>

                                <div class="field has-text-left">
                                    <label class="label">Password</label>
                                    <div class="control">
                                        <input id="reg_password" class="input" type="password" placeholder="johnpassword123">
                                    </div>
                                </div>

                                <div class="field has-text-left">
                                    <div class="control">
                                        <button class="button is-success is-fullwidth" onclick="register()">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
    මේ ආකාරයෙන්ම LoginPage.html නමින් public Folder එක තුල File එකක් සාදාගෙන එයට පහත Code එක එයට අතුලත් කරන්න.

<!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>
    <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">Login</h3>
            <div class="columns">
                <div class="column is-half is-offset-one-quarter">
                    <div class="card">
                        <div class="card-content">
                            <div class="content">
                                <div class="field has-text-left">
                                    <label class="label">Email</label>
                                    <div class="control">
                                        <input id="login_email" class="input" type="email" placeholder="john@email.com">
                                    </div>
                                </div>

                                <div class="field has-text-left">
                                    <label class="label">Password</label>
                                    <div class="control">
                                    <input id="login_password" class="input" type="password" placeholder="johnpassword123">
                                    </div>
                                </div>

                                <div class="field has-text-left">
                                    <div class="control">
                                        <button class="button is-info is-fullwidth" onclick="login()">Login</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
ඉන්පසුව server.js එකට පහත Code එකද එකතු කරගන්න.

app.get("/register", (request, response) => {
    response.sendFile(path.join(__dirname, "/public/RegisterPage.html"));
});

app.get("/login", (request, response) => {
    response.sendFile(path.join(__dirname, "/public/LoginPage.html"));
});
    මෙහිදී /register හා /login Endpoint දෙකට එන Request සඳහා අපි සාදාගත් RegisterPage.html හා LoginPage.html Webpage ලබාදීම සිදුවේ. දැන් පෙර පරිදිම Command Prompt හෝ Terminal භාවිතා කර DummyWebsite Folder එකේ ඇති server.js File එක node server යන Command එකෙන් Run කරගන්න. එය සාර්ථකව Run වූ පසු Browser එකේ localhost:3000/ URL එක Load කර බලන්න. එවිට අපි සාදාගත් HomePage.html එක පෙන්විය යුතු අතර එහි ඇති Register හා Login  Button Click කිරීමේදී RegisterPage.html හා LoginPage.html වෙත ගමන් කල යුතුය.
    අපි මෙම පාඩමෙන් සාර්ථකව Node.js හරහා Webpages ලබාදෙන ආකාරය ඉගෙන ගත් අතර මීලග පඩම් වලදී මෙම Dummy Website එකෙහි ඉතිරි වී ඇති ක්‍රියාකාරීත්වයන් ගොඩ නගමු.

නිලුපුල් සංදීප 24-06-2021

Comments

Post a Comment

Popular posts from this blog