VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANA SANGAMA, BELGAVI-590018, KARNATAKA

WEB TECHNOLOGY LABORATORY

WITH MINI PROJECT- 15CSL77

MANUAL / GUIDELINES

Department of CSE
J S S Acedemey of Technical Education

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 9
0 to 10
4. Program 3 - JavaScript : TEXT-GROWING and TEXT-SHRINKING 11
5. Program 4 - HTML5 and JavaScript :
a) position in the string of the left-most vowel 13
b) number with its digits in the reverse order 15
6. Program 5 - XML document to store information about a student 17
7. Program 6 - PHP : display the number of visitors visiting the web page. 20
8. Program 7 - PHP : display digital clock with current time of the server. 21
9. Program 8 - PHP :
a) Implement simple calculator operations. 22
b) Find the Transpose of a matrix, Multiplication of two matrices and 25
Addition of two matrices.
10. Program 9 – PHP : program with variable states with value 28
“Mississippi Alabama Texas Massachusetts Kansas"

11. Program 10 – PHP : program to sort the student records using selection sort. 30
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT

[As per Choice Based Credit System (CBCS) scheme]
(Effective from the academic year 2016 -2017)
SEMESTER – VII

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

Page 1
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

Page 2
FDP-Web Technology Lab 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 duringthe
examination, each student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include thefollowing:
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 designingand latest
technical know-how's.
 Have a good understanding of Web Application Terminologies, Internet Toolsother web
services.
 Learn how to link and publish web sites
Conduction of Practical Examination:
1. All laboratory experiments from part A are to be included for practicalexamination.
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.

Page 3
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.
program1.html
<html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 35%;
text-align: center;
background-color: DarkGray;
}
table { margin: auto; }
input { text-align:right; }
</style>
<script type="text/javascript">
function add()
{
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
{
alert("ENTER VALID NUMBER");
}
else
{
document.getElementById("answer").value=val1+val2;
}
}

Page 4
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

function sub()
{
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
{
alert("ENTER VALID NUMBER");
}
else
{
document.getElementById("answer").value=val1-val2;
}

}
function mul()
{
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
if(isNaN(val1)||isNaN(val2))
{
alert("ENTER VALID NUMBER");
}
else
{
document.getElementById("answer").value=val1*val2;
}
}
function div()
{
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);

Page 5
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

if(isNaN(val1)||isNaN(val2))
{
alert("ENTER VALID NUMBER");
}
else
{
document.getElementById("answer").value=val1/val2;
}
}
function cls()
{
value1.value="";
value2.value="";
answer.value="";
}
</script>
</head>
<body>
<table>

<tr><thcolspan="4"> SIMPLE CALCULATOR </th></tr>

<tr><td>value1</td><td><input type="text" id="value1" name="value1" value=""/></td>
<td>value2</td><td><input type="text" id="value2" name="value2" value=""/></td></tr>
<tr><td><input type="button" name="Addition" value="Addition"
onclick="javascript:add()"/></td>
<td><input type="button" name="Subtraction" value="Subtraction"
onclick="javascript:sub()"/></td>
<td><input type="button" name="Multiplication" value="Multiplication"
onclick="javascript:mul()"/></td>
<td><input type="button" name="Division" value="Division"
onclick="javascript:div()"/></td></tr></td>

Page 6
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

<tr><td>Answer:</td><td><input type="text" id="answer" name="answer" value=""

disabled/></td>
<td colspan="2"><input type="button" name="clear" value="CLEAR ALL"
onclick="javascript:cls()"/></td>
</tr>
</table>
</body>
</html>

Output:

Page 7
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

Test Cases :

Test Input
Expected Output Obtained Output Remarks
No. Parameters

Addition =74.95 Addition =74.95

value1=50.56 Subtraction =26.17 Subtraction =26.17
1. PASS
value2=24.39 Multiplication=1233.1584 Multiplication=1233.1584
Division=2.072980729807298 Division=2.072980729807298

Addition =45 Addition =45

value1= 0 Subtraction =-45 Subtraction =-45
2. PASS
value2= 45 Multiplication=0 Multiplication=0
Division=0 Division=0

Addition =45 Addition =45

value1= 45 Subtraction =45 Subtraction =45
3. PASS
value2= 0 Multiplication=0 Multiplication=0
Division=Infinity Division=Infinity

value1 = abc
4. ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 = 23

value1 = 50
5 ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 =xyz

Page 8
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

Page 9
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

Output:

Page 10
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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.

program3.html
<!DOCTYPE html>
<html>
<head>
<style>
center {
height: 620px;
position: relative;
}
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center">
<p id="demo" align="center" style="font-size: 5px; color: red " ></p>
</div>
<script>
var myVar = setInterval(inTimer, 1000);
var fs = 5;
var myVar2 = setInterval(deTimer, 1000);
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT-GROWING'

Page 11
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

ids.setAttribute('style', "font-size: " + fs + "px; color: red")

fs += 5;
if(fs >= 50 ){
clearInterval(myVar);
myVar2 = setInterval(deTimer, 1000);
}
}
function deTimer() {
fs -= 5;
ids.innerHTML = 'TEXT-SHRINKING'
ids.setAttribute('style', "font-size: " + fs + "px; color: blue")

if(fs === 5 ){
clearInterval(myVar2);
}
}
</script>
</body>
</html>

Output:

TEXT SHRINKING

Page 12
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

program4a.html
<html>
<body>
<script type="text/javascript">
var str = prompt("Enter the string","");
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;
}
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>

Page 13
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

Output:

Test Cases :

Test
Input Parameters Expected Output Obtained Output Remarks
No.
The position of the left The position of the left
1. CHANNASANDRA PASS
most vowel is 3 most vowel is 3
No vowel found in the No vowel found in the
2. SKY PASS
entered string entered string
The position of the left The position of the left
3. MNKTO PASS
most vowel is 5 most vowel is 5

Page 14
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

program4b.html
<html>
<body>
<script type="text/javascript">
var num,rev=0,remainder;
var n = prompt("Enter the number","");
if(isNaN(n))
{
alert("ENTER VALID NUMBER");
}
else
{
num=n;
while(num!=0)
{
remainder = num%10;
num = parseInt(num/10);
rev = rev * 10 + remainder;
}
alert("Reverse of " +n+ " is "+rev);
}
</script>
</body>
</html>
Output

Page 15
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

TEST CASES :

Test
Input Parameters Expected Output Obtained Output Remarks
No.

1. 1234 Reverse of 1234 is 4321 Reverse of 1234 is 4321 PASS

ENTER VALID ENTER VALID
2. ABCD PASS
NUMBER NUMBER

Page 16
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

program5.xml
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="5.css" ?>
<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 : [email protected]</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 : [email protected]</e-mail>
</student>
<student>
<USN>USN : 1RN07EC001</USN>
<name>NAME : CHETHAN</name>
<college>COLLEGE : RNSIT</college>

Page 17
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

<branch>BRANCH : Electronics and Communication Engineering

</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
</students>
</html>

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

Page 18
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

Output:

Page 19
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

print "Total number of views: ".$hits[0];

?>

Output:

REFRESH PAGE
Total number of views: 10

Page 20
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

<html>
<head>
<meta http-equiv="refresh" content="1" charset="UTF-8"/>
<style>
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body{
background-color:black;
color:white;
}
</style>
<p style="font-size: 80px;"><?php echo date(" h: i : s A");?></p>
</head>
</html>

Output:

Page 21
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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.
program8a.php

<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
Page 22
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>

Page 23
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

Output:

Test Cases:

Test Input
Expected Output Obtained Output Remarks
No. Parameters

Addition =74.95 Addition =74.95

value1=50.56 Subtraction =26.17 Subtraction =26.17
1. PASS
value2=24.39 Multiplication=1233.1584 Multiplication=1233.1584
Division=2.072980729807298 Division=2.072980729807298

Addition =45 Addition =45

value1= 0 Subtraction =-45 Subtraction =-45
2. PASS
value2= 45 Multiplication=0 Multiplication=0
Division=0 Division=0

Addition =45 Addition =45

value1= 45 Subtraction =45 Subtraction =45
3. PASS
value2= 0 Multiplication=0 Multiplication=0
Division=Infinity Division=Infinity

value1 = abc
4. ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 = 23

value1 = 50
5 ENTER VALID NUMBER ENTER VALID NUMBER PASS
value2 =xyz

Page 24
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

echo "the first matrix :"."<br/>";

for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$a[$row][$col];
echo "<br/>";
}

echo "the second matrix :"."<br/>";

for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$b[$row][$col];
echo "<br/>";
}

echo "the transpose for the first matrix is:"."<br/>";

for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col <3; $col++)
echo " ".$a[$col][$row];
echo "<br/>";
}

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

Page 25
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]);
if($n!= $p){
echo "Incompatible matrices";
exit(0);
}

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 < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$result[$row][$col];
echo "<br/>";
}
?>

Page 26
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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
8 10 12

the multiplication of matrices:

18 24 30
54 69 84
90 114 138

Page 27
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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

Page 28
FDP-Web Technology Lab 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:

Page 29
FDP-Web Technology Lab 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.
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

// Opens a new connection to the MySQL server

$conn = mysqli_connect($servername, $username, $password, $dbname);

Page 30
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

// Check connection and return an error description from the last

connection error, if any

if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);

$sql = "SELECT * FROM student";

// performs a query against the database
$result = $conn->query($sql);
echo "<br>";
echo "<center> BEFORE SORTING </center>";
echo "<table border='2'>";
echo "<tr>";
echo "<th>USN</th><th>NAME</th><th>Address</th></tr>";
if ($result->num_rows> 0)
{
// output data of each row and fetches a result row as an
associative array
while($row = $result->fetch_assoc()){
echo "<tr>";
echo "<td>". $row["usn"]."</td>";
echo "<td>". $row["name"]."</td>";
echo "<td>". $row["addr"]."</td></tr>";
array_push($a,$row["usn"]);
}
}
else
echo "Table is Empty";
echo "</table>";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{
$pos= $i;

Page 31
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

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 = $conn->query($sql);
if ($result->num_rows> 0)// output data of each row
{
while($row = $result->fetch_assoc()) {
for($i=0;$i<$n;$i++) {
if($row["usn"]== $a[$i]) {
$c[$i]=$row["name"];
$d[$i]=$row["addr"];
}
}
}
}
echo "<br>";
echo "<center> AFTER SORTING <center>";
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>";
echo "<td>". $a[$i]."</td>";
echo "<td>". $c[$i]."</td>";

Page 32
FDP-Web Technology Lab With Mini Project – 15CSL77 2018-2019

echo "<td>". $d[$i]."</td></tr>";

}
echo "</table>";
$conn->close();
?>
</body>
</html>

Output:

Page 33