Bahubali College of Engineering, Shravanabelagola Yashpal Gupta S, Dept ISE, BCE
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