IT0322 –Web Systems and Technology LAB - SRM University Systems LAB... · IT0322 –Web...

DEPARTMENT OF INFORMATION TECHNOLOGY FACULTY OF ENGINEERING & TECHNOLOGY

LAB MANUAL FOR

SUBJECT: WEB TECHNOLOGY LAB SUBJECT CODE: IT0322

PREPARED BY N.J.SUBASHINI

Assistant Professor (Senior Grade) Department of Information Technology

SRM University, SRM Nagar, Kattankulathur-603203 Kancheepuram District, Tamil Nadu

IT0322 –Web Technology LAB

Department of Information Technology, SRM University P a g e | 2

SYLLABUS

IT 0322 WEB TECHNOLOGY LAB 0 0 4 2 Prerequisite Nil LIST OF EXERCISES:

1) Create a simple webpage using HTML. 2) Use frames to Include Images and Videos. 3) Add a Cascading Style sheet for designing the web page. 4) Design a dynamic web page with validation using JavaScript. 5) Design a catalogue in ASP. 6) Simple application to demonstrate Servlets. 7) Design a simple online test web page in PHP.

TOTAL 60



LIST OF EXERCISES 1. HTML

I. Simple HTML using Heading elements Text Elements Logical Styles Physical Styles Ordered , Unordered and Definition list

II. Hyper Links Image Link Link to page containing Images and Videos File Link Time table Single Page Link Ex : NO 1 HTML Page

III. Using Frames Navigation Frame Floating Frame Inline Frame

IV. Registration Form with Table

2. CSS I. Inline Style , Internal Style ,and External Style Sheets

3. DHTML

I. Use user defined function to get array of values and sort them in ascending order II. Demonstrate String and Math Object’s predefined methods III. Demonstrate Array Objects and Date Object’s predefined methods IV. Exception Handling V. Calendar Creation : Display all month

VI. Event Handling Validation of registration form Open a Window from the current window Change color of background at each click of button or refresh of a page Display calendar for the month and year selected from combo box OnMouseover event

4. ASP I. Create a welcome Cookie (Hit for a page) and display different image and text

content each time when the user hit the page II. List a table of content and navigate within the pages III. Demonstrate Request and Response object using HTML Form IV. Database Connection to display all the values in the table

5. Java Servlets

I. Simple Servlets II. Servlets with HTML form III. Cookie creation and retrieval using servlet

6. XML

I. Create a any catalog II. Display the catalog created using CSS or XSL

7. PHP

I. File operation II. Regular Expression, Array, Math, String, Date functions



TABLE OF CONTENT Sl No Topic Page No

HTML

I a Simple HTML 7

I b Hyper Links 12

I c Using Frames 23

I d Registration Form with Table 27

CSS

II a Inline Style , Internal Style ,and external Style Sheets 30

JAVA SCRIPT

III a Use user defined function to get array of values and sort them in ascending order 33

III b Demonstrate String and Math Object’s predefined methods 36

III c Demonstrate Array Objects and Date Object’s predefined methods 38

III d Exception Handling 44

III e Calendar Creation : Display all month 46

III f

Event Handling • Validation of registration form • Open a Window from the current window • Change color of background at each click of button or refresh of a page • Display calendar for the month and year selected from combo box • OnMouseover event

49 52 54 54 57

ASP

IV a Create a welcome Cookie (Hit for a page) 60

IV b List a table of content and navigate within the pages 62

IV c Demonstrate Request and Response object using HTML Form 66

IV d Database Connection to display all the values in the table 68

Java Servlets

V a Simple Servlets 73

V b Servlets with HTML form 74

V c Cookie creation and retrieval using servlet 77

XML

VI a Create a any catalog 84

VI b Display the catalog created using CSS and XSL 86

PHP

VII a File operation 91

VII b Regular Expression, Array, Math, Date functions 93

References

97



QUESTIONS &

SOLUTIONS



HTML



Sl No I a: Simple HTML Question : To create a simple html file to demonstrate the use of different tags. Prodedure :- Create an html page named as “Simple _html_tags.html” Add the following tags detail. 1. Set the title of the page as “Simple HTML Tags” 2. Within the body perform the following a) Moving text = “Simple HTML Tags” b) Different heading tags ( h1 to h6) c) Paragraph d) Horizontal line e) Line Break f) Block Quote g) Pre tag h) Different Logical Style ( <b>, <c>, <sub>, <sup>….) i) Different Physical style ( <code>, <del>, <kbd>…) j) Listing tags ( 2 types with, & each type provide different “type” attribute) Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name:Simple_html_tags.html

<html> <title> Simple Html Tags</title> <body>

<marquee> Simple HTML Tags</marquee>

<center><FONT COLOR="#0000FF"> Heading Tags</FONT></center> <h1> Heading H1</h1> <h2> Heading H1</h2> <h3> Heading H1</h3> <h4> Heading H1</h4> <h5> Heading H1</h5> <h6> Heading H1</h6>

<center><FONT COLOR="#0000FF"> Text Elements</FONT> </center>

<p>This is a praragrspg tag. HTML 5

One of the most important technologies on this list doesn't fully exist yet — HTML 5 — but in 2008, key features started to trickle out.

HTML 5 will eventually replace HTML 4.01, the dominant programming language currently used to build web pages. But the governing bodies in charge of the web are still drafting the details, and nobody expects HTML 5 to fully emerge as the new standard for at least a few more years.



But HTML 5 is no vaporware. Many of the changes to the way the web operates as outlined in early versions of the new specification are already being implemented in the latest browsers, and some of the web's more adventurous site builders are already incorporating HTML 5's magic into their pages.

HTML 5 will be great step forward, standardizing things like dragging and dropping elements on web pages, in-line editing of text and images on sites and new ways of drawing animations. There's also support for audio and video playback without plug-ins, a boon for usability and a worrisome sign for Adobe's Flash, Microsoft's Silverlight and Apple's QuickTime. The language will also give a boost to web apps, as there are new controls for storing web data offline on your local machine.

Want Gmail on your desktop? HTML 5 makes it possible. Alas, the blink tag isn't invited to the party </p>

<hr>

<center><FONT COLOR="#0000FF"> Line break Tags</FONT></center>

This is a long piece of text consisting of three<BR> sentences and shows you the functions of the<BR> Line Break tag. This tag is used quite frequently<BR> to add line breaks in the HTML code. It is also used<BR> to add blank lines to a document.<BR>

<hr> <center><FONT COLOR="#0000FF"> BLOCK QUOTE Tags</FONT></center> <p>This is some text before the quotation.</p>

<blockquote>This is a long blockquote created with the <blockquote> tag.</blockquote> </blockquote>

<hr> <center><FONT COLOR="#0000FF"> PRE Tags</FONT></center> <pre> IT 206 JAVA IT306 WEB SYSTEMS IT322 WEB SYSTEMS LAB </PRE> <HR>

<center> <FONT COLOR="#0000FF"> Logical style </FONT></center>

This is <b>bold</b> This is bold<br> This is <big>big font</big> This is big font<br> This is <i>italic</i> This is italic<br> Was <s>$50</s>; now $40 Was $50; now $40<br> This is <small>small</small> This is small<br> H<sub>2</sub>O H2O<br>



May 5<sup>th</sup> 2005 May 5th 2005<br> <tt>fixed-width font</tt> fixed-width font<br> This is <u>underlined</u> This is underlined<br>

<br> <hr>

<center> <FONT COLOR="#0000FF"> Physical Style </FONT></center>

This is used for a short <cite>quote</cite>. This is used for a short quote.<br> <code>y = m * x + b</code> y = m * x + b<br> <del>Deleted</del> text Deleted text<br> <dfn>definition</dfn> text definition text<br> This is <em> emphasized </em>. This is emphasized<br> . <ins>inserted</ins> text inserted text<br> <kbd>code</kbd> sample code sample<br> <samp>code</samp> sample code sample<br> This is <strong>strong</strong>. This is strong.<br> <var>program</var> variable program variable<br>

<br>

<hr>

<center><FONT COLOR="#0000FF"> Listing Tags</FONT></center> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li>



</ol>

<h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

<h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

<h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd>



<dt>Milk</dt> <dd>White cold drink</dd> </dl> <hr>

Output:



Sl No I b: Hyper Link Question :- To create an html file to link to different html page which contains images, tables, and also link within a page. Procedure : 1. Create an html page named as “Table.html” to display your class time table. a) Provide the title as Time Table. b) Provide various color options to the cells ( High light the lab hours and elective hours with different colors.) 2. Create an html page named as “image.html” to display image at various position & size. 3. Create an html page named as “video.html” to display the audio and video files. 4. Create an html page named as “pagelink.html” , in this convert the file created in the “Exercise1” to single page link by providing the links at the top as well as to the below screen/page. 5. Create an html page named as “hyperlink.html” to link to the above four files. For image link alone give a image to be displayed as a link. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name:hyperlink.html <html> <body> <a href=Pagelink.html>different Tags</a><br> <br><a href=table.html>Time Table</a> <br> <br><a href=image.html><img src="web.gif"</a> <br><a href=video.html>videos</a> </body> </html> Output:



File Name:Table.html <html> <head> <title>Time Table</title> </head> <body> <B><center><h3> S.R.M UNIVERSITY,<br> DEPARTMENT OF INFORMATION TECHNOLOGY<br> EFFECTIVE FROM: 04.01.09<br></center></b></h3>

<table border="2" width="75%" cellspacing="2" cellpadding="25" align=center><h3>

<caption align=left>Class: III IT-‘C’ R.No:306</caption></h3> <thead> <tr> <th >Periods</th> <th ROWSPAN=2>1 <br>8.30-9.20</th> <th ROWSPAN=2>2<br>9.20-10.10</th> <th ROWSPAN=2>3<br>10.20-11.10</th> <th ROWSPAN=2>4<br>11.10-12.00</th> <th ROWSPAN=2>5<br>1.30-2.20</th> <th ROWSPAN=2>6<br>2.20-3.10</th> <th ROWSPAN=2>7<br>3.10-4.00</th> </tr> <tr><th> Days</th> </thead> <tbody> <tr> <th>Monday</th> <td>IT0302</td> <td>IT0306</td> <td>IT0304</td>



<td>IT0306</td> <td>IT0302</td> <td COLSPAN=2><center>IT0324</td>

</tr> <tr> <th>TuesDay</th> <td COLSPAN =4 bgcolor="cyan"><center>IT0320/IT0322</td> <td>IT0310</td> <td>IT0304</td> <td>IT308</td> </tr> <tr> <th>Wednesday</th> <td COLSPAN =2 bgcolor="red"><center>ELETIVE - I</td> <td>IT0306</td> <td>IT310</td> <td>IT304</td> <td>IT308</td> <td>COUN</td> </tr> <tr> <th>Thursday</th> <td>IT302</td> <td>IT0304</td> <td COLSPAN=2><center>PD0302</td> <td COLSPAN=3 bgcolor="cyan"><center>IT0320/IT0322</td>

</tr> <tr> <th>Friday</th> <td>IT0308</td> <td>IT0306</td> <td>IT0308</td> <td>IT0302</td> <td COLSPAN=2 bgcolor="red"><center>ELECTIVE - I</td> <td></td>

</tr>

</tbody> </table>

</body> </html>



Output:

File Name:image.html <html> <body>

<img src="img_tree.png" /> <br> <p> <img src="hackanm.gif" align="left" width="48" height="48" />

A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p>

<p> <img src="hackanm.gif" align="right" width="175" height="175" />

A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p>

</body>

</html>



Output:

File Name:video.html <html>

<body><object width="560" height="340">

<param name="movie" value="http://www.youtube.com/v/AGuniy5Ipc0&hl=en_US&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param>

<embed src="http://www.youtube.com/v/AGuniy5Ipc0&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed> </object>

<br>

</html>

</body>

http://www.youtube.com/v/AGuniy5Ipc0&hl=en_US&fs=1&



Output:

File Name :pagelink.html <html> <title> Simple Html Tags</title> <body>

<marquee> Simple HTML Tags</marquee>

<a name="top"></a>

<center><FONT COLOR="#0000FF"><a href="#heading"> Heading Tags</a></FONT></center>

<center><FONT COLOR="#0000FF"><a href="#text"> Text Elements</a></FONT> </center>

<center><FONT COLOR="#0000FF"> <a href="#line">Line break Tags</a></FONT></center>

<center><FONT COLOR="#0000FF"><a href="#block"> BLOCK QUOTE Tags</a></FONT></center>

<center><FONT COLOR="#0000FF"><a href="#pre"> PRE Tags</a></FONT></center>

<center> <FONT COLOR="#0000FF"><a href="#logical"> Logical style</a> </FONT></center>

<center> <FONT COLOR="#0000FF"><a href="#physical"> Physical style</a> </FONT></center>

<center> <FONT COLOR="#0000FF"><a href="#List"> Listing Tags</a> </FONT></center>

<a name="heading"></a> <center><FONT COLOR="#0000FF"> Heading Tags</FONT></center>



<h1> Heading H1</h1> <h2> Heading H1</h2> <h3> Heading H1</h3> <h4> Heading H1</h4> <h5> Heading H1</h5> <h6> Heading H1</h6>

<a href="#top">Top </a>

<center><FONT COLOR="#0000FF"> Text Elements</FONT> </center> <a name="text"></a> <p>This is a praragrspg tag. HTML 5

One of the most important technologies on this list doesn't fully exist yet — HTML 5 — but in 2008, key features started to trickle out.

HTML 5 will eventually replace HTML 4.01, the dominant programming language currently used to build web pages. But the governing bodies in charge of the web are still drafting the details, and nobody expects HTML 5 to fully emerge as the new standard for at least a few more years.

But HTML 5 is no vaporware. Many of the changes to the way the web operates as outlined in early versions of the new specification are already being implemented in the latest browsers, and some of the web's more adventurous site builders are already incorporating HTML 5's magic into their pages.

HTML 5 will be great step forward, standardizing things like dragging and dropping elements on web pages, in-line editing of text and images on sites and new ways of drawing animations. There's also support for audio and video playback without plug-ins, a boon for usability and a worrisome sign for Adobe's Flash, Microsoft's Silverlight and Apple's QuickTime. The language will also give a boost to web apps, as there are new controls for storing web data offline on your local machine.

Want Gmail on your desktop? HTML 5 makes it possible. Alas, the blink tag isn't invited to the party </p>

<a href="#top">top </a>

<hr> <a name="line"></a> <center><FONT COLOR="#0000FF"> Line break Tags</FONT></center>

This is a long piece of text consisting of three<BR> sentences and shows you the functions of the<BR> Line Break tag. This tag is used quite frequently<BR> to add line breaks in the HTML code. It is also used<BR> to add blank lines to a document.<BR>

<a href="#top">top </a> <hr>

<a name="block"></a>



<center><FONT COLOR="#0000FF"> BLOCK QUOTE Tags</FONT></center> <p>This is some text before the quotation.</p>

<blockquote>This is a long blockquote created with the <blockquote> tag.</blockquote> </blockquote>

<a href="#top">top </a> <hr>

<a name="pre"></a> <center><FONT COLOR="#0000FF"> PRE Tags</FONT></center> <pre> IT 206 JAVA IT306 WEB SYSTEMS IT322 WEB SYSTEMS LAB </PRE>

<a href="#top">top </a> <HR>

<a name="logical"></a> <center> <FONT COLOR="#0000FF"> Logical style </FONT></center>

This is <b>bold</b> This is bold<br> This is <big>big font</big> This is big font<br> This is <i>italic</i> This is italic<br> Was <s>$50</s>; now $40 Was $50; now $40<br> This is <small>small</small> This is small<br> H<sub>2</sub>O H2O<br> May 5<sup>th</sup> 2005 May 5th 2005<br> <tt>fixed-width font</tt> fixed-width font<br> This is <u>underlined</u> This is underlined<br>

<br>

<a href="#top">top </a>

<hr>

<a name="physical"></a> <center> <FONT COLOR="#0000FF"> Physical Style </FONT></center>

This is used for a short <cite>quote</cite>. This is used for a short quote.<br> <code>y = m * x + b</code> y = m * x + b<br> <del>Deleted</del> text Deleted text<br> <dfn>definition</dfn> text definition text<br> This is <em> emphasized </em>. This is emphasized<br> . <ins>inserted</ins> text inserted text<br> <kbd>code</kbd> sample code sample<br>



<samp>code</samp> sample code sample<br> This is <strong>strong</strong>. This is strong.<br> <var>program</var> variable program variable<br>

<br> <a href="#top">top </a> <hr> <a name="list"></a> <center><FONT COLOR="#0000FF"> Listing Tags</FONT></center> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li>



<li>Lemons</li> <li>Oranges</li> </ol>

<h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

<h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

<h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> <hr>

<a href="#top">Top</a> </html></body>



Output:



Sl No I c: Using Frames Question : To create an html page with different types of frames such as floating frame, navigation frame & mixed frame. Procedure : 1. Create an html page named as “mixedframe.html” . Divide the page into two columns of 25% & 75% size. In 25% display the image file created in exercise 1b and divide the 75% into two rows. (50% & 50%). In the first 50% display the video file created in exercise 1b, and other 50% the time table created in exercise 1b. 2. Create an html page named as “navigationframe.html”. Divide the page into two columns of 25%, 75% size. In 25% size call the hyperlink file created in exercise 1b, and make the page to be get displayed on the other column when the link is clicked. 3. Create an html page named as “floatingframes.html”. in this file include a paragraph to explain floating frame, and in floating frame include the any html file created in the above exercise. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name:ex3.html <html> <body> <a href="frames.html" target="two">navigation frame</a><br> <a href="floatingframe.html" target="two">floating frame</a><br> <a href="Noframe.html" target="two">no frame</a><br> <a href="mixedframe.html" target="two">mixed frame</a><br> </body> </html> File Name: Frames.html <html> <frameset cols="30%,*" scrolling="no" noresize> <frame name="one" src="ex3.html"></frame> <frame name="two" ></frame> </frameset> </html>



Output:

File Name:Navigationframes.html <html> <frameset cols="30%,*" scrolling="no" noresize> <frame name="one" src="ex3.html"></frame> <frame name="two" ></frame> </frameset> </html> Output:



File Name: floatingframe.html <html> <body> <p> Explanation: There is a problem with the page you are trying to reach and it cannot be displayed. Try the following: * Refresh page: Search for the page again by clicking the Refresh button. The timeout may have occurred due to Internet congestion. * Check spelling: Check that you typed the Web page address correctly. The address may have been mistyped. * Access from a link: If there is a link to the page you are looking for, try accessing the page from that link. If you are still not able to view the requested page, try contacting you <iframe src="htmlex1.html" height="50%" width="50%"> </iframe> <embed src="video.avi" width="50%" height="50%" autostart="true"> </embed> </body> </html> Output:

File Name: mixedframe.html <html> <frameset cols="25%,*"> <frame src="registration.html"></frame> <frameset rows="30%,*"> <frame src="liht.jpg"> <frame src="htmlex1.html"> </frameset> </frameset> </html>



Output:



Sl No 1d: Registration Form with Table Question : To create a registration form as mentioned below. Procedure : Create an html page named as “registration.html” a) set background colors b) use table for alignment c) provide font colors & size Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name:registrationform.html <html> <head> <title>Registration Form Sample</title> </head> <body bgcolor="lightblue" text="red" style="font-size:15pt;font-family:Garamond" ><center> <h2>ENTRY FORM</h2></center> <form name=form1 > <table name=tab cellspacing=30pt> <tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input type=text name=t1 size=18> <tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input type=text name=t2 maxlength=3 size=18> <tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea name=ta rows=5 cols=15></textarea> <tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1 value="female">Female<br> <input type=radio name=r1 value=male>Male</td> <tr><td align=left><h2>Languages Known :</h2> </td><td align=left><center>(select more than one)</center> <input type=checkbox name=c1 value=c>C<br> <input type=checkbox name=c2 value=c++>C++<br> <input type=checkbox name=c3 value=vb>VB<br> <input type=checkbox name=c4 value=java>JAVA<br> <input type=checkbox name=c5 value=asp>ASP<br> <input type=checkbox name=c6 value=others>OTHERS<br></td> <tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input type=password name=t3 size=18> </table><center> <input type=reset value=" Reset " > <input type=submit value=" Submit " > </form>



</body> </html> Output:



CSS



Sl No IIa: Inline, Internal and External Style sheet Question : To create an html file by applying the different styles using inline, external & internal style sheets. Procedure :- 1. Create a external style sheet named as “external_css.css” and provide some styles for h2, hr, p & a tags. 2. Create an html file named as “Style_sheet.html”

a) Include the external style sheet with necessary tag. b) Include the internal style sheet for body tags & also use class name, so that

the style can be applied for all tags. c) include a <p> tags with inline style sheet.

Solution :- 1. Create a css file in a notepad & save it with the .css extension. 2. In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: Style_Sheet.html <html> <head> <link rel="stylesheet" type="text/css" href="external_style.css" /> <style type="text/css"> body { margin-left:200px; background:#5d9ab2 url('img_tree.png') no-repeat top left; } .container { text-align:center; } .center_div { border:1px solid gray; margin-left:auto; margin-right:auto; width:90%; background-color:#d0f0f6; text-align:left; padding:8px; } </style> </head> <body> <div class="container"> <div class="center_div"> <h1>Hello World!</h1>



<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p> </div> </div> <p style="border-style:dotted solid dashed double">This is some text in a paragraph.</p> <p style="border-style:dotted solid dashed">This is some text in a paragraph.</p> <p style="border-style:dotted solid">This is some text in a paragraph.</p> <p style="border-style:dotted">This is some text in a paragraph.</p> <h2>This is a header 1</h2> <hr /> <p>You can see that the style sheet formats the text</p> <p><a href="cd_catalog.xml" target="_blank">This is a link</a></p> </body> </html> File Name: external_style.css <style> h2 {color:maroon; font-size:20pt} hr {color:navy} p {font-size:11pt; margin-left: 15px} a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue} </style> Output:



JAVA SCRIPT



Sl No IIIa: Use user defined function to get array of values and sort them in ascending order Question : To write a Javascript program to define a user defined function for sorting the values in an array. Procedure : Create an html page named as “Sorting.html” 1. Within the script tag a) define a function called as “array_size()” to get the size of array. b) define a function called as “get_number()” to get numbers from user. c) define a function called as “Sorting()” to sort the numbers. 2. within the body tag Display the message to click the button & display a button to cll the “array_size()” method. “array_size()” method calls “get_number()” method which in turn calls the “sorting()” method. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: Sorting.html <html> <head> <script type="text/javascript"> var num=0; number=0; var numarray=new Array(); function array_size() { num=prompt("Enter how many number to be sorted","000"); number=parseInt(num); get_numbers(); } function get_numbers() { if (number!=null && number!="") { for( i=0;i<number;i++) { n=prompt("Enter the number to be sorted","1"); numarray[i]=parseInt(n); } } sorting() }



function sorting() { document.writeln("<h1>Sorted Array<h1>"); document.writeln(numarray.sort(sortNumber)); } function sortNumber(a,b ) { return a - b; } </script> </head> <body> <h1> Click the button to get the Number sorted</h1> <input type="button" onclick="array_size()" value="Get Array Size" /> </body> </html> Output:



Ex No:IIIb Demonstrate String and Math Object’s predefined methods Question : To create an html page to explain the use of various predefined functions in a string and math object in java script. Procedure : Create an html page named as “String_Math.html” and within the script tag define some string variables and use different string function to demonstrate the use of the predefined functions. Do the same for the Math function. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: String_Math.html <html> <head></head> <body> <script language="javascript"> var a="This is a Car is"; var b="Luxurious"; var c="Honda"; var d=[a,b,c]; for(i=0;i<=2;i++){ document.writeln("<br>"+(i+1)+" string is=="+d[i]);} document.writeln("<br>length of 1st,2nd and 3rd strings are=="+a.length+","+b.length+","+c.length+" respectively"); document.writeln("<br>character at 5th position of 1st string=="+a.charAt(5)); document.writeln("<br>last index of \'is\' in 1st string=="+a.lastIndexOf("is")); document.writeln("<br>last index of \'is\' in 1st string after offset=="+a.lastIndexOf("is",13)); document.writeln("<br>index of \'u\' in 2nd string=="+b.indexOf("u")); document.writeln("<br>index of \'u\' in 2nd string after offset=="+b.indexOf("u",13)); document.writeln("<br>concatenation of 1st string and 2nd string=="+a.concat(b)); document.writeln("<br>concatenation of 1st string ,2nd string and 3rd string=="+a.concat(b,c)); document.write("<br>"+a.split(" ")); document.write("<br>Upper case conversion of 1st string=="+a.toUpperCase()); document.write("<br>lower case conversion of 3rd string=="+c.toLowerCase()); document.write("<br>substring at 5th position of 1st string=="+a.substr(5)); document.write("<br>substring at 5th position till 6 offset of 1st string=="+a.substr(5,6)); document.write("<br>substring at 5th position till 11th position of 1st string=="+a.substring(6,11)); var str="123+1"; var x,y,i; document.write("<br>string=="+str); document.write("<br>evaluate function=="+eval(str)+"<br>"); eval("x=10;y=10;document.writeln(x*100);");



document.write("<br>eval inside document=="+eval(x*10)); document.write("<br>ceil of 10.4 is=="+Math.ceil(10.4)); document.write("<br>ceil of10.8 is=="+Math.ceil(10.8)); document.write("<br>floor of 10.4 is=="+Math.floor(10.4)); document.write("<br>round 10.5 is=="+Math.round(10.5)); document.write("<br>maximum among 10,5,7 is=="+Math.max(10,5,7)); document.write("<br>minimum of 10,5,7 is=="+Math.min(10,5,7)); document.write("<br>power is=="+Math.pow(2,5)); document.write("<br>square root=="+Math.sqrt(16)); document.write("<br>absolute of -10=="+Math.abs(-10)); for(i=0;i<10;i++) {document.write("<br>random"+i+"=="+Math.random());} document.write("<br>"+parseInt(5.6)); document.write("<br>=="+isNaN(a)); </script> </body> </html> Output:



Ex No:III c Demonstrate Array Objects and Date Object’s predefined methods Question: To create an html page to explain the use of various predefined functions in a array & Date object in Javascript. Procedure: Create an html page named as “date.html” & “array.html”. within the script tag define the various date object and array object functions & display the output. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: date.html <html> <head> <title> Date Functions</title> <script language="javascript"> document.write("<h2 style=\"color:red;\">Date Constructor</h2>"); var date1=new Date(); document.write("<br><B style=\"color:red;\">Date1 Constructor without parameter==</b>"+date1.toGMTString()); document.write("<br><B style=\"color:red;\">Date1 Constructor without parameter==</b>"+date1.toLocaleString()); document.write("<br><B style=\"color:red;\">Date1 Constructor without parameter==</b>"+date1); var date2=new Date(999); document.write("<br><br><B style=\"color:red;\">Date2 Constructor with millisecond as parameter==</b>"+date2); var date22=new Date(1000000000); document.write("<br><B style=\"color:red;\">Date22 Constructor with millisecond as parameter==</b>"+date22); var date3=new Date("Mon 9 April 2001 14:15:30"); document.write("<br><br><B style=\"color:red;\">Date3 Constructor with string as parameter==</b>"+date3); var date33=new Date("Mon 9 April 2001"); document.write("<br><B style=\"color:red;\">Date33 Constructor with string as parameter==</b>"+date33); var date333=new Date("14:15:30"); document.write("<br><B style=\"color:red;\">Date333 Constructor with string as parameter==</b>"+date333); var date4=new Date(2011, 3, 3,13, 12, 56);



document.write("<br><br><B style=\"color:red;\">Date4 Constructor with string as parameter==</b>"+date4); document.write("<h2 style=\"color:purple;\">Date Methods for Retrieve Date values</h2>"); document.write("<br><b style=\"color:purple;\">getDate() Method in date1==</b>"+date1.getDate()); document.write("<br><b style=\"color:purple;\">getDay() Method in date1==</b>"+date1.getDay()); document.write("<br><b style=\"color:purple;\">getFullYear() Method in date1==</b>"+date1.getFullYear()); document.write("<br><b style=\"color:purple;\">getHours() Method in date3==</b>"+date3.getHours()); document.write("<br><b style=\"color:purple;\">getMilliseconds() Method in date2==</b>"+date2.getMilliseconds()); document.write("<br><b style=\"color:purple;\">getMilliseconds() Method in date22==</b>"+date22.getMilliseconds()); document.write("<br><b style=\"color:purple;\">getMilliseconds() Method in date3==</b>"+date3.getMilliseconds()); document.write("<br><b style=\"color:purple;\">getMinutes() Method in date3==</b>"+date3.getMinutes()); document.write("<br><b style=\"color:purple;\">getSeconds() Method in date3==</b>"+date3.getSeconds()); document.write("<br><b style=\"color:purple;\">getMonth() Method in date4==</b>"+date4.getMonth()); document.write("<br><b style=\"color:purple;\">getTime() Method in date33==</b>"+date33.getTime()); document.write("<br><b style=\"color:purple;\">getTime() Method in date333==</b>"+date333.getTime()); document.write("<br><b style=\"color:purple;\">getTime() Method in date4==</b>"+date4.getTime()); document.write("<br><b style=\"color:purple;\">getTime() Method in date1==</b>"+date1.getTime()); document.write("<h2 style=\"color:purple;\">Date Methods for Setting values</h2>"); date1.setDate(23); document.write("<br><b style=\"color:purple;\">setDate() Method in date1==</b>"+date1); date1.setFullYear(2012) document.write("<br><b style=\"color:purple;\">setFullYear() Method in date1==</b>"+date1); </script> </head> </html>



Output:

File Name: Array.html <html> <head> <title>Array program</title> </head> <body> <script language"javascript"> var days=["Monday","Tuesday","Wednesday","Thursday","Friday"]; var day=new Array("Mon","tues","Wed","Thrus","fri"); var mixed=["monday",34,13.78,"tuesday"]; var mix=new Array("mon",1,12.1,"tues"); document.write("<br><h3>Printing/Accessing the values in array using LOOP</h3>"); for(i=0;i<mixed.length;i++) { document.write("<br>Array element "+i+" == "+mixed[i]);



} document.write("<br><h3>Enhanced array </h3>"); mixed[4]="Wednesday"; mixed[10]="Friday"; for(i=0;i<mixed.length;i++) { document.write("<br>Array element "+i+" == "+mixed[i]); } document.write("<br><h3>Searching an Element in an array </h3>"); for(i=0;i<mixed.length;i++) { if(mixed[i]==34) { document.write("<br>Array element "+i+" == "+mixed[i]+" is found"); break; } } document.write("<br><h3>Removing an Element from an array </h3>"); var remove=prompt("Enter an element that to be removed from array"); var temp=new Array(mixed.length-1); var count=0; for(i=0;i<mixed.length;i++) { if(mixed[i]!=remove) { temp[count]=mixed[i]; count++; } } mixed=temp; document.write("<br><h3>New Array element after removing</h3>"); for(i=0;i<mixed.length;i++) { document.write("<br>Element "+i+" == "+mixed[i]); } document.write("<br><h3>OBJECT BASED ARRAY FUNCTION</h3>"); document.write("<br><b>Concatenation</b>"); var newarray=days.concat(day,mix); for(i=0;i<newarray.length;i++) { document.write("<br>Element "+i+" == "+newarray[i]); } document.write("<br><br><b>Joining with some string</b>"); document.write("<br>"+mix.join("-"));



document.write("<br><br><b>POPing one element from array</b>"); document.write("<br>"+mix.pop()); document.write("<br>Array after pop is"); document.write("<br>"+mix.join("-")); document.write("<br><br><b>PUSHing one or more element into an array</b>"); mix.push(10,"suba",234.8); document.write("<br>Array after push is"); document.write("<br>"+mix.join("-")); document.write("<br><br><b>Reversing an array</b>"); document.write("<br>Array after reverse is"); document.write("<br>"+mix.reverse()); document.write("<br><br><b>Shifting in an array</b>"); document.write("<br>Array after shifting one element is"); document.write("<br>"+mix.shift()); document.write("<br>New mix array is =="+mix.join("-")); document.write("<br><br><b>UNShifting in an array</b>"); document.write("<br>Array after unshifting one element is"); day.unshift("suba","satheesh"); document.write("<br>New day array is =="+day.join("-")); document.write("<br><b>Extracting a part of array</b>"); document.write("<br>"+mixed.slice(3)); document.write("<br>"+mixed.slice(4,11)); document.write("<br><b>Sorting an array</b>"); document.write("<br>"+days.sort()); var num=[1,4,2,3,11,33,3.4,99]; document.write("<br><b>Sorting an number array</b>"); //document.write("<br>"+num.sort(function(a,b){return a-b;})); document.write("<br>"+num.sort(nr)); function nr(a,b) { return a-b; } document.write("<br><br><b>Splice-removing and adding element in an array at the same time</b>"); day.splice(2,2,"Kaushik","Kaushika","Akshitha"); document.write("<br>New day array is =="+day.join("--")); var str="123+5"; x=20;



document.write("<br><br><b>Eval function :--</b></br>"); document.write("<br>Value of str =="+eval(str)+"<br>"); document.write("<br />" + eval(x+17)); eval("x=10;y=20;document.write(\"<br>x*y == \"+x*y)"); document.write("<br><h3>Global functions</h3>"); document.write("<ol> <li>escape()<li>eval()<li>isFinite()<li>isNaN()"); document.write("<li>Number()<li>parseFloat()<li>parseInt()<li>String()</ol>"); </script> </body> </html> Output:



Ex No:III d Exception Handling Question: To create an html page to demonstrate exception handling in javascript. Procedure: Create an html page named as “exception.html” and do the following. 1. within the script tag write code to handle exception

a) define a method RunTest() to get any string values(str) from the user and cll the method Areletters(str). b) In Areletters(str) method check whether str contain only alphabets (a-z, A-Z), if not throw exception. c) Define a exception method Input Exception(str) to handle the exception thrown bythe above method. 2. Within the body tag define a script tag to call Runtest() method defined. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: exception.html <html> <head> <script type="text/javascript" language="javascript"> function InputException(msg) { this.val = msg; this.toString = function() { return "Input Exception in = "+this.val;} } function AreLetters(msg) { var input = msg; var re = new RegExp("[^a-zA-Z]"); if(input.match(re)) { oops = new InputException(input); throw oops; } else{document.write("<br>"+input);} } function RunTest() { var input = prompt("type something",""); try{AreLetters(input);} catch(e){document.write("<br>exception occured and caught"+e.toString());} document.write("<h1>Exception Handling</h1>"); }



</script> </head> <body> <script language="javascript" type="text/javascript"> RunTest(); </script> </body> </html> Output



Ex No:III e Calendar Creation : Display all month Question: To display the calendar using javascript code by getting the year from the user. Procedure: Create an html page named as “calendar.html” 1. Define a method called “day_title(days)” to fill the days in the table. 2. Define a method called “fill_table(month,len)” to fill the table with date, according to the month & number of dates (len). 3. Define a prompt() method to get the year from the user. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: calendar.html <html> <head> <script language="javascript"> function day_title(day_name) { document.write("<td align=center width=35>"+day_name+"</td>") } function fill_table(month,month_len) { day=1 document.write("<table border=1 cellspacing=3 cellpadding=3%>") document.write("<td colspan=7 align=center><b>"+month+" "+year+"</b><tr>") day_title("Sun") day_title("Mon") day_title("Tue") day_title("Wed") day_title("Thu") day_title("Fri") day_title("Sat") document.write("</tr><tr>"); for(var i=1; i<start_day;i++) { document.write("<td>") } for(var i=start_day; i<8;i++) { document.write("<td align=center>"+"<a href=DAILYFORM.html>"+day+"</a>"+"</td>") day++ }



document.write("<tr>") while(day<=month_len) { for(var i=1; i<=7 && day<=month_len;i++) { document.write("<td align=center>"+"<a href=index.html>"+day+"</a>"+"</td>") day++ } document.write("<tr>") start_day=i; } document.write("</tr></table><br>") } year=prompt("enter 4 digit year "); today=new Date("January 1, "+year) start_day=today.getDay()+1 fill_table("January", 31) if (year%4==0) fill_table("February", 29) else fill_table("February", 28) fill_table("March", 31) fill_table("April", 30) fill_table("May", 31) fill_table("June", 30) fill_table("July", 31) fill_table("August", 31) fill_table("September", 30) fill_table("October", 31) fill_table("November", 30) fill_table("December", 31) </script> </head> </html>



Output:



Ex No:III f Event Handling 1.Validating Registration Form Question: To create a html registration form and to validate the form using javascript code. Procedure: Create an html page named as “validate_registration.html” 1. Define a method name as “reset()” to be called when reset button is clicked and manually set all values of fields to default. 2. Define a method name as “check()” to be called when check button is clicked. a) here check for blank entry, name, age, email, phone no, radio button, checkbox. b) Once all the valuables are properly filled make the submit button to be visible. 3. Define the various fields in form using table. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: validate_registration.html <html> <script > function reset1() { x=confirm("It will clear all the text entered") if(x==true) { document.form1.t1.value="" document.form1.t2.value="" document.form1.ta.value="" document.form1.t3.value="" document.form1.r1[0].checked=false document.form1.r1[1].checked=false document.form1.c1.checked=false document.form1.c2.checked=false document.form1.c3.checked=false document.form1.c4.checked=false document.form1.c5.checked=false document.form1.c6.checked=false document.form1.t1.focus() } } function check() { if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value)))) {



alert("please enter the correct name") document.form1.t1.value="" document.form1.t1.focus() } else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value))) { alert("please enter the age correctly") document.form1.t2.value="" document.form1.t2.focus() } else if(document.form1.t2.value>40) { alert("Sorry you age is beyound the limit") document.form1.t2.value="" document.form1.t2.focus() } else if(document.form1.ta.value=="") { alert("please enter the address") document.form1.ta.focus() } else if((document.form1.r1[0].checked==false)&&(document.form1.r1[1].checked==false)) { alert("please select the radio button") document.form1.r1[0].focus() } else if((document.form1.c1.checked==false)&&(document.form1.c2.checked==false)&&(document.form1.c3.checked==false)&&(document.form1.c4.checked==false)&&(document.form1.c5.checked==false)) { alert("please select the the languages known") document.form1.c1.focus() } else if(document.form1.t3.value=="") { alert("please enter the password") document.form1.t3.focus() } else if((document.form1.t1.value!="")&&(document.form1.t2.value!="")&&(document.form1.t3.value!="")&&(document.form1.ta.value!="")&&((document.form1.r1[0].checked!=false)||(document.form1.r1[0].checked!=false))&&((document.form1.c1.checked!=false)||(document.form1.c2.checked!=false)||(document.form1.c3.checked!=false)||(document.form1.c4.checked!=false)||(document.form1.c5.checked!=false))) { x=confirm("you have entered the datas correctly,want to submit the form") if(x)



{ document.lay.visibility="show" } } } </script> <body bgcolor="lightblue" text="red" style="font-size:15pt;font-family:Garamond" onload=document.form1.t1.focus()><center> <h2>ENTRY FORM</h2></center> <form name=form1 method=post > <table name=tab cellspacing=30pt> <tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input type=text name=t1 size=18> <tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input type=text name=t2 maxlength=3 size=18> <tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea name=ta rows=5 cols=15></textarea> <tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1 value="female">Female<br> <input type=radio name=r1 value=male>Male</td> <tr><td align=left><h2>Languages Known :</h2> </td><td align=left><center>(select more than one)</center> <input type=checkbox name=c1 value=c>C<br> <input type=checkbox name=c2 value=c++>C++<br> <input type=checkbox name=c3 value=vb>VB<br> <input type=checkbox name=c4 value=java>JAVA<br> <input type=checkbox name=c5 value=asp>ASP<br> <input type=checkbox name=c6 value=others>OTHERS<br></td> <tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input type=password name=t3 size=18> </table><center> <input type=button value=" reset " onClick=reset1()> <input type=button value=" check " onClick=check()> <h3>Before submitting the datas please click the check Button</h3> <input type="submit" value=" submit "></center> </form> </body> </html>



Output

Open a Window from the current window Question: To create a html file. To open new window from the current window using javascript. Procedure: Create a html page named as openwindow.html

Define a method called as openwin() which is to be called when a button is clicked. Within this method specify the necessary code to open a new window with some message as well as images.

Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension.



File Name: openwindow.html <html> <head> <script language="javascript"> function openwin() { msg=window.open("","Displaywindow","height=200,width=200,status=yes,toolbar=yes,directories=no,menubar=yes,location=yes"); msg.document.write("<html><title>A new Window</title>"); msg.document.write("<img src='nathan.gif'><p><form><input type=button value=close onclick=self.close()></form></html>"); } </script> </head> <body bgcolor="blue"> <form> <input type=button value=click name=b1 onclick=openwin()> </form> </body> </html> Output:

Change color of background at each click of button or refresh of a page Question: To create an html page to change the background color for every click of a button using javascript. Procedure: Create a html page named as changebackground_color.html

define a method named as random_color() which is to be called when you click on the body. This method should generate random number, which is used to set the background color. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension.



File Name:ChangeBackground_color.html <html> <head> <script type="text/javascript"> function get_random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.round(Math.random() * 15)]; } document.body.style.background= color; } </script> </head> <body onclick="get_random_color()"> <b>Click me to change my color!</b> </body> </html> Output

Display calendar for the month and year selected from combo box Question: To create an html page with 2 combo box populated with month & year, to display the calendar for the selected month & year from combo box using javascript. Procedure: Create a html file named as “Claendar_month.html” -- add two combo box one to display month & another for year and one button. -- when the button is clicked display the calendar for the selected values.



Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: Calendar_month.html

<html> <head> <script language="javascript" type="text/javascript"> var i=0,j,cnt=0,c; var days=["sun","mon","tue","wed","thu","fri","sat"]; var yr,k,mon; var last=[31,28,31,30,31,30,31,31,30,31,30,31]; var mn=["January","February","March","April","May","June","July","August","September","October","November","December"]; function my() { yr=document.form1.qual.value; k=document.form1.qual1.value; if(yr%4==0&&yr%100==0||yr%400){last[1]=29;} document.write("<table width='50%' height='60%' border='9' bgcolor='cyan'>"); document.write("<tr><td colspan='7'><center>"+ mn[k]+" "+yr+"</center></td></tr>"); document.write("<tr>"); for(i=0;i<=6;i++) {document.write("<td>"+days[i]+"</td>");} document.write("</tr>"); var date2=new Date(yr,k,1); var daz=date2.getDay(); cnt=0; for(i=0;i<=daz-1;i++) {document.write("<td></td>"); cnt=cnt+1; } for(j=1;j<=last[k];j++) { c=cnt%7; if(c==0) { document.write("</tr><tr><td><a href=\"diary.html\" target=\"new\">"+j+"</a></td>");cnt++; } else {



document.write("<td><a href=\"diary.html\" target=\"new\">"+j+"</a></td>"); cnt++; } } document.write("</tr></table>"); } </script> </head> <body bgcolor="green"> <form name="form1"> <select name="qual"> <option>2011</option> <option>2012</option> <option>2013</option> <option>2014</option> <option> </option> </select> <select name="qual1"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option> </option> </select> <input type="button" value="ok" onclick=my()></input></form> </body>

</html> Output



OnMouseover event Question: To create a html page to display a new image & text when the mouse comes over the existing content in the page. Procedure: Create an html file named as mouse.html

define two methods mouseOn() & mouseOff() to be called when the mouse pointer comes upon the text & out the text respectively. Solution :- In notepad type the necessary code & save with the file name mentioned with .html extension. File Name: mouse.html <html> <head> <script language="javascript"> function preload() { topon=new Image(100,50); topon.src="E:\\IT0306-WebSystems and Technology\\Web LAB\\img_tree.png"; topoff=new Image(260,280); topoff.src="E:\\IT0306-WebSystems and Technology\\Web LAB\\web.gif"; } function myMouseOn(n)



{ preload(); imageON=eval(n+"on.src"); document.images[n].src=imageON; } function myMouseOff(n) { imageOFF=eval(n+"off.src"); document.images[n].src=imageOFF; } </script> </head> <body > <h1> Demo for mouse over</h1> <a href="#" onMouseOut="myMouseOff('top')"; onMouseOver="myMouseOn('top')";> <img src="E:\Web Technology\nathan.gif" alt="Show Next" name="top"> </a> </body> </html> Output



ASP



Sl No:IV a Create a welcome Cookie (Hit for a page) Question:- To create an ASP file to find the no of hits on the page and to have rotating banner content. Procedure: 1. Create a file named as textads.txt which contains different images and text to be displayed for each hit of a page. 2. Create an ASP file named as “cookie_image_text.asp” to display the number of hit and to call the file created above. Solution :- In notepad type the necessary code & save with the file name mentioned with .asp extension To execute ASP file activate IIS server as mentioned in execution step below and in URL type localhost/Foldername/Filename.asp to run File Name : textads.txt %% #4 <h2>This is a great day!!</h2> %% #3 <img src="/yourewelcometop[1].gif"> %% #1 <h1>This is displayed randomly!!</h1> %% #1 <h6><center>This is displayed at center!!</center></h1> %% #1 <img src="/mathew.gif"> %% #1 <img src="/sun.gif"> File Name : cookie_image_text.asp <% dim numvisits response.cookies("NumVisits").Expires=date+365 numvisits=request.cookies("NumVisits") if numvisits="" then response.cookies("NumVisits")=1 response.write("Welcome! This is the first time you are visiting this Web page.") else response.cookies("NumVisits")=numvisits+1 response.write("You have visited this ") response.write("Web page " & numvisits)



if numvisits=1 then response.write " time before!" else response.write " times before!" end if end if %> <% set cr=server.createobject("MSWC.ContentRotator") response.write(cr.ChooseContent("/textads.txt")) %> <html> <body> Output:

Sl No : IV b List a table of content and navigate within the pages Question: To create a table of content using ASP program & navigate within the pages. Procedure: Create 3 .asp file named as Page1.asp, Page2.asp, Page3.asp with some content. Create another .asp file named as tablecontent_navigation.asp file with some text content and a link to the table of content and to next page. Create a .txt file named as “links.txt” which contains all the four .asp file information. Solution :- In notepad type the necessary code & save with the file name mentioned with .asp extension To execute ASP file activate IIS server as mentioned in execution step below and in URL type localhost/Foldername/Filename.asp to run File Name:table_links.txt table_content.asp Table_content ASP File cookie_image_text.asp Cookie_Image_Text ASP File File Name:links.txt tablecontent_navigation.asp Page 1 page1.asp Page 2 page2.asp Page 4 page3.asp Page 3 File Name:page1.asp <html> <body> <h1> This is page 2 </h1> </body> </html>  File Name:page2.asp <html> <body> <h1> This is page 3 </h1> </body> </html>

File Name:page3.asp <html> <body> <h1> This is page 3 </h1> </body> </html>  File Name:nlcode.inc <% dim nl Set nl=Server.CreateObject("MSWC.NextLink") if (nl.GetListIndex("links.txt")>1) then Response.Write("<a href='" & nl.GetPreviousURL("links.txt")) Response.Write("'>Previous Page</a>") end if Response.Write("<a href='" & nl.GetNextURL("links.txt")) Response.Write("'>Next Page</a>") %> File Name: tablecontent_navigation.asp <html> <body> <h1> This is page 1! </h1> <% Set nl=Server.CreateObject("MSWC.NextLink") If (nl.GetListIndex("/links.txt")>1) Then %> <a href="<%Response.Write(nl.GetPreviousURL("/links.txt"))%>">Previous Page</a> <%End If%> <a href="<%Response.Write(nl.GetNextURL("/links.txt"))%>">Next Page</a> <p>The example uses the Content Linking Component to navigate between the pages in a text file.</p> <p> The example below builds a table of contents. </p> <%



dim c dim i set nl=server.createobject("MSWC.Nextlink") c = nl.GetListCount("\table_links.txt") i = 1 %> <ul> <%do while (i <= c) %> <li><a href="<%=nl.GetNthURL("\table_links.txt", i)%>"> <%=nl.GetNthDescription("\table_links.txt", i)%></a> <% i = (i + 1) loop %> </ul> <p> The text file contains a list of page urls and link descriptions. It contains one line of text for each page. Note that the url and description MUST be separated by the TAB character. </p> </body> </html> Output:



Sl No : IV c Demonstrate Request and Response object using HTML Form Question: To create ASP program to demonstrate request & response object method. Procedure: Create an ASP file named as request.asp a) Create a simple form to get the first name & last name and a button submit. When the button is clicked the values in the text box are printed by response object by Request.QueryString b) Create a hyperlink with some values defined in the tag & display the same using request & response object. Solution :- In notepad type the necessary code & save with the file name mentioned with .asp extension To execute ASP file activate IIS server as mentioned in execution step below and in URL type localhost/Foldername/Filename.asp to run File Name : request.asp <%@language="javascript"%> <html> <body> <a href="request.asp?color=green">Example</a> <%var str=Request.QueryString; Response.Write(str);%> <form action="request.asp" method="get"> First name: <input type="text" name="fname"><br /> Last name: <input type="text" name="lname"><br /> <input type="submit" value="Submit"> </form> <% Response.Write(Request.QueryString) %> </body></html>



Output



Sl No : IV d Database Connection to display all the values in the table Question: To display all the content in the database using ASP program. Procedure: Create a database with the name Student.mdb as shown below File Name: Student.mdb

Create ASP program named as “db.asp” and write the necessary database connection code & display all the content in the database using html <table>. Solution :- In notepad type the necessary code & save with the file name mentioned with .asp extension To execute ASP file activate IIS server as mentioned in execution step below and in URL type localhost/Foldername/Filename.asp to run File Name : db.asp <html> <body> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("Student.mdb")) set rs = Server.CreateObject("ADODB.recordset") rs.Open "SELECT * FROM Stud ORDER BY Student_Name", conn %> <table border="1" width="100%" bgcolor="#fff5ee"> <tr> <%for each x in rs.Fields response.write("<th align='left' bgcolor='#b0c4de'>" & x.name & "</th>") next%>



</tr> <%do until rs.EOF%> <tr> <%for each x in rs.Fields%> <td><%Response.Write(x.value)%></td> <%next rs.MoveNext%> </tr> <%loop rs.close conn.close %> </table> </body> </html> Output



Execution of ASP code: Activate IIS server by following step Start – control panel – programs(uninstall)—Programs and Features – Turn window features on and off Will get the following screen. Select IIS in it and others inside that IIS and click ok

To check whether IIS is activated just type the following in the browser url, will display the following page as shown below

localhost/



Once the IIS is properly installed a folder named “inetpub” will be created in the C:/ Drive. Within this folder a subfolder called wwwroot will be there. This is the folder where we want to save all our asp files. (OR u can save file in any folder and create a virtual directory linked to this folder from service as shown below)



JAVA SERVLETS



Ex No: V a Simple Servlet Question: To create a simple servlet program to display the date (using Tomcat server). Procedure: Create a java file named as Simple_Servlet.java

import necessary packages. inside the doGet() method create a Date object and display it using html tags.

Solution :- See execution steps for servlet given below File Name: Simple_Servlet.java import java.io.*; import java.util.*; import javax.servlet.*; import javax.servlet.http.*; public class Simple_Servlet extends HttpServlet { public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException{ response.setContentType("text/html"); PrintWriter out = response.getWriter(); Date d=new Date(); out.println("<html><title>Date Display</title>" + "<body><h1> Date = "+ d.toString()+"</h1></body></html>"); } } Output:



Ex No: V b Servlet with HTML form Question: To create a servlet program to retrieve the values entered in the html file (Using NetBeans IDE). Procedure:

Create a html file named as Servlet_Html.html. Add 3 text box to get First, Middle& Last name and a submit button. When submit button is clicked it should redirect to the servlet program to print the values.

Create a java file named Servlet_HTML.java and use necessary methods to retrieve the data from HTML file and display them. Solutions: See execution steps for servlet given below File Name: Servlet_Html.html <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body><b><font color="blue">Please Enter your First Name, Last Name and Middle Name:</font></b><br><br> <form name="frm" method="post" action="http://localhost:8080/Simple_Servlet/Servlet_HTML "> <table border = "0"> <tr align="left" valign="top"> <td>First Name:</td> <td><input type="text" name ="firstname" /></td> </tr> <tr align="left" valign="top"> <td>Middle Name:</td> <td><input type="text" name ="middlename" /></td> </tr> <tr align="left" valign="top"> <td>Last Name:</td> <td><input type="text" name ="lastname" /></td> </tr> <tr align="left" valign="top"> <td></td> <td><input type="submit" name="submit"/></td> </tr> </table> </form> </body> </html>



File Name: Servlet_HTML.java import java.io.*; import java.util.*; import javax.servlet.*; import javax.servlet.http.*; public class Servlet_HTML extends HttpServlet { public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException{ response.setContentType("text/html"); PrintWriter out = response.getWriter(); String firstName = request.getParameter("firstname"); String middleName = request.getParameter("middlename"); String lastName = request.getParameter("lastname"); out.println("<b><font color='blue'>Your FirstName is : </font></b>" + "<b>"+ firstName +"</b>" + "<br>"); out.println("<b><font color='blue'>Your Middle Name is : </font></b>" + "<b>"+ middleName +"</b>" + "<br>"); out.println("<b><font color='blue'>Your Last Name is : </font></b>" + "<b>"+ lastName +"</b>"); } } Output:



Sl No: V c Cookie creation and retrieval from HTML page Question: To display the cookie values that are entered in the html page using servlet program. (using NetBean IDE). Procedure:

Create a html file named as getCookie.html with 3 textbox to enter any data & a submit button. When the submit button is clicked the values in the textbox should be set as a cookie value in “AddCookieServlet.jav” file.

In “AddCookieServlet.Java” file write the necessary code to get the cookie values from .html file and store them in the cookie predefined class & display the values that are retrieved from html.

Create another servlet program named as “getCookie.java” to get the values added to the cookie predefined class & display all the values. Solution: See execution steps for servlet given below File Name: getcookie.html <html> <body> <form name="Form1" method="post" action="http://localhost:13105/SERVLETS/AddCookieServlet"> <table> <tr> <td><b>Employee</b></td> <td><input type=textbox name="Name" size="25" value=""></td> </tr> <tr> <td><b>Phone</b></td> <td><input type=textbox name="Phone" size="25" value=""></td> </tr> </table> <B>Enter a value for MyCookie:</B> <input type=textbox name="data" size=25 value=""> <input type=submit value="Submit"> </form> </body></html> Output



File Name: AddCookieServlet.java import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AddCookieServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { } finally { out.close(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // processRequest(request, response); // Get parameter from HTTP request. String data1 = request.getParameter("Name"); String data2= request.getParameter("Phone"); String data = request.getParameter("data"); // Create cookie. //Cookie cookie = new Cookie("MyCookie", data); Cookie cookie[]=new Cookie[10]; cookie[0] = new Cookie("Name", data1); cookie[1] =new Cookie("Phone", data2); cookie[2] = new Cookie("MyCookie", data); // Add cookie to HTTP response. // response.addCookie(cookie); response.addCookie(cookie[0]); response.addCookie(cookie[1]); response.addCookie(cookie[2]); // Write output to browser. response.setContentType("text/html"); PrintWriter pw = response.getWriter(); pw.println("<B>MyCookie has been set to"); pw.println(data); pw.println(data1); pw.println(data2);



pw.close(); } public String getServletInfo() { return "Short description"; } } Output

File Name: getcookie.java import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class GetCookiesServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { } finally { out.close(); } }



protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Get cookies from header of HTTP request. Cookie[] cookies = request.getCookies(); // Display these cookies. response.setContentType("text/html"); PrintWriter pw = response.getWriter(); pw.println("<B>"); for(int i = 0; i < cookies.length; i++) { String name = cookies[i].getName(); String value = cookies[i].getValue(); pw.println("name = " + name + "; value = " + value); pw.println("<br>"); } pw.close(); } public String getServletInfo() { return "Short description"; }// </editor-fold> } Output



Execution Step for servlet From dos command and Tomcat Server ------------------------------------- To Compile the servlet program --------------------------------------- D:\SUBA 2008 - 2009\Advance java\servlets>javac -classpath "c:\Program Files\Apache Software Foundation\Tomcat 5.5\common\lib\servlet-api.jar" HelloWorldExample.java .class file is generated now open C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps create a new folder in it( example Servlet) Within this folder create another folder called as WEB-INF within this folder create another folder called as classes and one web.xml file containing the following code in it -------------------------------------------------------------------- <?xml version = "1.0" encoding = "ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>Hello Servlet</servlet-name> <servlet-class>HelloWorldExample</servlet-class> </servlet> <servlet-mapping> <servlet-name>Hello Servlet</servlet-name> <url-pattern>/servlet1</url-pattern> </servlet-mapping> </web-app> -------------------------------------------------------------------- in classes folder copy and paste the .class file of servlet -------------------------------------------------------------------- now start ur tomcat to check this in Explorer type http://localhost:8080 is installed and running properly means tomcat will run.



to execute ------------------- http://localhost:8080/Servlet(Foldername)/servlet1(Url-pattern) Using Net Beans 6.5 ------------------------ Open the Net Beans IDE – File – New Project – Select Java web from categories and Web application from projects Click next and give the project name as required and the path where to save your servlet program, click next and select the server, but by default Glass fish server will be selected leave as such and click finish Now in the project right click and click New – servlet from the list Type the necessary code right click compile and run the code



XML



Sl No VI a Create any catalog Question: To create a CD catalog using XML file. Procedure: Create an Xml file named as “cd_catalog.xml” with the following details. <catalog> <cd> <title>…</title> <artist>…</artist> <country>…</country> <company>…</company> <price>…</price> <year>…</year> </cd> <!-Add 3 to 4 <cd> data.--> </catalog> Solution :- In notepad type the necessary code & save with the file name mentioned with .xml extension. File Name: cd_catalog.xml <?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> <cd> <title>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year>



</cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</company> <price>10.20</price> <year>1990</year> </cd> </catalog> Output



Sl No: VI b XML with CSS and XSL Style sheet Question: To create external style sheet and using the style sheet in xml file. Procedure:

Create a style sheet named as cd_catalog.css and provide necessary style for the tags used in cd_catalog.xml file

Create an xml file named as cd_catalog_css.xml and include the .css file created above. Solution :- In notepad type the necessary code & save with the file name mentioned with .xml extension. File Name: cd_catalog.css CATALOG { background-color: #ffffff; width: 100%; } CD { display: block; margin-bottom: 30pt; margin-left: 0; } TITLE { color: #FF0000; font-size: 20pt; } ARTIST { color: #0000FF; font-size: 20pt; } COUNTRY,PRICE,YEAR,COMPANY { display: block; color: #000000; margin-left: 20pt; }

File Name: cd_ctalog.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="cd_catalog.css"?>



<CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>RCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1982</YEAR> </CD> </CATALOG> Output:



XML with XSL Style sheet Question: To create a xsl style sheet to display the data in the xml using html table. Procedure:

Create a xsl style sheet named as cd.xsl and write necessary code to access the data from cd_catalog.xml file and display the data’s using html table tag.

create an xml file named as cd.xml & include the .xsl file created above. Solution :- In notepad type the necessary code & save with the file name mentioned with .xml extension. File Name: cd.xsl <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> File Name: cd.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="cd.xsl"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country>



<company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> <cd> <title>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year> </cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</company> <price>10.20</price> <year>1990</year> </cd> </catalog> Output



PHP



Sl No: VII a File operation Question: To create a php program to demonstrate the different file handling methods. Procedure: Create a php file named as files.php and define the different predefined functions and demonstrate the use of the predefined functions. Solution: Use PHP Designer 7 or WAMP server for ex3cuting the Php Program. Save the program with .php extension File Name: files.php <?php echo "<h3>Using file() method</h3>"; $lines = file('typecaste.txt'); foreach ($lines as $line_num => $line) { print "<font color=red>Line #{$line_num}</font> : " . $line . "<br />\n"; } $ar1=file("typecaste.txt"); for($x=0;$x<count($ar1);$x++) echo "<br>".$ar1[$x]; echo "<br>"; echo "<h3>Using fopen(), fclose() and fread(){ return value as a single string} method</h3>"; $YourFile = "typecaste.txt"; $handle = fopen($YourFile, 'r'); $Data = fread($handle, 512); //maximum 8192 bytes can be read fclose($handle); print $Data; echo"<br>"; echo "<h3>Using file_get_contents() similar to fread() method</h3>"; $file = file_get_contents ('typecaste.txt'); echo $file; echo "<h3>Using fopen(), feof(), fgets(){read line by line default it read 1024 byte of line value}, fgetss() method</h3>"; $YourFile = "sample.txt"; $handle = fopen($YourFile, 'r'); while (!feof($handle))



{ $Data = fgets($handle, 256); //$Data = fgets($handle, 256); //Skip the HTML tags and dipsly the content alone print $Data; print "<p>"; } fclose($handle); echo "<h3>Using copy()method return 1 if copied else 0</h3>"; echo copy("typecaste.txt","target.txt"); echo "<br><b>file exists-----</b>". file_exists("typecaste.txt"); echo "<br><b>file exists-----</b>". file_exists("typecasteee.txt"); ?> Output



Sl No: VII b Regular Expression, Array, Math, String, Date functions Question: To create a php program to demonstrate the different predefined function in array, Math, Data & Regular Expression. Procedure:

Create php file named as Regularexpression.php for demonstrating the method for handling various strings with regular expression Array.php for demonstrating the methods for handling the array values Math_function.php to demonstrate the predefined in math objects. Date_time.php to demonstrate the predefined function in date subject Solution :- Use PHP Designer 7 or WAMP server for ex3cuting the Php Program. Save the program with .php extension File Name: regularexpression.php <?php // solution for validate email syntax is using filter_var. if (filter_var('[email protected]', FILTER_VALIDATE_EMAIL)) { echo "<br>Your email is ok."; } else { echo "<br>Wrong email address format."; } //Validate username, consist of alpha-numeric (a-z, A-Z, 0-9), underscores, and has minimum 5 character and maximum 20 character. //You could change the minimum character and maximum character to any number you like. $username = "user_name12"; if (preg_match('/^[a-z\d_]{5,20}$/i', $username)) { echo "<br>Your username is ok."; } else { echo "<br>Wrong username format."; } //Highlight a word in the content $text = "Sample sentence from Web, regex has become popular in web programming. Now we learn regex. According to wikipedia, Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor"; $text = preg_replace("/\b(regex)\b/i", '<span style="background:blue">\1</span>', $text); echo "<br>".$text; $test="Cookies::multipack::Choco::brown::SRM"; $parts=preg_split("/::/",$test); echo "<ul>"; while(list($key,$val)=each($parts))



{ echo "<li>".$val."</li>"; } echo"<ul>"; ?>

Output

File Name: array.php <?php $days=array("mon",1,2,"tues","thurs"); $days[6]="friday"; $days[4]="wednes"; $day[]=$days[6].$days[4]; $day[2]=123; foreach($days as $values) echo $values."<br>"; foreach($day as $values) echo $values."<br>"; $ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34); foreach($ages as $values) echo $values."<br>"; echo "Peter is " . $ages['Peter'] . " years old."; $sam[0]=$ages["Peter"].$ages["Joe"]; echo "<br>sam[0] value is =====".$sam[0];



$array=array("Pen1"=>array ("name"=>"Fido","color"=>"brown"),"Pen2"=>array ("name"=>"Joe","color"=>"white")); echo "<br>Multi array value=====". $array["Pen1"]["name"]; $array2=array(array(1,2,3),array("a","b","c")); echo "<br>Multi basic array ====". $array2[1][2]; $names=array(); $message="Hello "; $prefix1="Mr."; $prefix2="Mrs."; $names[0]="John"; $names[1]="George"; $names[2]="James"; $names[3]="Anna"; $names[4]="Robert"; $names[5]="John"; $names[6]="James"; $names[7]="George"; $names[8]="Maria"; $names[9]="Peter"; $names[10]="James"; print('<br>sort function sorts array<br>'); sort($names); $asize=sizeof($names); echo "<br>Size of array name===".$asize; echo "<br>"; for($i=0; $i<$asize; $i++) { if(($names[$i]=="Anna")||($names[$i]=="Maria")) { print($message.$prefix2.$names[$i]."<br>"); } else { print($message.$prefix1.$names[$i]."<br>"); } } print('<br>'); echo "function array_unique removes duplicate values<br>"; $array=array(); $array=array_unique($names); foreach($array as $key => $value) { echo $key . "-". $value . "<br>"; } print('<br>'); rsort($array); print("rsort function sorts array in reverse order<br>"); foreach($array as $key => $value)



{ echo $key . "-". $value . "<br>"; } print('<br>array_pop($array) functions returns the last element<br>'); $lastelement=array_pop($array); print('<br>Last element='.$lastelement.'<br>'); print('<br>Array after caling array_pop($array): The last element removed<br><br>'); foreach($array as $key => $value) { echo $key . "-". $value . "<br>"; } array_push($array, "Chris", "Colin"); print('<br>Array after calling array_push($array, "Chris", "Colin") and print_r: Chris and Colin are added to the end of array<br><br>'); foreach($array as $key => $value) { echo $key . "-". $value . "<br>"; } $names=array(); $message="Hello "; $prefix1="Mr."; $prefix2="Mrs."; $names[0]="John"; $names[1]="George"; $names[2]="James"; $names[3]="Anna"; $names[4]="Robert"; $names[5]="John"; $names[6]="James"; $names[7]="George"; $names[8]="Maria"; $names[9]="Peter"; $names[10]="James"; print('<b>Is an array or not</b>'); $n="suba"; print('<br>Check whether the given variable is an array or not -- '.is_array($n)); print('<br>Check whether the given variable is an array or not -- '.is_array($names)); print('<br><b>Find values belong to an array or not ---</b> '); $nam=$names[3]; echo in_array($nam,$names); $assarray2=array("Aarthi"=>21,"Joe"=>15, "Annie"=>18); echo "<br><b> Sorting Associative array</b><br>"; asort($assarray2); foreach($assarray2 as $key => $value)



{ echo $key . "-". $value . "<br>"; } echo "<h3>Print_r method </h3>"; $a = array ('a' => 'apple', 'b' => 'banana', 'c' => array ('x', 'y', 'z')); print_r ($a); $a1=array(0=>"Cat",1=>"Dog",2=>"Horse"); $a2=array(3=>"Horse",2=>"Dog",5=>"Fish",6=>"Cat"); echo"<h3> Array intersect - compare two array key value pair</h3>"; print_r("<br>"); print_r(array_intersect($a1,$a2)); //echo "<br>".array_intersect($a1,$a2); echo"<h3> Array keys - function returns an array containing the keys</h3>"; $a=array("a"=>"Horse","b"=>"Cat","c"=>"Dog"); print_r(array_keys($a)); print_r("<br>"); //echo array_keys($a); print_r(array_keys($a,"Dog")); print_r("<br>"); echo"<h3> Array merge - function merges one ore more arrays into one array</h3>"; print_r(array_merge($a1,$a2)); print ("<h3> Reverse printing</h3>"); $a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse"); print_r(array_reverse($a)); echo"<br>"; foreach($a as $key => $value) { echo $key . "-". $value . "<br>"; } print ("<h3> Shift method</h3>"); echo array_shift($a)."<br>"; print_r ($a); $a1=array(0=>"Dog",1=>"Cat",2=>"Horse"); echo "<br>".array_shift($a1)."<br>"; print_r ($a1); echo "<br>"; print ("<h3> Slice Method</h3>"); $a=array(0=>"Dog",1=>"Cat",2=>"Horse",3=>"Bird"); print_r(array_slice($a,1,2)); echo "<br>"; $a=array("a"=>"Dog","b"=>"Cat","c"=>"Horse","d"=>"Bird"); print_r(array_slice($a,1,2)); print ("<h3> UnShift method</h3>"); echo "<br>"; array_unshift($a,"Horse"); print_r($a); print ("<h3> count method</h3>"); echo "<br>";



$result = count($a); echo $result; ?> Output



File Name: math_function.php <?php echo "<br>Absolute value====".abs(-2.5); echo "<br>Absolute value====".abs(2.5); echo "<br>acos value====".acos(.75); echo "<br>asin value====".asin(1); echo "<br>atan value====".atan(2); echo "<br>cos value====".cos(1); echo "<br>sin value====".sin(1); echo "<br>tan value====".tan(2); echo "<br>ceil value====".ceil(1.75); echo "<br>ceil value====".ceil(1.25);



echo "<br>floor value====".floor(1.75); echo "<br>floor value====".floor(1.25); echo "<br>exp value====".exp(2); echo "<br>log value====".log(2.75); echo "<br>log10 value====".log10(2.75); echo "<br>pi value====".pi(); echo "<br>pow value====".pow(2,3); echo "<br>round value====".round(12.55); echo "<br>sqrt value====".sqrt(81); echo "<br>max value====".max(12,34,23,67,33,56); echo "<br>min value====".min(12,34,23,67,33,56); echo "<br>Random number=====".rand(0,10); echo "<br>Random number=====".rand(); ?> Output



File Name: date time.php <?php echo("<h3>Result with date():</h3><br />"); echo("<br><b>".date("l") . "</b><br />"); echo("<br><b>".date("l dS \of F Y h:i:s A") . "</b><br />"); echo("<br><b>".date("l dS F Y") . "</b><br />"); echo("<h3>Oct 3,1975 was on a ".date("l", mktime(0,0,0,10,3,1975))."</h3><br />"); echo("<h3>Result with gmdate():</h3><br />"); echo("<br><b>".gmdate("l") . "</b><br />"); echo("<br><b>".gmdate("l dS \of F Y h:i:s A") . "</b><br />"); echo("<h3>Oct 3,1975 was on a </h3><b>".gmdate("l", mktime(0,0,0,10,3,1975))."</b><br />"); echo("<br><b>TIME".time() . "</b><br />"); ?> Output



References

• Stephen Wynkoop, Running a perfect website, QUE, 1999

• Chris Bates, Web Programming - Building Intranet applications,

Wiley Publications, 2004

• Deitel, Deitel & Nieto, Internet and World Wide Web - How to

Program, Pearson Education Asia, 2000

• Eric Ladd, Jim O' Donnel, Using HTML 4, XML and Java,

Prentice Hall of India- QUE, 1999

• www.W3Schools.org

http://www.w3schools.org/

IT0322 –Web Systems and Technology LAB - SRM University Systems LAB... · IT0322 –Web...

Documents

Transcript of IT0322 –Web Systems and Technology LAB - SRM University Systems LAB... · IT0322 –Web...