Open In App

Signup Form Using Node.js and MongoDB

Last Updated : 18 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 mapping (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="http://localhost:3000/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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads