We use cookies to ensure that we give you the best experience on our website.

Node JS Mongoose CRUD application

Node JS Mongoose CRUD application

Learn how to perform CRUD with NodeJS Mongoose

In this tutorial, we are going to create a CRUD application using NodeJS and Mongoose ODM.

Mongoose is an Object Data Modeling (ODM) library commonly used in a Node.js application with a MongoDB database.

Mongoose provides a straight-forward, schema-based solution to model your application data.

It includes built-in typecasting, validation, query building, business logic hooks and more, out of the box.

Mongoose official docs

To create this application follow the below steps

Step – 1

First, create a folder on your desktop and name it whatever you want, I call it app folder.

So, after that go inside the app folder and initialize npm by running the command npm init

Step – 2

Now you need to install some Node dependencies.

Here the list of all node dependencies which we’ll use to create our crud app.

  • express (npm install express --save)
  • mongoose (npm install mongoose --save)
  • twig (npm install twig --save)
  • body-parser (npm install body-parser --save)

My package.json file

{
  "name": "nodejs_mongoose",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "webtutorials.me",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "mongoose": "^5.4.16",
    "twig": "^1.13.2"
  }
}

Files Creation

Before we’ll start to create our files late’s take a look at our app folder structure.

folder structure of the crud application

First, we’ll create our models. So, create a model folder inside the app folder.

Inside the model folder we just create one file it is post.js model

post.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const postSchema = new Schema({
    title:{
        type:String,
        require:true
    },
    content:{
        type:String,
         require:true
    },
    author_name:{
        type:String,
        require:true
    }
},{
    timestamps: true
});

module.exports = mongoose.model('Post', postSchema);

After creating post.js model then we’ll create app.js file this is our main file.

app.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const twig = require('twig');
const app = express();
const MONGODB_URL = 'mongodb://localhost:27017/mongoose';
const Post = require('./models/post');

// SET VIEW ENGINE and VIEWS
app.set('view engine', 'html');
app.engine('html', twig.__express);
app.set('views','views');

// APPLY BODY-PARSER MIDDLEWARE
app.use(bodyParser.urlencoded({extended:false}));

// HOME PAGE
app.get('/', (req, res) => {
    // FETCH ALL POSTS FROM DATABASE
    Post.find()
    // SET descending ORDER BY createdAt
    .sort({createdAt: 'descending'})
    .then(result => {
        if(result){
            // RENDERING HOME VIEW WITH ALL POSTS
            res.render('home',{
                allpost:result
            });
        }
    })
    .catch(err => {
        if (err) throw err;
    }); 
});


// INSERT POST
app.post('/', (req, res) => {
    new Post({
        title:req.body.title,
        content:req.body.content,
        author_name:req.body.author
    })
    .save()
    .then(result => {
        res.redirect('/');
    })
    .catch(err => {
        if (err) throw err;
    });
});


// EDIT POST
app.get('/edit/:id', (req, res) => {

    Post.findById(req.params.id)
    .then(result => {
        if(result){
            res.render('edit',{
                post:result
            });
        }
        else{
            res.redirect('/');
        }
    })
    .catch(err => {
        res.redirect('/');
    });
});

// UPDATE POST
app.post('/edit/:id', (req, res) => {
    Post.findById(req.params.id)
    .then(result => {
        if(result){
            result.title = req.body.title;
            result.content = req.body.content;
            result.author_name = req.body.author;
            return result.save();
        }
        else{
            console.log(err);
            res.redirect('/');
        }
    })
    .then(update => {
        res.redirect('/');
    })
    .catch(err => {
        res.redirect('/');
    });
});

// DELETE POST
app.get('/delete/:id', (req, res) => {
    Post.findByIdAndDelete(req.params.id)
    .then(result => {
        res.redirect('/');
    })
    .catch(err => {
        console.log(err);
        res.redirect('/');
    })
});

// IF DATABASE CONNECTION IS SUCCESSFULLY THEN RUN APP on PORT 3000
mongoose.connect(MONGODB_URL, {useNewUrlParser: true}).then(result => {
    app.listen(3000);
}).catch(err => {
    if (err) throw err;
});

Now we create our views. So, create a views folder inside our app folder.

Inside the views folder, we just create two views one is home.html and another edit.html.

home.html

<!DOCTYPE html>
<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>NodeJS Mongoose CRUD App</title>
    <style>
    *{
    box-sizing: border-box;
    }
    body{
        padding: 50px;
        margin: 0;
        background: #f7f7f7;
        font-family: sans-serif;
    }
    .container{
        background-color: #ffffff;
        padding: 10px;
        margin: 0 auto;
        max-width: 600px;
        border: 1px solid #cccccc;
    }
    .insert_post input[type='text'],
    .insert_post textarea{
        width: 100%;
        padding: 10px;
        border: 1px solid #dddddd;
        font-family: sans-serif;
        margin-bottom: 5px;
        font-size: 16px;
        resize: vertical;
    }
    .insert_post label{
        font-weight: bold;
    }
    h1,h2{
        text-align: center;
        text-transform: uppercase;
    }

    .insert_post input[type='text']:focus,
    .insert_post textarea:focus{
        outline: none;
        border: 1px solid #cccccc;
    }
    .insert_post input[type='submit']{
        padding: 10px 20px;
        cursor: pointer;
        background-color: #333333;
        color: #ffffff;
        outline: none;
        border: 1px solid rgba(0,0,0,.1);
    }
    .insert_post input[type='submit']:hover{
        background-color: #ffffff;
        color: #222222;
        border: 1px solid #333333;
    }

    /* SINGLE POST STYLING */
    .single_post{
        padding: 10px 0;
        border-bottom: 1px solid #dddddd;

    }

    .single_post .post_title{
        margin: 0 0 5px 0;
        padding: 0;
    }
    .single_post .post_content{
        margin: 5px 0;
        padding: 0;
    }

    .single_post .post_info{
        font-size: 14px;
    }
    .single_post .post_date{
        color: #888888;
        font-style: italic;
    }
    .post_actions{
        padding-top: 5px;
    }
    .post_edit_btn,
    .post_delete_btn{
        border:1px solid rgba(0,0,0,.1);
        outline: none;
        text-decoration: none;
        padding: 7px 15px;
        display:inline-block;
    }
    .post_edit_btn{
        background-color: #2c9f45;
        color: #ffffff;
    }
    .post_delete_btn{
        background-color: #ff4c4c;
        color: #ffffff;
    }
    </style>
</head>
<body>
    <div class="container">
        <h1>Insert Post</h1>
        <div class="insert_post">
            <form action="" method="POST">
                <label for="post_title">Post Title</label>
                <input type="text" name="title" placeholder="Enter post title" id="post_title" required>
                <label for="post_content">Write your post</label>
                <textarea name="content" id="post_content" placeholder="Write something..." required></textarea>
                <label for="author_name">Author Name</label>
                <input type="text" name="author" placeholder="Enter author name" id="author_name" required>
                <input type="submit" value="POST">
            </form>
        </div>
        <hr>
        <h2>Latest Updates</h2>
        <div class="all_posts">
            <!-- 
                LEARN MORE ABOUT TWIG TEMPLATE ENGINE -
                https://twig.symfony.com
             -->
            {% if allpost is empty %}
            <h4>Not post found!</h4>
            {% else %}
                {% for post in allpost %}
                    <div class="single_post">
                        <h3 class="post_title">{{post.title | e}}</h3>
                        <div class="post_info"><span class="post_date">{{post.createdAt | date("d M, Y")}}</span> | <span class="post_author">By, <strong>{{post.author_name|e}}</strong></span></div>
                        <p class="post_content">{{post.content | e}}</p>
                        <div class="post_actions">
                            <a href="/edit/{{post._id}}" class="post_edit_btn">Edit</a> | 
                            <a href="/delete/{{post._id}}" class="post_delete_btn">Delete</a>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</body>
</html>

After creating home view now we’ll create edit view.

edit.html

<!DOCTYPE html>
<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>NodeJS Mongoose CRUD App - Webtutorials.ME</title>
    <style>
    *{
    box-sizing: border-box;
    }
    body{
        padding: 50px;
        margin: 0;
        background: #f7f7f7;
        font-family: sans-serif;
    }
    .container{
        background-color: #ffffff;
        padding: 10px;
        margin: 0 auto;
        max-width: 600px;
        border: 1px solid #cccccc;
    }
    .insert_post input[type='text'],
    .insert_post textarea{
        width: 100%;
        padding: 10px;
        border: 1px solid #dddddd;
        font-family: sans-serif;
        margin-bottom: 5px;
        font-size: 16px;
        resize: vertical;
    }
    .insert_post label{
        font-weight: bold;
    }
    h1,h2{
        text-align: center;
        text-transform: uppercase;
    }

    .insert_post input[type='text']:focus,
    .insert_post textarea:focus{
        outline: none;
        border: 1px solid #cccccc;
    }
    .insert_post input[type='submit']{
        padding: 10px 20px;
        cursor: pointer;
        background-color: #333333;
        color: #ffffff;
        outline: none;
        border: 1px solid rgba(0,0,0,.1);
    }
    .insert_post input[type='submit']:hover{
        background-color: #ffffff;
        color: #222222;
        border: 1px solid #333333;
    }

    /* SINGLE POST STYLING */
    .single_post{
        padding: 10px 0;
        border-bottom: 1px solid #dddddd;

    }

    .single_post .post_title{
        margin: 0 0 5px 0;
        padding: 0;
    }
    .single_post .post_content{
        margin: 5px 0;
        padding: 0;
    }

    .single_post .post_info{
        font-size: 14px;
    }
    .single_post .post_date{
        color: #888888;
        font-style: italic;
    }
    .post_actions{
        padding-top: 5px;
    }
    .post_edit_btn,
    .post_delete_btn{
        border:1px solid rgba(0,0,0,.1);
        outline: none;
        text-decoration: none;
        padding: 7px 15px;
        display:inline-block;
    }
    .post_edit_btn{
        background-color: #2c9f45;
        color: #ffffff;
    }
    .post_delete_btn{
        background-color: #ff4c4c;
        color: #ffffff;
    }
    </style>
</head>
<body>
    <div class="container">
        <h1>Insert Post</h1>
        <div class="insert_post">
            <form action="" method="POST">
                <label for="post_title">Post Title</label>
                <input type="text" name="title" placeholder="Enter post title" id="post_title" value="{{post.title | e}}" required>
                <label for="post_content">Write your post</label>
                <textarea name="content" id="post_content" placeholder="Write something..." required>{{post.content | e}}</textarea>
                <label for="author_name">Author Name</label>
                <input type="text" name="author" placeholder="Enter author name" id="author_name" value="{{post.author_name | e}}" required>
                <input type="submit" value="UPDATE">
            </form>
        </div>
    </div>
</body>
</html>

Completed.

GitHub

Learn also:

Node JS MySQL Crud operations
Node MongoDB CRUD Operation

Related Posts

Leave a Reply

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