VISVESVARAYA TECHNOLOGICAL UNIVERSITY
JNANA SANGAMA, BELAGAVI – 590 018
A Report on
WEB TECHNOLOGY AND ITS APPLICATIONS
PRACTICAL ASSESSMENT (18CS63)
Submitted in partial fulfillment of the requirements as a part of the WEB TECHNOLOGY
AND ITS APPLICATIONS PRACTICAL ASSESSMENT of VI semester for the award of
degree of Bachelor of Engineering in Information Science and Engineering, Visvesvaraya
Technological University, Belagavi
Submitted by
SHIVAM KUMAR
1RN18IS098
Faculty In charge
Mr. Santhosh Kumar
Assistant Professor
Dept. of ISE, RNSIT
Department of Information Science and Engineering
RNS Institute of Technology
Channasandra, Dr. Vishnuvardhan Road, R R Nagar Post
Bengaluru – 560 098
2020 – 2021
PROGRAM #1
Write a JavaScript to design a simple calculator to perform the following
operations: sum, product, difference and quotient.
Ans:
<!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")
VII Semester
15CSL77 – WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
Department of ISE, RNSIT
2
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
PROGRAM #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.
Ans:
<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><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>” ) ;
}
document.write( “</table>” ) ;
</script>
</head>
</html>
Output
PROGRAM #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.
Ans
<!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'
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
PROGRAM #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
Ans
<!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++) {
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
PROGRAM #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
Ans
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>
<branch>BRANCH :Mechanical 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;
}
Output:
PROGRAM #6
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
Ans
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:
PROGRAM #7
Write a PHP program to display a digital clock which displays the current
time of the server.
Ans
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:
PROGRAM #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.
Ans:
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
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
if(is_numeric($num1) and is_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
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/>";
}
$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/>";
}
?>
Output
PROGRAM #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.
Ans
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);
}
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
PROGRAM #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(usn varchar(10), name varchar(20),address varchar(20));
Ans
<!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
//The MySQLi functions allows you to access MySQL database servers.
$conn
=
mysqli_connect($servername,
$username,
$password,
$dbname);
// Check connection
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
while($row = $result->fetch_assoc()) array
{
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>";
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>
Output
