WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
WEB PROGRAMMING
LAB MANUAL
COURSE CODE: 15CS55P
FOR 5th Sem CS & E
(2017-18)
BY
Mrs. RENU HARSHA
HOD
COMPUTER SCIENCE & ENGINEERING
RJS POLYTECHNIC
BANGALORE-34.
RJS POLYTECHNIC, BANGALORE-34. Page 1
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
Dynamic Documents with
Java Script
RJS POLYTECHNIC, BANGALORE-34. Page 2
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-1
The document must have a paragraph of text that describes your home, Choose at
least three different phrases(3 to 6 words) of this paragraph and make them change
font, font style, color and font size when the mouse cursor is placed over them. Each
of the different fonts, font style, and font sizes.
<!--changecolorfont.html-->
<?xml version="1.0" encoding="utf-8"?>
<html>
<title>Dynamic font for links</title>
<style type="text/css">
</style>
</head>
<body>
<p class="regText">
MY HOME NAME IS
<b style="color:blue;"
onmouseover="this.style.color='red';
this.style.font='italic 16pt tahoma';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt times';"
MATRU KRUPA
</b>
It is located nearby masabi darga,in shiraguppi,
<b style="color:blue;"
onmouseover="this.style.color='green';
this.style.font='bold 16pt arial';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt times';"
>Belguam</b>
My house is facing towards
<b style="color:blue;"
onmouseover="this.style.color='purple';
RJS POLYTECHNIC, BANGALORE-34. Page 3
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
this.style.font='bold 16pt lucida';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt times';" >East</b>
It is a double bed home. There is a 60ft wide road in front of the home.
There is a sufficient place for parking
</p>
</body>
</html>
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 4
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-2
The document must contain four short paragraph of text stacked on top of each other
with only enough of showing so that mouse cursor can also be placed over some part
of them. When the cursor is placed over the exposed part of the paragraph it should
raise to the top to become completely visible.
<!--Program2.html-->
<html>
<head>
<title> Dynamic stacking of Elements </title>
<script type ="text/javascript">
var Top= '125';
function toTop(newTop)
{
domTop=document.getElementById(Top).style;
domNew=document.getElementById(newTop).style;
domTop.zIndex="0";
domNew.zIndex="10";
Top=newTop;
}
</script>
<style type="text/css">
.para1{position:absolute;top:10;left:120;border:solid;width=300;padding:80;background
color:aqua;}
.para2{position:absolute;top:50;left:150;border:solid;width=300;padding:80;background
color:yellow;}
.para3{position:absolute;top:100;left:180;border:solid;width=300;padding:80;background
color:red;}
.para4{position:absolute;top:190;left:210;border:solid;width=300;padding:80;background
color:orange;}
</style>
</head>
<body>
<p class="para1"id="123"onmouseover="toTop('123')"/>
RJS POLYTECHNIC, BANGALORE-34. Page 5
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
JAVA: Java is programming language which is fully object oriented language here we use
classes, packages and interfaces and we use here applets which is more useful in
networking.
<p class="para2"id="124"onmouseover="toTop('124')"/>
WEB: Web is programming language which is used for designing the web pages for both
side in client side and server side,the new languages used for web are ajax,jsp,.net,ruby.
<p class="para3"id="125"onmouseover="toTop('125')"/>
GREEN COMPUTING: Green computing is the environmentally responsible and eco-
friendly use of computers and their resources.Green computing is also known as green
information technology(green IT)
<p class="para4"id="126"onmouseover="toTop('126')"/>
Analysis of Design and Algorithums: Design and Analysis of Algorithm is very important
for designing algorithm to solve different types of promlems in the branch of computer
science and information technology.
</body>
</html>
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 6
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
XML
RJS POLYTECHNIC, BANGALORE-34. Page 7
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-3
Create a CSS style sheet for the above XML document and use it to create a display
of the document.
<!—Program3.xml-->
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href='Program3.css' type='text/css'?>
<patients>
<patient>
<name>
<fname>Arun</fname>
<mname>Kumar</mname>
<lname>Reddy</lname>
</name>
<ssn>ssn001</ssn>
<age>21</age>
<room>ac111</room>
<insurance type="primary">
<id>011</id>
<gn>01</gn>
<address>H.A.L</address>
</insurance>
<insurance type="secondary">
<id>022</id>
<gn>02</gn>
<address>Koramangala</address>
</insurance>
<medproblem>high B.P</medproblem>
<drugallergie>nil</drugallergie>
</patient>
<patient>
<name>
<fname>SHIVAKUMAR</fname>
<mname>Raj</mname>
<lname>Kumar</lname>
RJS POLYTECHNIC, BANGALORE-34. Page 8
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
</name>
<ssn>ssn002</ssn>
<age>23</age>
<room>ac222</room>
<insurance type="primary">
<id>033</id>
<gn>03</gn>
<address>Jayanagar</address>
</insurance>
<insurance type="secondary">
<id>044</id>
<gn>04</gn>
<address>K.R Puram</address>
</insurance>
<medproblem>sugar</medproblem>
<drugallergie>nil</drugallergie>
</patient>
<patient>
<name>
<fname>Vijay</fname>
<mname>V</mname>
<lname>J</lname>
</name>
<ssn>ssn003</ssn>
<age>20</age>
<room>ac333</room>
<insurance type="primary">
<id>055</id>
<gn>05</gn>
<address>Banashankari</address>
</insurance>
<insurance type="secondary">
<id>066</id>
<gn>06</gn>
RJS POLYTECHNIC, BANGALORE-34. Page 9
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<address>Srinagara</address>
</insurance>
<medproblem>headache</medproblem>
<drugallergie>nil</drugallergie>
</patient>
<patient>
<name>
<fname>Vinay</fname>
<mname>Kumar</mname>
<lname>R</lname>
</name>
<ssn>ssn004</ssn>
<age>18</age>
<room>ac444</room>
<insurance type="primary">
<id>077</id>
<gn>07</gn>
<address>Attibele</address>
</insurance>
<insurance type="secondary">
<id>088</id>
<gn>08</gn>
<address>Hosur</address>
</insurance>
<medproblem>Cancer</medproblem>
<drugallergie>nil</drugallergie>
</patient>
</patients>
RJS POLYTECHNIC, BANGALORE-34. Page 10
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<!—Program3.css-->
patient
{
display:block;
margin- left:5%;
border:solid blue 15px;
padding:4px;
}
name
{
color:red;
font-family:script;
font-size:35;
margin-left:5%;
}
ssn
{
display:block;
color:blue;
margin-left:5%;
font-family:arial;
font-size:15;
}
age
{
display:block;
color:blue;
margin-left:5%;
font-family:arial;
font-size:15;
}
room
{
display:block;
RJS POLYTECHNIC, BANGALORE-34. Page 11
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
color:blue;
margin-left:5%;
font-family:arial;
font-size:15;
}
ins
{
display:block;
color:blue;
margin-left:5%;
font-family:arial;
font-size:15;
}
medproblems
{
display:block;
color:green;
margin-left:5%;
font-family:arial;
font-size:14;
}
drugallergies
{
display:block;
color:green;
margin-left:5%;
font-family:arial;
font-size:14;
}
RJS POLYTECHNIC, BANGALORE-34. Page 12
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 13
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-4
Create the XSLT style sheet to format all the patient elements of the XML,
document of exercise 3 and use it to create a display of whole element.
<!—Program4.xml-->
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href='Program4.xsl' type='text/xsl'?>
<patients>
<patient>
<name>
<fname>OMKAR</fname>
<mname>DADAGOUDA</mname>
<lname>PATIL</lname>
</name>
<ssn>ssn001</ssn>
<age>21</age>
<room>ac111</room>
<insurance type="primary">
<id>011</id>
<gn>01</gn>
<address>SHIRGUPPI</address>
</insurance>
<insurance type="secondary">
<id>022</id>
<gn>02</gn>
<address>BELGUAM</address>
</insurance>
<medproblem>high b.p</medproblem>
<drugallergie>nil</drugallergie>
</patient>
<patient>
<name>
<fname>SHIVAKUMAR</fname>
<mname>S</mname>
<lname>C</lname>
</name>
<ssn>ssn002</ssn>
RJS POLYTECHNIC, BANGALORE-34. Page 14
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<age>23</age>
<room>ac222</room>
<insurance type="primary">
<id>033</id>
<gn>03</gn>
<address>JIGANI</address>
</insurance>
<insurance type="secondary">
<id>044</id>
<gn>04</gn>
<address>BANNERGHATTA</address>
</insurance>
<medproblem>sugar</medproblem>
<drugallergie>nil</drugallergie>
</patient>
<patient>
<name>
<fname>VISHNU</fname>
<mname>VISWAM</mname>
<lname>P</lname>
</name>
<ssn>ssn003</ssn>
<age>20</age>
<room>ac333</room>
<insurance type="primary">
<id>055</id>
<gn>05</gn>
<address>PATHANAMTHITTA</address>
</insurance>
<insurance type="secondary">
<id>066</id>
<gn>06</gn>
<address>KERALA</address>
</insurance>
<medproblem>headache</medproblem>
<drugallergie>nil</drugallergie>
</patient>
<patient>
<name>
RJS POLYTECHNIC, BANGALORE-34. Page 15
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<fname>VINOD</fname>
<mname>JADAV</mname>
<lname>P</lname>
</name>
<ssn>ssn004</ssn>
<age>18</age>
<room>ac444</room>
<insurance type="primary">
<id>077</id>
<gn>07</gn>
<address>ANEKAL</address>
</insurance>
<insurance type="secondary">
<id>088</id>
<gn>08</gn>
<address>BANGALORE</address>
</insurance>
<medproblem>HIGH FEVER</medproblem>
<drugallergie>nil</drugallergie>
</patient>
</patients>
<!—Program4.xsl-->
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2> Patient information </h2>
<table border="1">
<tr bgcolor="pink">
<th>name</th>
<th>ssn</th>
<th>age</th>
<th>room</th>
<th>insurance</th>
<th>medproblem</th>
RJS POLYTECHNIC, BANGALORE-34. Page 16
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<th>drugallergie</th>
</tr>
<xsl:for-each select="patients/patient">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="ssn"/></td>
<td><xsl:value-of select="age"/></td>
<td><xsl:value-of select="room"/></td>
<td><xsl:value-of select="insurance"/></td>
<td><xsl:value-of select="medproblem"/></td>
<td><xsl:value-of select="drugallergie"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 17
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PHP
RJS POLYTECHNIC, BANGALORE-34. Page 18
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-5A
Write an XHTML document to include an anchor tag, that calls a PHP document also
write the called PHP document which returns a randomly chosen greeting from a list
of five different greetings. The greetings must be stored as constant strings in the
script. A random number between 0 and 4 can be computed with these line.
#set the seed for mtrand with the number of microseconds
#since the last full second of the clock
mt_strand((double) microtime() * 1000000);
$number=mtrand(0,4); #computes a random integer 0-4
<!—Program5.html-->
<html>
<head>
<title> Prefered Greeting</title>
</head>
<body>
Do you prefer a formal greeting (or) an informal greeting?
<a href="Program5.php"> display greeting </a>
</body>
</html>
<!—Program5.php-->
<?php
$greeting=array();
$greeting[0]="happy birthday";
$greeting[1]="have a wonderfull day";
$greeting[2]="happy teacher's day";
$greeting[3]="good morning,have a nice day";
$greeting[4]="happy friendship day";
$n=mt_rand(0,4);
echo $greeting[$n];
?>
RJS POLYTECHNIC, BANGALORE-34. Page 19
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 20
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-5B
Write the PHP script for above to count the number of visitors and
display that number for each visitor.
Hint: Use a file to store current count.
<!—Program5b.php-->
<?php
$handle = fopen("counter.txt", "r");
if(!$handle)
{
echo "could not open the file" ;
}
else
{
$counter = (int)
fread($handle,20);
fclose ($handle);
$counter++;
echo" <strong> you are visitor no ". $counter . " </strong> " ;
$handle = fopen("counter.txt", "w" );
fwrite($handle,$counter) ;
fclose ($handle) ;
}
?>
RJS POLYTECHNIC, BANGALORE-34. Page 21
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 22
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-6
Write the XHTML code using JavaScript Object Notation (JSON) to create the form
with the following capabilities.
a) A text widget to collect the users name
b) Four check boxes, one each for the following items
i) Four 100 watt light bulbs for Rs. 20=39
ii) Eight 100 watt light bulbs for Rs 40=20
iii) Four 100 watt long life light bulbs for Rs. 30=95
iv) Eight 100 watt long life light bulbs for Rs 70=49
c) A collection of 3 radio buttons that are labeled as follows
i) Visa
ii) Master Card
iii) Discover
Write a PHP script that computes the total cost of the ordered light bulbs for the above
program after adding 13.5% VAT. The program must inform the buyer of exactly
what was ordered in table.
<!—Program6.html-->
</html>
<head>
<title> ORDER FORM</title>
</head>
<body>
<form method="POST" action="program6.php">
User name:<input type="text" name=myname size="30"/> <br/>
Select the items:<br/>
<input type="checkbox" name=b[] value="20.39" checked="checked"/>four 100 watt
light bulbs <br/>
<input type="checkbox" name=b[] value="40.20" checked="checked"/>eight 100 watt
light bulbs <br/>
<input type="checkbox" name=b[] value="30.95" checked="checked"/>four 100 watt
long life bulbs <br/>
<input type="checkbox" name=b[] value="70.49" checked="checked"/>eight 100 watt
light bulbs <br/>
Select the mode of payment:<br/>
<input type="radio" name=paymode value="visa" checked="checked"/> visa <br/>
<input type="radio" name=paymode value="Master Card"/> Master Card <br/>
RJS POLYTECHNIC, BANGALORE-34. Page 23
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<input type="radio" name=paymode value="Discover"/> Discover <br/>
<input type="submit" value="submit order"/>
<input type="reset" value="clear the form"/>
</form>
</body>
</html>
<!—Program6.php-->
<?php
$name=$_POST["myname"];
$bulbs=$_POST["b"];
$pmode=$_POST["paymode"];
print "your name is $name <br/>";
$total=0;
for($i=0;$i<sizeof($bulbs);$i++)
{
$vat=$bulbs[$i]*0.135;
$total=$total+$bulbs[$i]+$vat;
}
print "The total cost:$total <br/>";
print "your payment mode is by $pmode";
?>
RJS POLYTECHNIC, BANGALORE-34. Page 24
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 25
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-7
Write a XHTML code to provide a form that collects names and telephone numbers.
The phone numbers must be in the format ddd-ddd-dddd. Write a PHP script that
checks the submitted telephone number to be sure that it confirms to the required
format and then returns a response that indicates whether the number was correct.
<!—Program7.html-->
<html>
<head>
<title>Phone Number Validity </title>
</head>
<body>
<form method="post" action="Program7.php">
<h3>Enter the Data</h3>
<table>
<tr><td>User Name:</td>
<td><input type="text" name="UName" size="30"></td></tr>
<tr><td>Phone Number:</td>
<td><input type="text" name="Phone"></td></tr>
<tr><td><input type="Submit" value="Submit"></td></tr>
</table>
</form>
</body>
</html>
<!—Program7.php-->
<html>
<head>
<title>Phone Number Validity</title>
</head>
<body>
<?php
$UName=$_POST["UName"];
$Phone=$_POST["Phone"];
if(preg_match("/([0-9]{3})-([0-9]{3})-([0-9]{4})/",$Phone))
print "<b>$UName: You have entered valid phone number </b> <br/>";
else
print "<b>The phone number is not valid</b><br/>";
?>
</body>
</html>
RJS POLYTECHNIC, BANGALORE-34. Page 26
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 27
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-8
Accept from the user name, phone no, mail-id, store in database retrieve same
information from database using a separate PHP script.
<!—Program8.html-->
<html>
<body>
<form method="POST" action="Program8.php">
Name:<input type="text" name="name"/><br>
phone:<input type="text" name="phone"/><br>
email:<input type="text" name="email"/><br>
<input type="submit" value="Store"/>
<input type="reset" value="Clear"/>
</form>
</body>
</html>
<!—Program8.php-->
<?php
$username="root";
$password="";
$server="localhost";
$database="velumani";
$name=$_POST["name"];
$phone=$_POST["phone"];
$email=$_POST["email"];
$dbhandle=mysql_connect($server,$username,$password);
mysql_select_db($database,$dbhandle);
$query="INSERT INTO student VALUES('$name','$phone','$email')";
mysql_query($query);
$query="SELECT * FROM student";
$sql_query=mysql_query($query);
$row=mysql_fetch_array($sql_query);
echo "<table bgcolor='silver' border='10'> <tr bgcolor='gold'>
<th>name</th>
<th>phone</th>
<th>email</th>
</tr>";
RJS POLYTECHNIC, BANGALORE-34. Page 28
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
while($row=mysql_fetch_array($sql_query))
{
echo "<tr><td>";
echo $row["name"]."";
echo "</td><td>";
echo $row["phone"]."";
echo "</td><td>";
echo $row["email"]."";
echo "</td>";
}
mysql_close();
?>
OUTPUT:
RJS POLYTECHNIC, BANGALORE-34. Page 29
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
RJS POLYTECHNIC, BANGALORE-34. Page 30
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
RJS POLYTECHNIC, BANGALORE-34. Page 31
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
Java Servlets and JSP
RJS POLYTECHNIC, BANGALORE-34. Page 32
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
PROGRAM-9
Write a servlet that returns a randomly chosen greeting from a list of five different
greetings. The greeting must be stored as constant strings in the program.
<!—Greeting.java-->
package com;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Greeting extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String[] mystrings = {"Good Morning","Good Night","How are
You?","Good Evening","See you"};
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet RandomMessage</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet Randommessage</h1>");
Random r = new Random();
out.println(mystrings[r.nextInt(mystrings.length)]);
out.println("</body>");
out.println("</html>");
}
}
RJS POLYTECHNIC, BANGALORE-34. Page 33
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
<!—index.jsp-->
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="<%=request.getContextPath() %>/Greetings" method="get">
<input type="submit" value="Click Me!">
</form>
</body>
</html>
<!—web.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<servlet-name>Greeting</servlet-name>
<servlet-class>com.Greeting</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Greeting</servlet-name>
<url-pattern>Greetings…!!!</url-pattern>
</servlet-mapping>
</web-app>
RJS POLYTECHNIC, BANGALORE-34. Page 34
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
OUTPUT
RJS POLYTECHNIC, BANGALORE-34. Page 35
WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM
Scheme of Valuation for End Examination
SN Particulars Marks
Writing one program from Java scripting or XHTML or
1 10
XML
2 Writing one program from PHP or Java Servlets and JSP 10
3 Executing any one program with result. 20
4 Viva Voce 10
Total 50
RJS POLYTECHNIC, BANGALORE-34. Page 36
