introduction to web programming: documents/webprogramming… · web viewintroduction to web...

Introduction to Web Programming: Design Notes

My CI Group

Holger Findling

Introduction toWeb Programming:

Design Notes

© 2010. My CI Group. All rights reserved.

Table of ContentsChapter 1: Introduction to Web Programming.....................................................1

Internet Standards............................................................................................2Overview............................................................................................................3Web Design Styles.............................................................................................4Web Site Performance.......................................................................................5Site Score..........................................................................................................6

Overall Site Score...........................................................................................6Get In Google..................................................................................................6Link Building..................................................................................................6Meta Tags.......................................................................................................6Social Networking..........................................................................................7Broken Links...................................................................................................7

Site Score Example............................................................................................7Required Software and Tools............................................................................9

Web Server.....................................................................................................9MySQL............................................................................................................9PHP................................................................................................................. 9Web Development Software...........................................................................9

Software Downloads and Installation................................................................9Verification...................................................................................................10

Chapter 2: HTML and XHTML............................................................................11Structure of an HTML document.....................................................................11

Formatted Text.............................................................................................14Acronym, Abbreviation, and Bold Text.........................................................15Headers........................................................................................................16Unordered List.............................................................................................17Ordered List.................................................................................................18Definition List...............................................................................................19Images..........................................................................................................20Document Links............................................................................................22

Exercise 2.1.....................................................................................................23Chapter 3: Cascading Style Sheet......................................................................25

Style Declarations............................................................................................25Style Rules.......................................................................................................26

Comments.....................................................................................................26Styling the body............................................................................................26Class and ID Selectors..................................................................................26

CSS Page Layout.............................................................................................28Positioning.......................................................................................................28

Static Positioning.........................................................................................28Relative Positioning......................................................................................29

Absolute Positioning.....................................................................................29Fixed Positioning..........................................................................................29

Exercise 3.1.....................................................................................................29style.css........................................................................................................29Index.html....................................................................................................31

Exercise 3.2.....................................................................................................33Style.css........................................................................................................34Index.html....................................................................................................37

CSS Validation.................................................................................................39Chapter 4: Web Page Design..............................................................................40

Monitor Sizes and Resolutions........................................................................40Web Site Architecture.....................................................................................40

Define Goals.................................................................................................40Define Audience...........................................................................................40Create and Organize Content.......................................................................40Formulate Visual Presentation Concepts.....................................................40Develop Site Map and Navigation................................................................40Design and Produce Visual Forms................................................................41Designing Layout Grid System.....................................................................41

Composition.....................................................................................................42Chapter 5: Forms................................................................................................44

Forms...........................................................................................................45Fieldset.........................................................................................................45Legend..........................................................................................................45

Exercise 5.1.....................................................................................................46Cascading Style Sheet..................................................................................46XHTML.........................................................................................................48Input Text.....................................................................................................50Password......................................................................................................51Textarea........................................................................................................51

Exercise 5.2.....................................................................................................52Chapter 6: Server Side Programming................................................................55

PHP Basics.......................................................................................................55Scalar and Compound Data Types...............................................................56Comments, Variables, and Operators...........................................................56Strings..........................................................................................................57Predefined Variables....................................................................................58Arrays...........................................................................................................58If statements.................................................................................................60Switch statement..........................................................................................61While Loop....................................................................................................62For Loop.......................................................................................................63

Processing Forms............................................................................................63

Processing Text Input...................................................................................64Processing Control Elements.......................................................................65

PHP Templates and Controllers......................................................................68Chapter 7: MySQL Database..............................................................................70

Database Schema............................................................................................70PHP Functions for Interfacing with MySQL....................................................71Database Connection.......................................................................................71Creating a dynamic pull-down menu...............................................................72Inserting Data into the Database.....................................................................76

Chapter 8: Client Side Programming.................................................................78JavaScript........................................................................................................78JavaScript Basics.............................................................................................78

Variables, Operators, and Comments...........................................................79Arrays...........................................................................................................81If statements.................................................................................................81Switch construct...........................................................................................82While Loop....................................................................................................82For Loop.......................................................................................................82Functions......................................................................................................83

Date/ Time.......................................................................................................83Date and Time Example...............................................................................84

Processing Images...........................................................................................87Dialog Windows...............................................................................................88

Alert Dialog..................................................................................................88Confirm Dialog.............................................................................................89Prompt Dialog...............................................................................................90

Processing Navigation Bar Images..................................................................92Chapter 9: Document Object Model and Dynamic HTML..................................94

Exercise 9.1.....................................................................................................95References..........................................................................................................98Index................................................................................................................... 99

Chapter 1: Introduction to Web Programming

The Internet is a global network that connects IP networks.

The Internet evolved from the ARPANET, a U.S. Department of Defense Advanced Research Projects Agency (DARPA).

ARPANET transitioned to the Internet in the late 1980s as NFSnet, the U.S. National Science Foundation’s network of Universities and supercomputing centers.

The Web consists of the following components:

Clients – Web browsers that enable users to access the Web.

Servers – Running programs that serve information to the Web.

Documents – Web pages, coded in HTML that supply information on the Web.

Protocols – The Hypertext Transfer Protocol (HTTP) that Web clients and servers use to communicate to one another and the TCP/IP (Transmission Control Protocol/ Internet Protocol) on which HTTP depends.

The domain name system (DNS) provides a distributed database service that supports dynamic update and retrieval of information contained in the name space. The Web browsers use DNS to obtain address information for a target host before making contact with the server.

The DNS organizes the Internet name space into a large tree.

Figure #1. Web Organization

Inde

x

7

Internet StandardsWorld Wide Web (WWW) Consortium (W3C) is a non-profit organization responsible for developing open web standards.

The W3C XHTML2 Working Group was chartered in March 2007 until December 2010 to develop techniques using RelaxNG and extending XHTML 2.0.

XHTML 2.0 is a markup language intended for rich, portable web-based applications. It is an XHTML Host Language as defined in Modularization of XHTML. It is made up of a set of XHTML Modules that together describe the elements and attributes of the language, and their content model. While the ancestry of XHTML 2.0 comes from HTML 4, XHTML 1.0, and XHTML 1.1, it is not intended to be 100% backwards compatible with its earlier versions.

There are three types of XHTML documents which are XHTML 1.0 Strict, Transitional, and Framset.

XHTML 1.0 Strict - Use Strict when you want really clean structural mark-up, free of any markup associated with layout. Use this together with W3C's Cascading Style Sheet (CSS) language to get the font, color, and layout effects.

XHTML 1.0 Transitional – Use when writing Web pages for the general public. The idea is to take advantage of XHTML features including style sheets but nonetheless to make small adjustments to markup for the benefit of those viewing pages with older browsers which can't understand style sheets. These include using the body element with bgcolor, text and link attributes.

XHTML 1.0 Frameset - Use when you want to use Frames to partition the browser window into two or more frames.

For detailed description of the markup language see http://www.w3.org/MarkUp/.

Inde

x

8

http://www.w3.org/MarkUp/

OverviewRefer to Figure #1.2 for the following discussion.

The user interacts with the Internet using a web browser and requests a document.

The web browser establishes communication with the appropriate server and requests the document.

The Apache server verifies if the requested document contains a PHP script. If the document contains PHP script, then the PHP interpreter has to create the HTML document before it is returned to the web browser. The document returned to the browser may only contain (X) HTML code.

The PHP server may have to connect to the MySQL server to obtain data from the relational database. The PHP language includes a library with a rich set of built-in database functions. Once the document is constructed the Apache server returns the HTML document to the web browser.

The web browser may execute Java Scripts to animate data or to provide an interactive environment to the user.

Figure #1.2 Overview

Inde

x

9

Web Design Styles

Inde

x

10

Web Site Performance

MonthUnique visitors

Number of visits

Pages HitsBandwidth

(MB)

Jan-10 6 42 204 3397 9.17Feb-10 45 194 1393 6488 117.5Mar-10 71 356 1162 6591 89.59Apr-10 167 492 1317 6695 171.85

May-10 68 408 1686 11509 143.71Jun-10 70 352 1086 8109 100.53Jul-10 128 275 853 6006 121.37

Aug-10 237 372 968 5728 124.66Sep-10 244 367 973 4964 241.68Oct-10 348 517 1575 6167 441.3

Nov-10 299 405 1164 6345 240.41Dec-10 349 533 2345 10781 223.07

Table #1.1 Statistics

Jan-10

Feb-10

Mar-10

Apr-10

May-10

Jun-10Jul-1

0

Aug-10

Sep-10

Oct-10

Nov-10

Dec-10

0

2000

4000

6000

8000

10000

12000

14000

Unique visitorsNumber of visitsPagesHitsBandwidth (MB)

Figure #1.3 Statistics

Inde

x

11

Reported period Month Dec 2010First visit NALast visit 31 Dec 2010 - 11:43

Unique visitors Number of visits Pages Hits BandwidthViewed traffic *

349 533(1.52 visits/visitor)

2347(4.4 Pages/Visit)

10806(20.27 Hits/Visit)

223.37 MB(429.13 KB/Visit)

Not viewed traffic *

1429 2669 136.06 MB

Figure #1.4 Monthly Status

Site Score

Overall Site Score

The overall site score is ranked on a scale of 0 to 100. The ranking determines how well the web pages comply with Google’s guidelines. A higher ranking provides for greater traffic.

1 to 49 Poor50 to 79 Average80 to 90 Good90 to 100 Excellent

Get In GoogleSite pages must be listed with Google to allow the search engine to rank the pages. The greater ranking increases the chance of people finding the web site. Frequent re-submission helps maintain the page rankings.

Link BuildingThe ranking of a Web Site is increased with the number of back-links. There are many opportunities to create back-links; however not all of the back-links will significantly increase traffic and boost search rank. A free text link can be established using Attracta Directory, which lists the Web Site’s business information. After approval by Attracta staff, the web site business listing and description will appear in the Attracta Directory with a link to the website.

Inde

x

12

Meta TagsThe Title and Meta description tags of web pages are displayed in Google's search results. Clear and well-written titles and descriptions that conform to length standards, is an essential part of getting customers to visit your site over your competitors.

Good title tags have between 10 and 69 characters, while good description tags have between 50 and 156 characters.

Social NetworkingUse the power of Social networking to promote your site! Twitter and Facebook are considered top social networking sites.

Broken LinksA broken link is the easiest way to lose visitors. Broken and invalid links reduces the search ranking. Typical error codes are:

403 Forbidden404 Not Found500 Internal Server Error

SEO BadgeAdding the SEO Badge to the Web site provides:

Better navigation for your visitors through a text based site map Google powered site-wide search box Rank building, two-way link between your site and Attracta.com Better listings in search engines that don't support XML Sitemaps Higher Google rank for sites with good navigation

Site Score Example

Inde

x

13

Overall Site Score

Overall Site Score 61

Get In Google 67

Link Building 0

Meta Tags 92

Social Networking 0

Broken Links 100

SEO Badge 100

Top Local

Targeted Traffic

Figure #1.5 Overall Site Score

Symbol Category Score

Get In Google 67

A 35 page XML Sitemap was created and last submitted on: 2010-11-13. Google first crawled site on: 2010-09-06. Sitemap read by search engines 145 times. No pages remain to be added to Sitemap.

Link Building 0

Site listed in the Attracta Customer Directory on Not Yet. Good description text: No. >1 categories listed: No. Logo added: No.

Meta Tags 92

During the last analysis of your site 3 pages had problems. There are a total of 1 title tag problems and 3 meta description problem.

Social Networking 0

Use the power of Social Networking to promote your site!

Twitter linked: No. Facebook linked: No.

Broken Links 100

There were 0 broken links found during the last analysis of your site on 2010-11-13.

SEO Badge 100Badge with HTML site map and Google site-search installed on 2010-12-10 . Badge viewed 51 times. Last viewed on 2010-12-31 .

Figure #1.6 Overall Site Score Analysis

Inde

x

14

Inde

x

15

Required Software and Tools

Web ServerA Web Server provides user requested documents to a web browser, such as Internet Explorer or Firefox. Typical web server software used today is Apache and Internet Information Services (IIS).

MySQL MySQL is a relational database management system (RDBMS).

PHPPHP is a server-side scripting language that provides an interface to the MySQL server.

Web Development SoftwareThere are many web development software tools available, including Apple iWeb, Adobe Dreamweaver CS5, Adobe Fireworks CS4, Microsoft Front Page, and MS Visual Web Developer.Of course it is not necessary to use any of these tools; a simple text editor is all that is required to develop html, PHP and Java scripts.

Software Downloads and InstallationThe following tools are required for the Web Programming course.

Microsoft Visual Web Developer 2010 Express Edition for Windows 7 Microsoft Visual Web Developer 2008 Express Edition for Windows XP Apache 2.2 or newer version PHP/5.3.2 or newer version MySQL Workbench 5.2 OSS or newer version

Visit http://www.microsoft.com/express/Web/ and download the MS Visual Web Developer software. Visit http://www.wampserver.com/en/download.php and download the WampServer, which includes:

Apache 2.2 PHP 5.3.3 MySQL 5.5 PhpMyadmin

Inde

x

16

http://www.wampserver.com/en/download.php

http://www.microsoft.com/express/Web/

VerificationDisplay the hidden icons on the taskbar and select “Running all Apache services” by right clicking on the icon. Select Open Apache Monitor.When the Apache Monitor window is open verify that “Apache/2.2.14 (Win32) PHP/5.3.2” is displayed at the bottom of the window. This message implies that the Apache Server and PHP are running.

Inde

x

17

Chapter 2: HTML and XHTML

Structure of an HTML documentThe HTML document is comprised of 3 components

1. HTML Version information2. Header Section3. Body

Note: We will ignore the preferred length of title and description in the following examples.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Web Site 1</title> <meta name="description" content="Example of a simple Web Page." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head>

<body>  <div> <br/> <p> Welcome. </p> <br/> <p> This is my first Web Site. </p> </div></body></html>

Inde

x

18

Comments are implemented between the tags 

div <div> … </div>

The division block denotes a generic division within a document. The element is used to add a customizable block to the document. Using <div> provides important structure to the webpage.

p<p> … </p>

Denotes a paragraph. It is typically nested inside a division.

h1, h2, h3, h4, h5, h6<h1> … </h1>

There are 6 different size headers available. A header should not be nested inside a paragraph tag <p>.

br</br>

Insert a line break into the document. It should not be nested inside a paragraph tag <p>.

strong<strong> … </strong>

The text will be displayed in bold font. Designers should use <strong> instead of <b> since web audio readers interpret the tag <strong> by speaking the text a little louder.

b<b> … </b>

The encapsulated text is displayed in bold type fond. It is not supported by html 5.0

Inde

x

19

abbr<abbr> … </abbr>

Denotes abbreviation.

acronym<acronym> … </acronym>

Denotes an acronym.

Inde

x

20

Formatted Text


<body>  <div> <h4> Robert Frost: The Man and His Work - 1923 </h4> <p> "My definition of poetry (<em><small> if I were forced to give one </small></em>) would be this: words that become deeds." </p>

<p> "All <em><strong> poetry </strong></em> is a reproduction of the tones of actual speech." </p> </div></body></html>

Output:

Robert Frost: The Man and His Work - 1923

"My definition of poetry ( if I were forced to give one ) would be this: words that become deeds."

"All poetry is a reproduction of the tones of actual In

dex

21

Acronym, Abbreviation, and Bold Text


<body>  <div> <br/> <p> Welcome. </p> <br/> <p> How to create an acronym. The acronym for World Wide Web is: <acronym title="World Wide Web">WWW</acronym>. </p> <p> How to abbreviate text. World Wide Web is abbreviated: <abbr title="World Wide Web">WWW</abbr>. </p> <p> It is possible to display bold type text. <strong> "World Wide Web"</strong>. </p> <p> We can nest elements. World Wide Web is abbreviated: <abbr title="World Wide Web"><b>WWW</b></abbr>. </p> </div></body></html>

Output:

Welcome.

How to create an acronym. The acronym for World Wide Web is: WWW. How to abbreviate text. World Wide Web is abbreviated: WWW.

Inde

x

22

It is possible to display bold type text. "World Wide Web". We can nest elements. World Wide Web is abbreviated: WWW.

Headers


<body>  <div> <p> <br/> Welcome. </p> <p> The following example displays different size headers. <br /> <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6> </p> </div></body></html>

Output:

Welcome. The following example displays different size headers.

Header 1

Header 2Header 3

Inde

x

23

Header 4

Header 5

Header 6

Inde

x

24

Unordered List

<ul> <li> … </li> <li> … </li></ul>


<body>  <div> <p> <h3>Introduction to Web Programming</h3>

<h4>References</h4> <ul> <li>An Introduction to Web Design + Programming</li> <li>Web Design in a Nut Shell</li> <li>Building your own Web Site the Right Way using HTML & CSS</li> <li>Fancy Form Design</li> </ul> </p> </div></body></html>

Output:

Introduction to Web Programming

References

An Introduction to Web Design + Programming Web Design in a Nut Shell Building your own Web Site the Right Way using HTML & CSS Fancy Form Design

Inde

x

25

Inde

x

26

Ordered List

<ol> <li> … </li> <li> … </li></ol>


<body>  <div> <p> <h3>Introduction to Web Programming</h3>

<h4>References</h4> <ol> <li>An Introduction to Web Design + Programming</li> <li>Web Design in a Nut Shell</li> <li>Building your own Web Site the Right Way using HTML & CSS</li> <li>Fancy Form Design</li> </ol> </p> </div></body></html>

Output:

Introduction to Web Programming

References

1. An Introduction to Web Design + Programming2. Web Design in a Nut Shell3. Building your own Web Site the Right Way using HTML & CSS In

dex

27

4. Fancy Form Design

Definition List

dl<dl> … </dl>Defines a definition list, which includes terms <dt> and definitions <dd>


<body>  <div> <dl> <dt><strong>An Introduction to Web Design + Programming</strong></dt> <dd>A textbook for web programming ... </dd> <dt><strong>Web Design in a Nut Shell</strong></dt> <dd>A reference book for web design ... </dd> </dl> </div></body></html>

Output:

An Introduction to Web Design + ProgrammingA textbook for web programming ...

Web Design in a Nut ShellA reference book for web design ...

Inde

x

28

Images


<body>  <div> <h4> Welcome to Riverside </h4> <br /> <p> <img src = "Images/Riverside.JPG" alt = "Riverside" /> </p> </div></body></html>

Output:

Welcome to Riverside

Inde

x

29

<body>  <div style = "width: 550px"> <h4> Welcome to Riverside </h4> <p> <img src = "Images/Riverside.JPG" alt = "Riverside" width="330" height="220" style="float: left; margin-right: 1em; margin-bottom: 8px; margin-top: 8px"/> <br /><br /><br /><br /><br /><br /><br /> The river moves lazily towards Riverport. As the evening sets in people settle outside to observe life on the river. </p> </div></body></html>

Output:

Inde

x

30

Document Links


<body> <div> <h4> Recommended Book List</h4> <ul> <li> <a href="Documents/Book1.pdf" type="pdf"> Book 1 (pdf)</a> </li> <li> <a href="Documents/Book2.pdf" type="pdf"> Book 2 (pdf)</a> </li> </ul> </div></body></html>

Inde

x

31

Output:

Recommended Book List

Book 1 (pdf) Book 2 (pdf)

Exercise 2.1

Design a simple Web Site which is comprised of three web pages. Navigation between the individual pages should be established using an unordered list.

Page #1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Exercise 2.1</title> <meta name="description" content="Design a Web Site that is comprised of three web pages. Provide for navigation between any page." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head>

<body style="width:500px"> <div> <br /> <h2> Exercise 2.1</h2> </div> <div> <h4> Site Navigation</h4> <ul>

Inde

x

32

http://localhost/WebS1/Documents/Book2.pdf

http://localhost/WebS1/Documents/Book1.pdf

<li> <a href="page2.html"> Page 2 </a> </li> <li> <a href="page3.html"> Page 3 </a> </li> </ul> </div></body></html>

Page #2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Exercise 2.1</title> <meta name="description" content="Design a Web Site that is comprised of three web pages. Provide for navigation between any page." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head>

<body style="width:500px"> <div> <br /> <h2> Page 2</h2> </div> <div> <h4> Site Navigation</h4> <ul> <li> <a href="index.html"> Home </a> </li> <li> <a href="page3.html"> Page 3 </a> </li> </ul> </div></body></html>

Page #3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Exercise 2.1</title>

Inde

x

33

Chapter 3: Cascading Style SheetA Web page has two important aspects: document structure and presentation style. The cascading style sheet (CSS) is a language that specifies the presentation style. It contains one or more style rules which are applied to the html code.

CSS is the recommended language by W3C and supported by most major browsers. CSS replaced the former architectural style of Web design; tables should not be used to create the structural layout of a web page.

The cascading style sheet is a text file and uses the .css suffix. Reference to a style sheet must be provided in the header section of the html code.

<head> <title>Style Sheets</title> <meta name="description" content="Example of a simple Web Page using a style sheet." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

Style Declarations

Style sheets are comprised of rules which describe how a page element should be displayed. The XHTML markup forms the structural layer upon which the presentation layer is applied.

Style sheets may not include any html code. A clear division is enforced between the XHTML markup and the cascading style sheets.

The structure of a style rule is comprised of a selector, declarations, properties and associated values.

Selector { Declaration: value ; Property : Value }

Inde

x

35

Style Rules

Comments

Comments are incorporated using the /* comments */ convention.

Styling the body

The body of the document can be styled and should define the overall presentation of the page. The physical size and positioning information is can also be provided to the web browser.

In this example body is also referred to the selector and properties of the selector are declared inside the { }. The property font-family has three fonts assigned, Georgia, Verdana, followed by all sans-serif. The web browser will try and apply the first value, and if it is not available apply the second value; and so on. If none of the specified fonts are available the web browser will use its default font.

body { font-family: Georgia, Verdana, sans-serif; background-color: #aaccaa; position: absolute; width: 1000px; left: 50%; margin-left: -500px;}

Class and ID Selectors

The web developer can define Class and ID selectors. These types of selectors are independent of document elements.

As an example the <div> tag is styled using the class .style11. .style11 is a user defined class which defines the size of a region and declares the background color.

<div class="style11">...

</div>

Inde

x

36

.style11 { position: absolute; top: 0px; padding-top: 5px; width: 780px; height: 120px; background-color:#10aa10;}

Elements of a class can be further styled using the dot (.) operator.For example the first letter in a paragraph can be altered to make it more aesthetically visible by setting the font-size to 200%. The web browser interprets the rule and increases the size of the first letter to double the size of the other characters.

p.drop:first-letter { font-size: 200%; font-weight: bold; float: left; margin-right: 3px; margin-bottom: -6px; }

:first-letter is called a pseudo-element. A pseudo class works as if a class was applied to a group of elements. It allows the developer to define an action, such as rollover.

In the example below the font for a link and its desired behavior is defined for mouse-over.Care must be taking to maintain the order of the individual pseudo-classes. a { font-weight: normal; }a:link { color: black; }a:visited { color: black; text-decoration: none;}a:hover { color: white; background-color: #000000;

Inde

x

37

text-decoration: none;}a:active { color: white; background-color: #7070aa;}

Inde

x

38

CSS Page Layout

Before detailing a web page an overall physical layout of the web page is required.Consider the following layout of a 1000 x 630 pixel large web page.

The page is padded on the top of the screen with 5 pixels to provide for a small buffer space. The page is divided into 3 horizontal sections, where the center is the largest component. The top section is reserved for a title section and perhaps a logo.The center section is further divided into three sections, which can be used for a menu, content section, and maybe an advertisement section on the far right. The bottom section can be used for displaying credentials.

Figure 3.1

PositioningThere are four types of positioning.

Static Relative Absolute Fixed Inherited

Inde

x

39

Static PositioningThis is the normal positioning scheme in which element boxes are rendered in order as they appear in the document flow.

Relative PositioningRelative positioning moves the element box, but its original space in the document flow is preserved.

Absolute PositioningAbsolutely positioned objects are completely removed from the document flow and are positioned relative to their containing block. Because they are removed from the document flow, they no longer influence the layout of surrounding elements, and the space they once occupied is closed up. Absolutely positioned elements always take on block behaviors.

Fixed PositioningFixed poisoning is like absolute positioning, but instead of a containing element, it is positioned relative to the viewport.

Exercise 3.1Implement the physical layout defined in Figure 1.

The overall style of the body should be defined first in the style sheet, and then is followed by the physical page layout. This can be accomplished by using Selectors.

style.css

body { font-family: Georgia, Verdana, Sans-Serif; background-color: #aaccaa; position: absolute; width: 1000px; left: 50%; margin-left: -500px;}

Defining the top row:

Inde

x

40

.style11 { position: absolute; top: 0px; padding-top: 5px; width: 780px; height: 120px; background-color:#10aa10;}

.style12 { position: absolute; top: 0px; padding-top: 5px; left: 780px; width: 220px; height: 120px; background-color:#10bb10;}

Defining the center section:

.style21 { position:absolute; top: 125px; width: 170px; height: 480px; background-color:#107710;}

.style22 { position: absolute; top: 125px; left: 170px; width: 610px; height: 480px; background-color:#108810;}

.style23 { position: absolute; top: 125px; left: 780px; width: 220px; height: 480px; background-color:#109910;}

Defining the bottom section:

.style31 { position: absolute; top: 605px; In

dex

41

width: 1000px; height: 25px; background-color:#106610;}

Defining the header styles:

h4 { text-align: left; padding-left: 20px; font-family: Georgia; font-size: 12px; }


Defining text styles:.text31 { text-align: center; padding-left: 20px; font-family: Georgia; font-size: 10px; }

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml> <head> <title>Style Sheets</title> <meta name="description" content="Example of a simple Web Page using a style sheet." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<body> Inde

x

42

<div class="style11"> <h4> Row 1 Column 1</h4> </div>  <div class="style12"> <h4> Row 1 Column 2</h4> </div>

 <div class="style21"> <h4> Row 2 Column 1</h4> </div>

 <div class="style22"> <h4> Row 2 Column 2</h4> </div>

 <div class="style23"> <h4> Row 2 Column 3</h4> </div>  <div class="style31"> <p class="text31"> Row 3 Column 1</p> </div></body></html>

Inde

x

43

Exercise 3.2Design a Webpage that has a title, navigation bar and a vertically divided content area. The styling of the page shall be defined using a cascading style sheet.

The physical layout of the web page is shown below.The top of the page is padded by 5 pixels and each content area is padded left and right by 20 pixels.

The navigation bar area is displayed horizontally and its size is 1000 x 45 pixels. In

dex

44

Physical Layout

Inde

x

45

Style.css

/* Body */body { font-family: Georgia, Verdana, Arial, Sans-Serif; background-color: #404040; position: absolute; width: 1000px; left: 50%; margin-left: -500px;}

/* Top Row */.style11 { position: absolute; top: 0px; padding-top: 5px; width: 780px; height: 85px; background-color: #606090;}

.style12 { position: absolute; top: 0px; padding-top: 5px; left: 780px; width: 220px; height: 85px; background: #606090 url(Images/logo.jpg) no-repeat top;}

/* Menu Section */div.navigationStyle { position:absolute; top: 90px; width: 1000px; height: 45px; background-color:#7070aa;}

div.navigationStyle > span.self { font-weight: bold; color: #000000; padding: 3px;}

a { font-weight: normal; }a:link { color: black; }a:visited { color: black; text-decoration: none;

Inde

x

46

}a:hover { color: white; background-color: #000000; text-decoration: none;}a:active { color: white; background-color: #7070aa;}

/* Middle section */.style31 { position:absolute; top: 135px; width: 460px; height: 550px; background-color: #bbbbbb; padding-left: 20px; padding-right: 20px;}.style31 img { border: 7px solid #606090;}

.style32 { position: absolute; top: 135px; left: 500px; width: 460px; height: 550px; background-color: #bbbbbb; padding-left: 20px; padding-right: 20px; }.style32 img { border: 7px solid #606090;}

/* Title */.title { text-align: center; padding-left: 20px; font-family: Georgia; font-size: 24px; font-weight: bold;}

p { text-align: left; padding-left: 5px; font-family: Georgia; font-size: 12px; }

Inde

x

47




li { text-align: left; padding-left: 10px; padding-top: 5px; font-family: Tahoma; font-size: 13px; }

div{SCROLLBAR-ARROW-COLOR:#716142;SCROLLBAR-FACE-COLOR:#FCF8F0;SCROLLBAR-TRACK-COLOR:#FCF8F0;SCROLLBAR-HIGHLIGHT-COLOR:#716142;SCROLLBAR-SHADOW-COLOR:#716142;SCROLLBAR-3DLIGHT-COLOR:#FCF8F0;SCROLLBAR-DARKSHADOW-COLOR:#FCF8F0;}

div.g{SCROLLBAR-ARROW-COLOR:#6B593B;SCROLLBAR-FACE-COLOR:#E3DACB;SCROLLBAR-TRACK-COLOR:#E3DACB;SCROLLBAR-HIGHLIGHT-COLOR:#6B593B;SCROLLBAR-SHADOW-COLOR:#6B593B;SCROLLBAR-3DLIGHT-COLOR:#E3DACB;SCROLLBAR-DARKSHADOW-COLOR:#E3DACB;}

Inde

x

48

Index.html


<html xmlns="http://www.w3.org/1999/xhtml> <head> <title>Exercise 3.2</title> <meta name="description" content="Example of a simple Web Page using a style sheet." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<body>  <div class="style11"> <p class="title"> Welcome to my Website </p> </div>  <div class="style12" > </div>

 <div class="navigationStyle"> <br /> <span class="self">Navigation</span>| <a href="index.html" > Home</a>| <a href="page2.html" > Page 2</a>| <a href="aboutUS.html" > About US</a>| </div>

 <div class="style31"> <br /> <h3> Riverside </h3> <p class="drop" > Paragraphs can be styled such that the first letter has a drop cap effect. The first letter is bold and 200 percent the size of all other letters. </p>

<p class="drop"> The river moves lazily towards Riverport. The old styled building and waterwheel offers a warm welcome to travelers on the river. <img src = "Images/Riverside.JPG" alt = "Riverside" width="330" height="220" style="float: left; margin-right: 1em;

Inde

x

49

margin-bottom: 8px; margin-top: 8px"/> As the evening sets in people settle outside to observe life on the river. From the distance one could hear a horse and carriage approaching without hurry steadily moving. </p> </div>

<div class="style32"> <br /> <h3> My Journey </h3> <p class="drop" > This paragraph is styled such that the first letter has a drop cap effect. The first letter is bold and is 200 percent the size of all other letters. </p>

<p> <img src = "Images/Carriage.JPG" alt = "Carriage" width="220" height="330" style="float: left; margin-right: 1em; margin-bottom: 8px; margin-top: 8px"/> </p> <p class="drop" > Inventing a new job is better than finding a new job. </p> </div> </body></html>

Inde

x

50

Inde

x

51

CSS Validation

XHTML and CSS validation verifies your implementation for errors and compliance with W3C standards. Many validation services are available on the Internet and the service is provided free by W3C. Most Web developing tools also have such capability built-in.

For XHTML and CSS validation visit the W3C sites.

http://validator.w3.org/http://jigsaw.w3.org/css-validator/

Inde

x

52

Chapter 4: Web Page Design

Monitor Sizes and Resolutions

Web Site Architecture

Define Goals

What is the mission or purpose of the organization?What are the short term and long term goals of the web site?Who are the intended audiences?Does the site provide a well-defined service or sell a specific product?

Define Audience

Who are the intended users?How will users interact with the web site?Who is the competition?

Create and Organize Content

Which pages are static and which pages are dynamic?What will be the function of the pages?What transactions will the user perform?Should copyright notices or privacy statements be displayed?Are logon pages required?

Formulate Visual Presentation Concepts

Define the concept.Draw or sketch the pages.Capture to phrases to the pages.

Develop Site Map and Navigation

Create a page hierarchy.Determine the links between the pages.

Inde

x

53

Create cross-links between pages.Ensure every page can be reached, no dead ends.For large web sites create a top navigation schema and include it on every page.Determine section titles and use the title as a link.

Design and Produce Visual Forms

The visual form defines how the web site looks. It refers to the visual layout, graphics, colors, charts and images.

Designing Layout Grid System

Create an organizational framework. The framework establishes the divisions and groupings of the page.

Inde

x

54

Composition

Composition is the selection and arrangement of subjects within the viewing area of a web page. When placing an object in the center of the screen it projects a static appearance and becomes uninteresting. Static appearances are not ideal for advertising a product or services. An easy way to improve a composition is to use the rule of thirds.

Figure 4.1 shows an image of size 4000 x 3000. It is divided by two vertical and two horizontal lines such that the image is divided into thirds. Placing the object of interest at one of the line intersections generates a dynamic visual interest. The intersecting points are ideal spots to position point of interest.

Aligning point of interests along any of the lines also improves a composition. Consider placing the horizontal menu bar at the top horizontal line.

Figure 4.1 The Rule of Thirds

The Golden Rule is an alternative method used to create an interesting composition, see Figure 4.2. The main point of interest of your web page should reside at either intersection of the three lines. Avoid placing the main point of interest at the center of he screen.

Inde

x

55

Figure 4.2 The Golden Mean

Inde

x

56

Chapter 5: Forms

Forms provide the mechanism for users to interact with a web site. In most cases Forms are used to collect information which is stored in the site database. Shopping carts are a typical example.

No data is processed by Forms; instead information is send to the server where the data is processed by a scripting language, such as PHP.

Elements available when designing forms include:

formThe body that establishes the form

fieldsetGrouping of elements, controls, and labels

legendThe caption assigned to the fieldset

inputCreates a variety of controls:

o Single-line text entry o Password entryo Hidden controlso Checkboxeso Radio Buttonso Submit Buttono Reset Buttono File uploado Custom buttons, including images

labelInformation attached to an input

textareaMultiline text area

buttonGeneric input button

selectMultiple choice menu or list

option

Inde

x

57

an option within a select control

Forms

The form element is used to designate an area within a division section as a form.The form can contain any web content, text, images, tables, etc.Its main function is to be a container for control elements and data collection.

<form action=”index.php” method=”get”> …</form>

<form action=”/bin/myScript.javascript” method=”get”> …</form>

The action defines either the page or a script that processes the data.The method defines the mechanism to transmit the data to the server. The choices are get and post.

The get mechanism is used for short messages and small forms, and the post mechanism should be used for large messages and large forms. Post provides for better site security; however it does not encrypt messages.

Fieldset

Fieldset provides for grouping controls and text areas. It must be used within a form tag and can be nested. A physical layout and organization of data should be designed first before implementing forms and Fieldset.

Legend

Legends are optional and can be used with Fieldset. Considerations should be given when using legends to ensure that screen readers for the hearing impaired do not repeat the legends in an awkward redundant way. A screen reader reads the legend, label, and field as a tuple.

<legend> Personal Information </legend>

Inde

x

58

Exercise 5.1Exercise 5.1 creates a web page layout using a form and two fieldset. Each fieldset includes a legend.

Cascading Style Sheet

/* Body */body { font-family: Georgia, Verdana, Arial, Sans-Serif; background-color: #202020; position: absolute; width: 1000px; left: 50%; margin-left: -500px;}

/* Title Section */.titleSection { position: absolute; top: 0px; padding-top: 5px; width: 780px; height: 85px; background-color: #606090;}.title { text-align: center; padding-left: 20px; font-family: Georgia; font-size: 24px; font-weight: bold;}

/* Logo Section */.logoSection { position: absolute; top: 0px; padding-top: 5px; left: 780px; width: 220px; height: 85px; background: #606090 url(Images/logo.jpg) no-repeat top;}

/* Menu Section */div.navigationSection { position:absolute; top: 90px; width: 1000px; height: 45px; background-color:#7070aa;}

Inde

x

59

div.navigationStyle > span.self { font-weight: bold;}

/* Content Section */.contentSection { position:absolute; top: 135px; width: 960px; height: 550px; background-color: #404040; padding-left: 20px; padding-right: 20px;}

form { width: 680px; height : 255px; background-color:#707070; }

/* Personal Information */fieldset.piStyle { position:absolute; top:60px; left:25px; width: 300px; height: 220px; border-style:inset; float: left; }

/* Contact Information */fieldset.ciStyle { position:absolute; top:60px; left:360px; width: 300px; height: 220px; border-style:inset;}

legend { font-family: Georgia; font-size: 14px; }

p { text-align: left; padding-left: 5px; font-family: Georgia; font-size: 12px; }

Inde

x

60

/* Mouse Behavior */a { font-weight: normal; }a:link { color: black; }a:visited { color: black; text-decoration: none;}a:hover { color: white; background-color: #000000; text-decoration: none;}a:active { color: white; background-color: #7070aa;}

XHTML


<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercise 3.1</title> <meta name="description" content="Example of a Web Page using a form." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<body>  <div class="titleSection"> <p class="title"> Welcome to my Website </p> </div>  <div class="logoSection" >

Inde

x

61

</div>

 <div class="navigationSection"> <br /> &nbsp &nbsp <span class="self"><strong> Navigation</strong></span>: | <a href="index.html" > Home</a>| <a href="aboutUS.html" > About US</a>| </div>

 <div class="contentSection"> <br /><br /><br /> <form method="get" action="index.html"> <fieldset class="piStyle"> <legend> Personal Information </legend> </fieldset> <fieldset class="ciStyle"> <legend> Contact Information </legend> </fieldset> </form> </div> </body></html>

Figure 5.1 Forms with nested fieldset Inde

x

62

Input Text

<form method="get" action="index.html"> <fieldset class="piStyle"> <legend> Personal Information </legend> <p><label for="FirstName"> First Name: </label> <input type="text" name="FirstName" size="20" maxlength="50" value="Enter ... " /> </p> <p><label for="LastName"> Last Name: </label> <input type="text" name="LastName" size="20" maxlength="50" value="Enter ... " /> </p> </fieldset> <fieldset class="ciStyle"> <legend> Contact Information </legend> <p><label for="EmailAddress"> Email Address: </label> <input type="text" name="EmailAddress:" size="20" maxlength="50" value=" " /> </p> </fieldset>

<br/> <input type="submit" value="Submit" style="position:absolute; float:left; top:270px; "/>

<input type="reset" value="Reset" style="position:absolute; left:90px; top:270px; "/> </form>

Inde

x

63

Figure 5.2 Text Fields

Password

<p><label for="Password"> Password ..... </label> <input type="password" name="Password" size="20" maxlength="50" value="" /> </p>

Textarea

<p><label for="Comments"> Comments: </label> <br /> <textarea rows="7" cols="30" id="desc">Please enter your comments here. </textarea> </p>

Inde

x

64

Figure 5.3 Text Area

Exercise 5.2Exercise 5.2 uses the same Cascading Style Sheet as Exercise 5.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercise 5.2</title> <meta name="description" content="Example of a simple Web Page using a style sheet." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<body>  <div class="titleSection"> <p class="title"> Welcome to Web Programming </p> </div> In

dex

65

<div class="logoSection" > </div>

 <div class="navigationSection"> <br /> <span> Navigation</span>: | <a href="index.html" > Home</a>| <a href="aboutUS.html" > About US</a>| </div>

 <div class="contentSection"> <br/> <br/> <br/>

<form method="get" action="index.html"> <fieldset class="piStyle"> <legend> Student </legend> <p><label for="FirstName"> First Name .. </label> <input type="text" name="FirstName" size="20" maxlength="50" value="" /> </p> <p><label for="LastName"> Last Name ... </label> <input type="text" name="LastName" size="20" maxlength="50" value="" /> </p><br/>

<p><select id="statename" name="statename" size="1"> <option value="MC"> Main Campus </option> <option value="MGC"> Melborne Graduate Center </option> <option value="OGC"> Orlando Graduate Center </option> <option value="KGC"> Cape Kennedy Graduate Center </option> </select></p> </fieldset> <fieldset class="ciStyle"> <legend> MS Program </legend> <p> <input id="Radio1" type="radio" name="MS" checked="checked"/> <label for="Radio1"> CS </label> <input id="Radio2" type="radio" name="MS" /> <label for="Radio2"> CIS </label> <input id="Radio3" type="radio" name="MS" /> <label for="Radio3"> CSE </label> </p><br/> <p><strong>Courses</strong></p> <p> <input id="Checkbox1" type="checkbox" name="Courses" /> <label for ="Checkbox1"> Analysis of Algorithms </label><br /> <input id="Checkbox2" type="checkbox" name="Courses" /> <label for ="Checkbox2"> Web Programming </label><br /> <input id="Checkbox3" type="checkbox" name="Courses" /> <label for ="Checkbox3"> Compiler Theory and Design </label><br /> <input id="Checkbox4" type="checkbox" name="Courses" /> In

dex

66

<label for ="Checkbox4"> CapStone Project </label> </p> </fieldset>

<br/> <input type="submit" value="Submit" style="position:absolute; float:left; top:270px; "/>

<input type="reset" value="Reset" style="position:absolute; left:90px; top:270px; "/> </form> </div> </body></html>

Figure 5.4 Control Elements In

dex

67

Chapter 6: Server Side Programming

The Personal Home Page (PHP) is a general-purpose scripting language originally created by Rasmus Lerdorf in 1995. The scripting language since has been renamed to PHP: Hypertext Preprocessor. PHP was designed for Web development to produce dynamic Web pages. The code is executed on the server side, producing HTML code which is then downloaded to the client side.

Server side scripting languages include

PHP Java Script Perl ASP

PHP BasicsPHP code can be placed directly in line with HTML code. The PHP code must be converted to HTML code by the server prior to sending the page to the web browser. PHP code is placed between the tags <?php statements; ?>.

<body> <div> <p> This is HTML code </p> <?php echo “This is PHP code”; ?> </div></body>

Typically PHP statements are terminated by a semicolon. In the code snippet above the echo command is used to display information on the page. When using the echo command a new line can be started using \n directive. The directive is equivalent to using the tag <br/> in HTML.

The echo command can also be used to insert HTML tags. This is a powerful feature since it provides for a mechanism to include HTML code directly in a PHP file.

<?php echo “<div> \n”; echo “ <p> \n”; echo “ My Text \n”; echo “ </p> \n”; echo “ </div> \n”;

Inde

x

68

?>

Scalar and Compound Data Types

PHP uses four scalar data types:

Boolean:

TRUE = 1, FALSE = 0

Integer:

32 it signed number

Float:

up to 14 digit precision

String

PHP uses two compound types:

Array:

Map of data

Object:

Instance of a class

Comments, Variables, and Operators

A comment in PHP is implemented using

// Comment line

/* Multiple comment lines */

A variable is defined using $ symbol.In the example below, $x, $y and $sum are user defined variables. Their data types are not pre-declared. In

dex

69

$x = 4;$y = 10;$sum = $x + $y;

In PHP there is no division operator for integer numbers. Instead the integer numbers are automatically converted to type float. In the example below the variable $sum would be of type float and assigned the value 0.5.

$x = 1;$y = 2;$sum = $x / $y;

It is possible to type cast a variable. $sum becomes an integer type and the assigned value is 0. PHP rounds all floats down to type integer.

$x = 1;$y = 2;$sum = (int) ($x / $y);

To properly round a floating point value use the function round (). In this example $sum is assigned the value 1.

$x = 1;$y = 2;$sum = round ($x / $y);

Strings

A string can be created using single or double quotes. The differences between single quotes and double quotes are that single quotes do not provide for escape characters, such as \n or \t. Double quoted strings allow for escape characters and nested strings.

$buf = ‘Hello World’;$buffer = “The typical introduction of a PHP program $buf \n”;

Numbers stored in a string can be assigned to variables and the conversion is automatic. However, properly storing a number to a string requires using the function strval ().

$value = 10;$buffer = strval ($value);$number = (int) buffer;

Inde

x

70

The string content can be assigned to other strings, and strings can also be concatenated.The . operator is used to concatenate two strings. The example below results in Agent Smith.

$title = “Agent”;$Name = “Smith”;$buffer = $title . “ “ . $Name; The content of a string can be reversed using the function strrev (). In the example below, $buf contains the string Agent John Smith. $buffer contains the string htimS nhoJ tnegA.

$Title = “Agent”;$FirstName = “John”;$LastName = “Smith”;

$buf = $Title . “ “ . $Firstame . “ “ . $LastName;$buffer = strrev($buf);

The content of a string can be changed to either upper or lower case letters by using functions strtolower () strtoupper ().

$buf = “HTML tags require lower case letters”;$buffer = strtoupper ($buf);

The $buffer contains the string HTML TAGS REQUIRE LOWER CASE LETTERS.

$buffer = strtolowerr ($buf);

The $buffer contains the string html tags require lower case letters.

Predefined Variables

Predefined variables use the prefix $_ and are global variables that can be used anywhere in a PHP script. Examples of predefined variables of type Array are

$_GET$_POST$_SERVER$_FILES

Inde

x

71

$_ENV$_COOKIE

These predefined variables are further discussed in the section Processing Forms.

Arrays

A simple array of integers is created using the statement

$fibNumbers = array(1, 1, 2, 3, 5, 8, 13, 21);

Observe the array is an object and the brackets ( ) are used in the creation of the array instead of []. The array elements are accessed using an array index. Like most programming languages the index count starts with index 0 instead of 1. In the example below, $value is assigned the number 5.

$value = $fibNumbers[4];

The smallest and largest value can be found in an array using functions min() and max(), respectively.

$minNum = min($fibNumbers);$maxNum = max($fibNumbers );

An array can be sorted in ascending and descending order using functions assort () and arsort (), respectively.

asort ($fibNumbers);arsort($fibNumbers);

An array can also be used as a map. In the example below, the array is comprised of three elements, $FirstName, $Lastname, and $Title. This allows each element to be accessed by its name instead of an index. Notice the assignment operator => is used.

$student = array(“FirstName” => “John”, “LastName” => “Smith”, “Title” => “Agent”);$buffer = $student[Title] . “ “ . $student[‘FirstName’] . “ “ . $student[‘LastName’].

The output produces Agent John Smith.

Inde

x

72

In a previous example we used the function strrev () to reverse the content of a string. It is also possible to reverse the order of the words in a string with the help of using an array. The function explode () extracts the words separated by a space ‘ ‘ and copies them into the array $WordArray. Function array_reverse() reverses the array content. The array content can be captured back to a string by calling function implode ().

$buf = “Agent John Smith”;$WordArray = explode (‘ ‘, $buf);$ WordArray = array_reverse($WordArray);$buffer = implode (‘ ‘, $WordArray);

The content of $buffer is Smith John Agent.

The code snippet above can be simplified as shown below; however, we do not recommend this practice since troubleshooting PHP code is very difficult. One loses all visibility when imbedding function calls as a parameter to a function call.

$buf = “Agent John Smith”;$buffer = implode (‘ ‘, array_reverse (explode (‘ ‘, $buf));

If statements

The conditional if statement has the same construct as the C++, C#, or Java programming languages.

if (condition) { statement;}elseif (condition) { statement;} else { statement;}

Example:$buffer = strval (5);$x = $buffer;

Inde

x

73

if ($x >= 0) { print (“$x is a positive number);}

Example:$buffer = strval (5);$x = $buffer;if ($x >= 0) { print (“$x is a positive number);}else { print (“$x is a negative number);}

Example:$buffer = strval (5);$x = $buffer;if ($x >= 0) { print (“The absolute value is $x);}elseif ($x < 0) { $x = $x * -1; print (“The absolute value is $x);} else { print (“$x is not a number);}

Switch statement

The switch statement is an alternative to the if, if-else conditional statement. Computer hardware is designed to favor the switch statement and typically is more efficient in performance. The individual case statements must include the break statement; otherwise the case statements are executed in order until a break is encountered. The default case is optional, but it is good coding practice to include the default case with a comment stating that it is intentionally left blank.

switch ($choice) {case 1: statement; statement; break; In

dex

74

case 2: statement; statement; break;default: statement; break;}

Inde

x

75

While Loop

The while statement allows PHP to execute a set of statements repeatedly. The syntax requires an expression, when evaluated true, enables the loop to be executed.

while (expression) { statement;}

An alternative construct for the while loop is shown below.

while (condition): statement; statement;endwhile

The combination of a while loop and a switch statement provides for the implementation of a deterministic finite automata (DFA), also known as a state machine.

Example: Implementation of a state machine The state machine increments $num from 0 to 10, and then decrements $num back to 0. Once $num is equal zero $state is set to zero and the while loop exits.

$num = 0;$state = 1;while ($state > 0) {

switch ($state) {case 1:

$num = $num + 1; if ($num > 9) {

$state = 2;}

break;case 2:

$num = $num - 1;if ($num == 0) {

$state = 0;}

break;default:

// Not used break;

Inde

x

76

}}

For Loop

The for statement is an alternative to the while statement. The for statement should be used instead of a while statement when the number of executing the loop is known. Three components are required to enable the for loop successfully, a counter variable initialization, a conditional statement, and incrementing the counter variable. Typically the counter variable is used to determine how often the loop has executed, and the conditional statement determines when to exit the loop.

for ($i = 0; $i > 0; $i++) { statement; statement;}

An alternative construct for the for loop is available.

for ($i = 0; $i > 0; $i++) : statement; statement;endfor;

Processing Forms

PHP provides for a seamless integration with forms.

In the example below the form is comprised of two input text fields, FirstName and LastName respectively. The user enters the name into the text fields and selects the Submit button. When the form is submitted $_POST[‘FirstName’] and $_POST[‘LastName’] contains the user input.

<form method="post" action="index.php"> <p><label for="FirstName"> First Name: </label> <input type="text" name="FirstName" size="20" maxlength="50" value="Enter ... " /> </p>

Inde

x

77

<p><label for="LastName"> Last Name: </label> <input type="text" name="LastName" size="20" maxlength="50" value="Enter ... " /> </p>

<input type="submit" value="Submit" style="position:absolute; float:left; top:270px; "/> </form>

Processing Text Input

The PHP code snippet below displays the content entered by the user.

<?php echo 'My name is ' . $_POST['FirstName'] . " " . $_POST['LastName'];?>

If the PHP script is used to process multiple pages where the method may vary, then a simple conditional statement can resolve the issue. <?php if ($_SERVER['REQUEST_METHOD'] == 'GET') { echo 'My name is ' . $_GET['FirstName'] . " " . $_GET['LastName']; } else { echo 'My name is ' . $_POST['FirstName'] . " " . $_POST['LastName']; }?>

It is possible that the user selected the Submit button without entering any text, or deliberately omitted information. The function strlen() can verify if data was entered.

<?php if ($_SERVER['REQUEST_METHOD'] == 'GET') { if (!strlen($_GET['FirstName']) || !strlen($_GET['LastName'])) { echo ' Please enter the requested information!'; } else { echo 'My name is ' . $_GET['FirstName'] . " " . $_GET['LastName']; } }?>

A strict form validation can be implemented by adding a check to determine if a variable is set. If a variable is assigned a value then it is set, otherwise it is

Inde

x

78

unset. The function isset() returns true if the variable is set, otherwise it returns false.

<?php if ($_SERVER['REQUEST_METHOD'] == 'GET') { if (! isset($_GET['FirstName']) || ! strlen($_GET['FirstName'])) { echo ' Please enter the First Name!'; } elseif (! isset($_GET['LastName']) || ! strlen($_GET['LastName'])) { echo ' Please enter the Last Name!'; } else { echo 'My name is ' . $_GET['FirstName'] . " " . $_GET['LastName']; } }?>

User provided information can be displayed in the text fields by placing the PHP code directly into the HTML statements.

<input type="text" name="FirstName" size="20" maxlength="50" value= <?php if (!strlen($_GET['FirstName'])){ print '"" /> '; } else { print ' "' . $_GET['FirstName'] .'" /> '; } ?>

Processing Control Elements

Pulldown Menu

<?php $choices = array ('0' => 'Select', '1' => 'Main Campus', '2' => 'Melborne Graduate Center', '3' => 'Orlando Graduate Center', '4' => 'Cape Kennedy Graduate Center');

print '<select id="statename" name="statename" size="1"> \n'; print '<option value="0"> Select ... </option> \n'; print '<option value="1"> Main Campus </option> \n'; print '<option value="2"> Melborne Graduate Center </option> \n'; print '<option value="3"> Orlando Graduate Center </option> \n'; print '<option value="4"> Cape Kennedy Graduate Center </option> \n'; print '</select>';

Inde

x

79

?>

Verify that the user selected a choice.The user choice can be displayed or further processed.

<?php if (0 != $_GET[statename]) { print '<p>'; echo $choices[$_GET[statename]]; print '</p>'; }?>

Radio Button

<p> <input id="1" type="radio" name="MS" value="CS" checked="checked" /> CS <input id="2" type="radio" name="MS" value="CIS" /> CIS <input id="3" type="radio" name="MS" value="CSE" /> CSE</p><br/> <?php if (isset($_GET['Submit'])) { $mdata = $_GET['MS']; print $mdata; }?>

In the code above the state of the radio buttons are not maintained. When the user selects the Submit button the state is set back to the CS choice. Form widgets require that the PHP script manages the state of the buttons. <?php $radiodata = "no"; if (isset($_GET['Submit'])) { $radiodata = $_GET['MS']; }

if ($radiodata == "CS") { print '<input id="radio1" type="radio" name="MS" value="CS" checked="checked" /> CS'; } else { print '<input id="radio1" type="radio" name="MS" value="CS" /> CS'; } if ($radiodata == "CIS") { print '<input id="radio2" type="radio" name="MS" value="CIS" checked="checked" /> CIS'; } else { print '<input id="radio2" type="radio" name="MS" value="CIS" /> CIS';

Inde

x

80

} if ($radiodata == "CSE") { print '<input id="radio3" type="radio" name="MS" value="CSE" checked="checked" /> CSE'; } else { print '<input id="radio3" type="radio" name="MS" value="CSE" /> CSE'; }?>

Check Boxes

<p> <input id="1" type="checkbox" name="Course1" value="AA" /> <label for ="1"> Analysis of Algorithms </label><br/> <input id="2" type="checkbox" name="Course2" value="WP" /> <label for ="2"> Web Programming </label><br/> <input id="3" type="checkbox" name="Course3" value="CT"/> <label for ="3"> Compiler Theory and Design </label><br/> <input id="4" type="checkbox" name="Course4" value="CP" /> <label for ="4"> CapStone Project </label></p>

if ($_GET['Course1'] == 'AA') { echo " "; print $_GET['Course1'] ;}

if ($_GET['Course2'] == 'WP') { echo " "; print $_GET['Course2'] ;}

if ($_GET['Course3'] == 'CT') { echo " "; print $_GET['Course3'] ;}

if ($_GET['Course4'] == 'CP') { echo " "; print $_GET['Course4'] ;}

Inde

x

81

PHP Templates and Controllers

PHP code can be captured to file instead of using it in line, and then include it in the html file. Such a file is referred to a PHP template which can be referenced in numerous html and PHP files. It provides for a level of data abstraction and greatly simplifies the design.

If every web page uses the same title and navigation section, then that code could be captured to a PHP file. An advantage is that a code change can be made in a single file instead of multiple pages.

The code snippet below can be simplified by including a php template containing the same content.

<body>  <div class="titleSection"> <p class="title"> Welcome to Web Programming </p> </div>  <div class="logoSection" > </div>

 <div class="navigationSection"> <br /> <span> Navigation</span>: | <a href="index.html" > Home</a>| <a href="aboutUS.html" > About US</a>| </div>

 <div class="contentSection"> <br/>

The html code including the PHP template is given below.

<body>  <?php include('index.php'); ?>  <div class="contentSection"> <br/>

Inde

x

82

File index.php

<?php print ' <div class="titleSection"> <p class="title"> Welcome to Web Programming </p> </div>  <div class="logoSection" > </div>

 <div class="navigationSection"> <br /> <span> Navigation</span>: | <a href="index.html" > Home</a>| <a href="aboutUS.html" > About US</a>| </div> ';?>

A PHP template can use numerous include statements and determine which content to display to the user. Selecting a PHP template versus another can be accomplished based on user input and conditional statements. Such a PHP script is called a Controller.

if ($_GET['Course3'] == 'CT') { include(‘cis.php’);}else { include(‘cse.php’);}

Inde

x

83

Chapter 7: MySQL Database

The PHP programming language provides for an extensive database support. It can interface with at least 20 different types of database, including MySQL, Oracle, Sybase, and Microsoft SQL Server.

The relationship between the servers is shown in Figure 7.1. The Web Client requests a page from the Apache server. The PHP server cooperates with the Apache server to convert the PHP code into html. Any information required from the database is retrieved using the MySQL server and is further processed by the PHP server. The Apache server returns the page to the Web Client.

Figure 7.1 Relationship between servers.

Database Schema

The following database schema is used for the given examples below.

Database name: forum

Table: memberAttributes: FirstName

LastNameEmailCommentsID (Primary Key)

Table: forumsAttributes: forum_id (Primary Key)

forum_name Inde

x

84

PHP Functions for Interfacing with MySQLVisit www.php.net for a detailed description of database related functions.

mysqli_connect (host, username, password, database, port, socket)

Establishes a connection to MySQL server and returns a reference required for additional calls to the database.

mysqli_error ($link)

Returns the text of the error message.

mysqli_fetch_array (result, type)

Fetches the next row of data from the result array.

mysqli_query ($link, query, mode)

Executes a SQL query amd returns the results.

mysqli_select_db ($link, database)

Selects the database for the specified $link returned by mysqli_connect().

mysqli_set_charset ($link, charset)

Sets the default character set.

Database Connection

The following PHP code connects to the MySQL database. The DEFINE statements provide for defining the four attributes required to connect to the database.

DEFINE ('DB_USER', 'root');

Inde

x

85

http://www.php.net/

DEFINE ('DB_PASSWORD', 'P#@22d'); DEFINE ('DB_HOST', '127.0.0.1'); DEFINE ('DB_NAME', 'forum');

If the connection to the database fails, a detailed error is returned. This error should be recorded to file and not displayed to the user.

The variable $dbc becomes the reference to the database. When the connection is established the ISO-8859-1 character encoding is used by default. To use a more extensive character encoding we must set the encoding to utf8.

<?php // Establishes the database connection

DEFINE ('DB_USER', 'root');DEFINE ('DB_PASSWORD', 'P#@22d');DEFINE ('DB_HOST', '127.0.0.1');DEFINE ('DB_NAME', 'Forum');

$dbc = @mysqli_connect (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);if (!$dbc) echo ‘Unable to connect to DB.’; else echo ‘Connected to DB.’; // set the character encoding mysqli_set_charset($dbc, ‘utf8’);

?>

Creating a dynamic pull-down menu

Suppose we need to dynamically create a pull down menu and the menu options are stored in the database table ‘forums’. Storing the menu options in the database allows the users to add new categories to the forum. The database can automatically sort the options in ascending order, which is a benefit of using a database.

Inde

x

86

Table forums

The SQL query to extract data from the forums table is

Select forum_id, forum_nameFROM forumsORDER BY forum_name ASC

In this example the first option of the pull-down menu is set to ‘Select …’ which is not stored in the database table.

print '<select id="forid" name="forid" size="1"> \n';print '<option value="0"> Select ... </option> ';

Inde

x

87

When the Submit button is pushed and the user did not select an option from the pull-down menu, then ‘Select …’ is forwarded by default to the PHP server. We use this item to protect the database from bots trying to paste their advertisement messages into our database. If the option ‘Select …’ is send to the PHP server the information is discarded.

The SQL statement is stored to variable $query.

$query = "SELECT forum_id, forum_name FROM forums ORDER BY forum_name ASC";The array $result is comprised of 6 rows of data which is returned from the SQL query. Each row must be extracted separately from the array using the function

$menu_row = mysqli_fetch_array().

$menu_row [0] contains the forum_id and $menu_row [1] contains the forum_name. Both items are required to create the option item for the pull-down menu.

At the end of the transaction the data must be removed from the arrays, otherwise the new data will be appended into the array. Function mysqli_free_result($result) and function unset($menu_row) accomplishes this task.

Example Code:

<body> 

<div class="style11"> <img class="logo" src="images/logo.jpg" alt="Logo" /> </div>  <div class="style12"> <img src="images/logo1.jpg" alt="Logo" width="215px" height="115px" /> </div>  <div class="style21"> </div> <?php include('DBConnection.php');?>  <div class="style22a"> <p class="space20" style= "font-size: 18px;"> <br/> Forums ... <br/><br/> </p> In

dex

88

<?php include('PullDownMenu.php');?> </div>  <div class="style23a"> <br /> <form action="Forums.html.php" method="post"> <fieldset> <legend><span>Credentials: </span></legend> <div><label for = "firstname">First Name: </label> <input type= "text" name= "firstname" id="firstname" /> </div> <div><label for = "lastname">Last Name: </label> <input type= "text" name= "lastname" id="lastname" /> </div>

<div><label for = "email">Your email: </label> <input type= "text" name= "email" id="email" /> </div>

<div><label for = "id">User ID: </label> <input type= "text" name= "id" id="id" /> </div>

</fieldset> <br /> <fieldset> <legend><span>Your Comments: </span></legend> <div>

<textarea name= "comment" id="comment" cols="42" rows = "10"> </textarea>

</div> </fieldset> <br /> <div> <input type= "submit" name= "submit" id="submit" value="Submit"

/> </div>

</form>

</div> </body>

<?php //mysqli_connect.php// Script establishes the database connectionDEFINE ('DB_USER', 'root');DEFINE ('DB_PASSWORD', 'Phd12345');DEFINE ('DB_HOST', '127.0.0.1');DEFINE ('DB_NAME', 'forum');$dbc = @mysqli_connect (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

// set the character encoding Inde

x

89

mysqli_set_charset($dbc, ‘utf8’);?>

<?php print '<p class="space0"> <strong> Choose a Forum: </strong> </p>

<form action="index.php" method="get"> '; // Display the Pull down menu print '<select id="forid" name="forid" size="1"> \n'; print '<option value="0"> Select ... </option> ';

// Get the options from the database $query = "SELECT forum_id, forum_name FROM forums ORDER BY forum_name ASC"; $result = mysqli_query($dbc, $query);

if (mysqli_num_rows($result) > 0) { while ($menu_row = mysqli_fetch_array($result, MYSQLI_NUM)) { echo "<option value=\"$menu_row[0]\">$menu_row[1]</option> "; } } print '</select>'; print '</form>';

mysqli_free_result($result); unset($menu_row);?>

Inserting Data into the DatabaseTo insert data into the database we create a DBInsert.php file and include it in the html code.

The action in the form tag passes the script and the method to the server, once the submit button is pressed. The variable $_POST is an array that contains the information from the form.

<form action="Forums.html.php" method="post">

DBInsert.php<?php $query = "INSERT INTO member SET FirstName = '" . $_POST['firstname'] . "', LastName = '" . $_POST['lastname'] . "', Email = '" . $_POST['email'] . "', Comments = '" . $_POST['comment'] . "', ID = 3"; $result = mysqli_query($dbc, $query);

Inde

x

90

?>

<div class="style23a"> <br />

<?php include('DBInsert.php');?>

<form action="Forums.html.php" method="post"> <fieldset> <legend><span>Credentials: </span></legend> <div><label for = "firstname">First Name: </label> <input type= "text" name= "firstname" id="firstname" /> </div>

<div><label for = "lastname">Last Name: </label> <input type= "text" name= "lastname" id="lastname" /> </div>

<div><label for = "email">Your email: </label> <input type= "text" name= "email" id="email" /> </div>

<div><label for = "id">User ID: </label> <input type= "text" name= "id" id="id" /> </div>

</fieldset> <br/> <fieldset> <legend><span>Your Comments: </span></legend> <div><textarea name= "comment" id="comment" cols="42" rows = "10">

</textarea> </div> </fieldset> <br /> <div> <input type= "submit" name= "submit" value="Submit" /> </di

</form></div>

Inde

x

91

Chapter 8: Client Side Programming

Client side programming is used to

Improve navigation Provide special effects Validate user data Provide dynamic content

JavaScript is the client side scripting language of choice and it is executed on the client side instead of the server side like PHP.

JavaScriptThe JavaScript programming language was originally called LiveScript, however the name was changed prior to its release. The JavaScript programming language and the Java programming language are not related, and other than the name they share no similarity. JavaScript is a loosely typed programming language that is interpreted instead of compiled. The JavaScript language resembles C++ and Java, with programming constructs such as the if statement, while loop, and standard operators. Object Oriented inheritance is different from the C++ or Java programming language.

JavaScript BasicsJavaScript code can be placed in-line with HTML code. Use the <script> </script> tags to include the code. It is processed by the web browser instead of the server.

<body> <div> <p> This is HTML code </p> <script language=”JavaScript”> document.write(“<p>This text is inserted using JavaScript</p>”); </script> </div></body>

Inde

x

92

JavaScript statements are typically terminated with a semicolon; however it is not a requirement when each statement is listed on a separate line.

The document.write command is used to display data on the page. The script tag supports referencing a JavaScript file. The JavaScript file uses the .js extension. The closing </script> tag is required when using the src attribute.

<script src=”./JavaScripts/myAlgorithm.js”></script>

JavaScript functions can be included in the <head> section.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>SocietyComputationalScience - Home </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="description" content="algorithm design" /> <meta name="keywords" content="algorithm, software design, Imager" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script language="JavaScript" type="text/JavaScript">  </script></head>

Variables, Operators, and Comments

JavaScript supports the comment style of the C++ programming language.

// This is a single comment line

Inde

x

93

/* This is a multiple line comment section Additional comments */

An identifier is used to name variables. Variables can start with a $ symbol like PHP variables, but an underscore or a letter can also be used. Variables can be declared locally using var $myVariable. The variable can be initialized at the same time of instantiation. When a variable is used without a prior declaration then the variable is treated as a global variable.

var $sumOfSquares = 0;var $x = 10;var $y = 10;var $hypothesis = 0;

$sumOfSquares = ($x * $x) + ($y * $y);$hypothesis = Math.sqrt( $sumOfSquares );

A number can be stored to a string by concatenating the number with an empty string.

var $sum = 100;var $buf = $sum + “”;

The String() function can also be used to explicitly convert a number to a string.

var $buf = String ($sum );

The toString function is another mechanism to convert a number to a string.

var $buf = $sum.toString();

A number stored to a string can be converted directly to a number by subtracting 0.

var $sum = $buf – 0;

Inde

x

94

A more explicit method is to call the function Number().

var $sum = Number($buf);

Arrays

A simple array of integers can be created with the statementvar ar = [1, 1, 2, 3, 5, 8, 13, 21];

The array elements are accessed using an array index. Like most programming languages the index count starts with index 0. In this example $value is assigned the number 5.

var $value = ar[4];

Creating an empty array using the new operator.var ar = new Array();

Creating an array of size 10.var ar = new Array( 10 );

The function Array.join() copies the content of an array to a string. The array values are separated by a comma.

var ar = [1, 1, 2, 3, 5, 8, 13, 21];var buf = ar.join();

document.write(buf);The output displays 1,1,2,3,5,8,13,21

If statements

if (expression) { statement;}elseif (expression) { statement;} else { statement; In

dex

95

}

var $x = 5;var $ans = 0;

if ($x >= 0) { $ans = $x;}else { $ans = $x * -1;}

Switch construct

switch (expression) {case 1: statement; statement; break;case 2: statement; statement; break;default: statement; break;}

While Loop

while (expression) { statement;}

The following example calculates n! using a while statement.

var $n = 10;var $cnt = 1;var $ans = 1;

while ($cnt <= $n) { $ans = $ans * $cnt; $cnt++;}

Inde

x

96

Date/ Time

The function displayDate() displays the date and time. The date and time is obtained by creating a date object var d = new Date();.

The method document.getElementById("dd").innerHTML = d finally displays the content of the object to the html element “dd”.

<p id=”dd’> Display date and time here </p>

function displayDate() { var d = new Date(); document.getElementById("dd").innerHTML = d;}The Date and Time Example below shows the HTML/ JavaScript implementation. The function displayDate() resides in the <head><script> section ready to be called. The setInterval function provides for the animation of date and time. This timer calls displayDate() every 1000 milliseconds, which results in a text update every second.

Call clearInterval(dd) to stop the timer.

<p id="dd"> <script language="javascript" type="text/javascript"> setInterval("displayDate()", 1000); </script></p>

Date and Time Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercise 8.1</title> <meta name="description" content="A Web Page using JavaScript." /> <meta name="keywords" content="Computer Science, Web Programming" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

<script type="text/javascript"> function displayDateTime(buf) { // Displays the date and time

Inde

x

98

else { sec = d.getSeconds(); }

var timeBuf = "" + hr + min + sec; document.getElementById(buf2).innerHTML = timeBuf; }

function elapsedTime(t1, t2) { // Calculates elapsed time in milliseconds return (t2.getTime() - t1.getTime()); }

</script></head>


 <div class="navigationSection"> <br /> <span> Navigation</span>: | <a href="index.html" > Home</a>| <a href="aboutUS.html" > About Us</a>| </div>

 <div class="contentSection"> <p id="dt"> <script language="javascript" type="text/javascript"> setInterval("displayDateTime('dt')", 1000); </script> </p> <p id="d"> <script language="javascript" type="text/javascript"> displayDate('d'); </script> </p> <p id="t"> <script language="javascript" type="text/javascript"> setInterval("displayTime('t')", 1000); </script> </p> </div> </body> In

dex

100

</html>

Processing Images

<p> <img src="" id="pp" alt="image" /> <script language="javascript" type="text/javascript"> toggle = 0; function loadImage() { switch (toggle) { case 0: var pic = "Images/Ball_1.JPG"; toggle = 1; break; case 1: var pic = "Images/Ball_2.JPG"; toggle = 2; break; case 2: var pic = "Images/Ball_3.JPG"; toggle = 3; In

dex

101

break; case 3: var pic = "Images/Ball_4.JPG"; toggle = 4; break; case 4: var pic = "Images/Ball_5.JPG"; toggle = 5; break; case 5: var pic = "Images/Ball_6.JPG"; toggle = 0; break; } document.getElementById("pp").src = pic; }

setInterval("loadImage()", 500);

</script></p>

Dialog Windows

Three types of dialogs can be displayed to the user. The user is required to perform an action by either entering a message or selecting the OK or Cancel button. The dialog methods block until the user responds.

alert() confirm() prompt()

Alert Dialog

The alert dialog can be invoked by clicking a button and invoking the associated event handler.

<p> <button onclick="alert('Garfield says hello!');"> Click here </button> </p>

Inde

x

102

Confirm Dialog

In the example below, the event handler for the button “Confirm Animation” calls the JavaScript function confirmTimerFunction(). The confirmTimerFunction() creates the confirm dialog. When the user selects the Ok button a periodic timer is activated. myTimer is a reference that can be used to turn the timer off, using clearInterval(myTimer). Turning the timer off halts executing loadImage() which provided for the animation.

<p> <button onclick="confirmTimerFunction();"> Confirm Animation </button></p>

function confirmTimerFunction() { var buf = 'Do you want the animation to continue? \n\n' + 'Select Ok to continue or Cancel to stop'; if (!confirm(buf)) { clearInterval(myTimer); return; }

toggle = 0; myTimer = setInterval("loadImage()", 300); return; In

dex

103

}

Prompt Dialog

Using a Prompt Dialog is shown in the example below. The event handler for the button User Prompt calls the javascript function userPromptFunction(). The userPromptFunction() creates the Prompt Dialog prompting the user for his/her name. Once the user has entered the name and selected Ok, the dialog box closes. When the user selects the Get Message button the Alert Dialog displays the message “name, Garfield says Hello! “

<p> <button onclick="alertFunction();"> Get Message </button> </p> <p> <button onclick="userPromptFunction();"> User Prompt </button> </p>

Inde

x

104

function userPromptFunction() { var buf = 'Enter the name:'; message = ""; message = prompt(buf, message); return;}

function alertFunction() { var buf = message + ", Garfield says Hello!"; alert(buf); return;}

Inde

x

105

Processing Navigation Bar Images

<script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc; }

function MM_preloadImages() { //v3.0 var d = document; if (d.images) { if (!d.MM_p) d.MM_p = new Array(); var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++) if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; } } }

function MM_findObj(n, d) { //v4.01 var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) { d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p); } if (!(x = d[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n]; for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document); if (!x && d.getElementById) x = d.getElementById(n); return x; }

function MM_swapImage() { //v3.0 var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3) if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc)

Inde

x

106

x.oSrc = x.src; x.src = a[i + 2]; } }

//--></script>

Inde

x

107

Chapter 9: Document Object Model and Dynamic HTML

Dynamic HTML (DHTML) refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presentation. Standardization efforts at W3C made it possible to write standard-based DHTML that works on most compliant browsers. DHTM involves three aspects:

1. JavaScript – for cross-browser scripting2. Cascading Style Sheets (CSS) – for style and presentation control 3. Document Object Model (DOM) – for a uniform programming interface

to access and manipulate the Web page as a document

W3C established the Document Object Model (DOM) as a standards application programming interface (API). Scripts access the API to manipulate the HTML document. The DOM objects are organized into a tree structure. Each Web page has a document node at the root of the tree.

Inde

x

108

Figure 9.1 Client-Side object hierarchy

Exercise 9.1Exercise 9.1 shows that we can modify the document using the DOM API and JavaScript. In the example the list items of an unordered list are reordered in ascending order.

The list elements of the unordered list are copied to a new array NewListArray. The membership function Sort() is called on the NewListArray. A comparator function is used to perform the sort. After the array is sorted the elements are reinserted into the original list. The existing duplicate members are automatically removed from the list as they are re-inserted into the list.

Figure 9.1 and Figure 9.2 shows the UL before and after the sort, respectively.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercise 9.1</title> In

dex

109

else if (s > t) { return 1; } else { return 0; } } );

For (var i = 0; i < NewListArray.length; i++) { e.appendChild(NewListArray[i]); } }

</script> <ul id="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul>

<button onclick ="sortMyList('list')">Sort List</button>

</div> </body></html>

Inde

x

111

Figure 9.1

Figure 9.2

Inde

x

112

ReferencesAn Introduction to Web Design + ProgrammingPaul S. Wang, Sanda S. KatilaThomson, Course TechnologyISBN-13: 978-0-534-39528-5ISBN-10: 0-534-39528-7

Web Design in a NutshellJennifer Niederst RobbinsO’ReilyISBN-13: 978-0-596-00987-8ISBN-10: 0-596-00987-9

Just Enough WEB Programming with XHTML, PHP, and MySQLGuy W. LeckyThomson, Course TechnologyeISBN-10: 1-59863-684-7

PHP CookbookAdam Trachtenberg, David SklarO’Reily

Build your own Database Driven Web Site using PHP & MySQLKevin YankSitepointISBN: 978-0-9805768-1-8

JaavaScript, The Definitive GuideDavid FlananganO’Reily

Inde

x

113

IndexAApache Server, 2

CController, 14

E

F

P

Inde

x

114