15CSL77 - Web Lab Manual - 19-20 PDF

NEAR ITPB, CHANNASANDRA, BENGALURU – 560 067
Affiliated to VTU, Belagavi

Approved by AICTE, New Delhi
Recognized by UGC under 2(f) & 12(B)
Accredited by NBA & NAAC
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

VII SEMESTER
ACADEMIC YEAR 2019–2020 [ODD]
WEB TECHNOLOGY LABORATORY WITH MINI PROJECT
15CSL77
LABORATORY MANUAL
:
NAME OF THE STUDENT
BRANCH : COMPUTER SCIENCE AND ENGINEERING
UNIVERSITY SEAT NO. :
SEMESTER & SECTION : VII
BATCH :
15CSL77-Web Technology Lab manual
Department of Computer Science and Engineering
Vision of the Department:
To create an ambience in excellence and provide innovative emerging programs in Computer Science
and Engineering and to bring out future ready engineers equipped with technical expertise and strong
ethical values.
Mission of the Department:
1. Concepts of computing discipline: To educate students at under graduate, postgraduate and

doctoral levels in the fundamental and advanced concepts of computing discipline.
2. Quality Research: To provide strong theoretical and practical background across the
Computer Science and Engineering discipline with the emphasis on computing technologies,
quality research, consultancy and trainings.
3. Continuous Teaching Learning: To promote a teaching learning process that brings

advancements in Computer Science and Engineering discipline leading to new technologies
and products.
4. Social Responsibility and Ethical Values: To inculcate professional behavior, innovative

research Capabilities , leadership abilities and strong ethical values in the young minds so as
to work with the commitment for the betterment of the society.
PEOs ,POs & PSOs of the Department
PROGRAM EDUCATIONAL OBJECTIVES
PEO1: Current Industry Practices: Graduates will analyze real world problems and give
solution using current industry practices in computing technology.
PEO2: Research & Higher Studies: Graduates with strong foundation in mathematics and
engineering fundamentals that will enable graduates to pursue higher
learning ,R&D activities and consultancy.
PEO3: Social Responsibility: Graduates will be professionals with ethics, who will provide
industry growth and social transformation as responsible citizens.
PEO4: Entrepreneur: Graduates will be able to become entrepreneur to address

social, technical and business challenges.
Dept of CSE, MVJCE Page - 2 - 2019-20

PROGRAM OUTCOMES
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,

and an engineering specialization to the solution of complex engineering problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences,
and engineering sciences.
3. Design / development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research

methods including design of experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering solutions
in societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive clear
instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the engineering
and management principles and apply these to one’s own work, as a member and leader in a team, to
manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.

PROGRAM SPECIFIC OUTCOMES
PSO1: Programming: Ability to understand, analyze and develop computer programs in the areas
related to algorithms, system software, multimedia, web design, DBMS, and networking for efficient
design of computer-based systems of varying complexity.
PSO2:Practical Solution: Ability to practically provide solutions for real world problems with a
broad range of programming language and open source platforms in various computing domains.
PSO3:Research: Ability to use innovative ideas to do research in various domains to solve societal
problems.
COURSE OBJECTIVES:
 Design and develop static and dynamic web pages.
 Develop a web application project using HTML, JavaScript, XML, CSS and PHP with a good look and
feel effects.
 Design the layouts and understand the requirements for web page creation.
 Familiarize with client side program, server-side programming and active server pages.
 Learn Database Connectivity to web applications
PREREQUISITES:
Basic knowledge about computer programming
COURSE OUTCOMES (CO’s):
Course Course Outcome
Code
Design and develop dynamic web pages with good aesthetic sense of
C407.1
designing and latest technical know-how's.
Design, develop and implement web applications based on Javascript, HTML5,
C407.2
XML,CSS and PHP .
C407.3 Gain the creativity and imagination to build the web pages
Have a good understanding of Web Application Terminologies, Internet Tools
C407.4 other web services
C407.5 Learn how to link and publish web sites

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT

[As per Choice Based Credit System (CBCS) scheme]
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 CREDITS – 02
Course objectives:
This course will enable students to
• Design and Develop static and dynamic web pages.

• Familiarize with client side program, server-side programming and active server pages.
• Learn database connectivity to web application.
PART-A: Web Programming (Max. Exam Mks. 50)
• The course will give you a grounding in the nuts and bolts of the tags, script, and code that create
web
pages.
• Learning how the web and web pages work by building on the skills and to understand the potentials
on writing for web pages.
• Design, develop and implement web applications based on Javascript, HTML5, XML,CSS and PHP .
PART-B: Mini Project (Max. Exam Mks. 30)
• Develop a web application project using HTML,JavaScript,XML,CSS and PHP with a good look and
feel effects.
• Design the project using web development framework along with essential database connectivity.

Lab Experiments
Part A: WEB TECHNOLOGY PRACTICALS
Sl.No. Program RBTL CO
CO
1 Write a javascript to design a simple calculator to perform the following operations: L3 1,2,3,4,5
sum, product, difference and quotient.
CO
Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and L3 1,2,3,4,5
2 outputs HTML text that displays the resulting values in an HTML table format.
CO
Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in L3 1,2,3,4,5
3 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
L3 CO
Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions 1,2,3,4,5
for the following problems: a. Parameter: A string
4 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
CO
Design an XML document to store information about a student in an engineering college L3 1,2,3,4,5
5 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.
CO
6 Write a PHP program to keep track of the number of visitors visiting the web page and to L3 1,2,3,4,5
display this count of visitors, with proper headings.
CO
7 Write a PHP program to display a digital clock which displays the current time of the L3 1,2,3,4,5
server. CO
8 Write the PHP programs to do the following: a. Implement simple calculator operations. b. L3 1,2,3,4,5
Find the transpose of a matrix. c. Multiplication of two matrices. d. Addition of two
matrices
CO
Write a PHP program named states.py that declares a variable states with value L3 1,2,3,4,5
"Mississippi Alabama Texas Massachusetts Kansas". write a PHP program that does the
following:
9 a. Search for a word in variable states that ends in xas. Store this word in element 0 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 element1 of 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.
CO
10 Write a PHP program to sort the student records which are stored in the database using L3 1,2,3,4,5
selection sort.

Part B: Mini project

• Develop a web application project using HTML,JavaScript,XML,CSS and PHP with a good look
and
feel effects.
• Design the project using web development framework along with essential database connectivity.
Mapping of Course Outcomes to Program Outcomes
PO PO PO PO PO PO PO PO PO PO PO PO PS PS PS
1 2 3 4 5 6 7 8 9 10 11 12 O1 O2 O3
C407.1 3 3 2 2 - - - - - - - - 3 3 1
C407.2 3 3 2 2 - - - - - - - - 3 3 1
C407.3 3 3 3 2 - - - - - - - - 3 3 1
C407.4 3 3 2 2 - - - - - - - - 3 3 1
C407.5 3 3 3 2 - - - - - - - - 3 3 1
Average 3 3 3 2 - - 3 3 1
Conduction of Practical Examination

1. All laboratory experiments from part A are to be included for practical examination.
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
7. Change of experiment is allowed only once and marks allotted to the procedure part to be made zero.
INSTRUCTIONS
1. The exercises are to be solved in an editor like Notepad++, dreamViewer.
2. Front end may be created using either HTML5 or HTML or any other framework.
4. The student need not create the front end in the examination. The results of the program may be
displayed directly.
5. Modification of existing program also be asked in the examination.
6. Questions must be asked based on lots.

Part A : Web Programs
1. Write a JavaScript to design a simple calculator to perform the following

operations:
sum, product, difference and quotient.
PROGRAM:
Save with .html extension

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JavaScript program to calculate multiplication and division of two numbers </title>
<style type="text/css">
body
{
background-color: #CCCCFF;
margin: 30px;
}
#result
{
display: block;
border: solid thin black;
padding: 5px;
}
</style>
<script type = "text/javascript">
var num1, num2;
function getNum()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
if(isNaN(num1) ||isNaN(num2) )
document.getElementById("result").innerHTML = "Enter valid Number";
}
function add()

{
getNum();
document.getElementById("result").innerHTML = +num1 + +num2;
}
function multiply()
{
getNum();
document.getElementById("result").innerHTML = num1 * num2;
}
function divide()
{
getNum();
document.getElementById("result").innerHTML = num1 / num2;
}
function quotient()
{
getNum();
document.getElementById("result").innerHTML = Math.trunc(num1 / num2);
}
</script>
</head>
<body>
<h3> Simple Javascript Calculator</h3>
<form>
<p> 1st Number : <input type="text" id="firstNumber" /> </p>
<p> 2nd Number: <input type="text" id="secondNumber" /> </p>
<input type="button" onClick="add()" Value="Add" />
<input type="button" onClick="multiply()" Value="Multiply" />
<input type="button" onClick="divide()" Value="Divide" />
<input type="button" onClick="quotient()" Value="Quotient" />
</form>
<p>The Result is : </p>

<span id = "result"></span>
</body>
</html>

Output:
Viva Questions:
1. What is HTML?
HTML, or HyperText Markup Language, is a Universal language which allows an individual using
special code to create web pages to be viewed on the Internet.
2. What is the structure of HTML ?
3. What is a tag?

In HTML, a tag tells the browser what to do. When we write an HTML page, we enter tags for many
reasons -- to change the appearance of text, to show a graphic, or to make a link to another page.
4. Explain CSS Syntax.
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style. The declaration block contains one or
more declarations separated by semicolons. Each declaration includes a CSS property name and a
value, separated by a colon.
5. Explain CSS Selectors.
CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class,
attribute, and more.
The element Selector
The element selector selects elements based on the element name.You can select all <p> elements on a
page like this (in this case, all <p> elements will be center-aligned, with a red text color):
Example
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element. The id of an
element should be unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
Example
#para1 {
text-align: center;
color: red;
}

The class Selector
The class selector selects elements with a specific class attribute.To select elements with a specific
class, write a period (.) character, followed by the name of the class. In the example below, all HTML
elements with class="center" will be red and center-aligned:
Example
.center {
text-align: center;
color: red;
}
6. Explain JavaScript HTML DOM Elements
HTML Elements can be handled by the following ways:
 Finding HTML elements by id

 Finding HTML elements by tag name
 Finding HTML elements by class name
 Finding HTML elements by CSS selectors
7. How can I include comments in HTML?
Technically, since HTML is an SGML application, HTML uses SGML comment syntax. However,
the full syntax is complex, and browsers don't support it in its entirety anyway. Therefore, use the
following simplified rule to create HTML comments that both have valid syntax and work in browsers:
An HTML comment begins with "", and does not contain "--" or ">" anywhere in
the comment.
The following are examples of HTML comments:
* 
* 
* 
8. What is <!DOCTYPE> ?
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the
<html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what
version of HTML the page is written in.
9. What is a Hypertext link?

A hypertext link is a special tag that links one page to another page or resource. If you click the link,
the browser jumps to the link's destination..

2. Write a JavaScript that calculates the square and cubes of the numbers from 0 to
10 and outputs HTML text that displays the resulting values in an HTML table
format.
PROGRAM:
<!DOCTYPE html>
<head>
<title> Javascript program to display squares and cubes</title>
body
{
background-color: #CCFFCC;
color:green;
margin: 30px;
}
table,th,td
{
border:1px solid black;
border-collapse:collapse;
padding: 5px;
}
</style>
</head>
<body>
<h3> Squares and Cubes of Numbers 0 to 10</h3>
<table> <tr> <th>Number</th> <th>Square</th> <th>Cube</th> </tr>
<script type="text/javascript">
for(var n=0; n<=10; n++)
{

document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" )

}
</script>
</table>
</body>
</html>
Output:
Viva Questions and Answers:
1. What is difference between HTML and XHTML?
The differences between HTML and XHTML are:

 HTML is application of Standard Generalized Markup Language(SGML) whereas XML is
application of Extensible Markup Language(XML).
 HTML is a static Web Page whereas XHTML is dynamic Web Page.
 HTML allows programmer to perform changes in the tags and use attribute minimization
whereas XHTML when user need a new markup tag then user can define it in this.
 HTML is about displaying information whereas XHTML is about describing the information
2. What is JavaScript ?
Javascript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and
make dynamic pages.

3. Does HTML support Javascripts?

Yes, HTML supports JavaScripts. We can use JavaScript anywhere in the HTML Coding. Mainly
there are four sections where we can add JavaScript in HTML.
 Head Section: we can add JavaScript in Head section of HTML.
<head>…..Javascript…. </head>
 Body Section: <body>….. Javascript…</body>
 Head and Body both: we can add Javascript in both head and body section.
<body….Javascript…</body> and <head>…..Javascript…. </head>
 External File: script in and external file and then include in <head> ….. </head> section.
4. How to insert Javascript in HTML?
We can insert JavaScript in HTML using <Script tag>. JavaScript can be enclosed in <script type =
text/javascript> and ending with </script>.
Example:
<html>
<body>
...JavaScript….
</script>
</body>
</html>
5. How to write comment in JavaScript?
There are two types of comments in JavaScript.
1. Single Line Comment: It is represented by // (double forward slash)

2. Multi Line Comment: It is represented by slash with asterisk symbol as /* write comment here
*/
6. How to create function in JavaScript?
To create function in JavaScript, follow the following syntax.
function function_name()
{
//function body
}

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.
PROGRAM:
<!DOCTYPE html>
<head>
<title> Javascript program to grow and shrink text</title>
body
{
background-color: #CCFFCC;
color:green;
margin: 30px;
}
</style>
var anim= setInterval(grow,100);

var fs=5;
function grow()
{
fs+=5;
document.getElementById("animText").innerHTML="TEXT-GROWING";
document.getElementById("animText").style.color="red";
document.getElementById("animText").style.fontSize=fs+"pt";
if(fs>50)
{
clearInterval(anim);
anim = setInterval(shrink,100);
}
}
function shrink()
{

fs-=5;
document.getElementById("animText").innerHTML="TEXT-SHRINKING";
document.getElementById("animText").style.color="blue";
document.getElementById("animText").style.fontSize=fs+"pt";
if(fs<5)
{
clearInterval(anim);
anim = setInterval(grow,100);
}
}
</script>
</head>
<body>
<p>
<span id ="animText"></span>
</p>
</body>
</html>
Output:

Viva Questions:
1. What is CSS?
CSS stands for Cascading Style Sheets. By using CSS with HTML we can change the look of the web
page by changing the font size and color of the font. CSS plays an important role in building the
website. Well written CSS file can be used to change the presentation of each web page. By including
only one CSS file. It gives web site developer and user more control over the web pages.
2. How many types CSS can be include in HTML?
There are three ways to include the CSS with HTML:

 Inline CSS: it is used when only small context is to be styled.
o To use inline styles add the style attribute in the relevant tag.
 External Style Sheet: is used when the style is applied to many pages.
o Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the
head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
 Internal Style Sheet: is used when a single document has a unique style.
o Internal styles sheet needs to put in the head section of an HTML page, by using the <style>

tag, like this:

<head>
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
3. What are style sheet properties?
CSS Background CSS Text CSS Font

CSS Border CSS Outline CSS Margin
CSS Padding CSS List CSS Table
4. List various font attributes used in style sheet.
font-style font-variant font-weight

font-size/line-height font-family caption
icon menu message-box

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
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Javascript functions </title>
body
{
background-color: #FFFDD0;
color:#8C8833;
margin: 30px;
}
#resultS, #resultN
{
display: block;
background-color: #FFFFFF;
}
#warningN
{
color:red;
font-style:italic;
}
</style>
<script type = "text/javascript">
function lvowel()
{
var str = document.getElementById("paramS").value.toUpperCase();
for(var i=0; i<str.length; i++)
{

chr = str.charAt(i);
if(chr=='A' || chr=='E' || chr=='I' || chr == 'O' || chr=='U')
{
document.getElementById("resultS").innerHTML="The leftmost vowel is in
position "+(i+1);
break;
}
}
}
function rev()
{
var num = document.getElementById("paramN").value;
if(isNaN(num))
{
document.getElementById("warningN").innerHTML = "Enter a valid Number!";
return;
}
else
document.getElementById("warningN").innerHTML = "";
var rev="";
for(var i=num.length-1; i>=0;i--)

{
rev+= num.charAt(i);
}
document.getElementById("resultN").innerHTML="The reverse is "+rev;
</script>
</head>
<body>
<header>
<h1>Javascript functions</h1>
</header>
<nav>
<ul>
<li>Find Left Most Vowel</li>
<li>Reverese of Number</li>
</ul>
</nav>

<section>
<h2 id="option">Choose an option</h2>
<article>
<h3> Find the left most vowel </h3>
<p>
Enter a string: <input id ='paramS' type='text' size='10' /><br />
<button onClick='lvowel()'> Enter </button>

</p>
<p id="resultS"> </p>
</article>
<article>
<h3> Find the reverse of a number </h3>
<p>
Enter a number: <input id ='paramN' type='text' size='10' /> <span id="warningN"></span> <br />
<button onClick='rev()'> Enter </button>
</p>
<p id="resultN"> </p>
</article>
</section>
<footer>
<p>© 2019 MVJCE. All rights reserved.</p>
</footer>
</body>
</html>

Output:
Viva Question and Answer:
1. What is the Use of SPAN in HTML and explain?
SPAN: Used for the following things:

 Highlight the any color text
 For adding colored text
 For adding background image to text.
Example:
<p>
<span style="color:#000000;">
In this page we use span.

</span>
</p>
2. Explain various HTML list tags.
In HTML we can list the element in two ways:

 Ordered list: in this list item are marked with numbers.
Syntax: <ol>
<li> first item </li>
<li>second item </li> </ol>
Display as:
1. First item
2. Second item.
 Unordered Lists: in this item are marked with bullets.

Syntax: <ul>
<li> first item </li>
<li>second item </li> </ul>
Display as:
-First item
-Second item.
3. What is section and article tag?
The <section> tag:

The section tag defines sections in a document, such as chapters, headers, footers, or any other
sections of the document.
The <article> tag:

The article tag specifies independent, self-contained content. An article should make its own
appearance and it should be possible to distribute it independently from the rest of the site.
4. What is buttons in HTML?
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this
element and buttons created with the <input> element.

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, Brach, Year of Joining, and e-mail id. Make up sample
data for 3 students. Create a CSS style sheet and use it to display the document.
PROGRAM:
1. studentDetails.xml
<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="student.css"?>
<VTU>
<STUDENT>
<USN>1MJ11CS001</USN>
<NAME>Arun Kumar</NAME>
<COLLEGE>MVJ College of Engineering</COLLEGE>
<BRANCH>Computer Science and Engineering</BRANCH>
<YEAR>2011</YEAR>
<EMAILID>[email protected]</EMAILID>
</STUDENT>
<STUDENT>
<USN>1MJ10ME012</USN>
<NAME>Swaroop J</NAME>
<BRANCH>Mechanical Engineering</BRANCH>
<YEAR>2010</YEAR>
</STUDENT>
<STUDENT>
<USN>1MJ12AE030</USN>
<NAME>Pradeep L</NAME>
<BRANCH>Aeronautical Engineering</BRANCH>
<YEAR>2012</YEAR>
</STUDENT>
</VTU>

2. student.css
VTU
{
background-color: #ffFFff;
width: 100%;
}
STUDENT
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
USN,NAME
{
color: #FF9900;
font-size: 14pt;
}
COLLEGE,BRANCH,YEAR
{
display: block;
color: #000000;
margin-left: 20pt;
}
EMAILID
{
display: block;
color: #0000FF;
margin-left: 20pt;
font-style: italic;
}

Output:
Viva Questions:
1. What is XML?
 XML stands for eXtensible Markup Language

 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
2. What is the difference between XML and HTML?
XML is no way clashes with HTML, since they are for two different purposes.
HTML XML
HTML is for displaying purpose. Whereas XML is for data representation.
HTML is used to mark up text so it can be XML is used to mark up data so it can be
displayed to users. processed by computers.
HTML describes both structure (e.g. <p>, XML describes only content, or “meaning”

<h2>, <em>) and appearance (e.g. <br>,

<font>, <i>)
HTML uses a fixed, unchangeable set of tags In XML, you make up your own tags
3. What is the structure of XML document ?
Figure 1: XML Structure
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each
side of an element (top, right, bottom, and left).

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.
PROGRAM:
<!DOCTYPE html >

<head >
<title>Visitor Counter</title>
body
{
background-color: #FFF6FF;
color:#D690D9;
margin: 30px;
}
.visitor
{
color: blue
}
</style>
</head>
<body>
<h1> Names of Flowers </h1>

<figure>
<img src="lilac-flower-3.jpg" width="200px" alt="Lilac Flower" />
<figcaption>The Lilac Flower</figcaption>
</figure>
<hr />
<?php
$handle = fopen("counter.txt", "r");
if(!$handle)
{

echo "could not open the file" ;

}
else
{
$counter = ( int ) fread ($handle,20) ;
fclose ($handle) ;
$counter++ ;
echo" <p class = 'visitor'>Number of page views: <em> ". $counter . " </em>" ;
$handle = fopen("counter.txt", "w" ) ;
fwrite($handle,$counter) ;
fclose ($handle) ;
}
?>
</body>
</html >
Output:
Note : you can put any sample content. Design a page to showcase your hobbies/interests and put a
visitor counter php script at the end.

1. What is PHP?
PHP is a recursive acronym for "PHP: Hypertext Preprocessor". PHP is a server side scripting
language that is embedded in HTML. It is used to manage dynamic content, databases, session
tracking, even build entire e-commerce sites.
2. What are the common usage of PHP?
Common uses of PHP −

• PHP performs system functions, i.e. from files on a system it can create, open, read, write, and
close them.
• PHP can handle forms, i.e. gather data from files, save data to a file, thru email you can send
data, return data to the user.
• You add, delete, modify elements within your database thru PHP.
• Access cookies variables and set cookies.
• Using PHP, you can restrict users to access some pages of your website.
• It can encrypt data.
3. How do you write "Hello World" in PHP?
echo "hello World"
4. What are the difference between print & echoing PHP?
echo in PHP
• echo is language constructs that display strings.
• echo has a void return type.
• echo can take multiple parameters separated by comma.
• echo is slightly faster than print.
Print in PHP
• print is language constructs that display strings.
• print has a return value of 1 so it can be used in expressions.
• print cannot take multiple parameters.
• print is slower than echo. How will you redirect a page using PHP?
5. What is header() ?
The PHP header() function supplies raw HTTP headers to the browser and can be used to redirect it to
another location. The redirection script should be at the very top of the page to prevent any other part
of the page from loading. The target is specified by the Location: header as the argument to the
header() function. After calling this function the exit() function can be used to halt parsing of rest of
the code.

6. How will you read a file in PHP?
Once a file is opened using fopen() function it can be read with a function called fread(). This function
requires two arguments. These must be the file pointer and the length of the file expressed in bytes.
<?php
$filename = "tmp.txt";
$file = fopen( $filename, "r" );
if( $file == false ) {

echo ( "Error in opening file" );
exit();
}
$filesize = filesize( $filename );

$filetext = fread( $file, $filesize );
fclose( $file );
echo ( "File size : $filesize bytes" );

echo ( "<pre>$filetext</pre>" );
?>

7. Write a PHP program to display a digital clock which displays the current time
of the server.
PROGRAM:
<!DOCTYPE html >

<head >
<title>Digital Clock</title>
body
{
background-color: #800020;
color:#6DF3D1;
margin: 30px;
}
#clock
{
margin: 20px;
padding: 20px;
width:400px;
border: medium dotted pink;
font-size: 50pt;
font-family : Century Gothic,sans-serif
}
</style>
</head>
<body>
<h1> DIGITAL CLOCK</h1>
<hr />
<?php
date_default_timezone_set('Asia/Kolkata');
$page = $_SERVER['PHP_SELF'];
$sec = "1";
header("Refresh: $sec; url=$page");

?>
<div id="clock"><?php echo idate("H") . " : ". idate("i"). " : ". idate("s");
usleep (100);?> </div>
</body>
</html>
Output:
1. How will you get current date and time using PHP?
PHP's time() function gives you all the information that you need about the current date and time. It
requires no arguments but returns an integer.
Eg:
<?php
$date_array = getdate();

foreach ( $date_array as $key => $val ){

print "$key = $val<br />";
}
$formated_date = "Today's date: ";

$formated_date .= $date_array['mday'] . "/";
$formated_date .= $date_array['mon'] . "/";
$formated_date .= $date_array['year'];
print $formated_date;
?>
2. How will you access session variables in pHP?
Session variables are stored in associative array called $_SESSION[]. These variables can be accessed
during lifetime of a session.
3. What does $_ENV mean?

$_ENV is an associative array of variables sent to the current PHP script via the environment method.
4. How will you get the browser’s detail in PHP?
One of the environment variables set by PHP is HTTP_USER_AGENT which identifies the user's
browser and operating system.

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
PROGRAM:
1. phpcalcMatrix.php
<!DOCTYPE html >

<head >
<title>PHP Simple Calculator, Matrix operations </title>
body
{
background-color: #FFF8DA;
color:#806E21;
margin: 30px;
}
#calculator
{
margin: 20px;
padding: 20px;
float: center;
border: thin solid black;
}
</style>
</head>
<body>
<h1> PHP Simple Calculator, Matrix operations</h1>
<div id ="calculator">
<h3> Simple Calculator</h3>
<form method = "get" action ="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="num1" placeholder="Number 1" />
<input type="text" name="num2" placeholder="Number 2" />
<select name="operator">
<option></option>

<option value = "+">Add</option>

<option value ="-">Subtract</option>
<option value ="*">Multiply</option>
<option value ="/">Divide<option>
</select>
<input type="submit" name="submit" value = "Calculate" />
</form>
<?php
if(isset($_GET['submit']))
{
$n1= $_GET['num1']; $n2 = $_GET['num2'];
$op = $_GET["operator"];
if(is_numeric($n1) && is_numeric($n2) )
{
$result = eval("return $n1 $op $n2;");
}
else
$result = "undefined";
//Note : eval is a dangerous function to use, so input has to be verified
/*switch($op){
case "+":
$result = $n1+$n2;
break;
case "-":
$result = $n1+$n2;
break;
case "*":
$result = $n1*$n2;
break;
case "/";
$result = $n1/$n2;
break;
}
*/
echo "<p> The result is : $result</p>";
}
?>
</div>
<div>
<h2> Matrix Operations</h2>
<ul>
<li> <a href="matTranspose.php">Transpose of a matrixx</a></li>
<li> <a href="matAM.php?op=mult">Multiply 2 Matrices</a></li>

<li> <a href="matAM.php?op=add">Add 2 Matrices</a></li>
</ul>
</div>
</body>
</html>
2. matTranspose.php
<!DOCTYPE html >

<head >
<title>PHP Simple Calculator, Matrix operations </title>
body
{
color:#806E21;
margin: 30px;
}
#matrix
{
margin: 20px;
padding: 20px;
float: center;
}
</style>
</head>
<body>
<a href="phpcalcMatrix.php">Back to Main Menu</a>
<h2>Transpose of a Matrix</h2>
<div id="matrix">
<form method="get" action = "matTranspose.php" >
Enter m an n values for m x n matrix :
<input type = "text" name ="m" size="5" placeholder="m" /> <input type = "text" name ="n"
size="5" placeholder="n" />
<input type = "submit" name="genMatrix" value="Enter" />
</form>
<?php
if(isset($_GET["genMatrix"]))

{
$m = $_GET['m']; $n = $_GET['n'];
echo "<form method= 'get' action = 'matTranspose.php'><table>";
for($i=0; $i<$m; $i++)
{
echo "<tr>";
for($j=0; $j<$n; $j++)
{
$val =$i.":".$j;
echo "<td><input type='text' size='4' name=$val /></td>";
}
echo"</tr>";
}
echo "</table>";
echo "<input type='hidden' name= 'm' value=$m /><input type='hidden' name='n' value=$n />";
echo "<input type='submit' name='transpose' value='Find Transpose' />";
echo "</form>";
}
if(isset($_GET["transpose"]))
{
$m = $_GET['m']; $n = $_GET['n'];
echo "Matrix Entered <br />";
for($i=0; $i<$m; $i++)
{
for($j=0; $j<$n; $j++)
{
$val =$i.":".$j;
$mat[$i][$j] = $_GET["$val"]; $transpose[$j][$i] = $mat[$i][$j];
echo $mat[$i][$j]." ";
}
echo "<br />";
}
echo "<p>Transpose of the Matrix : <br />";
for($i=0;$i<$n;$i++)
{
for($j=0;$j<$m;$j++)
{
echo $transpose[$i][$j]." ";
}
echo "<br />";
}
echo "</p>";

}
?>
</div>
</body>
</html>
3. matAM.php
<!DOCTYPE html >

<head >
<title>Matrix Operations</title>
body
{
color:#806E21;
margin: 30px;
}
table,tr,th,td
{
border-collapse:collapse;
padding:20px
}
.warning
{
color:red;
font-style: italic
}
</style>
</head>
<body>
<?php $op = $_GET["op"]; ?>

<a href="phpcalcMatrix.php">Back to Main Menu</a>
<h2>Matrix Operations :<?php if($op == "add") echo " Addition"; else if($op == "mult") echo "
Multiplication"; ?></h2>
<div>

<form method="get" action = "matAM.php" >

<p>
Enter m an n values for m x n matrix for matrix 1 :
<input type = "text" name ="m1" size="5" placeholder="m" /> <input type = "text" name
="n1" size="5" placeholder="n" />
</p>
<p>
Enter m an n values for m x n matrix for matrix 2 :
<input type = "text" name ="m2" size="5" placeholder="m" /> <input type = "text" name
="n2" size="5" placeholder="n" />
</p>
<p>
<input type='hidden' name='op' value='<?php echo $op?>' />
<input type = "submit" name="genMatrix" value="Enter" />
</p>
</form>
<?php
if(isset($_GET["genMatrix"]))
{
$m1 = $_GET['m1']; $n1 = $_GET['n1'];
$m2 = $_GET['m2']; $n2 = $_GET['n2'];
if($n1 != $m2 && $op == "mult")

{
echo "<p class='warning'> The Matrices cannot be multiplied! </p>";
}
else if (($m1!=$m2 || $n1 != $n2) && $op == "add")
{
echo "<p class='warning'> The Matrices cannot be added! </p>";
}
else
{
echo "<form method= 'get' action = 'matAM.php'>";
echo "<div>";
echo "<h4> Matrix 1 </h4>";
for($i=0; $i<$m1; $i++)

{
for($j=0; $j<$n1; $j++)
{
$val ="M1".":".$i.":".$j;
echo "<input type='text' size='4' name=$val />";
}

echo "<br />";

}
echo "</div> <div >";
echo "<h4>Matrix 2</h4>";
for($i=0; $i<$m2; $i++)

{
for($j=0; $j<$n2; $j++)
{
$val ="M2".":".$i.":".$j;
echo "<input type='text' size='4' name=$val />";
}
echo "<br />";
}
echo "</div>";
echo "<input type='hidden' name= 'm1' value=$m1 /><input type='hidden' name='n1' value=$n1 />";
echo "<input type='hidden' name= 'm2' value=$m2 /><input type='hidden' name='n2' value=$n2 />";
echo "<input type='hidden' name = 'op' value='$op' />";
echo "<input type='submit' name='submit' value='Enter' />";
echo "</form>";
} // end else
}
if(isset($_GET["submit"]))
{
$m1 = $_GET['m1']; $n1 = $_GET['n1'];

$m2 = $_GET['m2']; $n2 = $_GET['n2'];
echo "<table><tr><th> Matrix 1</th><th>Matrix 2</th><th>Result</th><tr><td>";
for($i=0; $i<$m1; $i++)

{
for($j=0; $j<$n1; $j++)
{
$val ="M1:".$i.":".$j;
$mat1[$i][$j] = $_GET["$val"];
echo $mat1[$i][$j]." ";
}
echo "<br />";
}
echo "</td><td>";
for($i=0; $i<$m2; $i++)
{
for($j=0; $j<$n2; $j++)

{
$val ="M2:".$i.":".$j;
$mat2[$i][$j] = $_GET["$val"];
echo $mat2[$i][$j]." ";
}
echo "<br />";
}
echo "</td><td>";
if($op =="mult")
{
for($i=0;$i<$m1;$i++)
{
for($j=0;$j<$n2;$j++)
{
$mul[$i][$j]=0;
for($k=0;$k<$m2;$k++)
{
$mul[$i][$j]+=$mat1[$i][$k] *$mat2[$k][$j];
}
echo $mul[$i][$j]." ";
}
echo "<br />";
}
}
else if($op == "add")

{
for($i=0;$i<$m1;$i++)
{
for($j=0;$j<$n2;$j++)
{
$res[$i][$j] = $mat1[$i][$j] + $mat2[$i][$j];
echo $res[$i][$j]." ";
}
echo "<br />";
}
}
echo "</td></tr></table>";
}
?>
</div>
</body>

</html>
OUTPUT:

Multiply 2 Matrices

Add 2 Matrices

Viva Question and Answer:
1. Explain how array can be created & elements are accessed in php?
An array is a data structure that stores one or more similar type of values in a single value.
There are three different kind of arrays and each array value is accessed using an ID c which is called
array index.
• Numeric array − An array with a numeric index. Values are stored and accessed in
linear fashion.
• Associative array − An array with strings as index. This stores element values in
association with key values rather than in a strict linear index order.
• Multidimensional array − An array containing one or more arrays and values are
accessed using multiple indices
<?php
/* Method to create Numeric array. */
$numbers = array( 1, 2, 3, 4, 5);
foreach( $numbers as $value ) {

echo "Value is $value <br />";
}
/* Second method to create array. */

$numbers[0] = "one";
$numbers[1] = "two";
$numbers[2] = "three";
$numbers[3] = "four";
$numbers[4] = "five";
foreach( $numbers as $value ) {

echo "Value is $value <br />";
}
?>
2. What is the purpose of $_PHP_SELF variable?
The PHP default variable $_PHP_SELF is used for the PHP script name and when you click "submit"
button then same PHP script will be called.

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.]
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.
PROGRAM:
1. states.php
<?php
$states = "Mississippi Alabama Texas Massachusetts Kansas";
?>
2. search.php
<!DOCTYPE html >

<head >
<title>Search </title>
body
{
background-color: #F0F8FF;
color:#456B8C;
margin: 30px;
}
#calculator
{
margin: 20px;
padding: 20px;

float: center;
}
</style>
</head>
<body>
<h1> Search in states</h1>

<?php include("states.php");
echo "<hr />";
// search for word ending in xas
preg_match( '/\b (\w*xas) \b/', $states, $match);
$statesList[0] = $match[0];
preg_match('/\b(k\w*s)\b/i', $states,$match);
preg_match('/\b(M\w*s)\b/', $states,$match);
preg_match('/\b(\w*a)\b/', $states,$match);
list($a, $b, $c, $d) = $statesList;
echo "<h4> State ending in xas </h4>";

echo $a;
echo "<h4> State beginning with k and ending in s -case insensitive </h4>";
echo $b;
echo "<h4> State beginning with M and ending in s</h4>";

echo $c;
echo "<h4> State ending with a</h4>";

echo $d;
?>
</body>
</html>

Output:
Viva Questions:
1. How do you get information from a form that is submitted using the "get" method?
$_[GET]
2. How will you get information sent via GET & POST method?
The PHP provides $_GET associative array to access all the sent information using GET method.
The PHP provides $_POST associative array to access all the sent information using POST method.
3. How will you locate a string within a string in PHP?
The strpos() function is used to search for a string or character within a string. If a match is found in
the string, this function will return the position of the first match. If no match is found, it will return
FALSE. Let's see if we can find the string "world" in our string −
<?php
echo strpos("Hello world!","world");
?>

10. Write a PHP program to sort the student records which are stored in the
database using selection sort.
PROGRAM:
1. Create a database with a student table in mySQL
 Go to http://localhost/phpmyadmin/
 Type “student_db” under Create database and click “Create”
 Type “student_tbl” and give number of fields as 5 under “Create New Table” and click
“Create”
 Specify names of fields, ID, USN, Name, branch, batch with appropriate data types. Add more
fields if required, click “Save”.
 Click on the key button in the ID row and make it Primary Key
 Edit ID field and set it to AutoIncrement.
 Enter 5 rows by clicking on insert and using GUI or selecting SQL and writing SQL statements
(Leave ID field empty, it will be auto-incremented)
 Click on “Browse” to see all the rows
<!DOCTYPE html >
<head >
<title>Sort Student List </title>
body {background-color: #FFFFCC; color:#806E21; margin: 30px;}
table, th, td {border-collapse:collapse; padding:5px; border:thin solid black};
</style>
</head>
<body>

<h2>Sort Student List </h2>
<?php
/* Sort USN wise assuming batch and branch are the same */
$results_con = mysqli_connect("localhost","root","","student_db");
if (mysqli_connect_errno())
echo "Failed to connect to MySQL: " . mysqli_connect_error();
$query="SELECT * from student_tbl";
if($result = $results_con->query($query)) {
echo "<h4>Student List before Sorting</h4>";
echo "<table><tr><th></th><th>USN</th><th><Name</th><th>Branch</th><th>Batch</th></tr>";
while($row= $result->fetch_assoc()) {
echo "<tr><td>".$row["ID"]."</td>";
echo "<td>".$row["USN"]."</td>";
echo "<td>".$row["Name"]."</td>";
echo "<td>".$row["Branch"]."</td>";
echo "<td>".$row["batch"]."</td></tr>";
echo "</table>";
$result = $results_con->query($query);
$rowcount =mysqli_num_rows($result);

$i=0; $j=0;
while($row = $result->fetch_array()) {
$minID = $row[0]; $minUSN = $row[1];
//echo "Initial: ".$minID." ".$minUSN." ". $row[1]. "<br />";
while($urow = $result->fetch_array()) {
if (strnatcmp($urow[1],$minUSN)<0){
$minID = $urow[0]; $minUSN = $urow[1];
//echo $minID." ".$minUSN." ". $row[1]. "<br />";
$query_min = "Select * from student_tbl where ID=$minID";
$result_min = $results_con->query($query_min);
$min_rec = $result_min->fetch_array();
$query_swap = "update student_tbl set USN='$row[1]', Name='$row[2]' where ID = $minID"; //echo

$query_swap."<br/>";
$result_swap = $results_con->query($query_swap);
$query_swap2 = "update student_tbl set USN='$min_rec[1]', Name='$min_rec[2]' where ID = $row[0]

"; //echo $query_swap2."<br/><br />";
$result_swap = $results_con->query($query_swap2);
$i++;
if($i==$rowcount-1) break;
$result = $results_con->query($query);
mysqli_data_seek($result,$i);

if($result = $results_con->query($query)) {
echo "<h4>Student List After Sorting</h4>";
echo "<table><tr><th></th><th>USN</th><th><Name</th><th>Branch</th><th>Batch</th></tr>";
while($row= $result->fetch_assoc()) {
echo "<tr><td>".$row["ID"]."</td>";
echo "<td>".$row["USN"]."</td>";
echo "<td>".$row["Name"]."</td>";
echo "<td>".$row["Branch"]."</td>";
echo "<td>".$row["batch"]."</td></tr>";
echo "</table>";
?>
</body>
</html>
Output:


Viva Questions:
1. How can we find the number of rows in a result set using PHP?
$result = mysql_query($sql, $db_link);

$num_rows = mysql_num_rows($result);
echo "$num_rows rows found";
2. How can we know the number of days between two given dates using PHP?
$date1 = date(‘yy -mm—dd’);

$date2 = ’01-08-2018’;
$days = (strtotime($date1) – strtotime($date2)) / (60 * 60 * 24);

CONTENT BEYOND SYLLABUS

1) Program to display a message "Welcome!!!" on your webpage and when the user hovers over
the message, a popup should be displayed with a message "Welcome to my WebPage!!!"
<html>
<head>
<title>Event!!!</title>
function trigger()
{
document.getElementById("hover").addEventListener("mouseover", popup);
function popup()
{
alert("Welcome to my WebPage!!!");
}
}
</script>
<style>
p
{
font-size:50px;
position: fixed;
left: 550px;
top: 300px;
}
</style>
</head>
<body onload="trigger();">
<p id="hover">Welcome!!!</p>
</body>
</html>
2) Program to illustrate the different phases of event propogation
<html>
<head>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
</head>

<body>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
</body>
</html>
3)PHP function to test whether a number is greater than 30, 20 or 10 using ternary operator.
<?php
function trinary_Test($n){
$r = $n > 30
? "greater than 30"
: ($n > 20
? "greater than 20"
: ($n >10
? "greater than 10"
: "Input a number atleast greater than 10!"));
4)Write a PHP program to print following pattern :
<?php
for( $i=65; $i<=69; $i++){
for($j=5; $j>=$i-64; $j--){
echo chr($i);
}
echo "<br>";
}
?>
5)Even Odd Program using Form in PHP.
<html>

<body>
<form method="post">
Enter a number:
<input type="number" name="number">
<input type="submit" value="Submit">
</form>
</body>
</html>
<?php
if($_POST){
$number = $_POST['number'];
//divide entered number by 2
//if the reminder is 0 then the number is even otherwise the number is odd
if(($number % 2) == 0)
{
echo "$number is an Even number";
}
else
{
echo "$number is Odd number";
}
}
?>
Output:

PART- B:MINI-PROJECT
Student should develop mini project on the topics mentioned below or similar applications using Open GL API.
Consider all types of attributes like color, thickness, styles, font, background, speed etc., while doing mini
project. (During the practical exam: the students should demonstrate and answer Viva-Voce)
Sample Topics: Simulation of concepts of OS, Data structures, algorithms etc.
Conduction of Practical Examination

1. All laboratory experiments from part A are to be included for practical examination.
2. Mini project has to be evaluated for 30 Marks as per 6(b).
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
7. Change of experiment is allowed only once and marks allotted to the procedure part to be made zero.

MVJ COLLEGE OF ENGINEERING

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
DO’S AND DON’TS
Do’s
1. Do wear ID card and follow dress code.
2. Do log off the computers when you finish.
3. Do ask the staff for assistance if you need help.
4. Do keep your voice low when speaking to others in the LAB.
5. Do ask for assistance in downloading any software.
6. Do make suggestions as to how we can improve the LAB.
7. In case of any hardware related problem, ask LAB in charge for solution.
8. If you are the last one leaving the LAB , make sure that the staff in charge of the LAB is
informed to close the LAB.
9. Be on time to LAB sessions.
10. Do keep the LAB as clean as possible.
Don’ts
1. Do not use mobile phone inside the lab.
2. Don’t do anything that can make the LAB dirty (like eating, throwing waste papers etc).
3. Do not carry any external devices without permission.
4. Don’t move the chairs of the LAB.
5. Don’t interchange any part of one computer with another.
6. Don’t leave the computers of the LAB turned on while leaving the LAB.
7. Do not install or download any software or modify or delete any system files on any lab
computers.
8. Do not damage, remove, or disconnect any labels, parts, cables, or equipment.
9. Don’t attempt to bypass the computer security system.
10. Do not read or modify other user’s file.
11. If you leave the lab, do not leave your personal belongings unattended. We are not responsible
for any theft.

15CSL77 - Web Lab Manual - 19-20 PDF

Uploaded by

Copyright:

Available Formats

15CSL77 - Web Lab Manual - 19-20 PDF

Uploaded by

Document Information

Original Title

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

15CSL77 - Web Lab Manual - 19-20 PDF

Uploaded by

Copyright:

Available Formats

NEAR ITPB, CHANNASANDRA, BENGALURU – 560 067

Affiliated to VTU, Belagavi

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

BRANCH : COMPUTER SCIENCE AND ENGINEERING

UNIVERSITY SEAT NO. :

SEMESTER & SECTION : VII

Department of Computer Science and Engineering

Vision of the Department:

Mission of the Department:

1. Concepts of computing discipline: To educate students at under graduate, postgraduate and

3. Continuous Teaching Learning: To promote a teaching learning process that brings

4. Social Responsibility and Ethical Values: To inculcate professional behavior, innovative

PEOs ,POs & PSOs of the Department

PROGRAM EDUCATIONAL OBJECTIVES

PEO4: Entrepreneur: Graduates will be able to become entrepreneur to address

Dept of CSE, MVJCE Page - 2 - 2019-20

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,

4. Conduct investigations of complex problems: Use research-based knowledge and research

10. Communication: Communicate effectively on complex engineering activities with the

Dept of CSE, MVJCE Page - 3 - 2019-20

PROGRAM SPECIFIC OUTCOMES

Dept of CSE, MVJCE Page - 4 - 2019-20

WEB TECHNOLOGY LABORATORY WITH MINI PROJECT

SEMESTER – VII Subject Code 15CSL77

This course will enable students to

• Design and Develop static and dynamic web pages.

PART-A: Web Programming (Max. Exam Mks. 50)

PART-B: Mini Project (Max. Exam Mks. 30)

Dept of CSE, MVJCE Page - 5 - 2019-20

Dept of CSE, MVJCE Page - 6 - 2019-20

Part B: Mini project

Conduction of Practical Examination

Dept of CSE, MVJCE Page - 7 - 2019-20

Part A : Web Programs

1. Write a JavaScript to design a simple calculator to perform the following

Save with .html extension

<script type = "text/javascript">

var num1, num2;

Dept of CSE, MVJCE Page - 8 - 2019-20

<p>The Result is : </p>

Dept of CSE, MVJCE Page - 9 - 2019-20

2. What is the structure of HTML ?

Dept of CSE, MVJCE Page - 10 - 2019-20

4. Explain CSS Syntax.

A CSS rule-set consists of a selector and a declaration block:

5. Explain CSS Selectors.

The element Selector

Dept of CSE, MVJCE Page - 11 - 2019-20

The class Selector

 Finding HTML elements by id

7. How can I include comments in HTML?

9. What is a Hypertext link?

Dept of CSE, MVJCE Page - 12 - 2019-20

Save with .html extension

Dept of CSE, MVJCE Page - 13 - 2019-20

document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n + "</td></tr>" )

Viva Questions and Answers:

1. What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

document.write( "<tr><td>" + n + "</td><td>" + nn + "</td><td>" + nn*n + "</td></tr>" )