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