SKILL DEVELOPMENT COURSE(NODE JS/REACT JS/DJANGO)

[Link] II Year I Sem. LT P C

0 0 2 1

Course Objectives:
Upon completing this course, the students will be able to

1. Develop modular and reusable web components.

2. Create dynamic web pages using JavaScript.
3. Design responsive layouts with CSS and frameworks.
4. Build server-side applications with [Link].
5. Ensure a seamless user experience.

List of Experiments:
1. Build a responsive web application for shopping cart with registration, login, catalog and cart pages using CSS3
features, flex and grid.

2. Make the above web application responsive web application using the Bootstrap framework.

3. Use JavaScript to validate the client-side pages implemented in experiment 1 and experiment 2.
4. Explore the features of ES6 like arrow functions, callbacks, promises, and async/await. Implement an
application for reading the weather information from [Link] and display the information as a
graph on the web page.

5. Develop a Java standalone application that connects with the database (Oracle / MySQL) and
perform the CRUD operation on the database tables.

6. Create an XML for the bookstore. Validate the same using both the DTD and XSD Programs.

7. Design a controller with a servlet that provides the interaction with an application developed in
experiment 1 and the database created in experiment 5

8. Maintaining the transactional history of any user is very important. Explore the various session-tracking
mechanisms.

9. HTTP Session: An HTTP session is a way to store information on the server side between requests
from the same client. Each client gets a unique session ID, which is used to retrieve session data.

10. Create a custom server using the HTTP module and explore the other modules of Node JS like OS,
path, and event.

11. Develop an express application that can interact with REST API to perform CRUD operation on
student data.
i
12. For the above application create authorized endpoints using JWT(JSON WEB TOKEN).

13. Create a React application for the student management system having registration, login, contact, and
about pages and implement routing to navigate through these pages.

14. Create a TODO application in react with necessary components and deploy it on github.

ii
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

VISION AND MISSION OF THE INSTITUTE

VISION

To Be A State-Of-The-Art Centre For Learning With A Social Commitment Transforming The

Youth Into Dynamic Professionals.

MISSION

IM1: Foster unmatched excellence in professional education

IM2: provide quality eco-system to inspire learning aligned to needs.

IM3: inculcate ethical and moral values to groom Good citizens.

IM4: involve in activities with team spirit and collaborations towards nation building.

VISION AND MISSION DEPARTMENT

Vision

To be in the frontier of computer science and engineering education with moral values towards
nation-building.

Mission
DM1: To disseminate and develop knowledge with innovative ideas.
DM2: To Provide a learning-centric environment to design, experience, and encourage industry-institute
interactions.
DM3: To Organize training and involve in activities towards developing and professionals, leaders.

iii
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

1. PROGRAM EDUCATIONAL OBJECTIVES (PEO’S):

A graduate of the Computer Science and Engineering Program should:

Program Educational Objective1:(PEO1)

PEO1 PEO 1: Develop innovative computing products and complex solution techniques
by utilizing strong technical proficiency and critical thinking.

Program Educational Objective2:(PEO2)

PEO2 Demonstrate professionalism, ethical attitude, teamwork, and leadership skills
with lifelong learning.
Program Educational Objective3:(PEO3)
PEO3 Exhibit effective communication skills and social concerns to meet the
challenges of software industries.

2. PROGRAM SPECIFIC OUTCOMES (PSOs)

PSO1 PSO 1: An ability to specify, analyze & design efficient computer applications
that meeting

the requirement and limitations.

PSO 2: An ability to implement algorithm for a secure and reliable data

PSO2 communication system

PSO3 Able to excel in competitive exams and best for higher studies with technical
competency.

iv
 PROGRAM OUTCOMES (POS):
PO1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering
Fundamentals and an engineering specialization to the solution of complex
engineering problems.

Problem analysis: Identify, formulate, review research literature, and analyze complex
PO2 engineering problems reaching substantiated conclusions using first principles
Mathematics, natural sciences, and engineering sciences.

PO3 Design/development of solutions: Design solutions for complex engineering

problems and design system components or processes that meet the specified needs
with appropriate consideration for the public health and safety, and the cultural,
societal, and environmental considerations.

Conduct investigations of complex problems: Use research-based knowledge and

PO4 research methods including design of experiments, analysis and interpretation of data,
and synthesis of the information to provide valid conclusions.

Modern tool usage: Create, select, and apply appropriate techniques, resources,
PO5 and modern engineering and IT tools including prediction and modeling to
complex engineering activities with an understanding of the limitations.

The engineer and society: Apply reasoning informed by the contextual knowledge
PO6 to assess societal, health, safety, legal and cultural issues and the consequent
responsibilities relevant to the professional engineering practice.

Environment and sustainability: Understand the impact of the professional engineering

PO7 Solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.

Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
PO8 norms of the engineering practice.

Individual and team work: Function effectively as an individual, and as a member

PO9 or leader in diverse teams, and in multi-disciplinary settings.

Communication: Communicate effectively on complex engineering activities with the

PO10 engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.

v
 MOTHER TERESA INSTITUTE OF SCIENCE & TECHNOLOGY
Sathupally, Khammam Dist., Telangana
Department of COMPUTER SCIENCE AND ENGINEERING(AI&ML)

Course Outcome mapping with PO’s and PSO’s

Course Name Faculty Name Year and Sem

[Link] K. Nirusha II-I

Academic Year 2025-26 CSM

COURSE OUTCOMES (COs):

Upon completion of the course, students will be able to:

Blooms
CO# Course Outcomes Taxonomy
Levels

CO1 Define catalog and cart pages using CSS3 REMEMBER

features, flex and grid.

CO2 Develop Make the above web CREATE

application responsive web application
using Bootstrap framework
CO3 Implement code with the database APPLY
(Oracle / mySql) and perform the
CRUD operation on the database tables
CO4 APPLY
Implement code Validate the same
using both DTD and XSD

CO5 CREATE
Develop tracking mechanism (Cookies,
HTTP Session)
CO6 Design and Develop programs CREATE
application create authorized end points
using JWT (JSON Web Token).
vi
 PO PO PO PO P PO PO PO PO PO1 PO1 PO1 PSO PSO PSO
O
1 2 3 4 6 7 8 9 0 1 2 1 2 3
5
1
CO1 2 2 3 1 2 2 1 3 1 2 3 2 2 2

1 1 1
CO2 2 3 2 3 2 2 2 3 2 3 2 2
1 1 1 1
CO3 3 2 3 3 2 2 1 3 2 2 3
1 1
CO4 3 3 2 2 1 1 2 2 3 1 3 2 1
2 1 1 1 1 1 1
CO5 3 2 2 2 2 2 2 2
1 1 1 1 1 1 1
CO6 3 1 1 1 2 1 2 1

Course 2.5 1.4 3 1.25 2.5 1.25 0.75 1.5 0.75 1.5 2.25 2.25 2.75 2 2

Faculty Signature

vii
 Do’s and Dont’s

DO’s:

1. Computer lab users must sign in and out of the lab

2. Wearing Uniform in the lab is compulsory

3. Take care of your eyes, by relaxing few minutes while using computer

4. Adjust the chair settings to adopt your body for the proper height and
lumbar support.

5. Proper code of conduct and ethics must be followed in the lab.

6. Operate the computer system and other hardware devices with care

Dont’s:

1. Software maybe installed by the Computer Lab staff only. Do not install any
software on your own. Unnecessary files found in the system will be
removed by the concerned staff.

2. Activities in computer Lab that are considered to be abusive to the software,

hardware and/or personnel will be suitably penalized.

3. Do not modify any software or files . Do not over write the operating system
or any other parameters in the computer system.

4. Copying software with out appropriate authorization is not permitted.

5. External devices like pen drive ,CD’s should be avoided so that computer
systems are free from virus.

viii
 INDEX

[Link] Name of the Program

1. Build a responsive web application for shopping cart with registration, login,
catalog and cart pages using CSS3 features, flex and grid.

2. Make the above web application responsive web applica using the Bootstrap
framework.

3. Use JavaScript for doing client-side validation of the pages implemented in

experiment 1 and experiment 2.

4. Explore the features of ES6 like arrow functions, callbacks, promises, and
async/await. Implement an application for reading the weather information
from [Link] and display the information in the form of a graph
on the web page.

5. Develop a Java standalone application that connects with the database

(Oracle / MySQL) and perform the CRUD operation on the database tables.

6. Create an XML for the bookstore. Validate the same using both the DTD
and XSD Programs.
7. Design a controller with servlet that provides the interaction with an
application developed in experiment 1 and the database created in
experiment 5.

8. Maintain the transactional history of any user is very important. Explore

the various session tracking Mechanism.

9. HTTP Session: An HTTP session is a way to store information on the

server side between requests from the same client. Each client gets a
unique session ID, which is used to retrieve session data.

10. Create a custom server using HTTP module and explore the other
modules of Node JS like OS, path, and event.

ix
11. Develop an express application that can interact with REST API
to perform CRUD operation on student data.

12. For the above application create authorized endpoints using JWT(JSON
WEB TOKEN).
13. Create a React application for the student management system having
registration, login, contact, and about pages and implement routing to
navigate through these pages.
14. Create a TODO application in react with necessary components and
deploy it on github.

x
 Mother Teresa Institute of Science and Technology

1. Build a responsive web application for shopping cart with registration, login, catalog and cart pages
using CSS3 features, flex and grid.

AIM:

Building a responsive web application for a shopping cart with registration login, catalog and cart pages
using CSS3 features, flex, and grid.

Process:
• Install Visual Studio code on your computer.
• Create an HTML file and save it as the [Link].
• Create a CSS file and save it as [Link].
• Create a JavaScript file and save it as [Link].
• All files should be saved in one folder.
• Now press F5 or click on the run from the HTML file.

HTML Program: [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<nav>
<a href="#home">Home</a>
<a href="#catalog">Catalog</a>
<a href="#cart">Cart</a>
<a href="#login">Login</a>
<a href="#register">Register</a>
</nav>

<section id="home">

Department of Computer and Science and Engineering 1

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<h1>Welcome to Our Shopping Cart!</h1>

</section>

<section id="register">
<h2>Register</h2>
<form id="registerForm">
<input type="text" id="username" placeholder="Username" required>
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</section>

<section id="login">
<h2>Login</h2>
<form id="loginForm">
<input type="text" id="loginUsername" placeholder="Username" required>
<input type="password" id="loginPassword" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</section>

<section id="catalog">
<h2>Catalog</h2>
<div class="catalog-grid">
<div class="item">
<h3>Item 1</h3>
<button onclick="addToCart('Item 1')">Add to Cart</button>
</div>
<div class="item">
<h3>Item 2</h3>
<button onclick="addToCart('Item 2')">Add to Cart</button>
</div>
<div class="item">
<h3>Item 3</h3>
<button onclick="addToCart('Item 3')">Add to Cart</button>
</div>
</div>
</section>

<section id="cart">

Department of Computer and Science and Engineering 2

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<h2>Your Cart</h2>
<ul id="cartItems"></ul>
<button onclick="checkout()">Checkout</button>
</section>

<script src="[Link]"></script>
</body>
</html>

CSS Program: [Link]

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

nav {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 1rem;
}

nav a {
color: white;
text-decoration: none;
}

h1, h2 {
text-align: center;
}

.catalog-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 1rem;
}

.item {

Department of Computer and Science and Engineering 3

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

border: 1px solid #ccc;

padding: 1rem;
text-align: center;
}

form {
max-width: 300px;
margin: auto;
padding: 1rem;
display: flex;
flex-direction: column;
}

input {
margin-bottom: 1rem;
padding: 0.5rem;
font-size: 1rem;
}

button {
padding: 0.5rem;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #555;
}

#cartItems {
list-style: none;
padding: 0;
}

#cartItems li {
padding: 1rem;
border-bottom: 1px solid #ccc;
}

Department of Computer and Science and Engineering 4

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

JAVA SCRIPT Program: [Link]

[Link]("registerForm").addEventListener("submit", function (e) {

[Link]();
alert("Registration Successful");
});

[Link]("loginForm").addEventListener("submit", function (e) {

[Link]();
alert("Login Successful");
});

let cart = [];

function addToCart(item) {
[Link](item);
displayCart();
}

function displayCart() {
const cartItems = [Link]("cartItems");
[Link] = "";

[Link]((item, index) => {

let li = [Link]("li");
[Link] = item;

let removeBtn = [Link]("button");

[Link] = "Remove";
[Link] = () => {
removeFromCart(index);
};

[Link](removeBtn);
[Link](li);
});
}

function removeFromCart(index) {
[Link](index, 1);
displayCart();

Department of Computer and Science and Engineering 5

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

function checkout() {
if ([Link] > 0) {
alert("Checkout Successful");
cart = [];
displayCart();
} else {
alert("Your cart is empty");
}
}

OUTPUT :

Department of Computer and Science and Engineering 6

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

2. Make the above web application responsive web application using the Bootstrap framework.

AIM1:

Making the above web application responsive web application using Bootstrap framework.

Process:
• Create an HTML file and save it as the [Link].
• Now press F5 or click on the run from the HTML file.

HTML Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopApp</title>
<link rel="stylesheet" href="[Link]
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ShopApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#catalog">Catalog</a></li>
<li class="nav-item"><a class="nav-link" href="#cart">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="#login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#register">Register</a></li>
</ul>
</div>
</nav>

<section id="home" class="container text-center my-3"><h1>Welcome to ShopApp!</h1><p>Great products

await.</p></section>
<section id="register" class="container my-4"><h2>Register</h2>
<form style="max-width: 300px;" class="mx-auto">
<input type="text" class="form-control my-2" placeholder="Username" required>

Department of Computer and Science and Engineering 7

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<input type="email" class="form-control my-2" placeholder="Email" required>

<input type="password" class="form-control my-2" placeholder="Password" required>
<button class="btn btn-dark btn-block">Register</button>
</form>
</section>
<section id="catalog" class="container my-4"><h2>Catalog</h2>
<div class="row">
<div class="col-md-4 mb-3"><div class="card text-center"><h5>Item 1</h5><button class="btn
btndark">Add to Cart</button></div></div>
<div class="col-md-4 mb-3"><div class="card text-center"><h5>Item 2</h5><button class="btn
btndark">Add to Cart</button></div></div>
<div class="col-md-4 mb-3"><div class="card text-center"><h5>Item 3</h5><button class="btn
btndark">Add to Cart</button></div></div>
</div>
</section>

<script src="[Link]
<script src="[Link]
<script src="[Link] </body>
</html>

OUTPUT:

Department of Computer and Science and Engineering 8

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

3. Use JavaScript for doing client-side validation of the pages implemented in experiment 1 and experiment 2.

AIM:

Using JavaScript for doing client-side validation of the pages implemented in experiment 1 and
experiment 2.

Process:
• Create a JAVASCRIPT file and save it as the [Link].
• In experiment 1 take the same HTML file and modify the following code.
• Now press F5 or click on the run from the HTML file.

HTML Program Modification:

<script src="[Link]"></script>

JAVASCRIPT Program:

[Link]("registerForm").addEventListener("submit", function (e) {

[Link]();

let username = [Link]("username").[Link]();

let email = [Link]("email").[Link]();
let password = [Link]("password").[Link]();

if (!username || !email || !password) {

alert("Please fill in all fields.");
return;
}

const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

if () {
alert("Please enter a valid email address.");
return;
}

if ([Link] < 6) {
alert("Password must be at least 6 characters long.");
return;
}

alert("Registration Successful");
});

Department of Computer and Science and Engineering 9

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

[Link]("loginForm").addEventListener("submit", function (e) {

[Link]();

let loginUsername = [Link]("loginUsername").[Link]();

let loginPassword = [Link]("loginPassword").[Link]();

if (!loginUsername || !loginPassword) {
alert("Please enter both username and password.");
return;
}

alert("Login Successful");
});

let cart = [];

function addToCart(item) {
[Link](item);
displayCart();
}

function displayCart() {
const cartItems = [Link]("cartItems");
[Link] = "";

[Link]((item, index) => {

let li = [Link]("li");
[Link] = item;

let removeBtn = [Link]("button");

[Link] = "Remove";
[Link] = () => {
removeFromCart(index);
};

[Link](removeBtn);
[Link](li);
});
}

function removeFromCart(index) {
[Link](index, 1);
displayCart();
}

Department of Computer and Science and Engineering 10

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

function checkout() {
if ([Link] > 0) {
alert("Checkout Successful");
cart = [];
displayCart();
} else {
alert("Your cart is empty");
}
}

OUTPUT:

Department of Computer and Science and Engineering 11

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

4. Explore the features of ES6 like arrow functions, callbacks, promises, and async/await. Implement an
application for reading the weather information from [Link] and display the information in
the form of a graph on the web page.

AIM:

Exploring the features of ES6 like arrow functions, callbacks, promises, and async/await. Implementing
an application for reading the weather information from [Link] and displaying the
information in the form of a graph on the web page.

Process:
• Create an HTML file and save it as the [Link]
• Create a CSS file and save it as [Link]
• Create a JAVASCRIPT file and save it as [Link] • Now press F5 or click on the run from
the HTML file.

HTML Program: [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Information</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]
</head>
<body>
<div class="container">
<h1>Weather Forecast</h1>
<input type="text" id="cityInput" placeholder="Enter city name">
<button onclick="getWeatherData()">Get Weather</button>
<canvas id="weatherChart"></canvas>
</div>
<script src="[Link]"></script>
</body>
</html>

Department of Computer and Science and Engineering 12

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

CSS Program: [Link]

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
}

.container {
width: 80%;
max-width: 600px;
text-align: center;
}

h1 {
margin-bottom: 20px;
}

input {
padding: 10px;
margin-bottom: 10px;
width: 70%;
font-size: 16px;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

Department of Computer and Science and Engineering 13

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

canvas {
margin-top: 20px;
}
JAVASCRIPT Program:

const apiKey = '682135e0855511cdf51c0d54f7cf8baf'; const

apiUrl = '[Link]

const getWeatherData = async () => {

const city = [Link]('cityInput').value;
if (!city) {
alert("Please enter a city name!");
return;
}
try {
const response = await fetch(`${apiUrl}?q=${city}&units=metric&appid=${apiKey}`);
const data = await [Link]();
if ([Link] !== "200") {
alert("City not found!");
return;
}
const temps = [Link](0, 8).map(item => [Link]);
const times = [Link](0, 8).map(item =>
new Date([Link] * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
);
displayChart(times, temps, city);
} catch (error) {
[Link]("Error fetching data:", error);
}
};

const displayChart = (times, temps, city) => {

const ctx = [Link]('weatherChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: times,
datasets: [{
label: `Temperature in ${city} (°C)`,
data: temps,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,

Department of Computer and Science and Engineering 14

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

fill: false,
tension: 0.1
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Temperature (°C)'
}
},
x: {
title: {
display: true,
text: 'Time'
}
}
}
}
});
};

Department of Computer and Science and Engineering 15

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

OUTPUT:

Department of Computer and Science and Engineering 16

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

5. Develop a Java standalone application that connects with the database (Oracle / MySQL) and
perform the CRUD operation on the database tables.

AIM:

Developing a Java standalone application that connects with the database (Oracle / MySQL) and
perform the CRUD operation on the database tables.

Process:
• Install Java Development Kit (JDK) on your computer.
• Install a Database like MySQL.
• Download JDBC Driver for MySQL.
• Create the java file and save it as [Link]
• Create a java file and save it as [Link]
• Create a java file and save it as [Link] • The files should be saved based on the
below structure.
• MyCRUDApp/
├── src/
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
└── lib/
└── [Link] (MySQL Connector JAR file)
• In the command prompt give the path of the Java program and connect \ MySQL to the Java
file
• Follow the below command to run java -cp .;..\lib\[Link] Main
STEP 1:
Open MySQL and create a table as follows
CREATE DATABASE MyDatabase;

USE MyDatabase;

CREATE TABLE Users (

id INT AUTO_INCREMENT PRIMARY KEY,

Department of Computer and Science and Engineering 17

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

name VARCHAR(100) NOT NULL,

email VARCHAR(100) NOT NULL,
age INT NOT NULL
);
JAVA PROGRAM: [Link]

import [Link];

public class Main {

public static void main(String[] args) {
CRUDOperations crud = new CRUDOperations();
Scanner scanner = new Scanner([Link]);

while (true) {
[Link]("\n1. Add User\n2. View Users\n3. Update User\n4. Delete User\n5. Exit");
[Link]("Choose an option: ");
int choice = [Link]();

switch (choice) {
case 1:
[Link]("Enter name: ");
String name = [Link]();
[Link]("Enter email: ");
String email = [Link]();
[Link]("Enter age: ");
int age = [Link]();
[Link](name, email, age);
break;

Department of Computer and Science and Engineering 18

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

case 2:
[Link]();
break;
case 3:
[Link]("Enter user ID to update: ");
int id = [Link]();
[Link]("Enter new name: ");
name = [Link]();
[Link]("Enter new email: ");
email = [Link]();
[Link]("Enter new age: ");
age = [Link]();
[Link](id, name, email, age);
break;
case 4:
[Link]("Enter user ID to delete: ");
id = [Link]();
[Link](id);
break;
case 5:
[Link]("Exiting...");
[Link]();
[Link](0);
default:
[Link]("Invalid choice.");
}
}
}

Department of Computer and Science and Engineering 19

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

}
JAVA PROGRAM: [Link]
import [Link];
import [Link];
import [Link];

public class DBConnection {

private static final String DB_URL = "jdbc:mysql://your_hostname_or_ip:3306/testdb";
private static final String DB_USER = "your_username"; // Replace with your username
private static final String DB_PASSWORD = "your_password"; // Replace with your password

public static Connection getConnection() throws SQLException {

return [Link](DB_URL, DB_USER, DB_PASSWORD);
}
}

JAVA PROGRAM: [Link]

import [Link].*;

public class CRUDOperations {

public void create(String name, String email, int age) {
String sql = "INSERT INTO Users (name, email, age) VALUES (?, ?, ?)";
try (Connection conn = [Link]();
PreparedStatement pstmt = [Link](sql)) {
[Link](1, name);
[Link](2, email);
[Link](3, age);

Department of Computer and Science and Engineering 20

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

[Link]();
[Link]("User added successfully.");
} catch (SQLException e) {
[Link]();
}
}

public void read() {

String sql = "SELECT * FROM Users";
try (Connection conn = [Link]();
Statement stmt = [Link]();
ResultSet rs = [Link](sql)) {
while ([Link]()) {
[Link]("ID: " + [Link]("id") +
", Name: " + [Link]("name") +
", Email: " + [Link]("email") +
", Age: " + [Link]("age"));
}
} catch (SQLException e) {
[Link]();
}
}

public void update(int id, String name, String email, int age) {
String sql = "UPDATE Users SET name = ?, email = ?, age = ? WHERE id = ?";
try (Connection conn = [Link]();
PreparedStatement pstmt = [Link](sql)) {
[Link](1, name);

Department of Computer and Science and Engineering 21

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

[Link](2, email);
[Link](3, age);
[Link](4, id);
[Link]();
[Link]("User updated successfully.");
} catch (SQLException e) {
[Link]();
}
}

public void delete(int id) {

String sql = "DELETE FROM Users WHERE id = ?";
try (Connection conn = [Link]();
PreparedStatement pstmt = [Link](sql)) {
[Link](1, id);
[Link]();
[Link]("User deleted successfully.");
} catch (SQLException e) {
[Link]();
}
}
}

Department of Computer and Science and Engineering 22

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

OUTPUT:

Department of Computer and Science and Engineering 23

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

6. Create an XML for the bookstore. Validate the same using both the DTD and XSD Programs.

AIM:

Creating an XML for the bookstore. Validating the same using both the DTD and XSD Programs.

Process:
• Create an XML file and save it as [Link].
• Create a DTD file and save it as [Link]
• Create an XSD file and save it as a bookstore,xsd
• Create a java file and save it as [Link]
• Now follow the commands o Give the file path
o javac [Link] \\ press enter o
java XMLDTDValidator \\ press enter
• the file structure is bookstore_project/
│
├── [Link]
├── [Link]
├── [Link]
├── [Link]
XML Program: [Link]

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore SYSTEM "[Link]">
<bookstore xmlns:xsi="[Link]
xsi:noNamespaceSchemaLocation="[Link]">
<book category="fiction">
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<price>10.99</price>
</book>
<book category="non-fiction">
<title>Sapiens</title>

Department of Computer and Science and Engineering 24

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<author>Yuval Noah Harari</author>

<price>15.99</price>
</book>
</bookstore>

DTD Program: [Link]

<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ATTLIST book category CDATA #REQUIRED>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>

XSD Program:
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="[Link]
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:decimal"/>
</xs:sequence>
<xs:attribute name="category" type="xs:string" use="required"/>

Department of Computer and Science and Engineering 25

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

JAVA Program: [Link]

import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class XMLDTDValidator {

public static void main(String[] args) {

try {
// Create a SAXParserFactory
instance
SAXParserFactory factory =
[Link]();
[Link](true); // Enable
validation
[Link](true); //
Enable namespace awareness

Department of Computer and Science and Engineering 26

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

// Create a SAXParser
SAXParser parser =
[Link]();

// Set an error handler to catch

validation issues

[Link]().setErrorHandler(ne
w ErrorHandler() {
public void
warning(SAXParseException exception) {
[Link]("Warning: " +
[Link]());
}

public void
error(SAXParseException exception) {
[Link]("Error: " +
[Link]());
}

public void
fatalError(SAXParseException exception) {
[Link]("Fatal Error:
" + [Link]());
}
});

Department of Computer and Science and Engineering 27

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

// Parse the XML file

File xmlFile = new
File("[Link]");
[Link](xmlFile, new
[Link]());
[Link]("XML is valid
against DTD.");

} catch (Exception e) {
[Link]("XML is invalid: "
+ [Link]());
}
}
}

OUTPUT:

Department of Computer and Science and Engineering 28

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

7. Design a controller with servlet that provides the interaction with an application developed in experiment 1
and the database created in experiment 5.

AIM:
Designing a controller with servlet that provides the interaction with an application developed in
experiment 1 and the database created in experiment 5

Process
• The file structure is
/project-folder/
└── com/
└── example/
└── shoppingcart/
└── [Link]
• Create Java file save as [Link]

JAVA Program:

import [Link];
import [Link];

public class ShoppingCartController {

private static final Map<String, String> users = new HashMap<>();

private static final Map<String, String> cart = new HashMap<>();

public static void main(String[] args) {

ShoppingCartController controller = new ShoppingCartController();

[Link]([Link]("register", "user1", "password123"));

[Link]([Link]("login", "user1", "password123"));
[Link]([Link]("addToCart", "product123"));

Department of Computer and Science and Engineering 29

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

public String handleAction(String action, String... params) {

switch (action) {
case "register":
return handleRegistration(params[0], params[1]);
case "login":
return handleLogin(params[0], params[1]);
case "addToCart":
return handleAddToCart(params[0]);
default:
return "Invalid action";
}
}

private String handleRegistration(String username, String password) {

[Link](username, password);
return "Registration successful for user: " + username;
}

private String handleLogin(String username, String password) {

if ([Link](username) && [Link](username).equals(password)) {
return "Login successful for user: " + username;
} else {
return "Invalid login credentials";
}
}

private String handleAddToCart(String productId) {

[Link](productId, "Added");

Department of Computer and Science and Engineering 30

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

return "Product added to cart with ID: " + productId;

}
}

OUTPUT:

Department of Computer and Science and Engineering 31

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

8. Maintain the transactional history of any user is very important. Explore the various session tracking
mechanism.

AIM:

Maintaining the transactional history of any user is very important. Exploring the various session
tracking mechanism.

Process:
• Install python in your system.
• Create a new folder and save it as Project.
• In the project file create a new file and save it as templates.
Project/
├── [Link]
└── templates/
├── [Link]
└── [Link]

• Save the Python code in the project folder and save the HTML in the templates folder as shown in
the pictures.

Department of Computer and Science and Engineering 32

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

• Now follow the following commands in the command prompt to run o python --version // press
enter o pip install flask // press enter
o Give the path of the saved project folder (eg: C:\User\Desktop\project ) o
Python [Link] // press enter o [Link] // click on the URL
as shown in the picture

PYTHON Program: [Link]

import [Link];
import [Link];

public class ShoppingCartController {

Department of Computer and Science and Engineering 33

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

private static final Map<String, String> users = new HashMap<>();

private static final Map<String, String> cart = new HashMap<>();

public static void main(String[] args) {

ShoppingCartController controller = new ShoppingCartController();

[Link]([Link]("register", "user1", "password123"));

[Link]([Link]("login", "user1", "password123"));
[Link]([Link]("addToCart", "product123"));
}

public String handleAction(String action, String... params) {

switch (action) {
case "register":
return handleRegistration(params[0], params[1]);
case "login":
return handleLogin(params[0], params[1]);
case "addToCart":
return handleAddToCart(params[0]);
default:
return "Invalid action";
}
}

private String handleRegistration(String username, String password) {

[Link](username, password);
return "Registration successful for user: " + username;
}

private String handleLogin(String username, String password) {

if ([Link](username) && [Link](username).equals(password)) {
return "Login successful for user: " + username;
} else {
return "Invalid login credentials";
}
}

private String handleAddToCart(String productId) {

[Link](productId, "Added");
return "Product added to cart with ID: " + productId;
}
}

Department of Computer and Science and Engineering 34

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

HTML Program: [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]" >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Preference</title>

</head>
<body>
<div class="container">
<h1>Language Preference</h1>
<form action="/set_language/en" method="get">
<button type="submit">Set Language to English</button>
</form>
<form action="/set_language/es" method="get">
<button type="submit">Set Language to Spanish</button>
</form>
<form action="/get_language" method="get">
<button type="submit">Get Language Preference</button>
</form>
<form action="/delete_language" method="get">
<button type="submit">Delete Language Preference</button>
</form>
</div>
</body>
</html>

Department of Computer and Science and Engineering 35

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

CSS Program: [Link]

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center; margin: 0;
padding: 0;
}

.container { margin-top: 50px;

background-color: #fff; padding: 30px;
border-radius: 8px; box-shadow: 0 4px
8px rgba(0, 0, 0, 0.2); display: inline-
block;
}

h1 { margin-bottom:
20px; color: #333;
}

button { background-color:
#007BFF; color: #fff;
border: none;
padding: 10px
20px; margin: 10px;
border-radius: 5px;
cursor: pointer; font-
size: 16px;
}

button:hover {
background-color: #0056b3;
}

Department of Computer and Science and Engineering 36

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

OUTPUT:

Department of Computer and Science and Engineering 37

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

9. HTTP Session: An HTTP session is a way to store information on the server side between requests from the
same client. Each client gets a unique session ID, which is used to retrieve session data.

AIM: To track the no. of visits for each user

Process
• Install python in your system.
• Create a new folder and save it as Project.
• In the project file create a new file and save it as templates.
• Project/
├── [Link] # Python file (main application code)
└── templates/
├── [Link] # HTML file (for rendering)
└── [Link] # CSS file (for styling)
• Save the Python code in the project folder and save the HTML and CSS code in the templates
folder as shown in the pictures

Department of Computer and Science and Engineering 38

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

• Now follow the following commands in the command prompt to run o python --version // press
enter o pip install flask // press enter
o Give the path of the saved project folder (eg: C:\User\Desktop\project ) o Python
[Link] // press enter
o [Link] // click on the URL to open the output
as shown in the picture

PYTHON Program: [Link]

from flask import Flask, session, render_template, redirect, url_for

app = Flask(__name__)
app.secret_key = 'your_secret_key'

@[Link]('/')
def index():
visit_count = [Link]('visits', 0)
return render_template('[Link]', visits=visit_count)

@[Link]('/visit')
def visit():
if 'visits' in session:
session['visits'] += 1
else:
session['visits'] = 1

Department of Computer and Science and Engineering 39

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

return redirect(url_for('index'))

@[Link]('/reset')
def reset():
[Link]('visits', None)
return redirect(url_for('index'))

if __name__ == '__main__':
[Link](debug=True)

HTML Program: [Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visit Counter</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Visit Counter</h1>
<p>Welcome back! This is your visit number: <strong>{{ visits }}</strong></p>
<form action="{{ url_for('visit') }}" method="get">
<button type="submit">Increment Visit Count</button>
</form>
<form action="{{ url_for('reset') }}" method="get">
<button type="submit">Reset Count</button>
</form>
</div>
</body>
</html>

CSS Program: [Link]

body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}

Department of Computer and Science and Engineering 40

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

.container {
display: inline-block;
padding: 20px;
border: 2px solid #4CAF50;
border-radius: 8px;
box-shadow: 2px 2px 10px
rgba(0, 0, 0, 0.1);
}

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
OUTPUT:

Department of Computer and Science and Engineering 41

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

10. Create a custom server using HTTP module and explore the other modules of Node JS like OS, path, and
event.

AIM:

Creating a custom server using the HTTP module and exploring the other modules of Node JS like OS,
path, and event

Process
• Install [Link] in your system.
• Save the js file as the [Link].
• Follow the following commands in command prompt. o Node –version // press enter.
o Give the path of the saved js file (eg: C:\User\Desktop\ ).
o node [Link] // press enter.
o [Link] // click on URL to open the output. As shown in picture

JAVA SCRIPT Program:

const http = require('http');

const os = require('os');
const path = require('path');
const EventEmitter = require('events');

Department of Computer and Science and Engineering 42

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

const eventEmitter = new

EventEmitter();

const requestHandler = (req, res) => {

if ([Link] === '/') {

[Link]('homePageVisit');
[Link](200, { 'Content-
Type': 'text/plain' });
[Link]('Welcome to the Home
Page!\n');
} else if ([Link] === '/os') {
[Link](200, { 'Content-
Type': 'text/plain' });
[Link](`Operating System Info: -
Platform: ${[Link]()}
- CPU Architecture: ${[Link]()}
- Total Memory: ${([Link]() /
1e9).toFixed(2)} GB
- Free Memory: ${([Link]() /
1e9).toFixed(2)} GB
- Uptime: ${([Link]() /
3600).toFixed(2)} hours
`);
} else if ([Link] === '/path') {
[Link](200, { 'Content-
Type': 'text/plain' });
const filePath = __filename;
[Link](`Path Module Info:
- File Name:
${[Link](filePath)}
- Directory Name:
${[Link](filePath)}
- Extension: ${[Link](filePath)}
`);
} else {
[Link](404, { 'Content-
Type': 'text/plain' });
[Link]('Page Not Found');
}
};

Department of Computer and Science and Engineering 43

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

[Link]('homePageVisit', () =>
{
[Link]('Home page was
visited');
});

const server =
[Link](requestHandler);

const PORT = 3000;

[Link](PORT, () => {
[Link](`Server is running at
[Link]
});

OUTPUT:

Department of Computer and Science and Engineering 44

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

11. Develop an express application that can interact with REST API to perform CRUD operations
on student data.

AIM:

Developing an express application that can interact with REST API to perform CRUD operations
on student data.

Process:
• Create a new folder and save it as student-crud-API
• Create the HTML file and save it as [Link] • Create a JAVASCRIPT file and save it as a
[Link]
• The files should be saved in the below structure.

student-crud-API/
|── [Link]
└── [Link]

HTML Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student CRUD App</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 30px;

.container {

width: 50%;

Department of Computer and Science and Engineering 45

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

margin: 0 auto;

.form-group {

margin-bottom: 15px;

input[type="text"], input[type="number"], input[type="email"] {

width: 100%;

padding: 10px;

margin: 5px 0;

button {

padding: 10px 15px;

background-color: #28a745;

color: white;

border: none;

cursor: pointer;

button:hover {

background-color: #218838;

table {

width: 100%;

margin-top: 30px;

border-collapse: collapse;

table, th, td {

Department of Computer and Science and Engineering 46

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

border: 1px solid #ddd;

th, td {

padding: 12px;

text-align: left;

</style>

</head>

<body>

<div class="container">

<h1>Student CRUD Application</h1>

<div class="form-group">

<input type="text" id="name" placeholder="Enter student name">

</div>

<div class="form-group">

<input type="number" id="age" placeholder="Enter student age">

</div>

<div class="form-group">

<input type="email" id="email" placeholder="Enter student email">

</div>

<button onclick="addStudent()">Add Student</button>

<table id="students-table">

<thead>

<tr>

Department of Computer and Science and Engineering 47

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<th>Name</th>

<th>Age</th>

<th>Email</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<script src="[Link]"></script>

</body>

</html>

JAVASCRIPT Program:

[Link]('DOMContentLoaded', loadStudents);

function loadStudents() {

const students = [Link]([Link]('students'));

const studentsTable = [Link]('#students-table tbody');

[Link] = '';

[Link]((student, index) => {

const row = [Link]('tr');

[Link] = `

Department of Computer and Science and Engineering 48

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<td>${[Link]}</td>

<td>${[Link]}</td>

<td>${[Link]}</td>

<td>

<button onclick="editStudent(${index})">Edit</button>
<button onclick="deleteStudent(${index})">Delete</button>

</td>
`;

[Link](row);

});

function addStudent() {

const name = [Link]('name').value;

const age = [Link]('age').value;

const email = [Link]('email').value;

if (!name || !age || !email) {

alert('Please fill in all fields');

return;

const students = [Link]([Link]('students'));

[Link]({ name, age, email });

[Link]('students', [Link](students));

[Link]('name').value = '';

Department of Computer and Science and Engineering 49

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

[Link]('age').value = '';

[Link]('email').value = '';

loadStudents();

function deleteStudent(index) {

const students = [Link]([Link]('students')) || [];

[Link](index, 1);

[Link]('students', [Link](students));

loadStudents();

function editStudent(index) {

const students = [Link]([Link]('students')) || [];

const student = students[index];

[Link]('name').value = [Link];

[Link]('age').value = [Link];

[Link]('email').value = [Link];

const addButton = [Link]('button');

[Link] = 'Update Student';

[Link] = function() {
updateStudent(index);

};

Department of Computer and Science and Engineering 50

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

function updateStudent(index) {

const name = [Link]('name').value;

const age = [Link]('age').value;

const email = [Link]('email').value;

if (!name || !age || !email) {

alert('Please fill in all fields');

return;

const students = [Link]([Link]('students'));

students[index] = { name, age, email };

[Link]('students', [Link](students));

[Link]('name').value = '';

[Link]('age').value = '';

[Link]('email').value = '';
[Link]('button').textContent = 'Add Student';

loadStudents();

Department of Computer and Science and Engineering 51

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

OUTPUT:

Department of Computer and Science and Engineering 52

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

12. For the above application create authorized endpoints using JWT.

AIM:
Creating authorized endpoints.

Process:
• Create an html file and save it as [Link]
• Create a JAVASCRIPT file and save it as [Link]

HTML Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student CRUD App with JWT</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 30px;

.container {

width: 50%;

margin: 0 auto;

.form-group {

margin-bottom: 15px;

Department of Computer and Science and Engineering 53

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

input[type="text"], input[type="number"], input[type="email"], input[type="password"] {

width: 100%;

padding: 10px;

margin: 5px 0;

button {

padding: 10px 15px;

background-color: #28a745;

color: white;

border: none;

cursor: pointer;

button:hover {

background-color: #218838;

table {

width: 100%;

margin-top: 30px;

border-collapse: collapse;

table, th, td {

border: 1px solid #ddd;

th, td {

padding: 12px;

text-align: left;

Department of Computer and Science and Engineering 54

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

.hidden {

display: none;

</style>

</head>

<body>

<div class="container">

<h1>Student CRUD Application with JWT</h1>

<div id="login-form">

<div class="form-group">

<input type="text" id="username" placeholder="Enter username">

</div>

<div class="form-group">

<input type="password" id="password" placeholder="Enter password">

</div>

<button onclick="login()">Login</button>

</div>

<div id="app" class="hidden">

<h2>Welcome, <span id="user"></span>!</h2>

<button onclick="logout()">Logout</button>

<div class="form-group">

<input type="text" id="name" placeholder="Enter student name">

Department of Computer and Science and Engineering 55

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

</div>

<div class="form-group">

<input type="number" id="age" placeholder="Enter student age">

</div>

<div class="form-group">

<input type="email" id="email" placeholder="Enter student email">

</div>

<button onclick="addStudent()">Add Student</button>

<table id="students-table">

<thead>

<tr>

<th>Name</th>

<th>Age</th>

<th>Email</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</div>

<script src="[Link]"></script>

</body>

</html>

Department of Computer and Science and Engineering 56

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

JAVASCRIPT Program:

let fakeJWT = null;

const fakeUser = {

username: 'admin',

password: 'password123',

};

function createJWT(username) {

return btoa([Link]({ username, exp: [Link]() + 600000 }));

function validateJWT(token) {

try {

const decoded = [Link](atob(token));

if ([Link] > [Link]()) return [Link];

} catch {

return null;

return null;

function login() {

const username = [Link]('username').value;

const password = [Link]('password').value;

if (username === [Link] && password === [Link]) {

Department of Computer and Science and Engineering 57

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

fakeJWT = createJWT(username);

alert('Login successful!');

[Link]('login-form').[Link]('hidden');

[Link]('app').[Link]('hidden');

[Link]('user').textContent = username;

loadStudents();

} else {

alert('Invalid username or password');

function logout() {

fakeJWT = null;

[Link]('login-form').[Link]('hidden');

[Link]('app').[Link]('hidden');

[Link]('username').value = '';

[Link]('password').value = '';

function loadStudents() {

if (!validateJWT(fakeJWT)) {

alert('Session expired! Please log in again.');

logout();

return;

Department of Computer and Science and Engineering 58

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

const students = [Link]([Link]('students')) || [];

const studentsTable = [Link]('#students-table tbody');

[Link] = '';

[Link]((student, index) => {

const row = [Link]('tr');

[Link] = `

<td>${[Link]}</td>

<td>${[Link]}</td>

<td>${[Link]}</td>

<td>

<button onclick="editStudent(${index})">Edit</button>

<button onclick="deleteStudent(${index})">Delete</button>

</td>

`;

[Link](row);

});

function addStudent() {

if (!validateJWT(fakeJWT)) {

alert('Session expired! Please log in again.');

logout();

return;

const name = [Link]('name').value;

Department of Computer and Science and Engineering 59

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

const age = [Link]('age').value;

const email = [Link]('email').value;

if (!name || !age || !email) {

alert('Please fill in all fields');

return;

const students = [Link]([Link]('students')) || [];

[Link]({ name, age, email });

[Link]('students', [Link](students));

[Link]('name').value = '';

[Link]('age').value = '';

[Link]('email').value = '';

loadStudents();

function deleteStudent(index) {

const students = [Link]([Link]('students')) || [];

[Link](index, 1);

[Link]('students', [Link](students));

loadStudents();

function editStudent(index) {

const students = [Link]([Link]('students')) || [];

Department of Computer and Science and Engineering 60

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

const student = students[index];

[Link]('name').value = [Link];

[Link]('age').value = [Link];

[Link]('email').value = [Link];

const addButton = [Link]('button');

[Link] = 'Update Student';

[Link] = function () {

updateStudent(index);

};

function updateStudent(index) {

const name = [Link]('name').value;

const age = [Link]('age').value;

const email = [Link]('email').value;

if (!name || !age || !email) {

alert('Please fill in all fields');

return;

const students = [Link]([Link]('students')) || [];

students[index] = { name, age, email };

[Link]('students', [Link](students));

[Link]('button').textContent = 'Add Student';

Department of Computer and Science and Engineering 61

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

[Link]('button').onclick = addStudent;

[Link]('name').value = '';

[Link]('age').value = '';

[Link]('email').value = '';

loadStudents();

OUTPUT:

Department of Computer and Science and Engineering 62

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

Department of Computer and Science and Engineering 63

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

13. Create an application for the student management system having registration, login, contact,
and about pages and implement routing to navigate through these pages.

AIM:
Creating an application for the student management system having registration, login,
contact, and about pages and implementing routing to navigate through these pages.

Process:
• Create an HTML file and save it as [Link]
• Create a JAVASCRIPT file and save it as [Link]
• Create a JAVASCRIPT file and save it as [Link] • Create a JAVASCRIPT file and save it as
[Link]
• Create a JAVASCRIPT file and save it as [Link]
• Create a JAVASCRIPT file and save it as [Link] • Create a JAVASCRIPT file and save it as
[Link]
• All files should save in one folder.

HTML Program: [Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Management System</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

Department of Computer and Science and Engineering 64

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

nav {

background-color: #333;

color: white;

padding: 10px;

nav a {

color: white;

margin: 0 10px;

text-decoration: none;

nav a:hover {

text-decoration: underline;

.container {

padding: 20px;

</style>

</head>

<body>

<div id="navbar"></div>

<div id="content" class="container"></div>

<script src="[Link]"></script>

<script src="[Link]"></script>

<script src="[Link]"></script>

Department of Computer and Science and Engineering 65

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<script src="[Link]"></script>

<script src="[Link]"></script>

<script src="[Link]"></script>

</body>

</html>

JAVASCRIPT Program: [Link]

function Navbar() {

const navbarElement = [Link]("navbar");

[Link] = `

<nav>

<a href="#home">Home</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

<a href="#login">Login</a>

<a href="#register">Register</a>

</nav>

`;

Navbar();

JAVASCRIPT Program: [Link]

function renderPage() {
const route = [Link](1);
let content = "";
switch (route) {
case "about":
content = About();

Department of Computer and Science and Engineering 66

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

break;
case "contact":
content = Contact();
break;
case "login":
content = Login();
break;
case "register":
content = Registration();
break;
default:
content = "<h1>Welcome to Student Management System</h1>";
break;
}
[Link]("content").innerHTML = content;
}

[Link]("hashchange", renderPage);
renderPage();

JAVASCRIPT Program: [Link] function

About() {

return `

<h1>About Us</h1>

<p>Welcome to the Student Management System. This is the About page.</p>

`;

JAVASCRIPT Program: [Link] function

Contact() {

return `

<h1>Contact Us</h1>

<p>Have questions? Reach out to us at student-management@[Link]</p>

`;

Department of Computer and Science and Engineering 67

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

JAVASCRIPT Program: [Link]

function Login() {

return `

<h1>Login</h1>

<form>

<label>Email:</label>

<input type="email" required>

<br>

<label>Password:</label>

<input type="password" required>

<br>

<button type="submit">Login</button>

</form>

`;

JAVASCRIPT Program: [Link]

function Registration() { return `

<h1>Registration</h1>

<form>

<label>Name:</label>

<input type="text" required>

<br>

<label>Email:</label>

<input type="email" required>

<br>

Department of Computer and Science and Engineering 68

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

<label>Password:</label>

<input type="password" required>

<br>

<button type="submit">Register</button>

</form>

`;

OUTPUT:

Department of Computer and Science and Engineering 69

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

14. Create a TODO application in react with necessary components and deploy it on github.

AIM:
Creating a TODO application in react with necessary components and deploying it on github.

Procedure:
1. Set up the React App:
npx create-react-app todo-
appcd todo-app

2. Js program: [Link]

import React from 'react';

const TodoItem = ({ task, onDelete }) => {

return (
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '5px 0' }}>
<span>{task}</span>
<button onClick={onDelete}>Delete</button>
</div>
);
};

export default TodoItem;

Js program: [Link]

import React from 'react';

import TodoItem from './TodoItem';

const TodoList = ({ tasks, onDelete }) => {

return (
<div>
{[Link]((task, index) => (
<TodoItem key={index} task={task} onDelete={() => onDelete(index)} />
))}

Department of Computer and Science and Engineering 70

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

</div>
);
};

export default TodoList;

Js program: [Link]

import React, { useState } from 'react';

const TodoForm = ({ onAddTask }) => {

const [newTask, setNewTask] = useState('');

const handleSubmit = (e) => {

[Link]();
if ([Link]()) {
onAddTask(newTask);
setNewTask('');
}
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask([Link])}
placeholder="Add a new task"
/>
<button type="submit">Add</button>
</form>
);
};

export default TodoForm;

Department of Computer and Science and Engineering 71

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

Js program: [Link]

import React, { useState } from 'react';

import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

const App = () => {

const [tasks, setTasks] = useState([]);

const addTask = (task) => setTasks([...tasks, task]);

const deleteTask = (index) => setTasks([Link]((_, i) => i !== index));

return (
<div style={{ textAlign: 'center', margin: '20px' }}>
<h1>TODO App</h1>
<TodoForm onAddTask={addTask} />
<TodoList tasks={tasks} onDelete={deleteTask} />
</div>
);
};

export default App;

3. Deploy it into the github.

1. Install git in your computer.
2. Install github desktop in your computer.

Follow the commands in cmd

npx create-react-app todo-app // click enter.

Follow the commands in git bash

git init // click enter.

git add . // click enter.

git commit -m "Initial commit" // click enter.
git branch -M main // click enter.
git remote add origin [Link] // click enter.
git push -u origin main // click enter.

Department of Computer and Science and Engineering 72

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.
 Mother Teresa Institute of Science and Technology

npm install gh-pages --save-dev // click enter.

Add the following to your [Link]

"homepage": "[Link]
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

Follow this command in git bash

npm run deploy

OUTPUT:

Department of Computer and Science and Engineering 73

Regulation:M-24
Year/Sem: II/I Revision: 2025-26(2)
Course Code & Name: M241ACSM309 & NODE JS Lab.
Prepared By: K. Nirusha.