Skip to content
Related Articles

Related Articles

Signup Form Using Nodejs and MongoDB
  • Difficulty Level : Hard
  • Last Updated : 28 Aug, 2019

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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :