Scribd
Upload
935 views

IT3401 Web Essential Lab

Lab manual for web essentials in anna university

Uploaded by

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

IT3401 Web Essential Lab

Lab manual for web essentials in anna university

Uploaded by

sakthibaska6161
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

Ex No: 1 Web page creation using using forms, frames, links & tables

AIM
To write a html program for Creation of web site with forms, frames, links, tables etc
ALGORITHM
 Create a web page with frame sets consisting of four frames with rows and colums
 In the first row frame include XYZ Computer center
 In the second frame set display the web page of the link of advertisement
 In the third frame includes form creation with tables
 Add colors and form tags to the web page to make good appearances.
PROGRAM
front.html
<html>
<head><title>MYPAGE</title></head>
<frameset rows="20%,*">
<frame src="top.html"/>
<frame src="bottom.html"/>
</frameset>
</html>

top.html
<html>
<head/>
<body bgcolor="black">
<font face="verdhana"size="20" color="pink">
<center><b>GLOBAL ENGINEERING COLLEGE</b></center>
</font>
<font color="pink">
<marquee scrolldelay="200" width="50%">(A Goverment approved private engg college,
Affiliated to Anna University)
</marquee>
</font>
</body>
</html>

bottom.html
<html>
<head/>
<frameset cols="20%,55%,*"border="0">
<frame src="col1.html"name="col1"/>
<frame src="col2.html"name="col2"/>
<frame src="col3.html"name="col3"/>
</frameset>
</html>
col1.html
<html>
<head>
<font color="red"><center><b>ADVERTISEMENT</b></center></font>
</head>
<body bgcolor="navy">
<br/><br/><br/>
<font color="lime"><img src="index.jpg" alt="Not able to display"/>
</font>
</body>
</html>

col2.html
<html>
<head><center><font color="orange">
<h1><marquee width="30%" behavior="alternate"<>WELCOME!!!</marquee>
</h1></font></center>
</head>
<body bgcolor="olive">
<h2>
<ul>
<li><a href="about.html" target="col2">About Us</a><br/><br/><br/></li>
<li><a href="Course_Details.html" target="col2">Course Details</a><br/><br/><br/></li>
<li><a href="features.html" target="col2">Features</a><br/><br/><br/></li>
<li><a href="contact.html" target="col2">Contact Us</a><br/><br/><br/></li>
</ul>
</h2>
</body>
</html>

col3.html
<html>
<head/>
<frameset rows="45%,*">
<frame src="login.html"/>
<frame src="new.html"/>
</frameset>
</html>

contact.html
<html>
<head>
<font color="red"><h2><u>CONTACT US</u></h2>
</font>
</head>
<body bgcolor="gray">
<hr/>For Further details contact us:<br/><br/><br/>Global Institute of Engg and Tech
<font color="blue"><h3>Melvisharam
</h3></font>phone no:
<font color="blue"><h3>landline: 0416 2298312
</h3>
</font>
</body>
</html>

Course_Details.html
<html>
<head><font color="red"><h2><u>COURSE DETAILS</u></h2>
</font>
</head>
<body bgcolor="gray">
<hr/>The following courses are provided:<br/><br/><br/>
<font color="blue"><center>
<table border="2"width="60%">
<thead>
<tr><th><h3>Course</h3></th>
<th><h3>Department</h3></th>
</tr>
</thead>
<tbody align="center">
<tr><td>BE</td><td>CSE</td></tr>
<tr><td>BE</td><td>ECE</td></tr>
<tr><td>BE</td><td>EEE</td></tr>
<tr><td>BE</td><td>MECH</td></tr>
<tr><td>BE</td><td>CIVIL</td></tr>
<tr><td>BTECH</td><td>IT</td></tr>
</tbody></table>
</center></font>
</body>
</html>
about.html
<html>
<head><font color="red"><h2><u>ABOUT US</u></h2></font></head>
<body bgcolor="gray">
<hr/>
<h3>Global Engineering College</h3> located in Chennai Bangalore Highway and it has been
established 10 years <br/><br/><br/>
our mission is:
<br/><font color="blue"><center>
<h3>"TO PRODUCE BEST ENGINEERS"</h3>
</center></font></body>
</html>
features.html
<html>
<head><font color="red"><h2><u>FEATURES</u></h2></font></head>
<body bgcolor="gray">
<hr/>The Following Features are provided by us:<br/><br/>
<h3><font color="blue">
<ul><li>Best Infrastructure</li>
<li>Neat Class rooms</li>
<li>Good Lab Facilities</li>
<li>Equipped Library</li>
<li>Placements</li>
<li>Bus Facilities</li>
</ul>and more...</font></h3>
</body>
</html>
login.html
<html>
<head><font color="red"><center>LOGIN!!!</center>
</font>
</head>
<body bgcolor="teal">
<form method="get"action="result1.html">
USERNAME:<input type="text"size="15"/><br/>
PASSWORD:<input type="password"size ="15"/><br/>
<center>
<input type="submit"value="LOGIN"/>
<center><input type="reset"value="RESET"/></center>
</form><font color="red"><u><a href="join.html"
target="col3"><center>Sign Up</a></u></font>
</body>
</html>

new.html
<html>
<head><font color="red'><b><h3><u>What's new?</u></h4>
</b></font></head>
<body bgcolor="yellow">
<ul><li>RESULTS for the exam held on may/june 2015</li>
<li>University rank holders</li></ul>
<br/><center>for furtherinformation contact college
</body>
</html>

join.html
<html>
<head><font color="red"><center><b>sign up</b></center>
</font></head>
<body><pre>
<form method="get" action="result2.html">
Enter your name:<input type="text"size="20"/>
Enter your email-id:<input type="text"size="20"/>
Enter a password:<input type="text"size="15"/>
you are interested in:
<input type="checkbox"name="r1">CSE</input>
<input type="checkbox"name="r1">ECE</input>
<input type="checkbox"name="r1">MECH</input>
<input type="checkbox"name="r1">IT</input>
<input type="checkbox"name="r1">EEE</input>
<center>

<input type="submit"value="SUBMIT"><inputtype="reset"value="RESET"></center>
</form></pre>
</body>
</html>
result1.html
<html>
<head/>
<body><h2><font color="blue"><pre>
"LOGGED IN SUCCESSFULLY"</pre></font></h2>
</body>
</html>

result2.html
<html>
<head/>
<body>
<h2><font color="blue"><pre>
"SUBMITTED SUCCESSFULLY"
</pre></font></h2>
</body>
</html>

OUTPUT

RESULT:
Thus the creation of a web page that displays computer center information using forms,
frames, links, tables and formatting tags was successfully executed and verified.
EX NO : 02 IMAGE MAPPING

AIM:
To create a web page using HTML to embed a map, to fix the hotspots in that map and
show all the related information when the hot spots are clicked.
ALGORITHM:
Step 1: Create a html file with map tag.
Step 2: Set the source attribute of the img tag to the location of the image and also set the
Use map attribute.
Step 3: Specify an area with name, shape and href set to the appropriate values.
Step 4: Repeat step 3 as many hot spots you want to put in the map.
Step 5: Create html files for each and every hot spots the user would select.
PROGRAM:
//india.html
<html> <head>
<title>Image Mapping</title>
</head>
<body> <center>
<img src="india.gif" usemap="#india" alt="india map">
<map name="india">
<area name="tamilnadu" shape="circle" coords="357,989,30" href="tamilnadu.html">
</map> </center>
</body> </html>
//tamilnadu.html
<html><head>
<title>Image Mapping</title></head>
<body><center>
<img src="tamilnadu.gif" usemap="#tamilnadu" alt="TamilNadu">
<map name="TamilNadu">
<area name="vellore" shape="circle" coords="363,60,30" href="vellore.html">
<area name="kanchi" shape="circle" coords="446,102,30" href="kanchi.html">
<area name="coimbatore" shape="circle" coords="224,228,30" href="coimbatore.html">
<area name="chennai" shape="circle" coords="471,47,30" href="chennai.html">
<area name="madurai" shape="circle" coords="290,293,30" href="madurai.html">
</map><br><br>
<p>TamilNadu is the 11th largest state in India and Chennai is the capital.Literacy rate is
80.33% and Tamil is the official language. </p>
<a href="india.html">Home Page</a>
</center> </body> </html>
//vellore.html
<HTML>
<HEAD><TITLE>About Vellore</TITLE></HEAD>
<BODY>
<CENTER> <H1>Vellore</H1> </CENTER>
<img src="vellore.gif">
<p><font size="5pt" color="green">
Vellore, the fort-city of TamilNadu is located on the banks of Palar River.
</font></p><br><br>
<a href="tamilnadu.html">Click here to TamilNadu districts page</a>
</BODY></HTML>

chennai.html
<HTML>
<HEAD> <TITLE>About Chennai</TITLE></HEAD>
<BODY>
<CENTER> <H1>Chennai</H1> </CENTER>
<img src="chennai.gif">
<pre><font type="cambria" color="red" size="15pt">
Chennai is the largest and capital city of TamilNadu.
</font></pre><br>
<a href="tamilnadu.html">Click here to TamilNadu districts page</a>
</BODY></HTML>
//coimbatore.html
<HTML>
<HEAD>
<TITLE>About Coimbatore</TITLE></HEAD>
<BODY><CENTER><H1>Coimbatore</H1></CENTER>
<img src="Coimbatore.gif">
<p><font size="5pt" color="black">
Coimbatore is the great industrial place of TamilNadu.
</font></p>
<a href="tamilnadu.html">Click here to TamilNadu districts page</a>
</BODY></HTML>

OUTPUT :
RESULT:
Thus the html program for creating hotspots for various districts in TamilNadu was written and
executed successfully.
EX. NO: 3 Cascading Style Sheets (CSS)

AIM:
To write a html program embedded with various css styles like inline,
embedded and external styles.

Program:(3-A) INLINE STYLE SHEET

ALGORITHM:
1. Create a html file.
2. Inside the head tag define the click reference, its type and set href.
3. Close the head tag.
4. Inside the body tag define the required heading h1,h2,…hn paragraph.
5. Close the body tag and all opened tags.
6. Create the inline style sheet.
7. Define the style formats such as button and text to corresponding header.
8. Execute the program.

PROGRAM:
//inline.html
<html>
<head>
<title>Inline style sheet</title>
</head>
<body>
<p style="font-size:35pt;font-famiy:cambria;color:magenta">Welcome user..</p>
<p style="font-size:40pt;font-family:Microsoft sansserif;color:green">Gmail</p>
<p style="font-size:30pt;color:red;font-family:cambria">The worlds largest spam free
Email provider</p>
<p style="font-size30pt;color:blue;font-family:cambria">Old user login here...</p>
<h4 style="font-family:lucida handwriting">User Name:<br>
<input type="text" value="">@gmail.com<br><br>
Password: <br><input type="Password" value=""<br><br></h4>
<input type="submit" value="Login">
<input type="reset" value="Cancel"><br><br>
<p style="font-size:15pt;font-family=arial">If you have your username or password
<a href="pass.html">click here</a><br>
<p style="font-size:15pt;font-family=fixedsys">If you are a new user
<a href="login.html">login here</a></p>
</body>
</html>
//login.html
<html> <head>
<title>Welcome</title>
</head> <body>
<h4 style="font-family:cambria;color:blue">User Name:<input type="text"
value="">@gmail.com<br><br>
Password:<input type="password" value=""><br><br>
New Password:<input type="new password" value=""><br><br>
Confirm Password:<input type="confirm password" value=" "><br><br>
<input type="submit" value="OK">
<input type="submit" value="CANCEL">
</body> </html>
//pass.html
<html>
<head><title>Welcome</title>
</head><body><center>
<h1 style="font-size:25pt;font-family:cambria;color:blue"><b>
Welcome to Gmail</b><br></center>
<p> <font size="20pt" color="green">
Cascading Style Sheets [CSS] Style sheets are powerful mechanism for adding styles
(e.g. fonts, colors, spacing) to Web documents. Cascading style sheets can be used to
determine an element’s size, color, position and a number of other
features.<br></font><br>
<b><font size="20pt" color="magenta">Types and Priority of CSS:</b><br></font>
<font color="red" size="20pt">
Generally speaking we can say that all the styles will "cascade" into a new "virtual"
style sheet by the following rules, where number four has the highest priority:<br>

1. Browser default<br>
2. External style sheet<br>
3. Internal style sheet (inside the <head> tag)<br>
4. Inline style (inside an HTML element)<br>

So, an inline style (inside an HTML element) has the highest priority, which means that
it will override a style declared inside the <head> tag, in an external style sheet, or in a
browser (a default value).
</font>
</p>
</h1>
</body>
</html>

Output:
(1) Home Page
(2) Existing user – Link

(3) New user – Link


EX No:3B EMBEDDED STYLE SHEET

ALGORITHM:
Step1: Create html file with the style tag, inside head tag.
Step2: Set the style such as font-family, font-size, color, left etc, for the heading
h1,h2,…h6 and respectively.
Step3: Close the head tag.
Step4: Specify the heading and information required inside the body tag.
Step5: Close the opened tag.
PROGRAM:
//Embedded.html
<html>
<head>
<title>Embedded style sheet</title>
<style type="text/css">
h1
{
font-family:cambria;
color:green;
}
h2
{
font-familt:cambria;
color:red;
left:20px;
}
h3
{
font-family:cambria;
color:blue;
}
p
{
font-size:20pt;
font-family:cambria;
}
</style>
</head>
<body>
<h1><center>EMBEDDED STYLE SHEET</h1>
<h2>Internal methods are simply placing
the CSS code within the "<head></head>" tags of each (X)HTML file you want to style
with the CSS. The format for this is shown in the example below.<br>
<br>
With this method each (X)HTML file contains the CSS code needed to style the page.
Meaning that any changes you want to make to one page, will have to be made to all.
This method can be good if you need to style only one page, or if you want different
pages to have varying styles.</h2>
<h3> <p>
In embedded style sheets, the styles to be applied for a web page are given within the
HTML file itself.
</p> </h3>
</body>
</html>
Output:
EX NO:3C EXTERNAL STYLE SHEET
ALGORITHM:
1. Create a html file.
2. Inside the head tag define the link reference, its type and set href as “ex.css”.
3. Close the head tag.
4. Inside the body tag define the required heading h1,h2,…h6 and paragraph.
5. Close the body tag and all opened tags.
6. Create the cascade style sheet file “ex.css”.
7. Define the style formats such as font color, font size, etc to the corresponding
headings and paragraph and name it as “External.css”.

//External.html
<html> <head>
<link rel="stylesheet" type="text/css" href="External.css"/>
</head> <body><center>
<h1>External style sheet</h1></center>
<h2><center>Global Institute of Engineering and Technology</center></h2>
<p>
<h3><font color="green">Our institution consists of various UG and PG
courses:</font><br><br>
<b><i>UG Courses:</i></b><br><br>
1.Computer Science and Engineering<br>
2.Electronics and Communication Engineering<br>
3.Electrical and Electronics Engineering<br>
4.Mechanical Engineering<br>
5. Information Technology<br>
6. Civil Engineering<br>
7. Petroleum Engineering
8. Automobile Engineering</h3>
<h4><br>
5. <br></h4> </body></html>
//External.css
h1
{ font-family=cambria;
color:red; }
h2
{ font-family=cambria;
color:black; }
h3
{ font-size="15pt";
font-family=cambria;
color:blue; }
h4
{ font-size="15pt";
font-family=cambria;
color:green; }

Output:

RESULT:
Thus the various css styles like inline, external and embedded were
implemented with html web applications.
JAVA SCRIPT FORM VALIDATION
Ex No: 4
AIM:
To write a html program to validate the web form controls using DHTML.
embedded and external styles.

ALGORITHM:
1. Create a html file for new sign up registration form.
2. Inside the head tag define the script to validate the html form and display the output.
3. Close the head tag.
4. Inside the body tag to create a registration form using web form controls.
5. Close the body tag and all opened tags.
6. In button submit call the function to validate the controls.
7. Execute the program.
PROGRAM :

<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript">
<!--
function validate()
{
if(document.signup.fname.value=="")
{
alert("Please Enter First Name!");
return false;
}
if(document.signup.lname.value=="")
{
alert("Please Enter Last Name!");
return false;
}
if(document.signup.uname.value=="")
{
alert("Please Enter User Name!");
return false;
}
if(document.signup.pword1.value=="")
{
alert("Please Enter Password!");
return false;
}
if(document.signup.pword1.value.length<6)
{
alert("Please Enter Minimum 6 Characters!");
return false;
}
if(document.signup.pword2.value=="")
{
alert("Please Enter password again!");
return false;}
if(document.signup.pword2.value!=document.signup.pword1.value)
{
alert("Password is mismatch.Re-enter password!");
return false;
}
alert("Details entered successfully");
display();
}
function display()
{
document.writeln('<h2>'+"Details Entered..."+'</h2>');
document.writeln('<br/>'+"First Name:"+document.signup.fname.value);
document.writeln('<br/><font color="#0066FF">'+"Last
Name:"+'</font>'+document.signup.lname.value);
document.writeln('<br/><font color="#0066FF">'+"User
Name:"+'</font>'+document.signup.uname.value);
document.writeln('<br/><font
color="#0066FF">'+"Country:"+'</font>'+document.signup.country.value);

document.writeln('<br/><font color="#0066FF">'+"Phone
No:"+'</font>'+document.signup.phno.value);
}
-->
</script>
</head>
<body align="center" bgcolor="grey">
<table width="100%" height="100%">
<td colspan="2" width="15%">
</td>
<td colspan="1" bgcolor="#FFFFFF" width="70%" height="100%">
<h1 align="center"><font color="#0066F"> -MAIL</font></h1>
<h2 align="center"><font color="#0066FF">New User Signup Form</font></h2>
<form name="signup" onsubmit="return validate()">
<font face="Verdana,Arial,Helvetica,Sans-serif" color="#660000" size="2">
<p>*First Name:<input type="text" name="fname" size="20">
*Last Name:<input typte="text" name="lname" size="20"></p>
<p >*User Name:<input type="text" name="uname" size="20">@mnmmail.com</p>
<p >*Password:<input type="password" name="pword1">(min 6 characters)</p>
<p>Confirm Password:<input type="password" name="pword2"></p>
<p>Gender:
<input type="radio" name="gen" value="male">Male
<input type="radio" name="gen" value="female">Female
</p>
<p>Country:
<select name="country">

<option selected>Select Country</option>


<option name="country" value="india">India</option>
<option name="country" value="russia">Russia</option>
<option name="country" value="france">France</option>
<option name="country" value="italy">Italy</option>
</select>
</p>
<p>
<p>Language Known:<br/>
<input type="checkbox" name="lang" value="tamil">Tamil<br/>
<input type="checkbox" name="lang" value="engish">English<br/>
<input type="checkbox" name="lang" value="hindi">Hindi<br/>
<input type="checkbox" name="lang" value="malayalam">Malayalam<br/>
</p>
<p >Phone No:<input type="text" name="phno" size="20"></p>
<p align="center"><input type="checkbox" name="agree" value="agree">I agree the terms and
conditions</p>
<p align="center"><input type="submit" value="submit"><input type="Reset" value="Reset"></p>
</font>
</form>
</td>
<td colspan="2" width="15%">
</td>
</table>
</body>
</html>

OUTPUT:
RESULT:
Thus the program Client Side Scripts for Validating Web Form Controls using DHTML was
executed successfully.
EX: NO: 5 INSTALLATION OF APACHE TOMCAT SERVER
DATE :

AIM:
To install and configure an Apache Tomcat Web Server for execution of server- side
programming.

PROCEDURE:
Step 1:
1. Install jdk(min 1.5) and jre
2. Tomcat 8(based on OS compatibility)

Step 2:
Set the environment variables as,
My Computer  Select ‘properties’  Advanced System Settings  Environment Variables.

Variable
User variable: name
set the below variables: Value
C:\Program Files\Apache Software
CATALINA_HOME
Foundation\Tomcat 8.0\bin;
C:\Program Files\Apache Software
CLASSPATH
Foundation\Tomcat 8.0\lib\servlet-api.jar;
JAVA_HOME C:\Program Files\Java\jdk1.8.0_51\bin;
PATH C:\Program Files\Java\jdk1.8.0_51\bin;
Step 3:
Create a new folder “sample” under the directory “C:\Program Files\Apache Software
Foundation\Tomcat 8.0\webapps”.

After creation  “C:\Program Files\Apache Software Foundation\Tomcat


8.0\webapps\sample”

Step 4:
Copy the folder “WEB-INF” from ROOT directory available under “C:\Program
Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT” to your folder “sample”.

Now your directory structure will have,


“C:\Program Files\Apache Software Foundation\Tomcat 8.0 \webapps \sample\ WEB-
INF\web.xml”
Step 5:
Now create a folder called “classes” under your directory structure (“C:\Program
Files\Apache Software Foundation\Tomcat 8.0\webapps\sample\WEB-INF”).

Step 6:
Store your all html/jsp/java files under “C:\Program Files\Apache Software
Foundation\Tomcat 8.0\webapps\sample\WEB-INF”.
Step 7:
a. Once the java files are compiled, copy the class file and store it in “C:\Program
Files\Apache Software Foundation\Tomcat 8.0 \webapps \sample\ WEB- INF\classes”
folder.

b. Edit the web.xml available under WEB-INF(deployment descriptor file) file to


execute any servlet program.

c. Include the following tags in “web.xml” file above </web-app> and save it.
<servlet>
<servlet-name>Demo</servlet-name> //some name given to the servlet
<servlet-class>myservletdemo</servlet-class> //.class file of java program
</servlet>
<servlet-mapping>
<servlet-name>Demo</servlet-name>
//way to access in the browser
<url-pattern>/myservletdemo</url-pattern>
</servlet-mapping>
Step 8:
Run the tomcat server as,
Path  C:\Program Files\Apache Software Foundation\Tomcat 8.0\bin  select
“startup.bat”, “Tomcat8w.exe” as well as “Tomcat8.exe”.

Step 9:
Open the browser and type the URL http://localhost:8081/ to check whether the
tomcat server is running as shown below.
Step 10:
Now run your Servlet program in the browser as,
URL – http://localhost:8081/sample/myservletdemo (based on url-pattern specified
inweb.xml file for the java program)
Eg: http://localhost:8081/sample/DemoServlet

RESULT:
Thus the procedure for installing tomcat web server was followed and
configured successfully for executing server-side programming.
EX: NO: 6(a) Invoking Servlets
from HTML DATE:

AIM:
To write an html program using various form elements for invoking Servlet from html.

ALGORITHM:
1. In html program, define the html, head and title tag. The title is Student InformationForm
and closes the title and head tag.
2. Define the body tag to create form and table simultaneously.
3. The table consists of following information Roll no, Student name, Address, Phone no and
total marks.
4. In the Servlet program, import the summary package and create a own servlet class
extends with generic Servlet.
5. In the service method, define request and response.
6. Create an object for printwriter() and getwriter() value.
7. The enumeration object gets the Servlet request parameter.
8. Create objects for string method and it is displayed another object value received get
parameter of name received and displayed the value received value.

PROGRAM:
FILE NAME: invokeServlet.html
<html> <head>
<title>Student's Information</title>
</head> <body>
<center>
<form name="f" action="http://localhost:8080/examples/servlet/ServletDemo">
<h3>Enter Student's Info in the following Table </h3>
<table border="1">
<tr>
<td>Roll_no</td>
<td><input type="text" name="Roll Number" value="" size="25" /> </td>
</tr>
<tr>
<td>Students Name</td>
<td> <input type="text" name="Students Name" value="" size="25" /> </td>
</tr>
<tr>
<td>Student Address</td>
<td> <input type="text" name="Student Address" value="" size="25" /> </td>
</tr>
<tr>
<td>Phone</td>
<td> <input type="text" name="Phone" value="" size="25" /> </td>
</tr>
<tr>
<td>Total Marks</td>
<td> <input type="text" name="Total Marks" value="" size="25" /> </td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
</center>
</body>
</html>
FILE NAME: ServletDemo.java
import java.util.*;
import java.io.*;
import javax.servlet.*;
public class ServletDemo extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws ServletException
,IOException
{
PrintWriter out =res.getWriter();
Enumeration en=req.getParameterNames();
while(en.hasMoreElements())
{
String name_received=(String)en.nextElement();
out.print("\n"+name_received+" =");
String value_received= req.getParameter(name_received);
out.println(value_received);
out.println(" ");
}
out.close();
}
}

OUTPUT:
//Student information to be entered and submit
//After submit button is clicked,

RESULT:
Thus the java program to invoke Servlets from HTML forms was successfully
implemented.
EX: NO: 6(b)Session Tracking - Hit Count

DATE:

AIM:
To write a java program for session tracking to display the number of visits of
a specific web page.

ALGORITHM:
1. Create HttpSession object associated with the current client.
2. Using methods for the HttpSession object, retrieve information like creation
time, last access time.
3. Declare an integer object bound to a name “visitCount”.
4. Check whether the session is new or already exists. If new, assign visitCount=0 else
increment the value in visitCount by 1.
5. Display all the name/value pairs of session information.

PROGRAM:
//SessionTracking.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.util.*;
public class SessionTracking extends HttpServlet
{
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException
{
HttpSession session = request.getSession(true);
Date createTime = new Date(session.getCreationTime());
Date lastAccessTime = new
Date(session.getLastAccessedTime());
String title = "Welcome to my website";
Integer visitCount = new Integer(0);
String visitCountKey = new String("visitCount");
String userIDKey = new String("userID");
String userID = new String("abc");
if (session.isNew()){
title = "Welcome to my website";
session.setAttribute(userIDKey, userID);
}
else
{
visitCount = (Integer)session.getAttribute(visitCountKey);
visitCount = visitCount + 1;
userID = (String)session.getAttribute(userIDKey);
}
session.setAttribute(visitCountKey, visitCount);
response.setContentType("text/html"); PrintWriter out
= response.getWriter();
String docType="<!doctype html public \"-//w3c//dtd html 4.0 " +"
transitional //en \" > ";
out.println(docType + "<html>\n" +
"<head><title>" + title + "</title></head>\n" + "<body bgcolor=\"#f0f0f0\">\n" +"<h1
align=\"center\">" + title + "</h1>\n" +
"<h2 align=\"center\">Session Infomation</h2>\n" + "<table border=\"1\"
align=\"center\">\n" + "<tr bgcolor=\"#949494\">\n" +
" <th>Session info</th><th>value</th></tr>\n" + "<tr>\n" +
" <td>id</td>\n" + " <td>" + session.getId() + "</td></tr>\n" + "<tr>\n" +"
<td>Creation Time</td>\n" + " <td>" + createTime +
" </td></tr>\n" + "<tr>\n" + " <td>Time of Last Access</td>\n" + " <td>" + lastAccessTime "
</td></tr>\n" + "<tr>\n" + " <td>User ID</td>\n" + " <td>"
+ userID + " </td></tr>\n" + "<tr>\n" + " <td>Number of visits</td>\n" +
" <td>" + visitCount + "</td></tr>\n" + "</table>\n" + "</body></html>");
}
}

web.xml
<servlet>
<servlet-name>Session</servlet-name>
<servlet-class>SessionTracking</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Session</servlet-name>
<url-pattern>/SessionTrack</url-pattern>
</servlet-mapping>

OUTPUT:
RESULT:
Thus the java program for session tracking to display the number of visits of aspecific
web page was implemented successfully.

Ex: No: 6C Session Tracking - Hidden


Form Fields DATE :
AIM:
To write a servlet program using various HTML form elements for tracking a hidden
form field while navigating between different web pages.

ALGORITHM:
1. Create a new session object for the user if one does not already exist.
2. Generate a unique session ID and store it in the session object.
3. For each page in the web application, include a hidden form field that contains the
session ID.
4. When the user submits a form, retrieve the session ID from the hidden form field and
use it to retrieve the session object.
5. If the session object does not exist or has expired, create a new one and generate a new
session ID.
6. Store any relevant session data in the session object.
7. Redirect the user to the appropriate page, including the new session ID in the
hidden form field.
8. Repeat steps 4-7 for each user interaction with the web application.
9. When the user logs out or closes the browser, invalidate the session object to free up
system resources.

PROCEDURE-ILLUSTRATION:
PROGRAM:
index.html
<form action="servlet1">
Name:<input type="text" name="userName"/><br/>
<input type="submit" value="go"/>
</form>
FirstServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class FirstServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response){
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String n=request.getParameter("userName");
out.print("Welcome "+n);

//creating form that have invisible textfield


out.print("<form action='servlet2'>");
out.print("<input type='hidden' name='uname' value='"+n+"'>");
out.print("<input type='submit' value='go'>");
out.print("</form>");
out.close();
}catch(Exception e){System.out.println(e);}
}}

SecondServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SecondServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();

//Getting the value from the hidden field


String n=request.getParameter("uname");
out.print("Hello "+n);

out.close();
}catch(Exception e){System.out.println(e);}
}}

web.xml
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>FirstServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s1</servlet-name>
<url-pattern>/servlet1</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>s2</servlet-name>
<servlet-class>SecondServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s2</servlet-name>
<url-pattern>/servlet2</url-pattern>
</servlet-mapping>

OUTPUT:

RESULT:
Thus the java servlet program for session tracking using hidden form fields to trackand
display the hidden input field was implemented successfully.

Ex NO: 7 HTML FORM ELEMENTS-STUDENT REGISTRATION FORM


Aim:
To execute a student registration form using HTML form elements.
Algorithm:
 Create a Student registration form by adding the details name, course, gender,phone
address and password.
 The input type text is used for name .
 Drop down menu has been used for selecting the courses.
 The text area hs been used for filling the address. Radio buttons are used for the gender
selection.
 The email Id and password has been filled based on the input type text.

<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>

<label> Firstname </label>


<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>

Output:
Result
Thus the student registration form based on HTML form elements has been executed successfully.
Ex No 8 Handling multimedia content in web sites
Aim:
To add audio and video type into the HTML page.

Procedure:
Different ways to add media to the HTML page:
 Using HTML Audio tag: This tag is used to include the audio media type into the websites.
 Using HTML Video tag: This tag is used to include the video media type into the websites.
Ex No 8 a) Adding audio media type into the HTML page. The developer can use their
own src file for implementation.
<!DOCTYPE html>
<html>

<body>
<p>Audio Sample</p>

<!-- Audio tag starts here -->


<audio controls>
<source src="test.mp3" type="audio/mp3">
<source src="test.ogg" type="audio/ogg">
</audio>
<!-- Audio tag ends here -->

</body>

</html>

OUTPUT

Ex No. 8 b) Adding video media type into the HTML page.

<!DOCTYPE html>
<html>

<body>
<center>
<h1 style="color:green;">
Hello everyone
</h1>

<h3>HTML video tag</h3>

<p>Adding video on the webpage

<p>
<video width="450" height="250"
controls preload="auto">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
type="video/mp4">

<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
type="video/ogg">
</video>
</center>
</body>

</html>
Result:
Thus the program to add audio and video type into the HTML page has been executed
successfully.
Ex. No:9 Simple PHP Scripts
DATE:

AIM:
To write a php program for creating simple web pages that displays an output statement,
login credentials and user details.

PROCEDURE:
For dynamic web pages, the procedure is a little more involved, because it may
bring both PHP and MySQL into the mix.

Here are the steps for a dynamic client/server request/response sequence:


1. Enter http://server.com into your browser’s address bar.
2. Now browser looks up the IP address for server.com.
3. The browser issues a request to that address for the web server’s home page.
4. The request crosses the Internet and arrives at the server.com web server.
5. The web server, having received the request, fetches the home page from its hard disk.
6. With the home page now in memory, the web server notices that it is a file
incorporating PHP scripting and passes the page to the PHP interpreter.
7. The PHP interpreter executes the PHP code.
8. Some of the PHP contains MySQL statements, which the PHP interpreter now passes to
the MySQL database engine.
9. The MySQL database returns the results of the statements back to the PHP interpreter.
10. The PHP interpreter returns the results of the executed PHP code, along with the
results from the MySQL database, to the web server.
11. The web server returns the page to the requesting client, which displays it.
PROGRAM:
//Create a folder named “sample” under htdocs within Xampp folder wherein all the
php files are stored within it.

// php-hello.php
<html> <head>
<title>PHP Hello Example</title>
</head> <body>
<h1>PHP Hello Example</h1>
<p> <?php
echo "Hello \n";
echo "From the PHP Server\n";
?> </p> </body> </html>

OUTPUT:
//To activate Apache and MySQL server in Xampp (open Xampp Cotrol Application)

//To check for Xampp server status (Browser  http://localhost)


//To display a message
Browser  http://localhost/sample and open the specified php script

//login.php
<html>
<head>
<title>Login Example / PHP Submit Page</title>
<style>
body { font-family:Verdana;
color:maroon;
background-color:aliceblue; }
input { font-family:Verdana; width="1in"; }
td { text-align:center; }
</style>
</head>
<body>
<h1>Login Example / PHP Submit Page</h1>
<form action="display.php" method="post">
<p>
<input type="text" size="10" name="username" /><br />Username<br />
<input type="password" size="10" name="passwd" /><br />Password<br />
<input type="submit" value="Submit" name="submit button"/>
</p>
</form>
</body>
</html>

//display.php
<html>
<head>
<title>Login1 Example / Display Page</title>
<style>
body { font-family:Verdana;
color:maroon;
background-color:aliceblue; }
</style>
</head>
<body>
<h1>Login1 Example / Display Page</h1>
<h2>Textbox Variables</h2>
<p>
Username: <?php echo $_POST["username"]; ?> <br />
Password: <?php echo $_POST["passwd"]; ?>
</p>
</body>
</html>

OUTPUT:
//Login Page to enter user credentials
//Page displaying user credentials

//entry-form.php
<html>
<head>
<title>Entry Form Example / Submit Page</title>
<style>
body { font-family:Verdana;
color:maroon;
background-color:aliceblue; }
input { font-family:Verdana; width="1in"; }
td { text-align:center; }
</style>
</head><body>
<h2>EntryForm Example / PHP Submit Page</h2>
<form action="display-entry-form.php" method="post">
<table>
<tr>
<td style="text-align:right">Name</td>
<td><input type="text" size="10" name="name" /></td>
</tr>
<tr>
<td style="text-align:right">Zipcode</td>
<td><input type="text" size="10" name="zipcode" /></td>
</tr>
</table>
<p><input type="radio" name="gender" value="Female" />Female<br />
<input type="radio" name="gender" value="Male" />Male</p>
<p>Age
<select name="age" />
<option value="18-25">18-25</option>
<option value="26-35">26-35</option>
<option value="36-45">36-45</option>
<option value="36-55">46-55</option>
<option value="Over 55">Over 55</option>
<option selected value="Unknown">Unknown</option>
</select> </p>
<p><input type="checkbox" name="student" value="yes" checked />Full time
student?</p>
<p> Comments:<br
/>
<textarea rows="8" cols="35" name="comments"></textarea>
</p>
<input type="hidden" name="hidden" value="Confidential Data" />
<input type="submit" value="Submit Data" />
</form>
</body>
</html>

// display-entry-form.php
<html>
<head>
<title>EntryForm Example : Display Form</title>
<style>
body { font-family:Verdana;
color:maroon;
background-color:aliceblue; }
input { font-family:Verdana; width="1in"; }
td { text-align:left; }
</style>
</head>
<body>
<h2>Data from EntryForm Example</h2>
<pre style="font-weight:bold;font-size:120%">
<?php print_r($_POST);?>
</pre>
<table cellpadding="5">
<tr> <th>Field</th> <th>Value</th> </tr>
<tr> <td>Name</td> <td><?php echo $_POST["name"];?></td> </tr>
<tr> <td>Zipcode</td> <td><?php echo $_POST["zipcode"];?></td> </tr>
<tr> <td>Gender</td> <td><?php echo $_POST["gender"];?></td> </tr>
<tr> <td>Student</td>
<td><?php if (isset($_POST["student"]))
{
echo "true";
}
else
{
echo "false";
}
?>
</td>
</tr>
</table>
<p>Comments: <?php echo $_POST["comments"]?></p>
<p>Hidden Field: <?php echo $_POST["hidden"]?></p>
</body>
</html>
OUTPUT:
// http://localhost/sample/entry-form.php

//After submitting the details

RESULT:
Thus the creation of a simple PHP scripts that displays an output
statement, login credentials and user details have been implemented
successfully.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy