Signup Form Using Node.js and MongoDB (original) (raw)
Last Updated : 08 May, 2024
**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' );
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" >
`` < 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.
