CS1109 Lab 4

Put this week's work into a new folder public_html\cs1109\lab4.

This lab sheet has five parts. So it's important to make good progress from the outset.

This week's work: Part 1

In the first three parts of this lab, you'll write some PHP. It won't be anything very difficult :) The real purpose is for you to get used to writing PHP scripts and running them on our computers. Together, the first three parts should take you less than 45 minutes.

In your, lab4 folder, create a Web page in a file called fleas.php. Between the body tags, put a snippet of PHP. Your PHP is going to output the world's shortest poem (which is called Fleas, by the way). This is it:


Had 'em

Make each line of the poem a separate paragraph.

Save the file.

Now we want to run it.

What you've often done previously, when we were writing static Web pages such as mk.html, was simply to double-click the file icon. As you know, this opened your browser and it would be displaying the appropriate Web page.

This won't work for PHP scripts. (Try it if you want.) The reason is: this loads the web page directly into the browser.

But what we need (as explained in the lecture) is to send a request to the server, and the server will then get the PHP processor to run the script. (Remember all that stuff about copy mode and interpret mode…).

So what you have to do is bring up your browser and type the URL into the Location box. The URL you should type will be like this one:


Obviously, you use your own user id in place of userid.

If all is well, the poem will appear in the browser.

If instead an error message appears, check fleas.php. (Hint 1: semicolons? Hint 2: apostrophes?) If the hints don't solve it, ask for help.

If all is well, use your browser to view the source and validate it.

This week's work: Part 2

Sorry if you feel insulted by how easy the programming is, but I really want you to practice running PHP scripts, so that it becomes second-nature. In which case…

Still in your lab4 folder, create another Web page, this time in a file called haiku.php.

Within the body, use a sequence of five echo commands to output the following poem as an unordered list:

Modify your program so that it also puts an id of haiku on the ul.

Modify your program further so that, in a paragraph beneath the ul, it uses a further one or more echo commands to output the date (but not the time) in the format DD/MM/YYYY. The date should be done dynamically, not by hard-coding today's date.

Run haiku.php, like you did fleas.php. Check the source and validate.

This week's work: Part 3

Take a copy of buggy.phps. Store it in your lab4 folder, but rename it to buggy.php.

N.B. This is easier said than done. Here's what to do:

  1. Right-click on the link above.
  2. From the menu, choose Save Link As. This brings up the Save As dialog box.
  3. In this dialog box, go to your lab4 folder.
  4. Where it says File name: type "buggy.php", including the double-quotation marks. Ignore where it says Save as type:.
  5. Click the Save button.

Quick quiz. You might be wondering why I called this file buggy.phps instead of buggy.php. Surely, the latter would have been more convenient. Work out the reason and check you're right by asking me or one of my helpers.

buggy.php contains a PHP script that has compile-time bugs. Run it now to confirm this.

Now fix the bugs. After you fix each one, re-run the script. Keep doing this until you have removed all bugs. Be warned that sometimes the line number given in an error message may be misleading: the error may actually occur earlier in the file.

Also make sure that the output validates. Fix the PHP script so that it does.

This week's work: Part 4

Back to Web sites…

The following files are provided:

Save a copy of these files in your cs1109\lab4 folder. (Again, right click on the link, then choose Save Link As.)

Do not modify the HTML in any way.

The goal is to extend skank1.css in order to give the Web page a three-column, liquid, centred layout. N.B. N.B. N.B. not fixed-width; not elastic; not responsive. (And I'd prefer to see floating, not positioning, to create the multi-column layout.)

In other words, you are going to be floating elements, but assigning widths using percentages.

One of the things you'll have to do is to work out the percentages. What you are told is that if the viewport (browser window) is 1000px wide, then the wrapper will be 750px wide, the nav will be 150px wide, the main will 450px wide, and the aside will be 150px wide, like so:

The nav is 150 pixels wide and to the left of the main, which is 450 pixels wide and to the left of the aside, which is 150 pixels wide. The content is 750 pixels wide when viewed in a 1000 pixel wide window.

This week's work: Part 5

Users who are blind enjoy Skanking Ireland too. But it turns out that the logical ordering of the elements in the page is not nav then aside then main. For screen readers, the logical ordering is main, then nav, then aside. A new version of the Web page has been created. It uses this new ordering. It also has an extra div, which encloses the main and the nav.

The new versions are here:

Save copies of these files in your cs1109\lab4 folder. Do not modify the HTML in any way.

Repeat part 4 of this lab sheet, i.e. extend skank2.css so that skank2.html has the same layout as depicted earlier.

Deadline for Parts 1, 2, 3, 4 and 5: 1pm, Tuesday 6th November.

If you have named your files and folders correctly, your work will be collected automatically at that time by my software.