Signup Form Using Node.js and MongoDB
Installations
First, we need to include a few packages for our Nodejs application.
npm install express --saveExpress allows us to set up middlewares to respond to HTTP Requests.
npm install body-parser --saveIf you want to read HTTP POST data , you have to use the “body-parser” node module.
npm install mongoose --saveMongoose 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'); 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.jsGo 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.
Please Login to comment...