WEB TECHNOLOGY

LAB MANUAL

Year: 2023 - 2024

Course Code: KCS652
Semester: VI
Branch: CSE

SHEAT GROUP OF INSTITUTIONS

Prepared by:

Mr. Kanojiya Babalu Rajendra

(Assistant Professor)
 COURSE OUTCOMES
B.TECH - COURSE OUTCOMES (COS)
CO-1 Develop static web pages using HTML.

CO-2 Develop Java programs for window/web-based applications.

CO-3 Design dynamic web pages using JavaScript and XML.

CO-4 Design dynamic web page using server site programming Ex. ASP/JSP/PHP

CO-5 Design server site applications using JDDC, ODBC and section tracking API

2 | Page
 INDEX
S.No Experiment Program Outcomes Attained
WEEK-l Write HTML/Java scripts to display CO1
your CV in navigator, your Institute
website, Department Website and
Tutorial website for specific subject.

WEEK-2 Write an HTML program to design an CO1

entry form of student details and send
it to store at database server like SQL,
Oracle or MS Access.

WEEK-3 Write programs using Java script for CO2

Web Page to display browsers
information
WEEK-4 Write a Java applet to display the CO2
Application Program screen i.e.
calculator and other.

WEEK-5 Writing program in XML for creation CO3

of DTD, which specifies set of rules.
Create a style sheet in CSS/ XSL &
display the document in internet
explorer.

WEEK-6 Program to illustrate JDBC CO4

connectivity. Program for maintaining
database by sending queries. Design
and implement a simple servlet book
query with the help of JDBC & SQL.
Create MS Access Database, Create on
ODBC link, Compile & execute JAVA
JDVC Socket.

WEEK-7 Install TOMCAT web server and CO4

APACHE. Access the above
developed static web pages for
books web site, using these servers
by putting the web pages
developed.

WEEK-8 Assume four users user1, user2, CO4

user3 and user4 having the
passwords pwd1, pwd2, pwd3 and
pwd4 respectively. Write a servlet for
doing the following. Create a
3 | Page
 Cookie and add these four-user id’s
and passwords to this Cookie.
2.Read the user id and passwords
entered in the Login form and
authenticate with the values
available in the cookies

WEEK-9 Install a database (MySQL or CO5

Oracle). Create a table which
should contain at least the
following fields: name, password,
email-id, phone number Write a
java program/servlet/JSP to connect
to that database and extract data
from the tables and display them.
Insert the details of the users who
register with the web site, whenever
a new user clicks the submit button
in the registration page.

WEEK-10 Write a JSP which insert the details CO5

of the 3 or 4 users who register with
the web site by using registration
form. Authenticate the user when he
submits the login form using the
user name and password from the
database

WEEK-11 Design and implement a simple CO6

shopping cart example with session
tracking API.

4 | Page
 SYLLABUS

WEB TECHNOLOGY
VI Semester: CSE / IT

Course Code Category Hours / Week Credits Maximum Marks

L T P C CIA SEE Total
KCS-652 Core - - 2 1 25 25 50

Contact Classes: Nil Tutorial Classes: Nil Practical Classes: 39 Total Classes: 39

OBJECTIVES:
The course should enable the students to:
Learn how to analyze a problem and design the solution for the problem.
To develop an ability to design and implement static and dynamic website.
Strengthen the ability to identify and apply the suitable algorithm for the given real-world problem.

Reference Books:

1.Burdman, Jessica, “Collaborative Web Development” Addison Wesley

2.Xavier, C, “Web Technology and Design” , New Age International
3.Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB Publication
4.Bhave, “Programming with Java”, Pearson Education
5.Herbert Schieldt, “The Complete Reference:Java”, McGraw Hill.
Web References:

https://www.collegesidekick.com/study-docs/1459372
https://www.juet.ac.in/Department/CSE/WTechLab.php

5 | Page
 SOFTWARE AND HARDWARE REQUIREMENTS FOR A BATCH OF STUDENTS:

HARDWARE:
Desktop Computer Systems

SOFTWARE:
Application Software: Eclipse editor

6 | Page
 WEEK-1
Experiment - 1

OBJECTIVE:
HTML/Java scripts to display your CV in navigator, your Institute website, Department Website and Tutorial
website for specific subject

SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your CV</title>
<style>
body
{
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
section
{
margin-bottom: 20px;
}
button
{
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>Varun Chauhan</h1>
<h1>2101921530189</h1>
<p>Email: [email protected] | Phone: +91-9958401560</p>
</header>
<section>
<h2>Education</h2>
<p>AKTU university, Btech(IT), 2021-25</p> </section>
<section>
<h2>Work Experience</h2>
<p>Intern, IBM, oct 2023- nov 2023</p>

7 | Page
 <ul>
<li>ML engineer</li>
<li>Data science</li>
</ul>
</section>
<section>
<h2>Skills</h2>
<ul>
<li>Java Programing</li>
<li>Machine learning</li>
<li>Artificial Intelligence</li>
</ul>
</section>
<button onclick="toggleSection('additionalInfo')">Show Additional Information</button>
<section id="additionalInfo" style="display: none;">
<h2>Additional Information</h2>
<p>Any other details you want to include.</p>
</section>
<script> function toggleSection(sectionId)
{ var section = document.getElementById(sectionId); if (section.style.display === 'none')
{ section.style.display = 'block'; } else { section.style.display = 'none'; }
}
</script>
</body>
</html>

OUTPUT

8 | Page
 WEEK-2
Experiment - 2

OBJECTIVE:
Write an HTML program to design an entry form of student details and send it to store at database server
like SQL, Oracle or MS Access

SOURCE CODE:
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>STUDENT DETAILS ENTRY FORM</TITLE>
<STYLE>
BODY
{
FONT-FAMILY: ARIAL, SANS-SERIF;
MARGIN: 20PX;
}
FORM
{
MAX-WIDTH: 400PX;
MARGIN: 0 AUTO;
}
LABEL
{
DISPLAY: BLOCK;
MARGIN-BOTTOM: 8PX;
}
INPUT, SELECT
{
WIDTH: 100%;
PADDING: 8PX;
MARGIN-BOTTOM: 12PX;
BOX-SIZING: BORDER-BOX;
}
BUTTON
{
BACKGROUND-COLOR: #4CAF50;
COLOR: WHITE;
PADDING: 10PX 15PX;
BORDER: NONE;
BORDER-RADIUS: 4PX;
CURSOR: POINTER;
}
</STYLE>

9 | Page
 </HEAD>
<BODY>
<H1>VARUN CHAUHAN</H1>
<H1>2101921530189</H1>
<H2>STUDENT DETAILS ENTRY FORM</H2>
<FORM ID="STUDENTFORM" ONSUBMIT="SUBMITFORM(EVENT)">
<LABEL FOR="STUDENTNAME">NAME:</LABEL>
<INPUT TYPE="TEXT" ID="STUDENTNAME" NAME="STUDENTNAME" REQUIRED>
<LABEL FOR="STUDENTAGE">AGE:</LABEL>
<INPUT TYPE="NUMBER" ID="STUDENTAGE" NAME="STUDENTAGE" REQUIRED>
<LABEL FOR="STUDENTGENDER">GENDER:</LABEL>
<SELECT ID="STUDENTGENDER" NAME="STUDENTGENDER" REQUIRED>
<OPTION VALUE="MALE">MALE</OPTION>
<OPTION VALUE="FEMALE">FEMALE</OPTION>
<OPTION VALUE="OTHER">OTHER</OPTION>
</SELECT>
<BUTTON TYPE="SUBMIT">SUBMIT</BUTTON>
</FORM>
<SCRIPT>
FUNCTION SUBMITFORM(EVENT)
{
EVENT.PREVENTDEFAULT();
// PREVENT THE FORM FROM SUBMITTING NORMALLY
// GET FORM DATA
VAR FORMDATA = NEW FORMDATA(DOCUMENT.GETELEMENTBYID('STUDENTFORM'));
VAR DATA = {};
FORMDATA.FOREACH(FUNCTION(VALUE, KEY)
{ DATA[KEY] = VALUE; });
// SEND DATA TO THE SERVER (SERVER-SIDE PROCESSING NEEDED) CONSOLE.LOG('STUDENT DETAILS:',
DATA);
// YOU NEED TO SEND THIS DATA TO YOUR SERVER USING AJAX OR FORM SUBMISSION
// SERVER-SIDE CODE WILL HANDLE DATABASE OPERATIONS (INSERT INTO SQL, ORACLE, MS ACCESS, ETC.)
}
</SCRIPT>
</BODY>
</HTML>
OUTPUT

10 | Page
 WEEK-3
Experiment - 3

OBJECTIVE:
Write programs using Java script for Web Page to display browsers information.

SOURCE CODE:
<!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>BROWSER INFORMATION</TITLE>
<STYLE>
BODY { FONT-FAMILY: ARIAL, SANS-SERIF; TEXT-ALIGN: CENTER; MARGIN: 50PX; } </STYLE>
</HEAD>
<BODY>
<H1>VARUN CHAUHAN</H1>
<H1>2101921530189</H1>
<H2>BROWSER INFORMATION</H2>
<SCRIPT> // FUNCTION TO GET BROWSER INFORMATION FUNCTION GETBROWSERINFO()
{ VAR BROWSERINFO = { NAME: '', VERSION: '', USERAGENT: '' }; VAR USERAGENT =
NAVIGATOR.USERAGENT;
IF (USERAGENT.INDEXOF('FIREFOX') !== -1)
{ BROWSERINFO.NAME = 'MOZILLA FIREFOX'; BROWSERINFO.VERSION = USERAGENT.SPLIT('FIREFOX/')[1];
}
ELSE IF (USERAGENT.INDEXOF('CHROME') !== -1)
{ BROWSERINFO.NAME = 'GOOGLE CHROME';
BROWSERINFO.VERSION = USERAGENT.SPLIT('CHROME/')[1].SPLIT(' ')[0]; }
ELSE IF (USERAGENT.INDEXOF('SAFARI') !== -1)
{ BROWSERINFO.NAME = 'SAFARI'; BROWSERINFO.VERSION = USERAGENT.SPLIT('VERSION/')[1].SPLIT(' ')[0];
}
ELSE IF
(USERAGENT.INDEXOF('MSIE') !== -1 || USERAGENT.INDEXOF('TRIDENT/') !== -1)
{ BROWSERINFO.NAME = 'INTERNET EXPLORER'; BROWSERINFO.VERSION = USERAGENT.INDEXOF('MSIE')
!== -1 ? USERAGENT.SPLIT('MSIE ')[1].SPLIT(';')[0] : USERAGENT.SPLIT('RV:')[1].SPLIT(')')[0]; }
ELSE
{
BROWSERINFO.NAME = 'UNKNOWN BROWSER'; BROWSERINFO.VERSION = 'N/A'; }

BROWSERINFO.USERAGENT = USERAGENT; RETURN BROWSERINFO; }

// DISPLAY BROWSER INFORMATION ON THE PAGE VAR BROWSERINFO = GETBROWSERINFO();
DOCUMENT.WRITE('<P><STRONG>BROWSER NAME:</STRONG> ' + BROWSERINFO.NAME + '</P>');
DOCUMENT.WRITE('<P><STRONG>BROWSER VERSION:</STRONG> ' + BROWSERINFO.VERSION + '</P>');
DOCUMENT.WRITE('<P><STRONG>USER AGENT:</STRONG> ' + BROWSERINFO.USERAGENT + '</P>');
</SCRIPT>
</BODY>
</HTML

11 | Page
 OUTPUT

12 | Page
 WEEK-4
Experiment - 4

OBJECTIVE:
Write a Java applet to display the Application Program screen i.e. calculator and other.

SOURCE CODE:
<!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>CALCULATOR</TITLE>
<STYLE> BODY
{ FONT-FAMILY: ARIAL, SANS-SERIF; TEXT-ALIGN: CENTER; MARGIN: 50PX; } #CALCULATOR
{ WIDTH: 300PX; MARGIN: 0 AUTO; PADDING: 10PX; BORDER: 1PX SOLID #CCC; BORDER-RADIUS: 5PX; }
INPUT
{ WIDTH: 100%; MARGIN-BOTTOM: 10PX; PADDING: 5PX; BOX-SIZING: BORDER-BOX; }
</STYLE>
</HEAD>
<BODY>
<H1>VARUN CHAUHAN</H1>
<H1>2101921530189</H1>
<H2>CALCULATOR</H2>
<DIV ID="CALCULATOR">
<INPUT TYPE="TEXT" ID="DISPLAY" READONLY> <BR> <BUTTON
ONCLICK="APPENDTODISPLAY('1')">1</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('2')">2</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('3')">3</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('+')">+</BUTTON> <BR> <BUTTON
ONCLICK="APPENDTODISPLAY('4')">4</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('5')">5</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('6')">6</BUTTON>
<BUTTON ONCLICK="APPENDTODISPLAY('-')">-</BUTTON> <BR> <BUTTON
ONCLICK="APPENDTODISPLAY('7')">7</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('8')">8</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('9')">9</BUTTON> <BUTTON
ONCLICK="APPENDTODISPLAY('*')">*</BUTTON> <BR> <BUTTON
ONCLICK="APPENDTODISPLAY('0')">0</BUTTON> <BUTTON
ONCLICK="CLEARDISPLAY()">C</BUTTON>
<BUTTON ONCLICK="CALCULATERESULT()">=</BUTTON>
<BUTTON ONCLICK="APPENDTODISPLAY('/')">/</BUTTON>
</DIV> <SCRIPT> FUNCTION APPENDTODISPLAY(VALUE)
{ DOCUMENT.GETELEMENTBYID('DISPLAY').VALUE += VALUE; }
FUNCTION CLEARDISPLAY()
{ DOCUMENT.GETELEMENTBYID('DISPLAY').VALUE = ''; }
13 | Page
 FUNCTION CALCULATERESULT()
{ VAR DISPLAY = DOCUMENT.GETELEMENTBYID('DISPLAY');
TRY { DISPLAY.VALUE = EVAL(DISPLAY.VALUE); }
CATCH (ERROR)
{DISPLAY.VALUE = 'ERROR'; }
}
</SCRIPT>
</BODY>
</HTML>

OUTPUT

14 | Page
\
WEEK-5
Experiment - 5

OBJECTIVE:
Writing program in XML for creation of DTD, which specifies set of rules. Create a style sheet in CSS/
XSL & display the document in internet explorer.

SOURCE CODE:
XML FILE
<?XML VERSION="1.0" ENCODING="UTF-8"?>
<!DOCTYPE LIBRARY SYSTEM "LIBRARY.DTD">
<LIBRARY>
<BOOK>
<TITLE>INTRODUCTION TO XML</TITLE>
<AUTHOR>JOHN DOE</AUTHOR>
<YEAR>2022</YEAR>
</BOOK>
<BOOK>
<TITLE>WEB DEVELOPMENT WITH CSS</TITLE>
<AUTHOR>JANE SMITH</AUTHOR>
<YEAR>2021</YEAR>
</BOOK>
</LIBRARY>
DTD
<!ELEMENT BOOKSTORE (BOOK+)>
<!ELEMENT BOOK (TITLE, AUTHOR, PRICE)>
<!ELEMENT TITLE (#PCDATA)>
<!ELEMENT AUTHOR (#PCDATA)>
<!ELEMENT PRICE (#PCDATA)>
XSLT
<?XML VERSION="1.0" ENCODING="UTF-8"?>
<XSL:STYLESHEET VERSION="1.0" XMLNS:XSL="HTTP://WWW.W3.ORG/1999/XSL/TRANSFORM">
<XSL:TEMPLATE MATCH="/">
<HTML>
<HEAD>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLE.CSS" />
</HEAD>
<BODY>
<H1>VARUN CHAUHAN</H1>
<H1>2101921530189</H1>
<H1>LIBRARY CATALOG</H1>
<XSL:APPLY-TEMPLATES/>
</BODY>
</HTML>
</XSL:TEMPLATE>

15 | Page
 <XSL:TEMPLATE MATCH="LIBRARY">
<UL> <XSL:APPLY-TEMPLATES/> </UL>
</XSL:TEMPLATE>
<XSL:TEMPLATE MATCH="BOOK">
<LI> <XSL:APPLY-TEMPLATES/> </LI>
</XSL:TEMPLATE>
<XSL:TEMPLATE MATCH="TITLE">
<H2><XSL:VALUE-OF SELECT="."/></H2>
</XSL:TEMPLATE>
<XSL:TEMPLATE MATCH="AUTHOR">
<P><STRONG>AUTHOR:</STRONG> <XSL:VALUE-OF SELECT="."/></P>
</XSL:TEMPLATE>
<XSL:TEMPLATE MATCH="YEAR">
<P><STRONG>YEAR:</STRONG> <XSL:VALUE-OF SELECT="."/></P>
</XSL:TEMPLATE>
</XSL:STYLESHEET>
CSS
BODY
{
FONT-FAMILY: ARIAL, SANS-SERIF;
MARGIN: 20PX;
}
H1
{
COLOR: #0066CC;
}
UL
{
LIST-STYLE-TYPE: NONE; PADDING: 0;
}
LI
{
MARGIN-BOTTOM: 20PX;
BORDER: 1PX SOLID #DDD;
PADDING: 10PX;
}
H2
{
COLOR: #333;
}
P
{
MARGIN: 5PX 0;
}
HTML
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<TITLE>LIBRARY CATALOG</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT"

16 | Page
 SRC="HTTPS://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.7.1/JQUERY.MIN.JS">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
$(DOCUMENT).READY(FUNCTION () { $.GET('EXAMPLE.XML', FUNCTION (DATA) { VAR XSLTPROCESSOR =
NEW XSLTPROCESSOR();
VAR XSLSTYLESHEET = LOADXMLDOC('STYLE.XSL');
XSLTPROCESSOR.IMPORTSTYLESHEET(XSLSTYLESHEET); }); }); VAR RESULTDOCUMENT =
XSLTPROCESSOR.TRANSFORMTODOCUMENT(DATA); DOCUMENT.BODY.INNERHTML = NEW
XMLSERIALIZER().SERIALIZETOSTRING(RESULTDOCUMENT); FUNCTION LOADXMLDOC(FILENAME)
{ VAR XHTTP = NEW XMLHTTPREQUEST(); XHTTP.OPEN("GET", FILENAME, FALSE); XHTTP.SEND();
RETURN XHTTP.RESPONSEXML; }
</SCRIPT>
</BODY>
</HTML>

OUTPUT

17 | Page
 WEEK-6
Experiment - 6

OBJECTIVE:
Program to illustrate JDBC connectivity. Program for maintaining database by sending queries.

SOURCE CODE:

importjava.sql.*;
importjava.util.*;
class Main
{
public static void main(String a[])
{
//Creating the connection
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String user = "system";
String pass = "12345";
//Entering the data
Scanner k = new Scanner(System.in);
System.out.println("enter name");
String name = k.next();
System.out.println("enter roll no");
int roll = k.nextInt();
System.out.println("enter class");
String cls = k.next();
//Inserting data using SQL query
String sql = "insert into student1 values('"+name+"',"+roll+",'"+cls+"')";
Connection con=null;
try
{
DriverManager.registerDriver(new oracle.jdbc.OracleDriver());
//Reference to connection interface
con = DriverManager.getConnection(url,user,pass);
Statement st = con.createStatement();
int m = st.executeUpdate(sql);
if (m == 1)
System.out.println("inserted successfully : "+sql);
else
System.out.println("insertion failed");
con.close();
}
catch(Exception ex)
{
System.err.println(ex);
}
}
}

18 | Page
 OUTPUT

19 | Page
 WEEK-7
Experiment - 7

OBJECTIVE:
Install APACHE TOMCAT web server. Access thestatic web pages for login id, using this server.

SOURCE CODE:
<body>
<h2 align="center">Sign in</h2>
<form method="get" action="http://localhost:8888/india/Login.jsp">
<h3>
Enter ID <input type="text" name="t1"> <br>
Enter Password <input type="password" name="t2"> <br>
<input type="submit" value="Sign in">
</h3>
</body>
In the action attribute Login.jsp file is given to invoke. Assume localhost is the server. The
port number on which Tomcat is running is 8888. india is the folder created in Tomcat. The
attribute method can be given two values of either get or post; here, get is given.
Following is the server-side JSP file that includes a Scriptlet to understand what and how to
code Scriptlet.
File Name: Login.jsp
<body>
<h2 align="center">Log in Validation </h2>
<%
String str1=request.getParameter("t1");
String str2=request.getParameter("t2");
if(str1.equalsIgnoreCase("snrao") && str2.equals("java"))
{
out.println("<h3>Your Login is Successful</h3>");
}
else
{
out.println("<h3>Sorry, your Login is Failed</h3>");
}
%>
</body>

20 | Page
 OUTPUT:
Screenshot of HTML file SignIn.html when values are entered.

Screenshot of response when correct values are entered.

Screenshot of response when wrong values are entered.

21 | Page
 WEEK-8
Experiment - 8

OBJECTIVE:
Create a Cookie and add four user id’s and passwords to this Cookie.

SOURCE CODE:

<form action="servlet1" method="post">

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 doPost(HttpServletRequest request, HttpServletResponse response){
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String n=request.getParameter("userName");
out.print("Welcome "+n);
Cookie ck=new Cookie("uname",n);//creating cookie object
response.addCookie(ck);//adding cookie in the response
//creating submit button
out.print("<form action='servlet2'>");
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 doPost(HttpServletRequest request, HttpServletResponse response){
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Cookie ck[]=request.getCookies();
out.print("Hello "+ck[0].getValue());
out.close();
}catch(Exception e){System.out.println(e);}
}

22 | Page
 }
web.xml
<web-app>
<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>
</web-app>
OUTPUT:

23 | Page
24 | Page
 WEEK-9
Experiment - 9

OBJECTIVE:
Install a database (Mysql or Oracle). Create a table which should contain at least the following fields:
name, password,email-id, phone number Write a java program/servlet/JSP to connect to that database
and extract data from the tablesand display them. Insert the details of the users who register with the web
site, whenever a new user clicks the submitbutton in the registration page.

SOURCE CODE:
Retrieve.jsp
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%
String id = request.getParameter("userid");
String driver = "com.mysql.jdbc.Driver";
String connectionUrl = "jdbc:mysql://localhost:3306/";
String database = "test";
String userid = "root";
String password = "";
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
Connection connection = null;
Statement statement = null;
ResultSet resultSet = null;
%>
<!DOCTYPE html>
<html>
<body>
<h1>Retrieve data from database in jsp</h1>
<table border="1">
<tr>
<td>first name</td>
\<td>last name</td>
<td>City name</td>
<td>Email</td>
</tr>
<%
try{
connection = DriverManager.getConnection(connectionUrl+database, userid, password);
statement=connection.createStatement();
String sql ="select * from users";
resultSet =statement.executeQuery(sql);

25 | Page
 while(resultSet.next()){
%>
<tr>
<td><%=resultSet.getString("first_name") %></td>
<td><%=resultSet.getString("last_name") %></td>
<td><%=resultSet.getString("city_name") %></td>
<td><%=resultSet.getString("email") %></td>
</tr>
<%
}
connection.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
</table>
</body>
</html>

After retrieve the data from the data base the table look like this.

26 | Page
 WEEK-10
Experiment - 10

OBJECTIVE:
Write a JSP which insert the details of the 3 or 4 users who register with the web site by using registration
form.Authenticate the user when he submits the login form using the user name and password from the
database.

SOURCE CODE:

Register_1.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Guru Registration Form</title>
</head>
<body>
<h1>Guru Register Form</h1>
<form action="guru_register" method="post">
<table style="with: 50%">
<tr>
<td>First Name</td>
<td><input type="text" name="first_name" /></td>
</tr>
<tr>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="last_name" /></td>
<td>UserName</td>
/></td>
</tr>
<tr>
<td><input type="text" name="username" /></td>
<td>Password</td>
<td><input type="password" name="password"
</tr>
<tr>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" /></td>
<td>Contact No</td>
<td><input type="text" name="contact" /></td>

27 | Page
 </body>
</html>
</tr></table>
<input type="submit" value="Submit" /></form>

Explanation of the code:

Code Line 11: Here we are taking a form name which has action i.e. the servlet to which
the request will be processed and servlet name is guru_register.java. The request will be
processed through POST method.
Code Line 14-16: Here we are taking input type as text and name is first name
Code Line 18-20: Here we are taking input type as text and name is last name
Code Line 22-24: Here we are taking input type as text and name is username
Code Line 26-28: Here we are taking input type as password(this will hide the password
when typed) and name as password
Code Line 30-32: Here we are taking input type as text and name as address
Code Line 34-36: Here we are taking input type as text and name as contact
Code Line 37: Here we are taking a button of type submit and value is also submit. On
click of this button the action will go to corresponding guru_register servlet where all the
parameter values will be passed in the request.

Guru_register.java

package demotest;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class guru_register
*/
public class guru_register extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String first_name = request.getParameter("first_name");
String last_name = request.getParameter("last_name");
String username = request.getParameter("username");
String password = request.getParameter("password");
String address = request.getParameter("address");
String contact = request.getParameter("contact");
if(first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() ||
password.isEmpty() || address.isEmpty() || contact.isEmpty())
{
RequestDispatcher req =
request.getRequestDispatcher("register_1.jsp");
req.include(request, response);
}

28 | Page
 else
{
RequestDispatcher req =request.getRequestDispatcher("register_2.jsp");
req.forward(request, response);
}
}
}

Explanation of code:

Code Line 14: Here we defining guru_servlet which is extending HttpServlet.

Code Line 18: This action doPost() method which will be called when we mention POST
in action attribute in the above JSP form.
Code Line 20-25:Here we are fetching the values from request i.efirst_name, last_name ,
username, password, address and contact using request.getParameter.
Code Line 27-32: Here we are taking if condition where we check any of the parameters
which are fetched from request as whether they are empty or not. If any of the parameter
is empty then it will enter this condition ( first_name.isEmpty() || last_name.isEmpty ||
username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) and we
have to fetch RequestDispatcher object using request object which will forward request to
register_1.jsp. Here we are also including request and response objects.
Code Line 33-37: This case will execute when any of the parameter is not empty .We
will have to fetch requestDispatcher object using request object which will forward
request to register_2.jsp.Here we are forwarding request and response objects.

Register_2.jsp

Explanation of the code:

Code Line 10: Here we are saying welcome user. This JSP will be called when all the
parameters are filled.

29 | Page
 OUTPUT

30 | Page
 WEEK-11
Experiment - 11

OBJECTIVE:
Design and implement a simple shopping cart example with session tracking API.

SOURCE CODE:

INPUT:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class ShoppingCartViewerSession 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(true);
// Cart items are maintained in the session object.
String[] items = (String[])session.getValue("cart.items");
out.println("<HTML><HEAD><TITLE>SessionTracker</TITLE></HEAD>");
out.println("<BODY><H1>Session Tracking Demo</H1>");
// Print the current cart items.
out.println("You currently have the following items in your cart:<BR>");
if (items == null) {
out.println("<B>None</B>");
}
else {
out.println("<UL>");
for (int i = 0; i < items.length; i++) {
out.println("<LI>" + items[i]);
}
out.println("</UL>");
}
// Ask if they want to add more items or check out.
out.println("<FORM ACTION=\"/servlet/ShoppingCart\" METHOD=POST>");
out.println("Would you like to<BR>");
out.println("<INPUT TYPE=submit VALUE=\" Add More Items \">");
out.println("<INPUT TYPE=submit VALUE=\" Check Out \">");
out.println("</FORM>");
// Offer a help page. Encode it as necessary.
out.println("For help, click <A HREF=\"" +
res.encodeUrl("/servlet/Help?topic=ShoppingCartViewer") +
"\">here</A>");
out.println("</BODY></HTML>");
}

31 | Page
 }

OUTPUT:
SessionTracker
Session Tracking Demo
currently have the following items in your cart:
APPLE
BANANA
MANGO
Would you like to Add More Items
Check Out

32 | Page