create-dynamic-website-with-nodejs-mongodb

Create Dynamic Website with Nodejs and MongoDB

Hello World, Today we are going to discuss that how we can create dynamic website with nodejs and mongodb. Before starting this tutorial, I request you to read my previous article that how we can create simple static website with nodejs, express and jade. Because this article is extended version of my previous article.

I will use following technologies in this article.

  • Nodejs
  • Express
  • Jade
  • MongoDB

You can get the knowledge of nodejs, express and jade from my previous article. MongoDB is new for you.

I have divided the article in following parts:

  • Introduction of MongoDB.
  • Install and setup MongoDB.
  • Connect MongoDB with our application.
  • CRUD operation with Nodejs and MongoDB.
    • Add Data
    • Read Data
    • Update Data
    • Delete Data

Introduction of MongoDB

No one can explain better than Wikipedia. So According to Wikipedia:

MongoDB is a free open source cross-platform document-oriented database program. MongoDB is classified as a NoSQL database program, MongoDB used JSON like document with schemas.

Install and setup MongoDB

I am using window operating system, so here I have described installation according to my operating system. If you are using other operating system then you can read the installation docs from their official website.

  • Download and install the setup from this link.
  • Open your command prompt and go to the folder where you have installed the mongodb. Go to the bin folder and run the following command.
>mongod

The above command will be start mongodb  server on 27017 port. See the screenshot:

verify-installation-of-mongodb

 

If you are facing any error than please read their official installation doc from their official website.

Connect MongoDB in Our Application

Now we will connect mongodb with in our static website. Install mongodb dependency in our application with following npm command.

npm install mongodb –save

Also install mongoose with the following command.

npm install mongoose –save

The above commands will install the mongodb and mongoose in our application.

Here we are not directly interacting with MongoDB But we are using mongoose

  • Open index.js file and add the replace the following code with previous code.
var path=require('path');
var express=require('express');
var bodyParser=require('body-parser');
var mongoose=require('mongoose');
var app=express();

// Database Connectivity
mongoose.connect('mongodb://localhost:27017/sample-website');
mongoose.connection.on('open',function() {
    console.log('Mongoose connected.');
});


/* Data Rendering */
// Show the Index Page
app.get('/',function(req,res){
    res.render('index',{title:"Home Page",'description':'This is Home page description.'});
});

// Show the About Page
app.get('/about',function(req,res){
    res.render('index',{title:"About Page",'description':'This is About page description.'});
});

// Show the About Page
app.get('/contact',function(req,res){
    res.render('index',{title:"Contact Page",'description':'This is Contact page description.'});
});

// Set the view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// Set Public Folder as static Path
app.use(express.static(path.join(__dirname, 'public')));

// Run the Server
app.listen('3000',function(){
    console.log('Server is running at PORT '+3000);
});

Please remember one thing that your mongo server should be running. If your mongo server is not running then run the server with “mongod” command.

After starting mongo server open another command prompt and go the project folder and run the following command.

node index.js

After running the above command you will see the following screenshot. This screenshot shows that mongoose is connected successfully.

 

We have successfully connected mongodb with mongoose in our application. Now we will perform the simple CRUD operation with mongodb, nodejs, express and Jade.

CRUD Operation

In this operation we will perform four simple task; create, read, update and delete. Before starting this crud tutorial i will introduce you to body-parser. This is the module that reposnible for submit the form data or read the form by server. In the above index.js file i have used this file. If you have not installed this dependency then install with the following npm command.

npm install body-parser --save

After installing body-parser, Add the following code before database connectivity.

// Form Data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));

Read Data

  • Update the index.jade file with crud link like following.
//- Index.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading=title
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
                    li
                        a(href='/crud') CRUD
            div.page-content
                p.page-description=description
  • Replace the “/public/stylesheets/style.css” file code with the following
body{
    font-family:Arial, Helvetica, sans-serif;
}
h1,ul{
    margin: 0px;
    padding: 0px;
}
.container{
    width:1000px;
    margin: 0 auto;
    height: auto;
    padding:10px;
    border:1px solid #ccc;
    box-shadow:0px 0px 5px #ccc;
    margin-top:5%;
    overflow: auto;
}
.top-menu{
    border-bottom:1px solid #ddd;
    padding-bottom:5px;
    overflow: auto;
    margin-bottom: 30px;
}
.page-heading{
    float: left;
}
.top-menu ul{
    float: right;
}
.top-menu ul li{
    list-style: none;
    display: inline-block;
}
.top-menu ul li a{
    display: block;
    padding: 10px 5px;
    text-decoration: none;
    font-size: 13px;

}

/* Button STyling */
.button{
    padding:5px;
    font-size: 13px;
    background: #ccc;
    margin: 5px;
    color: blue;
}
  • Create the tasks.jade file in views folder with following code.
//- tasks.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading=title
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
                    li
                        a(href='/crud') CRUD
            div.page-content
                p.page-description=description
                hr
                table(cellpadding=10,border="1",cellspacing="10")
                    tr
                        td(colspan="3",align="right")
                            a(href='/crud/add',class="button") Add New
                    tr
                        th Title
                        th Description
                        th Action
                    
                    each task in taskList
                        tr
                            td=task.title
                            td=task.description
                            td
                                a(href='/crud/edit/'+task._id,class="button") Edit
                                a(href='/crud/delete/'+task._id,class="button") Delete
                            
  • Add the following code after database connectivity.
Schema=mongoose.Schema;

// Creat Task Schema
var Task=new Schema({
    title:{type:String},
    description:{type:String}
});
var TaskModel=mongoose.model('Task',Task);
  • Add the following code after above code.
// Read Data Start
app.get('/crud',function(req,res){
    TaskModel.find({},function(err,docs){
        res.render('tasks',{'taskList':docs});
    });
});
// Read Data End

Run the server and go to CRUD link, you will see the following screen shot.

 

crud-operation-read

Don’t worry about the above data because i have added while i was testing.

Add Data

  • Create add-task.jade file in views folder with following code.
//- add-task.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading Add Task
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
                    li
                        a(href='/crud') CRUD
            div.page-content
                p.page-description We are adding task
                hr
                form(action='/crud/add',method='post')
                    p=msg
                    table(cellpadding="10",cellspacing="10")
                        tr
                            td
                                label(for="title") Title
                            td
                                input(type="text",name="title")
                        tr
                            td
                                label(for="title") Description
                            td
                                textarea(cols="22",name="description")
                        tr
                            td(colspan="2",align="right")
                                input(type="submit")
                            
  • Now add the following code in index.js file after the read operation.
// Create Data Start
app.get('/crud/add',function(req,res){
    res.render('add-task');
});

// Add Task
app.post('/crud/add',function(req,res){
    if(req.body.title && req.body.description){
        // Add Data
        var newTask=new TaskModel({
            title:req.body.title,
            description:req.body.description
        });
        var message='Data has been added';
        newTask.save(function(err){
            if(err){
                var message='Data has not been added';
            }
        });
        // Show Message
    }
    res.render('add-task',{msg:message});
});
// Create Data End

When you run the server then you will the following add form for creating data.

 

crud-operation-add

When you add the data and go to the crud list page then you can see the added data.

So here we have successfully completed our create and read task. Now its turn to update and delete task.

Update Data

  • Create the edit-task.jade file in views folder with the following code.
//- Index.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading Add Task
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
                    li
                        a(href='/crud') CRUD
            div.page-content
                p.page-description We are adding task
                hr
                form(action='/crud/edit/'+task._id,method='post')
                    p=msg
                    table(cellpadding="10",cellspacing="10")
                        tr
                            td
                                label(for="title") Title
                            td
                                input(type="text",value=task.title,name="title")
                        tr
                            td
                                label(for="title") Description
                            td
                                textarea(cols="22",name="description")=task.description
                        tr
                            td(colspan="2",align="right")
                                input(type="submit",value="Update")
                            
  • Edit the index.js file and add the following code after add operation.
// Update Data Start
app.get('/crud/edit/:id',function(req,res){
    TaskModel.findOne({_id:req.params.id},function(err,docs){
        res.render('edit-task',{'task':docs});
    });
});

app.post('/crud/edit/:id',function(req,res){
    // update Data
    var updateData={
        title:req.body.title,
        description:req.body.description
    };
    var message='Data has been not updated';
    TaskModel.update({_id:req.params.id},updateData,function(err,numrows){
        if(!err){
            res.redirect('/crud/edit/'+req.params.id);
        }
    });
});
// Update Data End

Try the Update the data in the crud list.

Delete Data

  • Add the following code after the update operation in index.js file.
// Delete Task
app.get('/crud/delete/:id',function(req,res){
    // Delete Data
    TaskModel.remove({_id:req.params.id},function(err){
        if(!err){
            res.redirect('/crud');
        }
    });
});
// Delete Task ##End

Try to delete the data.

2 thoughts on “Create Dynamic Website with Nodejs and MongoDB

  1. Koop

    Thanks again for a great walkthrough. FYI, it looks like all the links to mongodb and Wikipedia point back to this article and not to the sites you intended

    Reply

Leave a Reply