0% found this document useful (0 votes)

74 views62 pages

Node.js Manual for Web Development

The document outlines a skill development course focused on Node.js, React.js, and Django for B.Tech students. It includes course objectives, outcomes, and a series of practical exercises aimed at building web applications, implementing server-side programming, and utilizing databases. Additionally, it provides sample HTML, CSS, and JavaScript code for developing a shopping cart web application with responsive design using Bootstrap.

Uploaded by

smilysrij12

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

74 views62 pages

Node.js Manual for Web Development

Uploaded by

smilysrij12

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

NODE JS manual

Computer Science and Engineering (Jawaharlal Nehru Technological

University, Hyderabad)
22AI305PC: SKILL DEVELOPMENT COURSE (NODE JS/
REACT JS/ DJANGO)
[Link]. II Year I Sem. LTPC

0 0 21

Prerequisites: Object Oriented Programming through Java, HTML Basics

Course Objectives:
● To implement the static web pages using HTML and do client side validation usingJavaScript.
● To design and work with databases usingJava
● To develop an end to end application using java fullstack.
● To introduce Node JS implementation for server sideprogramming.
● To experiment with single page application development usingReact.

Course Outcomes: At the end of the course, the student will be able to,

● Build a custom website with HTML, CSS, and Bootstrap and littleJavaScript.
● Demonstrate Advanced features of JavaScript and learn aboutJDBC
● Develop Server – side implementation using Java technologieslike
● Develop the server – side implementation using NodeJS.
● Design a Single Page Application usingReact.

Exercises:

1. Build a responsive web application for shopping cart with registration, login,
catalog and cart pages using CSS3 features, flex andgrid.
2. Make the above web application responsive web application using Bootstrapframework.
3. UseJavaScriptfordoingclient–sidevalidation
ofthepagesimplementedinexperiment1and experiment2.
4. Explore the features of ES6 like arrow functions, callbacks, promises,
async/await. Implement an application for reading the weather information from
[Link] and display the information in the form of a graph on the
webpage.
5. Develop a java stand alone application that connects with the database (Oracle /
mySql) and perform the CRUD operation on the databasetables.
6. Create an xml for the bookstore. Validate the same using both DTD andXSD.
7. Design a controller with servlet that provides the interaction with application
developed in experiment 1 and the database created in experiment5.
8. Maintaining the transactional history of any user is very important. Explore the
various session tracking mechanism (Cookies, HTTPSession)
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. (UsePostman)
11. For the above application create authorized end points using JWT (JSON WebToken).
12. Create a react application for the student management system having registration,
login, contact, about pages and implement routing to navigate through thesepages.
13. Create a service in react that fetches the weather information from
[Link] and the display the current and historical weather information
using graphical representation using [Link]
14. Create a TODO application in react with necessary components and deploy it intogithub.

REFERENCE BOOKS:
1. Jon Duckett, Beginning HTML, XHTML, CSS, and JavaScript, Wrox Publications,2010
2. BryanBasham,KathySierraandBertBates,HeadFirstServletsandJSP,O’ReillyMedia,2nd
Edition,2008.
3. Vasan Subramanian, Pro MERN Stack, Full Stack Web App Development with
Mongo, Express, React, and Node, 2nd Edition, APress.
1. Build a response web application for shopping cart with registration cart with
registration ,login, catalog, and cart pages using CSS3 features, flex and grid.

Registration file

<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="[Link]">Catalog </a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<main>
<section class="register-section">
<h2>Register</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</section>
</main>
<script src="[Link]"></script>
</body>
</html
Login page
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="[Link]">Catalog </a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<main>
<section class="login-section">
<h2>Login</h2>
<form>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</section>
</main>
<script src="[Link]"></script>
</body>
</html>

Index page

Stylesheet page
[Link]
/* General styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: right;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Main content styles */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
/* Catalog styles */
.catalog {
flex: 1 70%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.product-card {
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-card h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.product-card p {
margin-top: 10px;
font-size: 16px;
}
.product-card button {
display: block;
width: 100%;
padding: 8px 0;
margin-top: 10px;
color: #fff;
background-color: #333;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}

.product-card button:hover {
background-color: #555;
}
/* Cart styles */
.cart {
flex: 1 30%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.cart h2 {
margin-top: 0;
font-size: 24px;
color: #333;
}
.cart-items {
max-height: 400px;
overflow: auto;
}
.cart-summary {
margin-top: 20px;
text-align: right;
}
.cart-summary p {
font-size: 18px;
margin: 5px 0;
}
.cart-summary button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
.cart-summary button:hover {
background-color: #555;
}
/* Responsive styles */
@media (max-width: 768px) {
main {
flex-direction: column;
}
.cart {
margin-top: 20px;
}
}
/* General styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: right;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* Main content styles */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
/* Login and Register Section styles */
.login-section,
.register-section {
flex: 1 45%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
h2 {
margin-top: 0;
font-size: 24px;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
input {
padding: 10px;
margin: 8px 0;
border-radius: 3px;
border: 1px solid #ccc;
}
button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #555;
}

[Link]

// Mock data for products

const products = [
{ id: 1, name: "Product 1", price: 10.99 },
{ id: 2, name: "Product 2", price: 19.99 },
// Add more products as needed
];

// Cart to store added items

var cart = [];

// Function to display products in the catalog

function displayCatalog() {
const catalogSection = [Link]('.catalog');

// Function to add items to the cart

function addToCart(productId) {
const selectedProduct = [Link](product => [Link] === productId);

[Link](selectedProduct); // Add the selected product to the cart

updateCartDisplay();
}

// Function to update the cart display

function updateCartDisplay() {
const cartItemsContainer = [Link]('.cart-items');
[Link] = ''; // Clear the previous items in the cart

let totalAmount = 0;

[Link](item => {
const cartItem = [Link]('div');
[Link] = `<p>${[Link]} - $${[Link]}</p>`;
[Link](cartItem);

totalAmount += [Link];
});

const totalAmountDisplay = [Link]('totalAmount');

[Link] = [Link](2); // Update the total amount in the cart
}

// Function to handle the checkout process

function checkout() {
cart = []; // Clear the cart
updateCartDisplay();
alert('Thank you for your purchase!');
}
// Display the catalog when the page loads
[Link] = displayCatalog;

OUTPUT:

2. Make the above web application responsive web application using

Bootstrap frame work.

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet"
href="[Link]
</head>
<body>
<header class="bg-dark">
<nav class="navbar navbar-expand navbar-dark">
<a class="navbar-brand mr-5" href="[Link]">Shopping Cart</a>
<a href="[Link]" class="btnbtn-light mr-5">Login</a>
<a href="[Link]" class="btnbtn-light mr-5">Register</a>
</nav>
</header>
<main class="container mt-4">
<section class="catalog row">

</section>
<aside class="cart bg-light p-3">
<h2>Shopping Cart</h2>
<div class="cart-items">

</div>
<div class="cart-summary">
<p>Total: $<span id="totalAmount">0.00</span></p>
<button onclick="checkout()" class="btnbtn-dark">Checkout</button>
</div>
</aside>
</main>
<script src="[Link]"></script>
<script src="[Link]
</body>
</html>

Login [Link]
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="bg-dark">
<nav class="navbar navbar-expand navbar-dark">
<a class="navbar-brand mr-5" href="[Link]">Shopping Cart</a>
<a href="[Link]" class="btnbtn-light mr-5">Login</a>
<a href="[Link]" class="btnbtn-light mr-5">Register</a>
</nav>
</header>
<main class="container mt-4">
<section class="login-section bg-light p-3">
<h2>Login</h2>
<form>
<input type="email" placeholder="Email" required class="form-control">
<input type="password" placeholder="Password" required class="form-control">
<button type="submit" class="btnbtn-dark">Login</button>
</form>
</section>
</main>
<script src="[Link]
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet" href="[Link]">
</head>

<body>
<header class="bg-dark">
<nav class="navbar navbar-expand navbar-dark">
<a class="navbar-brand mr-5" href="[Link]">Shopping Cart</a>
<a href="[Link]" class="btnbtn-light mr-5">Login</a>
<a href="[Link]" class="btnbtn-light mr-5">Register</a>
</nav>
</header>
<main class="container mt-4">
<section class="login-section bg-light p-3">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required class="form-control">
<input type="email" placeholder="Email" required class="form-control">
<input type="password" placeholder="Password" required class="form-control">
<button type="submit" class="btnbtn-dark">Login</button>
</form>
</section>
</main>
<script src="[Link]
</body>
</html>

[Link]

// Mock data for products

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="[Link]">Catalog </a></li>
<li><a href="[Link]">Login</a></li>
<li><a href="[Link]">Register</a></li>
</ul>
</nav>
</header>
<main>
<section class="register-section">
<h2>Register</h2>
<form id="registrationForm">
<input type="text" id="username" placeholder="Username" required>
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="password" placeholder="Password" required>
<input type="text" id="fullName" placeholder="Full Name" required>
<button type="submit">Register</button>
</form>
</section>
</main>
<script>
// Mock data for products
const products = [
{ id: 1, name: "Product 1", price: 10.99 },
{ id: 2, name: "Product 2", price: 19.99 },
// Add more products as needed
];

// Cart to store added items

var cart = [];
// Function to display products in the catalog
function displayCatalog() {
const catalogSection = [Link]('.catalog');

[Link](product => {
const productCard = [Link]('div');
[Link]('product-card');
[Link] = `
<h3>${[Link]}</h3>
<p>$${[Link]}</p>
<button onclick="addToCart(${[Link]})">Add to Cart</button>
`;
[Link](productCard);
});
}
// Function to add items to the cart
function addToCart(productId) {
const selectedProduct = [Link](product => [Link] === productId);

[Link](selectedProduct); // Add the selected product to the cart

updateCartDisplay();
}
// Function to update the cart display
function updateCartDisplay() {
const cartItemsContainer = [Link]('.cart-items');
[Link] = ''; // Clear the previous items in the cart
let totalAmount = 0;

[Link](item => {
const cartItem = [Link]('div');
[Link] = `<p>${[Link]} - $${[Link]}</p>`;
[Link](cartItem);

totalAmount += [Link];
});
const totalAmountDisplay = [Link]('totalAmount');
[Link] = [Link](2); // Update the total amount in the cart
}
// Function to handle the checkout process
function checkout() {
cart = []; // Clear the cart
updateCartDisplay();
alert('Thank you for your purchase!');
}
// Display the catalog when the page loads
[Link] = displayCatalog;
const form = [Link]('registrationForm');
[Link]('submit', function (event) {
[Link]();
if (validateForm()) {
// Submit the form
[Link]();
}
});
function validateForm() {
const username = [Link]('username').value;
const email = [Link]('email').value;
const password = [Link]('password').value;
const fullName = [Link]('fullName').value;

// Validation logic
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;

if ([Link]< 4) {
alert('Username must be at least 4 characters');
return false;
}
if (![Link](email)) {
alert('Please enter a valid email address');
return false;
}
if (![Link](password)) {
alert('Password must contain at least 8 characters, including one uppercase letter, one lowercase
letter, and one number');
return false;
}

if ([Link](' ').length< 2) {
alert('Please enter your full name');
return false;
}
return true;
}
</script>
</body>
</html>

[Link]
/* General styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}

/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: right;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}
/* Main content styles */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
/* Catalog styles */
.catalog {
flex: 1 70%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.product-card {
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.product-card:hover {
transform: translateY(-5px);
}
.product-card h3 {
margin: 0;
font-size: 18px;
color: #333;
}

.product-card p {
margin-top: 10px;
font-size: 16px;
}
.product-card button {
display: block;
width: 100%;
padding: 8px 0;
margin-top: 10px;
color: #fff;
background-color: #333;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
.product-card button:hover {
background-color: #555;
}

/* Cart styles */
.cart {
flex: 1 30%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.cart h2 {
margin-top: 0;
font-size: 24px;
color: #333;
}
.cart-items {
max-height: 400px;
overflow: auto;
}
.cart-summary {
margin-top: 20px;
text-align: right;
}

.cart-summary p {
font-size: 18px;
margin: 5px 0;
}
.cart-summary button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}

.cart-summary button:hover {
background-color: #555;
}
/* Responsive styles */
@media (max-width: 768px) {
main {
flex-direction: column;
}

.cart {
margin-top: 20px;
}
}

/* General styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}

/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: right;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

/* Main content styles */

main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}

/* Login and Register Section styles */

.login-section,
.register-section {
flex: 1 45%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}

h2 {
margin-top: 0;
font-size: 24px;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
input {
padding: 10px;
margin: 8px 0;
border-radius: 3px;
border: 1px solid #ccc;
}
button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #555;
}

4. Explore the features of ES6 like arrow functions, callbacks,

promises, async/await. Implement an application for reading the
weather information from [Link] and display the
information in the form of a graph on the webpage.

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Graph</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
color: #333;
}
.weather-info {
display: flex;
flex-direction: column;
align-items: center;
}
.weather-details {
margin-bottom: 20px;
text-align: left;
}
#temperature,
#humidity {
font-weight: bold;
}
#weatherChart {
max-width: 100%;
margin-top: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>Weather Graph</h1>
<div class="weather-info">
<div class="weather-details">
<p>City: <span id="city"></span></p>
<p>Temperature: <span id="temperature"></span>°C</p>
<p>Humidity: <span id="humidity"></span>%</p>
</div>
</div>
</div>
<script>
const city = 'Amangal';
const fetchWeatherData = async () => {
const apiKey = '55182a39ac895d7589769018264e680c';
try {
const response = await fetch(`[Link]
{city}&cnt=8&appid=${apiKey}&units=metric`);
const data = await [Link]();
return [Link](item => ({ date: item.dt_txt, temperature: [Link],
humidity: [Link] }));
} catch (error) {
[Link]('Error fetching weather data:', error);
}
};
const createWeatherGraph = async () => {
const weatherData = await fetchWeatherData();
if (weatherData) {
const dates = [Link](item =>[Link]);
const temperatures = [Link](item =>[Link]);
const humidity = [Link](item =>[Link]);
[Link]('temperature').innerText = temperatures[0];
[Link]('humidity').innerText = humidity[0];
[Link]('city').innerText = city;
}
};
createWeatherGraph();
</script>
</body>
</html>
5. Develop a java stand alone application that connects with the database
(Oracle / mySql) and perform the CRUD operation on the database tables.

MySQL Code:

sql> CREATE TABLE IF NOT EXISTS student (

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

Java Code
[Link]

import [Link].*;
import [Link];

public class InsertData {

public static void main(String[] args) {
try (Connection con = [Link]("jdbc:mysql://localhost/mydb",
"root", "");
Statements = [Link]()) {

Scanner sc = new Scanner([Link]);

[Link]("Inserting Data into student table:");
[Link](" ");

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

int sid = [Link]();
[Link]("Enter student name: ");
String sname = [Link]();
[Link]("Enter student address: ");
String saddr = [Link]();

String insertQuery = "INSERT INTO student VALUES(" + sid + ",'" + sname + "','" +
saddr + "')";
[Link](insertQuery);

[Link]("Data inserted successfully into student table");

} catch (SQLException err) {

[Link]("ERROR: " + err);
}
}
}

Output:
Inserting Data into student table:

Enter student id: 101

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

[Link]

import [Link].*;
import [Link];

public class UpdateData {

public static void main(String[] args) {
try (Connection con = [Link]("jdbc:mysql://localhost/mydb",
"root", "");
Statements = [Link]()) {
Scanner sc = new Scanner([Link]);
[Link]("Update Data in student table:");
[Link](" ");

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

int sid = [Link]();
[Link]("Enter student name: ");
String sname = [Link]();
[Link]("Enter student address: ");
String saddr = [Link]();

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

saddr + "' WHERE s_id=" + sid;
[Link](updateQuery);

[Link]("Data updated successfully");

} catch (SQLException err) {

[Link]("ERROR: " + err);
}
}
}

Output :
Update Data in student table:

Enter student id: 101

Enter student name: Jane Doe
Enter student address: 456 Broad Street
Data updated successfully

[Link]

import [Link].*;
import [Link];

public class DeleteData {

public static void main(String[] args) {
try (Connection con = [Link]("jdbc:mysql://localhost/mydb",
"root", "");
Statements = [Link]()) {

Scanner sc = new Scanner([Link]);

[Link]("Delete Data from student table:");
[Link](" ");
[Link]("Enter student id: ");
int sid = [Link]();

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

[Link](deleteQuery);

[Link]("Data deleted successfully");

} catch (SQLException err) {

[Link]("ERROR: " + err);
}
}
}

Output :
Delete Data from student table:

Enter student id: 101

Data deleted successfully

[Link]

import [Link].*;

public class DisplayData {

public static void main(String[] args) {
try (Connection con = [Link]("jdbc:mysql://localhost/mydb",
"root", "");
Statement s = [Link]()) {

ResultSet rs = [Link]("SELECT * FROM student");

if (rs != null) {
[Link]("SID \t STU_NAME \t ADDRESS");
[Link](" ");

while ([Link]()) {
[Link]([Link]("s_id") + " \t " + [Link]("s_name") + " \t " +
[Link]("s_address"));
[Link](" ");
}
}

} catch (SQLException err) {

[Link]("ERROR: " + err);
}
}
}

Output :
SID STU_NAME ADDRESS

102 Alice Smith 789 Oak Avenue

103 Bob Johnson 567 Pine Road

6. Create an xml for the bookstore. Validate the same using both DTD
andXSD.
XML data to validate:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE bookstore[
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<bookstore>
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
<price>29.99</price>
</book>
<book>
<title>Programming with XML</title>
<author>Jane Smith</author>
<price>39.99</price>
</book>
</bookstore>
XML schema (XSD) data:

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

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

<xs:complexType name="bookstoreType">
<xs:sequence>
<xs:element name="book" type="bookType" minOccurs="0" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="bookType">
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:schema>
7. Design a controller with servlet that provides the interaction with application developed
inexperiment 1 and the database created in experiment 5.

Mysql database
Procedure:
[Link]:
<html>
<head>
<title> validation </title>
</head>
<body bgcolor="magenta">
<form action="[Link]" method="post">
<h1 align="center">REGISTRATION FORM</h1>
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="t1" min length="6"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="t2"></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="text" name="t3"></td>
</tr>
<tr>
<td>E-mail id:</td>
<td><input type="text" name="t4"></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
<td><input type="reset" value="cancel"></td>
</tr>
</table>
</form>
</body>
</html>
[Link]:
<%@ page language="java" import="[Link].*,[Link].*" %>
<html>
<form >
<%
String v1,v2,v3,v4,str;
v1=[Link]("t1");
v2=[Link]("t2");
v3=[Link]("t3");
v4=[Link]("t4");
try{
[Link]("[Link]");
Connection cn=[Link]("jdbc:odbc:oradsn","system","ravindra");
Statement st=[Link]();
[Link]("insert into register values('"+v1+"','"+v2+"',"+v3+",'"+v4+"')");
if(cn!=null)
{
%>
</form>
Registration Successful
<%
}
else
{
[Link]("Registration failed");
}
[Link]();
[Link]();
}catch(Exception e) { [Link](" Registration failed");
%>
<P><a href = "[Link]" target =f2 > <B> Back<B> </a>
<%
}
%>
</body></html>
Execution:
Create a table with name register with name (varchar2 (10)), password (varchar2 (10)),
Phone(number (10)) ,Email-ID (varchar2(10)).
Create the Data source name.
Start->settings->control panel->Administrative Tools->Data Sources.
Under SystemDSN add Microsoft ODBC for Oracle.
Set Data Source name to oradsn.

Output:
8. Maintaining the transactional history of any user is very important.
Explore the various session tracking mechanism (Cookies,
HTTPSession)
const express = require('express');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const app = express();
// Cookie Parser middleware for handling cookies
[Link](cookieParser());
// Session middleware for managing server-side sessions
[Link](session({
secret: 'mysecret', // Change this to a secure value in production
resave: false,
saveUninitialized: true,
}));
[Link]('/set-cookie', (req, res) => {
// Setting a cookie
[Link]('userId', '12345', { maxAge: 900000, httpOnly: true });
[Link]('Cookie set successfully!');
});
[Link]('/get-cookie', (req, res) => {
// Getting the value of the cookie
const userId = [Link];
[Link](User ID from cookie: ${userId});
});
[Link]('/set-session', (req, res) => {
// Setting session data
[Link] = 'JohnDoe';
[Link]('Session set successfully!');
});
[Link]('/get-session', (req, res) => {
// Getting session data
const username = [Link] || 'No username set';
[Link](Username from session: ${username});
});
[Link](3001, () => {
[Link]('Server running on port 3001');
});
9. Create a custom server using http module and explore the other
modules of Node JS like OS, path,event.

const http = require('http');

const os = require('os');

const path = require('path');

const server = [Link]((req, res) => {

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

[Link](200, { 'Content-Type': 'text/html' });

// OS module information

const osInfo = `

<h1>OS Information</h1>

<p>Platform: ${[Link]()}</p>

<p>Architecture: ${[Link]()}</p>

<p>CPU Info: ${[Link]([Link]())}</p>

<p>Total Memory: ${[Link]()}</p>

<p>Free Memory: ${[Link]()}</p>

// Path module information

const filePath = [Link]( dirname, 'files', '[Link]');

const parsedPath = [Link](filePath);

const pathInfo = `

<h1>Path Information</h1>

<p>File Path: ${filePath}</p>

<p>Parsed Path: ${[Link](parsedPath)}</p>

// Combining OS and Path info

const combinedInfo = osInfo + pathInfo;

// Sending the HTML response

[Link](`

<!DOCTYPE html>

<html>

<head>

<title>System Details</title>

</head>

<body>

${combinedInfo}

</body>

</html>

`);

} else {

[Link](404, { 'Content-Type': 'text/plain' });

[Link]('Page Not Found');

});

const PORT = 3000;

[Link](PORT, () => {

const app = express();

const PORT = 3000;

[Link]([Link]());

// Replace this with your REST API URL

constapiUrl = '[Link]

// GET all students

[Link]('/students', async (req, res) => {
try {
const response = await [Link](apiUrl);
[Link]([Link]);
} catch (error) {
[Link](500).json({ error: [Link] });
}
});

// GET a single student by ID

[Link]('/students/:id', async (req, res) => {
try {
const{ id } = [Link];
const response = await [Link](`${apiUrl}/${id}`);
[Link]([Link]);
} catch (error) {
[Link](500).json({ error: [Link] });
}
});

// CREATE a new student

[Link]('/students', async (req, res) => {
try {
const response = await [Link](apiUrl, [Link]);
[Link]([Link]);
} catch (error) {
[Link](500).json({ error: [Link] });
}
});

// UPDATE a student by ID
[Link]('/students/:id', async (req, res) => {
try {
const{ id } = [Link];
const response = await [Link](`${apiUrl}/${id}`, [Link]);
[Link]([Link]);
} catch (error) {
[Link](500).json({ error: [Link] });
}
});

// DELETE a student by ID
[Link]('/students/:id', async (req, res) => {
try {
const{ id } = [Link];
const response = await [Link](`${apiUrl}/${id}`);
[Link]([Link]);
} catch (error) {
[Link](500).json({ error: [Link] });
}
});

[Link](PORT, () => {
[Link](`Server is running on port ${PORT}`);
});
//CODE ENDS//

node [Link]
---Enter---

INSTALL TALEND APT TESTER

[Link]

-- Create Student --
{ "name": "NewStudent", "age": Number }
11. For the above application create authorized end points using JWT (JSON
WebToken).
// npmi express body-parser jsonwebtoken
// gedit [Link]
// node [Link]
const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');

const app = express();

[Link]([Link]());
[Link]([Link]({ extended: true }));

const secretKey = 'your_secret_key'; // Replace with your own secret key

// Sample student data (temporary)

let students = [
{ id: 1, name: 'Alice', age: 20, grade: 'A' },
{ id: 2, name: 'Bob', age: 21, grade: 'B' }
];

// JWT Authorization Middleware

function authenticateToken(req, res, next) {
const token = [Link]['authorization'];

if (token === undefined) {

return [Link](401); // Unauthorized
}

[Link](token, secretKey, (err, user) => {

if (err) {
return [Link](403); // Forbidden
}
[Link] = user;
next();
});
}

// Your existing CRUD endpoints

// GET all students (public endpoint)
[Link]('/students', (req, res) => {
[Link](students);
});

// Protected endpoint example - GET all students (requires authorization)

[Link]('/students/protected', authenticateToken, (req, res) => {
// This endpoint requires a valid JWT token to access
[Link](students);
});

// POST a new student (public endpoint)

[Link]('/students', (req, res) => {
const newStudent = [Link];
[Link](newStudent);
[Link](201).send('Student added');
});

// PUT update a student's information (public endpoint)

[Link]('/students/:id', (req, res) => {
const id = [Link];
const updatedStudent = [Link];
const index = [Link](student => [Link] === parseInt(id));
if (index === -1) {
[Link](404).send('Student not found');
return;
}
students[index] = updatedStudent;
[Link]('Student updated');
});

// DELETE a student (public endpoint)

[Link]('/students/:id', (req, res) => {
const id = [Link];
students = [Link](student => [Link] !== parseInt(id));
[Link]('Student deleted');
});

// Login endpoint to generate JWT token (example - use your own logic for
authentication)[Link]('/login', (req, res) => { // In a real application, verify the
credentials const username = [Link]; const user = { username }; //
Example user const accessToken = [Link](user, secretKey);
[Link]({ accessToken });});const PORT = 3000; // You can use any available
[Link](PORT, () => { [Link]();});
Server is running on port ${PORT}
12. Create a react application for the student management system
having registration, login, contact, about pages and implement routing
to navigate through thesepages.
npm create vite@latest
./
React
JavaScript
npmi
npmi react-router-dom
delete [Link]

[Link]

import React from 'react'

import ReactDOM from 'react-dom/client'
import App from './[Link]'
import './[Link]'
import {
BrowserRouter
} from "react-router-dom"
[Link]([Link]('root')).render(
<[Link]>
< BrowserRouter>
<App />
</BrowserRouter>
</[Link]>,
)

[Link]

import React from 'react'

import {Link, Routes, Route } from 'react-router-dom'
import './[Link]'
const Navbar = () => {
return (
<divclassName='nav'>
<LinkclassName='nav-item' to='/'>Home</Link>
<LinkclassName='nav-item'
to='/login'>Login</Link>
<LinkclassName='nav-item'
to='/register'>Register</Link>
<LinkclassName='nav-item'
to='/contact'>Contact</Link>
<LinkclassName='nav-item'
to='/about'>About</Link>
</div>
)
}

const Home = () => {

return (
<divclassName="center-div">
<h1>Home</h1>
</div>
)
}
const About = () => {
return (
<divclassName="center-div">
<h1>About us </h1>
</div>
)
}
const Contact = () => {
return (
<divclassName="center-div">
<h1>Contact us</h1>
<input type="text" placeholder="Enter your name" />
<input type="email" placeholder="Enter your email" />
<input type="text" placeholder="Enter your message" />
<button>Submit</button>
</div>
)
}
const Login = () => {
return (
<divclassName="center-div">
<h1>Login</h1>
<input type="email" placeholder="Enter your email" />
<input type="password" placeholder="Enter your
password" />
<button>Login</button>
</div>
)
}
const Register = () => {
return (
<divclassName="center-div">
<h1>Register</h1>
<input type="email" placeholder="Enter your email" />
<input type="password" placeholder="Enter your
password" />
<input type="text" placeholder="Enter your name" />
<button>Register</button>
</div>
)
}
const App = () => {
return (
<div>
<Navbar/>
<Routes>

<Route path="/" element={<Home />} />

<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/contact" element={<Contact />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
)
}

export default App

[Link]
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.center-div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input{
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 300px;
font-size: 16px;
outline: none;
}
button{
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #f5f5f5;
font-size: 16px;
cursor: pointer;
}

//start
npm run dev
13. Create a service in react that fetches the weather information from
[Link] and the display the current and historical
weather information using graphical representation using [Link]
npm create vite@latest
.
React
javaScript
npmi
npm install axios [Link]
import React, { useState } from 'react';
import Chart from '[Link]/auto'; // Import [Link]
import './[Link]'; // Assuming you have a CSS file for styles
const WeatherApp = () => {
const [city, setCity] = useState('');
const [weatherData, setWeatherData] = useState(null);
const [error, setError] = useState(false);
const apiKey = "55182a39ac895d7589769018264e680c";
const apiUrl =
"[Link]
const checkWeather = async (city) => {
try {
const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
if ([Link] === 404) {
setError(true);
setWeatherData(null);
} else {
const data = await [Link]();
setWeatherData(data);
setError(false);
drawGraph(data); // Draw the graph once data is fetched
}
} catch (error) {
[Link]('Error fetching data:', error);
}
};
const handleSearch = () => {
checkWeather(city);
};
const drawGraph = (data) => {
const ctx =
[Link]('weatherGraph').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Temperature', 'Humidity', 'Wind Speed'],
datasets: [{

label: 'Weather Information',

data: [[Link], [Link], [Link]],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1,
}],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
});
};
return (
<divclassName="card">
<divclassName="search">
<input
type="text"
placeholder="Enter city name"
spellCheck="false"
value={city}
onChange={(e) => setCity([Link])}
/>
<buttononClick={handleSearch}>
Search
</button>
</div>
{error && <divclassName="error"><p>Invalid City
Name</p></div>}
<divclassName="weather">
<canvas id="weatherGraph" width="400"
height="400"></canvas>
</div>
</div>
);
};
export default WeatherApp;
14. Create a TODO application in react with necessary components and deploy
it intogithub.
npm create vite@latest
.
React
javaScript
npmi
import React, { useState } from 'react';
const styles = {
appContainer: {
maxWidth: '500px',
margin: '0 auto',
fontFamily: 'Arial, sans-serif',
},
inputContainer: {
display: 'flex',
marginBottom: '15px',
},
inputText: {
padding: '8px',
marginRight: '10px',
flexGrow: '1',
},
button: {
padding: '8px 12px',
cursor: 'pointer',
},
taskList: {
listStyle: 'none',
padding: '0',
},
taskListItem: {
marginBottom: '5px',
display: 'flex',
alignItems: 'center',
},
completed: {
textDecoration: 'line-through',
},
deleteButton: {
marginLeft: '5px',
backgroundColor: '#ff6961',
color: '#fff',
border: 'none',
borderRadius: '4px',
padding: '6px 10px',
cursor: 'pointer',
},
};

const App = () => {

const [tasks, setTasks] = useState([]);
const [inputValue, setInputValue] = useState('');
const [editIndex, setEditIndex] = useState(-1);
const [completedTasks, setCompletedTasks] = useState(new Set());
consthandleInputChange = (e) => {
setInputValue([Link]);
};
constaddTask = () => {
if ([Link]() !== '') {
if (editIndex !== -1) {
constupdatedTasks = [...tasks];
updatedTasks[editIndex] = inputValue;
setTasks(updatedTasks);
setEditIndex(-1);
} else {
setTasks([...tasks, inputValue]);
}
setInputValue('');
}
};
constcompleteTask = (index) => {
constupdatedCompletedTasks = new Set(completedTasks);
if ([Link](index)) {
[Link](index);
} else {
[Link](index);
}
setCompletedTasks(updatedCompletedTasks);
};
constdeleteTask = (index) => {
constupdatedTasks = [...tasks];
[Link](index, 1);
setTasks(updatedTasks);
};
consteditTask = (index) => {
setInputValue(tasks[index]);
setEditIndex(index);
};
return (
<div style={[Link]}>
<h1>TODO List</h1>
<div style={[Link]}>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Enter a task"

style={[Link]}
/>
<buttononClick={addTask} style={[Link]}>
{editIndex !== -1 ? 'Update' : 'Add Task'}
</button>
</div>
<ul style={[Link]}>
{[Link]((task, index) => (
<li key={index} style={{ ...[Link],
...([Link](index) && [Link]) }}>
<spanonClick={() => completeTask(index)} style={{ flexGrow:
'1', cursor: 'pointer' }}>
{task}
</span>
<buttononClick={() => editTask(index)}
style={[Link]}>
Edit
</button>
<buttononClick={() => completeTask(index)}
style={[Link]}>
{[Link](index) ?'Mark Incomplete' : 'Mark
Complete'}
</button>
<buttononClick={() => deleteTask(index)}
style={[Link]}>
Delete
</button>
</li>
))}
</ul>
</div>
);
};
export default App;

Node.js Lab Manual and Code Examples
No ratings yet
Node.js Lab Manual and Code Examples
38 pages
Node.js Lab Manual for Students
No ratings yet
Node.js Lab Manual for Students
121 pages
Node.js PDF Form Filling Course
No ratings yet
Node.js PDF Form Filling Course
58 pages
Django Lab Manual for B.Tech CSE R22
50% (2)
Django Lab Manual for B.Tech CSE R22
40 pages
Responsive Shopping Cart Web App Guide
No ratings yet
Responsive Shopping Cart Web App Guide
37 pages
E-Commerce Lab Manual: Node, React, Django
No ratings yet
E-Commerce Lab Manual: Node, React, Django
139 pages
Responsive Shopping Cart with Django
No ratings yet
Responsive Shopping Cart with Django
38 pages
Troubleshooting "chart.js/auto" Error
No ratings yet
Troubleshooting "chart.js/auto" Error
66 pages
Node JS React JS Django Shopping Cart
No ratings yet
Node JS React JS Django Shopping Cart
38 pages
SDC Manual: Shopping Cart App Guide
No ratings yet
SDC Manual: Shopping Cart App Guide
31 pages
Urban Cart: Full-Stack E-Commerce App
No ratings yet
Urban Cart: Full-Stack E-Commerce App
10 pages
Mobile App Development E-commerce Project
No ratings yet
Mobile App Development E-commerce Project
6 pages
Responsive Shopping Cart App Guide
No ratings yet
Responsive Shopping Cart App Guide
22 pages
Responsive Shopping Cart Web App
No ratings yet
Responsive Shopping Cart Web App
8 pages
Responsive Shopping Cart App Guide
No ratings yet
Responsive Shopping Cart App Guide
41 pages
Responsive Shopping Cart App Guide
No ratings yet
Responsive Shopping Cart App Guide
32 pages
Bootstrap Responsive Shopping Cart Guide
No ratings yet
Bootstrap Responsive Shopping Cart Guide
72 pages
E-Commerce App Using MERN Stack
No ratings yet
E-Commerce App Using MERN Stack
5 pages
Full-Stack E-Commerce Platform Design
No ratings yet
Full-Stack E-Commerce Platform Design
12 pages
MongoDB Schema for E-Commerce App
No ratings yet
MongoDB Schema for E-Commerce App
5 pages
Node JS, React JS, Django Lab Syllabus
No ratings yet
Node JS, React JS, Django Lab Syllabus
112 pages
Node.js, React, Django Skill Course
No ratings yet
Node.js, React, Django Skill Course
57 pages
Myntra Clone Webpage Development Guide
No ratings yet
Myntra Clone Webpage Development Guide
12 pages
Responsive Shopping Cart Web App
No ratings yet
Responsive Shopping Cart Web App
7 pages
Node.js Shopping Cart Lab Manual
No ratings yet
Node.js Shopping Cart Lab Manual
47 pages
MERN E-Commerce App Development Guide
No ratings yet
MERN E-Commerce App Development Guide
4 pages
E-Commerce Cart System Documentation
No ratings yet
E-Commerce Cart System Documentation
14 pages
Web App Course: Node.js & React.js
No ratings yet
Web App Course: Node.js & React.js
17 pages
E-Commerce Website Code Structure Guide
No ratings yet
E-Commerce Website Code Structure Guide
16 pages
Web Development with React: A Guide
No ratings yet
Web Development with React: A Guide
14 pages
React Online Store App Setup Guide
No ratings yet
React Online Store App Setup Guide
9 pages
G-Mart MERN Stack Grocery App Report
No ratings yet
G-Mart MERN Stack Grocery App Report
6 pages
Build E-commerce Site with React 2025
No ratings yet
Build E-commerce Site with React 2025
13 pages
Online Store & Restaurant Website Tasks
No ratings yet
Online Store & Restaurant Website Tasks
2 pages
Frontend Setup for EICommerce Project
No ratings yet
Frontend Setup for EICommerce Project
5 pages
Full Stack Lab Login Validation
No ratings yet
Full Stack Lab Login Validation
15 pages
React Online Store App with Routing
No ratings yet
React Online Store App with Routing
4 pages
E-Shop Full-Stack E-Commerce Report
No ratings yet
E-Shop Full-Stack E-Commerce Report
7 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
25 pages
React E-Commerce App Development Guide
No ratings yet
React E-Commerce App Development Guide
95 pages
MongoDB Schema Design for E-Commerce
No ratings yet
MongoDB Schema Design for E-Commerce
3 pages
Wool E-commerce Website Project Overview
No ratings yet
Wool E-commerce Website Project Overview
15 pages
Summer Internship Web Development Report
No ratings yet
Summer Internship Web Development Report
17 pages
E-Commerce Website Development Assignment
No ratings yet
E-Commerce Website Development Assignment
3 pages
E-Commerce Web App Development Overview
No ratings yet
E-Commerce Web App Development Overview
2 pages
Frontend E-Commerce Website Guide
No ratings yet
Frontend E-Commerce Website Guide
8 pages
JHipster Online Shopping App Guide
No ratings yet
JHipster Online Shopping App Guide
14 pages
MERN Stack E-commerce Development Guide
No ratings yet
MERN Stack E-commerce Development Guide
22 pages
E-Commerce Platform Case Study: React JS
No ratings yet
E-Commerce Platform Case Study: React JS
15 pages
Student E-commerce App Using MERN Stack
No ratings yet
Student E-commerce App Using MERN Stack
34 pages
Online Store Development Overview
No ratings yet
Online Store Development Overview
25 pages
Responsive Navigation Bar Guide
No ratings yet
Responsive Navigation Bar Guide
2 pages
E-Shopping Cart Micro-Project Report
No ratings yet
E-Shopping Cart Micro-Project Report
12 pages
E-commerce User Login and Cart Flow
No ratings yet
E-commerce User Login and Cart Flow
4 pages
React App with Greeting and Cart Features
No ratings yet
React App with Greeting and Cart Features
17 pages
E-Commerce Website Project Documentation
No ratings yet
E-Commerce Website Project Documentation
23 pages
Zephyr Technologies Web Project Report
No ratings yet
Zephyr Technologies Web Project Report
24 pages
Full Stack Web Development Internship Report
No ratings yet
Full Stack Web Development Internship Report
23 pages
Webpage Design with HTML, CSS, JS, Bootstrap
No ratings yet
Webpage Design with HTML, CSS, JS, Bootstrap
7 pages
E-Commerce Product Page Project Overview
No ratings yet
E-Commerce Product Page Project Overview
5 pages
Full Stack Web Developer Profile
No ratings yet
Full Stack Web Developer Profile
3 pages
Sync Together: Real-Time Media App
No ratings yet
Sync Together: Real-Time Media App
9 pages
Sandeep Kumar: Web Developer Portfolio
No ratings yet
Sandeep Kumar: Web Developer Portfolio
1 page
App Development Record Notebook
No ratings yet
App Development Record Notebook
49 pages
Comprehensive Guide to React JS Basics
No ratings yet
Comprehensive Guide to React JS Basics
3 pages
Full Stack UI Technologies Overview
No ratings yet
Full Stack UI Technologies Overview
4 pages
React.js Cheat Sheet for Beginners
No ratings yet
React.js Cheat Sheet for Beginners
14 pages
Comprehensive Guide to Web Development
No ratings yet
Comprehensive Guide to Web Development
13 pages
Digital Marketing Internship Overview
No ratings yet
Digital Marketing Internship Overview
20 pages
AMAN: No-Code Web Page Maker Project
No ratings yet
AMAN: No-Code Web Page Maker Project
77 pages
Pushpanjali Nema's Tech Portfolio
No ratings yet
Pushpanjali Nema's Tech Portfolio
1 page
Essential React Concepts Explained
No ratings yet
Essential React Concepts Explained
8 pages
Junior Full-Stack Developer Resume
No ratings yet
Junior Full-Stack Developer Resume
2 pages
Full-Stack Developer Resume: Srinath Madishetty
No ratings yet
Full-Stack Developer Resume: Srinath Madishetty
3 pages
MERN Stack Developer Roadmap 2024
No ratings yet
MERN Stack Developer Roadmap 2024
20 pages
Frontend Intern Application - Jayant Bisht
No ratings yet
Frontend Intern Application - Jayant Bisht
1 page
Frontend Developer Interview Questions
No ratings yet
Frontend Developer Interview Questions
2 pages
ServiceNow Developer Resume of Nitin Kumawat
No ratings yet
ServiceNow Developer Resume of Nitin Kumawat
1 page
3-Month Frontend Development Course
No ratings yet
3-Month Frontend Development Course
3 pages
MediBuddy Interview Process Overview
No ratings yet
MediBuddy Interview Process Overview
4 pages
Arnab Sen: Software Engineer Profile
No ratings yet
Arnab Sen: Software Engineer Profile
2 pages
Build Your Own NotebookLM Clone
No ratings yet
Build Your Own NotebookLM Clone
5 pages
JavaScript for...of Loop Explained
No ratings yet
JavaScript for...of Loop Explained
43 pages
Understanding JSX, Components, and State in React
No ratings yet
Understanding JSX, Components, and State in React
4 pages
Nitish Biswas: Tech Skills & Projects
No ratings yet
Nitish Biswas: Tech Skills & Projects
1 page
Skills-First Learning for Career Success
No ratings yet
Skills-First Learning for Career Success
35 pages
Quick Start with React-PDF Renderer
No ratings yet
Quick Start with React-PDF Renderer
2 pages
Rajesh Royal: Software Engineer Profile
No ratings yet
Rajesh Royal: Software Engineer Profile
2 pages
ReactJS MCQ Certification Exam Guide
No ratings yet
ReactJS MCQ Certification Exam Guide
10 pages
Full Stack Developer Resume - Muhammad Faisal
No ratings yet
Full Stack Developer Resume - Muhammad Faisal
1 page

Node.js Manual for Web Development

Uploaded by

Node.js Manual for Web Development

Uploaded by

NODE JS manual

Computer Science and Engineering (Jawaharlal Nehru Technological

Prerequisites: Object Oriented Programming through Java, HTML Basics

// Mock data for products

// Cart to store added items

// Function to display products in the catalog

// Function to add items to the cart

[Link](selectedProduct); // Add the selected product to the cart

// Function to update the cart display

const totalAmountDisplay = [Link]('totalAmount');

// Function to handle the checkout process

2. Make the above web application responsive web application using

// Mock data for products

// Cart to store added items

[Link](selectedProduct); // Add the selected product to the cart

/* Main content styles */

/* Login and Register Section styles */

4. Explore the features of ES6 like arrow functions, callbacks,

sql> CREATE TABLE IF NOT EXISTS student (

public class InsertData {

Scanner sc = new Scanner([Link]);

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

[Link]("Data inserted successfully into student table");

} catch (SQLException err) {

Enter student id: 101

public class UpdateData {

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

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

[Link]("Data updated successfully");

} catch (SQLException err) {

Enter student id: 101

public class DeleteData {

Scanner sc = new Scanner([Link]);

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

[Link]("Data deleted successfully");

} catch (SQLException err) {

Enter student id: 101

public class DisplayData {

ResultSet rs = [Link]("SELECT * FROM student");

} catch (SQLException err) {

102 Alice Smith 789 Oak Avenue

103 Bob Johnson 567 Pine Road

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

const http = require('http');

const path = require('path');

const server = [Link]((req, res) => {

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

[Link](200, { 'Content-Type': 'text/html' });

<p>CPU Info: ${[Link]([Link]())}</p>

<p>Total Memory: ${[Link]()}</p>

<p>Free Memory: ${[Link]()}</p>

// Path module information

const filePath = [Link]( dirname, 'files', '[Link]');

const parsedPath = [Link](filePath);

<p>File Path: ${filePath}</p>

// Combining OS and Path info

const combinedInfo = osInfo + pathInfo;

// Sending the HTML response

[Link](404, { 'Content-Type': 'text/plain' });

[Link]('Page Not Found');

const PORT = 3000;

[Link](Server running on port ${PORT});

const app = express();

// Replace this with your REST API URL

// GET all students

// GET a single student by ID

// CREATE a new student

INSTALL TALEND APT TESTER

const app = express();

const secretKey = 'your_secret_key'; // Replace with your own secret key

// Sample student data (temporary)

// JWT Authorization Middleware

if (token === undefined) {

[Link](token, secretKey, (err, user) => {

// Your existing CRUD endpoints

// Protected endpoint example - GET all students (requires authorization)

import React from 'react'

import React from 'react'

const Home = () => {

<Route path="/" element={<Home />} />

label: 'Weather Information',

const App = () => {