BCSL-057 Lab Manual Solution - 1442837699280

BCSL-057
Web Programming
Session 1: Using Web 2.0 and creating pages using XHTML

Ans 1. Here are the features of the 5 Web 2.0 technologies:
I.
Features of Javascript:
1. Browser support: All browsers have accepted javascript as a

scripting language for them and provides integrated support for
it. All you need to do is to handle some of the tasks that are
dependent on DOM (Document Object
Model) of different
browsers properly.
2. Used on client side as well as on server side: As javascript has
access to Document object model of browser, you can actually
change the structure of web pages at runtime. Due to this,
javascript can be used to add different effects to webpages. On
the other hand, javascript could be used on the server side as
well.
3. Functional programming language: In javascript, function could
be assigned to variables just like any other data types. Not only
that, but a function can accept another function as a parameter
and can also return a function.
4. Support for objects: Javascript is an object oriented language.
However, the way javascript handles objects and inheritance is
bit different from conventional object oriented programming
languages like Java. Due to this, javascript supports most of the
object oriented concepts while being simple to learn and use.
II. Features of HTML5:
1. Video elements: Designers can now build web pages without
having to resort to third-party proprietary plug-in software like
Flash. YouTube is experimenting with using HTML 5 to display
video. Built in video controls makes the feature more attractive
and easy to use.
By teznikal team:
Page 1
BCSL-057
Web Programming
2. Application cache: On the lines of Outlook but minus the email

client requirement, you can now store web apps much like emails
locally. Google has already made use of this feature replacing its
Google Gears mail client with HTML 5. Google Wave also uses
HTML 5.
3. Canvas for Images: The canvas element that comes with HTML 5
lets you manipulate graphics and photos enabling easy rendering
of images. Designers no longer need to use intermediate
technologies like jQuery. This will help save development time
and effort.
4. Geolocation: The HTML5 Geolocation feature enables location
identification using various geo location technologies GPS (Global
Positioning system), IP address, RFID (Radio frequency ID), WiFi , Bluetooth MAC address and GSM/CDMA cell IDs. The system is
bound by privacy regulations and needs to be authorized by
individuals before it can be utilized.
5. Web workers: This feature enables a web application to execute
complex tasks independently without interfering with the
performance of a webpage in real-time.
III. Features of XML:
1. XML provides a basic syntax that can be used to share
information between different kinds of computers, different
applications, and different organizations. XML data is stored in
plain text format. This software- and hardware-independent way
of storing data allows different incompatible systems to share
data without needing to pass them through many layers of
conversion. This also makes it easier to expand or upgrade to
new operating systems, new applications, or new browsers,
without losing any data.
2. XML is heavily used as a format for document storage and
processing, both online and offline.
By teznikal team:
Page 2
BCSL-057
Web Programming
3. It is platform-independent, thus relatively immune to changes in

technology.
4. It allows validation using schema languages such as XSD and
Schematron, which makes effective unit-testing, firewalls,
acceptance testing, contractual specification and software
construction easier.
IV. Features of JSP:
1. Scripting Elements - JSP supports 3 types of scripting elements:
declarations, scriptlets and expressions. Scriptlets are most
commonly used to enter any code fragments in the default Java
language.
2. Built-in Objects - JSP 2.1 supports a number of built-in implicit
objects that provide you easy access to different parts of the
application environment.
3. Java Beans - JSP 2.1 supports JavaBean objects using the
"useBean" action element.
4. JSTL (JSP Standard Tag Library) - JSP 2.1 supports JSTL core
library and custom tag libraries.
V. Features of Ajax:
1. Real-Time Updates: As part of the continuous feel, Ajax
applications can update the page in real-time. Currently, news
services on the web redraw the entire page at intervals, e.g.
once every 15 minutes. In contrast, it's feasible for a browser
running an Ajax application to poll the server every few seconds,
so it's capable of updating any information directly on the parts
of the page that need changing. The rest of the page is
unaffected.
2. Graphical Interaction: Ajax represents a transition into the world
of GUI controls visible on present-day desktops. Thus, you will
encounter animations such as fading text to tell you something's
By teznikal team:
Page 3
BCSL-057
Web Programming
just been saved, you will be able to drag items around, you will
see some static text suddenly turn into an edit field as you hover
over it.
3. Language Neutrality : Ajax strives to be equally usable with all

the popular languages rather than be tied to one language. Past
GUI attempts such as VB, Tk, and Swing tended to be married to
one specific programming language. Ajax has learned from the
past and rejects this notion. To help facilitate this, XML is often
used as a declarative interface language.
4. Continuous Feel: Ajax offers a smooth ride all the way. There's no
page reloads here - you're just doing stuff and the browser is
responding. The server is only telling the screen what changed
rather than having it redraw the whole screen from scratch .
Session 3: Creating sample XML document and displaying it

1. Customer list of an organization includes the name of customers,
their Home or permanent addresses, and at least two phone
numbers. Create a customer list of at least four customer using
XML.
Ans 1. Customer_list.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE customer SYSTEM "Customer.dtd">
<customer_list>
<customer>
<name>Mr. Arun Kasana</name>
<address>Greater Kailash</address>
<phone_no>011-24334422</phone_no>
<mob_no>9992222650</mob_no>
</customer>
<customer>
<name>Ms. Priya Sharma</name>
<address>Karol Bagh</address>
By teznikal team:
Page 4
BCSL-057
Web Programming
<mob_no>9987222567</mob_no>
</customer>
<customer>
<name>Mr. Vipin Kumar</name>
<address>Mayur Vihar</address>
<mob_no>9987878777</mob_no>
</customer>
<customer>
<name>Mr. Kamalkant</name>
<address>Janak Puri</address>
<mob_no>9992222897</mob_no>
</customer>
</customer_list>
2. Create the DTD for the customers you created in problem 1.

Ans. 2 Customer.dtd
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT customer (name, address, phone_no, mob_no)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT phone_no (#PCDATA)>
<!ELEMENT mob_no (#PCDATA)>
3. Create an XML document to that stores data as XML document,

checks it using XML schema and displays the information as shown
in the table below:
Subject
Programme
Name of
Students
Database Systems
MCA
Advanced Operating System
M.Tech
Ramesh
Riaz
Sandeep
By teznikal team:
Page 5
BCSL-057
Web Programming
Web Programming
BCA
Cristopher
Salim
Farhin
Rajan
Ans. 3 StudentInfo.xml
<student_info
xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xsi:schemaLocation="StudentInfo.xsd">
<student>
<subject>Database Systems</subject>
<programme>MCA</programme>
<name>Ramesh</name>
</student>
<student>
<subject>Database Systems</subject>
<programme>MCA</programme>
<name>Riaz</name>
</student>
<student>
<subject>Advanced Operating System</subject>
<programme>M. Tech.</programme>
<name>Sandeep</name>
</student>
<student>
<name>Cristopher</name>
</student>
<student>
<name>Salim</name>
</student>
<student>
<subject>Web Programming</subject>
<programme>BCA</programme>
By teznikal team:
Page 6
BCSL-057
Web Programming
<name>Farhin</name>
</student>
<student>
<subject>Web Programming</subject>
<programme>BCA</programme>
<name>Rajan</name>
</student>
</student_info>
StudentInfo.xsd
<?xml version="1.0"?>
<xs:schema version="1.0"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
elementFormDefault="qualified">
<xs:element name="student_info">
<xs:complexType>
<xs:sequence>
<xs:element name="subject" type="xs:string"/>
<xs:element name="programme" type="xs:string"/>
<xs:element name="name" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
4. Create a database of books titles, authors, year of publication,

publisher name, price and number of copies purchased using XML.
The list should have at least 10 books and every book must have at
least one author. Create the XML schema for this books data.
Ans. 4 Book_store.xml
By teznikal team:
Page 7
BCSL-057
Web Programming
<book_store
xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xsi:schemaLocation="book_store.xsd">
<book>
<title>India 2013</title>
<author>Government of India</author>
<pub_year>2013</pub_year>
<publisher>Publication Division</publisher>
<price>Rs. 410</price>
<no_of_copies>5</no_of_copies>
</book>
<book>
<title>The Casual Vacancy</title>
<author>J K Rowling</author>
<publisher>Little, Brown Book Group</publisher>
</book>
<book>
<title>Midnights Children</title>
<author>Salman Rushdie</author>
<publisher>Vintage</publisher>
</book>
<book>
<title>Inferno</title>
<author>Dan Brown</author>
<publisher>Random House</publisher>
</book>
<book>
<title>Wings of Fire</title>
<author>A P J Abdul Kalam</author>
By teznikal team:
Page 8
BCSL-057
Web Programming
<publisher>Universities Press</publisher>
</book>
<book>
<title>Turning Points</title>
<author>A P J Abdul Kalam</author>
<publisher>Harper Collins</publisher>
</book>
<book>
<title>Revolution 2020</title>
<author>Chetan Bhagat</author>
<publisher>Rupa & Co</publisher>
</book>
<book>
<title>2 States</title>
<author>Chetan Bhagat</author>
<publisher>R R Sheth % Co.</publisher>
</book>
<book>
<title>Indian Economy</title>
<author>Ramesh Singh</author>
<publisher>McGraw Hill Education</publisher>
</book>
<book>
<title>A Bend in The River</title>
By teznikal team:
Page 9
BCSL-057
Web Programming
<author>V S Naipaul</author>
<publisher>Picador</publisher>
</book>
</book_store>
Book_store.xsd
<?xml version="1.0"?>
<xs:schema version="1.0"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
elementFormDefault="qualified">
<xs:element name="book_store">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="pub_year" type="xs:integer"/>
<xs:element name="publisher" type="xs:string"/>
<xs:element name="price" type="xs:integer"/>
<xs:element name="no_of_copies" type="xs:integer"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Session 4 and 5: Using and writing JavaScript in web pages

1. Write a JavaScript program that displays a Drop Down Menu.
Ans 1. <!DOCTYPE html>
By teznikal team:
Page 10
BCSL-057
Web Programming
<html>
<head> <title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script>
function drop(x)
{
if (document.form1.menu.value !== "null")
document.location.href = x;
}
</script>
</head>
<body>
<form name="form1">
<select
name="menu"
onChange="drop(document.form1.menu.options
[document.form1.menu.options.selectedIndex].value);">
<option>Select</option>
<option value=Hyper.html>HTML</option>
<option value=css.html>CSS</option>
<option value=sql.html>SQL</option>
<option value=db.html>Database</option>
</select>
</form>
</body>
</html>
Output
By teznikal team:
Page 11
BCSL-057
Web Programming
2. Write a JavaScript program that creates

automatically changing pictures on a web page.
Ans 2.
<!DOCTYPE html>
<html>
<head><title>Slideshow</title>
<meta
http-equiv="Content-Type"
charset=UTF-8">
</head>
<body>
<script>
var slideimages=new Array()
function slideshowimages()
{
for (i=0;i<slideshowimages.arguments.length;i++)
{
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
</script>
sequence
of
content="text/html;
<img src="D:\images (4).jpg" alt="Slideshow Image Script" title="Slideshow Image

Script" name="slide" border=0 width=200 height=200>
<script>
slideshowimages("D:\images (4).jpg","D:\images (2).jpg","D:\kds.jpg","D:\images
By teznikal team:
Page 12
BCSL-057
Web Programming
(1).jpg")
var slideshowspeed=1000
var whichimage=0
function slideit()
{
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
</script>
</body>
</html>
Output
3. Write JavaScript code to check if data has been properly entered

in the forms you have created so far. This activity may be performed
when you press the Check Button that you may create on each form.
Ans 3.
4. Write a JavaScript program that displays the current time and

updates it after every minute.
Ans 4.
<!DOCTYPE html>
<html>
<head>
<title></title>
By teznikal team:
Page 13
BCSL-057
Web Programming

charset=UTF-8">
<script>
function getTimes(){
var dt=new Date();
form1.t.value= dt.getHours() + ":" + dt.getMinutes() + ":" +
dt.getSeconds();
window.setTimeout("getTimes()",60000);
}
</script>
</head>
<body onLoad="getTimes();">
<form name="form1" method="post" action="">
<input name="t" type="text" id="t">
</form>
</body>
</html>
5. Write a JavaScript program that counts the number of times a

Button is clicked.
Ans 5.
<!DOCTYPE html>
<html>
<head>
<title></title>
charset=UTF-8">
<script>
var counter;
counter=0;
function count()
{
counter++;
document.getElementById("a").innerHTML=counter;
By teznikal team:
Page 14
BCSL-057
Web Programming
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<div align="center">
<input type="button" name="Button"
onClick="count();">
<p id="a"></p>
</div>
</form>
</body>
</html>
value="Hit
Me"
6. Create a web page with two pictures. Write a JavaScript program

that displays the description of the picture when mouse is brought
over the picture.
Ans 6.
<!DOCTYPE html>
<html>
<head>
<title></title>
charset=UTF-8">
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id1,id2){
document.getElementById(id1).style.visibility="hidden";
document.getElementById(id2).style.visibility="hidden";
}
</script>
</head>
<body onload="hide('txt1','txt2');">
By teznikal team:
Page 15
BCSL-057
Web Programming
<div style="background-image:url('images.jpg'); text-align:center;

height:250px;
width:180px;"
onMouseOver
=
"show('txt1');"
onMouseOut="hide
('txt1');">
<br/><br/>
<p id="txt1" style="color:yellow; font-size:15pt; font-weight: bold;
">
"Wings of Fire"<br/> is an autobiography of A P J Abdul
Kalam, former
President of India. It was written by Dr. Kalam and Arun
Tiwari.</p></div>
<div style="background-image:url('books.jpg'); text-align:center;
height:270px;
width:180px;"
onMouseOver
=
"show('txt2');"
onMouseOut="hide
('txt2');">
<br/><br/>
<p id="txt2" style="color:white; font-size:15pt; font-weight:
bold;">
"The 3 Mistakes of My Life"<br/> is the third novel written by
Chetan
Bhagat. The book was published in May 2008</p></div>
</body>
</html>
7. Write a JavaScript program to demonstrate simple animation on a

web page.
Ans 7.
<!DOCTYPE html>
<html>
<head>
<title>Rollover with a Mouse Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<script>
By teznikal team:
Page 16
BCSL-057
Web Programming
if(document.images){
var image1 = new Image();
image1.src = "books.jpg";
var image2 = new Image();
image2.src = "images.jpg";
}
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="images.jpg" />
</a>
</body>
</html>
Session 6, 7: Using JSP/Servlet

1. Write a JSP/Servlet program that takes your name and address
from an HTML Form and displays it on a web page.
Ans 1. UserInfo.html
<!DOCTYPE
html
%@page
contentType="text/html"
pageEncoding="UTF-8"%>
<html>
<head>
charset=UTF-8">
<title>User Info</title>
</head>
<body >
<h1>User Information</h1>
<center>
<h2>Enter Details</h2><br/>
<form action="Info.jsp" method="post">
By teznikal team:
Page 17
BCSL-057
Web Programming
<br/>Username:
<input
type="text"
name="username"><br/>
<br/>Address:
name="address"></textarea><br/><br/>
<br/><input type="submit" value="Submit">
</form>
</center>
</body>
</html>
<textarea
Info.jsp
<!DOCTYPE
html
%@page
<html>
<head>
charset=UTF-8">
<title>User Info</title>
</head>
<body>
<br/><br/><br/><br/><br/>
<center><h2>Information given by User:</h2>
<br/><br/>
<%
String username=request.getParameter("username");
session.setAttribute("username",username);
String address=request.getParameter("address");
session.setAttribute("address",address);
String a=session.getAttribute("username").toString();
out.println("<b>Name: </b>"+a);
String b=session.getAttribute("address").toString();
out.println("<br/><br/><b>Address: </b>"+b);
%>
</center>
</body>
</html>
Output:
By teznikal team:
Page 18
BCSL-057
Web Programming
2. Write a JSP program that output current time only.

Ans 2. Time.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
By teznikal team:
Page 19
BCSL-057
Web Programming
<head>

charset=UTF-8">
<title>Current Time</title>
</head>
<body>
<%
java.util.Calendar calendar=java.util.Calendar.getInstance();
int hour=calendar.get(calendar.HOUR);
int min=calendar.get(calendar.MINUTE);
int sec=calendar.get(calendar.SECOND);
out.println("<b>Current time:-</b> "+ hour+" : "+min+ " :
"+sec);
%>
</body>
</html>
Output:
3. Write a JSP program that counts the number of times a link is

clicked.
Ans 3. Counter.jsp
<!DOCTYPE html>
<html>
<head><title>Counter</title></head>
By teznikal team:
Page 20
BCSL-057
Web Programming
<body>
<%! int clicks = 0; %>
<%
String param = request.getParameter("integer");
try
{
int i = Integer.parseInt(param);
clicks ++;
}
catch (NumberFormatException e)
{
}
%>
<p>Number of clicks: <%= clicks %> </p>
<form action="">
<input type="text" name="integer" value="1"/>
<input type="submit" value="submit" />
</form>
</body>
</html>
Output:
4. Create five pages of a web site having similar top and left panels.
The top should have a logo on the left and name of the organization
By teznikal team:
Page 21
BCSL-057
Web Programming
in the middle. The left should have a drop down menu. Use JSP to
include it in all the web pages.
Ans 4. Top.jsp
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>IGNOU</title>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="top">
<table><tr><td class="pic"></td>
<td><h1>Indira Gandhi National Open University</h1>
<h3>REGIONAL CENTRE DELHI-2<br>Gandhi Smriti & Darshan
Samiti Rajghat, New Delhi-110002, INDIA</h3></td></tr>
</table>
</div>
</body>
</html>
Left.jsp
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<script >
function drop(x)
{
if (document.form1.menu.value != "null")
{
By teznikal team:
Page 22
BCSL-057
Web Programming
document.location.href = x
}
}
</script>
</style>
</head>
<body>
<div class="left"><br/><br/>
<form name="form1">
<select
name="menu"
onChange="drop(document.form1.menu.options[document.form1.m
enu.options.selectedIndex].value)">
<option value=Home.jsp>Home</option>
<option value=Events.jsp>Events</option>
<option value=Stu_Support.jsp>Student Support</option>
<option value=Dev_Profile.jsp>Developer Profile</option>
<option value=Feedback.jsp>Feedback</option>
</select>
</form>
</div>
</body>
</html>
Home.jsp
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<script >
function drop(x)
{
if (document.form1.menu.value != "null")
{
document.location.href = x
By teznikal team:
Page 23
BCSL-057
Web Programming
}
}
</script>
</style>
</head>
<body>
<div class="left"><br/><br/>
<form name="form1">
<select
name="menu"
onChange="drop(document.form1.menu.options[document.form1.m
enu.options.selectedIndex].value)">
<option value=Home.jsp>Home</option>
<option value=Events.jsp>Events</option>
<option value=Stu_Support.jsp>Student Support</option>
<option value=Dev_Profile.jsp>Developer Profile</option>
<option value=Feedback.jsp>Feedback</option>
</select>
</form>
</div>
</body>
</html>
Events.jsp
<!DOCTYPE html>
<html>
<head>
<meta
charset=utf-8"/>
content="text/html;
<title>Study Centre Website</title>

</style>
</head>
By teznikal team:
Page 24
BCSL-057
Web Programming
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<%@include file= "Left.jsp"%>
<div class="content">
<div class="content"><br/><br/><br/><br/>
<table class="eve"><tr class="sc"><th class="eve"
colspan="4">Events Details</th></tr>
<tr><th class="eve">S. No.</th>
<th class="eve">Events</th>
<th class="eve">Date</th>
<th class="eve">Time</th></tr>
<tr><td>1.</td>
<td>Classical Music Recital </td>
<td>29 September 2013</td>
<td>10:00 AM</td>
</tr>
<tr class="alt"><td>2.</td>
<td>Foundation Day Celebration</td>
<td>20 October 2013</td>
<td>09:00 AM</td>
</tr>
<tr><td>3.</td>
<td>Children's Day Celebration</td>
<td>14 November 2013</td>
<td>11:00 AM</td>
</tr>
<td>Debate Competition</td>
<td>10 December 2014</td>
<td>12:30 PM</td>
</tr>
</table>
</div>
</div>
</div></div></body></html>
By teznikal team:
Page 25
BCSL-057
Web Programming
Stu_Support.jsp
<!DOCTYPE html>
<html>
<head>
<meta
charset=utf-8"/>
content="text/html;

</style>
</head>
<body>
<a href="#">Attendance</a><br/>
<a href="#">Date Sheet</a><br/>
<a href="#">Result</a><br/>
<a href="#">Grade Card</a><br/>
<a href="#">Previous Year Question Papers</a><br/>
<a href="#">Assignments</a><br/>
</div>
Dev_Profile.jsp
<!DOCTYPE html>
<html>
<head>
<meta
charset=utf-8"/>
content="text/html;
By teznikal team:
Page 26
BCSL-057
Web Programming
</style>
</head>
<body>
<h3 class="cen">Developer Profile</h3>
<div class="cen"><img src="pic.jpg" width="300"
height="200"/><br/>Soni Dubey</div><br/>
<table class="eve"><tr class="sc"><th class="eve"
colspan="5">Academic Qualification</th></tr>
<th>Qualification</th>
<th>Board</th>
<th>Marks %</th>
<th>Year</th></tr>
<tr><td>1.</td>
<td >10th</td>
<td>CBSE</td>
<td>72.62</td>
<td>2008</td></tr>
<td>12th</td>
<td>CBSE</td>
<td>71.55</td>
<td>2010</td></tr>
</table><br/><br/>
<table class="eve"><tr class="sc"><th
colspan="2">Projects Detail</th></tr>
<th class="eve">Project Name</th></tr>
<tr><td>1.</td>
<td>MakeMyDeal.com</td></tr>
By teznikal team:
Page 27
BCSL-057
Web Programming
<td>BookMyTrip.com</td></tr>
<tr><td>3.</td>
<td>MyIndia.com</td></tr>
</table>
<ul><li>Hobbies: Reading
books & surfing net</li>
<li>Interests: Listening to music & learning
new things</li></ul>
</div>
Feedback.jsp
<!DOCTYPE html>
<html>
<head>
<meta
charset=utf-8"/>
content="text/html;

<script>
function verify()
{
if (document.form1.name.value === "") {
alert("Please Enter your Name");
document.form1.name.focus();
return false;
}
if (document.form1.enrol.value === "") {
alert("Please enter your Enrollment No.");
document.form1.enrol.focus();
return false;
}
if (document.form1.email.value === "") {
alert("Please give the Email ID");
return false;
}
By teznikal team:
Page 28
BCSL-057
Web Programming
if (document.form1.comment.value === "") {
alert("Please write your comments.");
document.form1.comment.focus();
return false;
}
return true;
}</script>
</style>
</head>
<body>
<br/><br/><br/><br/>
<form action="" name="form1">
<fieldset class="eve"><legend class="eve1">Feedback
Form</legend>
<br/><br/>Name: <input class="right" type="text"
name="name"/>
<br/><br/>Enrollment No. (Filled in by the students
of IGNOU
only):<input class="right" type="text" name="enrol"/>
<br/><br/>Email ID:<input class="right" type="text"
name="email"/>
<br/><br/>Write your comments here:
<br/><textarea class="right"
rows="5" cols="30" name="comment"></textarea>
<input type="submit" value="Submit" onClick="return
(verify());">
</fieldset>
</form>
By teznikal team:
Page 29
BCSL-057
Web Programming
</div>
IGNOUCSS.css
body{color:#000; font-size:18pt; margin:0; padding:0;font-family:
cambria;}
.top{color: white; background:green; text-align:center; fontsize:10pt;height:150px; padding-left: 20px;}
.container{width:100%}
.pic{background-image:
url('ignou-logo3.jpg');
width:298px;
height:100px;}
table{width:100%; padding:3px;}
.
left{float:left;background:darkorange;width:250px;height:750px;pa
dding-left: 5px;margin:0;}
.footer{clear:both;color:white;text-align:center;backgroundcolor:lightseagreen;font-size:15pt; }
.content{color:
green;
background-color:
pink;
float:left;
width:748px; height:750px; text-align:center; font-size:15pt;}
select{width:170px;backgroundcolor:green;color:white;height:30px;font-family:
cambria;fontsize:15pt;}
form{text-align:center;}
a{color:white; text-decoration: none;}
li{list-style-type: none;}
.sc{color:white; text-align:center;}
.eve{ border: 2px solid green;}
ul li{list-style-type: square; font-weight:bold;}
.alt{background-color: white;}
.cen{text-align: center; font-weight:bold; color:purple;}
th{background-color: green; color: white;}
.right{float:right;}
hr{background-color: red; height:2px;}
.eve1{ border: 2px solid green; font-weight:bold; color:purple; fontsize:20pt;}
.h{color:red;}
Output:
By teznikal team:
Page 30
BCSL-057
Web Programming
By teznikal team:
Page 31
BCSL-057
Web Programming
5. Create a login form and check if the user name and password
entered by the user are correct.
Ans 5.
LoginForm.html
<!DOCTYPE
html
%@page
<html>
<head>
charset=UTF-8">
<title>JSP Page</title>
</head>
<body >
<h1>Login Page</h1>
<center>
<h2>Signup Details</h2>
<form action="LoginCheck.jsp;" method="post">
By teznikal team:
Page 32
BCSL-057
Web Programming
<br/>Username:<input type="text" name="username">

<br/>Password:<input type="password" name="password">
<br/><input type="submit" value="Submit">
</form>
</center>
</body>
</html>
LoginCheck.jsp
<!DOCTYPE
html
%@page
<html>
<head>
charset=UTF-8">
</head>
<body>
<%
String username=request.getParameter("username");
String password=request.getParameter("password");
if((username.equals("abcd") && password.equals("xyz")))
{
session.setAttribute("username",username);
response.sendRedirect("Home.jsp");
}
else
response.sendRedirect("Error.jsp");
%>
</body>
</html>
Home.jsp
<!DOCTYPE
html
pageEncoding="UTF-8"
errorPage="Error.jsp"%>
By teznikal team:
%@page
Page 33
BCSL-057
Web Programming
<html>
<head>

charset=UTF-8">
</head>
<body>
<center>
<h2>
<%
String a=session.getAttribute("username").toString();
out.println("Hello "+a);
%>
</h2>
<br/>
<br/>
<a href="Logout.jsp">Logout</a>
</center>
</body>
</html>
Logout.jsp
<!DOCTYPE
html
%@page
<html>
<head>
charset=UTF-8">
</head>
<body>
<%
session.removeAttribute("username");
session.removeAttribute("password");
By teznikal team:
Page 34
BCSL-057
Web Programming
session.invalidate();
%>
<h1>Logout was done successfully.</h1>
</body>
</html>
Error.jsp
<!DOCTYPE
html
%@page
<html>
<head>
charset=UTF-8">
</head>
<body>
<h1>Some Error has occurred, Please try again later...</h1>
</body>
</html>
Output:
By teznikal team:
Page 35
BCSL-057
Web Programming
6. Create a quiz of at least five questions and check if the questions

have been answered correctly.
Ans 6.
Quiz.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
charset=UTF-8">
<script language="JavaScript">
function check()
{
var radio_choice = false;
for(i=1;i<myform.grp[i].length;i++)
{
for (counter = 0; counter < myform.grp[i].length;
counter++)
By teznikal team:
Page 36
BCSL-057
Web Programming
{
if (myform.grp[i][counter].checked)
radio_choice = true;
}
if (!radio_choice)
{
alert("Please select one.");
return (false);
}
return(true);
}
}
</script>
</head>
<body>
<h1>Quiz</h1>
<b>Give the answer of the following questions by selecting
one option for each:</b>
<br/><br/>
Q1.Which one of the following is the Capital of India?<br><br>
<form action="QuizAnswer.jsp"method="post"
name="myform" onsubmit="return check();">
<input type="radio" name="grp1" value="Delhi" >Delhi<br>
<input type="radio" name="grp1" value="Kolkata"
>Kolkata<br>
<input type="radio" name="grp1" value="Chennai"
>Chennai<br>
<input type="radio" name="grp1" value="Mumbai"
>Mumbai<br>
<input type="submit" value="Submit">
</form><br/>
Q2.What is the full form of ATM?<br><br>
<form action="QuizAnswer2.jsp"method="post"
<input type="radio" name="grp2" value="Automated Tele
Machine" >Automated Tele Machine<br>
<input type="radio" name="grp2" value="Automatic Tele
Machine" >Automatic Tele Machine<br>
By teznikal team:
Page 37
BCSL-057
Web Programming
<input type="radio" name="grp2" value="Automated

Training Machine" >Automated Training Machine<br>
<input type="radio" name="grp2" value="Automated
Teller Machine" >Automated Teller Machine<br>
</form><br/>
Q3.Who is the first Mughal Emperor of India?<br><br>
<input type="radio" name="grp3" value="Akbar"
>Akbar<br>
<input type="radio" name="grp3" value="Babar"
>Babar<br>
<input type="radio" name="grp3" value="Aurangjeb"
>Aurangjeb<br>
<input type="radio" name="grp3" value="Jahangir"
>Jahangir<br>
</form><br/>
Q4.Who is known as the father of Computer?<br><br>
<input type="radio" name="grp4" value="Mark Zukerberg"
>Mark Zukerberg<br>
<input type="radio" name="grp4" value="Douglas"
>Douglas<br>
<input type="radio" name="grp4" value="Charles
Babbage" >Charles Babbage<br>
<input type="radio" name="grp4" value="Steve Jobs"
>Steve Jobs<br>
</form><br/>
Q5.Who is the author of the book "Revolution 2020"?
<br><br>
<input type="radio" name="grp5" value="A P J Abdul
Kalam" >A P J Abdul Kalam<br>
By teznikal team:
Page 38
BCSL-057
Web Programming
<input type="radio" name="grp5" value="J K Rowling" >J K

Rowling<br>
<input type="radio" name="grp5" value="Chetan
Bhagat" >Chetan Bhagat<br>
<input type="radio" name="grp5" value="Jhumpa Lahiri"
>Jhumpa Lahiri<br>
</form>
</body>
</html>
QuizAnswer1.jsp
<html>
<head>
charset=UTF-8">
<title>Quiz</title>
</head>
<body>
<%
String answer="Delhi";
String s1=request.getParameter("grp1");
if(s1.equals(answer))
{
out.println("<h4>Your Answer is correct!</h4>");
}
else
{out.println("<h4>Wrong Answer! <br/><br/>Correct
Answer is : </h4>"+answer);
}
%><br/><br/>
<a href="Quiz.jsp">Back</a>
</body>
</html>
By teznikal team:
Page 39
BCSL-057
Web Programming
QuizAnswer2.jsp
<html>
<head>
charset=UTF-8">
</head>
<body>
<%
String answer="Automated Teller Machine";
{
}
else
}
%><br/><br/>
</body>
</html>
QuizAnswer3.jsp
<html>
<head>
charset=UTF-8">
</head>
By teznikal team:
Page 40
BCSL-057
Web Programming
<body>
<%
String answer="Babar";
{
}
else
}
%><br/><br/>
</body>
</html>
QuizAnswer4.jsp
<html>
<head>
charset=UTF-8">
</head>
<body>
<%
String answer="Charles Babbage";
{
}
else
By teznikal team:
Page 41
BCSL-057
Web Programming

Answer is :</h4>"+answer);
}
%><br/><br/>
</body>
</html>
QuizAnswer5.jsp
<html>
<head>
charset=UTF-8">
</head>
<body>
<%
String answer="Chetan Bhagat";
{
}
else
Answer is :</h4>"+answer);
}
%><br/><br/>
</body>
</html>
By teznikal team:
Page 42
BCSL-057
Web Programming
Output:
7. Write a JSP program that displays Good Morning or Good

Evening based on the present time.
By teznikal team:
Page 43
BCSL-057
Web Programming
Ans 7. Greeting.jsp
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>Greeting</title>
</head>
<body>
<b> Todays Date & Time is :</b>
<% java.util.Date date = new java.util.Date();
out.println(" "+date);
java.util.Calendar calendar=java.util.Calendar.getInstance();
int hour=calendar.get(calendar.HOUR_OF_DAY);
if(hour<12){
%>
Hour is<br>
<%=hour%>
<h3>Good Morning!</h3>
<%}else if(hour>=12 && hour<17){%>
<h3>Good Afternoon!</h3>
<%}else{%>
<h3>Good Evening!</h3>
<%}%>
</body>
</html>
Output:
By teznikal team:
Page 44
BCSL-057
Web Programming
Session 8, 9, 10: Writing simple applications using JSP and JDBC

and deploying it on web or mobile devices
1. Create a website using JSP and JDBC that creates employee

database of an organization. The employee database has two tables
employee having fields empID, name, department, present
designation, present salary, emailed, year of joining the
organization,
and
department
having
fields
department,
department name and manager. Create forms to enter information
of employees and departments. You must also create a form to
display list of employees of a department.
Ans 1. Employee.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSSLayout.css" />
</head>
<body>
<div class="header">
By teznikal team:
Page 45
BCSL-057
Web Programming
Indira Gandhi National Open University

</div>
<div class="left">
<menu>
<li><a href="Employee.html">Home</a></li>
<li><a
href="EmployeeInfoForm.jsp">Employee
Information</a></li>
<li><a
href="DepartmentInfo.jsp">Employees
of
Department</a></li>
</menu>
</div>
<h3>Welcome to IGNOU</h3>
</div>
</div>
<div class="footer">
<footer>
<hr>© 2013 SOCIS, IGNOU.
</footer>
</div>
</body>
</html>
EmployeeInfoForm.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<sql:setDataSource var="mysql" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/mysql"
user="netbean" password="netbean7"/>
<sql:query dataSource="${mysql}" var="Dept">
SELECT Department, Dep_Name from Department;
</sql:query>
<form name="InputEmployeeData" action="EmployeeDataInput.jsp"
method="POST">
<table border="0">
<thead>
<tr>
By teznikal team:
Page 46
BCSL-057
Web Programming
<th>Label</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<td>Employee ID :</td>
<td><input type="text" name="EmployeeID" value="" size="9"
/></td>
</tr>
<tr>
<td>Employee Name:</td>
<td><input type="text" name="EmployeeName" value="" size="25"
/> </td>
</tr>
<tr>
<td> Select Department :</td>
<td>
<select name="Dept">
<c:forEach var="row" items="${Dept.rows}">
<option value="<c:out value="${row.Department}"/>">
<c:out value="${row.Dep_Name}"/>
</option>
</c:forEach>
</select>
<sql:query var="Department" dataSource="$(mysql)">
SELECT Department, Dep_Name FROM Department
</sql:query>
<c:forEach var="row" items="${Department.rowsByIndex}">
<c:forEach var="column" items="${row}">
<td><c:out value="${column}"/>
</c:forEach>
</c:forEach>
</td>
<tr>
<td> Designation :</td>
<td><input type="text" name="Designation" value="" size="25" />
</td>
By teznikal team:
Page 47
BCSL-057
Web Programming
</tr>
<tr>
<td>Salary :</td>
<td><input type="text" name="Salary" value="" size="25" /> </td>
</tr>
<tr>
<td> EmailID :</td>
<td><input type="text" name="EmailID" value="" size="25" />
</td>
</tr>
<tr>
<td>Year of Joining :</td>
<td><input type="text" name="JoiningYear" value="" size="4" />
</td>
</tr>
</tbody>
</table>
<input
type="submit"
value="Submit
Information"
name="Submit" />
</form>
EmployeeDataInput.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<sql:update var="insert" dataSource="${mysql}">
INSERT
INTO
mysqlmaster
(empID,empName,Department,Designation,Salary,
EmailID,
Joining_Year)
VALUES(?,?,?,?,?,?,?);
<sql:param value="${param.EmployeeID}" />
<sql:param value="${param.EmployeeName}" />
<sql:param value="${param.Department}" />
<sql:param value="${param.Designation}" />
<sql:param value="${param.Salary}" />
<sql:param value="${param.EmailID}" />
By teznikal team:
Page 48
BCSL-057
Web Programming
<sql:param value="${param.Joining_Year}" />

</sql:update>
<sql:query var="employeemaster" dataSource="${mysql}">
SELECT * FROM mysqlmaster WHERE empID = ? <sql:param
value="${param.EmployeeID}" />;
</sql:query>
The Record Entered by you is:
<table border="1">

<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Department</th>
<th>Designation</th>
<th>Salary</th>
<th>Email ID</th>
<th>Year of Joining</th>
</tr>

<c:forEach var="row" items="${mysqlmaster.rowsByIndex}">
<tr>
<td><c:out value="${column}"/></td>
</c:forEach>
</tr>
</c:forEach>
</table>
EmployeeDB DataBase
create database Employee;
create user 'netbean'@'localhost'identified by'netbean7';
grant all on Employee.* to 'netbean'@'localhost';
create table Employee (empID char(5) PRIMARY KEY, empName
varchar(40) NOT NULL, Department varchar(40) NOT NULL,
Designation varchar(40) NOT NULL, Salary char(8) NOT NULL,
EmailID varchar(40) NOT NULL, Joining_Year char(4) NOT NULL);
create table Department (Department varchar(40) PRIMARY KEY,
Dep_Name varchar(40) NOT NULL, Manager varchar(40) NOT NULL);
By teznikal team:
Page 49
BCSL-057
Web Programming
insert into Department VALUES("Management", "Department of
Management", "Mr. Arun Kumar");
insert into Department VALUES("Account", "Department of
Accounting", "Mr. Vijay Malhotra");
insert into Department VALUES("Human Resourses", "Department of
Human Resources", "Ms. Saroj Khurana");
select* from Department;
2. Create an application that creates a simple banking database

with tables for customers and customer transactions. You must
create a login form to verify login details from the customer table.
You may create a session or use cookies if possible to perform the
transactions.
Ans 2. Customer.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSSLayout.css" />
</head>
<body>
<div class="header">
Punjab National Bank
</div>
<div class="left">
<menu>
<li><a href="Cusotmer.html">Home</a></li>
<li><a
href="CustomerInfoForm.jsp">Customer
Information</a></li>
</menu>
</div>
<h3>Welcome to Punjab National Bank</h3>
</div>
</div>
<div class="footer">
By teznikal team:
Page 50
BCSL-057
Web Programming
<footer>
<hr>© 2013 PNBAll Right Reserved.
</footer>
</div>
</body>
</html>
CustomerInfoForm.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<sql:query dataSource="${mysql}" var="Dept">
SELECT Department, Dep_Name from Department;
</sql:query>
<form name="InputCustomerData" action="CustomerDataInput.jsp"
method="POST">
<table border="0">
<thead>
<tr>
<th>Label</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<td>Customer ID :</td>
<td><input type="text" name="CustomerID" value="" size="9"
/></td>
</tr>
<tr>
<td>Cusotmer Name:</td>
<td><input type="text" name="CustomerName" value="" size="25"
/> </td>
</tr>
<tr>
By teznikal team:
Page 51
BCSL-057
Web Programming
<td> Select Transaction:</td>

<td>
<select name="Trans">
<c:forEach var="row" items="${Dept.rows}">
<option value="<c:out value="${row.Transaction}"/>">
<c:out value="${row.T_Name}"/>
</option>
</c:forEach>
</select>
<sql:query var="Transaction" dataSource="$(mysql)">
SELECT Transaction, T_Name FROM Transaction
</sql:query>
<c:forEach var="row" items="${Transaction.rowsByIndex}">
<td><c:out value="${column}"/>
</c:forEach>
</c:forEach>
</td>
<tr>
<td> Account Number :</td>
<td><input
type="text"
name="Account
Number"
value=""
size="25" /> </td>
</tr>
<tr>
<td> EmailID :</td>
<td><input type="text" name="EmailID" value="" size="25" />
</td>
</tr>
<tr>
<td>Year of Opening Account :</td>
<td><input type="text" name="Opening Ac" value="" size="4" />
</td>
</tr>
</tbody>
</table>
<input
type="submit"
value="Submit
Information"
name="Submit" />
</form>
By teznikal team:
Page 52
BCSL-057
Web Programming
EmployeeDataInput.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<sql:update var="insert" dataSource="${mysql}">
INSERT
INTO
mysqlmaster
(CustomerID,
CustomerName,
Transaction, AccountNumber, EmailID, Opening_Year)
VALUES(?,?,?,?,?,?,?);
<sql:param value="${param. CustomerID }" />
<sql:param value="${param. CustomerName }" />
<sql:param value="${param. Transaction }" />
<sql:param value="${param. AccountNumber }" />
<sql:param value="${param.EmailID}" />
<sql:param value="${param. Opening_Year }" />
</sql:update>
<sql:query var="cusotmermaster" dataSource="${mysql}">
SELECT * FROM mysqlmaster WHERE CustomerID = ? <sql:param
value="${param. CustomerID }" />;
</sql:query>
The Record Entered by you is:
<table border="1">

<tr>
<th> CustomerID </th>
<th> Customer Name</th>
<th> Transaction </th>
<th> AccountNumber </th>
<th>Email ID</th>
<th> Opening_Year </th>
</tr>

<c:forEach var="row" items="${mysqlmaster.rowsByIndex}">
<tr>
<td><c:out value="${column}"/></td>
By teznikal team:
Page 53
BCSL-057
Web Programming
</c:forEach>
</tr>
</c:forEach>
</table>
By teznikal team:
Page 54

BCSL-057 Lab Manual Solution - 1442837699280

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

BCSL-057 Lab Manual Solution - 1442837699280

Uploaded by

Copyright:

Available Formats

BCSL-057

Session 1: Using Web 2.0 and creating pages using XHTML

1. Browser support: All browsers have accepted javascript as a

2. Application cache: On the lines of Outlook but minus the email

3. It is platform-independent, thus relatively immune to changes in

3. Language Neutrality : Ajax strives to be equally usable with all

Session 3: Creating sample XML document and displaying it

2. Create the DTD for the customers you created in problem 1.

3. Create an XML document to that stores data as XML document,

Advanced Operating System

4. Create a database of books titles, authors, year of publication,

Session 4 and 5: Using and writing JavaScript in web pages

2. Write a JavaScript program that creates

<img src="D:\images (4).jpg" alt="Slideshow Image Script" title="Slideshow Image

3. Write JavaScript code to check if data has been properly entered

4. Write a JavaScript program that displays the current time and

<meta http-equiv="Content-Type" content="text/html;

5. Write a JavaScript program that counts the number of times a

6. Create a web page with two pictures. Write a JavaScript program

<div style="background-image:url('images.jpg'); text-align:center;

7. Write a JavaScript program to demonstrate simple animation on a

Session 6, 7: Using JSP/Servlet

2. Write a JSP program that output current time only.

<meta http-equiv="Content-Type" content="text/html;

3. Write a JSP program that counts the number of times a link is

<title>Study Centre Website</title>

<title>Study Centre Website</title>

<title>Study Centre Website</title>

<title>Study Centre Website</title>

<br/>Username:<input type="text" name="username">

<meta http-equiv="Content-Type" content="text/html;

6. Create a quiz of at least five questions and check if the questions

<input type="radio" name="grp2" value="Automated

<input type="radio" name="grp5" value="J K Rowling" >J K

{out.println("<h4>Wrong Answer! <br/><br/>Correct

7. Write a JSP program that displays Good Morning or Good

Session 8, 9, 10: Writing simple applications using JSP and JDBC

1. Create a website using JSP and JDBC that creates employee

Indira Gandhi National Open University

<sql:param value="${param.Joining_Year}" />

2. Create an application that creates a simple banking database

<td> Select Transaction:</td>

You might also like