Signup Form Using Node.js and MongoDB

14 Oct, 2021
InstallationsFirst, we need to include a few packages for our Nodejs application.
npm install express --save
Express allows us to set up middlewares to respond to HTTP Requests.
npm install body-parser --save
If you want to read HTTP POST data , you have to use the “body-parser” node module.
npm install mongoose --save
Mongoose is an object document modeling (ODM) layer which sits on the top of Node’s MongoDB driver.
app.js This is the main executable application file
app.js
index.html
signup_success.html
style.css
var express=require("express");var bodyParser=require("body-parser");  const mongoose = require('mongoose');mongoose.connect('mongodb://localhost:27017/gfg');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('signup_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");
<!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">                                  <form action="/sign_up" method="post">                                  <h1> Signup form </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" value="Submit" /><br>                                  </form>                              </div>                                            <div class="col-md-3">        </div>                      </div>    </div></body></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>
.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 #767474;}input[type=submit] {    font-family: 'Helvetica', serif;    width: 100%;    background-color: #767474;    border: none;    color: white;    padding: 16px 32px;    margin: 4px 2px;    border-radius: 10px;}
Start the MongoDB.Run app.js file
node app.js
Go to the browser and open http://127.0.0.1:3000/
Fill the above form
This will add a record named “David Smith” in MongoDB.Let’s have a check in MongoDB for the same record.The record is now saved in the “gfg” database in “details” collection.
latikesh2121
MongoDB
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between promise and async await in Node.js
Mongoose | findByIdAndUpdate() Function
Installation of Node.js on Windows
JWT Authentication with Node.js
Node.js forEach() function
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React