Web Lab Manual
Web Lab Manual
MANUAL / GUIDELINES
2018-2019
CONTENTS
Page no.
1. Syllabus 1
2. Program 1 - JavaScript : Simple calculator 4
3. Program 2 - JavaScript : Calculate squares and cubes of the numbers from 7
0 to 10
4. Program 3 - JavaScript : TEXT-GROWING and TEXT-SHRINKING 9
5. Program 4 - HTML5 and JavaScript : 11
a) position in the string of the left-most vowel
b) number with its digits in the reverse order
6. Program 5 - XML document to store information about a student 14
7. Program 6 - PHP : display the number of visitors visiting the web page. 17
8. Program 7 - PHP : display digital clock with current time of the server. 18
9. Program 8 - PHP :
a) Implement simple calculator operations. 19
b) Find the Transpose of a matrix, Multiplication of two matrices and 22
Addition of two matrices.
10. Program 9 – PHP : program with variable states with value 25
“Mississippi Alabama Texas Massachusetts Kansas"
11. Program 10 – PHP : program to sort the student records using selection sort. 27
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019
1. Write a JavaScript to design a simple calculator to perform the following operations: sum,
product, difference and quotient.
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10and
outputs HTML text that displays the resulting values in an HTML table format.
3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in
the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-
SHRINKING” in BLUE color. Then the font size decreases to 5pt.
4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for
the following problems:
a) Parameter: A string
c) Parameter: A number
6. Write a PHP program to keep track of the number of visitors visiting the web pageand to
display this count of visitors, with proper headings.
7. Write a PHP program to display a digital clock which displays the current time of theserver.
9. Write a PHP program named states.py that declares a variable states with value “Mississippi
Alabama Texas Massachusetts Kansas". write a PHP program that does the following:
a) Search for a word in variable states that ends in xas. Store this word in element0 of a list
named states List.
b) Search for a word in states that begins with k and ends in s. Perform a case-insensitive
comparison. [Note: Passing re.Ias a second parameter to method compile performs a
case-insensitive comparison.] Store this word in element1of states List.
c) Search for a word in states that begins with M and ends in s. Store this word in element 2
of the list.
d) Search for a word in states that ends in a. Store this word in element 3 of the list.
10. Write a PHP program to sort the student records which are stored in the database using
selection sort.
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
}
function cls()
{
value1.value="0";
value2.value="0";
answer.value="";
}
</script>
</head>
<body>
<table>
<tr><th colspan="4"> SIMPLE CALCULATOR </th></tr>
<tr><td>value1</td><td><input type="text" id="value1" value="0"/></td>
<td>value2</td><td><input type="text" id="value2" value="0"/> </td></tr>
<tr><td><input type="button" value="Addition" id = "add"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id = "sub"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Multiplication" id = "mul"
onclick="calc(this.id)"/></td>
<td><input type="button" value="Division" id ="div"
onclick="calc(this.id)"/></td></tr>
<tr><td>Answer:</td><td> <input type="text" id="answer" value=""
disabled/></td>
<td colspan="2"><input type="button" value="CLEAR ALL" onclick="cls()"/></td>
</tr>
</table>
</body>
</html>
Output:
Test Cases :
Test Input
Expected Output Obtained Output Remarks
No. Parameters
value1 = abc
4. ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 = 23
value1 = 50
5 ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 =xyz
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to
10 and outputs HTML text that displays the resulting values in an HTML table
format.
program2.html
<!DOCTYPE HTML>
<html>
<head>
<style>
table,tr, td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color:lightblue;
}
table { margin: auto; }
</style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10 WITH
THEIR SQUARES AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n
+ "</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</head>
</html>
Output:
program3.html
<!DOCTYPE HTML>
<html>
<head>
<style>
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT GROWING';
ids.setAttribute('style', "font-size: " + fs + "px; color: red");
fs += 5;
if(fs >= 50 ){
clearInterval(var1);
var2 = setInterval(deTimer, 1000);
}
}
function deTimer() {
fs -= 5;
ids.innerHTML = 'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
if(fs === 5 ){
clearInterval(var2);
}
}
</script>
</body>
</html>
Output:
TEXT SHRINKING
4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses
functions for the following problems:
a) Parameter: A string
b) Output: The position in the string of the left-most vowel
c) Parameter: A number
d) Output: The number with its digits in the reverse order
program4.html
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the Input","");
if(!(isNaN(str)))
{
var num,rev=0,remainder;
num = parseInt(str);
while(num!=0) {
remainder = num%10;
num = parseInt(num/10);
rev = rev * 10 + remainder;
}
alert("Reverse of "+str+" is "+rev);
}
else
{
str = str.toUpperCase();
for(var i = 0; i < str.length; i++) {
var chr = str.charAt(i);
if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
Output :
Test Cases :
Test
Input Parameters Expected Output Obtained Output Remarks
No.
program5.xml
<?xml-stylesheet type="text/css" href="5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 1RN07CS001</USN>
<name>NAME : SANTHOSH</name>
<college>COLLEGE : RNSIT</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : santosh@gmail.com</e-mail>
</student>
<student>
<USN>USN : 1RN07IS001</USN>
<name>NAME : MANORANJAN</name>
<college>COLLEGE : RNSIT</college>
<branch>BRANCH : Information Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : manoranjan@gmail.com</e-mail>
</student>
<student>
<USN>USN : 1RN07EC001</USN>
<name>NAME : CHETHAN</name>
<college>COLLEGE : RNSIT</college>
program5.css
student{
display:block; margin-top:10px; color:Navy;
}
USN{
display:block; margin-left:10px;font-size:14pt; color:Red;
}
name{
display:block; margin-left:20px;font-size:14pt; color:Blue;
}
college{
display:block; margin-left:20px;font-size:12pt; color:Maroon;
}
branch{
display:block; margin-left:20px;font-size:12pt; color:Purple;
}
year{
display:block; margin-left:20px;font-size:14pt; color:Green;
}
e-mail{
display:block; margin-left:20px;font-size:12pt; color:Blue;
}
Output:
6. Write a PHP program to keep track of the number of visitors visiting the web
page and to display this count of visitors, with proper headings.
program6.php
<?php
print "<h3> REFRESH PAGE </h3>";
$name="counter.txt";
$file = fopen($name,"r");
$hits= fscanf($file,"%d");
fclose($file);
$hits[0]++;
$file = fopen($name,"w");
fprintf($file,"%d",$hits[0]);
fclose($file);
Output:
REFRESH PAGE
Total number of views: 10
7. Write a PHP program to display a digital clock which displays the current time
of the server.
program7.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="1"/>
<style>
p{
color:white;
font-size:90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body{background-color:black;}
</style>
<p> <?php echo date(" h: i : s A");?> </p>
</head>
Output:
<html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 35%;
text-align: center;
background-color: DarkGray;
}
table { margin: auto; }
input,p { text-align:right; }
</style>
</head>
<body>
<form method="post">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>>
<tr><td>First Number:</td><td><input type="text" name="num1" /></td>
<td rowspan="2"><input type="submit" name="submit"
value="calculate"></td></tr>
<tr><td>Second Number:</td><td><input type="text"
name="num2"/></td></tr>
</form>
<?php
if(isset($_POST['submit'])) // it checks if the input submit is filled
Dept. of ISE & CSE, RNSIT Page 19
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
if(is_numeric($num1) andis_numeric($num1) )
{
echo "<tr><td> Addition :</td><td><p>".($num1+$num2)."</p></td>";
echo "<tr><td> Subtraction :</td><td><p> ".($num1-$num2)."</p></td>";
echo "<tr><td> Multiplication :</td><td><p>".($num1*$num2)."</p></td>";
echo "<tr><td>Division :</td><td><p> ".($num1/$num2)."</p></td>";
echo "</table>";
}
else
{
echo"<script type='text/javascript' > alert(' ENTER VALID
NUMBER');</script>";
}
}
?>
</body>
</html>
Output:
Test Cases:
Test Input
Expected Output Obtained Output Remarks
No. Parameters
value1 = abc
4. ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 = 23
value1 = 50
5 ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 =xyz
Program8b.php
<?php
$a = array(array(1,2,3),array(4,5,6),array(7,8,9));
$b = array(array(7,8,9),array(4,5,6),array(1,2,3));
$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]);
if($n===$p){
echo " The multiplication of matrices: <br/>";
$result=array();
for ($i=0; $i < $m; $i++) {
for($j=0; $j < $q; $j++){
$result[$i][$j] = 0;
for($k=0; $k < $n; $k++)
$result[$i][$j] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$result[$row][$col];
echo "<br/>";
}
}
?>
Output:
9. Write a PHP program named states.py that declares a variable states with value
"Mississippi Alabama Texas Massachusetts Kansas". write a PHP program that
does the following:
a) Search for a word in variable states that ends in xas. Store this word in
element 0 of a list named statesList.
b) Search for a word in states that begins with k and ends in s. Perform a
case-insensitive comparison. [Note: Passing re.Ias a second parameter to
method compile performs a case-insensitive comparison.] Store this word
in element1 of statesList.
c) Search for a word in states that begins with M and ends in s. Store this
word in element 2 of the list.
d) Search for a word in states that ends in a. Store this word in element 3 of
the list.
program9.php
<?php
$states = "Mississippi Alabama Texas Massachusetts Kansas";
$statesArray = [];
$states1 = explode(' ',$states);
echo "Original Array :<br>";
foreach ( $states1 as $i => $value )
print("STATES[$i]=$value<br>");
foreach($states1 as $state) {
if(preg_match( '/xas$/', ($state)))
$statesArray[0] = ($state);
}
foreach($states1 as $state) {
if(preg_match('/^k.*s$/i', ($state)))
$statesArray[1] = ($state);
}
foreach($states1 as $state) {
if(preg_match('/^M.*s$/', ($state)))
$statesArray[2] = ($state);
}
foreach($states1 as $state){
if(preg_match('/a$/', ($state)))
$statesArray[3] = ($state);
}
echo "<br><br>Resultant Array :<br>";
foreach ( $statesArray as $array => $value )
print("STATES[$array]=$value<br>");
?>
Output:
10. Write a PHP program to sort the student records which are stored in the
database using selection sort.
Goto Mysql and then type
create database weblab;
use weblab;
create table student(usnvarchar(10),name varchar(20),address varchar(20));
program10.php
<!DOCTYPE html>
<html>
<body>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
border-collapse:collapse;
background-color:lightblue;
}
table { margin: auto; }
</style>
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "weblab";
$a=[];
// Create connection
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
Output: