Tạo form Đăng ký (SignUp) với Node.js và MongoDB

Giới thiệu

Xây dựng form đăng ký người dùng đơn giản lưu dữ liệu vào MongoDB sử dụng Node.js, Express, Mongoose.

Cài đặt phụ thuộc

• Express: Framework web cho Node.js.

  npm install express --save

• body-parser: Middleware đọc dữ liệu POST.

  npm install body-parser --save

• Mongoose: ODM (Object Data Modeling) cho MongoDB.

  npm install mongoose --save

Cấu trúc thư mục

project/
├── app.js
└── public/
    ├── index.html
    ├── success.html
    └── style.css

Mã nguồn

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");

public/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">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="main">
      <form action="/sign_up" method="post">
        <h1>Welcome to Tutorials Point - SignUp</h1>
        <input class="box" type="text" name="name" placeholder="Name" required /><br>
        <input class="box" type="email" name="email" placeholder="E-Mail" required /><br>
        <input class="box" type="password" name="password" placeholder="Password" required/><br>
        <input class="box" type="text" name="phone" placeholder="Phone Number" required/><br>
        <br>
        <input type="submit" id="submitDetails" class="registerbtn" value="Submit" />
      </form>
    </div>
  </div>
</body>
</html>

public/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">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="col-md-6 main">
      <h1> Signup Successful</h1>
    </div>
  </div>
</body>
</html>

public/style.css

.main {
  padding: 20px;
  font-family: 'Helvetica', serif;
  box-shadow: 5px 5px 7px 5px #888888;
}
.main h1 { font-size: 40px; text-align: center; }
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] {
  background-color: #4CAF50; color: white; padding: 16px 32px;
  margin: 4px 2px; border-radius: 10px; border: none;
}

Chạy ứng dụng

node app.js

Truy cập https://localhost:3000 để xem form đăng ký. Dữ liệu sẽ lưu vào collection details trong database tutorialsPoint.