Web Technology Laboratory with mini Project -15CSL77 2018-2019

APPROVED BY AICTE NEW DELHI, AFFILIATED TO VTU BELGAUM

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
LAB MANUAL - 15CSL77
[As per Choice Based Credit System (CBCS) scheme]
(Effective from the academic year 2016 -2017)
SEMESTER-VII
2018-2019

Prepared by: Reviewed by: Approved by:

Aparna N Dr. J Somasekar Dr. A.A. Powly Thomas

Asst.Professor Head of the Department Principal
Dept. of CSE Dept. of CSE GCEM
GCEM GCEM

81/1, 182/1, Hoodi Village, Sonnenahalli, K.R. Puram, Bengaluru,

Karnataka-560048.
Dept. of CSE, GCEM, Bangalore Page 1 SEMESTER-VII
Web Technology Laboratory with mini Project -15CSL77 2018-2019

TABLE OF CONTENTS

S. No Title of Contents Page

From To
1 SYLLABUS 3 5
2 STUDY EXPERIMENT / PROJECT 6 7
3 COURSE OBJECTIVE AND COURSE 8 8
OUTCOME
4 COMPUTER LAB DO’S AND DON’TS 9 9
5 LIST OF EXPERIMENTS 11 38
6 VIVA QUESTIONS 39 40

Dept. of CSE, GCEM, Bangalore Page 2 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

SYLLABUS

Subject Code 15CSL77 IA Marks 20

Number of Lecture Hours/Week 01I + 02P Exam Marks 80

Total Number of Lecture Hours 40 Exam Hours 03

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

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

5. Design an XML document to store information about a student in an engineering college

affiliated to VTU. The information must include USN, Name, and Name of the College,

Dept. of CSE, GCEM, Bangalore Page 3 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Branch, Year of Joining, and email id. Make up sample data for 3students. Create a CSS
style sheet and use it to display the document.

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.

7. Write a PHP program to display a digital clock which displays the current time of the
server.

8. Write the PHP programs to do the following:

a) Implement simple calculator operations.

b) Find the transpose of a matrix.

c) Multiplication of two matrices.

d) Addition of two matrices.

9. Write a PHP program named states.py that declares 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.

Dept. of CSE, GCEM, Bangalore Page 4 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

10. Write a PHP program to sort the student records which are stored in the database using
selection sort.

Dept. of CSE, GCEM, Bangalore Page 5 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Study Experiment / Project:

Develop a web application project using the languages and concepts learnt in the theory and
Exercises listed in part A with a good look and feel effects. You can use any web
technologies and frameworks and databases.

Note:

1. In the examination each student picks one question from part A.

2. A team of two or three students must develop the mini project. However during
the examination, each student must demonstrate the project individually.

3. The team must submit a brief project report (15-20 pages) that must include the
following:

a) Introduction

b) Requirement Analysis

c) Software Requirement Specification

d) Analysis and Design

e) Implementation

f) Testing

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

Dept. of CSE, GCEM, Bangalore Page 6 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Conduction of Practical Examination:

1. All laboratory experiments from part A are to be included for practical examination.

2. Mini project has to be evaluated for 30 Marks.

3. Report should be prepared in a standard format prescribed for project work.

4. Students are allowed to pick one experiment from the lot.

5. Strictly follow the instructions as printed on the cover page of answer script.

6. Marks distribution:
a) Part A: Procedure + Conduction + Viva:10 + 35 +5 =50 Marks
b) Part B: Demonstration + Report + Viva voce = 15+10+05 = 30 Marks. Change of experiment
is allowed only once and marks allotted to the procedure part to be made zero.

Dept. of CSE, GCEM, Bangalore Page 7 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

COURSE OBJECTIVE

 Design and develop static and dynamic web pages.

 Familiarize with Client-Side Programming, Server-Side Programming, Active server
Pages.
 Learn Database Connectivity to web applications.

COURSE OUTCOME

 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

Dept. of CSE, GCEM, Bangalore Page 8 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

COMPUTER LAB DO’S AND DON’T

DO’S

1. Know the location of the fire extinguisher and the first aid box and how to use
them in case of an emergency.
2. Read and understand how to carry out an activity thoroughly before coming to the
laboratory.
3. Report fires or accidents to your lecturer/laboratory technician immediately.
4. Report any broken plugs or exposed electrical wires to your lecturer/laboratory
technician immediately.

DON’TS

1. Do not eat or drink in the laboratory.

2. Avoid stepping on electrical wires or any other computer cables.
3. Do not open the system unit casing or monitor casing particularly when the power
is turned on. Some internal components hold electric voltages of up to 30000 volts,
which can be fatal.
4. Do not insert metal objects such as clips, pins and needles into the computer
casings. They may cause fire.
5. Do not remove anything from the computer laboratory without permission.
6. Do not touch, connect or disconnect any plug or cable without your
lecturer/laboratory technician’s permission.
7. Do not misbehave in the computer laboratory.

Dept. of CSE, GCEM, Bangalore Page 9 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

LIST OF EXPERIMENTS

S. No Title of the Experiment Page

From To
1 Calculator Program using Java Script. 11 13
2 JavaScript to calculate the squares and 14 15
cubes of the numbers in HTML table
format.
3 JavaScript to grow & Shrink the given 16 17
text in given format.
4 Develop and demonstrate a HTML5 file 18 20
with JavaScript to solve prescribed
problems.
5 XML document to store information of a 21 23
student and create a CSS style sheet to
display the document.
6 PHP program to find & display the 24 25
number of visitors visiting the web page.
7 PHP program to display the current time 26 27
of the server.
8a PHP program to implement simple 28 30
calculator operations.
8b PHP program to find the transpose of a 31 33
matrix, Multiplication of two matrices,
Addition of two matrices.
9 PHP programs for pattern matching. 34 35
10 PHP program to sort the student records 36 38
in the database using selection sort.

Dept. of CSE, GCEM, Bangalore Page 10 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:1
Calculator Program using Java Script

Aim:

Write a JavaScript to design a simple calculator to perform the following

operations: sum, product, difference and quotient.
Instructions:

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 1.html(filename)
4. Editor will be opened and type the program
5. Click Save button
6. Open the browser and type localhost, and check whether it works
7. Run the program in the browser by typing localhost/1.html

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+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
Dept. of CSE, GCEM, Bangalore Page 11 SEMESTER-VII
Web Technology Laboratory with mini Project -15CSL77 2018-2019

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>

Output:

Dept. of CSE, GCEM, Bangalore Page 12 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Test cases:

Conclsion
Program for calculator program is executed with HTML and using JavaScript. Result is checked by
giving different test cases and obtained the output successfully.

Dept. of CSE, GCEM, Bangalore Page 13 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:2

JavaScript to calculate the squares and cubes of the numbers in HTML table
format.
Aim:

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

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 2.html(filename)
4. Editor will be opened and type the program
5. Click Save button
6. Open the browser and type localhost, and check whether it works
7. Run the program in the browser by typing localhost/2.html

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

Dept. of CSE, GCEM, Bangalore Page 14 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

document.write( "</table>" ) ;
</script>
</head>
</html>

Output:

Conclsion
Program for finding the squares and cubes of numbers from 0-10 is executed using JavaScript.
Result is displayed in HTML table format successfully.

Dept. of CSE, GCEM, Bangalore Page 15 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:3

JavaScript code to grow & Shrink the given text in given format

Aim:
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.
Instructions:

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 3.html(filename)
4. Editor will be opened and type the program
5. Click Save button
6. Open the browser and type localhost, and check whether it works
7. Run the program in the browser by typing localhost/3.html
Program:
<!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);

Dept. of CSE, GCEM, Bangalore Page 16 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

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
Conclsion
Program to make the given text to grow and shrink is executed with HTML and using JavaScript.
Obtained the output successfully.

Dept. of CSE, GCEM, Bangalore Page 17 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:4
Develop and demonstrate a HTML5 file with JavaScript to solve prescribed
problems.
Aim:
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
Instructions:

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 4.html(filename)
4. Editor will be opened and type the program
5. Click Save button
6. Open the browser and type localhost, and check whether it works
7. Run the program in the browser by typing localhost/4.html

Program:
<!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++) {

Dept. of CSE, GCEM, Bangalore Page 18 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

var chr = str.charAt(i);

if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')break;
}
if( i < str.length )
alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body>
</html>

Output :

Dept. of CSE, GCEM, Bangalore Page 19 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Test Cases :
Test.No: Input Parameters Expected Output Obtained Output Remarks

1 123 Reverse of 123 is 321 Reverse of 123 is 321 PASS

2 Gopalan The position of the The position of the PASS

left most vowel is 2
left most vowel is 2
3 SKY No vowel found in No vowel found in PASS
the entered string the entered string
4 MNKTO The position of the The position of the PASS
left most vowel is 5 left most vowel is 5

Conclsion
Program to check the position of leftmost vowel in a given string and to reverse the given number is
executed with HTML and using JavaScript. Result is checked by giving different test cases and
obtained the output successfully.

Dept. of CSE, GCEM, Bangalore Page 20 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:5
XML document to store information of a student and create a CSS style sheet to
display the document.
Aim:

Design an XML document to store information about a student in an engineering college

affiliated to VTU. The information must include USN, Name, and Name of the College,
Branch, Year of Joining, and email id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.
Instructions:

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 5.xml(filename)
4. Editor will be opened and type the program
5. Click Save button
6. Type gedit 5.css(filename)
7. Editor will be opened and type the css program
8. Click Save button
9. Open the browser and type localhost, and check whether it works
10. Run the program in the browser by typing localhost/5.xml
Program:
<?xml-stylesheet type="text/css" href="5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 1GD15CS001</USN>
<name>NAME : AJAY</name>
<college>COLLEGE : GCEM</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2019</year>
<e-mail>E-Mail : ajay@gmail.com</e-mail>
</student>
<student>
<USN>USN : 1GD15CS002</USN>
<name>NAME : AKKUL</name>

Dept. of CSE, GCEM, Bangalore Page 21 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

<college>COLLEGE : GCEM </college>

<branch>BRANCH : Computer Science and Engineering </branch>
<year>YEAR : 2019</year>
<e-mail>E-Mail : akkul@gmail.com</e-mail>
</student>
<student>
<USN>USN : 1GD15CS003</USN>
<name>NAME : AMAN</name>
<college>COLLEGE : GCEM </college>
<branch>BRANCH : Computer Science and Engineering </branch>
<year>YEAR : 2019</year>
<e-mail>E-Mail : aman@gmail.com</e-mail>
</student>
</students>
</html>
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;
}

Dept. of CSE, GCEM, Bangalore Page 22 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Output:
STUDENTS DESCRIPTION
USN : 1GD15CS001
NAME : AJAY
COLLEGE : GCEM
BRANCH : Computer Science and Engineering
YEAR : 2019
E-Mail : ajay@gmail.com
USN : 1GD15CS002
NAME : AKKUL
COLLEGE : GCEM
BRANCH : Computer Science and Engineering
YEAR : 2019
E-Mail : akkul@gmail.com
USN : 1GD15CS003
NAME : AMAN
COLLEGE : GCEM
BRANCH : Computer Science and Engineering
YEAR : 2019
E-Mail : aman@gmail.com
Conclsion
Program for student record in XML and display using CSS is executed successfully and result is
obtained.

Dept. of CSE, GCEM, Bangalore Page 23 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:6
PHP program to find & display the number of visitors visiting the web page
Aim:
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.
Instructions:
1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 6.php(filename)
4. Editor will be opened and type the program
5. Click Save button
6. Type gedit counter.txt(filename)
7. Editor will be opened and type 1
8. Click Save button
9. In Terminal give the command chmod 777 6.php
10. Give the command chmod 777 counter.txt
11. Open the browser and type localhost, and check whether it works
12. Run the program in the browser by typing localhost/6.php

Program1:
<?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);
print "Total number of views: ".$hits[0];
?>
Output:
REFRESH PAGE
Total number of views: 10

Dept. of CSE, GCEM, Bangalore Page 24 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Program2:
<?php
$file='counter.txt';
$count=strval(file_get_contents($file));
file_put_contents($file, $count + 1);
echo "<center><h1>VISITOR COUNT</h1>";
echo "<h3>You are Visitor number:" .$count. "</h3></center>";
?>
Output:
VISITOR COUNT
You are Visitor number: 5

Conclsion
Program to find & display the number of visitors visiting the web page is successfully executed
using PHP and result is obtained .

Dept. of CSE, GCEM, Bangalore Page 25 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:7
PHP program to display the current time of the server
Aim:
Write a PHP program to display a digital clock which displays the current time
of the server.
Instructions:
1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 7.php(filename)
4. Editor will be opened and type the program
5. Click Save button
6. In Terminal give the command chmod 777 7.php
7. Open the browser and type localhost, and check whether it works
8. Run the program in the browser by typing localhost/7.php
Program:
<!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>

Dept. of CSE, GCEM, Bangalore Page 26 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Output:

Conclsion
Program to display the current time of the server is successfully executed using PHP result is
obtained.

Dept. of CSE, GCEM, Bangalore Page 27 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:8a
PHP program to implement simple calculator operations.
Aim:
Write the PHP program to implement simple calculator operations.

Instructions:

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 8a.php(filename)
4. Editor will be opened and type the program
5. Click Save button
6. In Terminal give the command chmod 777 8a.php
7. Open the browser and type localhost, and check whether it works
8. Run the program in the browser by typing localhost/8a.php

Program:
<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 CSE, GCEM, Bangalore Page 28 SEMESTER-VII

Web Technology Laboratory 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:

Dept. of CSE, GCEM, Bangalore Page 29 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Test Cases:

Conclsion
Program to implement simple calculator operations is executed successfully with PHP and result is
obtained.

Dept. of CSE, GCEM, Bangalore Page 30 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:8b
PHP program to find the transpose of a matrix, Multiplication of two matrices,
Addition of two matrices
Aim:
Write the PHP programs to find the transpose of a matrix, multiplication of two matrices and
addition of two matrices.

Instructions:

1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 8b.php(filename)
4. Editor will be opened and type the program
5. Click Save button
6. In Terminal give the command chmod 777 8b.php
7. Open the browser and type localhost, and check whether it works
8. Run the program in the browser by typing localhost/8b.php

Program:
<?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 "the first matrix :"."<br/>";
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)
echo " ".$a[$row][$col];
echo "<br/>";
}
echo "the second matrix :"."<br/>";
for ($row = 0; $row < $p; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$b[$row][$col];
echo "<br/>";
}
echo "the transpose for the first matrix is:"."<br/>";
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)

Dept. of CSE, GCEM, Bangalore Page 31 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

echo " ".$a[$col][$row];

echo "<br/>";
}
if(($m===$p) and ($n===$q)) {
echo "the addition of matrices is:"."<br/>";
for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$a[$row][$col]+$b[$row][$col]." ";
echo "<br/>";
}
}
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:

the first matrix:

123
456
789
the second matrix:
789
456
123
the transpose of the first matrix:
147
258
369
the addition of matrices is:
8 10 12
8 10 12

Dept. of CSE, GCEM, Bangalore Page 32 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

8 10 12
the multiplication of matrices:
18 24 30
54 69 84
90 114 138
Conclsion
Program to find the transpose of a matrix, multiplication of two matrices and addition of two
matrices is executed successfully in PHP and result is obtained.

Dept. of CSE, GCEM, Bangalore Page 33 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:9
PHP programs for pattern matching
Aim:
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.
Instructions:
1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 9.php(filename)
4. Editor will be opened and type the program
5. Click Save button
6. In Terminal give the command chmod 777 9.php
7. Open the browser and type localhost, and check whether it works
8. Run the program in the browser by typing localhost/9.php
Program:
<?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);
}

Dept. of CSE, GCEM, Bangalore Page 34 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

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:

Conclsion
Program for pattern matching is executed successfully in PHP and result is obtained.

Dept. of CSE, GCEM, Bangalore Page 35 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

Exp.No:10
PHP program to sort the student records in the database using selection sort.
Aim:
Write a PHP program to sort the student records which are stored in the database using
selection sort.
mysql -u root -p
create database weblab;
use weblab;
create table student(usn varchar(10),name varchar(20),address varchar(20));
insert into student values (1GD07,Ankith,Bangalore);
Instructions:
1. Open terminal and log in to root by giving command sudo su and password as 123456
2. Change directory using cd /var/www/html
3. Type gedit 10.php(filename)
4. Editor will be opened and type the program
5. Click Save button
6. In Terminal give the command chmod 777 10.php
7. Open the browser and type localhost, and check whether it works
8. Run the program in the browser by typing localhost/10.php
Program:
<!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
// Create connection
// Opens a new connection to the MySQL server
$conn = mysql_connect("localhost","root","123456");
mysql_select_db("weblab");
$a=[];

Dept. of CSE, GCEM, Bangalore Page 36 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

$sql = mysql_query("SELECT * FROM student");

echo "<br>";
echo "<center> BEFORE SORTING </center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
while($row = mysql_fetch_row($sql))
{
echo "<tr>
<td> $row[0]</td>
<td> $row[1] </td>
<td> $row[2] </td></tr>";
array_push($a,$row["0"]);
}
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{
$pos= $i;
for ( $j = $i + 1 ; $j < $n ; $j++ ) {
if ( $a[$pos] > $a[$j] )
$pos= $j;
}
if ( $pos!= $i ) {
$temp=$a[$i];
$a[$i] = $a[$pos];
$a[$pos] = $temp;
}
}
$c=[];
$d=[];
$result = mysql_query("SELECT * FROM student");
while($row = mysql_fetch_row($result))
{
for($i=0;$i<$n;$i++)
{
if($row[0]== $a[$i])
{
$c[$i]=$row[1];
$d[$i]=$row[2];
}
}
}
echo "<br>";
echo "<center> AFTER SORTING <center>";

Dept. of CSE, GCEM, Bangalore Page 37 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

echo "<table border='2'>";

echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
for($i=0;$i<$n;$i++)
{
echo "<tr>
<td> $a[$i] </td>
<td> $c[$i]</td>
<td> $d[$i]</td></tr>";
}
echo "</table>";
$conn->close();
?>
</body>
</html>
Output:

BEFORE SORTING
USN Name Address
1GD07 Ankith Bangalore
1GD01 Ajith Mysore
1GD43 Sahana Hoodi
1GD10 Chinmay Whitefield

AFTER SORTING
USN Name Address
1GD01 Ajith Mysore
1GD07 Ankith Bangalore
1GD10 Chinmay Whitefield
1GD43 Sahana Hoodi
Conclsion
Program to sort the student records which are stored in the database using selection sort is executed
successfully in PHP and result is obtained.

Dept. of CSE, GCEM, Bangalore Page 38 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

VIVA Questions
1. HTML stands for As:
2. What does an HTML document describe?
3. What is a tag?
4. Links in HTML are defined with what tag?
5. How can I include comments in HTML?
6. What is a DOCTYPE? Which one do I use?
7. How many heading styles are there in HTML?
8. How line break is given in HTML?
9. What is the use of attributes used in HTML?
10. What is a hyperlink?
11. How images are displayed on web pages in HTML?
12. Explain <table> tag used in HTML?
13. Can I nest tables within tables?
14. How many types of lists are available in HTML?
15. Explain <form> element used in HTML?
16. Explain about frames used in HTML?
17. How to use styles in HTML?
18. Expand CSS.
19. What does styles do in Style sheets ?
20. How CSS syntax is made up of?
21. What is Javascript?
22. What Javascript can do?
23. What are JavaScript types?
24. What boolean operators does JavaScript support?
25. What looping structures are there in JavaScript?
26. What is class?
27. What is the difference between XML and HTML?
28. What is XML tree?
29. What are different selector forms

30. What is grouping?

Dept. of CSE, GCEM, Bangalore Page 39 SEMESTER-VII

Web Technology Laboratory with mini Project -15CSL77 2018-2019

31. What is ID selector?

32. What is contextual selector?

33. What are the advantages / disadvantages of various style methods?

34. What is property?

35. What is the CSS clear property?

36. What are the necessities of using HTML forms?

37. What are the sequences of steps for each HTTP request from a client to the server?
38. What is basic PHP syntax?

Dept. of CSE, GCEM, Bangalore Page 40 SEMESTER-VII