LAB Manual Web

18CS63
:Web Technology Laboratory with Mini Project
EXPERIMENT No.01: To Design a Simple Calculator

1.1 Objective 1.5 Procedure
1.2 Apparatus Required 1.6Results
1.3 Pre-Requisite 1.7Pre-Requisite Questions
1.4 Introduction 1.8 Post-Requisite Questions
1.1 Objectives:
A JavaScript to design a simple calculator to perform the following operations: sum, product,
difference and quotient.
1.2 Apparatus Required:

Ubuntu, g-Editor, Web Browser
1.3 Pre-Requisite:
Fundamentals of JavaScript, HTML,CSS, Web Browser

1.4 Introduction:
• All HTML documents must start with a document type declaration: <! DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.
1.5 Procedure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<script type="text/javascript">
var op1=0,op2=0,operator="",res="",from="";
function reset()
{
document.getElementById('res').value = "";
op1=0;op2=0;operator="";res="";from="";
}
function insertOperand(operand)
{
if(from == "calculate")
reset();
1
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
else if(from == "operator")
document.getElementById('res').value = "";
document.getElementById('res').value+=operand;
from = "operand";
}
function insertOperator(op)
{
if(op1 == 0)
{
op1=document.getElementById('res').value;
}
else
{
if(from == "operand")
{
calculate();
}
}
operator=op;
from="operator";
}
function calculate()
{
op2=document.getElementById('res').value;
op1=parseInt(op1);
op2=parseInt(op2);
switch (operator)
{
case '+':res=op1+op2;
break;
case '-':res=op1-op2;
break;
case '*':res=op1*op2;
break;
case '/':if(op2 == 0)
res=0;
else
res=parseInt(op1/op2);
break;
}
document.getElementById('res').value=res;
op1=res;
op2=0;
operator="";
2
18CS63
from="calculate";
}
</script>
<style type="text/css">
input {width: 100%}
h1 {text-align: center}
</style>
</head>
<body onload="reset()">
<h1>Simple Calculator</h1>
<table align="center" border="1">
<tr>
<td colspan="5"><input type="text" id="res" name="res"
value="" /></td>
</tr>
<tr>
<td><input type="button" value="7"
onclick="insertOperand('7')"/></td>
onclick="insertOperand('8')" /></td>
<td><input type="button" value="+"
onclick="insertOperator('+')" /></td>
<td><input type="button" value="-"
onclick="insertOperator('-')" /></td>
</tr>
<tr>
<td><input type="button" value="*"
onclick="insertOperator('*')" /></td>
<td><input type="button" value="/"
onclick="insertOperator('/')"/></td>
</tr>
<tr>
3
18CS63

<td><input type="button" value="=" onclick="calculate()"
/></td>
</tr>
<tr>
<td colspan="5"><input type="button" size="100%"
value="CLEAR" onclick="reset()"/> </td>
</tr>
</table>
</body>
</html>
1.6 Results:
1.7 Pre – Experimentation Questions:

1. What is HTML?
2. Explain Structure of HTML.
3. What is a style sheet?
4. Explain the layout of HTML?
1.8 Post – Experimentation Questions:
1. Explain tag <head>,<br>, <html><body>
2. What is meant by java script?
3. What is semantic HTML?
4. Is it possible to change the color of the bullet?
4
18CS63
EXPERIMENT No.02: Square and Cubes of Number

2.2 Apparatus Required 2.6 Results
2.3 Pre-Requisite 2.7 Pre-Requisite Questions
2.1 Objectives:
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.

2.3 Pre-Requisite:
Fundamental of JavaScript, HTML
2.4 Introduction:
A table is an arrangement of data in rows and columns, or possibly in a more complex structure.
Tables are widely used in communication, research, and data analysis.
• Tables are useful for various tasks such as presenting text information and numerical data.
• Tables can be used to compare two or more items in tabular form layout.
• Tables are used to create databases.
• An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag.
A table header is defined with the “th” tag. By default, table headings are bold and centred.
A table data/cell is defined with the “td” tag.
2.5 Procedure:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Program for Squares and Cubes</title>
table,h1 {text-align: center}
</style>
</head>
<body>
5
18CS63
<h1>Program to find Square and Cube</h1>

var mytable="<table border='1' align='center'> <tr> <th>Number</th>
<th>Square</th> <th>Cube</th> </tr>";
var square= 0,cube=0;
for(var i=0;i<=10;i++)
{
square=i*i;
cube=i*i*i;
mytable+="<tr><td>"+i+"</td><td>"+square+"</td><td>"+cube+"</td></tr>"
}
mytable+="</table>";
document.write(mytable);
</script>
</body>
</html>
2.6 Results:

1. Which HTML tag is used to display the data in the tabular form?
2. In HTML table row is defined by which tag?
3. Which tag is using for header cell in a table?

1. Explain tag <col>, <colgroup>, <tbody>
2. What are some common lists that are used when designing a page?
6
18CS63
3. What are empty elements?

EXPERIMENT No.03: Display Text Growing and Shrinking
3.1 Objectives:
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.
3.3 Pre-Requisite:
Fundamental of JavaScript, HTML, CSS, Web Browser
3.4 Introduction:
JavaScript is the programming language of HTML and the Web.JavaScript is one of the three
languages all web developers must learn:
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behaviour of web pages
Web pages are not the only place where JavaScript is used. Many desktop and server programs
use JavaScript. Node.js is the best known. Some databases, like Mongo DB and Couch DB, also
use JavaScript as their programming language.
3.5 Procedure:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
7
18CS63
<title>Prog for Text Animation</title>

function animate()
{
var
val=window.getComputedStyle(document.getElementById('text')).fontSize;
var fontsize=parseInt(val);
var state="growing";
var timer=setInterval(textanimate,100);
function textanimate()
{
if(state=="growing")
{
fontsize++;
document.getElementById('text').innerHTML="TEXT
GROWING";
document.getElementById('text').style.color="red";
document.getElementById('text').style.fontSize=fontsize+"pt";
}
if(state=="shrinking")
{
fontsize--;
document.getElementById('text').innerHTML="TEXT
SHRINKING";
document.getElementById('text').style.color="blue";
document.getElementById('text').style.fontSize=fontsize+"pt";
}
if(fontsize==50)
{
state="shrinking"
}
if(fontsize==5)
{
clearInterval(timer);
}
}
}
</script>
<body onload="animate()">
<h1 style="text-align: center">Program for Increasing / Decreasing size of a text </h1>
<p style="text-align: center;" id="text"></p>
8
18CS63
</body>
</html>
3.6 Results:
a) Animation for textgrowing
b) Animation for textshrinking

9
18CS63

1. Links in HTML are defined with what tag
2. How many heading styles are there in HTML?
3. How line break is given in HTML?
4. What are the basic text formatting tags used in HTML?
1. What is the use of attributes used in HTML?

2. For what purpose <hr> tag is used?
3. What are the basic text formatting tags used in HTML?
10
18CS63
EXPERIMENT No.04: Position in the String and Reverse Number

4.1 Objectives:
Develop and demonstrate a HTML5 file that includes JavaScript script that uses
functions for the followingproblems:
a. Parameter: Astring
b. Output: The position in the string of the left-mostvowel
c. Parameter: Anumber
d. Output: The number with its digits in the reverseorder

4.3 Pre-Requisite:
Fundamental of JavaScript, HTML, CSS,Web Browser
4.4 Introduction:
• CSS is a language that describes the style of an HTML document.
• CSS describes how HTML elements should be displayed.
• JavaScript is the programming language of HTML and the Web.
• JavaScript is one of the three languages all web developers must learn:
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behaviour of web pages
4.5 Procedure:
index.html
<!DOCTYPE html>
11
18CS63
<html lang="en">
<head>
<title>Program to find leftmost vowel and digits in reverse order</title>
function validate()
{
var inp=document.getElementById('val').value;
if(isNaN(inp))
findVowel(inp);
else
findReverse(inp);
}
function findVowel(inp)
{
var str=inp.toLowerCase();
var pos=0,ch="";
for(var i=0;i<str.length;i++)
{
ch=str.charAt(i);
if(ch=="a"||ch=="e"||ch=="i"||ch=="o"||ch=="u")
{
pos=i+1;
break;
}
}
if(pos==0)
alert("Vowel not found");
else
alert("Position of Left Most Vowel in the string : "+pos);
}
function findReverse(inp)
{
var num=parseInt(inp);
var temp=num;
var rem= 0,rev= 0;
while(num>0)
{
rem=num%10;
rev=rev*10+rem;
num=parseInt(num/10);
}
alert("Number : "+temp+"\nReverse Order : "+rev);
12
18CS63
}
</script>
</head>
<body>
<h1>Program to find left most vowel or Digits in reverse order</h1>
<input type="text" name="val" id="val" placeholder="Enter String or Digits">
<input type="button" value="submit" onclick="validate()">
</body>
</html>
4.6 Results:
(a)When you enter the string asinput
13
18CS63
(b)When you enter the digits asinput

1. What are the different variations of CSS?
2. How can you integrate CSS on a web page?
3. Why background and color are the separate properties if they should always be set
together?
1. What are the advantages of CSS?
2. What are the CSS frameworks?
3. What is Embedded Style Sheet?
14
18CS63
EXPERIMENT No.05: To Design Student XML Document

5.1 Objectives:
Design an XML document to store information about a student in an engineering college

affiliated to VTU. The information must includeUSN, 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.
5.3 Pre-Requisite:
Fundamental of JavaScript, CSS, XML
5.4 Introduction:
Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding
documents in a format that is both human-readable and machine-readable. They are plain
text files that don't do anything in and of themselves except describe the transportation, structure,
and storage of data.The XML language has no predefined tags.
XML is designed to be self-descriptive
• It has sender information.
• It has receiver information
• It has a heading
• It has a message body.
15
18CS63
5.5 Procedure:
5.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="student.css"?>
<students>
<student>
<sname>Ankush</sname>
<usn>4SF15CS001</usn>
<college>SCEM</college>
<branch>CSE</branch>
<yoj>2015</yoj>
<email>Ankush@xyz.com</email>
</student>
<student>
<sname>Rayan</sname>
<yoj>2015</yoj>
<email>Rayan@xyz.com</email>
</student>
<student>
<sname>Pavan</sname>
<yoj>2015</yoj>
<email>Pavan@xyz.com</email>
</student>
</students>
student.css
students
{
background-color: pink;
font-family: ‘cambria';
}
student
16
18CS63
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
sname
{
display: block;
font-size: 15pt;
text-transform: uppercase;
color: blue;
}
usn:before
{
content: "USN: ";
font-size: 14pt;
font-weight: bold;
}
usn
{
display: block;
font-size: 14pt;
margin-left: 20pt;
text-transform: uppercase;
color: blueviolet;
}
college:before
{
content: "Affiliated College: ";
font-size: 14pt;
font-weight: bold;
}
college
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
17
18CS63
branch:before
{
content: "Branch: ";
font-size: 14pt;
font-weight: bold;
}
branch
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
yoj:before
{
content: "Year of Joining: ";
font-size: 14pt;
font-weight: bold;
}
yoj
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
email:before
{
content: "EMAILID: ";
font-size: 14pt;
font-weight: bold;
}
email
{
display: block;
font-size: 14pt;
margin-left: 20pt;
color: blueviolet;
}
18
18CS63
5.6 Results:

1. What is a markup language?
2. What is XML?
3. What are the features of XML?
4. What are the differences between HTML and XML?
5. Which tag is used to find the version of XML and the syntax?
6. What is XML Namespace?
5.8Post – Experimentation Questions:
1. What is XML DOM Document?
2. What is XPath?
3. What is an attribute?
4. What is an XML Element?
5. What is XMLparser?
19
18CS63
EXPERIMENT No.06: To Keep Track of The Number of Visitors

Visiting The Web Page
6.3 Pre-Requisite 6.7 Pre-Requisite Question
6.1 Objectives:
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.
Ubuntu, g-Editor,Web Browser
6.3 Pre-Requisite:
Fundamental of JavaScript, HTML, PHP
6.4 Introduction:
• PHP is an acronym for "PHP: Hypertext Preprocessor"
• PHP is a widely-used, open source scripting language
• PHP is a server scripting language, and a powerful tool for making dynamic and
interactive Web pages.
• PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's
ASP.
• PHP scripts are executed on the server
6.5 Procedure:
index.php
<html>
<head>
<title>Visitors Count</title>
h1,h2 {text-align: center}
</style>
</head>
<body>
<h1>Welcome to MY WEB PAGE</h1>
<?php
$file="count.txt";
20
18CS63
$handle=fopen($file,'r') or die("Cannot Open File : $file");

$count=fread($handle,10);
fclose($handle);
$count++;
echo "<h2>No of visitors who visited this page : $count </h2>";
$handle=fopen($file,'w') or die("Cannot Open File : $file");
fwrite($handle,$count);
fclose($handle);
?>
</body>
</html>
Instruction :
Create an empty file named count.txt in the same folder before executing.
6.6 Results:

1. What is HTML?
1. What is PHP?
2. What is PEAR in PHP?
3. Who is known as the father of PHP?
4. What was the old name of PHP?
5. Explain the difference between static and dynamic websites?
21
18CS63
6. What is the name of scripting engine in PHP?
EXPERIMENT No.07: To Display A Digital Clock

7.1 Objectives:
Write a PHP program to display a digital clock which displays the current time of theserver.

Ubuntu, g-Editor,Web Browser
7.3 Pre-Requisite:
Fundamental of JavaScript, HTML, CSS
7.4 Introduction:
ASP.
7.5 Procedure:
index.php
<html>
<head>
<meta http-equiv="refresh" content="1">
<title>Digital Clock</title>
</style>
</head>
<body>
<?php
echo "<h1>Digital Clock</h1>";
echo "<hr/>";
echo "<h1>".date('h:i:s A')."</h1>";
echo "<hr/>";
22
18CS63
?>
</body>
</html>
7.6 Results:

2. What are server scripting languages?
1. What is the difference between GET and POST?
2. How can you enable error reporting in PHP?
3. Can the value of a constant change during the script’s execution?
23
18CS63
EXPERIMENT No. 08: To Perform Mathematical Operations

8.1 Objectives:
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.
Ubuntu, g-editor, Web Browser
8.3 Pre-Requisite:
Fundamental of JavaScript, HTML, CSS
8.4 Introduction:
ASP.
8.5 Procedure:
8a.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
</head>
<body>
<form action="8a.php" method="post">
24
18CS63
<h1>Simple Calculator</h1>
<p>First Operand: <input type="text" name="op1" /></p>
<p>Choose Operator:
<input type="radio" name="operator" checked="checked"
value="+" />
Add(+)
<input type="radio" name="operator" value="-" /> Subtract(-)
<input type="radio" name="operator" value="*" /> Multiply(*)
<input type="radio" name="operator" value="/" /> Divide(/)
</p>
<p>Second Operand: <input type="text" name="op2"></p>
<p>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</p>
</form>
</body>
</html>
8a.php
<html>
<head>
<title>Result Page</title>
h1,h2 {text-align: center}
</style>
</head>
<body>
<?php
$op1=$_POST['op1'];
$op2=$_POST['op2'];
$operator=$_POST['operator'];
switch($operator)
{
case '+':$res=$op1+$op2;
break;
case '-':$res=$op1-$op2;
break;
case '*':$res=$op1*$op2;
break;
case '/':if($op2==0)
{
25
18CS63
echo "divide by zero error";

exit;
}
else
$res=$op1/$op2;
break;
}
echo "<h1>Simple Calculator</h1>";
echo "<h2>".$op1.$operator.$op2."=".$res."</h2>"; ?>
</body>
</html>
8b.php
<?php
$mat=Array(Array(1,2),
Array(4,5),
Array(7,8)); //Initializing Array in PHP
$transpose=Array(); //Creating empty array in PHP
echo "<html><head><title>Matrix Transpose</title></head><body>";
echo "<h1>Matrix is:<br/>";
for($i = 0; $i < count($mat); $i++)
{
for ($j = 0; $j < count($mat[0]); $j++)
{
echo $mat[$i][$j] . " ";
}
echo "</br/>";
}
echo "</h1>";
for($i = 0; $i < count($mat); $i++) //calculation for Transpose
for($j = 0; $j < count($mat[0]); $j++)
{
$transpose[$j][$i]=$mat[$i][$j];
}
echo "<h1>Transpose of a Matrix is:<br/>";
for($i = 0; $i < count($transpose); $i++)
{
for ($j = 0; $j < count($transpose[0]); $j++)
{
echo $transpose[$i][$j] . " ";
}
26
18CS63
echo "<br/>";
}
echo "</h1>";
echo "</body></html>";
?>
8c.php
<?php
$mat1=Array(Array(1,2), Array(3,4), Array(5,6)); //initializing 2x3 matrix
$mat2=Array(Array(2,4,8), Array(1,3,5));//initializing 3x2 matrix
echo "<html><head><title>Matrix Multiplication</title></head><body>";

if(count($mat1[0])!=count($mat2)) //column(1st matrix) != row(2nd matrix)
{
echo "<h1>Incompatible Matrices</h1>";
exit(0);
}
$res=array();
echo "<h1>Matrix A:<br/>";
for($i = 0; $i < count($mat1); $i++)
{
for ($j = 0; $j < count($mat1[0]); $j++)
{
echo $mat1[$i][$j] . " ";
}
echo "<br/>";
}
echo "</h1>";
echo "<h1>Matrix B:<br/>";
for($i = 0; $i < count($mat2); $i++)
{
for ($j = 0; $j < count($mat2[0]); $j++)
{
echo $mat2[$i][$j] . " ";
}
echo "<br/>";
}
echo "</h1>";
for($i = 0; $i < count($mat1); $i++)
for($j = 0; $j < count($mat2[0]); $j++)
{
$res[$i][$j]=0;
for($k=0;$k<count($mat2);$k++)
$res[$i][$j]=$res[$i][$j]+$mat1[$i][$k]*$mat2[$k][$j];
27
18CS63
}
echo "<h1>A x B:<br/>";
for($i = 0; $i < count($res); $i++)
{
for ($j = 0; $j < count($res[0]); $j++)
{
echo $res[$i][$j] . " ";
}
echo "<br/>";
}
echo "</h1>";
echo "</body></html>";
?>
8d.php
<?php
$mat1=Array(Array(1,2),Array(3,4),Array(5,6));
$mat2=Array(Array(1,1),Array(2,2),Array(3,3));
echo "<html><head><title>Matrix Addition</title></head><body>";
if((count($mat1)!=count($mat2))||(count($mat1[0])!=count($mat2[0])))
{
echo "<h1>Incompatible Matrices</h1>";
exit(0);
}
echo "<h1>Matrix A:<br/>";
for($i=0;$i<count($mat1);$i++)
{
for ($j = 0; $j < count($mat1[0]); $j++)
{
echo $mat1[$i][$j] . " ";
}
echo "<br/>";
}
echo "</h1>";
echo "<h1>Matrix B:<br/>";
for($i = 0; $i < count($mat2); $i++)
{
for ($j = 0; $j < count($mat2[0]); $j++)
{
echo $mat2[$i][$j] . " ";
}
echo "<br/>";
}
28
18CS63
echo "</h1>";
$res=array();
for($i = 0; $i < count($mat1); $i++)
for($j = 0; $j < count($mat1[0]); $j++)
{
$res[$i][$j]=$mat1[$i][$j]+$mat2[$i][$j];
}
echo "<h1>A + B :<br/>";
for($i = 0; $i < count($res); $i++)
{
for ($j = 0; $j < count($res[0]); $j++)
{
echo $res[$i][$j] . " ";
}
echo "<br/>";
}
echo "</h1>";
?>
8.6 Results:
HTML inputpage
29
18CS63
a.Simple calculator
b.Transpose of a matrix
c.Multiplication of a matrix
30
18CS63
d.Addition of a matrix

2. What are server scripting languages?
3. Give an example for server side scripting language
1. What do the initials of PHP stand for?
2. Which programming language does PHP resemble?
3. How do you execute a PHP script from the command line?
31
18CS63
EXPERIMENT No.09: To Write A PHP Program Using Python

9.1 Objectives:
Write a PHP program named states.py that declares a variable states with value
"Mississippi Alabama Texas Massachusetts Kansas". Write a PHPprogram that
does thefollowing:
• Search for a word in variable states that ends in xas. Store this word in
element 0 of a list namedstatesList.
• 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 ofstatesList.
• Search for a word in states that begins with M and ends in s. Store
this word in element 2 of thelist.
• Search for a word in states that ends in a. Store this word inelement 3 of the list.

9.3 Pre-Requisite:
32
18CS63
Fundamental of JavaScript, HTML, python
9.4 Introduction:
• Python is a programming language.
• Python can be used on a server to create web applications.
• Python can be used alongside software to create workflows.
• Python can connect to database systems. It can also read and modify files.
• Python can be used to handle big data and perform complex mathematics.
• Python can be used for rapid prototyping, or for production-ready software development.
9.5 Procedure:
index.php
<html>
<head>
<title>Pattern Matching using python</title>
</head>
<body>
<?php
$res=shell_exec("python PythonServer/states.py");
$states=explode("\n",$res); //in python print embed \n at the end
echo "Statement is : <b>$states[4]</b><br/>";
echo "Word that end with xas : <b>$states[0]</b><br/>";
echo "Word that Starts with k and end with s (Case
Insensitive):<b>$states[1]</b><br/>";
echo "Word that Starts with M and end with s : <b>$states[2]</b><br/>";
echo "Word that end with a : <b>$states[3]</b>";
?>
</body>
</html>
states.py
import re
states="Mississippi Alabama Texas Massachusetts Kansas"
statesArr=states.split() # splits the sentence into words
statesList=list() # Creates an empty List
33
18CS63
for val in statesArr:

if(re.search('xas$',val)): #note: Indentation is imp in python
statesList.append(val)

if(re.search('^k.*s$',val,re.I)):

if(re.search('^M.*s$',val)):
if(re.search('a$',val)):
for val in statesList:

print(val)
print(states);
Instruction :
Install Python in terminal / command prompt.
Create a folder named “PythonServer” in the samedirectory where “index.php has
been located.And then place the “states.py” file inside “PythonServer”folder.
This is to assume that “state.py” has been fetched from some python server,
which has been located somewhere on the internet.
9.6 Results:
34
18CS63

1. What is a Markup Language?

1. How to run the interactive PHP shell from the command line interface?
2. How can we display the output directly to the browser?
EXPERIMENT No. 10: To Sort Student Records Using

SelectionSort
10.1 Objective 10.5Procedure
10.3 Pre-Requisite 10.7Pre-Requisite Question
10.4 Introduction 10.8 Post-Requisite Question
10.1 Objectives:
Write a PHP program to sort the student records which are stored in the database
using selection sort.
Ubuntu, g-editor, Maria DB, Web browser
10.3 Pre-Requisite:
Fundamentals of JavaScript, HTML, Database
10.4Introduction:
• SQL stands for Structured Query Language
• SQL lets you access and manipulate databases
• SQL can execute queries against a database
• SQL can retrieve data from a database
35
18CS63
• SQL can insert records in a database

• SQL can update records in a database
• SQL can delete records from a database
• SQL can create new databases
• SQL can create new tables in a database
• SQL can create stored procedures in a database
• SQL can create views in a database
• SQL can set permissions on tables, procedures, and views
10.5Procedure:
index.php
<html>
<head>
<title>Select Sort on student records</title>
</style>
</head>
<body>
<h1>Merge Sort on sample student data</h1>
<form action="" method="post">
<h1>Sort By :
<select name="field">
<option value="" disabled selected>Choose Field</option>
<option value="name">Name</option>
<option value="usn">USN</option>
<option value="year">Year</option>
<option value="marks">Marks</option>
<option value="coll">College</option>
</select>
</h1>
<h1>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</h1>
</form>
<?php
function selection_sort($data,$keys)
{
for($i=0; $i<count($data)-1; $i++)
{
$min = $i;
36
18CS63
for($j=$i+1; $j<count($data); $j++)

{
if ($data[$j]<$data[$min])
{
$min = $j;
}
}
$data = swap_positions($data, $i, $min); $keys =
swap_positions($keys, $i,
$min);
}
return $keys;
}
function swap_positions($data1, $left, $right)

{
$temp = $data1[$right];
$data1[$right] = $data1[$left];
$data1[$left] = $temp;
return $data1;
}
include 'sql.php';
$str="select * from studentdetails";
$res=mysqli_query($sql,$str);
$field="none";
$myarr=[];
$original=[];
$i=1;
while($arr=mysqli_fetch_assoc($res))
{
$myarr[]=$arr;
}
if(isset($_POST['submit']) && isset($_POST['field']))
{
$field=$_POST['field'];
$original=array_column($myarr,$field,'id'); /*Create Associate
array with
(key,value)=('id',$feild) */
$orginalKey=array_keys($original);
$originalVal=array_values($original);
$sortedkeys=selection_sort($originalVal,$orginalKey);
$myarr=[];
foreach ($sortedkeys as $key)
37
18CS63
{
$str="select * from studentdetails WHERE id='$key'";
$res=mysqli_query($sql,$str);
$myarr[]=mysqli_fetch_assoc($res);
}
}
?>
<table border="1" width="80%" align="center">

<tr>
<th colspan="6">Student Details [Sorted by: <?php echo $field;?>]
</th>
</tr>
<tr>
<th>No</th>
<th>Name</th>
<th>USN</th>
<th>Year</th>
<th>Marks</th>
<th>College</th>
</tr>
<?php foreach ($myarr as $arr): ?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $arr['name']; ?></td>
<td><?php echo $arr['usn']; ?></td>
<td><?php echo $arr['year']; ?></td>
<td><?php echo $arr['marks']; ?></td>
<td><?php echo $arr['coll']; ?></td>
</tr>
<?php endforeach; ?>
</table>
</body>
</html>
sql.php
<?php
$sql=mysqli_connect("localhost","root","password","prog10db");
?>
38
18CS63
Database Procedure :
1. Creating Database :
CREATE DATABASE
prog10db;
2. Creating table :
CREATE TABLE studentdetails (
id int AUTO_INCREMENT,
name varchar(100),
usn varchar(50),
year int,
marks int,
coll varchar(200),
PRIMARY KEY (id)
);
3. Insert 5 sample data into table :
INSERT INTO studentdetails VALUES
(0,'Raj','4SF12CS001',2012,75,'Sahyadri College of Engg & Mgt'),
(0,'Suresh','4SH10CS002',2010,55,'Shree Devi Institute of Tech'),
(0,'Ram','4SN11CS001',2011,75,'Shrinivas Institute of Tech'),
(0,'Anu','4SJ15CS001',2015,35,'St Joseph College of Engg'),
(0,'Kavya','4CB14CS001',2014,75,'Canara College of Engg');
10.6 Results:
39
18CS63
(a) Without applying any sort
(b) Sorting the data based on Name
(c) Sorting the data based on College

1. How can PHP and HTML interact?
2. What type of operation is needed when passing values through a form or an URL?

1. How to run the interactive PHP shell from the command line interface?
2. How can we display the output directly to the browser?
40

LAB Manual Web

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LAB Manual Web

Uploaded by

Copyright:

Available Formats

18CS63

:Web Technology Laboratory with Mini Project

EXPERIMENT No.01: To Design a Simple Calculator

1.2 Apparatus Required:

Fundamentals of JavaScript, HTML,CSS, Web Browser

else if(from == "operator")

<td><input type="button" value="0"

1.7 Pre – Experimentation Questions:

EXPERIMENT No.02: Square and Cubes of Number

2.2 Apparatus Required:

<h1>Program to find Square and Cube</h1>

2.7 Pre – Experimentation Questions:

2.8 Post – Experimentation Questions:

3. What are empty elements?

• CSS to specify the layout of web pages

• JavaScript to program the behaviour of web pages

<title>Prog for Text Animation</title>

a) Animation for textgrowing

b) Animation for textshrinking

3.7 Pre – Experimentation Questions:

1. What is the use of attributes used in HTML?

EXPERIMENT No.04: Position in the String and Reverse Number

4.2 Apparatus Required:

(a)When you enter the string asinput

(b)When you enter the digits asinput

4.7 Pre – Experimentation Questions:

EXPERIMENT No.05: To Design Student XML Document

Design an XML document to store information about a student in an engineering college

5.7 Pre – Experimentation Questions:

EXPERIMENT No.06: To Keep Track of The Number of Visitors

$handle=fopen($file,'r') or die("Cannot Open File : $file");

6.7 Pre – Experimentation Questions:

6. What is the name of scripting engine in PHP?

EXPERIMENT No.07: To Display A Digital Clock

7.2 Apparatus Required:

7.7 Pre – Experimentation Questions:

EXPERIMENT No. 08: To Perform Mathematical Operations

Write the PHP programs to do the following:

a. Implement simple calculator operations.

echo "divide by zero error";

echo "<html><head><title>Matrix Multiplication</title></head><body>";

8.7 Pre – Experimentation Questions:

EXPERIMENT No.09: To Write A PHP Program Using Python

9.2 Apparatus Required:

Fundamental of JavaScript, HTML, python

for val in statesArr:

for val in statesArr:

for val in statesArr:

for val in statesList:

9.7 Pre – Experimentation Questions:

9.8 Post – Experimentation Questions:

EXPERIMENT No. 10: To Sort Student Records Using

10.2 Apparatus Required:

Ubuntu, g-editor, Maria DB, Web browser

• SQL can insert records in a database

for($j=$i+1; $j<count($data); $j++)

function swap_positions($data1, $left, $right)

<table border="1" width="80%" align="center">

(a) Without applying any sort

(b) Sorting the data based on Name

(c) Sorting the data based on College

10.7 Pre – Experimentation Questions:

10.8 Post – Experimentation Questions: