Node Js - React Js - Django Lab

MALLA REDDY ENGINEERING COLLEGE (Autonomous)
Maisammaguda, Dhulapally (post & via Kompally), Secunderabad-500 100.
Department of Computer Science and Engineering

NODE JS/ REACT JS/ DJANGO LAB
SUBJECT CODE: C0522
B .Tech -III Semester (MR-22)
ACADEMIC YEAR: 2023-24

2023-24
MALLA REDDY ENGINEERING B.Tech
Onwards
COLLEGE
(MR-22) III Sem
(Autonomous)
Code: C0514 L T P
Credits: 0 NODE JS/ REACT JS/ DJANGO LAB - - 2
Prerequisites: Object Oriented Programming through Java, HTML Basics
Software Requirement: JDK, Tomcat Server, PHP and WAMP Server

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
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 andexperiment 2.
4. Explore the features of ES6 like arrow functions, callbacks, promises, async/await.
Implementan 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
sessiontracking 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
14
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.
REFERENCE BOOKS
1. Jon Duckett, Beginning HTML, XHTML, CSS, and JavaScript, Wrox Publications, 2010
2. Bryan Basham, Kathy Sierra and Bert Bates, Head First Servlets and JSP, O‟Reilly
Media,2ndEdition, 2008.
3. Vasan Subramanian, Pro MERN Stack, Full Stack Web App Development with
Mongo,Express, React, and Node, 2nd Edition, A Pres
Course Outcomes:
At the end of the course, students 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
CO- PO Mapping
(3/2/1 indicates strength of correlation) 3-Strong, 2-Medium, 1-Weak
Program Outcomes (POs) PSOs
Co
s PO PO2 PO PO PO PO PO PO PO PO PO PSO PSO PSO
1 3 4 5 6 7 8 9 10 12 1 2 3
CO1 2 3 1 2 1
CO2 2 2 2 2
CO3 1 2 1 1
1. Build a responsive web application for shopping cart with registration, login,
catalog and cart pages using CSS3 features, flex and grid.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopify</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/responsive.css">
<link href="https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/1ba2cf90f3.js"
crossorigin="anonymous"></script>
<link rel="shortcut icon" href="./assests/Citycons_bag-512.webp" type="image/x-icon">
</head>
<body>
<section>
<nav>
<span><a href="index.html"><i class="fas fa-shopping-bag"></i>shopping

cart</a></span>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="signup.html">signup</a></li>
<li><a href="login.html">login</a></li>
<li><span onclick="openBucket()"><i class="fas fa-shopping-cart"></i></span>

<span class="items-count"></span>
</li>
</ul>
<span onclick="openBucket()" class="cart-icon"><i class="fas fa-shopping-

cart"></i></span>
</nav>
<main class="fruits-side">
<span>Buy Fruits</span>
<button><a href="fruit-aisle.html">Shop Now <i class="fas
fa-caret-right"></i></a></button>
</main>
<div class="cart">
<header> <span><a href="index.html"><i class="fas fa-shopping-bag"></i>

Shopify</a></span> <span
class="exit"><i class="fas fa-times"></i></span> </header>
<main>
<ol>
<li>Item-Name</li>
<li>Qty</li>
<li>Total</li>
</ol>
<section>
<ul id="ul"></ul>
</section>
</main>
</div>
</section>
<script>
const top_items_count = document.querySelector('.items-count'),

bottom_items_count = document.querySelector('.bottom-items-count'),
exit = document.querySelector('.exit'),
bucket = document.querySelector('.cart').style;
top_items_count.innerHTML = 0;
bottom_items_count.innerHTML = 0;
function openBucket() {
bucket.visibility = "visible";
bucket.opacity = "1";
bucket.zIndex = "9";
bucket.transition = "all 0.5s";
}
exit.addEventListener('click', () => {
bucket.visibility = "hidden";
bucket.zIndex = "-9";
});
top_items_count.innerHTML = count;
bottom_items_count.innerHTML = count;
</script>
</body>
</html>
Registration: signup.html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Sign Up</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="signup_style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600"
rel="stylesheet"
type="text/css"
/>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-
player.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV
4d3Gp2irVfcrp" crossorigin="anonymous">
</head>
<div class="login-page">
<div class="form">
<form>
<lottie-player
src="https://assets4.lottiefiles.com/datafiles/XRVoUu3IX4sGWtiC3MPpFnJvZNq
7lVWDCa8LSqgS/profile.json"
background="transparent"
speed="1"
style="justify-content: center"
loop
autoplay
></lottie-player>
<input type="text" placeholder="full name" />
<input type="text" placeholder="email address" />
<input type="text" placeholder="pick a username" />
<input type="password" id="password" placeholder="set a password" />
<i class="fas fa-eye" onclick="show()"></i>
<br>
<br>
</form>
<form class="login-form">
<button type="button" onclick="window.location.href='login.html'">
SIGN UP
</button>
</form>
</div>
</div>
</body>
<script>
function show() {
var password = document.getElementById("password");
var icon = document.querySelector(".fas");
// ========== Checking type of password ===========

if (password.type === "password") {
password.type = "text";
} else {
password.type = "password";
}
}
</script>
</html>
</html>
SignIn : login.html <!DOCTYPE HTML>

<html lang="en" >
<html>
<head>
<title>Login</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="login_style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600'
rel='stylesheet' type='text/css'>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-
player.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4
HV4d3Gp2irVfcrp" crossorigin="anonymous">
</head>
<div class="login-page">
<div class="form">
<form>
<lottie-player
src="https://assets4.lottiefiles.com/datafiles/XRVoUu3IX4sGWtiC3MPpFnJvZNq7l
VWDCa8LSqgS/profile.json" background="transparent" speed="1" style="justify-
content: center;" loop autoplay></lottie-player>
<input type="text" placeholder=" username"/>
<input type="password" id="password" placeholder=" password"/>
<i class="fas fa-eye" onclick="show()"></i>
<br>
<br>
<button>LOGIN</button>
<p class="message"></p>
</form>
<form class="login-form">
<button type="button" onclick="window.location.href='signup.html'">SIGN
UP</button>
</form>
</div>
</div>
<script>
function show(){
var password = document.getElementById("password");
var icon = document.querySelector(".fas")
// ========== Checking type of password ===========

if(password.type === "password"){
password.type = "text";
}
else {
password.type = "password";
}
};
</script>
</body>
</html>
Shopping cart: fruit-aisle.html (shopping fruits)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit-Aisle</title>
<link rel="stylesheet" href="./css/style3.css">
<link rel="stylesheet" href="./css/responsive.css">
family=Poppins:ital,wght@1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/1ba2cf90f3.js"
crossorigin="anonymous"></script>
<link rel="shortcut icon" href="./assests/Citycons_bag-512.webp" type="image/x-
icon">
</head>
<body>
<section>
<nav>
<span><a href="index.html"><i class="fas fa-shopping-bag"></i> Shopify

shopping cart</a></span>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="signup.html">signup</a></li>
<li><a href="login.html">login</a></li>
<li><span onclick="openBucket()"><i class="fas
fa-shopping-cart"></i></span>
<span class="items-count"></span>
</li>
</ul>
<span onclick="openBucket()" class="cart-icon"><i class="fas fa-shopping-

cart"></i></span>
</nav>
<main>
<div class="items item-1" data-item="Apples" data-price="100"></div>

<div class="items item-2" data-item="Lemons" data-price="200"></div>
<div class="items item-3" data-item="Strawberries" data-price="300"></div>
<div class="items item-4" data-item="Bananas" data-price="400"></div>
</main>
<div class="cart">
<header> <span><a href="index.html"><i class="fas fa-shopping-bag"></i>

Shopify</a></span> <span
class="exit"><i class="fas fa-times"></i></span> </header>
<main>
<ol>
<li>Item-Name</li>
<li>Qty</li>
<li>Total</li>
</ol>
<section>
<ul id="ul">
</ul>
</section>
</main>
</div>
</section>
<script src="./js/script3.js"></script>
</body>
</html>
Responsive.css
@media (min-width: 0px) and (max-width: 425px) {

section > nav {
grid-template-columns: auto 13vw;
}
section > nav > ul {

display: none;
}
.cart-icon {
color: #323232;
font-size: 1.3rem;
}
.fruits-side > span {

font-size: 3.3rem;
padding-top: 80px;
}
.fruits-side > button {

height: 10vh;
width: 53vw;
font-size: 1.2rem;
letter-spacing: 1px;
margin-bottom: 30px;
}
.cart {
position: fixed;
height: 100vh;
width: 100%;
top: 0%;
left: 0%;
transform: scale(0.9);
}
.cart > main > ol > li:nth-child(1) {

padding: 0px 12px;
}
}

section > nav {
}
section > nav > span {

font-size: 1.6rem;
}
section > nav > ul > li > a {

font-size: 1.1rem;
}

height: 10vh;
width: 25vw;
font-size: 1.2rem;
}
.cart {
position: fixed;
height: 100vh;
width: 100%;
top: 0%;
left: 0%;
}
.cart > main > ol > li:nth-child(1) {

padding: 0px 12px;
}
section > footer {

}
section > footer > ul > li {

padding: 10px 15px;
}
}
Style.css
*,
body {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
transition: all 0.5s;
color: inherit;
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
section {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 0.99fr;
grid-template-rows: 15vh repeat(3, 80vh) 15vh;
align-content: space-around;
justify-content: space-evenly;
}
section > nav {

display: grid;
grid-template-columns: 15vw 50vw;
grid-template-rows: 0.8fr;
justify-content: space-around;
background-color: whitesmoke;
}

display: flex;
align-items: center;
font-weight: bold;
font-size: 2rem;
color: grey;
text-transform: capitalize;
}
section > nav > span > a > i {

color: #323232;
}

display: flex;
}
section > nav > ul > li {
position: relative;
}

font-weight: bold;
font-size: 1.3rem;
color: grey;
}
section > nav > ul > li > a > i {

color: #323232;
font-size: 2rem;
}
.cart-icon{
display: none;
}
.items-count {
position: absolute;
padding: 5px;
background-color: red;
color: white;
font-weight: bold;
font-size: 0.9rem;
border-radius: 30px;
top: -40%;
}
.fruits-side {
background-image: url("../assests/62.jpg");
background-size: 100% 100%;
display: grid;
}
.fruits-side > span {

font-weight: bold;
font-size: 8rem;
color: white;
padding-top: 80px;
}

height: 8.5vh;
width: 13vw;
background-color: transparent;
border: 1.5px solid white;
font-weight: bold;
font-size: 1.2rem;
color: white;
justify-self: center;
}
.fruits-side > button > a {

display: flex;
}
.fruits-side > button:hover {

cursor: pointer;
background-color: white;
border: none;
color: rgba(0, 0, 0, 0.5);
}
.fruits-side > button > a > i {

font-size: 1.8rem;
}
.bottom-items-count {
position: absolute;
padding: 5px;
color: white;
font-weight: bold;
font-size: 0.9rem;
bottom: 40%;
}
.cart {
position: fixed;
height: 98.5%;
width: 25vw;
top: 0.5%;
right: 0.5%;
display: grid;
grid-template-rows: 10vh 60vh 10vh;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
border-radius: 5px;
opacity: 0;
visibility: hidden;
z-index: -9;
}
.cart > header {

display: flex;
}
.cart > header > span {

display: flex;
font-weight: bold;
font-size: 1.5rem;
color: grey;
}
.cart > header > span > a > i {

color: #323232;
}
.exit > i {
font-size: 2rem;
color: #323232;
cursor: pointer;
}
.cart > main {

box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
border-radius: 5px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 5vh 1fr;
}
.cart > main > ol {

display: flex;
}
.cart > main > ol > li {

font-weight: lighter;
border: 1px solid rgba(0, 0, 0, 0.5);
padding: 0px 21px;
color: grey;
}
.cart > main > section {

overflow: scroll;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.cart > main > section > ul > li {

display: flex;
justify-content: space-between;
height: 5vh;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
cursor: pointer;
}
Style3.css
*,
body {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
color: inherit;
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
section {
width: 100%;
display: grid;
}
section > nav {

display: grid;
grid-template-columns: 15vw 50vw;
grid-template-rows: 0.8fr;
}

display: flex;
font-weight: bold;
font-size: 2rem;
color: grey;
}
section > nav > span > a > i {

color: #323232;
}

display: flex;
}
section > nav > ul > li {

position: relative;
}

font-weight: bold;
font-size: 1.3rem;
color: grey;
}
section > nav > ul > li > a > i {

color: #323232;
font-size: 2rem;
}
.items-count {
position: absolute;
padding: 5px;
color: white;
font-weight: bold;
font-size: 0.9rem;
top: -40%;
}
.cart-icon {
display: none;
}
section > main {

display: grid;
grid-template-columns: repeat(4, 23.5vw);
grid-template-rows: 55vh;
}
.items {
border-radius: 5px;
position: relative;
}
.item-1 {
background-image: url("../assests/fruit-img/close-up-photography-of-apples-
672101.jpg");
}
.item-1::after {
content: "Apples";
position: absolute;
bottom: -13.5%;
left: 0;
font-weight: bold;
font-size: 1.75rem;
color: #323232;
}
.item-1::before {
content: "Add To Cart";
position: absolute;
font-weight: bold;
font-size: 1.2rem;
color: white;
padding: 10px;
cursor: pointer;
left: 27%;
top: 45%;
cursor: pointer;
opacity: 0;
visibility: hidden;
border: 2px solid white;
}
.item-1:hover::before {
opacity: 1;
visibility: visible;
}
.item-1:hover {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url("../assests/fruit-img/close-up-photography-of-apples-672101.jpg");
}
.item-2 {
background-image: url("../assests/fruit-img/three-yellow-citrus-952360.jpg");
}
.item-2::after {
content: "Lemons";
position: absolute;
bottom: -13.5%;
left: 0;
font-weight: bold;
font-size: 1.75rem;
color: #323232;
}
.item-2::before {
position: absolute;
font-weight: bold;
font-size: 1.2rem;
color: white;
padding: 10px;
cursor: pointer;
left: 27%;
top: 45%;
cursor: pointer;
opacity: 0;
visibility: hidden;
}
opacity: 1;
}
.item-2:hover {
url("../assests/fruit-img/three-yellow-citrus-952360.jpg");
}
.item-3 {
background-image: url("../assests/fruit-img/white-bowl-of-whole-strawberries-
89778.jpg");
}
.item-3::after {
content: "Strawberries";
position: absolute;
bottom: -13.5%;
left: 0;
font-weight: bold;
font-size: 1.75rem;
color: #323232;
}
.item-3::before {
position: absolute;
font-weight: bold;
font-size: 1.2rem;
color: white;
padding: 10px;
cursor: pointer;
left: 27%;
top: 45%;
cursor: pointer;
opacity: 0;
visibility: hidden;
}
opacity: 1;
}
.item-3:hover {
url("../assests/fruit-img/white-bowl-of-whole-strawberries-89778.jpg");
}
.item-4 {
background-image: url("../assests/fruit-img/yellow-bananas-61127.jpg");
}
.item-4::after {
content: "Bananas";
position: absolute;
bottom: -13.5%;
left: 0;
font-weight: bold;
font-size: 1.75rem;
color: #323232;
}
.item-4::before {
position: absolute;
font-weight: bold;
font-size: 1.2rem;
color: white;
padding: 10px;
cursor: pointer;
left: 27%;
top: 45%;
cursor: pointer;
opacity: 0;
visibility: hidden;
}
opacity: 1;
}
.item-4:hover {
url("../assests/fruit-img/yellow-bananas-61127.jpg");
}

section {
}
section > main {

grid-template-columns: repeat(1, 85vw);
grid-template-rows: repeat(4, 50vh);
}
.item-1::before,
.item-2::before,
.item-3::before,
.item-4::before {
padding: 10px 15px;
left: 20%;
top: 43%;
}
.item-1::after,
.item-2::after,
.item-3::after,
.item-4::after {
bottom: -18%;
font-size: 1.5rem;
}
.item-4 {
margin-bottom: 10%;
}
}

section {
}
section > main {

grid-template-columns: repeat(2, 35vw);
grid-template-rows: repeat(2, 55vh);
}
.item-1::before,
.item-2::before,
.item-3::before,
.item-4::before {
padding: 10px 15px;
left: 20%;
top: 43%;
}
.item-1::after,
.item-2::after,
.item-3::after,
.item-4::after {
bottom: -18%;
font-size: 1.5rem;
}
}
OUTPUT:
2. Make the above web application responsive web application using Bootstrap framework
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Bootstrap 4 - Shopping Cart</title>
<link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">
<script src="assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<script src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body>


<nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded">
<div class="row">
<div class="col">
<span data-toggle="modal" data-target="#cart">
<i class="fas fa-shopping-cart fa-2x fa-border icon-grey
zoom-sm"><span class="badge total-count"></span></i>
</span>
<button class="clear-cart btn btn-danger ml-2" id="clearCart">

<i class="fas fa-undo"></i> Clear
</button>
</div>
</div>
</nav>


<div class="container">
<br>
<h3 class="text-center">Bootstrap 4 - Shopping Cart</h3>
<hr>
<div class="row">
<div class="col-sm-12 col-md-6 col-xl-4">
<figure class="card card-product zoom">
<div class="img-wrap"><img src="images/item-0.jpg" class="rounded p-
1"></div>
<figcaption class="info-wrap">
<h4 class="title">Beautiful dress</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
<br/>
<small class="text-muted">★ ★
★ ★ ☆</small>
</div> 
</figcaption>
<div class="bottom-wrap">
<a href="" class="btn btn-sm btn-primary float-right add-to-cart show-
toast" data-product_id="1" data-pimage="images/item-0.jpg" data-name="Beautiful dress"
data-price="220">
<i class="fas fa-shopping-cart"></i> Add to cart
</a>
<div class="price-wrap h5">
<span class="price-new">$220</span> <del class="price-
old">$300</del>
</div> 
</div> 
</figure>
</div> 
<div class="img-wrap"><img src="images/item-1.jpg" class="rounded p-1">
</div>
<h4 class="title">Elegant style</h4>
<br/>
★ ★ ☆</small>
</figcaption>
<a href="" class="btn btn-sm btn-primary float-right add-to-
cart show-toast" data-product_id="2" data-pimage="images/item-1.jpg" data-name="Elegant
style" data-price="115">
</a>
<span class="price-new">$115</span> <del
class="price-old">$180</del>
</figure>
</div> 
<div class="img-wrap"><img src="images/item-2.jpg" class="rounded p-
1"></div>
<h4 class="title">Modern fashion</h4>
<br/>
★ ★ ☆</small>
</figcaption>
<a href="" class="btn btn-sm btn-primary float-right add-to-
cart show-toast" data-product_id="3" data-pimage="images/item-2.jpg" data-
name="Modern fashion" data-price="680">
</a>
<span class="price-new">$680</span> <del
class="price-old">$980</del>
</figure>
</div> 
</div> 
<div class="row p-2">

<p class="text-info font-weight-bold">
Easy to add to a new or existing project. Requires Bootstrap 4 Css & Js, Jquery, and
Fontawesome. Just add the resources <code class="text-danger">*/style.css</code> and
<code class="text-danger">*/script.js</code> to get going.
</p>
Customize the layout to your own preference. All you need is to provide the <kbd>Add
to Cart</kbd> buttton with the <code class="text-danger">data-product_id</code>, <code
class="text-danger">data-pimage</code>
<code class="text-danger">data-name</code>, and <code class="text-danger">data-
price</code> attributes.
</p>
The cart form data is generated with the function <code class="text-
danger">displayCart()</code> in the <code class="text-danger">script.js</code> code. You
can modify it to your own preference.
</p>
</div>
</div>


<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form action="index.html" method="get" class="cart-form">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-shopping-
cart text-black"></i> Shopping Cart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div class="font-weight-bold">Total price: $<span class="total-cart text-
danger"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Checkout</button>
</div>
</form>
</div>
</div>
</div>

<script src='assets/js/jquery.min.js'></script>
<script src="assets/js/script.js"></script>


<div id="product-toast">
<div id="img">
<i class="fas fa-shopping-cart"></i>
Cart
</div>
<div id="desc"><span id="item-name"></span> added to cart</div>
</div>
</body>
</html>
script.js
// ************************************************
// Shopping Cart API
// ************************************************
var shoppingCart = (function() {

// =============================
// Private methods and propeties
// =============================
cart = [];
// Constructor
function Item(product_id, name, price, pimage, count) {
"use strict";
this.product_id = product_id;
this.name = name;
this.price = price;
this.pimage = pimage;
this.count = count;
}
// Save cart
function saveCart() {
"use strict";
sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
}
// Load cart
function loadCart() {
"use strict";
cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
}
if (sessionStorage.getItem("shoppingCart") != null) {
loadCart();
}
// =============================
// Public methods and propeties
// =============================
var obj = {};
// Add to cart
obj.addItemToCart = function(product_id, name, price, pimage, count) {
"use strict";
for(var item in cart) {
if(cart[item].product_id === product_id) {
cart[item].count ++;
saveCart();
return;
}
}
var item = new Item(product_id, name, price, pimage, count);
cart.push(item);
saveCart();
}
// Set count from item
obj.setCountForItem = function(product_id, count) {
"use strict";
for(var i in cart) {
if (cart[i].product_id === product_id) {
cart[i].count = count;
break;
}
}
};
// Remove item from cart
obj.removeItemFromCart = function(product_id) {
"use strict";
cart[item].count --;
if(cart[item].count === 0) {
cart.splice(item, 1);
}
break;
}
}
saveCart();
}
// Remove all items from cart

obj.removeItemFromCartAll = function(product_id) {
"use strict";
cart.splice(item, 1);
break;
}
}
saveCart();
}
// Clear cart
obj.clearCart = function() {
"use strict";
cart = [];
saveCart();
}
// Count cart
obj.totalCount = function() {
"use strict";
var totalCount = 0;
totalCount += cart[item].count;
}
return totalCount;
}
// Total cart
obj.totalCart = function() {
"use strict";
var totalCart = 0;
totalCart += cart[item].price * cart[item].count;
}
return Number(totalCart.toFixed(2));
}
// List cart
obj.listCart = function() {
var cartCopy = [];
for(i in cart) {
item = cart[i];
itemCopy = {};
for(p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = Number(item.price * item.count).toFixed(2);
cartCopy.push(itemCopy)
}
return cartCopy;
}
// cart : Array
// Item : Object/Class
// addItemToCart : Function
// removeItemFromCart : Function
// removeItemFromCartAll : Function
// clearCart : Function
// countCart : Function
// totalCart : Function
// listCart : Function
// saveCart : Function
// loadCart : Function
return obj;
})();
// *****************************************
// Triggers / Events
// *****************************************
// Add item
$('.add-to-cart').on("click", function(event){
"use strict";
event.preventDefault();
var product_id = $(this).data('product_id');
var name = $(this).data('name');
var price = Number($(this).data('price'));
var pimage = $(this).data('pimage');
shoppingCart.addItemToCart(product_id, name, price, pimage, 1);
displayCart();
});
// Clear items
$('.clear-cart').on("click",function() {
"use strict";
shoppingCart.clearCart();
displayCart();
});
function displayCart() {
"use strict";
var cartArray = shoppingCart.listCart();
var output = "";
var total_order = 0;
for(var i in cartArray) {
total_order++;
output += "<div class='col-12'>"
+ "<div class='row justify-content-center'>"
+ "<div class='col-5'>"
+ "<div class='row'>"
+ "<div class='col-9 text-left'>"
+ "<img src='" + cartArray[i].pimage + "' class='rounded-circle' width='50' height='50' />"
+ "<span class='text-info pl-3 font-weight-bold'>" + cartArray[i].name + "</span>"
+ "</div>"
+ "<span class='text-dark pl-2 mr-1'>(" + cartArray[i].price + ")</span>"
+ "</div>"
+ "</div>"
+ "</div>"
+ "<div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-
product_id=" + cartArray[i].product_id + ">-</button>"
+ "<input type='number' class='item-count form-control' data-product_id='" +
cartArray[i].product_id + "' value='" + cartArray[i].count + "'>"
+ "<button class='plus-item btn btn-primary input-group-addon' data-product_id=" +
cartArray[i].product_id + ">+</button></div>"
+ "</div>"
+ "<button class='delete-item btn btn-danger' data-product_id=" + cartArray[i].product_id +
">X</button>"
+ "<span class='text-dart pl-2'><kbd>" + cartArray[i].total + "</kbd></span>"
+ "</div>"
+ "</div>"
+ "</div>"
+ "<div class='row' id='hedden-fields'><input type = 'hidden' class='sr-only' name='ProductID[]'
id='ProductName' value='" + cartArray[i].product_id + "'>"
+ "<input type = 'hidden' class='sr-only' name='ProductName[]' id='ProductName' value='" +
cartArray[i].name + "'>"
+ "<input type = 'hidden' class='sr-only' name='ProductPrice[]' id='ProductPrice' value='" +
cartArray[i].price + "'>"
+ "<input type = 'hidden' class='sr-only' name='ProductQuantity[]' id='ProductQuantity' value='" +
cartArray[i].count + "'>"
+ "<input type = 'hidden' class='sr-only' name='TotalOrderedItems' id='TotalOrderedItems'
value='" + total_order + "'></div>"
+ "<hr/>" ;
}
$('.show-cart').html(output);
$('.total-cart').html(shoppingCart.totalCart());
$('.total-count').html(shoppingCart.totalCount());
}
// Delete item button
$('.show-cart').on("click", ".delete-item", function(event) {

"use strict";
shoppingCart.removeItemFromCartAll(product_id);
displayCart();
})
// -1
$('.show-cart').on("click", ".minus-item", function(event) {
"use strict";
shoppingCart.removeItemFromCart(product_id);
displayCart();
})
// +1
$('.show-cart').on("click", ".plus-item", function(event) {
"use strict";
shoppingCart.addItemToCart(product_id);
displayCart();
})
// Item count input

$('.show-cart').on("change", ".item-count", function(event) {
"use strict";
var count = Number($(this).val());
shoppingCart.setCountForItem(product_id, count);
displayCart();
});
displayCart();
// =============================
// Cart toast display
// =============================
$('.show-toast').on("click",function(){
"use strict";
const x = document.getElementById("product-toast");
var item_name = $(this).data('name');
$("#item-name").text(item_name);
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
});
body {
padding-top: 80px;
}
/* product cart design */

.show-cart li {
display: flex;
}
.card {
}
.card-img-top {
width: 200px;
height: 200px;
align-self: center;
}
.card-product .img-wrap {
border-radius: 3px 3px 0 0;
overflow: hidden;
position: relative;
height: 220px;
text-align: center;
}
.card-product .img-wrap img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.card-product .info-wrap {
overflow: hidden;
padding: 15px;
border-top: 1px solid #eee;
}
.card-product .bottom-wrap {
padding: 15px;
border-top: 1px solid #eee;
}
.label-rating { margin-right:10px;
color: #333;
display: inline-block;
vertical-align: middle;
}
.card-product .price-old {
color: #999;
}
.fa-2x-cart{
font-size:24px
}
/* shopping cart counter */

.header{background:rgb(0, 178, 255);color:#fff;}
#lblCartCount {
font-size: 12px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
margin-left: -10px;
}
.badge {
padding-left: 9px;
padding-right: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.label-warning[href],
.badge-warning[href] {
background-color: #c67605;
}
/* shopping cart counter style */

i.fa-shopping-cart {
width:2.2em;
text-align:center;
vertical-align:middle;
}
.fa-shopping-cart {
margin-top: 0.2em;
position: relative;
}
.badge {
font-size: .25em;
display: block;
position: absolute;
top: -.70em;
right: -.70em;
width: 2.5em;
height: 2.4em;
line-height: 2em;
border-radius: 50%;
text-align: center;
color: #fff;
background: rgba(207, 0, 15, 1);
}
/* product zoom on hover */

.zoom, .zoom-sm {
transition: transform .2s;
}
.zoom:hover {
}
.zoom-sm:hover {
}
/* shopping cart toast */

#product-toast {
visibility: hidden;
max-width: 50px;
height: 50px;
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#product-toast #img{
width: 70px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
background-color: #111;
color: #fff;
}
#product-toast #desc{
color: #fff;
padding: 16px;
overflow: hidden;
white-space: nowrap;
}
#product-toast.show {
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
}
@-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 350px}
}
@keyframes expand {
}
@-webkit-keyframes stay {
}
@keyframes stay {
}
@-webkit-keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
@keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
}
3. Use JavaScript for doing client – side validation of the pages
implemented in experiment 1 andexperiment 2.
const top_items_count = document.querySelector('.items-count'),
bottom_items_count = document.querySelector('.bottom-items-count'),
exit = document.querySelector('.exit'),
bucket = document.querySelector('.cart').style;
var items = document.querySelectorAll('.items');
function openBucket() {
bucket.visibility = "visible";
bucket.zIndex = "9";
}
exit.addEventListener('click', () => {
bucket.visibility = "hidden";
bucket.zIndex = "-9";
});
var food_cart = [];
() => {
if (localStorage.food_cart) {
food_cart = JSON.parse(localStorage.food_cart);
showCart();
}
}
var qty=1;
for (i = 0; i <= items.length - 1; i++) {

var count=0;
items[i].onclick = e => {
count=count+1
var itemName = e.target.dataset.item;
var price = e.target.dataset.price;
addToCart(itemName, price, qty);
}
}
function addToCart(itemName, price,qty) {
for (var i in food_cart) {

if (food_cart[i].Product == itemName) {
food_cart[i].Qty += qty;
showCart();
saveCart();
return;
}
}
var itemArray = {
Product: itemName,
Price: price,
Qty: qty
}
food_cart.push(itemArray)
saveCart();
showCart();
}
function saveCart() {
if (window.localStorage) {
localStorage.food_cart = JSON.stringify(food_cart);
}
}
function deleteItem(index) {
food_cart.splice(index, 1);
showCart();
saveCart();
}
function showCart() {
if (food_cart.length == 0) {
var _ul = document.querySelector('#ul');
_ul.innerHTML = "";
return;
}

_ul.innerHTML = "";
for (var i in food_cart) {
var item = food_cart[i];
var li = document.createElement("li")
var row = `<span>${item.Product}</span><span onclick='deleteItem(" + i + ")'><i class='fas fa-
trash'></i></span><span>${item.Qty}</span><span>${item.Qty * item.Price}</span>`;
li.innerHTML += row;
_ul.appendChild(li);
}
}
4. Explore the features of ES6 like arrow functions, callbacks, promises, async/await.
Implementan application for reading the weather information from
openweathermap.org and display the information in the form of a graph on the web
page.
Arrow functions are introduced in ES6, which provides you a more accurate way to write
the functions in JavaScript. They allow us to write smaller function syntax. Arrow functions
make your code more readable and structured.
1. const functionName = (arg1, arg2, ?..) => {
2. //body of the function
3. }
There are three parts to an Arrow Function or Lambda Function:
o Parameters: Any function may optionally have the parameters.

o Fat arrow notation/lambda notation: It is the notation for the arrow (=>).
o Statements: It represents the instruction set of the function.
// function expression
var myfun1 = function show() {

console.log("It is a Function Expression");
}
// Anonymous function
var myfun2 = function () {

console.log("It is an Anonymous Function");
}
//Arrow function
var myfun3 = () => {

console.log("It is an Arrow Function");
};
myfun1();
myfun2();
myfun3();
Output
It is a Function Expression
It is an Anonymous Function
It is an Arrow Function
ES6 Promises
A Promise represents something that is eventually fulfilled. A Promise can either be
rejected or resolved based on the operation outcome.
ES6 Promise is the easiest way to work with asynchronous programming in JavaScript.
Asynchronous programming includes the running of processes individually from the
main thread and notifies the main thread when it gets complete. Prior to the
Promises, Callbacks were used to perform asynchronous programming.
Callback
A Callback is a way to handle the function execution after the completion of the
execution of another function.
A Callback would be helpful in working with events. In Callback, a function can be

passed as a parameter to another function.
Syntax
1. const Promise = new Promise((resolve,reject) => {....});
Example
1. let Promise = new Promise((resolve, reject)=>{

2. let a = 3;
3. if(a==3){
4. resolve('Success');
5. }
6. else{
7. reject('Failed');
8. }
9. })
10. Promise.then((message)=>{
11. console.log("It is then block. The message is: ?+ message)
12. }).catch((message)=>{
13. console.log("It is Catch block. The message is: ?+ message)
14. })
Output
It is then block. The message is: Success
JavaScript Async/Await
JavaScript is always synchronous and single-threaded that provides the event loops. The event loops
enable us to queue up an activity. This activity will not happen until the loops become available after the
program that queued the action has completed the execution. However, our program contains a large
number of functionalities, which causes our code to be asynchronous. The Async/Await functionality is
one of them. Async/Await is an extension of promises that we get as language support.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>JavaScript Async</title>
6. </head>
7. <body>
8. <h2>JavaScript Async</h2>
9. <p id="main"></p>
10. <script>
11. function myDisplayer(some) {
12. document.getElementById("main").innerHTML = some;
13. }
14. async function myfirstFunction() {
15. return "Hello World!!!";
16. }
17. myfirstFunction().then(
18. function(value) {myDisplayer(value);},
19. function(error) {myDisplayer(error);}
20. );
21. </script>
22. </body>
23. </html>
Output: After executing the above code, we will get the output shown below in the
screenshot.
JavaScript Await
JavaScript Await function is used to wait for the promise. It could only be used inside the async
block. It instructs the code to wait until the promise returns a response. It only delays the async
block. Await is a simple command that instructs JavaScript to wait for an asynchronous action
to complete before continuing with the feature. It's similar to a "pause until done" keyword.
The await keyword is used to retrieve a value from a function where we will usually be used
the then() function. Instead of calling after the asynchronous function, we'd use await to
allocate a variable to the result and then use the result in the code as we will in the
synchronous code.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>JavaScript Await</title>
6. </head>
7. <body>
8. <h2>JavaScript Await</h2>
9. <p id="main"></p>
10. <script>
11. async function myDisplay() {
12. let myPromise = new Promise(function(myResolve, myReject) {
13. myResolve("Hello World!!");
14. });
15. document.getElementById("main").innerHTML = await myPromise;
16. }
17. myDisplay();
18. </script>
19. </body>
20. </html>
Output: After executing this code, we will get the output as shown below in the
screenshot:
Implementan application for reading the weather information from openweathermap.org and display the
information in the form of a graph on the web page.
MainPage.html
<!DOCTYPE html>
<html>
<head>
<title>Weather Report</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="PageStyle.css">
<link href=
'https://fonts.googleapis.com/css?family=Delius Swash Caps'
rel='stylesheet'>
</head>
<body>
<p id="data" class="styleIt"></p>
<script src="JSPage.js"></script>
</body>
</html>
PageStyle.css
p.styleIt
{
background-color: rgb(182, 182, 182);
border: 2px solid rgb(182, 182, 182);
border-radius: 8px;
text-align: center;
box-shadow: 6px 5px 2px rgb(182, 182, 182), 0 0 25px rgb(0, 0, 0), 0 0
5px rgb(182, 182, 182);
font-family: 'Delius Swash Caps';
}
body{
background:rgb(120, 120, 120);
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
JSPage.js
var data =
document.getElementById("dat
a");
var Latitude;
var Longitude;
var key = "------Put Your Own Key-----";
var url =
"http://api.openweathermap.org/data/2.5/weather?";
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
data_of_Lat_Lon.innerHTML="Geolocation is not
supported by this browser. SORRY!";
}
}
function showPosition(position){
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getData(Latitude,Longitude);
}
function getData(Lat,Lon){
const readyToSent =
(url+"lat="+Lat+"&lon="+Lon+"&appid="+key);
fetch(readyToSent)
.then(response=>response.json())
.then(data=>{
console.log(data);
fetchData(data)
})
}
function fetchData(data){
const icon =
"http://openweathermap.org/img/wn/"+data.weather[0].icon+"
@2x.png"
document.getElementById("data").innerHTML =
"<b>The weather report of your Location is
:-</b><br>"+
"<img src="+icon+"><br>"+
"<b>Country :</b>"+data.sys.country+
"<br><b>Local Area Name :</b>"+data.name+
"<br><b>Temp. :</b>"+parseFloat((data.main.temp -
273.15)).toFixed(1)+"℃"+
"<br><b>But You will feel like
:</b>"+parseFloat((data.main.feels_like -
273.15)).toFixed(1)+"℃"+
"<br><b>Min. Temp.
:</b>"+parseFloat((data.main.temp_min -
273.15)).toFixed(1)+"℃"+
"<br><b>Max. Temp.
:</b>"+parseFloat((data.main.temp_max -
273.15)).toFixed(1)+"℃"+
"<br><b>Pressure :</b>"+data.main.pressure+"hPa"+
"<br><b>Humidity :</b>"+data.main.humidity+"%"+
"<br><b>Weather
:</b>"+data.weather[0].description+
"<br>"
}
getLocation();
showPosition();
getData();
To create a Django application that performs CRUD operations, follow the following
steps.
1. Create a Project
1. $ django-admin startproject crudexample
2. Create an App
1. $ python3 manage.py startapp employee
3. Project Structure
nitially, our project looks like this:

4. Database Setup
Create a database djangodb in mysql, and configure into the settings.py file of
django project. See the example.
// settings.py
1. DATABASES = {
2. 'default': {
3. 'ENGINE': 'django.db.backends.mysql',
4. 'NAME': 'djangodb',
5. 'USER':'root',
6. 'PASSWORD':'mysql',
7. 'HOST':'localhost',
8. 'PORT':'3306'
9. }
10. }
5. Create a Model
Put the following code into models.py file.
// models.py
1. from django.db import models
2. class Employee(models.Model):
3. eid = models.CharField(max_length=20)
4. ename = models.CharField(max_length=100)
5. eemail = models.EmailField()
6. econtact = models.CharField(max_length=15)
7. class Meta:
8. db_table = "employee"
6. Create a ModelForm
// forms.py
1. from django import forms

2. from employee.models import Employee
3. class EmployeeForm(forms.ModelForm):
4. class Meta:
5. model = Employee
6. fields = "__all__"
7. Create View Functions
// views.py
1. from django.shortcuts import render, redirect

2. from employee.forms import EmployeeForm
3. from employee.models import Employee
4. # Create your views here.
5. def emp(request):
6. if request.method == "POST":
7. form = EmployeeForm(request.POST)
8. if form.is_valid():
9. try:
10. form.save()
11. return redirect('/show')
12. except:
13. pass
14. else:
15. form = EmployeeForm()
16. return render(request,'index.html',{'form':form})
17. def show(request):
18. employees = Employee.objects.all()
19. return render(request,"show.html",{'employees':employees})
20. def edit(request, id):
21. employee = Employee.objects.get(id=id)
22. return render(request,'edit.html', {'employee':employee})
23. def update(request, id):
25. form = EmployeeForm(request.POST, instance = employee)
26. if form.is_valid():
27. form.save()
28. return redirect("/show")
29. return render(request, 'edit.html', {'employee': employee})
30. def destroy(request, id):
32. employee.delete()
33. return redirect("/show")
8. Provide Routing
Provide URL patterns to map with views function.
// urls.py
1. from django.contrib import admin

2. from django.urls import path
3. from employee import views
4. urlpatterns = [
5. path('admin/', admin.site.urls),
6. path('emp', views.emp),
7. path('show',views.show),
8. path('edit/<int:id>', views.edit),
9. path('update/<int:id>', views.update),
10. path('delete/<int:id>', views.destroy),
11. ]
9. Organize Templates
Create a templates folder inside the employee app and create three (index, edit,
show) html files inside the directory. The code for each is given below
// index.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Index</title>
6. {% load staticfiles %}
7. <link rel="stylesheet" href="{% static 'css/style.css' %}"/>
8. </head>
9. <body>
10. <form method="POST" class="post-form" action="/emp">
11. {% csrf_token %}
12. <div class="container">
13. <br>
14. <div class="form-group row">
15. <label class="col-sm-1 col-form-label"></label>
16. <div class="col-sm-4">
17. <h3>Enter Details</h3>
18. </div>
19. </div>
21. <label class="col-sm-2 col-form-label">Employee Id:</label>
23. {{ form.eid }}
24. </div>
25. </div>
27. <label class="col-sm-2 col-form-label">Employee Name:</label>
29. {{ form.ename }}
30. </div>
31. </div>
33. <label class="col-sm-2 col-form-label">Employee Email:</label>
35. {{ form.eemail }}
36. </div>
37. </div>
39. <label class="col-sm-2 col-form-label">Employee Contact:</label>
41. {{ form.econtact }}
42. </div>
43. </div>
47. <button type="submit" class="btn btn-primary">Submit</button>
48. </div>
49. </div>
50. </div>
51. </form>
52. </body>
53. </html>
// show.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
5. <title>Employee Records</title>
8. </head>
9. <body>
10. <table class="table table-striped table-bordered table-sm">
11. <thead class="thead-dark">
12. <tr>
13. <th>Employee ID</th>
14. <th>Employee Name</th>
15. <th>Employee Email</th>
16. <th>Employee Contact</th>
17. <th>Actions</th>
18. </tr>
19. </thead>
20. <tbody>
21. {% for employee in employees %}
22. <tr>
23. <td>{{ employee.eid }}</td>
24. <td>{{ employee.ename }}</td>
25. <td>{{ employee.eemail }}</td>
26. <td>{{ employee.econtact }}</td>
27. <td>
28. <a href="/edit/{{ employee.id }}"><span class="glyphicon glyphicon-
pencil" >Edit</span></a>
29. <a href="/delete/{{ employee.id }}">Delete</a>
30. </td>
31. </tr>
32. {% endfor %}
33. </tbody>
34. </table>
35. <br>
36. <br>
37. <center><a href="/emp" class="btn btn-primary">Add New Record</a></
center>
38. </body>
39. </html>
// edit.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
5. <title>Index</title>
8. </head>
9. <body>
10. <form method="POST" class="post-form" action="/update/{{employee.id}}">
11. {% csrf_token %}
12. <div class="container">
13. <br>
17. <h3>Update Details</h3>
18. </div>
19. </div>
21. <label class="col-sm-2 col-form-label">Employee Id:</label>
23. <input type="text" name="eid" id="id_eid" required maxlength="20" value
="{{ employee.eid }}"/>
24. </div>
25. </div>
27. <label class="col-sm-2 col-form-label">Employee Name:</label>
29. <input type="text" name="ename" id="id_ename" required maxlength="1
00" value="{{ employee.ename }}" />
30. </div>
31. </div>
33. <label class="col-sm-2 col-form-label">Employee Email:</label>
35. <input type="email" name="eemail" id="id_eemail" required maxlength="
254" value="{{ employee.eemail }}" />
36. </div>
37. </div>
39. <label class="col-sm-2 col-form-label">Employee Contact:</label>
41. <input type="text" name="econtact" id="id_econtact" required maxlength
="15" value="{{ employee.econtact }}" />
42. </div>
43. </div>
47. <button type="submit" class="btn btn-success">Update</button>
48. </div>
49. </div>
50. </div>
51. </form>
52. </body>
53. </html>
12. Create Migrations
Create migrations for the created model employee, use the following command.
1. $ python3 manage.py makemigrations
After migrations, execute one more command to reflect the migration into the
database. But before it, mention name of app (employee) in INSTALLED_APPS of
settings.py file.
// settings.py
1. INSTALLED_APPS = [
2. 'django.contrib.admin',
3. 'django.contrib.auth',
4. 'django.contrib.contenttypes',
5. 'django.contrib.sessions',
6. 'django.contrib.messages',
7. 'django.contrib.staticfiles',
8. 'employee'
9. ]
Run the command to migrate the migrations.
1. $ python3 manage.py migrate
Now, our application has successfully connected and created tables in database. It
creates 10 default tables for handling project (session, authentication etc) and one
table of our model that we created.
See list of tables created after migrate command.

Run Server
To run server use the following command.
1. $ python3 manage.py runserver
Access to the Browser

Access the application by entering localhost:8000/show, it will show all the available
employee records.
Initially, there is no record. So, it shows no record message.
Adding Record
Click on the Add New Record button and fill the details. See the example.
Filling the details.
6.Create an xml for the bookstore. Validate the same using both DTD and
XSD
< booksinfor.dtd >
<!ELEMENT books (book+)>
<!ELEMENT book (title,author,ISBN,publisher,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
< week5.xml >

<?xml version="1.0"?>
<!DOCTYPE books SYSTEM "booksinfor.dtd">
<?xml:stylesheet type="text/xsl" href="bookinf.xsl"?>
<books>
<book>
<title>Web programming,building internet applications</title>
<author> ChrisBates</author>
<ISBN>0-07-049543-7</ISBN>
<publisher>Wiley Dreamtech</publisher>
<edition>2nd edition</edition>
<price>Rs.250</price>
</book>
<book>
<title>Computer Networks</title>
<author> Andrew S Tanebaum</author>
<ISBN>81-203-1165-5</ISBN>
<publisher>Pearson</publisher>
</book>
<book>
<title>Frontiers of Electronic commerce</title>
<author> Kalakata</author>
<ISBN>978-81-265-1173-0</ISBN>
<edition>1st edition</edition>
</book>
<book>
<title>Java Programming with CORBA</title>
<author> G.Brose</author>
<ISBN>978-81-265-1173-0</ISBN>
<publisher>Wiley Dreamtech</publisher>
</book>
<book>
<title>The Unified Modelling language User Guide</title>
<author>GradyBooch,James Rumbaugh,Ivar Jacabson</author>
<ISBN>81-7758-372-7</ISBN>
<publisher>Perarson Education</publisher>
</book>
<book>
<title>Data mining - Concepts and techniques </title>
<author> Jiawei HAn and Kamber</author>
<ISBN>978-81-312-0538-8</ISBN>
<edition>1st edition</edition>
</book>
</books>
< bookinf.xsl >
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<body>
<table align="center" cellspacing="5" cellpadding="10">
<caption>BOOKS INFORMATION</caption>
<tr bgcolor="light brown ">
<th>Title</th>
<th>Author</th>
<th>ISBN</th>
<th>Publisher</th>
<th>Edition</th>
<th>Price</th>
</tr>
<xsl:for-each select="books/book">
<tr>
<td> <xsl:value-of select="title"/></td>
<td> <xsl:value-of select="author"/></td>
<td> <xsl:value-of select="ISBN"/></td>
<td> <xsl:value-of select="publisher"/></td>
<td> <xsl:value-of select="edition"/></td>
<td> <xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
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:
Reg.html:
<html>
<head>
<title> validation </title>
</head>
<body bgcolor="magenta">
<form action="Register.jsp" 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>
Register.jsp:
<%@ page language="java" import="java.sql.*,javax.servlet.*" %>
<html>
<form >
<%
String v1,v2,v3,v4,str;
v1=request.getParameter("t1");
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection cn=DriverManager.getConnection("jdbc:odbc:oradsn","system","ravindra");
Statement st=cn.createStatement();
st.executeUpdate("insert into register values('"+v1+"','"+v2+"',"+v3+",'"+v4+"')");
if(cn!=null)
{
%>
</form>
Registration Successful
<%
}
else
{
out.println("Registration failed");
}
st.close();
cn.close();
}catch(Exception e) { out.println(" Registration failed");
%>
<P><a href = "reg.html" 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:1
Output:2
8. Maintaining the transactional history of any user is very important. Explore the various
sessiontracking mechanism (Cookies, HTTP Session)
package com.journaldev.servlet.session;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private final String userID = "admin";
private final String password = "password";
protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {
// get request parameters for userID and password

String user = request.getParameter("user");
String pwd = request.getParameter("pwd");
if(userID.equals(user) && password.equals(pwd)){
HttpSession session = request.getSession();
session.setAttribute("user", "Pankaj");
//setting session to expiry in 30 mins
session.setMaxInactiveInterval(30*60);
Cookie userName = new Cookie("user", user);
userName.setMaxAge(30*60);
response.addCookie(userName);
response.sendRedirect("LoginSuccess.jsp");
}else{
RequestDispatcher rd =
getServletContext().getRequestDispatcher("/login.html");
PrintWriter out= response.getWriter();
out.println("<font color=red>Either user name or password is
wrong.</font>");
rd.include(request, response);
}
LoginSuccess.jsp code is given below.
<%@ page language="java" contentType="text/html; charset=US-ASCII"

pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Login Success Page</title>
</head>
<body>
<%
//allow access only if session exists
String user = null;
if(session.getAttribute("user") == null){
response.sendRedirect("login.html");
}else user = (String) session.getAttribute("user");
String userName = null;
String sessionID = null;
Cookie[] cookies = request.getCookies();
if(cookies !=null){
for(Cookie cookie : cookies){
if(cookie.getName().equals("user")) userName = cookie.getValue();
if(cookie.getName().equals("JSESSIONID")) sessionID = cookie.getValue();
}
}
%>
<h3>Hi <%=userName %>, Login successful. Your Session ID=<%=sessionID %></h3>
<br>
User=<%=user %>
<br>
<a href="CheckoutPage.jsp">Checkout Page</a>
<form action="LogoutServlet" method="post">
<input type="submit" value="Logout" >
</form>
</body>
</html>
When a JSP resource is used, container automatically creates a session for it, so we can’t
check if session is null to make sure if user has come through login page, so we are using
session attribute to validate request. CheckoutPage.jsp is another page and it’s code is given
below.
<%@ page language="java" contentType="text/html; charset=US-ASCII"

pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Login Success Page</title>
</head>
<body>
<%
//allow access only if session exists
if(session.getAttribute("user") == null){
}
String userName = null;
String sessionID = null;
if(cookies !=null){
if(cookie.getName().equals("user")) userName = cookie.getValue();
}
}
%>
<h3>Hi <%=userName %>, do the checkout.</h3>
<br>
<form action="LogoutServlet" method="post">
<input type="submit" value="Logout" >
</form>
</body>
</html>
Our LogoutServlet code is given below.
package com.journaldev.servlet.session;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class LogoutServlet
*/
@WebServlet("/LogoutServlet")
public class LogoutServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {
response.setContentType("text/html");
if(cookies != null){
if(cookie.getName().equals("JSESSIONID")){
System.out.println("JSESSIONID="+cookie.getValue());
break;
}
}
}
//invalidate the session if exists
HttpSession session = request.getSession(false);
System.out.println("User="+session.getAttribute("user"));
if(session != null){
session.invalidate();
}
}
1. Below images shows the execution of our web application.

9. Create a custom server using http module and explore the other modules of Node JS like
OS,path, event.
The http.createServer() method includes request and response parameters which is

supplied by Node.js. The request object can be used to get information about the
current HTTP request e.g., url, request header, and data. The response object can be
used to send a response for a current HTTP request.
The following example demonstrates handling HTTP request and response in Node.js.
var http = require('http'); // Import Node.js core module
var server = http.createServer(function (req, res) { //create web

server
if (req.url == '/') { //check the URL of the current request
// set response header

res.writeHead(200, { 'Content-Type': 'text/html' });
// set response content

res.write('<html><body><p>This is home
Page.</p></body></html>');
res.end();
}
else if (req.url == "/student") {

res.write('<html><body><p>This is student
res.end();
}
else if (req.url == "/admin") {

res.write('<html><body><p>This is admin
res.end();
}
else
res.end('Invalid Request!');
});
server.listen(5000); //6 - listen for any incoming requests
console.log('Node.js web server at port 5000 is running..')
Now, run the above web server as shown below.
C:\> node server.js
Node.js web server at port 5000 is running..
To test it, you can use the command-line program curl, which most Mac and Linux
machines have pre-installed.
curl -i http://localhost:5000
You should see the following response.
HTTP/1.1 200 OK
Content-Type: text/plain
Date: Tue, 8 Sep 2015 03:05:08 GMT
Connection: keep-alive
This is home page.
For Windows users, point your browser to http://localhost:5000 and

see the following result.
Node.js Web Server Response
10. Develop an express web application that can interact with REST API to perform 14
CRUDoperations on student data. (Use Postman)
#1) Installations.
#2) Create new Node.js Project with Express.js
#3) CRUD Operations and HTTP methods.
#4) Testing API with Postman.
Installation Required
 Node.js Or NPM (Node Package Manager)

 VS Code (Optional) — A code editor.
To check whether the Node.js is already installed on your computer,

open your terminal or CMD and run node -v command. If you see
your Node.js version means it's installed.
Otherwise go to these links and install:
→ Click here to download and install Node.js (You should choose LTS
version).
→ Click here to download VS Code
Express application generator:
To quickly create an application skeleton. You may use this

application generator tool (èxpress-generator`). The application
generator uses npx command (available in Node.js newer versions).
→ Click here to know more about Express application generator.
We will not use express-generator in this article, instead we will create

everything by ourself to avoid extra files generated from generator
and to understand in depth.
#2) Create New Project (using Node.js with

Express.js)
Create a new folder (at the place you want to keep your project).
Name that folder: node-ex-api
Create two files inside node-ex-api folder:

→ package.json file.
→ server.js file.
Open up and update your node-ex-api/package.json file with below

code:
{
"name": "node-ex-api",
"version": "1.0.0",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.17.1"
}
}
Open up and update your node-ex-api/server.js file with below code:

const http = require('http');
const express = require('express');
const app = express();

app.use(express.json());
// default URL to API

app.use('/', function(req, res) {
res.send('node-ex-api works :-)');
});
const server = http.createServer(app);

const port = 3000;
server.listen(port);
console.debug('Server listening on port ' + port);
After creating above two files, open your terminal in the "node-ex-
api" folder and run this command:
npm install
This command ↑ will install the dependencies defined

in "package.json" file.
(You may use VS Code - A code editor↓).
After dependency installation this will create "node_modules" folder at
the root of the "node-ex-api" folder.
Run Project
We have just created a Node-Express Project 😍 Let’s start a server.
To start a server run this command:

npm start
To test this API — Open your web browser and enter this URL
→ localhost:3000
The localhost:3000 is calling default Server Path. Which returns simple string
“node-ex-api works :-)”
CRUD Operations and HTTP methods.
Yet we have a list of items ( localhost:3000/items). Next task is to

manage this list. To do so we need to have CRUD
operations Create, Read, Update and D elete over the list of items.
For Create we will create new end-point router.post('/', .......)
→ localhost:3000/items (With post request)
For Read we already have two end-points:

→ localhost:3000/items (Returns all objects)
→ localhost:3000/items/1 (Returns single object of id=1)
For Update we will create new end-point router.put('/', .......)
→ localhost:3000/items (With put request)
For Delete we will create new end-point router.delete('/', .......)
→ localhost:3000/items (With delete request)
Now, Open up and update your node-ex-api/routes/items.js file with

below code: (HTTP methods ↓↓)
Important explanation about above ↑ code:

→ We worked on static array of JSON objects named: data.
→ All HTTP methods GET, POST, PUT and DELETE are just
manipulating this JSON array.
→ Feel free to use any database instead of using local static array. The
database code can be written inside these HTTP methods to do
operations like GET, POST, PUT and DELETE.
Testing API with Postman.
We have tested the GET methods of our API in our web browser
(check #4) and seen responses. But we can’t test POST, PUT and
DELETE http methods in web browser. To test those methods we
use Postman or you may use another http utility to call APIs.
Here we use Postman. So before start click here and install Postman.
Now, run npm start if your server is not running.
After Postman installation skip start window (if comes), then login
with Google or email/password (whichever you prefer) and finally you
must see this screen:
11.For the above application create authorized end points using JWT (JSON Web Token).
Create API endpoints
Our default endpoint returns string — we see that above. Now we’ll
create another API endpoint, that is another URL which returns some
useful data.
Before proceed, let’s do some more exercise:

→ Create a folder inside the project root with name "routes".
→ Then create a file inside this "routes" folder with name "items.js".
Next, Open up and update your node-ex-api/routes/items.js file with

below code:
// import required essentials
// create new router
const router = express.Router();
// create a JSON data array

let data = [
{ id: 1, title: 'Create a project', order: 1, completed:
true, createdOn: new Date() },
{ id: 2, title: 'Take a cofféé', order: 2, completed:
{ id: 3, title: 'Write new article', order: 3, completed:
{ id: 4, title: 'Walk toward home', order: 4, completed:
false, createdOn: new Date() },
{ id: 5, title: 'Have some dinner', order: 5, completed:
false, createdOn: new Date() },
];
// this end-point of an API returns JSON data array

router.get('/', function (req, res) {
res.status(200).json(data);
});
// this end-point returns an object from a data array find by id

// we get ìd` from URL end-points
router.get('/:id', function (req, res) {
// find an object from `data` array match by ìd`
let found = data.find(function (item) {
return item.id === parseInt(req.params.id);
});
// if object found return an object else return 404 not-found
if (found) {
res.status(200).json(found);
} else {
res.sendStatus(404);
}
});
module.exports = router;
🌞 See below ↓↓
Register API endpoints
Let’s register it in the "server.js" file to make use of new endpoints.
Do not forget to install CORS.

Open your terminal in the "node-ex-api" folder and run this
command:
npm install cors
Now, open up your node-ex-api/server.js file and modify with below

code:
// import required essentials
const http = require('http');
var cors = require('cors');// import ìtems` from `routes` folder
const itemsRouter = require('./routes/items');
// create new app

// use it before all route definitions
// allowing below URL to access these APIs end-points
// you can replace this URL(http://localhost:8100) with your
// application URL from where you are calling these APIs
app.use(cors({origin: 'http://localhost:8100'}));
/* this '/items' URL will have two end-points:

→ localhost:3000/items/ (this returns array of objects)
→ localhost:3000/items/:id (this returns single object)
*/
app.use('/items', itemsRouter);
// default URL to API

app.use('/', function(req, res) {
res.send('node-ex-api works :-)');
});
const server = http.createServer(app);

const port = 3000;
server.listen(port);
console.debug('Server listening on port ' + port);
🌞 See below ↓↓
The "items.js" and "server.js" file will look like this ↑
Run API endpoints

Now, run npm start if your server is not running. This time we have
three end-points:
→ localhost:3000 (Default)
→ localhost:3000/items (Returns all objects)
→ localhost:3000/items/1 (Returns single object of id=1)
🌞 See browser below ↓
Click image 👆 If you can’t see this.
12.Create a react application for the student management system having registration, login,
contact, about pages and implement routing to navigate through these pages.
Create the project folder containing two sub-folders named client

and server.
mkdir auth-system
cd auth-system
mkdir client server
Navigate into the server folder and create a package.json file.

cd server & npm init -y
Install Express.js, CORS, and Nodemon.

npm install express cors nodemon
Express.js is a fast, minimalist framework that provides several

features for building web applications in Node.js. CORS is a Node.js
package that allows communication between different
domains. Nodemon is a Node.js tool that automatically restarts the
server after detecting file changes.
Create an index.js file - the entry point to the web server.

touch index.js
Set up a simple Node.js server as below:

const express = require("express");
const cors = require("cors");
const PORT = 4000;
app.use(express.urlencoded({ extended: true }));

app.use(cors());
app.get("/api", (req, res) => {

res.json({ message: "Hello world" });
});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
Building the app user interface
In this section, we'll build the user interface for the application
allowing users to register and sign in to an application. Users can
create an account, log in, and perform 2FA via SMS before they are
authorised to view the dashboard.
Create a new React.js project within the client folder.

cd client
npx create-react-app ./
Delete the redundant files such as the logo and the test files from the
React app, and update the App.js file to display Hello World as below.
function App() {
return (
<div>
<p>Hello World!</p>
</div>
);
}
export default App;
Navigate into the src/index.css file and copy the code below. It contains
all the CSS required for styling this project.
@import url("https://fonts.googleapis.com/css2?
family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Space Grotesk", sans-serif;
}
input {
height: 45px;
padding: 10px 15px;
}
button {
width: 200px;
outline: none;
border: none;
padding: 15px;
cursor: pointer;
font-size: 16px;
}
.login__container,
.signup__container,
.verify,
.dashboard {
width: 100%;
min-height: 100vh;
padding: 50px 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
.login__form,
.verify__form,
.signup__form {
width: 100%;
display: flex;
flex-direction: column;
}
.loginBtn,
.signupBtn,
.codeBtn {
background-color: green;
color: #fff;
}
.signOutBtn {
background-color: #c21010;
color: #fff;
}
.link {
cursor: pointer;
color: rgb(39, 147, 39);
}
.code {
width: 50%;
text-align: center;
}
.verify__form {
}
@media screen and (max-width: 800px) {

.login__container,
.signup__container,
.verify {
padding: 30px;
}
}
Install React Router - a JavaScript library that enables us to navigate

between pages in a React application.
npm install react-router-dom
Create a components folder within the React app containing

the Signup.js, Login.js, PhoneVerify.js and Dashboard.js files.
mkdir components
cd components
touch Signup.js Login.js PhoneVerify.js Dashboard.js
Update the App.js file to render the newly created components on
different routes via React Router.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./components/Login";
import Signup from "./components/Signup";
import Dashboard from "./components/Dashboard";
import PhoneVerify from "./components/PhoneVerify";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Login />} />
<Route path='/register' element={<Signup />} />
<Route path='/dashboard' element={<Dashboard />} />
<Route path='phone/verify' element={<PhoneVerify />} />
</Routes>
</BrowserRouter>
);
}
export default App;

The Login page
Copy the code below into the Login.js file. It accepts the email and
password from the user.
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const Login = () => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const handleSubmit = (e) => {

e.preventDefault();
console.log({ email, password });
setPassword("");
setEmail("");
};
const gotoSignUpPage = () => navigate("/register");
return (
<div className='login__container'>
<h2>Login </h2>
<form className='login__form' onSubmit={handleSubmit}>
<label htmlFor='email'>Email</label>
<input
type='text'
id='email'
name='email'
value={email}
required
onChange={(e) => setEmail(e.target.value)}
/>
<label htmlFor='password'>Password</label>
<input
type='password'
name='password'
id='password'
minLength={8}
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button className='loginBtn'>SIGN IN</button>
<p>
Don't have an account?{" "}
<span className='link' onClick={gotoSignUpPage}>
Sign up
</span>
</p>
</form>
</div>
);
};
export default Login;

The Sign up page
Copy the code below into the Signup.js file. It accepts the email,
username, telephone, and password from the user.
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const Signup = () => {

const [email, setEmail] = useState("");
const [username, setUsername] = useState("");
const [tel, setTel] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const handleSubmit = (e) => {

e.preventDefault();
console.log({ email, username, tel, password });
setEmail("");
setTel("");
setUsername("");
setPassword("");
};
const gotoLoginPage = () => navigate("/");
return (
<div className='signup__container'>
<h2>Sign up </h2>
<form className='signup__form' onSubmit={handleSubmit}>
<label htmlFor='email'>Email Address</label>
<input
type='email'
name='email'
id='email'
value={email}
required
onChange={(e) => setEmail(e.target.value)}
/>
<label htmlFor='username'>Username</label>
<input
type='text'
id='username'
name='username'
value={username}
required
onChange={(e) => setUsername(e.target.value)}
/>
<label htmlFor='tel'>Phone Number</label>
<input
type='tel'
name='tel'
id='tel'
value={tel}
required
onChange={(e) => setTel(e.target.value)}
/>
<label htmlFor='tel'>Password</label>
<input
type='password'
name='password'
id='password'
minLength={8}
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button className='signupBtn'>SIGN UP</button>
<p>
Already have an account?{" "}
<span className='link' onClick={gotoLoginPage}>
Login
</span>
</p>
</form>
</div>
);
};
export default Signup;

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
//PAGE LOAD//
//*** GET SAVED ITEMS FROM LOCAL STORAGE ***//
let savedSearchArray =
JSON.parse(localStorage.getItem('savedSearchArray'));
if (!savedSearchArray) {
savedSearchArray = [
'Columbus',
'Bend',
'Los Angeles',
'San Francisco',
'Savannah',
'New York',
'Nashville'
];
}
// Define Global Date Variables

// Moment.js
let time = document.querySelector('#time');
time.textContent = moment().format('h:mm a');
let today = document.querySelector('#today');
today.textContent = moment().format('MMM D');
let tomorrow = document.querySelector('#date_1');

tomorrow.textContent = moment().add(1, 'days').format('ddd');
let tomorrow2 = document.querySelector('#date_2');
tomorrow2.textContent = moment().add(2, 'days').format('ddd');
// Define variables for getCurrent function

const searchBtnEl = document.querySelector('#search-btn');
const searchInputEl = document.querySelector('#search-input');
// Define getCurrent function to access current weather conditions

function getCurrent(searchInputEl) {
// Current Weather Data API call

const currentWeatherUrl =
'https://api.openweathermap.org/data/2.5/weather?q=' + searchInputEl +
'&units=imperial&appid=c6a9bf78cf3b504fe7e8382ca53765c4';
fetch(currentWeatherUrl).then(function (response) {
if (response.ok) {
response.json().then(function (data) {
console.log(data)
// Append data from API to DOM

const cityName = document.querySelector('#city-name');
cityName.textContent = data.name;
const icon = document.querySelector('#current-icon');
const iconCall = data.weather[0].icon;
icon.setAttribute('src', 'http://openweathermap.org/img/wn/'
+iconCall+ '.png');
const temp = document.querySelector('#current-temp');

temp.innerHTML = Math.round(data.main.temp) + `º`;
const description = document.querySelector('#desc');

description.textContent = data.weather[0].main;
const humidity = document.querySelector('#current-humid');

humidity.innerHTML = 'Humidity: ' + data.main.humidity +
` %`;
const windSpeed = document.querySelector('#current_wind');

windSpeed.textContent = 'Wind Speed: ' + data.wind.speed + '
mph';
//call function to render 5 day forecast in this function for access to

latitude and longitude from city search in current weather function
getForecast(data.coord.lat, data.coord.lon);
//access uv index from onecall used for 5 day forecast

})
}
})
};
//define function to get 5 day forecast //access lat and lon from previous
function
//use one call API instead of 5 day forecast //better accessibility to needed
information
function getForecast(latitude, longitude) {
const forecastUrl = 'https://api.openweathermap.org/data/2.5/onecall?lat='
+ latitude + '&lon=' + longitude +
'&units=imperial&exclude=hourly,minutely&appid=c6a9bf78cf3b504fe7e8
382ca53765c4';
fetch(forecastUrl).then(function (response) {
if (response.ok) {
response.json().then(function (data) {
console.log(data)
//append uv data to current conditions div

const uvIndex = document.querySelector('#current_uv');
uvIndex.textContent = 'UV Index: ' + data.current.uvi;
// Render icons for each day in forecast

// Note: Must use <img> tag in html to use .setAttribute method to
set the img src
const icon1 = document.querySelector('#icon1');
const icon1Call = data.daily[1].weather[0].icon;
icon1.setAttribute('src', 'http://openweathermap.org/img/wn/'
+icon1Call+ '@2x.png');




//description forecast
//TODO: for loop
const desc1 = document.querySelector('#desc_1');
desc1.innerHTML = (data.daily[1].weather[0].main);
//temp forecast
//TODO for loop
// for (i = 0; i < forecast.length; i++)
const temp1 = document.querySelector('#temp_1');
temp1.innerHTML = Math.round(data.daily[1].temp.day) +
`º`;
`º`;
`º`;
`º`;
`º`;
//humidity forecast
//TODO for loop
// for (i = 0; i < forecast.length; i++)
const humid1 = document.querySelector('#humid_1');
humid1.innerHTML = (data.daily[1].humidity) + `%`;
})
}
})
};
//select each search history list item
const searchHistCon = document.querySelector('#search-history-list')
const searchedItemEl = searchHistCon.querySelectorAll('li.search-history-
item');
console.log(searchedItemEl);
//define function to render search history

function renderSearchHistory() {
//clear previous selection before appending
for (i = 0; i < savedSearchArray.length; i++) {
const newSearchedItem = document.createElement('li');

newSearchedItem.classList.add('search-history-item');
newSearchedItem.textContent = savedSearchArray[i];
newSearchedItem.addEventListener('click', function (event) {

let newUserInput = event.target.innerText;
getCurrent(newUserInput);
})
if (newSearchedItem.textContent !== "") {

searchHistCon.prepend(newSearchedItem);
}
}
}
//add event listener to search button

searchBtnEl.addEventListener('click', function (event) {
event.preventDefault();
//use event to access user input

console.log(event);
let userInput= searchInputEl.value;
getCurrent(userInput);
//TODO: if statement to check edge cases of misspelled cities, etc

savedSearchArray.push(userInput);
//call function to render search history within this function for access to
needed variables
renderSearchHistory();
localStorage.setItem('savedSearchArray',
JSON.stringify(savedSearchArray));
});
const searchHistoryMenuLi = document.querySelector('#search-hist-menu-

li');
searchHistoryMenuLi.addEventListener('click', renderSearchHistory());
getCurrent('Columbus');
Whether.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cs
s" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFs
pd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhn
dOJK28anvf" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200
;1,300;1,400&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;
0,600;0,700;0,800;0,900;1,100;1,200;1,300&family=Noto+Sans:ital,wght@
0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300&
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,80
0;0,900;1,100;1,200;1,300&family=Roboto:ital,wght@0,100;0,300;0,400;0,
500;0,700;0,900;1,100;1,300;1,400&family=Rubik+80s+Fade&family=Sour
ce+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
<title>Current Weather</title>
</head>
<body>
<div class="navbar">

<nav class="btn-group dropend">
<button type="button" class="btn dropdown-toggle" data-bs-
toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu" id="popout-menu">
<li class="nav-item dropdown-item" id="search-box-

txt">Search
<form class="active search-form " aria-current="page"
href="#">
<div class="input-group">
<input type="text" class="input" id="search-input">
<div class="input-group-div" id="search-btn-group">
<button class="btn btn-default" id="search-btn"
type="submit">
<i class="fas fa-search" id="search-icon"></i>
</button>
</div>
</div>
</form>
</li>
<li id="search-hist-menu-li" class="nav-item dropdown-item">

History
<ul id="search-history-list">

</ul>
</li>



</ul>
</nav>
</div>
<main class="d-flex flex-column gy-2">


<div class="container" id="current-conditions">
<div class="d-flex flex-column align-items-center">
<div class="" id="time"></div>
<div class="" id="today"></div>
<div class="display-1" id="current-temp"></div>

<div class="current-icon-wrapper">
<div class="lead text-muted" id="desc"></div>
<img class="display-1" id="current-icon"/>
</div>
</div>
<div class="hidden">
<div class="" id="current-humid"></div>
<div class="" id="current_wind">Wind Speed: </div>
<div class="" id="current_uv">UV Index: </div>
</div>
</div>


<div class="forecast-content-wrapper container d-flex flex-row
justify-content-center" id="week-forecast">
<div class="forecast-card">
<div class="day" id="date_1"></div>
<div class="temperature" id="temp_1"></div>
<div class="description" id="desc_1"></div>
<img class="weather-icon" alt="weather-icon"
id="icon1"></img>
<div class="humidity" id="humid_1"></div>
</div>


id="icon2"></img>
</div>


id="icon3"></img>
</div>


id="icon4"></img>
</div>


id="icon5"></img>
</div>
</div>
<div class="text-muted container" id="city-name">Search a
City</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcX
n/tWtIaxVXM" crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></
script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js
"></script>
<script src="assets/script.js"></script>
</body>
</html>
14.Create a TODO application in react with necessary components and
deploy it into github.
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>Todo List</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>
</html>
App.js file:-
import
React
from
"react";
import "./App.css";
import { Button, Card, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function Todo({ todo, index, markTodo, removeTodo }) {

return (
<div
className="todo"
>
<span style={{ textDecoration: todo.isDone ? "line-through" :
"" }}>{todo.text}</span>
<div>
<Button variant="outline-success" onClick={() =>
markTodo(index)}>✓</Button>{' '}
<Button variant="outline-danger" onClick={() =>
removeTodo(index)}>✕</Button>
</div>
</div>
);
}
function FormTodo({ addTodo }) {

const [value, setValue] = React.useState("");
const handleSubmit = e => {

e.preventDefault();
if (!value) return;
addTodo(value);
setValue("");
};
return (
<Form onSubmit={handleSubmit}>
<Form.Group>
<Form.Label><b>Add Todo</b></Form.Label>
<Form.Control type="text" className="input" value={value} onChange={e =>
setValue(e.target.value)} placeholder="Add new todo" />
</Form.Group>
<Button variant="primary mb-3" type="submit">
Submit
</Button>
</Form>
);
}
function App() {
const [todos, setTodos] = React.useState([
{
text: "This is a sampe todo",
isDone: false
}
]);
const addTodo = text => {

const newTodos = [...todos, { text }];
setTodos(newTodos);
};
const markTodo = index => {

const newTodos = [...todos];
newTodos[index].isDone = true;
setTodos(newTodos);
};
const removeTodo = index => {

const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<div className="app">
<div className="container">
<h1 className="text-center mb-4">Todo List</h1>
<FormTodo addTodo={addTodo} />
<div>
{todos.map((todo, index) => (
<Card>
<Card.Body>
<Todo
key={index}
index={index}
todo={todo}
markTodo={markTodo}
removeTodo={removeTodo}
/>
</Card.Body>
</Card>
))}
</div>
</div>
</div>
);
}
export default App;
1. React: A popular JavaScript library developed by Facebook which is used to create

and handle flexible components for the user interface.
2. Git: An amazing open-source version control system to handle small and large
projects. It is used to collaborate with other developers and to keep track of changes in
source code during software development.
3. GitHub: A code hosting platform for collaboration and version control. It is used to
work and store web development projects.
4. Github Pages: It allows you to turn your GitHub repositories into an elegant
website to showcase your portfolio, projects, documentation, or anything else you
want to make live but remember that there is no database to set up and no server to
configure.
5. NodeJS and npm: Node.js is a server runtime environment for running Javascript
on the server and npm is a package manager used to download and install different
packages for JavaScript projects.
Prerequisites
1. Download Git and go through the default installation process.

2. An adequate version of NodeJS and npm should be installed. Here is the command
to check the installation and version.
$ node --version
$ npm --version
3. An adequate version of create-react-app is installed. Here is the command to check
the installation and version.
$ create-react-app --version
If it’s not installed then use the command below to install it globally.
$ npm install -g create-react-app
4. A GitHub account.
Now The Real Fun Begins (Procedure)
1. Firstly create a React application in your system using the command given below.
We are giving the name “react-deploy” to this application. This is the app you will
deploy to GitHub Pages. This process will create a new folder named “react-deploy”
in your directory.
$ create-react-app react-deploy
2. Now enter your new application and run the following command to start the
application. You will see your application is running on a local development
server http://localhost:3000.
#change directory
$ cd react-deploy
#run application in the development environment
$ npm start
3. After checking that your application runs perfectly without any error on a local
server, create a new repository on GitHub. We are giving this name “my-app” which is
different from the application name you have created in the previous step. However,
you can also choose the same name i.e. “react-deploy” for your GitHub repository
name. It’s totally up to you.
4. Install the gh-pages package as a “dev-dependency” of the app.

#install gh-pages package
$ npm install --save gh-pages
5. Add some properties to the app’s package.json file. At the top level, add a
homepage property. Define its value to be the
string http://{username}.github.io/{repo-name}, where {username} is your GitHub
username, and {repo-name} is the name of the GitHub repository (my-app) you
created in step 3.
Take a look at the example given below…
"homepage": "http://anuupadhyay.github.io/my-app",
Now you need to add two more properties. In the existing scripts property, add
a predeploy property and a deploy property, each having the values shown below:
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
//...
"build": "react-scripts build && cp build/index.html
build/404.html", // this will prevent page reloads to give a 404
error
}
Once the above thing is done your file package.json will look something like this…
Next, if you are using the Router from react-router-dom then you need to change the
Browser router tags to
//...
BrowserRouter basename={process.env.PUBLIC_URL}
//...
6. In this step create a git repository in the app’s folder and add the GitHub repository
as a “remote” in your local git repository. This will make it so the gh-pages package
knows where you want it to deploy your app in step 7. It will also make it so git knows
where you want it to push your source code (i.e. the commits on your master branch)
in step 8.
#create a new git repository
$ git init
#add remote repository
$ git remote add origin https://github.com/anuupadhyay/my-app.git
7. Now here is the magic. Follow the command below and generate a production build
of your app, to deploy your code on GitHub pages.
#deploy application
$ npm run deploy
That’s it. Your React application is published on GitHub pages and if you want to
verify it just go to the settings tab of your application in your Github repository and
scroll down. You will see something like below…
In our case, the app is accessible at: https://anuupadhyay.github.io/my-app/

8. At this point, if you will explore the GitHub repository you will notice that the
master branch did not exist, a gh-pages branch did exist. It means the latter contained
the built app code, as opposed to the app’s source code. So to create a default master
branch and push your source code to it run the command given below…
#add all changed file paths to staged changes
$ git add .
#commit all staged changes
$ git commit -m "Create a React app and publish it to GitHub Pages"
#pushed local repository to remote repository on GitHub
$ git push origin master
After this last step once again explores the GitHub repository. You will notice that a
master branch now existed, and it contained the app’s source code. You will see
something like below in your GitHub repository.

Node Js - React Js - Django Lab

Uploaded by

Copyright:

Available Formats

Node Js - React Js - Django Lab

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Node Js - React Js - Django Lab

Uploaded by

Copyright:

Available Formats

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda, Dhulapally (post & via Kompally), Secunderabad-500 100.

Department of Computer Science and Engineering

ACADEMIC YEAR: 2023-24

Prerequisites: Object Oriented Programming through Java, HTML Basics

Software Requirement: JDK, Tomcat Server, PHP and WAMP Server

At the end of the course, students will be able to:

<span><a href="index.html"><i class="fas fa-shopping-bag"></i>shopping

<li><span onclick="openBucket()"><i class="fas fa-shopping-cart"></i></span>

<span onclick="openBucket()" class="cart-icon"><i class="fas fa-shopping-

<header> <span><a href="index.html"><i class="fas fa-shopping-bag"></i>

const top_items_count = document.querySelector('.items-count'),

// ========== Checking type of password ===========

SignIn : login.html <!DOCTYPE HTML>

// ========== Checking type of password ===========

Shopping cart: fruit-aisle.html (shopping fruits)

<span><a href="index.html"><i class="fas fa-shopping-bag"></i> Shopify

<span onclick="openBucket()" class="cart-icon"><i class="fas fa-shopping-

<div class="items item-1" data-item="Apples" data-price="100"></div>

<div class="items item-3" data-item="Strawberries" data-price="300"></div>

<div class="items item-4" data-item="Bananas" data-price="400"></div>

<header> <span><a href="index.html"><i class="fas fa-shopping-bag"></i>

@media (min-width: 0px) and (max-width: 425px) {

section > nav > ul {

.fruits-side > span {

.fruits-side > button {

.cart > main > ol > li:nth-child(1) {

@media (min-width: 426px) and (max-width: 1023px) {

section > nav > span {

section > nav > ul > li > a {

.fruits-side > button {

.cart > main > ol > li:nth-child(1) {

section > footer {

section > footer > ul > li {

section > nav {

section > nav > span {

section > nav > span > a > i {

section > nav > ul {

section > nav > ul > li > a {

section > nav > ul > li > a > i {

.fruits-side > span {

.fruits-side > button {

.fruits-side > button > a {

.fruits-side > button:hover {

.fruits-side > button > a > i {

.cart > header {

.cart > header > span {

.cart > header > span > a > i {

.cart > main {

.cart > main > ol {

.cart > main > ol > li {

.cart > main > section {

.cart > main > section > ul > li {

section > nav {

section > nav > span {

section > nav > span > a > i {

section > nav > ul {

section > nav > ul > li {

section > nav > ul > li > a {