VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belgavi-590018

Practical Assessment ReportOn

“Web Technology and It’s Applications”

Submitted in partial fulfillment of the Practical Assessment

requirement for Sixth Semester
Of

BACHELOR OF ENGINEERING
In
COMPUTER SCIENCE & ENGINEERING

Submitted By
Sattvik(USN:1TJ18CS009)

Under the Guidance Of

Prof. PRIYANKA M R
Assistant Professor
Dept. of CSE
T. JOHN INSTITUTE OF TECHNOLOGY
(Affiliated to Visvesvaraya Technological University)

No. 88/1, Gottigere, Bannerghatta Road, Bengaluru-560083

2020-21
 (Affiliated to Visvesvaraya Technological University)
Approved by AICTE, Govt. of India, New Delhi.

#88/1, Gottigere, Bannerghatta Road, Bengaluru-560083

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING CERTIFICATE

Certified that the Practical Assessment Report entitled "Web Technology and It’s
Applications” carried outby “Sattvik (1TJ18CS009)”, bonafide student of T. John Institute
of Technology in partial fulfillment for sixth semester of Bachelor of Engineering in
Computer Science and Engineering of Visvesvaraya Technological University, Belagavi,
during the year 2020-21. It is certified that all corrections/suggestions indicated for Internal
Assessment have been incorporated in the report deposited in the departmental library.
The Practical Assessment Report has been approved as it satisfies the academic
requirements inrespect of lab practical work prescribed for the said degree.

Faculty-in charge HOD

Prof. Priyanka M R Prof. Suma R

Assistant Professor Assoc. Professor & Head
DECLARATION

“Sattvik(USN:1TJ18CS009)”, sixth semester student of CSE declare that the Practical

Assessment Report entitled “Web Technology and It’s Applications” has beencarried
out and submitted by me in partial fulfillment of sixth semester of Bachelor of
Engineering in Computer Science and Engineering, Visvesvaraya Technological
University, Belagavi during the academic year 2020-21. I also declare that, to the best
of my knowledge and belief, the work reported here is accepted and satisfied.

Sattvik(USN:1TJ18CS009
)
ACKNOWLEDGEMENT

The Practical Assessment Report on “Web Technology and It’s Applications” is the
outcome of guidance, moral support and knowledge imparted on me, throughout my
work. For this I acknowledge and express immense gratitude to all those who have
guided and supported me during the preparation of this lab practical project report.

I take this opportunity to express my gratefulness to everyone who has extended their
support for helping me in the lab practical report completion.

First and foremost, I thank Dr. Thomas P. John, Chairman of T. John Group of
Institutions and Dr. P. Suresh Venugopal, Principal, T. John Institute of Technology for
giving me this opportunity to study in this prestigious institute and also providing me
with best of facilities.

I would like to show my greatest appreciation to Prof. Suma R, HOD, Dept., of CSE and
Prof. Priyanka M R, Faculty in-charge, Dept., of CSE for constantly guiding me
throughout the lab.

I would also like to thank to all teaching and non-teaching staff of Computer Science
and Engineering Department for directly or indirectly helping me in completion of lab
practical.

Lastly and most importantly I convey my gratitude to my parents who have been the
source of inspiration and also for instrumental help in successful completion of project.
Sattvik(USN:1TJ18CS009)
ABSTRACT

The idea behind the lab practical is to develop the different types create basic
operationusing the HTML, CSS, JAVA SCRIPT and PHP. And testing the knowledge gain
by through the subject web technology and application.

The first program is to demonstrate the operation of basic calculator. The second
program is to show the text growing and shrinking after certain condition. The third
program is to demonstrate the few operation which can be performed on the string.
Fourth program is to show the cube and square of the number from 1 to 10.Fifth
program is to show the database type of application to demonstrate using XML. Sixth
program shows the number of visitors on the page. Seventh program shows the digital
clock. Eighth program shows the calculator and matrix operations. Ninth program
shows the different string operation. Tenth program shows the storing student record
into database and sorting it usingselection sort.
TABLE OF CONTENTS

SL NO. TITLE PAGE

NO

1. Simple Calculator 1
2. Cube and square 3

3. Text Growing and Shrinking 5

4. String Operation 6
5. Student database 7
6. Count visitors 10

7. Digital Clock 11

8. Calculator and Matrix 12

9. String operation 13

10. Sorting of students 15

1.Write a JavaScript to design a simple calculator to perform the
following operations: sum, product, difference and quotient.

<!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;
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>
 [Type the document title]

2.Write a javascript that calculates the squares and cubes

numbers from 0 to 10 and outputs HTML text that displays the resulting
values in the HTML table format.

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

Dept. of CSE,TJIT 2020-21 Page 1

 [Type the document title]

Dept. of CSE,TJIT 2020-21 Page 2

 [Type the document title]

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.

<!DOCTYPE HTML>
<html>
<head>
<style>
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var var1 = setInterval(inTimer, 1000);
var fs = 5;
var ids = document.getElementById("demo");
function inTimer() {
ids.innerHTML = 'TEXT GROWING';
ids.setAttribute('style', "font-size: " + fs + "px; color: red");
fs += 5;
if(fs >= 50 ){
clearInterval(var1);
var2 = setInterval(deTimer, 1000);
}
}

function deTimer() {
fs -= 5;
ids.innerHTML = 'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px; color: blue");
if(fs === 5 ){
clearInterval(var2);
}
}
</script>
Dept. of CSE,TJIT 2020-21 Page 3
 [Type the document title]

</body>
</html>

Dept. of CSE,TJIT 2020-21 Page 4

 [Type the document title]

4.Develop and demonstrate a HTML5 file that includes javascript that uses function
for the following problems :
a)Parameter: A string
b)output:The position of the string of the left most vowel
c)Parameter : A number
d)output:the number with its digits in the reverse order.

<?php
// Iterative function to
// reverse digits of num
function reversDigits($num)
{
$rev_num = 0;
while($num > 1)
{
$rev_num = $rev_num * 10 +
$num % 10;
$num = (int)$num / 10;
}
return $rev_num;
}
// Driver Code
$num = 4562;
echo "Reverse of no. is ",
reversDigits($num);
// This code is contributed by aj_36
?>
<?php
// Iterative function to
// reverse digits of num
function reversDigits($num)
{
$rev_num = 0;
while($num > 1)
{
$rev_num = $rev_num * 10 +
$num % 10;
$num = (int)$num / 10;
Dept. of CSE,TJIT 2020-21 Page 5
}
return $rev_num;
}
// Driver Code
 [Type the document title]

<?php
// Iterative function to
// reverse digits of num
function reversDigits($num)
{
$rev_num = 0;
while($num > 1)
{
$rev_num = $rev_num * 10 +
$num % 10;
$num = (int)$num / 10;
}
return $rev_num;
}
// Driver Code
$num = 4562;
echo "Reverse of no. is ",
reversDigits($num);
// This code is contributed by aj_36
?>
<?php
// Iterative function to
// reverse digits of num
function reversDigits($num)
{
$rev_num = 0;
while($num > 1)
{
$rev_num = $rev_num * 10 +
$num % 10;
$num = (int)$num / 10;
}
return $rev_num;
}
// Driver Code
$num = 4562;
echo "Reverse of no. is ",
reversDigits($num);
// This code is contributed by aj_36
?>
<?php
// Iterative function to
// reverse digits of num
function reversDigits($num)
{
$rev_num = 0;
while($num > 1)
{
Dept. of CSE,TJIT
$rev_num = $rev_num * 10 + 2020-21 Page 6
$num % 10;
$num = (int)$num / 10;
 [Type the document title]

<script>
var a = prompt("Enter The Query"),b = parseInt(a),z=0;
if(b) {
while(b>0)
var r= b%10, z= z*10+r, b = Math.floor(b/10);
document.write("Entered Query : "+ a +"<br> Given Number In Reverse Order : "+ z);
}
else {
a = a.search(/[aeiouAEIOU]/);
document.write("The First Occurence Of Vowel is at : "+ (a+1));
}
</script>

<?php
// Iterative function to
// reverse digits of num
function reversDigits($num)
{
$rev_num = 0;
while($num > 1)
{
$rev_num = $rev_num * 10 +
$num % 10;
$num = (int)$num / 10;
}
return $rev_num;
}
// Driver Code
$num = 4562;
Dept. "Reverse
echo of CSE,TJIT of no. is ", 2020-21 Page 7
reversDigits($num);
// This code is contributed by aj_36
?>
 [Type the document title]

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

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="PROG5.css"?>

<STUDENTDATA>

<STUDENT>
<USN>USN : 1TJ18CS039</USN>
<NAME>NAME : HARI PRASAD G</NAME>
<COLLEGE>COLLEGE : TJIT</COLLEGE>
<BRANCH>BRANCH :CSE</BRANCH>
<YEAR>YEAR : 2018</YEAR>
<EMAIL>E-MAIL : phari7226@gmail.com</EMAIL>
</STUDENT>

<STUDENT>
<USN>USN : 1TJ18CS030</USN>
<NAME>NAME : DEEPAK</NAME>
<COLLEGE>COLLEGE : TJIT</COLLEGE>
<BRANCH>BRANCH :CSE</BRANCH>
<YEAR>YEAR : 2018</YEAR>
<EMAIL>E-MAIL :deepak.d08@gmail.com</EMAIL>
</STUDENT>

<STUDENT>
<USN>USN : 1TJ18CS022/USN>
<NAME>NAME : CHANAKYA</NAME>
<COLLEGE>COLLEGE :TJIT</COLLEGE>
<BRANCH>BRANCH :CSE</BRANCH>
<YEAR>YEAR : 2018</YEAR>
<EMAIL>E-MAIL : chanakya.server@gmail.com</EMAIL>
Dept. of CSE,TJIT 2020-21 Page 8
 [Type the document title]

</STUDENT>

</STUDENTDATA>

Dept. of CSE,TJIT 2020-21 Page 9

 [Type the document title]

Dept. of CSE,TJIT 2020-21 Page 10

 [Type the document title]

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.

<?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,TJIT 2020-21 Page 11

 [Type the document title]

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

<!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,TJIT 2020-21 Page 12

 [Type the document title]

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.
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
width: 35%;
text-align: center;
background-color: lightgray;
}
table { margin: auto; }
input,p { text-align:right; }
</style>
</head>

<body>
<form method="post" action="prog8a.php">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>
<tr>
<td>First Number:</td><td><input type="text" name="num1" /></td>
<td rowspan="2"><button type="submit" name="submit" value="calculate">Calculate</td></tr>
<tr>
<td>Second Number:</td><td><input type="text" name="num2"/></td>
</tr>
</form>

<?php
if(isset($_POST['submit'])) // it checks if the input submit is filled
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
if(is_numeric($num1) and is_numeric($num2) )
{
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> alert(' ENTER VALID NUMBER');</script>";
}
}

Dept. of CSE,TJIT 2020-21 Page 13

 [Type the document title]

?>
</body>
</html>

Dept. of CSE,TJIT 2020-21 Page 14

 [Type the document title]

Dept. of CSE,TJIT 2020-21 Page 15

 [Type the document title]

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.

<html>
<body>
<?php
$states = "Mississippi Alabama Texas Massachusetts Kansas";
$b = explode(' ',$states);
echo "<br>ORIGINAL ARRAY :<br>";
foreach ( $b as $i => $value )
echo "states[$i] = $value<br>";
foreach ($b as $c)
{
$n = strlen($c);
if($c[$n-1]=='s' && $c[$n-2]=='a' && $c[$n-3]=='x') $d[0] = $c;
if($c[0]=='K' && $c[$n-1]=='s') $d[1] = $c;
if($c[0]=='M' && $c[$n-1]=='s') $d[2] = $c;
if($c[$n-1]=='a') $d[3] = $c;
}
echo "<br>RESULTANT ARRAY :<br>";
for ($i=0; $i < count($d); $i++)
echo "statesList[$i] = $d[$i]<br>";

Dept. of CSE,TJIT 2020-21 Page 16

 [Type the document title]

?>
</body>
</html>

Dept. of CSE,TJIT 2020-21 Page 17

 [Type the document title]

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

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

// 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()){

Dept. of CSE,TJIT 2020-21 Page 18

 [Type the document title]

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;

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>";
Dept. of CSE,TJIT 2020-21 Page 19
 [Type the document title]

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>";
$conn->close();
?>
</body>
</html>

Dept. of CSE,TJIT 2020-21 Page 20

 [Type the document title]

Dept. of CSE,TJIT 2020-21 Page 21

 [Type the document title]

Dept. of CSE,TJIT 2020-21 Page 22