LABORATORY MANUAL

SKILL DEVELOPMENT COURSE (NODE JS/ REACT JS/

DJANGO) LAB
(COURSE CODE: CS409PC)

For

B. Tech II Year II Semester

(COMPUTER SCIENCE AND ENGINEERING)
(RG22 Regulations)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Malla Reddy Institute Of Technology And Science

An UGC Autonomous Institution
Approved by AICTE New Delhi and Affiliated to JNTU,Hyderabad
Accredited by NBA&NAAC WITH “A” GRADE; An ISO 9001: 2015 Certified Institution
Maisammaguda, Medchal (Dist), Hyderabad -500100, Telangana.
 PROGRAM OUTCOMES (POs)

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering problems.

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

3. Design/development of solutions: Design solutions for complex engineering problems and

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

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

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

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

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

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

9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.

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

11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and 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.

12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
 COURSE STRUCTURE
(REGULATION:R22)

For The Four Year Under Graduate Programme

Bachelor of Technology (B.Tech)
With effect from the Academic Year 2023-24

DEPARTMENT OF
COMPUTER SCIENCE AND ENGINEERING
R22 B.Tech CSE SYLLABUS JNTU HYDERABAD
SKILL DEVELOPMENT COURSE (NODE JS/
REACT JS/ DJANGO)
B.Tech. II Year II Sem. L T P C
0 0 2 1
Prerequisites: Object Oriented Programming through Java, HTML Basics
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 to,
● 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.

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

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
CO1 3 3 3 3 3 - 2 3 3 2 2 3
CO2 3 3 3 3 3 2 - 3 3 - 2 3
CO3 3 3 3 3 3 - - 3 3 2 1 3
CO4 3 3 3 3 3 - - 3 3 - - 3
CO5 3 3 3 - 3 - - 3 3 - - 3
AVG 3 3 3 3 3 2 2 3 3 2 2 3

CO - PSO MAPPING:

PSO1 PSO2

CO1 - 2
CO2 - 2
CO3 - 1
CO4 - 2
CO5 - 1
AVG 0 2
 SKILL DEVELOPMENT COURSE (NODE JS/ REACT JS/
DJANGO) LAB SYLABUS
(As Per R22 Syllabus Prescribed by JNTU, Hyderabad)
B.Tech II Year-II Sem (CSE)

LIST OF EXPERIMENTS

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

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

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

4.
Explore the features of ES6 like arrow functions, callbacks, promises,
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.

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

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

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

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

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

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

11 For the above application create authorized end points using JWT (JSON Web
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

13
openweathermap.org and the display the current and historical weather
information using graphical representation usingchart.js
Create a TODO application in react with necessary components and deploy it into
14 github.

ADDITIONAL EXPERIMENTS

15. Using CSS for creating web sites

16. Write an HTML page with Javascript that takes a number from one text field in the
range 0-999 and display it in other text field in words.If the number is out of range ,it
shold show “out of range” and if it is not a number, it should show “not a number”
message in the result box
 EXPERIMENT-1

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

DESCRIPTION: HTML, CSS, and JavaScript are essential components for creating a
functional responsive web
application. A condensed example of a shopping cart with registration, login, catalogue, and cart
pages is provided.

Project Structure:
1. index.html - Main HTML file containing the structure of the web application.
2. styles.css - CSS file for styling the web pages.
3. script.js - JavaScript file for handling interactions and logic.
4. images/ - Folder for storing images.

index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Shopping Cart</title>
</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="#login">Login</a></li>
<li><a href="#register">Register</a></li>
</ul>
</nav>
</header>
<main id="content">
<!-- Content will be loaded dynamically using JavaScript -->
</main>
<script src="script.js"></script>
</body>
</html>
——————————————
 styles.css:
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px; text-
align: center;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
main {
padding: 20px;
}
/* Add more styles based on your design */
script.js:
// Dummy data for the catalog const
catalog = [
{ id: 1, name: 'Product 1', price: 20 },
{ id: 2, name: 'Product 2', price: 30 },
{ id: 3, name: 'Product 3', price: 25 },
];
// Function to load the catalog function
loadCatalog() {
const catalogContainer = document.getElementById('content');
catalogContainer.innerHTML = '<h2>Catalog</h2>'; catalog.forEach(product => {
const productCard = document.createElement('div');
productCard.classList.add('product-card');
productCard.innerHTML = `
<h3>${product.name}</h3>
<p>$${product.price}</p>
<button onclick="addToCart(${product.id})">Add to Cart</button>
`; catalogContainer.appendChild(productCard);
});
}
// Function to add a product to the cart function
addToCart(productId) {
// Implement cart functionality here
console.log(`Product ${productId} added to cart`);
}
// Initial load loadCatalog();
 Explanation
1. HTML Structure: The HTML file consists of a header, navigation, and a main
content area, initially empty but dynamically populated using JavaScript.

2. CSS Styles: The CSS file offers basic styling for header, navigation, and main content
area, which can be customized according to your design needs.

3. JavaScript Logic: The JavaScript file contains dummy catalog data and functions
for loading and adding products to the cart, allowing real-world interaction with a ser
ver for catalog data retrieval and user cart management.

Output:
The shopping cart application's basic structure is displayed in index.html, with the catalog section
containing dummy product data.

Note: The example is intentionally simplified, and you would need to add more functionality,
such
as user authentication, cart management, and server communication, for a fully functional
shopping cart application.
 EXPERIMENT- 2

AIM: Make the above web application responsive web application using Bootstrap
framework

DESCRIPTION:
Bootstrap is a popular CSS framework that makes it easy to create responsive web applications.
The previous example can be modified using Bootstrap by following these steps:

Project Structure:
1. index.html - Main HTML file containing the structure of the web application with
Bootstrap.
2. script.js - JavaScript file for handling interactions and logic (no changes from the
previous example).
3. styles.css - You can include additional custom styles if needed.

4. images/ - Folder for storing images.

————————————————————————————————-
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ bootstrap.min.css"
rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<title>Shopping Cart</title>
</head>
<body>
<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="#cart">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="#login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#register">Register</a></li>
</ul>
</nav>
</header>
<main class="container mt-3" id="content">
<!-- Content will be loaded dynamically using JavaScript -->
</main>
<!-- Bootstrap JS (optional, for certain features) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.bundle.min.js"></script>
 <script src="script.js"></script>
</body>
</html>

styles.css:
/* You can include additional custom styles here if needed */ Explanation:
1. Bootstrap Integration: In the <head> section, we added links to the Bootstrap CSS and
JS files from a CDN (Content Delivery Network). This allows us to use Bootstrap's
styling and functionality.

2. Bootstrap Classes: We applied Bootstrap classes to the HTML elements. For

example, we used container to create a responsive fixed-width container and various
utility classes for styling the header and navigation.

3. Responsive Navigation: Bootstrap's grid system and utility classes help in creating a
responsive navigation bar. The justify-content-center class is used to center the
navigation links.

4. Responsive Main Content: The container class ensures that the main content area is
responsive. Bootstrap will automatically adjust the width based on the screen size.

Output:
 When you open index.html in a web browser, you'll see that the web application is now
responsive.
 The Bootstrap framework takes care of making the layout adapt to different screen sizes,
providing a more user-friendly experience on various devices.
 Remember to test the responsiveness by resizing your browser or using different devices to
see how
 the layout adjusts.
 EXPERIMENT- 3

AIM: Use JavaScript for doing client – side validation of the pages implemented in experiment
1: Build a responsive web application for shopping cart with registration, login, catalog and cart
pages using CSS3 features, flex and grid and Experiment 2: Make the above web application
responsive web application using Bootstrap framework
DESCRIPTION: To perform client-side validation using JavaScript, you can add scripts to validate
user inputs on the registration and login pages.
The modifications for both experiments are listed below.

Experiment 1: Responsive Web Application without Bootstrap Add the

following JavaScript code to script.js:

// Function to validate registration form function

validateRegistration() {
const username = document.getElementById('username').value; const
password = document.getElementById('password').value; if (username.trim()
=== '' || password.trim() === '') {
alert('Please enter both username and password.'); return
false;
}
// Additional validation logic can be added as needed return
true;
}

// Function to validate login form

function validateLogin() {
const username = document.getElementById('loginUsername').value; const
password = document.getElementById('loginPassword').value; if (username.trim()
=== '' || password.trim() === '') {
alert('Please enter both username and password.'); return
false;
}

// Additional validation logic can be added as needed return

true;
}
Modify the HTML login and registration forms:
<!-- Registration Form -->
<form onsubmit="return validateRegistration()">
<!-- ... existing form fields ... -->
<button type="submit">Register</button>
</form>
<!-- Login Form -->
<form onsubmit="return validateLogin()">
<!-- ... existing form fields ... -->
<button type="submit">Login</button>
</form>
Experiment 2: Responsive Web Application with Bootstrap Add the
following JavaScript code to script.js:
// Function to validate registration form function
validateRegistration() {
const username = document.getElementById('username').value; const
password = document.getElementById('password').value; if (username.trim()
=== '' || password.trim() === '') {
alert('Please enter both username and password.'); return
false;
}

// Additional validation logic can be added as needed return

true;
}

// Function to validate login form

function validateLogin() {
const username = document.getElementById('loginUsername').value; const
password = document.getElementById('loginPassword').value; if (username.trim()
=== '' || password.trim() === '') {
alert('Please enter both username and password.'); return
false;
}
// Additional validation logic can be added as needed return
true;
}

Modify the Bootstrap login and registration forms:

<!-- Registration Form -->
<form onsubmit="return validateRegistration()" class="needs-validation" novalidate>
<!-- ... existing form fields ... -->
<button type="submit" class="btn btn-primary">Register</button>
</form>
<!-- Login Form -->
<form onsubmit="return validateLogin()" class="needs-validation" novalidate>
<!-- ... existing form fields ... -->
 <button type="submit" class="btn btn-primary">Login</button>
</form>

Explanation:

1. Validation Functions: We added two validation functions, validateRegistration and

validateLogin, which retrieve form inputs and perform basic validation. Feel free to add
more complex validation logic as needed.
2. Form Modification: We added the onsubmit attribute to the registration and login forms
to call the respective validation functions when the forms are submitted. Additionally, for
Bootstrap forms, we added the novalidate attribute to prevent the default browser
validation, allowing us to handle validation using JavaScript. Remember that client-side
validation is essential for a better user experience, but server-side validation is crucial for
security and should always be implemented. The provided examples cover basic client-
side validation; you may enhance them based on your specific requirements.
 EXPERIMENT- 4

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.

DESCRIPTION: To implement an application for reading weather information from

OpenWeatherMap.org and displaying the information in the form of a graph, we can use JavaScript
with ES6 features like arrow functions, callbacks, promises, and async/await. For simplicity, we'll
use the axios library to make HTTP requests and Chart.js for creating the graph.

The inclusion of these libraries is crucial for your project.

Project Structure:
1. index.html - Main HTML file.
2. script.js - JavaScript file for handling weather data and graph creation.
3. styles.css - CSS file for styling.
4. node_modules/ - Folder for library dependencies.
———————————————————————————————-
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Weather Graph</title>
</head>
<body>
<div class="container">
<h1>Weather Graph</h1>
<canvas id="weatherGraph" width="400" height="200"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
————————————————————————————————-
styles.css:
body {
font-family: 'Arial', sans-serif;
margin: 0;
 padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px; margin:
50px auto; background-
color: #fff; padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
canvas { display:
block;
margin: 20px auto;
}

script.js:
document.addEventListener('DOMContentLoaded', () => { const
apiKey = 'YOUR_OPENWEATHERMAP_API_KEY'; const city =
'YOUR_CITY_NAME';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city} &appid=$
{apiKey}&units=metric`;
const fetchData = async () => { try {
const response = await axios.get(apiUrl); const
weatherData = response.data;
updateGraph(weatherData.main.temp);
} catch (error) {
console.error('Error fetching weather data:', error.message);
}
};

const updateGraph = (temperature) => {

const ctx = document.getElementById('weatherGraph').getContext('2d'); new
Chart(ctx, {
type: 'bar',
data: {
labels: ['Temperature'], datasets:
[{
label: 'Temperature (°C)', data:
[temperature],
backgroundColor: ['#36A2EB'],
}],
},
options: {
 scales: { y:
{
beginAtZero: true,
},
},
},
});
};
fetchData();
});

Explanation:
1. HTML Structure: We have a simple HTML structure with a container for the
graph canvas.

2. CSS Styling: Basic styling to make the application look presentable.

3. JavaScript (script.js):
• The fetchData function uses axios to make an asynchronous HTTP request to
OpenWeatherMap API.

• The retrieved weather data is used to update the graph using the
updateGraph function.

• The graph is created using the Chart.js library.

4. API Key: Replace 'YOUR_OPENWEATHERMAP_API_KEY' with your
OpenWeatherMap API key and 'YOUR_CITY_NAME' with the desired city.

Output:
When you open index.html in a web browser, the application fetches the current weather information
for the specified city from OpenWeatherMap API and displays the temperature on a bar graph.
Please note that you need to replace 'YOUR_OPENWEATHERMAP_API_KEY' with your actual
API key. Additionally, the responsiveness and appearance can be further enhanced based on your
design preferences
 EXPERIMENT- 5

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

DESCRIPTION: let's create a simple Java standalone application that connects to a MySQL
database and performs CRUD (Create, Read, Update, Delete) operations on a table. For this
example, we'll use JDBC (Java Database Connectivity) to interact with the MySQL
database.Prerequisites:

1. Make sure you have MySQL installed, and you know the database name,
username, and password.

2. Download the MySQL JDBC driver (JAR file) from MySQL Connector/J and
include it in your project.

Example Java Application:

Let's assume we have a table named employees with columns id, name, and salary.

import java.sql.*;
public class CRUD Example
{
// JDBC URL, username, and password of MySQL server
private static final String JDBC_URL = "jdbc:mysql://localhost:3306/
your_database";
private static final String USERNAME = "your_username"; private
static final String PASSWORD = "your_password"; public static
void main(String[] args)
{
try {
// Step 1: Establishing a connection
Connection
connection=DriverManager.getConnection(JDBC_URL,USERNAME,
PASSWORD);
// Step 2: Creating a statement
Statement statement = connection.createStatement();
// Step 3: Performing CRUD operations
createRecord(statement, "John Doe", 50000);
readRecords(statement);
updateRecord(statement, 1, "John Updated", 55000); readRecords(statement);
deleteRecord(statement, 1);
readRecords(statement);
// Step 4: Closing resources
statement.close(); connection.close();
}
catch (SQLException e) {
e.printStackTrace();}

}
}
// Create a new record in the database
private static void createRecord(Statement statement, String name, int salary) throws
SQLException {
String insertQuery = "INSERT INTO employees (name, salary) VALUES ('" + name + "', " +
salary + “)";
statement.executeUpdate(insertQuery); System.out.println("Record
created successfully.");
}
// Read all records from the database
private static void readRecords(Statement statement) throws SQLException { String
selectQuery = "SELECT * FROM employees";
ResultSet resultSet = statement.executeQuery(selectQuery);
System.out.println("ID\tName\tSalary");
while (resultSet.next()) {
int id = resultSet.getInt("id");
String name = resultSet.getString("name"); int salary
= resultSet.getInt("salary");
System.out.println(id + "\t" + name + "\t" + salary);
}
System.out.println();
}
// Update a record in the database
private static void updateRecord(Statement statement, int id, String newName, int newSalary)
throws SQLException {
String updateQuery = "UPDATE employees SET name = '" + newName + "', salary = " +
newSalary + " WHERE id = " + id; statement.executeUpdate(updateQuery);
System.out.println("Record updated successfully.");
}
// Delete a record from the database
private static void deleteRecord(Statement statement, int id) throws SQLException {
String deleteQuery = "DELETE FROM employees WHERE id = " + id;
statement.executeUpdate(deleteQuery);
System.out.println("Record deleted successfully.");
}
}

Explanation:
1. Connection Parameters: Replace your_database, your_username, and
your_password with your actual database name, username, and password.
2.JDBC Connection: The getConnection method is used to establish a connection to the
MySQL database.

2. CRUD Operations:
• createRecord: Inserts a new record into the database.
• readRecords: Reads and prints all records from the database.
• updateRecord: Updates a record in the database.
• deleteRecord: Deletes a record from the database.
•
3. Output: The application prints the records before and after each operation,
showing the CRUD operations in action.

Output:
When you run this Java application, you should see output similar to the following in the console:

Record created successfully. ID

Name Salary
1 John Doe 50000

Record updated successfully. ID

Name Salary
1 John Updated 55000

Record deleted successfully. ID

Name Salary

This demonstrates a simple Java standalone application for CRUD operations on a MySQL database
using JDBC. Keep in mind that for a production environment, you would want to use prepared
statements to prevent SQL injection and handle exceptions more gracefully
 EXPERIMENT- 6

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

DESCRIPTION: Let's create an XML file for a simple bookstore and validate it using both
Document Type Definition (DTD) and XML Schema Definition (XSD). Bookstore XML File
(bookstore.xml):
<?xml version="1.0" encoding=“UTF-8"?>

<!DOCTYPE bookstore SYSTEM "bookstore.dtd">

<bookstore>
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
<price>29.99</price>
</book>
<book>
<title>Web Development Basics</title>
<author>Jane Smith</author>
<price>39.95</price>
</book>
<!-- Add more book entries as needed -->
</bookstore>
DTD File (bookstore.dtd):
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
XSD File (bookstore.xsd):
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bookstore" type="bookstoreType"/>
<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>
 Explanation:

1. XML File (bookstore.xml): Represents a simple XML structure with a list of

books in a bookstore.

2. DTD File (bookstore.dtd): Describes the structure of the XML document using
Document Type Definition. Specifies that a bookstore must contain one or more book
elements. Each book must contain title, author, and price elements.

3. XSD File (bookstore.xsd): Describes the structure of the XML document using XML
Schema Definition. Defines complex types for bookstore and book. Specifies that a
bookstore must contain an unbounded sequence of book elements. Each book must
contain title (string), author (string), and price (decimal) elements.

Validation:
You can validate the XML file using a tool or programming language that supports DTD and XSD
validation. Here, I'll show you how to do it using a Java program. Java Program
for Validation:
import java.io.File;
import java.io.FileInputStream; import
java.io.IOException; import
java.io.InputStream; import
javax.xml.XMLConstants;
import javax.xml.transform.stream.StreamSource; import
javax.xml.validation.Schema;
import javax.xml.validation.SchemaFactory; import
javax.xml.validation.Validator
import org.xml.sax.SAXException; public
class XMLValidator {
public static void main(String[] args) {
validateWithDTD("bookstore.xml", "bookstore.dtd");
validateWithXSD("bookstore.xml", "bookstore.xsd");
}
private static void validateWithDTD(String xmlFile, String dtdFile) { try {
InputStream xmlStream = new FileInputStream(new File(xmlFile));
InputStream dtdStream = new FileInputStream(new File(dtdFile));
SchemaFactory schemaFactory =
SchemaFactory.newInstance(XMLConstants.XML_DTD_NS_URI); Schema
schema = schemaFactory.newSchema(new StreamSource(dtdStream));
Validator validator = schema.newValidator();
validator.validate(new StreamSource(xmlStream));
System.out.println("Validation with DTD successful.");
}
catch (SAXException | IOException e) {
System.out.println("Validation with DTD failed. Reason: " + e.getMessage());
}
}
private static void validateWithXSD(String xmlFile, String xsdFile) { try {
InputStream xmlStream = new FileInputStream(new File(xmlFile));
InputStream xsdStream = new FileInputStream(new File(xsdFile));
SchemaFactory schemaFactory =

SchemaFactory.newInstance(XMLConstants.W3C_XML_SCHEMA_NS_URI); Schema schema =

schemaFactory.newSchema(new
StreamSource(xsdStream));
Validator validator = schema.newValidator();
validator.validate(new StreamSource(xmlStream));
System.out.println("Validation with XSD successful.");
}
catch (SAXException | IOException e) {
System.out.println("Validation with XSD failed. Reason: " + e.getMessage());
}
}
}

Output:

If the XML file adheres to the specified DTD and XSD, you will see output messages like:
Validation with DTD successful.
Validation with XSD successful.

If there are issues with the XML file, the program will print error messages explaining the
validation failure.
Make sure to replace "bookstore.xml", "bookstore.dtd", and "bookstore.xsd" with the actual file
paths in your project. Also, you can use various online XML validators to validate your XML files
against DTD and XSD if you prefer a web- based approach.
 EXPERIMENT- 7

AIM: Design a controller with servlet that provides the interaction with application developed in
experiment 1: Build a responsive web application for shopping cart with registration, login, catalog
and cart pages using CSS3 features, flex and grid and the database created in experiment 5: Develop
a java stand alone application that connects with the database (Oracle / mySql) and perform the
CRUD operation on the database tables

DESCRIPTION: To design a servlet controller that interacts with the shopping cart application
(Experiment 1) and thedatabase (Experiment 5), you would typically handle HTTP requests from
the web application, process the data, and communicate with the database to perform CRUD
operations.

This is a basic servlet controller example, but in a real-world scenario, additional security measures,
error handling, and Spring MVC frameworks may be needed.

Servlet Controller (ShoppingCartController.java):

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet; import
javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest; import
javax.servlet.http.HttpServletResponse;
@WebServlet("/ShoppingCartController")
public class ShoppingCartController extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
IOException {
String action = request.getParameter("action"); if
(action != null) {
switch (action) {
case "register":
handleRegistration(request, response); break;
case "login":
handleLogin(request, response); break;
case "addToCart": handleAddToCart(request,
response); break;
// Add more cases for other actions as needed default:
response.sendError(HttpServletResponse.SC_BAD_REQUEST, "Invalid
action");
}
}
else {
response.sendError(HttpServletResponse.SC_BAD_REQUEST, "Action
parameter missing");
}
}
private void handleRegistration(HttpServletRequest request, HttpServletResponse response)
throws IOException {
// Extract registration data from request
String username = request.getParameter("username"); String
password = request.getParameter("password");
 // Perform registration logic (e.g., insert data into the database)
// Send response to the client PrintWriter out =
response.getWriter(); out.println("Registration
successful");
}
private void handleLogin(HttpServletRequest request, HttpServletResponse response) throws
IOException {
// Extract login data from request
String username = request.getParameter("username"); String
password = request.getParameter("password");
// Perform login logic (e.g., check credentials against the database)
// Send response to the client PrintWriter out =
response.getWriter(); out.println("Login
successful");
}
private void handleAddToCart(HttpServletRequest request, HttpServletResponse response)
throws IOException {
// Extract cart data from request
String productId = request.getParameter("productId");
// Additional parameters as needed
// Perform logic to add the product to the user's cart (e.g., update database)
// Send response to the client PrintWriter out =
response.getWriter(); out.println("Product
added to cart");
}
// Add more methods for other actions as needed
}

Explanation:
1. Servlet Annotation (@WebServlet("/ShoppingCartController")): This annotation maps
the servlet to the specified URL pattern.

2. doPost Method: Handles HTTP POST requests. It checks the value of the "action"
parameter in the request and calls the appropriate method based on the action.
3. Action Methods (handleRegistration, handleLogin, handleAddToCart): Each method
handles a specific action requested by the client. It extracts data from the request,
performs the necessary logic (e.g., database operations), and sends a response back to the
client.

4. Error Handling: The controller checks for invalid actions or missing parameters and
sends an error response if necessary.

Note:
This example assumes that the web application sends HTTP POST requests to the servlet with an
"action" parameter to specify the desired operation.
Ensure that your web application sends requests to the correct URL pattern, in this case,
“/ShoppingCartController".

Make sure to handle exceptions properly, and consider using a connection pool for database connections
in a production environment.

This is a basic outline, and depending on your specific application requirements, you may need to
expand and customize these methods accordingly.
Output:
 EXPERIMENT- 8

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

DESCRIPTION: Session tracking mechanisms are crucial for maintaining the state of a user's
interactions with a web application. Two common methods for session tracking are Cookies and
HTTP Sessions.

1. Cookies: Cookies are small data pieces stored on a user's device by a web browser,
used to maintain user-specific information between the client and the server.

Example: Suppose you want to track the user's language preference. Server-side (in a
web server script, e.g., in Python with Flask):
from flask import Flask, request, render_template, make_response app = Flask(
name )
@app.route('/') def
index():
# Check if the language cookie is set
user_language = request.cookies.get('user_language')
return render_template('index.html', user_language=user_language)
@app.route('/set_language/<language>')
def set_language(language):
# Set the language preference in a cookie
response = make_response(render_template('set_language.html'))
response.set_cookie('user_language', language)
return response

if name == ' main ':

app.run(debug=True)
HTML Templates (index.html and set_language.html):
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Example</title>
</head>
<body>
<h1>Welcome to the website!</h1>
{% if user_language %}
<p>Your preferred language is: {{ user_language }}</p>
{% else %}
<p>Your language preference is not set.</p>
{% endif %}
 <p><a href="/set_language/en">Set language to English</a></p>
<p><a href="/set_language/es">Set language to Spanish</a></p>
</body>
</html>
<!-- set_language.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Language</title>
</head>
<body>
<h2>Language set successfully!</h2>
<p><a href="/">Go back to the home page</a></p>
</body>
</html>

Output:
When a user visits the site for the first time, the language preference is not set. When the user clicks
on "Set language to English" or "Set language to Spanish," the preference is stored in a cookie.

On subsequent visits, the site recognizes the user's language preference based on the cookie.

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

Example: Suppose you want to track the number of visits for each user. Server-side (in
a web server script, e.g., in Python with Flask):

from flask import Flask, request, render_template, session app = Flask(

name )
app.secret_key = 'super_secret_key' # Set a secret key for session management @app.route('/')
def index():
# Increment the visit count in the session session['visit_count'] =
session.get('visit_count', 0) + 1
return render_template('index_session.html', visit_count=session['visit_count']) if name
== ' main ':
app.run(debug=True)

HTML Template (index_session.html):

<!-- index_session.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Example</title>
</head>
<body>
<h1>Welcome to the website!</h1>
<p>This is your visit number: {{ visit_count }}</p>
</body>
</html>

Output:

• Each time a user visits the site, the server increments the visit count stored in the
session.
• The visit count is unique to each user and persists across multiple requests until the
session expires.

These examples demonstrate simple use cases for cookies and HTTP sessions to maintain user-specific
information on the client and server sides, respectively.
 EXPERIMENT- 9

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

DESCRIPTION:Let's create a simple custom server using the http module in Node.js and then
explore the os, path, and events modules with examples.

Explanation: -
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.
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/
 EXPERIMENT- 10

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

process.on('exit', () => {
db.close((err) => {
if (err) {
console.error(err.message);
} else {
console.log('Disconnected from the SQLite database.');
}
});
});
}
// Function to create the 'students' table if it doesn't exist
function createStudentsTable(db) {
const createTableQuery = `
CREATE TABLE IF NOT EXISTS students (
 id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
age INTEGER,
grade TEXT
);
`;

db.run(createTableQuery, (err) => {

if (err) {
console.error(err.message);
} else {
console.log('The students table has been created or already exists.');
}
});
}
module.exports = { initializeDatabase };

when we execute both the db.js then the database will be created that is mydatabase.db

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

// Connect to SQLite database

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

// Middleware to parse request body as JSON

app.use(express.json());

app.get('/', (req, res) => {

res.send('Welcome to the Student');
});

// Get all Students

app.get('/students', (req, res) => {
db.all('SELECT * FROM students', [], (err, rows) => {
if (err) {
return console.error(err.message);
}
res.json(rows);
});
});

// Get a single student by id

app.get('/students/:id', (req, res) => {
 const id = req.params.id;
db.all('SELECT * FROM students WHERE id = ?', [id], (err, row) => {
if (err) {
return console.error(err.message);
}
res.json(row);
});
});

// Create a new student

app.post('/students', (req, res) => {
const{ name, age, grade } = req.body;
db.run('INSERT INTO students (name, age, grade) VALUES (?, ?, ?)', [name, age, grade], function
(err) {
if (err) {
return console.error(err.message);
}
res.status(201).json({ id:this.lastID });
});
});

// Update a student
app.put('/students/:id', (req, res) => {
const id = req.params.id;
const{ name, age, grade } = req.body;
db.run('UPDATE students SET name = ?, age = ?, grade = ? WHERE id = ?', [name, age, grade, id],
function (err) {
if (err) {
return console.error(err.message);
}
res.json({ updatedID:id });
});
});

// Delete a student
app.delete('/students/:id', (req, res) => {
const id = req.params.id;
db.run('DELETE FROM students WHERE id = ?', id, function (err) {
if (err) {
return console.error(err.message);
}
res.json({ deletedID:id });
});
});

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

Output :

GET:

 Open Postman.
  Set the request type to GET.
 Enter the URL: http://localhost:3000/students.

POST : Create a New Student

 Open Postman.
 Set the request type to POST.
 Enter the URL: http://localhost:3000/students.
 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: http://localhost:3000/students.
 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): http://localhost:3000/students/:id
 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): http://localhost:3000/students/:id
 Go to the "Body" tab.
 Select raw and set the body to JSON format
 EXPERIMENT- 11
AIM: For the above application create authorized end points using JWT (JSON Web Token)

DESCRIPTION: To add JWT (JSON Web Token) authentication to your Express application,
you can use the jsonwebtoken package. Below are the steps to enhance the existing application with
authorized endpoints using JWT:

1. Install the jsonwebtoken package:

npm install jsonwebtoken
2. Update the app.js file to include JWT authentication:
// app.js
const express = require('express'); const
mongoose = require('mongoose');
const bodyParser = require('body-parser'); const jwt =
require('jsonwebtoken');
const app = express(); const
PORT = 3000;
// Connect to MongoDB mongoose.connect('mongodb://localhost:27017/studentsDB', {
useNewUrlParser: true,
useUnifiedTopology: true });
mongoose.connection.on('error', console.error.bind(console, 'MongoDB connection error:'));
// Middleware app.use(bodyParser.json());
// JWT Secret Key (Keep it secure, and consider using environment variables) const JWT_SECRET
= 'your_secret_key';
// JWT Authentication Middleware
const authenticateJWT = (req, res, next) => { const
token = req.header('Authorization'); if (!token) {
return res.status(401).json({ error: 'Unauthorized' });
}
try {
const decoded = jwt.verify(token, JWT_SECRET); req.user
= decoded;
next();
} catch (error) {
res.status(403).json({ error: 'Invalid token' });
}
};
// Routes
const authRoutes = require('./routes/authRoutes');
const studentRoutes = require('./routes/studentRoutes');
// Unprotected route for authentication
app.use('/auth', authRoutes);
// Protected routes using JWT authentication middleware app.use('/students',
authenticateJWT, studentRoutes);
// Start the server app.listen(PORT, () =>
{
console.log(`Server is running on http://localhost:${PORT}`);
});

3. Create a new authRoutes.js file for authentication:

// routes/authRoutes.js
const express = require('express'); const
router = express.Router(); const jwt =
require('jsonwebtoken');
// JWT Secret Key (Keep it secure, and consider using environment variables) const JWT_SECRET
= 'your_secret_key';
// Mock user (you might replace this with actual user authentication logic) const mockUser
={
username: 'admin', password:
'admin123',
};
// Authentication endpoint (generates a JWT token)
router.post('/login', (req, res) => {
const { username, password } = req.body;
if (username === mockUser.username && password === mockUser.password) { const token =
jwt.sign({ username }, JWT_SECRET, { expiresIn: '1h' }); res.json({ token });
} else {
res.status(401).json({ error: 'Invalid credentials' });
}
});
module.exports = router;
4. Update the studentRoutes.js file to include authorization:
// routes/studentRoutes.js
const express = require('express'); const router =
express.Router();
const Student = require('../models/student');
// ...
// Create a new student (Protected) router.post('/', async
(req, res) => {
try {
const student = new Student(req.body); await
student.save(); res.status(201).send(student);
} catch (error) {
res.status(400).send(error);
}
});
// Get all students (Protected)
 router.get('/', async (req, res) => { try {
const students = await Student.find();
res.send(students);
} catch (error) {
res.status(500).send(error);
}
});
// ...
module.exports = router;
5. Test with Postman:
1. Authentication:
• Send a POST request to http://localhost:3000/auth/login with JSON body
containing the username and password. You will receive a JWT token in the
response.
2. Access Protected Endpoints:
• Copy the JWT token.
• Include the token in the Authorization header of your requests to protected
endpoints (http://localhost:3000/students).
• Ensure you're including the token with the Bearer scheme, like: Bearer
your_token_here.

This implementation adds JWT authentication to your Express application.

Make sure to handle real user authentication securely and consider using
environment variables for sensitive information like the JWT secret key. This
example provides a basic structure, and you may need to adapt it based on
your specific requirements.
 EXPERIMENT-12

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

Description: Below is a step-by-step guide to create a simple React application for a student
management system with registration, login, contact, and about pages. We'll use react-router-dom
for routing.

1. Set Up a New React App:

npx create-react-app student-management-system cd student-management- system

2. Install react-router-dom: npm install react-router-dom

3. Create Components for Each Page:

src/components/Home.js:
// src/components/Home.js import
React from 'react'; const Home =
() => { return (
<div>
<h1>Welcome to Student Management System</h1>
</div>
);
};
export default Home;
src/components/Register.js:
// src/components/Register.js import
React from 'react'; const Register =
() => { return (
<div>
<h1>Registration Page</h1>
{/* Add registration form components */}
</div>
);
};
export default Register;
src/components/Login.js:
// src/components/Login.js
import React from 'react'; const
Login = () => { return (
<div>
<h1>Login Page</h1>
{/* Add login form components */}
</div>
);
};
export default Login;
src/components/Contact.js:
// src/components/Contact.js import
React from 'react'; const Contact =
() => { return (
 <div>
<h1>Contact Page</h1>
{/* Add contact form or information */}
</div>
);
};
export default Contact;
src/components/About.js:
// src/components/About.js import
React from 'react'; const About =
() => { return (
<div>
<h1>About Page</h1>
<p>This is the about page of the Student Management System.</p>
</div>
);
};
export default About;

4. Create a src/App.js file for App Component and Routing:

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home
from './components/Home';
import Register from './components/Register'; import
Login from './components/Login'; import Contact from
'./components/Contact'; import About from
'./components/About'; const App = () => {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/register">Register</Link></li>
<li><Link to="/login">Login</Link></li>
<li><Link to="/contact">Contact</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<hr />
<Route exact path="/" component={Home} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Route path="/contact" component={Contact} />
<Route path="/about" component={About} />
</div>
</Router>
);
};
export default App;

5. Start the React App: npm start

Visit http://localhost:3000 in your browser, and you should see the navigation links for Home,
Register, Login, Contact, and About pages. Clicking on the links will navigate to the respective
pages.

This is a basic structure, and you can enhance it by adding functionality to the registration and login
forms, managing state, and connecting to a backend for data storage. Also, consider using react-router-
dom features like Switch, Redirect, and withRouter for more advanced routing scenarios.
 EXPERIMENT- 13

AIM: Create a service in react that fetches the weather information from openweathermap.org and
the display the current and historical weather information using graphical representation using
chart.js

Solution :

Step 1: Create an OpenWeatherMap Account and Generate API Key

 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.
 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 "Weather.js" and open it in your code editor.
 Add the following code to define a functional component named Weather:

Program:

import React, { useEffect, useState } from 'react';

import axios from 'axios';

const Weather = () => {

const [city, setCity] = useState('');

const [weatherData, setWeatherData] = useState(null);

const fetchData = async () => {

try {

const apiKey = 'c97c0c1086d42990e89d64d76f50bb61'; // Replace with your OpenWeatherMap

API key

const response = await axios.get(

'https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}'

);

setWeatherData(response.data);

console.log(response.data); //You can see all the weather data in console log

} catch (error) {

console.error(error);

};

useEffect(() => {

fetchData();

}, []);
 const handleInputChange = (e) => {

setCity(e.target.value);

};

const handleSubmit = (e) => {

e.preventDefault();

fetchData();

};

return (

<div>

<form onSubmit={handleSubmit}>

<input

type="text"

placeholder="Enter city name"

value={city}

onChange={handleInputChange}

/>

<button type="submit">Get Weather</button>

</form>

{weatherData ? (

<>

<h2>{weatherData.name}</h2>

<p>Temperature: {weatherData.main.temp} C</p>

<p>Description: {weatherData.weather[0].description}</p>

<p>Feels like : {weatherData.main.feels_like} C</p>

<p>Humidity : {weatherData.main.humidity}%</p>

<p>Pressure : {weatherData.main.pressure}</p>

<p>Wind Speed : {weatherData.wind.speed}m/s</p>

 </>

):(

<p>Loading weather data...</p>

)}

</div>

);

};

export default Weather;

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 "App.js" file in the "src" directory.

 Replace the existing code with the following code:
import React from'react';
import Weather from'./Weather';
const App = () => {
return (
<div>
<h1>Weather Forecast App</h1>
<Weather />
</div>
);
};
exportdefault App;
Your output should look like this:

Output :
Initial Screen
After Supply the City name
 EXPERIMENT- 14

AIM: 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:

cd todo-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 'http://localhost:3000'.

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.
import React from'react';
import TodoList from'./components/TodoList';
function App() {
return (
<div className="App">
<TodoList />
</div>
);
}
exportdefault App;

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.
import React, { useState } from 'react';
import TodoItem from './TodoItem';

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

const [text, setText] = useState('');

function addTask(text) {
const newTask = {
id: Date.now(),
text,
completed: false
};
setTasks([tasks, newTask]);
setText('');
}
function deleteTask(id) {
setTasks(tasks.filter(task => task.id !== id));
}
function toggleCompleted(id) {
setTasks(tasks.map(task => {
if (task.id === id) {
return {task, completed: !task.completed};
} else {
return task;
}
}));
}
return (
<div className="todo-list">
{tasks.map(task => (
<TodoItem
key={task.id}
task={task}
deleteTask={deleteTask}
toggleCompleted={toggleCompleted}
/>
))}
<input
value={text}
onChange={e => setText(e.target.value)}
/>
<button onClick={() => addTask(text)}>Add</button>
</div>
);
}
exportdefault TodoList;

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.
import React from'react';
function TodoItem({ task, deleteTask, toggleCompleted }) {
function handleChange() {
toggleCompleted(task.id);
}
return (
<div className="todo-item">
<input
type="checkbox"
checked={task.completed}
onChange={handleChange}
/>
<p>{task.text}</p>
<button onClick={() => deleteTask(task.id)}>
X
</button>
</div>
);
}
exportdefault TodoItem;
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 `App.css` 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:
Next,
 ADDITIONAL EXPERIMENTS

EXPERIMENT- 15

AIM: Using CSS for creating web sites

DESCRIPTION: HTML, CSS are essential components for creating a functional responsive
web

Week.html

<!DOCTYPE html>
<html>
<head>
<title>Famous Book Store</title>
<!-- link css -->
<link href="main.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="imglogo">
<img src= "images/fbs.png">
</div>
<h1>Famous Book Store</h1>
<ul class="menu">
<li><a href="Week7.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</nav>
<section class="section bg">
<div class="divleft">
<img src="images/it-wp.jpg" class="thumbnail"></img>
</div>
<div class="divright">
<h1>Web Programming</h1>
<p>
 SCRIPTING.
Web page Designing using HTML, Scripting basics- Client side and server side scripting.
Java Script-
Object, names, literals, operators and expressions- statements and features-
events - windows -
documents - frames - data types - built-in functions- Browser object model - Verifying
forms.-HTML5-
CSS3- HTML 5 canvas - Web site creation using tools.
</p>
</div>
</section>
<section class="section">
<div class="divright">
<h1>C Programming</h1>
<p>Introduction to Programming Introduction to components of a computer system: disks, primary
and secondary memory, processor, operating system, compilers, creating, compiling and executing a
program etc., Number systems Introduction to Algorithms: steps to solve logical and numerical
problems. Representation of Algorithm, Flowchart/Pseudo code with examples, Program design and
structured programming.
</p>
</div>
<div class="divleft">
<img src="images/cse-cp.jpg" class="thumbnail"></img>
</div>
</section>
<section class="section bg">
<div class="divleft">
<img src="images/cse-jp.jpg" class="thumbnail"></img>
</div>
<div class="divright">
<h1>Java Programming</h1>
<p>
Object-Oriented Thinking- A way of viewing world – Agents and Communities, messages and
methods, Responsibilities, Classes and Instances, Class Hierarchies- Inheritance, Method
binding,Overriding and Exceptions, Summary of Object-Oriented concepts. Java buzzwords, An
Overview of
Java, Data types, Variables and Arrays, operators, expressions, control statements, Introducing classes,
Methods and Classes, String handling.<br>
</p>
</div>
</section>
<footer>
<p>
Copyright © FBS -All rights are reserved
</p>
</footer>
</body>
</html>
login.html

<html>
<head>
<title> Welcome to FBS e-Book's website</title>
<!-- link css -->
<link href="main.css" rel="stylesheet">
</head>
<body >
<nav class="nav">
<div class="imglogo">
<img src= "images/fbs.png">
</div>
<h1>Famous Book Store</h1>
<ul class="menu">
<li><a href="Week7.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</nav>
<section class="sectionlr bg">
<center><br>
<h3> Login Details</h3> <br/>
<form name="f1">
<table 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" class="btn">
<input type="reset" value="RESET" class="rbtn"></td>
</tr>
</table>
</form>
</center>
</section>
<footer>
<p>
Copyright &copy; FBS -All rights are reserved
</p>
</footer>
</body>
</html>
registration.html

<html>
<head>
<title> Welcome to FBS e-Book's website</title>
<!-- link css -->
<link href="main.css" rel="stylesheet">
</head>
<body>
<nav class="nav">

<div class="imglogo">
<img src= "images/fbs.png">
</div>
<h1>Famous Book Store</h1>
<ul class="menu">
<li><a href="Week7.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</nav>

<section class="sectionlr bg">

<center><br>
<h3>Registration Form </h3>

<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" rows="4" cols="22"></textarea></td>
<tr><td></td><td><input type="submit" value="SUBMIT" hspace="10" class="btn">
<input type="reset" value="RESET" class="rbtn"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
 </td>
</tr>
</table>
</form>
</center>
</section>
<footer>
<p>
Copyright &copy; FBS -All rights are reserved
</p>
</footer>
</body>
</html>

main.css

*{
font-family: 'verdana', serif; margin:
2px;
padding: 2px;

}
body {
padding:0px 200px;
}
.nav {
display: flex;
position: sticky; top:
0;
cursor: pointer; align-
items: center;
justify-content: center;
background: #fff;
background-size: cover;
}
.nav h1 {
color:#c936ab; font-
weight:italic; font-
size:40px;
padding-left:100px;
}
.imglogo { display:
flex;
justify-content: center;
align-items: center;
}
.imglogo img {
width: 120px;
border-radius: 20px;
}
.menu {
 width: 40%;
display: flex;
justify-content: right;
}
.menu li {
list-style: none; padding:
25px 13px;
}
.menu li a {
font-size:20px;
text-decoration: bold; color:
black;
}
.menu li a:hover {
color: white;
background:#009933; padding:10px;
border-radius:20px; text-
decoration: none;
}
.section {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
max-width: 90%; margin:
auto;

}
.sectionlr { height:
400px; display:
flex;
align-items: center;
justify-content: center;
max-width: 90%; margin:
auto;

}
.bg{
background:#99cccc;
}
.thumbnail {
width: 130px;
border: 2px solid black;
border-radius: 26px;
margin-top: 19px;
}
section {
padding:30px;
}
.divleft {
 width:25%;
}
.divright { width:74%;
float:right;
}
p{
text-align:justify;
}
.btn {
padding:10px; background:#009900;
}
.rbtn {
padding:10px; background:#cc3333;
}
footer { margin:30px;
padding:30px;
color:white;
background:#0033ff;
}
footer p {
text-align:right;
}

Output:
 EXPERIMENT- 16

AIM: Write an HTML page with Javascript that takes a number from one text field in the range
0-999 and display it in other text field in words.If the number is out of range ,it shold show “out
of range” and if it is not a number,it should show “not a number” message in the result box.

Conver.html
<script language="javascript">
function convert_number_to_words(number)
{
hyphen = '-';
conjunction = ' and ';
separator = ', ';
dictionary = {
0 : 'zero',
1 : 'one',
2 : 'two',
3 : 'three',

4 : 'four',
5 : 'five',
6 : 'six',
7 : 'seven',
8 : 'eight',
9 : 'nine',
10 : 'ten',
11 : 'eleven',
12 : 'twelve',
13 : 'thirteen',
14 : 'fourteen',
15 : 'fifteen',
16 : 'sixteen',
17 : 'seventeen',
18 : 'eighteen',
19 : 'nineteen',
20 : 'twenty',
30 : 'thirty',
40 : 'fourty',
50 : 'fifty',
60 : 'sixty',
70 : 'seventy',
80 : 'eighty',
90 : 'ninety',
100 : 'hundred',

};
if (number < 0 || number > 999)
{
alert("Enter a number range between 0 and 999");
return "";
}
switch (true)
{
case (number < 21):
string = dictionary[number];
break;
case (number < 100):
tens = parseInt(number / 10) * 10;
units = number % 10;
string = dictionary[tens];
if (units) {
string += hyphen + dictionary[units];
}
break;
case (number < 1000):
hundreds = parseInt(number / 100);
remainder = number % 100;
string = dictionary[hundreds] + ' ' + dictionary[100];
if (remainder) {

string += conjunction + convert_number_to_words(remainder);

}
break;
default:
break;
}
return string;
}
a=prompt("Enter a number");
num=parseInt(a);
document.write(convert_number_to_words(num));
</script>

Output:
break;
case (number < 1000):
hundreds = parseInt(number / 100); remainder = number
% 100;
string = dictionary[hundreds] + ' ' + dictionary[100]; if
(remainder) {

string += conjunction + convert_number_to_words(remainder);

}
break; default:
break;
}
return string;
}
a=prompt("Enter a number");
num=parseInt(a);
document.write(convert_number_to_words(num));
</script>