Scribd
Upload
17 views64 pages

Web Essential Lab Record

The document outlines various web development experiments including HTML, CSS, JavaScript, and PHP implementations. Each section provides a specific aim, procedure, and example code for creating interactive web pages and validating forms. The results indicate successful execution of each experiment, demonstrating the application of client-side scripting and web design techniques.

Uploaded by

itsquad2026
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
17 views64 pages

Web Essential Lab Record

The document outlines various web development experiments including HTML, CSS, JavaScript, and PHP implementations. Each section provides a specific aim, procedure, and example code for creating interactive web pages and validating forms. The results indicate successful execution of each experiment, demonstrating the application of client-side scripting and web design techniques.

Uploaded by

itsquad2026
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
You are on page 1/ 64

TABLE OF CONTENTS

S. Page
No. Date Experiment Title Sign.
No.
1 HTML PROGRAM AND HOT SPOTS IMPLEMENTATION
2 CREATING A WEBSITE WITH CSS
3 DESIGN AN INTERACTIVE WEB SITE
4 ADDING TWO NUMBERS USING JAVA SCRIPT
5 COMPARING TWO NUMBERS USING JAVA SCRIPT
6 FORM VALIDATION USING JAVA SCRIPT
7 XAMPP SERVER
8 GREETING TEXT USING PHP
9 PALINDROME CHECKING USING PHP
10 ARMSTRONG NUMBER CHECKING USING PHP
11 FACTORIAL VALUE USING PHP RECURSIVE FUNCTION
12 READ FROM EXISTING FILE USING PHP
13 WRITE A NEW FILE USING PHP
14 HIT COUNTER USING COOKIES
15 LOGIN PAGE USING SESSION
16 HANDLING MULTIMEDIA CONTENT USING PHP
17 LOGIN WITH SQL CONNECTION USING PHP
18 APACHE TOMCAT SERVER
19 INVOKING SERVLET FROM HTML
20 DISPLAY PERSONAL INFORMATION
<Register Number>

2. HTML PROGRAM AND HOT SPOTS IMPLEMENTATION

AIM:

To create a simple web page with the following 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

PROCEDURE:

Step 1: Open a new notepad document.

Step 2: Type the HTML program and file named as home.html.

Step 3: Download proper images and embed an image map in that page (home.html)

Step 4: Fix the hot spots (coordinates on the image map)

Step 4: Link the hot spots either with html files or image files

Step 5: Create html files containing details of hot spots.

Step 6: Finally run the home.html program using chrome browser.

hotspot.html:

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.jpg" width="700" height="700" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,150,150" alt="Sun" href="sun.html">
<area shape="circle" coords="190,75,10" alt="Mercury" href="mercur.html">

</map>

</body>
</html>
<Register Number>

sun.html:

<!DOCTYPE html>
<html>
<body>
<p>Closer look of Sun: </p>

<img src="sun.jpg" width="500" height="500" alt="Sun1">

</body>
</html>

mercur.html:

<!DOCTYPE html>
<html>
<body>
<h1>Information about Mercury: </h1>
<p>

<b>Mercury </b>is the smallest planet in the Solar System and the closest to the Sun. Its orbit
around the Sun takes 87.97 Earth days, the shortest of all the Sun's planets.
</p>
</body>
</html>

OUTPUT:
<Register Number>

RESULT:

The creation of web page using HTML is successfully executed.

3.
<Register Number>

CREATING A WEBSITE WITH CSS

AIM:

To create a web page with all types of Cascading style sheets.

PROCEDURE:

Step 1: Open a new document and create a style sheet.

Step 2: Declare the property of cascading style sheets and saved as filename is
external.css

Step 3: Open a new HTML document and type the html program.

Step 4: Save the HTML program.

Step 4: Similarly open the html file for Internal.html, inline .html.

Step 5 : Finally run the html program using chrome browser.

Step 6: We call and link the CSS file(external.css) in html file.

external.css:

body{background-color:green;}
p{color:blue;}
h3{color:white;}
ul.a {list-style-type: square;}
ul.b {list-style-type: circle;}
ol.c{list-style-type:upper-roman;}
ol.d{list-style-type:lower-alpha;}
#hi{text-color:white;}<!--Id Selector-->
body{background-image:url('tamilnadu.jpg');}
h1{text-align:center;}<!--Type Selector-->
p.date{text-align:right;}<!--Desendent Selector-->
<Register Number>

EXTERNAL.HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css"/><!-- Links External Style Sheet ext.css-->
</head>
<body>
<h1>EXTERNAL STYLE SHEET</h1>
<h3>a white header</h3>
<ul class="b">
<li>liststyletype-circle</li>
<li>liststyletype-circle</li>
<li>liststyletype-circle</li>
</ul>
<ol class="c">
<li>upper-roman</li>
<li>upper-roman</li>
</ol>
<ol class="d">
<li>lower_alpha</li>
<li>lower_alpha</li>
</ol>
<p class="date">
This paragraph has a blue font .the back ground colour is green because of external style sheet</p>
</body>
</html>

INTERNAL.HTML
<html>
<head>
<style>
body{background-color:grey;}
p{color:white;}
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
#p1{font-family:"Times New Roman",Times,serif;}
</style>
<Register Number>

</head>
<body><!--Type Selector-->
<center>
<h2>INTERNAL STYLE SHEET</h2>
</center>
<ul class="b"><!--Desendent Selector Element ul followed by class (.b)-->
<li>liststyletype:square</li>
<li>liststyletype:square</li>
</ul>
<p id="p1">This page USES internal css using style tag</p><!-- ID Selector-->
</body>
</html>

INLINE.HTML
<html>
<head>
<title>inline css</title>
</head>
<BODY style="background-color:red";><!-- INLINE Stylesheet style keyword as an attribute-->
<center>
<h2>INLINE STYLE SHEET</h2>
</center>
<p style="color:blue;margin-left:20px"><!-- INLINE Stylesheet style keyword as an attribute-->
This page uses inline css using style attribute<BR/>Inline Style Sheet has the highest priority amomg
all style sheets<BR/>Text color is blue and margin left width is 20px.
</p>
</body>
</html>
<Register Number>

OUTPUT:

RESULT:

The creation of web page using Cascading style sheet is successfully executed.

4.
<Register Number>

DESIGN AN INTERACTIVE WEB SITE

AIM:

To create a client side scripts for validating web form controls using DHTML.

PROCEDURE:

Step 1: Open a new document and type the DHTML program.


(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">).

Step 2: Add the image source and frameset syntax in the DHTML code.

Step 3: Using window.alert() function to be display the form validation output in the client
side scripting.

Step 4: Similarly open the DHTML file signup, frames, form, registration and response

Step 5 : Finally run the DHTML program using chrome browser.

Signup.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<center>
<imgsrc="Penguins.jpg" alt="image1" width="20%" height="15%" />
<h1>
Welcome to my website!!!
</h1>
Please <b><i><abbr title="Sign Up for Form registration" ><a
href="Frames.html">Sign <sup>up</sup></a></abbr></i></b> here
</center>
<Register Number>

</body>
</html>

Frames.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<frameset cols="35,35" rows="*">
<frame id="fr1" src="Form.html" NAME="Left frame" >
<frame id="fr2" src="Default.html" NAME="Right frame" >
</frameset><noframes></noframes>
</html>

Form.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function check()
{
var name1=document.getElementById("uname").value;
if(name1.length<1)
{
window.alert("Field should be filled");
f1=0;
}
var re=new RegExp("^[0-9]");
if(re.test(name1))
<Register Number>

{
window.alert("User name should not start with a digit");
f1=0;
}
}
function check1()
{
var name1=document.getElementById("passwd").value;
if(name1.length<1)
{
window.alert("Field should be filled");
f1=0;
}
}
function check2()
{
var name2=document.getElementById("c_passwd").value;
var name1=document.getElementById("passwd").value;
if(name2.length<1)
{
window.alert("Field should be filled");
f1=0;
}
if(name1!=name2)
{
window.alert("Password mismatch");
f1=0;
}
}
</script>
</head>
<body>
<center>
<h2>
<Register Number>

Form Registration</h2>
<form name="f1" ACTION="Response.html" target = "Right frame">
<table border=1>
<tr>
<td>UserName</td>
<td><input type="text" id="uname" name="name" placeholder="your name*" onblur="check()"
/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="passwd" placeholder="Enter password*"
onblur="check1()" />
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" id="c_passwd" placeholder="Confirm password*"
onblur="check2()" />
</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>
<input type="submit" value="submit" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<Register Number>

Default.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h2>
Collecting Details...
</h2>
</body>
</html>

Response.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h2>
Welcome
</h2>
<h2>
Registration Successful
</h2>
</body>
</html>
<Register Number>

OUTPUT:

RESULT:

The creation of client side scripts for validating web form controls using DHTML is successfully
executed.
<Register Number>

5. ADDING TWO NUMBERS USING JAVA SCRIPT

AIM:

To write a program to get two numbers and display the sum on the browser.

PROCEDURE:

Step 1: Write Java script in html file using <script> tag.

Step 2: Open the file using any Web Brower.

Step 3: When window prompt you to enter the numbers, enter numbers.

PROGRAM:
HTML FILENAME: add.html
<html >
<head>
<title>ADD Program in JavaScript</title>

<script type = "text/javascript">

var number1, number2, sum;

number1 = parseInt(window.prompt("Enter the first number", "0"));


number2 = parseInt(window.prompt("Enter the second number", "0"));

sum = number1 + number2;

document.writeln("<h1>The sum is " + sum + "</h1>");

</script>
</head>
<body>
</body>
</html>

OUTPUT:
<Register Number>

RESULT:

The creation of program to get two numbers and display the sum on the browser is successfully
executed.
<Register Number>

6. COMPARING TWO NUMBERS USING JAVA SCRIPT

AIM:

To write a program for comparing two numbers.

PROCEDURE:

Step 1: Write Java script in html file using <script> tag.

Step 2: Open the file using any Web Brower.

Step 3: When window prompt you to enter the numbers, enter numbers.

PROGRAM:
HTML FILENAME: Compare.html
<html >
<head>
<title>Comparition Program in JavaScript</title>

<script type = "text/javascript">

var number1, number2, sum;

number1 = parseInt(prompt("Enter the first number", "0"));


number2 = parseInt(window.prompt("Enter the second number", "0"));

if( number1 == number2 )


document.writeln("first entered number and second entered numbers are equal");

if( number1 != number2 )


document.writeln("first entered number and second entered numbers are not equal");

</script>
</head>
<body>
</body>
</html>

OUTPUT:
<Register Number>

RESULT:

The creation of program for comparing two numbers is successfully executed.


<Register Number>

7. FORM VALIDATION USING JAVA SCRIPT

AIM:

To write a program to validate the html forms using java script.

PROCEDURE:

Step 1: Create a html files with forms ‘form.html’ using notepad

Step 2: Create java script file ‘script.js’ using notepad.

Step 3: Link the java script using <script type="text/javascript" src="script.js"> </script> in the html
file.

Step 4: Open “form.html” in any web browser.

PROGRAM:
HTML FILENAME: form.html
<html>
<head>
<title>LOGIN PAGE </title>
</head>
<script type="text/javascript" src="script.js">
</script>
<body>
<h1 style="color:green">LOGIN PAGE</h1>

<form onsubmit ="return validateForm()">


<!-- Enter first name -->
<td> login Name* </td>
<input type = "text" id = "fname" value = "">
<span id = "blankMsg" style="color:red"> </span> <br><br>

<!-- Create a new password -->


<td> Create Password* </td>
<input type = "password" id = "pswd1" value = "">
<span id = "message1" style="color:red"> </span> <br><br>

<!?Enter confirm password -->


<td> Confirm Password* </td>
<input type = "password" id = "pswd2" value = "">
<span id = "message2" style="color:red"> </span> <br><br>

<!-- Click to verify valid password -->


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

<!-- Click to reset fields -->


<button type = "reset" value = "Reset" >Reset</button>
</form>
</body>
</html>
<Register Number>

JS FILENAME: script.js
function validateForm() {
//collect form data in JavaScript variables
var pw1 = document.getElementById("pswd1").value;
var pw2 = document.getElementById("pswd2").value;
var name1 = document.getElementById("fname").value;

//check empty first name field


if(name1 == "") {
document.getElementById("blankMsg").innerHTML = "**Fill the first name";
return false;
}
var re=new RegExp("[0-9]");
if(re.test(name1))
{
document.getElementById("blankMsg").innerHTML = "**dont enter any digits/numbers";
}

if(pw1 == "") {
document.getElementById("message1").innerHTML = "**Fill the password please!";
return false;
}
//check empty confirm password field
if(pw2 == "") {
document.getElementById("message2").innerHTML = "**ReEnter the password please!";
return false;
}
//minimum password length validation
if(pw1.length < 8) {
document.getElementById("message1").innerHTML = "**Password length must be atleast 8
characters";
return false;
}
//maximum length of password validation
if(pw1.length > 15) {
document.getElementById("message1").innerHTML = "**Password length must not exceed 15
characters";
return false;
}

if(pw1 != pw2) {
document.getElementById("message2").innerHTML = "**Passwords are not same";
return false;
} else {
alert ("Your password created successfully");
document.write("your login has been successfully done");
}
}
<Register Number>

OUTPUT:
<Register Number>

RESULT:

The creation of program to validate the html forms using java script is successfully executed.

8.
<Register Number>

XAMPP SERVER

Installing and Configuring XAMPP Package:

1. Download the XAMPP installer package.

(https://www.apachefriends.org/download.html)

2. When the download is completed, run the .exe file.

3. You are given the option to install the Apache server and the MySQL database server as
services. If you install the Apache Server and MySQL as services, you will not have to start
them manually through the XAMP Control Panel. Note that you have the option to install or
uninstall these services in the XAMPP Control Panel.
4. If you are using the self-extracting archive, after the archive is extracted, run the file setup-
xampp.bat to configure the components of the package. (The XAMPP installer runs this file
automatically.)

5. After configuration, open the XAMP Control Panel. (You can open it manually by running
the file XAMPP_HOME/xampp-control.exe or from the Xampp Control Panel icon that is
automatically placed on your desktop.) When you open the XAMPP Control Panel, note that
the modules that are installed as services are already running.
Checking XAMPP Installation

Run your browser and enter the following URL: http://localhost. The XAMPP welcome page opens:
<Register Number>

RESULT:

The Installation of Apache Tomcat web server is successfully executed.


<Register Number>

9. GREETING TEXT USING PHP

AIM:

To write a program for get the name of the user from a form and show greeting text.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: greet.html
<html>
<head><style type="text/css">
div {font-size:20pt;color:green;font-family:Jokerman;text-align:center;width:30%}
p{font-size:18pt;color:darkblue;font-weight:bold;align:center;font-family:arial black}
.double{border-style:double}
.dashed{border-style:dashed}
</style></head><body><center><br><br>
<div class="double">GREETING TEXT</div><br>
<div class="dashed"><form action="gre.php" method="post">
<p>Enter The Text:<br><input type="text" name="n"></p><br>
<input type="submit" value="&nbsp;&nbsp; SUBMIT &nbsp;&nbsp;">
<br></div></center></form></body></html>
PHP FILENAME: gre.php
<?php
$n1=$_POST['n'];
echo'<p><img src="4c.gif" alt="flower" style="float:right;">';
echo'<center><font color="green" face="arial" size="6">WELCOME</font>';
echo ‘<center><b> $n1 </b><font color="green">!!!</font></center>';
?>

OUTPUT:
<Register Number>

RESULT:

The PHP program for get the name of the user from a form and show greeting text is tested
successfully.

10.
<Register Number>

PALINDROME CHECKING USING PHP

AIM:

To write a program for find the given number is palindrome or not.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: palindrome.php
<html>
<body>
<form action="" method="post">
<br><center><h1><u><font color="red">PALINDROME</font></u></h1></center>
<br><table bgcolor="forestgreen" align="center">
<tr><td><br><input type="text" value=" Enter the Input" readonly>
<input type="text" name="n"></tr></td>
<tr><td><br><br><center><br><br>
<input type="submit" value="&nbsp;&nbsp; SUBMIT &nbsp;&nbsp;">
<br><br><br></center></tr></td></table>
</form>
<?php
if($_POST)
{
$n1=$_POST["n"];
$p=$n1;
$s=0;
while($n1>=1)
{
$r=$n1%10;
$n1=$n1*(10/100);
$s=$s*10+$r;
}
echo '<table align="center" border="2" width="46%"><tr align="center"><td><br>';
<Register Number>

echo '<font color="forestgreen">';


if($p==$s)
echo"<h2> $p is Palindrome Number</h2>";
else
echo"<h2> $p is not Palindrome Number</h2>";
}
echo'</font>';
echo'</td></tr></table>';
?>
</body>
</html>

OUTPUT:
<Register Number>

RESULT:

The PHP program for checking palindrome is tested successfully.


<Register Number>

11.ARMSTRONG NUMBER CHECKING USING PHP

AIM:

To write a program for find the given number is Armstrong or not.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: armstrong.php
<html>
<body>
<form action="" method="post">
<br><center><h1><u>ARMSTRONG</u></h1></center>
<br><table bgcolor="Crimson" align="center">
<tr><td><br><input type="text" value=" Enter the Input" readonly>
<input type="text" name="n"></tr></td>
<tr><td><br><br><center><br><br>
<input type="submit" value="&nbsp;&nbsp; SUBMIT &nbsp;&nbsp;">
<br><br><br></center></tr></td></table>
</form>
<?php
if($_POST)
{
$n1=$_POST["n"];
$m=$n1;
$s=0;
while($n1>0)
{
$r=$n1%10;
$n1=$n1/10;
$s=$s+($r*$r*$r);
<Register Number>

}
echo '<table align="center" border="2" width="38%"><tr align="center"><td><br>';
echo '<font color="Crimson">';
if($m==$s)
echo"<h2> $m is Armstrong Number</h2>";
else
echo"<h2> $m is not Armstrong Number</h2>";
}
echo'</font>';
echo'</td></tr></table>';
?>
</body>
</html>

OUTPUT:
<Register Number>

RESULT:

The PHP program for find the given number is Armstrong or not is tested successfully.

12.
<Register Number>

FACTORIAL VALUE USING RECURSIVE FUNCTION

AIM:

To write a program for display factorial value using Recursive Function.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: fact.html
<html>
<body bgcolor="darkkhaki">
<form action="factorial.php" method="post">
<center><br><br><br><br><br><br>
<table align="center" border="2" width="30%">
<tr align="center" bgcolor="darkblue"><td><font
color="white"><br><h1>FACTORIAL</h1></td></tr>
<tr bgcolor="chocolate"><td><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;
<font face="arial" size="6" color="white">Enter the Digit:</font>
<input type="text" name="n" size="15">
<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;
<input type="submit" value="&nbsp;&nbsp;&nbsp; SEND &nbsp;&nbsp;&nbsp; "><br><br><br>
</td></tr></table>
</center>
</form>
</html>
PHP FILENAME: factorial.php
<?php
<Register Number>

$m=$_POST["n"];
function factorial($m)
{
if($m<2)
return 1;
else
return($m*factorial($m-1));
}
$f=factorial($m);
echo'<br><table border="2" align="center"><tr><td>';
echo'<center><font face="arial" size="15" color="crimson">FACTORIAL</font><br><br>';
echo"<b>-------------------------------------------------------------</b>";
echo'<font face="arial" size="10"><br>';
echo"Given Digit = $m <br>";
echo'<br><font color="green">';
echo "Factorial &nbsp;&nbsp;= $f";
echo"</center></font>";
echo'</td></tr></table>';
?>

OUTPUT:
<Register Number>

RESULT:

The PHP program for display factorial value using Recursive Function is tested successfully.

13.
<Register Number>

READ FROM EXISTING FILE USING PHP

AIM:

To write a program for reading content from existing file.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: read.php
<html>
<body>
<form method="post">
<table align="center">
<font color="deeppink"><h1><u>READ THE FILE</u></h1></font>
<tr><td><b>Enter Your File Name&nbsp;:</b></td><td><input type="text"
name="file"></td></tr><br>
<tr><td><b>Choose File Extension :</b></td><br>
<td><select name="ext">
<option>.txt</option>
<option>.doc</option>
<option>.pdf</option>
</select></td></tr><br>
<tr><td><b>Content Of The File:</b></td><td><textarea rows="10" cols="16" name="data">
<?php echo @$contents;?></textarea></td></tr>
<tr colspan=2 align="center"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="DISPLAY" name="disp">
</td></tr></table></form></body></html>
<?php
if(isset($_POST['disp']))
{
$f=$_POST['file'];
$ext=$_POST['ext'];
$data=$_POST['data'];
<Register Number>

$file=$f.$ext;
if(file_exists($file))
{
$fo=fopen($file,"r");
$contents=fread($fo,filesize($file));
}
else
{
echo'<font color="deeppink" face="arial black"><center>File Not Exits</center></font>';
}
}
?>

OUTPUT:
<Register Number>

RESULT:

The PHP program for reading content from existing file is tested successfully.

14.
<Register Number>

WRITE A NEW FILE USING PHP

AIM:

To write a program for writing contents into a new file.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: write.php
<html>
<body>
<form method="post">
<table align="center">
<font color="deeppink"><h1><u>WRITE THE FILE</u></h1></font>
<tr><td><b>Enter Your File Name :</b></td><td><input type="text" name="file"></td></tr><br>
<tr><td><b>Choose File Extension :</b></td>
<td><select name="ext">
<option>.txt</option>
<option>.doc</option>
<option>.pdf</option>
</select></td></tr><br>
<tr><td><b>Write Content of File :</b></td><td><textarea rows="10" cols="16" name="data">
<?php echo @$contents;?></textarea></td><br>
<tr colspan="2" align="center"><td><input type="submit" value=" SAVE " name="disp">
</td></tr></table></form></body></html>
<?php
$f=$_POST['file'];
$ext=$_POST['ext'];
$data=$_POST['data'];
$file=$f.$ext;
if(file_exists($file))
{
echo'<font color="green" face="arial black"><center>Your File Already Exists</center></font>';
}
else
<Register Number>

{
$fo=fopen($file,"w");
fwrite($fo,$data);
echo'<font color="deeppink" face="arial black"><center>Your Data is Saved</center></font>';
}
?>

OUTPUT:
<Register Number>

RESULT:

The PHP program for writing contents into a new file is tested successfully.
<Register Number>

15.HIT COUNTER USING COOKIES USING PHP

AIM:

To write a PHP program for counting the visiting page using cookie.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: cook.php
<?php
if (!isset($_COOKIE['visits'])) $_COOKIE['visits'] = 0;
$visits = $_COOKIE['visits'] + 1;
setcookie('visits',$visits,time()+3600*24*365);
?>
<html>
<head><style type="text/css">
div {font-size:20pt;color:navy;font-family:arial black; width:50%;background-color:white}
p{font-size:18pt;color:lime;font-weight:bold;text-align:center;font-family:bauhus 93}
.groove{border-style:groove}
.dotted{border-style:dotted}
</style></head><body bgcolor="salmon">
<?php
echo'<br><br><center><div class="groove">HIT COUNTER USING COOKIES</div><br>';
echo'<div class="dotted">';
if ($visits > 1) {
echo "<p>This is visit number $visits</p>";}
else {
echo'<p>Welcome to my Website! Click here for a tour!</p>';
}echo"<br></center></div>";
?></body></html>

OUTPUT:
<Register Number>

RESULT:

The PHP program for counting the visiting page using cookie is tested successfully.
<Register Number>

16.
<Register Number>

LOGIN PAGE USING SESSION

AIM:

To write a program for login page using session.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:

LOGOUT.PHP
<?php
header('location:des.php');
?>

DES.PHP
<?php
session_start();
if(@$_POST['submit1'])
{
$u = $_POST['text1'];
$p = $_POST['pwd'];
if($u =="[email protected]" && $p=="nithya@1986")
{
$_SESSION['luser'] = $u;
$_SESSION['start'] = time();
// taking now logged in time
$_SESSION['expire'] = $_SESSION['start'] + (1*60) ;
// ending a session in 1 minutes from the starting time
header('Location: home.php');
}
else
{
$err= "<font color='red'>Invalid user login </font>";
}
}
?>
<html>
<head>
<title>Destroy Session after 1 minutes - Phptpoint.com</title>
</head>
<body>
<form name="form1" method="post">
<table align="center">
<Register Number>

<tr>
<Td colspan="2"><?php echo @$err;?></Td>
</tr>
<tr>
<td>Username </td>
<td><input type="email" name="text1" placeholder="[email protected]" required>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd" placeholder="nithya@1986" required></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="SignIn" name="submit1">
</td> </tr>
</table>
</form>
</body>
</html>

HOME.PHP
<?php
session_start();
if(!isset($_SESSION['luser']))
{
echo "<p align='center'>Please Login again ";
echo "<a href='des.php'>Click Here to Login</a></p>";
}
else
{
$now = time();
// checking the time now when home page starts
if($now > $_SESSION['expire'])
{
session_destroy();
echo "<p align='center'>Your session has expire ! <a href='login.php'>Login Here</a></p>";
}
else
{
?>
<html>
<head>
<title>Destroy Session after 1 minutes - Phptpoint.com</title>
</head>
<body>
<p style="background:#CCCCCC">
Welcome <?php echo $_SESSION['luser']; ?>
<span style="float:right"><a href='logout.php'>LogOut</a></span>
<p style="padding-top:20px;background:#CCCCCC; height:400px; text-align:center">
<span style="color:red;text-align:center">Your Session Will destroy after 1 minutes You will
redirected on next page</span>
<br/><br/>
<span>if you want to logout before 1minutes click on logout link </span>
<Register Number>

</p>
</p>
<?php>}
?>
</body>
</html>

OUTPUT:

Open Home Page:


<Register Number>

DESTROY SESSION

RESULT:

The PHP program for login page using session is tested successfully.
<Register Number>

17.
<Register Number>

HANDLING MULTIMEDIA CONTENT

AIM:

To write a program for handling multimedia content.

PROCEDURE:

Step 1: Start apache server from XAMPP control panel.

Step 2: Create php script.

Step 3: Place the file into htdocs folder

Step 4: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: multimedia.html
<html>
<head>
<title>Video demo</title>
</head>
<body>

<video width="320" height="240" controls>


<source src="mov_bbb.mp4" type="video/mp4">

Your browser does not support the video tag.


</video>

<audio controls>

<source src="xyzabcd.mp3" type="audio/mpeg">


Your browser does not support the audio element.
</audio>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">


</iframe>

</body>
</html>

OUTPUT:
<Register Number>

RESULT:

The HTML program for handling multimedia content is tested successfully.

18.
<Register Number>

LOGIN WITH SQL CONNECTION USING PHP

AIM:

To create a php program for login page with SQL connection.

PROCEDURE:

Step 1: Start apache server and mysql server from XAMPP control panel.

Step 2: Create Database “register” and a table “users” in MySQL.

Step 3: Create username=’siva’ and password=”siva”.

Step 4: Create html form for login (db.html)

Step 5: Create php script to connect with database and validate username and password (sql.php)

Step 6: Place all files into htdocs folder

Step 7: Type “localhost/<filename>

PROGRAM:
HTML FILENAME: db.html
<html>
<body>
<form action="sql.php" method="post">
<br><center><table border=2" bordercolor="red">
<tr><td><table><tr font face="white">
<th colspan="2" bgcolor="crimson" align="center">
<h3>LOGIN FORM</th></tr>
<tr><th align="left">UserName</th>
<td><input type="text" name="u"></td></tr>
<tr><th align="left">Password</th>
<td><input type="password" name="p"></td></tr>
<tr align="center"><br><td><input type="submit" value=" LOGIN "></td>
<td><input type="reset" value=" CLEAR "></td></tr>
</table></td></tr></table>
</center></form></body></html>

PHP FILENAME: sql.php


<?php_track_vars ?>
<?php
$un=$_POST['u'];
$pd=$_POST['p'];
$con=0;
$db=mysqli_connect("localhost","root","","register");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
<Register Number>

$query = "SELECT * FROM `users` WHERE username='$un'


and password='".md5($pd)."'";

$res=mysqli_query($db,$query) or die(mysql_error());

$rows = mysqli_num_rows($res);
if($rows==1){

echo"<font color='blue' size='5' align='center'>Welcome to this pc</font>";


}
else
{
echo"<font color='red' size='5' align='center'>Invalid Username or Password</font>";
}

?>

OUTPUT:
<Register Number>

RESULT:

The PHP program for login page with SQL connection is tested successfully.

19.
<Register Number>

APACHE TOMCAT SERVER

Installing & Configuring Apache Tomcat Server 7.0.35

1. Go to http://tomcat.apache.org/download-70.cgi and download and unpack the zip file for


the current release build of Tomcat 7.0.
2. Save the zip file(s) on your PC and unzip into a location of your choice.

3. Set the JAVA_HOME environment variable. Set to your JDK installation directory, e.g., "c:\
Program Files\java\jdk1.6.0_xx". JAVA_HOME is needed for running Tomcat and many
other Java applications.

4. Set the CATALINA_HOME environment variable.This variable identifies the Tomcat


installation directory to the server.
(Eg) C:\apache-tomcat-7.0.35

5. Set the CLASSPATH environment variable.

Since servlets and JSP are not part of the Java 2 platform, standard edition, you have to
identify the servlet classes to the compiler. The server already knows about the servlet
classes, but the compiler (i.e., javac) you use for development probably doesn't. So, if you
don't set your CLASSPATH, attempts to compile servlets, tag libraries, filters, Web app
listeners, or other classes that use the servlet and JSP APIs will fail with error messages
about unknown classes. Here are the standard Tomcat locations:

install_dir/common/lib/servlet-api.jar
install_dir/common/lib/jsp-api.jar
(eg: install_dir = C:\apache-tomcat-7.0.35)

You need to include both files in your CLASSPATH.

6. The directory structure of install_dir has subdirectories like bin, webapps, common and other
subdirectories. The bin directory contains the two important batch files startup and
shutdown. The startup batch file is used to start and run the TOMCATServer. The shutdown
batch file is used to shutdown the TOMCAT server.

7. The Development directory is created in WebApps directory. The development directory


should contain the WEB-INF directory and can contain other types of files (html, jsp, image
etc.). The WEB-INF directory should contain following directories/files: classes directory,
lib directory, and web.xml. The servlet class files should be stored in classes directory.
<Register Number>

Fig: Tomcat Installation Directory

Fig: Development directory inside webapps directory


<Register Number>

Running JSP/Servlets

1. The WEB.xml file should contain the following tags to run a servlet:
<servlet><servlet-name>yourservletname</servlet-name><servlet-
class>yourservletname</servlet-class>

</servlet><servlet-
mapping>

<servlet-name>yourservletname</servlet-name><url-
pattern>/servlet/ yourservletname</url-pattern>

</servlet-mapping>

2. Start startup batch file to start the TOMCAT server.

3. Open a web browser like Internet Explorer.


4. To run the JSP file, type the following URL in the address bar:
http://localhost:8080/yourdevlopdir/my.jsp
5. To run the servlet file, type the following URL in the address bar:
http://localhost:8080/yourdevlopdir/servlet/yourservlet

20.
<Register Number>

INVOKING SERVLET FROM HTML

AIM:

To create a program in java using servlets to invoke servlets from HTML forms and session
tracking.

PROCEDURE:

Step 1: Open a NetBeans IDE 8.0 and create a new project in java.

Step 2: Assign the project name and save it.

Step 3: Webinfo to be created index.html

Step 4: create a new servlet file from your project and source package generated the new servlet file.
<Register Number>

Step 5: Assign the name for servlet file and save it.

Step 6: Start the Xampp control panel to run the servlets.

Step 7: Write the program for compound Interest in servlets file.

Step 8: Finally run the html program and servlets using chrome browser with support of
localhost.

PROGRAM:

<!--ciform.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CompoundInterest</title>
</head>
<body style="background-color:khaki">
<h1>CompoundInterest</h1>
<Register Number>

<form action="servlet/InterestServlet" method="post">


<table>
<tr>
<td> Enter the Principal:</td>
<td><input type="text" name="p1"/></td>
</tr>
<tr>
<td> Enter the Term:</td>
<td><input type="text" name="n1"/></td>
</tr>
<tr>
<td>Enter the Rate of Interest:</td>
<td><input type="text" name="r1"/></td>
</tr>
<tr>
<td><input type="submit" name="s" value="FIND COMPOUNDINTEREST"/></td>
<td><input type="reset" name="s" value="CLEAR"/></td>
</tr>
</table>
</form>
</body>
</html>

/*InterestServlet.java*/
import java.io.*;
importjava.util.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
public class InterestServlet extends HttpServlet
{
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throwsServletException, IOException
{
response.setContentType("text/html;charset=UTF-8");
int p=Integer.parseInt(request.getParameter("p1"));
int n=Integer.parseInt(request.getParameter("n1"));
double r=Double.parseDouble(request.getParameter("r1"));
PrintWriter out = response.getWriter();
double ci=p*(Math.pow(1+(r/100),n)-1);
try
{
out.println("<html>");
out.println("<head>");
out.println("<title>Compound Interest Servlet</title>");
out.println("</head>");
out.println("<body style=\"background-color:khaki\">");
out.println("<h1>Compound Interest</h1></hr>");
out.println("<table border=\"1\">");
out.println("<tr><td>Principal
Amount</td><td>"+p+"</td></tr>");
out.println("<tr><td>Deposit
Term</td><td>"+n+"</td></tr>");
out.println("<tr><td>Rate of
<Register Number>

Interest</td><td>"+r+"</td></tr>");
out.println("</table>");
out.println("<hr/>Compund Interest Amount:"+ci);
out.println("</body>");
out.println("</html>");
}
finally
{
out.close();
}
}
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throwsServletException, IOException
{
doGet(request,response);
}
}

/*web.xml*/
<servlet>
<servlet-name>InterestServlet</servlet-name>
<servlet-class>InterestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InterestServlet</servlet-name>
<url-pattern>/servlet/InterestServlet</url-pattern>
</servlet-mapping>

OUTPUT:
<Register Number>

RESULT:

The program in java using servlets to invoke servlets from HTML forms and session tracking is
successfully executed.
<Register Number>

21. DISPLAY PERSONAL INFORMATION

AIM:

To a write program for display our personal information using various tags.

PROCEDURE:

Step 1: Create write html file using notepad.

Step 2: Open the file using any Web Brower.

PROGRAM:
HTML FILENAME: personal.html

<html>
<body text="red" bgcolor="orange"><table align="center" bgcolor="white"><tr><td>
<center><h1><hr><hr>** PERSONAL DETAILS **<hr><hr></h1></center>
<font color="blue"><pre><h3> NAME - <b><font face="Courier">Riya</font>
D.O.B - <b><font face="Courier">Sep 10,1995</font>
BLOOD GROUP - <b><font face="Courier">A+</font>
ADDRESS - <b><font face="Courier">Kenikarai</font>
CONTACT NO - <b><font face="Courier">04567-220023</font>
EMAIL ID - <b><font face="Courier">[email protected]</font></font>
<font color="deeppink"><center><hr><hr><h1> ** MY FAVOURITES **</h1></center>
<hr><hr><font color="green"> FRIEND : <b><font face="Courier"> Akila</font>
FOOD : <b><font face="Courier"> Idly</font>
COLOUR : <b><font face="Courier">Blue & Pink</font>
PLACE : <b><font face="Courier">USA</font>
SPORTS : <b><font face="Courier"> Football</font>
DIRECTOR : <b><font face="Courier">Gowtham vasudev menan</font>
BOOK : <b><font face="Courier">The MONK Who Sold His FERRARI</font>
MOVIE : <b><font face="Courier">Ok Ok</font>
HOBBIES : <b><font face="Courier">Drawing </font>
</font></pre></h3></td></tr></table>
</body></html>

OUTPUT:
<Register Number>

RESULT:

The PHP program for display our personal information using various tags is tested successfully.

You might also like