Scribd
Upload
127 views32 pages

WT (18CS63) Lab - Manual

The document describes a lab experiment on web technology and applications. It contains 10 sections that involve writing JavaScript, PHP, and XML code to perform tasks like building a basic calculator, displaying output in tables, manipulating text and fonts, searching and sorting data, and developing a mini web application project. Students will complete one question from section 1 and develop a group mini project applying concepts covered in the lab. They must submit a project report including requirements, design, implementation, and testing sections. The goals are for students to design dynamic web pages and understand web development terminology.

Uploaded by

Aarya Suhas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
127 views32 pages

WT (18CS63) Lab - Manual

The document describes a lab experiment on web technology and applications. It contains 10 sections that involve writing JavaScript, PHP, and XML code to perform tasks like building a basic calculator, displaying output in tables, manipulating text and fonts, searching and sorting data, and developing a mini web application project. Students will complete one question from section 1 and develop a group mini project applying concepts covered in the lab. They must submit a project report including requirements, design, implementation, and testing sections. The goals are for students to design dynamic web pages and understand web development terminology.

Uploaded by

Aarya Suhas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Web Technology & Application- 18CS63

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT


[As per Choice Based Credit System (CBCS) scheme]
(Effective from the academic year 2020 -2021)
SEMESTER – VI

CONTENTS
1 Write a JavaScript to design a simple calculator to perform the following operations: 4
sum, product, difference and quotient.
2 Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 8
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 10
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 12
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 15


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 page 18
and to display this count of visitors, with proper headings.

Dept of CSE, SEACET Page 1


Web Technology & Application- 18CS63

7 Write a PHP program to display a digital clock which displays the current time of the 19
server.
8 Write the PHP programs to do the following: 20

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 26
“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 28
using selection sort.

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.

Dept of CSE, SEACET Page 2


Web Technology & Application- 18CS63

2. A team of two or three students must develop the mini project. However during
the examination, each student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include the
following:
a) Introduction
b) Requirement Analysis
c) Software Requirement Specification
d) Analysis and Design
e) Implementation
f) Testing
Course outcomes: The students should be able to:
Design and develop dynamic web pages with good aesthetic sense of designing and
latest technical know-how's.
Have a good understanding of Web Application Terminologies, Internet Tools other
web services.
Learn how to link and publish web sites

Dept of CSE, SEACET Page 3


Web Technology & Application- 18CS63

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


operations: sum, product, difference and quotient.
program1.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")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")

Dept of CSE, SEACET Page 4


Web Technology & Application- 18CS63

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)"/>

Dept of CSE, SEACET Page 5


Web Technology & Application- 18CS63

</td>
<td><input type="button" value="Division" id ="div" onclick="calc(this.id)"/> </td>
</tr>
<tr>
<td>Answer:</td>
<td> <input type="text" id="answer" value="" disabled/></td>
<td colspan="2"><input type="button" value="CLEAR ALL" onclick="cls()"/>
</td>
</tr>
</table>
</body>
</html>

OUTPUT:

Dept of CSE, SEACET Page 6


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 7


Web Technology & Application- 18CS63

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
<!DOCTYPE HTML>
<html>
<head>
<style>
table,tr, td
{
border:solid black;
width: 33%;
text-align: center;
border-collapse:collapse;
background-color:lightblue;
}
table { margin: auto; }
</style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10
WITH THEIR SQUARES AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" +
n*n*n + "</td></tr>" ) ;
}
document.write( "</table>" );
</script>
</head>
</html>

Dept of CSE, SEACET Page 8


Web Technology & Application- 18CS63

Output:

Dept of CSE, SEACET Page 9


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 10


Web Technology & Application- 18CS63

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>

Output:

TEXT SHRINKING

Dept of CSE, SEACET Page 11


Web Technology & Application- 18CS63

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

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

Dept of CSE, SEACET Page 12


Web Technology & Application- 18CS63

if(chr == 'A' || chr == 'E' || chr == 'I' || chr == 'O' || chr == 'U')
break;
}

if( i < str.length )


alert("The position of the left most vowel is "+(i+1));
else
alert("No vowel found in the entered string");
}
</script>
</body>
</html>

Output :

Dept of CSE, SEACET Page 13


Web Technology & Application- 18CS63

Test Cases :

Test
Input Parameters Expected Output Obtained Output Remarks
No.

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

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

Dept of CSE, SEACET Page 14


Web Technology & Application- 18CS63

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-stylesheet type="text/css" href="5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 1SP07CS001</USN>
<name>NAME : SANTHOSH</name>
<college>COLLEGE : SEACET</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>
<student>
<USN>USN : 1SP07IS001</USN>
<name>NAME : MANORANJAN</name>
<college>COLLEGE : SEACET</college>
<branch>BRANCH : Information Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : [email protected]</e-mail>

Dept of CSE, SEACET Page 15


Web Technology & Application- 18CS63

</student>
<student>
<USN>USN : 1SP07EC001</USN>
<name>NAME : CHETHAN</name>
<college>COLLEGE : SEACET</college>

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

Dept of CSE, SEACET Page 16


Web Technology & Application- 18CS63

display:block; margin-left:20px;font-size:14pt; color:Green;


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

Output:

Dept of CSE, SEACET Page 17


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 18


Web Technology & Application- 18CS63

7. Write a PHP program to display a digital clock which displays the current time
of the server.
program7.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>

Output:

Dept of CSE, SEACET Page 19


Web Technology & Application- 18CS63

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>

Dept of CSE, SEACET Page 20


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 21


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 22


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 23


Web Technology & Application- 18CS63

if(($m===$p) and ($n===$q))


{
echo "the addition of matrices is:"."<br/>";
for ($row = 0; $row < 3; $row++)
{
for ($col = 0; $col < 3; $col++)
echo " ".$a[$row][$col]+$b[$row][$col]." ";
echo "<br/>";
}
}

if($n===$p){
echo " The multiplication of matrices: <br/>";
$result=array();
for ($i=0; $i < $m; $i++)
{
for($j=0; $j < $q; $j++)
{

$result[$i][$j] = 0;
for($k=0; $k < $n; $k++)
$result[$i][$j] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row < $m; $row++)
{
for ($col = 0; $col < $q; $col++)
echo " ".$result[$row][$col];
echo "<br/>";
}
}

Dept of CSE, SEACET Page 24


Web Technology & Application- 18CS63

?>

Output:
The first matrix: 1 2 3
456
789
The second matrix: 7 8 9
456
123
The transpose of the first matrix: 1 4 7
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

Dept of CSE, SEACET Page 25


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 26


Web Technology & Application- 18CS63

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:

Dept of CSE, SEACET Page 27


Web Technology & Application- 18CS63

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

Dept of CSE, SEACET Page 28


Web Technology & Application- 18CS63

$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())
{
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;

Dept of CSE, SEACET Page 29


Web Technology & Application- 18CS63

for ( $i = 0 ; $i< ($n - 1) ; $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>";

Dept of CSE, SEACET Page 30


Web Technology & Application- 18CS63

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>

Dept of CSE, SEACET Page 31


Web Technology & Application- 18CS63

Output:

Dept of CSE, SEACET Page 32

You might also like