J.B.

INSTITUTE OF ENGINEERING AND TECHNOLOGY

(UGC AUTONOMOUS)
Bhaskar Nagar, Moinabad Mandal, R.R. District, Hyderabad -500075

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

COMPUTER SCIENCE AND ENGINEERING (DATA SCIENCE)

LAB MANUAL

NODEJS/REACTJS/DJANGO LAB

(R25)

B. TECH II YEAR I SEM

 Vision, Mission PEOs

Vision

To meet the emerging trends of Industry 4.0 by adopting innovative teaching, learning
and research practices igniting problem solving skills among students

Mission

To impart qualitative education, prepare students refurbish their latent talents and aspire for
a pragmatic career in Artificial Intelligence and Data Science

To provide sound foundation for problem solving and research skills with core ideas of data
science, Probability and statistics.

To Inculcate self-learning among students to make them self-reliant and socially

responsible.

ii
 Program Educational Objectives (PEOs)

Utilize their proficiencies in the fundamental knowledge of basic sciences,

PEO1 mathematics, Artificial Intelligence, data science and statistics to build
systems that require management and analysis of large volumes of data.

Advance their technical skills to pursue pioneering research in the field of

AI and Data Science and create disruptive and sustainable solutions for the
PEO2 welfare of ecosystems.

Think logically, pursue lifelong learning and collaborate with an ethical

PEO3 attitude in a multidisciplinary team designing Innovative solutions with
Artificial Intelligence and Data Science

iii
 POs & PSOs
PO # Program Outcome (PO) Description

PO1 Engineering Knowledge Apply knowledge of mathematics, natural science, computing, and
engineering fundamentals to solve complex engineering problems.

PO2 Problem Analysis Identify, formulate, and analyze complex engineering problems using
research literature to reach substantiated conclusions.

PO3 Design/Development of Design creative solutions for complex engineering problems, including
Solutions systems or processes that consider public health, safety, and
environmental factors.

PO4 Conduct Investigations Use research-based knowledge and methods, including design of
experiments and data analysis, to provide valid conclusions.

PO5 Engineering Tool Usage Select and apply appropriate techniques, resources, and modern
engineering and IT tools while understanding their limitations.

PO6 The Engineer and The Analyze societal and environmental aspects, including sustainability
World and the impact of engineering solutions in global contexts.

PO7 Ethics Apply ethical principles and commit to professional ethics, human
values, diversity, and inclusive behavior.

PO8 Individual & Collaborative Function effectively as an individual and as a member or leader in
Teamwork diverse and multidisciplinary teams.

PO9 Communication Communicate effectively and inclusively on complex engineering

activities with the engineering community and society at large.

PO10 Project Management & Apply engineering

Finance manage projects in multidisciplinary environments.

PO11 Life-Long Learning Recognize the need for and engage in independent life-long learning
and adaptability to emerging technologies.

Program Specific Outcomes (PSOs)

Arrive at actionable Foresight, Insight, hindsight from data for solving
PSO1
business and engineering problems

Develop data analytics and data visualization skills, skills pertaining to

PSO2
knowledge acquisition, knowledge representation and knowledge
engineering, and hence be capable of coordinating complex projects.

iv
 1. COURSE OBJECTIVES & OUTCOMES

COURSE OBJECTIVES-
S. No
The student will:

1 To write programs using abstract classes

2 To write programs for solving real-world problems using the Java Collection
Framework.

3 To write multithreaded programs

4 To write GUI programs using Swing controls in Java.

5 To introduce java compiler and eclipse platform.

6
To impart hands-on experience with java programming.

COURSE OUTCOMES-
S. No
The student will be able to:

1 Able to write programs for solving real world problems using the java
collection framework.
2 Able to write programs using abstract classes.

3 Able to write multithreaded programs.

4 Able to write GUI programs using Swing controls in Java.

v
 2. LIST OF EXPERIMENTS

S No. Experiments

1 Exercise 1:
Build a responsive web application for shopping cart with registration,
login, catalog and cart pages using CSS3 features, flex and grid.
2 Exercise 2:
Make the above web application responsive using Bootstrap
framework.
3 Exercise 3:
Use JavaScript for doing client-side validation of the pages
implemented in experiment 1 and experiment 2.
4 Exercise 4:
Explore the features of ES6 like arrow functions, callbacks, promises,
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 Exercise 5:
Develop a java stand alone application that connects with the database
(Oracle / mySql) and perform the CRUD operation on the database
tables.
6 Exercise 6:
Create an xml for the bookstore. Validate the same using both DTD
and XSD.
7 Exercise 7:
Design a controller with servlet that provides the interaction with
application developed in experiment 1 and the database created in
experiment 5.
8 Exercise 8:
Maintaining the transactional history of any user is very important.
Explore the various session tracking mechanism (Cookies, HTTP
Session).
9 Exercise 9:
Create a custom server using http module and explore the other
modules of Node JS like OS, path, event.
10 Exercise 10:
Develop an express web application that can interact with REST API
to perform CRUD operations on student data. (Use Postman)
11 Exercise 11:
For the above application create authorized end points using JWT
12 Exercise 12:
Create a react application for the student management system having
registration, login, contact, about pages and implement routing to
navigate through these pages.
13 Exercise 13:
Create a service in react that fetches the weather information from
[Link] and display the current and historical weather
information using graphical representation using [Link].
14 Exercise 14:
Create a TODO application in react with necessary components and
deploy it into GitHub.
Program 1: Build a responsive web application for shopping cart with
registration, login, catalog and cart pages using CSS3 features, flex and
grid.

Sol: Creating index

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Shopping Cart</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
.catalog {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
.cart {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
.product-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
}
.product-card:hover {
background-color: #e5e5e5;
}
.cart-items {
list-style-type: none;
padding: 0;
}
.cart-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<header>
<h1>Shopping Cart</h1>
<nav>
<ul>
<li><a href="#catalog">Catalog</a></li>
<li><a href="#cart">Cart</a></li>
<li><a href="./[Link]">Login</a></li>
<li><a href="./[Link]">Register</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="catalog">
<h2>Catalog</h2>
<div class="product-card">
<h3>Product 1</h3>
<p>$20</p>
<button onclick="addToCart(20)">Add to Cart</button>
</div>
<div class="product-card">
<h3>Product 2</h3>
<p>$30</p>
<button onclick="addToCart(30)">Add to Cart</button>
</div>
<div class="product-card">
<h3>Product 3</h3>
<p>$25</p>
<button onclick="addToCart(25)">Add to Cart</button>
</div>
</div>
<div class="cart">
<h2>Cart</h2>
<ul class="cart-items" id="cartItems">
<!-- Cart items will be displayed here -->
 </ul>
<p>Total Cost: <span id="totalCost">$0</span></p>
</div>
</div>
<script>
let cartTotal = 0;
function addToCart(price) {
cartTotal += price;
[Link]('totalCost').textContent =
`$${cartTotal}`;
}
</script>
</body>
</html>

Output:

Creating login page:

<!DOCTYPE html>
<html lang="en">
<!--
Website: [Link]

Subscribe Us: [Link] Support Us:

[Link]
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Responsive Login Form Design using flexbox</title>
<link rel="stylesheet" href="[Link]">
 </head>
<body style="background-color: #988c8c;">
<div class="form-box" style="display: flex;
justify-content: center;">
<div class="wrapper">
<div class="img-area">
<img src="[Link]" alt="">
</div>
<div class="form-area">
<h3>Login Form</h3>
<form>
<div class="single-form">
<input type="text" style=" height: 30px;
width: 200px; border-radius: 10px;
" placeholder="Username" />
</div>
<div class="single-form" style="padding-block:
15px"><input type="password" style=" height: 30px; border-radius:
10px;
width: 200px;
" placeholder="Password" />
</div>
<input type="submit" style=" margin-left: 37px;
height: 30px;
width: 100px;" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>

Output:
Creating registration:
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #988c8c;
}
form {
background-color: #fff;
max-width: 600px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
label {
font-weight: bold;
}
input[type="text"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="radio"] {
margin-right: 10px;
}
input[type="submit"],
input[type="button"] {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #988c8c;
color: #fff;
cursor: pointer;
margin-left: 90px;
}
</style>
</head>
<body>
<form id="Reset">
<h1>Student Registration Form</h1>
<label>Firstname:</label>
<input type="text" name="firstname" size="30"/><br>
<label>Middlename:</label>
 <input type="text" name="middlename" size="30"/><br>
<label>Lastname:</label>
<input type="text" name="lastname" size="30"/><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female"/> Female
<br><br>
<label>Phone:</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/><br><br>
<label>Address:</label><br>
<textarea cols="80" rows="5" name="address"></textarea><br><br>
<input type="submit" name="submit" value="Submit">
<input type="button" value="Reset" onClick="fun()"/>
<script>
function fun(){
[Link]("Reset").reset();
}
</script>
</form>
</body>
</html>

Output:
Program 2 : Make the above web application responsive web application
using Bootstrap framework.

Sol:

Creating Index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 4 - Shopping Cart</title>
<link rel="stylesheet"
href="[Link]
[Link]"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="[Link]
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="[Link]
js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="[Link]
.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="[Link]
<script
src="[Link]
.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/[Link]">
<link rel="icon" type="image/png" href="images/[Link]">
</head>
<body>
<!-- partial:[Link]-->
<header class="bg-dark text-white text-center py-3">
<h1>Shopping Cart</h1>
<nav>
<ul class="nav justify-content-center">
 <li class="nav-item"><a class="nav-link"
href="#catalog">Catalog</a></li>
<li class="nav-item"><a class="nav-link"
href="./[Link]">Login</a></li>
<li class="nav-item"><a class="nav-link"
href="./[Link]">Register</a></li>
<li class="nav-item"><span data-toggle="modal" data-
target="#cart" style="padding: 10px;
color: dodgerblue;">Cart</span></li>
</ul>
</nav>
</header>
<div>
<!-- Nav -->
<nav class="navbar navbar-inverse bg-inverse fixed-top bg-
faded">
<div class="row">
<div class="col">
<span data-toggle="modal" data-target="#cart">
<img src="images/[Link]" alt="Cart"
class="cart-icon">
</span>
<span>
<button class="clear-cart btn btn-danger ml-2"
id="clearCart">
<i class="fas fa-undo"></i> Clear
</button>
</span>
</div>
</div>
</nav>
<!-- Main -->
<div class="container">
<br>
<h3 class="text-center">Bootstrap 4 - Shopping Cart</h3>
<hr>
<div class="row">
<div class="col-sm-12 col-md-6 col-xl-4">
<figure class="card card-product zoom">
<div class="img-wrap"><img src="images/item-
1. jpeg" class="rounded p-
1"></div>
<figcaption class="info-wrap">
<h4 class="title">Beautiful dress</h4>
<p class="desc">"Adorn yourself in the
allure of timeless beauty with our collection, where
each dress is a masterpiece of grace
and charm."</p>
<div class="rating-wrap">
«<div class="label-rating">132
reviews</div>
<div class="label-rating">154 orders
</div>
 <br />
<small class="text-muted">&#9733;
&#9733;
&#9733; &#9733; &#9734;</small>
</div> <!-- rating-wrap.// -->
</figcaption>
<div class=" bottom-wrap">
<a href="" class="btn btn-sm btn-primary
float-right add-to-cart show-
toast" data-product_id="1" data-pimage="images/[Link]" data-
name="Beautiful dress" data-price="220">
<i class="fas fa-shopping-cart"></i>
Add to cart
</a>
<div class="price-wrap h5">
<span class="price-new">$220</span>
<del class="price-old">$180</del>
<div>
</div>
<!--price-wrap.//-->
</div>
<!--bottom-wrap.//-->
</figure>
</div>
<!--col//-->
<div class="col-sm-12 col-md-6 col-xl-4">
<figure class="card card-product zoom">
<div class="img-wrap"><img src="images/item-
2. jpeg" class="rounded p-1">
</div>
<figcaption class="info-wrap">
<h4 class="title">Elegant style</h4>
<p class="desc">"Elevate your wardrobe with
an essence through our collection, where
elegance becomes a signature
style."</p>
<div class="rating-wrap">
<div class="label-rating">122
reviews</div>
<div class="label-rating">120 orders
</div>
<br />
<small class="text-muted">&#9733;
&#9733;

&#9733; &#9733; &#9734;</small>

</div>
<!-- rating-wrap.//-->
</figcaption>
<div class="bottom-wrap">
<a href="" class="btn btn-sm btn-primary
float-right add-to-cart show-toast"
data-product_id="2" data-
pimage="images/[Link]" data-name="Elegant style"
data-price="115">
 <i class="fas fa-shopping-cart"></i>
Add to cart
</a>
<div class="price-wrap h5">
<span class="price-new">$115</span>
<del class="price-old">$180</del>
<div>
<!--price-wrap.//-->
</div>
<!--bottom-wrap.//-->
</figure>
</div>
<!--col//-->
<div class="col-sm-12 col-md-6 col-xl-4">
<figure class="card card-product zoom">
<div class="img-wrap"><img src="images/item-
3. jpeg" class="rounded p-1"></div>
<figcaption class="info-wrap">
<h4 class="title">Modern fashion</h4>
<p class="desc">"Discover the epitome of
modern fashion, where style meets innovation in
every stitch and silhouette."</p>
<div class="rating-wrap">
<div class="label-rating">138
reviews</div>
<div class="label-rating">159
orders</div>
<br />
<small class="text-muted">&#9733;
&#9733;&#9733;&#9733;&#9734</small>
</div>
<!-- rating-wrap.//-->
</figcaption>
<div class="bottom-wrap">
<a href="" class="btn btn-sm btn-primary
float-right add-to-cart show-toast"
data-product_id="3" data-
pimage="images/[Link]" data-name="Modern fashion"
data-price="680">
<i class="fas fa-shopping-cart"></i>
Add to cart
</a>
<div class="price-wrap h5">
<span class="price-new">$680</span>
<del class="price-old">$980</del>
</div> <!-- price-wrap.//-->
</div> <!-- bottom-wrap.//-->
</figure>
</div> <!-- col //-->
</div> <!-- row.//-->
<div class="row p-2">
 <p class="text-info font-weight-bold">
<p class="text-info font-weight-bold">
Welcome to our cutting-edge shopping cart website!
Immerse yourself in the world of effortless
shopping and a seamless checkout experience.
</p>
</p>
</div>
<!--contalner.//-->
<!--Modal-->
<div class="modal fade" id="cart" tabindex="-1"
role="dialog" aria- labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form action="[Link]" method="get"
class="cart-form">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel"><i class="fas fa-shopping-
cart text-black"></i> Shopping Cart</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-
hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div class="font-weight-bold">Total
price: $<span class="total-cart text-
danger"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
danger" data- dismiss="modal">Close</button>
<button type="submit" class="btn btn-
success">Checkout</button>
</div>
</form>
</div>
</div>
</div>
<!--partial-->
<script src="assets/js/[Link]"></script>
<script src="assets/js/[Link]"></script>
<!-- Shopping Cart Add Toast-->
 <div id="product-toast">
<div id="img">
<i class="fas fa-shopping-cart"></i>Cart
</div>
<div id="desc"><span id="item-name"></span> added to
cart </div>
</div>
</div>
</body>
</html>

Output:

Creating Login:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="[Link]
.css">
<!-- Bootstrap Icons CSS -->
<link href="[Link]
icons/font/[Link]" rel="stylesheet">
<style>
body {
background-color: #f8f9fa; /* Background color */
}
.container {
background-color: #fff; /* Form container background color
*/
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 50px;
}
.form-group label {
font-weight: bold;
color: #555;
}
.form-group input {
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container mt-5">
<h3 class="text-center mb-4">Login</h3>
<form id="loginForm" action="./[Link]">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
required>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<input type="password" class="form-control"
id="password" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary"
type="button" onclick="togglePasswordVisibility()">
<span id="eyeIcon" class="bi bi-eye-
slash"></span>
</button>
</div>
</div>
<div id="passwordValidation" class="invalid-
feedback"></div>
</div>
<button type="button" class="btn btn-
primary">Login</button>
</form>
</div>
<script>
function togglePasswordVisibility() {
var passwordInput = [Link]("password");
var eyeIcon = [Link]("eyeIcon");
if ([Link] === "password") {
[Link] = "text";
[Link]("bi-eye-slash");
[Link]("bi-eye");
 } else {
[Link] = "password";
[Link]("bi-eye");
[Link]("bi-eye-slash");
}
}
</script>
</body>
</html>

Output:

Creating registration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

<title>Registration Page</title>
<link rel="stylesheet"
href="[Link]
.css">
<style>
body {
background-color: #f0f0f0;
}
.container {
max-width: 500px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 padding: 40px;
margin-top: 50px;
}
.form-group label {
font-weight: bold;
color: #555;
}
.form-group input, .form-group select, .form-group textarea {
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<form id="registrationForm" class="needs-validation" novalidate>
<h1 class="mb-4 text-center">Registration Form</h1>
<div class="form-group">
<label for="firstname">Firstname:</label>
<input type="text" class="form-control" id="firstname"
name="firstname" required>
<div class="invalid-feedback">Please provide a valid
firstname.</div>
</div>
<div class="form-group">
<label for="middlename">Middlename:</label>
<input type="text" class="form-control" id="middlename"
name="middlename">
</div>
<div class="form-group">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control" id="lastname"
name="lastname" required>
<div class="invalid-feedback">Please provide a valid
lastname.</div>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="gender" id="male" value="male" required>
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="gender" id="female" value="female" required>
<label class="form-check-label"
for="female">Female</label>
</div>
<div class="invalid-feedback">Please select a gender.</div>
</div>
 <div class="form-group">
<label for="phone">Phone:</label>
<input type="text" class="form-control" id="phone"
name="phone" required>
<div class="invalid-feedback">Please provide a valid phone
number.</div>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea class="form-control" id="address" name="address"
rows="3" required></textarea>
<div class="invalid-feedback">Please provide a valid
address.</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-
primary">Submit</button>

<button type="button" class="btn btn-secondary"

onclick="resetForm()">Reset</button>
</div>
</form>
</div>
</body>
</html>

Output:
Program 3:Use JavaScript for doing client side validation of the pages for
the above 2 web applications.

Sol:

Creating login:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="[Link]
[Link]">
<!-- Bootstrap Icons CSS -->
<link href="[Link]
icons/font/[Link]" rel="stylesheet">
<style>
body {
background-color: #f8f9fa; /* Background color */
}
.container {
background-color: #fff; /* Form container background
color */
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 50px;
}
.form-group label {
font-weight: bold;
color: #555;
}
.form-group input {
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container mt-5">
<h3 class="text-center mb-4">Login</h3>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control"
id="username" required>
 </div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<input type="password" class="form-control"
id="password" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary"
type="button" onclick="togglePasswordVisibility()">
<span id="eyeIcon" class="bi bi-eye-
slash"></span>
</button>
</div>
</div>
<div id="passwordValidation" class="invalid-
feedback"></div>
</div>
<button type="button" class="btn btn-primary"
onclick="validateLogin()">Login</button>
</form>
</div>
<script>
function validateLogin() {
var username =
[Link]("username").value;
var password =
[Link]("password").value;
if ([Link]() === "") {
alert("Please enter your username.");
return;
}
if ([Link]() === "") {
alert("Please enter your password.");
return;
}
// Validate password format
if ([Link] != 8) {
alert("Password length should be 8.");
return;
}
if (!/[a-z]/.test(password)) {
alert("Password should contain at least one
lowercase letter.");
return;
}
if (!/[A-Z]/.test(password)) {
alert("Password should contain at least one
uppercase letter.");
return;
}
if (!/[^a-zA-Z0-9]/.test(password)) {
alert("Password should contain at least one
special character.");
return;
}
// If all validation passes, submit the form
[Link]("loginForm").submit();
}
function togglePasswordVisibility() {
var passwordInput =
[Link]("password");
var eyeIcon = [Link]("eyeIcon");
if ([Link] === "password") {
[Link] = "text";
[Link]("bi-eye-slash");
[Link]("bi-eye");
} else {
[Link] = "password";
[Link]("bi-eye");
[Link]("bi-eye-slash");
}
}
</script>
</body>
</html>
Output:

Creating Registration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<title>Registration Page</title>
<link rel="stylesheet"
href="[Link]
.css">
<style>
body {
background-color: #f0f0f0;
}
.container {
max-width: 500px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 40px;
margin-top: 50px;
}
.form-group label {
font-weight: bold;
color: #555;
}
.form-group input, .form-group select, .form-group textarea {
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
 <body>
<div class="container">
<form id="registrationForm" class="needs-validation"
action="./[Link]" novalidate>
<h1 class="mb-4 text-center">Registration Form</h1>
<div class="form-group">
<label for="firstname">Firstname:</label>
<input type="text" class="form-control" id="firstname"
name="firstname" required>
<div class="invalid-feedback">Please provide a valid
firstname.</div>
</div>
<div class="form-group">
<label for="middlename">Middlename:</label>
<input type="text" class="form-control" id="middlename"
name="middlename">
</div>
<div class="form-group">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control" id="lastname"
name="lastname" required>
<div class="invalid-feedback">Please provide a valid
lastname.</div>
</div>
<div class="form-group">
<label for="course">Course:</label>
<select class="form-control" id="course" name="course"
required>
<option value="">Choose...</option>
<option value="[Link]">[Link]</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="[Link]">[Link]</option>
</select>
<div class="invalid-feedback">Please select a course.</div>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="gender" id="male" value="male" required>
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"
name="gender" id="female" value="female" required>
<label class="form-check-label"
for="female">Female</label>
</div>
<div class="invalid-feedback">Please select a gender.</div>
 </div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" class="form-control" id="phone"
name="phone" pattern="[0-9]{10}" maxlength="10" required>
<div class="invalid-feedback">Please provide a valid 10-
digit phone number.</div>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea class="form-control" id="address" name="address"
rows="3" required></textarea>
<div class="invalid-feedback">Please provide a valid
address.</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-
primary">Submit</button>
<button type="button" class="btn btn-secondary"
onclick="resetForm()">Reset</button>
</div>
</form>
</div>
<script
src="[Link]
></script>
<script
src="[Link]
s"></script>
<script>
// Bootstrap form validation
(function() {
'use strict';
[Link]('load', function() {
var forms = [Link]('needs-
validation');
var validation = [Link](forms,
function(form) {
[Link]('submit', function(event) {
if ([Link]() === false) {
[Link]();
[Link]();
}
[Link]('was-validated');
}, false);
});
}, false);
})();
function resetForm() {
[Link]("registrationForm").reset();
}
 </script>
</body>
</html>

Output:
Program 4: Develop a java stand alone application that connects with the
database (Oracle / mySql) and perform the CRUD operation on the
database tables.
Db connection:
import [Link].*;
public class Connect
{
public static void main(String args[])
{
try
{
[Link]("[Link]");
// Establishing Connection
Connection con =
[Link]("jdbc:mysql://localhost:3306/mysql","root","KS
_padma");
if (con != null)
[Link]("Connected");
else
[Link]("Not Connected");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}
Output:

Insertion:
import [Link].*;
public class insert
{
public static void main(String args[])
{
String id = "id3";
String pwd = "pwd3";
String fullname = "Keerthipriya";
String email = "[Link]";
try
{
[Link]("[Link]");
Connection con =
[Link]("jdbc:mysql://localhost:3306/mysql","root","KS_padma");
 Statement stmt = [Link]();
// Inserting data in database
String q1 = "insert into userid values('" +id+ "', '" +pwd+ "', '" +fullname+ "', '" +email+
"')";
int x = [Link](q1); if (x > 0)
[Link]("Successfully Inserted"); else
[Link]("Insert Failed");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}

Output:
Updation:
import [Link].*;
public class update
{
public static void main(String args[])
{
String id = "id1"; String pwd = "newpwd";
String newPwd = "pwd1";
try
{
[Link]("[Link]");
Connection con =
[Link]("jdbc:mysql://localhost:3306/mysql","root","KS
_padma");
Statement stmt = [Link]();
// Updating database
String q1 = "UPDATE userid set pwd = '" + newPwd + "' WHERE id = '" +id+
"' AND pwd = '" + pwd + "'";
int x = [Link](q1);
if (x > 0)
[Link]("Password Successfully Updated"); else
[Link]("ERROR OCCURRED :(");
[Link]();
}
catch(Exception e)
 {
[Link](e);
}
}
}

Output:

Deletion:
import [Link].*;
public class delete
{
public static void main(String args[])
{
String id = "id2"; String pwd = "123hp";
 try
{
[Link]("[Link]");
Connection con =
[Link]("jdbc:mysql://localhost:3306/mysql","root","KS
_padma");
Statement stmt = [Link]();
// Deleting from database
String q1 = "DELETE from userid WHERE id = '" + id + "' AND pwd = '" +
pwd + "'";
int x = [Link](q1); if (x > 0)
[Link]("One User Successfully Deleted");
else
[Link]("ERROR OCCURRED :(");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}
Output:
Program 5: Create an xml for the bookstore. Validate the same using both
DTD and XSD.

Sol:

[Link]
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT books (book*)>
<!ELEMENT book (title, author, isbn, publisher, edition, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE bookstab SYSTEM "[Link]">
<books>
<book>
<title>Programming the World Wide Web</title>
<author>Robert W. Sebesta</author>
<isbn>1234-5678</isbn>
<publisher>Tata McGraw-Hill</publisher>
<edition>Seventh</edition>
<price>300</price>
</book>
<book>
<title>Web Technologies</title>
<author>Uttam K Roy</author>
<isbn>2345-1234</isbn>
<publisher>Oxford University Press</publisher>
<edition>First</edition>
<price>350</price>
</book>
<book>
<title>The Complete Reference PHP</title>
<author>Steven Holzner</author>
<isbn>4567-8970</isbn>
<publisher>Tata McGraw-Hill</publisher>
<edition>Second</edition>
<price>500</price>
 </book>
<book>
<title>Java Script</title>
<author>D Flanagan</author>
<isbn>1234-9876</isbn>
<publisher>Tata</publisher>
<edition>Second</edition>
<price>350</price>
</book>
<book>
<title>Web Programming, Building Internet Applications , 2nd edition ,
Wiley</title>
<author>Chris Bates</author>
<isbn>3456-8976</isbn>
<publisher>Wiley</publisher>
<edition>Second</edition>
<price>240</price>
</book>
</books>

Output:
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema
xmlns:xs="[Link]

targetNamespace="[Link]
xmlns="[Link]
elementFormDefault="qualified">
<xs:element name="emp">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="date" type="xs:decimal" />
<xs:element name="publisher" type="xs:string" fixed="IT"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
<xsd:complexType name="book_type">
<xsd:sequence>
<xsd:element name="title" type="xsd:string"/>
 <xsd:element name="author" type="xsd:string"/>
<xsd:element name="date" minOccurs="0" type="xsd:string"/>
<xsd:element name="publisher" type="xsd:string"/>
</xsd:sequence>
<xsd:attribute name="ISBN" type="xsd:string"/>
</xsd:complexType>
</xsd:schema>
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<book_store xmlns="[Link]
xmlns:xsi="[Link]
xsi:schemaLocation="[Link] [Link]">
<book ISBN="978 90 5759 316 1">
<title>Het zijn net mensen</title>
<author>Joris Luyendijk</author>
<date>2006</date>
<publisher>Podium</publisher>
</book>
<book ISBN="0-697-75645-0">
<title>Portnoy's Complaint</title>
<author>Philip Roth</author>
<date>1993</date>
<publisher>Vintage</publisher>
</book>
<book ISBN="1-56592-235-2">
<title>My Life and Times</title>
<author>Paul McCartney</author>
<date>1998</date>
<publisher>McMillin publishing</publisher>
</book>
<book ISBN="0-440-34319-4">
<title>Illusions The Adventures of a Reluctant
Messiah</title>
<author>Richard Bach</author>
<date>1977</date>
<publisher>Dell publishing Co.</publisher>
</book>
<book ISBN="0-06-064831-7">
<title>The First and Last Freedom</title>
<author>J. Krishnamurti</author>
<publisher>Harper &amp; Row</publisher>
</book>
</book_store>
OUTPUT

Program 6: Design a controller with servlet that provides the interaction

with web application

Sol:
[Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form method="get" action="HelloServlet">
<pre>
Enter your name: <input type="text" name="t1">
<input type="submit"> <input type="reset">
</pre>
</form>
</body>
</html>
[Link]
import [Link];
import [Link];
 import [Link];
import [Link];
import [Link];
import [Link];
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
Default constructor.
*/
public HelloServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse
response)

throws ServletException, IOException {

PrintWriter pw=[Link]();
String s=[Link]("t1");
[Link]("<h1>Hello,"+s);
[Link]();
}
}

Output:
Program 7: Maintaining the transactional history of any user is very
important. Explore the various session tracking mechanism using Cookies

Sol:

[Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "CookiesDemo" method = "GET">
First Name: <input type = "text" name = "first_name">
<br><br>
Last Name: <input type = "text" name = "last_name" />
<br><br>
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
CookieDemo,java
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class CookiesDemo extends HttpServlet {
private static final long serialVersionUID = 1L;
public CookiesDemo() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// Create cookies for first and last names.
Cookie firstName = new Cookie("first_name",
[Link]("first_name"));
Cookie lastName = new Cookie("last_name",
[Link]("last_name"));
// Set expiry date for both the cookies.
[Link](60); // 1min-60secs
[Link](60*60*2); // 2hrs
// Add both the cookies in the response header.
[Link]( firstName );
[Link]( lastName );
// Set response content type
[Link]("text/html");
PrintWriter out = [Link]();
[Link]("<b> Cookies are created and the cookies
are:<b><br>");
[Link]("<b>First Name</b>: "
+ [Link]("first_name") + "\n"
+ " <b>Last Name</b>: "
+ [Link]("last_name") + "\n");
}
}
[Link]
import [Link];
import [Link];
import [Link];
import [Link];
 import [Link];
import [Link];
import [Link];
import [Link];
public class ReadCookiesDemo extends HttpServlet {
private static final long serialVersionUID = 1L;
public ReadCookiesDemo() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//Cookie cookie = null;
Cookie[] cookies = null;
// Get an array of Cookies associated with this domain
cookies = [Link]();
// Set response content type
[Link]("text/html");
PrintWriter out = [Link]();
if( cookies != null ) {
[Link]("<h2> Found Cookies Name and Value</h2>");
for (int i = 0; i < [Link]; i++) {
// cookie = cookies[i];
[Link]("Name : " + cookies[i].getName( ) + ", ");
[Link]("Value: " + cookies[i].getValue( ) + " <br/>");
}
} else {
[Link]("<h2>No cookies founds</h2>");
}
}
}

Output:
Program 8: Maintaining the transactional history of any user is very
important. Explore the various session tracking mechanism using Sessions.

Sol:
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class SessionTracking extends HttpServlet {
private static final long serialVersionUID = 1L;
public SessionTracking() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// Create a session object if it is already not created.
HttpSession s1 = [Link](true);
// Get session creation time.
Date createTime = new Date([Link]());
// Get last access time of this web page.
Date lastAccessTime = new Date([Link]());
@SuppressWarnings("removal")
Integer visitCount = new Integer(0);
String visitCountKey = new String("visitCount");
String userIDKey = new String("userID");
String userID = new String("ABCD");
// Check if this is new comer on your web page.
if ([Link]())
{
[Link](userIDKey, userID);
}
else
{
visitCount = (Integer)[Link](visitCountKey);
visitCount = visitCount + 1;
userID = (String)[Link](userIDKey);
}
[Link](visitCountKey, visitCount);
// Set response content type
[Link]("text/html");
PrintWriter out = [Link]();
[Link]("<h1>session id is" + [Link]() +
"<br>Creation Time"+ createTime +
"<br>last access time" + lastAccessTime +
"<br>User ID is" +userID +

"<br>Number of visits is" +

visitCount+"</h1>" );
}
}

Output:
Program 9: Develop an express web application that can interact with
REST API to perform CRUD operations on student data

Sol:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Signup from './components/Signup';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
function App() {
return (
<Router>
<div className="App">
<nav>
<ul>
<li>
<Link to="/Signup">Signup</Link>
</li>
<li>
<Link to="/Login">Login</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/Signup" element={<Signup />} />
<Route path="/Login" element={<Login />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
</Router>
);
}
export default App;

Output:
Sign up Page:

Login page:
Program 10: Create a react application for the student management system
having registration, login, contact, about pages and implement routing to
navigate through these pages.

Sol:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Signup from './components/Signup';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import './App_page.css'; // Import the CSS file
function App() {
return (
<Router>
<div className="container">
<nav className="navbar">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/Signup" className="nav-link">Signup</Link>
</li>
<li className="nav-item">
<Link to="/Login" className="nav-link">Login</Link>
</li>
<li className="nav-item">
<Link to="/dashboard" className="nav-link">Dashboard</Link>
</li>
</ul>
</nav>
<div className="welcome-message">
<h1 style={{ color:'#b8a1a1'}}>Welcome to Student Management System</h1>
<p>This is a platform to manage students' information efficiently.</p>
</div>
<Routes>
<Route path="/Signup" element={<Signup />} />
<Route path="/Login" element={<Login />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
</Router>
);
}
export default App;
Output:

Signup Page:

Login Page:
Dashboard:
Program 11: Create a custom server using http module and explore the
other modules of Node JS like OS, path, event.

Sol:

HTTP module:
var http = require('http');
[Link](function (req, res) {
// add a HTTP header:
[Link](200, {'Content-Type': 'text/html'});
[Link]('Hello World!');
[Link]();
}).listen(8080);

Output:

Path module:
var url = require('url');
var adr = '[Link]
//Parse the address:
var q = [Link](adr, true);
/*The parse method returns an object containing url properties*/
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
/*The query property returns an object with all the querystring
parameters as properties:*/
var qdata = [Link];
[Link]([Link]);
output:

Event Module:
[Link]
[Link] = function () {
return Date();
};
[Link]
var http = require('http');
var dt = require('./myfirstmodule');
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]("The date and time is currently: " + [Link]());
[Link]();
}).listen(8080);

Output: