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
