- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
SignUp form using Node and MongoDB
In this article, we will create a simple user sign-up form having some parameters. On clicking SAVE, all the user details will be saved in the MongoDB database.
Installation
Before proceeding to create the sign-up form, the following dependencies must be succesfully installed on your system.
Check and install express by using the following command. Express is used to set middlewares to respond to HTTP requests
npm install express --save
Setup the "body-parser" node module for reading the HTTP POST data.
npm install body-parser --save
Setup "mongoose", as it sits on top of Node's MongoDB driver.
npm install mongoose --save
Example 1
Create the following files and copy paste the code-snippet with respect to each file given below −
app.js
public (Create a new folder and paste the below files inside this folder.)
index.html
success.html
style.css
Now, run the following command to run the application.
node app.js
Code Snippets
app.js
var express=require("express"); var bodyParser=require("body-parser"); const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/tutorialsPoint'); 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('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= "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> <div class="main"> <form action="/sign_up" method="post"> <h1>Welcome to Tutorials Point - SignUp</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" class="registerbtn" value="Submit" /> <br> </form> </div> <div class=""> </div> </div> </div> </body> </html>
success.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>
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 #4CAF50; } input[type=submit] { font-family: 'Helvetica', serif; width: 100%; background-color: #4CAF50; border: none; color: white; padding: 16px 32px; margin: 4px 2px; border-radius: 10px; } .registerbtn { background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; }
Output
Now, try this link on your web browser. You will see a registration page.
http://127.0.0.1:3000/index.html OR http://localhost:3000/index.html
C:\Users\tutorialsPoint\> node app.js server listening at port 3000 (node:73542) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect. (node:73542) [MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor. connection succeeded
Sign-up Page
Success Page
Record Inserted Succesfully in mongoDB
To Continue Learning Please Login
Login with Google