{"id":828,"date":"2024-08-27T03:31:20","date_gmt":"2024-08-27T03:31:20","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=828"},"modified":"2024-08-28T13:33:52","modified_gmt":"2024-08-28T13:33:52","slug":"nodejs-simple-create-a-simple-membership-registration-page","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/08\/27\/nodejs-simple-create-a-simple-membership-registration-page\/","title":{"rendered":"[nodejs]\uac04\ub2e8\ud55c \ud68c\uc6d0\uac00\uc785 \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30 \/ Simple Create a simple membership registration page"},"content":{"rendered":"\n

\ud68c\uc6d0\uac00\uc785 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c post \ub370\uc774\ud130 \uc804\uc1a1 \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.
To create a membership registration page, you must use the post data transmission method.<\/p>\n\n\n\n

\uba3c\uc800 \uc774 \ud3ec\uc2a4\ud2b8\ub97c \ubcf4\uae30 \uc804\uc5d0 \ubaa8\ub4c8 \ub9cc\ub4e4\uae30 \ud3ec\uc2a4\ud2b8<\/a>\ub97c \uba3c\uc800 \ubcf4\uae38 \ubc14\ub78d\ub2c8\ub2e4.
Please read “Create a module<\/a>” post first before reading this post.<\/p>\n\n\n\n

1.npm \ubaa8\ub4c8 \uc124\uce58(npm module install)<\/strong>
-POST\ubc29\uc2dd\uc758 \ub370\uc774\ud130 \uc804\uc1a1\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c body-parser\ubaa8\ub4c8\uc744 \uc124\uce58 \ud569\ub2c8\ub2e4.
To use POST-type data transmission, you must install the body-parser module.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

-package.son\ud30c\uc77c\uc5d0\uc11c \ubaa8\ub4c8\uc124\uce58 \uc0c1\ud0dc\ub97c \ud655\uc778\ud569\ub2c8\ub2e4.
Check the module installation status in the package.son file.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2.\ucf54\ub4dc\uc124\uba85(Code explanation)<\/strong>
– server.js\ud30c\uc77c\uc744 \uc791\uc131\ud569\ub2c8\ub2e4. \/ Write sever.js<\/p>\n\n\n\n

– body-parser\ucf54\ub4dc\ub97c \uc785\ub825\ud569\ub2c8\ub2e4. \/ Enter the body-parser code.<\/p>\n\n\n\n

– { extended: false }\ub294 false\ub85c \uc14b\ud305\ud569\ub2c8\ub2e4. true\uc774\uba74 get\ubc29\uc2dd\uc744 \uc704\ud574\uc11c \ub2e4\ub978 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.
{ extended: false } is set to false. If true, another module must be used for the get method.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

-app.get\uc5d0\uc11c memberInput.ejs\ud30c\uc77c\uc744 \ubd88\ub7ec \uc635\ub2c8\ub2e4.
-Load the memberInput.ejs file from app.get.<\/p>\n\n\n\n

– app.post()\ub294 post\ub370\uc774\ud130\ub97c \ubc1b\uae30 \uc704\ud55c \ub77c\uc6b0\ud130 \uc785\ub2c8\ub2e4.
app.post() is a router for receiving post data.<\/p>\n\n\n\n

-req.body.[userid,username,password]\uc5d0\uc11c body\ub294 post\ub370\uc774\ud130\ub97c \ubc1b\uae30 \uc704\ud55c \ubd80\ubd84\uc785\ub2c8\ub2e4.
In req.body.[userid,username,password], body is the part to receive post data.<\/p>\n\n\n\n

– userInsert()\ud568\uc218\uc758 \ub3d9\uae30\uc801\uc778 \uc791\ub3d9\uc744 \uc704\ud574\uc11c async(req, res)\ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
For synchronous operation of the userInsert() function, use the async(req, res) keyword.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

-\uc624\ub958\ubc1c\uc0dd\uc744 \uce90\uce58\ud558\uae30 \uc704\ud574\uc11c try ~ catch \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
Use the try ~ catch statement to catch error occurrences.<\/p>\n\n\n\n

-\uc804\ub2ec \ubc1b\uc740 post\ub370\uc774\ud130\ub97c mysql db\uc5d0 \uc800\uc7a5\ud558\uace0 \ud574\ub2f9 \ubcc0\uc218\ub97c test.ejs \ud30c\uc77c\uc5d0 \uc804\ub2ec\ud569\ub2c8\ub2e4
Save the received post data in mysql db and pass the corresponding variable to the test.ejs file.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

-mysql database<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

-\ub098\uba38\uc9c0\ub294 \uc544\ub798 \uc804\uccb4 \ucf54\ub4dc\uc640 \uc774\uc804 \ud3ec\uc2a4\ud2b8\ub97c \ucc38\uc870\ud558\uc138\uc694
For the rest, see the full code below and the previous post.<\/p>\n\n\n\n

3.\ube0c\ub77c\uc6b0\uc800 \ud14c\uc2a4\ud2b8 \/browser test<\/strong>
– [your doamin or host name]:3000\/memberinput<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

–\uc2e4\ud589\uacb0\uacfc(Execution result)<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4.\uc804\uccb4\ucf54\ub4dc(full code) – server.js<\/strong><\/p>\n\n\n\n

\n\n\/\/server.js --> Commonjs type\nconst { createServer } = require('http');\nconst ejs = require('ejs'); \/\/ejs\nconst express = require('express'); \/\/express\nconst path = require('path'); \/\/path\nconst mysql = require('mysql2'); \/\/ mysql\nvar bodyParser = require('body-parser'); \/\/ post method \n\nconst app = express();\nconst server = createServer(app);\n\n\/\/ ejs settings\n\/\/-----------------------------------------------\napp.set('view engine','ejs');\napp.set('views','.\/public');\n\n\/\/bodyParser\napp.use(bodyParser.urlencoded({ extended: false }));\n\n\/\/ Serve static files from the 'public' directory\napp.use(express.static(path.join(__dirname, \"public\")));\n\n\/\/-----------------------------------------------\n\/\/ mysql db information\nconst dbname = \"your_db_name\";\nconst hostname = \"localhost\";\nconst dbuser = \"your_db_user\";\nconst dbpassword = \"your_db_password\";\n\n\/\/ module import\nconst {\n  userInsert,\n} = require(\".\/mysqldb\");\n\n\n\n\/*---------------------------------------------------------------------------\n  member\n---------------------------------------------------------------------------*\/\n\n\/\/ memberInput.ejs \ubd88\ub7ec\uc624\uae30 \/ Load login.ejs\napp.get(\"\/memberinput\", (req, res) => {\n\n  res.render('memberInput');\n      \n});\n\n\/\/ \ud68c\uc6d0\uac00\uc785 \/ join the membership\napp.post(\"\/join\", async(req, res) => {\n\n  \/\/ post method\n  var userid = req.body.userid;\n  var username = req.body.username;\n  var postPassword = req.body.password;\n\n  const connection = mysql.createConnection({\n    host     : hostname,\n    user     : dbuser,\n    password : dbpassword,\n    database : dbname\n  });\n  \n \n  try{\n    \/\/ db insert\n    await userInsert(hostname, dbuser, dbpassword, dbname, userid,postPassword,username)\n    \/\/ load test.ejs\n    res.render('test',{message:userid,message2:postPassword,message3:username});\n\n  }catch(error){\n    \/\/ print error message\n    console.error('Error fetching data:', error);\n    res.status(500).send('Internal Server Error');\n\n  }\n\n});\n\n\n\/\/-----------------------------------------------\n\n\n\/\/ Start the server\nconst PORT = process.env.PORT || 3000;\nserver.listen(PORT, () => {\n  console.log(`Server is running on port ${PORT}`);\n});\n<\/code><\/pre>\n\n\n\n
\uc804\uccb4\ucf54\ub4dc(full code) – mysqldb.js<\/strong><\/p>\n\n\n\n
const mysql = require('mysql2'); \/\/ \n\nasync function userInsert(hostname, dbuser, dbpassword, dbname, userid,password,name) {\n    const connection = mysql.createConnection({\n        host: hostname,\n        user: dbuser,\n        password: dbpassword,\n        database: dbname\n    });\n\n    return new Promise((resolve, reject) => {\n        var sql = 'INSERT INTO user(userid,password,name) values(?,?,?)';\n        var values = [userid,password,name];\n        connection.query(sql, values, (error, rows) => {\n            if (error) {\n                reject(error);\n            } else {\n                resolve(rows);\n            }\n        });\n    }).finally(() => {\n        connection.end((err) => {\n            if (err) {\n                console.error('Error closing the connection:', err);\n            } else {\n                \/\/\n            }\n        });\n    });\n}\nmodule.exports = { userInsert };<\/code><\/pre>\n\n\n\n
\uc804\uccb4\ucf54\ub4dc(full code) – \/public\/memberInput.ejs<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        .input-div {\n            border: 0px solid black;\n            margin-top: 100px;\n            margin-bottom: 100px;\n            margin-right: 150px;\n            margin-left: 80px;\n        }\n    <\/style>\n    <!-- Latest compiled and minified CSS -->\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n    <!-- Latest compiled JavaScript -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n    <title>member<\/title>\n<\/head>\n<body>\n\n    <header style=\"margin-left: 10px;\">\n        <nav>\n            <!--menu area empty\/\/--->\n        <\/nav>\n    <\/header>\n    \n\n<div class=\"input-div\">\n    <h1>MEMBER INPUT<\/h1>\n    <form action=\"\/join\" method=\"post\">\n        <div>\n                <label for=\"title-label\" class=\"form-label\">ID:<\/label>\n                <input type=\"text\" name=\"userid\" class=\"form-control\" required>\n        <\/div>\n        <div>\n            <label for=\"title-label\" class=\"form-label\">NAME:<\/label>\n            <input type=\"text\" name=\"username\" class=\"form-control\" required>\n    <\/div>\n        <div>\n            <label for=\"title-label\" class=\"form-label\">PASSWORD:<\/label>\n            <input type=\"password\" name=\"password\" class=\"form-control\" required>\n    <\/div>\n                <button class=\"btn btn-primary\">submit<\/button>\n    <\/form>\n<\/div>\n\n\n<footer>\n    <!--empty-->\n<\/footer>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\uc804\uccb4\ucf54\ub4dc( full code ) – test.ejs<\/strong><\/p>\n\n\n\n
userid: <%=message%> <br>\npassword : <%=message2%> <br>\nname : <%=message3%><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\ud68c\uc6d0\uac00\uc785 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c post \ub370\uc774\ud130 \uc804\uc1a1 \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.To create a membership registration page, you must use the post data transmission method. \uba3c\uc800 \uc774 \ud3ec\uc2a4\ud2b8\ub97c \ubcf4\uae30 \uc804\uc5d0 \ubaa8\ub4c8 \ub9cc\ub4e4\uae30 \ud3ec\uc2a4\ud2b8\ub97c \uba3c\uc800 \ubcf4\uae38 \ubc14\ub78d\ub2c8\ub2e4.Please read “Create a module” post first before reading this post. 1.npm \ubaa8\ub4c8 \uc124\uce58(npm module install)-POST\ubc29\uc2dd\uc758 \ub370\uc774\ud130 \uc804\uc1a1\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c body-parser\ubaa8\ub4c8\uc744 \uc124\uce58 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,1],"tags":[],"class_list":["post-828","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":18,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":880,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/828\/revisions\/880"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}