Node JS Express MongoDB CRUD Example Tutorial

Node js + express js + MongoDB with mongoose crud; Through this tutorial, i am going to show you how to create crud operations application in node js express and MongoDB mongoose.

Node js Express + Mongodb + CRUD Application With Mongoose Tutorial

  • Step 1 – Create Node Express js App
  • Step 2 – Install express Validator flash ejs body-parser mongoose dependencies
  • Step 3 – Connect App to MongoDB
  • Step 4 – Create Model
  • Step 5 – Create Fetch Insert Update Delete Routes
  • Step 6 – Create Views
  • Step 7 – Import Modules in App.js
  • Step 8 – Start App Server

Step 1 – Create Node Express js App

Execute the following command on terminal to create node js app:

mkdir my-app
cd my-app
npm init -y

Step 2 – Install express flash Validator ejs body-parser mongoose Modules

Execute the following command on the terminal to express flash ejs body-parser mysql dependencies :

npm install -g express-generator
npx express --view=ejs

npm install

npm install express-flash --save
npm install express-session --save
npm install body-parser --save
npm install express-validator cors --save
npm install mongoose

body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and make it available under req.body property. In other words, it simplifies the incoming request.

Express-Flash – Flash Messages for your Express Application. Flash is an extension of connect-flash with the ability to define a flash message and render it without redirecting the request.

Express-Session– Express-session – an HTTP server-side framework used to create and manage a session middleware.

Express-EJS– EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages

Mongoose – Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

Step 3 – Connect App to MongoDB

Create database.js file into your app root directory and add the following code into it to connect your app to the mongodb database:

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/test', {useNewUrlParser: true});
var conn = mongoose.connection;
conn.on('connected', function() {
    console.log('database is connected successfully');
});
conn.on('disconnected',function(){
    console.log('database is disconnected successfully');
})
conn.on('error', console.error.bind(console, 'connection error:'));
module.exports = conn;

Step 4 – Create Model

Create Models directory and inside this directory create userModel.js file; Then add following code into it:

const mongoose = require("../database");
// create an schema
var userSchema = new mongoose.Schema({
            name: String,
            email:String
        });
var userModel=mongoose.model('users',userSchema);
module.exports = mongoose.model("Users", userModel);

Step 5 – Create Fetch Insert Update Delete Routes

Create fetch insert update, delete routes from MongoDB in node js; so visit routes directory and open users.js route file; Then add the following insert update, delete in node js MongoDB routes into it:

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var userModel = require('../models/userModel');
/* GET home page. */
router.get('/', function(req, res, next) {
    userModel.find((err, docs) => {
        if (!err) {
            res.render("users", {
                data: docs
            });
        } else {
            console.log('Failed to retrieve the Users List: ' + err);
        }
    });
});
// SHOW ADD USER FORM
router.get('/add', function(req, res, next) {
    // render to views/user/add.ejs
    res.render('users/add', {
        title: 'Add New User',
        name: '',
        email: ''
    })
})
// ADD NEW USER POST ACTION
router.post('/add', function(req, res, next) {
    req.assert('name', 'Name is required').notEmpty() //Validate name
    req.assert('email', 'A valid email is required').isEmail() //Validate email
    var errors = req.validationErrors()
    if (!errors) { //No errors were found.  Passed Validation!
        var userDetails = new userModel({
            name: req.body.name,
            email: req.body.email,
        });
        userDetails.save((err, doc) => {
            if (!err)
                req.flash('success', 'User added successfully!');
            res.redirect('/users');
            else
                res.render('users/add', {
                    title: 'Add New User',
                    name: user.name,
                    email: user.email
                })
        });
    } else { //Display errors to user
        var error_msg = ''
        errors.forEach(function(error) {
            error_msg += error.msg + '<br>'
        })
        req.flash('error', error_msg)
        res.render('users/add', {
            title: 'Add New User',
            name: req.body.name,
            email: req.body.email
        })
    }
})
// SHOW EDIT USER FORM
router.get('/edit/(:id)', function(req, res, next) {
    userModel.findById(req.params.id, (err, doc) => {
        if (!err) {
            res.render("users/edit", {
                title: "Update User Details",
                data: doc
            });
        } else {
            req.flash('error', 'User not found with id = ' + req.params.id)
            res.redirect('/users')
        }
    });
})
// EDIT USER POST ACTION
router.post('/update/:id', function(req, res, next) {
    req.assert('name', 'Name is required').notEmpty() //Validate nam
    req.assert('email', 'A valid email is required').isEmail() //Validate email
    var errors = req.validationErrors()
    if (!errors) {
        var user = {
            name: req.sanitize('name').escape().trim(),
            email: req.sanitize('email').escape().trim()
        }
        userModel.findByIdAndUpdate(req.body.id, {
            name: req.body.name
        } {
            email: req.body.email
        }, function(err, data) {
            if (err) {
                req.flash('error', 'Something Goes to Wrong!');
                res.render('users');
            } else {
                req.flash('success', 'User has been updated successfully!');
                res.redirect('/users');
            }
        });
    } else { //Display errors to user
        var error_msg = ''
        errors.forEach(function(error) {
            error_msg += error.msg + '<br>'
        })
        req.flash('error', error_msg)
        /**
         * Using req.body.name 
         * because req.param('name') is deprecated
         */
        res.render('users/edit', {
            title: 'Edit user',
            id: req.params.id,
            name: req.body.name,
            email: req.body.email
        })
    }
})
// DELETE USER
router.get('/delete/(:id)', function(req, res, next) {
    userModel.findByIdAndRemove(req.params.id, (err, doc) => {
        if (!err) {
            res.redirect('/users');
        } else {
            console.log('Failed to Delete user Details: ' + err);
        }
    });
})
module.exports = router;

Step 6 – Create Views

Create a directory which name users; So visit views directory and create users directory inside it. Then create the following page inside users directory; as shown below:

  • index.ejs
  • add.ejs
  • edit.ejs

Visit views/users directory and open index.ejs and add the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Fetch and display data in html table from mongodb in node js express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    <div> <a href="/" class="btn btn-primary ml-3">Home</a> </div>
    <!--   <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
<% } %> -->
    <% if (messages.success) { %>
    <p class="alert alert-success mt-4">
        <%- messages.success %>
    </p>
    <% } %>
    <br>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th width="200px">Action</th>
            </tr>
        </thead>
        <tbody>
            <% if(data.length){
  for(var i = 0; i< data.length; i++) {%>
            <tr>
                <th scope="row">
                    <%= (i+1) %>
                </th>
                <td>
                    <%= data[i].name%>
                </td>
                <td>
                    <%= data[i].email%>
                </td>
                <td> <a class="btn btn-success edit" href="../users/edit/<%= data[i]._id%>">Edit</a>
                    <a class="btn btn-danger delete" href="../users/delte/<%= data[i]._id%>">delete</a>
                </td>
            </tr>
            <% }
          
   }else{ %>
            <tr>
                <td colspan="3">No user</td>
            </tr>
            <% } %>
        </tbody>
    </table>
</body>
</html>

Visit views/users directory and open add.ejs and add the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Node.js insert Data from Html Form to Mongodb Database - laratutorials.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <div class="card">
            <div class="card-body">
                <% if (messages.success) { %>
                <p class="alert alert-success m2-4 mb-2"><%- messages.success %></p>
                <% } %>
                <form action="users/add" method="POST">
                    <div class="form-group">
                        <label for="firstName">Name</label>
                        <input type="text" class="form-control col-lg-9" id="name" aria-describedby="emailHelp" placeholder="Enter first name" name="name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control col-lg-9" id="exampleInputEmail1" aria-describedby="emailHelp" name="email" placeholder="Enter email">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
</body>
</html>

Visit views/users directory and open edit.ejs and add the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Node.js update Data from Html Form to Mongodb Database - laratutorials.com</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    <form action="/users/update/<%= data._id %>" method="post" name="form1">
        <div class="form-group">
            <label for="exampleInputPassword1">Name</label>
            <input type="text" class="form-control" name="name" id="name" value="<%= data.name %>" placeholder="Name">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="<%= data.email %>">
        </div>
        <button type="submit" class="btn btn-info">Update</button>
    </form>
</body>
</html>

Step 5 – Import Modules in App.js

Import express flash session body-parser mongoose dependencies in app.js; as shown below:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var flash = require('express-flash');
var session = require('express-session');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({
    extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
    secret: '123456catr',
    resave: false,
    saveUninitialized: true,
    cookie: {
        maxAge: 60000
    }
}))
app.use(flash());
app.use('/', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    // render the error page
    res.status(err.status || 500);
    res.render('error');
});
module.exports = app;

Step 7 – Start App Server

You can use the following command to start node js app server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Conclusion

Node js crud mongodb example; In this tutorial you have learned how to create crud operations in node js express and mongodb mongoose.

Recommended Node JS Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *