Web Programming Lab Manual PDF

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

Dynamic Documents with

Java Script

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.

<?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,
onmouseover="this.style.color='green';
this.style.font='bold 16pt arial';"
this.style.font='normal 16pt times';"
>Belguam</b>
My house is facing towards
onmouseover="this.style.color='purple';

this.style.font='bold 16pt lucida';"

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:

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.

<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;}
color:yellow;}
color:red;}
color:orange;}
</style>
</head>
<body>
<p class="para1"id="123"onmouseover="toTop('123')"/>

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.
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.
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)
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:

XML

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-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>
</name>
<ssn>ssn002</ssn>
<age>23</age>
<room>ac222</room>
<id>033</id>
<gn>03</gn>
<address>Jayanagar</address>
</insurance>
<id>044</id>
<gn>04</gn>
<address>K.R Puram</address>
</insurance>
<medproblem>sugar</medproblem>
</patient>
<patient>
<name>
<fname>Vijay</fname>
<mname>V</mname>
<lname>J</lname>
</name>
<ssn>ssn003</ssn>
<age>20</age>
<room>ac333</room>
<id>055</id>
<gn>05</gn>
<address>Banashankari</address>
</insurance>
<id>066</id>
<gn>06</gn>

<address>Srinagara</address>
</insurance>
<medproblem>headache</medproblem>
</patient>
<patient>
<name>
<fname>Vinay</fname>
<mname>Kumar</mname>
<lname>R</lname>
</name>
<ssn>ssn004</ssn>
<age>18</age>
<room>ac444</room>
<id>077</id>
<gn>07</gn>
<address>Attibele</address>
</insurance>
<id>088</id>
<gn>08</gn>
<address>Hosur</address>
</insurance>
<medproblem>Cancer</medproblem>
</patient>
</patients>

<!—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;

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;
}

OUTPUT:

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-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>
<id>011</id>
<gn>01</gn>
<address>SHIRGUPPI</address>
</insurance>
<id>022</id>
<gn>02</gn>
<address>BELGUAM</address>
</insurance>
<medproblem>high b.p</medproblem>
</patient>
<patient>
<name>
<fname>SHIVAKUMAR</fname>
<mname>S</mname>
<lname>C</lname>
</name>
<ssn>ssn002</ssn>
<age>23</age>
<room>ac222</room>
<id>033</id>
<gn>03</gn>
<address>JIGANI</address>
</insurance>
<id>044</id>
<gn>04</gn>
<address>BANNERGHATTA</address>
</insurance>
<medproblem>sugar</medproblem>
</patient>
<patient>
<name>
<fname>VISHNU</fname>
<mname>VISWAM</mname>
<lname>P</lname>
</name>
<ssn>ssn003</ssn>
<age>20</age>
<room>ac333</room>
<id>055</id>
<gn>05</gn>
<address>PATHANAMTHITTA</address>
</insurance>
<id>066</id>
<gn>06</gn>
<address>KERALA</address>
</insurance>
<medproblem>headache</medproblem>
</patient>
<patient>
<name>
<fname>VINOD</fname>
<mname>JADAV</mname>
<lname>P</lname>
</name>
<ssn>ssn004</ssn>
<age>18</age>
<room>ac444</room>
<id>077</id>
<gn>07</gn>
<address>ANEKAL</address>
</insurance>
<id>088</id>
<gn>08</gn>
<address>BANGALORE</address>
</insurance>
<medproblem>HIGH FEVER</medproblem>
</patient>
</patients>
<!—Program4.xsl-->

<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>
<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:

PHP

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];
?>

OUTPUT:

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) ;
}
?>

OUTPUT:

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.
</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/>

<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>
<?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";
?>

OUTPUT:

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.
<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>
<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>
OUTPUT:

PROGRAM-8
Accept from the user name, phone no, mail-id, store in database retrieve same
information from database using a separate PHP script.
<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>
<?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>";

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:



Java Servlets and JSP

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>");
}
}

<!—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>

OUTPUT

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

Web Programming Lab Manual PDF

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

Web Programming Lab Manual PDF

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING LAB (15CS55P) 2015 CURRICULLUM

FOR 5th Sem CS & E

RJS POLYTECHNIC, BANGALORE-34. Page 1

Dynamic Documents with

RJS POLYTECHNIC, BANGALORE-34. Page 2

RJS POLYTECHNIC, BANGALORE-34. Page 3

this.style.font='bold 16pt lucida';"

RJS POLYTECHNIC, BANGALORE-34. Page 4

RJS POLYTECHNIC, BANGALORE-34. Page 5

RJS POLYTECHNIC, BANGALORE-34. Page 6

RJS POLYTECHNIC, BANGALORE-34. Page 7

RJS POLYTECHNIC, BANGALORE-34. Page 9

RJS POLYTECHNIC, BANGALORE-34. Page 10

RJS POLYTECHNIC, BANGALORE-34. Page 11

RJS POLYTECHNIC, BANGALORE-34. Page 12

RJS POLYTECHNIC, BANGALORE-34. Page 13

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

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

RJS POLYTECHNIC, BANGALORE-34. Page 17

RJS POLYTECHNIC, BANGALORE-34. Page 18

RJS POLYTECHNIC, BANGALORE-34. Page 19

RJS POLYTECHNIC, BANGALORE-34. Page 20

RJS POLYTECHNIC, BANGALORE-34. Page 21

RJS POLYTECHNIC, BANGALORE-34. Page 22

RJS POLYTECHNIC, BANGALORE-34. Page 23

<input type="radio" name=paymode value="Discover"/> Discover <br/>

RJS POLYTECHNIC, BANGALORE-34. Page 24

RJS POLYTECHNIC, BANGALORE-34. Page 25

RJS POLYTECHNIC, BANGALORE-34. Page 27

RJS POLYTECHNIC, BANGALORE-34. Page 28

RJS POLYTECHNIC, BANGALORE-34. Page 29

RJS POLYTECHNIC, BANGALORE-34. Page 30

RJS POLYTECHNIC, BANGALORE-34. Page 31

Java Servlets and JSP

RJS POLYTECHNIC, BANGALORE-34. Page 32

RJS POLYTECHNIC, BANGALORE-34. Page 33

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

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

RJS POLYTECHNIC, BANGALORE-34. Page 34

RJS POLYTECHNIC, BANGALORE-34. Page 35

Scheme of Valuation for End Examination

Writing one program from Java scripting or XHTML or

2 Writing one program from PHP or Java Servlets and JSP 10

RJS POLYTECHNIC, BANGALORE-34. Page 36

You might also like