In most of the applications we do the same thing and that CRUD (Create, Read, Update and Delete). Today we are going to do the same but in Node Js where we are using MongoDB as a database.
If you wanted to start with Node Js believe me this article will make you life very easy in Node Js & Mongo DB.
Before starting I believe you installed Node Js, NPM, Express and MongoDB.
Here is the video where I have discussed the below functionality.
The below link will help you for creating a Node Js App.
Create first node js project and change view template engine jade to ejs
So here we go CRUD operation in Node Js :
First of all I'm giving command to install all the dependencies required for CRUD operation.
For mongoose please run below command:
1
|
sudo npm install mongoose --save
|
Express provides facility to use different different template engines for view and by default it gives 'jade'. I'm going to use 'ejs' template engine for views. To install the ejs dependency please run below command:
1
|
sudo npm install ejs --save
|
While deleting or updating we will need to display the message or to flash the messages after action completed for we need to install ''req-flash". But it uses session to flash the message so first we need to install the express-session.
1
2
|
sudo npm install express-session --save
sudo npm install req-flash --save
|
Now edit your app.js file and include the 'express-session' and 'req-flash' like:
1
2
|
var session = require('express-session');
var flash = require('req-flash');
|
You also need to create database connection so here is code for that you just need to put this code into app.js :
1
2
3
4
5
6
7
|
// DB connection
var mongoose = require('mongoose');
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/user_crud', { useMongoClient: true })
.then(() => console.log('connection succesful'))
.catch((err) => console.error(err));
// DB connection end
|
Here 'user_crud' is our database name.
Now to change the view engine find the below code in app.js.
1
|
app.set('view engine', 'jade');
|
1
|
app.set('view engine', 'ejs');
|
Now use session and flash in app.js for flashing the messages.
1
2
3
4
5
6
7
|
app.use(session({
secret: 'djhxcvxfgshajfgjhgsjhfgsakjeauytsdfy',
resave: false,
saveUninitialized: true
}));
app.use(flash());
|
Keep in mind flash should have been used before defining the routes in app.js
routes/user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
var express = require('express');
var router = express.Router();
var User = require('../schema/user');
/* GET home page. */
router.get('/', function(req, res) {
User.find({role: { $ne: 1 }}, function(err, users) {
if (err) {
console.log(err);
} else {
res.render('users', { successMsg: req.flash('successMsg'),errorMsg: req.flash('errorMsg'), users: users });
}
});
});
/* GET register page. */
router.get('/register', function(req, res) {
res.render('register', { title: 'Register' });
});
/* REGISTER USER. */
router.post('/register', function(req, res) {
var data = new User(req.body);
data.save(function(err){
if(err){
res.render('register', { message: 'Invalid request!' });
}else{
res.render('register', { message: 'User registered successfully!'});
}
})
});
/* GET SINGLE User BY ID */
router.get('/edit/:id', function(req, res) {
User.findById(req.params.id, function (err, user) {
if (err) {
console.log(err);
} else {
res.render('edit-user', { errorMsg: req.flash('errorMsg'),successMsg: req.flash('successMsg'), userDetail: user });
}
});
});
/* UPDATE User */
router.post('/edit/:id', function(req, res) {
User.findByIdAndUpdate(req.params.id, req.body, function (err) {
if(err){
req.flash('errorMsg', 'Something went wrong! User could not updated.');
res.redirect('/users/edit/'+req.params.id);
} else {
req.flash('successMsg', 'User updated successfully.');
res.redirect('/users/edit/'+req.params.id);
}
});
});
/* DELETE User BY ID */
router.get('/destroy/:id', function(req, res) {
User.findByIdAndRemove(req.params.id, function (err, project) {
if (err) {
req.flash('errorMsg', 'User not deleted successfully.');
res.redirect('/users');
} else {
req.flash('successMsg', 'User deleted successfully.');
res.redirect('/users');
}
});
});
module.exports = router;
|
1
2
3
4
5
6
7
8
9
10
11
|
var mongoose = require('mongoose');
var Schema = mongoose.Schema,
ObjectId = Schema.ObjectId;
var User = new Schema({
empId :String,
name :String,
email :String,
role :String,
password :String
});
module.exports = mongoose.model('User', User);
|
views:
Rename the view file like index.jade to index.ejs, layout.jade to layout.ejs and error.jade.error.ejs.
layout.ejs
1
2
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
user.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<% include layout %>
<% if (typeof successMsg != 'undefined' && successMsg) { %>
<div class="alert alert-success"><%- successMsg %></div>
<% } else if(typeof errorMsg != 'undefined' && errorMsg) { %>
<div class="alert alert-danger"><%- errorMsg %></div>
<% } %>
<section name="content">
<div class="container">
<h5 class="text-center"><a href="/users/register">Add New User</a></h5>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Employee Id</th>
<th>User Name</th>
<th>Email Id</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<%
if (typeof users != 'undefined' && users.length > 0) {
var srNo = 0;
users.forEach( function ( user ){
srNo = srNo + 1;
%>
<tr>
<th scope="row"><%= srNo %></th>
<td><%= user.empId %></td>
<td><%= user.name %></td>
<td><%= user.email %></td>
<td><% if (user.role==2) { %>Admin<% } else if(user.role==3) { %> Customer <% } %></td>
<td>
<a href="/users/edit/<%= user._id %>" title="Edit User"><button class="btn btn-primary">Edit</button></a>
<a href="/users/destroy/<%= user._id %>" title="Delete User"><button class="btn btn-danger">Delete</button></a>
</td>
</tr>
<% });
}
else { %>
<tr><td colspan="6"> No Data </td></tr>
<% } %>
</tbody>
</table>
</div>
</section>
|
register.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<% include layout %>
<section name="content">
<div class="container">
<% if (typeof message != 'undefined' && message) { %>
<h2><%= message %></h2>
<% } %>
<form class="form-horizontal" role="form" method="post" action="/users/register">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Employee Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="empId" name="empId" placeholder="Employee Id">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Role</label>
<div class="col-sm-10">
<select name="role" class="form-control">
<option value="">Select Role</option>
<option value="2">Admin</option>
<option value="3">Customer</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Register" class="btn btn-primary">
</div>
</div>
</form>
</div>
</section>
|
edit-user.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<% include layout %>
<section name="content">
<div class="container">
<% if (typeof successMsg != 'undefined' && successMsg) { %>
<div class="alert alert-success"><%- successMsg %></div>
<% } else if(typeof errorMsg != 'undefined' && errorMsg) { %>
<div class="alert alert-danger"><%- errorMsg %></div>
<% } %>
<form class="form-horizontal" role="form" method="post" action="">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Employee Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="empId" name="empId" placeholder="Employee Id" value="<% if (typeof userDetail != 'undefined') { %><%= userDetail.empId %><% } %>">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Role</label>
<div class="col-sm-10">
<select name="role" class="form-control">
<option value="">Select Role</option>
<option value="2" <% if (typeof userDetail != 'undefined' && userDetail.role==2) { %>Selected<% } %>>Admin</option>
<option value="3" <% if (typeof userDetail != 'undefined' && userDetail.role==3) { %>Selected<% } %>>Customer</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" value="<% if (typeof userDetail != 'undefined') { %><%= userDetail.name %><% } %>">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<% if (typeof userDetail != 'undefined') { %><%= userDetail.email %><% } %>">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Register" class="btn btn-primary">
</div>
</div>
</form>
</div>
</section>
|