1/27/13

Web Programming 66316

Dr. Sufyan Samara Computer Engineering Department An Najah NaAonal University

ObjecAve:

Course outline

Course outline: Introduc)on

Provide the necessary knowledge for developing and administraAng the applicaAons running on World Wide Web.

HTML, XML, and XHTML

Background Servers and protocols Web hosAng Client/Server programming Data exchange The Document Model Style Elements, Hyperlinking, and InteracAvity HTML5 XML and XHTML Tags and Styles Style Sheets ProperAes CSS Objects

CSS and Styles

1/27/13

Client Side Scrip)ng

IntroducAon JavaScript

Course outline cont.

Server Side Scrip)ng

PHP ASP .NET overview MySQL Database Tools IntroducAon CMS Systems

Web Databases

Content Management Systems Web 2.0 Features

Textbook:

AJAX RSS Social Networking Programming the World Wide Web 6th ediAon by Robert W. Sebesta

Exams
First Exam: 24/02/2013, Time: 4:00-5:00 Second Exam: 31/03/2013, Time: 4:00-5:00 Project Deadline: 21/04/2013

1/27/13

ObjecAves
Provide a comprehensive introducAon to the programming tools and skills required to build and maintain server sites on the web. Learn how to program using XHTML, HTML5, CSS, JavaScript, PHP, MySQL. Introduce some Web 2.0 features Explore some content management systems.

Note
The area of web programming is very wide
Many books can be found explaining just one web programming language or a tool

Textbook:
Programming the world wide web, sixth ediAon, by Robert W. Sebesta

Three exams, one project.

First: 20%, Second: 20%, Final: 40%, projects: 20%

Tools
Use Open Source tools e.g. Eclipse

1/27/13

The internet
Originated in the 1960s. Developed by the DoD A collecAon of computers connected together in a big network.
Using routers, switches, hubs, and many dierent servers and protocols. A known widely used protocol is the TCP/IP protocol.

Robust: provides a delivery mechanism in which a piece of informaAon can take mulAple routes from one point to another. InformaAon are:

Client/Server topology

Requests for informaAon or service Responses containing that informaAon or the result of a service InformaAonal responses (control messages), that is, reasons why the service or informaAon could not be delivered

Internet Protocol Addresses

Every thing on the internet has to be uniquely idenAed.
A numeric address is used called the internet protocol address (IP).
A unique 32-bit number
About 4,3 billion addresses

Wrieen as four 8-bit numbers, separated by periods. A trend to use a new standard, IPv6, (128-bit) Not user friendly.

1/27/13

Domain Names
To access some informaAon on one computer (the host machine) on the internet, you need its address. People are not good remembering numbers.
Map numeric addresses to names Names begins with the host machine that are followed by the enclosing collecAon of machines are called domains.
edu, com, gov, ps, jo, de Ex: eng.najah.edu

Names given to browsers have to be converted to numeric addresses

Domain Name Services (DNS)

World wide web

On top of TCP/IP many applicaAons limited protocols were developed
telnet: to allow a user to log in and access another computer. File Transfer Protocol (gp): to allow transferring of les among computers. Usenet: electronic bulleAn board. mailto: to allow messages to be sent from one user to another.

World Wide Web (www) or Web: originally to allow scienAsts to exchange documents.

Allow a user anywhere to search for and retrieve documents from databases on any number of dierent document-serving computers on the internet. All document have been formed using hypertext.
A text containing links to other documents. This developed to include hypermedia (pictures, sound, and video)

1/27/13

Web browsers
Two computers communicaAng as Client/ Server. (request/response) Document provided by web servers are requested by clients browsers. Although many protocols are supported by the web, the most common one is the Hypertext Transfer Protocol (HTTP). Most common browsers are: IE, Firefox, Safari,

Web Servers
Handel client requests Each document on the server has a URL. All the communicaAon between a Web server and a web browser is done based on a standard web protocol. When a web server runs, it informs the operaAng system that it is ready for any network request.
All network requests that meets the server communicaAon protocol are send the the server. The web server runs in the background A web browser opens a network connecAon to a web server. All HTTP commands include a URL.
Indicates the specicaAons of the host server machine

Common Web servers are Apache and IIS.

1/27/13

Web Servers cont.

Each web server has a folder which contains the web documents.
The document is mapped to a URL
Example: C:\apache\hepd\myWebSite\index.html is mapped to hep://www.myWebServer.com/myWebSite/index.html

If a web server provides a document that is residing on a dierent computer, it is called a proxy server. Many web servers are now supporAng other protocols than the HTTP such as gp, gopher, news, and mailto.

In addiAon nearly all web servers supports interacAng with database systems through Common Gateway Interface (CGI) programs and server-side scripts.

Used to idenAfy documents (resources) on the internet. Formats: scheme : object-address

Scheme: communicaAons protocol

Uniform (or Universal) Resource Locators (URL)

hep, gp, gopher, telnet, le, mailto, and news hep: used to request and send eXtensible Hypertext Markup Language (XHTML) documents.
URL object-address: //fully-qualied-domain-name/path-to-document A domain name has to include a port number For Hep the default is 80, no need to be included unless it is something else.

le: using the le protocol to reference documents residing on the same computer the requester browser resides on.
le://path-to-document

1/27/13

URL cont.
No spaces allowed
Also semicolons, colons, and ampersands(&). To include such disallowed characters, they must be encoded as a percent sign (%) followed by its ASCII hexadecimal code.

MulApurpose Internet Mail Extensions (MIME)

Developed to specify the format of dierent kinds of documents to be sent via internet .
Depending on the format, the browser knows how to render it. Common types are: text, image, and video.

MIME specicaAons have the form: type/subtype

Common text subtypes are plain and html. Common image subtypes are gif and jpeg Common video subtypes are mpeg and quickAme. Experimental subtypes begins with x- as in video/x-msvideo
How can a browser render an experimental type?? An external program has to be provided, e.g. divx codec

1/27/13

The HTTP protocol

Consists of two phases: the request and the response. Any communicaAon (request or response) between browser and server consists of two parts: a header and a body. The header contains informaAon about the communicaAon. The body contains the data of the communicaAon if there is any.

The general form

The Request Phase

HTTP method domain part of the URL HTTP version

GET /myWebPage.html HTTP/1.1 Hep methods include
GET returns the contents of the specied document HEAD returns the header informaAon for the specied document POST Executes the specied document, using the enclosed data PUT Replaces the specied document with the enclosed data DELETE Deletes the specied document The most common methods are GET and POST

Header elds: four categories

General: for general informaAon such as date Request: Included in request headers

Response: for response headers EnAty: Used in both request and response headers

One common request eld is the accept eld which specify a preference of the browser for the MIME type of the requested document e.g. Accept: text/plain or Accept: text/* for any.

1/27/13

The Request phase cont.

The general form cont.
Blank line
The header of a request has to be followed by a blank line.

Message body
Not all requests has message body, for example requests that use the GET, HEAD, and DELETE methods do not have bodies.

The Response phase

The general form
Status line: Includes
the hep version used A three-digit status code for the response, depending on the rst digit it means
1 informaAonal 2 success 3 redirecAon 4 client error, e.g.: 404 not found 5 server error

Response header elds Blank line Response body

A short textual explanaAon of the status code Ex: HTTP/1.1 200 OK

10

1/27/13

Security
Consider sending a credit card number to a company, the security issues for this transacAon are
Privacy: it must not be possible for the credit card number to be stolen on its way to the companys server Integrity: it must not be possible for the credit card number to be modied on its way to the companys server AuthenAcaAon: it must be possible for both the purchaser and the seller to be certain of each others iden)ty. NonrepudiaAon: it must be possible to prove legally that the message was actually sent and received. Public-key encrypAon e.g. RSA

Using encrypAon

XHTML
HTML is dened with the use of the Standard Generalized Markup Language (SGML) All web standards are managed by the World Wide Web ConsorAum (W3C) HTML is the language of the World Wide Web XHTML is a formal redeniAon of HTML under XML.
W3.org

This makes the HTML code easier to validate, as it adheres more closely to the XML standard for data exchange. The basic unit of deniAon used in XML and HTML is the tag
<tag_name>Content inside tag</tag_name>

11

1/27/13

The Document Model

Refers to the collecAon of elements that make up a Web page Consists of layered containers
The core technology behind sharing informaAon using standards such as XML and computer programs. The physical HTML document (or le) The document informaAon (Atle, keywords, and so on) The layout informaAon (formapng and presentaAon) The content items (text, hyperlinks, videos, pictures, add-ins, and so on)

Anatomy of the Document

XHTML document must begin with an xml declaraAon element to idenAfy that it is based on XML
<?xml version = 1.0 encoding = uu-8?>

An HTML document consists of three parts:

DeniAon secAon: denes the content, recommended but can be leg out
Contains the doc. Type, the HTML version, ..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TransiAonal//EN "hep:// www.w3.org/TR/html4/loose.dtd">
HTML transiAonal is allowable under W3C but has features replaced by styles

The strict doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN "hep://www.w3.org/TR/html4/strict.dtd">

The HEAD: informaAon to the browser The BODY: all the content that is designed to be rendered In HTML5, the deniAon secAon and the head secAon are mandatory.

12

1/27/13

The simplest HTML5 document template

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

The TITLE tag species what is displayed in the Atle bar of the browser
<TITLE>My Title</TITLE>

The contents of the HEAD Tag secAon

The meta tags

Used by SEO (Search Engine OpAmizaAon) Tells a search engine to index a page and give it some help in categorizing the informaAon youre providing
<meta name="keywords content="HTML, book, tutorial" > <meta name="descrip)on content=course about WEB programming. . ." > <meta name=author content=Your name> <meta name=copyright content=2012> <meta name=generator content=the program you used>

does not have an end tag

This is because all the informaAon that you need is contained within the tag, in something called aeributes.

The client side scripts secAon

Now, these can also be put in the BODY of the document

13

1/27/13

The HTML BODY Tag

Browsers may read all body before rendering, or render on the y
Try to give as much informaAon about the content in the beginning
Layout informaAon
Each block of text contained between paragraph tags <P> </P> E.g. images are rendered last, because they are to be downloaded Give size of images to reserve place

Hyperlinking
The ability of linking content together
This can be a page, an image, a video, a sound, or a zip le containing a sogware release

You will encounter two kinds of reference within an HTML page

Internal anchors: a reference within the current document, e.g. table of contents External anchors: reference to external document

14

1/27/13

Anything in the document that is between chevrons (< and >) is considered to be an HTML tag
The robust parsing of most browsers will just ignore tags that are invalid or improperly formed.

HTML Short Reference

Comments
Between <!-- and -->

Tags and Aeributes

<tag aZribute="value">content</tag> The tag tells the browser what kind of mark-up is being introduced, and the aeributes can be used to change the exact rendering of the mark-up.

Minimized Tags
A minimized tag is one where there is no start and end tag, just a single instance of the tag <tag> or <tag/>
the second variaAon is the one preferred by the XHTML standard

NesAng means including tags inside other tags Overlapping means extending the inner tag past the outer tag Many tags can be nested, provided that the sense of the document is retained
<tag_one>Content <tag_two>Other Content</ tag_one> More Content</tag_two> <tag_one>Content <tag_two>Other Content</ tag_two> More Content</tag_one>

NesAng and Overlapping

<B>Bold <I>Bold + Italics</B> Italics only?</I>

one can specify italic text inside bold text in order to have bold, italic text one can also nest containers such as tables inside other containers (inside cells of tables, in the case of tables)

15

1/27/13

The rst three tags are the easiest. They typically have no aeributes, and are used on their own, or nested, in order to render specic eects
The bold text tag is <B>
This will be <B>in bold</B>

Text Formapng

The Italic text tag is <I>

This will be <I>in italics</I>

The underline text tag is <U>

This will be <U>underlined</U>

You can use the FONT tag. However it has been deprecated by the addiAon of style sheets.
aeributes that allow you to specify the font by the FACE aeribute, color, and size of the text that you want to be displayed.

<HTML> <HEAD> <TITLE>Bold, Italics and Underlined</TITLE> </HEAD> <BODY> This is <B>bold text</B>.<BR /><BR /> This is <I>italicized text</I>.<BR /><BR /> This is <U>underlined text</U>.<BR /><BR /> This is <B>bold +<I>italicized +<U>underlined</ U></I></B>. </BODY> </HTML>

B, I, and U Example with nesAng

16

1/27/13

<HTML> <HEAD> <TITLE>Times, Courier and Verdana Text</TITLE> </HEAD> <BODY> <FONT FACE="Courier SIZE=6>This is Courier text</FONT><BR /><BR /> <FONT FACE="Times Color=#808080>This is Times text</FONT><BR /><BR /> <FONT FACE="Verdana Color=Red>This is Verdana text</FONT><BR /><BR /> </BODY> </HTML> The standard HTML colors are: Black, Silver, Gray, White, Maroon, Purple, Fuchsia, Red, Yellow, Olive, Green, Lime, Navy, Teal, Blue, Aqua One can specify colors using RGB hex value
You can use a tool called the Color Schemer, available at hep://www.colorschemer.com/online.html

Font Example

Pre formapng tag <PRE> <PRE> This text is preformaeed. </PRE> Emphasizing tags <EM> and <STRONG>

Pre Formapng and emphasizing

On most browsers this is same as italic On most browsers this is the same as bold

This text is <EM>emphasized</EM> This text is <STRONG>strongly emphasized</STRONG>. Other tages

<CODE>Computer code excerpts <SAMP>Sample output from programs <KBD>Text to be entered by users

17

1/27/13

The <abbr> tag (abbreviaAon)

<abbr Atle="Hyper Text Markup Language">HTML</abbr> The HTML word will be viewed When the mouse hover over the HTML word a popup note will be shown viewing the content of the Atle aeribute.

Flow Formapng
Anything that changes the ow of the content around the page, as well as (opAonally) specic color and style informaAon The heading tag, heading 1 as the most important, and 6 as the least <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> This is normal text. Heading can take several tags such as ALINE
<h1 align="RIGHT">Right Aligned Heading</h1>

18

1/27/13

<body> <h1 align="LEFT">Heading</h1> <p>This is a paragraph of text.</p> This is not inside a paragraph. <p>This is another paragraph.</p> </body> The ALIGN aeribute with the paragraph tag. <div align="CENTER"> <p>This is centered.</p> </div> <p>This is not.</p> or to use three control tags:
This is deprecated You can use the DIV align aeribute

Paragraph <P>

The <br/> tag force a break line in the document

<CENTER> <RIGHT> <LEFT> However, only the CENTER tag is supported in the HTML standard and is part of the TransiAonal deniAon. In other words, under strict HTML 4.01, it should not be used.

Ordered list: numbered items (nominally 1, 2, 3, and so on, but can be changed)
Enclosing it in <ol> and </ol> tags Each item must begin with an <li> tag; however, a closing tag is not required. The TYPE aeribute can be used to change the numbering scheme used, however it is deprecated.
i for roman numerals (i, ii, iii, iv, and so on) a for lowercase leeers (a, b, c, d, and so on). <OL start=5>

lists of items

To start indexing other than the default use the aeribute start

<ol TYPE=i"> <li>This is the rst item</li> <ol TYPE="a"> <li>This is sub-item one</li> <li>This is sub-item two</li> <li>etc. </li> </ol> </ol>

19

1/27/13

There is simply a bullet or other illustraAve element in front of the item rather than a number <ul> <li>This is the rst item</li> <ul> <li>This is sub-item one</li> <li>This is sub-item two</li> <li>etc. </li> </ul> </ul> The TYPE aeribute is used to change the ordering style for the ordered list
Three allowable values DISC, SQUARE, and CIRCLE

Unordered list <UL>

<UL> Types
<ul type="DISC"> <li>This is the rst item <ul type="SQUARE"> <li>This is sub-item one</li> <li>This is sub-item two</li> <li type="CIRCLE">This is a dierent sub-item bullet! </li> </ul> </ul>

20

1/27/13

DeniAon list
A deniAon list is just a structured list that contains items and their deniAons. The deniAon block is usually slightly indented from the item to which it refers, and when the line wraps, the indent is kept. You cannot change the aspect of it using the TYPE aeribute. Instead, styles must be used to change the rendering. <dl> <dt>First item</dt> <dd>First deni)on</dd> <dt>Second item</dt> <dd>Second deni)on, rst part</dd> <dd>Second deni)on, second part</dd> </dl>

The Table <TABLE>

consists of a start tag <table> and end tag </table>. Between these, it is build up from a series of rows, which have a start tag <tr> and an end tag </tr>. Inside table rows, there are a number of columns, or cells, each with a start tag <td> and end tag </td>. <table BORDER="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> The BORDER aeribute can be "0 to force the border to be invisible).

21

1/27/13

The WIDTH aeribute: controls the table width

Tables cont.

Ex: A table that has three columns, two of 25% and one of 50%, you would use HTML such as: <table WIDTH="100%"> <tr> <td WIDTH="25%"> </td> </tr> <tr> <td WIDTH="50%"> </td> </tr> <tr> <td WIDTH="25%"> </td> </tr> </table> Note: if you want to center the table, you can enclose it in <CENTER> and </CENTER> tags.

value for the WIDTH aeribute can be presented as a percentage of the available block or as a discrete value, in pixels.

Homework
Use the <table> tage to to generate the webpage shown here. Note that you may need to use aeributes like COLSPAN, WIDTH, and VALIGN, also other tags like <H1>, <BR/>,

22

1/27/13

More on Tables
BGCOLOR aeribute is used to set the background of the table or a parAcular cell inside the table. deprecated The CELLSPACING and CELLPADDING aeributes are used in the <TABLE> tag to set the space between cells (spacing) and the inside margins (padding). The <TH> tag allows you to specify that a cell contains heading informaAon
<table> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table>

The generic form for an external link (which will be in the index page, linking to other pages) is as follows: <A> is the anchor tag
On the same page On the same server On dierent server
<A HREF="#internal_ref_name>Link Text</A> <A HREF="target_page.html">Link Text</A> <A HREF="hZp://www.mycom.com/target_folder/ target_page.html">Link Text</A> <A HREF="hZp://www.mycom.com/target_folder/target_page.html #internal_ref_name"> Link Text</A>

Document Linking

Links can be text, images, or mulAmedia. Text links typically appear as underlined, dierently colored words on a page. Any image on a web page can be turned into a link. You can place <a> tags around video and audio content to make them links.

23

1/27/13

Absolute and RelaAve Links

Absolute links use a complete web address, or URL, to point to a specic page on a specic web server: Rela5ve links use shorthand to reference a page and do not specify the server. You generally use relaAve links to reference documents on the same website: You must include the prex (hep://) when referencing URLs in your HTML. If you are linking to a document that resides on a le transfer site, you use the FTP prex (gp://). If you want to create a link that opens an e-mail program, allowing a user to send an e-mail message, you use the MAILTO prex (mailto:). There is also an encrypted version of the HTTP prex, heps://, which you use when linking to secure areas of websites, such as those involving payment transacAons.
<a href=page.html>Click here</a> <a href=hep://www.example.com/page.html>Click here</a>

Insert an Image Link

24

1/27/13

Open a New Window with a Link

You use a target aeribute within the <a> link tag to open links in new windows. To make all the links on your page open in new windows, you can use the <base> tag. To make mulAple links on a page open in the same window, use the same target value for the links, for example target= new1.
The rst Ame a user clicks one of the links, a new1 window opens. Subsequent link clicks open pages in the same window.

You must assign names to the areas to which you want to link
You can do this with the id aeribute.

Link to an Area on the Same Page

25

1/27/13

Change Link Colors

You can control the appearance of links throughout your web pages using a style rule. You can change the color of unvisited, visited, and acAve links to make them match the theme of your website. You can also remove the default underlining that normally appears beneath a link using the text-decora5on property.

26

1/27/13

Dene Link RelaAonships

The rel aeribute can mark the link as belonging to the previous or next document in a series, to the website of the author of the current document, or to a copyright license for the current document. You can also use the rel aeributes to tell search engines to ignore a link when determining the ranking of the current page. Search engines ogen analyze the outgoing links on pages to help categorize the pages the links are on.

27

1/27/13

The values of the rel aeributes in <a> tags

The following are values that can be used with the rel aeributes in <a> tags: Alternate: Link to an alternate representaAon of the current document Author: Link to the author of the current document External: Link to a document at a site that is external to the site of the current document rst, prev, next, last: Links to other documents in a series of documents Help: Link to context-sensiAve help License: Link to a copyright license for the current document Nofollow: Species that search engines should not consider the linked document for page-ranking purposes Noreferrer: Species that the browser should not send referrer informaAon when the link is clicked Search: Link to a search page for the current document

28

1/27/13

Input elements such as text elds, menus, and check boxes collect data from a website user. Web page forms have three important parts: a <form> tag, form input elements, and a Submit bueon. All forms should include a Submit bueon for sending the data to a web server for processing. Aper the form data is processed, a script typically sends a conrma)on page back to the browser window noAng whether or not the form data was sent successfully.

Forms

Form tag <FORM>

Typically, a form has two aZributes lled out
ACTION: the locaAon of the script that will process the form contents. METHOD: indicates the method that will be used in sever side processing (GET or POST) accompanied by the NAME and TYPE aeributes. The NAME gives the name of the eld that will be used by the script on the server (or client) to retrieve the data associated with the eld. The TYPE aeribute can be one of a variety of dierent data entry types, of which
the most common are likely to be: TEXT, RADIO, CHECKBOX, and SUBMIT

The <INPUT> tag is used to specify the elements that are to be used to allow the users to enter data

29

1/27/13

Text Boxes

Control Types

Radio BuZons Check Boxes Menu

New in HTML5, some text boxes can hold a specic type of text content such as an e-mail address or a URL.

File Upload Range Slider is new in HTML5 Date and Time Fields

New in HTML5, you can dene menus that hold )me and date informaAon such as months, weeks, and days.

Submit BuZon Reset BuZon

HTML5 introduces several new eld types for presenAng chronological informaAon such as month, week, and Ame elds.

Textbox

30

1/27/13

Tips, Default value, and the password textbox

To specify a default, you can add the value aZribute to the <input> tag. For example:
<form method=post acAon="/cgi-bin/feedback.pl"> <input type=text name=fullname value=Enter your rst and last names> </form>

Password text boxes are similar to regular text boxes with one dierence. Rather than displaying the characters that are typed, the input eld displays the data as asterisks (*) or bullets (). This prevents others from seeing the password text. To create a text box for password entry, you specify the password type in the <input> tag. For example: To create a text eld that accepts only numbers
<input type=password name=textboxName size=45> <input type=number name=age value=21 min=1 max=120 step=0.5> <input type=hidden name=specialcode value=abc123>

You can dene a form input eld of type hidden. For example:

Text area size is measured in rows and columns, with the measurement based on the number of characters that can be displayed. Wrap aZribute.
Use sog to wrap text within the text area but does not wrap text in the form results (text come ager data processing). Use hard to wraps text within both the text area and the form results. Use o to turn o text wrapping, forcing users to create new lines of text as they type.

Add a Large Text Area

If the user types more text than is visible in the text area, scroll bars appear at the side of the text box You can use the readonly aeribute if you want to display default text in a text area and do not want users to move or edit the text.
This aeribute does not require a value.

31

1/27/13

Note: The check box value does not appear on the form, it is used as the value to be assigned if the check box is checked. To automaAcally show the check box as selected use the checked aeribute <input type=checkbox Name=newsleeer Value=yes checked>

Add Check Boxes

32

1/27/13

When radio bueons have dierent name aeributes, the browser treats them as parts of dierent radio bueon sets. You can use the checked aeribute to show one radio bueon in the group as selected by default.

Add Radio Bueons

Add a (combo) List

33

1/27/13

If the value of the size aeribute is greater than 1 the view will be a list (rectangular box) with scroll bars. To create a submenu, use the <optgroup> tag and the label aeribute (note that not all browsers support the <optgroup> tag)
<p>What is your favorite sport?</p> <select name=favoritesport> <optgroup label=Summer> <opAon value=Diving>Diving <opAon value=Biking>Biking </optgroup> <optgroup label=Winter> <opAon value=Skiing>Skiing <opAon value=Ice Climbing>Ice Climbing </optgroup> </select>

Combo/list

Add a Date and Time Input

For a month type, step values are in months. For a week type, step values are in weeks. For a Ame type, step values are in seconds. The value 3600 would create increments one hour apart.

34

1/27/13

E-mail, URL, TEL and autocomplet

To add an email text eld To create an input eld for a telephone number
<input type=tel name=phone> <input type=email name=emailaddress size=25 maxlength=256>

To prevent a text box autocompleAng from happening, you can set the autocomplete aeribute to o. For example: To add a URL text

<input type=text name=ssn autocomplete=o> <input type=url name=emailaddress size=25 maxlength=200> checks if the text includes :// with alphabeAcal text before and alphanumeric text or a period ager.

Validate Input with a Paeern

You can add a paeern aeribute to the <input> tag to perform addiAonal validaAon. You create a paeern using a language known as regular expressions. The browser will check to see if the data in the eld matches the dened paeern If there is no match, the browser aborts the form submission and displays an alert. For example, to Accept only Leeers and Numbers: paeern=[A-z0-9]*

35

1/27/13

Some regular expressions

. [a-z] [A-Z] [A-z] [0-9] * + ? {N} Any character, including leeers, numbers, symbols, and whitespace. Any lowercase leeer. Any uppercase leeer. Any leeer, lowercase or uppercase. Any number. Any number of instances of the character preceding it, including zero instances. One or more instances of the character preceding it. One or zero instances of the character preceding it. N instances of the character preceding it, where N is a posiAve number.

Add a Range Slider

<input type=range min=100 max=5000 step=100 value=1000> To display the current value of the slider next to the slider as text do the following
<input type=range min=100 max=5000 step=100 value=1000 onchange=document.getElementById(display).innerHTML=this.value> <span id=display>1000</span>

36

1/27/13

Add a File Upload

To allow users to upload les to the server Works only with the post method in the <form> tag

37

1/27/13

File upload cont.

To limit the accepted le type, you can use the accept aeribute to list the les your server can process. You list the les by their MIME (MulApurpose Internet Mail Extensions) types. Your HTML code may look like this: <input type=le name=userles accept=image/gif, image/jpeg, image/png>

The submit bueon allows users to send the data they enter into the form. The reset bueon allows users to clear the data they have entered.

Submit and reset bueon

38

1/27/13

You can mark elds in your form as required using the required aeribute. If you set a eld to required, your users cannot submit the form unAl they have entered valid data in that eld. The required aeribute does not require a value associated with it.

Require a Field

You can add placeholder text to your form elds to add instrucAons. The text appears inside the form eld when the form rst appears. If a user clicks inside the eld, the placeholder text disappears and the user can type in the eld as usual.

Add a Placeholder

39

1/27/13

Form Example
The RADIO type is usually a group of items, of which only one can be selected. Thus, each item has the same NAME aeribute, but with dierent VALUE aeributes so that the server can be told which one has been chosen by the user.
<INPUT TYPE="RADIO" NAME="SET_1" VALUE="OPTION_1">Op)on 1<BR/> <INPUT TYPE="RADIO" NAME="SET_1" VALUE="OPTION_2">Op)on 2<BR/> <INPUT TYPE="RADIO" NAME="SET_1" VALUE="OPTION_3">Op)on 3<BR/>

Form Example

<FORM ACTION=TheFunc)onForAc)on" METHOD="POST"> Name: <INPUT TYPE="TEXT" NAME="NAME"><BR /> Address:<BR /> <TEXTAREA NAME="ADDRESS" ROWS="5" COLS="25"></TEXTAREA><BR /> <INPUT TYPE="SUBMIT" VALUE="Add Address"> </FORM>

40

1/27/13

Form Example cont.

Here<TEXTAREA> and </TEXTAREA>it allows the users to enter freeform text in a mulA-line control. The ROWS aeribute species the number of lines, and the COLS aeribute species the number of characters across each row. The HIDDEN type allows you to enter data into the form that the user cannot see without looking at the source of the page. Even then, it is usually designed for data which has no value, such as step informaAon in a wizard or is heavily encrypted or safeguarded to render it useless to anyone else but the site owner.

Some symbols are used for coding in HTML such as <, >, and . If you want these symbols to appear in the web page for the user to see, you need to use the &code instead.
&lt; < &quot; &reg; &gt; > &copy; &nbsp; space The complete list can be found on W3C Other symbols can be inserted using the &#code, see the character map in windows
StartProgramsAccessoriesSystem ToolsCharacter Map

Common Symbol Codes

41

1/27/13

Character map

HTML5 oers a new tags.

HTML5

To be free from other techs like Silverlight and ash.

d, the n <video> tag for embedding video clips into your pages and an <audio> tag for integraAng sound.
In the past, developers used the nonstandard <embed> tag and the generic <object> tag for adding mulAmedia.

HTML5 adds a number of new input elements for web forms. For example, you can create text elds that accept only e-mail addresses or web URLs.
Previously, developers have had to resort to using complicated, custom scripts to provide such features.

42

1/27/13

Drawing on Canvases
A new <canvas> tag enables you to dene a rectangular area on your page on which you can draw. You can use scripAng commands to create shapes, draw straight and curved lines, apply color gradients, and even add images or parts of images within the area In the past, designers needed to create such visual content in a separate image editor or drawing program and then embed the result as an image.

Allow you to reect the design you want on the content, but be able to change it on a whim without recoding everything from the ground up. Aeach specic informaAon pertaining to the rendering of HTML while remaining within XML and HTML guidelines. Very important when dealing with Content Management Systems (CMS). Done by creaAng named derivaAons then use these derivaAons as aeributes in tages Styles are created using the "text/css" language You can introduce styles in three places
Inline (at the same Ame as the tag, such as <h1 style="color: purple;">. . .) Internally, as part of the <head> of the document Externally, in style sheets

CSS and Styles

Two avors of style sheet

External style sheets are a good idea if you need to be able to swap between styles

CSS adds style to exisAng content XSL provides the possibility to transform the content into something dierent CSS and HTML, XHTML, or XML.

43

1/27/13

Tags and Styles

Each object (element) in the page has proper)es, and you refer to each one through the Document Model. Document Model can be seen as a tree, where the document is at the root, and each block element (<div>, <p>, heading, table, list, and so on) can be a branch, or leaf, on that tree. Each element has properAes Styles give access to all properAes

Tags and Styles

CSS documents are simple text les. Each tag in an HTML document can be altered with the applicaAon of a style
With CSS, you can specify that your heading be bright red, 36 pixels tall, and aligned to the right side of the page. For example, you can change the meaning of the bold tag to use a dierent color or some other text decoraAon. If you dene the bold tag as being green and bold, that will be applied each Ame you use the <b> tag.

The W3C actually denes a style sheet for XHTML 1.0, which gives the default style informaAon for the tags that are dened in that standard.

44

1/27/13

CSS Style sheets are made up of rules, and each

rule has two dis9nct parts: a selector and a declara9on.

The selector is h2 and {color: red} is the declara9on

Internal CSS

45

1/27/13

Create an External Style Sheet

Save into css le e.g. style.css Use the <link> tag

External CSS

46

1/27/13

Apply a Style Locally

You can separate a list of selectors by commas to apply the same set of styles to all of them:

CSS Applying style to mulAple tags or all HTML tags

h1, h2, h3 {color: red; font-size: 36px} The style rule above turns all three types of headings on your page red and sizes them to 36 pixels. WriAng style rules this way saves you Ame and makes your code more compact. * {padding: 0} The style rule above removes the padding from all the elements on your page. Adding the following to your style sheet applies padding to h3 headings while, due to the previous rule, all other elements sAll have no padding:
h3 {padding: 10px}

You can use the universal selector (*) to apply styles to every HTML tag in your document:

Note that you can override such a rule by wriAng addiAonal rules for specic tags.

47

1/27/13

Assign a Class
You can create a CSS class to apply a style rule to specic instances of HTML tags in a page. For example, if you want the introductory paragraphs formaeed dierently from all the other paragraphs, you can create a class specically for the introductory paragraphs. Ager you create the class and assign it using the_class_aeribute, the browser applies the formapng to all the aected paragraphs. You can set up a class in an internal or external style sheet.
Ex: h1.my_heading { color: "blue"; }
<h1 class="my_heading">H1 In Blue</h1>

48

1/27/13

Generic class
You can use a generic class to format more than one type of tag. For example, you might use a generic class to format both paragraphs and level 3 headings in a document. When dening a generic class, simply type a period followed by the class name and then your declaraAon. For example:
.myclass {color: blue}

Do not type an HTML tag before the period. The following HTML examples apply the class to dierent tags:
<p class=myclass><h3 class=myclass>

Assign mulAple classes to a tag

You can assign multiple classes to a tag to add more than one set of styles to that tag. You separate the class names with spaces. For example:
<p class=huge fancy>This is a standout sentence.</p>

The paragraph above would have the styles associated with both the huge class and the fancy class applied to it.

49

1/27/13

Apply a Style Using an ID

You can apply an id attribute to an HTML tag on your page to give it a unique identifier. You can then apply styles to that HTML tag using a special CSS selector for that tag. Using the id attribute to apply styles is an alternative to using the class attribute. You can set your ID rules in an internal or external style sheet.

50

1/27/13

Link to Media-specic Style Sheets

You can link to several style sheets in your HTML document and specify that different styles sheets be applied for different media using the media attribute. For example, one style sheet could be applied when the document is displayed on a computer screen, another style sheet could be applied when the document is printed, and yet another could be applied for viewing on a mobile phone or other handheld device.

51

1/27/13

The dierent media types available

all: For all devices projec)on: For projected presentaAons braille: For braille tacAle feedback devices screen: For color computer screens embossed: For paged braille printers speech: For speech synthesizers handheld: For handheld devices such as mobile phones Zy: For teletypes, terminals, and other media that use a xed-pitch character grid print: For printed pages and for documents viewed in print preview mode tv: For televisions Note that some advanced mobile phones such as the iPhone and Android phones as well as the iPad do not respect the handheld media type

Link to Style Sheets for iPads, iPhones, and Android Phones

The iPad, iPhone, and Android OS web browser ignore handheld links and instead behave more like browsers on traditional computers they load style sheets specific to the screen media type. However, you can create style sheets specific to browsers on these devices by checking the maximum width of the device screen. The current iPad screen has a width of 1024 pixels on its longer side. The current iPhone and Android phone screens have a width of 480 pixels on their longer sides.

52

1/27/13

53

1/27/13

TIPs
What should I keep in mind when optimizing a page for mobile devices such as the iPhone? Key things to consider are that you are designing for a smaller screen, navigation by touch, and slower download speeds. You should consider increasing the font size to make text more legible and links easier to tap; turning off the display of larger images to reduce the page download time; and disabling CSS float styles to convert multicolumn layouts into single-column layouts, which can be easier to view on smaller screens Is there a way to make a CSS rule specific to a media type? Yes. The steps above describe loading an entire external style sheet based on the media type. To limit a specific CSS rule to a media type, you can use the @media directive and surround the rule with an additional set of brackets: @media only screen and (max-device-width: 480px) { p.bigger {font-size: 16px;} }
The CSS code above sets the font size for paragraphs displayed on iPhones.

Dene Styles for Nested Tags

You can set up style rules for your page based on how tags are nested inside other tags. For example, you can specify that a style rule be applied to a heading tag, but only when that heading is nested inside a certain type of secAon tag. You create such a style rule by specifying a sequence of tags or tag classes in the selector. The nested order of tags on your page must match the sequence of the tags in the selector for the style to be applied. Dening style rules this way enables you to eciently apply styles to precise secAons of your page.

54

1/27/13

TIPs
What is the terminology to describe the nested relationship of tags on a page? We can use family-tree terminology. The outer tags are known as ancestors and the inner tags are known as descendants. In the example above, the <h2> tag must be a descendant of the <section> tag for the style to be applied. Tags directly next to each other in the hierarchy can be given more specific classification. The outer tag is a parent and the next tag immediately on the inside is a child. How do I specify a parent-child relationship in my CSS rule? You can specify that a style rule be applied only to the immediate descendant, or child, of a tag using a greater-than symbol (>) in the selector. The following applies a rule to a <p> tag that is directly inside of an <article> tag: article > p {font-size: 16px; color: green} This rule would apply to the following: <article><p>Hello, HTML5!</p></article> The rule would not apply to the following: <article><section><p>Hello, HTML5!</p></ section></article>

55

1/27/13

Derived Objects
With CSS you can change the ow, layout, posiAon, size, and even adjust the parameters so that the resulAng rendering of a tag looks like you want, but the behavior will remain the same, e.g. a <ul> will always behave as a list

SPAN and DIV

Provide bulk formapng for a secAon of text The <SPAN> tag is used in conjuncAon with inline content. In other words, it cannot break across paragraphs The <DIV> (division) tag denes block content one that can contain any other tag, including paragraphs and <SPAN> content.
Can be nested but do not do it.
Some Browsers may fail to render the content as you want.

56

1/27/13

The <div> and <span> Tags

The <div> is a block level element. In other words, in a Document Model tree it can be either a branch (containing sub-blocks) or a leaf (containing only text to be rendered) The <span> is an inline element. It doesn't have all the properAes of a block level element like <div> but can have specic background, font, and text decoraAon. The <div> and <span> tags can both be used to make classes.
It also does not separate itself from other blocks A block dened with the <div> tag can have specic borders, background, margins, text styles, and so on.

<div class="sidebar_menu"> <span class="sidebar_menu_item">Item One</span><br/> </div>

A style consists of three parts

Summary

The selector is created using the dot notaAon

The selectorThe object, or part of the HTML document The propertyThe aeribute (property) of the object The valueA valid value for that property tag.class { mulAple properAes; } or tag.class { property: value; property: value; } The class may not be required, so this is correct Can be hierarchical like applying style to the emphasis elements of the form tag
Form em{font-size:14pt} tag { mulAple properAes; }

Style data {property:value} are always contained within braces. Ex: To set the boarder of a div tag, one can use

div.odd_borders { border-top-style: solid; border-boeom-style: doeed; } The boarder has four sides which are border-top border-leg border-boeom border-right They can be set all together with the order of top right boeom leg
div.odd_borders { border-style: solid solid doeed solid; }

57

1/27/13

Summary cont.
Inline
<html> <head>Example Inline Styles</head> <body> <h1 style="text-decora)on: underline overline; font-weight: bolder;"> Heading 1 </h1> </body> </html> <head> <)tle>Example Style Placement</)tle> <style type="text/css"> <!-- style statements here --> </style> </head> <body> <!-- page content here --> </body>

Internally, as part of the <head> of the document

Externally, in style sheets

Layout
Denes the posiAon of block-level tag contents. Block-level tags place new lines before and ager the content they enclose. The <p>, <h1>, and <table> tags are examples of block-level tags. So are the new semanAc HTML5 tags such as <sec)on>, <ar)cle>, <header>, and <footer>.

58

1/27/13

PosiAoning Content
You can place using dierent posi5oning Rela9ve posi)oning places content on the page rela)ve to the normal ow of the other content on the page. Absolute posi)oning places content on absolute points on the page rela)ve to the containing block. Fixed posi)oning places content rela)ve to the browser window and keeps it xed as a user scrolls. The default is sta)c

Osepng Content
You can oset content on your web page from its normal posiAon using top, lep, right, and boZom style sheet proper)es. These are ignored when staAc posiAoning is used

59

1/27/13

Space outside the edge of the box is known as margin, whereas space inside the edge of the box is called padding. Style sheets enable you to control space on the top, leg, right, and boeom of the boxes independently.

Padding and Margins

The oat CSS property takes a box out of the normal ow of your page and moves it to the right or lep side of the enclosing box. Content that follows then wraps around the oated element.

FloaAng Content

60

1/27/13

Set Width and Height for an Element

You can specify values in points (pt), pixels (px), millimeters (mm), cenAmeters (cm), inches (in), picas (pc)*, x-height (ex)**, or em space (em)***.
*1pc=(1/6)inche **1 ex, is a relaAve measure of the font x character hight ***1 em, is a relaAve measure of the font M character width

61

1/27/13

RelaAve Size

The web browser displays the element with a width rela)ve to the size of the enclosing box.

What happens to text that extends outside a CSS box?

You can control how text outside a box is handled using the overow property.
Sevng the property to visible causes the text to be rendered outside the box. A hidden value hides the text outside the box. Both scroll and auto values display scroll bars for viewing the content, if needed.

You can assign the overow property to the <p>, <div>, and other block-level tags.

62

1/27/13

Place content relaAve to other content on the page. If you oset a rela)vely posi)oned element using the top, leg, right, or boeom property, the element is oset relaAve to the point where it would normally begin.

Use RelaAve PosiAoning

63

1/27/13

Use Absolute Posi)oning

To place an element at exact coordinates on a page, independent of elements that came before it. The coordinates are determined relaAve to the box that encloses it. Absolute posiAoning removes an object from the normal ow of page content. Its size and posiAon have no eect on the posiAon of content that follows it.

64

1/27/13

Use Fixed PosiAoning

You can apply xed posiAoning to place an element at exact coordinates on a page and have it remain xed while a viewer scrolls. Fixed posiAoning is supported only in newer web browsers. Some of the methods to keep navigaAon links visible as visitors view content on a long page.

65

1/27/13

66

1/27/13

Set Margins

67

1/27/13

Add Padding

68

1/27/13

Align Elements Horizontally

The oat property does not work with elements for which you have assigned an absolute or xed posiAon.

Content that comes ager the oated element in your HTML wraps around the other side.

69

1/27/13

By oaAng several smaller, rectangular elements to the same side, you can create a grid arrangement, which is useful for creaAng photo galleries.

70

1/27/13

Control the Overlap of Elements

You can use style sheets to overlap elements on your pages by posi)oning them at similar coordinates. You control the stack of them by adjusAng the z-index property for each element. An element with a higher z-index value appears above an element with a lower z-index value. z-index values can be posi)ve, nega)ve, or zero.

71

1/27/13

Transparency
Transparency done by changing object opacity. However, dierent browsers recognize dierent style sheet commands for changing opacity.

For Internet Explorer, you can type lter: alpha(opacity=?) in your style rule, replacing ? with a value from 0 to 100. For other popular browsers, you can type opacity: ? in your style rule, replacing ? with a fracAonal number from 0.0 to 1.0. You can put both properAes in a declaraAon to make the eect compaAble with as many web browsers as possible.

72

1/27/13

Borders
Borders can be set explicitly or as a group There are three basic parameters that each border can be set with
WidthThe width, in pixels, percentage, or relaAve measurement StyleFor example, solid, doeed, and so on ColorThe color You can group a border by edge
border-top: width style color; border-width: width; border-style: solid; border-color: red;

There are three ways that the parameters can be specied.

The parameters can be grouped for all edges

They can be set explicitly for a specic edge-property combina)on

border-top-width: 5px; border-boeom-style: doeed; border-right-color: blue; border-leg: 10px solid red;

Background

CSS Objects and ProperAes Short Reference

can be used with pracAcally any element, from divisions and table cells to the document body itself. Forms
background-color : red; background-color : #f00; background-color : #0000;

Ex:

It is also possible to specify a background image

div.warning_text { background-color: red; }

background-image: url("hep://www.server.com/myimage.jpg") The image will scroll with the rest of the content, but it can be xed to the viewport by specifying xed as a value for the background- aeachment property. For example: body { background-image: url("hep://www.server.com/ myimage.jpg"); background-aZachment : xed;}

73

1/27/13

The background-repeat property is used If the image is smaller than the alloeed space (canvas), it is to make it repeat to cover the available space. To set this behavior, there are four possible sepngs, from which one may be chosen:

Background cont.

To stretch an image use the CSS3 property, background- size

body { background: url(bgimage.jpg) no-repeat; background-size: 100%; } Or use width and height properAes of the image with xed posiAon to size it

background-repeat : repeat repeat-x repeat-y no-repeat If repeat is specied, the image is Aled throughout the background, starAng from the center of the background. If repeat-x or repeat-y is specied, the image is repeated in either the horizontal or verAcal axis, working from the inside out.

Any text block or span can have its text and font properAes set; this includes the div, p, table, and span elements. Text color:

Text and Fonts

The font, color, spacing, decoraAon (underlining, for example), line height, weight (bold, for example), and alignment (center, right, and so on) can all be specied using styles.
p.red_text { color: red; } p.red_text { color: #F00; } <!-- #RGB --> p.red_text { color: #0000; } <!-- #RRGGBB --> font-style: normal, italic, or oblique font-weight: normal, bold, bolder, lighter font-size: pt size or percentage
font-size: 14pt; font-size: 200%:

Font style:

Font weight: Font size:

Text decora)on: Text alignment: Text indent:

text-decoraAon: underline, overline, line-through, none This cannot combined with font compound property, see next slide text-align: leg, right, center, jusAfy text-indent: number or percentage text-transform: uppercase, capitalize, lowercase

Text transforma)on:

Capitalized opAon only transforms the rst leeer where uppercase transforms all the leeers of a word.

74

1/27/13

To make sure that all the lines are spaced with reference to the largest font used in the enAre paragraph, and not space each line according to the size of the text contained within, you must set the line-height property:
line-height: pt size, mulAplier or percentage
The mulAplier is a simple number, and, like the percentage, is calculated with reference to the font size of the element to which the style property is being set.
<div style="line-height: 1.2; font-size: 12pt;"> <div style="line-height: 120%; font-size: 12pt;"> <div style="line-height: 14pt; font-size: 12pt;">

Text and Fonts cont.

Font Family:

font-family: name, generic name; Generic names are

Using this form, you can idenAfy an exact font, with a generic alternaAve: font-family: Times New Roman, serif; SerifTimes New Roman, Garamond, and so on Sans-serifArial, Verdana, and so on CursiveScript, Corsiva, and so on FantasyAnything goes. . . MonospaceCourier New and so on

The font property can also be specied as a compound property statement:

font: style + variant + weight + size + line-height + family
div.arAcle:rst-line { font: normal small-caps bold 12pt 14pt Times New Roman, serif; }

SIZE
You can also set a size measurement in millimeters (mm), cenAmeters (cm), inches (in), points (pt), picas (pc), x-height (ex), or em space (em). You can also set an indent size as a percentage of the text block width, such as 20%.

75

1/27/13

76

1/27/13

Although numerous le types are used for computer images, JPEG, GIF, and PNG are the three most popular types used on the web. Another opAon for displaying graphical content on your pages in HTML5 is by using the new <canvas> tag. JPEG

Image File Formats

GIF

stands for Joint Photographic Experts Group, supports 24-bit color. JPEG is not a good choice for solid-color artwork because it results in a larger overall le size, which translates to longer download Ames. stands for Graphics Interchange Format, supports up to 256 colors. If your image or graphic contains few colors and not a lot of detail, such as logos. A single GIF le can also store mul)ple images and display them as an animaAon. Stands for Portable Network Graphics, oers rich color support and advanced compression schemes, so it is a good choice for a variety of image types. supports 24-bit color but can also be saved with fewer colors.

PNG

77

1/27/13

Images
To insert an image into a web page
<IMG SRC="image_name" WIDTH="width" HEIGHT="height" ALT="Image Text )tle=The image )tle> One can use Width and height to resize the image as needed The alternaAve aeribute ALT used to display text descripAon in case the image is not loaded. This also used by SEO. The )tle will be shown as pop up note when the mouse hovers over the image. Another aeribute is the BORDER aeribute.
Value 0 indicate no border.

Using Figures and capAons

78

1/27/13

Image map
Consider the problem of having a picture where each part of it reference something else.
E.g. the world map, the user click on a country to get the informaAon about it.

79

1/27/13

The USEMAP aeribute and the <MAP> tag

To turn the image into a client side imagemap, you need to specify the USEMAP aeribute and insert a reference to the <MAP> element that contains the specic informaAon relaAng to the areas of the image that can be clicked. The areas of the map can be rectangular, circular, or irregularly shaped.
Need to know the coordinates. Use MS Paint or any paint/photo ediAng program

Imagemap
Rectangle 13,16 83,90 (Top-Leg and Boeom-Right) Circle 58,147 32 (Center and Radius) Polygon 108,31 158,51 181,155 139,147 103,65

80

1/27/13

Imagemap example
<IMG SRC="imagemap.jpg" WIDTH="200" HEIGHT="200 USEMAP="#image_map"> <MAP NAME="image_map"> <AREA HREF="index.html" SHAPE="RECT" COORDS="13,16,83,90"> <AREA HREF="page2.html" SHAPE="CIRCLE" COORDS="58,147,32"> <AREA HREF="page3.html" SHAPE="POLY" COORDS="108,31,158,51,181,155,139,147,103,65,108,31"> </MAP> The # sign is used for internal reference, e.g. USEMAP=#image_map .

Add a Meter Image

The <meter> tag is new in HTML5. You set the range using the min and max attributes.

The low aeribute indicates the lowest realized value in the range. The high aeribute indicates the highest realized value in the range. The optimum aeribute indicates the range opAmum.

81

1/27/13

Display progress

$0 <progress value=850 max=1000>$850</progress> $1000

Pseudo-Elements
There are elements that have no corresponding tag in HTML.
They might be contained within a tag or just be outside the document model. They are, however, quite browser-dependent, and so I will cover only two of them here.
The rst line of a block (div, p, and so on)

The rst line might not be as long or short on all browsers It is possible to make sure (using specic font sizes in points and bounding boxes in pixels) that the text takes the same space on every plauorm, but ogen this is not desirable. div.arAcle:rst-line { text-transform: capitalize; } If you assume that the very rst leeer should be given extra importance, you can add the following: div.arAcle:rst-leeer { font-size: 14pt; }

The rst leZer of an inline or block element (span, block, p, and so on)

div { width: 150px; margin:10px;} div:rst-line { text-transform: uppercase; } div:rst-leeer { font-size: 200%; oat:leg;}

82

1/27/13

Lists
They can have various bullet types, borders, backgrounds, and layouts, as well as many varia)ons of counted lists, including special character sets and numbering schemes. list-style-posi)on indicates where the bullets (or numbers, leeers, and so on) should be placed in relaAon to the list item text and formapng box. It is specied as follows:
list-style-posiAon: inside, outside

<ul style="list-style-posi)on: inside;border: 1px solid black;"> <li>These bullets are</li> <li>inside the box</li> </ul> <ul style="list-style-posi)on: outside;border: 1px solid black;"> <li>These bullets are</li> <li>outside the box</li> </ul>

Lists cont.
list-style-type
<ol>
list-style-type: decimal, alpha, roman
The alpha and roman are used in conjuncAon with the word lower- or upper- prexes

<ul>
list-style-type: disc, circle, square

Using an image
list-style-image: url(hep://mydomain.com/image_le.png)

You can group these into a single compound statement

list-style: type + posiAon + image
<ul style="list-style: disc inside url (hZp://domain.com/image/ image_le.jpg;">

83

1/27/13

Generally speaking, when you include a client side script within the Web page (or as an external script), it is to perform one of the following funcAons:
Improve navigaAon
drop-down menus

Client Side ScripAng

Provide special eects

Provide contextual highlighAng Validate forms or data Provide dynamic content

inline calendars or image selecAon (from thumbnail examples), which layer CSS (styles, such as div elements) on top of regular HTML. includes oering topic expansion or inline help. as well as oaAng sign-up boxes or splash screens.

Communicate within pages (inter-page communicaAon)

the ability to switch between content without loading another page (that is, like a tab control), as well as retrieving and displaying informaAon from the server based on data that the user is entering (AJAX) Shopping cart or quesAonnaire (survey) plauorm for mulA-page quesAonnaires.

Intro.
Client side scripts are executed by the client (the browser) as if they are extensions to the HTML page that is being displayed
browser must have support for the scripts
Build-in scripts: JavaScript, HTML, XML Add-ins: Adobe Flash player, Microsog Silverlight, VRML, and so on.

Scripts can be included inline or externally loaded as separate les. The Web server can serve scripts in the same way that it can serve image les and external style sheets they are just another reference to be loaded as part of the page. Before execu)ng scripts, the browser generally tries to make sure that it has all the informa)on it needs.

84

1/27/13

Inline Scripts
Placed in the head secAon of the HTML document and will be accessible for all the HTML document.
<script> // Code lines go here... </script>

Inside the script tag you place funcAons and variables. Usually, the type of script should be menAoned in the script tag: <script type=text/JavaScript> scripts can be used as acAons in, for example, form controls.
This makes use of the events that are part of the HTML DOM and dened by the W3C.

This can also be placed inside the body tag as well.

External Scripts
Can be shared across mulAple Web pages. In addiAon, there is a certain amount of hiding of the script that takes place because it is on a server and not directly in the page.
However, scripts are never going to be safe unless you take addiAonal steps to protect them by using a tool that makes them unreadable.
The use of an interpreter or virtual machine such as in java applets. Or using on-the-y encrypAon algorithm would be beeer o encoded

85

1/27/13

JavaScript can access and change your elements on a page using DOM. DOM is hierarchal representaAon of HTML5 tags.

DOM or the Document Object Model

IntroducAon to JavaScript
Can be used: inline, external, mixed An inline script must be contained within a matching pair of <script> tags, either in the head or the body secAon
<script language="JavaScript1.1"> </script>
// Code lines go here...

The script tag may someAmes omieed when JS is used directly as event handler
<input type="submit" value="Submit" onClick="document.myForm.name.style = background- color:red"> <a href="javascript:history.go(-1)">Back</a>

86

1/27/13

External JavaScript documents

External JavaScript documents must have the extension .js and must be specied by the Web server as a type of document that it can serve. Congura)on sec)on is required so the correct MIME type is passed to the browser; without it, the browser might not know how to process the included le. To include an external script

<script src="my_func)ons.js" type=text/javascript"> The type aZribute is open omiZed, because it is assumed that the server will supply the correct MIME type to the browser. However, because this is not guaranteed, I prefer to give the browser all the informaAon that it might need in advance.

Example

87

1/27/13

It is necessary to do two things when using JavaScript A browser that does not process JavaScript (or the <script> tag) will not be able to do anything more than ignore the informaAon that it does not understand. So you just put those commands in HTML comments, thus:
<script language="JavaScript1.1"> <!- - Use HTML comments to hide the code // JavaScript commands go here... // ... this line ends the hiding here - -> </script>

The <noscript> Tag

Hide the script in HTML comments Provide alterna)ve rendering instruc)ons

The second approach is to display some other content that does not rely on scripts to be displayed by the browser.
<noscript> Your browser does not seem to support JavaScript!<br/> (Perhaps you need to enable it?) </noscript>

It is becoming less and less necessary to do either of these opAons but it is sAll a good pracAce

Remarks
JavaScript rarely fails noisily.
the only clue that you have that it is not correctly wrieen is that it fails to do anything. You need to use the repor)ng func)on of your browser.
In Internet Explorer, this is indicated by a liele error ag in the boeom leg of the status bar. Double click to access it. In Firefox, you need to access the error console via the menu.

88

1/27/13

JavaScript and events

Normally added to handle events Event handlers can be dened using HTML5 tag aeributes or within your JavaScript code.

You cant put quotes inside quotes.

Remarks cont.

When it is necessary, use a single quote inside the double quotes.

<input type="buZon" onClick="document.src = new_page.html;">

All statements must end with a semicolon (;). In JavaScript, comments are usually contained ager // and inside /* */. Names of things in JavaScript cannot start with numbers or other special characters (although they can start with underscores, _, if you so wish). JavaScript is also not type-sensi)ve.
JavaScript names cannot contain spaces JavaScript converts values by itself based on the target type or chooses the most appropriate type for a literal provided by the programmer.

89

1/27/13

Example (screen dimensions)

Link to external JS le

90

1/27/13

Link to external JS cont.

Current date and Ame

91

1/27/13

Alert Message Box

Pop-up window

92

1/27/13

Create an Image Rollover Eect

When the user posiAons the mouse pointer over the image on the web page, the image is replaced with a dierent one. When the user moves the mouse pointer o the image, the original image returns. Example: Images displayed in black and white, when mouse is over an image it is colored

93

1/27/13

One Problem exist that is the change of images is not immediate (it takes a while in the rst )ll browser load the other images)

94

1/27/13

How can I make my rollover eects more immediate?

You can instruct the browser to preload the rollover image using JavaScript. That way, the browser does not have to download the rollover image when the mouse pointer rolls over the original image. You can preload an image by adding the following script inside the <head> tag of your HTML: <script type=text/javascript>?=new Image(h,w); ?.src=imagepath</script>
Replace ? with an idenAer for the image, Replace h,w with height and width values for the image, and Replace imagepath with the path to the image.

Show a Hidden Element

You can hide the element by sepng its CSS display property to none. With JavaScript, you can change that property to block or inline, which exposes the element on the page. The visibility property is similar to the display property. You can set visibility to hidden to hide content on your page. However, that content, though invisible, s)ll takes up space on the page. When the display property is set to none, the aected content does not take up space on the page.

95

1/27/13

Change Page Content

96

1/27/13

Variables and Types

In JavaScript, there are only four data types that you really need to be concerned with:
null, undenednothing, empty, and undened (these are not the same) NumbersIntegers or oaAng point numbers Boolean valuestrue or false Character strings"a" or "a string

97

1/27/13

A variable is dened either implicitly or explicitly

Implicitly
JavaScript engine will try to determine the data types from the values that it is passed
Both of the following are string types myString = "a string"; myString = "a string equals " + 42; Both of the following are number types myString = 42 + 42;

Variable Types cont.

A variable is usually assigned the data type of the rst piece of data to be stored in it. Do not try to mix literals or variables, it is beeer to ensure that your code does not assume anything.

Explicitly with the var keyword

var myString = ""; // an empty string

Arrays
An array can contain any data type that can be dened in JavaScript,
including the objects that make up an HTML page.

They can also be mixed, meaning that dierent types of data can be stored next to each other in the array.
But you have to remember which array element holds which data type!!

98

1/27/13

Arrays cont.
An array can be declared by
Either lling it with values or Reserving a certain number of items in advance.

Example
var myArray=new Array(10); An array is indexed zero-based.
myArray[0] = "banana"; // This is the rst element

Array can be declared and iniAalized at the same Ame

var myFruits = new Array ( "apple", "orange", "banana" );

MulAdimensional arrays are also possible

var myTable[10][10]; // 10 x 10 array myTable[0][1] = 3; myTable[1][1] = "three"; // [0][1] sAll contains 3

Operators
Operators can be categorized depending on their funcAon
AssignmentAssigns a value to a variable
x = "42"; // Put a string literal in x x /= 2; // x = x / 2 (division) x -= 7; // x = x - 7

ComparisonCompares one or more values

== , != , >, >=, <, <=

MathemaAcalPerforms simple mathemaAcal operaAons

+, , /, and *.

99

1/27/13

Operators cont.
LogicalFor use with Boolean (true and false) values
&&, ||, and !
!(x = = y) || !(a = = b);

StringSpecically for use with strings

+
"a " + "b"; // returns "a b

The new and delete operators

var myAddress = new String ("some text"); var myArrayOfNumbers = new Array ( 1, 2, 3, 4, 5); delete (myAddress); delete myArrayOfNumbers[0]; // empty array element 0 (the rst one) and set its value to undened.

Operators cont.
The condiAonal operator, ?
condiAon ? if_true : if_false
(y == 3) ? x = 0 : x = 1;

The this operator is special in that it returns the object that is currently being referenced. This will usually be in the context of an event handler coupled with an HTML object.
<form ac)on="submit.php" onClick="validate_form(this);" method="post">

The operator void is used when something must be evaluated, but no value is returned or processed

100

1/27/13

FuncAons are stored either

FuncAons

In the head of the HTML document In a separate .js le

The reason for this is to be sure that all the funcAons are available when the HTML document objects are instanAated (loaded and rendered) by the browser. There is a set of useful built-in funcAons, but the vast majority of work in JavaScript is done via the methods associated with built-in objects and not standalone funcAons. FuncAons can be called from anywhere in the HTML document by using the script tag or by assigning them to event handlers.

All the parameters are passed by value

Calling FuncAons

When an object is passed (such as an array), it is passed by reference

myFuncAon ( myString, myNumber ); // myString and myNumber passed by value

Built-In Func)ons:

Conversion funcAons Number and String (convert string to number and number to string respecAvely) The eval funcAon allows you to evaluate a string as if it were a piece of JavaScript code.
myDate = new Date (); // make a new date object, set to Today myDateString = String (myDate); // convert to a string

The escape and unescape funcAons allow you to encode a URL by escaping the special characters.
mySearchString = escape("rst second third");
// mySearchString contains "rst%20second%20third

myNumber = (3>1)?(1 + 3):(3-1); // myNumber contains "(3>1)?(1 + 3):(3-1)" myNumber = eval ( myNumber ); // myNumber now contains 4

101

1/27/13

User-Dened FuncAons
A funcAon (name and parameters) should not be iden)cal to another func)on. To dene a funcAon
func)on myFunc)on ( myParameter1, myParameter2 ) {

// My code statements } A funcAon can also return a value, which can be used for ongoing processing. An example of a funcAon that returns a value is as follows:

As long as the funcAon has been dened before it is called, it can be called from inside another funcAon. A funcAon can also be dened as recursive; in other words, it can call itself.
func)on my_fact ( n ) { if (n <= 1) return 1; // is n less than or equal to 1? else return (n * my_fact(n-1) ); // if not call itself }

funcAon myFuncAon ( myParameter1, myParameter2 ) { // My code statements return myReturnValue; } The type of myReturnValue can be anything that JavaScript supports, even objects.

It is perfectly possible to dene a funcAon that does not have exactly one named parameter for each piece of informaAon that it needs to process. Instead it has only one named parameter, and the rest are implied and can be accessed from the funcAon code implicitly. Parameters that are passed and not named can be accessed through the arguments property of the funcAon.
func)on myFunc)on ( parameter_0 ) { return parameter_0 + this.arguments[1]; } This example assumes that the funcAon will be passed more than one argument, otherwise arguments[1] will be undened. for ( var arg = 0; arg < this.arguments.length; arg++ ) { // process this.arguments[arg] here }

Using Variable Arguments

You can obtain the number of arguments by using the length property of the arguments collecAon

102

1/27/13

Strings and String Processing

Two types of string
Literals
var myString_1 = "My String"; var myString_2 = new String ("My String");

Objects

you use typeof to determine what kind of type these are In reality, because JavaScript converts between a value and an object, there is no dierence between the two when it comes to pracAcal maeers of their applicaAon.
typeof myString_1; // returns string typeof myString_2; // returns object

Example
<script type=text/javascript> var outText = new String("Bold"); document.write(outText.bold()); var evalString = "outText.italics()"; evalString = "document.write(" + evalString + ");"; eval (evalString); </script> .

103

1/27/13

CondiAonal Processing
if .. else
} else { if ( a = = "my string " + myNumberAsString ) {
// do this if a is true // do this if a is false

switch

switch ( colorNumber ) { // the condiAon can be any testable data type case 0 : colorString = "#0000"; break; case 1 : colorString = "#0000"; break; default: colorString = "#"; }

The for loop

Loops

The do . . . while loop

for ( var counter = 0; counter < total_iteraAons; counter++ ) { // statements to execute } var counter = 0; do { // statements to execute counter++; } while ( counter < total_iteraAons ); var counter = 0; while ( counter < total_iteraAons ){ // statements to execute counter++; }

The while loop

104

1/27/13

The break and conAnue Keywords

var counter = 0; while ( counter < total_iteraAons ){ // statements to execute counter++; if ( counter * 2 > target_value ) break; // leave the loop } / ************************************************ */ for ( var counter = 0; counter < total_iteraAons; counter++ ) { if ( counter % 2 = = 0 ) conAnue; // Only execute the following on odd iteraAons // statements to execute }

The JavaScript Web FuncAon Library

JavaScript has interfaces to HTML objects and a collecAon of funcAons that are useful in Web programming based around the document container mode. These are ogen mirrors of the objects contained within the DOM.

105

1/27/13

Each event that can be aeached with any HTML object (usually the body, img, a, and form tags) has the general form: The code can be anything from a call to a funcAon (recommended) to a single line of JavaScript.
<script> func)on event_handler() {
// func)on code here

Events

<tag onEvent="code">

} </script> <body onKeyPress="event_handler();"> In this example there are no access to event proper)es, to have such access: <body> <script> func)on event_handler(e) { // func)on has access to event proper)es } document.onKeyPress = event_handler(event); </script> </body>

onAbort This event occurs when the user interrupts the loading of a page. The OnAbort event should only be trapped once for the HTML document as a whole. For example it is used with img tags.
<img src=myimage.gif onAbort="if (!conrm(Stop loading document?)) { history.go(0); }"> This snippet will ask if the users want to stop loading the document. If they click No on the conrm dialog box that appears, the document will be reloaded.

Events cont.

onBlur This event occurs when an element in a page or when the window containing a page loses focusthat is, the user moves away from it by using the Tab bueon. It only applies to interacAve form elements and the window object.

106

1/27/13

onChange This event occurs when the content of an interacAve form element changes. This only applies to those elements that have selectable or user entered values.

Events cont.

onClick This event occurs when an object on a document is clickedthat is, a form bueon (including checkboxes and radio bueons) or a link. Because a click is a combinaAon of a mouseDown and mouseUp event, clicks can be trapped separately with their own handlers. An example of handling the onClick event might be:
<a onClick="this.myForm.submit();"> <img src="submit.gif" alt="Submit"></a>

For example, the Google Suggest service traps this event in order to populate the list of suggested search terms. This is used as follows: <input type="text" name="keywords" onChange="updateKeyList(this.value);">

Events cont.
onDblClick This event is the same as the onClick event, except that it is triggered when the user double-clicks a control. onFocus This event is the opposite of onBlur, that is, it is triggered when the focus moves to a control on a from. onKeyDown, onKeyPress, and onKeyUp These three events are triggered in response to key presses, usually trapped by a document object. However, they are also listed for event handlers for links, images, and text area input controls. They use a number of so-called event properAes.

107

1/27/13

onLoad and onUnload

Events cont.

The onLoad event is triggered when a document has nished loading. It is usually handled in the body tag, thus: <body onLoad="my_funcAon();>
Ex: When page is loaded into frame.
<body onLoad="my_funcAon(); onUnload="my_cleanup_funcAon();">

onMouseDown and onMouseUp

The combinaAon of these two events causes an onMouseClick event to be triggered. The onMouseUp event can be trapped as well as the onMouseClick event for a given object. Handling these events is useful in allowing drag-and- drop style posiAoning of elements on a page.

Events cont.
onMouseMove
This event is triggered when the mouse is moved over a browser window.

onMouseOut and onMouseOver

The onMouseOut event is triggered when the mouse is moved o an image area (that is, a client side imagemap) or link, and an onMouseOver event is triggered when the mouse rst enters the area or hovers over a link.
<img src="out.bmp onMouseOver="this.src=in.bmp; onMouseOut="this.src=out.bmp;">

108

1/27/13

<html> <head> <script type="text/javascript"> funcAon bigImg(x) { x.style.height="64"; x.style.width="64"; } funcAon normalImg(x) { x.style.height="32"; x.style.width="32"; } </script> </head> <body> <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32" /> <p>The funcAon bigImg() is triggered when the user moves the mouse pointer over the image. This funcAon enlarges the image.</p> <p>The funcAon normalImg() is triggered when the mouse pointer is moved out of the image. That funcAon changes the height and width of the image back to normal.</p> </body> </html>

Example

Events cont.
onReset and onSubmit The onReset event is triggered when the user clicks the Reset bueon of a form, and the onSubmit event is triggered when the user clicks the Submit bueon. These events are handled in the form tag:

onSelect This event is triggered when the content of a text eld is selected. This is useful in providing dynamic forms and support to users when they ll them out.
For example, a funcAon could be wrieen to populate a container of city names, so the users can choose their city from the list.

<form method="post onSubmit="validate_form(); onReset="reset_form();">

109

1/27/13

Example
<html> <head> <script type="text/javascript"> funcAon showMsg() { alert("You have selected some of the text!"); } </script> </head> <body> Select text: <input type="text" value="Hello world!" onselect="showMsg()" /> </body> </html>

Event object cont.

110

1/27/13

Event properAes cont.

Event Object Property Descrip)on SrcElement The element that red the event type Type of event returnValue Determines whether the event is cancelled clientX clientY osetX osetY bueon altKey ctrlKey shigKey keyCode Mouse pointer X coordinate relaAve to window Mouse pointer Y coordinate relaAve to window Mouse pointer X coordinate relaAve to element that red the event Mouse pointer Y coordinate relaAve to element that red the event Any mouse bueons that are pressed True if the alt key was also pressed True if the ctrl key was also pressed True if the shig key was also pressed Returns UniCode value of key pressed

The cancelable property:

Event properAes

Returns whether or not an event can have its default acAon prevented

The currentTarget property

Returns the element whose event listeners triggered the event

The AmeStamp property

Returns the Ame (in milliseconds relaAve to the epoch) at which the event was created

111

1/27/13

Example

Example

112

1/27/13

Example

The document Object

The document Object
Has some handy methods
document.open(); document.write(HTML to write) document.close();

<script>document.close(); document.open(); document.write();</script>

The document object has the following arrays:

The .open and .close methods are superuous for cross- plauorm browser development because not all browsers react in the same way. In most cases calls to these methods are addiAve. formsAn array of all the forms imagesAn array of all the images linksAn array of all the link locaAons in the document

113

1/27/13

In addiAon, it contains the following useful properAes:

domainThe domain hosAng the document cookieAny cookies associated with it width and heightThe width and height, in pixels AtleThe Atle, as displayed in the Atle bar URLThe full URL of the document

The document object cont.

The arrays are zero-based like all arrays. In addiAon it is possible to idenAfy forms by their name,

Generally, the properAes should only be read and not modied

Others can be modied:
<input type="buZon" value="Change Image onClick="document.buZons[0].src=new.gif;">

provided that forms have been dened with a name="myForm aeribute document.forms["MyForm"]

Most objects in the document model also have a visible property.

Can be used for making controls in a form available (or not) depending on the opAons already chosen.
Ex: make an enAre <div> appear and disappear, like a message or pop-up box.

The window Object

Has many properAes and is the top-level object in hierarchy. There may be many windows at the same level
frames inside a frameset.

The frames array property gives access to any frame that might be contained within the window.
The length property indicates the number of frames for and the parent property to traverse to parent.

The loca)on property contains the address (URL) of the currently loaded document in the window (or frame). The status property contains a value that is displayed in the status bar (usually at the boeom of the screen) and this can be updated to change the message being displayed.

114

1/27/13

The window Object cont.

The back and forward methods load the previous and next URLs in the history list associated with the window. The close method can be used to close the window. The home method loads the URL that is specied in the users preferences.
<input type="buZon" value="Back" onClick="window.back();"> <input type="buZon" value="Home" onClick="window.home();"> <input type="buZon" value="Fwd" onClick="window.forward();">

The print method opens the standard operaAng systems Print dialog box and prints the window contents. The stop method halts the current download, which is useful if something might take a long Ame to complete and you would like to allow the users to stop the process.

Using the String object, it is possible to convert a string literal to a piece of HTML code. Usually used with the document.write method to generate the inline HTML.
however, the actual HTML is not visible when the user selects View Source, only the JavaScript that has generated the HTML will be
var myString = "anchor text"; document.write(myString.anchor("anchor_name")); <a name="anchor_name">anchor text</a> var myString = "url text"; document.write(myString.link("url")); <a href="url">url text</a>

ProgrammaAc HTML GeneraAon

Ex:

This example is the equivalent of the following HTML code: By the same token, the link method is used as follows: This is rendered by the browser as if the HTML had been:

115

1/27/13

ProgrammaAc HTML GeneraAon

There are also three methods used to create text of dierent font sizes:
bigMakes text that is bigger than normal smallMakes text that is smaller than normal fontsize ( n )Makes text of a specic font size Ex:
document.write("Big Text".big()); document.write("Small Text".small()); document.write("Really Big Text.fontsize(72));

Of course, string variables could have been used in these examples instead of literals. Also there are some methods used to create fonts of dierent properAes:

xedChooses a xed font (like Courier) fontcolor ( color )Species the color of the font, where color is either #rrggbb or color name, following the Web standards

Useful Top-Level Methods and ProperAes

Aeached to top-level objects (such as the window object) Message Boxes
These methods can be called without the window reference, as it is assumed. JavaScript oers three possibiliAesalert, conrm, and prompt.

The alert method displays a box alerAng the user, with a custom string and a single OK bueon. For example:
alert("Alert! You pressed the alert bueon...");

116

1/27/13

Useful Top-Level Methods and ProperAes

The conrm method displays a conrmaAon box from which the users can select OK or Cancel. If they click OK, conrm returns true; otherwise, it returns false. For example:
theResult = conrm("Do you really want to do this?");

The prompt method displays a box in which the users can type some text. If they then click OK, the text is returned; otherwise, null is returned. For example:
theResult = prompt("Please enter some text...");

If more complex interacAon is required, you can use the window.open method to open a new window containing a form from which informaAon can be obtained. Or, a custom div can be displayed containing the relevant HTML.

117

1/27/13

JavaScript provides the possibility to execute a funcAon ager a certain length of Ame has elapsed in one of two ways:
Once every x milliseconds (interval)
acAvated by using the setInterval method and stopped using the clearInterval method. AcAvated by using the setTimeout method and Stopped using the clearTimeout method.

Interval Processing

Ager x milliseconds and never again (Ameout)

The setInterval method can be used in one of two ways: with an expression or with a funcAon plus an argument list.
For example, the following two usages are idenAcal:
var AmerID=setInterval("my_funcAon ( 1, 2, 3, 4 );", 25) var AmerID=setInterval(my_funcAon, 25, 1, 2, 3, 4) clearInterval ( AmerID );

To cancel the interval Amer, use the clearInterval method with the Amer idenAer:

setTimeout and clearTimeout arguments are the same as the setInterval and clearInterval

Accessing Cookies
Cookies are small pieces of informaAon that are stored as name, value, expiraAon tuples. The expiraAon date is opAonal The exact format of the cookie data is up to the programmer to dene. JavaScript provides access to the cookies through the document.cookie property. cookies need to be encoded (using the escape and unescape funcAons) to render unsupported characters (such as spaces) as data using their hexadecimal equivalents.

118

1/27/13

For example, a space is replaced by %20 with the call to

Cookies example

So, to set a cookie, it is necessary to build a cookie string (document.cookie) with three parts
the name (not encoded), the value (encoded), and the expiry date (not encoded and also op)onal).

This is then replaced by a space value when given to the unescape funcAon.

The cookie string can then be set in the document properAes, but is stored by the browser. The complete soluAon is as follows:
document.cookie = name + = + escape(value) + ; expires=" + expiry_date; + ";" To get the expiry date, you simply convert the Date object value to a GMT string using the .toGMTString() of the Date object. For

example:

If expiry date not required, the cookie becomes a pair with just the name and encoded value.

now = new Date(); expiry_date = now.toGMTString();

Cookies Example
funcAon createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); //days converted to milliseconds var expires = "; expires="+date.toGMTString(); } else var expires = ;; document.cookie = name+"="+escape(value)+expires; } funcAon readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length,c.length)); } return null; } funcAon eraseCookie(name) { createCookie(name,"",-1); }

119

1/27/13

Query Strings
Some URLs that are the result of a form submission contain data that has been submieed and that might be useful to extract from the URL The locaAon.search property accesses the porAon of the URL ager the ? (quesAon mark), which is known as the query string. The value returned includes the ?, so the rst operaAon is to discard it. Using the indexOf method of the string object, it is possible to extract the values for use in the JavaScript code. This could also be true of a form that is passed back to the same document for processing, but the query string is likely to be more complex. For example, consider the following HTML code:
<form> <input type="text" value="" name="texield"> <input type="Submit" value="Submit!"> </form>

This submits the form back to the source page with the URL. If you had entered Banana in the text eld, the URL would look something like this:
le:///test.html?texuield=Banana

Query string example

func)on querySt(Key) { if(window.loca)on.search.length==0) return null; QSwithoutQuesAon = window.locaAon.search.substring(1); QSArray = QSwithoutQuesAon.split("&"); for (i=0;i<QSArray.length;i++) { NameValue = QSArray[i].split("="); if (NameValue[0] == Key) { return NameValue[1]; } } }

120

1/27/13

Core JavaScript Objects

String

121

1/27/13

String example
string.charAt ( n ) string.slice ( start, end ) string.substr ( start, length ) string.split ( separator, limit ) var queryString = window.locaAon.search.substr ( 1 );
// everything except the ? // split by the & character

var queryArray = queryString.split ( "&" ); string.concat( string_1, string_2, ... string_n ) var rstThat = myString1.indexOf ( "g1" ); // returns 5 var lastThat = myStringN.lastIndexOf ("2" ); // returns 7 var myString2 = myStringN.replace("123", "1234"); string.toUpperCase() string.toLowerCase()
var myString1 = "String1"; var myStringN = myString1.concat("2", "3");

122

1/27/13

123

1/27/13

Array Examples
var myNumbers = new Array ( 42, 84, 12 ); var myStrings = new Array ( "forty-two", "eighty-four", "twelve" ); var myNewArray = myNumbers.concat(myStrings); //[ 42, 84, 12, "forty-two", "eighty-four", "twelve" ] var myString = myNewArray.join(", "); // default separator is comma
turns an array into a string, separated with a user-dened or default separator. //"42, 84, 12, forty-two, eighty-four, twelve // newArray contains [ 42, 84, 12, "forty-two" ] In this deniAon, startAt gives the index at which to begin the splice. Similarly, toRemove gives the number of elements that should be removed var newArray = new Array ( ); newArray.splice ( 0, 0, "1", "two", 3 ); //[ "1", "two", 3 ] newArray.splice ( 1, 2, "twelve", "four" ); //[ "1", "twelve", "four" ]

var newArray = myNewArray.slice ( 0, 3 );

array.splice ( startAt, toRemove, toAdd1, toAdd2, ... toAddN )

Array Examples cont.

The sort method allows the programmer to provide a compare funcAon. This enables the default alphabeAcal sorAng behavior of JavaScript to be overridden. If provided, the compare funcAon must take two parameters and return one of the following values:
-1 If the rst parameter is less than the second 0 If the two parameters are equal 1 If the rst parameter is greater than the second

funcAon compare ( a, b ) { if (a < b) { return -1; } if (a > b) { return 1; } return 0; } var myArray = new Array ( 1, 5, -3 ); myArray.sort ( compare );

124

1/27/13

125

1/27/13

JS Example (Custom message box)

Can be done by opening a new window, containing some HTML that denes the message that you would like to display. However, this has problems, such as pop-ups being blocked by the browser, the page opening in a new browser window or Tab, and so on. The soluAon is to make a piece of HTML that can be layered on top of the content and hidden or shown at will.

Custom MB
<div id="msgBox style=" width:250px;height:150px;visibility:hidden;leg:150;top:150;"> <table style="background-color:#000080; width=100% height=100% cellpadding=5> <tr height=15px> <td style="color:#;"> <b>Message Box Title</b> </td> </tr> <tr> <td style="background-color:#; align="center" valign="center"> <b>Message Box Text</b><br/> <table> <tr> <td> <input type="bueon" value=" OK onClick="close_dialog(OK);"> </td> <td>&nbsp;</td> <td> <input type="bueon" value="Cancel onClick="close_dialog(Cancel);"> </td> </tr> </table> </td> </tr> </table> </div>

126

1/27/13

Custom MB cont.
The whole dialog box is contained inside a div tag, which is set to visibility:hidden so that it cannot be seen iniAally. The close_dialog funcAon, triggered by the onClick events of the two bueons, is just there to set the visibility back to hidden. It looks like this:
funcAon close_dialog ( ) { document.getElementById("msgBox).style.visibility = "hidden"; } funcAon open_dialog ( ) { document.getElementById("msgBox).style.visibility = "visible"; }

The open_dialog funcAon is just there to set the visibility to visible: To test the code, you need to place a bueon, with appropriate JavaScript code, to make the div visible.
<input type="bueon" onClick="return open_dialog(); value="Show Dialog">

to add an overlay that blanks out the original page when the pop-up message box is shown. The overlay is dened as follows:
<div id="overlay style=z-index:100; posiAon: absolute; width:100%; height:100%; leg:0; top:0; visibility: hidden; background-color: silver; lter: alpha(opacity=50); opacity: 0.5"></div>

127

1/27/13

Display a CalculaAon
You can use the new HTML5 <output> tag to display the result of a calculaAon on your page. The tag works with one or more form <input> tags that accept numeric values from the user. The <output> tag enables you to perform mathemaAcal calculaAons for your users and easily display the results on the page.

128

1/27/13

Drag and Drop Example

Register an Event listener
addEventListener(), takes three arguments
The name of the event The funcAon that would handle the event If the event is bubble ( how it is propagate (top down or boeom up (the default used in all browsers) so put it always false))

Event names are:

Source
dragstart drag dragend

DesAnaAon

dragenter dragleave dragover *****aects the drop event drop

129

1/27/13

The <canvas> tag enables you to dene a blank drawing area on your web page. You can then draw shapes, lines, and text, insert images, create gradients, and do other interesAng things using JavaScript. The tag accepts width and height aeributes that dene the size of the canvas. You also need to add an id aeribute so your scripts can draw on the canvas. Next step in all canvas tasks is sepng up the drawing context. This prepares your JavaScript code to access all the instrucAons it needs for adding shapes, lines, and other elements to your canvas. Then you need to choose a color and an outline width for drawing.
Done using getContext method

Canvas

130

1/27/13

To successfully draw on your canvas using JavaScript, your HTML5 canvas has to be loaded prior to your script code running. You can do this by placing your script ager your canvas on your page, or place it in a JavaScript funcAon which you can then call using the onload aeribute in the <body> tag.

Should the script be placed ager canvas?

Draw Rectangles

131

1/27/13

Draw Circles
For creaAng a circle,
you dene a center coordinate a radius you also dene how far along the circumference of the circle to draw.

Use arc(number, number, number ,start_angle,end_angle, boolean);

You dene this value in radians, and to draw a complete circle this value is two Ames the value of pi.

The rst two numbers dene the coordinates of the circle center and The third number denes the radius of the circle in pixels. To draw a circle set the starAng angle to 0 and the ending angle to Math.PI*2. A true value draws the circle in a clockwise direcAon, and false draws it in a counterclockwise direcAon.

132

1/27/13

133

1/27/13

Draw Lines
You create a line by specifying the coordinate at which to start the line using the moveTo method. Then you specify an ending point with the lineTo method. Calling the stroke method draws the line.

134

1/27/13

Add Text
You can set a font family and size using the font method in your script. You can create lled text using the llText method or outlined text using the strokeText method. To add extra styling to your text you can rotate it. For details, see ?Rotate Canvas Content.?

135

1/27/13

Draw Filled Text

Draw Outlined Text

136

1/27/13

The image must rst be loaded into the browser. Script execuAon is delayed unAl ager page loading using the onload property.

Add an Image

137

1/27/13

Scaling
The drawImage method accepts two addiAonal values:
The rst value denes the width of the resulAng image, and the second denes the height. ctx.drawImage(pict, 10, 10, pict.width*0.5, pict.height*0.5);

138

1/27/13

It enables you to place the part of the image that interests you, or place several parts of the same image by repeaAng the slicing.
The rst pair denes the starAng coordinates of the rectangular slice in the original image. The second pair denes the width and height of the slice. The third pair denes the coordinates where the slice is placed on the canvas.

Slice an Image

The fourth pair denes the dimensions of the slice on the canvas. For no scaling, the second and fourth pairs of values are idenAcal.

Server Side ScripAng

139

1/27/13

PHP

Intro to PHP
These PHP scripts are wrieen in plain text, making them easy to edit and upload to the server. Although they can be compiled this is not common for user-created scripts. Like JavaScript, PHP can be contained inline within an HTML document, or it can be referenced from an HTML document, usually through embedded PHP code. HTML and PHP can be freely mixed so long as the convenAons are followed. The dierence is that all pages that contain PHP code should have the extension .php, so that the system can send them to the php interpreter.
In addiAon, someAmes they need to have their permissions changed so that they are classied as executable.

140

1/27/13

What if host does not support PhP

One of the three would happen
The PHP code might be idenAed by the server as text and returned to the browser as a page of text, thereby exposing the PHP code. The server returns an error page, as it is not sure what to do with the PHP le, having only been set up to serve HTML, images, and some other forms of les. The server treats the PHP code as a proprietary object, and the browser starts to download it by asking the user to specify the locaAon for the .php le.

None of these is desirable, need to make conguraAons

Inline PHP
Can be wrieen in many dierent styles The correct way to break out of HTML and introduce some PHP is as follows:
<body> <b>This is HTML.</b> <?php // PHP code here ?> <b>This is also HTML.</b> </body>

Ex:

<?php echo "<b>Bold Text</b>"; ?>

141

1/27/13

External PHP
The easiest way to reference an external PHP le is through the include funcAon, and is usually inserted in a block of PHP code. For example: <?php include my_module.php; ?>

Other styles
Short style
<? echo <p>Order processed.</p>; ?> This tag style is the simplest and follows the style of a Standard Generalized Markup Language (SGML) processing instrucAon. To use this type of tagwhich is the shortest to typeyou either need to enable the short_open_tag sepng in your cong le or compile PHP with short tags enabled. The use of this style is not recommended because it will not work in many environments as it is no longer enabled by default. <script language=php> echo <p>Order processed.</p>; </script> This tag style is the longest and will be familiar if youve used JavaScript or VBScript. You might use it if youre using an HTML editor that gives you problems with the other tag styles. <% echo <p>Order processed.</p>; %> This tag style is the same as used in AcAve Server Pages (ASP) or ASP.NET. You can use it if you have enabled the asp_tags conguraAon sepng. You probably have no reason to use this style of tag unless you are using an editor that is geared toward ASP or ASP.NET. Note that, by default, this tag style is disabled.

SCRIPT style

ASP style

142

1/27/13

Notes on PHP
Whitespace are ignored by php unless it is enforced by direcAves such as \n. Comments are the same as in C/C++, in addiAon
It supports shell one line comment style using #

<form acAon="processorder.php" method="post"> <table border="0"> <tr bgcolor="cccccc"> <td width="150">Item</td> <td width="15">QuanAty</td> </tr> <tr> <td>Keyboards</td> <td align="center"><input type="text" name="KBqty" size="3" maxlength="3"/></td> </tr> <tr> <td>CDs</td> <td align="center"><input type="text" name="CDqty" size="3" maxlength="3"/></td> </tr> <tr> <td>LCDs</td> <td align="center"><input type="text" name="LCDqty" size="3" maxlength="3" /></td> </tr> <tr> <td align="center"><input type="submit" value="Submit Order"/></td> </tr> </table> </form>

Example (form processing)

143

1/27/13

Process order (example cont.)

processorder.php
<html> <head> <meta hep-equiv="Content-Type" content="text/html; "> <Atle>Insert Atle here</Atle> </head> <body> <?php echo "your order has been processed"; ?> </body> </html>

Adding Dynamic Content

The main reason for using a server-side scripAng language is to be able to provide dynamic content to a sites users, UpdaAng processorder.php
<?php echo "<p>Order processed at "; echo date('H:i, jS F Y'); echo "</p>"; ?>

This can be also writen as one line using the . operator

<?php echo "<p>Order processed at ".date('H:i, jS F Y')."</p>"; ?>

144

1/27/13

Using the date() FuncAon

Expect a formapng string
RepresenAng the style of output you would like. H is the hour in a 24-hour format with leading zeros where required, i is the minutes with a leading zero where required, j is the day of the month without a leading zero, S represents the ordinal sux (in this case th), and F is the full name of the month.

It will be revisited later

PHP page processing

Whenever PHP processes a page, it checks for URL and form variables, uploaded les, applicable cookies, and web server and environment variables. These are then directly accessible in the following arrays: $_GET, $_POST, $_FILES, $_COOKIE, $_SERVER, and $_ENV.

145

1/27/13

Accessing Form Variables

The point of using the order form is to collect customers orders. Gepng the details of what the customers typed is easy in PHP but the exact method depends on
the version of PHP you are using and sepng in your php.ini le.

Accessing form variables cont.

Variable names in PHP start with a dollar sign ($ ). One can access each form eld as a PHP variable whose name relates to the name of the form eld
Can be accessed via variables in three ways
$CDqty // short style $_POST['CDqty']; // medium style $HTTP_POST_VARS[CDqty] // long style

146

1/27/13

Accessing form variables cont.

Short style ($CDqty) is convenient but requires the register_globals conguraAon sepng be turned on. For security reasons, this sepng is turned o by default. This style makes it easy to make errors that could make your code insecure, which is why it is no longer the recommended approach. It would be a bad idea to use this style in a new code as the opAon is likely to disappear in PHP6.

Accessing form variables cont.

Medium style ($_POST[CDqty] ) is the recommended approach. If you create short versions of variable names, based on the medium style it is not a security issue and instead is simply on ease-of-use issue. Long style ($HTTP_POST_VARS[CDqty] ) is, however, deprecated and is therefore likely to be removed in the long term. This style used to be the most portable but can now be disabled via the register_long_arrays conguraAon direcAve, which improves performance.
This requires the global keyword to be accessed, see vars scope, see later slides

147

1/27/13

Why not to use short style

No obvious disAncAon between variables that you have created and untrusted variables that have come directly from users. If you are not careful to give all your own variables a starAng value, your scripts users can pass variables and values as form variables that will be mixed with your own.

$_POST, $_GET, and $_REQUEST

Medium style involves retrieving form variables from one of the arrays $_POST , $_GET , or $_REQUEST. One of the $_GET or $_POST arrays holds the details of all the form variables.
Depends on whether the method used to submit the form was GET or POST , respecAvely.

A combinaAon of all data submieed via GET or POST is also available through $_REQUEST.

148

1/27/13

Accessing form variables cont.

Returning to processorder.php le we can add
<?php $KBqty=$_POST['KBqty']; $CDqty=$_POST['CDqty']; $LCDqty=$_POST['LCDqty']; ?>

Because this code will not produce any output, placing it above or below the <html> and other HTML tags that start your page makes no dierence Generally place such blocks at the start of the script to make them easy to nd. To see the value, one can use echo $KBqty. KBs<br />;

The dot operator is used to concatenate string like the plus operator in javascript One can use single or double quotaAons for string In single quotaAons nothing altered, text is output as is. In double quotaAons variables are replaced by their values
echo $KBqty KBs ; echo $KBqty. KBs;

IdenAers
Names of variables, classes, or funcAons
IdenAers can be of any length and can consist of leeers, numbers, and underscores. IdenAers cannot begin with a digit. In PHP, idenAers are case sensiAve. $Areqty is not the same as $TireQty .
FuncAon names are an excepAon to this rule; their names can be used in any case.

A variable can have the same name as a funcAon. This usage is confusing, however, and should be avoided. Also, you cannot create a funcAon with the same name as another funcAon.

149

1/27/13

PHP supports the following basic data types:

Variable Types

Variables that have not been given a value, have been unset Certain built-in funcAons (such as database funcAons) return variables that have the type resource. PHP changes the variable type according to what is stored in it at any given Ame.

IntegerUsed for whole numbers Float (also called double)Used for real numbers StringUsed for strings of characters BooleanUsed for true or false values ArrayUsed to store mulAple data items ObjectUsed for storing instances of classes Two special types are also available: NULL and resource.

Variable Variables
Variable variables enable you to change the name of a variable dynamically. A variable variable works by using the value of one variable as the name of another.
For example, you could set
$varname = CDqty; You can then use $$varname in place of $CDqty . For example, you can set the value of $CDqty as follows:
$$varname = 5; This is exactly equivalent to $CDqty = 5;

150

1/27/13

Declaring and Using Constants

You can dene constants using the dene funcAon:
dene(KBPRICE, 100); dene(CDPRICE, 10); dene(LCDPRICE, 4);

One important dierence between constants and variables is that when you refer to a constant, it does not have a dollar sign in front of it. As well as the constants you dene, PHP sets a large number of its own.
An easy way to obtain an overview of them is to run the phpinfo() funcAon:
phpinfo();

echo TIREPRICE;

This funcAon provides a list of PHPs predened variables and constants, among other useful informaAon. One other dierence between variables and constants is that constants can store only boolean, integer, oat, or string data.
These types are collecAvely known as scalar values.

Variable Scope
The six basic scope rules in PHP are as follows:
Built-in superglobal variables are visible everywhere within a script. Constants, once declared, are always visible globally; that is, they can be used inside and outside funcAons. Global variables declared in a script are visible throughout that script, but not inside funcAons . Variables inside funcAons that are declared as global refer to the global variables of the same name. Variables created inside funcAons and declared as staAc are invisible from outside the funcAon but keep their value between one execuAon of the funcAon and the next.
Trying to assign values to these variables which are the result of expressions will cause a parse error.

Variables created inside funcAons are local to the funcAon and cease to exist when the funcAon terminates.

151

1/27/13

Superglobals
The complete list of superglobals is as follows:
$GLOBALS An array of all global variables (Like the global keyword, this allows you to access global variables inside a funcAonfor example, as $GLOBALS[myvariable] .) $_SERVER An array of server environment variables $_GET An array of variables passed to the script via the GET method $_POST An array of variables passed to the script via the POST method $_COOKIE An array of cookie variables $_FILES An array of variables related to le uploads $_ENV An array of environment variables $_REQUEST An array of all user input including the contents of input including $_GET , $_POST , and $_COOKIE (but not including $_FILES since PHP 4.3.0) $_SESSION An array of session variables

Scope cont.
<?php $a = 1; include 'b.inc'; ?> /*$a is visible to b.inc script but not to funcAons inside the b.inc*/

152

1/27/13

<?php $a = 1; /* global scope */ funcAon test() { echo $a; /* reference to local scope variable */ } test(); //nothing will be printed ?> ///////////////////////////EX.2 <?php $a = 1; $b = 2; funcAon Sum() { global $a, $b; //now the global scope is referenced $b = $a + $b; //$b has 3 } Sum(); echo $b; ?> Using global keyword outside a funcAon is not an error. It can be used if the le is included from inside a funcAon.

Examples

Ex3 another way to access globals

<?php $a = 1; $b = 2; funcAon Sum() { $GLOBALS['b'] = $GLOBALS['a'] + $GLOBALS['b']; } Sum(); echo $b; ?>

153

1/27/13

Operators
ArithmeAc operators
Operator + - * / % Name AddiAon SubtracAon MulAplicaAon Division Modulus Example $a + $b $a - $b $a * $b $a / $b $a % $b

String operators
. Operator += -= *= /= %= .=

ConcatenaAon

$a . $b Equivalent To $a = $a + $b $a = $a - $b $a = $a * $b $a = $a / $b $a = $a % $b $a = $a . $b

Combined Assignment operators

Use $a += $b $a -= $b $a *= $b $a /= $b $a %= $b $a .= $b

Reference Operator &

$a = 5; $b = $a; $a = 7; // $b will s)ll be 5 However, $a = 5; $b = &$a; $a = 7; // $a and $b are now both 7 Both $a and $b point to the same piece of memory. You can change this by unsepng one of them as follows:
unset($a);

Unsepng does not change the value of $b (7) but does break the link between $a and the value 7 stored in memory.

154

1/27/13

Comparison Operators
Operator Name Use == Equals $a == $b === IdenAcal(equal and same type) $a === $b != Not equal $a != $b !== Not idenAcal $a !== $b <> Not equal (comparison operator) $a <> $b < Less than $a < $b > Greater than (comparison operator) $a > $b <= Less than or equal to $a <= $b >= Greater than or equal to $a >= $b

Logical Operators
Operator ! && || and or xor Name NOT AND OR AND OR XOR Use !$b $a && $b $a || $b $a and $b $a or $b $a x or $b Result Returns true if $b is false and vice versa Returns true if both $a and $b are true; otherwise false Returns true if either $a or $b or both are true; otherwise false Same as &&, but with lower precedence Same as ||, but with lower precedence Returns true if either $a or $b is true, and false if they are both true or both false

155

1/27/13

The ternary operator (?: )

Other operators

condiAon ? value if true : value if false

The error suppression operator (@ )

can be used in front of any expression, for example,
$a = @(57/0); Without the @ operator, this line generates a divide-by- zero warning. With the operator included, the error is suppressed.

If you are suppressing warnings in this way, you need to write some error handling code to check when a warning has occurred. If you have PHP set up with the track_errors feature enabled in php.ini , the error message will be stored in the global variable $php_errormsg .

Other operators
The ExecuAon Operator (a pair of backAcks (`` ))
PHP aeempts to execute whatever is contained between the backAcks as a command at the servers command line. The value of the expression is the output of the command.

Ex: on a Windows server, you can use

$out = `dir c:`; echo <pre>.$out.</pre>;

The instanceof operator

class sampleClass{}; $myObject = new sampleClass(); if ($myObject instanceof sampleClass) echo myObject is an instance of sampleClass;

Working Out the Form Totals

156

1/27/13

Working Out the Form Totals

Check the php example code

Used to test the variables is_array()

Using Variable FuncAons

is_double(), is_oat(), is_real() is_long(), is_int(), is_integer() is_string() is_bool()

Checks whether the variable is an array. (All the same funcAon) Checks whether the variable is a oat. (All the same funcAon) Checks whether the variable is an integer. Checks whether the variable is a string. Checks whether the variable is a boolean. Checks whether the variable is an object. Checks whether the variable is a resource. Checks whether the variable is null. Checks whether the variable is a scalar, that is, an integer, boolean, string, or oat.

is_object()

is_resource() is_null()

is_scalar()

157

1/27/13

Using Variable FuncAons cont.

is_numeric() is_callable()
Checks whether the variable is any kind of number or a numeric string. Checks whether the variable is the name of a valid funcAon. whether a variable is set or not. unsets a variable

bool isset(mixed var);[;mixed var[,...]])

void unset(mixed var);[;mixed var[,...]]) bool empty(mixed var);

checks to see whether a variable exists and has a nonempty, nonzero value; it returns true or false accordingly. return the type of the variable sets the type of a variable

string geeype(mixed var)

bool seeype(mixed var, string type)

Example
Ex:
$a = 56; echo geZype($a).<br />; //int seZype($a, double); echo geZype($a).<br />; echo isset($CDqty): .isset($CDqty).<br />; echo isset($nothere): .isset($nothere).<br />; echo empty($CDqty): .empty($CDqty).<br />; echo empty($nothere): .empty($nothere).<br />;

158

1/27/13

ReinterpreAng Variables
Use type casAng like in C/C++ Using funcAons
The following three funcAons can be useful for this task:
int intval(mixed var[, int base]); oat oatval(mixed var); string strval(mixed var);

Each accepts a variable as input and returns the variables value converted to the appropriate type. The intval() funcAon also allows you to specify the base for conversion when the variable to be converted is a string. (This way, you can convert, for example, hexadecimal strings to integers.)

CondiAonal statements
if elseif else statement
if ($CDqty < 10) { $discount = 0; } elseif (($CDqty >= 10) && ($CDqty <= 49)) { $discount = 5; } elseif (($CDqty >= 50) && ($CDqty <= 99)) { $discount = 10; } else { $discount = 15; }

159

1/27/13

CondiAonal statement cont.

switch Statements
In a switch statement, the condiAon can take any number of dierent values, as long as it evaluates to a simple type (integer, string, or oat). You need to provide a case statement to handle each value you want to react to and, opAonally, a default case to handle any that you do not provide a specic case statement for. Ex:
switch($nd) { case "a: echo "<p>Regular customer.</p>"; break; case "b: echo "<p>Customer referred by TV advert.</p>"; break; case "c: echo "<p>Customer referred by phone directory.</p>"; break; case "d: echo "<p>Customer referred by word of mouth.</p>"; break; default: echo "<p>We do not know how this customer found us.</p>"; break; }

while Loops

IteraAons

Ex: $num = 1; while ($num <= 5 ){ echo $num.<br />; $num++; }

do...while Loops
$num = 100; do{ echo $num."<br />"; }while ($num < 1 ) ;

160

1/27/13

IteraAons cont.
for and foreach Loops
If, for example, we have form elds with names such as name1 , name2 , name3 , and so on, we can process them like this:

By dynamically creaAng the names of the variables, you can access each of the elds in foreach designed to work with arrays, to be seen later.

for ($i=1; $i <= $numnames; $i++){ $temp= name$i; echo $$temp.<br />; // or whatever processing you want to do }

Example: Shipping cost

<html> <body> <table border="0" cellpadding="3"> <tr> <td bgcolor="#CCCCCC" align="center">Distance</td> <td bgcolor="#CCCCCC" align="center">Cost</td> </tr> <? $distance = 50; while ($distance <= 250) { echo "<tr> <td align=\"right\">".$distance."</td> <td align=\"right\">".($distance / 10)."</td> </tr>\n"; $distance += 50; } ?> </table> </body> </html>

161

1/27/13

Example: Shipping cost html equivalent

<html> <body> <table border=0 cellpadding=3> <tr> <td bgcolor=#CCCCCC align=center>Distance</td> <td bgcolor=#CCCCCC align=center>Cost</td> </tr> <tr> <td align=right>50</td> <td align=right>5</td> </tr> <tr> <td align=right>100</td> <td align=right>10</td> </tr> <tr> <td align=right>150</td> <td align=right>15</td> </tr> <tr> <td align=right>200</td> <td align=right>20</td> </tr> <tr> <td align=right>250</td> <td align=right>25</td> </tr> </table> </body> </html>

Breaking out of control

break: besides switch it can be used to stop execuAng a loop, the execuAon of the script will conAnue at the next line of the script ager the loop. con)nue: can be used to jump to the next loop iteraAon. exit: can be used to nish execuAng the enAre PHP script. For example:
if($totalqty == 0){ echo "You did not order anything on the previous page!<br />"; exit; }

162

1/27/13

AlternaAve Control Structure Syntax

Other than dowhile loop, all the other statements have an alternaAve style It consists of replacing the opening brace ({ ) with a colon (: ) and the closing brace with a new keyword, which will be endif , endswitch , endwhile , endfor , or endforeach, depending on which control structure is being used. Ex:
if ($totalqty == 0) : echo "You did not order anything on the previous page!<br />"; exit; endif;

Storing and Retrieving Data

We can store data in two basic ways: in
at les or in a database. By a at le , we mean a simple text le.

163

1/27/13

Storing and Retrieving

WriAng data to a le requires three steps:
Open the le. If the le doesnt already exist, you need to create it. Write the data to the le. Close the le. Open the le. If you cannot open the le (for example, if it doesnt exist), you need to recognize this and exit gracefully. Read data from the le. Close the le.

Similarly, reading data from a le takes three steps:

When you want to read data from a le, you have many choices about how much of the le to read at a Ame.

Opening a File
Use the fopen() funcAon.
We need to specify how we intend to use it. This is known as the le mode.

Three main things can be done using le mode

Whether to open a le for reading only, for wri)ng only, or for both reading and wri)ng. In wriAng, whether to overwrite any exisAng contents of a le or append new data to the end of the le Specify whether to write binary or text les.

164

1/27/13

Mode Mode Name Meaning r r+ w w+ x x+ a a+ b Read Read Write Write CauAous write CauAous write Append Append Binary

File modes

Open the le for reading, beginning from the start of the le. Open the le for reading and wriAng, beginning from the start of the le. Open the le for wriAng, beginning from the start of the le. If the le already exists, delete the exisAng contents. If it does not exist, try to create it. Open the le for wriAng and reading, beginning from the start of the le. If the le already exists, delete the exisAng contents. If it does not exist, try to create it. Open the le for wriAng, beginning from the start of the le. If the le already exists, it will not be opened, fopen() will return false, and PHP will generate a warning. Open the le for wriAng and reading, beginning from the start of the le. If the le already exists, it will not be opened, fopen() will return false, and PHP will generate a warning. Open the le for appending (wriAng) only, starAng from the end of the exisAng contents, if any. If it does not exist, try to create it. Open the le for appending (wriAng) and reading, starAng from the end of the exisAng contents, if any. If it does not exist, try to create it. Used in conjuncAon with one of the other modes. You might want to use this mode if your le system dierenAates between binary and text les. Windows systems dierenAate; Unix systems do not. The PHP developers recommend you always use this opAon for maximum portability. It is the default mode. Used in conjuncAon with one of the other modes. This mode is an opAon only in Windows systems. It is not recommended except before you have ported your code to work with the b opAon.

Text

Assuming we want to save the computer shop order to a le, we can open this le for wriAng with the following:
$fp = fopen($DOCUMENT_ROOT/../orders/orders.txt, w);

Using fopen() to Open a File

fopen() expects two, three, or four parameters.

Usually, we use two. The rst parameter should be the le we want to open.

The document root is accessed using the PHP built-in variable $_SERVER $DOCUMENT_ROOT=$_SERVER[DOCUMENT_ROOT]; This variable points at the base of the document tree on your web server. We use the .. to point to the parent directory of the document root directory. It is a good pracAce, for security reasons, to store sensiAve data outside the director root. we do not want this le to be web accessible except through the interface that we provide. If no path is specied, the le will be created or looked for in the same directory as the script itself.

165

1/27/13

Using fopen() cont.

The second argument is used for specifying mode.
w allows only one order to be stored in the le. Each Ame a new order is taken, it overwrites the previous order A beeer choice would be ab You can use it if you want to search the include_path (set in php.ini) for a le. If you want to do this, set this parameter to true. If you tell PHP to search the include_path , you do not need to provide a directory name or path:
$fp = fopen(orders.txt, ab, true);

The third parameter of fopen() is opAonal.

The fourth parameter is also opAonal. The fopen() funcAon allows lenames to be prexed with a protocol (such as hep:// ) and opened at a remote locaAon. If fopen() opens the le successfully, a resource that is eecAvely a handle or pointer to the le is returned and should be stored in a variablein this case, $fp. You use this variable to access the le when you actually want to read from or write to it.
You dont need this if you specify the protocol in the le name, see next slide.

Opening Files Through FTP or HTTP

We can open les remotely with fopen() by specifying the protocol in the forth parameter If the lename you use begins with gp:// , a passive mode FTP connecAon will be opened to the server you specify and a pointer to the start of the le will be returned. If the lename you use begins with hep:// , an HTTP connecAon will be opened to the server you specify and a pointer to the response will be returned. When using HTTP mode with older versions of PHP, you must specify trailing slashes on directory names, as shown in the following:
not
hep://www.example.com/ $le = fopen ("hep://www.example.com/", "r"); hep://www.example.com

This capability can be disabled by turning o the allow_url_fopen direcAve in the php.ini le.

FTP example: $handle = fopen("pp://user:pass@DomainName.com/lename.txt", "w"); Remember that the domain names in your URL are not case sensiAve, but the path and lename might be. Important: you need to have permissions to open the le you need.

166

1/27/13

Dealing with errors

If the call to fopen() fails, (e.g. you dont have permissions to access le), the funcAon will return false . You can deal with the error in a more user-friendly way by suppressing PHPs error message and giving your own:

@ $fp = fopen($DOCUMENT_ROOT/../orders/orders.txt, ab); if (!$fp){ echo "<p><strong> Your order could not be processed at this Ame. " .Please try again later.</strong></p></body></html>"; exit; }

The @ symbol in front of the call to fopen() tells PHP to suppress any errors resulAng from the funcAon call. Usually, its a good idea to know when things go wrong, but in this case were going to deal with that problem elsewhere. You can also write this line as follows:
$fp = @fopen($DOCUMENT_ROOT/../orders/orders.txt, a);

WriAng to a File
We can use either of the funcAons fwrite() (le write) or fputs() (le put string); fputs() is an alias to fwrite(). You call fwrite() in the following way: AlternaAvely we can use
fwrite($fp, $outputstring); Writes the string in outputstring to le fp

This funcAon writes the string contained in data to the le named in lename without any need for an fopen() (or fclose()) funcAon call. This funcAon is new in PHP5, and is a matched pair for le_get_contents() The ags and context opAonal parameters are most commonly used when wriAng to remote les using, for example, HTTP or FTP.

int le_put_contents ( string lename, string data [, int ags [, resource context]])

167

1/27/13

WriAng to a le cont.
The funcAon fwrite() takes three parameters
The third one is opAonal. The prototype for fwrite() is
int fwrite ( resource handle, string string [, int length])

The third parameter, length, is the maximum number of bytes to write. If this parameter is supplied, fwrite() will write string to the le pointed to by handle unAl it reaches the end of string or has wrieen length bytes, whichever comes rst. Ex: fwrite($fp, $outputstring, strlen($outputstring)); Third parameter commonly used when wriAng in binary mode because it helps avoid some cross- plauorm compaAbility issues.

File Formats
Depending on who is using the stored data le. Beeer to use a standard, such as XML Or invent one for your self, but you have to follow it and announce it to others.
$outputstring = $date.\t.$CDqty. CDs \t.$KBqty. KBs\t. $LCDqty. LCDs\t\$.$totalamount.\t. $address.\n;

Closing a File
When you nish using a le close it with
fclose($fp); Returns true if the le was successfully closed or false if it wasnt.

168

1/27/13

Locking sensi)ve les for exclusive use

When dealing with sensiAve data such as customer orders, it is good pracAce to have at one Ame only one instance that can modify the le, for that, we can use the funcAon
bool ock ( resource $handle , int $opera5on [, int & $wouldblock ] ) //wouldblock is not supported in windows OperaAon can be one of
LOCK_SH to acquire a shared lock (reader). LOCK_EX to acquire an exclusive lock (writer). LOCK_UN to release a lock (shared or exclusive).

Ex: ock($fp, LOCK_EX); //should be unlocked in ver. 5.3.2, other wise the close would unlock
ock($fp, LOCK_UN);

Knowing When to Stop: feof()

while (!feof($fp)) Ex:

Reading from a File

Reading a Line at a Time: fgets(), fgetss(), and fgetcsv()

$order= fgets($fp, 999);
Reads from le unAl it encounters a newline character (\n ), encounters an EOF , or has read 998 bytes from the le. Same as fgets but it strips out any html/php tags other than the ones specied by the allowable tags string Used for security reasons to eliminate any threats from text coming from untrusted sources

string fgetss(resource fp, int length, string [allowable_tags]);

array fgetcsv ( resource fp, int length [, string delimiter [, string enclosure]])
This funcAon breaks up lines of les when you have used a delimiAng character, such as the tab character (as we suggested earlier) or a comma (as commonly used by spreadsheets and other applicaAons). $order = fgetcsv($fp, 100, \t); The enclosure parameter species what each eld in a line is surrounded by. If not specied, it defaults to (a double quotaAon mark).

169

1/27/13

Reading from a le cont.

Reading the Whole File: readle(), fpassthru(), and le() int readle(string lename, [int use_include_path[, resource context]] );
A call to the readle() funcAon opens the le, echoes the content to standard output (the browser), and then closes the le. The opAonal context parameter is used only when les are opened remotely via, for example, HTTP

fpassthru(), dumps the contents of the le from the pointers posiAon onward to standard output. It closes the le when it is nished. The le() funcAon is idenAcal to readle() except that instead of echoing the le to standard output, it turns it into an array. We would call it using The le_get_contents() funcAon is idenAcal to readle() except that it returns the content of the le as a string instead of outpupng it to the browser.
$learray = le($DOCUMENT_ROOT/../orders/orders.txt); Each line of the le is stored in a separate element of the array
$fp = fopen($DOCUMENT_ROOT/../orders/orders.txt, rb); fpassthru($fp);

Reading from a le cont.

Reading a Character: fgetc()
while (!feof($fp)){ $char = fgetc($fp); if (!feof($fp)) echo ($char==\n ? "<br />": $char); } }

Reading an Arbitrary Length: fread()

This code reads a single character at a Ame from the le using fgetc() and stores it in $char It also does a liele processing to replace the text end-of-line characters (\n ) with HTML line breaks (<br /> ). fgetc() returns the EOF character. You need to test feof() again ager youve read the character because you dont want to echo the EOF to the browser. string fread(resource fp, int length); Reads up to length bytes or to the end of the le, whichever comes rst.

170

1/27/13

try{}catch(){}
<?php try { throw new ExcepAon("A terrible error has occurred", 42); } catch (ExcepAon $e) { echo "ExcepAon ". $e->getCode(). ": ". $e->getMessage()."<br />." in ". $e->getFile(). " on line ". $e->getLine(). "<br />"; } ?>

############################################ ##########################

The ExcepAon Class

PHP has a built-in class called ExcepAon. The constructor takes two parameters, an error message and an error code. In addiAon to the constructor, this class comes with the following built-in methods:

getCode()Returns the code as passed to the constructor getMessage()Returns the message as passed to the constructor getFile()Returns the full path to the code le where the excepAon was raised getLine()Returns the line number in the code le where the excepAon was raised getTrace()Returns an array containing a backtrace where the excepAon was raised getTraceAsString()Returns the same informaAon as getTrace, formaeed as a string __toString()Allows you to simply echo an ExcepAon object, giving all the informaAon from the above methods

171

1/27/13

To check whether a le exists without actually opening it. Determining How Big a File Is: lesize()

Using Other Useful File FuncAons

if (le_exists("$DOCUMENT_ROOT/../orders/orders.txt"))
$fp = fopen($DOCUMENT_ROOT/../orders/orders.txt, rb); echo nl2br(fread( $fp, lesize($DOCUMENT_ROOT/../orders/orders.txt ))); fclose( $fp );

DeleAng a File: unlink()

The nl2br() funcAon converts the \n characters in the output to HTML line breaks (<br />).
unlink($DOCUMENT_ROOT/../orders/orders.txt); Returns false if the le could not be deleted. This situaAon typically occurs if the permissions on the le are insucient or if the le does not exist.

NavigaAng Inside a File: rewind(), fseek(), and gell()

The rewind($fp) funcAon resets the le pointer to the beginning of the le. The pell($fp) funcAon reports how far into the le the pointer is in bytes. The funcAon fseek() to set the le pointer to some point within the le. Its prototype is

int fseek ( resource fp, int oset [, int whence]) sets the le pointer fp at a point starAng from whence and moving oset bytes into the le. The opAonal whence parameter defaults to the value SEEK_SET , which is eecAvely the start of the le. The other possible values are SEEK_CUR (the current locaAon of the le pointer) and SEEK_END (the end of the le).

Example: InteracAng with the File System and the Server

Before looking into le uploading example, it is important to note that the php.ini le has ve direcAves that control how PHP will work with le uploading
DirecAve le_uploads upload_tmp_dir DescripAon Controls whether HTTP le uploads are allowed. Values are On or O. Indicates the directory where uploaded les will temporarily be stored while they are waiAng to be processed. If this value is not set, the system default will be used. Controls the maximum allowed size for uploaded les. If a le is larger than this value, PHP will write a 0 byte placeholder le instead. Controls the maximum size of POST data that PHP will accept.This value must be greater than the value for the upload_max_lesize direcAve, since it is the size for all of the post data, including any les to be uploaded. Default Value On NULL

upload_max_le size

2M 8M

post_max_size .

172

1/27/13

HTML for File Upload

<html> <head> <)tle>Administra)on - upload new les</)tle> </head> <body> <h1>Upload new news les</h1> <form ac)on="upload.php" method="post" enctype="mul)part/form-data"/> <div> <input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> <label for="userle">Upload a le:</label> <input type="le" name="userle" id="userle"/> <input type="submit" value="Send File"/> </div> </form> </body> </html>

HTML for File Upload cont.

In the <form> tag, you must set the aeribute enctype=mul)part/form- data to let the server know that a le is coming along with the regular informaAon. You must have a form eld that sets the maximum size le that can be uploaded. This is a hidden eld and is shown here as
Note that the MAX_FILE_SIZE form eld is opAonal, as this value can also be set server-side. However, if used in the form, the name of this form eld must be MAX_FILE_SIZE. The value is the maximum size (in bytes) of les you will allow people to upload. Here, we set this eld to 1,000,000 bytes (roughly one megabyte).You may like to make it bigger or smaller for your applicaAon.
<input type="le" name="userle" id="userle"/> <input type=hidden name=MAX_FILE_SIZE value= 1000000>

You need an input of type le, shown here as

You can choose whatever name you like for the le, but you should keep it in mind because you will use this name to access your le from the receiving PHP script.

173

1/27/13

WriAng the PHP to Deal with the File

When the le is uploaded, it briey goes into the temporary directory that is specied in your php.ini upload_tmp_dir The data you need to handle in your PHP script is stored in the superglobal array $_FILES . The entries in $_FILES will be stored with the name of the <le> tag from HTML form. In our case it is named userle, so the array will have the following contents:
The value stored in $_FILES[userle][tmp_name] is the place where the le has been temporarily stored on the web server. The value stored in $_FILES[userle][name] is the les name on the users system. The value stored in $_FILES[userle][size] is the size of the le in bytes. The value stored in $_FILES[userle][type] is the MIME type of the lefor example, text/plain or image/gif . The value stored in $_FILES[userle][error] will give you any error codes associated with the le upload.This funcAonality was added at PHP 4.2.0.

We should save the le from the temporary directory (move, copy, or rename), otherwise, it will be deleted when the script ends.

Php le for uploading

<html> <head> <)tle>Uploading...</)tle> </head> <body> <h1>Uploading le...</h1> <?php if ($_FILES[userle][error] > 0) { echo Problem: ; switch ($_FILES[userle][error]) { case 1: echo File exceeded upload_max_lesize; break; case 2: echo File exceeded max_le_size; break; case 3: echo File only par)ally uploaded; break; case 4: echo No le uploaded; break; case 6: echo 'Cannot upload le: No temp directory specied'; break; case 7: echo 'Upload failed: Cannot write to disk'; break; } exit; }

174

1/27/13

?> </body> </html>

// Does the le have the right MIME type? if ($_FILES[userle][type] != text/plain) { echo Problem: le is not plain text; exit; } // put the le where wed like it $uple = /uploads/.$_FILES[userle][name] ; if (is_uploaded_le($_FILES[userle][tmp_name])) { if (!move_uploaded_le($_FILES[userle][tmp_name], $uple)) { echo Problem: Could not move le to des)na)on directory; exit; } } else { echo Problem: Possible le upload aZack. Filename: ; echo $_FILES[userle][name]; exit; } echo File uploaded successfully<br><br>; // remove possible HTML and PHP tags from the le's contents $contents = le_get_contents($uple); $contents = strip_tags($contents); le_put_contents($_FILES['userle']['name'], $contents); // show what was uploaded echo '<p>Preview of uploaded le contents:<br/><hr/>'; echo nl2br($contents); echo <br/><hr/>;

Uploading error checking

For checking the error code returned in $_FILES[userle][error], A constant is also associated with each of the codes. These are:
UPLOAD_ERROR_OK , value 0, means no error occurred. UPLOAD_ERR_INI_SIZE , value 1, means that the size of the uploaded le exceeds the maximum value specied in your php.ini le with the upload_max_lesize direcAve. UPLOAD_ERR_FORM_SIZE , value 2, means that the size of the uploaded le exceeds the maximum value specied in the HTML form in the MAX_FILE_SIZE element. UPLOAD_ERR_PARTIAL , value 3, means that the le was only parAally uploaded. UPLOAD_ERR_NO_FILE , value 4, means that no le was uploaded. UPLOAD_ERR_NO_TMP_DIR , value 6, means that no temporary directory is specied in the php.ini (introduced in PHP 5.0.3). UPLOAD_ERR_CANT_WRITE, value 7, means that wriAng the le to disk failed (introduced in PHP 5.1.0).

175

1/27/13

Useful funcAons and security issues

Use the is_uploaded_le() and move_uploaded_le() funcAons to make sure that the le you are processing has actually been uploaded and is not a local le. Use the basename() funcAon to modify the names of incoming les.

This funcAon will strip o any directory paths that are passed in as part of the lename, which is a common aeack that is used to place a le in a dierent directory on your server.
<?php $path = "/home/hepd/html/index.php"; $le1 = basename($path); $le2 = basename($path, ".php"); print $le1 . "<br/>"; // the value of $le1 is "index.php" print $le2 . "<br/>"; // the value of $le2 is "index

Useful funcAons and security issues

The funcAon opendir() opens a directory for reading. Its use is similar to the use of fopen() for reading from les. Instead of passing it a lename, you should pass it a directory name:
$dir = opendir($current_dir);

When the directory is open, you can read a lename from it by calling readdir($dir)
while(false !== ($le = readdir($dir))) When nished reading from a directory, call closedir($dir)

176

1/27/13

As an alternaAve to these funcAons, you can use the dir class provided by PHP. It has the properAes handle and path, and the methods read(), close(), and rewind(), which perform idenAcally to the nonclass alternaAves.
<?php $dir = dir("/uploads/"); echo "<p>Handle is $dir->handle</p>"; echo "<p>Upload directory is $dir->path</p>"; echo '<p>Directory Lis)ng:</p><ul>'; while(false !== ($le = $dir->read())) //strip out the two entries of . and .. if($le != "." && $le != "..") { echo "<li>$le</li>"; } echo '</ul>'; $dir->close(); ?>

Using Directory cont.

Using Directory cont.

The funcAon scandir() was introduced in PHP 5. It store the lenames in an array and sort them in alphabeAcal order, either ascending or descending.
$les1 = scandir($dir); $les2 = scandir($dir, 1);

The disk_free_space($path) funcAon returns the number of bytes free on the disk (Windows) or the le system (Unix) on which the directory is located. CreaAng and removing directories
$oldumask = umask(0); //change umask. The inverted umask is ANDed with permissions of the mkdir mkdir(c:\\tmp\\tes)ng, 0777); //create directory with permisions of (0777 AND invert(umask)) umask($oldumask); rmdir(c:\\tmp\\tes)ng); //remove directory

177

1/27/13

Arrays
Numerically Indexed Arrays
indices start at zero by default $products = array( CD, KB, LCD ); range() funcAon can be used to automaAcally create the array of an ascending sequence
$numbers = range(1,10); //An array called numbers with //elements ranging from 1 to 10 $odds = range(1, 10, 2); // an opAonal third parameter that //allows sepng the step size between values. $leZers = range(a, z); // can also be used with characters

Arrays cont.
Accessing Array Contents
Type $products[0] , $products[1] , and $products[2] to use the contents of the $products array. change array elements contents by using the = operator. We can use loops
$products[0] = CDs; for ($i = 0; $i<3; $i++) { echo $products[$i]." "; } Or foreach ($products as $current) { echo $current." "; }

To add a new elementLaptops to the end of the array, giving a total of four elements:
$products[3] = Laptops;

178

1/27/13

The following code creates an array with product names as keys and prices as values:
$prices = array(CD=>100, KB=>10, LCD=>4);

Arrays with Dierent Indices

We can access the contents using the variable name prices array as $prices[CD] , $prices[KB] , and $prices[LCD] . The following code creates the same $prices array
$prices = array( CD=>100 ); $prices[KB] = 10; $prices[LCD] = 4;

Or directly as:
$prices[CD] = 100; $prices[KB] = 10; $prices[LCD] = 4;

Using Loops

179

1/27/13

Using Loops Cannot use a simple counter in a loop to work with the array it has been used in the previous example, The loop can be used exactly or by incorporaAng the keys as
for foreach

The each() funcAon can also be used as

foreach ($prices as $key => $value) { echo $key." ".$value."<br />"; }

This funcAon returns the current element in an array and makes the next element the current one. while ($element = each($prices)) { echo $element['key']; echo " "; echo $element['value']; echo "<br />"; } When you call each() , it gives you an array with four values and the four indices to the array locaAons. The locaAons key and 0 contain the key of the current element, and the locaAons value and 1 contain the value of the current element. If you want to use the array twice in the same script, you need to set the current element back to the start of the array using the funcAon reset() .
reset($prices);

Or using the list() funcAon as

while (list($product, $price) = each($prices)) { echo "$product - $price<br />"; }

MulAdimensional Arrays
$products = array( array( CDS, CDs, 100 ), array( KBS, Keyboards, 10 ), array( LCD, LCDs, 4 ) );

Or

for ($row = 0; $row < 3; $row++) { for ($column = 0; $column < 3; $column++) { echo '|'.$products[$row][$column]; } echo '|<br />'; }

$products = array( array( Code => CDS, Descrip)on => CDs, Price => 100 ), array( Code => KBS, Descrip)on => Keyboards, Price => 10 ), array( Code => LCDS, Descrip)on => LCDs, Price =>4 ) ); for ( $row = 0; $row < 3; $row++){ while ( list( $key, $value ) = each( $products[$row])){ echo |$value; } echo |<br />; }

180

1/27/13

Using the sort() func)on

SorAng Arrays

$products = array( , KBs, LCD ); sort($products); The array will be sorted into ascending alphabeAcal asort() to order the array according to the value of each element. ksort() to sort the array by key rather than value. $prices = array( Tires=>100, Oil=>10, Spark Plugs=>4 ); asort($prices);

When using an array with descripAve keys to store items and their prices, we use the funcAon

The rsort() funcAon sorts a single-dimensional numerically indexed array into descending order. The arsort() funcAon sorts a one-dimensional array into descending order using the value of each element. The krsort() funcAon sorts a one-dimensional array into descending order using the key of each element. The funcAon usort() sorts an array depending on a custom user dened funcAon
funcAon compare($x, $y) { if ($x[1] == $y[1]) { return 0; } else if ($x[1] < $y[1]) { return -1; } else { return 1; } } usort($products, 'compare');

Similar to asort() , uasort() used when custom sorAng a non-numerically indexed array by value. Similar to ksort() , uksort() should be used when custom sorAng a non-numerically indexed array by key.

Other useful array related funcAons

The count() and the sizeof() funcAons return how many elements are in an array. The array_count_values($array) funcAon counts how many Ames each unique value occurs in the array named $array.
$arr = array(4, 5, 1, 2, 3, 1, 2, 1); $ac = array_count_values($arr); /*creates an array called $ac that contains Key Value 4 1 5 1 1 3 2 2 3 1*/

An Array has an internal pointer.

Can be controlled using the current(), next(), each(), prev(), reset(), and end() Calling current( $array_name ) or pos($array_name) directly ager array iniAalizaAon returns the rst element. Calling each($array_name) returns the current element before advancing the pointer. Calling next($array_name) advances the pointer and then returns the new current element.

When creaAng a new array, the current pointer is iniAalized to point to the rst element in the array. Calling either next() or each() advances the pointer forward one element.

The prev() funcAon moves the current pointer back one and then returns the new current element. The reset() funcAon returns the pointer to the rst element in the array. The end($array_name ) funcAon sends the pointer to the end of the array. The funcAon explode() split up each line so that you can apply some processing and formapng before prinAng. The output from this script is The explode funcAon has the following prototype: The array_count_values() funcAon is more complex. If you call array_count_values($array) , this funcAon counts how many Ames each unique value occurs in the array named $array .
array explode(string separator, string string [, int limit])

181

1/27/13

The array_walk() funcAon

Used to apply a funcAon to each element in an array
bool array_walk(array arr, string func, [mixed userdata]) Ex1:
funcAon my_print($value){ echo $value<br />; } array_walk($array, my_print);

Ex2:
funcAon my_mulAply(&$value, $key, $factor){ $value *= $factor; } array_walk(&$array, my_mulAply, 3);

Object-Oriented PHP
class classname { public $aeribute1; public $aeribute2; funcAon __construct($param) { $this->$aeribute1=$param; $aeribute2=$param; echo "Constructor called with parameter ".$param."<br />"; } funcAon __destruct(){} funcAon operaAon1(){} funcAon operaAon2($param1, $param2){} } $a = new classname("First"); //prints:Constructor called with parameter First $b = new classname("Second"); //prints:Constructor called with parameter Second $c = new classname(); //prints:Constructor called with parameter

182

1/27/13

Accessor funcAons
class classname { public $aeribute; } $a = new classname(); $a->aeribute = "value"; echo $a->aeribute; //bad pracAce, use accessor funcAons ############################################################## class classname { public $aeribute1; public $aeribute2; funcAon __get($name) { if( ($name="aeribute1)) return $this->$aeribute1; else return $this->$aeribute2; } funcAon __set ($name, $value) { if( ($name="aeribute1") && ($value >= 0) && ($value <= 100) ) $this->aeribute = $value; } } $a=new classname(); $a->$aZribute1 = 5; // will call the __set func)on $b=$a->$aZribute2; //will call the __get func)on

class A { public $aZribute1; func)on opera)on1(){} } class B extends A { public $aZribute2; func)on opera)on2(){} } PHP does not support mul)ple inheritance. ##################################################### interface Displayable { func)on display(); } class webPage implements Displayable { func)on display(){ } } We have to implement all interface func)ons

Inheritance and interface

183

1/27/13

class Math { staAc funcAon squared($input) { return $input*$input; } } echo Math::squared(8); ################################### interface a { const b = 'Interface constant'; } echo a::b; #################################### Prevent method from being override class A { public $aeribute = "default value"; nal funcAon operaAon() { echo "Something<br />"; echo "The value of \$aeribute is ". $this->aeribute."<br />"; } } Prevent class from being inherited nal class A{...}

StaAc, constants, and nal

Example, home.php

184

1/27/13

Sepng Cookies
Use setcookie() <?php setcookie('avor','chocolate chip'); ?> Cookies are sent with the HTTP headers, so if youre not using output buering, setcookie( ) must be called before any output is generated.

Sessions
HTTP is a stateless protocol.
This means that the protocol has no built-in way of maintaining state between two transacAons. When a user requests one page, followed by another, HTTP does not provide a way for you to tell that both requests came from the same user.

The idea of session control is to be able to track a user during a single session on a website. Sessions in PHP are driven by a unique session ID, a cryptographically random number.

It works by creaAng a unique idenAcaAon(UID) number for each visitor and storing variables based on this ID. This helps to prevent two users' data from gepng confused with one another when visiAng the same webpage.

185

1/27/13

Sessions cont.
Before using sessions, start it
session_start(); // start up your PHP session!
This registers the user's session with the server, allow you to start saving user informaAon and assign a UID (unique idenAcaAon number) for that user's session.

When you want to store user data in a session use the $_SESSION
$_SESSION['views'] = 1; // store session data echo "Pageviews = ". $_SESSION['views']; //retrieve data if(isset($_SESSION['views'])) $_SESSION['views'] = $_SESSION['views']+ 1; else $_SESSION['views'] = 1;

To check if a session already have a value, use isset. Use unset to clear it

we can also completely destroy the session enArely by calling the session_destroy funcAon.
session_destroy();

AuthenAcaAons
There are two good ways for authenAcaAon:
HTTP basic authenAcaAon
Basic authenAcaAon overcomes the caching problem, but the browser sAll sends the password to the server with every request

Sessions
Session control overcomes both of these problems.

186

1/27/13

Using Basic AuthenAcaAon

You can trigger basic authenAcaAon using
PHP or Using mechanisms built into your web server

It is supported by web browsers and requested form scripts. Basic authenAcaAon transmits a users name and password in plain text, so it is not very secure. When combining basic authenAcaAon with SSL and digital cerAcates, all parts of a web transacAon can be protected by strong security

Basic authenAcaAon using PHP

PHP scripts are generally cross-plauorm, but using basic authenAcaAon relies on environment variables
set by the server.

For an HTTP authenAcaAon script to run on Apache using PHP as an Apache module or on IIS using PHP as an ISAPI module, it needs to detect the server type and behave slightly dierently.

187

1/27/13

<?php // if we are using IIS, we need to set // $_SERVER['PHP_AUTH_USER'] and // $_SERVER['PHP_AUTH_PW'] if ((substr($_SERVER['SERVER_SOFTWARE'], 0, 9) == 'Microsog') && (!isset($_SERVER['PHP_AUTH_USER'])) && (!isset($_SERVER['PHP_AUTH_PW'])) && (substr($_SERVER['HTTP_AUTHORIZATION'], 0, 6) == 'Basic ') ) { list($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW']) = explode(':', base64_decode(substr($_SERVER['HTTP_AUTHORIZATION'], 6))); } // Replace this if statement with a database query or similar if (($_SERVER['PHP_AUTH_USER'] != 'user') || ($_SERVER['PHP_AUTH_PW'] != 'pass')) { // visitor has not yet given details, or their // name and password combinaAon are not correct header('WWW-AuthenAcate: Basic realm="Realm-Name"'); if (substr($_SERVER['SERVER_SOFTWARE'], 0, 9) == 'Microsog') { header('Status: 401 Unauthorized'); } else { header('HTTP/1.0 401 Unauthorized'); } echo "<h1>Go Away!</h1> <p>You are not authorized to view this resource.</p>"; } else { // visitor has provided correct details echo "<h1>Here it is!</h1> <p>I bet you are glad you can see this secret page.</p>"; } ?>

PHP authenAcaAon cont.

Using Basic AuthenAcaAon with Apaches .htaccess Files

The Apache web server contains a number of dierent authenAcaAon modules that can be used to decide the validity of data entered by a user. The easiest to use is mod_auth , which compares name-password pairs to lines in a text le on the server. For that we need to create two separate HTML les: one for the content and one for the rejecAon page.
content.html Sample Content
<html><body> <h1>Here it is!</h1> <p>I bet you are glad you can see this secret page.</p> </body></html> <html><body> <h1>Go Away!</h1> <p>You are not authorized to view this resource.</p> </body></html>

rejecAon.htmlSample 401 Error Page

188

1/27/13

Using Basic AuthenAcaAon with Apaches - cont.

In addiAon a le with the name .htaccess is needed to be created and stored in the folder containing your website
This will control accesses to les and any subdirectories in its directory. An .htaccess File Can Set Many Apache ConguraAon Sepngs, Including AcAvaAng AuthenAcaAon Ex:
ErrorDocument 401 /rejec)on.html AuthUserFile /home/.htpass AuthGroupFile /dev/null AuthName Realm-Name AuthType Basic require valid-user

.htpass The Password File Stores Usernames and Each Users Encrypted Password
user1:0nRp9M80GS7zM user2:nC13sOTOhp.ow user3:yjQMCPWjXFTzU user4:LOmlMEi/hAme2

Apache basic authenAcaAon cont.

The /dev/null is a special le on Unix systems that is guaranteed to be null, however, it is possible to specify that only authorized users who fall into specic groups may access resources. Like the PHP example, to use HTTP authenAcaAon, you need to name the realm as follows: Each line in the .htpass le contains a username, a colon, and that users encrypted password. The htpasswd program is used in one of the following ways:
htpasswd [-cmdps] passwordle username AuthName Realm-Name You can choose any realm name you prefer, but this name will be shown to your visitors

To create it, you use a small program called htpasswd that comes in the Apache distribuAon.

or

The opAonal m , d , p , or s switches can be used if you want to specify which encrypAon algorithm (including no encrypAon) you would like to use. The b switch tells the program to expect the password as a parameter rather than prompt for it.
htpasswd -bc /home/book/.htpass user1 pass1 htpasswd -b /home/book/.htpass user2 pass2 htpasswd -b /home/book/.htpass user4 pass3 htpasswd -b /home/book/.htpass user4 pass4

Using -c tells htpasswd to create the le.

htpasswd -b[cmdps] passwordle username password

189

1/27/13

Conguring Session Control

There is a set of conguraAon opAons for sessions that you can set in your php.ini le. Ex:
OpAon Name session.auto_start session.cache_expire Default Eect 0 (disabled) Automa)cally starts sessions. 180 Sets )me-to-live for cached session pages, in minutes.

This example consists of three les.

Login.php Mainpage.php Logout.php

Ex: ImplemenAng AuthenAcaAon with Session Control

We will assume the use of MySQL that have the database auth containing a table holding the authorized users for our example website. This database can be created using the following SQL script.
use auth; create table authorized_users (name varchar(20), password varchar(40), primary key (name) ); insert into authorized_users values ('username', 'password'); insert into authorized_users values ('testuser', sha1('password')); grant select on auth.* to 'webauth' idenAed by 'webauth'; ush privileges;

190

1/27/13

EncrypAng Passwords
Storing the passwords as plain text is an unnecessary risk. A one-way hashing algorithm can provide beeer security with very liele extra eort. PHP provides a number of one-way hash funcAons.

The oldest and least secure is the Unix Crypt algorithm, provided by the funcAon crypt() . The Message Digest 5 (MD5) algorithm, implemented in the funcAon md5(), is stronger. Stronger yet is the Secure Hash Algorithm 1 (SHA-1.) which provides a strong, one-way cryptographic hash funcAon.
The prototype for this funcAon is
string sha1 ( string str [, bool raw_output]) Given the string str , the funcAon will return a pseudo-random 40- character string. If you set raw_output to be true , you will instead get a 20-character string of binary data.

Querying a Database from the Web

In any script used to access a database from the Web, you follow some basic steps:
1. Check and lter data coming from the user. 2. Set up a connecAon to the appropriate database. 3. Query the database. 4. Retrieve the results. 5. Present the results back to the user.

191

1/27/13

ConnecAng to DB
The PHP library for connecAng to MySQL is called mysqli (the i stands for improved). In PHP, you can use either an object-oriented or procedural syntax.
@ $db = new mysqli('localhost', 'bookorama', 'bookorama123', 'books'); Returns an object @ $db = mysqli_connect('localhost', 'bookorama', 'bookorama123', 'books'); Returns a variable of type resource You will need to pass this resource in to all the other mysqli funcAons. This is very similar to the way the le-handling funcAons, such as fopen() , work.

In either method (OOP or funcAon), the result of an aeempt for a connecAon can be checked for errors as follows:
if (mysqli_connect_errno()) { echo 'Error: Could not connect to database. Please try again later.'; exit; }

Number of simultaneous connecAons to MySQL is congured through max_connecAons parameter in the le my.conf. Another related Apache parameter is the MaxClient in the hepd.conf le. This tells the server to reject new connecAon requests that exceeds MaxClient instead of allowing machine resources to be completely used up at busy Ames or when sogware has crashed.

ConnecAng to DB
It is a good pracAce to have your connecAon account info in a separated le also directory. ConnecAng to a mysql DB is done using the funcAon mysqli() <?php // this is dbconnect.php $db_server = 'localhost'; $db_user_name = ahmad'; $db_password = password'; $db_name = 'somedb; ?> <?php include('../code/dbconnect.php); $conn = @new mysqli($db_server, $db_user_name, $db_password, $db_name); // etc ?>

192

1/27/13

Using a DB and retrieving data from a DB

When you are using MySQL, you need to tell it which database you plan to use. The database to use is specied as a parameter to the mysqli constructor or the mysqli_connect() funcAon. If you want to change the default database, you can do so with the mysqli_select_db() funcAon. It can be accessed as either
$db->select_db(dbname)

or as

To actually perform the query, you can use the mysqli_query() funcAon. Before doing this, however, its a good idea to set up the query you want to run: You can now run the query:
$query = "select * from books where ".$searchtype." like '%".$searchterm."%'"; $result = $db->query($query); $result = mysqli_query($db, $query);

mysqli_select_db(db_resource, db_name)

Or, if you want to use the procedural interface, you use

To retrieve number of rows returned

Using the object-oriented approach,
$num_results = $result->num_rows;

Retrieving the Query Results

$num_results = mysqli_num_rows($result); for ($i=0; $i <$num_results; $i++) { // process results }

When you use a procedural approach, the

Then one can iterate through the resulted rows

In each iteraAon of this loop, you call $result->fetch_assoc() (or mysqli_fetch_assoc() ).

$row = $result->fetch_assoc();

This funcAon takes each row from the result set and returns the row as an array, with each key an aeribute name and each value the corresponding value in the array: Or you can use a procedural approach:
$row = mysqli_fetch_assoc($result);

You could also fetch a row into an object with the mysqli_fetch_object() funcAon:
$row = $result->fetch_object();

The aeribute values are listed in each of the array values $row[0] , $row[1] , and so on. (The mysqli_fetch_array() funcAon allows you to fetch a row as either or both kinds of array.) or

$row = mysqli_fetch_object($result);

You can then access each of the aeributes via $row->)tle , $row->author , and so on.

193

1/27/13

DisconnecAng from the Database

You can free up your result set by calling either
$result->free();

or
mysqli_free_result($result);

You can then use

$db->close();

or
mysqli_close($db);

to close a database connecAon. Using this command isnt strictly necessary because the connecAon will be closed when a script nishes execuAon anyway.

Pupng New InformaAon in the Database

Similar to gepng items out of the DB.
Same basic steps:
make a connecAon, send a query,
In this case, the query you send is an INSERT rather than a SELECT.

and check the results.

However, we rst need to get the data to be inserted.

This can be done using a simple html page, see next slide.

194

1/27/13

<html> <head> <)tle>Book-Store- New Book Entry</)tle> </head> <body> <h1>Book-Store- New Book Entry</h1> <form ac)on="insert_book.php" method="post"> <table border="0"> <tr> <td>ISBN</td> <td><input type="text" name="isbn" maxlength="13" size="13"></td> </tr> <tr> <td>Author</td> <td> <input type="text" name="author" maxlength="30" size="30"></td> </tr> <tr> <td>Title</td> <td> <input type="text" name=")tle" maxlength="60" size="30"></td> </tr> <tr> <td>Price $</td> <td><input type="text" name="price" maxlength="7" size="7"></td> </tr> <tr> <td colspan="2"><input type="submit" value="Register"></td> </tr> </table> </form> </body> </html>

newbook.html

<html>

?> </body> </html>

<head> <)tle>Book Entry Results</)tle> </head> <body> <h1>Book Entry Results</h1> <?php // create short variable names $isbn=$_POST['isbn']; $author=$_POST['author']; $)tle=$_POST[')tle']; $price=$_POST['price']; if (!$isbn || !$author || !$)tle || !$price) { echo "You have not entered all the required details.<br />" ."Please go back and try again."; exit; } if (!get_magic_quotes_gpc()) { $isbn = addslashes($isbn); //Returns a string with backslashes before characters that need to be quoted in database queries etc. //These characters are single quote ('), double quote ("), backslash (\) and NUL (the NULL byte). // for example when adding the string to insert the name O'reilly $author = addslashes($author); $)tle = addslashes($)tle); $price = doubleval($price); } @ $db = new mysqli('localhost', dbUsername', dbpass', dbname'); if (mysqli_connect_errno()) { echo "Error: Could not connect to database. Please try again later."; exit; } $query = "insert into books values('".$isbn."', '".$author."', '".$)tle."', '".$price."')"; $result = $db->query($query); if ($result) { echo $db->aected_rows." book inserted into database."; //aected_rows returns the number of rows aected by the insert //use it in INSERT, UPDATE, and DELETE statements } else { echo "An error has occurred. The item was not added."; } $db->close();

insert_book.php

195

1/27/13

Using Prepared Statements

The mysqli library supports the use of prepared statements Done by sending a template of the query you want to execute to MySQL and then send the data separately For example, the previous insert query could be
$query = "insert into books values(?, ?, ?, ?)"; $stmt = $db->prepare($query); $stmt->bind_param("sssd", $isbn, $author, $)tle, $price); $stmt->execute(); echo $stmt->aected_rows.' book inserted into database.'; $stmt->close();

Useful for speeding up execuAon when you are performing large numbers of the same query with dierent data. They also protect against SQL injecAon-style aeacks.

The purpose of bind_param() is to tell PHP which variables should be subsAtuted for the quesAon marks. The rst parameter is a format string. The value you are passing here (sssd ) means that the four parameters are a string, a string, a string, and a double, respecAvely. Other possible characters in the format string are i for integer and b for blob (Binary Large OBject such as images in a database). Ager this parameter, you should list the same number of variables as you have quesAon marks in your statement. They will be subsAtuted in this order.

Using Prepared Statements

As well as binding parameters, you can bind results. For SELECT type queries, you can use $stmt->bind_result() (or mysqli_stmt_bind_result() ) to provide a list of variables that you would like the result columns to be lled into. Each Ame you call $stmt->fetch() (or mysqli_stmt_fetch() ), column values from the next row in the result set are lled into these bound variables. For example, in the book search script you looked at earlier, you could use $stmt- >bind_result($isbn, $author, $Atle, $price); to bind these four variables to the four columns that will be returned from the query. Ager calling $stmt->execute(); you can call $stmt->fetch(); in the loop. Each Ame this is called, it fetches the next result row into the four bound variables. You can also use mysqli_stmt_bind_param() and mysqli_stmt_bind_result() in the same script.

196

1/27/13

Using Other PHP-Database Interfaces

PHP supports libraries for connecAng to a large number of databases, including Oracle, Microsog SQL Server, and PostgreSQL. In general, the principles of connecAng to and querying any of these databases are much the same. The individual funcAon names vary, and dierent databases have slightly dierent funcAonality, but if you can connect to MySQL, you should be able to easily adapt your knowledge to any of the others. If you want to use a database that doesnt have a specic library available in PHP, you can use the generic ODBC funcAons. ODBC, which stands for Open Database

XML IntroducAon

- SGML is a meta-markup language - Developed in the early 1980s; ISO std. In 1986 - HTML was developed using SGML in the early 1990s - specically for Web documents - Two problems with HTML: 1. Fixed set of tags and aeributes - User cannot dene new tags or aeributes - So, the given tags must t every kind of document, and the tags cannot connote any parAcular meaning 2. There are few restricAons on arrangement or order of tag appearance in a document - One soluAon to the rst of these problems: Let each group of users dene their own tags (with implied meanings) (i.e., design their own HTMLs using SGML)

197

1/27/13

XML Introduction (continued)

- Problem with using SGML: - Its too large and complex to use, and it is very difficult to build a parser for it - A better solution: Define a lite version of SGML - XML is not a replacement for HTML - HTML is a markup language used to describe the layout of any kind of information - XML is a meta-markup language that can be used to define markup languages that can define the meaning of specific kinds of information - XML is a very simple and universal way of storing and transferring data of any kind - XML does not predefine any tags - XML has no hidden specifications - All documents described with an XML-derived markup language can be parsed with a single parser

XML IntroducAon (conAnued)

- We will refer to an XML-based markup language as a tag set - Strictly speaking, a tag set is an XML applica5on, but that terminology can be confusing - An XML processor is a program that parses XML documents and provides the parts to an applicaAon - A document that uses an XML-based markup language is an XML document 7.2 The Syntax of XML - The syntax of XML is in two disAnct levels: 1. The general low-level rules that apply to all XML documents 2. For a parAcular XML tag set, either a document type deniAon (DTD) or an XML schema

198

1/27/13

The Syntax of XML (continued)

- General XML Syntax - XML documents consist of: 1. data elements 2. markup declarations (instructions for the XML parser) 3. processing instructions (for the application program that is processing the data in the document) - All XML documents begin with an XML declaration:
<?xml version = "1.0" encoding = "utf-8"?>

- XML names: - Must begin with a letter or an underscore - They can include digits, hyphens, and periods - There is no length limitation - They are case sensitive (unlike HTML names)

The Syntax of XML (continued)

- Syntax rules for XML: same as those of XHTML - Every XML document defines a single root element, whose opening tag must appear as the first line of the document - An XML document that follows all of these rules is well formed
<?xml version = "1.0" encoding = "utf-8" ?> <ad> <year> 1960 </year> <make> Cessna </make> <model> Centurian </model> <color> Yellow with white trim </color> <location> <city> Gulfport </city> <state> Mississippi </state> </location> </ad>

199

1/27/13

7.2 The Syntax of XML (conAnued)

- Aeributes are not used in XML the way they are in HTML - In XML, you ogen dene a new nested tag to provide more info about the content of a tag - Nested tags are beeer than aeributes, because aeributes cannot describe structure and the structural complexity may grow - Aeributes should always be used to idenAfy numbers or names of elements (like HTML id and name aeributes)

7.2 The Syntax of XML (continued)

<!-- A tag with one attribute --> <patient name = Samira Sami Sameer"> ... </patient> <!-- A tag with one nested tag --> <patient> <name> Samira Sami Sameer </name> ... </patient> <!-- A tag with one nested tag, which contains three nested tags --> <patient> <name> <first> Samira </first> <middle> Sami </middle> <last> Sameer </last> </name> ... </patient>

200

1/27/13

XML Document Structure

- An XML document often uses two auxiliary files: - One to specify the structural syntactic rules - One to provide a style specification - An XML document has a single root element, but often consists of one or more entities " - Entities range from a single special character to a book chapter " - An XML document has one document entity " Reasons for entity structure: 1. Large documents are easier to manage " 2. Repeated entities need not be literally repeated " 3. Binary entities can only be referenced in the document entities (XML is all text!) " " "

"

XML Document Structure (conAnued)

- When the XML parser encounters a reference to a non-binary enAty, the enAty is merged in - En5ty names: - No length limitaAon - Must begin with a leeer, a dash, or a colon - Can include leeers, digits, periods, dashes, underscores, or colons - A reference to an enAty has the form: &enAty_name; - Predened enAAes (as in XHTML):
< > & " ' &lt; &gt; &amp; &quot; &apos;

201

1/27/13

XML Document Structure (continued)

- If several predefined entities must appear near each other in a document, it is better to avoid using entity references - Character data section <![CDATA[ content ]]> e.g., instead of use
Start &gt; &gt; &gt; &gt; HERE &lt; &lt; &lt; &lt;

<![CDATA[Start >>>> HERE <<<<]]>

- If the CDATA content has an entity reference, it is taken literally

7.4 Document Type Definitions

- A DTD is a set of structural rules called declarations - These rules specify a set of elements, along with how and where they can appear in a document - Purpose: provide a standard form for a collection of XML documents and define a markup language for them - The DTD for a document can be internal or external - All of the declarations of a DTD are enclosed in the block of a DOCTYPE markup declaration - DTD declarations have the form: <!keyword > - There are four possible declaration keywords: ELEMENT, ATTLIST, ENTITY, and NOTATION

202

1/27/13

Document Type Definitions (continued)

- Declaring Elements - An element declaration specifies the name of an element, and the elements structure - If the element is a leaf node of the document tree, its structure is in terms of characters - If it is an internal node, its structure is a list of children elements (either leaf or internal nodes) - General form: <!ELEMENT element_name (list of child names)> e.g.,
<!ELEMENT memo (from, to, date, re, body)> memo

from

to

date

re

body

Document Type Definitions (continued)

- Declaring Elements (continued) - Child elements can have modifiers, +, *, ? e.g.,
<!ELEMENT person (parent+, age, spouse?, sibling*)>

- Leaf nodes specify data types, most often PCDATA, which is an acronym for parsable character data - Data type could also be EMPTY (no content) and ANY (can have any content) - Example of a leaf declaration:
<!ELEMENT name (#PCDATA)>

- Declaring Attributes - General form: <!ATTLIST el_name at_name at_type [default]>

203

1/27/13

Document Type Definitions (continued)

- Declaring Attributes (continued) - Attribute types: there are ten different types, but we will consider only CDATA - Default values: a value #FIXED value (every element will have this value), #REQUIRED (every instance of the element must have a value specified), or #IMPLIED (no default value and need not specify a value)
<!ATTLIST <!ATTLIST <!ATTLIST <!ATTLIST car car car car doors CDATA "4"> engine_type CDATA #REQUIRED> price CDATA #IMPLIED> make CDATA #FIXED "Ford">

<car doors = "2" engine_type = "V8"> ... </car>

Document Type Definitions (continued)

- Declaring Entities - Two kinds: - A general entity can be referenced anywhere in the content of an XML document - A parameter entity can be referenced only in a markup declaration - General form of declaration: <!ENTITY [%] entity_name "entity_value> e.g., <!ENTITY jfk "John Fitzgerald Kennedy> - A reference: &jfk; - If the entity value is longer than a line, define it in a separate file (an external text entity)
<!ENTITY entity_name SYSTEM "file_location">

SHOW planes.dtd

204

1/27/13

7.4 Document Type Definitions (continued)

- XML Parsers - Always check for well formedness - Some check for validity, relative to a given DTD - Called validating XML parsers - You can download a validating XML parser from:
http://xml.apache.org/xerces-j/index.html

- Internal DTDs
<!DOCTYPE root_name [ ]>

- External DTDs
<!DOCTYPE XML_doc_root_name SYSTEM DTD_file_name>

Namespaces
When a tag set is available and appropriate for a parAcular XML document or class of documents, it is beeer to use it than to invent a new collecAon of element types. For example if we want to dene a markup language for furniture catalog with <chair>, <sofa>, and <table> tags. Sogware systems that process XML documents must be capable of unambiguously recognizing the element names in those documents. The soluAon is to use XML namespace
CollecAon of element and aeribute names used in XML documents. The name of a namespace usually has the form of a uniform resource idenAer (URI) However, the tag <table> is used in XHTML

205

1/27/13

Declaring Namespaces
Namespace for the elements and aeributes of the hierarchy rooted at a parAcular element is declared as the value of the aeribute xmlns. The form of a namespace declaraAon for an element is
<element_name xmlns[:prex] = URI> Ex: for xhtml
<html xmlns = hep://www.w3.org/1999/xhtml>

Why using prex? Example:

The prex, if included, is the name that must be aeached to the names in the declared namespace. If the prex is not included, the namespace is the default for the document. most URIs are too long URI includes characters that are invalid in XML <WebCourse xmlns:webc = hep://eng.najah.edu/ce/webc> Within the WebCourse element, including all of its children elements, the names from the given namespace must be prexed with webc, as in the following element

Prex and default namespace

If an element has more than one namespace declaraAon, they are declared as in the following example:
<WebCourse xmlns:webc = hep://eng.najah.edu/ce/webc xmlns:html= hep://www.w3.org/1999/xhtml>

One of the namespaces can be specied as the default by omipng the prex in any namespace declaraAon.

206

1/27/13

XML Schemas
Problems with DTDs: XML Schema has Two purposes:
Syntax is dierent from XML - cannot be parsed with an XML parser. DTDs do not allow specicaAon of parAcular kinds of data Specify the structure of its instance XML documents Specify the data type of every element and aeribute of its instance XML documents

An XML schema is an XML document, so it can be parsed with an XML parser. The content of a specic element can be required to be any one of 44 dierent data types. The user can dene new types with constraints on exis)ng data types.
For example, a numeric data value can be required to have exactly seven digits.

Dening a Schema
XML schemas are namespace centric. Schemas themselves are wrieen with the use of a collecAon of tags, or a vocabulary, from a namespace that is, in eect, a schema of schemas. The name of this namespace is hep://www.w3.org/2001/XMLSchema. Contains many elements such as element, schema, sequence, and string. Every schema has schema as its root element with three aeributes.
Namespace of the schema elements Namespace of the document instances elements Level of the namespace

207

1/27/13

Dening a Schema cont.

Schema element species the namespace for the schema
It ogen also species a prex that will be used for the names in the schema. xmlns:xsd = hep://www.w3.org/2001/XMLSchema

The name of every top-level (not nested) element that appears in a schema is placed in the target namespace, which is specied by assigning a namespace to the target namespace aeribute:
targetNamespace = hep://cs.uccs.edu/planeSchema

Ton include all aeributes and nested elements in the namespace

elementFormDefault = qualied

The default namespace must also be specied

xmlns = "hep://cs.uccs.edu/planeSchema"

Example schema element

A complete example of a schema element: <xsd:schema <!-- Namespace for the schema itself --> xmlns:xsd = "hep://www.w3.org/2001/XMLSchema <!-- Namespace where elements dened here will be placed --> targetNamespace ="hep://cs.uccs.edu/planeSchema" <!-- Default namespace for this document -->

xmlns = "hep://cs.uccs.edu/planeSchema" <!-- Next, specify non-top-level elements to be in the target namespace --> elementFormDefault = "qualied">

208

1/27/13

Example

NoAce that the name schema in this tag name does not need to be prexed because its namespace is now the default. However, all of the names being created by this schema must be prexed, both in the schema and in its instances.

Dening a Schema Instance

The root element must specify the namespaces it uses
The default namespace The standard namespace for instances XMLSchema-instance The locaAon where the default namespace is dened, using the schemaLocaAon aeribute, which is assigned two values

<planes xmlns = "hep://cs.uccs.edu/planeSchema" xmlns:xsi =hep://www.w3.org/2001/XMLSchema- instance" xsi:schemaLocaAon = "hep://cs.uccs.edu/planeSchema planes.xsd" >

209

1/27/13

Data Type Categories

XMLS denes over 40 data types:

Simple (strings only, no aeributes and no nested elements) Complex (can have aeributes and nested elements) PrimiAve: string, Boolean, oat, Derived: byte, decimal, posiAveInteger,

User-dened (derived) data types specify constraints on an exis5ng type (the base type) Constraints are given in terms of facets totalDigits, maxInclusive, etc.

7.6 XML Schemas (continued)

- Defining an instance document - The root element must specify the namespaces it uses 1. The default namespace 2. The standard namespace for instances (XMLSchema-instance) 3. The location where the default namespace is defined, using the schemaLocation attribute, which is assigned two values
<planes xmlns = "http://cs.uccs.edu/planeSchema" xmlns:xsi = http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation = "http://cs.uccs.edu/planeSchema planes.xsd" >

- Data Type Categories 1. Simple (strings only, no attributes and no nested elements) 2. Complex (can have attributes and nested elements)

210

1/27/13

7.6 XML Schemas (continued)

- XMLS defines 44 data types - Primitive: string, Boolean, float, - Derived: byte, decimal, positiveInteger, - User-defined (derived) data types specify constraints on an existing type (the base type) - Constraints are given in terms of facets (totalDigits, maxInclusive, etc.) - Both simple and complex types can be either named or anonymous - DTDs define global elements (context is irrelevant) - With XMLS, context is essential, and elements can be either: 1. Local, which appears inside an element that is a child of schema, or 2. Global, which appears as a child of schema

7.6 XML Schemas (continued)

- Defining a simple type: - Use the element tag and set the name and type attributes
<xsd:element name = "bird" type = "xsd:string" />

- An instance could have: - Element values can be constant, specified with the fixed attribute
fixed = "three-toed <bird> Yellow-bellied sap sucker </bird>

- User-Defined Types - Defined in a simpleType element, using facets specified in the content of a restriction element - Facet values are specified with the value attribute

211

1/27/13

7.6 XML Schemas (continued)

<xsd:simpleType name = "middleName" > <xsd:restriction base = "xsd:string" > <xsd:maxLength value = "20" /> </xsd:restriction> </xsd:simpleType>

- There are several categories of complex types, but we discuss just one, element-only elements - Element-only elements are defined with the complexType element - Use the sequence tag for nested elements that must be in a particular order - Use the all tag if the order is not important

7.6 XML Schemas (continued)

<xsd:complexType name = <xsd:sequence> <xsd:element name type <xsd:element name type <xsd:element name type <xsd:element name type </xsd:sequence> </xsd:complexType> "sports_car" > = = = = = = = = "make" "xsd:string" "model " "xsd:string" "engine" "xsd:string" "year" "xsd:string" /> /> /> />

- Nested elements can include attributes that give the allowed number of occurrences (minOccurs, maxOccurs, unbounded) SHOW planes.xsd and planes1.xml - We can define nested elements elsewhere
<xsd:element name = "year" > <xsd:simpleType> <xsd:restriction base = "xsd:decimal" > <xsd:minInclusive value = "1990" /> <xsd:maxInclusive value = "2003" /> </xsd:restriction> </xsd:simpleType> </xsd:element>

212

1/27/13

7.6 XML Schemas (continued)

- The global element can be referenced in the complex type with the ref attribute
<xsd:element ref = "year" />

- Validating Instances of XML Schemas - One validation tool is xsv, which is available from:
http://www.ltg.ed.ac.uk/~ht/xsv-status.html

- Note: If the schema is incorrect (bad format), xsv reports that it cannot find the schema

7.7 Displaying Raw XML Documents

- An XML browser should have a default style sheet for an XML document that does not specify one - You get a stylized listing of the XML SHOW planes.xml

7.8 Displaying XML Documents with CSS

- A CSS style sheet for an XML document is just a list of its tags and associated styles - The connection of an XML document and its style sheet is made through an xml-stylesheet processing instruction
<?xml-stylesheet type = "text/css" href = "mydoc.css"?>

SHOW planes.css and run planes.xml

7.9 XSLT Style Sheets

- XSL began as a standard for presentations of XML documents - Split into three parts: - XSLT Transformations - XPATH - XML Path Language - XSL-FO - Formatting objects - XSLT uses style sheets to specify transformations

213

1/27/13

7.9 XSLT Style Sheets (continued)

- An XSLT processor merges an XML document into an XSLT document (a style sheet) to create an XSL document - This merging is a template-driven process - An XSLT style sheet can specify page layout, page orientation, writing direction, margins, page numbering, etc. - The processing instruction we used for connecting a XSLT style sheet to an XML document is used to connect an XSLT style sheet to an XML document
<?xml-stylesheet type = "text/xsl" href = "XSLT style sheet"?>

- An example:

<?xml version = "1.0" encoding = "utf-8 ?> <!-- xslplane.xml --> <?xml-stylesheet type = "text/xsl" href = "xslplane.xsl" ?> <plane> <year> 1977 </year> <make> Cessna </make> <model> Skyhawk </model> <color> Light blue and white </color> </plane>

7.9 XSLT Style Sheets (continued)

- An XSLT style sheet is an XML document with a single element, stylesheet, which defines namespaces
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Format" xmlns = http://www.w3.org/1999/xhtml>

- If a style sheet matches the root element of the XML document, it is matched with the template:
<xsl:template match = "/>

- XSLT documents include two different kinds of elements, those with content and those for which the content will be merged from the XML doc - Elements with content often represent HTML elements
<span style = "font-size: 14"> Happy Easter! </span>

214

1/27/13

7.9 XML Transformations and Style Sheets (continued)

- XSLT elements that represent HTML elements are simply copied to the merged document - The XSLT value-of element - Has no content - Uses a select attribute to specify part of the XML data to be merged into the new document - The value of select can be any branch of the document tree SHOW xslplane1.xsl and display xslplane.xml - xslplane1.xsl is more complex than necessary SHOW xslplane2.xsl - The XSLT for-each element - Used when an XML document has a sequence of the same elements SHOW xslplanes.xml, xslplanes.xsl & display
<xsl:value-of select = CAR/ENGINE" />

7.10 XML Processors

- Purposes: 1. Check the syntax of a document for wellformedness 2. Replace all references to entities by their definitions 3. Copy default values (from DTDs or schemas) into the document 4. If a DTD or schema is specified and the processor includes a validating parser, the structure of the document is validated - Two ways to check well-formedness: 1. A browser with an XML parser 2. A stand-alone XML parser - There are two different approaches to designing XML processors: - SAX and the DOM approach

215

1/27/13

7.10 XML Processors (continued)

- The SAX (Simple API for XML) Approach: - Widely accepted and supported - Based on the concept of event processing: - Every time a syntactic structure (e.g., a tag, an attribute, etc.) is recognized, the processor raises an event - The application defines event handlers to respond to the syntactic structures - The DOM Approach - The DOM processor builds a DOM tree structure of the document (Similar to the processing by a browser of an XHTML document) - When the tree is complete, it can be traversed and processed

7.10 XML Processors (continued)

- Advantages of the DOM approach: 1. Good if any part of the document must be accessed more than once 2. If any rearrangement of the document must be done, it is facilitated by having a representation of the whole document in memory 3. Random access to any part of the document is possible 4. Because the whole document is parsed before any processing takes place, processing of an invalid document is avoided - Disadvantages of the DOM approach: 1. Large documents require a large memory 2. The DOM approach is slower - Note: Most DOM processors use a SAX front end

216

1/27/13

7.10 Web Services

- The ultimate goal of Web services: - Allow different software in different places, written in different languages and resident on different platforms, to connect and interoperate - The Web began as provider of markup documents, served through the HTTP methods, GET and POST - An information service system - A Web service is closely related to an information service - The original Web services were provided via Remote Procedure Call (RPC), through two technologies, DCOM and CORBA - DCOM and CORBA use different protocols, which defeats the goal of universal component interoperability - There are three roles required to provide and use Web services: 1. Service providers 2. Service requestors 7.10 Web Services (continued) 3. A service registry - Web Service Definition Language (WSDL) - Used to describe available services, as well as of message protocols for their use - Universal Description, Discovery, and Integration Service (UDDI) - Used to create Web services registry, and also methods that allow a remote system to determine which services are available - Standard Object Access Protocol (SOAP) - An XML-based specification that defines the forms of messages and RPCs - Supports the exchange of information among distributed systems - A SOAP message is an XML document that includes an envelope - The body of a SOAP message is either a request or a response

217