September 1, 2009 CS 350 Lecture 02 1CS 350: Computer/Human InteractionLecture 02 Overview●Basic XHTML structural and form elements●Using PHP for CGI scripting●PHP data types and operations●PHP control structures●References: HRAG, HW3S, HVAL, PINT, PZND, PW3SSeptember 1, 2009 CS 350 Lecture 02 2CS 350: Computer/Human InteractionHTML, XHTML, XML???●HTML is the original markup language used on the web. XML is a more general markup languages that can be used to describe data as well as text. XHTML is HTML defined in terms of XML. XHTML is almost identical to HTML 4.01. XHTML is stricter and cleaner than HTML and was intended to replace HTML.●W3C is working on HTML 5 to unify HTML 4 and XHTML 1.September 1, 2009 CS 350 Lecture 02 3CS 350: Computer/Human InteractionHTML and XHTML Differences●Documents must be well-formed and elements must be properly nested●Tags must be lower case.E.g. <body> not <BODY>●All elements must be closedE.g. <p> … </p>●Empty elements must be closedE.g. <br />September 1, 2009 CS 350 Lecture 02 4CS 350: Computer/Human InteractionHTML and XHTML Differences●Numeric attribute values must be in quotes. E.g.<img src="button.png" height="50" />NOT<img src="button.png" height=50 />●Presentation attributes have been deprecated. E.g. <p align="center"> Style sheets are recommended instead.●Validate at http://validator.w3.orgSeptember 1, 2009 CS 350 Lecture 02 5CS 350: Computer/Human InteractionWeb Page Format<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <title>Title of page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <!-- This is a comment. Page contents go here. --></body></html>September 1, 2009 CS 350 Lecture 02 6CS 350: Computer/Human InteractionIn-class Exercise 1●Log into csserver and create directory www_home/cgi-bin●Copy file ~hwang/cs350/lecture02.tar to this directory and untar it. These files are example forms and PHP scripts.●We will edit index.html which contains the HTML code on the previous slide.September 1, 2009 CS 350 Lecture 02 7CS 350: Computer/Human InteractionText FormattingThe following are XHTML phrase elements: <p>...</p>Defines a paragraph<br />Forces a line break<hr />Draws a horizontal line<pre>...</pre>Preformatted text (preserves line breaks)<h1>...</h1>Largest header text<h6>...</h6><strong>... </strong><em>...</em>Smallest header textEmphasis/boldEmphasis/italicSeptember 1, 2009 CS 350 Lecture 02 8CS 350: Computer/Human InteractionLinks●Link to another page<a href="http://www.google.com/">Google</a>●Relative link to another page in the same directory<a href="pizza1.html">Purple Pizza Parlor Order Form, Version 1</a>●Link to a different spot on the same page<a href="#Refs">Jump to References</a>…<h2 id="Refs">References</h2>September 1, 2009 CS 350 Lecture 02 9CS 350: Computer/Human InteractionImages●Display an image in a web page<img src="pizza-logo.png" width="50" height="50" alt="Pizza" />●Use an image as a link<a href="pizza1.html"><img src="pizza- logo.png" width="50" height="50" alt="Pizza Logo" /></a>●Width and height attributes are optional, but it is a good practice to include them, so browsers can render the page more quickly.September 1, 2009 CS 350 Lecture 02 10CS 350: Computer/Human InteractionForms●Forms are used to collect data from users<form action="URL" method="post"> <!-- form elements can only appear in a form --></form>Where URL is the location of the CGI script●Look at file pizza1.htmlSeptember 1, 2009 CS 350 Lecture 02 11CS 350: Computer/Human InteractionInput Element●Input element has a type attribute–One line of text input<input type="text" name="name" size="65" />–Submit button<input type="submit" value="Submit" />●Name attribute is associated with the input value●Value attribute is text label for button type inputsSeptember 1, 2009 CS 350 Lecture 02 12CS 350: Computer/Human InteractionTextarea Element●Textarea element is used to process multi-line text input<textarea cols="80" rows="3" name="address"> <!-- Default value --></textarea>September 1, 2009 CS 350 Lecture 02 13CS 350: Computer/Human InteractionWhat is CGI?●CGI (Common Gateway Interface) programs run on the web server and are used to process web form data. The program's standard output is sent to the browser.●The web server must be configured to run CGI programs. They are not permitted on all sites.September 1, 2009 CS 350 Lecture 02 14CS 350: Computer/Human InteractionWhat is CGI?●Web servers usually require that CGI programs live in a particular directory and have certain filename extensions (e.g. .cgi or .php).●On csserver CGI scripts must be in: /home/username/www_home/cgi-bin●CGI programs can be written in any language (shell, C, C++, Java, Perl, etc.) We will use only PHP.September 1, 2009 CS 350 Lecture 02 15CS 350: Computer/Human InteractionWhat is CGI?●When a form is posted, each element's data is sent as encoded "name=value" pairs separated by &.●A CGI script receives this data as one long string through standard input.September 1, 2009 CS 350 Lecture 02 16CS 350: Computer/Human InteractionWhat is CGI?●CGI script must decode the input data into a usable form. Fortunately, PHP does this automatically.●After processing the data, a response page must be sent by writing XHTML code to standard output.September 1, 2009 CS 350 Lecture 02 17CS 350: Computer/Human InteractionWhat is PHP?●PHP is a portable (UNIX, Windows, Mac) scripting language with C++-like syntax with more high-level features than C++ especially designed for web programming.●PHP scripts are embedded within XHTML code (called code islands), which allows the static parts of a web page to be coded naturally.●Look at file pizza1.phpSeptember 1, 2009 CS 350 Lecture 02 18CS 350: Computer/Human InteractionBasic PHP Script<!-- HTML code may be here --><?php // This is a comment // PHP code goes here?><!-- More HTML code may be here -->●Output from the script replaces the script. When used as a webpage, the browser interprets it. PHP can be used stand-alone, if the CLI (Command Line Interpreter) is installed.September 1, 2009 CS 350 Lecture 02 19CS 350: Computer/Human InteractionPHP Variables●Seven data types: integer,
View Full Document
Unlocking...