Scribd
Upload
17 views49 pages

Web essential lab manaul

The document outlines the IT3401 - Web Essentials Laboratory course at Annai Mira College of Engineering and Technology, detailing the practical work and experiments conducted by students. It includes a certificate template for students, an index of experiments, and specific aims and procedures for various web development tasks such as creating interactive websites, form validation using JavaScript, and simple PHP scripts. The document serves as a guide for students to complete their practical examinations in web development during the academic year 2024-2025.

Uploaded by

sabimoorthy02
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 views49 pages

Web essential lab manaul

The document outlines the IT3401 - Web Essentials Laboratory course at Annai Mira College of Engineering and Technology, detailing the practical work and experiments conducted by students. It includes a certificate template for students, an index of experiments, and specific aims and procedures for various web development tasks such as creating interactive websites, form validation using JavaScript, and simple PHP scripts. The document serves as a guide for students to complete their practical examinations in web development during the academic year 2024-2025.

Uploaded by

sabimoorthy02
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/ 49

ANNAI MIRA COLLEGE OF ENGINEERING AND TECHNOLOGY

NH-46, Chennai-Bengaluru National Highways,


Arappakkam, Ranipet-632517, Tamil Nadu, India
Telephone : 04172-292925 Fax : 04172-292926

Email : amcet.rtet@gmail.com/info@amcet.in Web : www.amcet.in

DEPARTMENT OF INFORMATION TECHNOLOGY

IT3401 – WEB ESSENTIALS LABORATORY

Name : ………………………………………………….

Register Number : ………………………………………………….

Year & Branch : ………………………………………………….

Semester : ………………………………………………….

Academic Year : ………………………………………………….


ANNAI MIRA COLLEGE OF ENGINEERING AND TECHNOLOGY
NH-46, Chennai-Bengaluru National Highways,
Arappakkam, Ranipet-632517, Tamil Nadu, India
Telephone : 04172-292925 Fax : 04172-292926

Email : amcet.rtet@gmail.com/info@amcet.in Web : www.amcet.in

DEPARTMENT OF INFORMATION TECHNOLOGY

IT3401 – WEB ESSENTIALS LABORATORY


CERTIFICATE

This is to Certify that the Bonafide record of the practical work done by
…………………………………. Register Number : …………………………………. of IInd
year B.TECH ( INFORMATION TECHNOLOGY ) submitted for the B.TECH IT practical
examination (IV th Semester) in IT3401 – WEB ESSENTIALS LABORATORY during the
academic year 2024 – 2025.

Staff in–Charge Head of the Department

Submitted for the practical examination held on _______________ .

Internal Examiner External Examiner


INDEX

Ex Page Staff
Date Experiments
No. No. Signature

1 Creation of Interactive Web Sites

2 Form Validation using JavaScript

3 Creation of Simple PHP Scripts

4 Handling Multimedia Content in Web Sites

5. A. Invoke Servlets from HTML Forms

5. B. Session Tracking using Hidden Form Fields

5. C. Session Tracking for a Hit Count

6 Creation of Information Retrieval System

7 Creation of Personal Information System


EX NO : 1
DATE : Creation of Interactive Web Sites

Aim:
To create the interactive web sites design using HTML and authoring tools.
Procedure:
1. Turn on the web server with necessary featured packages.
2. Confirm the running of the web server’s control page by using local host url.
3. Start your website construction from webserver’s localhost location.
4. Build the required html structure to deploy the appropriate web site.
5. Prepare and build the appropriate collection of required html pages.
6. Layout the web pages with relevant textual contents.
7. Style the html pages with Inline, Internal and External CSS Properties.
8. Format the html pages with required images with relevant options.
9. Prepare the html pages with anchor links to navigate with neighbouring pages.
10. Launch the website in the recommended web browser.

Program:
External CSS (mystyle.css)
body {
font-family: Arial, sans-serif;
}

h1 {
text-align: center;
color: navy;
}

h2 {
background-color: lightblue;
color: navy;
margin-left: 20px;
text-align: center;
text-decoration: underline;
}

/* Navigation Menu */
li {
display: inline;
padding: 18px;
color: white;
}

li:hover {
background-color: yellow;
color: black;
}

div {
background-color: brown;
padding: 2px;
border: none;
}

a {
text-decoration: none;
}

p {
font-size: 15px;
text-align: justify;
}

Webpage (webpage.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Welcome to IT Department</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>Sri Balaji Chockalingam Engineering College, Arani</h1>


<h2>Welcome to Department of Information Technology</h2>

<div>
<!-- Navigation Menu -->
<ul style="list-style-type: none;">
<li><a href="#">Home</a></li>
<li><a href="Department.html">Department</a></li>
<li><a href="Examination.html">Examination</a></li>
<li><a href="Admission.html">Admission</a></li>
<li><a href="Faculties.html">Faculties</a></li>
<li><a href="Facilities.html">Facilities</a></li>
<li><a href="About_Us.html">About Us</a></li>
<li><a href="Contact_Us.html">Contact Us</a></li>
</ul>
</div>

<img src="3230.jpg" height="300" width="1310" alt="College Image"/>

<p>
Sri Balaji Chockalingam Engineering College, an institution of
academic excellence, was established in the year 1999,
with a cherished desire to serve the cause of humanity through
technical higher education. This college has been affiliated
with Anna University, Chennai, and has been recognized by the
Government of Tamil Nadu. It is a Co-Educational Engineering
College offering six B.E./B.Tech. courses and four P.G. courses.
All the courses have been recognized by the All India
Council for Technical Education, New Delhi, and accredited by
NBA.
</p>

</body>
</html>

Department Page (Department.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>SbcecInfoTech</title>
<style>
body {
background-color: cornsilk;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
p {
font-size: 16px;
text-align: justify;
padding: 10px;
}
</style>
</head>
<body>

<h1>Welcome to The Department of Information Technology</h1>

<p>
The Department of Information Technology was established in the
year 1999.
The motto of our department is to enhance the development and
competitive potential
of students to meet the current trends of the IT field in
society.
</p>

<p>
Our department has an expert team of well-qualified and
professionally experienced academic members.
They dedicate their intellectual approaches to emerging
technologies and direct students towards technological
and industrial activities through advisory layouts.
</p>

<p>
They are actively engaged in research and development activities
on recent and trending technologies.
The students are well equipped to face challenges in their
careers and adapt to future scenarios in IT sectors.
</p>

</body>
</html>

Note : Similarly create additional html pages for Examination, Admission, Faculties,
Facilities, About_Us, Contact_Us Pages.
OUTPUT :
Result:

The Creation of interactive web sites design using HTML and authoring tools has
been completed successfully.
EX NO : 2
DATE : Form Validation using JavaScript

Aim:
To validate the html forms at client side using Javascript.
Procedure:
1. Turn on the web server with necessary featured packages.
2. Confirm the running of the web server’s control page by using local host url.
3. Start your website construction from webserver’s localhost location.
4. Build the required html structure to deploy the appropriate web site.
5. Prepare and build the appropriate collection of required html pages.
6. Layout the web pages with relevant validating criteria and textual contents.
7. Style the html pages with Inline, Internal and External CSS Properties.
8. Format the html pages with required images with relevant options.
9. Prepare the html pages with anchor links to navigate with neighbouring pages.
10. Launch the website in the recommended web browser.

Program:
Webpage for Validation.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Validation</title>

<style>

body {

background-color: lightblue;

h1 {

color: navy;

margin-left: 20px;

text-align: center;
}

h2 {

color: navy;

margin-left: 20px;

text-align: center;

text-decoration: underline;

li {

display: inline;

padding: 18px;

color: white;

li:hover {

background-color: yellow;

color: black;

div#incss {

background-color: brown;

padding: 2px;

border: none;

a{

text-decoration: none;

p{

font-size: 15px;

text-align: justify;

input[type=text], input[type=date], select {

width: 30%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;
box-sizing: border-box;

resize: vertical;

label {

padding: 12px 12px 12px 0;

display: inline-block;

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

.container {

border-radius: 5px;

background-color: #b4b4b4;

padding: 20px;

.col-25 {

float: left;

width: 15%;

margin-top: 6px;

background-color: #b4b4b4;

.col-75 {

float: left;

width: 75%;

margin-top: 6px;

background-color: #b4b4b4;

.row:after {
content: "";

display: table;

clear: both;

background-color: #b4b4b4;

</style>

</head>

<body>

<h1>Sri Balaji Chockalingam Engineering College, Arani</h1>

<h2>Welcome to Department of Information Technology</h2>

<div id="incss">

<ul style="list-style-type:none;">

<a href="#"><li>Home</li></a>

<a href="#"><li>Department</li></a>

<a href="#"><li>Examination</li></a>

<a href="#"><li>Admission</li></a>

<a href="#"><li>Faculties</li></a>

<a href="#"><li>Facilities</li></a>

<a href="#"><li>About Us</li></a>

<a href="#"><li>Contact Us</li></a>

</ul>

</div>

<div class="container">

<form name="myform" action="#" method="post" onsubmit="return validate_form();">

<div class="row">

<div class="col-25">

<label for="regno">Register Number</label>

</div>

<div class="col-75">
<input type="text" id="regno" name="regno" onchange="isregno()" placeholder="Your register
number...">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="lname">Student Name</label>

</div>

<div class="col-75">

<input type="text" id="lname" name="studname" onchange="issntxts()" placeholder="Your


name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="dob">Date of Birth</label>

</div>

<div class="col-75">

<input type="date" id="dob" name="dob" placeholder="Your date of birth..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="mothername">Mother Name</label>

</div>

<div class="col-75">

<input type="text" id="mothername" name="mothername" onchange="issntxtm()"


placeholder="Your mother name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="fathername">Father Name</label>

</div>
<div class="col-75">

<input type="text" id="fathername" name="fathername" onchange="issntxtf()" placeholder="Your


father name..">

</div>

</div>

<div class="col-100" align="middle">

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

</div>

</form>

</div>

<script type="text/javascript">

function validate_form() {

let valid = true;

let form = document.myform;

if (form.regno.value == "" || form.studname.value == "" || form.dob.value == "" ||

form.mothername.value == "" || form.fathername.value == "") {

alert("Please fill in all required fields.");

valid = false;

} else {

let result = `Your Register No is: ${form.regno.value}\n`;

result += `Your Entered Name is: ${form.studname.value}\n`;

result += `Your Date of Birth is: ${form.dob.value}\n`;

result += `Your Mother Name is: ${form.mothername.value}\n`;

result += `Your Father Name is: ${form.fathername.value}`;

alert(result);

form.regno.value = "";

form.studname.value = "";

form.dob.value = "";

form.mothername.value = "";

form.fathername.value = "";
valid = false;

return valid;

function isregno() {

let rn = document.myform.regno;

if (isNaN(rn.value)) {

alert("The Entered Value is not a Number");

rn.focus();

rn.select();

function issntxts() {

let sn = document.myform.studname;

if (!isNaN(sn.value)) {

alert("Please Enter a Text Value for Student Name...");

sn.focus();

sn.select();

function issntxtm() {

let mn = document.myform.mothername;

if (!isNaN(mn.value)) {

alert("Please Enter a Text Value for Mother Name...");

mn.focus();

mn.select();

function issntxtf() {
let fn = document.myform.fathername;

if (!isNaN(fn.value)) {

alert("Please Enter a Text Value for Father Name...");

fn.focus();

fn.select();

</script>

</body>

</html>
OUTPUT :

Result:

The validation of html forms at client side using HTML and authoring tools has
been completed successfully.
EX NO : 3
DATE : Creation of simple PHP scripts

Aim:
To create the simple PHP scripts using PHP Interpreters.
Procedure:
1. Turn on the web server with necessary featured packages.
2. Confirm the running of the web server’s control page by using local host url.
3. Start your website construction from webserver’s localhost location.
4. Build the required html structure to deploy the appropriate web site.
5. Prepare and build the appropriate collection of PHP scripts.
6. Layout the web pages with relevant PHP code contents.
7. Format the html pages with required images with relevant options.
8. Run the required output in the recommended web browser.

Program:
Here is your properly formatted and structured PHP code:
<!DOCTYPE html>
<html>
<body>

<?php
// Creating Different Variables
$txt = "Hello world!";
$x = 5;
$y = 10.5;

echo $txt;
echo "<br>";
echo $x;
echo "<br>";
echo $y;
?>

</body>
</html>

Output:
Hello world!
5
10.5
Test Global Scope (Variable Outside Function)
<!DOCTYPE html>
<html>
<body>

<?php
$x = 5; // Global scope

function myTest() {
// Using $x inside this function will generate an error
echo "<p>Variable x inside function is: $x</p>";
}

myTest();
echo "<p>Variable x outside function is: $x</p>";
?>

</body>
</html>

Output:
Variable x inside function is:
Variable x outside function is: 5

Test Local Scope (Variable Inside Function)


<!DOCTYPE html>
<html>
<body>

<?php
function myTest() {
$x = 5; // Local scope
echo "<p>Variable x inside function is: $x</p>";
}

myTest();

// Using $x outside this function will generate an error


echo "<p>Variable x outside function is: $x</p>";
?>

</body>
</html>

Output:
Variable x inside function is: 5
Variable x outside function is: (Error, since $x is not defined
outside)
Using Global Keyword to Access a Global Variable Within a Function
<!DOCTYPE html>
<html>
<body>

<?php
$x = 5;
$y = 10;

function myTest() {
global $x, $y;
$y = $x + $y;
}

myTest(); // Run function


echo "The value obtained by accessing the variables using Global
keyword is: $y";
?>

</body>
</html>

Output:
The value obtained by accessing the variables using Global keyword
is: 15

Result:

The Creation of simple php scripts using php interpreters has been completed
successfully.
EX NO : 4
Date : Handling multimedia content in web sites

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more. Web pages often contain
multimedia elements of different types and formats. Multimedia on the web is sound, music, videos,
movies, and animations.

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files. The most common way to
discover the type of a file, is to look at the file extension. Multimedia files have formats and different
extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

The MP4, WebM, and Ogg formats are only supported by HTML. The controls attribute adds video
controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video loads. The <source> element allows you
to specify alternative video files which the browser may choose from. The browser will use the first
recognized format.
Format File Description

.mpg MPEG. Developed by the Moving Pictures Expert Group. The first
MPEG
.mpeg popular video format on the web. Not supported anymore in HTML.

AVI (Audio Video Interleave). Developed by Microsoft. Commonly used


AVI .avi in video cameras and TV hardware. Plays well on Windows computers,
but not in web browsers.

WMV (Windows Media Video). Developed by Microsoft. Commonly used


WMV .wmv in video cameras and TV hardware. Plays well on Windows computers,
but not in web browsers.

QuickTime. Developed by Apple. Commonly used in video cameras and TV


QuickTime .mov
hardware. Plays well on Apple computers, but not in web browsers.

.rm RealVideo. Developed by Real Media to allow video streaming with low
RealVideo
.ram bandwidths. Does not play in web browsers.

.swf Flash. Developed by Macromedia. Often requires an extra


Flash
.flv component (plug-in) to play in web browsers.

Ogg .ogg supported by HTML.

WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by


WebM .webm
HTML.

MP4. Developed by the Moving Pictures Expert Group. Commonly used


MPEG-4
.mp4 in video cameras and TV hardware. Supported by all browsers and
or MP4
recommended by YouTube.

Common Audio Formats


MP3 is the best format for compressed recorded music. The term MP3 has become synonymous
with digital music. If your website is about recorded music, MP3 is the choice. Only MP3, WAV, and
Ogg audio are supported by the HTML standard. The controls attribute adds audio controls, like play,
pause, and volume. The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format. The text between the
<audio> and </audio> tags will only be displayed in browsers that do not support the
<audio> element.
Format File Description

MIDI (Musical Instrument Digital Interface). Main format for all


.mid electronic music devices like synthesizers and PC sound cards. MIDI files
MIDI
.midi do not contain sound, but digital notes that can be played by electronics.
Plays well on all computers and music hardware, but not in web
browsers.
.rm RealAudio. Developed by Real Media to allow streaming of audio with
RealAudio
.ram low bandwidths. Does not play in web browsers.

WMA (Windows Media Audio). Developed by Microsoft. Plays well on


WMA .wma
Windows computers, but not in web browsers.

AAC (Advanced Audio Coding). Developed by Apple as the default format


AAC .aac
for iTunes. Plays well on Apple computers, but not in web browsers.

WAV. Developed by IBM and Microsoft. Plays well on Windows,


WAV .wav
Macintosh, and Linux operating systems. Supported by HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3 files are actually the sound part of MPEG files. MP3 is the most
MP3 .mp3 popular format for music players. Combines good compression (small
files) with high quality. Supported by all browsers.

MP4 is a video format, but can also be used for audio. Supported by all
MP4 .mp4
browsers.
Programs :
HTML Video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Controls</title>
<style>
body {
font-family: Arial, sans-serif;
}
.video-container {
text-align: center;
margin-top: 20px;
}
button {
padding: 10px 15px;
margin: 5px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="video-container">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420" controls autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
Output :

HTML Audio
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay muted>
<source src=" file:///C:/Users/PROFESSOR%20SELVAM/Downloads/horse.ogg"
type="audio/ogg">
<source src=" file:///C:/Users/PROFESSOR%20SELVAM/Downloads/horse.mp3"
type="audio/mpeg">
</audio>
</body>
</html>
Output :

Result :
The Handling multimedia content in web sites using html multimedia tags has been executed
successfully.
EX NO : 5A
Date :
INVOKING SERVLETS FROM HTML FORM

AIM:
To write a java program to invoke servlets from HTML form.
ALGORITHM:
At Client Side
1. Create a web page with file name “Client.html” using HTML form that contains First Name, Last
Name, Email ID and Password fields by using input types such as text, password and submit button.
2. Set the URL of the server as the value of form’s action attribute.
3. Run the HTML program.
4. Submit the form data to the server.
At Server Side
General Settings:
1. Install Java with latest version and check the version of the java installation by using the following
command in command prompt : “java --version”, it will shows as follows as,
java version "20" 2023-03-21
Java(TM) SE Runtime Environment (build 20+36-2344)
Java HotSpot(TM) 64-Bit Server VM (build 20+36-2344, mixed mode, sharing)

(1) Define the class server that extends the property of the class GenericServlet.
(2) Handle the request from the client by using the method service() of GenericServlet class.
(3) Get the parameter names from the HTML form by using the method getParameterNames().
(4) Get the parameter values from the HTML forms by using the method getParameter().
(5) Send the response to the client by using the method of PrintWriter class.

server.java:
import java.io.*;
import
java.util.*;
import jakarta.servlet.*;
public class server extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException
{
// Set response content type
res.setContentType("text/html");

PrintWriter pw=res.getWriter();
pw.println("<body style='background-
color:AntiqueWhite;'>"); pw.println("<h1 style='text-
align:center;'>"+"Registration
Successful..."+"</h1>");
Enumeration e=req.getParameterNames();
while(e.hasMoreElements())
{
String str1=(String)e.nextElement();
String str2=req.getParameter(str1);
pw.println("<h2 style='text-align:center;'>"+str1+"= "+str2+"</h2>");
}
pw.println("</body>");
pw.close();
}
}

web.xml:
<web-app>
<servlet>
<servlet-name>Register</servlet-name>
<servlet-class>server</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Register</servlet-name>
<url-pattern>/server</url-pattern>
</servlet-mapping>
</web-app>

Client.html:
<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="AntiqueWhite">
<form name="form1" method="post"
action="http://localhost:8080/examples/server">
<fieldset>
<legend>Registration</legend>
First Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="text" name="First Name " size="25"/><br/><br/>

Last Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="text" name="Last Name " size="25"/><br/><br/>

E-mail ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="text" name="LoginID " size="25"/><br/><br/>

Password&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="password" name="Password " size="25">
<input type="submit" Value="SUBMIT">
</fieldset>
</form>
</body>
</html>
Output:

Result :
The java servlet were invoked from HTML form using java program has been successfully
completed.
EX NO : 5B
DATE : Session tracking using hidden form fields

Aim:
To perform session tracking using hidden form field.
Procedure:
1. Import the required header files.
2. Create SessionTracker as derived for the base class HttpServlet.
3. Define the doGet method with required HttpServletRequest
and HttpServletResponse variables.
4. Set the content type of the response as “text/html”.
5. Get the content of the response variable by getWrite() method.
6. Assign the content of the response variable for the PrintWriter class variable.
7. Get the content of the request variable by getSession() method.
8. Assign the content of the request variable for the HttpSession class variable.
9. Declare the required codes for Increment the hit count for this page.
10. The incremented value is saved in this client's session under the
name "tracker.count".
11. Develop the required Dhtml Response using appropriate output variables.
Program:
SetHiddenFieldServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SetHiddenFieldServlet extends HttpServlet { private


static final long serialVersionUID = 1L;

public SetHiddenFieldServlet() {
}
protected void doPost(HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException {


response.setContentType("text/html"); PrintWriter
out = response.getWriter();
String userName = request.getParameter("userName").trim();
String password = request.getParameter("password").trim();
if(userName == null || userName.equals("") ||

password == null || password.equals(""))


{ out.print("Please enter both username " +

"and password. <br/><br/>");


RequestDispatcher requestDispatcher =
request.getRequestDispatcher("/login.html");
requestDispatcher.include(request, response);

}
else if(userName.equals("sho") && password.equals("1234"))
{ out.println("Logged in successfully.<br/>"); out.println("Click
on the below button to see " +
"the values of Username and Password.<br/>");
out.print("<form action='GetHiddenFieldServlet'" +

" method='POST'>");
out.print("<input type='hidden' name='userName'" + "
value='" + userName + "'>");
out.print("<input type='hidden' name='password'" + "
value='" + password + "'>");

out.print("<input type='submit' value='See Values'>");


out.print("</form>");

out.close();
}else{
out.print("Wrong username or password. <br/><br/>");
RequestDispatcher requestDispatcher =
request.getRequestDispatcher("/login.html");
requestDispatcher.include(request, response);

}
}
}

GetHiddenFieldServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetHiddenFieldServlet extends HttpServlet { private


static final long serialVersionUID = 1L;

public GetHiddenFieldServlet() {
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html"); PrintWriter
out = response.getWriter();

String userName = request.getParameter("userName").trim();


String password = request.getParameter("password").trim();
out.println("Username: " + userName + "<br/><br/>");
out.println("Password: " + password);

out.close();
}
}
login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<title>Login</title>

</head>

<body>

<form action="SetHiddenFieldServlet" method="post"> Username:<input


type="text" name="userName"/>
<br/><br/>
Password:<input type="password" name="password"/>

<br/><br/>

<input type="submit" value="login"/>

</form>

</body>

</html>

web.xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID" version="2.4"


xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SetHiddenFieldServlet</servlet-name>

<servlet-class>

com.w3spoint.business.SetHiddenFieldServlet
</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SetHiddenFieldServlet</servlet-name>

<url-pattern>/SetHiddenFieldServlet</url-pattern>

</servlet-mapping>

<servlet>

<servlet-name>GetHiddenFieldServlet</servlet-name>

<servlet-class>

com.w3spoint.business.GetHiddenFieldServlet
</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>GetHiddenFieldServlet</servlet-name>

<url-pattern>/GetHiddenFieldServlet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>login.html</welcome-file>

</welcome-file-list>

</web-app>

Output:
Result:

The tracking of sessions using hidden form field has been completed successfully.
EX NO : 5C
DATE : Session Tracking for a Hit Count

Aim:
To perform session tracking for a hit count by viewing the web pages.
Procedure:
1. Import the required header files.
2. Create SessionTracker as derived for the base class HttpServlet.
3. Define the doGet method with required HttpServletRequest
and HttpServletResponse variables.
4. Set the content type of the response as “text/html”.
5. Get the content of the response variable by getWrite() method.
6. Assign the content of the response variable for the PrintWriter class variable.
7. Get the content of the request variable by getSession() method.
8. Assign the content of the request variable for the HttpSession class variable.
9. Declare the required codes for Increment the hit count for this page.
10. The incremented value is saved in this client's session under the
name "tracker.count".
11. Develop the required Dhtml Response using appropriate output variables.
Program:
SessionTracker.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SessionTracker extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
// Get the current session object, create one if necessary
HttpSession session = req.getSession();

// Increment the hit count for this page. The value is saved
// in this client's session under the name "tracker.count".

Integer count = (Integer)session.getAttribute("tracker.count"); if


(count == null)
count = new Integer(1);
else

count = new Integer(count.intValue() + 1); session.setAttribute("tracker.count",


count);
out.println("<HTML><HEAD><TITLE>SessionTracker</TITLE></HEAD>");
out.println("<BODY><H1>Session Tracking Demo</H1>");

// Display the hit count for this page out.println("You've


visited this page " + count + ((count.intValue() == 1) ? "
time." : " times.")); out.println("<P>");

out.println("<H2>Here is your session data:</H2>");


Enumeration enum = session.getAttributeNames(); while
(enum.hasMoreElements()) {

String name = (String) enum.nextElement();


out.println(name + ": " + session.getAttribute(name) + "<BR>");
}
out.println("</BODY></HTML>");
}
}
web.xml
<web-app>
<servlet>
<servlet-name>SessionTracker</servlet-name>
<servlet-class>SessionTracker</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SessionTracker</servlet-name>
<url-pattern>/SessionTracker</url-pattern>
</servlet-mapping>
</web-app>

Output:

Result:

The tracking of sessions for hit count by viewing web pages for more than one time
has been completed successfully.
EX NO : 6
DATE : Creation of Information Retrieval System

Aim:
To create the information retrieval system using web, PHP and MySQL.
Procedure:
1. Create a required database appropriate table structure.
2. Structure the table with required attributes as fields.
3. Create a php structure for database connection with required variables.
4. Check the connection with server name, user name, password, database name.
5. Create an html structure with the title of Information Retrieval System.
6. Create an html form with required form input elements.
7. Format the form input elements with appropriate attributes.
8. Use POST method to submit the form data into the database.
9. Create a submit button at end of the form.
10. Write required PHP lines to retrieve information from the corresponding
table structure.

Program:
usersearch.html
<html>
<head>
<title>Information Retrieval System</title>
</head>
<body style="background-color : pink;">
<center>
<h1>Information Retrieval System</h1>
<form action="http://localhost/irs/phpSearchOption.php" method="post">
<label>Search By:</label>
<select name="column">
<option value="name">Name</option>
<option value="dob">Date of Birth</option>
<option value="mobno">Mobile No</option>
<option value="email">E-Mail</option>
<option value="address">Address</option>

</select>

<br>
<br>

<label>Search Criteria :</label>


<input type="text" name="search">

<br>
<br>

<input type ="submit">


</center>
</form>

</body>
</html>
phpsearchoption.php

<?php
$search = $_POST['search'];
$column = $_POST['column'];
$servername = "localhost";
$username = "root";
$password = "";
$db = "usertest";
$conn = new mysqli($servername, $username, $password, $db); if
($conn->connect_error){
die("Connection failed: ". $conn->connect_error);
}
$sql = "select * from userinfotable where $column like '%$search%'";
$result = $conn->query($sql);
if ($result->num_rows > 0){
while($row = $result->fetch_assoc() ){
echo"<head>";

echo"<title>Information Retrieval System</title>";


echo"</head>";
echo"<body style='background-color : pink;'>";
echo"<center>";
echo"<h1>Information Retrieval System</h1>";
echo"<h4>Retrived Information : </h4>";

echo "<label><b>Name :</b></label>"." ".$row["name"]." <br><br> ".


"<label><b>Date of Birth :</b></label>"." ".$row["dob"]." <br><br> ".
"<label><b>Mobile No :</b></label>"." ".$row["mobno"]." <br><br> ".
"<label><b>E- Mail :</b></label>"." ".$row["email"]." <br><br> ".
"<label><b>Address :</b></label>"." ".$row["address"]."<br>";
echo"</center>";

echo"</body>";
echo"</html>";

}
} else {

echo"<head>";
echo"<title>Information Retrieval System</title>";
echo"</head>";
echo"<body style='background-color : pink;'>";
echo"<center>";
echo"<h1>Information Retrieval System</h1>";
echo"<h4>Retrived Information : </h4>";

echo "<h2> No Records Found...</h2>";


echo "<h4 style = 'color:red;'> Enter Correct Criteria Match...</h4>";
echo"</center>";
echo"</body>";
echo"</html>";

}
$conn->close();
?>
Output:
Result:

The creation of information retrieval system using web, PHP and MySQL has been completed
successfully.
EX NO : 7
DATE : Creation of Personal Information System

Aim:
To create the personal information system using PHP and MySQL.
Procedure:
1. Create a required database appropriate table structure.
2. Structure the table with required attributes as fields.
3. Create a php structure for database connection with required variables.
4. Check the connection with server name, user name, password, database name.
5. Create an html structure with the title of Personal Information System.
6. Create an html form with required form input elements.
7. Format the form input elements with appropriate attributes.
8. Use POST method to submit the form data into the database.
9. Create a submit button at end of the form.
10. Write required PHP lines to get from the form elements and store into
the corresponding table structure.

Program:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="usertest";
// Create connection
$conn = new mysqli($servername, $username, $password,$db);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
?>
<html>
<head>
<title> Personal Information System </title>
</head>
<body style="background-color : pink;">
<h1>Personal Information System</h1>

<form method="post">

<label>Name :</label>
<input type="text" name="name" placeholder="Enter Name">
<br><br>

<label>Date of Birth:</label>
<input type="text" name="dob" placeholder="Enter Date of Birth">
<br><br>

<label>Mobile No: </label>


<input type="text" name="mobno" placeholder="Enter Mobile No">
<br><br>

<label>E-mail: </label>
<input type="text" name="email" placeholder="Enter Email">
<br><br>

<label>Address: </label>
<input type="text" name="address" placeholder="Enter Address">
<br><br>
<input type="submit" name="submit" value="Submit">
</form>

</body>
</html>
<?php
if(isset($_POST['submit']))
{
$name=$_POST['name'];
$dob=$_POST['dob'];
$mobno=$_POST['mobno'];
$email=$_POST['email'];
$address=$_POST['address'];$qry="insert into userinfotable values(null,'$name',
'$dob','$mobno','$email','$address')"; if(mysqli_query($conn, $qry)){
echo'<script>alert("User Registerd Successfully");</script>';
header('location:test.php');

}
else
{
echo mysqli_error($conn);
}
}
?>
Output:

Result:

The creation of personal information system using PHP and MySQL has been
completed 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