Scribd
Upload
62 views27 pages

Web Lab Manual

The document describes 5 experiments conducted as part of a Web Technology lab course. The first experiment involves building a simple calculator app using JavaScript. The second calculates squares and cubes of numbers from 1 to 10 and displays them in an HTML table. The third experiment increases and decreases font size of text over time. The fourth finds the position of the first vowel in a string and reverses the digits of a number. The fifth creates an XML document to store student details and uses CSS to style its display.

Uploaded by

guru kiran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views27 pages

Web Lab Manual

The document describes 5 experiments conducted as part of a Web Technology lab course. The first experiment involves building a simple calculator app using JavaScript. The second calculates squares and cubes of numbers from 1 to 10 and displays them in an HTML table. The third experiment increases and decreases font size of text over time. The fourth finds the position of the first vowel in a string and reverses the digits of a number. The fifth creates an XML document to store student details and uses CSS to style its display.

Uploaded by

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

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

Exp1: Simple Calculator using Java script


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

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

Dept. of CSE, MSEC Page 1


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

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+val
2;

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"

Dept. of CSE, MSEC Page 2


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

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:

Dept. of CSE, MSEC Page 3


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

Exp 2: Squares and Cubes of number from 1 to 10


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

Dept. of CSE, MSEC Page 4


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

document.write( "</table>" ) ;

</script>

</head>

</html>

Output:

Dept. of CSE, MSEC Page 5


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

Experiment 4

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.

Program 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");
function inTimer() {

Dept. of CSE, MSEC Page 6


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

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>

Output:

Dept. of CSE, MSEC Page 7


Web Technology Lab With Mini Project – 15CSL77 2018-2019
T
E
X
T

S
H
R
I
N
K
I
N
G

Dept. of CSE, MSEC Page 8


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

Exp 4: HTML5 and JavaScript : position in the string of the left-


most vowel and number with its digits in the reverse order
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

Program 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;
num = parseInt(num/10);
rev = rev * 10 + remainder;

Dept. of CSE, MSEC Page 9


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

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 :

Dept. of CSE, MSEC Page 10


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

Experiement 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.
Program 5.xml

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

<!DOCTYPE HTML>

<html>

<head>

<h1> STUDENTS DESCRIPTION </h1>

</head>
<students>
<student>
<USN>USN : 1ME15CS001</USN>
<name>NAME : SANVI</name>
<college>COLLEGE : MSEC</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 : MANORANJAN</name>
<college>COLLEGE : MSEC</college>
<branch>BRANCH : Information Science and Engineering</branch>

Dept. of CSE, MSEC Page 11


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

<year>YEAR : 2015</year>
<e-mail>E-Mail : [email protected]</e-mail>
</student>

Dept. of CSE, MSEC Page 12


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

Program 5.css

student{

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

} display:block; margin-left:10px;font-size:14pt; color:Red;


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

Dept. of CSE, MSEC Page 13


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

Sample Output:

STUDENTS DESCRIPTION

Dept. of CSE, MSEC Page 14


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

Experiment 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.
Program 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];

?>

Sample Output:

REFRESH PAGE
Total number of views: 10

Dept. of CSE, MSEC Page 15


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

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

Sample Output:

Dept. of CSE, MSEC Page 16


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

Experiment 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.
Program 8a.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"

Dept. of CSE, MSEC Page 17


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

value="calculate"></td></tr>

<tr><td>SecondNumber:</td><td><inputtype="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) andis_numeric($num1) )
{
echo "<tr><td> Addition :</td><td><p>".($num1+$num2)."</p></td>";
echo "<tr><td> Subtraction :</td><td><p> ".($num1-$num2)."</p></td>";
echo "<tr><td> Multiplication
:</td><td><p>".($num1*$num2)."</p></td>";

echo "<tr><td>Division :</td><td><p> ".($num1/$num2)."</p></td>";


echo "</table>";
}

else

echo"<script type='text/javascript' > alert(' ENTER


VALID NUMBER');</script>";
}
}
?>

</body>

</html>

Dept. of CSE, MSEC Page 18


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

Sample Output:

Dept. of CSE, MSEC Page 19


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

EXPERIMENT 8B
<?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/>";

Dept. of CSE, MSEC Page 20


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

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

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();
Dept. of CSE, MSEC Page 21
Web Technology Lab With Mini Project – 15CSL77 2018-2019

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/>";
}
}
?>
Sample Output:
The first matrix:
123
456
789
The second matrix:
789
456
123
The transpose of the first matrix:
147
258
369
The addition of matrices is:
8 10 12
8 10 12
8 10 12

the multiplication of matrices:


18 24 30
54 69 84
90 114 138

Dept. of CSE, MSEC Page 22


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

Experim

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 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 element1 of
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"

Program 9.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);

Dept. of CSE, MSEC Page 23


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

}
foreach($states1 as $state) {
if(preg_match('/^M.*s$/', ($state)))
$statesArray[2] = ($state);
}
foreach($states1 as $state){
if(preg_match('/a$/', ($state)))
$statesArray[3] = ($state);
}
echo "<br><br>Resultant Array :<br>";
foreach ( $statesArray as $array => $value )
print("STATES[$array]=$value<br>");
?>
Sample Output:

Dept. of CSE, MSEC Page 24


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

Exp 10: PHP - program to sort the student records using selection
sort.
Write a PHP program to sort the student records which are stored in the database
using selection sort.
Aim:
To write a PHP - program to sort the student records 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, MSEC Page 25


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

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

Dept. of CSE, MSEC Page 26


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

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


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

Sample Output:

USN NAME ADDRESS BEFORE SORTING


1ME14 CHANDANA MANDYA
1ME15 ARUN HASSAN
1ME16 ABHAY BENGALURU
1ME13 SANJAY KOLAR

AFTER SORTING
USN NAME ADDRESS
1ME16 ABHAY BENGALURU
1ME15 ARUN HASSAN
1ME14 CHANDANA MANDYA
1ME13 SANJAY KOLAR

Dept. of CSE, MSEC Page 27

You might also like