CS 207, Lab #6

For 22 February 2019

By now, you are all working on your own unique projects, so I can't say, in general, ""Do an IFRAME this week." So, using the philosophy of "incremental development," decide what the next thing you can do that will make your site more useful, and next week, the thing after that...  Tell me what your goal is, if it has changed or just decided on it.

Form a group?

Discuss with your classmates if you want to do something togther and work on it as a group. You can probably do more that way, if you can coordinate who is doing what. For instance, someone might be better with SQL, someone else with using php to produce HTML tables, and a third one with CSS. Agree upon your goals. -- In software engineering, this is called "establishing requirements."

Tell me about what you did new this week, or what your group plans, using the form below.

In brief:

  1. Add some functionality to your site, which wasn't there before. (This is an ongoing requirement!) Tell me what it is, and how to use it.
  2. (Optional idea) Use an IFRAME (or frames) to change part of a page.
  3. Make your site easy to use and navigate, if this is not yet the case. (This is an ongoing requirement!)
  4. If you failed to do this last week: Validate one page for correctness of the HTML and CSS.

IFRAME and partial changes.

There are at least three ways to change part of a page. The oldest is using frames, the newest is called AJAX. In between is the lightweight IFRAME, see my example

An IFRAME is cousin of an IMG. It occupies space, given by width and height (can be % of window), can be floated, and has a SRC. The SRC is usually an HTML page. The SRC can be changed by clicking a link (as usual), but also by clicking a link on the isurrounding page, where TARGET is given as the NAME of the IFRAME.

But Beware the "frame trap". If you design a page to be shown in a frame, and it has a link to an external page (such as www.ubishops.ca), That link needs: target="_TOP" or else it will appear inside the frame. _TOP means the whole of the current window (tab). Other special targets:  "_BLANK" means open a new window (or tab, depending on browser). Any other name you choose, (not a frame name) acts like _BLANK the first time it is used, if used thereafter, it refers to the previously opend window or tab. This is useful if you don't want to keep making more tabs!

Add functionality

Example: To realistically allow a logged in customer to order a music CD, You would need a page that lists all or part of the available ones, and also has access to the identity of the customer. This might entail changes to your database, or setting a cookie, or creating a form to search the product table.

Ease of site navigation

Think about how users can find their way among your numerous pages. If someone takes the trouble to register, will they then be able easily to sign in next time? Is their password secure? What if they forget? Once signed in, can you tell, for the various other pages, that this is so? (I wouldn't want to have to give my password for each new page, for example.)

Header, Footer

Do you find yourself copying the same block of HTML at the top and bottem of every new page?? If so, you could consider putting these blocks of text in their own files, and using PHP to include() them. These files may even include some php. A footer, for example, could include a link back to your home page, when the (footed) page* was last updated, and the oft-forgotten </body></html>

* in this case the page is php, so you need not the date of the footer, but of the including page (when the script was last updated) , see end of "Date & Time" in the notes (coursepack) about p 57.

Remember that title should be unique. If you use a header file, you'll need to supply that before the include, something like this:

$title="Aada's checkout page";
	// and in myheader:
<TITLE><?php print $title; ?> </TITLE> 

Validating a page

Do this if you didn't do it last week.

The standards for HTML and CSS are published by the World Wide Web Consortium, w3. Your pages may be displayed as you wish by a browser, but do they conform to the standard? If they do, there is a better chance that they will appear correctly in all browsers.
(Unfortunately, one of the most widely used browsers does not always comply with the standards, even though everybody benefits by the existence of a standard.)

There are on-line validation services for both html and css at www.w3.org.  For html, you need to specify DOCTYPE, since text/html can be either HTML (version 4.01 is a standard) or HTML5.

Pick a page with both html and css in it, preferably your index.html, and put at the top one of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You should be using HTML5, so use the second one. Then go to each verifier page, and put in the URL of your page on Osiris.

  1. For HTML, http://validator.w3.org/
  2. for CSS:  http://jigsaw.w3.org/css-validator/

You will probably find some errors, and perhaps many warnings. Try to understand them, and correct what you can. If you get a successful validation, you get a "sticker", a validator image that you can put on your page if you want to. In any case, tell me the page you attempted to validate, in the form below.

Use this form as often as you want if you have more pages to talk about.
Your Linux code
Name of a page: either that you validated, or where I should start looking for what's new. (For example, a form, rather than the PHP that processes it.)
What you did new this week, and who you will start working with, if a group: