Web Programming Lab Manual

WEB PROGRAMMING LAB MANUAL Mr. SAYYAN SHAIKH For VI Semester (CS &E) Diploma Engineering

GOVERNMENT POLYTECHNIC, KARWAR 2014-2015

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 1

Date:

___

Date :

Experiment 1:The document must have a paragraph of text that describes your home. Choose at least three different phrases (3 to 6 words) of this paragraph and make them change font, font style, color and font size when the mouse cursor is placed over them. Each of the different phrases must change to different fonts, font styles, colors and font sizes. Program 1 .regText {font:Times; font-size:14pt;} My home name is SWEET Home. It is located nearby Civil Hospital, M.G.Road, Karwar. My house is facing towards East.

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 2

Date:

___ Date : It is a 2BHK home.There is a 60ft wide road in front of the home. There is a sufficiant place for gardening and car parking.It is built in the area of 30X65 sq ft.

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 3

Date:

___

Date :

Experiment 2:The document must contain four short paragraphs of text stacked on top of each other with only enough of each showing so that the mouse cursor can also be placed over some part of them. When the cursor is placed over the exposed part of any paragraph it should raise to the top to become completely visible. Program 2 .layer1style { border:solid thick black; padding:4em; width:400px; background-color:yellow; position:absolute; top:100px; left:200px; z-index:0; } .layer2style { border:solid thick red; padding:4em; width:400px; background-color:blue; position:absolute; top:120px; left:220px; z-index:0; } .layer3style { border:solid thick green; padding:4em; width:400px; background-color:purple; position:absolute; top:140px; left:240px; z-index:0; } .layer4style { border:solid thick orange; padding:4em;

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 4

Date:

___

Date : width:400px; background-color:#00ffff; position:absolute; top:160px; left:260px; z-index:0; } var topLayer="layer4" function mover(toTop) { var oldTop=document.getElementById(topLayer).style; var newTop=document.getElementById(topLayer).style; oldTop.zIndex="0"; newTop.zIndex="10"; topLayer=document.getElementById(toTop).id; } Stacking of Paragraph

"SUCCESS, is proof to all that others can achieve it as well." The first and most important STEP towards success is the feeling that we can succeed. "To accomplish great things, we must not only act, but also dream, not only plan but also believe." "Most of the important things in the world have been accomplished by people who have kept on trying when there seemed to be no help at all"

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 5

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 6

Date:

___

Date :

Experiment 3:The document should have a small image of yourself, which must appear when the mouse button is clicked at the position of the mouse cursor, regardless of the position of the cursor at the time. Program 3 function displayimg(e) { var dom=document.getElementById("id"); dom.style.left=(e.clientX)-10; dom.style.top=(e.clientY)-10; dom.style.visibility="visible"; } function hideIt() { var dom=document.getElementById("id"); dom.style.visibility="hidden"; } CLICK ANYWHERE TO VIEW THE IMAGE

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 7

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 8

Date:

___

Date :

Experiment 4:The document must contain the statement “Save time with TIMESAVER 2.2”, which continuously moves back and forth across the top of the display. Moving Text

function moveText(milliseconds) { window.setInterval("changePosition()", milliseconds) }

function changePosition() { var x = Math.random()*400; var y = Math.random()*400; heading = document.getElementById("moveme"); if(heading != null) { heading.style.left = x; heading.style.top = y; } } What is HTML?

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 9 ___

Date:

Date : HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language. A markup language is a set of markup tags. HTML uses markup tags to describe web pages. Save The Time Saver 2.2 !

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 10

Date:

___

Date :

INTRODUCTION TO XML Xml (extensible Markup Language) is a markup language. XML is designed to store and transport data. Xml was released in 1998. It was created to provide an easy to use and store self-describing data. XML is not a replacement for HTML.XML is designed to be self-descriptive. XML is designed to carry data, not to display data.XML tags are not predefined. You must define your own tags.XML is platform independent and language independent. The main benefit of xml is that you can use it to take data from a program like Microsoft SQL, convert it into XML then share that XML with other programs and platforms. You can communicate between two platforms which are generally very difficult. The main thing which makes XML truly powerful is its international acceptance. Many corporation use XML interfaces for databases, programming, office application mobile phones and more. It is due to its platform independent feature.

Features and Advantages of XML:1) XML separates data from HTML 2) XML simplifies data sharing 3) XML simplifies data transport 4) XML simplifies Platform change 5) XML increases data availability 6) XML can be used to create new internet languages The Difference between XML and HTML XML and HTML were designed with different goals: XML was designed to carry data - with focus on what data is HTML was designed to display data - with focus on how data looks XML tags are not predefined like HTML tags are XSL is a language for expressing style sheets. An XSL style sheet is, like with CSS, a file that describes how to display an XML document of a given type. XSL shares the functionality and is compatible with CSS2 (although it uses a different syntax). It also adds: A transformation language for XML documents: XSLT.

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 11

Date:

___

Date :

Experiment 5:Design an XML document to store information about patience in a hospital. Information about patients must include name (in 3 parts, first name, middle name, last name), social security number (SSN), age, room number, primary insurance company – including member identification number, group number and address – secondary insurance company (in the same sub parts as for the primary insurance company), known medical problems, and known drug allergies. Both attributes and nested tags must be included. Make up sample data of at least 4 patients.

Program5.xml Ram M Poojari SSN10001 25 99 45422 454 #90, Near big boat, Devabhag, Karwar-581301 45523 455 #90, Near big boat, Devabhag, Karwar-581301 High B.P. Nill Arun M Bhat SSN10002 20 105

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 12

Date:

___

Date :

45423 454 #32, s/o Ramesh Bhat, Kajubhag, Karwar-581301 45524 455 #32, s/o Ramesh Bhat, Kajubhag, Karwar-581301 Diabetis Nill

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 13

Date:

___

Date :

Experiment 6:Create a CSS style sheet for the above XML document and use it to create a display of that document. Program6.css patients {

display:block; margin-left:5%; margin-right:5%; border:solid red 5px; padding:8px; font-family:arial; font-size:13.5 pt; font-weight:bold;

} patient {

} name {

} age {

} ssn {

} room-no {

}

display:block; margin-left:5%; border:solid green; padding:4px;

display:block; color:purple; margin-left:5%;

display:block; color:purple; margin-left:5%

display:block; color:purple; margin-left:5%

display:block; color:purple; margin-left:5%

insurance { display:block; color:purple; margin-left:5% } med-problem { display:block; color:purple; margin-left:5% }

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 14

Date:

___ drugallergies { display:block; color:purple; margin-left:5% }

Date :

Program6.xml Apollo Victor Hospital Name: Ram M Poojari SSN:ssn1001 Age:25 Room-no:105 Insurance Primary: 23345 233 Karwar Insurance Secondary: 23346 244 Medical Problem:High BP Drug Allergie:Nill Name: Raj M Naik SSN:ssn2001 Age:23 Room-no:108 Insurance Primary: 23378 236 Karwar Insurance Secondary: 23346 285 Medical Problem:High BP

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 15

Date:

___ Drug Allergie:Nill

Date :

Name: Gopal K Rao SSN:ssn3001 Age:28 Room-no:106 Insurance Primary: 2656 256 Karwar Insurance Secondary: 2656 289 Medical Problem:Astama Drug Allergie:Nill Name: Ramu K Rao SSN:ssn4001 Age:28 Room-no:106 Insurance Primary: 256572 692 Karwar Insurance Secondary: 23546 255 Medical Problem:High BP Drug Allergie:Nill

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 16

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 17

Date:

___

Date :

Experiment 7:Create XSLT style sheet for one patient element of the XML, document of exercise 5 and use it to create a display of that element. Program7.xsl Program 7 Patients Information NAME: SSN: AGE: ROOM NO: PRIMARY INSURANCE COMPANY: SECONDARY INSURANCE COMPANY:

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 18

Date:

___ Date : MEDICAL PROBLEMS: DRUG ALLERGIES:

Program7.xml Jai C Rao 111 25 100 ka11 ka green kwr 581301 ka11 ka green kwr 581301 cold nill

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 19

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 20

Date:

___

Date :

Experiment 8:Modify the XSLT style sheet to format all the patient elements of the XML, document of exercise 5 and use it to create a display of whole element. Program8.xsl Program 8 Patient Information NAME: SSN: AGE: ROOM NO: PRIMARY INSURANCE COMPANY: SECONDARY INSURANCE COMPANY: MEDICAL PROBLEMS: DRUG ALLERGIES:

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 21

Date:

___

Date :

Program8.xml Jai C Rao 111 22 100 ka11 ka Green street Ankola 581314 ka11 ka Green street Ankola 581314 cold nill Sita G Prasad 111 21 101 ka30 ka Beach Road Karwar 581301 ka30 ka

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 22

Date:

___ Beach Road Karwar 581301 feaver nill

Date :



OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 23

Date:

___

Date :

INTRODUCTION TO PHP PHP (Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. PHP scripting code is frequently used to connect web pages to MySQL databases to create dynamic web sites. Some popular examples of PHP driven web sites would be blogs, message boards, and Wikis. PHP files are actually plain text files; they can be created in Text Pad or any other Plain Text Editor. In a text editor set the Save As type to text and save the file with a .php extension. PHP is very powerful server side scripting language like ASP for developing dynamic web applications. Using PHP, we can build interactive and dynamic websites with ease. It is free; it is suitable for web development, it is efficient, it is widely used and it is considered to be the most powerful alternative to Microsoft’s ASP. PHP script can be embedded straight into heart of html code just like ASP. Its syntax is very much similar to that of C and Perl. PHP is compatible with various web servers like Apache and Microsoft’s IIS. It supports various databases like MYSQL, Oracle, Solid, Generic ODBC etc.

Common USE of PHP:PHP performs system functions. PHP can handle forms. We can add, delete, and modify elements within our database thru PHP. Access cookies variables and set cookies. Using PHP, we can restrict users to access some pages of our website. Using PHP, we can encrypt data.

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 24

Date:

___

Date :

Experiment 9:Parameter - A string of numbers separated by spaces Return Value – The first 4 digits number in the string; false if none. Program 9

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 25

Date:

___

Date :

Experiment 10:Parameter – A file variable of a file of text where the words are separated by spaces or colons Return value – The word that appears most common in the file. Program 10

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 26

Date:

___

Date :

Experiment 11:Write an XHTML document to include an anchor tag, that calls a PHP document also write the called PHP document which returns a randomly choosen greeting from a list of five different greetings. The greetings must be stored as constant strings in the script. A random number between 0 and 4 can be computed with these lines. #set the seed for mtrand with the number of microseconds #since the last full second of the clock mt_strand((double) microtime() * 1000000); $number=mtrand(0,4); #computes a random integer 0-4 Program11.html Program 11 Click here to display Random Greeting Messages

Program11.php Program11

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 27

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 28

Date:

___

Date :

Experiment 12:Write the XHTML code to create the form with the following capabilities a) A text widget to collect the users name b) Four check boxes, one each for the following items i) Four 100 watt light bulbs for Rs. 20=39 ii) Eight 100 watt light bulbs for Rs 40=20 iii) Four 100 watt long life light bulbs for Rs. 30=95 iv) Eight 100 watt long life light bulbs for Rs 70=49 c) A collection of 3 radio buttons that are labeled as follows i) Visa ii) Master Card iii) Discover Program 12 Welcome to Smart Bulb Sales Buyers Name: Product Select Four 100 watt light bulbs for Rs.20 Eight 100 watt light bulbs for Rs.40

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 29

Date:

___

Date :

Four 100 watt long life light bulbs for Rs.30 Eight 100 watt long life light bulbs for Rs.70 Payment Method Visa Master card Discover

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 30

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 31

Date:

___

Date :

Experiment 13:Write a PHP script that computes the total cost of the ordered light bulbs from the exercise 12 after adding 13.5% VAT. The program must inform the buyer of exactly what was ordered in table. Program13.html Program 13 Welcome to Smart Bulb Sales Buyers Name: Product Select Four 100 watt light bulbs for Rs.20 Eight 100 watt light bulbs for Rs.40 Four 100 watt long life light bulbs for Rs.30 Eight 100 watt long life light bulbs for Rs.70 Payment Method Visa Master card Discover

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 32

Date:

___

Date :

Program13.php

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 34

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR Page No.: 35

Date:

___

Date :

Experiment 14:Write a XHTML code to create a form that collects favorite popular songs, including the name of the song, the composer and the performing artist or group. This document must call one PHP script when the form is submitted and another to request a current list of survey results. Program14.html