Web Lab Manual

Lab_manual

User Manual:

Open the PDF directly: View PDF .
Page Count: 32

Download
Open PDF In Browser	View PDF

VISVESVARAYA TECHNOLOGICAL UNIVERSITY
JNANA SANGAMA, BELGAVI-590018, KARNATAKA

WEB TECHNOLOGY LABORATORY
WITH MINI PROJECT- 15CSL77

MANUAL / GUIDELINES

Department of ISE & CSE

RNS Institute of Technology
Rajarajeshwari Nagar Post, Channasandra, Bengaluru-560 098
2018-2019

CONTENTS
Page no.
1. Syllabus
2. Program 1 - JavaScript : Simple calculator

1
4

3. Program 2 - JavaScript : Calculate squares and cubes of the numbers from

7

0 to 10
4. Program 3 - JavaScript : TEXT-GROWING and TEXT-SHRINKING

9

5. Program 4 - HTML5 and JavaScript :

11

a) position in the string of the left-most vowel
b) number with its digits in the reverse order
6. Program 5 - XML document to store information about a student

14

7. Program 6 - PHP : display the number of visitors visiting the web page.

17

8. Program 7 - PHP : display digital clock with current time of the server.

18

9. Program 8 - PHP :
a) Implement simple calculator operations.

19

b) Find the Transpose of a matrix, Multiplication of two matrices and

22

Addition of two matrices.
10. Program 9 – PHP : program with variable states with value

25

“Mississippi Alabama Texas Massachusetts Kansas"
11. Program 10 – PHP : program to sort the student records using selection sort.

27

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
[As per Choice Based Credit System (CBCS) scheme]
(Effective from the academic year 2016 -2017)
SEMESTER – VII
Subject Code

15CSL77

IA Marks

20

Number of Lecture Hours/Week

01I + 02P

Exam Marks

80

Total Number of Lecture Hours

40

Exam Hours

03

1. Write a JavaScript to design a simple calculator to perform the following operations: sum,
product, difference and quotient.
2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10and
outputs HTML text that displays the resulting values in an HTML table format.
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 “TEXTSHRINKING” in BLUE color. Then the font size decreases to 5pt.
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
c) Parameter: A number
d) Output: The number with its digits in the reverse order
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 3students. Create a CSS style
sheet and use it to display the document.
6. Write a PHP program to keep track of the number of visitors visiting the web pageand to
display this count of visitors, with proper headings.
7. Write a PHP program to display a digital clock which displays the current time of theserver.
Dept. of ISE & CSE, RNSIT

Page 1

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

8. 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.
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 element0 of a list
named states List.
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.] Store this word in element1of states List.
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.
10. Write a PHP program to sort the student records which are stored in the database using
selection sort.

Dept. of ISE & CSE, RNSIT

Page 2

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Study Experiment / Project:
Develop a web application project using the languages and concepts learnt in the theory and
Exercises listed in part A with a good look and feel effects. You can use any web technologies
and frameworks and databases.
Note:
1. In the examination each student picks one question from part A.
2. A team of two or three students must develop the mini project. However duringthe
examination, each student must demonstrate the project individually.
3. The team must submit a brief project report (15-20 pages) that must include thefollowing:
a) Introduction
b) Requirement Analysis
c) Software Requirement Specification
d) Analysis and Design
e) Implementation
f) Testing

Course outcomes: The students should be able to:


Design and develop dynamic web pages with good aesthetic sense of designingand latest
technical know-how's.



Have a good understanding of Web Application Terminologies, Internet Toolsother web
services.



Learn how to link and publish web sites

Conduction of Practical Examination:
1. All laboratory experiments from part A are to be included for practicalexamination.
2. Mini project has to be evaluated for 30 Marks.
3. Report should be prepared in a standard format prescribed for project work.
4. Students are allowed to pick one experiment from the lot.
5. Strictly follow the instructions as printed on the cover page of answer script.
6. Marks distribution:
a) Part A: Procedure + Conduction + Viva:10 + 35 +5 =50 Marks
b) Part B: Demonstration + Report + Viva voce = 15+10+05 = 30 Marks. Change of experiment is
allowed only once and marks allotted to the procedure part to be made zero.
Dept. of ISE & CSE, RNSIT

Page 3

FDP-Web Technology Lab With Mini Project – 15CSL77

1.

2018-2019

Write a JavaScript to design a simple calculator to perform the following
operations: sum, product, difference and quotient.
program1.html








 SIMPLE CALCULATOR 
value1

value2
 




Answer:
 





Dept. of ISE & CSE, RNSIT

Page 5

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Output:

Test Cases :
Test
No.

Input
Parameters

Expected Output

Obtained Output

Remarks

value1=50.56
value2=24.39

Addition =74.95
Subtraction =26.17
Multiplication=1233.1584
Division=2.072980729807298

Addition =74.95
Subtraction =26.17
Multiplication=1233.1584
Division=2.072980729807298

PASS

2.

value1= 0
value2= 45

Addition =45
Subtraction =-45
Multiplication=0
Division=0

Addition =45
Subtraction =-45
Multiplication=0
Division=0

PASS

3.

value1= 45
value2= 0

Addition =45
Subtraction =45
Multiplication=0
Division=Infinity

Addition =45
Subtraction =45
Multiplication=0
Division=Infinity

PASS

4.

value1 = abc
value2 = 23

ENTER VALID NUMBER

ENTER VALID NUMBER

PASS

5

value1 = 50
value2 =xyz

ENTER VALID NUMBER

ENTER VALID NUMBER

PASS

1.

Dept. of ISE & CSE, RNSIT

Page 6

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

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








Dept. of ISE & CSE, RNSIT

Page 7

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Output:

Dept. of ISE & CSE, RNSIT

Page 8

FDP-Web Technology Lab With Mini Project – 15CSL77

3.

2018-2019

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.

program3.html










Output:

TEXT SHRINKING

Dept. of ISE & CSE, RNSIT

Page 10

FDP-Web Technology Lab With Mini Project – 15CSL77

4.

2018-2019

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
c) Parameter: A number
d) Output: The number with its digits in the reverse order

program4.html







Output :

Dept. of ISE & CSE, RNSIT

Page 12

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Test Cases :
Test
No.

Input Parameters

1.

123

1.

CHANNASANDRA

2.

SKY

3.

MNKTO

Dept. of ISE & CSE, RNSIT

Expected Output

Obtained Output

Reverse of 123 is 321

Reverse of 123 is 321

The position of the left
most vowel is 3
No vowel found in the
entered string
The position of the left
most vowel is 5

The position of the left
most vowel is 3
No vowel found in the
entered string
The position of the left
most vowel is 5

Remarks
PASS
PASS
PASS
PASS

Page 13

FDP-Web Technology Lab With Mini Project – 15CSL77

5.

2018-2019

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.

program5.xml




 STUDENTS DESCRIPTION 



USN

: 1RN07CS001

NAME

: SANTHOSH

COLLEGE : RNSIT
BRANCH : Computer Science and Engineering
YEAR

: 2007

E-Mail

: santosh@gmail.com



USN

: 1RN07IS001

NAME

: MANORANJAN

COLLEGE : RNSIT
BRANCH : Information Science and Engineering
YEAR

: 2007

E-Mail

: manoranjan@gmail.com



USN

: 1RN07EC001

NAME

: CHETHAN

COLLEGE : RNSIT
Dept. of ISE & CSE, RNSIT

Page 14

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

BRANCH : Electronics and Communication Engineering

YEAR

: 2007

E-Mail

: chethan@gmail.com





program5.css
student{
display:block; margin-top:10px; color:Navy;
}
USN{
display:block; margin-left:10px;font-size:14pt; color:Red;
}
name{
display:block; margin-left:20px;font-size:14pt; color:Blue;
}
college{
display:block; margin-left:20px;font-size:12pt; color:Maroon;
}
branch{
display:block; margin-left:20px;font-size:12pt; color:Purple;
}
year{
display:block; margin-left:20px;font-size:14pt; color:Green;
}
e-mail{
display:block; margin-left:20px;font-size:12pt; color:Blue;
}

Dept. of ISE & CSE, RNSIT

Page 15

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Output:

Dept. of ISE & CSE, RNSIT

Page 16

FDP-Web Technology Lab With Mini Project – 15CSL77

6.

2018-2019

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.

program6.php
 REFRESH PAGE ";
$name="counter.txt";
$file = fopen($name,"r");
$hits= fscanf($file,"%d");
fclose($file);
$hits[0]++;
$file = fopen($name,"w");
fprintf($file,"%d",$hits[0]);
fclose($file);
print "Total number of views: ".$hits[0];
?>
Output:

REFRESH PAGE
Total number of views: 10

Dept. of ISE & CSE, RNSIT

Page 17

FDP-Web Technology Lab With Mini Project – 15CSL77

7.

2018-2019

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

program7.php





  

Output:

Dept. of ISE & CSE, RNSIT

Page 18

FDP-Web Technology Lab With Mini Project – 15CSL77

8.

2018-2019

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.
program8a.php






>


type="submit"

name="submit"



type="text"

";
echo "";
echo "";
echo "";
echo "

 SIMPLE CALCULATOR 
First Number:

Second
Number:

 Addition :
".($num1+$num2)."
 Subtraction :
 ".($num1-$num2)."
 Multiplication :
".($num1*$num2)."
Division :
 ".($num1/$num2)."
";
}
else
{
echo"";
}
}
?>



Dept. of ISE & CSE, RNSIT

Page 20

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Output:

Test Cases:
Test
No.

Input
Parameters

Expected Output

Obtained Output

Remarks

value1=50.56
value2=24.39

Addition =74.95
Subtraction =26.17
Multiplication=1233.1584
Division=2.072980729807298

Addition =74.95
Subtraction =26.17
Multiplication=1233.1584
Division=2.072980729807298

PASS

2.

value1= 0
value2= 45

Addition =45
Subtraction =-45
Multiplication=0
Division=0

Addition =45
Subtraction =-45
Multiplication=0
Division=0

PASS

3.

value1= 45
value2= 0

Addition =45
Subtraction =45
Multiplication=0
Division=Infinity

Addition =45
Subtraction =45
Multiplication=0
Division=Infinity

PASS

4.

value1 = abc
value2 = 23

ENTER VALID NUMBER

ENTER VALID NUMBER

PASS

5

value1 = 50
value2 =xyz

ENTER VALID NUMBER

ENTER VALID NUMBER

PASS

1.

Dept. of ISE & CSE, RNSIT

Page 21

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Program8b.php
";

for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)
echo " ".$a[$row][$col];
echo "
";
}

echo "the second matrix

:"."
";

for ($row = 0; $row < $p; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$b[$row][$col];
echo "
";
}

echo "the transpose for the first matrix is:"."
";
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $n; $col++)
echo " ".$a[$col][$row];
echo "
";
}

Dept. of ISE & CSE, RNSIT

Page 22

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

if(($m===$p) and ($n===$q)) {
echo "the addition of matrices is:"."
";
for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++)
echo " ".$a[$row][$col]+$b[$row][$col]." ";
echo "
";
}
}

if($n===$p){
echo " The multiplication of matrices: 
";
$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] += $a[$i][$k] * $b[$k][$j];
}
}
for ($row = 0; $row < $m; $row++) {
for ($col = 0; $col < $q; $col++)
echo " ".$result[$row][$col];
echo "
";
}
}
?>

Dept. of ISE & CSE, RNSIT

Page 23

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

Output:

the first matrix:
123
456
789

the second matrix:
789
456
123

the transpose of the first matrix:
147
258
369

the addition of matrices is:
8 10 12
8 10 12
8 10 12

the multiplication of matrices:
18 24 30
54 69 84
90 114 138

Dept. of ISE & CSE, RNSIT

Page 24

FDP-Web Technology Lab With Mini Project – 15CSL77

9.

2018-2019

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.] Store 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.

program9.php
";
foreach ( $states1 as $i => $value )
print("STATES[$i]=$value
");
foreach($states1 as $state) {
if(preg_match( '/xas$/', ($state)))
$statesArray[0] = ($state);
}
foreach($states1 as $state) {
if(preg_match('/^k.*s$/i', ($state)))
$statesArray[1] = ($state);
}

Dept. of ISE & CSE, RNSIT

Page 25

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

foreach($states1 as $state) {
if(preg_match('/^M.*s$/', ($state)))
$statesArray[2] = ($state);
}
foreach($states1 as $state){
if(preg_match('/a$/', ($state)))
$statesArray[3] = ($state);
}
echo "

Resultant Array :
";
foreach ( $statesArray as $array => $value )
print("STATES[$array]=$value
");
?>
Output:

Dept. of ISE & CSE, RNSIT

Page 26

FDP-Web Technology Lab With Mini Project – 15CSL77

10.

2018-2019

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

Goto Mysql and then type
create database weblab;
use weblab;
create table student(usnvarchar(10),name varchar(20),address varchar(20));

program10.php




connect_error)
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM student";
// performs a query against the database
$result = $conn->query($sql);
echo "
";
echo " BEFORE SORTING ";
echo "";
echo "";
echo "";
if ($result->num_rows> 0)
{
// output data of each row and fetches a result row as an
associative array
while($row = $result->fetch_assoc()){
echo "";
echo "";
echo "";
echo "";
array_push($a,$row["usn"]);
}
}
else
echo "Table is Empty";
echo "
USN
NAME
Address
". $row["usn"]."
". $row["name"]."
". $row["addr"]."
";
$n=count($a);
$b=$a;
for ( $i = 0 ; $i< ($n - 1) ; $i++ )
{
$pos= $i;
Dept. of ISE & CSE, RNSIT

Page 28

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

for ( $j = $i + 1 ; $j < $n ; $j++ ) {
if ( $a[$pos] > $a[$j] )
$pos= $j;
}
if ( $pos!= $i ) {
$temp=$a[$i];
$a[$i] = $a[$pos];
$a[$pos] = $temp;
}
}
$c=[];
$d=[];
$result = $conn->query($sql);
if ($result->num_rows> 0)// output data of each row
{
while($row = $result->fetch_assoc()) {
for($i=0;$i<$n;$i++) {
if($row["usn"]== $a[$i]) {
$c[$i]=$row["name"];
$d[$i]=$row["addr"];
}
}
}
}
echo "
";
echo " AFTER SORTING ";
echo "";
echo "";
echo "";
for($i=0;$i<$n;$i++) {
echo "";
echo "";
echo "";
Dept. of ISE & CSE, RNSIT

Page 29

FDP-Web Technology Lab With Mini Project – 15CSL77

2018-2019

echo "";
}
echo "
USN
NAME
Address
". $a[$i]."
". $c[$i]."
". $d[$i]."
";
$conn->close();
?>


Output:

Dept. of ISE & CSE, RNSIT

Page 30



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
Linearized                      : No
PDF Version                     : 1.5
Page Count                      : 32
Creator                         : PDFsam Basic v3.3.5
Producer                        : SAMBox 1.1.19 (www.sejda.org)
Modify Date                     : 2018:07:25 10:35:59-04:00

EXIF Metadata provided by EXIF.tools