WEBLAB MANUAL

PROGRAMMING THE WEB

(10CSL78)

LAB MANUAL

For

viI SEMESTER

MAHARAJA INSTITUTE OF TECHNOLOGY, MYSORE

Department Of Computer Science & Engineering

MIT-Mysore

PROGRAMMING THE WEB [2013]

DEPT OF CSE 1 MIT, MYSORE

INDEX

Sl No TITLE

1.

Develop and demonstrate a XHTML file that includes JavaScript script for the following

problems:

a) Input: a number n obtained using prompt

Output: The first n Fibonacci numbers.

b) Input: A number n obtained using prompt

Output: Numbers 1 to n and their squares, using alert.

2.

Develop and demonstrate, using JavaScript, a XHTML file that collects the USN(the

valid format is: A digit from 1 to 4 followed by two upper case characters followed by

three digits; no embedded Spaces allowed) of the user. Event handler must be included

for the form element that collects this information to validate the input. Messages in the

alert window must be produced when errors are detected.

Modify the above program to get the current semester also(number between 1 and 8).

3.

Develop and demonstrate using JavaScript script, a XHTML document that contains three

short paragraphs Of text, stacked on top of each other, with only enough of each showing

so that the mouse cursor can be placed over some part of them. When the cursor is placed

over the exposed part of any paragraph, it should rise to the top to become completely

visible.

Modify the above document so that when a paragraph is moved from the top stacking

position, it returns to its original position rather than to the bottom.

4.

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

affiliated to VTU. The information must include USN, Name, 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.

b) Create an XSLT stylesheet for one student element of the above document and use it to

create a display of that element.

5.

a) Write a Perl program to display various server information like Server Name, Server

Software, Protocol, CGI Revision, etc.

b) Write a Perl program to accept a UNIX command from an HTML form and to display the

output of the command executed.

6.

a) Write a Perl program to accept the user name and to display a greeting message randomly

chosen from a list of 4 greeting messages.

b) Write a Perl program to keep track of the number of Visitors visiting the Web page and to

display this count of visitors, with proper headings.

7. Write a Perl program to display a digital clock which displays the current time of the

server.

8. Write a Perl program to insert name and age information entered by the user into a table

created using MySQL and to display the current contents of this table.



9. Write a PHP program to store current date-time in a COOKIE and display the „Last visited

on‟ date-time on the web page upon reopening of the same page.

10. Write a PHP program to store page views count in SESSION, to increment the count on

each refresh, and to show the count on web page.

11.

Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text

fields. On submitting, store the values in MySQL table. Retrieve and display the data

based on Name.

12.

Build a Rails application to accept book information viz. Accession number, title, authors,

edition

and publisher from a web page and store the information in a database and to search for a

book with the title specified by the user and to display the search results with proper

headings



INTRODUCTION

What is HTML?

HTML, stands for HyperText Markup Language, is the predominant markup language for web

pages. It provides a means to create structured documents by denoting structural semantics for text such as

headings, paragraphs, lists, links, quotes and other items. It allows images and objects to be embedded and

can be used to create interactive forms.

The definition of HTML is.

HyperText is the method by which you move around on the web by clicking on special text called

hyperlinks which bring you to the next page. Hyper just means it is not linear i.e. you can go to any

place on the Internet whenever you want by clicking on links there is no set order to do things in.

Markup is what HTML tags do to the text inside them. They mark it as a certain type of text

(italicised text, for example).

HTML is a Language, as it has code-words and syntax like any other language.

How does it work?

HTML consists of a series of short codes typed into a text-file. The text is then saved as a html file,

and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and

translates the text into a visible form. Writing your own HTML entails using tags correctly to create your

vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML

pages.

What is HTTP?

HyperText Transfer Protocol is the protocol for transferring hypertext requests and information

between servers and browsers. HTTP defines how messages are formatted and transmitted, and what actions

Web servers and browsers should take in response to various commands. For example, when you enter a

URL in your browser, this actually sends an HTTP command to the Web server directing it to fetch and

transmit the requested Web page.

HTTP is called a stateless protocol because each command is executed independently, without any

knowledge of the commands that came before it. This is the main reason that it is difficult to implement Web

sites that react intelligently to user input.

http://en.wikipedia.org/wiki/Markup_language

http://en.wikipedia.org/wiki/Web_page



http://en.wikipedia.org/wiki/Structured_document

http://en.wikipedia.org/wiki/Semantic

http://en.wikipedia.org/wiki/HTML_element#Images_and_objects

http://en.wikipedia.org/wiki/HTML_element#Forms

http://www.yourhtmlsource.com/starthere/glossary.html#browser

http://www.webopedia.com/TERM/H/Web_server.html

http://www.webopedia.com/TERM/H/browser.html

http://www.webopedia.com/TERM/H/URL.html

http://www.webopedia.com/TERM/H/web_page.html

http://www.webopedia.com/TERM/H/stateless.html

http://www.webopedia.com/TERM/H/web_site.html





URL (Uniform Resource Locator)

Uniform Resource Locator is the global address of documents and other resources on the World

Wide Web.

The first part of the address is called a protocol identifier and it indicates what protocol to use, the

second part is called a resource name and it specifies the IP address or the domain name where the resource

is located. The protocol identifier and the resource name are separated by a colon and two forward slashes.

For example:

http://www.simplygraphix.com/

and a typical page on this site would be:

http://www.simplygraphix.com/portfolio/4.html

The above URL consists of:

Protocol: http

Host computer name: www

Domain name: simplygraphix

Domain type: com

Path: /portfolio

File name 4.html

What is XHTML?

XHTML eXtensable HyperText Markup Language has a more strict syntax rules in comparison of

HTML. XHTML gives you a more consistent, well structured format so that your web pages can be easily

parsed and processed by present and future web browsers. It also makes your website easier to maintain,

edit, convert and format in the long run.

XHTML is an official standard of the World Wide Web Consortium (W3C), your website will be

compatible to more browsers and will be rendered more accurately. XHTML combines strength of HTML

and XML and XHTML pages can be rendered by all XML enabled devices.

http://www.webopedia.com/TERM/U/address.html

http://www.webopedia.com/TERM/U/document.html

http://www.webopedia.com/TERM/U/resource.html

http://www.webopedia.com/TERM/U/World_Wide_Web.html



http://www.webopedia.com/TERM/U/IP_address.html

http://www.webopedia.com/TERM/U/domain_name.html

http://www.simplygraphix.com/#_blank

http://www.simplygraphix.com/portfolio/4.html#_blank



XHTML defines a quality standard for your webpages, if you follows that then your web pages will

be counted quality web pages and W3C certifies those pages with their quality stamp.

There are several main changes in XHTML from HTML:

All tags must be in lower case

All documents must have a document type.

All tags must be closed

All attributes must be added properly

Attributes cannot be shortened

All tags must be properly nested

What is XML?

XML stands for EXtensible Markup Language. XML is a markup language much like HTML

designed to carry data, not to display data. XML tags are not predefined. You must define your own tags.

XML is designed to be self-descriptive XML is a W3C Recommendation.

Why XML?

XML was created so that richly structured documents could be used over the web. HTML and

SGML, are not practical for this purpose.HTML, comes bound with a set of semantics and does not provide

arbitrary structure. SGML provides arbitrary structure, but is too difficult to implement just for a web

browser. Full SGML systems solve large, complex problems that justify their expense. Viewing structured

documents sent over the web rarely carries such justification. While XML is being designed to deliver

structured content over the web, some of the very features it lacks to make this practical, make SGML a

more satisfactory solution for the creation and long-time storage of complex documents.

The XML Prolog

The prolog is an optional component of the XML document. If included, the prolog must appear

before the root element. A prolog consists of two parts: the XML Declaration and the Document Type

Declaration (DTD). Depending on your needs, you can choose to include both, either, or neither of these

items in your XML document.

XML Declaration :



Syntax

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>

The XML declaration may contain the following attributes:

version

Identifies the version of the XML markup language used in the data. This attribute is not optional.

encoding

Identifies the character set used to encode the data. "ISO-8859-1" is "Latin-1" the Western European

and English language character set. The default is compressed Unicode: UTF-8.

standalone

Tells whether or not this document references an external entity or an external data type

specification. If there are no external references, then "yes" is appropriate.

XML Document Type Declaration (DTD) :

The Document Type Declaration is a file that contains the necessary rules that the XML code in this

file must follow. You may think of the DTD as the grammar that the XML document must abide by to be a

valid XML file.

Referencing an External DTD:

There are two type declarations that may be used to reference an external DTD: PUBLIC and

SYSTEM. When creating an XML document under the rules of a publicly distributed DTD, use PUBLIC.

Otherwise, use the SYSTEM type declaration.

The example below shows a prolog that would be used for an HTML document that is using an XML

prolog. The DTD is publicly available.

XML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Let's take a look at each piece of this external DTD reference.

!DOCTYPE - Tell the XML processor that this piece of code defines the Document Type Definition



html - Specifies the root element of the XML document. Here our example is an HTML file, which

has <html> as the root element.

PUBLIC - Specifies that this is a publicly available DTD.

"-//W3C//D..." - The definition of the public document.

"http://www.w3.org/..." - The physical location of the DTD.

XML Namespace Syntax :

The XML namespace is a special type of reserved XML attribute that you place in an XML tag. The

reserved attribute is actually more like a prefix that you attach to any namespace you create. This attribute

prefix is "xmlns:", which stands for XML Namespace. The colon is used to separate the prefix from your

namespace that you are creating.

xmlns must have a unique value that no other namespace in the document has. What is commonly

used is the URI (Uniform Resource Identifier) or the more commonly used URL.

Namespace attribute takes the form:

xmlns : prefix="namespaceURI"

xmlns is required; it identifies this as an XML namespace declaration.

:prefix (note the leading colon) is optional. If you include it, all element names in the document from

the indicated namespace must be prefixed with these characters, followed by a colon.

namespaceURI is required. It uniquely identifies a namespace in this document and in others.

Example : -

<html xmlns="http://www.w3.org/1999/xhtml">

Applications of XML

Although there are countless numbers of applications that use XML, here are a few examples of the

current platforms and applications that are making use of this technology:

Cell Phones - XML data is sent to some cell phones. The data is then formatted by the specification

of the cell phone software designer to display text or images, and even to play sounds!



File Converters - Many applications have been written to convert existing documents into the XML

standard. An example is a PDF to XML converter.

VoiceXML - Converts XML documents into an audio format so that you can listen to an XML

document.

Cascading Style Sheets (CSS):

They are a way to control the look and feel of your HTML documents in an organized and efficient

manner.

With plain HTML you define the colors and sizes of text and tables throughout your pages. If you

want to change a certain element you will therefore have to work your way through the document and

change it. With CSS you define the colors and sizes in "styles". Then as you write your documents you refer

to the styles. Therefore: if you change a certain style it will change the look of your entire site. Another big

advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel

of your site. CSS can be written so the user will only need to download it once - in the external style sheet

document. When surfing the rest of your site the CSS will be cached on the users computer, and therefore

speed up the loading time.

CSS Syntax:

Style rules are comprised of two things, the selector and the declaration.

selector - The HTML tag that will be affected by the rule

declaration - The specific style calls that will affect the selector

The complete syntax for a style rule is:

selector {property : value;}

Example : b {color: red;}

You can also group together components that you would like to have the same style. For example, if

you wanted all the H1, H2 and bold text red, you could write:

b {color: red;}

h1 {color: red;}

h2 {color: red;}

You put them all on the same line:

b, h1, h2 {color: red;}

You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and

Arial font, you would write:

h3 {

font-family: Arial;

color: blue;

}

Placement of CSS Elements:

Style sheets can be place in three places in a document, in the <head>, in an external file, or within

an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls

affect the entire page or any page that loads the style sheet.

Styles within the Tags

CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have

to specify the desired CSS properties with the style HTML attribute.

Example : <h4 style="color: #0000ff;">another blue headline</h4>

Styles within the Head of the Document

To create a style sheet within the header of your HTML document, you enclose it in <style> tags. It

is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the

style rules within comment tags so that older browsers do not display them as text on the page. For example:

<head>

<style type="text/css">



</style>

</head>

Finally, you can create a separate document with all of your style information in it and either link or

import it into your document. If you have a large site and would like to maintain consistency across it, then

external style sheets are the way to go. They provide you with a simple way to dictate how all instances of

various tags will be displayed.

Linking a Style Sheet

The benefit to linking a style sheet into your document is that it is supported by both the major 4.0

browsers. You call a linked style sheet like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Importing a Style Sheet

Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep

all your style information in the same place, within the <style> element, while also loading external files as

style commands. For example:

<style>

@import URL (http://yoursite.com/stylesheet.css);

H4 { color: #0000ff; }

</style>

Advantages of CSS :

Easy Maintenance

File Size : Probably the mostly useful feature of CSS is that all of the style and layout is removed

from the html, so the html page size is very much smaller. The CSS file is downloaded just once by

the visitor's browser and re-used for different pages on a web site. This reduces the bandwidth

requirements for your server and also ensures a faster download for your visitors.

Accessibility : Separating style from content makes life very easy for visitors who prefer to view

only the content of a web page, or to modify the content. These could be blind or partially sighted

people who might use a screen reader to interpret a page.



Consistency : Layout and position of navigation can be completely consistent across a site. This was

previously possible only using frames.

Improved Search Engine Results: With use of CSS, you can keep your HTML code much cleaner. As

a result search engine bots do not have to separate the real content from the junk code. You are also

free to put any content anywhere in your document with CSS. This will aid the search engine

crawlers to identify the important content first.

Flexibility in defining style: The name cascading indicates that we can use more than one style and

the priority is given to local styles first. We can override the global style declared and locally assign

the style to the tag.

Java Script:

JavaScript is a scripting language that will allow you to add real programming to your webpages. It

can enhance the dynamics and interactive features of your page by allowing you to perform calculations,

check forms, write interactive games, add special effects, customize graphics selections, and create security

passwords.

What can a JavaScript do?

JavaScript gives HTML designers a programming tool - HTML authors are normally not

programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can

put small "snippets" of code into their HTML pages

JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:

document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page

JavaScript can react to events - A JavaScript can be set to execute when something happens, like

when a page has finished loading or when a user clicks on an HTML element

JavaScript can read and write HTML elements - A JavaScript can read and change the content of

an HTML element

JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is

submitted to a server. This saves the server from extra processing

JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the

visitor's browser, and - depending on the browser - load another page specifically designed for that

browser



JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve

information on the visitor's computer

Where to place JavaScript :

There are three general areas that JavaScript can be placed for use in a webpage.

1. Inside the head tag

2. Within the body tag

3. In an external file

The location choice of head or body is very simple. If you want to have a script run on some event, such

as when a user clicks somewhere, then you will place that script in the head. If you want the script to run

when the page loads then you place the script within the body tag.

CGI (Common Gateway Interface)

CGI is one method by which a web server can obtain data from (or send data to) databases,

documents, and other programs, and presents that data to viewers via the web. More simply, a CGI is a

program intended to be run on the web. A CGI program can be written in any programming language, but

Perl is one of the most popular language being used.

PHP

PHP is an HTML-embedded scripting language. Much of its syntax is borrowed from C, Java and

Perl with a couple of unique PHP-specific features thrown in. The goal of the language is to allow web

developers to write dynamically generated pages quickly.

Syntax :

A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block can be

placed anywhere in the document.

On servers with shorthand support enabled you can start a scripting block with <? and end with ?>.



XHTML and Java script

In programs numbering 1 to 3 Java script is embedded within the body of the XHTML file

Execution steps for programs 1 to 3

Step 1: Start -> Text Editor(pluma) -> Type the Program.

Step 2: Save the Program with .html extension.

Step 3: File -> Open the file with extension .html to see the output.

Error debugging of javascript can be done using the error console of firefox browser by selecting

Tools->Error console->Errors as shown in screenshot below



1 Develop and demonstrate a XHTML file that includes JavaScript script for the following problems:

a) Input: A number n obtained using prompt

Output: The first n Fibonacci numbers

Note:Javascript script is embedded within the body of the XHTML file. The script contains the code to

accept the value of n using a prompt. The first n Fibonacci numbers are then calculated using a for loop.

Each number is displayed in the browser window, in order.

1a.html

<?xml version ="1.0" encoding ="utf-8" ?>

<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1 EN">

<html>

<head>

<title>Fibonacci Series</title>

</head><body>

<script type=text/javascript>

var fib1=0,fib2=1,fib=0;

var num = prompt("Enter a number : \n", "");

if(num!=null && num>0)

{

document.write("<h1>First \t" + num + "\t Fibonacci Numbers are <br> </h1>");

if(num==1)

document.write("<h1>" + fib1 + "</h1>");

else

document.write("<h1>" + fib1 + " <br> " + fib2 + "</h1>");

for(i=3;i<=num;i++)

{

fib=fib1 + fib2;

document.write("<h1>" + fib + "</h1>");

fib1=fib2;

fib2=fib;

}

}

else



alert("No proper input");

</script>

</body></html>

Input snap of 1a.html

Output Snap of 1a.html



1 b) Input: A number n obtained using prompt

Output: A table of numbers from 1 to n and their squares using alert

Note: Javascript script is embedded within body of XHTML document, which accepts the value of n using

a prompt.In a for loop that runs from 1 to n, for each value, the number and its square are displayed using

the alert message box.

1b.html

<?xml version ="1.0" encoding ="utf-8" ?>

<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1 EN">

<html>

<head>

<title>Number and its squares</title>

</head>

<body>


var num = prompt("Enter a number : \n", " ");

if(num>0 && num !=null)

{

msgstr="Number and its squares are \n";

for(i=1;i<=num;i++)

{

msgstr = msgstr + i + "-" + i * i + "\n";

}

alert(msgstr)

}

else

alert("no input supplied");

</script>

</body>

</html>

Inputsnap snap of 1b.html



Output Snap of 1b.html



2 a) Develop and demonstrate, using Javascript script, a XHTML document that collects the USN (

the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits

followed by two upper-case characters followed by three digits; no embedded spaces allowed) of the

user. Event handler must be included for the form element that collects this information to validate

the input. Messages in the alert windows must be produced when errors are detected.

Note: The USN is accepted through a text box. When the submit button is clicked, the javascript function for

checking validity of the USN is called. The entered USN is compared with the valid pattern defined by a

regular expression. If there is a mistake, an alert message is displayed saying so, and the USN typed in the

textbox is focused so that the user can enter the right USN.

2a.html

<?xml version = "1.0" encoding = "utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

<html>


function formValidator()

{

var usn=document.getElementById("req1");

if(validUsn(usn))

{

alert(usn.value);

return true;

}

return false;

}

function validUsn(elem)

{

exp=/^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/

if(elem.value.length==0)

{

alert("US Number is empty");

return false;



}

else if(!elem.value.match(exp))

{

alert("US Number should be in DAADDAADDD format");

return false;

}

alert("US Number IS CORRECT");

return true;

}

</script><body bgcolor=green>

<form onsubmit=formValidator()>

Enter your USN. in DAADDAADDD format : <input type=text id=req1 />

<input type=submit value="Check Field" />

</form></body></html>

Input and OutputSnap 2a.html



2.b) Modify the above program to get the current semester also (restricted to be number from 1 to 8)

Note: In addition to the above, the semester is also accepted. If the value entered is greater than 8, or lesser

than 1, an alert message is displayed saying the same. The value is then focused so that the user can enter the

correct value.

2b.html

<?xml version="1.0" encoding="utf-8" ?>


<html>

<head>


function formValidator()

{ var usn = document.getElementById("req1");

var sem = document.getElementById("req2");

if(validUsn(usn))

{

if(validSem(sem))

return true;

}

return false;

}

function validSem(elem2)

{ var exp2=/^[1-8]$/

if(elem2.value.length == 0)

{ alert("Semester Number is empty");

elem2.focus();

return false;

}

else if(!elem2.value.match(exp2))

{

alert("Invalid Semester Number");

elem2.focus();

return false;



}

alert("Semester Number IS CORRECT");

return true;

}

function validUsn(elem1)

{

var exp1=/^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/

if(elem1.value.length == 0)

{ alert("US Number is empty");

elem1.focus();

return false;

}

else if(!elem1.value.match(exp1))

{

alert("US Number should be in DAADDAADDD format");

elem1.focus();

return false; }

alert("US Number IS CORRECT");

return true;

}

</script>

</head>

<body bgcolor=green>

<form onsubmit="return formValidator();" >

Enter your USN. in DUUDDUUDDD format :

<input type=text id=req1 /> <br/>

Enter your Sem. in D[1-8] format :

<input type=text id=req2 /> <br/>

<input type=submit value="Check Field" />

</form>

</body>

</html>



OutputSnap 2b.html

OutputSnap 2b.html



3 a) Develop and demonstrate, using Java Script ,a XHTML document that contains three short

paragraphs of text ,stacked on top of each other , with only enough of each showing so that the mouse

cursor can be placed over some part of them .when the cursor is placed over the exposed part of any

paragraph , it should rise to the top to become completely visible

Note: The javascript script embedded in the XHTML file consists of a „mover‟ function. The id of the

paragraph that is currently on top is stored in a variable „toplayer‟. The id of the paragraph that has been

selected is passed as an argument to the function. Using the getElementById method, the z-Index(depth

factor) of the paragraph that was previously on top is set to 0 and the z-Index of the newly selected

paragraph is set to 10. The toplayer variable is updated to hold the id of the paragraph that is currently on

top.Within the XHTML body, the paragraphs are defined. The element attributes are defined using an

document level style sheet. The mover function is called whenever the mouse cursor is placed over any of

the paragraphs(onmouseover tag attribute is used).

3a.html

<?xml version="1.0" encoding="UTF-8"?>


<html>

<head>

<title>The Stacking order</title>

<style type=text/css>

.layer1style

{

border:solid thick pink;

padding:1em;

width:500px;

background-color:green;

position:absolute;

top:100px;

left:400px;

z-index:1;

}

.layer2style



{

border:solid thick black;

padding:1em;

width:500px;

background-color:blue;

position:absolute;

top:120px;

left:420px;

z-index:2;

}

.layer3style

{

border:solid thick green;

padding:1em;

width:500px;

background-color:white;

position:absolute;

top:140px;

left:440px;

z-index:3;

}

</style>


var topLayer="layer3";

function mover(toTop)

{

var oldTop=document.getElementById(topLayer).style;

var newTop=document.getElementById(toTop).style;

oldTop.zIndex=0;

newTop.zIndex=25;

topLayer=document.getElementById(toTop).id;

}



</script></head>

<body style=background-color:yellow>

<h2 style=text-align:center;color:red>

Program includes XHTML document to show the stacking of paragraphs

</h2>

<p class=layer1style id=layer1 onmouseover=mover("layer1")>

HTML, stands for HyperText Markup Language, is the predominant markup language for web pages.It

provides a means to create structured documents .

</p>


XHTML eXtensable HyperText Markup Language has a more strict syntax rules in comparison of HTML.

XHTML gives a more consistent, well structured format.

</p>


Internet has evolved over the last 20 years and it has made the livings of millions highly dependent on it and

hence it's necessary for all to learn the way of programming the WEB.

</p></body></html>

OutputSnap

3a.html



3 (b) Modify the above document so that when a paragraph is moved from the top stacking position ,it

returns to its original position rather than to the bottom

3b.html

<?xml version="1.0" encoding="UTF-8"?>


<html>

<head>

<title>The Stacking order</title>

<style type=text/css>

.layer1style

{

border:solid thick pink;

padding:1em;

width:500px;

background-color:green;

position:absolute;

top:100px;

left:400px;

z-index:1;

}

.layer2style

{

border:solid thick black;

padding:1em;

width:500px;

background-color:blue;

position:absolute;

top:120px;

left:420px;

z-index:2;

}

.layer3style

{



border:solid thick green ;

padding:1em;

width:500px;

background-color:white;

position:absolute;

top:140px;

left:440px;

z-index:3;

}

</style>


var topLayer="layer3";

var origpos;

function mover(toTop,pos)

{

var newTop=document.getElementById(toTop).style;

newTop.zIndex=10;

topLayer=document.getElementById(toTop).id;

origPos=pos;

}

function moveBack()

{

document.getElementById(topLayer).style.zIndex=origPos;

}

</script>

</head>

<body>

<body style=background-color:cyan>

<h1 style=text-align:center;color:blue>

Program includes XHTML document to show that the stacking of paragraphs when moved from the

top position,it returns to it's Original position.

</h1>

<p class=layer1style id=layer1 onmouseover=mover("layer1",1) onmouseout=moveBack() >



HTML, stands for HyperText Markup Language, is the predominant markup language for web

pages.It provides a means to create structured documents .

</p>

<p class=layer2style id=layer2 onmouseover=mover("layer2",2) onmouseout=moveBack()>

XHTML eXtensable HyperText Markup Language has a more strict syntax rules in comparison of

HTML.XHTML gives a more consistent, well structured format.

</p>

<p class=layer3style id=layer3 onmouseover=mover("layer3",3) onmouseout=moveBack() >

Internet has evolved over the last 20 years and it has made the livings of millions highly dependent on

it and hence it's necessary for all to learn the way of programming the web.

</p></body></html>

OutputSnap 3b.html



XML AND XSLT

Programs 4a based on XML and 4b are based on XML and XSLT

Execution steps for programs to 4a


Step 2: Save the Program with .xml extension.

Step 3: Start -> Text Editor(pluma) -> Type the style sheet attributes and save it with extension .css

Step 4: File -> double click on the file with extension .xml to see the output.

Error debugging of XML can be done using the error messages displayed on the browser by the XML

parser.

Execution steps for programs to 4b


Step 2: Save the Program with .xml extension.

Step 3: Start -> Text Editor(pluma) -> Type the xsl program and save it

with extension .xsl

Step 4: File -> double click on the file with extension .xml to see the output.

Error debugging of XML can be done using the error messages displayed on the browser by the XML

parser as shown in the screen shot below.



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

to VTU. The information must include USN, Name, 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.

Note: Create an XML document with the details of the students. User defined tags can be used for each

detail such as <usn>, <name>, etc. Values can be given for the attributes of each of these tags in an external

style sheet.

4a.xml

<?xml-stylesheet type="text/css" href="stu.css" ?>

<student_information>

<label>

<h2> student 1 </h2>

usn:<usn>4mh09cs011</usn>

name:<name>Rajesh</name>

college:<college>MIT</college>

branch:<branch>cse</branch>

year of joining:<year>2009</year>

email-id:<email>[email protected]</email>

</label>

<label>

<h2> student 2 </h2><br/>

usn:<usn>4mh09cs012 </usn>

name:<name> Deepak</name>



year of joining:<year>2009 </year>


</label>

<label>

<h2> student 3 </h2><br/>

usn:<usn>4mh09cs013 </usn>

name:<name>Girish</name>





year of joining:<year>2009</year>


</label>

</student_information>

stu.css

label{display:block;}

usn {color:red; font-size:12pt; margin-right:15px;}

name {color:green; font-size:12pt; margin-right:15px;}

college {color:blue; font-size:12pt; margin-right:15px;}

branch {color:black; font-size:12pt; margin-right:15px;}

year {color:yellow; font-size:12pt; margin-right:15px;}

email {color:blue; font-size:12pt; margin-right:15px;}

h3 {color:red; font-size:18pt;}

h2 {color:black; font-size:18pt;}

OutputSnap 4a.html



4 b) Create an XSLT style sheet for one student element of the above document and use it to create a

display of that element.

Note: An XML file is created for a student record as in 6a,each value of a tag is selected based on template

matching using XSL and inline style is applied to each value.

4b.xml

<?xml version = "1.0"?>

<?xml-stylesheet type = "text/xsl" href = "6b.xsl" ?>

<VTU>

<USN> 4mh09cs011 </USN>

<name> rajesh </name>

<college> MIT </college>

<branch> CSE </branch>

<YOJ> 2009 </YOJ>

<email> [email protected]</email>

</VTU>

4b.xsl

<?xml version = "1.0"?>

<xsl:stylesheet version = "1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match = "VTU">

<html><head><title> Style sheet for 6b.xml </title>

</head><body>

<h2> VTU Student Description </h2>

USN:<span style = "font-style:normal; color: red;"><xsl:value-of select = "USN" />

</span><br/>

Name:<span style = "font-style:italic; color: blue;"><xsl:value-of select = "name"/>

</span><br/>

College:<span style = "font-style:normal; color:green;"><xsl:value-of select = "college"/>

</span><br/>

Branch:<span style="font-style:italic; color:black;"><xsl:value-of select="branch"/>

</span><br/>

Year of Join:<span style = "font-style:normal; color:pink;"><xsl:value-of select = "YOJ" />



</span><br/>

E-Mail:<span style = "font-style:italic;color:blue;"><xsl:value-of select = "email" />

</span><br/>

</body></html>

</xsl:template>

</xsl:stylesheet>

OutputSnap 4b.html



HTML on client side and PERL on server side

Programs numbering from 5 to 8 are developed using HTML on client side and PERL on server side

(HTML tags are embedded in server side PERL programs also)

Common Execution steps for programs 5 to 8

Step 1: Start -> Text Editor(pluma) -> Type the client side HTML Program.

Step 2: Save the Program with .html extension in any path.

Step 3: Start -> Text Editor(pluma) -> Type the server side perl program and save it with extension .pl in

the path /var/www/cgi-bin

Step 4: Give Read write and execute permission for the perl program

Step 5:double click on html file which opens in the browser using which you can send a request to the server

.The perl program on the server side will execute and the response will be send back to the client which will

be displayed on the browser.

Error debugging:we can check for errors in the perl program by using perl interpreter .

Step 1: open the terminal and type cd /var/www/cgi-bin

Step 2: Permissions for the perl program can be given in the terminal by command chmod 777 filename.pl

Step 3:perl interpreter can be invoked by giving command perl filename.pl in terminal.

Step 4:Error messages are displayed with line numbers. if there are no errors html tags will be

displayed.(manual checking of program for possible errors in HTMLembedded in perl is suggested)



Terminal snapshot



5 a) Write a Perl program to display various Server Information like Server Name, Server Software,

Server protocol, CGI Revision etc.

5a.html

<html>

<head><title> server information </title>

</head><body bgcolor=pink>

<h1 align=center> server information </h1><br><hr>

<form action=http://localhost/cgi-bin/5a.pl method=GET>

<h1 align=center>

<input type=submit value="click here to view the server information">

</h1></form></body></html>

5a.pl

#!/usr/bin/perl

print "content-type:text/html \n\n";

print"

SERVER NAME: $ENV{'SERVER_NAME'} </br>

SERVER PORT: $ENV{'SERVER_PORT'} </br>

SERVER SOFTWARE: $ENV{'SERVER_SOFTWARE'}</br>

SERVER PROTOCOL: $ENV{'SERVER_PROTOCOL'}</br>

CGI REVISION: $ENV{'GATEWAY_INTERFACE'}</br>"

Snap5a.html

Snap5a.pl



5 b) Write a Perl program to accept UNIX command from a HTML form and to display the output of

the command executed.

5b.html

<html><head><title>Command Execution</title>

</head><body bgcolor=lightyellow>

<br><h1 align=center><font color=red>COMMAND EXECUTION</font></h1>

<br><hr><marquee>COMMAND EXECUTION</marquee>

<hr><br><h2 align=center>

ENTER THE COMMAND TO EXECUTE

<form action=http://localhost/cgi-bin/5b.pl method=POST>

<input type=text size=40 name=command>

<p><input type=submit value=Submit>

<input type=reset value= Reset>


5b.pl

#!/usr/bin/perl


use CGI;

$q=new CGI;

$com=$q->param('command');

if($com)



{

system($com);

}

else

{

print "Command not entered";

}

Snap 5b.html

Snap 5b.pl



6. a) Write a Perl program to accept the User Name and display a greeting message randomly chosen

from a list of 4 greeting messages.

6a.html

<html><head>

<title>Greeting message </title>


<h1 align=center> Greeting message </h1>

<br><hr>

<form action=http://localhost/cgi-bin/6a.pl method=POST>

<h1 align=center>

<p>Enter the name:

<input type=text size=40 name=var1><br>

<input type=submit value=submit>

<input type=reset value=reset>

</p></h1></form></body></html>

6a.pl

#!/usr/bin/perl

use CGI;


$q=new CGI;

$cmd=$q->param('var1');

@coins=("Welcome to MIT","Welcome to web lab","Have a nice day","All the best");

$range = 4;

$random_number = int(rand($range));

if(!$cmd)

{

print "Error,name not entered";

}

else

{

print "<br><b>hello $cmd , $coins[$random_number]</b>";

}



Snap6a.html

Snap6a.pl



6 b) Write a Perl program to keep track of the number of visitors visiting the web page and to

display this count of visitors, with proper headings.

Note: along with common execution steps specified above create a text file with name count.txt in the path

/var/www give permissions to it and initialize it to 0.

6b.html

<html><head>

<title> Visitor Information </title>


<h1 align=center> Visitor Information </h1>

<br><hr>

<form action=http://localhost/cgi-bin/6b.pl method=GET>

<h1 align=center>

<input type=submit value="click here to view the Visitor Information">


6b.pl

#!/usr/bin/perl

$file="/var/www/count.txt";

print"content-type:text/html \n\n";

if(!open(fh,"<$file"))

{ print "Error: cannot read from '$file': $!" ;

exit;

}

$n=<fh>;

close(fh);

if(!open(fh,">$file"))

{ print "Error: cannot write to '$file': $!";

exit;

}

print fh ++$n;

close(fh);

print"<h3>Total visitors to this page=$n";

print"<form action=http://localhost/cgi-bin/8b.pl>";

print"<input type=submit value=Revisit>";



Snap 6b.html

Snap 6b.pl



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

Note: This program does not need client side HTML to send a request to the server. The server program 7.pl

can be directly requested in the browser by entering URL http://localhost/cgi-bin/7.pl in the address bar of

the browser

7.pl

#!/usr/bin/perl

$rf=1;

print "refresh:",$rf,"\n";


$d=`/bin/date | cut -d ' ' -f 4`;

print "SERVER TIME IS $d";

Snap of 7.pl

http://localhost/cgi-bin/7.pl



8. Write a Perl program to insert name and age information entered by the user into a table created

using MySQL and to display the current contents of this table.

Note: along with the common execution steps specified above database and tables should be created using

Mysql as shown in the snapshot below

Open the terminal and login to the mysql server using command

mysql –u root –p

The terminal will prompt you for entering a password.

root is the password that should be entered .here root is the user. (username and password are same)



Introduction about the methods used

DBI (Database Independent Interface) is a Perl Module that provides methods to manipulate SQL

Databases. With DBI, one can connect to a database within a Perl script and issue all kinds of queries

like select, insert and delete. The “use DBI” pragma makes use of this Perl module.

The “use strict” pragma makes the user compulsorily declare a variable before it is used. This

pragma overrides the Perl‟s built in feature that states that variables can be used directly without

declaration. Therefore with „strict‟, if you use a variable before it is declared, an error is generated.

Once this pragma is used, the „my‟ keyword is used to declare variables.

The variable “$dbh” serves as a Database Handler. The connect( ) function is used to connect to the

server. The first parameter indicates that the DBI Perl module is being used to the MySQL database

and the database name. The second parameter indicates the user “root” and the third parameter

indicates that the password(mitcs)

The variable $sth is the Statement handler that prepares the SQL statement (Query) to be executed.

The execute ( ) function is used to execute the SQL query.

The fetchrow ( ) function is used to loop through each record of the table and the records are stored

in the variables.

After this, ensure that you finish the statement handler and disconnect from the server by making use

of the finish ( ) and disconnect ( ) functions respectively.



8.html

<html><head>

<title>PERSON INFORMATION</title>

</head><body bgcolor=lightyellow>

<br><h1 align=center>TABLE CONTENT</h1>

<br><hr><marquee>ADD TO TABLE</marquee>

<hr><br>

ENTER THE FOLLOWING INFORMATION TO ADD A RECORD

<form action=http://localhost/cgi-bin/8.pl METHOD=POST>

<font color=blue>

<p>First name : <input type=text size=40 name=fname></p>

<p>Last name: <input type=text size=40 name=lname></p>

<p>Age : <input type=text size=4 name=age></p>

<br><input type=submit value=Submit>

<input type=reset value=Reset>

</font></form></body></html>

8.pl

#!/usr/bin/perl


use CGI;

use CGI::Carp(fatalsToBrowser);

use strict;

use DBI;

my $q=new CGI;

my $first=$q->param('fname');

my $last=$q->param('lname');

my $age=$q->param('age');

if($first eq ` ` || $last eq ` ` || $age eq ` `)

{

print "All THE FIELDS HAVE NOT BEEN ENTERED";

exit;

}

else



{

my $dbh=DBI->connect('DBI:mysql:web','root','root')

or die "can't connect:".DBI->errstr();

my $sth=$dbh->prepare('insert into age_inf(firstname,lastname,age) values(?,?,?)');

$sth->execute($first,$last,$age)

or die "cant execute sql:" .$sth->errstr();

$sth=$dbh->prepare("select * from age_info");

$sth->execute();

print "YOUR RECORD IS ADDED TO THE TABLE</br></br>";

print "<table><tr><th>Firstname</th><th>Lastname</th>

<th>Age</th></tr>";

while(($first,$last,$age)=$sth->fetchrow())

{

print "<tr><td>$first</td>

<td>$last</td>

<td>$age</td>

</tr>";

}

print "</table>";

$sth->finish();

$dbh->disconnect();

}



Snap 8.html

Snap 8.pl



HTML on client side and PHP on server side

Programs numbering from 9 to 11 are developed using HTML on client side and PHP on server side

(HTML tags are embedded in server side PHP programs also)

Common Execution steps for programs 9 to 11

Step 1: Start -> Text Editor(pluma) -> Type the client side HTML Program.

Step 2: Save the Program with .html extension in any path.

Step 3: Start -> Text Editor(pluma) -> Type the server side php program and save it with extension .php in

the path /var/www/

Step 4: Give Read write and execute permission for the php program

Step 5:double click on html file which opens in the browser using which you can send a request to the server

.The php program on the server side will execute and the response will be send back to the client which will

be displayed on the browser.

Error debugging:we can check for errors in the php program by using php interpreter .

Step 1: open the terminal and type cd /var/www

Step 2: Permissions for the php program can be given in the terminal by command chmod 777

filename.php

Step 3:php interpreter can be invoked by giving command php filename.php in terminal.

Step 4:Error messages are displayed with line numbers. if there are no errors html tags will be

displayed.(manual checking of program for possible errors in HTMLembedded in php is suggested)



Terminal snapshot



9. Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited on’

date-time on the web page upon reopening of the same page.

Note: This program does not need client side HTML to send a request to the server.

Start from step 3 in execution steps. The server program 9.php can be directly requested in the browser by

entering URL http://localhost/9.php in the address bar of the browser

9.php

<?php

if(isset($_COOKIE['LastVisit']))

{

$visit = $_COOKIE['LastVisit'];

echo "Your last visit was - ".$visit;

}

else

echo "you've got some stale cookies!";

$inTwoMonths = 60 * 60 * 24 * 60 + time();

setcookie('LastVisit',date("g:i - m/d/y"), $inTwoMonths);

?>

http://localhost/9.php



Snap 9.php

Run1

Run2



10. Write a PHP program to store page views count in SESSION, to increment the count on each

refresh, and to show the count on web page.

Note: This program does not need client side HTML to send a request to the server.

Start from step 3 in execution steps. The server program 10.php can be directly requested in the browser by

entering URL http://localhost/10.php in the address bar of the browser

10.php

<h3><marquee>SESSION INFORMATION DISPLAY</marquee></h3>

<?

session_register("count");

echo "The counter is now $_SESSION[count]";

$_SESSION["count"]=$_SESSION["count"]+1;

echo "</br>Reload this page to increment";

?>

Snap 10.pl

http://localhost/10.php



11. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields. On

submitting, store the values in MySQL table. Retrieve and display the data based on Name.

Note: along with the common execution steps specified above database and tables should be created using

Mysql as shown in the snapshot below.Open the terminal and login to the mysql server using command

mysql –u root –p

The terminal will prompt you for entering a password.

mitcs is the password that should be entered .here root is the user



11a.html



<html>

<head>

<title>PERSON INFORMATION</title></head>

<body bgcolor=pink>

<h1 align=center>

<font color=blue>PERSON INFORMATION</font></h1>

<form action=http://localhost/11a.php method=POST>

<h5 align=center><br>

Name:<input type=text size=20 name=nm><br><br>

ADDRESS1:<input type=text size=20 name=add1><br><br>

ADDRESS2:<input type=text size=20 name=add2><br><br>



EMAIL:<input type=text size=20 name=em><br><br>

<input type=submit value=insert>

<input type=reset value=reset>


11a.php

<?

$a1=$_REQUEST['nm'];

$b2=$_REQUEST['add1'];

$c3=$_REQUEST['add2'];

$d4=$_REQUEST['em'];

if($a1==` ` || $b2== ` `||$c3==` ` ||$d4==` `)

{

echo "All fields are not entered";

exit;

}

$q="insert into person(name,address1,address2,email) values('$a1','$b2','$c3','$d4')";

$dbh=mysql_connect("localhost","root","root")

or die("cannot connect to mysql");

$sth=mysql_db_query("web","$q")

or die("query failed:" .mysql_errno() .mysql_error());

print "Record inserted";

mysql_close($mysql);

?>



Snap 11a.html

Snap 11a.php



11b.html



<html><head><title>QUERY USING PHP</title>

</head><body bgcolor=lightGreen>

<marquee>RETRIEVE THE DATABASE</marquee>

<hr><form action=http://localhost/11b.php method=POST>

<h2 align=center>

<br>

<label>Enter Name:<input type=text name=x></label>

<br><input type=submit name=submit value="submit data">

<input type=reset name=reset value=clear>

</form></h2></body></html>

11b.php

<body bgcolor=lightgreen>

<?

$a=$_REQUEST['x'];

$dbh=mysql_connect("localhost","root","root")

or die("could not connect to mysql".mysql_error());

$q="select * from person where name='$a'";

$sth=mysql_db_query("web","$q")

or die("query failed".mysql_errno() .":" .mysql_error());

?>

<h2 align=center><font color=red>PERSON INFORMATION</font>

<br><br>

<? $i=mysql_num_rows($sth);

if($i==0):

echo "No records found";

else:



?>

<table border=1>

<tr>

<th>NAME</th>

<th>ADDRESS1</th>

<th>ADDRESS2</th>

<th>EMAIL</th>

</tr>

<?

while($result=mysql_fetch_row($sth)):

?>

<tr>

<td><? echo $result[0];?></td>




</tr>

<?

endwhile;

endif;

mysql_close($dbh);

?>



Snap 11b.html

Snap 11b.php



VIVA QUESTIONS

1) What is JavaScript?

JavaScript was designed to add interactivity to HTML pages

JavaScript is a scripting language

A JavaScript consists of lines of executable computer code

A JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

Everyone can use JavaScript without purchasing a license

JavaScript's official name is "ECMAScript".

2) What can a JavaScript Do ?

JavaScript gives HTML designers a programming tool

JavaScript can put dynamic text into an HTML page ,JavaScript can react to events ,JavaScript can

read and write HTML elements

JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is

submitted to a server. This saves the server from extra processing

JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the

visitor's browser, and - depending on the browser - load another page specifically designed for that

browser

JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve

information on the visitor's computer

3) How is a JavaScript executed?

JavaScripts in a page will be executed immediately while the page loads into the browser, Sometimes

we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called, or when an event is

triggered, go in the head section. When the script is in head section, we mustl ensure that the script is

loaded before anyone uses it

4) Interfacing JavaScript

JavaScript and the HTML DOM



With HTML 4, JavaScript can also be used to change the inner content and attributes of HTML elements

dynamically.

To change the content of an HTML element use:

document.getElementById(id).innerHTML=new HTML

To change the attribute of an HTML element use:

document.getElementById(id).attribute=new value

You will learn more about JavaScript and the HTML DOM in the next chapter of this tutorial.

JavaScript and HTML Events

New to HTML 4 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript

when a user clicks on an HTML element.

To execute code when a user clicks on an element, use the following event attribute:

onclick=JavaScript

You will learn more about JavaScript and HTML Events in a later chapter.

JavaScript and CSS

With HTML 4, JavaScript can also be used to change the style of HTML elements.

To change the style of an HTML element use:

document.getElementById(id).style.property=new style

5) What is a Event handler?

An event handler allows you to execute code when an event occurs.Events are generated by the

browser when the user clicks an element, when the page loads, when a form is submitted, etc.

6) What is DHTML?



DHTML stands for Dynamic HTML. Dynamic HTML, a combination of HTML enhancements,

scripting language and interface that are used to deliver animations, interactions and dynamic updating on

web pages. DHTML is the merging of HTML and JavaScript.

7) What is the DOM?

With JavaScript we can restructure an entire HTML document. You can add, remove, change, or

reorder items on a page.To change anything on a page, JavaScript needs access to all elements in the HTML

document. This access, along with methods and properties to add, move, change, or remove HTML

elements, is given through the Document Object Model (DOM).

In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and

manipulation of every single element in an HTML page.

All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM

have almost disappeared.

The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level

1/2/3):

Core DOM - defines a standard set of objects for any structured document

XML DOM - defines a standard set of objects for XML documents

HTML DOM - defines a standard set of objects for HTML documents

8) Difference between XML and HTML?

XML is not a replacement for HTML. XML and HTML were designed with different goals

XML was designed to transport and store data, with focus on what data is.

HTML was designed to display data, with focus on how data looks.

HTML is about displaying information, while XML is about carrying information.

9) What is XSLT?

XSLT stands for XSL Transformations

XSLT is the most important part of XSL

http://w3schools.com/dom/default.asp



XSLT transforms an XML document into another XML document

XSLT uses XPath to navigate in XML documents

10) What is Perl?

PERL- Practical Extraction and Report Language.

Perl is a high-level programming language written by Larry Wall. It derives from the ubiquitous C

programming language and to a lesser extent from sed, awk, the Unix shell, and at many other tools

and languages. Perl's process, file, and text manipulation facilities make it particularly well-suited for

tasks involving quick prototyping, system utilities. software tools, system management tasks,

database access, graphical programming, networking, and world wide web programming.

Perl is a powerful free interpreter. Perl is portable, flexible and easy to learn.

11)What is PHP

PHP stands for PHP: Hypertext Preprocessor.

PHP is a server-side scripting language, like ASP.

PHP scripts are executed on the server.

PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic

ODBC, etc.).

PHP is an open source software.

PHP is free to download and use.

12) What is a PHP File?

PHP files can contain text, HTML tags and scripts.

PHP files are returned to the browser as plain HTML.

PHP files have a file extension of ".php", ".php3", or ".phtml".

13) What is MySQL?

MySQL is a database server.

MySQL is ideal for both small and large applications.

MySQL supports standard SQL.

MySQL compiles on a number of platforms.

MySQL is free to download and use.



14) Why PHP?

PHP runs on different platforms (Windows, Linux, Unix, etc.).

PHP is compatible with almost all servers used today (Apache, IIS, etc.).

PHP is FREE to download from the official PHP resource: www.php.net

PHP is easy to learn and runs efficiently on the server side.

To get access to a web server with PHP support,Install Apache (or IIS) on your own server, install

PHP, and MySQL.

15) What is SQL?

SQL stands for Structured Query Language.

SQL lets you access and manipulate databases.

SQL is an ANSI (American National Standards Institute) standard.

16)What Can SQL do?

SQL can execute queries against a database.

SQL can retrieve data from a database.

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.

17) ABOUT RDBMS

RDBMS stands for Relational Database Management System.

RDBMS is the basis for SQL, and for all modern database systems like MS SQL Server, IBM DB2,

Oracle, MySQL, and Microsoft Access.

The data in RDBMS is stored in database objects called tables.

A table is a collections of related data entries and it consists of columns and rows.

18) What is a Cookie?

http://www.php.net/#_blank



A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's

computer. Each time the same computer requests a page with a browser, it will send the cookie too. With

PHP, you can both create and retrieve cookie values.

19) How to Create a Cookie

The setcookie() function is used to set a cookie.Syntax

setcookie(name, value, expire, path, domain);

20) About PHP session

A PHP session variable is used to store information about, or change settings for a user session. Session

variables hold information about one single user, and are available to all pages in one application.

When working with an application, you open it, do some changes and then you close it. This is much

like a Session. The computer knows who you are. It knows when you start the application and when

you end. But on the internet there is one problem: the web server does not know who you are and

what you do because the HTTP address doesn't maintain state.

A PHP session solves this problem by allowing you to store user information on the server for later

use (i.e. username, shopping items, etc). However, session information is temporary and will be

deleted after the user has left the website. If you need a permanent storage you may want to store the

data in a database.

Sessions work by creating a unique id (UID) for each visitor and store variables based on this UID.

The UID is either stored in a cookie or is propagated in the URL.

21) Starting a PHP Session

Before you can store user information in your PHP session, you must first start up the session.

Using the session_start() function .

22) Storing a Session Variable

The correct way to store and retrieve session variables is to use the PHP $_SESSION variable:

23) Destroying a Session



If you wish to delete some session data, you can use the unset() or the session_destroy() function.

The unset() function is used to free the specified session variable

24) What is CGI Scripting?

CGI stands for Common Gateway Interface, which is the standard for creating dynamic files or web

pages. CGI scripting actually refers to writing a program that will control how a website's content can be

displayed to visitors.

25) What is a Web Browser?

A web browser is a software application that enables users to access the World Wide Web (WWW). To

do this, a web browser must provide these capabilities:

A web browser must be able to understand data protocols utilized by web servers, such as HTML and

XHTML.

A web browser must be able to format (or render) the output of these languages.

26) What is World Wide Web?

The World Wide Web is a system of interlinked hypertext documents contained on the Internet. With a

web browser, one can view web pages that may contain text, images, videos, and other multimedia and

navigate between them using hyperlinks.

27) What is World Wide Web Consortium (W3C)?

The World Wide Web Consortium (W3C) is an international community that develops standardsto

ensure the long-term growth of the Web.

28) Difference between Echo and print

Echo works faster than print().

Echo and print are language construct.

Print behaves as a function and it returns an integer value.

Echo does not return any values.

Echo is not suitable for conditional construct

http://en.wikipedia.org/wiki/Hypertext

http://en.wikipedia.org/wiki/Internet

http://en.wikipedia.org/wiki/Web_browser


http://en.wikipedia.org/wiki/Writing

http://en.wikipedia.org/wiki/Image

http://en.wikipedia.org/wiki/Video

http://en.wikipedia.org/wiki/Multimedia

http://en.wikipedia.org/wiki/Hyperlink



Print is suitable for conditional construct

Print process is slower than echo.

29) What is a Web Server?

Provides access to the web resources

Server-side software responsible for handling incoming HTTP requests

Computer running application software that listens and responds to a client computer‟s request made

through a web browser

Machine that hosts web pages and other web documents

Most commonly used Web Servers are: Apache, IIS

More than 400 million web hosts in operation, more than 60% of which were Apache, around 30%

were IIS

Some popular Web Servers

Apache, IServer, Microsoft Internet Information Server, Macromedia ColdFusion, IBM Web Sphere Studio,

Apple Webobject

30) What is a Web page?

Set of data consists of one or several web resources, that can be identified by an

URI(Universal/Uniform Resource Identifier)

Electronic document that typically contains several types of information accessible via the World

Wide Web

set of information created, and organized, using HTML and/or other web page authoring and

development tools

Interpreted and displayed on the screen according to the instructions of the web page authoring tool

31) What is a Web Site?

A collection of related web pages of a certain individual, group, or organization, connected through a

system of hyperlinks, hosted in a particular domain can be a single web page that contains links to related

information located on several web sites.

32) What is a home page?

The main page of a web site that typically serves as an index or table of contents to other web pages

usually the first web page or the welcome page the users see when they visit a web site.



XML

Is a simplified subset of SGML. It stands for eXtensible Markup Language.

DTD

Stands for Document Type Declaration. It is a set of instructions that states what tags are usable and

what (re)action they create. Each browser has a DTD set in it's programming set by the browser companies.

This is how some tags will work in only one type of browser or version. It has the tags stated in it's DTD.

XML makes it possible to create unique tag sets by applying it's own DTD. This makes the DTD more

compatible with more browsers.

XSLT

Stands for eXtensible Stylesheet Language Transformation. It is a strong version of CSS that formats

the XML page for viewing.

MIME type

A Multipurpose Internet Mail Extension (MIME) type identifies the format of a file. The MIME type

enables applications to read the file.

Uniform Resource Identifier

A Uniform Resource Identifier (URI) is a string that identifies a particular location in a file system or

on the Web. For example, the address of a web page is a URI.

Uniform Resource Locator

A Uniform Resource Locator (URL) is the address of a particular location on the Web.

Internet

A physical network connecting millions of computers using the protocols for sharing/transmitting

information (TCP/IP)

In reality, the Internet is a network of networks. Basically, just a computer network spanning most of the

world

Server-side programming



Server-side scripts or programs are simply programs that are run on the web server in response to

requests from the client. Technologies such as CGI, Active Server Pages, Java Servlets and PHP run on

Server. Best, if the program needs a lot of data and infrequent interactions with the server.

Client-side web programming

Client-side scripts or programs are simply programs that are run on the web browser, downloaded

from server. Technologies such as JavaScript, VBScript and Java applets all run in the client. Best, if

applications that use less data and more interaction

The key difference between JavaScript and PHP:

The key difference between JavaScript and PHP is that, while the Web browser interprets JavaScript

once the Web page containing the script has been downloaded; server-side scripting languages like PHP are

interpreted by the Web server before the page is even sent to the browser.

Once interpreted, the PHP code is replaced in the Web page by the results of the script, so all the

browser sees is a standard HTML file. The script is processed entirely by the server. Thus the designation:

server-side scripting language.

WEBLAB MANUAL

Documents

Transcript of WEBLAB MANUAL