Scribd
Upload
16 views83 pages

Web Development Course: Node, React, Django

The Skill Development Course aims to teach students how to create web applications using technologies like HTML, Java, Node JS, and React JS. By the end of the course, students will be able to build responsive websites, implement server-side programming, and develop single-page applications. The course includes practical experiments such as creating a shopping cart application and performing client-side validation using JavaScript.

Uploaded by

Hemlata reddy
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views83 pages

Web Development Course: Node, React, Django

The Skill Development Course aims to teach students how to create web applications using technologies like HTML, Java, Node JS, and React JS. By the end of the course, students will be able to build responsive websites, implement server-side programming, and develop single-page applications. The course includes practical experiments such as creating a shopping cart application and performing client-side validation using JavaScript.

Uploaded by

Hemlata reddy
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Skill Development Course (Node JS/ React JS/ Django)

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:

At the end of the course, the student will be able toBuild 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.


INDEX

Build a responsive web application for shopping cart with registration,


1.
login, catalog and cart pages using CSS3 features, flex and grid.
Make the above web application responsive web application using Bootstrap
2.
framework.

Use JavaScript for doing client – side validation of the pages implemented
3.
in the experiment
Explore the features of ES6 like arrow functions, callbacks, promises,
async/await. Implement an application for reading the weather
4.
information from [Link] 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
5.
(Oracle / mySql) and perform the CRUD operation on the database tables.
Create an xml for the bookstore. Validate the same using both DTD and
6.
XSD.
Design a controller with servlet that provides the interaction with application
7.
developed in experiment 1 and the database created in experiment 5.

Maintaining the transactional history of any user is very important. Explore the
8.
various session tracking mechanism (Cookies, HTTP Session).

Create a custom server using http module and explore the other modules
9.
of Node JS like OS, path, event.
Develop an express web application that can interact with REST API to
10.
perform CRUD operations on student data. (Use Postman)
For the above application create authorized end points using JWT (JSON Web
11.
Token).
Create a react application for the student management system having
12. registration, login, contact, about pages and implement routing to navigate
through these pages.
Create a service in react that fetches the weather information from open
13. [Link] and the display the current and historical weather
information using graphical representation using [Link]
Create a TODO application in react with necessary components and
14.
deploy it into github.
1. Aim:

☛ Build a responsive web application for shopping cart with


registration, login, catalog and cart pages using CSS3 features, flex
and grid.

Solution :

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"href="./[Link]">
<title>Home - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tr>
<thwidth="20%"><imgsrc="[Link]"alt="FBS
LOGO"width="130"height="100"/></th>
<thcolspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tbodyalign="center"style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="[Link]">Home</a><hr></td>
<td width="20%"><hr><a href="[Link]">Login</a><hr></td>
<td width="20%"><hr><a
href="[Link]">Registration</a><hr></td>
<td width="20%"><hr><a href="[Link]">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></footer>
</div>
</body>
</html>
[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"href="./[Link]">
<title>Login - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tr>
<thwidth="20%"><imgsrc="[Link]"alt="FBS
LOGO"width="130"height="100"/></th>
<thcolspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tbodyalign="center"style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="[Link]">Home</a><hr></td>
<td width="20%"><hr><a href="[Link]">Login</a><hr></td>
<td width="20%"><hr><a
href="[Link]">Registration</a><hr></td>
<td width="20%"><hr><a href="[Link]">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></footer>
</div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"href="./[Link]">
<title>Registration - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tr>
<thwidth="20%"><imgsrc="[Link]"alt="FBS
LOGO"width="130"height="100"/></th>
<thcolspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tbodyalign="center"style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="[Link]">Home</a><hr></td>
<td width="20%"><hr><a href="[Link]">Login</a><hr></td>
<td width="20%"><hr><a
href="[Link]">Registration</a><hr></td>
<td width="20%"><hr><a href="[Link]">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><textareaname="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></footer>
</div>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"href="./[Link]">
<title>Cart - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tr>
<thwidth="20%"><imgsrc="[Link]"alt="FBS
LOGO"width="130"height="100"/></th>
<thcolspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table
width="100%"align="center"cellpadding="0"cellspacing="2">
<tbodyalign="center"style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="[Link]">Home</a><hr></td>
<td width="20%"><hr><a href="[Link]">Login</a><hr></td>
<td width="20%"><hr><a
href="[Link]">Registration</a><hr></td>
<td width="20%"><hr><a href="[Link]">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>
<thwidth="40%"><hr>BookName<hr></th>
<thwidth="20%"><hr>Price<hr></th>
<thwidth="20%"><hr>Quantity<hr></th>
<thwidth="20%"><hr>Amount<hr></th></tr>
</tbody>
<tbodyalign=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></footer>
</div>
</body>
</html>

[Link]

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 :
3. Aim:

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


implemented in the experiment

Solution :

☛ Client - Side validation of Registration Page

[Link]

<html>
<head>
<title> Welcome to NNRG e-Book's website</title>
<script language="javascript">
functionvalidate(){
// username validation
varuname= [Link];
if([Link]<=0)
{
alert("Please Enter UserName");
[Link]();
returnfalse;
}
if([Link]<8)
{
alert("Please enter UserName not less than 8");
[Link]();
returnfalse;
}
//password validation
varpwd= [Link];
if([Link]<=0)
{
alert("Please Enter password");
[Link]();
returnfalse;
}
if([Link]<6)
{
alert("Please enter Password not less than 6");
[Link]();
returnfalse;
}
// email validation
var email = [Link];
if([Link]<=0)
{
alert("Please Enter email");
[Link]();
returnfalse;
}
else{
leteflag=false;
for(i=0;i<[Link];i++){
if([Link](i)=="@")
{
eflag=true;
}
}
if(!(eflag))
{
alert("Please enter a valid Email ID");
[Link]();
returnfalse;
}
}
// phone number validation
varphno= [Link];
if([Link]<=0)
{
alert("Please Enter Phone Number");
[Link]();
returnfalse;
}
if(isNaN(phno))
{
alert("Please Enter Valid Phone Number");
[Link]();
returnfalse;
}
if([Link]!=10)
{
alert("Please Enter Valid Phone Number");
[Link]();
returnfalse;
}
// gender validation
let flag=false;
for(i=0;i<[Link];i++)
if([Link][i].checked)
flag=true;
if(!(flag))
{
alert("Please choose a Gender");
returnfalse;
}
// Language validation
flag=false;
for(i=0;i<[Link];i++)
if([Link][i].checked)
flag=true;
if(!(flag))
{
alert("Please select at least one of the Language options.");
returnfalse;
}
// address validation
varaddr= [Link];
if([Link]<=0)
{
alert("Please Enter address");
[Link]();
returnfalse;
}
// 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><textareaname="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 :
4. Aim:

☛ 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.

Solution :
Java Script Async
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head><body>
<h2>JavaScript Async</h2>
<p id="main"></p>
<script>function myDisplayer(some)
{
[Link]("main").innerHTML =
some;

}
async function myfirstFunction()
{

return "Hello World!!!";


}
myfirstFunction().then(function(value)
{
myDisplayer(value);
},function(error)
{
myDisplayer(error);
}
);

</script>
</body>
</html>

*********************************OUTPUT***************************************

Java Script Await


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>JavaScript Await</h2>
<p id="main"></p>
<script>
async function myDisplay()
{
let myPromise = new
Promise(function(myResolve, myReject)
{
myResolve("Hello World!!");

});
[Link]("main").innerHTML
= await myPromise;
}
myDisplay();
</script>
</body>
</html>

***********************************OUTPUT***************************************
Implement an application for reading the weather information from [Link] and
display the information in the form of a graph on the web page.

<!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>
<style>/* CSS */
.weather-info { display: flex; flex-direction:
column;
align-items: center;justify-content: center;}
.icon { width: 150px; height: 150px;
}
.icon img {width: 100%;height: 100%;
}
</style>
</head>
<body style='background-color:#467'>
<!-- HTML -->
<div class="weather-info">
<h2>Weather in Hyderabad</h2>
<div class="icon">
<img src="" alt="weather icon">
</div>
<p class="temperature"></p>
<p class="description"></p>
</div>J <script>
API_KEY = '5eda0f8c6bbe529f634e390ff13af2ed';
const CITY = 'Hyderabad'
const WEATHER_API =
`[Link]
{CITY}&appid=${API_KEY}&units=metric`;
const weatherIcon =
[Link]('.icon img');const temperature =
[Link]('.temperature');const description =
[Link]('.description');fetch(WEATHER_API).t
hen(response => [Link]()).then(data =>
{
[Link](data);
const iconURL =
`[Link]
{[Link][0].icon}.png`;
[Link]('src', iconURL);
[Link] = `$
{[Link]}°C`;
[Link] =
[Link][0].description;
}
) .catch(error => [Link](error));

</script>
</body>
</html>

************************************OUTPUT*************************************

5. Aim:

☛ Develop a java stand alone application that connects with the


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

Solution : Java Code


Inserting data in a table:-

import [Link].*;

import [Link];

public class insert

public static void main(String args[])

Scanner sc=new Scanner([Link]);

[Link]("Enter Username:");

String uname=[Link]();

[Link]("Enter Password:");

String upass=[Link]();

[Link]("Enter Email id:");

String email=[Link]();

[Link]("Enter Phone No:");

int mobno=[Link]();

[Link]("Enter Gender:");

String gen=[Link]();

[Link]("Enter the language you know:");

String lang=[Link]();

[Link]("Enter the address:");

String addr=[Link]();
try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement stmt=[Link]();

[Link]("insert into reg


values('"+uname+"','"+upass+"','"+email+"','"+mobno+"','"+gen+"','"+lang+"
','"+addr+"')");

[Link]("Record inserted.");

catch(Exception e)

[Link](e);

****************OUTPUT*****************

Enter Username:

Hema

Enter Password:

Reddy

Enter Email id:

Hema@[Link]

Enter Phone No:


9390295100

Enter Gender:

Female

Enter the language you know:

Hindi

Enter the address:

HYD

Record inserted.

BUILD SUCCESSFUL (total time: 27 seconds)

Updating data in a table:-

import [Link].*;

import [Link];

public class update

public static void main(String args[])

Scanner sc=new Scanner([Link]);

[Link]("Enter Username:");

String uname=[Link]();

[Link]("Enter Password:");

String upass=[Link]();
[Link]("Enter Email id:");

String email=[Link]();

[Link]("Enter Phone No:");

int mobno=[Link]();

[Link]("Enter Gender:");

String gen=[Link]();

[Link]("Enter the language you know:");

String lang=[Link]();

[Link]("Enter the address:");

String addr=[Link]();

try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement stmt=[Link]();

[Link]("update reg set


pass='"+upass+"',email='"+email+"',mobno='"+mobno+"',gen='"+gen+"',lan
g='"+lang+"',addr='"+addr+"' where uname='"+uname+"'");

[Link]("Record updated.");

catch(Exception e)

{
[Link](e);

******************OUTPUT*********************

run:

Enter Username:

Hema

Enter Password:

Reddy

Enter Email id:

hema@[Link]

Enter Phone No:

939029510

Enter Gender:

Female

Enter the language you know:

Hindi

Enter the address:

NZB

Record updated.

BUILD SUCCESSFUL (total time: 23 seconds)

Deleting data in a table:-


import [Link].*;

import [Link];

public class delete

public static void main(String args[])

Scanner sc=new Scanner([Link]);

[Link]("Enter Username:");

String uname=[Link]();

try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement stmt=[Link]();

[Link]("delete from reg where uname='"+uname+"'");

[Link]("Record deleted.");

catch(Exception e)

[Link](e);
}

****************OUTPUT*****************

run:

Enter Username:

Hema

Record deleted.

BUILD SUCCESSFUL (total time: 4 seconds)

Retrieving data from a table:-

import [Link].*;

import [Link].*;

public class select

public static void main(String args[])

try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement st=[Link]();
ResultSet rs=[Link]("select * from reg");

while([Link]())

String name=[Link]("uname");

String pass=[Link]("pass");

String email=[Link]("email");

int mobno=[Link]("mobno");

String gen=[Link]("gen");

String lang=[Link]("lang");

String addr=[Link]("addr");

[Link]("Employee Username:"+name);

[Link]("Employee Password:"+pass);

[Link]("Employee Email id:"+email);

[Link]("Employee Mobile Number:"+mobno);

[Link]("Employee Gender:"+gen);

[Link]("Employee Language:"+lang);

[Link]("Employee Address:"+addr);

catch(Exception e)

{
[Link](e);

finally

[Link]();

***************OUTPUT*******************

run:

Employee Username:Seema

Employee Password:wadkar

Employee Email id:Seema@[Link]

Employee Mobile Number:9390295100

Employee Gender:Female

Employee Language:Telugu

Employee Address:HYD

BUILD SUCCESSFUL (total time: 1 second)

[Link]:
☛ Create an xml for the bookstore. Validate the same using both
DTD and XSD.

Solution :

☛ XML data to validate:

[Link]

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


<!DOCTYPE bookstore[
<!ELEMENTbookstore(book+)>
<!ELEMENTbook(title,author,price)>
<!ELEMENTtitle(#PCDATA)>
<!ELEMENTauthor(#PCDATA)>
<!ELEMENTprice(#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:

[Link]

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


<xs:schemaxmlns:xs="[Link]
targetNamespace="[Link]
xmlns="[Link]
<xs:elementname="root">
<xs:complexType>
<xs:sequence>
<xs:elementname="bookstore"type="bookstoreType"/>
</xs:sequence>
</xs:complexType>
</xs:element>

<xs:complexTypename="bookstoreType">
<xs:sequence>
<xs:elementname="book"type="bookType"minOccurs="0"maxOccurs="u
nbounded"/>
</xs:sequence>
</xs:complexType>
<xs:complexTypename="bookType">
<xs:sequence>
<xs:elementname="title"type="xs:string"/>
<xs:elementname="author"type="xs:string"/>
<xs:elementname="price"type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:schema>

To Check the Validity :


1. Go to the below link,
[Link]
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 :
[Link]:
7. Design a controller with a Servlet that provides the interaction with
application developed in Experiment 1 and the database created in
Experiment 5.

Inserting data in a table:-

[Link]

<html>

<head>

<title>Inserting data in a table</title>

</head>

<body>
<form action="insert_data" method="post">

<table align="center" border="3">

<caption>Employee Details</caption>

<tr>

<td>Username:</td>

<td><input type="text" name="uname"></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" name="pass"></td>

</tr>

<tr>

<td>Email Id:</td>

<td><input type="text" name="email"></td>

</tr>

<tr>

<td>Mobile Number:</td>

<td><input type="text" name="mobno"></td>

</tr>

<tr>

<td>Gender:</td>

<td>

<input type="radio" value="female" name="gen">Female

<input type="radio" value="male" name="gen">Male


</td>

</tr>

<tr>

<td>Language:</td>

<td>

<select name="lang">

<option>English</option>

<option>Telugu</option>

<option>Marathi</option>

<option>Hindi</option>

</select>

</td>

</tr>

<tr>

<td>Address:</td>

<td>

<textarea rows="4" cols="4" name="addr">

</textarea>

</td>

</tr>

<tr>

<td><input type="submit" name="sub" value="Insert"></td>


<td><input type="reset" name="clr" value="Clear"></td>

</tr>

</table>

</form>

</body>

</html>

insert_data.java

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class insert_data extends HttpServlet

public void doPost(HttpServletRequest req, HttpServletResponse res)

throws ServletException, IOException

[Link]("text/html");

PrintWriter out = [Link]();

String uname=[Link]("uname");

String pass=[Link]("pass");

String email=[Link]("email");

int mobno=[Link]([Link]("mobno"));
String gen=[Link]("gen");

String lang=[Link]("lang");

String addr=[Link]("addr");

try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement st=[Link]();

[Link]("insert into reg


values('"+uname+"','"+pass+"','"+email+"','"+mobno+"','"+gen+"','"+lang+"',
'"+addr+"')");

[Link]("Data is inserted.");

catch(Exception e)

[Link](e);

finally

[Link]();

}
**********OUTPUT**************

Updating data in a table:-

[Link]

<html>

<head>

<title>updating data in a table</title>

</head>

<body>

<form action="update_data" method="post">


<table align="center" border="3">

<caption>Employee Details</caption>

<tr>

<td>Username:</td>

<td><input type="text" name="uname"></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" name="pass"></td>

</tr>

<tr>

<td>Email Id:</td>

<td><input type="text" name="email"></td>

</tr>

<tr>

<td>Mobile Number:</td>

<td><input type="text" name="mobno"></td>

</tr>

<tr>

<td>Gender:</td>

<td>

<input type="radio" value="female" name="gen">Female

<input type="radio" value="male" name="gen">Male

</td>
</tr>

<tr>

<td>Language:</td>

<td>

<select name="lang">

<option>English</option>

<option>Telugu</option>

<option>Marathi</option>

<option>Hindi</option>

</select>

</td>

</tr>

<tr>

<td>Address:</td>

<td>

<textarea rows="4" cols="4" name="addr">

</textarea>

</td>

</tr>

<tr>

<td><input type="submit" name="sub" value="Update"></td>

<td><input type="reset" name="clr" value="Clear"></td>


</tr>

</table>

</form>

</body>

</html>

update_data.java

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class update_data extends HttpServlet

public void doPost(HttpServletRequest req, HttpServletResponse res)

throws ServletException, IOException

[Link]("text/html");

PrintWriter out = [Link]();

String uname=[Link]("uname");

String pass=[Link]("pass");

String email=[Link]("email");

int mobno=[Link]([Link]("mobno"));

String gen=[Link]("gen");
String lang=[Link]("lang");

String addr=[Link]("addr");

try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement st=[Link]();

[Link]("update reg set


pass='"+pass+"',email='"+email+"',mobno='"+mobno+"',gen='"+gen+"',lang
='"+lang+"',addr='"+addr+"' where uname='"+uname+"'");

[Link]("Data is updated.");

catch(Exception e)

[Link](e);

finally

[Link]();

*****************OUTPUT****************
Deleting data from a table:-

[Link]

<html>

<head>

<title>Deleting data in a table</title>

</head>

<body>

<form action="delete_data" method="post">

<table align="center" border="3">


<caption>Employee Details</caption>

<tr>

<td>Username:</td>

<td><input type="text" name="uname"></td>

</tr>

<tr>

<td><input type="submit" name="sub" value="Delete"></td>

<td><input type="reset" name="clr" value="Clear"></td>

</tr>

</table>

</form>

</body>

</html>

delete_data.java

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class delete_data extends HttpServlet

public void doPost(HttpServletRequest req, HttpServletResponse res)

throws ServletException, IOException


{

[Link]("text/html");

PrintWriter out = [Link]();

String uname=[Link]("uname");

try

[Link]("[Link]");

Connection
conn=[Link]("jdbc:oracle:thin:@localhost:1521:xe"
,"system","system");

Statement st=[Link]();

[Link]("delete from reg where uname='"+uname+"'");

[Link]("Data is deleted.");

catch(Exception e)

[Link](e);

finally

[Link]();

}
***************OUTPUT****************

[Link]:
[Link] the transactional history of any user is very important.
Explore the various session tracking mechanism(Cookies, HTTP
Session) .

HTTP Session:-

[Link]

<html>

<head>

<body>

<form action="session" method="get">

<table>

<tr>

<td>Username:</td>

<td><input type="text" name="uname"></td>

</tr>

<tr>

<td>Password:</td>
<td><input type="password" name="upass"></td>

</tr>

<tr>

<td><input type="submit" name="sub" value="Submit"></td>

<td><input type="reset" name="res" value="Clear"></td>

</tr>

</table>

</form>

</body>

</html>

[Link]

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class session extends HttpServlet

public void doGet(HttpServletRequestreq,HttpServletResponse res) throws


ServletException,IOException

[Link]("text/html");

PrintWriter pw=[Link]();
String user=[Link]("uname");

HttpSession s=[Link]();

[Link]("user",user);

[Link]("<html><body>");

[Link]("Welcome:"+user);

[Link]("</html></body>");

[Link]("<a href='session1'>[Link]</a>");

[Link]

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class session1 extends HttpServlet

public void doGet(HttpServletRequestreq,HttpServletResponse res) throws


ServletException,IOException

[Link]("text/html");

PrintWriter pw=[Link]();

HttpSession s=[Link](false);
String user=(String)[Link]("user");

[Link]("<html><body>");

[Link]("Welcome:"+user);

[Link]("</html></body>");

*********************************OUTPUT****************************
Cookies:-

[Link]

<html>

<head>

<body>

<form action="cookie" method="get">

<table>

<tr>

<td>Username:</td>

<td><input type="text" name="uname"></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" name="upass"></td>

</tr>

<tr>

<td><input type="submit" name="sub" value="Submit"></td>

<td><input type="reset" name="res" value="Clear"></td>

</tr>

</table>

</form>

</body>
</html>

[Link]

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class cookie extends HttpServlet

public void doGet(HttpServletRequestreq,HttpServletResponse res) throws


ServletException,IOException

[Link]("text/html");

PrintWriter pw=[Link]();

String user=[Link]("uname");

String pass=[Link]("upass");

HttpSession s=[Link]();

Cookie ck1=new Cookie("uname",user);

Cookie ck2=new Cookie("upass",pass);

[Link](2000);

[Link](3000);

[Link](ck1);

[Link](ck2);
//Cookie ck[]=[Link]();

[Link]("<html><body>");

[Link]("Username is:"+user);

[Link]("Password is:"+pass);

[Link]("</html></body>");

[Link]("<a href='cookie1'>[Link]</a>");

[Link]

import [Link].*;

import [Link].*;

import [Link].*;

import [Link].*;

public class cookie1 extends HttpServlet

public void doGet(HttpServletRequestreq,HttpServletResponse res) throws


ServletException,IOException

[Link]("text/html");

PrintWriter pw=[Link]();

Cookie ck[]=[Link]();

[Link]("<html><body>");
[Link]("Username is:"+ck[1].getValue());

[Link]("Password is:"+ck[2].getValue());

[Link]("</html></body>");

*******************************OUTPUT*****************************
[Link]:

☛ 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 [Link] file.

☛ Run the Server Script:

Execute the server script using the [Link] runtime. In the terminal, run:

node [Link]

This will start the HTTP server, and you should see the message "Server running at
[Link]

☛ Access the Server:

Open your web browser and navigate


to [Link] or [Link] 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.

[Link]

// Step 1: Import required modules


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

// Step 2: Create an instance of EventEmitter


consteventEmitter=newEventEmitter();

// Step 3: Create a simple HTTP server


const server =[Link]((req, res)=>{
[Link](200,{'Content-Type':'text/plain'});
[Link]('Hello, World!\n');
});

// Step 4: Define server port and hostname


constport=3000;
consthostname='[Link]';

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


hostname
[Link](port, hostname,()=>{
[Link]('Server running at [Link]
});

// Step 6: Print OS information


[Link]('OS Type:',[Link]());
[Link]('OS Platform:',[Link]());
[Link]('OS Architecture:',[Link]());
[Link]('CPU Cores:',[Link]().length);

// Step 7: Print current working directory


[Link]('Current Working Directory:',[Link]());
// Step 8: Join paths using the path module
constjoinedPath=[Link](__dirname,'public','images');
[Link]('Joined Path:',joinedPath);

// Step 9: Handle a custom event


[Link]('customEvent',(data)=>{
[Link]('Custom Event Triggered:', data);
});

// Step 10: Emit a custom event


[Link]('customEvent',{message:'Hello from custom
event!'});

Output :

In the Terminal:

In the Browser:

Link: [Link]
[Link]:

☛ 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 [Link] and [Link]

[Link]

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

// Function to initialize the database schema


functioninitializeDatabase(){
constdb=[Link]('./[Link]',(err)=>{
if(err){
[Link]([Link]);
}else{
[Link]('Connected to the SQLite database.');
createStudentsTable(db);
}
});

// Close the database connection when the Node process exits


[Link]('exit',()=>{
[Link]((err)=>{
if(err){
[Link]([Link]);
}else{
[Link]('Disconnected from the SQLite database.');
}
});
});
}
// Function to create the 'students' table if it doesn't exist
functioncreateStudentsTable(db){
constcreateTableQuery=`
CREATE TABLE IF NOT EXISTS students (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
age INTEGER,
grade TEXT
);
`;

[Link](createTableQuery,(err)=>{
if(err){
[Link]([Link]);
}else{
[Link]('The students table has been created or already
exists.');
}
});
}

[Link]={initializeDatabase};

when we execute both the [Link] then the database will be created that
is [Link]

[Link]

const express =require('express');


const sqlite3 =require('sqlite3');
const{initializeDatabase}=require('./db');
const app =express();
const port =3000;

// Connect to SQLite database


constdb=[Link]('./[Link]',(err)=>{
if(err){
[Link]([Link]);
}else{
[Link]('Connected to the SQLite database.');
}
});

// Middleware to parse request body as JSON


[Link]([Link]());

[Link]('/',(req, res)=>{
[Link]('Welcome to the Student');
});

// Get all Students


[Link]('/students',(req, res)=>{
[Link]('SELECT * FROM students',[],(err, rows)=>{
if(err){
[Link]([Link]);
}
[Link](rows);
});
});

// Get a single student by id


[Link]('/students/:id',(req, res)=>{
const id = [Link];
[Link]('SELECT * FROM students WHERE id = ?',[id],(err,
row)=>{
if(err){
[Link]([Link]);
}
[Link](row);
});
});

// Create a new student


[Link]('/students',(req, res)=>{
const{ name, age, grade }=[Link];
[Link]('INSERT INTO students (name, age, grade) VALUES
(?, ?, ?)',[name, age, grade],function(err){
if(err){
[Link]([Link]);
}
[Link](201).json({id:[Link]});
});
});

// Update a student
[Link]('/students/:id',(req, res)=>{
const id = [Link];
const{ name, age, grade }=[Link];
[Link]('UPDATE students SET name = ?, age = ?, grade = ? WHERE
id = ?',[name, age, grade, id],function(err){
if(err){
[Link]([Link]);
}
[Link]({updatedID:id});
});
});

// Delete a student
[Link]('/students/:id',(req, res)=>{
const id = [Link];
[Link]('DELETE FROM students WHERE id = ?', id,function(err){
if(err){
[Link]([Link]);
}
[Link]({deletedID:id});
});
});

[Link](port,()=>{
[Link]('Server running at [Link]
});

Output :

GET:

 Open Postman.
 Set the request type to GET.
 Enter the URL: [Link]
POST : Create a New Student

 Open Postman.
 Set the request type to POST.
 Enter the URL: [Link]
 Go to the "Body" tab.
 Select raw and set the body to JSON format.
GET: #all Students

 Set the request type to GET.


 Enter the URL: [Link]
 Click on the "Send" button
 You should receive a response with details of all students in your SQLite
database.
DELETE:

 Set the request type to DELETE.


 Enter the URL for the student you want to delete (replace: id with an actual
student ID): [Link]
 Place instead of ID which replace with number that is ID to be deleted.
 Then click send
PUT:

 Set the request type to PUT.


 Enter the URL for the student you want to delete (replace: id with an actual
student ID): [Link]
 Go to the "Body" tab.
 Select raw and set the body to JSON format
[Link]:

☛ Create a service in react that fetches the weather information from


open [Link] and the display the current and historical
weather information using graphical representation using [Link]

Solution :

Step 1: Create an OpenWeatherMap Account and Generate API Key

 Visit the OpenWeatherMap website ([Link] and click on "Sign


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

 Open your terminal or command prompt.


 Run the following command to create a new React project:

npxcreate-react-app weather-app

 Once the project is created, navigate into the project directory:

cd weather-app

Step 3: Install required packages

In the project directory, install the necessary packages by executing the following
command

npm install axios

We will use the Axios library to make HTTP requests to the OpenWeatherMap API.

Step 4: Create a Weather component


 Inside the "src" directory, create a new file called "[Link]" and open it in your
code editor.
 Add the following code to define a functional component named Weather:

importReact,{useEffect,useState}from'react';
importaxiosfrom'axios';

constWeather=()=>{
const[city,setCity]=useState('');
const[weatherData,setWeatherData]=useState(null);

constfetchData=async()=>{
try{
constapiKey='c97c0c1086d42990e89d64d76f50bb61';// Replace with
your OpenWeatherMap API key
const response =[Link](
'[Link]
{city}&units=metric&appid=${apiKey}'
);
setWeatherData([Link]);
[Link]([Link]);//You can see all the weather data
in console log
}catch(error){
[Link](error);
}
};

useEffect(()=>{
fetchData();
},[]);

consthandleInputChange=(e)=>{
setCity([Link]);
};

consthandleSubmit=(e)=>{
[Link]();
fetchData();
};

return(
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter city name"
value={city}
onChange={handleInputChange}
/>
<button type="submit">GetWeather</button>
</form>
{weatherData?(
<>
<h2>{[Link]}</h2>
<p>Temperature:{[Link]}C</p>
<p>Description:{[Link][0].description}</p>
<p>Feelslike :{[Link].feels_like}C</p>
<p>Humidity:{[Link]}%</p>
<p>Pressure:{[Link]}</p>
<p>WindSpeed:{[Link]}m/s</p>
</>
):(
<p>Loading weather data...</p>
)}
</div>
);
};

exportdefaultWeather;

Replace {YOUR_API_KEY} in the API URL with the API key you generated from
OpenWeatherMap.

Step 5: Connect the Weather component to your app.

 Open the "[Link]" file in the "src" directory.


 Replace the existing code with the following code:

importReactfrom'react';
importWeatherfrom'./Weather';

constApp=()=>{
return(
<div>
<h1>WeatherForecastApp</h1>
<Weather/>
</div>
);
};

exportdefaultApp;

Your output should look like this:

Output :
Initial Screen
After Supply the City name

[Link]:

☛ Create a TODO application in react with necessary components


and deploy it into github.

Solution :

Step 1: Set Up the Project


Our first task is to set up the React project. This step involves creating the necessary
project structure. Here's how you can do it:

1. Create a React App:

Open your terminal and navigate to your preferred directory. Run the following
command to generate a new React app. Replace "todo-app" with your desired
project name:

npx create-react-app todo-app

This command will create a directory named "todo-app" with all the initial code
required for a React app.

2. Navigate to the Project Directory:

Change your working directory to the "todo-app" folder:

cdtodo-app

3. Start the Development Server:

Launch the development server with the following command:

npm start

This will open your React app, and you�ll see the default React starter page in your
web browser at '[Link]

Step 2: Create the App Component

In this step, we create the App component, which serves as the entry point to our
Todo List application.

importReactfrom'react';
importTodoListfrom'./components/TodoList';
functionApp(){
return(
<div className="App">
<TodoList/>
</div>
);
}
exportdefaultApp;

Step 3: Create the TodoList

src->Component

Now, let's create the 'TodoList' component, which is responsible for managing the list
of tasks and handling task-related functionality.

importReact,{useState}from'react';
importTodoItemfrom'./TodoItem';

functionTodoList(){
const[tasks,setTasks]=useState([
{
id:1,
text:'Doctor Appointment',
completed:true
},
{
id:2,
text:'Meeting at School',
completed:false
}
]);

const[text,setText]=useState('');
functionaddTask(text){
constnewTask={
id:[Link](),
text,
completed:false
};
setTasks([tasks,newTask]);
setText('');
}
functiondeleteTask(id){
setTasks([Link](task=> [Link]!== id));
}
functiontoggleCompleted(id){
setTasks([Link](task=>{
if([Link]=== id){
return{task,completed:![Link]};
}else{
return task;
}
}));
}
return(
<div className="todo-list">
{[Link](task=>(
<TodoItem
key={[Link]}
task={task}
deleteTask={deleteTask}
toggleCompleted={toggleCompleted}
/>
))}
<input
value={text}
onChange={e=>setText([Link])}
/>
<button onClick={()=>addTask(text)}>Add</button>
</div>
);
}
exportdefaultTodoList;

Step 4: Create the place the TodoItem in

src->Component

In this step, we create the 'TodoItem' component, which represents an individual task
in our Todo List.

importReactfrom'react';
functionTodoItem({ task,deleteTask,toggleCompleted}){
functionhandleChange(){
toggleCompleted([Link]);
}

return(
<div className="todo-item">
<input
type="checkbox"
checked={[Link]}
onChange={handleChange}
/>
<p>{[Link]}</p>
<button onClick={()=>deleteTask([Link])}>
X
</button>
</div>
);
}
exportdefaultTodoItem;

These three components, 'App', 'TodoList', and 'TodoItem', work together to create a
functional Todo List application in React. The 'TodoList' component manages the
state of the tasks, and the 'TodoItem' component represents and handles individual
tasks within the list.

Step 5: Styling

To enhance the visual appeal of your Todo List, you can apply some basic styling.
Here�s an example of how you can style the todo items. In the `[Link]` file, add
the following styles:

.todo-item{
display: flex;
justify-content: space-between;
margin-bottom:8px;
}
.todo-itemp{
color:#888;
text-decoration: line-through;
}

Your output should look like this:


Output :
Initially it looks like:

You might also like