Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner (Part 7 - finish)

After we finished trying to test our API through Postman, now as I promised you, I will implement the view using bootstrap.

Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner

Ok, now we have to install bootstrap and jquery first

npm install bootstrap

npm intsall jquery

Once finished installing those two modules, now we have to set the resource folder in app.js

we can add these several lines of code

//set folders for resources
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/jsjquery', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

So, the full codes of app.js would be like this

const express = require('express');
const mongoose = require('mongoose');
require('dotenv/config');
const app = express();
const bodyparser = require('body-parser');
const path = require('path');

//view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//set folders for resources
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/jsjquery', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap


// allow to use body parser
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({ extended: false }));

//routes 
app.get('/', async (req, res) => {
    res.redirect('/notes')
});

//load routes
const notes_route = require('./routes/notes');

//middleware
app.use('/notes', notes_route);

//connect database
mongoose.connect(process.env.MYCONNECTION,
    { useNewUrlParser: true },
    () => console.log('yeay connected!'));

//this is to listen the port
const port = process.env.PORT;
app.listen(port, function () {
    console.log('the server runs at ' + port);
});

Now we will implement the views for this simple web app. First we need to make a folder named views and after that create 2 files like below image

Tag : Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner

view folder

File note_home.ejs

This view is to show user the lists of notes we already created

<!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>Document</title>
    <!-- load bootsrtap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    </div>
    <div class="container">
        <h1>Simple Note using Node Js Express, MongoDb and Bootstrap</h1>
        <hr>
        <a href="/"><button class="btn btn-primary">Home</button></a>
        <hr>
        <div class="row">
            <div class="col-md-8 mb-5">
                <h2>List Notes</h2>
                <table class="table table-borderless">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <td>Title</td>
                            <td>Content</td>
                            <th scope="col">action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% for(var i = 0; i < notes.length; i++) { %>
                        <tr>
                            <th scope="row"><%= i+1 %> </th>
                            <td><%= notes[i].title %></td>
                            <td><%= notes[i].content %></td>
                            <td><a href="notes/<%= notes[i]._id %>"><button class="btn btn-primary">Check</button></a>
                                <a href="notes/delete/<%= notes[i]._id %>"><button
                                        class="btn btn-danger">Delete</button></a></td>
                        </tr>
                        <% } %>

                    </tbody>
                </table>
            </div>

            <div class="col-md-4 mb-5">
                <h2>Add Note</h2>
                <form action="/notes" method="POST">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Title</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="Enter the title">
                        <small id="title" class="form-text text-muted">Name of your concert</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Content</label>
                        <input type="text" class="form-control" id="content" name="content" placeholder="Enter content">
                        <small id="emailHelp" class="form-text text-muted">it can be the content</small>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

            </div>
        </div>
        <br>
        <hr>
    </div>

</body>

</html>

File checknote.ejs

This view is to show user one specific note and update it if required

<!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>Document</title>
    <!-- load bootsrtap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    </div>
    <div class="container">
        <h1>Simple Note using Node Js Express, MongoDb and Bootstrap</h1>
        <hr>
        <a href="/"><button class="btn btn-primary">Home</button></a>
        <hr>
        <div class="row">
            <div class="col-md-8 mb-5">
                <h2>Note you choose..</h2>
                <table class="table table-borderless">
                    <thead>
                        <tr>
                            <td>Title</td>
                            <td>Content</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><%= notes.title %></td>
                            <td><%= notes.content %></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="col-md-4 mb-5">
                <h2>Update This Note</h2>
                <form action="/notes/update/<%= notes._id %>" method="POST">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Title</label>
                        <input type="text" class="form-control" id="title" name="title" value="<%= notes.title %>">
                        <small id="title" class="form-text text-muted">Name of your concert</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Content</label>
                        <input type="text" class="form-control" id="content" name="content"
                            value="<%= notes.content %>">
                        <small id="emailHelp" class="form-text text-muted">it can be the content</small>
                    </div>

                    <button type="submit" class="btn btn-primary">Update</button>
                </form>

            </div>
        </div>
        <br>
        <hr>
    </div>

</body>

</html>

the user interface of note web app

For demo you can check here: https://nodejs-simplenote-app.herokuapp.com/notes

and I already uploaded the project on github: https://github.com/ZenHuzaini/nodejs-simplenoteapp

I hope it can be useful. Thank you so much for following this tutorial. Don't forget to comment, share and check other articles about Node Js in this blog.

Table Content

title	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 1	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 2	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 3	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 4	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 5	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 6	Link
Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap Part 7	Link

Tag :

Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner, Express, Mongodb and Bootstrap For Beginner, Creating Simple CRUD Using Node js, Express, Mongodb and Bootstrap For Beginner