Put this week's work into a new folder
This lab sheet has five parts. So it's important to make good progress from the outset.
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.
lab4 folder, create a Web page in a file called
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:
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
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.
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
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
Modify your program further so that, in a paragraph beneath the
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
haiku.php, like you did
Check the source and validate.
Take a copy of buggy.phps. Store it in your
lab4 folder, but rename it to
N.B. This is easier said than done. Here's what to do:
"buggy.php", including the double-quotation marks. Ignore where it says Save as type:.
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.
Back to Web sites…
The following files are provided:
Save a copy of these files in your
(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;
(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:
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
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.