Scribd
Upload
2 views72 pages

Web Tech Lab File

The document outlines a series of practical experiments for a Web Technology Lab course (ETCS-356) conducted by Ms. Anu Rathee at Maharaja Agrasen Institute of Technology. It includes various tasks such as creating web pages using HTML, CSS, JavaScript, and PHP, as well as implementing features like user registration forms, game development, and database interactions. Each experiment is accompanied by specific aims, HTML/CSS code examples, and dates for completion.

Uploaded by

Hardik Sharma
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views72 pages

Web Tech Lab File

The document outlines a series of practical experiments for a Web Technology Lab course (ETCS-356) conducted by Ms. Anu Rathee at Maharaja Agrasen Institute of Technology. It includes various tasks such as creating web pages using HTML, CSS, JavaScript, and PHP, as well as implementing features like user registration forms, game development, and database interactions. Each experiment is accompanied by specific aims, HTML/CSS code examples, and dates for completion.

Uploaded by

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

WEB TECHNOLOGY LAB

ETCS-356

Faculty Name: Ms. Anu Rathee

Student name: Hardik Sharma


Roll No. :20914803120
Branch: IT

GROUP: 6I8

Maharaja Agrasen Institute of Technology


PSP Area , Sector-22, Rohini, Delhi-110085
1
LIST OF PRACTICALS
ETCS – 356
Hardik Sharma
20914803120
IT
6I8

EXP LIST OF
Date Signature
NO. EXPERIMENTS

Create a web page with the following using


HTML. A, to embed a map in a web
1 15/03/23
page. B, to fix hot spots in the map. C, show
related information when hotspots are clicked.

Create a web page that cover your CV using


2 various HTML. 15/03/23

Create a web page that displays brief details of


various programming languages using various
3 15/03/23
types of CSS.

Create a web page using java-script and HTML


to demonstrate Simple Calculator
4 22/03/23
Application.

Create an XML file to store details of students in


a class and apply CSS for its
5 22/03/23
presentation on web browser.

Create a webpage to demonstrate the use of Date,


6 String, Array and Math object in JavaScript. 22/03/23

2
7 Design a user registration form using HTML tags 29/03/23

Create a static web application using HTML,


CSS, and JavaScript with navigation links on
8 29/03/23
topic " Career opportunities in Information
Technology

Explain DTD, XSL, XSLT, and Display Food


menu using XML and XSLT.
9 29/03/23

Write a PHP program to store page views count


in SESSION, to increment the count on each
10 refresh, and to show the count on web page. 05/04/23

Create a webpage to demonstrate the use of alert,


prompt and confirm dialog box in JavaScript.
11 05/04/23

12 Create a game "Lucky Seven” using JavaScript 05/04/23

Create a servlet for fetching request data and


13 display with current date as response. 12/04/23

Create a jsp page Form Validation using java-


14 script (blank text field and email). 12/04/23

What are cookies? Write a PHP program to store


current date-time in a COOKIE and
display the ‘Last visited on’ date-time on the web
15 page upon reopening of the same 12/04/23
page.

16 a) Design an XML document to store information 19/04/23


about a student in an engineering College
affiliated to IPU. The information must include
100 USN, Name, Name of the College, Brach,
Year of Joining, and e-mail id. Make up sample
data for 3 students. Create a CSS style sheet and
use it to display the document.
b) Create an XSLT style sheet for one student
element of the above document and use
3
it to create a display of that element.

Develop a login-based application using Ajax,


JavaScript and JSP.
17 19/04/23

- Create snake game using HTML5(Canvas) and


java script. (Tutorial for game
18 26/04/23
development).

Describe how https can be configured on web


server to ensure security requirements of
19 03/05/23
Website.

Explain how search engine works and list out


20 03/05/23
step by step process

What are Web security issues and how they can


21 be controlled. Implement solution to all the 10/05/23
securityissue in a Demo Website
Build a Rails application to accept book
information viz. Accession number, title,
authors, edition and publisher from a web page
22 and store the information in a database 10/05/23
and to search for a book with the title specified
by the user and to display the search results with
proper headings
Create feedback form in PHP which contains first
name, last name, address, email,comment and
23 mobile number and store that information in 24/05/23
database. Also create a page which displays
submitted feedbacks in tabular
Write following Java script program:
i. Create form validation program that checks the
empty values from that form and alert back using
24 31/05/23
alert function. Use at least 5 components.
ii. Display a live clock in Java script.

4
EXPERIMENT – 1

AIM: - Create a web page with the following using HTML. A, to embed a map in a web
page. B, to fix hot spots in the map. C, show related information when hotspots are
clicked.

HTML CODE: -
<!DOCTYPE html
<html>
<head>
<title>Home - States of India!!!</title>
</head>
<body bgcolor="gold">
<h1><u><center>Republic of India</center></u></h1>
<p>
India is the Seventh Lagest country in the world by geographical area, the second most populous
country with over 1.2 billion people, and the populus democracy in the world. India is a federal
constitutional republic with a parliamentry democracy consisting of 28 states and 7 union
Terriories.
</p>
<center>
<img align="center" size="100" src="[Link]" usemap="#india"/>
<map name="india">
<area shape="circle" coords="160,340,20" href="[Link]">
<area shape="circle" coords="120,440,10" href="[Link]">
<area shape="circle" coords="140,420,20" href="[Link]">
</map>
</center>
<h2> Features</h2>
<ul>
<li><b>Population</b> - 1,028,783,343(2001 census).
<li><b>Capital</b> - New Delhi
<li><b>Largest City</b> - Mumbai
<li><b>Currency</b> - Indian Rupee
<li><b>Time Format</b> - IST (UTC + 5:30)
<li><b>National Sport</b> - Hockey
<li><b>Current PM</b> - Narendra Modi
<li><b>Current President</b> - Pranab Mukerji
</li>
</ul>
<h2>
<b>To view details of states please click on the specified area in the
map !!!</b>
</h2>
</body>
</html>

[Link]
<html>
<head><title>Andhra Pradesh - India</title></head>
<body bgcolor="tan">

5
<h1><center>Andhra Pradesh</center></h1>
<h3>A.P., is a state situated on the southeastern coast of India. It is
India's fourth largest state by area and fifth largest by population.</h3>
<h3>
<ul>
<li>Districts<i> - 23</i>
<li>Capital City<i> - Hyderabad</i>
<li>Largest City<i> - Hyderabad</i>
<li>Governor<i> - E. S. L. Narasimhan</i>
<li>Chief Minister<i> - N. Kiran Kumar Reddy</i>
<li>Population<i> - 78,323,330</i>
<li>Tourist spots<i> - Tirumala Tirupati, Charminar, Golconda Fort,
Chandragiri, Chowmahalla Place, Falaknuma Palace etc.,</i>
</ul>
<a href="[Link]">back</a>
</body>
</html>

[Link]
<html>
<head><title>Kerala - India</title></head>
<body bgcolor="indianred">
<h1><center>Kerala</center></h1>
<h3>
<ul>
<li>Districts<i> - 14</i>
<li>Capital City<i> - Thiruvanandapuram</i>
<li>Largest City<i> - Thiruvanandapuram</i>
<li>Governor<i> - [Link]</i>
<li>Chief Minister<i> -Oommen Chandy </i>
<li>Population<i> - 33,387,677</i>
<li>Tourist spots<i> - Edakkal Caves, Palayur, Kovalam Beach,Munnar, Kochi, Alapuzha
etc.,</i>
</ul>
</h3>
<a href="[Link]">Back</a>
</body>
</html>

[Link]
<HTML>
<HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER>
<HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
<LI>Population : 6,21,10,839</LI>
</UL><hr>
<a href="[Link]">back</a>
6
</BODY></HTML>
OUTPUT :

7
EXPERIMENT – 2

AIM: - Create a web page that cover your CV using various HTML.

HTML CODE: -

<!DOCTYPE html>
<html>
<head>
<title>My CV</title>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
margin-top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<header>
<h1>Hardik Sharma</h1>
<p>Email: Hardik@[Link] | Phone: 9013567411</p>
</header>

<main>
<section>
<h3>Summary</h3>
<p>Want to be the part of a software developer organization and utilize my knowledge, Skills and
expertise to contribute towards organization and professional brilliance and to learn more with the passage
of time from alltypes of situations and circumstances.</p>
</section>

<section>
<h3>Skills</h3>

8
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
<li>MySQL</li>
<li>MongoDB</li>
</ul>
</section>

<section>
<h3>Education</h3>
<table>
<thead>
<tr>
<th>University/college </th>
<th>Course </th>
<th>Percentage/CGPA</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maharaja Agrasen Institute of Technology(MAIT),IPU</td>
<td>[Link]</td>
<td>2021 - Present</td>
</tr>
<tr>
<td>Guru Nanak Dev Institute of Technology,BTE</td>
<td>Polythenic</td>
<td>2017 - 2020</td>
</tr>
<tr>
<td>Kendriya Vidyalaya Sangathan</td>
<td>10th</td>
<td>2016</td>
</tr>
</tbody>
</table>
</section>

<section>
<h3>Certifications</h3>
<ul>
<li>Front- End Certified , Codingninjas, 2013</li>
<li>Java Developer Certification, Codingninjas</li>
</ul>
</section>

<section>
<h3>Projects</h3>
<ul>
<li>Hotel Management System</li>
</body>
9
</html>

OUTPUT: -

10
EXPERIMENT – 3

AIM: - Create a web page that displays brief details of various programming languages using various
types of CSS.

HTML CODE: -

<!DOCTYPE html>
<html>
<head>
<title>
Simple web Development Template
</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<li><a href="#web">Web Technology</a></li>
<li><a href="#program">C Programming</a></li>
<li><a href="#course">Courses</a></li>
</ul>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
7
</div>
</nav>
<section class="firstsection">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big" id="web">
Web Technology
</h1>
<p class="text-small">
HTML stands for Hyper Text Markup Language. It is used to design web pages using
a markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. A markup language is used to
define the text document within tag which defines the structure of web pages.
HTML is a markup language that is used by the browser to manipulate text, images,
and other content to display it in the required format.
</p>
</div></div>
</section>
<section class="secondsection">
11
<div class="box-main">
<div class="secondHalf">
<h1 class="text-big" id="program">
C Programming
</h1>
<p class="text-small">
C is a procedural programming language. It was initially developed by Dennis
Ritchie as a system programming language to write operating system. The main
features of C language include low-level access to memory, simple set of keywords,
and clean style, these features make C language suitable for system programming
like operating system or compiler development.
</p>
</div></div>
</section>
<section class="section">
<div class="paras">
<h1 class="sectionTag text-big">Java</h1>
<p class="sectionSubTag text-small">
Java has been one of the most popular programming language for many years. Java
is Object Oriented. However it is not considered as pure object oriented as it
provides support for primitive data types (like int, char, etc) The Java codes are first
compiled into byte code (machine independent code). Then the byte code is run on
Java Virtual Machine (JVM) regardless of the underlying architecture.
</p>
</div>
</section>
<footer class="background">
<p class="text-footer">
<b>Kartik Koul</b>
</p></footer></body></html>

CSS CODE: -
*{
margin: 0;
padding: 0;
}
.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
.background {
background: black;
background-blend-mode: darken;
background-size: cover;
}
.nav-list {
width: 70%;
display: flex;
align-items: center;

12
10
}
.nav-list li {
list-style: none;
padding: 26px 30px;
}
.nav-list li a {
text-decoration: none;
color: white;
}
.nav-list li a:hover {
color: grey;
}
.rightnav {
width: 30%;
text-align: right;
}
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
11
.firstsection {
background-color: rgb(255, 255, 255);
height: 400px;
border: 2px solid rgb(0, 0, 0);
}
.secondsection {
background-color: rgb(255, 255, 255);
height: 400px;
border: 2px solid rgb(0, 0, 0);
}
.box-main {
display: flex;
justify-content: center;
align-items: center;
color: black;
max-width: 80%;
margin: auto;
height: 80%;
}
.firsthalf {
width: 100%;
display: flex;
12
flex-direction: column;
justify-content: center;
}
.secondhalf {
width: 30%;
}
.text-big {
13
font-family: 'Piazzolla', serif;
font-weight: bold;
font-size: 35px;
}
.text-small {
font-size: 18px;
}
.btn {
padding: 8px 20px;
margin: 7px 0;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
13
}
.btn-sm {
padding: 6px 10px;
vertical-align: middle;
}
.section {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: auto;
border: 2px solid rgb(0, 0, 0);
}
.section-Left {
flex-direction: row-reverse;
}
.paras {
padding: 0px 280px;
}
.center {
text-align: center;
14
}
.text-footer {
text-align: center;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
color: white;
}

14
OUTPUT: -

15
EXPERIMENT – 4

AIM: - Create a web page using java-script and HTML to demonstrate Simple Calculator
Application.

HTML CODE: -

<html>
<head>
<title>Simple Calculator</title>
<script>
function add()
{
p = parseInt([Link]("num1").value);
n = parseInt([Link]("num2").value);
result = [Link]("result");
[Link] = "The sum is " + (p+n);
}
function sub()
{
p = parseInt([Link]("num1").value);
n = parseInt([Link]("num2").value);
result = [Link]("result");
16
[Link] = "The difference is " + (p-n);
}
function mul()
16
{
p = parseInt([Link]("num1").value);
n = parseInt([Link]("num2").value);
result = [Link]("result");
[Link] = "The product is " + (p*n);
}
function div()
{
p = parseInt([Link]("num1").value);
n = parseInt([Link]("num2").value);
result = [Link]("result");
[Link] = "The quotient is " + (p/n);
}
</script>
<style type = "text/css" media = "all">
.footer
{
padding: 0.5cm 0 3em;
}
.footer p
{
font-size: 1em;
color: rgb(4, 73, 78);
17
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<br>
<p>***For Sine,Cosine and Tan Enter Angle In Radians***</p>
<br>
First Number: <input id="num1"><br><br>
Second Number: <input id="num2"><br><br>
<table border="3">
<tr>
<td><button onclick="add()">ADD +</button></td>
<td><button onclick="sub()">SUBTRACT -</button></td>
</tr>
<tr>
<td><button onclick="mul()">MULTIPLY *</button></td>
<td><button onclick="div()">DIVIDE /</button></td>
</tr>
</table>
<br><br><br>
<p id="result"></p>

<div class="footer">

17
</div>
</body>
</html>

OUTPUT: -

18
EXPERIMENT – 5

AIM: - Create an XML file to store details of students in a class and apply CSS for its
presentation on web browser.

HTML CODE: -

<link rel="stylesheet" type="text/css" href="[Link]">


<?xml-stylesheet type="text/css" href="[Link]" ?>
<!DOCTYPE HTML>
<html>
<head>
</head>
<students>
<student>
<rollno>Roll No : 35214807720</rollno>
<name>NAME : SAKSHAM</name>
<college>COLLEGE : MAIT</college>
<branch>BRANCH : IT</branch>
<year>YEAR : 2020</year>
<e-mail>E-Mail : saksham@[Link]</e-mail>
</student>
<student>
<rollno>Roll No : 35514807720</rollno>
<name>NAME : KARAN</name>
<college>COLLEGE : MAIT</college>
<branch>BRANCH : IT</branch>
<year>YEAR : 2020</year>
<e-mail>E-Mail : karan@[Link]</e-mail>
</student>
<student>
<rollno>Roll No : 3604807720</rollno>
<name>NAME : HIMANSHU</name>
<college>COLLEGE : MAIT</college>
<branch>BRANCH : IT</branch>
<year>YEAR : 2020</year>
<e-mail>E-Mail : himanshu@[Link]</e-mail>
</student>
</students>
</html>
CSS CODE: -
body{
display: block;
19
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;
}
body:before {
display: block;
width: 8em;
font-weight: bold;
font-size: 200%;
content: "STUDENTS DESCRIPTION";
margin: -.75em 0px .25em -.25em;
padding: .1em .25em;
background-color: #cdf;
}
student{
display:block;
margin-top:10px;
color:Navy;
}
rollno{
display:block;
margin-left:10px;
font-size:14pt;
color:Red;
}
name{
display:block;
margin-left:20px;
font-size:14pt;
color:Blue;
}
college{
display:block;
margin-left:20px;
font-size:12pt;
color:Maroon;
}
branch{
display:block;
margin-left:20px;
font-size:12pt;
color:Purple;
}
year{
display:block;
margin-left:20px;
font-size:14pt;
color:Green;
}
e-mail{
display:block;
margin-left:20px;
font-size:12pt;
20
color:Blue;
}

OUTPUT: -

21
EXPERIMENT – 6

AIM: - Create a webpage to demonstrate the use of Date, String, Array and Math object in
JavaScript.

HTML CODE: -

<!DOCTYPE html>
22
<html>
<head>
<style >
body{
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;
}
</style>
<title>JavaScript Objects</title>
</head>
<body>
<h1>Date Object</h1>
<p id="demo1"></p>
<h1>String Object</h1>
<p id="demo2"></p>
<h1>Array Object</h1>
<p id="demo3"></p>
<h1>Math Object</h1>
<p id="demo4"></p>
<script>
// Date Object
let today = new Date();
[Link]("demo1").innerHTML = "Today is " +
[Link]();
// String Object
let str1 = "Hello";
let str2 = "World";
[Link]("demo2").innerHTML = [Link](" ", str2);
// Array Object
let fruits = ["Apple", "Banana", "Cherry"];
[Link]("demo3").innerHTML = "My favorite fruit is " + fruits[1];
// Math Object
let num1 = 5.5;
let num2 = 3;
[Link]("demo4").innerHTML = "The maximum of " + num1 + " and " +
num2 + " is : " + [Link](num1, num2);
</script>

</body>
</html>

OUTPUT: -

23
EXPERIMENT – 7

AIM: - Design a user registration form using HTML tags.

HTML CODE: -
<!DOCTYPE html>
<html lang="en">
<head>

24
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regestation From</title>
</head>
<body>
<h2 ALIGN="CENTER">Registration form</h2>
<form action="">
<table align="center" bgcolor="#fff" height="500" width="500">
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" placeholder="Name"></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" placeholder="Name" ></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="text" placeholder="Email address" ></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" placeholder="Name" ></td>
</tr>
<td>Confrim Password</td>
<td>:</td>
<td><input type="password" placeholder="Password " ></td>
</tr>
<tr>
<td>Date of Birth</td>
<td>:</td>
<td>
<select name="Day" id="Day">
<option value="Day">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="Month" id="Month">
<option value="Month">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
</select>
<select name="Year" id="Year">
25
<option value="Year">Year</option>
<option value="1">1990</option>
<option value="2">1991</option>
<option value="3">1992</option>
<option value="4">1993</option>
<option value="5">1994</option>
</select>
</td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
<td>
<input type="radio" name="Gender" ><span>Male</span>
<input type="radio" name="Gender"><span>Female</span>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</td>
</tr>
</table>
</form>

</body>
</html>

OUTPUT: -

26
EXPERIMENT – 8

AIM: - Create a static web application using HTML, CSS, and JavaScript with navigation
links on topic " Career opportunities in Information Technology.

HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scope in IT</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="mainWrapper">
27
<div class="wrapper">
<h1>CAREER OPPORTUNITIES IN I.T</h1>
<p>
Information technology (IT) professionals help organisations maintain their digital
infrastructure and provide troubleshooting assistance to technology consumers.
<br> IT employees are in demand to help others keep up with technological advances and
security procedures.
</p>
</div>
<br>
<div class="info">
<ul>
<li>
<a href="[Link]
Administration</a>
<p>
Network administrators are responsible for the technical support of an organization’s
network infrastructure.
<br> This profession includes such tasks as designing the network structure,
establishing and maintaining servers,
designing cabling, validating users, providing security,<br> and ensuring the ongoing
day-to-day operations of the network.
</p>
</li>
<li>
<a href="[Link]
Analysts</a>
<p>
Systems analysts identify opportunities for improvement in business processes and
design computer and systems related solutions.
<br> Those in this profession help their clients define technology-related needs and
design a system that is most appropriate for them.
This may include planning and developing
<br> new computer systems or devising ways to apply existing systems' resources to
additional operations. .
</p>
</li>
<li>
<a href="[Link]
Support Personnel</a>
<p>
With the Internet and electronic business creating tremendous volumes of data, there is
growing need to be able to store, manage, and extract data effectively.
<br> Database administrators work with database management systems software and
determine ways to organize and store data.
</p>
</li>
<li>
<a href="[Link]
Internet Support Specialists</a>
<p>The growth of the Internet and expansion of the World Wide Web, the graphical
portion of the Internet, have generated a variety of occupations related to design and
<br> development of Web sites and their servers.
</p>
28
</li>
</ul>
</div>
</body>
</html>

CSS CODE: -
@import url('[Link]
body {
background-color: #F3DEBA;
overflow-x: hidden;

font-family: 'Roboto', sans-serif;


}
.mainWrapper{
width: 100vw;
height: 100vh;
}
h1{ color: #00235B;
}
.wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p{
font-size: 17px;
font-weight: 400;
}
a{
color: brown;
font-size: 30px;
text-decoration: none;
}
.info{
display: flex;
flex-direction: column;
}

29
OUTPUT: -

30
EXPERIMENT – 9

AIM: - Explain DTD, XSL, XSLT, and Display Food menu using XML and XSLT.

THEORY: -
DTD (Document Type Definition)
DTD is a way of defining the structure and content of an XML document. It specifies the elements,
attributes, and entities that can be used in the document, as well as their relationships and constraints. DTDs
are typically included within an XML document and are used by parsers to validate the structure and content
of the document.
31
XSL (Extensible Stylesheet Language)
XSL is a language used to transform XML documents into other formats, such as HTML, PDF, or plain text.
XSL consists of two parts: XSLT and XPath.
XSLT (XSL Transformations)
XSLT is a language used to transform XML documents into other XML documents or other formats, such as
HTML or plain text. XSLT uses templates to match and transform elements and attributes in
an XML document.

XML CODE: -
<?xml version="1.0" encoding="UTF-8" standalone= "yes"?>
<?xml-stylesheet type = "text/xsl" href="[Link]"?>
<breakfast_menu>

<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>Light Belgian waffles covered with strawberries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>Light Belgian waffles covered with an assortment of fresh berries and whipped
cream</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>Thick slices made from our homemade sourdough bread</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
<calories>950</calories>
</food>
</breakfast_menu>

XSLT CODE: -
<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="[Link]
<body style = "font-family:Arial:font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="brekfats_menu/food">
<div style="background-color:teal;color:white;padding:4px">
<span style = "font-weight:bold"><xsl:value-of select="name"/> - </span>
32
<xsl:value-of select="price" />
</div>
<div style ="margin-left:20px;margin-bottom:1em;font-size:10pt">
<p>
<xsl:value-of select="description" />
<span style="font-style:italic"> (<xsl:value-of select="calories"/> calories per
serving)</span>
</p>
</div>
</xsl:for-each>
</body>
</html>

OUTPUT: -

33
EXPERIMENT – 10

AIM: - Write a PHP program to store page views count in SESSION, to increment the count
on each refresh, and to show the count on web page.

PHP CODE: -

<?php
session_start();
if(isset($_SESSION['page_views'])) {
$_SESSION['page_views']++;
} else {
$_SESSION['page_views'] = 1;
}
echo "Page views: ".$_SESSION['page_views'];
?>

34
OUTPUT: -

35
EXPERIMENT – 11

AIM: - Create a webpage to demonstrate the use of alert, prompt and confirm dialog box in JavaScript.

HTML CODE: -

<!DOCTYPE html>
<html>
<head>
<title>Dialog Boxes Demo</title>
</head>
<body>
<h1>Dialog Boxes Demo</h1>
<p>Click the buttons below to show different types of dialog boxes:</p>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showPrompt()">Show Prompt</button>
<button onclick="showConfirm()">Show Confirm</button>
36
<script>
function showAlert() {
alert("Hello, world!");
}
function showPrompt() {
var name =
prompt("What's your name?", "");
if (name !=
null && name ! = "") {

alert("Hello, " +
name + "!");
}
}
function showConfirm() {
var result =
confirm("Are you sure you
want to delete this item?");
if (result) {
alert("Item deleted.");
} else {
alert("Item not deleted.");
}
}
</script>
</body>
</html>

OUTPUT: -

37
EXPERIMENT – 12

AIM: - Create a game "Lucky Seven” using JavaScript.

HTML CODE: -

<!DOCTYPE html>
<html>
<head>
<title>LUCKY SEVEN</title>
<style>

.container {
display: flex;
flex-direction: column;

38
align-items: center;
border: 20px;
border-color: darkred;
margin-top: 50px;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.img1{

background-size: cover;
background-position: center;
background-attachment: fixed;
}
#btn{
border-radius: 20px;
}
#btn:hover{
color: cyan;
}
</style>
</head>
<body>
<div class="container">
<img src="[Link]
[Link]" style="height: 20em;">
<h1>Lucky Seven</h1>
<p>Click the button below to roll the dice:</p>
<button id = "btn" onclick="rollDice()">Roll Dice</button>
<p class="result"></p>
</div>
<script src="[Link]"></script>
</body>
</html>

JAVASCRIPT CODE: -

function rollDice() {
// Generate two random numbers between 1 and 6
var dice1 = [Link]([Link]() * 6) + 1;
var dice2 = [Link]([Link]() * 6) + 1;

// Calculate the sum of the two dice


var sum = dice1 + dice2;

// Display the result


var resultElement = [Link]('.result');
if (sum === 7) {
[Link] = 'You rolled ' + dice1 + ' and ' + dice2 + '. You win!';
} else {
39
[Link] = 'You rolled ' + dice1 + ' and ' + dice2 + '. You lose!';
}
}

OUTPUT: -

40
EXPERIMENT – 13

AIM: - Create a servlet for fetching request data and display with current date as response.
41
CODE: -

import [Link].*;
import [Link];
import [Link].*;
import [Link].*;
// Extend HttpServlet class
public class CurrentDate extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Set response content type
[Link]("text/html");
PrintWriter out = [Link]();
String title = "Display Current Date & Time";
Date date = new Date();
String docType = "<!doctype html public \"-//w3c//dtd html 4.0 " + "transitional//en\">\n";

[Link](docType +
"<html>\n" +
"<head><title>" + title + "</title></head>\n" +
"<body bgcolor = \"#f0f0f0\">\n" +
"<h1 align = \"center\">" + title + "</h1>\n" +
"<h2 align = \"center\">" + [Link]() + "</h2>\n" +
"</body>
</html>"
);
}
}

OUTPUT: -

42
EXPERIMENT – 14
43
AIM: - Create a jsp page Form Validation using java-script (blank text field and email).

HTML CODE: -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
<title>Form Validation Example</title>
</head>
<body>
<div id="container">
<h1>Form Validation</h1>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
function validateForm() {
var name = [Link]["myForm"]["name"].value;
var email = [Link]["myForm"]["email"].value;
if (name == "") {
alert("Please enter your name");
return false;
}
if (email == "") {
alert("Please enter your email");
return false;
}
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (![Link](email)) {
alert("Please enter a valid email address");
return false;
}
return true;
}
</script>
</body>
</html>
CSS CODE: -
#container {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
margin-top: 50px;
font-size: 24px;
font-weight: bold;}

44
OUTPUT: -

EXPERIMENT – 15

AIM: - What are cookies? Write a PHP program to store current date-time in a COOKIE and
display the ‘Last visited on’ date-time on the web page upon reopening of the same
page.

THEORY: -

In PHP, cookies are a mechanism for storing small pieces of data on the client-side (i.e., on the user's
browser) that can be accessed and used by a web server. Cookies in PHP are created using the set-cookie()
function, which takes several parameters such as the name of the cookie, its value, expiration time, path, and
domain.

CODE: -

<?php
// Set the cookie with the current date-time
45
setcookie("last_visited", date("Y-m-d H:i:s"), time() + 86400, "/");
// Check if the cookie is set and display the "Last visited on" date-time
if (isset($_COOKIE["last_visited"])) {
$last_visited = $_COOKIE["last_visited"];
echo "Last visited on: " . $last_visited;
} else {
echo "Welcome, this is your first visit!";
}
?>

OUTPUT: -

46
EXPERIMENT – 16

AIM: - a) Design an XML document to store information about a student in an engineering


College affiliated to IPU. The information must include 100 USN, Name, Name of
the
College, Brach, Year of Joining, and e-mail id. Make up sample data for 3 students.
Create a CSS style sheet and use it to display the document.
b) Create an XSLT style sheet for one student element of the above document and
use
it to create a display of that element.

HTML CODE: -

47
<link rel="stylesheet" type="text/css" href="[Link]">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE students SYSTEM "[Link]">
<students>
<student>
<usn>01FE19BCT001</usn>
<name>KARTIK</name>
<college>MAIT/college>
<branch>INFORMATION TECHNOLOGY</branch>
<year>2021</year>
<email>karrtik549@[Link]</email>
</student>
<student>
<usn>01FE19BCT002</usn>
<name>ANKITA</name>
<college>MSIT</college>
<branch>COMPUTER ENGINEERING</branch>
<year>2021</year>
<email>ankita123@[Link]</email>
</student>
<student>
<usn>01FE19BCT003</usn>
<name>GAURAV</name>
<college>BPIT</college>
<branch>Mechanical</branch>
<year>2020</year>
<email>gaurav234@[Link]</email>
</student>
</students>

CSS CODE: -
body{
display: block;
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;}
body:before {
display: block;
width: 8em;
font-weight: bold;
font-size: 200%;
content: "STUDENTS DESCRIPTION";
margin: -.75em 0px .25em -.25em;
48
padding: .1em .25em;
background-color: #cdf;}
student{
display:block;
margin-top:10px;
color:Navy;}
rollno{
display:block;
margin-left:10px;
font-size:14pt;
color:Red;
}
name{
display:block;
margin-left:20px;
font-size:14pt;
color:Blue;}
college{
display:block;
margin-left:20px;
font-size:12pt;
color:Maroon;}
branch{
display:block;
margin-left:20px;
font-size:12pt;
color:Purple;}
year{
display:block;
margin-left:20px;
font-size:14pt;
color:Green;
}
e-mail{
display:block;
margin-left:20px;
font-size:12pt;
color:Blue;
}

OUTPUT: -

49
EXPERIMENT – 17

AIM: - Develop a login-based application using Ajax, JavaScript and JSP.

50
HTML CODE: -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="LoginForm" onsubmit="return false">
<h1>Login Form</h1>
<div class="FormRow">
<label for="Username">Username:</label>
<input type="text" size="15" id="Username" name="Username">
</div>
<div class="FormRow">
<label for="Password">Password:</label>
<input type="password" size="15" id="Password" name="Password">
</div>
<div class="FormRow" id="LoginButtonDiv">
<input type="submit" value="Login">
</div>
<div id="BadLogin">
<p>The login information you entered does not match
an account in our records. Please try again.</p>
</div>
</form>
<script type="text/javascript" src="[Link]"></script>

[Link](window,"load", function() {
var loginForm = [Link]("LoginForm");
[Link](loginForm, "submit", function() {
login(loginForm);
});
});
function loginResults() {
var loggedIn = [Link]("LoggedIn");
var badLogin = [Link]("BadLogin");
if ([Link]("failed") == -1) {
[Link] = "Logged in as " + [Link];
[Link] = "block";
[Link] = "none";
} else {
[Link] = "block";
[Link]();
[Link] = "Highlighted";
setTimeout(function() {
[Link] = 'none';
}, 3000);
}
}

51
</body>
</html>

JS CODE: -

function login(form) {
var un = [Link];
var pw = [Link];
var xmlhttp = new XMLHttpRequest();
[Link]("post", "Login", true);
[Link] = function () {
if ([Link] == 4 && [Link] == 200) {
loginResults();
}
}

OUTPUT: -
52
EXPERIMENT – 18

53
AIM: - Create snake game using HTML5(Canvas) and java script. (Tutorial for game
development).

HTML CODE: -

<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="[Link]"></script>
</body>
</html>

JS CODE: -

var canvas = [Link]("canvas");


var ctx = [Link]("2d");
// Initialize snake and food position
var snake = [{x: 10, y: 10}];
var food = {x: [Link]([Link]() * 40) + 1, y: [Link]([Link]() * 40) + 1};
// Set up key listener for arrow keys
[Link]("keydown", function(event) {
if ([Link] == 37 && direction != "right") {
direction = "left";
}
else if ([Link] == 38 && direction != "down") {
direction = "up";
}
else if ([Link] == 39 && direction != "left") {
direction = "right";
}
else if ([Link] == 40 && direction != "up") {
direction = "down";
}
});
var direction = "right";
// Update snake position every 100 milliseconds
setInterval(function() {
// Move snake in current direction
var head = {x: snake[0].x, y: snake[0].y};
if (direction == "left") {
head.x--;
}

54
else if (direction == "up") {
head.y--;
}
else if (direction == "right") {
head.x++;
}
else if (direction == "down") {
head.y++;
}
[Link](head);

// Check for collision with food


if (head.x == food.x && head.y == food.y) {
food = {x: [Link]([Link]() * 40) + 1, y: [Link]([Link]() * 40) + 1};
}
else {
[Link]();
}
// Check for collision with walls
if (head.x < 0 || head.x >= 40 || head.y < 0 || head.y >= 40) {
alert("Game Over!");
[Link]();
}
// Check for collision with snake body
for (var i = 1; i < [Link]; i++) {
if (head.x == snake[i].x && head.y == snake[i].y) {
alert("Game Over!");
[Link]();
}
}
// Draw game board
[Link](0, 0, [Link], [Link]);
[Link] = "#000";
[Link](0, 0, [Link], [Link]);
[Link] = "#FFF";
for (var i = 0; i < [Link]; i++) {
[Link](snake[i].x * 10, snake[i].y * 10, 10, 10);
}
[Link] = "#F00";
[Link](food.x * 10, food.y * 10, 10, 10);
}, 100);

55
OUTPUT: -

56
EXPERIMENT – 19

AIM: - Describe how https can be configured on web server to ensure security requirements
of Website.

THEORY: -

HTTPS (Hypertext Transfer Protocol Secure) is a protocol used to encrypt and secure communications
between a web server and a client's web browser. Configuring HTTPS on a web server is essential to ensure
the security requirements of a website. Here's a step-by-step guide on how to configure HTTPS on a web
server:
1. Obtain an SSL/TLS certificate: To enable HTTPS, you need to obtain a certificate from a trusted
Certificate Authority (CA). This certificate verifies the authenticity of your website and is used to
encrypt the communication between the client's browser and your web server. There are many CAs
available, and you can choose one that meets your requirements.
2. Install the SSL/TLS certificate on your web server: After obtaining the SSL/TLS certificate, you
need to install it on your web server. The installation process varies depending on the web server
software you are using. Most web servers have documentation on how to install SSL/TLS
certificates.
3. Configure HTTPS on your web server: Once the SSL/TLS certificate is installed, you need to
configure your web server to use HTTPS. This involves modifying the web server's configuration
file to enable HTTPS and redirect all HTTP traffic to HTTPS. The specific configuration steps vary
depending on the web server software you are using.
4. Test the HTTPS configuration: After configuring HTTPS, you need to test it to ensure it is working
correctly. You can use online tools such as SSL Labs to test your HTTPS configuration and check
for any security vulnerabilities.
5. Monitor and maintain your HTTPS configuration: Once HTTPS is enabled, you need to monitor and
maintain it regularly. This includes keeping your SSL/TLS certificate up to date, applying security
patches to your web server software, and monitoring your server logs for any suspicious activity.
By following these steps, you can configure HTTPS on your web server and ensure the security
requirements of your website are met. HTTPS provides an essential layer of security, protecting your
website's users from potential attackers and ensuring their data is encrypted during transmission.

57
EXPERIMENT – 20

AIM: - Explain how search engine works and list out step by step process.

THEORY: -
SEARCH ENGINE
A search engine is a software program designed to help users find information on the internet. It works by
using automated algorithms to search the web and index its contents. When a user enters a search query, the
search engine retrieves relevant results from its index and presents them to the user.
Here is a step-by-step process of how a search engine works:
1. Crawling: The search engine sends out automated programs called spiders or crawlers to explore the
web and discover new pages. The crawlers follow links from one page to another, gathering
information about the content of each page they visit.
2. Indexing: The search engine processes the information it gathers from crawling and organizes it into
a structured index. This index contains information about the content of each page, including the
words and phrases it contains, the titles and descriptions, and the links to other pages.
3. Ranking: When a user enters a search query, the search engine retrieves relevant results from its
index and ranks them in order of relevance. The ranking algorithm takes into account factors such as
the quality and relevance of the content, the popularity of the page, and the user's search history and
location.
4. Retrieval: The search engine presents the ranked results to the user in a list or grid format, along with
a short description or snippet of each result. The user can then click on a result to visit the
corresponding web page.
5. Refinement: If the user is not satisfied with the results, they can refine their search query by using
additional keywords or filters to narrow down the results.
Overall, the search engine's goal is to provide the most relevant and useful results to the user, based on their
search query and other factors.

58
EXPERIMENT – 21
AIM: - What are Web security issues and how they can be controlled. Implement solution to all the
security
issue in a Demo Website.

THEORY: -
Web security issues refer to vulnerabilities in web applications or websites that can be exploited by attackers
to gain unauthorized access, steal data, or cause damage to the system. Here are some common web security
issues:
1. Cross-site scripting (XSS): Attackers inject malicious scripts into a web page, which are then
executed by unsuspecting users.
2. SQL injection: Attackers inject SQL code into a web application's input fields to gain unauthorized
access to a database.
3. Cross-site request forgery (CSRF): Attackers trick users into performing actions on a web
application without their knowledge or consent.
4. Broken authentication and session management: Weak passwords, session hijacking, and other issues
can compromise user accounts and data.
5. Insecure direct object references: Attackers manipulate URLs to access sensitive information or
perform unauthorized actions.
6. Security misconfiguration: Poorly configured web servers, databases, or applications can leave them
vulnerable to attacks.
7. Insufficient encryption and hashing: Sensitive data should be encrypted in transit and at rest, and
passwords should be hashed and salted.
To control these web security issues, here are some solutions:
1. XSS: Use input validation to sanitize user input and encode output to prevent malicious scripts from
being executed.
2. SQL injection: Use parameterized queries and prepared statements to prevent SQL injection attacks.
3. CSRF: Implement anti-CSRF tokens and enforce referer headers to prevent cross-site request forgery
attacks.
4. Broken authentication and session management: Use strong passwords, enforce password complexity
rules, and implement multi-factor authentication to protect user accounts. Use secure session
management practices such as session timeouts and secure cookies.
5. Insecure direct object references: Use access control checks to ensure that users can only access data
they are authorized to access.
6. Security misconfiguration: Follow security best practices and configure web servers, databases, and
applications securely. Keep software up-to-date with the latest security patches.
7. Insufficient encryption and hashing: Use HTTPS to encrypt data in transit, use strong encryption
algorithms to encrypt data at rest, and use salted hashes to store passwords securely.
59
To demonstrate these solutions, here is a demo website that implements these web security measures:

EXPERIMENT – 22

AIM: - Build a Rails application to accept book information viz. Accession number, title,
authors, edition and publisher from a web page and store the information in a
database
and to search for a book with the title specified by the user and to display the search
results with proper headings.

CODE: -

C :\Rails\rails_apps>
Type the following command
Creating Books Database
> mysql -u root
This will now show you mysql> prompt
At mysql prompt type the following
>create database book_development;
>use book_development;
>create table books(id int not null auto_increment,accno varchar(40) not null,title varchar(60) not
null,author varchar(60) not null,edition varchar(60) not null,publisher varchar(5) not null,primary key(id));
Creating book Project
Now open another console window type the following command
>rails -d mysql book
>cd book
Creating controller, model and view from database
>ruby script/generate scaffold Book accno:string title:string author:string
edition:string publisher:string
Starting rails server
>ruby script/server
Executing in the web browser
[Link]
Creating main (new) controller for searching book
>ruby script/generate controller main

a controller with a name main will be created..


Opening main controller program
>edit app\controllers\main_controller.rb
Create two views welcome and result
class MainController < ApplicationController
def welcome
@num_books = [Link]
end
def result
@titlename = params[:title]
@bookz = [Link](:all, :conditions => "title = #{@titlename}")
end
60
end
Create Result view file
>notepad app\views\main\[Link]
<html>
<title> Welcome template for books </title>
<body>
<p> Entered book title is <%= @titlename %> </p>
<table border=1>
<tr><th>Book Id</th> <th>Accesion Number</th><th>Book
Title</th><th>Author</th> <th>Edition </th> <th>Publisher</th></tr>
<% @[Link] do |bk|
@id = [Link]
@accno = [Link]
@title = [Link]
@author = [Link]
@edition = [Link]
@publisher = [Link]%>
<tr>
<td> <%= @id %></td>
<td><%= @accno %> </td>
<td><%= @title %></td>
<td> <%= @author %></td>
<td><%= @edition %></td>
<td> <%= @publisher %></td>
</tr>
<% end %>
</table>
</form></body></html>
Create Welcome view file
>notepad app\views\main\[Link]
<html>
<title> Welcome template for books </title>
<body>
<p> Total number of books = <%= @num_books %> </p>
<form action = "result" >
Enter Searching Element: <input type="text" name="title" />
<input type=submit value="Search" />
</form></body></html>

Starting Rails Server


ruby script/server

Executing in the web browser


[Link]

61
OUTPUT: -

62
EXPERIMENT – 23

AIM: - Create feedback form in PHP which contains first name, last name, address, email,
comment and mobile number and store that information in database. Also create a
page
which displays submitted feedbacks in tabular form.

PHP CODE: -

 [Link]
<!DOCTYPE html>
<html>
<head>
<title>Feedbacks</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<h1>Submitted Feedbacks</h1>
<?php
// Database connection
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "feedbacks";
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Retrieve feedbacks from the database
$sql = "SELECT * FROM feedback";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table>";
63
echo "<tr><th>ID</th><th>First Name</th><th>Last
Name</th><th>Address</th><th>Email</th><th>Comment</th><th>Mobile Number</th><th>Submitted
At</th></tr>";
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["id"] . "</td>";
echo "<td>" . $row["first_name"] . "</td>";
echo "<td>" . $row["last_name"] . "</td>";
echo "<td>" . $row["address"] . "</td>";
echo "<td>" . $row["email"] . "</td>";
echo "<td>" . $row["comment"] . "</td>";
echo "<td>" . $row["mobile_number"] . "</td>";
echo "<td>" . $row["created_at"] . "</td>";
echo "</tr>";
}
echo "</table>";
} else {
echo "No feedbacks found.";
}
// Close database connection
$conn->close();
?>
</body>
</html>
 [Link]
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h1>Feedback Form</h1>
<form action="[Link]" method="post">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" required><br><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" required><br><br>
<label for="address">Address:</label>
<input type="text" name="address" required><br><br>
<label for="email">Email:</label>
<input type="email" name="email" required><br><br>
<label for="comment">Comment:</label>
<textarea name="comment" required></textarea><br><br>
<label for="mobile_number">Mobile Number:</label>
<input type="text" name="mobile_number" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
 [Link]
<?php
// Database connection
64
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "feedbacks";
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Prepare and bind SQL statement
$stmt = $conn->prepare("INSERT INTO feedback (first_name, last_name, address, email, comment,
mobile_number, created_at) VALUES (?, ?, ?, ?, ?, ?, NOW())");
$stmt->bind_param("ssssss", $first_name, $last_name, $address, $email, $comment, $mobile_number);
// Get form data
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$address = $_POST["address"];
$email = $_POST["email"];
$comment = $_POST["comment"];
$mobile_number = $_POST["mobile_number"];
// Execute the statement
$stmt->execute();
// Close statement and database connection
$stmt->close();
$conn->close();
// Redirect to the thank you page
header("Location: thank_you.php");
exit();
?>
 [Link]
<!DOCTYPE html>
<html>
<head>
<title>Thank You!</title>
</head>
<body>
<h1>Thank You!</h1>
<p>Your feedback has been submitted successfully.</p>
<a href="[Link]">Go back to the form</a>
</body>
</html>

65
OUTPUT: -

66
EXPERIMENT – 24

AIM: - Write following Java script program:


i. Create form validation program that checks the empty values from that form and alert back using
alert function. Use at least 5 components.

HTML CODE: -

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var firstName = [Link]("firstName").value;
var lastName = [Link]("lastName").value;
var email = [Link]("email").value;
var password = [Link]("password").value;
var confirmPassword = [Link]("confirmPassword").value;

67
if (firstName === "") {
alert("Please enter your first name.");
return false;
}
if (lastName === "") {
alert("Please enter your last name.");
return false;
}
if (email === "") {
alert("Please enter your email.");
return false;
}
if (password === "") {
alert("Please enter a password.");
return false;
}
if (confirmPassword === "") {
alert("Please confirm your password.");
return false;
}
if (password !== confirmPassword) {
alert("Passwords do not match.");
return false;
}
// Additional validation checks can be added here
else{
alert("Successfully Register")
return true;
}
}
</script>
</head>
<body>
<h2>Form Validation</h2>
<form onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName"><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

68
OUTPUT: -

69
ii. Display a live clock in Java script.

HTML CODE: -
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div id="clock">8:10:45</div>
<script src="[Link]"></script>
</body>
</html>

CSS CODE: -
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
JS CODE: -
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = [Link]();
let min = [Link]();
let sec = [Link]();
am_pm = "AM";

if (hour > 12) {


hour -= 12;
am_pm = "PM";
}
if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime = hour + ":"
+ min + ":" + sec + am_pm;
[Link]("clock")
.innerHTML = currentTime;
}
showTime();

OUTPUT: -
71
72

You might also like