A Library Management System is an essential application for managing books, users, and transactions in a library. It involves adding, removing, updating, and viewing books and managing users.
Core Features of Web Application
Create a simple web application where administrators can manage books and users. The application will feature:
- Add new books with all the required details.
- View the list of books including details like name, author, pages, prices, and availability.
- Issue and return books (change the book’s availability).
- Delete books from the library.
Approach
Below are the approaches for building the Library Management System using Node.js:
- Set Up Middleware with EJS: Configure EJS (Embedded JavaScript) as the templating engine to render dynamic pages and display data.
- Install and Configure Body Parser: Capture form data and handle POST requests from users.
- Create Routes for Adding Books and Users: Handle form submissions to add new entries to the collection.
- Create Delete Route: Remove books or users using a unique identifier.
- Create Update Route: Modify existing book or user details and reflect changes on the UI.
Steps to Build a Library Management System
Follow these steps to design and implement a basic library management system using Node.js and related technologies.
Step 1: Create a Project Folder
Open your terminal (Command Prompt/PowerShell) and run the following commands:
mkdir library-management-system
cd library-management-systemStep 2: Initialize a NodeJS Project
Run the following command to create a package.json file:
npm init -yStep 3: Install Dependencies
Run the following command to install the required dependencies:
npm install express ejs body-parserThis installs
- Express: Backend framework.
- EJS: Templating engine.
- Body-parser: To handle form submissions.
Step 4: Create Server File
Create a file named app.js and require the Express module. Then, create an Express instance and set EJS as the default view engine.
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = 3000;
// Sample Book Data
let books = [
{
bookName: "Rudest Book Ever",
bookAuthor: "Shwetabh Gangwar",
bookPages: 200,
bookPrice: 240,
bookState: "Available"
},
{
bookName: "Do Epic Shit",
bookAuthor: "Ankur Wariko",
bookPages: 200,
bookPrice: 240,
bookState: "Available"
}
];
// Middleware
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Home Route - Display Books
app.get("/", (req, res) => {
res.render("home", { data: books });
});
// Add Book Route
app.post("/", (req, res) => {
const newBook = {
bookName: req.body.bookName,
bookAuthor: req.body.bookAuthor,
bookPages: req.body.bookPages,
bookPrice: req.body.bookPrice,
bookState: "Available"
};
books.push(newBook);
res.render("home", { data: books });
});
// Issue Book Route
app.post("/issue", (req, res) => {
const requestedBookName = req.body.bookName;
books.forEach(book => {
if (book.bookName === requestedBookName) {
book.bookState = "Issued";
}
});
res.render("home", { data: books });
});
// Return Book Route
app.post("/return", (req, res) => {
const requestedBookName = req.body.bookName;
books.forEach(book => {
if (book.bookName === requestedBookName) {
book.bookState = "Available";
}
});
res.render("home", { data: books });
});
// Delete Book Route
app.post("/delete", (req, res) => {
const requestedBookName = req.body.bookName;
books = books.filter(book => book.bookName !== requestedBookName);
res.render("home", { data: books });
});
// Start Server
app.listen(PORT, () => {
console.log(`App is running on port ${PORT}`);
});
- Body-parser middleware: Parses incoming request data and makes it accessible via req.body.
- EJS view engine: Enables dynamic rendering of HTML templates with server-side data.
- Books array: Stores book objects with properties like name, author, pages, price, and availability.
- Root route (/): Renders home.ejs and passes the books array for dynamic display.
- POST route (/): Captures form data, adds a new book to the array, and re-renders the updated list.
Step 5: Set Up Views Directory
Create a views folder in your root directory and inside it, create a file called home.ejs.
Step 6: Create the Home Page (home.ejs)
Inside views/home.ejs, add the following code
<html>
<head>
<style>
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>Library Management System</h1>
<!-- Display Books -->
<h2>All Books</h2>
<table>
<tr>
<th>Book Name</th>
<th>Book Author</th>
<th>Book Pages</th>
<th>Book Price</th>
<th>Book Availability</th>
<th>Issue</th>
<th>Return</th>
<th>Delete</th>
</tr>
<% data.forEach(element => { %>
<tr>
<td><%= element.bookName %></td>
<td><%= element.bookAuthor %></td>
<td><%= element.bookPages %></td>
<td><%= element.bookPrice %></td>
<td><%= element.bookState %></td>
<td>
<% if (element.bookState === "Available") { %>
<form action="/issue" method="post">
<input type="hidden" name="bookName" value="<%= element.bookName %>">
<button type="submit">Issue</button>
</form>
<% } %>
</td>
<td>
<% if (element.bookState === "Issued") { %>
<form action="/return" method="post">
<input type="hidden" name="bookName" value="<%= element.bookName %>">
<button type="submit">Return</button>
</form>
<% } %>
</td>
<td>
<form action="/delete" method="post">
<input type="hidden" name="bookName" value="<%= element.bookName %>">
<button type="submit">Delete</button>
</form>
</td>
</tr>
<% }) %>
</table>
<!-- Add Book Form -->
<h2>Add Book</h2>
<form action="/" method="post">
<input type="text" placeholder="Book Name" name="bookName" required>
<input type="text" placeholder="Book Author" name="bookAuthor" required>
<input type="number" placeholder="Book Pages" name="bookPages" required>
<input type="number" placeholder="Book Price" name="bookPrice" required>
<button type="submit">Add</button>
</form>
</body>
</html>
Output
node app.js