Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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;
}
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
.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;
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
}
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 black" value="9" onclick='v("9")'>
<input type="button" class="button pink" value="*" onclick='v("*")'></p>
<p><input type="button" class="button black" value="4" onclick='v("4")'>
<input type="button" class="button black" value="5" onclick='v("5")'>
<input type="button" class="button black" value="6" onclick='v("6")'>
<input type="button" class="button pink" value="-" onclick='v("-
")'</p>
<p><input type="button" class="button black" value="1" onclick='v("1")'>
<input type="button" class="button black" value="2" onclick='v("2")'>
<input type="button" class="button black" value="3" onclick='v("3")'>
<input type="button" class="button pink" value="+" onclick='v("+")'></p>
<p><input type="button" class="button black" value="0" onclick='v("0")'>
<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>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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>
<td id="demo1"></td>
<td id="demo2"></td>
<td id="demo3"></td>
<td id="demo4"></td>
<td id="demo5"></td>
<td id="demo6"></td>
<td id="demo7"></td>
<td id="demo8"></td>
<td id="demo9"></td>
<td id="demo10"></td>
</tr>
<tr bgcolor="green">
<th>Cubes</th>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
<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;
}
for(var i=0;i<=10;i++)
{
ref="demo"+i;
document.getElementById(ref).innerHTML=i*i;
}
for(var i=0;i<=10;i++)
{
ref="emo"+i;
document.getElementById(ref).innerHTML=i*i*i;
}
</script>
</body>
</html>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
</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;
}
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
}
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()";><!--not
recommended to use insline styeling-->
</body>
</html>
c.Parameter: A number
d.Output: The number with its digits in the reverse order Prog4b.html
<!DOCTYPE>
<html>
<head>
<style>
.box
{
background-color:orange;
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;
background-color:white;
color:red;
padding:6px;
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
}
</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)>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
<!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> 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 3</h1>
<ad> <label> USN: <usn>4BB16IS401</usn></label>
<label> NAME: <name>sonali</name></label>
<label> COLLEGE: <college>BCE</college></label>
<label> BRANCH: <branch>ISE</branch></label>
<label>YEAR: <year>2019</year></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;
}
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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;
}
{
font-size:15px;
color:green;
font-weight:700;
}
h1
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
{
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
{
background-color:white;
height:200px;
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
<style>
.box
{
background-color:orange;
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>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
<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>
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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
if(isset($_GET['submit']))
{
$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/>";
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
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/>";
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
}
}
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
if(isset($_GET['submit']))
{
$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);
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
}
foreach($states1 as $state) {
if(preg_match('/^k.*a$/i',($state)))
$statesArray[2]=($state);
}
foreach($states1 as $state) {
if(preg_match('/^G.*t$/',($state)))
$statesArray[3]=($state);
}
foreach($states1 as $state) {
if(preg_match('/a$/',($state)))
$statesArray[4]=($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
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
$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())
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
{
@$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
bgcolor='#E6E6E6'>NAME</td><td bgcolor='#E6E6E6'>USN</td><td
bgcolor='#E6E6E6'>SEM</td></tr>";
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
bgcolor='#E6E6E6'>NAME</td><td bgcolor='#E6E6E6'>USN</td><td
bgcolor='#E6E6E6'>SEM</td></tr>";
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>";
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
$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
Bahubali College of Engineering, Shravanabelagola
Yashpal Gupta S, Dept ISE, BCE
Fig (10g): Inserted values at phpmyadmin Fig (10h): All Inserted values at phpmyadmin
Fig (10i): On clicking Sort Button final output