CS650305-Web Application Development laboratory

L T P C
Course Category:Programme Core Course Type:Practical
0 0 3 1.5
COURSEOBJECTIVES:
 To understand the basic concepts of HTML tags
 To learn how to embedded CSS and JS with HTML
 To understand the concepts of ReactJS
 To understand the usage of JQuery.
 To learn about application development with database
Pre-requisites, if any: Basic Knowledge about Web development

LISTOFEXPERIMENTS:

1. Create a simple website for your college. Use various basic formatting tags, Hyperlinks, lists,
tables and frames.
2. Develop static pages (using only HTML) of an online Book store. The website should consist
of the following pages. Home page, Registration and user Login, Books catalog, Shopping cart,
Payment by credit card, order Confirmation.
3. CreateawebpageusingHTML.
I. To embed an image map in a webpage.
II. To fix the hot spots.
III. Showalltherelatedinformationwhenthehotspotsareclicked.
4. Write a program to create a website using HTML,CSS and Java
Script
5. Write a program to build a Chat module using HTML , CSS and JavaScript
6. Create a Simple Login form using Reactjs
7. Write a program to create a simple calculator Application using React JS
8. Write a program to create a voting application using React JS
9. Write a program to create and Build a Password Strength Check using Jquery
10. Create a project on Grocery delivery application
11. Connecting our TO DO ReactJS Project with Firebase

TOTAL:30PERIODS
COURSE OUTCOMES:At the end of the course, the student will be able to,
CO1:Understand the various HTML tags for creating website.
CO2: Implement a program with HTML,CSS and JavaScript.
CO3:Implement a program by using React JS.
CO4:Create web application with validation.
CO5:Create a web or mobile application and launching concept.
CO-POMAPPING
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2
CO1 1 2 2 1 1 1
CO2 2 2 2 1 2 2
CO3 2 3 3 2 2 2
CO4 3 2 2 3 3
CO5 2 2 2 3 3 3
1-low,2 -medium, 3- high, ‘-'nocorrelation
HardwareRequirements:

 Processor:Recommended 2GHz or more

 Ethernet connection (LAN)
 Hard Drive:64 GB or more
 Memory(RAM):4 GB orabove

SoftwareRequirements:

 Windows Operating System.

 Web Browser: Google Chrome
 My SQL Server (back-end)

TEXTBOOKS:
1. Prakash Mahanwar,“WEB PROGRAMMING”,UNIVERSITY OF MUMBA,May2021.
2. John Dean,”Web Programming with HTML5,CSS, and JavaScript”,Jones & Bartlett Learning,
Jan2018.
REFERENCEBOOKS:
1. Chris Bates,“Web Programming Building Internet Applications”,Third Edition,Sheffield Hallam
University,2012.
2. Boryana Deliyska,”Introduction to Web Programming”, November 2018.
3. John Dean, “Web Programming with HTML, CSS and JavaScript”, Jones & Bartlett
Learning, Park University, 2019.
WEBRESOURCES:

1. https://mrcet.com/pdf/Lab%20Manuals/Full%20Stack%20Lab.pdf
2. https://mjcollege.ac.in/documents/wp-lab-manual.pdf

VIRTUAL PLATFORM:

1. https://fliplet.com/blog/9-web-application-development-platforms-to-build-a-free-web-app/

2. https://www.zoho.com/creator/application-development/web.html

3. https://code.org/educate/weblab
1. Create a simple web site for your college. Use various basic formatting tags, Hyperlinks,
lists, tables and frames.

AIM:

To create a simple webpage using HTML that includes all tags.

ALGORITHM:

1. Write a HTML program in the notepad with the tags such as

A. FRAMES:

With frames, you can display more than one HTML document in the same browser

window. Each HTML document is called a frame, and each frame is independent of the others.

The Frameset Tag

The <frameset> tag defines how to divide the window into frames.

The Frame Tag

The <frame> tag defines what HTML document to put into each frame.

Example:

<frameset cols="25%, 75 %">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>

Tags and their Description:

<frameset> Defines a set of frames

<frame> Defines a sub window (a frame)

B. LINKS

A hyperlink is a reference (an address) to a resource on the web.

Example:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The href attribute defines the link "address".

The target Attribute

The target attribute defines where the linked document will be opened.

Tag and its Description:

<a> defines an anchor

C. TABLES

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell.

Example:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

Tags and their Description:

<Table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

2. Use appropriate tags to apply the background colors and desired styles as Required and save
the file with .html extension.

3. Run the program in the Web Browser.

PROGRAM:

Home.html

<html>

<head>

<title>Home</title>

</head>

<frameset rows="25%,*">

<frame src="frame1.html">

<frameset cols="25%,*">

<frame src="frame2.html" name="f2">

<frame src="frame3.html" name="f3">

</frameset>

</html>

Frame1.html

<html>

<head><title>frame1</title>

</head>

<body bgcolor="blue">

<h1 style="color.green;font-size:15pt">

<marquee bgcolor="#cccccc" loop="-1" scrollamount="6" width="100%">

THIRUVALLUVAR COLLEGE OF ENGINEERING AND

TECHNOLOGY </marquee>

</h1>

</body>

</html>
<style type="text/css">h1

Frame2.html

<html>

<head><title>frame2</title>

font-size:25pt;color:pink;

</style>

</head>

<body bgcolor="red">

<h1>click the link</h1>

<a href="intro.html" target=f3>Introduction</a><br>

<a href="dept.html" target=f3>Departments</a><br>

<a href="ad.html" target=f3>ADDRESS</a><br>

<a href="feed.html" target=f3>Feedback</a><br>

<a href="gall.html" target=f3>Gallery</a><br>

</body>

</html

Frame3.html

<html>

<head><title>1st page</title>

<link rel="stylesheet" type="text/css" href="C:\Documents

andSettings\Administrator\Desktop\ab\css1.css"/>

</head>

<body bgcolor="tan">
<h2> <center>YOU ARE IN HOME PAGE</center></h2>

</body>

</html>

Intro.html

<html>

<head><title>intro</title>

</head>

<body bgcolor="black">

<font color=red>

<p>

Welcome to Thiruvalluvar College of Engineering and Technology -Affiliated to Anna

University<br>

<br>

“Thiruvalluvar College of Engineering and Technology resolves to moulda human task force
useful to the society through transparent methods that lead to continuous improvement of the
resources and state-of-the-art methodologies conforming to recognized standards.”

</p>

</font>

</body>

</html>

Ad.html

<html>

<head><title>ADDRESS</title>

</head>

<body bgcolor="black">

<p>
<font color=red>

Name:Thiruvalluvar College of Engineering and Technology<br>Location:Vandavasi<br>

Contact No:04183-221444<br>

Website: www.google.co.in<br>

</font>

</p>

</body>

</html>

Dept.html

<html>

<head><title>Departments</title>

</head>

<body>

<div align="center">

<table border=2>

<tr>

<th>Dept code</th>

<th>Dept name</th>

</tr>

<tr>

<td>01</td>

<td>CSE</td>

</tr>

<tr>

<td>02</td>
<td>ECE</td>

</tr>

<tr>

<td>03</td>

<td>EEE</td>

</tr>

<tr>

<td>04</td>

<td>IT</td>

</tr>

<tr>

<td>05</td>

<td>MECH</td>

</tr>

<tr>

<td>06</td>

<td>AERO</td>

</tr>

</table>

</div>

</body>

</html>

Feed.html

<html>

<head><title>feed</title>
</head>

<body bgcolor="black">

<p>

<font color=green>

To give your feedback mail to [email protected]

</font>

</p>

</body>

</html>

Gall.html

<html>

<head><title>gall</title>

</head>

<body bgcolor="pink">

<p>

<font color=blue> College Front View</font>

</p>

<img src="file:///d:/google.JPG" height="300" width="400"/>

</body>

</html>
OUTPUT:
Program Outcomes:

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

Rubrics:

Aim & Coding & Observation &

Result & Viva Total
Algorithm Output Record

RESULT:

Thus the HTML pages are created using frames, links, tables and other tags and have

been successfully executed.

2. Develop static pages (using only HTML) of an online Book store.

The website should consist of the following pages: Home page, Registration and user
Login, Books catalog, Shopping cart, Payment by credit card, order confirmation.

AIM:

To create a simple webpage using HTML that includes all tags.

ALGORITHM:

1. Write a HTML program in the notepad with the tags such asHome page

Main.html:

<html>

<head>

<title> Amazon</title>

</head>

<body bgcolor="cyan"> <center>

<strong><h1>Welcome to AMAZON</h1></strong>

<form method="post" action="login.html" target=_blank >

<h4>for books</h4><input type="submit" value="click here">

</form>

</center>

</body>

</html>

Registration and user Login

Login.html:

<html>

<head>
<title> login</title>

</head>

<body bgcolor="cyan"> <center>

<strong><h1> AMAZON </h1></strong></center>

<right>

<table align="right">

<tr>

<td><h4>user name</td>

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

<td></td>

</tr>

<tr>

<td><h4>password</td>

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

<td></td>

</tr>

<tr>

<td>

<form method="post" action="catalog.html" >

<input type="submit" value="submit" >

</form>

</td>

<td>

<form method="post" action="reg.html" >

<input type="submit" value="register" >&nbsp;&nbsp;

<input type="reset" value="reset"></form></td>

</tr>

</table>

</body>

</html>

Registration page

reg.html:

<html>

<head>

<title> login page</title>

</head>

<body bgcolor="cyan">

<center><strong><h1> AMAZON </h1></strong></center>

<form method="post" action="catalog.html" >

<right>

<table align="left">

<tr>

<td><h4>user name</td>

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

<tr>

<tr>

<td><h4>password</td>

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

</tr>

<tr>
<td><h4>confirm password</td>

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

</tr>

<tr>

<td><h4>male &nbsp;&nbsp;

<option >

<input type="radio" name="sex" id="male"></td>

<td><h4>female &nbsp; &nbsp;

<input type="radio" name="sex" id="female" ></td>

</option>

</tr>

<tr>

<td>Address</td>

<td><textarea name="address" rows=5 cols=19>

</textarea>

</td>

<tr>

<td>

<input type="submit" value="submit" ></td>

<td>

<input type="reset" value="reset"></td>

</tr>

</form>

</body>

</html>
User profile

User profile.html

<html>

<head>

<title> userprofile</title>

</head>

<body bgcolor="cyan"> <center>

<strong><h1>Welcome to AMAZON Online Book Store </h1></strong></center>Edit your

profile here...

<form method="post" action="catalog.html" >

<right>

<table align="left">

<tr>

<td><h4>Edit user name</td>

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

<tr>

<tr>

<td><h4>Edit password</td>

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

</tr>

<tr>

<option >

<td><h4>male &nbsp;&nbsp;

<input type="radio" name="sex" id="male"></td>

<td><h4>female &nbsp; &nbsp;

<input type="radio" name="sex" id="female" ></td>

</option>

</tr>

<tr>

<td>Edit Address</td>

<td><textarea name="address" rows=5 cols=19>

</textarea>

</td>

<tr>

<td>

<input type="submit" value="submit" ></td>

</tr>

</form>

</body>

</html>

Books catalog

Catalog.html:

<html>

<head>

<title>

books catalog</title>

</head>

<body bgcolor="cyan">

<center><h1>AMAZON</h1></center>
<form method="post" action="shopping.html">

<left>

<table>

<tr>

<td><b><h3>frontend books</td>

<td></td></tr>

<tr>

<td></td>

<td><h4>C&Ds</td>

</tr>

<tr>

<td></td>

<td><h4>Ads</td>

</tr>

<tr>

<td></td>

<td><h4>JAVA

</td></tr>

<tr>

<td><b><h3>backend books</td>

<td></td>

</tr>

<tr>

<td></td>

<td><h4>Oracle</td>
</tr>

<tr>

<td></td>

<td><h4>Ms SQL Server

</td></tr>

<tr>

<td></td>

<td><h4>MySql </td>

</tr>

</table>

</h4>

<center>

<b>for buy one of these books

<br>

</b><input type="submit" value="click here">

</center>

</form>

</body>

</html> Shopping cart

Shopping.html:

<html>

<head><title>shopping cart</title>

</head>

<body bgcolor="cyan">

<center><h1> Shopping Cart</h1></center>

<br><br><br><br><br>

<table align="center">

<tr>

<td>Text Books</td>

<td>

<select >

<optgroup label="select the book">

<option value="C&Ds">C&Ds

<option value="Ads">Ads

<option value="Java">Java

<option value="Oracle">Oracle

<option value="Ms SQL Server">Ms SQL Server

<option value="MySql">MySql

</optgroup>

</select>

</td></tr>

<tr>

<td> Quantity</td>

<td>

<input type="text" id="q">

</td></tr>

<tr>

<td></td>

<td>

<form method=post action="payment.html">

<input type="submit" value=ok />

</form>

</td></tr>

</table>

<center>

<pre>Cost of one book is"500" + shipping "100"</pre>

</center>

<body>

</html>

Payment by credit card

Payment.html:

<html>

<head><title>payment</title></head>

<body bgcolor="cyan">

<center><h1>Payment By Credit Card</h1></center>

<form method=post action="ordrconform.html">

<br><br><br><br><br>

<table align="center">

<tr>

<td>

<h4>Total Amount</h4></td>

<td><input type="text">

</td>

</tr>

<tr>
<td><h4>Credit Card Number</td>

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

</tr>

<tr>

<td>

</td>

<td><input type="submit" value=OK>

</td>

</tr>

</table>

</form></body>

</html>

Order Conformation:

Order conform.html:

<html>

<head><title>order conformation</title><M/head>

<body bgcolor="cyan">

<center>

<h1><b>BOOK SHOPPING</h1>

<pre><strong>

<b>Your order Is Conformed

</strong></pre>

<h2><b>THANK YOU</h2>

</center>

</body></html>
OUTPUT:
Program Outcomes:

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

Rubrics:

Aim & Coding & Observation &

Result & Viva Total
Algorithm Output Record

RESULT:

Thus the webpage was created successfully.

3. Create a web page using HTML

i. To embed an image map in a web page

ii. To fix the hot spots

iii. Show all the related information when the hot spots are clicked.

AIM:

To write a map and fix the hotspots to show the information of it in a web page.

ALGORITHM:

1. Start the program.

2. Get the india map image and link it to the package.

<img src="flag.jpg">

<img align="right" src = "India Map.gif" usemap="#india">

3. Fix the hotspots in that image.

4. Map the reference of the hotspots in the image.

<area shape="circle" coords="274,745,20" href="tn.html">

5. Mention the derived link.

6. Click the link to get the desired image.

7. Stop the program.

SOURCE CODE:

Main.html

<html>

<head>

<BODY bgcolor="#gop6876cgdt5564ss">

<img src ="indiamap.jpeg" usemap="indiamap" />

<map name=indiamap>

<AREA SHAPE="rect" COORDS="190,477,251,562" HREF="tamilnadu.html"

target="tamilnadu.html" >

<AREA SHAPE="rect" COORDS="158,477,195,564" HREF="kerala.html"

target="kerala.html" >

<AREA SHAPE="rect" COORDS="217,378,238,472,350,361" HREF="andhra.html"

target="andhra.html" >

<AREA SHAPE="rect" COORDS="160,474,212,401,189,436" HREF="karnataka.html"

target="karnataka.html" >

<AREA SHAPE="rect" COORDS="137,382,219,311,129,331" HREF="maharashtra.html"

target="maharashtra.html" >

<AREA SHAPE="rect" COORDS="392,319,334,304,309,362," HREF="orissa.html"

target="orissa.html" >

<AREA SHAPE="rect" COORDS="232,244,238,306,168,283" HREF="madhayapradesh.html"

target="madhayapradesh.html" >

</map>

</head>

</html>

Tamiladu.html

<html>

<head>

<body bgcolor="#fggbhjgdhg"/>

<center><h2>it is a tamilnadu,here maximum tamilan living and capital of tamilnadu is

</h2><h1>chennai<h1></center>

</head>

</html>
Kerala.html

<html>

<head>

<body bgcolor="#7674dshddf"/>

<center>it is a kerala,here maximum malaiyalees living and capital of kerala is

<h1>Thiruvananthapuram</h1></center>

</head>

</html>

Karataka.html

<html>

<head>

<body bgcolor="#7674dshddf"/>

<center>it is a karnataka,here maximum kannadam living and capital of karnataka is

<h1>Bangalore</h1></center>

</head>

</html>

Madhya pradesh.html

<html>

<head>

<body bgcolor="blue"/>

<center>it is a madhyapradesh,here maximum maratiyam living and capital of madhyapradeshis

<h1>BHOPAL</h1></center>

</head>

</html>
Maharastra.html

<html>

<head>

<body bgcolor="blue"/>

<center>it is a maharashtra,here maximum maratiyam living and capital of maharashtra is

<h1>Mumbai</h1></center>

</head>

</html>

Orissa.html

<html>

<head>

<body bgcolor="blue"/>

<center><h2>it is a orissa,here maximum oreya living and capital of orissa is</h2>

<h1>Bhubaneswar</h1></center></head></html>

OUTPUT:
Program Outcomes:

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

Rubrics:

Aim & Coding & Observation &

Result & Viva Total
Algorithm Output Record

RESULT:

Thus the web page is created and the image is embedded with hot spot and the link
images successfully, and the output is verified.