Syllabus

Subject Code : 17CSL77 IA Marks : 40

No. of Practical Hrs/ Week: 01I + 02P Exam Hours : 03
Total No. of Practical Hrs : 40 Exam Marks : 60

Course Objectives
1. Design and develop static and dynamic web pages.
2. Familiarize with Client-Side Programming, Server-Side Programming, and Active server
Pages.
3. Learn Database Connectivity to web applications

PART A

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 10 and
outputs HTML text that displays the resulting values in an HTML table format.
3. Write a JavaScript code that displays text “TEXT-GR OWING” 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 f ont 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 3 Students. Create a CSS
style sheet and use it to display the document.

Dept. of CSE Web Technology Laboratory With Mini Project-17CSL77

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 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 caseinsensitive
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.
10. Write a PHP program to sort the student records which are stored in the database using
selection sort.

Dept. of CSE Web Technology Laboratory With Mini Project-17CSL77

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

Dept. of CSE Web Technology Laboratory With Mini Project-17CSL77

 Course Outcomes

17CSL77
System Software & Compiler Design / Operating Systems Lab

COs COURSE OUTCOMES

Design and develop dynamic web pages with good aesthetic sense of
CO1 designing and latest technical know-how's.
Have a good understanding of Web Application Terminologies, Internet
CO2 Tools other web services
Learn how to link and publish web sites
CO3

Conduction of Practical Examination:

1.
All laboratory experiments 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 Web Technology Laboratory With Mini Project-17CSL77

Web Technology Laboratory With Mini Project-17CSL77 2020-21

1. Write a JavaScript to design a simple calculator to perform the

following operations: sum, product, difference and quotient.

Aim:
To Write a JavaScript to design a simple calculator

Procedure:
1. Create a webpage with the name 1.html.
2. Create table for Calculator using html code.
3. Create html form and input field for each entry using JavaScript.

1.html

<!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")
Dept of CSE, BRCE Page 1
Web Technology Laboratory With Mini Project-17CSL77 2020-21

document.getElementById("answer").value=val1+val2;
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>
Dept of CSE, BRCE Page 2
Web Technology Laboratory With Mini Project-17CSL77 2020-21

<td colspan="2"><input type="button" value="CLEAR ALL"

onclick="cls()"/></td> </tr>
</table>
</body>
</html>

Sample Output:-

Application:
1. eCommerce

2. Simple Business to calculate

3. Solve the problems

Dept of CSE, BRCE Page 3

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

Aim:
To Write a JavaScript to Calculate the Squares and Cubes of numbers

Procedure:
1. Create a webpage with the name 2.html
2. Create table for displaying squares and cubes using html code.
3. Create Java script to calculate the squares and Cubes for numbers.

2.html:-

<!DOCTYPE HTML>
<html>
<head>
<style> table,tr, td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color: orange;
}
table { margin: auto; }
</style>
<script>
document.write( "<table><tr><th colspan='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, BRCE Page 4
Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

Sample Output:-

Application:
1. Exponent Calculator (number of times a number is multiplied by itself)

2. square-shaped garden

Dept of CSE, BRCE Page 5

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

To write a JavaScript: Text-Growing and Text Shrinking

Procedure:
1. Create a webpage with the name 3.html.
2. Create text using innerHTML
3. Write function to grow text and shrink text using JavaScript.

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 var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids = document.getElementById("demo");

Dept of CSE, BRCE Page 6

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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>

Dept of CSE, BRCE Page 7

Web Technology Laboratory With Mini Project-17CSL77 2020-21

Sample Output:

Application:
1. Animation
2. Multimedia
3. Grow/Shrink behaviour to a camera or light.

Dept of CSE, BRCE Page 8

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

AIM:-

To write a JavaScript: position in the string of the left-most vowel and number
with its digits in the reverse order
Procedure:
1. Create a webpage with the name 4.html.
2. Write function to check Position in the string left most vowel and Reverse
number using JavaScript.
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;

Dept of CSE, BRCE Page 9

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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;

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>

Dept of CSE, BRCE Page 10

Web Technology Laboratory With Mini Project-17CSL77 2020-21

SAMPLE OUTPUT:-

Application:
1. Regular expression (data validation)
2. Digits Reverse

Dept of CSE, BRCE Page 11

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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.

AIM:
To design a XML document to store information about a student.

Procedure:
1. Create a webpage with the name 5.xml and store all Student data.
2. Display the student in effective design with 5.css file

5.XML:-
<?xml-stylesheet type="text/css" href="5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN> USN : 1BC15CS001</USN>
<name> NAME : Mamatha B</name>
<college> COLLEGE : BRCE</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 : Bharthi</name>

Dept of CSE, BRCE Page 12

Web Technology Laboratory With Mini Project-17CSL77 2020-21

<college>COLLEGE : BRCE </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 : BRCE </college>

<branch>BRANCH : Electronics and Communication Engineering

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

5.CSS:-

Student
{
display:block;
margin-top:10px;
color:Navy;

}
USN
{
display:block;
margin-left:10px;
font-size:14pt;

Dept of CSE, BRCE Page 13

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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
{
Dept of CSE, BRCE Page 14
Web Technology Laboratory With Mini Project-17CSL77 2020-21

display:block;
margin-left:20px;
font-size:12pt;
color:Blue;
}

SAMPLE OUTPUT:-

Application:
1. College
2. Hospital
3. Bank

Dept of CSE, BRCE Page 15

Web Technology Laboratory With Mini Project-17CSL77 2020-21

6. PHP displays the number of visitors visiting the web page.

Aim:
To write a PHP Program to Display the number of visitors visiting the
web page
Procedure:
1. Create a webpage with the name 6.php.
2. Create a text file counter.txt and Initialize to Zero(0).
3. Start the Xampp server
4. Write PHP code to increment the visitor web page.

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

Dept of CSE, BRCE Page 16

Web Technology Laboratory With Mini Project-17CSL77 2020-21

SAMPLE OUTPUT:-
Start server

Application:
1. Website views
2. YouTube views
3. Facebook views

Dept of CSE, BRCE Page 17

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

Procedure:
1. Create a webpage with the name 7.php.
2. Start the Xampp server
3. Write PHP code to display the Server time.

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>

Dept of CSE, BRCE Page 18

Web Technology Laboratory With Mini Project-17CSL77 2020-21

</html>

SAMPLE OUTPUT:-

Application:
1. Display server time

Dept of CSE, BRCE Page 19

Web Technology Laboratory With Mini Project-17CSL77 2020-21

8: PHP Program for

a) Implement simple calculator operations.
b) Find the Transpose of a matrix,
c) Multiplication of two matrices
d) Addition of two matrices.

Aim:
To write a PHP program to implement the Simple Calculator and
Multiplication of Matrices

Procedure:
1. Create a webpage with the name 8a.php and 8b.php two separate files.
2. Start the Xampp server
3. Write PHP code for simple calculator, transpose of matrix, multiplication of
two matrices, and addition of two matrices

8a.php
<html>
<head>
<style>
table,td,th {
border: 1px solid black;
width: 35%;
text-align: center;
background-color: red;
}
table {
margin: auto;
}
input,p {
text-align: right;
}
</style>
</head>

Dept of CSE, BRCE Page 20

Web Technology Laboratory With Mini Project-17CSL77 2020-21

<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>
</table>
</form>
<?php
if(isset($_POST['submit'])) // it checks if the input submit is filled
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
if(is_numeric($num1) and is_numeric($num2) )
{
echo "<table><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>";
Dept of CSE, BRCE Page 21
Web Technology Laboratory With Mini Project-17CSL77 2020-21

echo "</table>";
}
else
{
echo"<script type='text/javascript' > alert(' ENTER VALID
NUMBER'); </script>";
}
}
?>
</body>
</html>

SAMPLE OUTPUT:-
Start server

Dept of CSE, BRCE Page 22

Web Technology Laboratory With Mini Project-17CSL77 2020-21

8b.php
<?php
$a = array(array(1,10,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++)
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++) {
Dept of CSE, BRCE Page 23
Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

Dept of CSE, BRCE Page 24

Web Technology Laboratory With Mini Project-17CSL77 2020-21

SAMPLE OUTPUT:-
Start the Server

Application:
1. Simple Calculation

2. Scientific field

3. Economics

4. Geology

5. Robotics and animation

Dept of CSE, BRCE Page 25

Web Technology Laboratory With Mini Project-17CSL77 2020-21

9. PHP program with variable states with value “Mississippi Alabama

Texas Massachusetts Kansas" using selection sort.

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.

Aim:
Write a PHP program with variable states with value “Mississippi
Alabama Texas Massachusetts Kansas"
Procedure:
1. Create a webpage with the name 9.php.
2. Start the Xampp server
3. Store the Given String in the array
4. Write the Regular Expression code for string matching and display sorted
string in the form array

9.php
<?php

$states = "Mississippi Alabama Texas Massachusetts Kansas";

$statesArray = [];

$states1 = explode(' ',$states);

echo "Original Array :<br>";

foreach ( $states1 as $i => $value )

Dept of CSE, BRCE Page 26

Web Technology Laboratory With Mini Project-17CSL77 2020-21

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

Dept of CSE, BRCE Page 27

Web Technology Laboratory With Mini Project-17CSL77 2020-21

foreach ( $statesArray as $array => $value )

print("STATES[$array]=$value<br>");

?>

SAMPLE OUTPUT:-

Application:
1. Spell Checkers
2. Spam Filters
3. Intrusion Detection System
4. Search Engines,
5. Plagiarism Detection,
6. Bioinformatics,
7. Digital Forensics

Dept of CSE, BRCE Page 28

Web Technology Laboratory With Mini Project-17CSL77 2020-21

10. Write a PHP program to sort the student records which are stored in
the database
Aim:
To write a PHP - program to sort the student records using selection sort.
Procedure:
1. Create a webpage with the name 10.php.
2. Start the Xampp server
3. Write the php code to sort the data
4. Goto http://localhost/phpmyadmin/ Mysql and then type, Go to New and
create database web2;
5. Create table name student2 with three fields USN, Name, Address.
10.php
<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";
Dept of CSE, BRCE Page 29
Web Technology Laboratory With Mini Project-17CSL77 2020-21

$username = "root";
$password = "";
$dbname = "web2";
$a=[];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) die("Connection failed: " . $conn->connect_error);
$crt="create table student2(usn varchar(20),name varchar(20),address
varchar(20))";
$result0= mysqli_query($conn,$crt);
$crt1="INSERT INTO `student2`(`usn`, `name`, `address`) VALUES
('1BC16cs002','name1','add1')";
$crt2="INSERT INTO `student2`(`usn`, `name`, `address`) VALUES
('1BC16cs001','name2','add2')";
$crt3="INSERT INTO `student2`(`usn`, `name`, `address`) VALUES
('1BC16cs003','name3','add3')";

$result1= mysqli_query($conn,$crt1);
$result2= mysqli_query($conn,$crt2);
$result3= mysqli_query($conn,$crt3);
$sql = "SELECT * FROM student2";
$result = mysqli_query($conn,$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)
{
while($row = $result->fetch_assoc())
{
echo "<tr>";

Dept of CSE, BRCE Page 30

Web Technology Laboratory With Mini Project-17CSL77 2020-21

echo "<td>". $row["usn"]."</td>";

echo "<td>". $row["name"]."</td>";
echo "<td>". $row["address"]."</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;
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=[];

Dept of CSE, BRCE Page 31

Web Technology Laboratory With Mini Project-17CSL77 2020-21

$result = $conn->query($sql);
if ($result->num_rows> 0)
{
while($row = $result->fetch_assoc())
{
for($i=0;$i<$n;$i++)
{
if($row["usn"]== $a[$i])
{
$c[$i]=$row["name"];
$d[$i]=$row["address"];
}
}
}
}
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>";
echo "<td>". $d[$i]."</td></tr>";
}
echo "</table>";

Dept of CSE, BRCE Page 32

Web Technology Laboratory With Mini Project-17CSL77 2020-21

$conn->close();
?>
</body>
</html>

SAMPLE OUTPUT:-

Start the Server and MySQL

Dept of CSE, BRCE Page 33

Web Technology Laboratory With Mini Project-17CSL77 2020-21

Application:
1. Amazon.
2. eBay.
3. Facebook.
4. Microsoft Access.

5. Oracle relational database.

Dept of CSE, BRCE Page 34

Web Technology Laboratory With Mini Project-17CSL77 2020-21

Gate Questions
1. Which one of the following statements is false? 2014
a. HTTP runs over TCP
b. HTTP describes the structure of web pages
c. HTTP allows information to be stored in a URL
d. HTTP can be used to test the validity of a hypertext link

Ans: option (b)

Explanation:
HTTP (hypertext transfer protocol) is an application layer protocol used for accessing web
pages. It uses TCP/IP at the transport and network layer.
HTML decribes the structure of web pages. HTML is a markup language for describing web
documents (web pages). HTML stands for Hyper Text Markup Language.
A Uniform Resource Locator (URL) (commonly informally referred to as a web address,
although the term is not defined identically) is a reference to a web resource that specifies its
location on a computer network and a mechanism for retrieving it.
A hyperlink is a reference to data that the reader can directly follow either by clicking or by
hovering.[1] A hyperlink points to a whole document or to a specific element within a
document. Refer https://en.wikipedia.org/wiki/Hyperlink to know more.

2. Choose the most appropriate HTML tag in the following to create a numbered lists.
ISRO CS 2017
a. < dl >
b. < ul >
c. < li >
d. < ol >

Answer: (d)
Explanation:
In HTML < ol > and < ul > commands are used along with < li > command to create ordered
and unordered lists respectively.

3. Which of the following HTML code will affect the vertical alignment of the table
content? UGC NET CS 2017 Jan
Dept of CSE, BRCE Page 35
Web Technology Laboratory With Mini Project-17CSL77 2020-21

a. (1)
b. (2)
c. (3)
d. (4)

Answer: (a)
4. Which one of the following is not a client server application? 2014
a. Internet chat
b. Web browsing
c. E-mail
d. Ping

Ans: option (d)

Explanation:
Ping is a computer network administration software utility used to test the reachability of a
host on an Internet Protocol network and to measure the round-trip time for messages sent
from the originating host to a destination computer and back.

5. Consider a HTML table definition given below: 2009

<table border=1>
<tr> <td rowspan=2> ab </td>
<td colspan=2> cd </td>
</tr>
<tr> <td> ef </td>
<td rowspan=2> gh </td>
</tr>
<tr> <td colspan=2> ik </td>
</tr>
</table>

Dept of CSE, BRCE Page 36

Web Technology Laboratory With Mini Project-17CSL77 2020-21

The number of rows in each column and the number of columns in each row are:
(a) (2,2,3) and (2,3,2)
(b) (2,2,3) and (2,2,3)
(c) (2,3,2) and (2,3,2)
(d) (2,3,2) and (2,2,3)

Ans: option (c)

Explanaion:
The above code will give a table like below. Rowspan attribute specifies the number of rows
a cell should span. Colspan attribute specifies the number of columns a cell should span.

cd
ab
ef
gh
ik

6. A HTML form is to be designed to enable purchase of office stationery. Required

items are to be selected (checked). Credit card details are to be entered and then the
submit button is to be pressed. Which one of the following options would be
appropriate for sending the data to the server? Assume that security is handled in a
way that is transparent to the form design.
2005
a. Only GET
b. Only POST
c. Either of GET or POST
d. Neither GET nor POST
Ans: option (b)
Explanation:
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between
clients and servers. HTTP works as a request-response protocol between a client and server.
Two commonly used methods for a request-response between a client and server are: GET
and POST. GET requests should never be used when dealing with sensitive data (like
passwords, credit or debit card details etc) because it will display all such details in the
address bar. Also GET requests can be cached and remains in the browser history.

7. Which one of the following statements is NOT correct about HTTP cookies? 2015
a. A cookies is a piece of code that has the potential to compromise the security of an
Internet user
b. A cookie gains entry to the user’s work area through an HTTP header

Dept of CSE, BRCE Page 37

Web Technology Laboratory With Mini Project-17CSL77 2020-21

c. A cookie has an expiry date and time

d. Cookies can be used to track the browsing pattern of a user at a particular site

Ans: option (a)

Explanation:
An HTTP cookie (also called web cookie, Internet cookie, browser cookie or simply cookie),
is a small piece of data sent from a website and stored in the user's web browser while the
user is browsing it. Every time the user loads the website, the browser sends the cookie back
to the server to notify the user's previous activity. Cookies were designed to be a reliable
mechanism for websites to remember stateful information (such as items added in the
shopping cart in an online store) or to record the user's browsing activity (including clicking
particular buttons, logging in, or recording which pages were visited in the past). Cookies can
also store passwords and form content a user has previously entered, such as a credit card
number or an address.

8. Which of following statements is/are False? 2015

1. XML overcomes the limitations in HTML to support a structured way of organizing
content.
2. XML specification is not case sensitive while HTML specification is case sensitive.
3. XML supports user defined tags while HTML uses pre-defined tags.
4. XML tags need not be closed while HTML tags must be closed.
(a) 2 only
(b) 1 only
(c) 2 and 4 only
(d) 3 and 4 only

Ans: option (c)

Explanation:
HTML tags are not case sensitive. XML tags are case sensitive.
HTML tags need not to be closed, but XML tags must be closed.

Dept of CSE, BRCE Page 38

Web Technology Laboratory With Mini Project-17CSL77 2020-21

9. In one of the pairs of protocols given below, both the protocols can use multiple TCP
connections between the same client and the server. Which one is that?
2015
a. HTTP, FTP
b. HTTP, TELNET
c. FTP, SMTP
d. HTTP, SMTP

Ans: option (a)

Explanation:
FTP uses two TCP connections (one is used for data and another for control informations).

10. Which of the following is TRUE only of XML but NOT HTML? 2008
a It is derived from SGML
b It describes content and layout
c It allows user defined tags
d It is restricted only to be used with web brows
Ans C

Explanation:
SGML (standard generalized markup language)
both xml and html are derivative of SGML
Both xml and html describes layout and content
both are restricted to be used with web browsers
xml allows user defined tags but HTML-4 does not

11. XPath is used to navigate through elements and attributes in

a. XSL document
b. XML document
c. XHTML document
d. XQuery document

Answer: (b)

Dept of CSE, BRCE Page 39

Web Technology Laboratory With Mini Project-17CSL77 2020-21

12. Which of the following is an advantage of putting presentation information in a

separate CSS file rather than in HTML itself?
a. The content becomes easy to manage
b. Becomes easy to make site for different devices like mobile by making separate CSS
files
c. CSS Files are generally cached and therefore decrease server load and network traffic.
d. All of the above

Answer: (d)
13. Which of following statements is/are False? 2015
1. XML overcomes the limitations in HTML
to support a structured way of organizing content.
2. XML specification is not case sensitive while
HTML specification is case sensitive.
3. XML supports user defined tags while HTML
uses pre-defined tags.
4. XML tags need not be closed while HTML
tags must be closed.
a. 2 only
b. 1 only
c. 2 and 4 only
d. 3 and 4 only

Answer: (c)
Explanation:
1.TRUE- XML is a structured way of organizing content.
2.FALSE- XML is CASE SENSITIVE whereas HTML is NOT case sensitive.
3.TRUE- XML facilitates User Defined tag whereas HTML has only Pre-Define tags
4.FALSE- XML tags MUST be closed while HTML tags may NOT be closed.
Consider the three commands : PROMPT, HEAD and RCPT.

Dept of CSE, BRCE Page 40

Web Technology Laboratory With Mini Project-17CSL77 2020-21

14. Which of the following options indicate a correct association of these commands
with protocols where these are used? 2005
a. HTTP, SMTP, FTP
b. FTP, HTTP, SMTP
c. HTTP, FTP, SMTP
d. SMTP, HTTP, FTP

Answer: (b)
Explanation:
PROMPT- Toggles prompting. Ftp prompts during multiple file transfers to allow you to
selectively retrieve or store files //Used for FTP transfers
HEAD- The <head> element can include a title for the document, scripts, styles, meta
information, and more //Used in HTML to transfer data across HTTP protocol
RCPT- You tell the mail server who the recipient of your message is by using the RCPT
command //Related to mail so,SMTP

15. To add a background color for all h1 elements, which of the following HTML syntax
is used ISRO CS 2015
a. h1 { background-color :#FFFFFF}
b. { background-color :#FFFFFF} . h1
c. h1 { background-color :#FFFFFF} . h1(all)
d. h1. all{bgcolor= #FFFFFF}
Answer: (a)
Explanation:
In a web server, ten WebPages are stored with the URLs of the form
http://www.yourname.com/var.html; where, var is a different number from 1 to 10 for each
Webpage. Suppose, the client stores the Webpage with var = 1 (say W1) in local machine,
edits and then tests. Rest of the WebPages remains on the web server. W1 contains several
relative URLs of the form “var.html” referring to the other WebPages.

Dept of CSE, BRCE Page 41

Web Technology Laboratory With Mini Project-17CSL77 2020-21

16. Which one of the following statements needs to be added in W1, so that all the
relative URLs in W1 refer to the appropriate WebPages on the web server?
a. <a.href: “http://www.yourname.com/”, href: “…var.html”>
b. <base href: “http://www.yourname.com/”>
c. <a.href: “http://www.yourname.com/”>
d. <base href: “http://www.yourname.com/”, range: “…var.html”>

Answer: (b)
Explanation:
The tag specifies the base URL/target for all relative URLs in a document.

17. There can be at maximum one element in a document, and it must be inside the
element. UGC NET CS 2014 Dec - III
The behaviour of the document elements in XML can be defined by
a. Using document object
b. Registering appropriate event handlers
c. Using element object
d. All of the above

Answer: (d)
18. Cloaking is a search engine optimization (SEO) technique. During cloaking
ISRO CS 2018
a. Content presented to search engine spider is different from that presented to user’s
browser
b. Content present to search engine spider and browser is same
c. Contents of user’s requested website are changed
d. None of the above

Answer: (a)

Dept of CSE, BRCE Page 42

Web Technology Laboratory With Mini Project-17CSL77 2020-21

19. HTML(Hypertext Markup Language) has language elements which permit certain
actions other than describing the structure of the web document. Which one of the
following actions is NOT supported by pure HTML (without any server or client side
scripting) pages? 2011
a. Embed web objects from different sites into the same page
b. Refresh the page automatically after a specified interval
c. Automatically redirect to another page upon download
d. Display the client time as part of the page

Answer: (d)
20. Consider the following HTML table definition:

The above HTML code would render on

a. (1)

b. (2)

c. (3)

d. (4)

Answer: (c)

Dept of CSE, BRCE Page 43

Web Technology Laboratory With Mini Project-17CSL77 2020-21

VIVA QUESTIONS
1. What is HTML?
2. What is a tag?
3. What is the simplest HTML page?
4. How do I create frames? What is a frameset?
5. How can I include comments in HTML?
6. What is a Hypertext link?
7. What is a DOCTYPE? Which one do I use?
8. Can I nest tables within tables?
9. How do you align a table to the right (or left)?
10. How can I use tables to structure forms?
11. What is the difference between JavaScript and JQuery?
12. What are JavaScript types?
13. How do you convert numbers between different bases in JavaScript?
14. What does isNaN function do?
15. What is negative infinity?
16. What boolean operators does JavaScript support?
17. What are Cascading Style Sheets?
18. What is class?
19. What are different selector forms?
20. What is grouping?
21. What is ID selector?
22. What is contextual selector?
23. What does \ABCD (and \ABCDE) mean?
24. What are the advantages / disadvantages of various style methods?
25. What is property?
26. What is the CSS clear property?
27. What are the necessities of using HTML forms?

Dept of CSE, BRCE Page 44

Web Technology Laboratory With Mini Project-17CSL77 2020-21

28. What are the sequences of steps for each HTTP request from a client to the server?
29. What is XML?
30. What are the advantages of XML?
31. What does "1"+2+4 evaluate to?
32. How about 2+5+"8"?
33. What looping structures are there in JavaScript?
34. How do you create a new object in JavaScript?
35. How do you assign object properties?
36. What’s a way to append a value to an array?
37. What is this keyword?
38. What is an Empty HTML Tag?
39. How do I open a link into a new window?
40. How do I let people download a file from my page?
41. What is PHP?
42. What is $ symbol indicates in PHP.
43. Define Server.
44. Difference b/w client side and server side scripting language.
45. Define MySQL
46. What is selection sort?
47. What is transpose matrix?
48. How to define array in PHP.
49. What is Regular Expression?
50. Where to save PHP files.

Dept of CSE, BRCE Page 45