Lecture 12 Log into a lab machine or csserver (remotely) Announcements:
advertisement
Lecture 12 ● Log into a lab machine or csserver (remotely) ● Announcements: ● ● ● ● Project 3 due date extended to Thursday (10/8) Thursday lecture period will be a workday. Attendance is expected if Project 3 has not been submitted. Project 4 (PHP) will be posted on Thursday Questions? Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 1 Outline ● ● ● Basic Web Stuff ● Pages on csserver ● Basic HTML PHP & the Web ● Forms ● Dynamic content HTML5 references: HW3S, CSW3 Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 2 Web Pages on csserver ● ● ● Every user on csserver can create personal webpages by creating a www_home subdirectory in her home directory. Browser access to this webspace is given by http://csserver.evansville.edu/~username/ (note the tilde ~) Webspace directories (including the home directory) must have at least all executable permissions set and often have all read permissions set as well. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 3 Web Pages on csserver ● ● All pages must have all read permissions set. The default webpage for any directory is named "index" with one of the recognized suffixes, e.g., index.html, index.php, or even index.txt. If there is no index page, then a directory URL will return an error on most webservers. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 4 HTML5 ● ● ● HTML is the original markup language used on the web. The current standard is HTML5. HTML5 defines a clean distinction between ● Structural semantics – also called HTML5 ● Presentation – CSS (Cascading Style Sheets) ● Behavior – Javascript (executed by web browser) HTML5 markup is basically the union of HTML4 and XHTML, so syntax is fairly lax. It deprecates some presentational tags and attributes to be handled by CSS. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 5 HTML Documents ● All HTML documents are structured as follows: <! DOCTYPE html> <html> <head> <!­­ This is a comment ­­> <!­­ Meta­data goes here ­­> </head> <body> <!­­ Page content goes here ­­> </body> </html> Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 6 HTML Tags ● ● Items in <>'s are called tags. Most tags come in open/close pairs with the close tag prefixed with '/'. A few tags are self-closing of the form <tag />, such as <br /> to produce a line break. Open/close tags must be properly nested. Some tags may be used only within certain tags. E.g., <li></li> tags can only be used within list tags. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 7 HTML Meta-Data Tags ● Here are some common meta-data tags that go in the <head></head> part of a document <title>Title of Page</title> <meta charset="utf­8" /> (or other charset) <link … /> for items like stylesheets, favicons <style></style> for page specific CSS Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 8 HTML Body Tags ● Here are some common tags that are used to structure content in the <body></body> part of a document: <h1>Major heading</h1> <h2>Subheading</h2>, etc., to <h6></h6> <p></p> for paragraphs <ul></ul> for unordered (bulleted) lists <ol></ol> for ordered (numbered) lists <li></li> for list items <img src="..." /> for images Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 9 HTML Body Tags ● Here are some common tags that are used to structure content in the <body></body> part of a document: <h1>Major heading</h1> <h2>Subheading</h2>, etc., to <h6></h6> <p></p> for paragraphs <ul></ul> for unordered (bulleted) lists <ol></ol> for ordered (numbered) lists <li></li> for list items <img src="..." /> for images <a href="...">Link</a> Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 10 HTML Body Tags ● Here are some tags for grouping items: <div></div> for structural grouping <span></span> mostly used for style grouping <table></table> for tables <tr></tr> for table rows <th></th> for table headings <td></td> for table data Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 11 HTML Body Tags ● Here are a few leftover, mostly presentation tags: <strong>bold text</strong> <em>italic text</em> <br /> for newlines <hr /> for horizontal rule (line) ● The <script></script> tag is used to enclose Javascript code Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 12 HTML Forms ● 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 to run when the form is submitted. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 13 Form Elements: Input ● Input element has a type attribute ● One line of text input <input type="text" name="fname" size="65" /> ● Submit button <input type="submit" value="Submit" /> ● ● Name attribute is variable name associated with the input value Value attribute is text label for button type inputs Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 14 Form Elements: Textarea ● Textarea element is used to process multi-line text input: <textarea cols="80" rows="3" name="address"> <!­­ Default value ­­> </textarea> Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 15 Form Elements: Radio Buttons ● Radio buttons <input type="radio" name="size" value="Small" />Small <input type="radio" name="size" value="Large" checked="checked" />Large ● Buttons tied by name attribute. Only one can be checked. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 16 Form Elements: Check Boxes ● Check boxes <input type="checkbox" name="toppings[]" value="Pepperoni" />Pepperoni <input type="checkbox" name="toppings[]" value="Sausage" />Sausage ● Boxes tied by name attribute. Usually us an array so checked items become array elements. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 17 Form Elements: Select Boxes ● Pull-down menu <select name="size"> <option value="Large" selected="selected">Large</option> </select> ● Multi-selection <select name="toppings[]" multiple="multiple"> <!­­ options the same as above ­­> </select> Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 18 What is CGI? ● ● ● CGI (Common Gateway Interface) programs run on the web server. The program's standard output is sent to the browser. CGI programs are used to process web form data. The web server must be configured to run CGI programs. They are not permitted on all sites. Web servers usually require that CGI programs live in a particular directories and have certain filename extensions (.cgi for example). Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 19 What 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. CGI script must decode the input data into a usable form. After processing the data, a response page must be sent by writing HTML5 code to standard output. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 20 Why Use PHP? ● ● ● CGI programs can be written in any language (Shell, Perl, C, C++, Java, etc.) PHP was designed specifically for CGI use. It has direct support for accessing form data sent from a browser to the server. In addition, PHP can be used to generate content for any webpage, not just a response to form data. The PHP interpreter runs as part of the webserver, so PHP code islands can be embedded into any webpage. Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 21 Form Values ● Posted form input is processed and placed in the superglobal array $_POST. This is an associative array with the name attribute values as keys. Generally, it is a good idea to copy the values into local variables. And also convert any embedded HTML to prevent injections. $fname = $htmlspecialchars($_POST['fname']); $size = $htmlspecialchars($_POST['size']); Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 22 Programming Notes ● ● Errors in CGI PHP code execution are written to standard output, so they show up in the response page along with whatever HTML is rendered. When a PHP webpage does not render at all, there usually is a syntax error. The error messages are put in the webserver error log. On csserver this is /var/log/apache2/error.log. (This file is usually not readable by all, but we try to keep it open manually.) Tuesday, October 6 CS 375 UNIX System Programming - Lecture 12 23
