WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
1. Write a JavaScript to design a simple calculator to perform the following operations:
sum, product, difference and quotient.
/*1.html */
<html>
<head>
<style>
table ,td,th{
border:solid black;
text-align:left;
}
</style>
<script type='text/javascript'>
function calc(ch)
{
var num1=parseFloat(document.getElementById('num1').value);
var num2=parseFloat(document.getElementById('num2').value);
switch(ch)
{
case '+': var sum=num1+num2;
alert("the sum is"+sum);
break;
case '-': vardif=num1-num2 ;
alert("the diff is"+dif);
break;
case '*': varmul =num1*num2;
alert("the mul is"+mul);
break;
case '/': var div=num1/num2 ;
alert("the div is"+div);
break;
}
}
</script>
</head>
<body>
<table>
<caption ><h2> SIMPLE CALCULATOR </h2></caption>
<tr><td> first number</td><td><input type="text" id ="num1"/></td>
<td>second number</td><td><input type="text" id="num2"/></td></tr>
Dept of CSE ,Dr TTIT.KGF 1
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
<tr><td><input type="button" name ="ADD" value ='+'
onclick="calc('+')"/></td>
<td><input type="button" name ="SUB" value ='-'
onclick="calc('-')"/></td>
<td><input type="button" name ="MUL" value ='*'
onclick="calc('*')"/></td>
<td><input type="button" name ="DIV" value ='/'
onclick="calc('/')"/></td></tr>
</table>
</body>
</html>
Output:
Dept of CSE ,Dr TTIT.KGF 2
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10and
outputs HTML text that displays the resulting values in an HTML table format.
<*2.html>
<!DOCTYPE HTML>
<html>
<head>
<style>
table, tr, td ,th {
border:solid black;
border-collapse:collapse;
}
</style>
<script>
document.write ("power table");
document.write ("<table><tr><th> Number </th><th> square </th><th>
cube</th></tr>");
for(vari=0;i<=10;i++)
{
document.write(" <tr><td>"+ i+"</td><td>"+ i*i +"</td><td>"+
i*i*i+"</td></tr>");
}
document.write(" </table>");
</script>
</head>
</html>
Dept of CSE ,Dr TTIT.KGF 3
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
Output:
Dept of CSE ,Dr TTIT.KGF 4
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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() {
Dept of CSE ,Dr TTIT.KGF 5
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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 ,Dr TTIT.KGF 6
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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
/* 4a.html */
<html>
<body>
<script type="text/javascript">
varch =prompt("enter the string ","");
varpos=ch.search(/[aeiou]/);
if (pos>0)
document.write("the left most vowel appers in postion",pos,"<br/>");
else
document.write("vowel not found <br/>");
</script>
</body>
</html>
Dept of CSE ,Dr TTIT.KGF 7
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
Output:
/* 4b.html*/
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
varstr =prompt("enter the number ","");
varrev,sum=0,num;
num=parseInt(str);
while(num!=0)
{
rev=num%10;
sum=sum*10+rev;
num=parseInt(num/10);
}
alert("the reversr of" + str + " is " + sum + "\n");
</script>
</body>
</html>
Dept of CSE ,Dr TTIT.KGF 8
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
Output :
Dept of CSE ,Dr TTIT.KGF 9
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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
3students. Create a CSS style sheet and use it to display the document.
/* 5.xml*/
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="4.css"?>
<students>
<h1>vtu students Description</h1>
<vtu>
<usn> USN:1GV15CS001</usn>
<name>NAME:Asha</name>
<college>COLLEGE:DRTTIT</college>
<branch>BRANCH:CSE</branch>
<YOJ> YEAR:2015</YOJ>
<email>EMAIL:[email protected]</email>
</vtu>
<vtu>
<usn> USN: 1GV15CS029</usn>
<name>NAME: Nisha </name>
<college>COLLEGE:DRTTIT</college>
<branch>BRANCH:CSE</branch>
<YOJ> YEAR:2015</YOJ>
<email>EMAIL:[email protected]</email>
</vtu>
<vtu>
<usn> USN: 1GV15CS060</usn>
<name>NAME:Tara</name>
<college>COLLEGE:DRTTIT</college>
<branch>BRANCH:CSE</branch>
<YOJ> YEAR:2015</YOJ>
<email>EMAIL:[email protected]</email>
</vtu>
</students>
Dept of CSE ,Dr TTIT.KGF 10
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
/* 4.css*/
h1{ display:block;font-size:15pt;font-weight:bold;}
usn{display:block;color:blue;font-style:italic;}
name{display:block;color:red;font-style:italic;}
college{display:block;color:green;font-style:italic;}
branch{display:block;color:purple;font-style:italic;}
YOJ{display:block;color:blue;font-style:italic;}
email{display:block;color:yellow;font-style:italic;}
Output:
Dept of CSE ,Dr TTIT.KGF 11
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
6. Write a PHP program to keep track of the number of visitors visiting the web pageand to
display this count of visitors, with proper headings.
/*6.php*/
<?php
print"<h3> Refresh page</h3>";
$name="count.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:
Dept of CSE ,Dr TTIT.KGF 12
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
7. Write a PHP program to display a digital clock which displays the current time of the server.
/*7.php*/
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="refresh" content="1"/>
<style>
p
{
color:white;
font-size:50px;
position:absolute;
top:25%%;
left:35%;
}
body{background-color:black;}
</style>
<P><?php echo date("h:i:s A");?></p>
</head>
Output:
Dept of CSE ,Dr TTIT.KGF 13
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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.
/* simple calculator*/
<html>
<head>
<style>
table ,td,th{
border:solid black;
text-align:left;
}
</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>
<tr><td>second number</td><td><input type=text" name="num2"/></td>
<tr><td>select operation </td>
<td><select name="op">
<option> select operation</option>
<option value="+">Add</option>
<option value="-">sub</option>
<option value="*">Mul</option>
<option value="/">Div</option>
</select>
</td></tr>
<tr><td clospan="2"><input type="submit" name="pop" value="perform
operation"/></td></tr>
<?php
if(isset($_POST['pop']))
{
$num1=$_POST['num1'];
$num2=$_POST['num2'];
$ch=$_POST['op'];
Dept of CSE ,Dr TTIT.KGF 14
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
switch($ch)
{
case '+': echo"<tr><td>addtion</td><td>
<p>".($num1+$num2)."</p></td>";
break;
case '-': echo"<tr><td> subtraction</td>
<td><p>".($num1-$num2)."</p></td>";
break;
case '*': echo"<tr><td> Multiplication</td><td>
<p>".($num1*$num2)."</p></td>";
break;
case '/': echo"<tr><td> Division</td><td>
<p>".($num1/$num2)."</p></td>";
break;
}
echo"</table>";
}
?>
</body>
</html>
Output:
Dept of CSE ,Dr TTIT.KGF 15
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
/* Matrix Transpose, Multiplication and Addition */
<?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/>";
}
if(($m==$p) and($n==$q))
{
echo"the addition of matrix is :"."<br/>";
for($row=0;$row<3;$row++){
for($col=0;$col<3;$col++)
echo" ".$a[$row][$col]+$b[$row][$col]." ";
echo"<br/>";
}
}
Dept of CSE ,Dr TTIT.KGF 16
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
if($n==$p)
{
echo"the Multiplication of matrix is :"."<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/>";
}
}
?>
Output:
the first matrix:
123
456
789
the second matrix:
789
456
123
Dept of CSE ,Dr TTIT.KGF 17
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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 ,Dr TTIT.KGF 18
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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 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.
/*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 ,Dr TTIT.KGF 19
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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 ,Dr TTIT.KGF 20
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
10.Write a PHP program to sort the student records which are stored in the database using
selection sort.
/* 10.php*/
<!DOCTYPE html>
<html>
<body>
<style>
table ,td,th
{
border:solid black;
border-collapse:collapse;
}
</style>
<?php
$link=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("weblab");
$var=mysql_query("SELECT * FROM student");
echo"<br>";
echo "<center> BEFORE SORTING </center>";
echo"<table border='2'>";
echo"<tr>";
echo"<th> USN </th><th> NAME </th></tr>";
//if($var->num_rows>0)
$a[]=array();
while($row=mysql_fetch_array($var))
{
echo"<tr>";
echo"<td>".$row["usn"]."</td>";
echo"<td>".$row["name"]."</td></tr>";
array_push($a,$row["usn"]);}
//else
// echo "Table is Empty";
echo"<table>";
$n=count($a);
$b=$a;
Dept of CSE ,Dr TTIT.KGF 21
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
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[]=array();
$var=mysql_query("SELECT * FROM student");
while($row=mysql_fetch_array($var))
{
for($i=0;$i<$n-1;$i++)
{
if($row["usn"]==$a[$i])
{
$c[$i]=$row["name"];
}
}
}
echo"<br>";
echo"<center> AFTER SORTING <CENTER>";
echo"<table border='2'>";
echo"<tr>";
echo"<th> USN </th><th> NAME </th></tr>";
for($i=0;$i<$n-1;$i++)
{
echo"<tr>";
echo"<td>" .$a[$i]."</td>";
echo"<td>" .$c[$i]."</td></tr>";
}
echo "</table>";
mysql_free_result($var);
mysql_close($link);
Dept of CSE ,Dr TTIT.KGF 22
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
?>
</body>
</html>
Output:
Dept of CSE ,Dr TTIT.KGF 23
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
Appendix
Starting HTTP server
# service httpd start
Starting MYSQL Database
# service mysqld start
Path for HTML program
/var/www/html
Path for php program
/var/www/cgi-bin
MYSQL Database Execution
#mysql
Mysql> create database weblab;
Mysql> use weblab;
Mysql> create table student (usnvarchar(10),name varchar(20));
Mysql> insert into student values(‘1gv15cs001’,’neha’);
Mysql> use mysql;
Mysql>GRANT SELECT,INSERT,UPDATE,DELETE ON weblab.* TO apache@loaclhost IDENTIFIED
BY ‘ LampIsCool’;
Mysql> exit
Dept of CSE ,Dr TTIT.KGF 24
