Scribd
Upload
44 views

R22 SkillDevelopmentCourse

Uploaded by

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

R22 SkillDevelopmentCourse

Uploaded by

226f1a6218
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

R22 B.Tech.

CSE (Cyber Security) Syllabus JNTU Hyderabad

SKILL DEVELOPMENT COURSE (NODE JS/ REACT JS/ DJANGO)

B.Tech. II Year II Sem. LTPC


0021

Prerequisites: Object Oriented Programming through Java, HTML Basics.

Course Objectives:
● To implement the static web pages using HTML and do client side validation using JavaScript.
● To design and work with databases using Java.
● To develop an end to end application using java full stack.
● To introduce Node JS implementation for server side programming.
● To experiment with single page application development using React.

Course Outcomes:
At the end of the course, the student will be able to,
● Build a custom website with HTML, CSS, and Bootstrap and little JavaScript.
● Demonstrate Advanced features of JavaScript and learn about JDBC
● Develop Server – side implementation using Java technologies like
● Develop the server – side implementation using Node JS.
● Design a Single Page Application using React.

Exercises:
1. Build a responsive web application for shopping cart with registration, login, catalog and cart
pages using CSS3 features, flex and grid.
2. Make the above web application responsive web application using Bootstrap framework.
3. Use JavaScript for doing client – side validation of the pages implemented in experiment 1 and
experiment 2.
4. Explore the features of ES6 like arrow functions, callbacks, promises, async/await. Implement
an application for reading the weather information from openweathermap.org and display the
information in the form of a graph on the web page.
5. Develop a java standalone application that connects with the database (Oracle / mySql) and
perform the CRUD operation on the database tables.
6. Create an xml for the bookstore. Validate the same using both DTD and XSD.
7. Design a controller with servlet that provides the interaction with application developed in
experiment 1 and the database created in experiment 5.
8. Maintaining the transactional history of any user is very important. Explore the various session
tracking mechanism (Cookies, HTTP Session)
9. Create a custom server using http module and explore the other modules of Node JS like OS,
path, event.
10. Develop an express web application that can interact with REST API to perform CRUD
operations on student data. (Use Postman)
11. For the above application create authorized end points using JWT (JSON Web Token).
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 using
chart.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, 2nd
Edition, 2008.
3. Vasan Subramanian, Pro MERN Stack, Full Stack Web App Development with Mongo,
Express, React, and Node, 2nd Edition, A Press.
1. Build a responsive web application for shopping cart with registration, login, catalog and cart
pages using CSS3 features, flex and grid.

HTML:

 HTML stands for HyperText Markup Language.


 It is the standard language used to create and design web pages on the internet.
 It was introduced by Tim Berners-Lee in 1991 as a simple markup language. Since then, it has
evolved through versions from HTML 2.0 to HTML5 (the latest 2024 version).
 HTML is a combination of Hypertext and Markup language.
 Hypertext defines the link between the web pages and Markup language defines the text
document within the tag.

index.html

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

login.html

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

registration.html

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

CSS:
 CSS is the acronym for "Cascading Style Sheet".
 It's a style sheet language used for describing the presentation of a document written in a
markup language like HTML.
 CSS helps the web developers to control the layout and other visual aspects of the web
pages.
 CSS plays a crucial role in modern web development by providing the tools necessary to
create visually appealing, accessible, and responsive websites.

style.css
body{
font-family: monospace;
}

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

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

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

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

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

.sidebar2{
margin-left: 10px;
}

.container1{
display: flex;
}

.container2 {
display: flex;
flex-direction: column;
flex: 1;
}
header, nav, main, .sidebar1, .sidebar2, footer{
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}

.wrapper {
display: flex;
flex-direction: column;
font-weight: 600;
}
Output:

index.html

login.html
registration.html

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

Bootstrap:

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive,
mobile-first websites.

 Bootstrap is completely free to download and use.


 Front end languages like HTML, CSS, and JavaScript for this framework, as it holds the
libraries for these languages. You must import the bootstrap CSS and JS files to use the
framework in your project.

Framework:
A framework, or software framework, is a platform that provides a foundation for developing
software applications. Think of it as a template of a working program that can be selectively
modified by adding code. It uses shared resources – such as libraries, image files, and reference
documents – and puts them together in one package. That package can be modified to suit the
specific needs of the project. With a framework, the developer can add or replace features to give
new functionality to the application.

Back-End Web Frameworks:


Back-end web frameworks, or just web frameworks, are the most commonly used programming
frameworks. Web frameworks assist developers in making web applications and dynamic
websites.
Common back-end web frameworks include:
 Django – an open-source Python web development framework.
 Rails – another open-source framework written in the Ruby Language, a programming language
designed specifically to be easy to use. Rails is used to run websites like Airbnb, Github, and
Shopify.

Front-End Frameworks:
Where back-end web frameworks are loaded on a server, front-end frameworks are executed in a
user’s browser. They allow web developers to design what the users see on the website, things like
the management of AJAX requests, defining file structures, and styling the website’s components

The most common front-end frameworks are:


 Angular JS – a front-end JavaScript framework. It was developed and is supported by Google.
 React – another front-end JavaScript framework developed by the team at Facebook to help them
make changes to the site’s code easily.
 Bootstrap – a front-end CSS framework that is a collection of reusable HTML, CSS, and
JavaScript code. Having all this code pre-defined in a downloadable file allows for developers and
designers to save time creating fully-responsive websites.
Mobile Development Frameworks:
With the rise of mobile rapidly gaining traction, mobile development frameworks have seen an
equally impressive uptick. Like their desktop counterparts, mobile development frameworks give
developers a structure that supports the mobile app-building process.
Common mobile development frameworks are:
 Flutter – A cross-platform app framework that forms native code, meaning you can use one
programming language and code base to create an app for both Apple and Android. It was
developed by Google and is free and open-source.
 React Native – A cross-platform app framework that also forms a native code developed by the
team at Facebook. It was created with both JavaScript and ReactJS programming languages and
comes with ready-made components that can save developers time as they don’t have to create
elements from scratch.

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

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

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

Styles.css:

/* You can include additional custom styles here if needed */

Explanation:
1. Bootstrap Integration: In the <head> section, we added links to the Bootstrap CSS and JS files
from a CDN (Content Delivery Network). This allows us to use Bootstrap's styling and
functionality.
2. Bootstrap Classes: We applied Bootstrap classes to the HTML elements. For example, we used
container to create a responsive fixed-width container and various utility classes for styling the
header and navigation.
3. Responsive Navigation: Bootstrap's grid system and utility classes help in creating a Responsive
navigation bar. The justify-content-center class is used to center the navigation links.
4. Responsive Main Content: The container class ensures that the main content area is responsive.
Bootstrap will automatically adjust the width based on the screen size.

Output:
 When you open index.html in a web browser, you'll see that the web application is now
responsive.
 The Bootstrap framework takes care of making the layout adapt to different screen sizes,
providing a more user-friendly experience on various devices.
 Remember to test the responsiveness by resizing your browser or using different devices
to see how the layout adjusts.
3. Use JavaScript for doing client – side validation of the pages implemented in experiment 1 and
experiment 2.

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

Output:

You might also like