Scribd
Upload
13 views

WP Lab Manual

Web technology

Uploaded by

Vivekanandhan Vijayan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

WP Lab Manual

Web technology

Uploaded by

Vivekanandhan Vijayan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 101

NAME OF THE PAGE

SLNO DATE SIGNATURE


EXPERIMENT NO

CREATION OF A TIME
1A 23/11/18
TABLE USING HTML

CREATION OF A FORM
1B 30/11/18
USING HTML

CREATION OF A LISTS
1C 30/11/18
USING HTML

CREATION OF HTML
PAGES WITH
1D 07/12/18
FRAMES,LINKS,TABLES
AND OTHER TAGS
CREATION OF AN USER-
2 14/12/18 INTERACTION USING
JAVASCRIPT
CREATION OF A SCRIPT
THAT COLLECTS
3 21/12/18 NUMBERS FROM A PAGE
AND THEN ADDS THEM
AND PRINT ON THE PAGE
CREATION OF A SCRIPT
THAT PROMPT THE USER
4 21/12/18 FOR A NUMBER AND
COUNTS AND DISPLAY
THE ODD NUMBERS
CREATION OF A SCRIPT
THAT WILL CHECK THE
5 21/12/18 FIELD IN ASSSIGNMENT
FOR DATA AND ALERT
THE USER IF IT IS BLANK
CREATION OF A WEB
6 04/01/19 SITE USING HTML AND
CSS

1
CLIENT SIDE
7 11/01/19 VALIDATION USING
HTML
INVOKING SERVLET
FROM HTML FOR
8A 25/01/19
CALUCALATION OF
COMPOUND INTEREST
SERVLET PROGRAM
8B 1/02/19 USING HTTP SERVLET
FOR ONLINE QUIZ
ONLINE APPLICATION
8C 22/2/19 WITH ANY DATABASE
ACCESS
CREATION OF A WEB
APPLICATION THAT
9 22/2/19
FUNCTIONS AS A SIMPLE
HAND CALCULATOR
CREATION OF A
10 1/03/19 PROGRAM USING XML
SCHEMA-XSLT/XSL

CREATION OF A
11 15/03/19
PROGRAM USING AJAX

CREATION OF A
12 15/03/19 PROGRAM FOR JQUERY
DEMO
IMPLEMENTATION OF
RMI CONCEPT FOR
13 22/03/19
BULIDING ANY REMOTE
METHOD
CREATION OF A WEB
14 22/03/19 SERVICEIN JAVA USING
NETBEANS IDE

2
EX.NO: 1A CREATION OF A TIME TABLE USING HTML
DATE: 23/11/18 `
AIM
To Create a time table using html
SOFTWARE REQUIRED
1. Text Editor & Web Browser
DESCRIPTION
1. The Table Element(<table>) represents data in two dimensions or more.
Attributes:
Cellpadding: This attribute defines the space between the content of a cell and the border,
displayed or not. It is deprecated and instead use the CSS property border-collapse with the value
collapse on the<table>element itself, and the property padding on the<td>.
Cellspacing: This attribute defines the size of the space between two cells. It is
deprecated and instead use the CSS property border-spacing on the<table>element itself.
Other deprecated attributes: align, bgcolor, border etc.
Supported attributes: Global attributes like id, class etc.
2. The <caption> Element (Caption Element) represents the title of a table.
3. The Table Head Element (<thead>) defines a set of rows defining the head of the
columns of the table.
4. The <tbody> tag is used to group the body content in an HTML table.
5. The Table Foot Element (<tfoot>) defines a set of rows summarizing the columns of the
table.
6. The Table Row Element (<tr>) defines a row of cells in a table. Those can be a mix of
<td>and <th> elements.
7. The Table Header Cell Element (<th>) defines a cell that is a header for a group of cells
of a table.
8. The Table cell element (<td>) defines a cell of a table that contains data.

3
PROGRAM
<html>
<head><br><br><br><br><br><br><center><font size="10"
color="black"><b>ADHIYAMAAN COLLEGE OF ENGINEERING</font></b></center>
<center><font size="5" color="black"><b>DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING</font></b></center>
<center><font size="4" color="black">IIIrd YEAR - C Section</font></center>
<title>Time Table</title>
<style> body{background-image="E:\Balaji\img.jpg"} table
{border:1px solid;margin-left:auto;margin-right:auto;} tb,
tr{border:1px solid; text-align: center; padding: lem;}
caption {font-weight: bold;}
</style>
</head>
<body>
<table border='1'>
<caption>TimeTable</caption>
<tr><th>Day</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<td rowspan="7">L<br>U<br>N<br>C<br>H</td>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<td align="center"><b>Monday</b></td>
<td align="center" colspan="2">Unit Test</td>
<td align="center">Mobile Computing</td>
<td align="center">Numerical Methods</td>
<td align="center">Pervasive Computing</td>

4
<td align="center">Scripting Language</td>
<td align="center">Compiler Design</b></td>
</tr>
<tr>
<td align="center"><b>Tuesday</b></td>
<td align="center">Compiler Design</td>
<td align="center" colspan="3">Compiler Design Lab</td>
<td align="center">Numerical Methods</td>
<td align="center">Pervasive Computing</td>
<td align="center">Web Technology</td>
</tr>
<tr>
<td align="center"><b>Wednesday</b></td>
<td align="center">Pervasive Computing</td>
<td align="center">Numerical Methods</td>
<td align="center">Mobile Computing</td>
<td align="center">Compiler Design</td>
<td align="center" colspan="3">Web Programming Lab</td>
</tr>
<tr>
<td align="center"><b>Thursday</b></td>
<td align="center">Scripting Language
<td align="center" colspan="3">Scripting Language Lab</td>
<td align="center">Numerical Methods</td>
<td align="center">Pervasive Computing</td>
<td align="center">Compiler Design</b></td>
</tr>
<tr>
<td align="center"><b>Friday</b></td>
<td align="center">Mobile Computing</td>
<td align="center">Numerical Methods</td>

5
<td align="center">Pervasive Computing</td>
<td align="center">Scripting Language</td>
<td align="center">Compiler Design</b></td>
<td align="center">Numerical Methods</td>
<td align="center">Pervasive Computing</td>
</tr>
<tr>
<td align="center"><b>Saturday</b></td>
<td align="center" colspan="2">Unit Test
<td align="center">Mobile Computing</td>
<td align="center">Numerical Methods</td>
<td align="center" colspan="3">Holiday</b></td>
</tr>
</table>
</body>
</html>
OUTPUT

6
RESULT
Thus, the time-table webpage (HTML file) has been created successfully using table
element.

7
EX.NO: 1B CREATION OF A FORM USING HTML
DATE: 30/11/18
AIM
To create form using html.
SOFTWARE REQUIRED
1. Text Editor &Web Browser.
DESCRIPTION
1. The <form> element represents a document section that contains interactive controls to
submit information to a web server.
Attributes:
action: The URI of a program that processes the form information. This value can
be overridden by a form action attribute on a <button> or <input> element.
method: The HTTP method that the browser uses to submit the form. Possible values
are: post and get.
2. The <fieldset> element is used to group several controls as well as labels (<label>) within
a web form.
3. The <legend> Element represents a caption for the content of its parent <fieldset>.
4. The <label> Element represents a caption for an item in a user interface. It can be
associated with a control either by placing the control element inside
5. the label element, or by using the for attribute.
6. The <textarea> element represents a multi-line plain-text editing control.
7. The select (<select>) element represents a control that presents a menu of options.
8. The options within the menu are represented by <option> elements, which can be grouped
by <optgroup> elements.
Attributes:
selected: If present, this Boolean attribute indicates that the option is initially selected. If
the <option>element is the descendant of a<select> element whose multiple attribute is not set,
only one single<option>of this<select>element may have the selected attribute.
9. The<input> is used to create interactive controls for web-based forms in order to accept
data from the user. The semantics of an <input> varies considerably depending on the
value of its type attribute.
Attributes: type: Possible values are: text, password, date, time, email, file, radio, checkbox,
submit, reset etc.

8
name: The name of the control, which is submitted with the form data.
value: The initial value of the control. This attribute is optional except when the value of
the type attribute is radio or checkbox.
checked: When the value of the type attribute is radio or checkbox, the presence of this
Boolean attribute indicates that the control is selected by default; otherwise it is ignored.
maxlength: If the value of the type attribute is text, email, search, password or url. This
attribute specifies the maximum number of characters (in Unicode code points) that the user can
enter; for other control types, it is ignored.
minlength: If the value of the type attribute is text, email, search, password or url, this
attribute specifies the minimum number of characters (in Unicode code points) that the user can
enter; for other control types, it is ignored.

PROGRAM
<html>
<head>
<title>Forms</title>
<center><h2>Value Added Course Registration Form</h2></center
</head>
<body >
<form action=" " method="">
<table><tr><td>
FirstName:</td><td><input type="text" name="fname"></td></tr>
<tr><td>LastName:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Password:</td><td><input type="password" name="pwd"></td></tr>
<tr><td>Email ID:</td><td><input type="text" name="mail"><//td></tr>
<tr><td>Date Of Birth:</td><td><input type="date"></td></tr>
<tr><td>CGPF:</td><td><input type="range" min="1" max="10"step="0.1"></td></tr></table>
<table width="100%">
<tr><td><fieldset><legend>Course</legend>
Big Data &nbsp; &nbsp;&nbsp;<input type="checkbox" name="bigdata"><br>
Andriod &nbsp; &nbsp; &nbsp; &nbsp;<input type="checkbox" name="andriod"><br>
IOS: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input type="checkbox" name="IOS">

9
</fieldset></table><table>
<tr><td>Department</td><td>
<select>
<option>ECE</option>
<option>IT</option>
<option>CSE</option></select></td></tr>
</table>
<table width="100%">
<tr><td><fieldset><legend>Gender</legend>
Male &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="radio" name="male" checked><br>
Female &nbsp; &nbsp;<input type="radio" name="female">
</fieldset></td></tr></table><table>
<tr><td>Comments:</td><td><textarea row="50" column="1300">
</textarea></td></tr>
<tr><td><br>Resume Upload:</td><td><br><input type="file" name="filename"></td></tr>
<tr><td><br><input type="submit" name="submit" value="Register">
&nbsp; &nbsp; &nbsp; &nbsp;<input type="reset" name="submit" value="Clear"></td></tr>
</table>
</form>
</body>
</html>
OUTPUT

10
RESULT
Thus, the web page (HTML file) form has been created successfully using form elements.

11
EX.NO:1C CREATION OF A LISTS USING HTML
DATE: 30/11/18
AIM
To create lists using html
SOFTWARE REQUIRED
1. Text Editor & Web Browser
DESCRIPTION

1. Unordered Lists

<ul>…</ul> tags are used to define unordered lists.


<li>…</li> tags are used to define list item.
Possible values for Unordered List: disc, circle, square.
2. Ordered Lists

<ol>…</ol> tags are used to define ordered lists.


<li>…</li> tags are used to define list item.
Possible values for Ordered List: decimal, lower-roman, upper-roman.
3. Description Lists (Prior to HTML5: Definition Lists)
<dl>…</dl> tags are used to define description lists.
<dt>…</dt> tags are used to identify a term in definition list.
<dd>…</dd> tags are used to describe the term.
4. CSS
Use list-style-type CSS Property to specify type of style type.
PROGRAM

<html>
<head>
<title>List Demo</title>
</head>
<body style="background-color: #888FF">
<h2 style="text-align: left">OOP</h2>
<h3 style="text-decoration: underline;">Java Features</h3>
<ul style="list-style-type: square">

12
<li>platform-independent</li>
<li>robust</li>
<li>secure</li>
<li>High performance</li>
<li>Multithreading</li>
</ul>
<h3 style="text-decoration: underline;">Access specifiers in Java</h3>
<ol style="list-style-type: upper-roman;">
<li>public</li>
<li>private</li>
<li>protected</li>
<li>default</li>
</ol>
<h3 style="text-decoration: underline;">Server-side program</h3>
<dl>
<dt style="font-weight: bold;">Servlet</dt>
<dd>It is ajava program used in server side programming to build web applns.</dd>
<dt style="font-weight: bold;">Python</dt>
<dd>It is ajava program used in server side programming to build web applications and window
applications.</dd>
</dl>
</body>
</html>

13
OUTPUT

RESULT
Thus, the different types of list has been created successfully.

14
EX.NO: 1D CREATION OF HTML PAGES WITH FRAMES, LINKS,
DATE: 07/12/18 TABLES AND OTHER TAGS
AIM
To create a simple webpage using HTML that includes all tags.
DESCRIPTION

1. Write a HTML program in the notepad with the tags such as


A. FRAMES

With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of the others.
The Frameset Tag

The <frameset> tag defines how to divide the window into frames.
The Frame Tag
The <frame> tag defines what HTML document to put into each frame.
Example:
<frameset cols="25%, 75 %">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Tags and their Description:
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)

B. LINKS
A hyperlink is a reference (an address) to a resource on the web.
Example:
<a href="http://www.w3schools.com/">Visit W3Schools! </a> The
href Attribute:
The href attribute defines the link "address".
The target Attribute:
The target attribute defines where the linked document will be opened.
Tag and its Description:

15
<a> Defines an anchor
C. TABLES
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell.
Example:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Tags and their Description:
<Table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
2. Use appropriate tags to apply the background colors and desired styles as
Required and save the file with .html extension.
3. Run the program in the Web Browser.
PROGRAM
HOME.html:
<html>
<head>
<title>Home</title>
</head>
<frameset rows="25%, *">
<frame src="frame1.html">
<frameset cols="25%, *">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
</frameset>

16
</html>
FRAME.html:
<html>
<head><title>frame1</title>
</head>
<body bgcolor="blue">
<h1 style="color: green; font-size:15pt">
<marquee bgcolor="#cccccc" loop="-1" scrollamount="6" width="100%">
ADHIYAMAAN COLLEGE OF ENGINEERING AND
TECHNOLOGY </marquee>
</h1>
</body>
</html>
FRAME2.html:
<html>
<head><title>frame2</title>
<style type="text/css"> h1 {
font-size:25pt; color:black;
}
</style>
</head>
<body bgcolor="white">
<h1>click the link</h1>
<a href="intro.html" target=f3>Introduction</a><br>
<a href="dept.html" target=f3>Departments</a><br>
<a href="ad.html" target=f3>ADDRESS</a><br>
<a href="feed.html" target=f3>Feedback</a><br>
<a href="gall.html" target=f3>Gallery</a><br>
</body>
</html>

FRAME3.html:

17
<html>
<head><title>1st page</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and
Settings\Administrator\Desktop\ab\css1.css"/>
</head>
<body bgcolor="tan">
<h2> <center>YOU ARE IN HOME PAGE</center></h2>
</body>
</html>
AD.html:
<html>
<head><title>ADDRESS</title>
</head>
<body bgcolor="black">
<p>
<font color=red>
Name: Adhiyamaan College of Engineering and Technology<br>
Location: Hosur<br>
Contact No:04344 390390<br>
Website: www.adhiyamaan.ac.in<br>
</font>
</p>
</body>
</html>
DEPT.html:
<html>
<head><title>Departments</title>
</head>
<body>
<div align="center">
<table border=2>

18
<tr>
<th>Dept code</th>
<th>Dept name</th>
</tr>
<tr>
<td>01</td>
<td>CSE</td>
</tr>
<tr>
<td>02</td>
<td>ECE</td>
</tr>
<tr>
<td>03</td>
<td>EEE</td>
</tr>
<tr>
<td>04</td> <td>IT</td>
</tr>
<tr>
<td>05</td>
<td>MECH</td>
</tr>
<tr>
<td>06</td>
<td>AERO</td>
</tr>
</table>
</div>
</body>
</html>

19
FEED.html:
<html>
<head><title>feed</title>
</head>
<body bgcolor="black">
<p>
<font color=green>
To give your feedback mail to [email protected]
</font>
</p>
</body>
</html>
GALL.html:
<html>
<head><title>gall</title>
</head>
<body bgcolor="pink">
<p>
<font color=blue>
College Front View</font>
</p>
<img src="D: ace.jpeg">
</body>
</html>

20
OUTPUT

21
RESULT
Thus, the HTML pages are created using frames, links, tables and other tags and have been
executed successfully.

22
EX.NO: 2 CREATION OF A PROGRAM USING
DATE: 14/12/18 JAVASCRIPT
AIM
To develop user-interactive JavaScript programs.
SOFTWARE REQUIRED
1. Text Editor & Web Browser
DESCRIPTION
1. Use <script> element inside <head> element for including JavaScript code.
a. External JavaScript File Code:
<script src=” filename.js”></script>
b. Internal:
<script>code </script>
2. Use alert () method to display the contents on dialog box.
3. Use document.writeln() method to display the contents on web page.
4. Use prompt () method to get input from the user.

PROGRAMS

(Displaying Greeting Message)


<html>
<head>
<title>greeting</title>
<script> var name=prompt ("enter your
name",""); document.writeln("Hello
&nbsp;"+name);
</script>
</head>
<body>
</body>
</html>

23
OUTPUT

(Displaying Odd Numbers)

<html>
<head>
<title>Displaying Odd Numbers</title>
<script> var x=prompt ("Enter a
number",""); for (var i=1;i<x;i++) {
if(i%2==0) continue;
document.writeln(i+"<br>");
}
</script>
</head>
<body>

24
</body>
</html>
OUTPUT

(Displaying Prime Number)


<html> <head>
<script> function
isPrime(n) { if (n<2)
{ return false; }

else if (n==2) { return true; } else {


for (var i=2; i<=Math.sqrt(n);i++) {
if (n % i==0) { return false;
} } return
true;
}
}
</script>

25
</head>
<body>
<p> <script> testNum=parseFloat(prompt("Enter a positive
integer"," ")); if (isPrime(testNum)) {
document.write(testNum + "is a prime number.");
} else
{
document.write(testNum + "is not a prime number.");
}
</script>
</p>
</body>
</html>

OUTPUT

26
(Adding Numbers)

<html>
<head>
<title>Adding Numbers</title>
<script> function
calculate ()
{ var inputArray=document.getElementById("inputNums").value.
split("\n"); var sum=0; for (i in inputArray)
sum=sum+Number(inputArray[i]); var
textbox=document.getElementById("outputNum"); textbox.value=sum;
//alert(sum);
}
</script>

27
</head>
<body>
<form method="post">
<textarea rows="5"name="inputNums" id="inputNums"></textarea><br>
<input type="button" value="Add" onclick="return calculate();"><br><br>
<input type="text" id="outputNum" name="outputNum">
</form>
</body>
</html>

OUTPUT

(Fibonacci Sequence)
<html>
<head> <script> function
generateFibonacci(n)
{ var fibn=0; var
fib1=1; var fib2=-1;
if(n>1) { for (var
i=0;i<=n;i++)

28
{ fibn=fib1+fib2;
document.write(fibn+"<br>");
fib2=fib1; fib1=fibn;
} } else
if(n==1)
{ fibn=1;
documen
t.write(fi
bn);
} else { fibn=0;
document.write(fibn);
}
}
</script>
</head>
<body> <script> var
num=parseInt(prompt('Enter the value:',""));
generateFibonacci(num);
</script>
</body>
</html>

OUTPUT

29
(Palindrome)

<html>
<head> <script> function
isPalindrome(str)
{ var len=str. length-1; for
(var i=0; i<str.length;i++)
{ if(str[i]! ==str[len-i])
{ return false;
} } return
true; }
</script>
</head>
<body> <script> var inputString=prompt ('Enter the
value:',""); if(isPalindrome(inputString))
document.write('Given String '+inputString+' is Palindrome');
else document.write('Given String '+inputString+' is not
Palindrome');
</script>
</body>
</html>
OUTPUT

30
RESULT
Thus, the HTML pages are created to develop user-interactive JavaScript programs and
has been executed successfully.

31
EX.NO:3 CREATION OF A SCRIPT THAT COLLECTS
DATE:21/12/18 NUMBERS FROM PAGE AND THEN ADDS THEN
UP AND PRINTS THEM TO A BLANK FIELD ON
THE PAGE

AIM
To create a script that collects numbers from a page and then adds them up and prints
them to a blank field on the page.
ALGORITHM
1. Start.
2. Write a function to get the input data in an array.
3. Write another function to add the elements in the array.
4. Display the result in the web page.
5. Stop.
PROGRAM

<html>
<head>
<title>Demo of adding element in an array</title>
</head>
<body>
<center>
<h1>Adding Elements in Array</h1>
<script type="text/javascript"> var
data = new Array (); function
add_element()
{
data.push(document.getElementById('t1').value); document.getElementById('t1').value='';
} function add
()
{ var sum=0; for (i=0;
i<data.length;i++) {
sum=parseInt(sum)+
parseInt(data[i]) ;
} document.write('Addition of elements in data array :
'+sum);

32
}
</script>
<input type=number id='t1'><input type=button value='Add' onClick='add_element()';>
<input type=button value='Sum' onClick='add ()';>
</center>
</body>
</html>
OUTPUT

33
RESULT
Thus, the HTML pages to create a script that collects numbers from a page and then adds
up and prints them to a blank field on the page has been executed successfully.

34
EX.NO: 4 CREATION OF A SCRIPT THAT PROMPTS THE USER

DATE:21/12/18 FOR A NUMBER AND THEN COUNTS FROM 1

TO THAT NUMBER AND DISPLAY ONLY THE

ODD NUMBERS
AIM
To create a script that prompts the user for a number and then counts from 1 to that
number displaying only the odd numbers.

ALGORITHM
1. Start.
2. Ask the user to enter a number
3. Then increment the number from 1 to the number entered by user by 2.
4. Print the number
5. Stop.
PROGRAM

<html>
<body>
<script type="text/javascript"> var num = prompt
("Enter a number:\n","");
document.writeln("<h1>Odd numbers are \n</h1>");
if(num>0 && num !=null)
{ for(i=1;
i<=num;i+=2)
{
document.writeln("<h1>\n</h1>"); document.writeln(i);
} } else alert ("No input
supplied");
</script>
</body></html>

OUTPUT

35
RESULT
Thus, the HTML pages to create a script that prompts the user for a number and then
counts from 1 to that number and displays only the odd numbers has been executed successfully.

36
EX.NO: 5 CREATION OF A SCRIPT THAT WILL CHECK THE FIELD IN
DATE:21/12/18 ASSSIGNMENT FOR DATA AND ALERT THE USER IF IT IS
BLANK

AIM
To create a script that will check the field in Assignment 1 for data and alert the user if
it is blank. This script should run from a button.

ALGORITHM
1. Start.
2. Write a function to get the input from the user.
3. If input is supplied, display the webpage with field contains data, otherwise no input
supplied.
4. Stop.
PROGRAM

<html>
<head>
<title>Check</title>
<script type="text/javascript"> function
disp()
{ var
str=document.getElementById("strn");
if(str.value=="")
{ alert ("No input
supplied");
} else
document.writeln("Field contains data");
}
</script>
</head>
<body>
<form name="f1" ID="check">
<input type=text name="st" ID="strn">

37
<input type=button ID="click" value="Click Me" onclick='disp();'>
</form>
</body>
</html>

OUTPUT

RESULT
Thus, the HTML pages to create a script that will check the field in assignment for data
and alert the user if it is blank, has been executed successfully.

38
EX.NO: 6 CREATION OF A WEB SITE USING HTML AND CSS
DATE: 04/01/19

AIM
To create website using CSS and HTML.
ALGORITHM
Inline Style Sheet:

1. Initialize the HTML tags and create the home page.


2. Display necessary text information in the web pages.
3. Style is written directly on the element it affects i.e., on the body tag.
4. Stop the program.

Embedded Style Sheet:

1. Initialize the HTML tags and create the home page.


2. Display necessary text information in the web pages.
3. CSS rule(s) i.e., the styles are placed in the head of the document via the style element.
4. Stop the program.

External Style Sheet:

1. Initialize the HTML tags and create the home page.


2. Display necessary text information in the web pages.
3. Styles in external style sheet are a separate file apart from the HTML file(s).
4. The external style sheet is given a .css extension.
5. Stop the program.

PROGRAM

Main.html:

<html>
<head>
<title> CRYPTO_2018</title>
<frameset rows="35%,75%, *" bordercolor="skyblue" border="1">
<frame src="style.html" name="ACE">
<frameset cols="45%, *">
<frame src="list.html" name="list">

39
<frame src ="detail.html" name="details">
</frameset>
</head>
</html>
Details.html:
<html>
<body bgcolor="pink">
<marquee behaviour="alternate" direction ="center" width="80%">
<h1><b><i>DEPARTMENT OF CSE</b></i></h1>
</marquee>
</body>
</body>
</html>
List.html: <html>
<head>
<title> LIST OF CSS </title>
<style type="text/css"> a:
link{color:pink} a:
visited{color:green} a:
active{color:red}
</style>
</head>
<body>
<ul>
<li type="disc"><a href="cse.html" target="details">ABOUT CSE DEPARTMENT</a>
<li type="disc"><a href="crypto.html" target="details">ABOUT CRYPTO</a> <li
type="disc"><a href="call.html" target="details">CALL FOR PAPERS</a>
<li type="disc"><a href="guide.html" target="details">INSTRUCTION AND IMPORTANT
DATES</a>
<li type="disc"><a href="contact.html" target="details">CONTACT US</a>
</ul>
</body></html>
Style.html:

40
<html>
<head>
<title>ADHIYAMAAN COLLEGE OF ENGINEERING</title>
</head>
<body bgcolor="#b1cbbb">
<marquee behaviour="alternate">
<h1> <font color=black> CRYPTO_2018</font></h1>
</marquee>
</body>
</html>
Cse.html:
<html>
<head>
<title> CSE DEPARTMENT</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">About CSE Department</h1>
<p><b> The Department of Computer science has latest cutting-edge technology Laboratories
for Under Graduate studies and efficient Research activities. Research areas include wireless
sensor networks, image processing, pervasive computing, data mining, cloud computing etc.,
The Department has a team of dedicated faculty members
</b></p><br/><br/><br/>
<h1 style="color: maroon"><marquee><div id="footer"><p> THANK YOU FOR VISITING
US</marquee></h1>
</p> </div></div></div>
</body>
</html>
Crypto.html: <html>
<head>
<title> CRYPTO_2018</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

41
<body>
<h1> CRYPTO_2018</h1>
<DIV><p align="justify"><h1>Objective of the conference</h1>
<p><br> CRYPTO_2018 aims to offer an innovate environment by bringing together
technologists, academicians, research scholar, working professionals, and student to and exhibit
their works on emerging trends in computing, Communication and Technology. </p><br> <br>
</body>
</html>
Call.html: <html>
<head>
<title> CALL FOR PAPER </title>
<style type="text/css"> body h1{color: blue; text-
align: center; font-size:10pt;} h3{text-decoration:
bold; color: "green"}
DIV {margin:1em 2em 3em 4em; color: "blue”, font-size:7pt}
A: link{border: blue}
A: visited{border:green}
A: active{border:black}
</style>
</head>
<body>
<h1> Authors are invited to submit papers on any recent innoviation and are not restricted to the
fiollowing:<h1>
<ul>
<li> <b>IMAGE PROCESSING/SIGNAL PROCESSING</b></li>
<li><b>WIRELESS SENSOR NETWORKS</b></li>
<li><b>INTELLIGENT SYSTEMS</b></li>
<li><b>UBIQUITOUS COMPUTING</b></li>
<li> <b>CLOUD COMPUTING</b></li>
<li><b>GRID COMPUTING</b></li> <li><b>SOFT
COMPUTING</b></li>
<li><b>DATA MINING</b></li>
<li><b>BIO INFORMATICS</b></li>

42
<br>
<br>
<A href="detail.html">BACK</A><br>
</body>
</html>
Guide.html: <html>
<head>
<style type="text/css" media="all">
h1{color:indianred;font-weight:bold} p{color:black}
DIV {margin:1em 2em 3em 4em; color:"dark blue”, font-size:20px}
A: link {border:thin dotted red}
A: visited {border:thin dotted green}
A: active{border:black}
</style>
</head>
<h1><marquee>INSTRUCTIONS</marquee></h1><hr><br>
<body>
<p>Papers to be submitted should not be previously published in another forum. The authors
willing to present papers in the conference are requested to submit the full-length paper in .doc
format, not exceeding 10 printed/typed pages (IEEE single column format) by e-mail as an
attachment on or before the deadline. All papers will be reviewed by the field experts. The
corresponding author of selected paper will be intimated through e-mail. Presentation in the
conference will be in the form of oral or posters.
The abstract of the accepted papers will be published in the proceedings of the conference
and the softcopy of all the accepted papers will be presented in e-proceedings as full-length paper.
Papers received after the deadline may not be included in the conference proceedings.
The paper registered for the conference must be presented by one of the authors in the
conference. Certificate of participation/presentation will be issued to the registered
delegates/authors attending the conference. </p>
<h1>IMPORTANT DATES</h1><br>
<body>
<p> <table border="1">
<tr>
<td>Last date for submitting full length paper</td>

43
<td>02/12/2018</td>
</tr>
<tr>
<td>Notification of acceptance of full length paper</td>
<td>15/12/2018</td>
</tr>
<tr>
<td>Registration & Camera-ready paper</td>
<td>20/12/2018</td>
</tr>
<tr>
<td>Conference</td>
<td>27/12/2018& 28/12/2018</td>
</tr>
</table>
</p><br>
<a href="detail.html">BACK</a><br>
</body>
</html>

Contact.html: <html>
<head>
<title> CONTACT US</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1> CONTACT US</h1>
<h3><br>THE CONVENOR, </br> <br>CRYPTO_2018</br> <br> DEPARTMENT OF
COMPUTER SCIENCE</br> <br>ACE COLLEGE OF TECHNOLOGY, </br>
<br>HOSUR</br><br>Email-id: [email protected]</br> </h3>

44
<A href="detail.html">BACK</A><br>
</body>
</html> Style.css:
body {background-position: “center";
background-repeat: no-repeat;} h1
{color: orange; text-align: center;
font-size: “x-large"; font-family:
“Forte";} h3 {color: blue; text-align:
left; font-size: “XX-larger"; font-
family: “Times New Roman";} p
{font-family: “Lucida Calligraphy";
font-weight: “italic"; font-size:10pt;
color: “blue";}

OUTPUT

Main.html:

Details.html:

45
List.html:

Style.html:

Call.html:

Cse.html:

46
Crypto.html:

Guide.html:

47
Contact.html:

RESULT
Thus, the HTML pages to create a website using CSS has been
executed successfully

48
EX.NO: 7 CLIENT SIDE VALIDATION USING DHTML
DATE: 11/01/19
AIM
To perform client-side validation using DHTML
SOFTWARE REQUIRED
1. Text Editor & Web Browser
ALGORITHM
1. Create ClientValidation.html file to design the form.
2. Create validation.js (javascript) file to validate the html form.
3. Use Regular Expression pattern matching to validate various fields.
4. Use DOM method document.getElementById to accesses the element with specified id.
PROGRAM
Validate.html:
<! DOCTYPE html>
<html>
<head>
<title>Form Demo</title>
<style> h2{text-align:
center;} legend {font-
weight: bold;} label { float:
left;
width:12em;
text-align: right;
} input, textarea, select, fieldset
{ margin-left:1em; margin-
bottom:1em;} input: focus {
border:1px solid #871452
}
#register { margin-left:50em;}
</style>
<script src="validation.js"></script>
</head>

49
<body>
<h2>Placement Registration Form</h2>
<form onsubmit="return validate ();" method="post" action="success.html">
<fieldset>
<legend>Personal Information</legend>
<label for="firstName">First Name:</label><input type="text" name="firstname"
id="firstName" required><br>
<label for="lastName">Last Name:</label><input type="text" name="lastname" id="lastName"
required><br>
<label for="password">Password:</label><input type="password" name="password"
id="password" required><br>
<label for="rePassword">Confirm Password:</label><input type="password"
name="rePassword" id="rePassword" required><br>
<label>Gender:</label>
<input type="radio" name="gender" id="male" value="male">Male
<input type="radio" name="gender" id="female" value="female">Female<br> <label
for="email">E-Mail ID:</label><input type="email" name="email" id="email"
required><br>
<label for="dob">DOB:</label><input type="date" name="dob" id="dob" required><br> <label
for="mobile">Mobile:</label><input type="text" name="mobile" id="mobile" required><br>
<label for="address">Address:</label><textarea rows="5" cols="30" name="address"
id="address" required></textarea>
</fieldset>
<fieldset>
<legend>Academics</legend>
<label for="branch">Branch:</label>
<select id="branch" name="branch">
<option value="CSE">CSE</option>
<option value="ECE">ECE</option>
<option value="EEE">EEE</option>
<option value="IT">IT</option>
<option value="MECH">MECH</option>
</select><br>
<label for="tenth">10th:</label><input type="text" name="tenth" id="tenth" required><br>
<label for="twelth">12th:</label><input type="text" name="twelth" id="twelth" required><br>

50
<label for="ug">UG:</label><input type="text" name="ug" id="ug" required><br>
</fieldset>
<fieldset>
<legend>Skills</legend>
<label>Programming languages:</label>
<input type="checkbox" name="plang[]" value="c">C
<input type="checkbox" name="plang[]" value="cplus">C++
<input type="checkbox" name="plang[]" value="java">JAVA
<input type="checkbox" name="plang[]" value="csharp">C#<br>
<label for="db">DBMS:</label>
<input type="checkbox" name="db[]" value="oracle">ORACLE
<input type="checkbox" name="db[]" value="mysql">MySQL
<input type="checkbox" name="db[]" value="db2">DB2
<input type="checkbox" name="db[]" value="others">Others
</fieldset>
<input type="submit" name="register" id="register" value="Register">
<input type="reset" value="clear">
</form>
</body>
</html>

Success.html:
<html>
<head>
<script type="text/javascript"> window.alert("Registration
Successful");
</script>
</head>
<body>
<p>ClickRefresh(or)Reload to register again</p>
</body>
</html>

51
Reg.html:
function validate () { var checkName=/^[A-Z] \w {4,8} $/; var
checkMail=/^[a-zA-Z0-9.-] +@[a-zA-Z0-9.-] +\. [a-zA-Z] {2,4} $/; var
checkPassword=/^ [a-zA-Z0-9! @#$%^&*] {6,12} $/; var
chechMobile=/^d {10}/; var
myFirstName=document.getElementById("firstName"); var
myLastName=document.getElementById("lastname"); var
myPassword=document.getElementById("password"); var
myRepassword=document.getElementById("rePassword"); var
myEmail=document.getElementById("email"); var
myMobile=document.getElementById("mobile"); var
myGender=document.getElementByName("gender"); var
myLanguages=document.getElementByName("plang[]"); var
myDatabases=document.getElementsByName("db[]");
if(myPassword.value.search(checkName)==-1) { alert ("please enter
your Firstname correctly."); myFirstName.focus(); return false; }
if(myEmail.value.search(checkMail)==-1) {
alert ("please enter your email correctly");
myEmail.focus(); return false; }
if(myEmail.value.search(checkMobile)==-1) { alert
("please enter your mobile number correctly");
myMobile.focus(); return false; } if (!
checkSelected(myLanguages)) { alert ("please select
atleast one programming language"); return false; } if (!
checkSelected(myDatabases)) { alert ("please select
atleast one DBMS"); return false; } return true; }
function checkSelected(arrayValues) { var
hasChecked=false; for (var i=0;
i<arrayValues.length;i++) { if(arrayValues[i]. checked) {
hasChecked=true; break; } } return hasChecked;
}

OUTPUT

52
53
RESULT

Thus, the client-side form has been validated successfully.

54
EX.NO: 8A INVOKING SERVLET FROM HTML FOR
DATE:25/01/19 CALCULATION OF COMPOUND INTEREST

AIM
To invoke a servlet from HTML.
SOFTWARE REQUIRED
1. Text Editor & Web Browser
2. JDK
3. Apache Tomcat Server
4. NetBeans IDE (optional)
ALGORITHM
Method 1 (Without using IDE)
1. Create a servlet InterestServlet.
2. Compile the servlet and keep the compiled class file in webapps\lab\WEBINF\ classes
directory (lab is the name of the application directory).
3. Create a form in html file ciform. Using action attribute in form tag call the servlet.
4. The html file ciform is kept in webapps\lab directory.
5. Ensure that PATH, JAVA_HOME, CATALINA_HOME, CLASSPATH variables are set
with proper values.
6. Edit the web xml file to add servlet information within web-app tag.
7. Start startup batch file in the bin directory to start the Tomcat Server.
8. Open a web browser and enter the url http://localhost:8080/lab/ciform.html and hit enter.
9. Start shutdown batch file in the bin directory to stop the Tomcat Server.

Method 2 (Using IDE)


1. Open NetBeans IDE.
2. Creating Web Application
a. Go to File Menu ->New Project->Choose Java Web->Select Web Application
(Choose Project). Click Next.
b. Specify Project Name as InterestApplication (Name and Location). Click Next.
c. Click Next (Server and Settings). Then, click Finish (Frameworks)
d. Now the Web Application InterestApplication is created.

55
3. Creating form Use index.jsp(equivalent to ciform.html) to create form. In the action
attribute of form specify the URI as InterestServlet.
4. Creating Servlet
a. Right-Click on the InterestApplication node -> Click New ->Servlet.
b. Type the Class Name as InterestServlet. Give the Package name as lab. Click
Next.
c. Make sure that Add information to deployment descriptor (web.xml)
checkbox is selected. Click Finish. d. Do the necessary code.
5. Right-Click on the InterestApplication node -> Click Build to compile and package.
6. Click Deploy and then click. Run to execute the application.
PROGRAM
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>compoundinterest</title>
</head>
<body style="background-color:khaki">
<h1>compoundinterest</h1>
<form action="http://localhost:423/Expt8a/interestservlet"
method="post">
<table>
<tr>
<td>enter the principal:</td>
<td><input type="text" name="p1"/></td>
</tr> <tr> <td>enter the term:</td>
<td><input type="text" name="n1"/></td>
</tr>
<tr> <td>enter the rate of interest:</td>
<td><input type="text" name="r1"/></td>
</tr>

56
<tr>
<td><input type="submit" name="s" value="FIND
COMPOUND INTEREST"/></td> <td><input type="reset" name="s"
value="CLEAR"/></td>
</tr>
</table>
</form>
</body>
</html>
InterestServlet.html:

package tt;

import java.io. *;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class interestservlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
response.setContentType("text/html;charset=UTF-8");
int p=Integer.parseInt(request.getParameter("p1"));
int n=Integer.parseInt(request.getParameter("n1"));
double r=Double.parseDouble(request.getParameter("r1"));
PrintWriter out=response.getWriter();
double ci=p*(Math.pow(1+(r/100), n)-1);
try { out.println("<html>");
out.println("<title>Compound interest Servlet</title>");
out.println("</head>");
out.println("<body style=\"background-color:khaki\">");
out.println("<h1>Compound interest</h1></hr>");

57
out.println("<table border=\"1\">");
out.println("<tr><td>principal Amount </td><td>"+p+"</td></tr>");
out.println("<tr><td>Deposit term </td><td>"+n+"</td></tr>");
out.println("<tr><td>Rate of interest</td><td>"+r+"</td></tr>");
out.println("<table>");
out.println("hr/>compound interest amount:"+ci);
out.println("</body>");
out.println("</html>");
}
finally
{
out.close();
}
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
doGet(request,response);
}

} Web.xml:

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


<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-
app_3_1.xsd">
<servlet>
<servlet-name>interestservlet</servlet-name>
<servlet-class>tt.interestservlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>interestservlet</servlet-name>
<url-pattern>/interestservlet</url-pattern>

58
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app> >

OUTPUT

59
RESULT
Thus, the servlet has been invoked successfully using HTML.

60
EX.NO: 8B SERVLET PROGRAM USING HTTP SERVLET FOR
DATE:1/02/19 ONLINE QUIZ

AIM
To write a servlet program using HTTP Servlet.
ALGORITHM
1. Create a HTML page including some form elements.
2. Inside the <form> tag, for the action attribute specify the full path name of the. jsp file.
3. Create a .java file that imports javax.http.servlet.*;
4. Create a class that extends HttpServlet.
5. This will request some information by filling out a form containing a link to a servlet
when the Submit button is clicked.
6. The server locates the requested servlet.
7. Define the doPost function to process the data obtained from the HTML file.
8. The servlet then gathers the information needed to satisfy the user's request and constructs
a Web page containing the information.
9. That Web page is then displayed on the user's browser.
PROGRAM
index.html
<html>
<head>
<title> online exam </title>
</head>
<body>
<form action="source_servlet"
method="get">
<h3> 1. Who invented mainframe system? </h3>
<input type="radio" name="s1" value="IBM"> ibm <br>
<input type="radio" name="s1" value="MICROSOFT"> microsoft
<br>
<input type="radio" name="s1" value="INFOSYS"> infosys <br>
<input type="radio" name="s1" value="CISCO"> cisco <br>
<h3> 2. What is the capital of Sri Lanka? </h3>
<input type="radio" name="s2" value="MADRID"> madrid <br>

61
<input type="radio" name="s2" value="COLOMBO"> colombo
<br>
<input type="radio" name="s2" value="DELHI"> delhi <br>
<input type="radio" name="s2" value="MOSCOW"> moscow <br>
<h3> 3. What is the national game of India? </h3>
<input type="radio" name="s3" value="HOCKEY"> hockey <br>
<input type="radio" name="s3" value="CRICKET">cricket <br>
<input type="radio" name="s3" value="FOOTBALL"> football
<br>
<input type="radio" name="s3" value="VOLLEYBALL">
volleyball <br>
<h3> 4. What is the NATO name of SUKHOI jets? </h3>
<input type="radio" name="s4" value="FLANKERS"> flankers
<br>
<input type="radio" name="s4" value="FOXBOAT"> foxboat <br>
<input type="radio" name="s4" value="FISHBOAT"> fishboat
<br>
<input type="radio" name="s4" value="FOXTROT"> foxboat <br>
<h3> 5. What was the first name of graphical browser? </h3>
<input type="radio" name="s5" value="NETSCAPE"> netscape
<br>
<input type="radio" name="s5" value="IE"> ie <br>
<input type="radio" name="s5" value="MOZILLA"> mozilla <br>
<input type="radio" name="s5" value="OPERA"> opera <br>
<input type="submit" value="submit">
</form>
</body>
</html>
source_servlet.java:
import java.io. *;
import javax.servlet.*;
import javax.servlet.http.*;
import java.net. *;
public class source_servlet extends HttpServlet{
public void doGet(HttpServletRequest request,HttpServletResponse
response) throws ServletException,IOException
{
response.setContentType("text/html");
PrintWriter out=response.getWriter();
BufferedReader br=request.getReader();
int score=0;

62
String str;
try{
str=request.getParameter("s1");
if(str.equals("IBM"))
score++;
str=request.getParameter("s2");
if(str.equals("COLOMBO"))
score++;
str=request.getParameter("s3");
if(str.equals("HOCKEY"))
score++;
str=request.getParameter("s4");
if(str.equals("FLANKERS"))
score++;
str=request.getParameter("s5");
if(str.equals("MOZILLA"))
score++;
out.println("<html><head><title>result</title></head><body>
Yourscore");
out.println(Integer.toString(score)+"</body></html>");
out.flush();
out.close();
}
catch (Exception e)
{}
}
}
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>source_servlet</servlet-name>
<servlet-class>source_servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>source_servlet</servlet-name>
<url-pattern>/source_servlet</url-pattern>

63
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>

OUTPUT

64
RESULT
Thus, the servlet program using http servlet has been executed and verified successfully.

65
EX.NO:8C ONLINE APPLICATION WITH DATABASE ACCESS
DATE: 22/02/19

AIM
To develop an Online application with data access for displaying student’s mark list using
java servlet and MySQL database.
ALGORITHM
1. Start.
2. Create a MS-Access database table named student for storing student’s mark
3. Create an html form for entering the register number of the student.
4. Open control panel and make the database connectivity settings.
5. Create a servlet for processing the student’s marks from the database.
6. Deploy the servlet and the html page in the Netbeans 6.8 IDE to create the application
package.
7. Run the application in the IDE.
8. The student’s mark list for the corresponding register number will be displayed.
9. Stop.

index.html:
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<style>
body{
font-family: cursive;
background-color: #f5f5f5
}
div{
width: 400px;
margin: 0px auto;
box-shadow: 0px 1px 10px #a8a8a8;
background-color: #fff;
padding-bottom: 10px
}

66
h1{
background-color: #34cbd1;
text-align: center;
margin-top: 0;
padding: 20px;
color: #fff
}
input{display: block; margin:auto; font-size: 20px}
p{text-align: center;font-size: 20px;color: #82a28a;margin:0}
input{width: 70%;border: 1px solid #34cbd1;background-color: #fff;outline:
none;border-radius: 5px;height:40px;padding: 10px}
input[type="submit"]:hover{background-color: #54b0bc;border: 0}
input[type="submit"]{background-color: #34cbd1;color: #fff;cursor: pointer}
a{padding: 5px; border-radius: 3px; background-color: #c0eb30;text-decoration:
none;display: inline-block;color: #000;}
a:hover{color: #fff; background-color: #4cce56;transition: all 0.3s}
</style>
</head>
<body>
<div>
<h1>Register</h1>
<form
action="http://localhost:423/8c/Student"
method="post">
<p>Enter your Name</p>
<input type="text"
name="name">
<p>Enter your Roll No</p>
<input type="text" name="roll">
<p>Enter your Marks1</p>
<input type="text" name="m1">
<p>Enter your Marks2</p>
<input type="text" name="m2">
<p>Enter your Marks3</p>
<input type="text" name="m3">
<p>Enter your Marks4</p>

67
<input type="text" name="m4">
<p>Enter your Marks5</p>
<input type="text" name="m5">
<p>Enter your Marks6</p>
<input type="text"
name="m6"><br>
<input type="submit"
value="Submit">

</form>
</div>
</body>
</html>
Student.java:

package td;
import javax.servlet.*;
import java.io.*;
import java.sql.*;
public class Student extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res) throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
out.println("<html>");
out.println("<head>");
out.println("<title>Register</title>");
out.println("<style>");
out.println("body{font-family: cursive;background-color: #f5f5f5}");
out.println("div{width: 400px;margin: 0px auto;box-shadow: 0px 1px 10px
#a8a8a8;background-color: #fff;padding-bottom: 10px;position: absolute;top: 50%;left:
50%;transform: translate(-50%,-50%)}");

68
out.println("h1{background-color: #222222;text-align: center;margin-top: 0;padding:
20px;color: #fff}");
out.println("p{text-align: center;font-size: 20px;color: #6a595b;margin;0}");
out.println("</style>");
out.println("</head>");
out.println("<body>");
out.println("<div>");

Connection con=null;
Statement stm=null;
String name=req.getParameter("name");
int roll=Integer.parseInt(req.getParameter("roll"));
int m1=Integer.parseInt(req.getParameter("m1"));
int m2=Integer.parseInt(req.getParameter("m2"));
int m3=Integer.parseInt(req.getParameter("m3"));
int m4=Integer.parseInt(req.getParameter("m4"));
int m5=Integer.parseInt(req.getParameter("m5"));
int m6=Integer.parseInt(req.getParameter("m6"));
try
{
Class.forName("com.mysql.jdbc.Driver");
con= DriverManager.getConnection("jdbc:mysql://localhost/umesh","root","");
String query = "insert into student
values('"+name+"',"+roll+","+m1+","+m2+","+m3+","+m4+","+m5+","+m6+")";
stm= con.createStatement();
int count=stm.executeUpdate(query);
if(count==0)
out.println("<h1 style='background-color: #eb1616'>Registration Failed</h1>");
else{
out.println("<html><body bgcolor=#ccbbaa");
out.println("<p>&nbsp;</p>");

69
out.println("<center><font color=blue><h2>Marks </h2></font></center>");
out.println("<p align=center>");
out.println("Name:<input type=text name=name value="+name+"><br>");
out.println("MARK1<input type=text name=mark1 value="+m1+">");
out.println("MARK2<input type=text name=mark2 value="+m2+">");
out.println("<p>");
out.println("<p align=center>");
out.println("MARK3<input type=text name=mark3 value="+m3+">");
out.println("MARK4<input type=text name=mark4 value="+m4+">");
out.println("<p>");
out.println("<p align=center>");
out.println("MARK5<input type=text name=mark5 value="+m5+">");
out.println("MARK6<input type=text name=mark6 value="+m6+">");
int tot1;
double avg1;
tot1=m1+m2+m3+m4+m5+m6;
avg1=((tot1)/6.0);
out.println("<hr>");
out.println("<p>&nbsp;</p>");
out.println("<p>&nbsp;</p>");
out.println("<p align=center>");
out.println("TOTAL<input type=text name=total value="+tot1+">");
out.println("AVERAGE<input type=text name=avg value="+avg1+">");
out.println("<p>");
out.println("</body></html>");
}

}
catch(ClassNotFoundException e){
out.println(e);

70
}
catch(SQLException e){
out.println(e);
}
finally
{
try
{
stm.close();
con.close();
}
catch(SQLException e){
out.println(e);
}
}
out.println("<p><a href='index.html'>Back</a></p>");
out.println("</div>");
out.println("</body>");
out.println("</html>");

}
}

Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-
app_3_1.xsd">
<servlet>
<servlet-name>Student</servlet-name>

71
<servlet-class>td.Student</servlet-class>
</servlet>
<servlet>
<servlet-name>Student</servlet-name>
<servlet-class>td.Student</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name> Student </servlet-name>
<url-pattern>/ Student </url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Student</servlet-name>
<url-pattern>/Student</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>

72
OUTPUT

73
RESULT
Thus, the three tier application for displaying student’s mark list using java servlet and
MySQL database has been developed successfully.

74
EX.NO: 9 CREATION OF A WEB APPLICATION THAT FUNCTIONS
DATE:22/02/19 AS A SIMPLE HAND CALCULATOR

AIM

To write a web application that functions as a simple hand calculator.

ALGORITHM
1.Start.
2.Create the HTML page with calculator design 3. Using javascript
write the logic for the calculator
4. Embed the CSS style sheet for calculator.
5. Stop.
PROGRAM
<html>
<head>
<style> body
{ background- color:
tan;
} h2
{
Text - align: center;
Text - decoration: underline;
}
. box {
background-color: #3d4543;
height:300px; width:250px;
border-radius:10px;
position:relative; top:80px;
left:40%; }
. display { background-
color: #222;
width:220px;

75
position:relative;
left:15px; top:20px;
height:40px; }
. display input { posi
tion:relative; left:2px;
top:2px; height:35px;
color:black; background-
color: #bccd95; font-
size:21px; text-align:right; }
. keys {
position:relative;
top:15px; }
. button {
width:40px;
height:30px;
border:none;
border-
radius:8px;
margin-
left:17px;
cursor:point
er; border-
top:2px solid
transparent;
}
.button.gray { color:white;
background-color: #6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink { color:black;
background-color: #ff4561;
border-bottom:black 2px solid;
} .button.bl ack { color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange { color:black;
background-color: FF9933;

76
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active { border-top:black 2
px solid; border-bottom:2px
#6f6f6f solid;
}
.pink:active { border-top:black
2px solid; border-bottom: #ff4561
2px solid;
}
.black:active { border-top:black
2px solid; border-bottom: #303030
2px solid;
}
.orange:active { border-top:black
2px solid; border-bottom: FF9933
2px solid;
} p { line-
height:10px;
}
</style> <script> function c(val) {
document.getElementById("d").value=val; }
function v(val)
{
document.getElementById("d").value+=val;
} function e
()
{
try
{
c(eval(document.getElementById("d").value))
}
catch(e)
{
c('Error')
}
}

77
</script>
</head>
<body>
<h2>Calculator </h2>
<div class="box">
<div class="display">
<input type="text" readonly size="18" id="d">
</div>
<div class="keys">
<p>
<input type="button"class="button gray"value="mrc"onclick='v("Created....................")'>
<input type="button" class="button gray" value="m-"onclick='v("...............by............")'>
<input type="button"class="button gray"value="m+"onclick='v("................ACE")'>
<input type="button"class="button pink"value="/"onclick='v ("/")'>
</p>

<p>
<input type="button" class="button black" value="7" onclick='v ("7")'>
<input type="button" class="button black" value="8" onclick='v ("8")'>
<input type="button" class="button black" value="9" onclick='v ("9")'>
<input type="button" class="button pink" value="*" onclick='v ("*")'>
</p>
<p>
<input type="button" class="button black" value="4" onclick='v ("4")'>
<input type="button" class="button black" value="5" onclick='v ("5")'>
<input type="button" class="button black" value="6" onclick='v ("6")'>
<input type="button" class="button pink" value="-" onclick='v ("-")'>
</p>
<p>
<input type="button" class="button black" value="1" onclick='v ("1")'>
<input type="button" class="button black" value="2" onclick='v ("2")'>

78
<input type="button" class="button black" value="3" onclick='v ("3")'>
<input type="button" class="button pink" value="+" onclick='v ("+")'>
</p>
<p>
<input type="button" class="button black" value="0" onclick='v ("0")'>
<input type="button" class="button black" value="." onclick='v (".")'>
<input type="button" class="button black" value="C" onclick='c ("")'>
<input type="button" class="button orange" value="=" onclick='e ()'>
</p>
</div>
</div>
</body>
</html>

OUTPUT:

79
80
RESULT

Thus, the web application for a simple hand calculator has been
created successfully

81
EX.NO:10 CREATION OF PROGRAM USING XML SCHEMA-XSLT/XSL
DATE: 1/03/19
AIM
To develop a XML program describing styles.
ALGORITHM
1. The xsl:output element specifies how to display the result tree.
2. The XSL processor produces the output result tree.
3. It should be specified by xsl:output element.
4. The method attribute of xsl:output specifies the overall process to produce the result tree.
5. The HTML output method results the tree as HTML document.

PROGRAM

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


<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide Your Heart</title>
<artist>Bonnie Taylor</artist>
<country> UK</country>
<company>CBS</company>
<price>9.90</price>
<year>1988</year>
</cd>

82
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country> USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still Got the Blues</title>
<artist>Gray Moore</artist>
<country> UK</country>
<company>Virgin Records</company>
<price>10.20</price>
<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazotta</artist>
<country> EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
<cd>
<title>One Night Only</title>
<artist>Bee Ges</artist>
<country> UK</country>
<company>Polydor</company>
<price>10.90</price>
<year>1998</year>

83
</cd>
<cd>
<title>Sylvias 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>
<country> UK</country>
<company>Pickwick</company>
<price>8.50</price>
<year>1990</year>
</cd>
</catalog>
cd_catalog.css:
catalog{
background-color: #ffffff;
width: 100%;
}
cd{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
title{
color: #ff0000;
font-size: 20pt;
}
artist{
color: #0000ff;
font-size: 20pt;

84
}
country,price,year,company{
display: block;
color: #000000;
margin-left: 20pt;
}

OUTPUT

RESULT
Thus, the program using XML-Schema-XSLT/XSL has been developed successfully.

85
EX.NO:11 CREATION OF PROGRAM USING AJAX
DATE: 15/03/19
AIM

To write a program using AJAX.

ALGORITHM

1. Create a text box and submit button of event handling submit form().
2. Create new Active object of XMLHTTP under exception.
3. If ready state is four then get the message else error message.

PROGRAM
Ajax.html:

<html>
<head>
<title>The Hello World of AJAX</title>
<script language="JavaScript" type="text/javascript"> function
getXmlHttpRequestObject() {
if (window.XMLHttpRequest)
{
return new XMLHttpRequest(); //Not IE
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
else
{
alert ("Your browser doesn't support the XmlHttpRequest object. Better
upgrade to Firefox.");
}
}
var receiveReq = getXmlHttpRequestObject(); function sayHello() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'ki.txt', true);
receiveReq.onreadystatechange = handleSayHello;
receiveReq.send(null);

86
}
}
function handleSayHello()
{
if (receiveReq.readyState == 4)
{
document.getElementById('span_result').innerHTML =
receiveReq.responseText;
}
}
</script>
</head>
<body>
<a href="javascript:sayHello();">say Hello</a></br>
<span id="span_result">hello cse</span>
</body>
</html>
OUTPUT

87
RESULT
Thus, the AJAX program has been implemented successfully.

88
EX.NO: 12 CREATION OF A PROGRAM FOR JQUERY DEMO
DATE:15/03/19
AIM

To demonstrate sliding effect using jQuery.

SOFTWARE REQUIRED

1. Text Editor
2. Browser
3. jQuery library

DESCRIPTION

1. Download the latest minimal version of jQuery JavaScript Library from


(http://jquery.com/download/).
2. Include the source of jQuery library using src attribute of script tag.
3. Use slideToggle() function to achieve sliding effects.
4. Apply necessary CSS styles.

Note: Download the link given below and save the file with the name jquery.min.js
(http://jquery.com/download/).
PROGRAM

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready (function(){
$(".heading").click (function(){
$(this).next(".content").slideToggle("slow");
});
});
</script>
<style>
.heading{

89
padding:5px;
text-align:left;
background-color:#aaaaaa;border:1px;
}
.content{
padding:20px;
display:none;
text-align:left;
background-color:#cccff;
border:solid1px#d4c3c3;
}
</style></head>
<body>
<h3 class="heading">Objective</h3>
<div class="content">Seeking an Entry-Level position in IT industry</div>
<h3 class="heading">Education</h3>
<div class="content">pursuing B.E CSE at Adhiyamaan College of Engineering.Have 8.6 CGPA
upto 6th Semester.</div>
<h3 class ="heading">Project</h3>
<div class="content">Designed and developed an android app for detecting thefts of farm
equipments.</div>
<h3 class="heading">Technical Skills</h3>
<div class="content">java,HTML,CSS,JavaScript,JSp,Servlets,MySQl</div>
</body>
</html>

OUTPUT

90
RESULT
Thus, the jQuery program for sliding effects has been demonstrated successfully.

91
EX.NO: 13 IMPLEMENTATION OF RMI CONCEPT FOR
DATE: 22/03/19 BUILDING ANY REMOTE METHOD
AIM

To implement RMI concept for building a calculator application.

ALGORITHM

1. Start.
2. Create an interface program with method declarations.
3. Create a server program implementing the methods in interface.
4. Create a client program to call the methods to perform operations.
5. Compile the programs.
6. Start rmi registry.
7. Start the server.
8. Run the client.
9. Stop.

PROGRAM
Interface: inte.java import
java.rmi.Remote; import
java.rmi.RemoteException; public
interface inte extends Remote
{
int add (int a,int b)throws RemoteException;
int sub(int a,int b)throws RemoteException;
int mul(int a,int b)throws RemoteException;
int div(int a,int b)throws RemoteException; }
Server Program: cserver.java

import java.io. *;
import java.rmi.*;
import java.rmi.server.*;
import java.rmi.registry.*;
public class cserver extends UnicastRemoteObject implements inte {

92
public cserver()throws RemoteException
{
super ();
}
public int add (int a,int b)throws RemoteException
{
return a+b;
}
public int sub (int a,int b)throws RemoteException
{
return a-b;
}
public int mul(int a,int b)throws RemoteException
{
return a*b;
}
public int div (int a,int b)throws RemoteException
{
return a/b;
}
public static void main (String args[])
{
try
{
inte c1=new cserver(); String I="CI";
Naming.rebind(I, c1);
System.out.println("Server bound and started");
}

catch (Exception e)

93
{
e.printStackTrace();
}
}
}
Client Program: cclient.java
import java.rmi.*;
public class cclient
{
public static void main (String args[])
{
try
{
String I="CI";
inte c=(inte)Naming.lookup(I);
System.out.println("Ready to continue");
int i=c.add(2,3);
int j=c.sub(3,2);
int k=c.mul(2,4);
int l=c.div(4,2);
System.out.println(i);
System.out.println(j);
System.out.println(k);
System.out.println(l);
}
catch (Exception e)
{}
}
}

OUTPUT

94
C:\java\jdk1.5.0\bin>javac inte.java

C:\java\jdk1.5.0\bin>javac cserver.java

C:\java\jdk1.5.0\bin>javac cclient.java

C:\java\jdk1.5.0\bin>rmic cserver

C:\java\jdk1.5.0\bin>start rmiregistry

// we see the new empty block cmd prompt

//new window

C:\java\jdk1.5.0\bin>java cserver

Server bound and started.

//new window

C:\java\jdk1.5.0\bin>java cclient

Ready to continue

RESULT
Thus, the RMI concept for building calculator application has been implemented successfully.

95
EX.NO: 14 CREATEION OF A WEB SERVICE IN JAVA USING
DATE: 22/03/19 NETBEANS IDE
AIM

To write a program for creating a web service in java using NETBEANS IDE.

ALGORITHM

To create a web application:

1. Create a web application, Name the project CalculatorWSApplication. Select a location


for the project.
2. Right-click the CalculatorWSApplication node and choose New > Web Service.
3. Name the web service CalculatorWS and type org.me.calculator in Package.

To add an operation to the web service:

1. Change to the Design view in the editor and Click Add Operation in either the visual
designer or the context menu.
2. In the upper part of the Add Operation dialog box, type add in Name and type int in the
Return Type drop-down list.
3. In the lower part of the Add Operation dialog box, click Add and create a parameter of
type int named i.
4. Click Add again and create a parameter of type int called j.
5. Click OK at the bottom of the Add Operation dialog box.
6. Similarly perform for subtraction, division and multiplication.

To test successful deployment to a GlassFish or WebLogic server:

1. Right-click the project and choose Deploy.


2. The IDE starts the application server, builds the application, and deploys the application
to the server.
3. In the IDE's Projects tab, expand the Web Services node of the CalculatorWSApplication
project.
4. Right-click the CalculatorWS node and choose Test Web Service.

PROGRAM
package org.me.calculator;

96
import javax.jws.WebMethod;
import javax.jws.WebParam;
import javax.jws.WebService;
@WebService()
public class calcuws
{
@WebMethod(operationName = "add")
public int add (@WebParam(name = "i") int i, @WebParam(name = "j")
int j; {
int k=i+j;
return k;
}
@WebMethod(operationName = "sub")
public int sub (@WebParam(name = "m") int m, @WebParam(name = "n")
int n)
{
int l=m-n;
return l;
}
@WebMethod(operationName = "mul")
public int mul(@WebParam(name = "i") int i, @WebParam(name = "j")
int j)
{
int k=i*j;
return k;
}
@WebMethod(operationName = "div")
public int div (@WebParam(name = "i") int i, @WebParam(name = "j")
int j)
{
int k=i/j;

97
return k;
}}

OUTPUT

98
99
100
RESULT

Thus, the program for creating the web services in java using NetBeans IDE has been
implemented and verified successfully.

101

You might also like