Project

User Management System

<Report>
Introduction:

This report provides an overview of the development process and technologies used in building a
User Management System (UMS). A UMS is a crucial component for managing user accounts,
authentication, and authorization within web applications. The system allows administrators to
create, update, and delete user accounts, as well as define access permissions and roles.

Technologies Used:

1. HTML

2. CSS

3. JavaScript

4. Node.js:

5. Express.js:

6. EJS

7. MongoDB:

Development Process:

1. Planning and Design: The development process begins with defining the requirements and
functionalities of the User Management System. Wireframes and mockups are created to visualize
the user interface and workflow. The design should consider usability, security, and scalability
aspects.

2. Frontend Development: HTML, CSS, and JavaScript are used to implement the frontend
components of the UMS, including user registration forms, login pages, user profile views, and
administrative dashboards. Frontend development focuses on creating an intuitive and user-friendly
interface.

3. Backend Development: Node.js and Express.js are employed to build the backend infrastructure
of the UMS. This involves setting up routes for handling user authentication, account management,
and authorization. Middleware functions may be used for tasks such as input validation,
authentication checks, and error handling.

4. Database Integration: MongoDB is used as the backend database for storing user-related data.
MongoDB collections are created to store user accounts, authentication tokens, and access control
lists. Mongoose, an Object Data Modeling (ODM) library for MongoDB, may be used to facilitate data
manipulation and schema validation.
5. Integration and Testing: Frontend and backend components are integrated to form a cohesive
User Management System. Testing is performed to ensure functionality, security, and performance.
Unit tests, integration tests, and end-to-end tests may be conducted to validate the system's
behavior under various scenarios.

6. Deployment and Maintenance: The User Management System is deployed to a production

environment, ensuring proper configuration and security measures. Continuous monitoring and
maintenance are essential to address any issues, apply updates, and scale the system according to
changing requirements.

Conclusion:

The User Management System is a critical component of web applications, providing functionality
for user registration, authentication, and authorization. By leveraging technologies such as HTML,
CSS, JavaScript, Node.js, Express.js, EJS, and MongoDB, a robust and scalable UMS can be developed
to meet the needs of modern web applications, ensuring secure and efficient user management
capabilities.

All Files Structure

 Source Code (folder:- User-Management)
File Name:- main.css
file location- user/-management/public/css/main.css :-
Code:

body {

font-size: .875rem;

.feather {

width: 16px;

height: 16px;

/*

* Sidebar

*/

.sidebar {

position: fixed;

top: 0;

/* rtl:raw:

right: 0;

*/

bottom: 0;

/* rtl:remove */

left: 0;

z-index: 100; /* Behind the navbar */

padding: 48px 0 0; /* Height of navbar */

 box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);

@media (max-width: 767.98px) {

.sidebar {

top: 5rem;

.sidebar-sticky {

height: calc(100vh - 48px);

overflow-x: hidden;

overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */

.sidebar .nav-link {

font-weight: 500;

color: #333;

.sidebar .nav-link .feather {

margin-right: 4px;

color: #727272;

.sidebar .nav-link.active {

color: #2470dc;
}

.sidebar .nav-link:hover .feather,

.sidebar .nav-link.active .feather {

color: inherit;

.sidebar-heading {

font-size: .75rem;

/*

* Navbar

*/

.navbar-brand {

padding-top: .75rem;

padding-bottom: .75rem;

background-color: rgba(0, 0, 0, .25);

box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);

.navbar .navbar-toggler {

top: .25rem;

right: 1rem;

}
.navbar .form-control {

padding: .75rem 1rem;

.navbar .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

color: white;

opacity: 1; /* Firefox */

.form-control-dark {

color: #fff;

background-color: rgba(255, 255, 255, .1);

border-color: rgba(255, 255, 255, .1);

.form-control-dark:focus {

border-color: transparent;

box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);

File Name:- img

file location:- user/-management/public/img :-
File Name:- db.js
file location:- user/-management/server/config/db.js:-
Code:

const mongoose = require('mongoose');

const connectDB = async()=> {
try {
mongoose.set('strictQuery', false);
const conn = await mongoose.connect(process.env.MONGODB_URI);
console.log(`Database Connected: ${conn.connection.host}`);
} catch (error) {
console.log(error);
}
}

module.exports = connectDB;

File Name:- db.js

file location:- user/-management/server/controllers/
customerController.js:-
Code:

const Customer = require("../models/Customer");

const mongoose = require("mongoose");

/**
* GET /
* Homepage
*/
exports.homepage = async (req, res) => {
// Remove
// const messages = await req.consumeFlash('info');
// Use this instead
const messages = await req.flash("info");

const locals = {
title: "NodeJs",
description: "Free NodeJs User Management System",
};

let perPage = 12;

let page = req.query.page || 1;

try {
const customers = await Customer.aggregate([{ $sort: { createdAt: -1 } }])
.skip(perPage * page - perPage)
.limit(perPage)
 .exec();
// Count is deprecated. Use countDocuments({}) or estimatedDocumentCount()
// const count = await Customer.count();
const count = await Customer.countDocuments({});

res.render("index", {
locals,
customers,
current: page,
pages: Math.ceil(count / perPage),
messages,
});
} catch (error) {
console.log(error);
}
};
// exports.homepage = async (req, res) => {
// const messages = await req.consumeFlash('info');
// const locals = {
// title: 'NodeJs',
// description: 'Free NodeJs User Management System'
// }

// try {
// const customers = await Customer.find({}).limit(22);
// res.render('index', { locals, messages, customers } );
// } catch (error) {
// console.log(error);
// }
// }

/**
* GET /
* About
*/
exports.about = async (req, res) => {
const locals = {
title: "About",
description: "Free NodeJs User Management System",
};

try {
res.render("about", locals);
} catch (error) {
console.log(error);
}
};

/**
* GET /
* New Customer Form
*/
exports.addCustomer = async (req, res) => {
const locals = {
title: "Add New Customer - NodeJs",
 description: "Free NodeJs User Management System",
};

res.render("customer/add", locals);
};

/**
* POST /
* Create New Customer
*/
exports.postCustomer = async (req, res) => {
console.log(req.body);

const newCustomer = new Customer({

firstName: req.body.firstName,
lastName: req.body.lastName,
details: req.body.details,
tel: req.body.tel,
email: req.body.email,
});

try {
await Customer.create(newCustomer);
await req.flash("info", "New customer has been added.");

res.redirect("/");
} catch (error) {
console.log(error);
}
};

/**
* GET /
* Customer Data
*/
exports.view = async (req, res) => {
try {
const customer = await Customer.findOne({ _id: req.params.id });

const locals = {
title: "View Customer Data",
description: "Free NodeJs User Management System",
};

res.render("customer/view", {
locals,
customer,
});
} catch (error) {
console.log(error);
}
};

/**
* GET /
 * Edit Customer Data
*/
exports.edit = async (req, res) => {
try {
const customer = await Customer.findOne({ _id: req.params.id });

const locals = {
title: "Edit Customer Data",
description: "Free NodeJs User Management System",
};

res.render("customer/edit", {
locals,
customer,
});
} catch (error) {
console.log(error);
}
};

/**
* GET /
* Update Customer Data
*/
exports.editPost = async (req, res) => {
try {
await Customer.findByIdAndUpdate(req.params.id, {
firstName: req.body.firstName,
lastName: req.body.lastName,
tel: req.body.tel,
email: req.body.email,
details: req.body.details,
updatedAt: Date.now(),
});
await res.redirect(`/edit/${req.params.id}`);

console.log("redirected");
} catch (error) {
console.log(error);
}
};

/**
* Delete /
* Delete Customer Data
*/
exports.deleteCustomer = async (req, res) => {
try {
await Customer.deleteOne({ _id: req.params.id });
res.redirect("/");
} catch (error) {
console.log(error);
}
};
/**
* Get /
* Search Customer Data
*/
exports.searchCustomers = async (req, res) => {
const locals = {
title: "Search Customer Data",
description: "Free NodeJs User Management System",
};

try {
let searchTerm = req.body.searchTerm;
const searchNoSpecialChar = searchTerm.replace(/[^a-zA-Z0-9 ]/g, "");

const customers = await Customer.find({

$or: [
{ firstName: { $regex: new RegExp(searchNoSpecialChar, "i") } },
{ lastName: { $regex: new RegExp(searchNoSpecialChar, "i") } },
],
});

res.render("search", {
customers,
locals,
});
} catch (error) {
console.log(error);
}
};

File Name:- customer.js

file location:- user/-management/server/models/customer.js:-
Code:

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const CustomerSchema = new Schema({

firstName: {

type: String,

required: true

},

lastName: {
 type: String,

required: true

},

tel: {

type: String,

required: true

},

email: {

type: String,

required: true

},

details: {

type: String,

required: true

},

createdAt: {

type: Date,

default: Date.now()

},

updatedAt: {

type: Date,

default: Date.now()

});

module.exports = mongoose.model('Customer', CustomerSchema);

File Name:- customer.js
file location:- user/-management/server/routes/customer.js:-
Code:

const express = require('express');

const router = express.Router();

const customerController = require('../controllers/customerController');

/**

* Customer Routes

*/

router.get('/', customerController.homepage);

router.get('/about', customerController.about);

router.get('/add', customerController.addCustomer);

router.post('/add', customerController.postCustomer);

router.get('/view/:id', customerController.view);

router.get('/edit/:id', customerController.edit);

router.put('/edit/:id', customerController.editPost);

router.delete('/edit/:id', customerController.deleteCustomer);

router.post('/search', customerController.searchCustomers);

module.exports = router;
File Name:- add.ejs
file location:- user/-management/views/customer/add.ejs:-
Code:

<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3

pb-2 mb-3 border-bottom">
<h1 class="h2">Customer</h1>
<div class="btn-toolbar mb-2 mb-md 0">
<div class="btn-group me-2">
<button class="btn btn-sm btn-outline-secondary">?</button>
</div>
</div>
</div>

<div class="col py-3">

<div class="row">
<div class="col">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a></li>
<li class="breadcrumb-item active">New Customer</li>
</ol>
</nav>
</div>
<div class="col text-end fw-lighter">
<b>UserId</b>
</div>
</div>

</div>

<form action="/add" method="POST">

<div class="row form-group mb-4">

<div class="col">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" value=""
placeholder="First Name" required>
</div>

<div class="col">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" value=""
placeholder="Last Name" required>
</div>
</div>

<div class="row form-group mb-4">

<div class="col">
<label for="tel">Telephone</label>
<input type="text" class="form-control" id="tel" name="tel" value=""
placeholder="Telephone" required>
</div>
 <div class="col">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" value=""
placeholder="Email" required>
</div>
</div>

<div class="form-group mb-4">

<label for="details">Customer Details</label>
<textarea class="form-control" name="details" id="details" cols="30" rows="12"
placeholder="Customer Details"></textarea>
</div>

<div class="form-group mb-4">

<button type="submit" class="btn btn-primary">Add Customer</button>
</div>

</form>

File Name:- edit.ejs

file location:- user/-management/views/customer/edit.ejs:-
Code:

<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3 pb-2

mb-3 border-bottom">

<h1 class="h2">Editing: <%= customer.firstName %> <%= customer.lastName %></h1>

<div class="btn-toolbar mb-2 mb-md 0">

<div class="btn-group me-2">

<button class="btn btn-sm btn-outline-secondary">?</button>

</div>

</div>

</div>

<div class="col py-3">

<div class="row">
 <div class="col">

<nav aria-label="breadcrumb">

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="/">Dashboard</a></li>

<li class="breadcrumb-item active"><%= customer.firstName %> <%= customer.lastName

%></li>

</ol>

</nav>

</div>

<div class="col text-end fw-lighter">

<b>Last Updated: <%= new Date(customer.updatedAt).toUTCString() %></b>

<b>UserId:</b> <%= customer._id %>

</div>

</div>

</div>

<form action="/edit/<%= customer._id %>?_method=PUT" method="POST">

<div class="row form-group mb-4">

<div class="col">

<label for="firstName">First Name</label>

<input type="text" class="form-control" id="firstName" name="firstName" value="<%=

customer.firstName %>" placeholder="First Name" required>

</div>

<div class="col">
 <label for="lastName">Last Name</label>

<input type="text" class="form-control" id="lastName" name="lastName" value="<%=

customer.lastName %>" placeholder="Last Name" required>

</div>

</div>

<div class="row form-group mb-4">

<div class="col">

<label for="tel">Telephone</label>

<input type="text" class="form-control" id="tel" name="tel" value="<%= customer.tel %>"

placeholder="Telephone" required>

</div>

<div class="col">

<label for="email">Email</label>

<input type="text" class="form-control" id="email" name="email" value="<%= customer.email

%>" placeholder="Email" required>

</div>

</div>

<div class="form-group mb-4">

<label for="details">Customer Details</label>

<textarea class="form-control" name="details" id="details" cols="30" rows="12"

placeholder="Customer Details"><%= customer.details %></textarea>

</div>

<div class="form-group mb-4">

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

 <button type="button" class="btn btn-danger" data-bs-toggle="modal" id="deleteButton" data-
bs-target="#deleteModal">Delete Customer</button>

</div>

</form>

<div class="modal fade" tabindex="-1" role="dialog" id="deleteModal">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<div class="modal-title">You are about to remove a customer record.</div>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

</div>

<div class="modal-body">

<p>

This will remove the customer record of <b class="fw-bold"><%= customer.firstName %> <%=
customer.lastName %></b><br/>

Are you sure?

</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

<form action="/edit/<%= customer._id %>?_method=DELETE" method="POST" class="position-

relative">

<button type="submit" class="btn btn-primary">Yes, Remove Customer</button>

</form>
 </div>

</div>

</div>

</div>

File Name:- view.ejs

file location:- user/-management/views/customer/view.ejs:-
Code:

<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3 pb-2

mb-3 border-bottom">

<h1 class="h2"><%= customer.firstName %> <%= customer.lastName %></h1>

<div class="btn-toolbar mb-2 mb-md 0">

<div class="btn-group me-2">

<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>

<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>

</div>

</div>

</div>

<div class="col py-3">

<div class="row">

<div class="col">

<nav aria-label="breadcrumb">

<ol class="breadcrumb">

<li class="breadcrumb-item"><a href="/">Dashboard</a></li>

<li class="breadcrumb-item active"><%= customer.firstName %></li>

</ol>
 </nav>

</div>

<div class="col text-end fw-lighter">

<b>Last Updated <%= new Date(customer.updatedAt).toUTCString() %> </b>

<b>UserId:</b> <%= customer._id %>

</div>

</div>

</div>

<ul class="list-group">

<li class="list-group-item">

<div class="row">

<div class="col" style="max-width: 140px"> <b>Name:</b></div>

<div class="col"><%= customer.firstName %> <%= customer.lastName %></div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col" style="max-width: 140px"> <b>Tel:</b></div>

<div class="col"><%= customer.tel %></div>

</div>

</li>

<li class="list-group-item">
 <div class="row">

<div class="col" style="max-width: 140px"> <b>Email:</b></div>

<div class="col"><%= customer.email %></div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col" style="max-width: 140px"> <b>Details:</b></div>

<div class="col"><%= customer.details %></div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col" style="max-width: 140px"> <b>Date Created:</b></div>

<div class="col"><%= customer.createdAt %></div>

</div>

</li>

<li class="list-group-item">

<div class="row">

<div class="col" style="max-width: 140px"> <b>Date Modified:</b></div>

<div class="col"><%= customer.updatedAt %></div>

</div>

</li>

</ul>
File Name:- main.ejs
file location:- user/-management/views/layouts/main.ejs:-
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= locals.title %></title>
<meta name="description" content="<%= locals.description %>">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>

<%- include('../partials/header.ejs') %>

<div class="container-fluid">
<div class="row">
<%- include('../partials/sidebar.ejs') %>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

<%- body %>
</main>

</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
File Name:- header.ejs
file location:- user/-management/views/partials/add.ejs:-
Code:
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="/"
>User Management System</a
>

<button
class="navbar-toggler position-absolute d-md-none collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<form
class="nav col-12 col-md-auto flex-fill mb-2 justify-content-center mb-md-0"
role="search"
method="POST"
action="/search"
>
<input
type="search"
name="searchTerm"
class="form-control form-control-dark w-100 rounded-0 border-0"
placeholder="Search..."
aria-label="Search"
/>
</form>
</header>

File Name:- sidebar.ejs

file location:- user/-management/views/partials/sidebar.ejs:-
Code:

<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">

<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">
<i class="bi bi-house"></i>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">
 <i class="bi bi-patch-question"></i>
About
</a>
</li>
</ul>
</div>
</nav>

File Name:- 404.ejs

file location:- user/-management/views /404.ejs:-
Code:

<h1>404</h1>

File Name:- about.ejs

file location:- user/-management/views /about.ejs:-
Code:

<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2
mb-3 border-bottom"
>
<h1 class="h2">About</h1>
</div>

<img src="img/picture.webp" alt="Laptop" width="473" height="316" />

<p>Photo by Garrett Sears on Unsplash</p>

<div class="pt-3">
<p>This is a simple user management system.</p>
</div>
File Name:- index.ejs
file location:- user/-management/views /index.ejs:-
Code:

<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3 pb-2

mb-3 border-bottom">

<h1 class="h2">Dashboard</h1>

<div class="btn-toolbar mb-2 mb-md 0">

<div class="btn-group me-2">

<a href="/add" class="btn btn-sm btn-outline-secondary">+ New User</a>

</div>

</div>

</div>

<% messages.forEach(element => { %>

<div class="alert alert-success alert-dismissible fade show" role="alert">

<%= element %>

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

</div>

<% }) %>

<div class="table-responsive">

<table class="table table-striped table-sm">

<thead>

<tr>

<th scope="col">First Name</th>

 <th scope="col">Last Name</th>

<th scope="col">Email</th>

<th scope="col" class="text-end">Action</th>

</tr>

</thead>

<tbody>

<% customers.forEach(element => { %>

<tr class="align-middle">

<td><%= element.firstName %></td>

<td><%= element.lastName %></td>

<td><%= element.email %></td>

<td class="text-end">

<div class="d-flex flex-row justify-content-end gap-2">

<a href="/view/<%= element._id %>" type="button" class="btn btn-primary btn-small">

<i class="bi bi-eye"></i>

</a>

<a href="/edit/<%= element._id %>" type="button" class="btn btn-warning btn-small">

<i class="bi bi-pencil"></i>

</a>

<form action="/edit/<%= element._id %>?_method=DELETE" method="POST"

class="position-relative">

<button type="submit" class="btn btn-danger btn-small">

<i class="bi bi-person-x"></i>

 </button>

</form>

</div>

</td>

</tr>

<% }) %>

</tbody>

</table>

</div>

<% if (customers.length > 0) { %>

<nav aria-label="Dashboard Pagination">

<ul class="pagination justify-content-center mt-5">

<% if (current == 1) { %>

<li class="page-item disabled"><a href="#" class="page-link">First</a></li>

<% } else { %>

<li class="page-item"><a href="/?page=1" class="page-link">First</a></li>

<% } %>

<% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>

<% if(i !== 1) { %>

 <li class="page-item disabled"><a href="#" class="page-link">...</a></li>

<% } %>

<% for(; i <= (Number(current) + 4) && i <= pages; i++ ) { %>

<% if (i == current) { %>

<li class="page-item disabled"><a href="#" class="page-link"><%= i %></a></li>

<% } else { %>

<li class="page-item"><a href="/?page=<%= i %>" class="page-link"><%= i %></a></li>

<% } %>

<% if (i == Number(current) + 4 && i < pages) { %>

<li class="page-item disabled"><a href="#" class="page-link">...</a></li>

<% } %>

<% } %>

<% if (current == pages) { %>

<li class="page-item disabled"><a href="#" class="page-link">Last</a></li>

<% } else { %>

<li class="page-item"><a href="/?page=<%= pages %>" class="page-link">Last</a></li>

<% } %>

</ul>

</nav>

<% } %>

File Name:- search.ejs

file location:- user/-management/views /search.ejs:-
Code:
<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3
pb-2 mb-3 border-bottom">
<h1 class="h2">Search</h1>
<div class="btn-toolbar mb-2 mb-md 0">
<div class="btn-group me-2">
<a href="/add" class="btn btn-sm btn-outline-secondary">+ New User</a>
</div>
</div>
</div>

<div class="table-responsive">
<% if (customers != "") { %>

<table class="table table-striped table-sm">

<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Tel</th>
<th scope="col">Email Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<% customers.forEach(element => { %>
<tr class="align-middle">
<td><%= element.firstName %></td>
<td><%= element.lastName %></td>
<td><%= element.tel %></td>
<td><%= element.email %></td>
<td>

<div class="d-flex flex-row justify-content-end gap-2">

<a href="/view/<%= element._id %>" type="button" class="btn btn-primary btn-

small">
<i class="bi bi-eye"></i>
</a>

<a href="/edit/<%= element._id %>" type="button" class="btn btn-warning btn-

small">
<i class="bi bi-pencil"></i>
</a>

<form action="/edit/<%= element._id %>?_method=DELETE" method="POST"

class="position-relative">
<button type="submit" class="btn btn-danger btn-small">
<i class="bi bi-person-x"></i>
</button>
</form>

</div>

</td>
</tr>
 <% }) %>
</tbody>
</table>

<% } else { %>

<h2>No results found.</h2>
<% } %>

</div>

File Name:- apps.js

file location:- user-management /apps.js:-
Code:
require('dotenv').config();

const express = require('express');

const expressLayout = require('express-ejs-layouts');
const methodOverride = require('method-override');

// npm install connect-flash

const flash = require('connect-flash');

const session = require('express-session');

// const connectDB = require('./server/config/db');
const mongoose = require('mongoose')

const app = express();

const port = process.env.PORT || 3000;

// Connect to Database
// connectDB();
mongoose.connect("mongodb://localhost:27017/UserDataManagement")
.then(() => {
console.log("DataBase Connected");
})
.catch((e) => {
console.log(e);
console.log("DataBase Cont Connected");
});

app.use(express.urlencoded({ extended: true }));

app.use(express.json());
app.use(methodOverride('_method'));

// Static Files
app.use(express.static('public'));

// Express Session
app.use(
session({
secret: 'secret',
resave: false,
 saveUninitialized: true,
cookie: {
maxAge: 1000 * 60 * 60 * 24 * 7, // 1 week
}
})
);

// Flash Messages
app.use(flash({ sessionKeyName: 'flashMessage' }));

// Templating Engine
app.use(expressLayout);
app.set('layout', './layouts/main');
app.set('view engine', 'ejs');

// Routes
app.use('/', require('./server/routes/customer'))

// Handle 404
app.get('*', (req, res) => {
res.status(404).render('404');
});

app.listen(port, ()=> {
console.log(`App listeing on port ${port}`)
});

File Name:- package.json

file location:- user-management/package.json:-
Code:

"name": "nodejs_user_management",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "nodemon app.js"

},

"keywords": [],
 "author": "",

"license": "ISC",

"dependencies": {

"connect-flash": "^0.1.1",

"dotenv": "^16.0.3",

"ejs": "^3.1.8",

"express": "^4.18.2",

"express-ejs-layouts": "^2.5.1",

"express-session": "^1.17.3",

"method-override": "^3.0.0",

"mongoose": "^7.6.8"

},

"devDependencies": {

"nodemon": "^3.0.3"

You need:

- Database (MongoDB) Free

Installation:-

To install and run this project - install dependencies using npm and then start your server:

```

npm install

npm start

```