home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> MongoDB

แบบฟอร์มลงทะเบียนโดยใช้ Node และ MongoDB

ในบทความนี้ เราจะสร้างแบบฟอร์มลงทะเบียนผู้ใช้อย่างง่ายที่มีพารามิเตอร์บางอย่าง เมื่อคลิกบันทึก รายละเอียดผู้ใช้ทั้งหมดจะถูกบันทึกไว้ในฐานข้อมูล MongoDB

การติดตั้ง

ก่อนดำเนินการสร้างแบบฟอร์มลงทะเบียน ต้องติดตั้งการพึ่งพาต่อไปนี้บนระบบของคุณสำเร็จ

  • ตรวจสอบและติดตั้ง express โดยใช้คำสั่งต่อไปนี้ Express ใช้เพื่อตั้งค่ามิดเดิลแวร์เพื่อตอบสนองต่อคำขอ HTTP

npm install express --save

  • ตั้งค่าโมดูลโหนด "body-parser" สำหรับอ่านข้อมูล HTTP POST

npm install body-parser --save

  • ตั้งค่า "พังพอน" เนื่องจากอยู่บนไดรเวอร์ MongoDB ของโหนด

npm install mongoose --save

ตัวอย่างที่ 1

  • สร้างไฟล์ต่อไปนี้และคัดลอกและวางโค้ดสำหรับไฟล์แต่ละไฟล์ที่ระบุด้านล่าง -

    • app.js

    • สาธารณะ (สร้างโฟลเดอร์ใหม่และวางไฟล์ด้านล่างในโฟลเดอร์นี้)

      • index.html

      • Success.html

      • style.css

  • ตอนนี้ ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเรียกใช้แอปพลิเคชัน

node app.js

ตัวอย่างโค้ด

app.js 

var express=require("express");
var bodyParser=require("body-parser");

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/tutorialsPoint');
var db=mongoose.connection;
db.on('error', console.log.bind(console, "connection error"));
db.once('open', function(callback){
   console.log("connection succeeded");
})
var app=express()

app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
   extended: true
}));

app.post('/sign_up', function(req,res){
   var name = req.body.name;
   var email =req.body.email;
   var pass = req.body.password;
   var phone =req.body.phone;

   var data = {
      "name": name,
      "email":email,
      "password":pass,
      "phone":phone
   }
   db.collection('details').insertOne(data,function(err, collection){
   if (err) throw err;
      console.log("Record inserted Successfully");
   });
   return res.redirect('success.html');
})

app.get('/',function(req,res){
   res.set({
      'Access-control-Allow-Origin': '*'
   });
   return res.redirect('index.html');
}).listen(3000)

console.log("server listening at port 3000");

index.html 

<!DOCTYPE html>
<html>
<head>
<title> Signup Form</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
<div class="row">
</div>
<div class="main">
   <form action="/sign_up" method="post">
   <h1>Welcome to Tutorials Point - SignUp</h1>
   <input class="box" type="text" name="name" id="name" placeholder="Name" required /><br>
   <input class="box" type="email" name="email" id="email" placeholder="E-Mail " required /><br>
   <input class="box" type="password" name="password" id="password" placeholder="Password " required/><br>
   <input class="box" type="text" name="phone" id="phone" placeholder="Phone Number " required/><br>
   <br>
   <input type="submit" id="submitDetails" name="submitDetails" class="registerbtn" value="Submit" />   <br>
   </form>
</div>
<div class="">
</div>
</div>
</div>
</body>
</html>

success.html 

<!DOCTYPE html>
<html>
<head>
<title> Signup Form</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
   <div class="row">
   <div class="col-md-3">
</div>
<div class="col-md-6 main">
   <h1> Signup Successful</h1>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>

style.css 

.main{
   padding:20px;
   font-family: 'Helvetica', serif;
   box-shadow: 5px 5px 7px 5px #888888;
}
.main h1{
   font-size: 40px;
   text-align:center;
   font-family: 'Helvetica', serif;
}
input{
   font-family: 'Helvetica', serif;
   width: 100%;
   font-size: 20px;
   padding: 12px 20px;
   margin: 8px 0;
   border: none;
   border-bottom: 2px solid #4CAF50;
}
input[type=submit] {
   font-family: 'Helvetica', serif;
   width: 100%;
   background-color: #4CAF50;
   border: none;
   color: white;
   padding: 16px 32px;
   margin: 4px 2px;
   border-radius: 10px;
}
.registerbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: 100%;
   opacity: 0.9;
}

ผลลัพธ์

ตอนนี้ ลองใช้ลิงก์นี้บนเว็บเบราว์เซอร์ของคุณ คุณจะเห็นหน้าลงทะเบียน

http://127.0.0.1:3000/index.html หรือ http://localhost:3000/index.html

C:\Users\tutorialsPoint\> node app.js
server listening at port 3000
(node:73542) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
(node:73542) [MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
connection succeeded

หน้าลงทะเบียน

แบบฟอร์มลงทะเบียนโดยใช้ Node และ MongoDB

หน้าความสำเร็จ

แบบฟอร์มลงทะเบียนโดยใช้ Node และ MongoDB

บันทึกสำเร็จใน mongoDB

แบบฟอร์มลงทะเบียนโดยใช้ Node และ MongoDB