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:
Adam
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:
http://cs1.ucc.ie/~userid/cs1109/lab4/fleas.php
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 fiveecho commands to output the following
poem as an unordered list:
Without flowing wine,
How to enjoy lovely
Cherry blossoms.
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:
Right-click on the link above.
From the menu, choose Save Link As. This brings up the Save As
dialog box.
In this dialog box, go to your lab4 folder.
Where it says File name: type "buggy.php", including the
double-quotation marks. Ignore where it says Save as type:.
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.
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:
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.
