LOURDES MATHA

COLLEGE OF SCIENCE AND TECHNOLOGY

Bureau Veritas Certified ISO 9001-2015 Institution Managed by
Archdiocese of Changanassery

WEB PROGRAMMING LAB(20MCA133)

Name : ...............................................................

University Reg No:……………………………

Class:………MCA……Semester:……S1…….

Year:………2025-2027……………………….

From Page No: ......................To:………….….

Certified Bonafide Record of Work Done By

……….……............................……………

External Examiner Head of the Department Faculty-in-Charge

Ms. BISMI K CHARLEYS Ms. ANAMIKA U R

Place: Kuttichal

Date: …...........

1
[Link] NAME OF THE EXPERIMENT DATE PAGE NO.

1 CREATE A HTML FILE TO LINK A 02/09/25 12

DIFFERENT HTML PAGE WHICH CONTAINS
IMAGES, TABLES.
2 ANALYSIS CSS BY APPLYING THE 08/09/25 16
DIFFERENT [Link] INLINE,
EXTERNAL AND INTERNAL CSS
3 DEMONSTRATE A REGISTRATION FORM 15/09/25 18
USING HTML AND VALIDATE USING
JAVASCRIPT.
4 CREATE A CALENDER USING 23/09/25 24
JAVASCRIPT BY GETTING THE YEAR
FROM THE USER
CREATE A HTML PAGE TO SHOW ONLINE 30/09/25 26
5
EXAM USING JAVASCRIPT
6 COMPOSE ELECTRICITY BILL FROM USER 7/10/25 28
INPUT BASED ON A GIVEN TARIFF USING
PHP
7 BULD A PHP CODE TO STORE THE NAME OF 14/10/25 31
INDIAN CRICKET PLAYERS IN AN ARRAY
AND DISPLAY IT IN HTML TABLE.
8 USING PHP AND MYSQL DEVELOP A 27/10/25 33
PROGRAM TO ACCEPT BOOK
INFORMATION FROM A WEBPAGE AND
STORE IN A DATA BASE
9 EVALUVATE JAVASCRIPT EVENT 03/10/25 38
HANDLING FOR EVERY CLICK OF A
BUTTON
10 PHP SAME PROGRAM FOR INSERTION, 18/10/25 39
UPDATION, DELETION AND RETRIEVING
RECORDS.

2
 INTRODUCTION
HTML stands for Hyper Text Markup Language. It is a formatting language
used to define the appearance and contents of a web page. It allows us to
organize text, graphics, audio, and video on a web page.
Key Points:
The word Hypertext refers to the text which acts as a link.
The word markup refers to the symbols that are used to define structure of
the text. The markup symbols tells the browser how to display the text and
are often called tags.
The word Language refers to the syntax that is similar to any other language.

HTML was created by Tim Berners-Lee at CERN.

HTML Versions
The following table shows the various versions of HTML:

VERSION YEAR

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.0 1999

XHTML 2000

HTML5 2012

3
HTML Tags
Tag is a command that tells the web browser how to display the text, audio,
graphics or video on a web page.
Key Points:
Tags are indicated with pair of angle brackets.
They start with a less than (<) character and end with a greater than (>)
character.
The tag name is specified between the angle brackets.
Most of the tags usually occur in pair: the start tag and the closing tag.
The start tag is simply the tag name is enclosed in angle bracket whereas the
closing tag is specified including a forward slash (/).
Some tags are the empty i.e. they don’t have the closing tag.
Tags are not case sensitive.
The starting and closing tag name must be the same. For example <b> hello
</i> is invalid as both are different.
If you don’t specify the angle brackets (<>) for a tag, the browser will treat
the tag name as a simple text.
The tag can also have attributes to provide additional information about the
tag to the browser.
Features of HTML:
HTML is the most common used language to write web pages. It has
recently gained popularity due to its advantages such as: -
It is the language which can be easily understood and can be modified.
Effective presentations can be made with the HTML with the help of its all
formatting tags.
It provides the more flexible way to deign web pages along with the text.
Links can also be added to the web pages so it helps the readers to browse
the information of their interest.
You can display HTML documents on any platforms such as Macintosh,
Windows and Linux etc.
Graphics, videos and sounds can also be added to the web pages which give
an extra attractive look to your web pages.

4
Top 5 Uses of HTML

Web pages development

HTML is heavily used for creating pages that are displayed on the world
wide web. Every page contains a set of HTML tags, including hyperlinks
which are used for connecting to other pages. Every page that we witness
on the world wide web is written using a version of HTML code.

Web document Creation

Document creation on the internet is dominated by HTML and its basic

concept via tag and DOM, i.e. document object model. HTML tags are
inserted before and afterwards or phrases to locate their format and location
on the page. A web document consists of three sections: title, head, and body.
Head includes the information to identify the document, including title and
any other important keyword. A title can be seen on the browser’s bar, and
the body section is the main portion of the website visible to the viewer. All
three segments are designed and created by the uses of HTML tags. Every
section has its own specific set of tags, which are dedicatedly rendered,
keeping the head, title and body concepts in a loop.

Internet navigation

This is one of the most important uses of HTML, which is revolutionary.

This navigation is possible by utilizing the concept of Hypertext. It is
basically a text which refers to other web pages or text, and when the user
clicks on it, would navigate to referenced text or page. HTML is heavily
used to embed the hyperlink within the web pages. A user can easily navigate
the web pages and between websites as well, located on different servers.

Cutting edge feature

5
HTML5, with its set of standards and API, is being used to introduce some
of the latest trends in the website creation business. Like polyfill libraries,
which are supported by old browsers equally well. Browser like Google
Chrome is the perfect choice when it comes to implementing an HTML5
latest set of standards and APIs. A JavaScript library is available called
Modernizr, which can detect features that let the developer dynamically load
polyfill libraries as required.

Responsive images on web pages

At the elementary level in applications of HTML, queries can be set to utilize

the images, which are responsive in nature. With the srcset attribute of img
element in HTML and combining it with picture elements, a developer can
fully control how the user will render an image. Now different types of an
image with size variation can be loaded by using the img element. Rules can
be easily set with the picture element; we can declare the img element with
the default source, and then for every case, a source can be provided.

PHP

PHP is an open-source, interpreted, and object-oriented scripting language

that can be executed at the server-side. PHP is well suited for web
development.

Therefore, it is used to develop web applications (an application that executes

on the server and generates the dynamic page.).

PHP was created by Rasmus Lerdorf in 1994 but appeared in the market in
1995. PHP 7.4.0 is the latest version of PHP, which was released on 28
November.

Some important points need to be noticed about PHP are as followed:

6
 • PHP stands for Hypertext Preprocessor.
• PHP is an interpreted language, i.e., there is no need for
compilation.
• PHP is faster than other scripting languages, for example, ASP
and JSP.
• PHP is a server-side scripting language, which is used to
manage the dynamic content of the website.
• PHP can be embedded into HTML.
• PHP is an object-oriented language.
• PHP is an open-source scripting language.
• PHP is simple and easy to learn language.
PHP is a server-side scripting language, which is used to design the
dynamic web applications with MySQL database.
• It handles dynamic content, database as well as session tracking
for the website.
• You can create sessions in PHP.
• It can access cookies variable and also set cookies.
• It helps to encrypt the data and apply validation.
• PHP supports several protocols such as HTTP, POP3, SNMP,
LDAP, IMAP, and many more.
• Using PHP language, you can control the user to access some
pages of your website.
• As PHP is easy to install and set up, this is the main reason
why PHP is the best language to learn.
• PHP can handle the forms, such as - collect the data from users
using forms, save it into the database, and return useful
information to the user.
• For example - Registration form.

PHP Features

7
PHP is very popular language because of its simplicity and open source.
There are some important features of PHP given below:

Performance:

PHP script is executed much faster than those scripts which are written
in other languages such as JSP and ASP. PHP uses its own memory, so
the server workload and loading time is automatically reduced, which
results in faster processing speed and better performance.

Open source :

PHP source code and software are freely available on the web. You can
develop all the versions of PHP according to your requirement without
paying any cost. All its components are free to download and use.

Familiarity with syntax:

PHP has easily understandable syntax. Programmers are comfortable

coding with it.

Embedded:

PHP code can be easily embedded within HTML tags and script.

Platform Independent:

PHP is available for WINDOWS, MAC, LINUX & UNIX operating

system. A PHP application developed in one OS can be easily executed
in other OS also.

Database Support:

8
PHP supports all the leading databases such as MySQL, SQLite, ODBC,
etc.

Error reporting:

PHP has predefined error reporting constants to generate an error

notice or warning at runtime. E.g., E_ERROR, E_WARNING,
E_STRICT, E_PARSE.

Loosely Typed Language:

PHP allows us to use a variable without declaring its datatype. It will

be taken automatically at the time of execution based on the type of
data it contains on its value.

Web Servers Support:

PHP is compatible with almost all local servers used today like Apache,
Netscape, Microsoft IIS, etc.

Security:

PHP is a secure language to develop the website. It consists of multiple

layers of security to prevent threads and malicious attacks.

Control:

Different programming languages require long script or code, whereas

PHP can do the same work in a few lines of code. It has maximum control
over the websites like you can make changes easily whenever you want.

A Helpful PHP Community:

9
 It has a large community of developers who regularly updates
documentation, tutorials, online help, and FAQs. Learning PHP from
the communities is one of the significant benefits.

Applications of PHP
1. Webpages and Web-based applications:
Any web page or web application developed in the current
ecosystem needs to offer a high degree of customization, provide a
highly interactive user interface, be capable of performing online
transactions and integrate with database systems. Through its three-
tiered architecture which works on browser, server, and database
systems in a linear manner, PHP offers a reliable solution to achieve
these features. As a consequence, PHP is used by over 82% of websites
for server-side programming; over 244 million website sare built using
PHP.

Further, web-based enterprise applications and a multitude of Facebook

apps are also scripted in PHP.

2. Web Content Management Systems:

PHP offers support to numerous databases including MySQL, Oracle,
and MS Access and is capable of interacting with other services using
protocols such as IMAP, LDAP, POP3, NNTP, SNMP, HTTP, and
COM. As a result, PHP has been used for creating popular web Content
Management Systems (CMS), including WordPress and its plugins,
user-facing portion of Facebook, Joomla, Drupal, Moodle, Silverstripe,
MediaWiki, Digg, and others.

3. eCommerce Applications:

10
 From small businesses to large enterprises, selling to online shoppers
is now an indispensable requirement. Through the use of frameworks
like CodeIgniter and CakePHP, PHP allows the creation of eCommerce
applications in a swift and simple manner. Many of the highly used
eCommerce platforms, such as OpenCart, Magento, PrestaShop, Zen
Cart, AgoraCart, and Ubercart, have all been created on PHP.

4. GUI-Based Applications:
While PHP is largely used as a scripting language for web-based
applications, it is also possible to employ it for creating desktop
graphical user interface (GUI) based applications. Tools like PHP-GTK
2, DevelStudio, and ZZEE PHP GUI, allow scripting in PHP, compiling
it into .exe capable of running standalone.

5. Create Flash:
An open-source library, such as Ming, helps to create .SWF format
movies which include most of the features of Flash – gradients,
bitmaps (pngs and jpeg), morphs, shapes, text, button, actions, and
animations. Further, Flash elements like login-form and email form
can be easily created and incorporated into dynamic web pages using
PHP.

11
PROGRAM NO:1 DATE:02/09/2025
AIM: CREATE A HTML FILE TO LINK A DIFFERENT HTML PAGE
WHICH CONTAINS IMAGES , TABLES AND ALSO LINK WITHIN A
PAGE.
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image page</title>
</head>
<body style="background-color: rgb(255, 255, 255);">
<center>
<br><br>
<img src="[Link]" style="width: 900px; height : 500px"><br><br>
<a href="[Link]"alt="page2"><input type="button" value="Click here"></a>
</center>
</body>
</html>

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table page</title>
</head>
<body>
<center>
<h2>----Iphone Price Table--- </h2>
12
<table style="width: 600px;" bgcolor="black">
<tr bgcolor="grey">
<th widht="200px">NAME</th>
<th widht="200px">SPECS</th>
<th widht="200px">PRICE</th>
</tr>
<tr bgcolor="lightgrey" align="center">
<td>IPHONE 15</td>
<td>A16 Bionic</td>
<td>80,000Rs</td>
</tr>
<tr bgcolor="lightgrey" align="center">
<td>IPHONE 15 plus</td>
<td>A16 Bionic</td>
<td>90,000Rs</td>
</tr>
<tr bgcolor="lightgrey" align="center">
<td>IPHONE 15 pro</td>
<td>A17 pro</td>
<td>1,30,000Rs</td>
</tr>
<tr bgcolor="lightgrey" align="center">
<td>IPHONE 15 pro max</td>
<td>A17 pro</td>
<td>1,59,000Rs</td>
</tr>
</table><br>
<a href="[Link]
15-and-iphone-15-
plus/" target="new"><img src="[Link]" style="width: 300px;
height : 150px"></a>
</center>
13
</body>
</html>

OUTPUT

14
15
PROGRAM NO:2 DATE:08/09/2025
AIM : CREATE AN HTML FILE BY APPLYING THE DIFFERENT STYLES
USING IN LINE, EXTERNAL AND INTERNAL STYLE SHEET
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styling Example</title>
<link rel="stylesheet" href="[Link]">
<style>
h1{color:blue;}
p{font-size:16px;}
</style>
</head>
<body>
<h1 style="font-family:Arial;">Heading with Inline Style</h1>
<p style="font-family:Arial;">Paragraph with Inline Style</p>
<div class="styled-div">
<p>This paragraph is styled using an external style sheet.</p>
</div>
</body>
</html>
External style sheet :
.styled-div{background-color:lightgray;padding:10px;border-radius:5px;}
.styled-div p{font-style:italic;}

16
OUTPUT

17
PROGRAM NO:3 DATE:15/09/2025
AIM : CREATE A REGISTRATION FORM USING HTML AND TO
VALIDATE IT USING JAVA SCRIPT.
SOURCE CODE:
[Link]
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="[Link]">
</head>
<body class="blue-bg">
<center>
<form method="post" action="[Link]" class="box">
<h2>REGISTER</h2>
<input type="text" name="username" placeholder="Username" required><br>
<input type="email" name="email" placeholder="Email" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="text" name="phone_number" placeholder="Phone Number"
required><br>
<input type="submit" value="Register" class="btn">
<p>Already have an account?</p>
<a href="[Link]">
<button type="button" class="btn-alt">Login</button></a>
</form>
<img src="[Link]" width="100" alt="good luck">
</center>
</body>
</html>

18
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="[Link]">
<script>
function validate(){
let n=[Link]();
let p=[Link]();
if(!n||!p){alert("Fields cannot be empty");return false;}
if([Link]<6){alert("Password must be at least 6 characters");return false;}
if(n!=="midhun"||p!=="midhun@7025"){alert("Invalid credentials");return false;}
}
</script>
</head>
<body class="purple-bg">
<center>
<marquee>The Result has been published. Please log in to view your
credentials.</marquee>
<form name="myform" onsubmit="return validate()" class="box"
action="[Link]">
<h2>STUDENT LOGIN</h2>
<input type="text" name="name" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="submit" value="Login" class="btn"><br><br>
<input type="button" value="Forgot Password" class="btn-alt">
</form>
<img src="[Link]" width="200" alt="minion">
</center>
</body>
19
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Marks</title>
</head>
<body style="font-family:Arial; background:#e6f0ff; text-align:center;">
<h2>Welcome, Midhun!</h2>
<p>Your marks will appear here.</p>
<a href="[Link]">
<button>Logout</button>
</a>
</body>
</html>

[Link](External Style Sheet)

body{
font-family:Arial,sans-serif;
text-align:center;
margin:0;
padding:0;}
.blue-bg{background-color:#2F3C7E;}
.purple-bg{background-color:#4A5FC1;color:white;}
.box{
background:white;
color:black;

20
margin:50px auto;
padding:20px;
width:280px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.5);}
input{
margin:6px;
padding:6px;
width:80%;
border:1px solid #ccc;
border-radius:5px;}
.btn,.btn-alt{
background:#D76F30;
color:white;
border:none;
border-radius:5px;
padding:6px 10px;
cursor:pointer;}
.btn:hover,.btn-alt:hover{
background:white;
color:#D76F30;
border:1px solid #D76F30;}
marquee{margin-top:10px;color:#fff;}

21
OUTPUT

22
23
PROGRAM NO:4 DATE:23/09/2025
AIM : GENERATE A CALENDER USING JAVASCRIPT CODE BY
GETTING YEAR FROM THE USER. SOURCE CODE:
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html><head>
<style>
table,th,td{border:1px solid black;border-collapse:collapse;padding:5px;text-
align:center;}
</style>
</head>
<body>
Enter Year:
<input type="number" id="y">
<button onclick="cal()">Generate</button>
<div id="out"></div>
<script>
function cal(){
let y=[Link]("y").value;
let days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
let out="";
for(let m=0;m<12;m++){
out+="<h3>"+new Date(y,m).toLocaleString('en',{month:'long'})+"</h3>";
out+="<table><tr>";
for(let d of days)out+="<th>"+d+"</th>";
out+="</tr><tr>";
let f=new Date(y,m,1).getDay();
let t=new Date(y,m+1,0).getDate();
for(let i=0;i<f;i++)out+="<td></td>";
for(let d=1;d<=t;d++){
out+="<td>"+d+"</td>";

24
if((d+f)%7==0)out+="</tr><tr>";}
out+="</tr></table>";}
[Link]("out").innerHTML=out;}
</script>
</body>
</html>

OUTPUT

25
PROGRAM NO:5 DATE:30/09/2025
AIM : CREATE AN HTML PAGE TO SHOW AN ONLINE EXAM USING
JAVASCRIPT.
SOURCE CODE:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Quiz</title>

</head>

<body>

[Link] is 2+3?<br>

<input type="radio" name="q1" id="c1">5<br>

<input type="radio" name="q1">6<br>

<input type="radio" name="q1">7<br>

<input type="radio" name="q1">8<br>

[Link] is 2+1?<br>

<input type="radio" name="q2">5<br>

<input type="radio" name="q2">6<br>

<input type="radio" name="q2" id="c2">3<br>

<input type="radio" name="q2">8<br>

[Link] is 2+4?<br>

<input type="radio" name="q3">5<br>

<input type="radio" name="q3" id="c3">6<br>

<input type="radio" name="q3">7<br>

<input type="radio" name="q3">8<br>

26
<input type="submit" value="submitQuiz" onclick="result()">

<script>

function result(){

let s=0;

if([Link])s++;

if([Link])s++;

if([Link])s++;

alert("Your Score is: "+s); }

</script>
</body>

</html>
OUTPUT

27
PROGRAM NO:6 DATE:07/10/2025
AIM : COMPOSE ELECTRICITY BILL FROM USER INPUT BASED ON A
GIVEN TARIF ON PHP.
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Electricity Bill Calculator</title>
<style>
body{font-family:Arial,sans-serif;margin:20px;background:aqua;}
h2{color:#333;}
label{font-weight:bold;}
#usage{padding:8px;width:200px;}
input[type="number"]{
padding:10px;color:black;border:1px solid transparent;
border-radius:4px;cursor:pointer;box-shadow:4px 5px 8px black;
}
input[type="submit"]{
padding:10px 20px;background:#4CAF50;color:white;
border:1px solid transparent;border-radius:4px;cursor:pointer;
}
input[type="submit"]:hover{
background:greenyellow;color:black;box-shadow:2px 5px 8px black;
}
</style>
</head>
<body>
<center>
<h2>Electricity Bill Calculator</h2>
<form action="[Link]" method="post" target="blank">

28
<label>Enter electricity usage in kWh:</label><br><br>
<input type="number" id="usage" name="usage" required><br><br>
<input type="submit" value="Calculate Bill">
</form>
</center>
</body>
</html>

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Electricity Bill Result</title>
<style>
body{font-family:Arial,sans-serif;margin:20px;background:grey;}
h2{color:#333;}
.bill{
background:aqua;border:1px solid transparent;border-radius:5px;
width:30%;height:180px;box-shadow:10px 6px 10px black;
}
</style>
</head>
<body>
<center><br><br>
<div class="bill"><br>
<h2>Electricity Bill Result</h2>
<?php
if(isset($_POST['usage'])){
$u=$_POST['usage'];
$base=10;$r1=0.15;$r2=0.20;
$bill=($u<=100)?$base+($u*$r1):
$base+(100*$r1)+(($u-100)*$r2);
29
echo "<p>Electricity Usage: $u kWh</p>";
echo "<p>Bill Amount: $".number_format($bill,2)."</p>";
}else{
echo "<p>No usage data submitted.</p>";
} ?>
</div>
</center>
</body>
</html>
OUTPUT

30
PROGRAM NO:7 DATE:14/10/2025
AIM : PREPARE A PHP CODE TO STORE NAMES OF INDIAN CRICKET
PLAYER IN AN ARRAY AND DISPLAY THE TABLE
SOURCE CODE:
[Link]
<!DOCTYPE html>

<html>

<head>

<title>Indian Cricket Players</title>

<style>

table{border-collapse:collapse;width:50%;}

th,td{border:1px solid #ddd;padding:8px;text-align:left;}

th{background:#f2f2f2;}

</style>

</head>

<body>

<center><br>

<?php

$players=["Virat Kohli","Rohit Sharma","Jasprit Bumrah","Ravindra Jadeja",

"KL Rahul","Rishabh Pant","Ajinkya Rahane","Shikhar Dhawan"];

?>

<h2>Indian Cricket Players</h2>

<table>

<tr><th>Sn No.</th><th>Name</th></tr>

<?php

foreach($players as $i=>$p)

echo "<tr><td>".($i+1)."</td><td>$p</td></tr>";

?>

</table>

31
</center>

</body>

</html>

OUTPUT

32
PROGRAM NO:8 DATE:27/10/2025
AIM : USING PHP AND MYSQL DEVELOP A PROGRAM TO ACCEPT
BOOK INFO (edition number, title, authors, edition and publisher) FROM A
WEBPAGE AND STORE THE INFO IN A DATABASE AND TO SEARCH
FOR A BOOK WITH THE TITLE SPECIFIED BY THE USER AND TO
DISPLAY WITH PROPER HEADING.
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Library Management</title>
<style>
*{font-family:system-ui;}
body{background:url('[Link]') no-repeat fixed;background-size:100% 100%;}
.box{width:30%;margin:auto;box-shadow:10px 7px 20px black;border-radius:15px;}
.head{background:aqua;border-radius:10px 10px 0 0;}
.form{background:#133e64;height:350px;border-radius:0 0 10px 10px;}
input{border:1px solid #4f4c4c;border-radius:4px;margin-bottom:8px;padding:4px;}
.btn{font-weight:bold;color:white;border:2px solid #333;padding:5px;cursor:pointer;}
.insert{background:#0b99d6;}
.insert:hover{background:green;}
.search{background:#c0354c;}
.search:hover{background:#45ad45;color:black;}
</style>
</head>
<body><br><br>
<center>
<div class="box">
<div class="head"><h2>BOOK INFO</h2></div>
<div class="form"><br>

33
<form action="[Link]" method="post" target="blank">
<label style="color:white"><b>EDITION</b></label><br>
<input type="text" name="edition"><br>
<label style="color:white"><b>TITLE</b></label><br>
<input type="text" name="title" required><br>
<label style="color:white"><b>AUTHOR</b></label><br>
<input type="text" name="author"><br>
<label style="color:white"><b>PUBLISHER</b></label><br>
<input type="text" name="publisher"><br>
<input type="submit" value="INSERT" class="btn insert" name="submit"><br><br>
<a href="[Link]" target="blank">
<input type="button" value="Search Book" class="btn search">
</a>
</form>
</div>
</div>
</center>
</body>
</html>
[Link]
<?php
$conn=mysqli_connect("localhost","root","","library");
if(!$conn)die("Connection Failed");
$e=$_POST['edition'];
$t=$_POST['title'];
$a=$_POST['author'];
$p=$_POST['publisher'];

$sql="INSERT INTO book(edition_number,title,author,publisher)

VALUES('$e','$t','$a','$p')";
echo mysqli_query($conn,$sql)?"Data Inserted":"Insert Failed";
mysqli_close($conn);
34
?>

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Book Search</title>
<style>
body{background:url('[Link]') no-repeat fixed;background-size:100% 100%;}
.box{width:30%;margin:auto;background:#133e64;border-radius:10px;}
input{width:270px;padding:5px;}
.btn{background:#c0354c;color:white;border:2px solid #444;padding:6px;}
</style>
</head>
<body><br><center>
<div class="box"><br>
<h2 style="color:white">BOOK SEARCH</h2>
<form action="[Link]" method="post">
<input type="text" name="title" placeholder="Enter Title"><br><br>
<input type="submit" value="SEARCH" class="btn">
</form><br>
</div>
</center></body>
</html>

[Link]
<!DOCTYPE html>
<html>
<body style="font-family:system-ui;font-size:18px">
<center><br>
<?php
$conn=mysqli_connect("localhost","root","","library");
if(!$conn)die("Connection Failed");

35
$t=$_POST['title'];
$sql="SELECT * FROM book WHERE title LIKE '%$t%'";
$res=mysqli_query($conn,$sql);
if(mysqli_num_rows($res)>0){
while($r=mysqli_fetch_assoc($res)){
echo "<h3>".$r['title']."</h3>";
echo "Edition: ".$r['edition_number']."<br>";
echo "Author: ".$r['author']."<br>";
echo "Publisher: ".$r['publisher']."<br><br>";
}}
else echo "<h3>Data Not Found</h3>";
mysqli_close($conn);
?>
</center>
</body>
</html>

OUTPUT

36
37
PROGRAM NO:9 DATE:03/10/2025
AIM : EVALUVATE JAVA SCRIPT EVENT HANDLING FOR EVERY
CLICK OF A BUTTON.
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html><head><title>Color</title></head>
<body><center>
<h2>COLOUR CHANGING WEBPAGE</h2>
<button onclick="c()">Click</button>
<script>
function c(){
[Link]=["black","blue","red","green"][[Link](Mat
[Link]()*4)]
}
</script>
</center>
</body>
</html>
OUTPUT

38
PROGRAM NO:10 DATE:18/10/2025
AIM: PHP PROGRAM FOR INSERTION , UPDATION , DELETION AND
RETRIEVING RECORDS.
SOURCE CODE:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>PHP MySQL</title>
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","accounts");
if(!$con)die("Connection Failed");
$id=$name=$sal="";
$msg="Connected Successfully<br>";
if(isset($_POST['select'])){
$id=$_POST['id'];
$q=mysqli_query($con,"SELECT * FROM salary WHERE id='$id'");
if(mysqli_num_rows($q)){
$r=mysqli_fetch_assoc($q);
$id=$r['id'];$name=$r['name'];$sal=$r['salary'];
}else $msg="No Record Found";
}
if(isset($_POST['insert'])){
$id=$_POST['id'];$name=$_POST['name'];$sal=$_POST['sal'];
$msg=mysqli_query($con,"INSERT INTO salary VALUES('$id','$name','$sal')")
?"Insert Success":"Insert Failed";
}
if(isset($_POST['update'])){
$id=$_POST['id'];$name=$_POST['name'];$sal=$_POST['sal'];

39
$msg=mysqli_query($con,"UPDATE salary SET name='$name',salary='$sal' WHERE
id='$id'")
?"Update Success":"Update Failed";
}
if(isset($_POST['delete'])){
$id=$_POST['id'];
$msg=mysqli_query($con,"DELETE FROM salary WHERE id='$id'")
?"Delete Success":"Delete Failed";
}
?>
<h2>PHP MYSQL CRUD</h2>
<form method="post">
ID:<input type="number" name="id" value="<?php echo $id;?>"><br>
Name:<input type="text" name="name" value="<?php echo $name;?>"><br>
Salary:<input type="text" name="sal" value="<?php echo $sal;?>"><br><br>
<input type="submit" name="select" value="SELECT">
<input type="submit" name="insert" value="INSERT">
<input type="submit" name="update" value="UPDATE">
<input type="submit" name="delete" value="DELETE">
<input type="submit" name="selectall" value="SELECT ALL">
<input type="reset" value="RESET">
</form>
<?php
echo "<br>$msg<br>";
if(isset($_POST['selectall'])){
$q=mysqli_query($con,"SELECT * FROM salary");
while($r=mysqli_fetch_assoc($q))
echo "ID:{$r['id']} Name:{$r['name']} Salary:{$r['salary']}<br>";
}
mysqli_close($con);
?>

40
</body>
</html>

OUTPUT

41