Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Signup Form Using Node.js and MongoDB

  • Difficulty Level : Hard
  • Last Updated : 14 Oct, 2021

Installations
First, 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




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

index.html




<!DOCTYPE html>
<html>
<head>
    <title> Signup Form</title>
          
          
<link rel="stylesheet" 
href=
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>    

signup_success.html




<!DOCTYPE html>
<html>
<head>
    <title> Signup Form</title>
<link rel="stylesheet" 
href=
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 #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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!