Bahubali College of Engineering, Shravanabelagola materials/WTA Lab Manual.pdf · Bahubali College of Engineering, Shravanabelagola Yashpal Gupta S, Dept ISE, BCE .display input {

Bahubali College of Engineering, Shravanabelagola

Yashpal Gupta S, Dept ISE, BCE



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

difference and quotient. Prog1.html

<!DOCTYPE html>

<html>

<head>

<script>

function c(val)

{

document.getElementById("d").value=val;

}

function v(val)

{

document.getElementById("d").value+=val;

}

function e()

{

try

{

c(eval(document.getElementById("d").value))

}

catch(e)

{

c('Error')

}

}

</script>

<style>

body

{

background-color:tan'

}

.box

{

background-color:#3d4543;

height:300px;

width:250px;

border-radius:10px;

position:relative;

top:100px;

left:500px;

}

.display

{

background-color:#222;

width:210px;

position:relative;

left:15px;

top:20px;

height:40px;

}



.display input

{

position:relative;

left:0.2px;

top:0px;

height:35px;

color:black;

background-color:#bccd95;

font-size:21px;

text-allign:right;

}

.keys

{

position:relative;

top:15px;

}

.button

{

width:40px;

height:30px;

border:none;

border-radius:8px;

margin-left:17px;

cursor:pointer;

}

.button1

{

width:180px;

height:30px;

border:none;

}

.button.gray

{

color:white;

background-color:#6f6f6f;

}

.button.pink

{

color:black;

background-color:#ff4561;

}

.button.black

{

color:white;

background-color:#303030;

}

.button.orange

{

color:black;

background-color:orange;



}

p

{

line-height:10px;

}

</style>

</head>

<body>

<div class="box">

<div class="display">

<input type="text" readonly size="18" id="d">

</div>

<div class="keys">

<p><input type="button" value="simple calculator" class="button1">

<input type="button" class="button pink" value="/"onclick='v("/")'></p>

<p><input type="button" class="button black" value="7" onclick='v("7")'>

<input type="button" class="button black" value="8" onclick='v("8")'>


<input type="button" class="button pink" value="*" onclick='v("*")'></p>




<input type="button" class="button pink" value="-" onclick='v("-

")'</p>




<input type="button" class="button pink" value="+" onclick='v("+")'></p>


<input type="button" class="button black" value="." onclick='v(".")'>

<input type="button" class="button black" value="c" onclick='c(" ")'>

<input type="button" class="button orange" value="=" onclick='e( )'></p>

</div>

</div>

</body>

</html>



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. Prog2.html

<?xml version="1.0" encoding="atf-8"?>

<html xmlns="http:??w3.org/1999/xhtml">

<head>

<title>SQUARE</title>

</head>

<body bgcolor="pink">

<center><h1>program to generate squares and cudes from 0 to 10</h1>

</center>

<style>

table

{

height:300px;

width: 600px;

position:relative;

top:100px;

left:300px;

}

</style>

<table border=3>

<tr bgcolor='red'>

<th>Numbers</th>

<td id="mo0"></td>

<td id="mo1"></td>

<td id="mo2"></td>

<td id="mo3"></td>

<td id="mo4"></td>

<td id="mo5"></td>

<td id="mo6"></td>

<td id="mo7"></td>

<td id="mo8"></td>

<td id="mo9"></td>

<td id="mo10"></td>

</tr>

<tr bgcolor='blue'>

<th>Squares</th>

<td id="demo0"></td>











</tr>

<tr bgcolor="green">

<th>Cubes</th>



<td id="emo0"></td>

<td id="emo1"></td>

<td id="emo2"></td>

<td id="emo3"></td>

<td id="emo4"></td>

<td id="emo5"></td>

<td id="emo6"></td>

<td id="emo7"></td>

<td id="emo8"></td>

<td id="emo9"></td>

<td id="emo10"></td>

</tr>

</table>

<script type="text/javascript">

for(var i=0;i<=10;i++)

{

ref="mo"+i;

document.getElementById(ref).innerHTML=i;

}


{

ref="demo"+i;

document.getElementById(ref).innerHTML=i*i;

}


{

ref="emo"+i;

document.getElementById(ref).innerHTML=i*i*i;

}

</script>

</body>

</html>



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. Prog3.html

<!DOCTYPE HTML>

<html>

<style>

#animate

{

fontSize:5pt;

color:red;

}

</style>

<body>

<p>

<button onclick="myMove()">Click Me</button>

</p>

<div id="animate">B.C.E</div>

<script>

function myMove()

{

var size=5;

var id=setInterval(frame,100);

function frame()

{

if(size==50)

{

clearInterval(id);

var id1=setInterval(frame1,100);

}

else

{

document.getElementById("animate").innerHTML="Text-Growing";

size++;

var s=size+"pt";

document.getElementById("animate").style.fontSize=s;

document.getElementById("animate").style.color="red";

}

}

function frame1()

{

if(size==5)

clearInterval(id1);

else

{

document.getElementById("animate").innerHTML="Text-Shrinking";

size--;

var s=size+"pt";

document.getElementById("animate").style.fontSize=s;

document.getElementById("animate").style.color="blue";

}

}

}

</script>

</body>



</html>

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 Prog4a.html

<!DOCTYPE HTML>

<?xml version="1.0" encoding="UTF-8"?>

<html>

<script type="text/javascript">

function str_vowel()

{

var str=prompt("Enter the string\n"," ");

for(var i=0;i<str.length;i++)

{

if(str.charAt(i)=='a' || str.charAt(i)=='e' || str.charAt(i)=='i'||

str.charAt(i)=='o' || str.charAt(i)=='u' ||

str.charAt(i)=='A' || str.charAt(i)=='E' || str.charAt(i)=='I' ||

str.charAt(i)=='O' || str.charAt(i)=='U')

{

document.write("The entered string is:" +str+ "<br/>");

document.write("The left most vowel is:" +str.charAt(i)+ "<br/>");

var pos=i+1;

document.write("The position of the left most vowel " +str.charAt(i)+

" is: " +pos+ "<br/>");

exit;

}



}

document.write("The entered string is:" +str+ "<br/>");

document.write("The entered string has no vowels");

}

</script>

</head>

<body style="background-color:green" onload="str_vowel()";>

</body>

</html>

c.Parameter: A number

d.Output: The number with its digits in the reverse order Prog4b.html

<!DOCTYPE>

<html>

<head>

<style>

.box

{


height:100px;

width:200px;

border:10;

border-color:black;

border-width:10px;

border-radius:50px;

position: relative;

top: 20px;

left: 40px;

text-align:center;

}

.box button

{

border-radius:50px;

background-color:white;

}

.box input

{

border-radius:50px;


color:red;

padding:6px;



}

</style>

<script>

function palin()

{

var a,no,temp=0;

no = Number(document.getElementById("no_input").value);

while(no>0)

{

a = no%10;

no = parseInt(no/10);

temp = temp*10+a;

}

alert(temp);

}

</script>

</head>

<body>

<div class="box">

Enter any Number : <input type="text" id="no_input"/><br/><br/>

<button onclick="palin()">Check</button><br/><br/>

</div>

</body>

</html>

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.

pgm5.xml

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE student [

<!ELEMENT student-information (ad+)>

<!ELEMENT ad (usn,name,college,branch,year,email)+>

<!ELEMENT usn (#PCDATA)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT college (#PCDATA)>

<!ELEMENT branch (#PCDATA)>

<!ELEMENT year (#PCDATA)>

<!ELEMENT email (#PCDATA)>

<!ELEMENT label (email|year|branch|college|name|usn)*>

<!ELEMENT h1 (#PCDATA)>



<!ELEMENT h2 (#PCDATA)>

]>

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

<student-information>

<h1>Student 1</h1>

<ad> <label> USN: <usn>4BB16CS401</usn></label>

<label> NAME: <name>kalpana</name></label>

<label> COLLEGE: <college>BCE</college></label>

<label> BRANCH: <branch>CSE</branch></label>

<label>YEAR: <year>2018</year></label>

<label> EMAIL:

<email>[email protected]</email></label>

</ad>

<h1>Student 2</h1>

<ad> <label> USN: <usn>4BB16CS402</usn></label>

<label> NAME: <name>priyanka</name></label>


<label> BRANCH: <branch>CSE</branch></label>


<label> EMAIL: <email>[email protected]</email></label>

</ad>

<h1>Student 3</h1>

<ad> <label> USN: <usn>4BB16IS401</usn></label>

<label> NAME: <name>sonali</name></label>


<label> BRANCH: <branch>ISE</branch></label>


<label> EMAIL: <email>[email protected]</email></label>

</ad>

</student-information>

pgm5.css

student-information

{

background-color:pink;

}

ad

{

display:block;

font-size:20px;

font-family:"times new roman";

color:blue;

background-color:blue;

padding:25px;

color:red;

}



label

{

display:block;

font-size:20px;

font-family:"Arial";

color:purple;

background-color:yellow;

}

usn

{

font-size:15px;

color:pink;

font-weight:bold;

}

name

{

font-size:15px;

color:black;

font-weight:700;

}

college

{

font-size:15px;

color:lime;

font-weight:700;

}

branch

{

font-size:15px;

color:orange;

font-weight:700;

}

year

{

font-size:15px;

color:brown;

font-weight:700;

}

email

{

font-size:15px;

color:green;

font-weight:700;

}

h1



{

color:purple;

font-weight:900;

font-size:20px;

background-color:lime;

font-weight:200px;

}

h2

{

color:pink;

font-size:20px;

background-color:yellow;

font-weight:700px;

}

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.

pgm6.php

<?php

SESSION_START();

if(isset($_SESSION[' ']))

$_SESSION[' ']=$_SESSION[' ']+1;

else

$_SESSION[' ']=1;

?>

<html>

<head>

<title>SESSION</title>

<style>

.view

{


height:200px;



width:350px;

border-radius:40px;

position:relative;

top:100px;

left:220px;

}

.view1

{

background-color: yellow;

height:40px;

width:250px;

border-radius:30px;

position:relative;

top:10px;

left:50px;

}

.font

{

color:red;

}

</head>

</style>

<body bgcolor="pink">

<div class="view"><br/>

<h3><center>VIEWS COUNTER USING SESSION</center></h3><hr/>

<div class ="view1">

<div class="font">

<center><h3><?php echo "VIEWS--->".$_SESSION['

'];?></h3></center></div>

<h6>Refresh To Increment</h6>

</div>

</div>

</body>

</html>

7. Write a PHP program to display a digital clock which displays the current time of the server.

prgm7.php

<html>

<head>



<style>

.box

{


height:200px;

width:250px;

border-radius:80px;

position:relative;

top:100px;

left:250px;

}

.box1

{

background-color: skyblue;

height:40px;

width:150px;

border-radius:10px;

position:relative;

top:10px;

left:50px;

}

</style>

<title> DIGITAL CLOCK</title>

<META HTTP-EQUIV="refresh" content="1.0";

"http://localhost/pgm7.php"/>

</head>

<body bgcolor="tan">

<div class="box">

<h1><center>DIGITAL CLOCK</center></h1>

<div class="box1">

<h1><center><?php echo date("H:i:s")?></center></h1>

</div>

</div>

</body>

</html>

8. Write the PHP programs to do the following:

a.Implement simple calculator operations.

prgm8a.php

<html>



<head>

<style>

table

{

border:1px solid black;

text-align:center;

background-color:DarkGray;

position:absolute;

left:45%;

}

</style>

</head>

<body>

<form method="get">

<table>

<caption><h2>SIMPLE CALCULATOR</h2></caption>

<tr><td><input type="text" name="exp" value="Ex:56 * 90"

onfocus="this.value=' '"/></td></tr>

<tr><td><input type="submit" name="submit"

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

</form>

<?php

if(isset($_GET['submit']))

{

$exp=$_GET['exp'];

$earr=explode(" ",$exp);

$num1=(int)$earr[0];

$num2=(int)$earr[2];

$opr=$earr[1];

switch($opr)

{

case "+" : $res=$num1+$num2;break;

case "-" : $res=$num1-$num2;break;

case "*" : $res=$num1*$num2;break;

case "/" : if($num2!=0)$res=$num1/$num2; else

$res="NAN";break;

case "%" : $res=$num1%$num2;break;

}

echo"<tr><td>$res</td></tr>";

echo"</table>";

}

?>

</body>

</html>



b.Find the transpose of a matrix.

c.Multiplication of two matrices.

d.Addition of two matrices.

pgm8b.php

<html>

<head>

</head>

<body>

<form method="get">

<p>Enter Matrix1 values:</p>

<input type="text" name="str" value="Ex:1,2|2,1" onfocus="this.value='

'"/>

<p>Enter Matrix2 values:</p>

<input type="text" name="str1" value="Ex:1,2|2,1"

onfocus="this.value=' '"/>

<br/><br/>

<input type="submit" value="Submit" name="submit"/>

<input type="reset" value="Reset"/>

</form>

<?php


{

$str=$_GET['str'];

$str1=$_GET['str1'];

$array=explode('|', $str);

$m1=array();

foreach($array as $val)

{

array_push($m1, explode(',', $val));

}

$array=explode('|',$str1);

$m2=array();

foreach($array as $val)

{

array_push($m2, explode(',', $val));

}

$m=count($m1);

$n=count($m1[0]);

echo "First matrix is:<br/>";



for($i=0;$i<$m;$i++){

for($j=0;$j<$n;$j++)

echo " ".$m1[$i][$j];

echo "<br/>";

}

$p=count($m2);

$q=count($m2[0]);

echo "second matrix is:<br/>";

for($i=0;$i<$p;$i++){

for($j=0;$j<$q;$j++)

echo " ".$m2[$i][$j];

echo "<br/>";

}

echo "The transpose for the first matrix is: "."<br/>";

for($i=0;$i<$m;$i++){

for($j=0;$j<$n;$j++)

$t1[$j][$i]=$m1[$i][$j];

}

for($i=0;$i<$n;$i++){

for($j=0;$j<$m;$j++)

echo " ".$t1[$i][$j];

echo "<br/>";

}

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

echo "The addition of matrices is:"."<br/>";

for($i=0;$i<$m;$i++){

for($j=0;$j<$n;$j++)

echo " ".$m1[$i][$j]+$m2[$i][$j]. " ";

echo "<br/>";

}

}

else

echo "Addition not possible<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]+=$m1[$i][$k]*$m2[$k][$j];

}

}

for($i=0;$i<$m;$i++){

for($j=0;$j<$q;$j++)

echo " ".$result[$i][$j];

echo "<br/>";



}

}

else

echo "Multiplication not possible<br/>";

}

?>

</body>

</html>

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.] St ore 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.

pgm9.php

<html>

<head>

</head>

<body>

<form method="get">

<input type="text" name="states" value="Mississippi Alabama Texas

Massachuetts Kanas" size="60"/>

<input type="submit" name="submit" value="Search" />

</form>

<?php


{

$states=$_GET['states'];

$statesArray=array();

$states1=explode(' ',$states);

echo "Original Array:<br>";

print_r($states1);

foreach($states1 as $state) {

if(preg_match('/i$/',($state)))

$statesArray[1]=($state);



}


if(preg_match('/^k.*a$/i',($state)))


}


if(preg_match('/^G.*t$/',($state)))


}


if(preg_match('/a$/',($state)))


}

echo "<br><br>Resultant Array:<br>";

print_r($statesArray);

}

?>

</body>

</html>

10. Write a PHP program to sort the student records which are stored in the database using selection sort.

student.html

<html>

<head><title>Student Information Form</title></head>

<body>

<form method="post" action="student.php">

Name:<input type="text" name="name";><br/>

USN:<input type="text" name="usn";><br/>

SEM:<input type="text" name="sem";><br/>

<input type="submit" value="Insert">

</form>

<form method="post" action="sort.php">

<h4>Click Sort Button to Sort the Student Records<h4>

<input type="submit" name="sort" value="Sort">

</form>

</body>

</html>

student.php

<?php



$servername = "localhost";

$username = "root";

$password = "";

$dbname = "lab";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$name=$_POST["name"];

$usn=$_POST["usn"];

$sem=$_POST["sem"];

$sql1 = "INSERT INTO student VALUES('$name','$usn','$sem')";

$s = $conn->query($sql1);

if($s)

{

header("Location:student.html");

}

$conn->close();

?>

sort.php

<?php

class student

{

public $name;

public $usn;

public $sem;

}

$students[]= new student();

$temp= new student();

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "lab";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql3 = "SELECT * FROM student";

$s3 = $conn->query($sql3);

if ($s3->num_rows > 0)

{

echo "<br/><p>Inserting Data to Objects</p><table border=3><tr><td

bgcolor='#E6E6E6'>NAME</td><td bgcolor='#E6E6E6'>USN</td><td

bgcolor='#E6E6E6'>SEM</td></tr>";

$i=0;

while($b2 = $s3->fetch_assoc())



{

@$students[$i]->name=$b2["name"];

@$students[$i]->usn=$b2["usn"];

@$students[$i]->sem=$b2["sem"];

echo "<tr><td>{$students[$i]->name}</td><td>{$students[$i]-

>usn}</td><td>{$students[$i]->sem}</td></tr>";

$i++;

}

echo "</table>";

}

$n=$i;

$m=$n;

echo "<p>Before Sorting</p><table border=3><tr><td



for($i=0;$i<$m;$i++)

{

echo "<tr><td>{$students[$i]->name}</td><td>{$students[$i]-

>usn}</td><td>{$students[$i]->sem}</td></tr>";

}

echo "</table>";

for($i=0;$i<($n-1);$i++)

{

$pos=$i;

for($j=$i+1;$j<$n;$j++)

{

if(strcmp($students[$pos]->name,$students[$j]->name)>0)

$pos=$j;

}

if($pos!=$i)

{

$temp=$students[$i];

$students[$i]=$students[$pos];

$students[$pos]=$temp;

}

}

echo "<p>After Sorting</p><table border=3><tr><td



for($i=0;$i<$m;$i++)

{

echo "<tr><td>{$students[$i]->name}</td>

<td>{$students[$i]->usn}</td>

<td>{$students[$i]->sem}</td></tr>";

}

echo "</table>";



$conn->close();

?>

Fig (10a): Create New Database Fig (10b): Name a New Database (Ex: lab)

Fig (10c): Create New Table (student) Fig (10d): Define the fields of Table (name, usn, sem)

Fig (10e): Table fields in phpmyadmin Fig (10f): Insert the values from Student.html



Fig (10g): Inserted values at phpmyadmin Fig (10h): All Inserted values at phpmyadmin

Fig (10i): On clicking Sort Button final output

Documents

Bahubali College of Engineering, Shravanabelagola materials/WTA Lab Manual.pdf · Bahubali College of Engineering, Shravanabelagola Yashpal Gupta S, Dept ISE, BCE .display input {