MURUGAPPA POLYTECHNIC COLLEGE
SATHYAMURTHY NAGAR, CHENNAI-600 062
(Academically Autonomous Institution)
PRACTICAL MANUAL
ACADEMIC YEAR 2024 – 2025
DEPARTMENT : COMPUTER ENGINEERING
COURSE CODE : CSN45
COURSE NAME : WEB DESIGN & PROGRAMMING PRACTICAL
SEMESTER : IV
1
LIST OF EXERCISES:
1. Design a HTML page describing your profile in one paragraph. Design in such a way
That it has a heading, a horizontal rule, three links and your photo . Also, write three
HTML Documents for the links. Include facilities for forward, backward and
HOME.
1. Design a single page website for your polytechnic containing a description of the courses
offered. It should also contain some general information about the college such as its
history, the campus, and its unique features and so on. The site should section should
have a different color .
3. Write a program using CSS to create a time table.
4. (a) Write a Java script code that converts the entered text to uppercase
(b) Write a JavaScript code to validate the user name and password. The
User name and password are stored in variables.
5. Write a Java Script code using frames and Events (When a cursor moves over an
object, it should display the specification of the object in another frame ).
6. Create a site containing banner advertisement at the top of the page. The ads are
changed every 10 or15 second
7. Write JQuery Program for Count the number of milliseconds between the two click
events on a paragraph.
8. Write JQuery Program for Fade in and fade out all division elements.
9. Write JQuery Program for Disable/enable the form submit button & Blink the text.
10. Collect the definitions of 5 items in Open Source. These definitions are stored in two
String Arrays name [] and defn[]. Write a JSP which has these two arrays and
Supplies the definition on request. Write a HTML document which gets the user
Input of the name of the item and sends the request to the JSP.
11. Write a JSP code to manipulate cookies.
12. Write a program to check how many users have visited a website. Use Application
object.
13. Create a web page and execute a PHP file on submission of the html form and
display the Information using PHP.
14. Create a PHP code will retrieve the data captured by the html form, display the
name of the Form and also display the message “data entered successfully” after
performing validations.
15. Create a database of an employee, connect the database and perform the read,
write, update, delete operations in the database using PHP.
2
EX.NO. 1
DESIGNING PROFILE USING HTML
AIM:
To design a HTML Page describing profile in one paragraph. The Page is designed in such a
way that it has a heading, a horizontal rule, three links and a photo. That three links leads to three
HTML documents and includes facilities for BACK, FORWARD and HOME.
PROCEDURE:
1. This HTML Document is prepared using Notepad editor.
2. This HTML Document starts and ends with <HTML> Tag. It has a header section and a body
section.
3. In the header section title of the page is given using the <TITLE> Tag.
4. In the Body section the content of the page ie., a paragraph about your Profile is given
using the paragraph tag <P>.
5. A heading is included using <H1> tag
6. A Horizontal rule is included using <HR> Tag.
7. An Image Tag <IMG> is used to include photo image.
8. Anchor tag <A href =" “> … </A> is used to include hyper links which leads to another
web page.
9. The linked pages are also created as HTML documents and saved in the same directory
where the main page is stored.
PROGRAM:
Home Page - profile.html
<html>
<head>
<title> My Profile </title>
</head>
<body bgcolor = "pink" text = "green">
<h2 align = "center"> PROFILE </h2>
<hr>
<br><br><br>
<Img src = "D:\phjohn\personal\champa.jpg"align = "right" hspace = "10"></img>
<p>
<font face = "Times New Roman" size = "4">
Iam a software Engineer.
</font>
</p>
<br><br><br>
<a href = "D:\phjohn\personal\personal.html"> Personal Details</a> <br><br>
<a href = "D:\phjohn\personal\edu.html"> Educational Details</a> <br><br>
<a href = "D:\phjohn\personal\exp.html"> Experience Details</a> <br><br>
</body>
</html>
Personal Details page - personal.html
3
<html>
<head>
<title> PROFILE - Personal Details </title>
</head>
<body bgcolor = "Blue">
<center><h2> PERSONAL DETAILS </h2></center><hr>
<pre>
Name:S.Arun
DOB:30/08/78
Father's Name:D.Sathish
</pre>
<a href = "profile.html"> Back </a>   
<a href = "edu.html"> Forward </a>   
<a href = "profile.html"> Home </a>
</body>
</html>
Educational Details edu.html
<html>
<head>
<title>Profile Educational Details</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Profile Educational Details</h2>
<table style="width:100%">
<tr>
<th>Exam Passed</th>
<th>Board</th>
<th>Percentage</th>
</tr>
<tr>
<td>10th</td>
<td>SSLC</td>
<td>75%</td>
</tr>
<tr>
<td>12th</td>
<td>School Education</td>
<td>80%</td>
</tr>
<tr>
<td>Diploma</td>
4
<td>Directorate of Technical Education</td>
<td>80%</td>
</tr>
</table>
<a href = "profile.html"> Back </a>   
<a href = "exp .html"> Forward </a>   
<a href = "profile.html"> Home </a>
</body>
</html>
Experience details Page - exp.html
<html>
<head>
<title> Profile Experience Details </title>
</head>
<body bgcolor ="lightgreen">
<div align = "center">
<h2> EXPERIENCE DETAILS </h2>
<hr>
</div>
<ul>
<li> Worked as part time Faculty in Browsing Center For 5 months</li>
<li> Worked as software Engineer in HCL for 1 year</li>
</ul>
<a href = javascript:history.back();> Back </a>
<a href = "profile.html"> Home </a>
</body>
</html>
OUTPUT:
5
6
RESULT:
Thus the above program was successfully executed and output was verified.
7
EX.NO.2
POLYTECHNIC WEBSITE
AIM:
To Design a website for your Polytechnic containing the description of the courses offered. This
page also contains some general information about the university such as its history, the campus,
and its unique features and so on. This site is colored and each section has different colors.
PROCEDURE:
1. This HTML Document is prepared using Notepad editor.
2. This HTML Document starts and ends with <HTML> Tag. It has a header section and a body
section.
3. In the header section title of the page is given using the <TITLE> Tag.
4. In the Body section the content of the page ie., a paragraph about your Profile is given
using the paragraph tag <P>.
5. A heading is included using <H1> tag
6. Html frames are created using <frameset> tag and Polytechnic details displayed using
menu. Menu created using hyperlink tag in html.
PROGRAM:
Homeframe.html
<html>
<head>
<title>HTML Frames - A Basic Frame Layout</title>
</head>
<frameset cols="20%,80%">
<frame src="D:\phjohn\personal\web\menu.html" name="menu">
<frame src="D:\phjohn\personal\web\fp.html" name="content">
</frameset>
</html>
FP.html
<html>
<head>
<title>HTML Frames - A Basic Frame Layout</title>
</head>
<body bgcolor="Yellow">
<marquee><b><font face="arial size="20">MURUGAPPA POLYTECHNIC
COLLEGE</FONT></B></MARQUEE>
</BODY>
</html>
Menu.html
<html>
<head>
<title>Site Menu</title>
<base target="content">
</head>
<body>
8
<center><h3>MENU</h3>
<br>
<a href="aboutus.html" target="content">ABOUT US</a><br>
<a href="coursesoffered.html" target="content">COURSES OFFERED</a><br>
<a href="facilities.html" target="content">FACILITIES</a><br>
<a href="clubs.html" target="content">CLUBS</a><br>
</body>
</html>
aboutus.html
<html>
<head>
<title>ABOUT US</title>
</head>
<body bgcolor="lightgreen">
<font face="tahoma" size="20"><b><U>ABOUT US</U></B></FONT>
<P>
<FONT FACE="ARIAL" SIZE="5"><I>
Murugappa Polytechnic College was started in August 1957, as a Government aided polytechnic by
AMM Charities Trust in the memory of Dewan Bahadur AM Murugappa Chettiar. The Institution is
situated on a 12.5 hectares campus in the western part of Chennai on the Chennai - Tiruvallore High
Road and is affiliated to the Tamil Nadu State Board of Technical Education.
To be a World Class Institution by imparting Quality Education & Training of International Standards
in Engineering and Technology through Continuous Improvement, Team Work, Growth and
Innovation.
</I>
</FONT>
</BODY>
</HTML>
Coursesoffered.html
<html>
<body>
<h2>COURSES OFFERED</h2>
<ol>
<li>Civil Engineering</li>
<li>Computer Engineering</li>
<li>Electrical & Electronics Engineering</li>
<li>Electronics & Communication Engineering</li>
<li>Mechanical Engineering</li>
<li>Mechancial Engineering (Tool & Die)</li>
<li>Electronics(Robotics)</li>
</ol>
</body>
</html>
9
Facilities.html
html>
<head><title>Facilities</title></head>
<body>
<font face="arial" size="10">FACILITIES</FONT>
<OL>
<LI>COMMUNICATION SKILLS IN ENGLISH LABORATORY</LI>
<LI>LIBRARY</LI>
<LI>CAFTERIA</LI>
<LI>INDOOR GAMES & OUTDOOR GAMES</LI>
<LI>CLUBS</LI>
</OL>
</BODY>
</HTML>
Clubs.html
<html>
<head><title>CLUBS</title></head>
<body>
<font face="arial" size="10">CLUBS</FONT>
<OL>
<LI>ENGLISH CLUB</LI>
<LI>LIBRARY</LI>
<LI>CAFTERIA</LI>
<LI>INDOOR GAMES & OUTDOOR GAMES</LI>
<LI>CLUBS</LI>
</OL>
</BODY>
</HTML>
OUTPUT:
10
11
RESULT:
Thus the above program was successfully executed and output was verified
12
EX .NO.3
DISPLAYING TIME TABLE USING CSS
AIM:
To write a program using CSS to create a time table for the class.
PROCEDURE:
1. A style sheet rule is simply a formatting or positioning instruction the web browser will apply
to a specific type of html element.
2. This HTML Document contains style sheet applied for table element.
3. The style is enclosed within the tags <style>…</style>.
4. The rules in the style sheet instructs the attributes of table like background color, text
color,position to have certain values.
5. Therefore the web browser will create the table with a blue background and white text .
PROGRAM:
Timetable.html
<html>
<head>
<title> CSS Rule used to style a table </title>
<style type ="text/css">
table {background:blue; color:white; font-size:20px; position:absolute;left:150px;top:200px}
</style>
</head>
<body>
<h1> Table with White text and a blue background</h1>
<table border="1">
<tr>
<th> DAY </th>
<th> 1 </th>
<th> 2 </th>
<th> 3 </th>
<th> 4 </th>
<th> 5 </th>
<th> 6 </th>
<th> 7 </th>
</tr>
<tr>
<td> MON </td>
<td> .NET</td>
<td> RDBMS</td>
<td> SE</td>
<td> WP</td>
<td colspan ="4"> .NET LAB</td>
</tr>
<tr>
<td> TUE </td>
<td> WP</td>
13
<td> RDBMS</td>
<td> SE</td>
<td> .NET</td>
<td colspan ="4"> .NET LAB</td>
</tr>
<tr>
<td> WED </td>
<td> RDBMS</td>
<td> SE </td>
<td> WP</td>
<td> .NET</td>
<td colspan ="4"> RDBMS LAB</td>
</tr>
<td> THURS </td>
<td> RDBMS</td>
<td> WP</td>
<td> SE</td>
<td colspan ="3"> WP LAB</td>
</tr>
<td> FRI </td>
<td> WP</td>
<td> SE </td>
<td> WP</td>
<td> .NET</td>
<td colspan ="4"> RDBMS LAB</td>
</tr>
</table>
</body>
</html>
OUTPUT:
RESULT:
Thus the above program was successfully executed and output was verified.
14
EX.NO:4A
LOWERCASE TO UPPERCASE
AIM:
To write a Javascript code that converts the entered text from lowercase to uppercase and vice
versa.
PROCEDURE:
1. This Html Document has JavaScript code for converting text from lowercase to upper case.
2. Using prompt box get the input string and store it in variable low
3. Convert to uppercase letters using toUpperCase() function.
4. Convert to lowercase letters using toLowerCase() function.
5. Document.writeIn function is used to write the result in current document.
PROGRAM:
L.html
<html>
<head>
<title>
Lowercase to uppercase</title>
</head>
<body>
<script language="JavaScript">
var str=new String(" hello ")
var str1=str.toUpperCase();
document.write(" The upper case String for "+str+" is "+str1) ;
</script>
</body>
</html>
OUTPUT:
RESULT: Thus the above program was successfully executed and output was verified.
15
EX.NO:4B:
DATE:
VALIDATE THE USERNAME AND PASSWORD
AIM:
To write a JavaScript to validate the username and password.
PROCEDURE:
1. This Html document contains a java script to validate the given username and password.
2. Using html Forms and Input box get the string values for username and password.
3. On submission of this form the validate function is called to test the Username and
password.
4. Using if statement the user name and password is compared with an already present
username and password
PROGRAM:
Us.html
<html>
<head>
<title>
UserName Password</title>
</head>
<body>
<script language="JavaScript">
var user=prompt(" Enter username ");
var pass=prompt(" Enter password ");
if( (user=="aaa") && (pass=="bbb"))
{
alert("Login successfully");
}
else
{
alert("Login failed");
}
</script>
</body>
</html>
OUTPUT:
16
RESULT: Thus the above program was successfully executed and output was verified
17
EX.NO.5
FRAMES AND EVENTS
AIM:
To write a JavaScript code using frames and events to display the specification of an object in
another frame when a cursor move over the object.
PROCEDURE
1. HTML document for displaying two frames is written using <frameset> tag.
2. In the first frame the HTML Document called f1.html is displayed.
3. In the second frame the Html document called f2.html is displayed.
4. The attribute using here is “onMouseMove”.
PROGRAM:
Home.html
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME SRC ="f1.html"name="left_frame">
<FRAME SRC ="f2.html"name="right_frame">
</FRAMESET><noframes></noframes>
</HTML>
f1.HTML
<HTML>
<HEAD>
<TITLE>JavaScript Example</TITLE>
</HEAD>
<BODY>
<FORM>
<p>
<INPUT type="button" value="How are You?"
onMouseMove="parent.right_frame.document.form1.text1.value='I am fine'">
</p>
<p>
<INPUT type="button"value="How old are you?"
onMouseMove="parent.right_frame.document.form1.text1.value='I am 21'">
</p>
<p> </p>
</FORM>
</BODY>
</HTML>
f2.HTML
<HTML>
<HEAD>
<TITLE>JavaScript EXAMPLE 14</TITLE>
</HEAD>
<BODY>
<body bgcolor = "red">
<h1> Frame2 </h1>
<FORM name="form1">
<INPUT type="text" name="text1" size ="30" value="">
</FORM>
</BODY>
</HTML>
18
OUTPUT :
RESULT: Thus the above program was successfully executed
19
EX.NO:6
CHANGING BANNER ADS
AIM:
To create a site containing banner ads on top of the page and the ads are changed every 10
seconds.
PROCEDURE:
1. When this web page is first loaded in to the web browser, it runs the function changeimage.
2. Create a variable called bannercode. The initial value of this variable is set to zero.
3. The function changeimage increases the value of the bannercode variable, if it is greaer
than the number of images.
PROGRAM:
<html>
<head>
<style>
img{
margin:50px;
}
</style>
<script language ="javascript">
var i=0; path=new Array();
path[0]="flower1.jpg";
path[1]="flower.jpg";
function swapimage()
{
document.slid.src=path[i];
if(i<path.length-1)
i++;
else i=0;setTimeout("swapimage()",5000);
}
window.onload=swapimage;
</script>
</head>
<body
<img src="C:\Users\USER\Desktop\flower1.jpg"height="150" name="slid" src="file" width="300"/>
<img src="C:\Users\USER\Desktop\flower.jpg"height="150" name="slid" src="file" width="300"/>
</body>
</html>
20
OUTPUT:
RESULT: Thus the above program was successfully executed and output was verified.
21
EX.NO:7
DATE:
COUNT THE NUMBER OF MILLISECONDS BETWEEN THE TWO CLICK EVENTS
AIM:
To create a jquery program for count the number of milliseconds between the two click
events on a paragraph
PROCEDURE:
1. Jquery program for displaying and count the number of milliseconds between the two
links in notepad
2. Save a file name as milliseconds.html
3. Create a script src using jquery.min.js
4. When we click the two events on a paragraph it will should the output.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>Count the number of milliseconds between the two click events on a paragraph </p>
<div>Click on the above paragraph</div>
</body>
<script>
var lastt, tdiff;
$( "p" ).click(function( event ) {
if (lastt) {
tdiff = event.timeStamp - lastt;
$( "div" ).append( "Time since last event: " + tdiff + "<br>" );
} else {
$( "div" ).append( "<br>Click again.<br>" );
}
lastt = event.timeStamp;
});
</script>
</html>
22
OUTPUT:
RESULT: Thus the above program was successfully executed and output was verified.
23
EX.NO:8
FADE IN AND FADE OUT ALL DIVISION ELEMENTS
AIM:
To create a jquery program for fade in and fade out all division elements
PROCEDURE:
1. CcreateJquery program for fade in and fade out all division elements in notepad
2. Save a file name as fadein.html
3. Create a script src using jquery.min.js
4. When we click the My Effect is fadeOut Effect
5. It will display the fade in within 3 seconds in the browser
6. Also It will display the fade out in within 3 seconds in the browser.
PROGRAM:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="background:#2E9AFE;width:100%;">My Effect is fadeOut Effect</div>
<button id="btn2">Fade In (3 Second)</button>
<button id="btn1">Fade Out (3 Second)</button>
</body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").fadeOut(3000);
});
$("#btn2").click(function(){
$("div").fadeIn(3000);
});
});
</script>
</html>
24
OUTPUT:
RESULT: Thus the above program was successfully executed and output was verified.
25
EX.NO:9
DISABLE AND ENABLE THE FORM SUBMIT BUTTON AND BLINK THE TEXT
AIM:
To create a jquery program for disable and enable the form submit button and blink the text
PROCEDURE:
1.CreateJquery program for disable and enable the form submit button and blink the text
2.Save a file name as disable.html
3.Create a script src using jquery.min.js
4.When we write the name in the textbox it should enable the submit button in the browser
PROGRAM:
<html>
<head>
<title>jQuery - Enable or Disable Button</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><html>
</head>
<body>
Name: <input type="text" id="tbName" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#tbName').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
26
OUTPUT:
RESULT: Thus the above program was successfully executed and output was verified
27
EX.N0 10
COLLECT THE DEFINITIONS OF 5 ITEMS IN OPEN SOURCE.THESE DEFINITIONS ARE
STORED IN TWO STRING ARRAYS NAME[] AND DEFN[] USING JSP
AIM:
To write a JSP which supplies the definitions of 5 items in opensource which is stored in two
string arrays on request. And to write an HTML document to get the user input of the name of the
item and sends the request to the JSP.
PROCEDURE:
1. In the main html document using FORMS and INPUT box a term from opensource is got as
input.
2. In the FORM action attribute the path of the JSP file opensource.jspnis given.
3. So that on submitting the FORM the opensource.jsp file can be called.
4. The JSP file is created like HTML document using notepad editor. It is stored in the server in
a specified location.The JSP script is given within the symbols <%..%>
5. In the JSP file two string arrays name() and defn() are declared to have 5 string elements
each.
PROGRAM:
Main html page
<html>
<head>
<title> opensource </title>
</head>
<body bgcolor=green>
<form action=http://localhost:8080/opensource.jsp>
<center>
<h2> Some definitions in opensource </h2>
<hr>
<br>
Type a term here:
<input type=”text” name=”t1”>
<br><br>
<input type=”submit” value=”submit”>
<br><br>
</hr>
</h2>
</center>
</form>
</body>
</html>
28
Jsp code(opensource.jsp)
<html>
<head>
<title>open source</title>
</head>
<body bgcolor=BISQUE>
<center>
<h2>some definition in opensource</h2>
<%
String d=request.getParameter("t1");
String[] name;
int i=0,n=5;
name = new String[5];
name[0]="Notepad++";
name[1]=”firefox";
name[2]="Gimp";
name[3]="Vlc";
name[4]="PDFeditor";
String[] defn;
defn[]=new String[5];
defn[0]="Reliable,customizable,intuitive and free.Notepad++ is the most popular windows based css
editor around";
defn[1]="Firefox currently accounts for 24.43% of the recorded usage share of web browsers";
defn[2]="Just like sound editors, industry,standard image editing software is expensive or a lot of
people";
defn[3]="Vlc mediaplayer had been downloaded 300 million times.Vlc supports practically every
audio/video codec and file format";
defn[4]="Windows users can consider PDF creator a readable rival to adobe acrobat";
for(i=0;i<5;i++)
{
if(d.equals(name[i]))
n=i;
}
out.println(d +":");
out.println(defn[n]);
%>
</center>
</body>
</html>
29
OUTPUT:
RESULT: Thus the above program was successfully executed
30
EX.NO:11
DATE:
COOKIES MANIPULATION
AIM:
To write a JSP code for Creating, Reading and deleting Cookies.
PROCEDURE:
1. The first JSP Code Cookieor.jsp displays a form which prompts the user to enter the user
name.
2. User inputs are posted to the “setcookie.jsp” file which sets the cookie.
3. Using SetMaxAge Method the maximum age of the cookie is set. The Cookie will expire after
the given time in seconds.
4. In the “setcookie.jsp” the HTML code will display a link to view the cookie page
“showcookie.jsp”
5. In the “showcookie.jsp” the cookie value is retrieved and displayed in the browser.
PROGRAM:
Cookieform.jsp
<html>
<head>
<title> Cookie Input Form </title>
</head>
<body>
<form method="POST" action="setcookie.jsp">
<b> enter your name: </b>
<input type="text" name="username"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Setcookie.jsp
<%@ page language="java" import="java.util.*"%>
<%
String username= request.getParameter("username");
if(username==null) username="";
Date now= new Date();
String timestamp = now.toString();
Cookie cookie = new Cookie ("username", username);
cookie.setMaxAge(365 * 24 * 60 * 60);
response.addCookie(cookie);
%>
<html>
<head>
<title> Cookie Saved</title>
</head>
<body>
31
<p> <a href="showcookie.jsp"> Next Page to view the cookie value </a> <p>
</body>
</html>
Showcookie.jsp
<%@ page language="java" %>
<%
String cookieName = "username";
Cookie cookies [] = request.getCookies ();
Cookie myCookie = null;
if(cookies != null)
{
for(int i=0;i< cookies.length;i++)
{
if(cookies[i].getName().equals(cookieName))
{
myCookie = cookies[i];
break;
}
}
}
%>
<html>
<head>
<title> Show Saved Cookie</title>
</head>
<body>
<%
if(myCookie == null)
{
%>
No Cookie found with the name <%=cookieName%>
<%
}else{
%>
<p> Welcome: <%=myCookie.getValue()%>
<%
}
%>
</body>
</html>
32
OUTPUT:
RESULT: Thus the above program was successfully executed
33
EX NO:12
VISITED A WEBSITE
AIM:
To write a program to check how many users have visited a website using application object.
PROCEDURE:
1. This html document contains jsp code which user the application objects and its method get
attribute and set attribute.
2. A variable count is declared as integer and set to one.
3. In the jsp code the count value is incremented by one.
4. Whenever this webpage is visited i.e. opened in the browser the jsp code is executed.
PROGRAM:
<HTML>
<HEAD>
<TITLE>Using the Application Object</TITLE>
</HEAD>
<BOBY>
<H1>Using the Application Object</H1>
<%
Integer counter = (Integer)session.getAttribute("Counter");
String heading=null;
if(Counter==null){
Counter = new Integer(1);
} else {
Counter = new Integer(Counter.intValue() + 1);
}
session.setAttribute("Counter",Counter);
Integer applicationCounter=
(Integer)application.getAttribute("applicationCounter");
if(applicationCounter==null) {
applicationCounter = new Integer(1);
} else {
applicationCounter=new Integer(applicationCounter.intValue()+1);
}
application.setAttribute("applicationCounter",applicationCounter);
%>
You have visited this page<%=Counter%>times.
<BR>
This page has been visited by all user<%=applicationCounter%>times.
</BODY></HTML>
34
OUTPUT:
RESULT : Thus the above program was successfully executed
35
EX.NO.13
DISPLAY THE INFROMATION USING PHP
Aim:
To design a webpage and execute a php file on submission of the html form and display the
information using php
Procedure:
1. The HTML Document is prepared using Notepad editor.
2. This HTML Document starts and ends with <HTML> Tag. It has a header section and a body
section.
3. Using form action connect the HTML file and Php.
4. Create the Php file to display the information and embedded within the HTML tag.
5. Save the Program with the filename.php
6. Stop the program.
Program:
<html>
<body>
<form action ="welcome.php" method="POST">
name:<input type="text" name="name"><br>
email:<input type="text" name="email"><br>
<input type="submit"><br>
</form>
</body>
</html>
welcome.php
<html>
<body>
your name is :<?php echo $_POST ["name"]?><br>
your emailaddress is:<?php echo $_POST ["email"]?>
</body>
</html>
36
OUTPUT:
RESULT : Thus the above program was successfully executed
37
EX.NO.14
VALIDATION USING PHP
Aim:
To create a php code which will retrieve the data captured by the html form display the name
of the form and also display the message data entered successfully after performing
validations.
Procedure:
1. The HTML Document is prepared using Notepad editor.
2. This HTML Document starts and ends with <HTML> Tag. It has a header section and a body
section.
3. A heading is included using <H2> tag.
4. The FILTER_VALIDATE_EMAIL filter validates an e-mail address.
5. Save the Program with the filename.php.
6. Stop the program.
Program:
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
$nameErr1 = $emailErr1 = "";
$name1 = $email1 = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name1"])) {
$nameErr1 = "Name is required";
}else {
$name1 = test_input($_POST["name1"]);
}
if (empty($_POST["email1"])) {
$emailErr1 = "Email is required";
}else {
$email1 = test_input($_POST["email1"]);
if (!filter_var($email1, FILTER_VALIDATE_EMAIL)) {
$emailErr1 = "Invalid email format";
}
}
}
function test_input($data1) {
$data1 = trim($data1);
$data1 = stripslashes($data1);
$data1 = htmlspecialchars($data1);
return $data1;
}
?>
<h2>PHP FORM VALIDATION ::</h2>
<p><span class = "error">* required field.</span></p>
38
<form method = "post" action = "<?php
echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<table>
<tr>
<td>Name:</td>
<td><input type = "text" name = "name1">
<span class = "error">* <?php echo $nameErr1;?></span>
</td>
</tr>
<tr>
<td>E-mail: </td>
<td><input type = "text" name = "email1">
<span class = "error">* <?php echo $emailErr1;?></span>
</td>
</tr>
<td>
<input type = "submit" name = "submit1" value = "Submit">
</td>
</table>
</form>
<?php
echo "<h2>Your given values are as:</h2>";
echo $name1;
echo "<br>";
echo $email1;
echo "<br>";
?>
</body>
</html>
Output:
RESULT : Thus the above program was successfully executed
39
Ex.No.15 Create a database of an employee, connect the database and perform the read,
write, update, delete operations in the database using PHP.
PROGRAM
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="emp1";
$conn = new mysqli($servername, $username, $password,$db);
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['submit']))
{
$name = $_POST['name'];
$id = $_POST['id'];
$city = $_POST['city'];
$salary = $_POST['salary'];
$email = $_POST['email'];
if (isset($_POST['update']))
{
$sql="UPDATE employee SET name='$name' , city='$city' , salary='$salary', email='$email'
WHERE id='$id'";
$r1 = $conn->query($sql);
echo "<center><h1 style=color:red> UPDATED SUCCESSFULLY</h1></center>";
}
if (isset($_POST['insert']))
{
$ins="INSERT INTO `employee`(`name`, `id`, `city`, `salary`, `email`) VALUES
('$name','$id','$city','$salary','$email')";
$r2 = $conn->query($ins);
echo "<center><h1 style=color:red> INSERTED SUCCESSFULLY</h1></center>";
}
if (isset($_POST['del']))
{
$del="DELETE FROM`employee`WHERE id='$id'";
$r3 = $conn->query($del);
echo "<center><h1 style=color:red> DELETED SUCCESSFULLY</h1></center>";
}
}
?>
40
<html>
<body bgcolor="yellow">
<center>
<form method="POST">
<input type="text" placeholder="name" name="name"><br><br><br>
<input type="text" placeholder="id" name="id"><br><br><br>
<input type="text" placeholder="city" name="city"><br><br><br>
<input type="text" placeholder="salary" name="salary"><br><br><br>
<input type="text" placeholder="email" name="email"><br><br><br>
<input type="radio" name="update">update<br><br><br>
<input type="radio" name="insert">insert<br><br><br>
<input type="radio" name="del">delete<br><br><br>
<input type="submit" name="submit">
</form>
</center>
</body>
</html>
41
