NODE JS/ REACT JS/ DJANGO

Laboratory Record

B.Tech II Year - II Semester

(A.Y. 2024-25)
Department of CSE (DS)
Student Name: ________________________________________________
RollNo :________________________________________________
Section :________________________________________________
DEPARTMENT OF CSE (DS) NODE JS/ REACT JS/ DJANGO LAB

VISION & MISSION OF THE INSTITUTE & DEPARTMENT

Vision of the Department &Mission of the College

Vision of the College:

To empower students with professional education using creative & innovative
technical practices of global competence and research aptitude to become competitive
engineers with ethical values and entrepreneurial skills

Mission of the college:

To impart value based professional education through creative and innovative
teaching-learning process to face the global challenges of the new era technology.

To inculcate research aptitude and to bring out creativity in students by

imparting engineering knowledge imbibing interpersonal skills to promote
innovation, research andentrepreneurship.

Vision of the Department &Mission of the Department

Vision of the Department of CSE(DS) :

To be a leading department of Data Science that leverages cutting-edge technologies,

techniques, and tools to transform data into actionable insights, and deliver innovative
solutions that drive business growth, social impact, and scientific discovery.

Mission of the Department of CSE(DS):

DM1: Advancing the state-of-the-art in Data Science through cutting-edge research that
generates novel algorithms, models, and tools for analyzing and visualizing complex data.

DM2: Providing rigorous and practical training in Data Science to equip students with the
skills, knowledge, and experience required to excel in the field

DM3: Collaborating with industry partners and government agencies to apply Data Science to
real-world problems and deliver innovative solutions that create value for businesses,
communities, and society at large.

VIGNAN’S INSTITUTE OF MANAGEMENT AND TECHNOLOGY FOR WOMEN

DEPARTMENT OF CSE (DS) NODE JS/ REACT JS/ DJANGO LAB

Program Educational Objectives(PEOs) :

PEO1: To demonstrate professional excellence in Data Science by applying their

knowledge and skills to solve complex problems and create value for
businesses, organizations, and society.

PEO2: To adapt continuous learning and professional development to stay abreast of

the latest developments in Data Science and related fields.

PEO3: To inculcate ethical and social responsibility by upholding high standards of

professional conduct and contributing to the well-being of society.

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

PO2 : Problem Analysis: Identify, formulate, review research literature, and analyze
complex engineering problems reaching substantiated conclusions using first principles
of 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 safety, and the cultural, societal,
and environmental considerations.

PO4 : Conduct Investigations of Complex Problems: Use research-based knowledge

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

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

VIGNAN’S INSTITUTE OF MANAGEMENT AND TECHNOLOGY FOR WOMEN

DEPARTMENT OF CSE (DS) NODE JS/ REACT JS/ DJANGO LAB

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

PO7 : Environment and Sustainability: Understand the impact of the professional

engineering solutions in societal and environmental contexts and demonstrate the
knowledge of,and need for sustainable development.

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

PO9 : Individual and Team Work: Function effectively as an individual and as a

member or leader in diverse teams and in multidisciplinary settings.

PO10 : Communication: Communicate effectively on complex engineering activities

with the 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.

PO11 : Project Management and Finance: Demonstrate knowledge and

understanding of the engineering management principles and apply these to one's own
work, as a member and leader in a team to manage projects and in multidisciplinary
environments.

PO12 : Life-Long Learning: Recognize the need for and have the preparation and
ability to engage in independent and lifelong learning in the broadest context of
technological change.

Program Specific Outcomes(PSOs): :

PSO1: Apply knowledge of mathematics, statistics, computer science, and domain-specific
expertise to analyze complex data and derive insights that support decision-making.

PSO2: Develop and implement data-driven models, algorithms, and visualization techniques to
solve real-world problems in diverse domains, such as finance, healthcare, education, and
social sciences.

PSO3: Use modern data management systems, software tools, and platforms to collect, store,
retrieve, process, and analyze large volumes of data efficiently and effectively. Apply ethical,
legal, and social considerations to data science projects and uphold professional standards of
conduct and confidentiality.

VIGNAN’S INSTITUTE OF MANAGEMENT AND TECHNOLOGY FOR WOMEN

 COURSE OBJECTIVES
 To implement the static web pages using HTML and do client side validation using
JavaScript.

 To design and work with databases using Java

 To develop an end to end application using java full stack.

 To introduce Node JS implementation for server side programming.

 To experiment with single page application development using React.

COURSE OUTCOMES
 Build a custom website with HTML, CSS, and Bootstrap and little JavaScript.

 Demonstrate Advanced features of JavaScript and learn about JDBC

 Develop Server – side implementation using Java technologies like

 Develop the server – side implementation using Node JS.

 Design a Single Page Application using React.

 (Accredited by NBA, Approved by AICTE and Affiliated to JNT University, Hyderabad)

Certificate
Certified that this is the bonafide record of the work done by Ms_ _ _ _ _ _ _ _ _ _ _ _ _
_ _ _ _ _ _ _ _ _ _ _ of Year_ _ _ _ _ _Semester _______________ Hall Ticket Number
_ _ _ _ _ _ _ _ _ _ _ _ _ _ in Department of __________________________________ ,
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Laboratory during the year 2024-25.

Internal Examiner External Examiner Head of the Department

Date:
 INSTRUCTIONS TO STUDENTS

 All students must observe the Dress Code while in the laboratory.
 Foods, drinks and smoking are NOT allowed.
 All bags must be left at the indicated place.
 The lab timetable must be strictly followed.
 Be PUNCTUAL for your laboratory session.
 Noise must be kept to a minimum.
 Workspace must be kept clean and tidy at all time.
 All students are liable for any damage to the accessories due to their own
negligence.
 Students are strictly PROHIBITED from taking out any items from the
laboratory.
 Report immediately to the Lab Supervisor if any malfunction of the
accessories, is there.

Before leaving the lab

 Shut down all the systems properly.
 Place the chairs properly.
 Please check the laboratory notice board regularly for updates.
 INDEX
Experiment Name Date Page
S. No Number
Build a responsive web application for shopping cart
1 with registration, login, catalog and cart pages using
CSS3 features, flex and grid.
Make the above web application responsive web
2
application using Bootstrap framework
Use JavaScript for doing client – side validation of
3 the pages implemented in experiment 1 and
experiment 2.
Explore the features of ES6 like arrow functions,
callbacks, promises, async/await. Implement an
4 application for reading the weather information from
openweathermap.org and display the information in the
form of a graph on the web page.
Develop a java stand alone application that connects
with the database (Oracle / mySql) and perform the
5
CRUD operation on the database tables
Create an xml for the bookstore. Validate the same
6 using both DTD and XSD.
Design a controller with servlet that provides the
7 interaction with application developed in experiment 1
and the database created in experiment 5.
Maintaining the transactional history of any user is very
8 important. Explore the various session tracking
mechanism (Cookies, HTTP Session)
Create a custom server using http module and explore
9
the other modules of Node JS like OS,path, event.
Develop an express web application that can interact
10 with REST API to perform CRUDoperations on
student data. (Use Postman)
For the above application create authorized end points
11
using JWT (JSON Web Token).
Create a react application for the student management
12 system having registration, login, contact, about pages
and implement routing to navigate through these pages.
Create a service in react that fetches the weather
information from openweathermap.org and the display
13
the current and historical weather information using
graphical representation using chart.js
Create a TODO application in react with necessary
14
components and deploy it into github.

Signature of the Faculty Head of the Department

 EVALUATION SHEET
A-Regularity B – Record submission in-time C – Viva-Voce D - Experimentation
Exp A B C D TOTAL Faculty
Experiment Name Date
No 2 3 4 6 (T=A+B+C+D) Sign
Build a responsive web application for shopping
1 cart with registration, login, catalog and cart
pages using CSS3 features, flex and grid.
Make the above web application responsive web
2 application using Bootstrap framework
Use JavaScript for doing client – side
3 validation of the pages implemented in
experiment 1 and experiment 2.
Explore the features of ES6 like arrow functions,
callbacks, promises, async/await. Implement an
application for reading the weather information
4 from openweathermap.org and display the
information in the form of a graph on the web
page.
Develop a java stand alone application that
connects with the database (Oracle / mySql) and
perform the CRUD operation on the database
5
tables
Create an xml for the bookstore. Validate the
6 same using both DTD and XSD.
Design a controller with servlet that provides the
interaction with application developed in
7 experiment 1 and the database created in
experiment 5.
Maintaining the transactional history of any user is
8 very important. Explore the various session
tracking mechanism (Cookies, HTTP Session)
Create a custom server using http module and
9 explore the other modules of Node JS like
OS,path, event.
Develop an express web application that can
10 interact with REST API to perform
CRUDoperations on student data. (Use Postman)
For the above application create authorized end
11 points using JWT (JSON Web Token).
Create a react application for the student
management system having registration, login,
12 contact, about pages and implement routing to
navigate through these pages.
Create a service in react that fetches the weather
information from openweathermap.org and the
13 display the current and historical weather
information using graphical representation using
chart.js
Create a TODO application in react with necessary
14 components and deploy it into github.

Average Marks: Faculty Sign with Date

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

Aim:

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

Solution :

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Home - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130" height="10
0"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS WEBSITE</h
1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
 </tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h2>Welcome to FBS e-Book's Website</h2>
<p>Shopping at <font size=5>FBS</font> can be both <font size=5>fun</font
>
and <font size=5>savings</font>.</br>Shop with us in this special <font
size=5>discount</font> season and save upto <font size=5>90%</font> on all
your
purchases.</br></p>
<br/><br/><br/><br/><br/><br/><br/><br/>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS ebooks</font></foot
er>
</div>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Login - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130" height="10
0"/></th>
 <th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS WEBSITE</h
1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center><br>
<h3> Login Details</h3> <br/>
<form name="f1">
<table width="100%" align="center" >
<tr>
<td> User Name : </td>
<td> <input type="text" name="username"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td> Password : </td>
<td> <input type="password" name="password"></td>
</tr>
<tr><td><br></td></tr>
<tr><td></td>
<td><input type="submit" value="SUBMIT">
<input type="reset" value="RESET"></td>
</tr>
</table>
</form>
</center>
</main>
</div>
<div class="sidebar2"></div>
</div>
 <footer><font color="white">(C) 2024 All rights reserved by FBS ebooks</font></foot
er>
</div>
</body>
</html>

registration.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Registration - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130" height="10
0"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS WEBSITE</h
1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
 <div class="container2">
<main>
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="radio" value="1">Male &nbsp;&nbsp;
<input type="radio" name="radio" value="2">Female</td></tr>
<tr> <td valign="top">Language Known:*</td>
<td> <input type="checkbox" name="checkbox" value="English">English<br
/>
<input type="checkbox" name="checkbox" value="Telugu">Telugu<br>
<input type="checkbox" name="checkbox" value="Hindi">Hindi<br>
<input type="checkbox" name="checkbox" value="Tamil">Tamil
</td></tr>
<tr> <td valign="top">Address:*</td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="submit" value="submit" hspace="10">
<input type="reset" value="reset"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS ebooks</font></foot
er>
</div>
</body>
</html>
cart.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Cart - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130" height="10
0"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS WEBSITE</h
1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h3>Cart</h3>
<table width="100%" align="center" >
<tbody>
<tr>
<th width="40%"><hr>BookName<hr></th>
<th width="20%"><hr>Price<hr></th>
<th width="20%"><hr>Quantity<hr></th>
<th width="20%"><hr>Amount<hr></th> </tr>
 </tbody>
<tbody align=center>
<tr> <td>Java Programming </td>
<td>Rs. 2300/-</td>
<td>2</td>
<td>Rs. 4600/-</td></tr>
<tr><td>Web Technologies</td>
<td>Rs. 3000/-</td>
<td>1</td>
<td>Rs. 3000/-</td></tr>
<tr><td></td>
<td><hr><font color="#996600">Total Amount:</font><hr></td>
<td><hr>3<hr></td>
<td><hr>Rs. 7600/-<hr></td> </tr>
</tbody>
</table>
</center>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS ebooks</font></foot
er>
</div>
</body>
</html>

style.css

body{
font-family: monospace;
}

main {
background-color: #efefef;
color: #330000;
margin-left: 10px;
height: 60vh;
}

header, footer {
background-color: #000d57;
color: #fff;
padding: 1rem;
 height: 50px;
}

header, nav{
margin-bottom: 10px;
flex-basis: 50%;
}

footer{
margin-top: 10px;
}
nav {
background-color: #fff;
color: #000;
padding: 1rem;
height: 20px;
}

.sidebar1, .sidebar2 {
flex-basis: 10%;
background-color: #fff;
color: #000;
}

.sidebar2{
margin-left: 10px;
}

.container1{
display: flex;
}

.container2 {
display: flex;
flex-direction: column;
flex: 1;
}

header, nav, main, .sidebar1, .sidebar2, footer{

display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}

.wrapper {
display: flex;
flex-direction: column;
font-weight: 600;
}
Output :
 Use JavaScript for doing client – side validation of the pages implemented in the
2.
experiment

Aim:

☛ Use JavaScript for doing client – side validation of the pages implemented in the
experiment

Solution :

☛ Client - Side validation of Registration Page

registrationJS.html

<html>
<head>
<title> Welcome to NNRG e-Book's website</title>
<script language="javascript">
function validate() {
// username validation
var uname = f1.username.value;
if (uname.length<=0)
{
alert("Please Enter UserName");
f1.username.focus();
return false;
}
if (uname.length < 8)
{
alert("Please enter UserName not less than 8");
f1.username.focus();
return false;
}
//password validation
var pwd = f1.password.value;
if (pwd.length<=0)
{
alert("Please Enter password");
f1.password.focus();
return false;
}
if (pwd.length < 6)
{
 alert("Please enter Password not less than 6");
f1.password.focus();
return false;
}
// email validation
var email = f1.email.value;
if (email.length<=0)
{
alert("Please Enter email");
f1.email.focus();
return false;
}
else {
let eflag=false;
for(i=0;i<email.length;i++) {
if(email.charAt(i)=="@")
{
eflag=true;
}
}
if(!(eflag))
{
alert("Please enter a valid Email ID");
f1.email.focus();
return false;
}
}
// phone number validation
var phno = f1.phno.value;
if (phno.length<=0)
{
alert("Please Enter Phone Number");
f1.phno.focus();
return false;
}
if (isNaN(phno))
{
alert("Please Enter Valid Phone Number");
f1.phno.focus();
return false;
}
if (phno.length != 10)
{
alert("Please Enter Valid Phone Number");
f1.phno.focus();
return false;
}
// gender validation
let flag=false;
 for(i=0;i<f1.gen.length;i++)
if(f1.gen[i].checked)
flag=true;
if(!(flag))
{
alert("Please choose a Gender");
return false;
}
// Language validation
flag=false;
for(i=0;i<f1.lang.length;i++)
if(f1.lang[i].checked)
flag=true;
if(!(flag))
{
alert("Please select at least one of the Language options.");
return false;
}
// address validation
var addr = f1.address.value;
if (addr.length<=0)
{
alert("Please Enter address");
f1.address.focus();
return false;
}
// to display Success message
alert("Registration Successful");
}
</script>
</head>
<body>
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> User Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="gen" value="Male">Male &nbsp;&nbsp;
<input type="radio" name="gen" value="Female">Female</td></tr>
<tr> <td valign="top">Language Known:*</td>
 <td> <input type="checkbox" name="lang" value="English">English<br/>
<input type="checkbox" name="lang" value="Telugu">Telugu<br>
<input type="checkbox" name="lang" value="Hindi">Hindi<br>
<input type="checkbox" name="lang" value="Tamil">Tamil
</td></tr>
<tr> <td valign="top">Address:*</td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="button" value="SUBMIT" hspace="10" onclick="validate
()">
<input type="reset" value="RESET"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

Output :
 Explore the features of ES6 like arrow functions, callbacks, promises, async/await.
3. Implement an application for reading the weather information from openweathermap.org
and display the information in the form of a graph on the web page.

Aim:

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

Solution :

☛ First, install the required npm packages:

npm install express axios

npm install express --save

☛ Create a file named server.js for the backend:

server.js

const express = require('express'); // Correct way to import Express

const axios = require('axios');

const app = express();

const port = 3000;

app.use(express.static('public'));

app.get('/weather/:city', async (req, res) => {

const { city } = req.params;

try {
const apiKey = 'c97c0c1086d42990e89d64d76f50bb61';
const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${ci
ty}&appid=${apiKey}&units=metric`);
const temperature = response.data.main.temp;
res.json({ temperature });
} catch (error) {
 console.error('Error fetching weather data:', error);
res.status(500).json({ error: 'Internal Server Error' });
}
});

app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});

☛ Create a folder named public and create an index.html file for the frontend:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input, button {
padding: 10px;
font-size: 16px;
}
canvas {
max-width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>

<h1>Weather Information</h1>
<input type="text" id="cityInput" placeholder="Enter city name">
<button onclick="fetchWeather()">Get Weather</button>
 <h2 id="tempText"></h2>
<canvas id="weatherChart"></canvas>

<script>
async function fetchWeather() {
const city = document.getElementById("cityInput").value;
if (!city) {
alert("Please enter a city name.");
return;
}

try {
const response = await fetch(`/weather/${city}`);
const data = await response.json();

if (response.ok) {
document.getElementById("tempText").innerText = `Temperature in ${city}: ${
data.temperature}°C`;

// Chart.js Graph
const ctx = document.getElementById("weatherChart").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: ["Temperature"],
datasets: [{
label: `Temperature in ${city}`,
data: [data.temperature],
backgroundColor: "rgba(54, 162, 235, 0.5)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
});

} else {
document.getElementById("tempText").innerText = "Error fetching weather dat
a.";
}
} catch (error) {
console.error("Error:", error);
document.getElementById("tempText").innerText = "Failed to load weather data.";
}
}
 </script>

</body>
</html>

☛ Now, you can run your Node.js server:

node server.js

☛ Visit http://localhost:3000 in your web browser.

Create an OpenWeatherMap Account and Generate API Key

1. Visit the OpenWeatherMap website (https://openweathermap.org/) and click

on "Sign Up" or "Log In" to create an account or log into your existing account.
2. Once logged in, navigate to your account dashboard.
3. From the dashboard, locate my API Keys section and click on "Create Key" or "API
Keys" to generate a new API key.
4. Provide a name for your API key (e.g., "WeatherApp") and click on
the "Generate" or "Create" button.
5. Your API key will be generated and displayed on the screen. Make sure to copy it as
we will need it later.

Output :

☛ Locate API key

Initially It look Like:

Then, by entering the city then click update chart then

 Develop a java stand alone application that connects with the database (Oracle / mySql)
4.
and perform the CRUD operation on the database tables.

Aim:

☛ Develop a java stand alone application that connects with the database (Oracle /
mySql) and perform the CRUD operation on the database tables.

Solution :

I will provide you with the MySQL code for creating the student table and make some
changes to your Java code to improve it:

☛ MySQL Code:

sql> CREATE TABLE IF NOT EXISTS student (

s_id INT PRIMARY KEY,
s_nameVARCHAR(255),
s_addressVARCHAR(255)
);

This SQL code creates a table with three columns: s_id for student ID (primary key), s_name
for student name, and s_address for student address.

Java Code

InsertData.java

import java.sql.*;
import java.util.Scanner;
public class InsertData {
public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb", "r
oot", "");
Statements = con.createStatement()) {

Scanner sc = new Scanner(System.in);

System.out.println("Inserting Data into student table:");
System.out.println("________________________________________");

System.out.print("Enter student id: ");

int sid = sc.nextInt();
System.out.print("Enter student name: ");
String sname = sc.next();
System.out.print("Enter student address: ");
String saddr = sc.next();

String insertQuery = "INSERT INTO student VALUES(" + sid + ",'" + sname + "','" +
saddr + "')";
s.executeUpdate(insertQuery);

System.out.println("Data inserted successfully into student table");

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

Inserting Data into student table:

________________________________________
Enter student id: 101
Enter student name: John Doe
Enter student address: 123 Main Street
Data inserted successfully into student table

UpdateData.java
import java.sql.*;
import java.util.Scanner;

public class UpdateData {

public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb", "r
oot", "");
Statements = con.createStatement()) {

Scanner sc = new Scanner(System.in);

System.out.println("Update Data in student table:");
System.out.println("________________________________________");

System.out.print("Enter student id: ");

int sid = sc.nextInt();
System.out.print("Enter student name: ");
String sname = sc.next();
System.out.print("Enter student address: ");
String saddr = sc.next();

String updateQuery = "UPDATE student SET s_name='" + sname + "', s_address='" +

saddr + "' WHERE s_id=" + sid;
s.executeUpdate(updateQuery);

System.out.println("Data updated successfully");

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

Update Data in student table:

________________________________________
Enter student id: 101
Enter student name: Jane Doe
Enter student address: 456 Broad Street
Data updated successfully
DeleteData.java

import java.sql.*;
import java.util.Scanner;

public class DeleteData {

public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb", "r
oot", "");
Statements = con.createStatement()) {

Scanner sc = new Scanner(System.in);

System.out.println("Delete Data from student table:");
System.out.println("________________________________________");

System.out.print("Enter student id: ");

int sid = sc.nextInt();

String deleteQuery = "DELETE FROM student WHERE s_id=" + sid;

s.executeUpdate(deleteQuery);

System.out.println("Data deleted successfully");

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

Delete Data from student table:

______________________________________
Enter student id: 101
Data deleted successfully

DisplayData.java

import java.sql.*;
public class DisplayData {
public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb", "r
oot", "");
Statement s = con.createStatement()) {

ResultSet rs = s.executeQuery("SELECT * FROM student");

if (rs != null) {
System.out.println("SID \t STU_NAME \t ADDRESS");
System.out.println("________________________________________");

while (rs.next()) {
System.out.println(rs.getString("s_id") + " \t " + rs.getString("s_name") + " \t " +
rs.getString("s_address"));
System.out.println("________________________________________");
}
}

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

SID STU_NAME ADDRESS

________________________________________
102 Alice Smith 789 Oak Avenue
________________________________________
103 Bob Johnson 567 Pine Road
________________________________________
5. Create an xml for the bookstore. Validate the same using both DTD and XSD.

Aim:

☛ Create an xml for the bookstore. Validate the same using both DTD and XSD.

Solution :

☛ XML data to validate:

bookstore.xml

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

<!DOCTYPE bookstore[
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<bookstore>
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
<price>29.99</price>
</book>
<book>
<title>Programming with XML</title>
<author>Jane Smith</author>
<price>39.99</price>
</book>
</bookstore>

☛ XML schema (XSD) data:

bookstore.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://example.com"
xmlns="http://example.com">
<xs:element name="root">
<xs:complexType>
<xs:sequence>
<xs:element name="bookstore" type="bookstoreType"/>
</xs:sequence>
</xs:complexType>
</xs:element>

<xs:complexType name="bookstoreType">
<xs:sequence>
<xs:element name="book" type="bookType" minOccurs="0" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="bookType">
<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:complexType>
</xs:schema>

To Check the Validity :

1. Go to the below link,

https://www.liquid-technologies.com/online-xsd-validator
2. Place the XML code in the XML Validate.
3. Place the XSD code in the XML Schema Data.
4. Then click the validate Button.
5. Then it will show the Document as Valid.
Output :
 Create a custom server using http module and explore the other modules of Node JS like
6.
OS, path, event.

Aim:

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

Solution :

☛ Open Terminal or Command Prompt:

Open a terminal or command prompt in the directory where you saved your server.js file.

☛ Run the Server Script:

Execute the server script using the Node.js runtime. In the terminal, run:

node server.js

This will start the HTTP server, and you should see the message "Server running at
http://127.0.0.1:3000/".

☛ Access the Server:

Open your web browser and navigate to http://127.0.0.1:3000/ or http://localhost:3000/. You

should see the response "Hello, World!".

☛ Check OS Information:

In the same terminal where your server is running, you'll see information about your
operating system (OS) type, platform, architecture, CPU cores, etc.

☛ Check Current Working Directory:

The current working directory of the script is printed in the terminal.

☛ Check Joined Path:

The joined path using the path module is printed in the terminal.
☛ Check Custom Event:

The script emits a custom event and listens for it. In the terminal, you should see the message
"Custom Event Triggered: { message: 'Hello from custom event!' }".

☛ Stop the Server:

To stop the server, press Ctrl+C in the terminal where the server is running.

server.js

// Step 1: Import required modules

const http = require('http');
const os = require('os');
const path = require('path');
const { EventEmitter } = require('events');

// Step 2: Create an instance of EventEmitter

const eventEmitter = new EventEmitter();

// Step 3: Create a simple HTTP server

const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type':'text/plain' });
res.end('Hello, World!\n');
});

// Step 4: Define server port and hostname

constport = 3000;
consthostname = '127.0.0.1';

// Step 5: Listen for requests on the specified port and hostname

server.listen(port, hostname, () => {
console.log('Server running at http://${hostname}:${port}/');
});

// Step 6: Print OS information

console.log('OS Type:', os.type());
console.log('OS Platform:', os.platform());
console.log('OS Architecture:', os.arch());
console.log('CPU Cores:', os.cpus().length);

// Step 7: Print current working directory

console.log('Current Working Directory:', process.cwd());

// Step 8: Join paths using the path module

const joinedPath = path.join(__dirname, 'public', 'images');
console.log('Joined Path:', joinedPath);
// Step 9: Handle a custom event
eventEmitter.on('customEvent', (data) => {
console.log('Custom Event Triggered:', data);
});

// Step 10: Emit a custom event

eventEmitter.emit('customEvent', { message:'Hello from custom event!' });

Output :

In the Terminal:

In the Browser:

Link: http://127.0.0.1:3000/
 Develop an express web application that can interact with REST API to perform CRUD
7.
operations on student data. (Use Postman)

Aim:

☛ Develop an express web application that can interact with REST API to perform
CRUD operations on student data. (Use Postman)

Solution :

 Firstly we need to create a new folder and open the folder in the command prompt and
enter a command as below:

 npminit -y


 Open that folder in the vscode by entering code.

 Next in the terminal we need to install all the packages we need, so we mainly use
express and sqlite3.
 The Command to install express and sqlite3 is

 npm install express sqlite3

Then create file named as the app.js and db.js

db.js

const sqlite3 = require('sqlite3').verbose();

// Function to initialize the database schema

function initializeDatabase() {
const db = new sqlite3.Database('./mydatabase.db', (err) => {
if (err) {
console.error(err.message);
} else {
console.log('Connected to the SQLite database.');
createStudentsTable(db);
}
});

// Close the database connection when the Node process exits