Post
Ask Question

Building Web Application Using Node.js - Part Five

Before reading this article, I would recommend that you read my previous articles.
In my previous two articles, I explained,
  • How to start working with Node.js Web Application.
  • How to initialize a Node.js project.
  • About Package.JSON.
  • Express Framework.
  • How to use "npm start" command.
  • Using HTML Templates.
  • Bower.
  • Templating Engine.
  • Navigation.
  • Routing.
  • Rendering.
  • Fetching data from MongoDB
Introduction 

In this article, we will learn how to create a registration page. Let's start step by step.
First of all, I am going to create a registration page, using HTML and give that file a name such as "registration.ejs". Registration form code is shown below.
  1. <form class="form-horizontal" action="/register" 
    method="post"
    >  
  2.     <fieldset>  
  3.         <div class="form-group">  
  4.             <label class="col-md-1 control-label" for="textinput">Name</label>    
  5.             <div class="col-md-4">  
  6.                 <input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required>  
  7.             </div>  
  8.         </div>  
  9.         <div class="form-group">  
  10.             <label class="col-md-1 control-label" for="Email">Email</label>    
  11.             <div class="col-md-4">  
  12.                 <input id="Email" name="Email" type="email" placeholder="Email" class="form-control input-md" required>  
  13.             </div>  
  14.         </div>  
  15.         <div class="form-group">  
  16.             <label class="col-md-1 control-label" for="Password">Password</label>    
  17.             <div class="col-md-4">  
  18.                 <input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" required>  
  19.             </div>  
  20.         </div>  
  21.         <div class="form-group">  
  22.             <label class="col-md-1 control-label" for="Gender">Gender</label>  
  23.             <div class="col-md-4">  
  24.                 <select id="Gender" name="Gender" class="form-control">  
  25.                     <option value="M">Male</option>  
  26.                     <option value="F">Female</option>  
  27.                 </select>  
  28.             </div>  
  29.         </div>  
  30.         <div class="form-group">  
  31.             <div class="col-md-4 col-md-offset-1">  
  32.                 <input type="submit" id="Submit" class="btn btn-primary" value="register" />  
  33.             </div>  
  34.         </div>  
  35.     </fieldset>  
  36. </form>  
Now, your form will look, as shown below.


This registration page will not open because you have to provide routing for it. For routing, you can read my previous article. Now, I am providing routing, using app.js and creating a route file.

app.js 

You have to write the line mentioned below, which is similar to my previous article.
  1. var usersRouter=require('./src/routes/registrationRoute')(navMenu);  
Now, I am providing the lines, mentioned below, also as a middleware for the registration page routing.
  1. app.use('/register',usersRouter);  
As you can see above, I have given a path ('./src/routes/registrationRoute') for the registration page. Hence, I am going to create registrationRoute.js file inside src/routes directory. Code for registrationRoute.js page is shown below.

registrationRoute.js 
  1. var express=require('express');  
  2. var mongodb=require('mongodb').MongoClient;  
  3. var usersRouter=express.Router();  
  4. var u_router=function(navMenu){  
  5.     usersRouter.route("/")  
  6.         .get(function(req,res){  
  7.                 res.render('register', {  
  8.                     title:'Registration',  
  9.                     menu:navMenu  
  10.                 });  
  11.   
  12.         });  
  13.         return usersRouter;  
  14. }     
  15. module.exports=u_router;  
After writing the code mentioned above, run the Application and go to the registration page, using URL http://localhost:3000/register and see your output. Your output will be, as shown below.

 
Now, if you will fill the registration form and you will submit the form, then you will get the output, as shown below.

 

This is happening because of  index.ejs, where we have used the form method="post". Thus, when we will submit the form then on the server side, we will not get any method for post, so we have to write POST method. To do that, I am using  middleware that is a body-parser.
 
What is body-parser? 

Body-parser is a middleware for Node.js, which is used to parse the body. The body-parser parses the incoming request bodies in a middleware before your handlers, available under the req.body property. 
 
To use body-parser, I am adding it in this Application, using the command, mentioned below.
  1. npm install body-parser --save  
After adding this body-parser, you will find that your package.json contains dependency for body-parser.
 
Now, I am going to write the code for the registration form posted inside registrationRoute.js, which is shown below.

 
 
Now, adding body-parser middleware in app.js and configuring it helps you to see the figure given below.

  
If you see registrationRoute.js  I am getting the form in the request body, and I am logging in console. Let's start the application again and open the registration page.

Now, if you will submit the registration data, then you will get an output like in console Window, which you can see in the figure given below.


 
After submitting the form, you will get the output in console Window, as shown below.

 
 
Here, I am showing the data in console Window but we want to save the data in MongoDB and want to show the user some message whether the registration is done or not. To do it, I am updating registrationRoute.js, as shown below.

 
 
Complete registrationRoute.js Code
  1. var express=require('express');  
  2. var mongodb=require('mongodb').MongoClient;  
  3. var usersRouter=express.Router();  
  4. var u_router=function(navMenu){  
  5.     usersRouter.route("/")  
  6.         .get(function(req,res){  
  7.                 res.render('register', {  
  8.                     title:'Registration',  
  9.                     menu:navMenu,  
  10.                     message:''  
  11.                 });  
  12.         })  
  13.         .post(function(req,res){  
  14.             var url='mongodb://localhost:27017/NodeDemoWebApp';  
  15.             mongodb.connect(url,function(err,db){  
  16.                 var collection=db.collection('Users');  
  17.                 collection.insertOne(req.body,function(err,result){  
  18.                     res.render('register', {  
  19.                         title:'Registration',  
  20.                         menu:navMenu,  
  21.                         message:'Successfully Registered'  
  22.                     });  
  23.                 });  
  24.             });  
  25.         });  
  26.         return usersRouter;  
  27. }     
  28. module.exports=u_router;  
Now, if you will submit the registration form, you will get the output, as shown below, when the complete registration is given.

 
  
If you want to see your data in the database, then type command mentioned below for MongoDB.
  1. db.Users.find({})  
You will get the output, as shown below.

 
 
Conclusion

In this article, we have learned
  • How to pass the data, using body-parser to node Application.
  • How to save the data in the database.
  • We have created a simple registration page, using node.js
What is next?

In my upcoming node article series, I will show you how can we login to the page. I will show you how to authenticate a user in Node.js. Subsequently, I will create a complete page to submit the article, project, and blog. Afterwards, we will create a contact form and many more.
 
Thanks.

<<Previous Article                                                                                                                               Next Article>>


Similar Articles