Scribd
Upload
16 views

Lab Manual WT

The document describes experiments related to web technologies like HTML, CSS, JavaScript, Java applets, XML and databases. The experiments include creating HTML forms, displaying browser information using JavaScript, making a basic calculator using Java applets and connecting to databases.

Uploaded by

Salu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Lab Manual WT

The document describes experiments related to web technologies like HTML, CSS, JavaScript, Java applets, XML and databases. The experiments include creating HTML forms, displaying browser information using JavaScript, making a basic calculator using Java applets and connecting to databases.

Uploaded by

Salu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

WEB TECHNOLOGY

(KCS-652)

LABORATORY MANUAL
FOR
Bachelor of Technology
In
Computer Science and Engineering
Session: 2023-2024

MGM'S COLLEGE OF ENGINEERING &


TECHNOLOGY
A-09 Sec-62 NOIDA U.P
LIST OF THE EXPERIMENTS
1. Write HTML/Java scripts to display your CV in navigator.

2. Write an HTML program to design an entry form of student details.

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

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

5. Writing program in XML for creation of DTD, which specifies set of rules.

6. Program to illustrate JDBC connectivity and maintaining database by sending queries.

7. Install APACHE TOMCAT web server. Access the static web pages for login id, using this server.

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

9. Write a java program/servlet/JSP to connect database and extract data from the tables and display them

10. Write a JSP which insert the details of the 3 or 4 users who register with the web site by using registration

form.

11. Design and implement a simple shopping cart example with session tracking API.
EXPERIMENT NO.-01

Write HTML/Java scripts to display your CV in navigator.


<!DOCTYPE html>
<html>
<head><title>Bio-Data</title>
</head>
<body>
<h1>Ayansh Goel</h1>
<h3>MGM Boys Hostel<br>MGMCoet, Noida<br>Phone
9999454637<br>[email protected]</h3>
<hr/>
<br>
<h2><b><u>Education</u></b></h2>
<table border=5px>
<tr>
<th>S.No.</th>
<th>Institute</th>
<th>Class</th>
<th>Year of passing</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>Central School</td>
<td>10th</td>
<td>2014</td>
<td>95.00</td>
</tr>
<tr>
<td>2</td>
<td>Central School</td>
<td>12th</td>
<td>2016</td>
<td>93.40</td>
</tr>
<tr>
<td>3</td>
<td>JSSATEN</td>
<td>B.Tech</td>
<td>2020</td>
<td>81.20</td>
</tr>
</table>
<hr>
<h2><b><u>Skills</u></b></h2>
<ol type="1">
<li>Web Design with HTML & CSS</li>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
<hr>
<h2><b><u>Experience</u></b></h2>
<ol type="1">
<li>Student Technology Intern for Wilton School District</li>
<li>Fresher</li>
<li>Did various internships</li>
</ol>
<hr>
<h2><b><u>Extracurricolars</u></b></h2>
<ol type="1">
<li>Recycling Club</li>
<li>College computer society Member</li>
<li>Old Books distribution Club</li>
</ol>
<hr>
<h2><b><u>Interests</u></b></h2>
<ol type="1">
<li>Football</li>
<li>Cricket</li>
<li>Programming</li>
<li>Music</li>
<li>Technology</li>
<li>Movies</li>
</ol>
<hr>
</body>
</html>
OUTPUT:
EXPERIMENT NO.-02

Write an HTML program to design an entry form of student details.


<!DOCTYPE html>

<html>

<head>

<title>registartion form</title>

<style>

table, th, td { border: 1px solid black; border-collapse: collapse;

th, td {

padding: 5px; text-align: center;

</style>

</head>

<body>

<h1 style="text-align: center">REGISTRATION FORM</h1>

<form>

<strong>First name:</strong><br>

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

<br>

<strong>Last name:</strong><br>

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

<br>

<strong>Sex:</strong><br>

<input type="radio" name="male">Male<br>

<input type="radio" name="female">Female

<hr>

<strong>Username:</strong><br>

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

<br>

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

<br>

<hr>

<table style="width:100%">

<caption style="font-size: 20px;"><strong>Educational Qualifications</strong></caption>

<tr>

<th>Course</th>

<th>Marks Obtained(%)</th>

<th>Institute Name</th>

</tr>

<tr>

<td>10th</td>

<td>95%</td>

<td>Prakriti Public School</td>

</tr>

<tr>

<td>12th</td>

<td>91%</td>

<td>Prakriti Public School</td>

</tr>

<tr>

<td>Graduation</td>

<td>Persuing</td>

<td>AKTU</td>

</tr>

</table>

<hr>

<strong>Address:</strong><br>

<textarea name="address" rows="10" cols="80"></textarea>

<br>

<hr>
<strong>Elective Subject:</strong><br>

<input type="radio" name="subject" value="Computer">Computer<br>

<input type="radio" name="subject" value="Arts">Arts<br>

<input type="radio" name="subject" value="Maths">Maths<br>

<hr>

<strong>Comment:</strong>

<textarea name="comment" rows="10" cols="40"></textarea>

<hr>

<button type="button" onclick="alert('Your form is submitted')" style="margin-left: 600px">Submit</button>

<input type="reset" name="reset">

<br>

<hr>

</form>

</body>

</html>

OUTPUT:
EXPERIMENT NO.-03

Write programs using Java script for Web Page to display browsers information.
<!DOCTYPE html>
<html>
<body>

<h2>The Navigator Object</h2>

<p>The product property returns the product name of the browser.</p>

<p>Do not rely on it! Most browsers returns "Gecko" as product name!</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
document.getElementById("demo").innerHTML = navigator.appVersion;
document.getElementById("demo").innerHTML = navigator.userAgent;
document.getElementById("demo").innerHTML = navigator.platform;
document.getElementById("demo").innerHTML = navigator.language;
document.getElementById("demo").innerHTML = navigator.onLine;
document.getElementById("demo").innerHTML = navigator.javaEnabled();
</script>
</body>
</html>

OUTPUT:
The Navigator Object

The product property returns the product name of the browser.


Do not rely on it! Most browsers returns "Gecko" as product name!
navigator.product is Gecko
5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/71.0.3578.98 Safari/537.36
Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/71.0.3578.98 Safari/537.36
navigator.platform is Win32
navigator.language is en-US
navigator.onLine is true
The javaEnabled() method returns true if Java is enabled:
javaEnabled is false
EXPERIMENT NO.-04

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

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

/*
<applet code="Cal" width=300 height=300>
</applet>
*/

public class Cal extends Applet


implements ActionListener
{

String msg=" ";


int v1,v2,result;
TextField t1;
Button b[]=new Button[10];
Button add,sub,mul,div,clear,mod,EQ;
char OP;
public void init()
{
Color k=new Color(120,89,90);
setBackground(k);
t1=new TextField(10);
GridLayout gl=new GridLayout(4,5);
setLayout(gl);
for(int i=0;i<10;i++)
{

b[i]=new Button(""+i);
}

add=new Button("add");
sub=new Button("sub");
mul=new Button("mul");
div=new Button("div");
mod=new Button("mod");
clear=new Button("clear");
EQ=new Button("EQ");
t1.addActionListener(this);
add(t1);
for(int i=0;i<10;i++)
{
add(b[i]);
}
add(add);
add(sub);
add(mul);
add(div);
add(mod);
add(clear);
add(EQ);
for(int i=0;i<10;i++)
{
b[i].addActionListener(this);
}

add.addActionListener(this);
sub.addActionListener(this);
mul.addActionListener(this);
div.addActionListener(this);
mod.addActionListener(this);
clear.addActionListener(this);
EQ.addActionListener(this);
}

public void actionPerformed(ActionEvent ae)


{
String str=ae.getActionCommand();
char ch=str.charAt(0);
if ( Character.isDigit(ch))
t1.setText(t1.getText()+str);
else
if(str.equals("add"))
{
v1=Integer.parseInt(t1.getText());
OP='+';
t1.setText("");
}
else if(str.equals("sub"))
{
v1=Integer.parseInt(t1.getText());
OP='-';
t1.setText("");
}
else if(str.equals("mul"))
{

v1=Integer.parseInt(t1.getText());
OP='*';
t1.setText("");
}
else if(str.equals("div"))
{
v1=Integer.parseInt(t1.getText());
OP='/';
t1.setText("");
}
else if(str.equals("mod"))
{
v1=Integer.parseInt(t1.getText());
OP='%';
t1.setText("");
}
if(str.equals("EQ"))
{

v2=Integer.parseInt(t1.getText());
if(OP=='+')
result=v1+v2;
else if(OP=='-')
result=v1-v2;
else if(OP=='*')
result=v1*v2;
else if(OP=='/')
result=v1/v2;
else if(OP=='%')
result=v1%v2;
t1.setText(""+result);
}
if(str.equals("clear"))
{

t1.setText("");
}
}

OUTPUT:
EXPERIMENT NO.-05

Writing program in XML for creation of DTD, which specifies set of rules

<?xml version="1.0"?>
<!DOCTYPE student[
<!ELEMENT student (name,address,std,marks)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT std (#PCDATA)>
<!ELEMENT marks (#PCDATA)>
]>
<student>
<name>Harshit Jaiswal</name>
<address>Bareilly</address>
<marks>94</marks>
</student>

OUTPUT:
EXPERIMENT NO.-06

Program to illustrate JDBC connectivity and maintaining database by sending queries.


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);
}

}}
OUTPUT:
EXPERIMENT NO.-07

Install APACHE TOMCAT web server. Access the static web pages for login id, using this
server.

<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>
OUTPUT:

Screenshot of HTML file SignIn.html when values are entered.

Screenshot of response when wrong values are entered.

Screenshot of response when correct values are


entered.
EXPERIMENT NO.-08
Create a Cookie and add four user id’s and passwords to this Cookie.
<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);}
}

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:
EXPERIMENT NO.-09:

Write a java program/servlet/JSP to connect database and extract data from the tables
and display them.

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);
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.

id first name last name City name Email Id

1 Divyasundar Sahu Mumbai [email protected]

2 Hritika Sahu Pune [email protected]

3 Milan Jena Chennai [email protected]

:
EXPERIMENT NO.-10

Write a JSP which insert the details of the 3 or 4 users who register with the web site by
using registration form.

In this example, we are going to take "Guru Registration form" which has the following
fields:

1. First Name
2. Last Name
3. Username
4. Password
5. Address
6. Contact Number
7. After filling all these details we have submit button, on click of that button all
the details will be stored.

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>

<td>Last Name</td>

</tr> <td><input type="text" name="last_name" /></td>

<tr>

<td>UserName</td>
<td><input type="text" name="username" /></td>

</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"
/></td>

</tr>
<tr>

<td>Address</td>
</tr> <td><input type="text" name="address" /></td>
<tr>

<td>Contact No</td>
<td><input type="text" name="contact" /></td>
</tr></table>
<input type="submit" value="Submit" /></form>
</body>
</html>
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);
}

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.
When you execute the above code , you get the following output:

Output:
When we click on register_1.jsp, we will get a form which will have details like first
name, last name, username, password, address, contact. All the details have been filled.
When we click on submit button then we get the message as "Welcome User"
EXPERIMENT NO.-11

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

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.encode
Url("/servle
t/Help?topi
c=Shopping
CartViewer
") +
"\">here</A
>");

out.println("</BODY></HTML>");
}

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

You might also like