lOMoARcPSD|57062442

IT3401- WEB Essentials LAB student Manual

Web Essentials (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

DEPARTMENT OF INFORMATION TECHNOLOGY

IT3401 WEB ESSENTIALS
Semester IV
Student Manual
Regulation 2021

Downloaded by saranya s ([email protected])

 lOMoARcPSD|57062442

TABLE OF CONTENTS

S. No. Particulars Page No.

a. 3
College vision and mission statement
b. Department Vision, Mission, PEOs, POs, 4
PSOs
c. 7
Lab syllabus
d. List of Experiments Mapping with COs, POs 8
&PSOs

Lab Experiments

CREATION OF INTERACTIVE WEB SITES - 9

DESIGN USING HTML AND AUTHORING
1. TOOLS
FORM VALIDATION USING JAVASCRIPT 14
2.
CREATION OF SIMPLE PHP SCRIPTS 19
3.
HANDLING MULTIMEDIA CONTENT IN WEB 20
SITES
4.
a) INVOKE SERVLETS FROM HTML FORMS 22
5.
b) SESSION TRACKING USING HIDDEN 24
FORM FIELDS AND SESSION TRACKING FOR
A HIT COUNT
CREATION OF INFORMATION RETRIEVAL 28
SYSTEM USING WEB, PHP AND MYSQL
6.
CREATION OF PERSONAL INFORMATION 34
SYSTEM
7.

2
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

NPR College of Engineering & Technology, Natham.

VISION

 To develop students with intellectual curiosity and technical expertise to meet the global
needs.

MISSION

 To achieve academic excellence by offering quality technical education using best

teaching techniques.

 To improve Industry – Institute interactions and expose industrial atmosphere.

 To develop interpersonal skills along with value-based education in a dynamic learning

environment.

 To explore solutions for real time problems in the society.

3
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

NPR College of Engineering & Technology, Natham.

Department Of Information Technology

VISION
 To cultivate a generation of globally competitive IT professionals who are equipped
with the knowledge, skills, and adaptability to flourish amidst technological
advancements.

MISSION
 To achieve academic excellence in Information Technology by fostering a dynamic
learning environment that seamlessly integrates innovative computing methodologies into
the teaching and learning process.

 To create a nurturing environment for students to develop professionalism, ethical

awareness, and social responsibility while adapting to evolving programming
paradigms.

 To foster industry-institute collaboration that leverages emerging technologies and

programming expertise, aligning them with global standards and industry
expectations

PROGRAM EDUCATIONAL OBJECTIVES

Graduates of Information Technology Program will be able to:

 Demonstrate technical competence with analytical and critical thinking to

understand and meet the diversified requirements of industry, academia,
and research.
 Exhibit technical leadership, team skills, and entrepreneurship skills to
provide business solutions to real-world problems.
 Work in multi-disciplinary industries with social and environmental responsibility, work
ethics, and adaptability to address complex engineering and social problems.

 Pursue lifelong learning, use cutting-edge technologies, and be involved in applied research
to design optimal solutions.

4
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

PROGRAM OUTCOMES

PO1: Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,
and an engineering specialization to the solution of complex engineering problems.

PO2: Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineering sciences.

PO3: Design / development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the public
health and safety, and the cultural, societal, and environmental considerations.

PO4: Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions

PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations.

PO6: The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice.

PO7: Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.

PO8: Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
the engineering practice.

PO9: Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.

PO10: Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and receive clear instructions.

PO11: Project management and finance: Demonstrate knowledge and understanding of the engineering
and management principles and apply these to one’s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.

PO12: Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.

5
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

PROGRAM SPECIFIC OUTCOMES

Graduates of Information Technology Program will be able to:

 Have proficiency in programming skills to design, develop and apply appropriate techniques, to solve
complex engineering problems. Successfully carry forward domain knowledge in computing and
allied areas to solve complex and real-world engineering problems.
 Have the knowledge to build, automate, and manage business solutions using cutting-edge
technologies.

 Have excitement about research in applied computer technologies.

6
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

LAB SYLLABUS

IT3401 WEB ESSENTIALS LABORATORY LTP

C302
4

Course Objectives:
 To comprehend and analyze the basic concepts of web programming and internet protocols.
 To describe how the client-server model of Internet programming works.
 To demonstrate the uses of scripting languages.
 To write simple scripts for the creation of web sites.
 To create database applications.

List of Experiments

1. Creation of interactive web sites – Design using HTML and authoring tools

2. Form validation using JavaScript

3. Creation of simple PHP scripts

4. Handling multimedia content in web sites

5. Write programs using Servlets:

i. To invoke servlets from HTML forms

ii. Session tracking using hidden form fields and Session tracking for a hit count

6. Creation of information retrieval system using web, PHP and MySQL

7. Creation of personal Information System

TOTAL: 30 PERIODS

7
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Course Outcomes

Course Knowledge
COs Course Outcomes Level
Code
After completion of the course,
The students will be able to apply JavaScript, HTML and CSS
CO1 C213.1 effectively to create interactive and dynamic websites. K3

CO2 C213.2 The students will be able to create simple PHP scripts K6
The students will be able to design and deploy simple web-applications.
CO3 C213.3 K6
The students will be able to create simple database applications.
CO4 C213.4 K6
The students will be able to handle multimedia components
CO5 C213.5 K3

List of Experiments Mapping with COs, POs &PSOs

Exp.
Name of the Experiment Cos POs PSOs
No.
Creation of interactive web sites – Design using
1. CO1 1,2,3,4,5,9,10,11 & 12 1,2 & 3
HTML and authoring tools
2. Form validation using JavaScript CO1 1,2,3,4,5,9,10,11 & 12 1,2 & 3
Creation of simple PHP scripts
3. CO2 1,2,3,4,5,9,10,11 & 12 1,2 & 3
Handling multimedia content in web sites
4. 1,2,3,4,5,9,10,11 & 12 1,2 & 3
CO3
Write programs using Servlets:
5. CO5 1,2,3,4,5,9,10,11 & 12 1,2 & 3
i. To invoke servlets from HTML forms

ii. Session tracking using hidden form fields

and Session tracking for a hit count
Creation of information retrieval system using
6. 1,2,3,4,5,9,10,11 & 12 1,2 & 3
web, PHP and MySQL CO4

7. Creation of Personal Information System CO5 1,2,3,4,5,9,10,11 & 12 1,2 & 3

8
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:1 CREATION OF INTERACTIVE WEB SITES - DESIGN USING HTML AND
Date: AUTHORING TOOLS

AIM:
To develop a website to enter the student profiles.
ALGORITHM:
Step1: Start the program.
Step 2: using html tags, create table to enter the student profile.
Step3: For each row of the table, enter the data using <td> such that create student name, fathers name,
address and e-mail, etc.
Step 4: Using<table> we have to enter the qualification of the students.
Step 5: Using radio button, we have to choose the entertainment and software exposure of the
student. Step 6: Using<form>, we have to create a declare text to type the text.
Step 7: Execute the web page in Internet explorer.

PROGRAM:
<html>
<head>
<title>Resume page</title>
</head>
<body bgcolor="#fffFF">
<center><font color="#6600CC"><h1><b><b><u>PROFILE</u></b></b></h1></center></font>
<form name="input" action="z:\WebTech Lab\webpageprofile.htm" method="get">
<img height=100 width=100 src="z:\WebTech Lab Photo.jpg" alt="angry face">
<table border="3">
<td>Name:</td>
<td><input type="text" height="10" width="25"></td>
</tr>
<tr>

9
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<td>Father Name:</td>
<td><input type="text" height="10" width='25'></td></tr>
<tr>
<td>Mother Name:</td>
<td><input type="text" height="10" width="25"></td></tr>
<tr>
<td>Date of Birth:</td>
<td><input type="text" height="10" width="25"></td></tr>
<tr>
<td>Marital Status:</td>
<td><input type="text" height="10" width="25"></td></tr>
<tr>
<td>Communication:</td>
<td colspan="4"><textarea name="male" rows="4" cols='17></textarea></td></tr>
<tr>
<<td>Gender:</td>
<td>Male:<input type="checkbox" name="male">Female:<input type="checkbox “name="female""></td>
</tr>
<tr>
<thcolspan="6">Educational Qualifications</th></tr>
<tr>
<th>Name of the Deg.</th><th>name of the degree</th><th>Name of the Institution</th><th>Year of
Pass</th><th>Grade</th><th>Specialization</th></tr><tr>
<td>SSLC:</td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10' width='25'></td>

10
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<td><input type="text" height='10' width='25'></td>

<td><input type="text" height="10" width='25'></td>
<td><input type="text" height="10" width='25'></td>
</tr>
<tr>
<td>HSC:</td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width='25'></td>
<td><input type="text" height='10' width='25'></td>
</tr>
<tr>
<td>D.C. Tech:</td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
</tr>
<tr>
<td>M.C. A:</td>
<td><input type="text" height="10" width='25'></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
</tr>

11
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<tr>
<td>M.E:</td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
<td><input type="text" height="10" width="25"></td>
</tr>
<br><br><br>
<tr>
<th colspan="6">Software Exposure</th>
</tr>
<tr>
<td>OS:</td>
<<td colspan="5">Windows XP/00/03
<input type="checkbox” name="male">LINUX
<input type="checkbox” name="female">UNIX
<input name="female">others
<input type="checkbox" name="female">
</td>
</tr>
<tr>
<td>Languages:</td>
<td colspan="5">C:<input type="checkbox" name="male">C++:<input type="checkbox"
name="female">Java:<input type="checkbox" name="female">J2EE <input type="checkbox"
name="female"></td></tr>
<tr>

12
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<td>Extra Curriculum Activities:</td>

<td colspan="5">Dance:<input type="checkbox" name="male">Swimming:<input type="checkbox"
name="female">Shuttle:<input type="checkbox" name="female">Music:<input type="checkbox"
name="female"></td>
</tr>
<tr>
<td>Any Other Information:</td>
<td><input type="text" name="male"></td>
</tr>
<tr>
<center><th>Declaration:</th></center>
<td colspan="5"><textarea name="male" rows="5" cols="70"></textarea></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="text" name="male"></td>
<td>Place:</td>
<td><input type="text" name="male" ></td>
</tr>
<tr>
<td><input type="submit" value="submit"><A href="webpageprofile.htm"></A>
<br> CLEAR-both></td>
<td><input type="reset" value="reset"></td>
</tr></center></body></html>

RESULT:
Thus, the websites for student profile have been created and verified successfully.

13
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:2
FORM VALIDATION USING JAVASCRIPT
Date:

AIM:
To develop a webpage for a registration form using Javascript

ALGORITHM:
Step1: Start the program
Step2: Define regular expressions for field validations and create a javascript function “validate” to handle form
validations.
Step 3: Retrieve form field values and initialize an empty “errors” array.
Step 4: Validate name, email, username, password, gender adding error messages to the array, is
validations fails.
Step 5: If the “errors” array is not empty then call the “reportErrors” function and in that function construct an
error message and display it using the “alert” function.
Step 6: If the “errors” array is empty then allow form submission and attach the “validate” function to the
form’s “onSubmit” event.
Step 7: Define an html form with input fields and close the form using the tags.

PROGRAM:
<html>
<head>
<title> Registration Form Tutorial</title>
<script type="text/javascript"></script>
<script type="text/javascript">
var ck_name = /^[A-Za-z0-9]{3.20}$/;
var ck_email= /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\)* \w[\w-]{0,66})\([a-z]{2,6})(?:\[a-z]{2})?)$/i var ck_username
= /^[A-Za-z0-9]{1.20)S/;

14
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

var ck_phoneno = /^[0-9 !@#$%^&*( )_]{10}$/;

var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/; function validate(form){
var name = form.name.value; var email = form.email.value;
var username=form.username.value; var password = form.password.value; var gender =
form.gender.value; var phoneno-form.phoneno.value:
var errors = []:
if (!ck_name.test(name)) { errors[errors.length] = "You valid Name.";
}
if (!ck_email.test(email)) {
errors[errors.length] = "You must enter a valid email address.";
}
if (!ck_username.test(username)) {
errors[errors.length] = "You valid UserName no special char.";
}
if (!ck_password.test(password)) {
errors[errors.length] = "You must enter a valid Password min 6 char.";if (gender ==0) {
errors[errors.length] = "Select Gender";
}
if (!ck_phoneno.test(phoneno)) {
errors[errors.length]="You must enter a valid phone no 10 char.";
}
if (errors.length> 0) { reportErrors(errors); return false;
}
return true;
}
function reportErrors(errors){
var msg = "Please Enter Valide Data...\n"; for (var i=0; i<errors.length; i++)
{ var numError = i + 1;

15
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

msg += "\n" + numError + "," + errors[i];

}
alert(msg);
}
</script>
</head>
<body id="public">
<div style="height:30px"></div>
<div id="container">
<div style="height:30px"></div>
<form autocomplete="off"
enctype="multipart/form-data" method="post" action="thanks.html" onSubmit="return
validate(this);" name="form">
<div class="info" style="padding-left:20px">
<h2>Registration Form</h2>
</div>
<ul>
<li id="folil" class="">
<label class="desc" id="title1" for="Field1"> Full Name</label>
<div>
<input id="name" name="name" type="text" class="field text medium" value="" maxlength="255"
tabindex="1"/>
</div>
</li>
<li id="foli2" class="">
<label class="desc" id="title2" for="Field2"> Email </label>
<div>

16
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

u<input id="email" name="email" type="text" class="field text medium" value="" maxlength="255"

tabindex="2"/>
</div>
</li>
<li id="foli3" class="">
<label class="desc" id="title3" for="Field3"> User-ID</label>
<div>
<input id="username" name="username" type="text" class="field text medium" value="" maxlength="255"
tabindex="3"/>
</div>
</li>
<li id="foli4" class="”>
<label class = “desc" id="title4" for="Field4"> Password</label>
<div>
<input id="password" name="password" type="password" class="field text medium" value=""
maxlength="255" tabindex="4"/>
</div>
</li>
</li>
<li id="foli5" class=” ”>
<label class = “desc" id="title5" for="Field5"> phoneno</label>
<div>
<input id=" phoneno" name=" phoneno" type="text" class="field text medium" value="" maxlength="255"
tabindex="4"/>
</div>
</li>
<li id="foli6" class=””>

17
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<label class = “desc" id="title6" for="Field6"> Gender</label>

<div>
<select id="gender" name="gender" class="field text medium" tabindex="5">
<option value =”0”>Gender</option><option value =”1”>Male</option><option value
=”2”>Female</option>
</select>
</div>
</li>
<li id="foli15" class=” ”></li>
<li class="buttons">
<input type =”submit” value=”Submit” style=”background:#0060a1; color:#FFFFFF; Font-size:14px; border:1px
solid #0060a1"/>
</li>
</ul>
</form>
<div style="height:20px"></div>
</div><!-container->
</body>
</html>

RESULT:
Thus, the program for Javascript for form validation is executed and verified successfu

18
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:3
CREATION OF SIMPLE PHP SCRIPTS
Date:

AIM:

To create web page in PHP scripts that find the sum of two numbers.

ALGORITHM:

Step 1: Start the program

Step 2: Using html tags, define a php function called ‘addFunction’.
Step 3: Inside the function, create a variable for the sum of 2 numbers and echo the sum of the numbers.
Step 4: Call the function with the arguments that is number to be added.
Step 5: Execute the web page in Internet explorer.
PROGRAM:

<html>
<head>
<title>Writing PHP Function with Parameters</title>
</head>
<body>
<?php
function addFunction($num1, $num2)
{
$sum = $num1 + $num2;
echo "Sum of the two numbers is : $sum";
}
addFunction(10, 20);
?>
</body>
</html>

RESULT:

The web page is created in PHP scripts and that find the sum of two numbers successfully.

19
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:4
HANDLING MULTIMEDIA CONTENT IN WEB SITES
Date:

AIM:

To create a webpage that handles the multimedia content in web sites.

ALGORITHM:

Step 1: Start the program by adding the opening tags.

Step 2: Embed an image with the source files “india.jpg” and set its width and height.
Step 3: Embed a flash animation with the source file “animation.swf” using the appropriate MIME
type. Step 4: Add an audio element with controls.
Step 5: Specify the audio source file as “kalimba.mp3” with the MIME type.
Step 6: Provide a fallback message for browser that don’t support the audio element.
Step 7: Close the audio with the html tags and execute the webpage in Internet explorer.

PROGRAM:

<!DOCTYPE html>
<html>
<body>
<embed src="india.jpg" width="200" height="200"></br>
<embed src="animation.swf" type="application/vnd.adobe.flash-movie"></br>
<audio controls>
<source src="kalimba.mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>
</body>
</html>

20
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<!DOCTYPE html>
<html>
<body>
<h1><center>HANDLING MULTIMEDIA CONTENT IN WEB SITES</center></h1>
<h2>Audio</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<h2>Video</h2>
<video width="420" height="250" controls>
<source src="video.mp4" type="video/mp4">
</center>
</video>
<h2>Youtube videos</h2>
<h3>Ex:2 Form validation using JavaScript</h3>
<iframe width="420" height="345" src="https://www.youtube.com/embed/1iaUWdVRABU">
</iframe>
<h3>Ex:5 Write programs using Servlets:</h3>
<iframe width="420" height="345" src="https://www.youtube.com/embed/9fjNuEfMOgU">
</iframe>
</body>
</html>

RESULT:

The webpage is created and that handles the multimedia content in web sites successfully.

21
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:5(a)
INVOKE SERVLETS FROM HTML FORMS
Date:

AIM:

To create a servlet program and check the script validation.

ALGORITHM:

Step 1: Start the program.

Step 2: Get the context text at Servlet at text html.

Step 3: Get the response from the user by entering the username field.

Step 4: Get the response from the user by entering the password field.
Step 5: If the username and password are correct, then the user is authenticated and can enter into web page.
Step 6: Execute the program in Internet Explorer.
Step 7: Stop the program.

PROGRAM:

HTML Code:
<HTML>
<HEAD><CENTER></CENTER></HEAD>
<CENTER>
<body bgcolor="green">
<form action="http://localhost:7001/parthi_servlet/servlet1" method="get">
<h1>USERNAME AND PASSWORD></h1>
<TABLE>
<TR>
<TD>USERNAME<INPUT TYPE="TEXT" name="username"></TD></TR>
<TR>
<TD> PASSWORD<INPUT TYPE="password" name="password"></TD></TR>
<TR>

22
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<TD><INPUT TYPE="submit" VALUE="SUBMIT" NAME=SUB></TD>

<TD><INPUT TYPE="reset" VALUE="CLEAR" NAME=CLA></TD>
</TR>
</TABLE></CENTER>
</form></body></HTML>

Java Servlet Code:

import java.io.*; import
javax.servlet."; import
javax.servlet.http.*;
public class servlet1 extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException, IOException
{
res.setContentType("text/html"); PrintWriter pw=res.getWriter();
String admin=req.getParameter("username"); String pass=req.getParameter("password"); pw.println(admin);
pw.println(pass);
if((admin.equals("admin2010")) && (pass.equals("abc123")))
{
pw.println("Authorized user");
}
else
{
pw.println("not an Authorized user");
}
}
}

23
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex.No.:5(b)
SESSION TRACKING USING HIDDEN FORM FIELDS AND SESSION TRACKING FOR
Date:
A HIT COUNT

AIM:

To implement a basic login form using java servlets.

ALGORITHM:

Step 1: Start the program by creating a html file named ‘index.html’.

Step 2: Create a form element in this file and create two input fields-‘Name’ and
‘Password’. Step 3: Add the ‘Submit’ button to the form.
Step 4: Create a Java servlet class named ‘First’ that override the ‘doPost’ method to retrieve the
‘HttpServletRequest’ & ‘HttpServletResponse’ objects.
Step 5: Create a ‘PrintWriter’ object to write the response and to retrieve it also generate a new HTML form
dynamically using this object.
Step 6: Create a another Java servlet class named ‘Second’ that override the ‘doGet’ method and writea
welcome message to the respose.
Step 7: Create a deployment descriptor file name ‘web.xml’
Step 8: Configure the servlets and servlets mappings in the ‘web.xml’
file. Step 9: Specify the ‘index.html’ file as the welcome file in the
‘web.xml’ file.
Step 10: Deploy the web application to a servlet container and start the servlet container.
Step 11: End the program and access the web application in a browser to interact with the login.

PROGRAM:

index.html

<form method="post" action="validate"> Name:<input type="text" name="user" /><br/> Password:<input

type="text" name="pass"><br/>
<input type="submit" value="submit">
</form>

24
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

web.xml
<web-app...>
<servlet>
<servlet-name>First</servlet-name>
<servlet-class>First</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>First</servlet-name>
<url-pattern/First</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Second</servlet-name>
<servlet-class>Second</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Second</servlet-name>
<url-pattern>/Second</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

25
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

First.java

import java.io.*; import

javax.servlet.*; import
javax.servlet.http.*;
public class First extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException
{
response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter();
//getting value submitted in form from HTML file
String user = request.getParameter("user");
//creating a new hidden form field
out.println("<form
action="Second">");
out.println("<input type='hidden' name=’user’
value=’"+user+’">" out.println("<input type=’submit’
value=’submit’>"); out.println("</form>");
}}

26
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Second.java

import java.io.*; import

javax.servlet.*; import
javax.servlet.http.*;
public class Second extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//getting parameter from the hidden
field String user =
request.getParameter("user");
out.println("Welcome "+user);
}}

RESULT:

Thus, the servlet program has been created and validated successfully.

27
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:6 CREATION OF INFORMATION RETRIEVAL SYSTEM USING WEB, PHP AND MYSQL
Date:

AIM:

To create an information retrieval system using web, PHP and MySQL.

ALGORITHM:

Step 1: Start a PHP session and connect to the MySQL database.

Step 2: If the form is submitted, retrieve the values and insert them into the “data” table.
Step 3: Close the database connection.
Step 4: Begin the HTML document and set the character encoding and title.
Step 5: Define a JavaScript function to display an alert message.
Step 6: Create a form with input fields form name and feedback.
Step 7: Capture the user input and submit the form to the same page.
Step 8: Create the database and table to store the feedback data.
Step 9: Retrieve the data from the database and store it in an array.
Step 10: Display the data in an HTML table.

PROGRAM:

<?php session_start();
// connect to mysql
$con= mysqli_connect("localhost", "root", "", "feedback");
//In case of failure connection If(!$con)
{
die("Server could not connected");
}
if(isset($_POST["btn"]))
{
$name=$_POST["name"];

28
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

$feed=$_POST["feed"];
//mysql insert query
$sql="insert into data values(’’’.$name.’’’,’’’.$feed.’’’)";
$n=mysqli_query($con,$sql);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a
href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/ 1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feedback | Ashok Kumar |</title>
<meta name="distribution" content="global" />
<meta name="language" content="En" />
</head>

<script>
// function for creating alert after submission of feedback function check()
{
alert(‘Thank you for your feedback.’);
}
</script>
<div class="container">
<form id="contact" action="" method="post">
<h3>Feedback Form</h3>

29
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<h4>"The key to learning is feedback. It is nearly impossible to learn anything without it"</h4>
<fieldset>
<input placeholder = "Your name" type="text" name="name" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<textarea placeholder="Write Something about me.." name="feed"tabindex="5"
requiredautofocus></textarea>
</fieldset>
<fieldset>
<input type="submit" name="btn" value="Submit" onclick="check()">
</fieldset>
</form>
</div>

Create the database, and then create the table for data.
Enter the rows in the table. You have to connect to the database. Now we understand each and every step
as shown below.

Example 1: In this. We use PHPMyAdmin for the database handling. Start the server in the XAMPP as shown
in the below image
Making sure that both Apache and MySQL are showing green color, means that the server is working.

XAMPP PANEL

After that create the database in the PHPMyAdmin. Open the below URL.
http://localhost/phpmyadmin/index.php
CREATE TABLE student (name varchar (20),
branch varchar (20), roll_no INT);

30
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Enter the data in the table.

INSERT INTO ‘student’ ('name', 'branch", "roll_no') VALUES ('Rohan', 'CSE', 'I');
After entering the data in the table

PHP Code: Run the PHP script as shown below to fetch the data from the database.

PHP
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname="gfg":
// connect the database with the server
$conn = new mysqli($servername, $username, $password,$dbname);
// if error occurs
if ($conn->connect_errno)
{
echo "Failed to connect to MySQL:".$conn->connect_error; exit();
}
$sql = "select * from student";
$result = ($conn->query($sql));
//declare array to store the data of database
$row = [];
if ($result->num_rows > 0)
{
// fetch all data from db into array
$row=$result->fetch_all(MYSQLI_ASSOC);
}
?>

31
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<!DOCTYPE html>
<html>
<style> td,th{
border: 1px solid black; padding:
10px; margin: 5px;
text-align: center;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Roll Number</th>
</tr>
</thead>
<tbody>
<?php if(!empty($row)) foreach($row as $rows)
{
?>
<tr>
<td><?php echo $rows['name']; ?></td>
<td><?php echo $rows['branch']; ?></td>
<td><?php echo $rows['roll_no']; ?></td>
</tr>

32
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<?php } ?>
</tbody>
</table>
</body>
</html>
<?php mysqli_close($conn);
?>

RESULT:

Thus, the information retrieval system has been created and executed successfully.

33
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Ex. No:7 CREATION OF PERSONAL INFORMATION SYSTEM

Date:

AIM:

To create a Personal information system for managing employee records.

ALGORITHM:

Step 1: Start the program by defining the HTML structure with necessary tags and elements.
Step 2: Include CSS stylesheets to style the elements on the page.
Step 3: Create a flex container with two flex child elements – one for the form and another is for displaying
records.
Step 4: Inside the forms, create input fields for name, city and salary.
Step 5: Add a submit button to the form and attach an event listener to it.
Step 6: Implement the JavaScript function ‘onFormSubmit()’ to handle the form submission.
Step 7: Inside ‘onFormSubmit()’, read the form data and store it in an object.
Step 8: If no row is selected (insert mode), insert a new row in the table and display the
data. Step 9: If a row is selected (edit mode), update the selected row with the new data.
Step 10: Implement additional functions to handle editing and deleting records, such as ‘onEdit()’ and
‘onDelete()’.
Step 11: Step the program.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Operation</title>

34
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

<link rel="stylesheet" href="./Crud.css">

</head>
<body>
<div class="flex-container">
<div class="flex-child magenta">
<table class="table">
<tr class="table-row">
<td>
<form onsubmit="event.preventDefault(); onFormSubmit();">
<div class="container">
<hl id="heading1">Register</h1>
<p id="pl">Please fill this form to create a Record. </p>
<hr>
<label id="label" for = "Emp-Name"><b>Emp-Name</b></label>
<input type="text" placeholder="Enter Name" name="name" id="name" required>
<label id="label" for="City"><b>City</b></label>
<input type="text" placeholder="Enter City" name="city" id="city" required>
<label id="label" for = "salary"><b>Salary</b></label>
<input type="number" name="salary" id="salary"placeholder="Salary" required>
<hr>
<!- <p>By creating an account you agree to our <a href="#">Terms &Privacy</a></p> ->
<button type="submit" name="submit" class="registerbtn">Submit</button>
</div>
</form>
</td>
</tr>

35
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

</table>
</div>
<div class="flex-child green">
<td>
<table id="empList">
<hl id="record">Record</h1>
<thead id="tab_head">
<tr>
<th>Emp-Name</th>
<th>City</th>
<th>Salary</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id-"tab_body">
</tbody>
</table>
</td>
</div>
</div>
<script src="./Crud.js"></script>
</body>
</html>

36
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

Crud.css
*{
box-sizing:border-box;
}
.flex-container { display: flex;
}
.flex-child { flex: 1;
text-align: -webkit-center;
border: 2px solid rgb(255, 162, 162);
}
.flex-child:first-child { margin-right: 20px;
}
.container { padding: 16px;
}
input[type="text"], input[type="text"] { width: 100%; padding: 15px; margin: 5px 0 22px 0;display: inline-
block; border: none; background: #flflfl;
}
input[type="number"]:focus, input[type="number"]:focus { background-color: #ddd; outline: none;
}
#heading1 { margin-top: 0px; text-align: center; font-size: 40px;
} #p1{
margin-top: 0px; text-align: center; font-size: 20px;
}
#label {
font-size: 22px;
}

37
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

#salary {
border: 1px inherit; border-radius: 30px; font-size: 18px; height: 30px;
color: black;
justify-content: space-between;
}
hr {
border: 1px solid #fiflfl; margin-bottom: 25px;
.registerbtn {
background-color: #04aa6d; color: white;
padding: 16px 20px; margin: 8px 0; border:
none; cursor: pointer; width:
100%; opacity: 0.9; height: 50px;
border-radius: 30px; font-size: 20px;
}
.registerbtn:hover { opacity: 1;
}
a{
color: dodgerblue; cursor: pointer;
}
background-color: #fififl; text-align: center;
}
#empList, th,
td {
border: 2px solid rgb(214, 130, 130); border-collapse: collapse;
}
th,

38
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

td {
padding: 10px;
}
th {
background-color: rgb(175, 173, 173);
}
#empList#alter tr:nth-child(even) { background-color: rgb(230, 89, 89);
}
#empList#alter tr:nth-child(odd) { background-color: rgb(197, 38, 38);
}
#empList#alter th{ color: white; background-color: gray;
#record { display: flex;
justify-content: center;
}

Crud.js
let selectRow = null; function onFormSubmit()
{ let formData = readFormData();
if (selectRow == null) insertNewRecord(formData); else updateRecord(formData);
resetForm();
}
function readFormData() { var formData = {};
formData["name"]= document.getElementById("name").value; formData["city"] =
document.getElementById("city").value; formData["salary"] = document.getElementById("salary").value;
// console.log(formData); return formData;
}
function insertNewRecord(data) { let table = document

39
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

.getElementById("empList")
.getElementsByTagName("tbody")[0];
let newRow = table.insertRow(table.length); cell1 = newRow.insertCell(0); cell1.innerHTML = data.name;
cell2 = newRow.insertCell(1); cell2.innerHTML = data.city; cell3 = newRow.insertCell(2); cell3.innerHTML =
data.salary; cell4= newRow.insertCell(3);
cell4.innerHTML=’<a onclick="onEdit(this)">Edit</a>'; cell5= newRow.insertCell(4);
cell5.innerHTML = ‘<a onclick="onDelete(this)">Delete</a>';
}
function resetForm() { document.getElementById("name").value = "";
document.getElementById("city").value=””; document.getElementById("salary").value = ""; selectRow =
null;
function on Edit(td) { selectRow=td.parentElementparentElement;
document.getElementById(name").value=selectRow.cells[0].innerHTML;
document.getElementById("city").value = selectRow.cells[1].innerHTML;
document.getElementById("salary").value = selectRow.cells[2].innerHTML;
}
function updateRecord(formData) { selectRow.cells[0].innerHTML = formData.name;
selectRow.cells[1].innerHTML = formData.city; selectRow.cells[2].innerHTML = formData.salary;
}
function onDelete(td) {
if (confirm ("Are you want to delete this record?")) {row = td.parentElement.parentElement;
document.getElementById("empList").deleteRow(row.ro wIndex); resetForm();
}
}

RESULT:

Thus, the program is created a Personal information system for managing employee records successfully

40
Downloaded by saranya s ([email protected])
 lOMoARcPSD|57062442

41
Downloaded by saranya s ([email protected])