Signup Form Using Node.js and MongoDB
Last Updated :
08 May, 2024
Improve
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');
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");
<!DOCTYPE html>
<html>
<head>
<title> Signup Form</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
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>
<!DOCTYPE html>
<html>
<head>
<title> Signup Form</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
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.
