How To Setup MVC Design Pattern In Express

This blog post explains how we can set up the MVC design pattern in the express framework used in our project.

Introduction

I assume that you should be a little familiar with the technologies express, mongoose, and ejs. If you are not, then click below to read about them.

1. express
   
2. mongoose
   
3. ejs

What is MVC?

Model–View–Controller (usually known as MVC) is a software design pattern commonly used for developing user interfaces which divides the related program logic into three interconnected elements. Now this pattern has become popular for designing web applications too. The MVC is based on three components.

Model

• This is the central component of the pattern.
• It directly manages the data, logic, and rules of the application.
• It receives user input from the controller.

View

• The View component is used for all the UI logic of the application.
• It presents the model’s data to the user.
• Basically it just receives the data from the model and displays it to the user.  

Controller

• In between model and view, we have the controller. 
• It processes all the business logic and incoming requests and manipulates data using Model.
• It renders the final output file interacting with views.

Setting up a node project. 

• Open console/terminal make a new folder using mkdir which is followed by the folder name.
• Change to the new folder using cd followed by folder name.
• Now setup node in project using npm init -y.
• This will generate a package.json file in the project which will tell that node is initialized in the project.
• Now install basic packages using npm install which will be followed by package names.
• express,body-parser ,mongoose, and ejs are the packages we will install.

Setup MVC pattern in project

• After installing the packages, make a few new folders: a) models b) views c) controller d) routes.

• Models folder will contain the entire collection which will be used in our project.
• Views folder will contain pages that will contain a mix of HTML and model data.
• The controller folder will contain the business logic which will be executed on the request.
• Routes will contain the routes of the application.

 

 

App.js

var express  = require('express')
var mongoose = require('mongoose')
var path     = require('path')
var bodyParser = require('body-parser')
var userRoutes = require('./routes/users')


//connecting to database
//demoDB is the name of database
mongoose.connect('mongodb://localhost:27017/demoDB',{useNewUrlParser:true})
.then(()=>console.log('connected to database')).catch(error=>console.log('error occured',error))

//initializing the object instance
var app = express()

//setting the path of our views folder
app.set("views",path.resolve(__dirname,'views'))

//setting the template engine
app.set('view engine','ejs')

//fetch form data from the request
app.use(bodyParser.urlencoded({extended:false}))

//the request having /user/ will be send to the userRoutes module.
//in that the rquest will be directed to the specific route.
app.use('/user/',userRoutes);

//setting the port for the server.
var port = process.env.port || 3000;

//showing the port on which server is running
app.listen(port,()=>console.log(`server running at port ${port}`))

module.exports = app;

Model

• user.js 

var mongoose  = require('mongoose')

//specify the fields which we want in our collection(table).
var userSchema = new mongoose.Schema({
    firstname : String,
    lastname  : String,
    city      : String,
    state     : String,
    country   : String
 })

 //here we saving our collectionSchema with the name user in database
 //userModel will contain the instance of the user for manipulating the data.
 var userModel = module.exports = mongoose.model('user',userSchema)

//this function will find all the user
//there will be just a callback parameter
module.exports.getUser=(cb)=>{
    userModel.find((err,data)=>{
        if(err){
            console.log(err)
        }
        else{
            cb(null,data)
        }
    })
}

//this will add new user to the user collection
//this will take 2 parameter.newUser is object and cb is a callback
module.exports.addUser=(newUser,cb)=>{
      const user = new userModel({
          firstname:newUser.firstname,
          lastname:newUser.lastname,
          city:newUser.city,
          state:newUser.state,
          country:newUser.country
      })
      user.save(cb)
 }

Routes

• users.js

var express =  require('express');
var userControler = require('../controller/userController');

// express.Router is a class to create route handlers
//router will contain the Router instance.
var router = express.Router();

//this route will be executed on /user/home request
//userHome function will be called from the controller when request come for this route.
 router.get('/home',userControler.userHome)

//this route will be executed on /user/add
//addUsers function will be called from the controller when request come for this route.
 router.post('/add',userControler.addUsers)

module.exports = router;

Controller 

• userController.js

//contain instance of user model
var userModel = require('../models/user');

//containt the function with business logics
var usersController={
       userHome(req,res){
           //this will call the getuser function present in user.js
           userModel.getUser((err,data)=>{
               try {
                 if(err){
                    console.log(err)
                 }
                 else if(data){
                   res.render('home',{data:data})
                 }
                 else{
                     res.render('home',{data:{}})
                 }
               } catch (error) {
                console.log(error)
               }
           })
    },
     addUsers(req,res){
         try {
         console.log('adduser',req.body)
        const user = {
            firstname:req.body.firstname,
            lastname:req.body.lastname,
            city:req.body.city,
            state:req.body.state,
            country:req.body.country
        };
           //this will call the adduser function present in user.js.
           //it will take object as parameter.
       userModel.addUser(user,(err,data)=>{
           if(err){
               console.log('error occured',err)
           }
           else{
               console.log(data)
             res.redirect('/user/home')
           }
       })
    }
        catch (error) {
                 console.log('error',error)
        }
 }

}

module.exports = usersController;

Views

• home.ejs

 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
        <h4>AddNewUser</h4>
        <form action="/user/add" method="POST" >
     <table>

            <tr>
                <td>
                        <input type="text" name="firstname" placeholder="firstname">
                </td>
                <td>
                        <input type="text" name="lastname" placeholder="lastname">
                </td>
                <td>
                        <input type="text" name="city" placeholder="city">
                </td>
                <td>
                        <input type="text" name="state" placeholder="state">
                </td>
                 <td>
                        <input type="text" name="country" placeholder="country">
                 </td>
                 <td>
                        <input type="submit" value="add"><br>
                 </td>

            </tr>

    </table>
</form>
    <br>
    <% if (data.length > 0) {%>
    <h2>AllUser</h2>
    <table border="1" style="text-align: center;font-family: 'Courier New', Courier, monospace;font: 600;">
        <thead>
            <tr>
                <th>
                    firstname
                </th>
                <th>
                    lastname
                </th>
                <th>
                    city
                </th>
                <th>
                    state
                </th>
                <th>
                    country
                </th>
            </tr>
        </thead>
        <tbody>
            <% for(var i=0; i < data.length; i++) {%>
            <tr>
             <td><%= data[i].firstname%></td>
             <td><%= data[i].lastname%></td>
             <td><%= data[i].city%></td>
             <td><%= data[i].state%></td>
             <td><%= data[i].country%></td>
            </tr>
            <% } %>
        </tbody>
    </table>
    <% } %>
 </body>
 </html>