Ip Lab 13 03 (Repaired) Ok With Viva

P.T.
Lee Chengalvaraya Naicker

College Of Engineering & Technology
P.T.Lee Chengalvaraya Naicker Nagar, Oovery, Kancheepuram – 631 502.
Department of Computer Science And Engineering
Ex.No:1
Image Map
Date:
Aim
Create a web page with the following using HTML
To embed a map in a web page
To fix the hot spots in that map
Show all the related information when the hot spots are clicked.
Prerequisites:
 Dreamweaver Or Notepad++ Or Visual Studio Code Or Sublime Text Or

NetBeans 8.1 Or Notepad
 Internet Explorer or Any Browser Support
Theory:
<img> Tag Definition and Usage
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
 src - Specifies the path to the image
CS8661 - Internet Programming Laboratory Page 1 of 111

Prepared By E.Kamalanathan, Assistant professor/CSE
P.T.Lee Chengalvaraya Naicker
 alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed
Attribute Value Description

usemap #mapname Specifies an image as a client-
side image map
<map> Tag Definition and Usage
The <map> tag is used to define an 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.

name mapname Required. Specifies the name
of the image map.
<area> Tag Definition and Usage

The <area> tag defines an area inside an image map (an image map is an image with clickable
areas).
<area> elements are always nested inside a <map> tag.

shape default Specifies the shape of the area
rect
circle
poly
Procedure
 Create a html file with map tag

 Set the source attribute of the img tag to the location of the image and also set the use
map attribute
 Specify an area with name, shape and href set to the appropriate values
 Repeat step 3 as many hot spots you want to put in the map
 Create html files for each and every hot spot the user will select

Program:
Save : imagemap.html
<html>
<head>
<title>Client side image maps</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="20" border-

collapse: collapse" bordercolor="#111111" width="100%"
id="AutoNumber1" height="784">
<tr border="0">
<td width="20" border="0" height="104" >
<img border="0" src="india.png" width="101" height="104"></td>
<td width="748" height="104">
<p align="center"><font size="7" color="#0000FF">Client side image
maps</font></td>
</tr>
<tr>
<td width="130" height="676"><font FACE="Times New Roman"

SIZE="3">
<p ALIGN="LEFT">click the most hottest spots (marked by red dots)
and get
the information regarding the clicked places.</p>
<p ALIGN="LEFT">This is an example page to illustrate the client
side image
map The red. spots indicate the mapped areas.</p>
</font>
<p> </td>
<td width="748" height="676">
<img border="0" src="INDIA.jpg" USeMAP="#fpmap">
<map name="fpmap">
<area href="kasmir.html" shape="rect" coords="152,88,249,113">
<area href="delhi.html" shape="rect" coords="204,332,274,354">
<area href="mumbai.html" shape="rect" coords="114,668,211,690">
<area href="chennai.html" shape="rect" coords="225,927,320,944">
<area href="Kolkata.html" shape="rect" coords="391,521,507,538">
</map>
</td>
</tr>
</table>
</body>

</html>
Kolkata.html
<html>
<body bgcolor=yellow>
<p>
<center>
<h2> Kolkata </h2>
</center>
<p> It is most populated city in india. it is famous for sweets.

</body>
</html>
Chennai.html
<html>
<body bgcolor=pink>
<p>
<center>
<h2> Chennai </h2>
</center>
<p> It is one of metropolitan city in india. it has second longest

beach in the world.
</p>
</body>
</html>
Save: Delhi.html
<html>
<body bgcolor=pink>
<p>
<center>
<h2> Delhi </h2>
</center>
<p>
Delhi is the capital of india.
it was ruled previously by the mughal empires.
</p>
</body>
</html>
Save: Kashmir.html
<html>

<body bgcolor=pink>
<p>
<center>
<h2> Kashmir </h2>
</center>
<p> Kashmir is situated in northern tip of india. <br>

It is also called as switzerland of india. it is a good holiday spot.
</p>
</body>
</html>
Save: Mumbai.html
<html>
<body bgcolor=pink>
<p>
<center>
<h2>Mumbai </h2>
</center>
<p> Mumbai is one of the most populated city in india.

it is also called as manchester of india.<br> it also has the name
gateway of india.
</body>
</html>

Output
Result:
Thus the creation of a web page which includes a map and display the related
information when a hot spot is clicked in the map was executed successfully.

Viva-voce
1. Write the syntax and tags about tables.
2. What are the various types of lists?
3. Write the description starts with <dd>.
4. Write about frames.
5. Write the scenario of links.
6. What are HTML tags?
7. Can you list out the linking tags in HTML?
8. Define - HTML
9. Write the syntax of href?
10. Compare HTML and XHTML.
11. What is URL?
12. Differentiate Internet from Intranet.
13. What is the use of frame tags?
14. Write the syntax of table tags.
15. What are the formatting tags?
16. What are the heading tags?
17. How to map the images in HTML?
18. What is the use of marquee tag in HTML?
19. What is meant by web site?
20. Define- webpage

Ex.No:2
Cascading style sheets
Date:
Aim
Create a web page with the following.
Cascading style sheets.
Embedded style sheets.
Inline style sheets. Use our college information for the web pages.
Theory:
What is CSS?
CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed
on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple
web pages all at once External stylesheets are stored in CSS files
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Inline CSS:

Inline CSS contains the CSS property in the body section attached with element is known as
inline CSS. This kind of style is specified within an HTML tag using the style attribute.
Inline - by using the style attribute inside HTML elements
Internal or Embedded CSS:
This can be used when a single HTML document must be styled uniquely. The CSS rule set
should be within the HTML file in the head section i.e the CSS is embedded within the HTML
file.
Internal - by using a <style> element in the <head> section
External CSS:
External CSS contains separate CSS file which contains only style property with the help of tag
attributes (For example class, id, heading, … etc). CSS property written in a separate file
with .css extension and should be linked to the HTML document using link tag. This means that
for each element, style can be set only once and that will be applied across web pages.
External - by using a <link> element to link to an external CSS file
Example:
<link rel="stylesheet" href="styles.css">
Procedure:
 Create a web page using the HTML

 Link is created by specifying URL of the cascade file.
 With an external style sheet, you can change the look of an entire website by
changing just one file!
 Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
 The contents of the embedded style sheets are given using HTML tags.
 Run HTML code in internet explorer.
Embedded style sheets
 An internal style sheet may be used if one single HTML page has a unique style.

 The internal style is defined inside the <style> element, inside the head section
Inline style sheets
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.

Program:
Save : CASCADE.css
BODY
{
BACKGROUND-COLOR: transparent
}
H1
{
FONT-SIZE: 34pt;
COLOR: maroon;
FONT-STYLE: italic;
FONT-FAMILY: sans-serif;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
H2
{
FONT-SIZE: 34pt;
COLOR: olive;
FONT-STYLE: italic;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
H3
{
FONT-SIZE: 34pt;
COLOR: fuchsia;
FONT-STYLE: italic;
TEXT-ALIGN: left
}
H4
{
FONT-SIZE: 34pt;
COLOR: fuchsia;
FONT-STYLE: italic;
TEXT-ALIGN: center
}

H5
{
FONT-SIZE: 34pt;
COLOR: blue;
FONT-STYLE: italic;
TEXT-ALIGN: center
}
H6
{
FONT-SIZE: 34pt;
COLOR: blue;
FONT-STYLE: italic;
TEXT-ALIGN: center
}
P
{
FONT-SIZE: 16pt;
COLOR: #f77fcc;
TEXT-INDENT: 20px;
LINE-HEIGHT: 150%;
FONT-FAMILY: "Book Antique",serif
}
A:link
{
COLOR: blue
}
A:visited
{
COLOR: white
}
A:active
{
COLOR: green
}
A:hover
{
COLOR: yellow;
TEXT-DECORATION: underline
}

UL
{
FONT-SIZE: 12pt;
WIDTH: 50%;
COLOR: lightcoral;
FONT-FAMILY: times new roman;
LIST-STYLE-TYPE: disc;
HEIGHT: 50%;
}
OL
{
FONT-SIZE: 12pt;
COLOR: lightcoral;
FONT-FAMILY: times new roman;
LIST-STYLE-TYPE: decimal
}
Save: External CSS.html
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="cascade.css" type="text/css">
</head>
<body>
<h1> DEPATMENT OF CSE</H1>
<H2>CURRENT SEMESTER SUBJECT</H2>
<P> This Is The Eaxaple Program For External CSS The Current
Semester
Consist Of The Follwing Theory Subject And Practicals
</P>
<H3> THEORY SUBJECTS</H3>
<OL><B>
<LI> INTERNET PROGRAMMING </LI>
<LI>ARTIFICIAL INTELLIGENCE </LI>
<LI>MOBILE COMPUTING</LI>
<LI>COMPILER DESIGN</LI>
<LI>DISTRIBUTED SYSTEM</LI>
<li> SOFTWARE TESTING & security </LI>
</ol
<h4>PRACTICALS</H4>
<ul>
<li> INTERNET PROGRAMMING LABORATORY </li>

<li> MOBILE APPLICATION DEVELOPMENT LABORATORY </li>
<li> MINI PROJECT </li>
<li> PROFESSIONAL COMMUNICATION </li>

<li> LIBRARY </li>
</ul>
</body>
</html>

<html>
<head>
<title> Internal CSS </title>
<style>
body {
background-color: #9575cc;
}
h1{
font-family:monotype corsivar;
font-size:20pt;
font-wetght:bold;
color:#f667549;
text-align:center;
}
h2{ font-family:times roman;

font-size:16pt;
font-wetght:bold;
color:#195966;
font-style:italic;
text-align:center;
}
h3{
font-size:12 pt;
p{
linr-height;150%;
text_height: 1 in;
font-size:18pt;
color:#ff4f5f;
text-align:justify;
}
ol{ list-style-type:uper-roman;
font-family:book antiqua;font-size:12 pt;
text-indent:1 in;
}

ul{ list-style-type:uper-roman;
font-family:book antiqua;
font-size:12 pt;
text-indent:1 in;
}
</style>
</head>
<body style="background-color:#9575cc">
<h1>
<marquee>DEPARTMENT OF CSE</marquee></h1>
<h2> SOFTWARE CLASSIFICATION </h2>
<p>
This is the example program for Internal CSS. The software
are classified into system side software and application software </p>
<h3> SYSTEM SOFTWARE</h3>
<ol>
<li> Operating system
<li>Linker & Loader
<li>Compiler
<li>Macro processor
<li>Assembler
</ol>
<h3>APPLICATION SOFTWARE</h3>
<ul>
<li>Banking system
<li>Inventory System
<li>Payroll System
<li>Library System
<li>On-line reservation System
</ul>
</body>
</html>
Inline style sheets
Save: inlinestyle sheet.html
<html>
<head>
<title> InLline Style Sheet </title>
</head>
<body style="background-color:#9575cc">
<h1 style="font-family:monotype corsivar;

font-size:20pt;
font-wetght:bold;
color:#f667549;
text-align:center;">
<marquee>DEPARTMENT OF CSE </marquee> </h1>
<h2 style="font-family:times roman;
font-size:16pt;
font-wetght:bold;
color:#195966;
font-style:italic;
text-align:center;"> SOFTWARE CLASSIFICATION </h2>
<p STYLE="
linr-height;150%;
text_height: 1 in;
font-size:18pt;
color:#ff4f5f;
text-align:justify;">
This is the example program for inline style sheet. The
software are classified into system side software and application
software </p>
<h3 style ="font:18pt" > SYSTEM SOFTWARE</h3>
<ol style="
list-style-type:uper-roman;
font-family:book antiqua;font-size:12 pt;
text-indent:1 in;">
<li> Operating system</li>
<li>Linker & Loader </li>
<li>Compiler</li>
<li>Macro processor</li>
<li>Assembler </li>
</ol>
<h3 style ="font:18pt" >APPLICATION SOFTWARE</h3>
<ul style="
list-style-type:uper-roman;
font-family:book antiqua;
font-size:12 pt;
text-indent:1 in;">
<li>Banking system </li>
<li>Inventory System </li>
<li>Payroll System </li>
<li>Library System</li>
<li>On-line reservation System </li>
</ul>
</body>
</html>

Input and Output:
Inline style sheets

Result:
Thus the creation of a web page that displays college information using various style
sheet was successfully executed and verified.

Viva-voce
1. Describe the Syntax about External / Internal Style Sheets.

2. Describe the Syntax about Inline Style Sheets.
3. What is CSS?
4. Define- Style sheet.
5. What is the use of inline style sheet?
6. What are the limitations of CSS?
7. What are the advantages of CSS?
8. How block elements can be centered with CSS?
9. Discuss about embedded style sheets?
10. Differentiate CSS concept from HTML?
11. Define- declaration block.
12. What is the usage of class selector?
13. What is pseudo-elements?
14. How to overrule underlining hyperlinks?
15. Enlist the various media types used?
16. What is contextual selector?
17. Compare grouping and nesting in CSS?
18. How does Z-Index function?
19. How comments can be added in CSS?
20. Define – Property.

Ex.No:3
Client Side Validate
Date:
Aim
Validate the Registration, user login, user profile and payment by credit card pages using
JavaScript.
Theory:
JavaScript:
JavaScript is a lightweight, interpreted programming language. It is designed for creating

network-centric applications. It is complimentary to and integrated with Java. JavaScript is very
easy to implement because it is integrated with HTML. It is open and cross-platform.
JavaScript can be added to your HTML file in two ways:
Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the
<script> tag. The <script> tag can either be placed inside the <head> or the <body> tag
according to the requirement.
External JS: We can write JavaScript code in other file having an extension .js and then link this
file inside the <head> tag of the HTML file in which we want to add this code.
Syntax:
<script>
// JavaScript Code
</script>
Procedure
Client Side Programming - Form validation:
1. Start the Program
2. Create the html files and in that page create necessary textboxes.
3. User given input is validated and it is linked to signup button.
4. This script validates text inputs typed and select boxes after something has been
selected.
5. Insert Attributes on the tags are used to determine the validation process.

6. Embed JavaScript in the Web page for Client-side form validation.

7. Run the form with Internet explorer to check the details entered by the user.
Program Code
Home page:
Main.html:
<frameset rows=”25%, 75 %”>

<frame src=”top.html” name=”top”>
<frameset cols=”25%,75%”>
<frame src=”left.html” name=”left”>
<frame src=”right.html” name=”right”>
</frameset>
</frameset>
Top.html:
<html>
<body bgcolor=”pink”>
<br><br>
<marquee><h1 align=”center”><b><u>ONLINE BOOK
STORAGE</u></b></h1></marquee>
</body>
</html>
Right.html:
<html>
<br><br><br><br><br>
<h2 align=”center”>
<b><p> welcome to online book storage. Press login if you are having id otherwise press registration.
</p></b></h2>
</body></html>
Left.html:
<html>
<h3>
<ul>
<li><a href=”login.html” target=”right”><font color=”black”> LOGIN</font></a></li><br><br>
<li><a href=”profile.html” target=”right”><fontcolor=”black”> USER PROFILE</font></a></li><br>
<br>
<li><a href=”catalog.html” target=”right”><fontcolor=”black”> BOOKS CATALOG</font></a></li>
<br><br>
<li><a href=”scart.html” target=”right”><font color=”black”> SHOPPINGCART</font></a></li><br>
<br>

<li><a href=”payment.html” target=”right”><fontcolor=”black”> PAYMENT</font></a></li><br><br>

<li><a href=”order.html” target=”right”><font color=”black”> ORDER CONFIRMATION</font></a>
</li><br><br>
</ul>
</body>
</html>
Registration and user Login
Login.html:
<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
{
var flag=1;
if(document.myform.id.value==""||
document.myform.pwd.value=="")
{
flag=0;
}
if(flag==1)
{
alert("VALID INPUT");
}
else
{
alert("INVALID INPUT");
document.myform.focus();
}
}
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br> PASSWORD:<input type="password" name="pwd">
</pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">
<input type="reset" value="clear" >
</form>
</body>
</html>
User profile page

Profile.html:
<html>
<body bgcolor=”pink”><br><br>
<script language=”javascript”>
function validate()
{
var flag=1;
if(document.myform.name.value==””||
document.myform.addr.value==””||
document.myform.phno.value==””||
document.myform.id.value==””||
document.myform.pwd.value==””)
{
flag=0;
}
var str=document.myform.phno.value;
var x;
for(var i=0;i<str.length;i++)
{
x=str.substr(i,1)
if(!(x<=9))
{
flag=0;
break;
}
}
if(flag==1)
{
}
else
{
}}
</script>
NAME :<input type="text" name="name"><br> ADDRESS :<input type="type" name="addr"><br>
CONTACT NUMBER:<iput type="text" name="phno"><br> LOGINID :<input type="text" name="id">
<br> 19
PASSWORD :<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>


<input type="reset" value="clear">
</form></body></html>
Books catalog :
Scart.html:
<html>
function validate()
{
var flag=1;
if(document.myform.title.value=="")
{
flag=0;
}
str=document.myform.title.value;
if(str=="c")
{
document.writeln("<body bgcolor=pink>");
document.writeln("title-->c"+" cost-->444");
}
else if(str=="jsp")
{
document.writeln("<body bgcolor=pink>");
document.writeln("title-->jsp"+" cost-->555");
}
else
{
flag=0;
}
if(flag==1)
{
}
else
{
}
}
</script>
<form name="myform" >
BOOK TITLE :<input type="text" name="title"><br> 21

</pre><br><br>
</div>
<br><br>
</form>
</body>
</html>
Shopping cart:
Catalog.html:
<html>
function validate()
{
var flag=1;
document.myform.title.value==""||
document.myform.no.value==""||
document.myform.cost.value==""||
document.myform.date.value=="")
{
flag=0;
}
var str=document.myform.no.value;
var x;
{
x=str.substr(i,1)
if(!(x<=9))
{
flag=0;
break;
}
}
str=document.myform.title.value;
var str1=document.myform.cost.value;
if(!((str=="c"&& str1==444) || (str=="jsp" && str1==555)))
{
flag=0;
}
if(flag==1)

{
}
else
{
}
}
</script>
<form name="myform" >
LOGIN ID :<input type="text" name="id"><br> TITLE :<input type="text" name="title"><br> NO.OF
BOOKS
:<input type="text" name="no"><br>
COST OF BOOK
:<input type="text"name="cost"><br>
DATE :<input type="text" name="date"><br></pre><br><br>
</div>
<br><br>
</form>
</body>
</html>
Payment by credit card

Payment.html:
<html>
function validate()
{
var flag=1;
document.myform.pwd.value==""||
document.myform.amount.value==""||
document.myform.num.value=="")
{
flag=0;
}
var str=document.myform.amount.value;
var x;
{

x=str.substr(i,1);
if(!(x<=9))
{
flag=0;
break;
}
}
str=document.myform.num.value;
for(var i=0;i<str.lenght;i++)
{
x=str.substr(i,1);
if(!(x<=9))
{
flag=0;
break;
}
}
if(flag==1)
{
}
else
{
}
}
</script>
LOGIN ID :<input type="text" name="id"><br> PASSWORD :<input type="password" name="pwd">
<br> AMOUNT :<input type="text" name="amount"><br> CREDITCARDNUMBER:<input
type="PASSWORD"
name="num+"><br></pre><br><br>
</div>
<br><br>
<input type="reset" value="clear" >
</form>
</body>
</html>
Order Conformation
Order.html:
<html>

<head><title>order conformation</title><M/head>
<body bgcolor="cyan">
<center>
<h1><b>AMAZON</h1>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU</h2>
</center>
</body>
</html>

Input and Output:



Result
Thus the program has been implemented and output verified successfully.

Viva-voce
1. What are the necessary requirements to validate the form in JSP.

2. Describe about Java Scripts
3. Write about XML Elements
4. What is XML?
5. Differentiate XML From HTML.
6. What is DHTML?
7. What is the use of user defined tags?
8. What are the form tags available in html?
9. What is the use of submit button?
10. What is URN?
11. What is URI?
12. Differentiate client side scripting from server side scripting.
13. What is the use of local host?
14. Define- Remote Host.
15. List out the client side scripting languages.
16. List out the server side scripting languages.
17. How to interact the scripting with html?
18. What is the usage of web forms?
19. What is JSP?
20. Define- scriptlet in JSP.
21. What are the elements in JSP?

Ex.No:4
Servlets
Date:
Aim:
Write programs in Java using Servlets:
i) To invoke servlets from HTML forms
ii) Session tracking using hidden form fields and Session tracking for a hit
count
Theory:
Session tracking methods:

1. User Authorization
2. Hidden Fields
3. URL Rewriting
4. Cookies
Session tracking API is built on top of the first four methods.
5. Session tracking API

Procedure:
i) To invoke servlets from HTML forms
client.html:
(1) Create a web page using HTML form that contains the fields such as label, text and one
submit button.
(2) Set the URL of the server as the value of form’s action attribute.
(3) Run the HTML program.
(4) Submit the form data to the server.
server.java:
(1) Define the class server that extends the property of the class GenericServlet.
(2) Handle the request from the client by using the method service() of GenericServlet class.
(3) Get the parameter names from the HTML form by using the method getParameterNames().
(4) Get the parameter values from the HTML forms by using the method getParameter().
(5) Send the response to the client by using the method of PrintWriter class.

Program:
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class MyServletHtmlDemo extends HttpServlet
{
public void service(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
PrintWriter out = res.getWriter();
Enumeration en = req.getParameterNames();
while(en.hasMoreElements())
{
String name=(String)en.nextElement();
out.print(name+"=");
String value=req.getParameter(name);
out.println(value);
out.println(" ");
}
}
}
web.xml:
<web-app>
<servlet>
<servlet-name>MyServletHtmlDemo</servlet-name>
<servlet-class>MyServletHtmlDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServletHtmlDemo</servlet-name>
<url-pattern>/MyServletHtmlDemo</url-pattern>
</servlet-mapping>
</web-app>
MyServletHtmlDemo.HTML:
<html>
<head>
<title>Student Information Form</title>
</head>
<body>
<center>

<form name="form1" action="MyServletHtmlDemo">

<h3>Enter student information in following fields</h3>
<table>
<tr>
<td><b>Roll Number</b></td>
<td><input type="text" name="Roll Number" size="25" value=""></td>
</tr>
<tr>
<td><b>Student Name</b></td>
<td><input type="text" name="Student Name" size="25" value=""></td>
</tr>
<tr>
<td><b>Student Address</b></td>
<td><input type="text" name="Address" size="25" value=""></td>
</tr>
<tr>
<td><b>Phone</b></td>
<td><input type="text" name="Phone" size="25" value=""></td>
</tr>
<tr>
<td><b>Total Marks</b></td>
<td><input type="text" name="Total Marks " size="25" value=""></td>
</tr>
</table>
<input type="submit" value="submit">
</form>
</center>
</body>
</html>

Input and Output:

ii) Session tracking using hidden form fields and Session tracking for a hit count
Procedure:
client.html:
1. Create a web page using HTML form that contains the fields such as hidden input
tag and submitd button.
2. Set the URL of the server as the value of form’s action attribute.
3. Run the HTML program.
4. Submit the form data to the server.
Servlet: (Server)
1. Servlet program to keep track of user visiting the page.
2. The count is incremented by one when user visits.
3. The output displays the greeting message.
4. The number of previous access is also displayed.
Program:
Save: index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Servlet 3.0 Hidden Field Example</title>
<style type="text/css">
.paddingBtm {
padding-bottom: 12px;
}
</style>
</head>
<body>
<center>
<h2>Click the Submit button to check the hidden
field</h2>
<form name="hiddenForm" method="post"
action="hiddenFieldServlet">
<div class="paddingBtm">
<input id="nameId" type="hidden" name="name1"
value="P.T.Lee CNCET" />
</div>
<div id="loginBtn">

<input id="btn" type="submit"

value="Submit" />
</div>
</form>
</center>
</body>
</html>
Save: Web.xml
<web-app>
<servlet>
<servlet-name>hiddenFieldServlet</servlet-name>
<servlet-class>hiddenFieldServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>hiddenFieldServlet</servlet-name>
<url-pattern>/hiddenFieldServlet</url-pattern>
</servlet-mapping>
</web-app>
Save: hiddenFieldServlet.java
// Import required java libraries

import java.io.*;
import java.util.*;
// Extend HttpServlet class

public class hiddenFieldServlet extends HttpServlet {
public void doPost(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException {
// String param1 = request.getParameter("name1");
// Create a session object if it is already not created.

HttpSession session = request.getSession(true);

// Get session creation time.

Date createTime = new Date(session.getCreationTime());
// Get last access time of this web page.

Date lastAccessTime = new
Date(session.getLastAccessedTime());
String title = "Welcome Back to my website";

Integer visitCount = new Integer(0);
String visitCountKey = new String("visitCount");
String userIDKey = new String("userID");
String userID = request.getParameter("name1");
// Check if this is new comer on your web page.

if (session.isNew()) {
title = "Welcome to my website";
session.setAttribute(userIDKey, userID);
} else {
visitCount =
(Integer)session.getAttribute(visitCountKey);
visitCount = visitCount + 1;
userID = (String)session.getAttribute(userIDKey);
}
session.setAttribute(visitCountKey, visitCount);
// Set response content type

response.setContentType("text/html");
PrintWriter out = response.getWriter();
String docType =
"<!doctype html public \"-//w3c//dtd html 4.0 " +
"transitional//en\">\n";
out.println(docType +
"<html>\n" +
"<head><title>" + title + "</title></head>\n" +
"<body bgcolor = \"#f0f0f0\">\n" +

"<h1 align = \"center\">" + title + "</h1>\n" +
"<h2 align = \"center\">Session Infomation</h2>\n"
+
"<table border = \"1\" align = \"center\">\n" +
"<tr bgcolor = \"#949494\">\n" +

"<th>Session info</th><th>value</th></tr>\n"
+
"<tr>\n" +
" <td>id</td>\n" +
" <td>" + session.getId() + "</td></tr>\n"
+
"<tr>\n" +
" <td>Creation Time</td>\n" +
" <td>" + createTime + " </td> </tr>\n"
+
"<tr>\n" +
" <td>Time of Last Access</td>\n" + "
<td>" + lastAccessTime +
" </td> </tr>\n" +
"<tr>\n" +
" <td>User ID</td>\n" +
" <td>" + userID + " </td>
</tr>\n" +
"<tr>\n" +
" <td>Number of visits</td>\n" +
" <td>" + visitCount + "</td>
</tr>\n" +
"</table>\n" + "</body>
</html>"
);
}
}

Input and Output:

Result

Viva-voce
1. What are servlets?

2. Explain servlet life cycle methods?
3. When doGet() method of servlet to be called?
4. When doPost() method of servlet to be called?
5. How to read form data in servlet?
6. How to make database connection with servlet?
7. What is JDBC?
8. What is CGI?
9. What are the SQL commands used for database in servlet?
10. What are the steps to connect database with tomcat?
11. What is tomcat server?
12. Is there any web server used in this application?
13. What is meant by ODBC?
14. How sessions and cookies are used in servlet?
15. What is the use of servlet wrapper class?
16. Differentiate generic servlet from http servlet?
17. What is the inter-servlet communication?
18. Are servlets threading safe?
19. What are DDL, DML commands in SQL?
20. Compare JSP with Servlet.

Ex.No: 5
Three-Tier Applications Using Servlets
Date:
Aim:
Write programs in Java to create three-tier applications using servlets for conducting
online examination for displaying student mark list. Assume that student information is available
in a database which has been stored in a database server.
Theory:

Procedure:
Client:
 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.
 Create a submit button and close all the included tags.
Server:
 Import all necessary packages
 Define a class that extends servlet
 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 html format using the writer
Student Mark List Database:
 Import necessary to java packages and javax packages and classes
 Create a class that extends HttpServlet and implements ServletException
 and IOException
 In the doGet() method, do the following:
i) Create a PrintWriter object
ii) Open a connection with the data source name
iii) Write a sql query and execute to get the resultset
iv) Display the resultset information in html form
Step by Step to Create the Web Application in the Netbeans
1. Open Netbeans IDE, Select File -> New Project
2. Select Java Web -> Web Application, then click on Next
3. Give a name to your project and click on Next
4. and then, Click Finish
5. The complete directory structure required for the Servlet Application will be created
automatically by the IDE.
6. To create a Servlet, open Source Package, right click on default packages -> New ->
Servlet.
7. Give a Name to your Servlet class file
8. Now, your Servlet class is ready, and you just need to change the method definitions and
you will good to go.
9. Write some code inside your Servlet class
10. Create an HTML file, right click on Web Pages -> New -> HTML
11. Give it a name. We recommend you to name it index, because browser will always pick
up the index.html file automatically from a directory. Index file is read as the first page of
the web application.

12. Write some code inside your HTML file. We have created a hyperlink to our Servlet in
our HTML file.
13. Edit web.xml file. In the web.xml file you can see, we have specified the url-pattern and
the servlet-name, this means when Servlet url is accessed our Servlet file will be
executed.
14. Run your application, right click on your Project and select Run.
Program:
Save: index.html
<html>
<head><title>Database Test</title></head>
<body>
<center>
<h1>Online Examination</h1>
</center>
<form action="StudentServlet3" method="POST">
<div align="left"><br></div>
<b>Seat Number:</b> <input type="text" name="Seat_no">
<div align="Right">
<b>Name:</b> <input type="text" name="Name" size="50"><br>
</div>
<br><br>
<b>1. Every host implements transport layer.</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False<br>
<b>2. It is a network layer's responsibility to forward
packets reliably from source to destina- tion</b><br/>
<b>3. Packet switching is more useful in bursty
traffic</b><br/>
<b>4. A phone network uses packet switching</b><br/>
<b>5. HTML is a Protocol for describing web contents</b><br/>
<br><br><br>
<center>
<input type="submit" value="Submit"><br><br>

</center>
</form>
</body>
</html>
SERVLET CODE:
import java.io.*;
import java.sql.*;
public class StudentServlet3 extends HttpServlet
{
String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5; int Total=0;
Connection connect; Statement stmt=null; ResultSet rs=null;
public void doPost(HttpServletRequest request,HttpServletResponse response) throws
ServletException,IOException
{
try
{
String url="jdbc:mysql://localhost:3306/ex5";
Class.forName("com.mysql.jdbc.Driver");
connect=DriverManager.getConnection(url,"root","");
message="Thank you for participating in online Exam";

}
catch(ClassNotFoundException cnfex){ cnfex.printStackTrace();
}
catch(SQLException sqlex){ sqlex.printStackTrace();
}
catch(Exception excp){ excp.printStackTrace();
}
Seat_no=request.getParameter("Seat_no");
Name=request.getParameter("Name");
ans1=request.getParameter("group1");
if(ans1.equals("True"))
Total+=2;
if(ans2.equals("False"))
Total+=2;
if(ans3.equals("True"))

Total+=2;
Total+=2;
Total+=2;
try
{
Statement stmt=connect.createStatement();
String query="INSERT INTO student("+"Seat_no,Name,Total"+")
VALUES('"+Seat_no+"','"+Name+"','"+Total+"')";
int result=stmt.executeUpdate(query); stmt.close();
}catch(SQLException ex){
}
PrintWriter out=response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body bgcolor=cyan>");
out.println("<center>");
out.println("<h1>"+message+"</h1>\n");
out.println("<h3>Yours results stored in our database</h3>");
out.print("<br><br>");
out.println("<b>"+"Participants and their Marks"+"</b>");
out.println("<table border=5>");
try
{
Statement stmt=connect.createStatement();
String query="SELECT * FROM student";
rs=stmt.executeQuery(query);
out.println("<th>"+"Seat_no"+"</th>");
out.println("<th>"+"Name"+"</th>");
out.println("<th>"+"Marks"+"</th>");
while(rs.next())
{
out.println("<tr>");
out.print("<td>"+rs.getString(1)+"</td>");
out.println("</tr>");
}
out.println("</table>");
}

catch(SQLException ex){ } finally

{
try
{
if(rs!=null) rs.close(); if(stmt!=null) stmt.close(); if(connect!=null)
connect.close();
}
catch(SQLException e){ }
}
out.println("</center>"); out.println("</body></html>"); Total=0;
}}
Save: Web.xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>StudentServlet3</servlet-name>
<servlet-class>StudentServlet3</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>StudentServlet3</servlet-name>
<url-pattern>/StudentServlet3</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

Output:

Result:
Thus to write java servlet programs to conduct online examination and to display student
mark list available in a database was successfully executed and verified.
Viva-voce
1. What are servlets?

2. Explain servlet life cycle methods?
3. When doGet() method of servlet to be called?
4. When doPost() method of servlet to be called?
5. How to read form data in servlet?
6. How to make database connection with servlet?
7. What is JDBC?
8. What is CGI?
9. What are the SQL commands used for database in servlet?
10. What are the steps to connect database with tomcat?
11. What is tomcat server?
12. Is there any web server used in this application?
13. What is meant by ODBC?
14. How sessions and cookies are used in servlet?
15. What is the use of servlet wrapper class?
16. Differentiate generic servlet from http servlet?
17. What is the inter-servlet communication?
18. Are servlets threading safe?
19. What are DDL, DML commands in SQL?
20. Compare JSP with Servlet.

Ex.No: 6 DYNAMIC WEB PAGES USING TOMCAT WEB

Date: SERVER
Aim:
Install TOMCAT web server.
Convert the static web pages of programs into dynamic webpages using servlets (or JSP)
and cookies. \
Hint: Users information (user id, password, credit card number) would be stored in
web.xml. Each user should have a separate Shopping Cart.
Theory:
Procedure:
Step – 1:
Double click apache-tomcat-8.5.75.exe file to start the installation as shown in the below screen
shot:

Step – 2:
The initial screen you will see is the welcome screen for Apache Tomcat server. Click on Next button
as shown in the below screenshot:

Step – 3:
Next screen is the license agreement screen. Click on I Agree button as shown in the below
screenshot:

Step – 4:
In the next screen you can select different components you want to install. Take care that you have
checked all the boxes as shown in the below screenshot and click on Next button:

Step – 5:
Next screen will be the server’s configuration screen. Change the HTTP Connector Port from 8080
to any other value (4040 in the screenshot) to avoid port number collision with Oracle server (default
port for Oracle is 8080). Also specify a administrator User Name and Password of your choice and
click on Next button as shown in the below screenshot:

Step – 6:
In the next screen we can select the location at which the server will be installed. Leave it to the
default location and click on Install button as shown in the below screenshot:

Step – 7:
In the next screen select the path to Java Virtual Machine (JVM) on your machine which will be
automatically done by the setup. If you don’t see any path, do it manually by clicking on (…) button.
Now, click on Next button as shown in the below screenshot:

Step – 8:
In the next screen we can see the installation progress as shown in the below screenshot:

Step – 9:
Next screen is the installation completion screen. Uncheck Show Readme and click on Finish button
as shown in the below screenshot

Step – 10:
To check whether the server is running or not, click the arrow in the system tray and search for the
icon shown in the screenshot. If the icon is displaying a small green arrow as shown in the
screenshot, then your Apache Tomcat server is started. Otherwise you can right click the icon and
click on Start Service option.
Step – 11:
Now, open a browser (ex: Firefox). In the address bar type the URL, http://localhost:8081.
Remember that 8081 is the HTTP connector port number we had allocated previously. If you have
given another number, replace 4040 with that number and hit Enter key. If everything is running
smoothly, you will see the following page as shown in the below screenshot:

Procedure
 First install the tomcat into the system.

 Then make a sub directly(eg., ex61) in the \tomcat\webapps.
 Under tr create WEB-INF directory and also place the html files in this ex61 directory
only. Next under WEB-INF create two subclasses lib, classes and web.xml
 Next place all the class files under the classes and jar files(servlet-api.jar,classes12.jar
etc…) under lib subdirectories.
 At the IE(web browser) give the url as http://localhost:8081/ex61/index.jsp or servlet url
pattern Port no 80801 is assigned for the tomcat.

Convert the static web pages of programs into dynamic webpages using servlets (or JSP)
and cookies. Hint: Users information (user id, password, credit card number) would be
stored in web.xml. Each user should have a separate Shopping Cart
Program Code:
Save : index.jsp
<html>
<head>
</head>
<body>
<form action="LoginServlet" method="post">
Enter username:
<input type="text" name="user">
<br>
Enter Password:
<input type="password" name="password">
<br>
Enter Card ID:
<input type="text" name="cardID">
<br>
<br> <br> <br>
<input type="submit" value="login">
</form>
</body>
</html>
Save : web.xml
<web-app version="2.4" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/j2ee" xsi:schemalocation="http:/java.sun.com/dtd/web-
app_2_3.dtd">
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>LoginServlet</servlet-class>
<init-param>
<param-name>usernames</param-name>
<param-value>user1,user2,user3</param-value>
</init-param>
<init-param>
<param-name>passwords</param-name>
<param-value>pwd1,pwd2,pwd3</param-value>

</init-param>
<init-param>
<param-name>cardIDs</param-name>
<param-value>111,222,333</param-value>
</init-param>
</servlet>
<servlet>
<servlet-name>LoginSuccess</servlet-name>
<servlet-class>LoginSuccess</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>LoginSuccess</servlet-name>
<url-pattern>/LoginSuccess</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Save : LoginServlet.java
import java.io.*;
import java.net.*;
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {

String usr=request.getParameter("user");
String pwd=request.getParameter("password");
String card=request.getParameter("cardID");
boolean flag=true;
String[] userID=getInitParameter("usernames").split(",");
String[] password=getInitParameter("passwords").split(",");
String[] cardids=getInitParameter("cardIDs").split(",");
int i;
for(i=0;i<userID.length;i++)
{
if(userID[i].equals(usr)&&password[i].equals(pwd)&&cardids[i].equals(card))
{
flag=false;
Cookie MyCookie=new Cookie("CurrentUser", usr);
MyCookie.setMaxAge(60*60);
response.addCookie(MyCookie);
response.sendRedirect("LoginSuccess");
}
}
if(flag==true)
{
out.print("Error");
out.println("<h4>Invalid user,please try again by clicking following link</h4>");
out.println("<a href='http://localhost:8081/ex61/'>"+"index.jsp");
}
}
finally {
out.close();
}
}
}

Save : LoginSuccess.java
import java.io.*;
import java.net.*;
public class LoginSuccess extends HttpServlet {protected void doGet(HttpServletRequest
request, HttpServletResponse response)
Cookie[] my_cookies=request.getCookies();
PrintWriter out=response.getWriter();
out.print("Login Success");
out.println("<b>");
String userName=null;
if(my_cookies!=null)
{
for(Cookie cookie:my_cookies)
{
if(cookie.getName().equals("CurrentUser"))
userName=cookie.getValue();
}
}
out.print("<h3>Login Success!!!Welcome</h3>");
out.print("<h2>This is a Shopping cart for : "+userName+"</h2>");
out.close();
}
}

Output:
Compile the Code:
D:\ex61\WEB-INF\classes>javac -classpath "C:\Program Files\Apache Software Foundation\

Tomcat 8.5\lib\servlet-api.jar" LoginServlet.java
D:\ex61\WEB-INF\classes>javac -classpath "C:\Program Files\Apache Software Foundation\

Tomcat 8.5\lib\servlet-api.jar" LoginSuccess.java

Result:
Thus the conversion of the static web pages into dynamic web pages using
servlets cookies has been executed successfully.

Viva-voce
1. What Is Apache Tomcat?

2. How Do I Can Change The Default Home Page Loaded By Tomcat?
3. How To We Can Change Tomcat Default Port?
4. What Is Default Session Time Out In Tomcat?
5. Explain Directory Structure Of Tomcat?
6. What Is Tomcat?
7. How Do You Create Multiple Virtual Hosts?
8. Suppose When We Are Starting Startup.bat File Of Tomcat Server It Is Not
Started. Dos Window Appears For A Second Only. What We Need Do?
9. Explain The Concepts Of Tomcat Servlet Container.?
10.Can I Set Java System Properties Differently For Each Webapp?
11.Explain How Servlet Life Cycles?
12.What Is Webservers? Why It Is Used?
13.How To Communicate Between Two Web Servers In Two Diff Systems?

Ex.No: 7
Books Information
Date:
Aim:
Redo the previous task using JSP by converting the static web pages into dynamic web
pages. Create a database with user information and books information. The books catalogue
should be dynamically loaded from the database.
Procedure:
1. Open Netbeans IDE, Select File -> New Project

2. Select Java Web -> Web Application, then click on Next
3. Give a name to your project and click on Next
4. and then, Click Finish
5. The complete directory structure required for the JSP Application will be created
automatically by the IDE.
6. Create an HTML file, right click on Web Pages -> New -> HTML
7. Give it a name. We recommend you to name it index, because browser will always pick
up the index.html file automatically from a directory. Index file is read as the first page of
the web application.
8. Write some code inside your HTML file. We have created a hyperlink to our JSP in our
HTML file.
9. Create an HTML file, right click on Web Pages -> New -> JSP
10. Give it a name
11. Run your application, right click on your Project and select Run.
Create the table in MySql
Table Name: book
Field Type
title text
author text
version text
publisher text
cost text

Table Name: details

Field Type
id text
title text
amount text
cno Text
Table Name: login
Field Type
name text
addr text
phno int(11)
id text
pwd text
Program Code:
Save: index.html
<html>
<body>
<br><br><br><br><br><br>
<h1 align="center"><u>ONLINE BOOK STORAGE</u></h1><br><br><br>
<h2 align="center"><P><br>
<b> Welcome to online book storage.
Press LOGIN if you are having id
Otherwise press REGISTRATION
</b></P</h2>
<br><br><p>
<div align="center"> <a href="login.html">LOGIN</a><br>
<a href="reg.html">REGISTRATION</a></div></p>
</body>
</html>

Save: catalog.html
<html>
<body><br /><br /><br />
<form method="post" action="catalog.jsp">
BOOK TITLE :<input type="text" name="title" /><br />
</div>
<br />
<input type="submit" value="ok"
name="button1"/>

<input type="reset" value="clear" name="button2"/>

</div>
</form>
</body> </html>
Save: catalog.jsp
<%@page import="java.sql.*"%>
<%@page import="java.io.*"%>
<% out.println("<html><body>");
String title=request.getParameter("title");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/ex7","root","");
Statement stmt=con.createStatement();
String sqlstmt="select * from book where title=\'"+title+"\'";
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next())
{
out.println("<div align=\"center\">");
out.println("TITLE :"+rs.getString(1)+"<br>");
out.println("AUTHOR :"+rs.getString(2)+"<br>");
out.println("VERSION :"+rs.getString(3)+"<br>");
out.println("PUBLISHER :"+rs.getString(4)+"<br>");
out.println("COST :"+rs.getString(5)+"<br>");
out.println("</div>");

flag=1;
}
if(flag==0)
{
out.println("<br><br>SORRY INVALID TITLE TRY AGAIN <br><br>");
out.println("<a href=\"catalog.html\">press HERE to RETRY</a>");
}
out.println("</body></html>");
con.close();
%>
Save: login.html
<html>
<form name="myform" method="post" action="login.jsp">
LOGIN ID :<input type="text" name="id" /><br />
PASSWORD :<input type="password" name="pwd"/></pre>
<br /><br />
</div>
<br /><br />
<input type="submit" value="ok" onclick="validate()" />
      <input type="reset" value="clear" />
</div>
</form>
</body>
</html>
Save: login.jsp
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
//Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
//Connection con=DriverManager.getConnection("jdbc:odbc:orcl","scott","tiger");
String sqlstmt="select id,pwd from login";

int flag=0;
while(rs.next())
{
if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==0)
{
out.println("<br><br>SORRY INVALID ID TRY AGAIN ID<br><br>");
out.println("<a href=\"login.html\">press LOGIN to RETRY</a>");
}
else
{
out.println("<br><br>VALID LOGIN ID<br><br>"); out.println("<h3><ul>");
out.println("<li><a href=\"profile.html\"><fontcolor=\"black\">USER PROFILE</font>
</a></li><br><br>");
out.println("<li><a href=\"catalog.html\"><fontcolor=\"black\">BOOKS
CATALOG</font></a></li><br><br>");
out.println("<li><a href=\"order.html\"><fontcolor=\"black\">ORDER CONFIRMATION</font
</a></li></ul><br><br>");
}
con.close();
%>
Save: Order.html
<html>
<body><br /><br />
<form method="post" action="order.jsp">
ID
:<input type="text" name="id" /><br />
PASSWORD
:<input type="password" name="pwd" /><br/> TITLE
:<input type="text" name="title" /><br /> NO. OF BOOKS :<input type="text" name="no"
/><br />
DATE
:<input type="text" name="date" /><br />
CREDIT CARD NUMBER :<input type="password" name="cno" /><br
/></pre><br /><br />

</div>
<br /><br />
<input type="submit" value="ok" name="button1"/>
      <input type="reset" value="clear"
name="button2"/>
</div>
</form>
</body>
</html>
Save: Order.jsp
<% int count;
out.println("<html><body>");
String pwd=request.getParameter("pwd");
String title=request.getParameter("title");
String count1=request.getParameter("no");
String date=request.getParameter("date");
String cno=request.getParameter("cno");
count=Integer.parseInt(count1);
String sqlstmt="select id,pwd from login";
int flag=0,amount,x;
while(rs.next())
{
if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==0)
{

out.println("<a href= \"order.html \" >press HERE to RETRY</a>");

}
else
{
Statement stmt2=con.createStatement();
String s="select cost from book where title=\'"+title+"\'";
ResultSet rs1=stmt2.executeQuery(s);
int flag1=0;
while(rs1.next())
{
flag1=1;
x=Integer.parseInt(rs1.getString(1));
amount=count*x;
out.println("<br><br>AMOUNT :"+amount+"<br><br><br><br>");
Statement stmt1=con.createStatement();
stmt1.executeUpdate("insert into details values('"+id+"','"+title+"',"+amount+",'"+cno+"');");
out.println("<br>YOUR ORDER has taken<br>");
}
if(flag1==0)
{
out.println("<br><br><br>SORRY INVALID ID TRY AGAIN ID<br><br>");
out.println("<a href=\"order.html\">press HERE to RETRY</a>");
}
}
con.close();
%>
Save: Profile.html
<html>
<form name="myform" method="post" action="profile.jsp">
LOGIN ID :<input type="text" name="id" /><br />
</pre><br /><br />
</div>
<br /><br />
</div>
</form>
</body>
</html>

Save: profile.jsp
String sqlstmt="select * from login where id="+id+"";
int flag=0;
out.println("<br><br><br>");
while(rs.next())
{
out.println("<div align=\"center\">");
out.println("NAME :"+rs.getString(1)+"<br>");
out.println("ADDRESS :"+rs.getString(2)+"<br>");
out.println("PHONE NO :"+rs.getString(3)+"<br>");
out.println("</div>");
flag=1;
}
if(flag==0)
{
out.println("<a href=\"profile.html\">press HERE to RETRY</a>");
}
con.close(); %>
Save:reg.html
<html>
<body><br /><br />
<form name="myform" method="post" action="reg.jsp">
<table align="center" >
<tr>
<td>NAME</td>
<td>:<input type="text" name="name" /></td>
</tr>
<tr>

<td>ADDRESS</td>
<td>:<input type="text" name="addr" /></td>
</tr>
<tr>
<td>CONTACT NUMBER</td>
<td>:<input type="text" name="phno" /></td>
</tr>
<tr>
<td>LOGIN ID</td>
<td>:<input type="text" name="id" /></td>
</tr>
<tr>
<td>PASSWORD</td>
<td>:<input type="password" name="pwd" /></td>
</tr>
</table>
<br /><br />
</div>
</form>
</body>
</html>
Save: reg.jsp
<% response.setContentType("text/html");
out.println("<html><body>");
String name=request.getParameter("name");
String addr=request.getParameter("addr");
String phno=request.getParameter("phno");
String id1=request.getParameter("id");
String pwd1=request.getParameter("pwd");
int no=Integer.parseInt(phno);
Statement
stmt=con.createStatement();
String sqlstmt="select id, pwd from login";

int flag=0;
while(rs.next())
{
if(id1.equals(rs.getString(1)) && pwd1.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==1)
{
out.println("<br><br>SORRY INVALID ID ALREADY EXITS TRY AGAIN WITH NEW
ID<br><br>");
out.println("<a href=\"reg.html\">press REGISTER to RETRY</a>");
}
else
{ Statement stmt1=con.createStatement();
stmt1.executeUpdate("insert into login
values('"+name+"','"+addr+"',"+no+",'"+id1+"','"+pwd1+"');");
out.println("<br><br>YOUR DETAILS ARE ENTERED<br><br>");
out.println("<a href=\"login.html\">press LOGIN to login</a>");
}
con.close();
%>

Output:
Index.html

Login.html
Login.jsp

Save: profile.html
Save: profile.jsp

Save: catlog.jsp

Order.html
Order.jsp
Result

Viva-voce
1. What Is Apache Tomcat?
2. How Do I Can Change The Default Home Page Loaded By Tomcat?
3. How To We Can Change Tomcat Default Port?
4. What Is Default Session Time Out In Tomcat?
5. Explain Directory Structure Of Tomcat?
6. What Is Tomcat?
7. How Do You Create Multiple Virtual Hosts?
8. Suppose When We Are Starting Startup.bat File Of Tomcat Server It Is Not Started. Dos
Window Appears For A Second Only. What We Need Do?
9. Explain The Concepts Of Tomcat Servlet Container.?
10. Can I Set Java System Properties Differently For Each Webapp?
11. Explain How Servlet Life Cycles?
12. What Is Webservers? Why It Is Used?
13. How To Communicate Between Two Web Servers In Two Diff Systems?

Ex.No: 8 RETRIEVING USER INFORMATION FROM XML
Date: DOCUMENT
Aim:
Create and save an XML document at the server, which contains 10 users Information.
Write a Program, which takes user Id as an input and returns the User details by taking the user
information from the XML document
Procedure:
 Save Students information in the XML file on the specific location.
 Create and establish the connection between html file and XML file.
 Get the user ID as input
 Display the student’s information.
Program Code:
Save: index.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Searching for XML Elements </TITLE>
<SCRIPT>
function readXMLData()
{
var xmlDocumentObject, id , name , addr, phone, email;
xmlDocumentObject=new XMLHttpRequest();
xmlDocumentObject.open("GET","userlist.xml",false);
xmlDocumentObject.send();
xmlDocumentObject=xmlDocumentObject.responseXML;
id = xmlDocumentObject.getElementsByTagName("userid");
name = xmlDocumentObject.getElementsByTagName("username");
address = xmlDocumentObject.getElementsByTagName("address");
phone = xmlDocumentObject.getElementsByTagName("phone");
email = xmlDocumentObject.getElementsByTagName("email");
for (i = 0; i < id.length; i++)
{
output=id[i].firstChild.nodeValue;
if (output == document.getElementById("myText").value)

{displayDIV.innerHTML = id[i].firstChild.nodeValue + "<br> " + name[i].firstChild.nodeValue +

"<br> " +
address[i].firstChild.nodeValue + "<br> " + phone[i].firstChild.nodeValue+
"<br>"+email[i].firstChild.nodeValue;
}}}
</SCRIPT>
</HEAD>
<BODY>
<H1>Search User</H1>
<input type="text" id="myText" value="">
<input type="BUTTON" VALUE="Get User Details" ONCLICK="readXMLData()">
<P>
<DIV ID="displayDIV"> </DIV>
</BODY>
</HTML>
Save: userlist.xml
<?xml version="1.0" encoding="UTF-8"?>


<userlist>
<userid>user01</userid>
<username>Suseendhiran R </username>
<address>KPM</address>
<phone>511518104034</phone>
<email>511518104034@ptleecncet.com</email>
<username>Yuvaraj S </username>
<address>Chennai</address>
<phone>511518104035</phone>
<email>511518104035@gmail.com</email>
<phone>511518104035</phone>

<phone>511518104035</phone>
</userlist>

Output:
Result:
Thus the Program takes user id as an input and returns the user details by
taking the user information from the XML document has been executed
successfully.

Viva-voce
1. What does XML stands for?

2. What is XML used for?
3. Is XML format or content-driven?
4. Does XML support user-defined tags?
5. What is XML declaration tag?
6. Can XML be used for multimedia purpose?
7. What is the difference between XML and HTML?
8. What are the benefits of XML?
9. What importance does XSLT hold in XML?
10.What is DTD in XML?
11.What is DOM? What is it used for?
12.What is the main disadvantage of DOM?
13.What does SOAP stand for?
14.What is the relation of SOAP with XML?
15.What are the three components in SOAP?
16.What is XML parser function?
17.What is an XML schema?
18.What is CDATA in XML?
19.How are comments used in XML?
20.What is the usage of XML in development?
21.What are the disadvantages of XML?
22.What do XML editors check?
23. What is XML Parser?

Ex.No: 9
PHP Validation & Store A Data In Database
Date:
Aim:
i) Validate the form using PHP regular expression.
ii) PHP stores a form data into database.
Prerequisites:

 XAMP Server.
Theory:
Form Validation in PHP
An HTML form contains various input fields such as text box, checkbox, radio buttons,
submit button, and checklist, etc. These input fields need to be validated, which ensures that the
user has entered information in all the required fields and also validates that the information
provided by the user is valid and correct.
There is no guarantee that the information provided by the user is always correct. PHP validates
the data at the server-side, which is submitted by HTML form.
You need to validate a few things:
 Empty String
 Validate String
 Validate Numbers
 Validate Email
 Validate URL
 Input length

i. Validate the form using PHP regular expression
Procedure:
 Create a file named formvaldiate.php
 Put it in your web server's root directory (C:\xampp\htdocs)
 Open your XAMPP control panel. In case it doesn't appear on your desktop, it is located
in your XAMPP folder
 clicking the "Start" button on the actions column. You should see a random PID(s) and
the default port number
 Open up your web browser and in the address bar, type localhost.
 Typing localhost/ex9/ formvaldiate.php
Program Code:
Formvaldiate.php
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}

if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>

<p><span class="error">* required field</span></p>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>

Output:

ii. PHP stores a form data into database.
Procedure:
 Create a file named index.php and insert.php
 clicking the "Start" button on the actions column. You should see a random PID(s) and
 Create the Database
CREATE DATABASE staff
 Create the Table
CREATE TABLE college( first_name varchar(30),last_name varchar(30),gender
varchar(30), address varchar(30),email varchar(30));
 Typing localhost/ex9ii/ index.php
Program Code:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>GFG- Store Data</title>
</head>
<body>
<center>
<h1>Storing Form data in Database</h1>
<form action="insert.php" method="post">
<p>
<label for="firstName">First Name:</label>
<input type="text" name="first_name" id="firstName">
</p>
<p>
<label for="lastName">Last Name:</label>
<input type="text" name="last_name" id="lastName">
</p>
<p>
<label for="Gender">Gender:</label>
<input type="text" name="gender" id="Gender">
</p>
<p>

<label for="Address">Address:</label>
<input type="text" name="address" id="Address">
</p>
<p>
<label for="emailAddress">Email Address:</label>
<input type="text" name="email" id="emailAddress">
</p>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
insert.php
<!DOCTYPE html>
<html>
<head>
<title>Insert Page page</title>
</head>
<body>
<center>
<?php
// servername => localhost

// username => root
// password => empty
// database name => staff
$conn = mysqli_connect("localhost", "root", "", "staff");
// Check connection
if($conn === false){
die("ERROR: Could not connect. "
. mysqli_connect_error());
}
// Taking all 5 values from the form data(input)

$first_name = $_REQUEST['first_name'];
$last_name = $_REQUEST['last_name'];
$gender = $_REQUEST['gender'];
$address = $_REQUEST['address'];
$email = $_REQUEST['email'];

// Performing insert query execution

// here our table name is college
$sql = "INSERT INTO college VALUES ('$first_name',
'$last_name','$gender','$address','$email')";
if(mysqli_query($conn, $sql)){
echo "<h3>data stored in a database successfully."
. " Please browse your localhost php my admin"
. " to view the updated data</h3>";
echo nl2br("\n$first_name\n $last_name\n "

. "$gender\n $address\n $email");
} else{
echo "ERROR: Hush! Sorry $sql. "
. mysqli_error($conn);
}
// Close connection
mysqli_close($conn);
?>
</center>
</body>
</html>
CS8661 - Internet Programming Laboratory Page 100 of

111
Output:
index.php
insert.php
Result:

111
Viva-voce
1. What is PHP?
2. What do the initials of PHP stand for?
3. Which programming language does PHP resemble?
4. What does PEAR stand for?
5. What is the actually used PHP version?
6. How do you execute a PHP script from the command line?
7. How to run the interactive PHP shell from the command line interface?
8. What is the correct and the most two common way to start and finish a PHP block of
code?
9. How can we display the output directly to the browser?
10. What is the main difference between PHP 4 and PHP 5?
11. Is multiple inheritance supported in PHP?
12. What is the meaning of a final class and a final method?
13. How is the comparison of objects done in PHP?
14. How can PHP and HTML interact?
15. What type of operation is needed when passing values through a form or an URL?
16. How can I display text with a PHP script?
17. What should we do to be able to export data into an Excel file?

111
Ex.No: 10 Write a web service for finding what people think by asking 500
Date: people’s opinion for any consumer product
Aim:
Write a web service for finding what people think by asking 500 people’s opinion for any
consumer product.
Prerequisites:

 XAMP Server.
Procedure:
 Create a file named index.php, comment-list.php, db.php and comment-add.php
 Clicking the "Start" button on the actions column. You should see a random PID(s) and
 Create the Database
CREATE DATABASE ex10
 Create the Table
CREATE TABLE `tbl_comment` (
`comment_id` int(11) NOT NULL,
`parent_comment_id` int(11) DEFAULT NULL,
`comment` varchar(200) NOT NULL,
`comment_sender_name` varchar(40) NOT NULL,
`date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
)
ALTER TABLE `tbl_comment`

ADD PRIMARY KEY (`comment_id`);
ALTER TABLE `tbl_comment`

MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=1;
COMMIT;

111
 Typing localhost/ex10/index.php
Program:
index.php
<html>
<head>
<style>
body {
font-family: Arial;
width: 550px;
}
.comment-form-container {
background: #F0F0F0;
border: #e0dfdf 1px solid;
padding: 20px;
border-radius: 2px;
}
.input-row {
margin-bottom: 20px;
}
.input-field {
width: 100%;
border-radius: 2px;
padding: 10px;
border: #e0dfdf 1px solid;
}
.btn-submit {
padding: 10px 20px;
background: #333;
border: #1d1d1d 1px solid;
color: #f0f0f0;
font-size: 0.9em;
width: 100px;
border-radius: 2px;
cursor:pointer;

111
ul {
list-style-type: none;
}
.comment-row {
border-bottom: #e0dfdf 1px solid;
margin-bottom: 15px;
padding: 15px;
}
.outer-comment {
background: #F0F0F0;
padding: 20px;
border: #dedddd 1px solid;
}
span.commet-row-label {
font-style: italic;
}
span.posted-by {
color: #09F;
}
.comment-info {
font-size: 0.8em;
}
.comment-text {
margin: 10px 0px;
}
.btn-reply {
font-size: 0.8em;
text-decoration: underline;
color: #888787;
cursor:pointer;
}
#comment-message {
margin-left: 20px;
color: #189a18;
display: none;
}
</style>
<title>Comment System using PHP and Ajax</title>

111
<script src="jquery-3.2.1.min.js"></script>
<body>
<h1>Comment System using PHP and Ajax</h1>
<div class="comment-form-container">
<form id="frm-comment">
<div class="input-row">
<input type="hidden" name="comment_id" id="commentId"
placeholder="Name" /> <input class="input-field"
type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="input-row">
<textarea class="input-field" type="text" name="comment"
id="comment" placeholder="Add a Comment"> </textarea>
</div>
<div>
<input type="button" class="btn-submit" id="submitButton"
value="Publish" /><div id="comment-message">Comments Added Successfully!
</div>
</div>
</form>
</div>
<div id="output"></div>
<script>
function postReply(commentId) {
$('#commentId').val(commentId);
$("#name").focus();
}
$("#submitButton").click(function () {
$("#comment-message").css('display', 'none');
var str = $("#frm-comment").serialize();
$.ajax({
url: "comment-add.php",
data: str,
type: 'post',
success: function (response)
{
var result = eval('(' + response + ')');
if (response)
{
$("#comment-message").css('display', 'inline-block');

111
$("#name").val("");
$("#comment").val("");
$("#commentId").val("");
listComment();
} else
{
alert("Failed to add comments !");
return false;
}
}
});
});
$(document).ready(function () {
listComment();
});
function listComment() {
$.post("comment-list.php",
function (data) {
var data = JSON.parse(data);
var comments = "";

var replies = "";
var item = "";
var parent = -1;
var results = new Array();
var list = $("<ul class='outer-comment'>");

var item = $("<li>").html(comments);
for (var i = 0; (i < data.length); i++)

{
var commentId = data[i]['comment_id'];
parent = data[i]['parent_comment_id'];
if (parent == "0")
{
comments = "<div class='comment-row'>"+
"<div class='comment-info'><span
class='commet-row-label'>from</span> <span class='posted-by'>" + data[i]
['comment_sender_name'] + " </span> <span class='commet-row-label'>at</span> <span
class='posted-at'>" + data[i]['date'] + "</span></div>" +
"<div class='comment-text'>" + data[i]['comment'] + "</div>"+

111
"<div><a class='btn-reply' onClick='postReply(" + commentId +

")'>Reply</a></div>"+
"</div>";

list.append(item);
var reply_list = $('<ul>');
item.append(reply_list);
listReplies(commentId, data, reply_list);
}
}
$("#output").html(list);
});
}
function listReplies(commentId, data, list) {

for (var i = 0; (i < data.length); i++)
{
if (commentId == data[i].parent_comment_id)
{
var comments = "<div class='comment-row'>"+
" <div class='comment-info'><span class='commet-row-label'>from</span>
<span class='posted-by'>" + data[i]['comment_sender_name'] + " </span> <span class='commet-
row-label'>at</span> <span class='posted-at'>" + data[i]['date'] + "</span></div>" +
"<div class='comment-text'>" + data[i]['comment'] + "</div>"+
"<div><a class='btn-reply' onClick='postReply(" + data[i]['comment_id'] +
")'>Reply</a></div>"+
"</div>";
var reply_list = $('<ul>');
list.append(item);
item.append(reply_list);
listReplies(data[i].comment_id, data, reply_list);
}
}
}
</script>
</body>
</html>

111
db.php
<?php
$conn = mysqli_connect("localhost","root","","ex10");
?>
comment-list.php
<?php
require_once ("db.php");
$sql = "SELECT * FROM tbl_comment ORDER BY parent_comment_id asc, comment_id asc";
$result = mysqli_query($conn, $sql);

$record_set = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($record_set, $row);
}
mysqli_free_result($result);
mysqli_close($conn);
echo json_encode($record_set);
?>
comment-add.php
<?php
require_once ("db.php");
$commentId = isset($_POST['comment_id']) ? $_POST['comment_id'] : "";
$comment = isset($_POST['comment']) ? $_POST['comment'] : "";
$commentSenderName = isset($_POST['name']) ? $_POST['name'] : "";
$date = date('Y-m-d H:i:s');
$sql = "INSERT INTO

tbl_comment(parent_comment_id,comment,comment_sender_name,date) VALUES ('" .
$commentId . "','" . $comment . "','" . $commentSenderName . "','" . $date . "')";
$result = mysqli_query($conn, $sql);
if (! $result) {
$result = mysqli_error($conn);
}

111
echo $result;
?>
Output:
Result:

111
Viva-voce
1. What is jQuery ?
2. Does jQuery HTML work for both HTML and XML documents ?
3. What are jQuery Selectors ? Give some examples.
4. What are the advantages of jQuery ?
5. What are the methods used to provide effects?
6. Difference between .empty(), .remove() and, .detach() in Jquery ?
7. Is jQuery a JavaScript or JSON library file ?
8. What are the various ajax functions available in Jquery ?
9. Mention the compatible operating systems with jQuery
10. What is jQuery connect ?
11. What are the different technologies used in AJAX?
12. What is Ajax?
13. What is a synchronous request in AJAX?
14. How is Ajax different?
15. Are Ajax applications easier to develop than traditional Web Applications?
16. Do Ajax applications always deliver a better experience than traditional Web
Applications?
17. Does Ajax work with another language?
18. What is an asynchronous request in AJAX?

111

Ip Lab 13 03 (Repaired) Ok With Viva

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ip Lab 13 03 (Repaired) Ok With Viva

Uploaded by

Copyright:

Available Formats

P.T.

Lee Chengalvaraya Naicker

 Dreamweaver Or Notepad++ Or Visual Studio Code Or Sublime Text Or

<img> Tag Definition and Usage

The <img> tag is used to embed an image in an HTML page.

The <img> tag has two required attributes:

 src - Specifies the path to the image

CS8661 - Internet Programming Laboratory Page 1 of 111

Attribute Value Description

<map> Tag Definition and Usage

Attribute Value Description

<area> Tag Definition and Usage

<area> elements are always nested inside a <map> tag.

Attribute Value Description

 Create a html file with map tag

CS8661 - Internet Programming Laboratory Page 2 of 111

<table border="1" cellpadding="0" cellspacing="0" width="20" border-

<td width="130" height="676"><font FACE="Times New Roman"

CS8661 - Internet Programming Laboratory Page 3 of 111

<p> It is most populated city in india. it is famous for sweets.

<p> It is one of metropolitan city in india. it has second longest

CS8661 - Internet Programming Laboratory Page 4 of 111

<p> Kashmir is situated in northern tip of india. <br>

<p> Mumbai is one of the most populated city in india.

CS8661 - Internet Programming Laboratory Page 5 of 111

CS8661 - Internet Programming Laboratory Page 6 of 111

CS8661 - Internet Programming Laboratory Page 7 of 111

CS8661 - Internet Programming Laboratory Page 8 of 111

Cascading style sheets

 Create a web page using the HTML

CS8661 - Internet Programming Laboratory Page 9 of 111

CS8661 - Internet Programming Laboratory Page 10 of 111

CS8661 - Internet Programming Laboratory Page 11 of 111

CS8661 - Internet Programming Laboratory Page 12 of 111

Save: External CSS.html

<li> INTERNET PROGRAMMING LABORATORY </li>

CS8661 - Internet Programming Laboratory Page 13 of 111

Embedded style sheets

h2{ font-family:times roman;

CS8661 - Internet Programming Laboratory Page 14 of 111

Inline style sheets

Save: inlinestyle sheet.html

CS8661 - Internet Programming Laboratory Page 15 of 111

CS8661 - Internet Programming Laboratory Page 16 of 111

Input and Output:

Cascading style sheets

Inline style sheets

CS8661 - Internet Programming Laboratory Page 17 of 111

Embedded style sheets

CS8661 - Internet Programming Laboratory Page 18 of 111

1. Describe the Syntax about External / Internal Style Sheets.

CS8661 - Internet Programming Laboratory Page 19 of 111

JavaScript is a lightweight, interpreted programming language. It is designed for creating

JavaScript can be added to your HTML file in two ways:

CS8661 - Internet Programming Laboratory Page 20 of 111

6. Embed JavaScript in the Web page for Client-side form validation.

<frameset rows=”25%, 75 %”>

CS8661 - Internet Programming Laboratory Page 21 of 111

<li><a href=”payment.html” target=”right”><fontcolor=”black”> PAYMENT</font></a></li><br><br>

Registration and user Login

User profile page

CS8661 - Internet Programming Laboratory Page 22 of 111

CS8661 - Internet Programming Laboratory Page 23 of 111

<input type="submit" value="ok" onClick="validate()">