Web Technology Lab Manual
Web Technology Lab Manual
Web Technology Lab Manual
LAB MANUAL
Prepared By:
Mrs. Nisha Choudhary
Assistant Professor
Dept. of CSE, MSEC
Ms. Soumya N S
Assistant Professor
Dept. of CSE, MSEC
Page no.
1. Syllabus 1
2. Program 1 - JavaScript : Simple calculator 4
3. Program 2 - JavaScript : Calculate squares and cubes of the numbers from 8
0 to 10
4. Program 3 - JavaScript : TEXT-GROWING and TEXT-SHRINKING 10
5. Program 4 - HTML5 and JavaScript : 12
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. 19
9. Program 8 - PHP :
a) Implement simple calculator operations. 19
b) Find the Transpose of a matrix, Multiplication of two matrices and 24
Addition of two matrices.
10. Program 9 – PHP : program with variable states with value 26
“Mississippi Alabama Texas Massachusetts Kansas"
11. Program 10 – PHP : program to sort the student records using selection sort. 27
Web Technology Lab With Mini Project – 15CSL77 2018-2019
SYLLBUS 15CSL77
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
[As per Choice Based Credit System (CBCS) scheme] (Effective from the academic year 2016 -2017)
SEMESTER – VII
Course Objectives:
This course will enable students to
1. Design and develop static and dynamic web pages.
2. Familiarize with Client-Side Programming, Server-Side Programming, Active server Pages.
3. Learn Database Connectivity to web applications.
Course outcomes:
The students should be able to:
Design and develop dynamic web pages with good aesthetic sense of designing and
latest technical know-how's.
Have a good understanding of Web Application Terminologies, Internet Tools other
web services.
Learn how to link and publish web sites.
Lab Syllabus
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.
PROGRAM:
<!DOCTYPE
HTML> <html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
background-color: DarkGray;
border-collapse:collapse;
}
table { margin: auto; }
input { text-align:right; }
</style>
<script type="text/javascript">
function calc(clicked_id)
{
Var val1 =
parseFloat(document.getElementById("value1").value);
var val2 =
parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
alert("ENTER VALID NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val
2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-
val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
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>
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
Aim:
To Write a JavaScript to Calculate the Squares and Cubes of numbers.
Algorithm/Procedure:
1. Create a webpage with the name program2.html
2. Create table for displaying squares and cubes using Html code.
3. Create Java script to calculate the squares and Cubes for numbers.
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>
Sample Output:
Aim:
To write a JavaScript: Text-Growing and Text Shrinking
Program 3.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 fs = 5;
function inTimer() {
if(fs >= 50 ){
clearInterval(var1);
}
function deTimer() {
fs -= 5;
clearInterval(var2);
</script>
</body>
</html>
Sample Output:
TEXT SHRINKING
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
Aim:
To write a JavaScript : position in the string of the left-most vowel and number with
its digits in the reverse order
Program 4.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();
Sample Output :
Aim:
To design a XML document to store information about a student.
Program 5.xml
<?xml-stylesheet type="text/css" href="5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 1ME15CS001</USN>
<name>NAME : SANVI</name>
<college>COLLEGE : MSEC</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2015</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 1ME15IS002</USN>
<name>NAME : MANORANJAN</name>
<college>COLLEGE : MSEC</college>
<branch>BRANCH : Information Science and Engineering</branch>
<year>YEAR : 2015</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 1ME13EC003</USN>
<name>NAME : CHANDANA</name>
<college>COLLEGE : MSEC</college>
Program 5.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;
}
Sample Output:
STUDENTS DESCRIPTION
USN: 1ME15CS001
NAME: SANVI
COLLEGE: MSEC
BRANCH: Computer Science and Engineering
YEAR: 2015
E-Mail: [email protected]
USN: 1ME15S002
NAME: MANORANJAN
COLLEGE: MSEC
BRANCH: Information Science and Engineering
YEAR: 2015
E-Mail: [email protected]
USN: 1ME13CS003
NAME: CHANDANA
COLLEGE: MSEC
BRANCH: Electronics and Communication Engineering
YEAR: 2013
E-Mail: [email protected]
Exp 6: PHP - Display the number of visitors visiting the web page.
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.
Aim:
To write a PHP Program to Display the number of visitors visiting the web page.
Program 6.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);
Sample Output:
REFRESH PAGE
Total number of views: 10
Exp 7: PHP Program to display digital clock with current time of the
Server.
Write a PHP program to display a digital clock which displays the current time
of the server.
Aim:
To Write a PHP Program to display digital clock with current time of the Server.
Program 7.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>
Sample 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
{
$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>
Sample 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
Program 8b.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]);
echo "<br/>";
echo "<br/>";
echo "<br/>";
}
if(($m===$p) and ($n===$q)) {
}
if($n===$p){
$result=array();
$result[$i][$j] = 0;
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 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 element1 of
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.
Aim:
Write a PHP program with variable states with value “Mississippi Alabama Texas Massachusetts
Kansas"
Program 9.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>");
?>
Sample Output:
Exp 10: PHP - program to sort the student records using selection
sort.
Write a PHP program to sort the student records which are stored in the database
using selection sort.
Aim:
To write a PHP - program to sort the student records 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);
Sample Output:
AFTER SORTING
USN NAME ADDRESS
1ME16 ABHAY BENGALURU
1ME15 ARUN HASSAN
1ME14 CHANDANA MANDYA
1ME13 SANJAY KOLAR