Scribd
Upload
52 views

Web Tech lab_new (1)

Uploaded by

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

Web Tech lab_new (1)

Uploaded by

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

1

Ex.No 1 Image Mapping

Date:

Aim:

To create a web page with the following using HTML.

i) To embed an image map in a web page.

ii) To fix the hot spots.

iii) Show all the related information when the hot spots are clicked

Definition and Usage

The <map> tag is used to define a client-side image-map. An image-map is an image with
clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements that defines the clickable areas in
the image map.

Procedure

Creating a Simple Image Map

Step 1: Determine the size of our image

Step 2: Create a map to overlay the image

Step 3: Define the coordinates for the map shapes

Step 4: Put it all together

HTML Elements Used to Create Image Maps

There are three HTML elements used to create image maps:

 img: specifies the location of the image to be included in the map.


 map: is used to create the map of clickable areas.
 area: is used within the map element to define the clickable areas.
2

Program

<!DOCTYPE html>
<html>
<body>

<h1>The area coords attribute</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map id="planetmap" name="planetmap">


<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

sun.htm

<!DOCTYPE html>
<html>
<body>

<h1>The Sun</h1>

<p>Our Sun is a medium-sized star with a radius of about 435,000 miles (700,000 kilometers). Many
stars are much larger – but the Sun is far more massive than our home planet: it would take more than
330,000 Earths to match the mass of the Sun, and it would take 1.3 million Earths to fill the Sun's
volume.</p>

<img src="sun.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

</body>
</html>

mercur.htm

<!DOCTYPE html>
<html>
<body>

<h1>Mercury</h1>

<p>Mercury is the smallest planet in our solar system and the nearest to the Sun. Mercury is only slightly
larger than Earth's Moon. Its surface is covered in tens of thousands of impact craters.</p>

<img src="merglobe.gif" width="145" height="126" alt="Planets" usemap="#planetmap">


3

</body>
</html>

venus.htm

<!DOCTYPE html>
<html>
<body>

<h1>Venus</h1>

<p>Venus is the second planet from the Sun, and Earth's closest planetary neighbor. Venus is the third
brightest object in the sky after the Sun and Moon:</p>

<img src="venglobe.gif" width="145" height="126" alt="Planets" usemap="#planetmap">


</body>
</html>

Output:
4

Result

Thus the program is created for Image map and successfully verified
5

Ex.No 2 Cascading style sheets

Date:

Aim:

To create a web page with all types of cascading style sheets

Definition and Usage

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External style sheets are stored in CSS files

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

Procedure

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs,variations in display for different
devices and screen sizes as well as a variety of other effects.
6

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.

Types of CSS
1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This
method allows for specific styling of elements within the HTML document, overriding any external or
internal styles.
Example: This example shows the use of inline CSS with the help of an HTML document.

Program
<!DOCTYPE html>
<html>

<head>
<title>Inline CSS</title>

</head>

<body>
<p style="color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
Welcome to CAHCET
</p>

</body>

</html>
Output:
7
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document’s <style> element. It applies styles to
specified HTML elements, The CSS rule set should be within the HTML file in the head section i.e. the
CSS is embedded within the <style> tag inside the head section of the HTML file.
Example: This example shows the use of internal CSS with the help of an HTML document.
Program

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>
8

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Sel-demo.css

h1,h2,h3,h4,h5,h6{background-color:purple}

*{font-weight:bold}

#p1,#p3{background-color:aqua}

#p4, .takeNote{font-style:italic}

span.special{font-size:x-large}

a:link{color:black}

a:visited{color:yellow}

a:hover{color:green}

a:active{color:red}

ul span{font-variant:small-caps}

ul ol li{letter-spacing:1em}

sel-demo.html
9

<html>

<head>

<title>

Selectors.html

</title>

<link rel="stylesheet" type="text/css" href="sel-demo.css"/>

</head>

<body>

<h1>Selector Tests</h1>
<p id="p1" class="takeNote">

Paragraph with id="p1" and class="takeNote".

</p>

<p id="p2" class="special">

Second paragraph. <span class="takeNote special cool">This span

belongs to classes takeNote, special, and cool.</span>

<ul>

<li>Span's within this list are in <span>small-cap</span>

style.</li>

<ol>

<li>This item spaces letters.</li>

</ol>

</ul>

</p>

<p id="p3">

Third paragraph(id="p3")contains a

<a href="http://www.example.net">hyperlink</a>.

<ol>
10

<li>This item contains a span but does not display it in

<span>small caps</span>,nor does it space letters.</li>

</ol>

</p>

</body>

</html>
Output:

Result

Thus the program is created for CSS and successfully verified


11
Ex No : 3 WEB FORM VALIDATION
Date :

Aim:

To create Client Side Scripts for Validating Web Form Controls using DHTML.

Definition and Usage

Forms are used in webpages for the user to enter their required details that are further sending
it to the server for processing. A form is also known as web form or HTML form.

Validating a form:

The data entered into a form needs to be in the right format and certain fields need to be filled
in order to effectively use the submitted form. Username, password, contact information is
some details that are mandatory in forms and thus need to be provided by the user.

Data Validation

Data validation is the process of ensuring that user input is clean, correct, and useful.

Typical validation tasks are:

 has the user filled in all required fields?


 has the user entered a valid date?
 has the user entered text in a numeric field?

Most often, the purpose of data validation is to ensure correct user input.

Validation can be defined by many different methods, and deployed in many different ways.Server side
validation is performed by a web server, after input has been sent to the server.Client side validation is
performed by a web browser, before input is sent to a web server.

PROCEDURE:
1. Create a html l program named as form validation html using notepad.
2. Create a script of type javascript.
3. Create a function named as validate.
4. Inside the function use alert message.
5. Create a form named as myform.
6. Create a table with border=”1” and cellspacing = ”2”.
7. Inside the table create name, email id , zip code and country as description.
8. Create a option button to save the country option.
9. Create a submit button to save the data .When the user entered the details.
12
PROGRAM

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
var y = document.forms["myForm"]["email"].value;
if (y == null || y == "") {
alert("Email must be filled out");
return false;
}
var z = document.forms["myForm"]["country"].value;
if (z== -1) {
alert("Country must be selected");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.asp"


onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname"><br>
Email: <input type="text" name="email"><br>
<select name="country">
<option value="-1" selected>[choose Country]
</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
<input type="submit" value="Submit">
</form>

</body>
</html>
13
OUTPUT:

Result

Thus the program is created for validating web form and successfully verified
14
EX. No :4 Installation of Apache Tomcat web server

Aim:
To Install Apache Tomcat web server.

Procedure

How to Install Tomcat

Follow the steps below to download and install Tomcat.

Step 1: Download Tomcat

To download the Tomcat installation file, follow the steps below:

1. Browse to the official Apache Tomcat website. Locate the Download section and click the latest
Tomcat version available. At the time of writing this article, the latest Tomcat version was version 10.

2. On the Download page, scroll down and locate the Binary Distributions area.

In the Core list, depending on the installation type you prefer, click the download link for the Windows
Service Installer or the 32bit/64bit Windows zip file.
15

Step 2: Install Tomcat

Install Tomcat via the Windows Service Installer for an automated and wizard-guided experience. The
service installer installs the Tomcat service and runs it automatically when the system boots.

For a portable experience, install Tomcat using the zip file and avoid installing the service. Easily
uninstall Tomcat when it is no longer needed by deleting the Tomcat directory, or move it around when
necessary.

Note: Take a look at our list of 13 best Java IDEs, which help write, debug, and test Java code.
Method 1: Install Tomcat Using the Windows Service Installer

Follow the steps below to install Tomcat using the Windows Service Installer.

1. Open the downloaded Windows Service Installer file to start the installation process.

2. In the Tomcat Setup welcome screen, click Next to proceed.


16

3. Read the License Agreement and if you agree to the terms, click I Agree to proceed to the next step.

4. In the Tomcat component selection screen, choose Full in the dropdown menu to ensure the wizard
installs the Tomcat Host Manager and Servlet and JSP examples web applications. Alternatively, keep the
default Normal installation type and click Next.
17

5. The next step configures the Tomcat server. For instance, enter the Administrator login credentials or
choose a different connection port. When finished, click Next to proceed to the next step.

6. The next step requires you to enter the full path to the JRE directory on your system. The wizard auto-
completes this if you have previously set up the Java environment variables. Click Next to proceed to the
next step.
18

7. Choose the Tomcat server install location or keep the default one and click Install.

8. Check the Run Apache Tomcat box to start the service after the installation finishes. Optionally,
check the Show Readme box to see the Readme file. To complete the installation, click Finish.
19

9. A popup window appears that starts the Tomcat service. After the process completes, the window
closes automatically. The Apache Tomcat web server is now successfully installed .

Result:
Thus Apache Tomcat Server is Installed Successfully.
20
Ex No: 5 A Invoke servlets from HTML
Date :

AIM:
TIER 1: HTML
1.Create a html page with form tag and supply the name ,method and action attribute.
2.Create the form elements such as text fields and submit button.
TIER 2: HTML
3.Mention the name of the servlet in the action attributes of the form tag.
4.Create a servlet class which extends http servlet.
5.Establish a connection between servlet and HTML.
6.Initailly connection con,statement stml,Result rs=nul.
7.Use Driver manage to connect the HTML with data from database.
8.Use SQL statement to store and retrieve the data from database.
9.Define the variables and servlet method to handle http request.
10.Design the servlet output using http response and printwriter object.
11.Mention the servlet information and use pattern in the deployment description file.
TIER 3:DATABASE:
12.Create a emp.table using the ms.access.
13.Insert the values in the tables.

PROGRAM

TIER 1:HTML
-----------

<html>
<head>
<title>The servlet-jdbc Example</title>
<body>
<form name="empform" method="post" action="EmpServlet">
<h1 align="center"> The ABC company</h1>
<br>
<p><b>Enter the details of an employee</p>
<br>
Name:<input name="empname" type="textbox"><br>
SSN:<input name="empno" type="textbox"><br>
Qualification:<input type="des" type="textbox"><br>
Dept.No:<input name="sal" type="textbox">
<br>
<br>
<input type=submit value="submit">
</form>
</body>
</html>

TIER 2:SERVLET
--------------

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
21
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/NewServlet"})
public class NewServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException, SQLException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
Statement stmt=null;
Connection con=null;
ResultSet rs=null;
try
{

Class.forName("org.apache.derby.jdbc.ClientDriver");
con=DriverManager.getConnection("jdbc:derby://localhost:1527/sample","app","app");

}
catch(Exception e) {
System.out.println("ss"+e);
}
String empname=request.getParameter("empname");
String empno=request.getParameter("empno");
String des=request.getParameter("des");
String sal=request.getParameter("sal");

response.setContentType("text/html");
try
{

stmt=con.createStatement();

stmt.executeUpdate("insert into emp values('"+empname+"',"+empno+",'"+des+"',"+sal+")");

rs=stmt.executeQuery("select * from emp");

out.println("<head>");
out.println("</head>");
out.println("<body bgcolor=cyan>");
out.println("<center>");

while(rs.next())
{

empname=rs.getString("empname");
empno=rs.getString("empno");
des =rs.getString("des");
sal=rs.getString("sal");
22
out.println("Empname:"+empname+"<br>Empno:"+empno+"<br>Designation:"+des+"<br>Salary:"+sal)
;

out.println("</body>");
out.println("</html>");
}
}
catch(Exception e)
{
}
}

TIER 3 : DATABASE
------------------
create table emp(empname varchar(20),empno int,des varchar(30),sal int)
insert into emp values('vijay',1001,'Manager',20000)
select * from emp

OUTPUT:

Result

Thus the program is created for Invoking servlet from Html form and successfully verified
23
Ex.No 5 b Session Tracking using Servlet

Date:

Aim:

To write programs to perform Session tracking in java.

Procedure, Definition and usage

Session simply means a particular interval of time.

Session Tracking is a way to maintain state (data) of an user. It is also known as session
management in servlet.

Http protocol is a stateless so we need to maintain state using session tracking techniques.
Each time user requests to the server, server treats the request as the new request. So we need
to maintain the state of an user to recognize to particular user.

Why use Session Tracking?

To recognize the user It is used to recognize the particular user.

Program

Index.html

<html>
<head>

<title>Servlet Login Example</title>


</head>
<body>

<h1>Welcome to Login App by Cookie</h1>


<a href="login.html">Login</a>|
<a href="NewServlet1">Logout</a>|
<a href="NewServlet">Profile</a>

</body>
</html>

Login.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
24

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


Name:<input type="text" name="name"><br>
Password:<input type="password" name="password"><br>
<input type="submit" value="login">
</form>
</body>
</html>

LoginServlet

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
*
* @author muzaffar
*/
@WebServlet(urlPatterns = {"/LoginServlet"})
public class LoginServlet extends HttpServlet {

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out=response.getWriter();

request.getRequestDispatcher("index.html").include(request, response);

String name=request.getParameter("name");
String password=request.getParameter("password");

if(password.equals("admin123")){
out.print("\n You are successfully logged in!");
out.print("<br>Welcome, "+name);

Cookie ck=new Cookie("name",name);


response.addCookie(ck);
}else{
out.print("sorry, username or password error!");
request.getRequestDispatcher("login.html").include(request, response);
}
25

out.close();
}
}

NewServlet

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
*
* @author muzaffar
*/
@WebServlet(urlPatterns = {"/NewServlet"})
public class NewServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out=response.getWriter();

request.getRequestDispatcher("index.html").include(request, response);

Cookie ck[]=request.getCookies();
if(ck!=null){
String name=ck[0].getValue();
if(!name.equals("")||name!=null){
out.print("<b>Welcome to Profile</b>");
out.print("<br>Welcome, "+name);
}
}else{
out.print("Please login first");
request.getRequestDispatcher("login.html").include(request, response);
}
out.close();
}
}
26
NewServlet1
import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.Cookie;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/NewServlet1"})

public class NewServlet1 extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out=response.getWriter();

request.getRequestDispatcher("index.html").include(request, response);
27

Cookie ck=new Cookie("name","");

ck.setMaxAge(0);

response.addCookie(ck);

out.print("you are successfully logged out!");

}
28
29

Result

Thus the program is created for Session Tracking and successfully verified
30

Ex.No 6A Online Examination using JSP and Databases

Date:

Aim:

Write a program in Java to create conducting on-line examination using JSP and
Databases (three tire architecture).

Definition, usage and procedure

Three tier architecture is a very common architecture. A three tier architecture is typically
split into a presentation or GUI tier, an application logic tier, and a data tier.

Presentation tier encapsulates the presentation logic required to serve clients. A JSP in the
presentation tier intercepts client requests, manages logons, sessions, accesses the business
services, and finally constructs a response, which gets delivered to client.

Business tier provides the business services. This tier contains the business logic and the
business data. All the business logic is centralized into this tier as opposed to 2-tier systems
where the business logic is scattered between the front end and the backend. The benefit of
having a centralized business tier is that same business logic can support different types of
clients like browser, WAP (Wireless Application Protocol) client. In our exercise we will use
servlet as business tier.

Data Tier

Data tier is used by the databases

JSP

Java Server Pages (JSP) is a server-side programming technology that enables the creation of
dynamic, platform-independent method for building Web-based applications. JSP have access
to the entire family of Java APIs, including the JDBC API to access enterprise databases

Servlet

A servlet is a small Java program that runs within a Web server. Servlets receive and respond
to requests from Web clients, usually across HTTP, the HyperText Transfer Protocol

Client:

Step1: In index.html on the client side declare the contents that you like to transfer to the server
using html form and input type tags.

Step2: create a submit button and close all the included tags
31
Servlet:
Step 1: Import all necessary packages

Step 2: Define a class that extends servlet

Step 3: In the doPost() method, do the following:

i) Set the content type of the response to "text/html"

ii) Create a writer to the response

iii) Get a paratmeter from the request

iv) If its value is equal to right answer then add 5 to mark variable

v) Similarly repeat step

vi) for all parameters

vii) Display the result in an jsp file

Program

First Create database as online in that create table as exam3 with the following field

create table exam3(answer1 varchar(20))

insert into exam3 values('Operating System')

insert into exam3 values('personal Computer')

insert into exam3 values('Dennis Ritchie')

select * from exam3

Index.html

<html>
<head>
<title>Online Exam Client</title>
<style type="text/cse">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body bgcolor="blue">
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
32

<h3>Answer the following questions(5 marks for each correct answer}</h3>


<hr/>
<form action="NewServlet1">
1.All computers must have<br/>

<input type="radio" name="ans1" value="Operating System">Operating System


<input type="radio" name="ans1" value="Application Software">Application Software
<input type="radio" name="ans1" value="CD Drive">CD Drive
<input type="radio" name="ans1" value="Microsoft word">Microsoft word
<br/>
<br/>
2.The term PC means <br/>
<input type="radio" name="ans2" value="Private Computer">Private Computer

<input type="radio" name="ans2" value="Professional Computer">Professional Computer


<input type="radio" name="ans2" value="personal Computer">Personal Computer

<input type="radio" name="ans2" value="Personal Calculator">Personal Calculator


<br/><br/>
3.C was development by7<br/>

<input type="radio" name="ans3" value="Dennis Ritchie">Dennis Ritchie


<input type="radio" name="ans3" value="Stroustrup">Stroustrup
<input type="radio" name="ans3" value="David Ritchie">David Ritchie

<input type="radio" name="ans3" value="Charles Babbage">Charles Babbage


<br/>
<br/>
<input type="submit" value="Check your Result"/>

</form>
</body>
</html>
33

NewServlet1

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

import java.util.Properties;
import javax.servlet.ServletException;
import javax.servlet.http.*;
public class NewServlet1 extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

try {
Statement st;

Connection con;
String str1=request.getParameter("ans1");
String str2=request.getParameter("ans2");
String str3=request.getParameter("ans3");
int mark=0;

Class.forName("org.apache.derby.jdbc.ClientDriver");
Properties p=new Properties();
p.put("user","root");
p.put("password","root");
con=DriverManager.getConnection("jdbc:derby://localhost:1527/Online",p);
st=con.createStatement();

Statement stmt = con.createStatement();


34

ResultSet rs = stmt.executeQuery("SELECT * FROM exam3");


int i=1;

while(rs.next()==true)
{
if(i==1)
{

String dbans1=rs.getString(1);
if(str1.equals(dbans1))
{
mark=mark+5;
} }
if(i==2)
{
String dbans2=rs.getString(1);
if(str2.equals(dbans2))
{
mark=mark+5;
}}
if(i==3)
{
String dbans3=rs.getString(1);
if(str3.equals(dbans3))

{
mark=mark+5;
}

}
i++;
}
System.out.println(str1);
35

System.out.println(str2);
System.out.println(str3);
request.setAttribute("data",mark);
request.getRequestDispatcher("/newjsp.jsp").forward(request,response);
} catch(Exception e)
{

out.close();
}
}

}
Newjsp.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<html>
<head>
<title>JSP Page</title>

</head>
<body>
<%
int mark=(Integer)request.getAttribute("data");
if(mark>=10)
{
out.println("Your Mark Is:"+mark);
out.println("Congratulations....! You Are Eligible For The Next Round. .. ");

}
else
{

out.println("Your Mark is:"+mark);


out.println("Sorry....!! You Are not Eligible For The Next Round. ");
}
%>
</body>
</html>
36
Output:

Result

Thus the program is created for conducting online examination and successfully verified
37

Ex.No 6B Displaying student mark list using JSP and Databases

Date:

Aim:

Write a program in Java to create Displaying student mark list using JSP and Databases
(three tire architecture).

Definition, usage and procedure

Three tier architecture is a very common architecture. A three tier architecture is typically
split into a presentation or GUI tier, an application logic tier, and a data tier.

Presentation tier encapsulates the presentation logic required to serve clients. A JSP in the
presentation tier intercepts client requests, manages logons, sessions, accesses the business
services, and finally constructs a response, which gets delivered to client.

Business tier provides the business services. This tier contains the business logic and the
business data. All the business logic is centralized into this tier as opposed to 2-tier systems
where the business logic is scattered between the front end and the backend. The benefit of
having a centralized business tier is that same business logic can support different types of
clients like browser, WAP (Wireless Application Protocol) client. In our exercise we will use
servlet as business tier.

Data Tier

Data tier is used by the databases

JSP

Java Server Pages (JSP) is a server-side programming technology that enables the creation of
dynamic, platform-independent method for building Web-based applications. JSP have access
to the entire family of Java APIs, including the JDBC API to access enterprise databases

Servlet

A servlet is a small Java program that runs within a Web server. Servlets receive andrespond
to requests from Web clients, usually across HTTP, the HyperText Transfer Protocol

Client:

Step1: In index.html on the client side declare the contents that you like to transfer to the server
using html form and input type tags.

Step2: create a submit button and close all the included tags.

Servlet:

Step 1: Import all necessary packages


38

Step 2: Define a class that extends servlet

Step 3: In the doPost() method, do the following: i) Set the content type of the response to
"text/html" ii) connect with the database which has the student marklist iii) query the data to
the database

Step 4: Display the student marklist

First Create database as db8 in that create table as mark with the following field

create table mark(rno varchar(20),name1 varchar(20),m1 varchar(20),m2 varchar(20),m3


varchar(20),m4 varchar(20),m5 varchar(20),m6 varchar(20))

insert into mark values('100','mohammed','90','90','90','90','90','90')

select * from mark

index.html

<head>
<title>Three Tier Application</title>
<style type="text/css">

body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>
<h2>EXAMINATION RESULT</h2><hr/>
<form name="f1" method="GET" action="marklist.jsp">
Enter Your Reg.No:
<input type="text" name="rno"/><br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>
39

<html>
Marklist.jsp
<%@page import="java.util.Properties"%>

<%@page contentType="text/html" language="java" import="java.sql.*"%>


<html>
<head>

<title>Three Tier Application</title>


<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>

<h2>EXAMINATION RESULT</h2><hr/>
<%

String str=request.getParameter("rno");
Class.forName("org.apache.derby.jdbc.ClientDriver");
Properties p=new Properties();
p.put("user","root");
p.put("password","root");
Connection con=DriverManager.getConnection("jdbc:derby://localhost:1527/db8",p);
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery( " Select * FROM mark WHERE rno ='"+str+"'");
while(rs.next())
{
%>
Register No:<%=rs.getString(1)%><br/>
Name:<%=rs.getString(2)%><br/>

<table border="1">
40

<th>SUBJECT</th><th>Mark</th>
<tr><td>NPM</td><td><%=rs.getString(3)%></td></tr>
<tr><td>OOAD</td><td><%=rs.getString(4)%></td></tr>
<tr><td>CNS</td><td><%=rs.getString(5)%></td></tr>
<tr><td>Es</td><td><%=rs.getString(6)%></td></tr>
<tr><td>Web Technology</td><td><%=rs.getString(7)%></td></tr>
<tr><td>UID</td><td><%=rs.getString(8)%></td></tr>

</table>
<%
}
%>
<br/>
<a href="index.jsp">Back</a>
</body>
</html>
41

Output:

Result

Thus the program is created for displaying examination result and successfully verified
42

Ex.No 7 XML and XSLT/XSL

Date:

Aim: Develop a XML program describing styles into it using XSLT.

DESCRIPTION:

Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. It is
defined in the XML 1.0 Specification produced by the W3C, and several other related
specifications,all free open standards.

HOW TO EXECUTE THE PROGRAM

XML itself is not a programming language, so normal XML documents don't ‘run’ or‘execute’.
XML is a markup specification language and XML files are just data: they sit there until you
run a program which displays them (like a browser) or does some work with them (like a
converter which writes the data in another format, or a database which reads the data), or
modifies them (like an editor). To view or display an XML file, open it with an XML editor
or an XML browser.

EXPECTED OUTPUT AND ITS FORM

The expected output is to applying styles to XML

PROCEDURE:

• The xsl:output element specifies how to display the result tree.

• The XSL processor produces the output result tree.

•It should be specified by xsl:output element.

•The method attribute of xsl:output specifies the overall process to produce the result tree.

•The HTML output method results the tree as HTML document.

Program

cd.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>


<!--Edited by XMLSpy@-->

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>


<catalog>
<cd>
43

<title>Empire Burlesque</title>
<artist>Bob Dyland</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>

<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>

<country>USA</country>
<company>RSA</company>
<price>9.90</price>

<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>

<artist>Gary Moore </artist>


<country>UK</country>
<company>Virgin records</company>

<price>10.20</price>
44

<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazztti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>

</cd>
<cd>
<title>One night only</title>
<artist>Bee Gees</artist>
<country>UK</country>
<company>Polydor</company>
<price>10.90</price>
<year>1998</year>
</cd>

<cd>
<title>Sylvis Mother</title>
<artist>Dr.Hook</artist>

<country>UK</country>
<company>CBS</company>
<price>8.10</price>
<year>1973</year>

</cd>
<cd>
<title>Maggie May</title>

<artist>Rod Stewart</artist>
45

<country>UK</country>
<company>Pickwick</company>
<price>8.50</price>
<year>1990</year>
</cd>
<cd>
<title>Romanza</title>
<artist>Andrea Bocelli</artist>
<country>EU</country>

<company>Polydor</company>
<price>10.80</price>
<year>1996</year>
</cd>
<cd>
<title>When a man loves a women</title>
<artist>Percy Sledge</artist>
<country>USA</country>
<company>Atlandic</company>

<price>8.70</price>
<year>1995</year>
</cd>

<cd>
<title>Black angel</title>
<artist>Savage Rose</artist>
<country>EU</country>

<company>Mega</company>
<price>10.90</price>
<year>1995</year>

</cd>
46

<cd>
<title>1999 Grammy Nominees</title>
<artist>Many</artist>
<country>USA</country>
<company>Grammy</company>
<price>10.20</price>
<year>1999</year>
</cd>
<cd>

<title>For the good times</title>


<artist>Kenny Rogers</artist>
<country>UK</country>
<company>Mukic Master</company>
<price>8.70</price>
<year>1995</year>
</cd>
<cd>
<title>Big Willie style</title>

<artist>Will Smith</artist>
<country>USA</country>
<company>Columbia</company>

<price>9.90</price>
<year>1997</year>
</cd>
<cd>

<title>Tupelo Honey</title>
<artist>Van Morrison</artist>
<country>UK</country>

<company>Polydor</company>
47

<price>8.20</price>
<year>1971</year>
</cd>
<cd>
<title>Soulsville</title>
<artist>Jorn Hoel</artist>
<country>Norway</country>
<company>WLA</company>
<price>7.90</price>

<year>1996</year>
</cd>
<cd>
<title>The very best of</title>
<artist>Cat Stevens</artist>
<country>UK</country>
<company>Island</company>
<price>8.90</price>
<year>1990</year>

</cd>
<cd>
<title>Stop</title>

<artist>Sam Brown</artist>
<country>UK</country>
<company>A and M</company>
<price>10.90</price>

<year>1988</year>
</cd>
<cd>

<title>Bridge of spices</title>
48

<artist>T'Pau</artist>
<country>UK</country>
<company>Siren</company>
<price>7.90</price>
<year>1987</year>
</cd>
<cd>
<title>Private Dancer</title>
<artist>Tina Turner</artist>

<country>UK</country>
<company>Capital</company>
<price>8.90</price>
<year>1987</year>
</cd>
<cd>
<title>Midt om natten</title>
<artist>Kim Larsen</artist>
<country>EU</country>

<company>Medley</company>
<price>7.80</price>
<year>1983</year>

</cd>
<cd>
<title>Pavarotti Gala Concert</title>
<artist>Luciano Pavarotti</artist>

<country>UK</country>
<company>DECCA</company>
<price>9.90</price>

<year>1991</year>
49

</cd>
<cd>
<title>The dock of the bay</title>
<artist>Otis Redding</artist>
<country>USA</country>
<company>Atlantic</company>
<price>7.90</price>
<year>1987</year>
</cd>

<cd>
<title>Picture book</title>
<artist>Simply Red</artist>
<country>EU</country>
<company>Elektra</company>
<price>7.20</price>
<year>1985</year>
</cd>
<cd>

<title>Red</title>
<artist>The Communards</artist>
<country>UK</country>

<company>London</company>
<price>7.80</price>
<year>1987</year>
</cd>

<cd>
<title>Unchain my heart</title>
<artist>Joe Cocker</artist>

<country>Usa</country>
50

<company>EMI</company>
<price>8.20</price>
<year>1987</year>
</cd>
</catalog>
51

Cdcatalog.xsl:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>My CD collection</h2>

<table border="1">

<tr bgcolor="#9acd32">

<th>Title</th>

<th>Artist</th>

</tr>

<xsl:for-each select="catalog/cd">

<tr>

<td>

<xsl:value-of select="title" />

</td>

<td>

<xsl:value-of select="artist" />

</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>
52

Output:

Result

Thus the program is created for xml and xslt and successfully verified
53

Ex.No 8 AJAX

Date:

Aim: To create program to check username available or not using AJAX

Definition, Usage and Description

AJAX is an Asynchronous JavaScript And XML.AJAX perform following thing.

 Read data from a web server - after the page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background

AJAX just uses a combination of:

 A browser built-in XMLHttpRequest object (to request data from a web server)
 JavaScript and HTML DOM (to display or use the data)

AJAX allows web pages to be updated asynchronously by exchanging data with a web server
behind the scenes. This means that it is possible to update parts of a web page, without
reloading the whole page.

How AJAX Works

1. An event occurs in a web page (the page is loaded, a button is clicked)

2. An XMLHttpRequest object is created by JavaScript

3. The XMLHttpRequest object sends a request to a web server

4. The server processes the request

5. The server sends a response back to the web page

6. The response is read by JavaScript

7. Proper action (like page update) is performed by JavaScript

Program

First Create database as on in that create table as un with the following field

create table un(username varchar(20))

insert into un values(‘johson’)

select * from un
54

index.html

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp
var k=document.getElementById("username").value;
var urls="newjsp.jsp?ver="+k;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
// alert(xmlhttp.responseText);
document.getElementById("err1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",urls,true);
xmlhttp.send();
}
</script>
</head>
<body>
User Name:<input type="text" name="username" id="username"
onkeyup="loadXMLDoc()">
<p id="err1"></p>
</body>
</html>

newjsp.jsp

<%@page import="java.util.Properties"%>
<%@page import="java.io.*,java.sql.*"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
55

String sn=request.getParameter("ver");
Class.forName("org.apache.derby.jdbc.ClientDriver");
Properties p = new Properties();
p.put("user","root");
p.put("password","root");
Connection con=DriverManager.getConnection("jdbc:derby://localhost:1527/on",p);
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from un where username ='"+sn+"'"); //

if(rs.next())
{
out.println("<font color=red>");
out.println("\n Name already taken");
out.println("</font>");
}
else{
out.println("<font color=green>");
out.println("\nAvailable");
out.println("</font>");
}

%>

Output:
56

Result

Thus the program is created for AJAX and successfully verified.


57

Ex.No 9 Calculator using java script

Date:

Aim: To create javascript program for calculator

Definition, Usage and Description

JavaScript is an object-based scripting language which is lightweight and cross-platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript


Translator (embedded in the browser) is responsible for translating the JavaScript code for
the web browser.

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

This example uses the method to "find" an HTML element (with id="demo") and changes the
element content (innerHTML) to "Hello JavaScript":

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code that can be executed when "called" for.

For example, a function can be called when an event occurs, like when the user clicks a
button.

Description:

For creating a basic calculator in JavaScript, we use table structure, input type button and
eval JavaScript function.

 Input type button use to take input from user.


 Table structure is use to create calculator structure.
 Eval function to evaluate the function.

Program

<html>
<head>
<body>
<form name="calculator">
<table>
<tr>
<td colspan="4">
58

<input type="text" name="display" id="display" disabled>


</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" onclick="calculator.display.value
+= '1'"></td>
<td><input type="button" name="two" value="2" onclick="calculator.display.value
+= '2'"></td>
<td><input type="button" name="three" value="3"
onclick="calculator.display.value += '3'"></td>
<td><input type="button" class="operator" name="plus" value="+"
onclick="calculator.display.value += '+'"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="calculator.display.value
+= '4'"></td>
<td><input type="button" name="five" value="5" onclick="calculator.display.value
+= '5'"></td>
<td><input type="button" name="six" value="6" onclick="calculator.display.value
+= '6'"></td>
<td><input type="button" class="operator" name="minus" value="-"
onclick="calculator.display.value += '-'"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7"
onclick="calculator.display.value += '7'"></td>
<td><input type="button" name="eight" value="8"
onclick="calculator.display.value += '8'"></td>
<td><input type="button" name="nine" value="9"
onclick="calculator.display.value += '9'"></td>
<td><input type="button" class="operator" name="times" value="x"
onclick="calculator.display.value += '*'"></td>
</tr>
<tr>
<td><input type="button" id="clear" name="clear" value="c"
onclick="calculator.display.value = ''"></td>
<td><input type="button" name="zero" value="0"
onclick="calculator.display.value += '0'"></td>
<td><input type="button" name="doit" value="=" onclick="calculator.display.value
= eval(calculator.display.value)"></td>
<td><input type="button" class="operator" name="div" value="/"
onclick="calculator.display.value += '/'"></td>
</tr>
</table>
</form>
</body>
</head>
</html>
59

Result

Thus the program is created for calculator using JavaScript and successfully verified.
60

Ex.No 10 Payroll system using servlet and JSP

Date:

Aim: To create Payroll system using servlet and JSP

Definition, Usage and Description

Three tier architecture is a very common architecture. A three tier architecture is typically split
into a presentation or GUI tier, an application logic tier, and a data tier.

Presentation tier encapsulates the presentation logic required to serve clients. A JSP in the
presentation tier intercepts client requests, manages logons, sessions, accesses the business
services, and finally constructs a response, which gets delivered to client.

Business tier provides the business services. This tier contains the business logic and the
business data. All the business logic is centralized into this tier as opposed to 2-tier systems
where the business logic is scattered between the front end and the backend. The benefit of
having a centralized business tier is that same business logic can support different types of
clients like browser, WAP (Wireless Application Protocol) client. In our exercise we will use
servlet as business tier.

Data Tier

Data tier is used by the databases

JSP

Java Server Pages (JSP) is a server-side programming technology that enables the creation of
dynamic, platform-independent method for building Web-based applications. JSP have access
to the entire family of Java APIs, including the JDBC API to access enterprise databases

Servlet

A servlet is a small Java program that runs within a Web server. Servlets receive and respond
to requests from Web clients, usually across HTTP, the HyperText Transfer Protocol

Payroll System

A payroll is a company's list of its employees, but the term is commonly used to refer to: the
total amount of money that a company pays to its employees a company's records of its
employees' salaries and wages, bonuses, and withheld taxes the company's department that
calculates funds and pays these. In the sense of treasury management, payroll plays a major
role in a company for several reasons. From an accounting perspective, payroll and payroll
taxes are subject to laws and regulations

Program

create table payroll(eid int,bs float,hra float,da float,pf float,gs float)


select * from payroll
61

index.html

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="NewServlet">
First Number<input type="text" name="first"></br>
Second Number<input type="text" name="second"></br>
<input type="submit" value="submit">
</form>
</body>
</html>

NewServlet.java

java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
*
* @author muzaffar
*/
@WebServlet(urlPatterns = {"/NewServlet"})
public class NewServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
int empid=Integer.parseInt(request.getParameter("Empid"));
float bs=Float.parseFloat(request.getParameter("bs"));
float hra=(float) (bs*0.10);
float da=(float) (bs*0.05);
float pf=(float) (bs*0.10);
62

float gs=(float) (bs+hra+da+pf);


request.setAttribute("empid", empid);
request.setAttribute("bs", bs);
request.setAttribute("hra", hra);
request.setAttribute("da", da);
request.setAttribute("pf", pf);
request.setAttribute("gs", gs);
Class.forName("org.apache.derby.jdbc.ClientDriver");
Connection
con=DriverManager.getConnection("jdbc:derby://localhost:1527/sample","app","app");
Statement st=con.createStatement();
st.execute("insert into payroll
values("+empid+","+gs+","+hra+","+da+","+pf+","+gs+")");
request.getRequestDispatcher("/newjsp.jsp").forward(request,response);

}catch(Exception e)
{
}

}
}

Newjsp.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body >
<center>
<h1> Payroll System</h1>
<table border="1">
<tr><td>empId is</td><td><%=request.getAttribute("empid")%></td></tr>
<tr><td>BaAsic salary is</td><td><%=request.getAttribute("bs")%></td></tr>
<tr><td>Hra is</td><td><%=request.getAttribute("hra")%></td></tr>
<tr><td>DA is</td><td><%=request.getAttribute("da")%></td></tr>
<tr><td>PF is</td><td><%=request.getAttribute("pf")%></td></tr>
<tr><td>Gross is</td><td><%=request.getAttribute("gs")%></td></tr>
</table>
</center>

</body>
</html>
63
64

Result

Thus the program for payroll is successfully created and verified

You might also like