In this article, we are going to create a Hospital Management System. A Hospital Management System is basically used to manage patients in the hospital. It is helpful to see which patients do not have a bed allotted or if there are any free beds or not. It makes sure that the discharged patients’ beds should not be free, they should be allotted to those who need them.
Functionality: A Hospital can do the following things with this Hospital Management System:
- Display All Patients
- Add New Patients
- Do not Add New Patients if beds are not available
- Discharge Patients
Approach: We are going to use Body Parser by which we can capture user input values from the form such as the patients’ name, number, date of birth, city, phone number, and room number & store them in a collection. Then we will send the patients’ data to the web page using EJS. EJS is a middleware that makes it easy to send data from your server file (app.js or server.js) to a web page. We will also create the Discharge Route for discharging the patients.
Implementation: Below is the step-by-step implementation of the above approach.
Step 1: Project Setup:
Initializes NPM: Create and Locate your project folder into the terminal & type the command
npm init -y
It initializes our node application & makes a package.json file.
Install Dependencies: Locate your root project directory into the terminal and type the command
npm install express ejs body-parser
To install Express, EJS, and Body Parser as dependencies inside your project
Create Server File: Create an ‘app.js’ file, inside this file require the Express Module, and create a constant ‘app’ for creating an instance of the express module, then set the EJS as the default view engine.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
We also create a constant availableBeds, and set it to the number of beds available.
const availableBeds = 2;
Rearrange Your Directories: It is required to use ‘.ejs’ as an extension for the HTML file instead of ‘.html’ for using EJS inside it. Then you have to move every ‘.ejs’ file in the views directory inside your root directory. EJS is by default looking for ‘.ejs’ files inside the views folder.
Use EJS variable: Inside your updated .ejs file, you have to use EJS Variables to receive values from your server file. You can declare variables in EJS like
<%= variableName %>
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<%= variableName %>
</body>
</html>
|
Send data to a variable: Inside your server file ( app.js or index.js ), you can send an EJS file along with some data by using the render method.
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
Javascript
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
|
Fetching data from form to app.js: To receive input values of a form, we have to use a node package named body-parser.
Install body-parser:
npm install body-parser
Require body-parser module:
const bodyParser = require('body-parser')
And then:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
Then we can handle form data using the request object.
Step 2: Fetch Patients Records: We have an array of patients with different properties. Let’s send the array to our web page. In the previous step, we just sent a value to the variable, now we are sending the complete array.
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const patients = [{
name: 'Aditya',
number: '8175826846',
dob: '29/09/2001',
city: 'Mirzapur',
roomNo: '1',
}]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: patients
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
|
Since we have so many elements inside our array and we have to print each of them so we have to use For Each Loop to loop through every single element inside our collection and display the details.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HMS</title>
</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>
<body>
<h1>All Patients</h1>
<table>
<tr>
<th>Name</th>
<th>Number</th>
<th>DOB</th>
<th>City</th>
<th>Room No.</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.name %>
</td>
<td>
<%= element.number %>
</td>
<td>
<%= element.dob %>
</td>
<td>
<%= element.city %>
</td>
<td>
<%= element.roomNo %>
</td>
</tr>
<% }) %>
</table>
</body>
</html>
|
Step 3: Add Patients to the list: For this, we have to create a form and handle the form data inside our ‘app.js’ file using Body Parser.
<form action="/" method="post">
<input type="text" placeholder="Name" name="name">
<input type="number" placeholder="Number" name="number">
<input type="text" placeholder="DOB" name="dob">
<input type="text" placeholder="City" name="city">
<button type="submit">Add</button>
</form>
Handle form data inside ‘app.js’: We have to fetch values from a form using req.body.valueName, and then arrange it like an object and push it inside our patient’s array.
app.post("/", (req, res) => {
const name = req.body.name
const number = req.body.number
const dob = req.body.dob
const city = req.body.city
if (patients.length < availableBeds) {
const roomNo = patients.length + 1;
patients.push({
name: name,
number: number,
dob: dob,
city: city,
roomNo: roomNo
})
res.render("home", {
data: patients
})
}
else {
res.send("No room available");
}
})
We only push the patients if there are any free beds, if not then simply return the No room available message.
Step 4: Discharge Patients: Updating Web Page giving a Discharge option: We have to create a form that sends the patient’s name which we want to Discharge to the server file ‘app.js’.
<form action="/discharge" method="post">
<input type="text" style="display: none;"
name="name" value="<%= element.name %>">
<button type="submit">Discharge</button>
</form>
For Discharging patients, we have to create a Discharge route where we are going to fetch the requested patient’s name and search for the patient who has the same name, and delete the element.
app.post('/discharge', (req, res) => {
var name = req.body.name;
var j = 0;
patients.forEach(patient => {
j = j + 1;
if (patient.name == name) {
patients.splice((j - 1), 1)
}
})
res.render("home", {
data: patients
})
})
Complete Code:
app.js
Javascript
const express = require('express')
const bodyParser = require('body-parser')
const patients = [{
name: 'Aditya',
number: '8175826846',
dob: '29/09/2001',
city: 'Mirzapur',
roomNo: '1',
}]
const availableBeds = 2;
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: patients
})
})
app.post("/", (req, res) => {
const name = req.body.name
const number = req.body.number
const dob = req.body.dob
const city = req.body.city
if (patients.length < availableBeds) {
const roomNo = patients.length + 1;
patients.push({
name: name,
number: number,
dob: dob,
city: city,
roomNo: roomNo
})
res.render("home", {
data: patients
})
}
else {
res.send("No room available");
}
})
app.post('/discharge', (req, res) => {
var name = req.body.name;
var j = 0;
patients.forEach(patient => {
j = j + 1;
if (patient.name == name) {
patients.splice((j - 1), 1)
}
})
res.render("home", {
data: patients
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
|
home.ejs
HTML
<!DOCTYPE html>
<html>
<head>
<title>HMS</title>
</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>
<body>
<h1>All Patients</h1>
<table>
<tr>
<th>Name</th>
<th>Number</th>
<th>DOB</th>
<th>City</th>
<th>Room No.</th>
<th>Discharge</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td><%= element.name %></td>
<td><%= element.number %></td>
<td><%= element.dob %></td>
<td><%= element.city %></td>
<td><%= element.roomNo %></td>
<td>
<form action="/discharge" method="post">
<input type="text" style="display: none;"
name="name" value="<%= element.name %>">
<button type="submit">Discharge</button>
</form>
</td>
</tr>
<% }) %>
</table>
<h1>Add Patient</h1>
<form action="/" method="post">
<input type="text" placeholder="Name" name="name">
<input type="number" placeholder="Number" name="number">
<input type="text" placeholder="DOB" name="dob">
<input type="text" placeholder="City" name="city">
<button type="submit">Add</button>
</form>
</body>
</html>
|
Steps to run the application: Inside the terminal type the command to run your script.
node app.js
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...