Lecture 13 Log into Linux Reminder: Project 3 due next Tuesday today Questions?
Lecture 13
Log into Linux
Reminder: Project 3 due next Tuesday today
Questions?
Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13 1
Outline
Basic Web Stuff
Pages on csserver
Basic HTML
PHP & the Web
Forms
Dynamic content
Some HTML5 references have been added to the supplemental references page.
Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 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.
4 Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13
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, February 25 CS 375 UNIX System Programming - Lecture 13 5
HTML Documents
All HTML documents are structured as follows:
<! DOCTYPE html>
<html>
<head>
<! This is a comment >
<! Metadata goes here >
</head>
<body>
<! page content goes here >
</body>
</html>
Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 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="utf8" /> (or other charset)
<link … /> for items like stylesheets, favicons
<style></style> for page specific CSS
8 Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13
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, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 13
Form Elements: Input
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 inputs
Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13 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, February 25 CS 375 UNIX System Programming - Lecture 13 15
Form Elements:
Radio Buttons, Check Boxes
Radio buttons
<input type="radio" name="size"
value="Small" />Small
<input type="radio" name="size"
value="Large" checked="checked"
/>Large
Check boxes
<input type="checkbox
name="toppings[]" value="Pepperoni"
/>Pepperoni
Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13 16
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, February 25 CS 375 UNIX System Programming - Lecture 13 17
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, February 25 CS 375 UNIX System Programming - Lecture 13 18
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, February 25 CS 375 UNIX System Programming - Lecture 13 19
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, February 25 CS 375 UNIX System Programming - Lecture 13 20
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.
$name = $_POST['name'];
$size = $_POST['size'];
21 Tuesday, February 25 CS 375 UNIX System Programming - Lecture 13
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, February 25 CS 375 UNIX System Programming - Lecture 13 22
