bcsl057 Lab
bcsl057 Lab
I. Features of Javascript:
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.
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.
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.
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.
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.
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.
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.
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 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 .
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>
<phone_no>011-22874411</phone_no>
<mob_no>9987222567</mob_no>
</customer>
<customer>
<name>Mr. Vipin Kumar</name>
<address>Mayur Vihar</address>
<phone_no>011-22657777</phone_no>
<mob_no>9987878777</mob_no>
</customer>
<customer>
<name>Mr. Kamalkant</name>
<address>Janak Puri</address>
<phone_no>011-24356566</phone_no>
<mob_no>9992222897</mob_no>
</customer>
</customer_list>
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 Ramesh
Riaz
Advanced Operating System M.Tech Sandeep
Cristopher
Salim
Web Programming BCA Farhin
Rajan
Ans. 3 StudentInfo.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<student_info xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
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>
<subject>Advanced Operating System</subject>
<programme>M. Tech.</programme>
<name>Cristopher</name>
</student>
<student>
<subject>Advanced Operating System</subject>
<programme>M. Tech.</programme>
<name>Salim</name>
</student>
<student>
<subject>Web Programming</subject>
<programme>BCA</programme>
<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
<?xml version="1.0" encoding="ISO-8859-1"?>
<book_store xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
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>
<pub_year>2012</pub_year>
<publisher>Little, Brown Book Group</publisher>
<price>Rs. 850</price>
<no_of_copies>4</no_of_copies>
</book>
<book>
<title>Midnight’s Children</title>
<author>Salman Rushdie</author>
<pub_year>2012</pub_year>
<publisher>Vintage</publisher>
<price>Rs. 499</price>
<no_of_copies>3</no_of_copies>
</book>
<book>
<title>Inferno</title>
<pub_year>2013</pub_year>
<author>Dan Brown</author>
<pub_year>2013</pub_year>
<publisher>Random House</publisher>
<price>Rs. 750</price>
<no_of_copies>6</no_of_copies>
</book>
<book>
<title>Wings of Fire</title>
<author>A P J Abdul Kalam</author>
<pub_year>2000</pub_year>
<publisher>Universities Press</publisher>
<price>Rs. 275</price>
<no_of_copies>10</no_of_copies>
</book>
<book>
<title>Turning Points</title>
<author>A P J Abdul Kalam</author>
<pub_year>2012</pub_year>
<publisher>Harper Collins</publisher>
<price>Rs. 225</price>
<no_of_copies>8</no_of_copies>
</book>
<book>
<title>Revolution 2020</title>
<author>Chetan Bhagat</author>
<pub_year>2011</pub_year>
<publisher>Rupa & Co</publisher>
<price>Rs. 140</price>
<no_of_copies>6</no_of_copies>
</book>
<book>
<title>2 States</title>
<author>Chetan Bhagat</author>
<pub_year>2012</pub_year>
<publisher>R R Sheth % Co.</publisher>
<price>Rs. 150</price>
<no_of_copies>6</no_of_copies>
</book>
<book>
<title>Indian Economy</title>
<author>Ramesh Singh</author>
<pub_year>2013</pub_year>
<publisher>McGraw Hill Education</publisher>
<price>Rs. 425</price>
<no_of_copies>5</no_of_copies>
</book>
<book>
<title>A Bend in The River</title>
<author>V S Naipaul</author>
<pub_year>2011</pub_year>
<publisher>Picador</publisher>
<price>Rs. 399</price>
<no_of_copies>5</no_of_copies>
</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
<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
2. Write a JavaScript program that creates a sequence of automatically changing
pictures on a web page.
Ans 2.
<!DOCTYPE html>
<html>
<head><title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; 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>
<script>
slideshowimages("D:\images (4).jpg","D:\images (2).jpg","D:\kds.jpg","D:\images
(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>
<meta http-equiv="Content-Type" content="text/html; 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var counter;
counter=0;
function count()
{
counter++;
document.getElementById("a").innerHTML=counter;
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<div align="center">
<input type="button" name="Button" value="Hit Me" onClick="count();">
<p id="a"></p>
</div>
</form>
</body>
</html>
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>
<meta http-equiv="Content-Type" content="text/html; 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');">
<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; ">
Ans 7.
<!DOCTYPE html>
<html>
<head>
<title>Rollover with a Mouse Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
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>
<meta http-equiv="Content-Type" content="text/html; 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">
<br/>Username: <input type="text" name="username"><br/>
<br/>Address: <textarea name="address"></textarea><br/><br/>
<br/><input type="submit" value="Submit">
</form>
</center>
</body>
</html>
Info.jsp
<!DOCTYPE html %@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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:
2. Write a JSP program that output current time only.
Ans 2. Time.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><title>Counter</title></head>
<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 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
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IGNOU</title>
<script >
function drop(x)
{
if (document.form1.menu.value != "null")
{
document.location.href = x
}
}
</script>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="left"><br/><br/>
<form name="form1">
<select name="menu"
onChange="drop(document.form1.menu.options[document.form1.menu.options.sel
ectedIndex].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
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IGNOU</title>
<script >
function drop(x)
{
if (document.form1.menu.value != "null")
{
document.location.href = x
}
}
</script>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="left"><br/><br/>
<form name="form1">
<select name="menu"
onChange="drop(document.form1.menu.options[document.form1.menu.options.sel
ectedIndex].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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@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>
<tr class="alt"><td>4.</td>
<td>Debate Competition</td>
<td>10 December 2014</td>
<td>12:30 PM</td>
</tr>
</table>
</div>
</div>
</div></div></body></html>
Stu_Support.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">
<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>
</div></div></body></html>
Dev_Profile.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">
<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>
<tr><th class="eve">S. No.</th>
<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>
<tr class="alt"><td>2.</td>
<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>
<tr><th class="eve">S. No.</th>
<th class="eve">Project Name</th></tr>
<tr><td>1.</td>
<td>MakeMyDeal.com</td></tr>
<tr class="alt"><td>2.</td>
<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>
</div></div></body></html>
Feedback.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">
<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>
<br/><br/><br/><br/><br/>
<input type="submit" value="Submit" onClick="return (verify());">
</fieldset>
</form>
</div>
</div></div></body></html>
IGNOUCSS.css
body{color:#000; font-size:18pt; margin:0; padding:0;font-family: cambria;}
.top{color: white; background:green; text-align:center; font-size: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;padding-left:
5px;margin:0;}
.footer{clear:both;color:white;text-align:center;background-
color: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;background-color:green;color:white;height:30px;font-family:
cambria;font-size: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; font-size:20pt;}
.h{color:red;}
Output:
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 contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body >
<h1>Login Page</h1>
<center>
<h2>Signup Details</h2>
<form action="LoginCheck.jsp;" method="post">
<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 contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String username=request.getParameter("username");
String password=request.getParameter("password");
Home.jsp
<!DOCTYPE html %@page contentType="text/html" pageEncoding="UTF-8"
errorPage="Error.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<br/><br/><br/><br/><br/>
<center>
<h2>
<%
String a=session.getAttribute("username").toString();
out.println("Hello "+a);
%>
</h2>
<br/>
<br/>
<br/><br/><br/><br/><br/>
<a href="Logout.jsp">Logout</a>
</center>
</body>
</html>
Logout.jsp
<!DOCTYPE html %@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
session.removeAttribute("username");
session.removeAttribute("password");
session.invalidate();
%>
<h1>Logout was done successfully.</h1>
</body>
</html>
Error.jsp
<!DOCTYPE html %@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Some Error has occurred, Please try again later...</h1>
</body>
</html>
Output:
6. Create a quiz of at least five questions and check if the questions have been
answered correctly.
Ans 6.
Quiz.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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++)
{
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" name="myform"
onsubmit="return check();">
<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>
<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>
<input type="submit" value="Submit">
</form><br/>
Q3.Who is the first Mughal Emperor of India?<br><br>
<form action="QuizAnswer3.jsp"method="post" name="myform"
onsubmit="return check();">
<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>
<input type="submit" value="Submit">
</form><br/>
Q4.Who is known as the father of Computer?<br><br>
<form action="QuizAnswer4.jsp"method="post" name="myform"
onsubmit="return check();">
<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>
<input type="submit" value="Submit">
</form><br/>
Q5.Who is the author of the book "Revolution 2020"?<br><br>
<form action="QuizAnswer5.jsp"method="post" name="myform"
onsubmit="return check();">
<input type="radio" name="grp5" value="A P J Abdul Kalam" >A P J Abdul
Kalam<br>
<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>
<input type="submit" value="Submit">
</form>
</body>
</html>
QuizAnswer1.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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>
QuizAnswer2.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String answer="Automated Teller Machine";
String s1=request.getParameter("grp2");
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>
QuizAnswer3.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String answer="Babar";
String s1=request.getParameter("grp3");
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>
QuizAnswer4.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String answer="Charles Babbage";
String s1=request.getParameter("grp4");
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>
QuizAnswer5.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String answer="Chetan Bhagat";
String s1=request.getParameter("grp5");
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>
Output:
7. Write a JSP program that displays “Good Morning” or “Good Evening” based on the
present time.
Ans 7. Greeting.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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:
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="container">
<div class="header">
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>
<div class="content">
<h3>Welcome to IGNOU</h3>
</div>
</div>
<div class="footer">
<footer>
<hr>© 2013 SOCIS, IGNOU.
</footer>
</div>
</body>
</html>
EmployeeInfoForm.jsp
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:setDataSource var="mysql" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/mysql"
user="netbean" password="netbean7"/>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<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}" />
<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">
<!-- column headers -->
<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>
<!-- column data -->
<c:forEach var="row" items="${mysqlmaster.rowsByIndex}">
<tr>
<c:forEach var="column" items="${row}">
<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);
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="container">
<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>
<div class="content">
<h3>Welcome to Punjab National Bank</h3>
</div>
</div>
<div class="footer">
<footer>
<hr>© 2013 PNB©All Right Reserved.
</footer>
</div>
</body>
</html>
CustomerInfoForm.jsp
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:setDataSource var="mysql" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/mysql"
user="netbean" password="netbean7"/>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<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">
<!-- column headers -->
<tr>
<th> CustomerID </th>
<th> Customer Name</th>
<th> Transaction </th>
<th> AccountNumber </th>
<th>Email ID</th>
<th> Opening_Year </th>
</tr>
<!-- column data -->
<c:forEach var="row" items="${mysqlmaster.rowsByIndex}">
<tr>
<c:forEach var="column" items="${row}">
<td><c:out value="${column}"/></td>
</c:forEach>
</tr>
</c:forEach>
</table>