Building Web Applications Using Node.js - Part Three

Sourabh Somani
7y
7k
0
6

Article

Before reading this article, I would recommend that you read my previous articles.

In my previous two articles, I have 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

Now, in this article, I will explain to you how we can create the Navigation menu dynamically. Then, we will perform routing using navigation, and then we will render our page. After that, we will separate our sections and many more.

So, I am opening index.ejs file which I have created in my last article and copying the complete HTML code from my index.html file into index.ejs file.

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>1 Col Portfolio - Start Bootstrap Template</title>
<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/1-col-portfolio.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project One</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Two</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Three</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Four</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Five</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, quo, minima, inventore voluptatum saepe quos nostrum provident ex quisquam hic odio repellendus atque porro distinctio quae id laboriosam facilis dolorum.</p>
<a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<hr>
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

So, now my index.ejs file output looks like the following.

First of all, I am going to create the navigation menu bar dynamically as well as I am also changing the title of the page. To do that, I am modifying the app.js file and writing the following code.

app.get('/',function(req,res){
res.render('index', {
title:'Node.js By Sourabh Somani',
menu:[
{
href:'/articles',
text:'Article'
},
{
href:'/projects',
text:'Projects'
},
{
href:'/books',
text:'books'
},
{
href:'/contact',
text:'Contact Us'
},
]
});
});

Now, I am going to modify the index.ejs file and writing the code for dynamic navigation menu and page title.

For title, I am writing the following line of code.

<title><%=title%></title>

For navigation menu, I am writing the following line of code.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<%for(var i=0;i<menu.length;i++){%>
<li>
<a href="<%=menu[i].href%>"><%=menu[i].text%></a>
</li>
<%}%>
</ul>
</div>

Now, when I run my project, my output will be like as follows.

I am also changing the logo text, using the following line of code.

<a class="navbar-brand" href="/">Node.js Web App</a>

Output

Now, I am going to use routing using Express Router function. Previously, it was routing using app.get function but now, we will do it by using Router. So, I am going to change my "app.js" file.

First of all create router variables.

//routing using Router
var articlesRouter=express.Router();
var projectsRouter=express.Router();
var booksRouter=express.Router();
var contactRouter=express.Router();

Now, define routing for each router, like the following.

//Defining Routes
articlesRouter.route("/");
projectsRouter.route("/");
booksRouter.route("/");
contactRouter.route("/");

Now, we have to tell our application which router will be used for each different routes. To do that, write the code as shown below.

app.use('/articles',articlesRouter);
app.use('/projects',projectsRouter);
app.use('/books',booksRouter);
app.use('/contact',contactRouter);

So, the above line of code will tell our application that when request comes from /articles, then use articlesRouter; when request comes from /projects, then use projectsRouter; when request comes from /books, then use booksRouter; and when request comes from /contact, then use contactRouter.

app.js Complete code

var express=require('express');
var app=new express();
var port=3000;
app.listen(port,function(err){
if(typeof(err)=="undefined"){
console.log('Your application is running on : '+ port+' port');
}
});
//routing using Router
var articlesRouter=express.Router();
var projectsRouter=express.Router();
var booksRouter=express.Router();
var contactRouter=express.Router();
app.use(express.static('public'));//making public directory as static diectory
app.set('views','./src/views');
app.set('view engine','ejs');
articlesRouter.route("/");
projectsRouter.route("/");
booksRouter.route("/");
contactRouter.route("/");
app.use('/articles',articlesRouter);
app.use('/projects',projectsRouter);
app.use('/books',booksRouter);
app.use('/contact',contactRouter);
app.get('/',function(req,res){
res.render('index', {
title:'Node.js By Sourabh Somani',
menu:[
{
href:'/articles',
text:'Article'
},
{
href:'/projects',
text:'Projects'
},
{
href:'/books',
text:'Books'
},
{
href:'/contact',
text:'Contact Us'
},
]
});
});

Output

Now, I am going to create different views for different routing respectively. So, I am creating 4 EJS files in Views folder.

Now, in all files, I am copying the code from index.ejs and pasting it in all files. After pasting all this code, I am going to render all the views which I have created from "app.js" file.

Rendering articles route

articlesRouter.route("/")
.get(function(req,res){
res.render('articles', {
title:'Articles',
menu:navMenu
});
});

Rendering projects route

projectsRouter.route("/")
.get(function(req,res){
res.render('projects', {
title:'Projects',
menu:navMenu
});
});

Rendering books route

booksRouter.route("/")
.get(function(req,res){
res.render('books', {
title:'Books',
menu:navMenu
});
});

Rendering contact route

contactRouter.route("/")
.get(function(req,res){
res.render('contact', {
title:'Contact Us',
menu:navMenu
});
});

Above, you can see that I am using menu as navMenu, so I have created an array for navMenu. Which looks like the following.

//Navigation Menu
var navMenu=[
{
href:'/articles',
text:'Articles'
},
{
href:'/projects',
text:'Projects'
},
{
href:'/books',
text:'Books'
},
{
href:'/Contact',
text:'Contact Us'
},
];

Now, run your project and click on menu bar. You will get the following output.

Output of Home page

Output of Articles page

Output of Projects page

Output of Books page

Output of Contact page

Now, you can see that we have written all the code inside one file that is "app.js" and when we create project, we always separate our files. We do not write code in only one file because that will make the file very complicated to understand.

So now, we are going to separate routing files in different folders. Let's create one folder named as "routes" in src directory where all routing files will be located.

So, in this folder, I am going to create several JS file for routing.