Scribd
Upload
91 views

LAB Manual Web

The document describes two experiments in a Web Technology Laboratory course. The first experiment involves designing a simple JavaScript calculator that can perform basic math operations. The second experiment involves writing JavaScript code to calculate the squares and cubes of numbers from 0 to 10 and output the results in an HTML table. The document provides objectives, requirements, introductions, procedures, and pre-requisite and post-requisite questions for each experiment.

Uploaded by

Erin Sheryl 4SF18CS044
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
91 views

LAB Manual Web

The document describes two experiments in a Web Technology Laboratory course. The first experiment involves designing a simple JavaScript calculator that can perform basic math operations. The second experiment involves writing JavaScript code to calculate the squares and cubes of numbers from 0 to 10 and output the results in an HTML table. The document provides objectives, requirements, introductions, procedures, and pre-requisite and post-requisite questions for each experiment.

Uploaded by

Erin Sheryl 4SF18CS044
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

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
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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>
<td><input type="button" value="8"
onclick="insertOperand('8')" /></td>
<td><input type="button" value="9"
onclick="insertOperand('9')" /></td>
<td><input type="button" value="+"
onclick="insertOperator('+')" /></td>
<td><input type="button" value="-"
onclick="insertOperator('-')" /></td>
</tr>
<tr>
<td><input type="button" value="4"
onclick="insertOperand('4')" /></td>
<td><input type="button" value="5"
onclick="insertOperand('5')" /></td>
<td><input type="button" value="6"
onclick="insertOperand('6')" /></td>
<td><input type="button" value="*"
onclick="insertOperator('*')" /></td>
<td><input type="button" value="/"
onclick="insertOperator('/')"/></td>
</tr>
<tr>
<td><input type="button" value="1"
onclick="insertOperand('1')" /></td>
<td><input type="button" value="2"
onclick="insertOperand('2')" /></td>
<td><input type="button" value="3"
onclick="insertOperand('3')" /></td>

3
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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


onclick="insertOperand('0')" /></td>
<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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

EXPERIMENT No.02: Square and Cubes of Number


2.1 Objective 2.5 Procedure
2.2 Apparatus Required 2.6 Results
2.3 Pre-Requisite 2.7 Pre-Requisite Questions
2.4 Introduction 2.8 Post-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.2 Apparatus Required:


Ubuntu, g-Editor, Web Browser

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>
<meta charset="UTF-8">
<title>Program for Squares and Cubes</title>
<style type="text/css">
table,h1 {text-align: center}
</style>
</head>
<body>
5
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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


<script type="text/javascript">
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:

2.7 Pre – Experimentation Questions:


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?

2.8 Post – Experimentation Questions:


1. Explain tag <col>, <colgroup>, <tbody>
2. What are some common lists that are used when designing a page?
6
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

3. What are empty elements?


EXPERIMENT No.03: Display Text Growing and Shrinking
3.1 Objective 3.5 Procedure
3.2 Apparatus Required 3.6 Results
3.3 Pre-Requisite 3.7 Pre-Requisite Questions
3.4 Introduction 3.8 Post-Requisite Questions

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.2 Apparatus Required:
Ubuntu, g-Editor, Web Browser

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>
<meta charset="UTF-8">
7
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

<title>Prog for Text Animation</title>


<script type="text/javascript">
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

</body>
</html>
3.6 Results:

a) Animation for textgrowing

b) Animation for textshrinking


9
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

3.7 Pre – Experimentation Questions:


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?
3.8 Post – Experimentation Questions:

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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


4.1 Objective 4.5 Procedure
4.2 Apparatus Required 4.6 Results
4.3 Pre-Requisite 4.7 Pre-Requisite Questions
4.4 Introduction 4.8 Post-Requisite Questions

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.2 Apparatus Required:


Ubuntu, g-Editor, Web Browser

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Program to find leftmost vowel and digits in reverse order</title>
<script type="text/javascript">
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

}
</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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

(b)When you enter the digits asinput

4.7 Pre – Experimentation Questions:


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?
4.8 Post – Experimentation Questions:
1. What are the advantages of CSS?
2. What are the CSS frameworks?
3. What is Embedded Style Sheet?

14
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

EXPERIMENT No.05: To Design Student XML Document


5.1 Objective 5.5 Procedure
5.2 Apparatus Required 5.6 Results
5.3 Pre-Requisite 5.7 Pre-Requisite Questions
5.4 Introduction 5.8 Post-Requisite Questions

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.2 Apparatus Required:
Ubuntu, g-Editor, Web Browser

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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>[email protected]</email>
</student>

<student>
<sname>Rayan</sname>
<usn>4SF15CS003</usn>
<college>SCEM</college>
<branch>CSE</branch>
<yoj>2015</yoj>
<email>[email protected]</email>
</student>
<student>
<sname>Pavan</sname>
<usn>4SF15CS006</usn>
<college>SCEM</college>
<branch>CSE</branch>
<yoj>2015</yoj>
<email>[email protected]</email>
</student>
</students>

student.css

students
{
background-color: pink;
font-family: ‘cambria';
}

student
16
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

{
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

5.6 Results:

5.7 Pre – Experimentation Questions:


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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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


Visiting The Web Page
6.1 Objective 6.5 Procedure
6.2 Apparatus Required 6.6 Results
6.3 Pre-Requisite 6.7 Pre-Requisite Question
6.4 Introduction 6.8 Post-Requisite Questions

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.
6.2 Apparatus Required:
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>
<style type="text/css">
h1,h2 {text-align: center}
</style>
</head>
<body>
<h1>Welcome to MY WEB PAGE</h1>
<?php
$file="count.txt";

20
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

$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:

6.7 Pre – Experimentation Questions:


1. What is HTML?
2. Explain Structure of HTML.
6.8 Post – Experimentation Questions:
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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

EXPERIMENT No.07: To Display A Digital Clock


7.1 Objective 7.5 Procedure
7.2 Apparatus Required 7.6 Results
7.3 Pre-Requisite 7.7 Pre-Requisite Questions
7.4 Introduction 7.8 Post-Requisite Questions

7.1 Objectives:

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

7.2 Apparatus Required:


Ubuntu, g-Editor,Web Browser

7.3 Pre-Requisite:
Fundamental of JavaScript, HTML, CSS
7.4 Introduction:
• 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.

7.5 Procedure:
index.php
<html>
<head>
<meta http-equiv="refresh" content="1">
<title>Digital Clock</title>
<style type="text/css">
h1 {text-align: center}
</style>
</head>
<body>
<?php
echo "<h1>Digital Clock</h1>";
echo "<hr/>";
echo "<h1>".date('h:i:s A')."</h1>";
echo "<hr/>";
22
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

?>
</body>
</html>
7.6 Results:

7.7 Pre – Experimentation Questions:


1. What are the features of XML?
2. What are server scripting languages?
7.8 Post – Experimentation Questions:
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

EXPERIMENT No. 08: To Perform Mathematical Operations


8.1 Objective 8.5 Procedure
8.2 Apparatus Required 8.6 Results
8.3 Pre-Requisite 8.7 Pre-Requisite Question
8.4 Introduction 8.8 Post-Requisite Questions

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.
8.2 Apparatus Required:
Ubuntu, g-editor, Web Browser

8.3 Pre-Requisite:
Fundamental of JavaScript, HTML, CSS
8.4 Introduction:
• 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.

8.5 Procedure:
8a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
</head>
<body>
<form action="8a.php" method="post">
24
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

<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>
<style type="text/css">
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

}
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

a.Simple calculator

b.Transpose of a matrix

c.Multiplication of a matrix

30
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

d.Addition of a matrix

8.7 Pre – Experimentation Questions:


1. What are the features of XML?
2. What are server scripting languages?
3. Give an example for server side scripting language
8.8 Post – Experimentation Questions:
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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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


9.1 Objective 9.5 Procedure
9.2 Apparatus Required 9.6 Results
9.3 Pre-Requisite 9.7 Pre-Requisite Question
9.4 Introduction 9.8 Post-Requisite Questions

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.2 Apparatus Required:


Ubuntu, g-Editor, Web Browser

9.3 Pre-Requisite:
32
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

for val in statesArr:


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

for val in statesArr:


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

for val in statesArr:


if(re.search('^M.*s$',val)):
statesList.append(val)
for val in statesArr:
if(re.search('a$',val)):
statesList.append(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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

9.7 Pre – Experimentation Questions:


1. What is a Markup Language?
2. Explain Structure of HTML.

9.8 Post – Experimentation Questions:


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.2 Apparatus Required 10.6 Results
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.

10.2 Apparatus Required:

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

• 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 type="text/css">
h1 {text-align: center}
</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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

{
$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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

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
Department of Computer Science & Engineering, SCEM, Mangaluru.
18CS63
:Web Technology Laboratory with Mini Project

(a) Without applying any sort

(b) Sorting the data based on Name

(c) Sorting the data based on College

10.7 Pre – Experimentation Questions:


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

10.8 Post – Experimentation Questions:


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
Department of Computer Science & Engineering, SCEM, Mangaluru.

You might also like