CSCI110 Exercise 3: Server side scripting - PHP

CSCI110
Exercise 3: Server side scripting - PHP
The exercise
This exercise is to be completed in the laboratory and your completed work is to be
shown to the laboratory tutor. The work should be done in week-6 but completion by
the end of week-9 is acceptable. (No marks unless demonstrated by week 9.) The
completed exercise is worth 4 marks. When you have demonstrated your work to the
laboratory tutor, you should sign off on the tutor’s marking sheet.
Overview
This exercise has HTML data entry forms sending data to simple server-side PHP
scripts. The little applications here have no need to update persistent data, and so no
need for a database (which we probably won’t have covered in lectures at the time
you do the exercise).
One of the examples does use input from server files. Generally, file storage is
problematic with web applications. Read access isn’t too difficult – you simply have
to allocate the appropriate file access permission; the problems come with write
access. If files have to be updated you encounter all sorts of problems relating to
attempts at concurrent updates; databases offer much better mechanisms for dealing
with concurrency issues.
PHP is another scripting language akin to Javascript. So, you must expect all the
“sloppiness” of a scripting language – no real data types, no need to declare variables,
etc. Again, the coding will seem like a simplified version of the C++ that you did in
CSCI114. You define global variables and functions. Functions have sequences of
statements, conditionals, and loops. You do have a little “main-line” code (there is no
main() function as such) which is often embedded in amongst some standard HTML
markup and content text. One thing that will seem odd is that PHP variables have
names that start with a dollar ‘$’ character (this feature is inherited from the Perl
language).
There is considerable flexibility in code layout. Some of these examples will use a
style where PHP globals and functions are defined in (or before) the section
of the page; HTML markup, content text and snippets of embedded “main-line” PHP
code will follow. Others consist largely of PHP code with the HTML and static
content text being generated through echo (print) statements. The style with code
embedded in HTML helped popularize PHP and is useful when the amount of code is
small. In more complex applications, there is much more code than HTML and
content text; in such more complex cases, the coding style dominates.
The web applications that you create in this exercise are:
©nabg

1. Fortune
A PHP script that requires no input; it is invoked via a GET operation (type its
URL in the browser address field); it returns an aphorism – some amusing
saying to brighten the day of the user.
2. PieChart
A static HTML form is used to enter category names and values that are
submitted to a PHP script which responds with a page that is simply a graphic
pie-chart of the data.
3. Hangman
A web-based version of the word-guessing game.
This example introduces “state” – the state of the game, what letters have you
picked, how close are you to being hung, what parts of the word have you
matched.
The lectures may not have covered the better mechanisms for maintaining state
data at the time you do this exercise. Consequently, state maintenance is done
using the clumsy but simple “hidden fields” approach.
©nabg

Caution! You are now working with both PHP and Javascript. It is not uncommon
to have a dynamic web-page (.php file type) that contains both PHP code (that
generates the dynamic content that will be sent to the client) and some Javascript
(that gets sent to the client to be interpreted by the browser). It is easy to get
confused and try to call a PHP function in Javascript or try to use a Javascript object
in your PHP code. You are likely to do better if you put any Javascript in a separate
.js file identified by a link in the page header. Another thing – just remember that
variables that start with $ are for PHP, the variables without a $ are for Javascript.
Tasks
Fortune
1. Use NetBeans to create a new “PHP” project (“Exercise3”) inside your
public_html directory.
©nabg

2. NetBeans generates a file index.php with a little bit of starting HTML code
containing a block for some minimal amount of embedded PHP. Rename this file
as Fortune.php.
3. The “fortune” program works by having a collection of aphorisms (“wise or witty
sayings”) from which a particular example is chosen at random and returned in the
generated page.
The application requires a little PHP code in the section of the page – here
the collection of aphorisms will be defined along with a function that selects one
at random.
The body of the page involves a little HTML markup and standard content text
along with an embedded fragment of PHP that invokes the fortune selection
function and prints the result in the returned page.
Edit the HTML and content text:
4. The main part of the PHP code should be declared within a script
section in the part of the page:
©nabg

5. The code defines two PHP global variables – the initialized array $fortunes and an
integer $numfortunes representing the number of fortune messages.
The todaysFortune() function:
Specifies that it is using the global variables $numfortunes and $fortunes!
Uses PHP’s rand() function (http://au.php.net/manual/en/function.rand.php)
to pick from the collection.
Returns the selected message.
6. Pick your own selection of wise and witty sayings for the fortunes!
$fortunes = array(
"It has been discovered that C++ provides a remarkable facility for concealing the
trivial details of a program - such as where its bugs are.",
...
"Don't worry about avoiding temptation... as you grow older, it will avoid you.",
"Some people talk in their sleep. Lecturers talk while other people sleep."
);
7. Save, then aim your browser at http://localhost/~userid/Exercise3/Fortune.php and
you should receive your fortune:
8. Ask a friend for the URL of their fortune service (something like http://megapc16.cs.uow.edu.au/~xyz123/Exercise3/Fortune.php)
and try their service; let
them try yours.
Pie chart
9. In your NetBeans Exercise3 project create the HTML files PieForm.html, and
Errors.html, a Javascript file (checksubmit.js), and a “PHP file” (not a “PHP web
page”) called PieGraph.php.
©nabg

The “Errors” page will be displayed if the PieGraph script cannot process the data
for some reason – no data supplied, too much data supplied, non-numeric data in
the numerics field, or some other problem.
10. Edit the PieForm.html page (either entering all the HTML by hand or by using the
HTML palette in NetBeans) and create a form page like the following:
11. This form page should have a link to the checksubmit.js Javascript code file:
©nabg

12. There are three Javascript functions:
Function doReset() clears the numadded global, the values in the two text areas,
and the values in all the fields. (This function definition
is left as an exercise; you can clear all the form’s input fields by getting a
reference to the form object and invoking its built in rest() function; you have to
zero out the global variables used in your script.)
Function checkData() is called “onsubmit” and acts to prevent submission if there
are obvious problems with any of the data; if there are problems with data it
displays an alert with some explanatory message. It checks that at least one and at
most ten data pairs have been added and that the input field for the “Title” has
some text with alphanumeric characters and spaces. (This function definition is
left as an exercise.)
Function doAdd() is called when the Add Item button is used. It checks the input
data. If there are problems, an alert is displayed. If the data are valid, they are
added to the text areas.
The data checks make use of “Regular Expressions” (“regex”s). These get a brief
mention in the PHP lectures (and the PHP code for this example also uses regexs).
Regular expressions are covered properly at 200-level. Their use is easy – the
difficulty with them is defining the “patterns” that describe valid text data.
However, as noted in the PHP lectures, most of the time you are doing fairly
standard checks (e.g. “Does the string represent a decimal number with an
optional fraction part such as 7.1, 0.5, or 3?”). There are “cheat sheets” on the
web that give you the appropriate regex pattern for such checks. (There are
different regular expression grammars, but PHP and Javascript use very similar
forms derived from those originally created for Perl.)
©nabg

The code for doAdd() is:
13. At this point you should test you PieForm.html page and its associated Javascript
in a browser.
Try entering valid and invalid data and confirm that the data checking works.
Of course, nothing much happens if you submit the data as the server side script
hasn’t been written yet.
14. Get used to using Javascript debuggers!
Modify your script by introducing a deliberate error – at one of points where it
uses document.getElementById(…) try introducing a typing error (either in the
string naming the element or in the function name itself).
IE has a Javascript debugger (Tools/Development Tools menu).
©nabg

You have to install Firefox’s Firebug debugger from http://getfirebug.com/ .
Equivalent report from Firebug:
15. Remove your deliberate bug.
16. Implement the first part of the PHP script.
Never attempt to implement a complete script straight off; always work
incrementally, testing as you go.
The first part of the PHP script checks the data input and redirects the user to the
Errors.html page if something is wrong.
Weren’t the data checked by Javascript?
Checking on the client side with Javascript catches careless mistakes by
inattentive or dumb users (catch fools).
Checking on the server side catches hacker attacks (catch villains).
17. The checking part of the PHP script.
Pick up the strings with data in the form’s two textareas and the title input.
If any of these are empty – redirect user to error page.
The textareas were supposed to contain multiple lines – use split() to break
into arrays that will have an entry for each line.
The arrays for the category names and the numbers should have equal
numbers of entries – redirect user to error page if this isn’t so.
©nabg

There should be at least one and at most ten rows in these arrays – redirect
user to error page if too few or too many data rows.
Repeat those regex based checks – values in numbers array should match
regex for number, values in category names array should match regex for
name.
PHP’s regex checking doesn’t involve any “RegExp” objects – there is
instead a function that takes a pattern and a string and does the check.
Check the title.
Report success
18. My code was as follows (you may need to adjust to match the names that you
gave to fields in your form):
19. PHP’s rtrim() function removes trailing white space from a string. When you split
the contents of the textareas at newline characters, the “\n” characters are left
appended to the strings.
©nabg

You can lookup functions like rtrim() and split() at
http://www.php.net/manual/en/funcref.php
20. Try running your web application now. Submissions of valid data should result in
a page with “data ok”.
The only way that you will be able to feed bad data to your PHP script (and test its
error handling) will be to disable Javascript on the client (or comment out parts of
your Javascript code).
21. Once you have data checking implemented, continue by implementing the
graphics:
Remove all echo statements!
Change the response type to image/png
Allocate an image in memory for use with the GD graphics library – specify
number of pixels wide and high.
Create colours that will be used.
Create reference to a file with a “TrueType” font (find one first – on Windows
there will be some in C:\\Windows\\Fonts\\; on Linux, look for fonts in the lib
directory associated with your “Java Runtime Engine” (jre) – where that is will
be installation dependent).
Work out arc angles for the pie graph (CSCI114 level programming!).
Use GD graphics to draw text, pie slice arcs etc.
Convert in memory image into a coded stream for a png image that gets
returned to client.
22. My code for the first few steps was:
©nabg

You will need to append the lines that encode and send the image to the client:
(Those lines will go at the very end of your PHP script – after the code listed
below that actually generates the image. Put those lines in now, so that you can
test the production of a graphics response page with the title. Remember, all the
other code for the image goes before the line $imagpng().)
Remember also to change the value of the font directory – find some ttf fonts on
your system, use the directory where you found them.
23. Test the code implemented so far – submission from your PieForm.html should
produce a graphics response page with the title.
24. Calculate and plot the arc angles and display the legend with category names.
My code was:
©nabg

25. It should now all work.
(Actually, it’s a bit long for a single mainline PHP script. The code would be
better if it were broken down into functions. Remember this when doing
assignments – you will probably lose a mark for not using functions enough if you
submit code with a mainline this long.)
26. Tidy the code by breaking into functions. Retest in case you introduced any bugs
during your “refactoring”.
Hangman
27. Create a new PHP script, Hangman.php, and a text file words.txt (use “New
Empty File”) in your NetBeans Exercise 3 project.
©nabg

Add some words, one per line, to words.txt. (If you want interesting words for a
hangman game you can get sets from web sites relating to the Scrabble game –
just ask Google. I found a file with ~15000 words.) You should make your words
all lower case or all upper case.
28. The Hangman program will work as follows:
It will read in its collection of words from a file.
It will check whether its been called by “GET” or “POST”
“GET” means start a new game.
Randomly pick the index number for a word from the collection.
Return a web-form page showing an empty scaffold, a set of underscore
characters representing the word, a form component that has a field
where the user can enter a letter, a hidden field with all letters used – this
field is currently empty, a hidden field with number of incorrect guesses
– currently 0, and a hidden field with the index number of the word that
is to be guessed.
“POST” means the user guessed a letter
Pick up posted data – word’s index number, letters previously guessed,
newly guessed letter.
Take word from collection and create copy checking off all guessed
letters.
If all letters guessed correctly, return a page congratulating user on
winning a game.
If user has not guessed word, and has now reached limit of incorrect
guesses (limit 6), return a page informing the user that the game was lost.
Pick the scaffold “picture” appropriate to number of incorrect guesses.
Return a response page showing scaffold with possibly partially hung
man, a string showing letters guessed and underscores for letters not yet
guessed, a form field for a new guess, and appropriate hidden fields
holding the values of the new updated game state.
29. What “pictures” will the game use for the scaffold?
You could create a set of actual images and handle this by an link – but it’s
sufficient to work with pre-formatted text.
30. Develop the program in incremental steps.
First, a program that reads in the words.txt file and responds to a GET with details
of a randomly chosen word.
This step gets the program started and resolves any file I/O issues.
31. Hangman.php – version 0:
©nabg

When starting, its best to ignore issues of markup – so temporarily set the
response type to text/plain.
The loadWords() function opens the words.txt file, and processes the file
assuming that it will contain one word per line. The words are placed in the
global array $words.
The startGame() function called for a GET request will print details of a word.
(The handleGuess() function isn’t even defined; a POST request would cause
program to fail).
This program is sufficient to check file I/O. It should work.
©nabg

32. If you don’t have the time to waste on constructing little images of hanged men,
the following text can be pasted into a file “hangedmen.php”:

?>
33. Hangman.php – version 1;
Modify the Hangman.php file to include the text images in hanged.php. (Use
include or require on the file. What’s the difference? If the requested file isn’t
there then an include operation results in a warning message whereas a require
operation results in program termination.)
Modify the startGame() function so that it generates a draft of the HTML form
page that a player will get at the start of a game:
©nabg

View the (plain text) page that this script now generates – it’s an easy way of
checking that hidden fields are being set, that action attribute of form is defined
etc.
If everything looks ok, remove the line that sets the content type to plain text and
view the form as a form:
©nabg

34. Similar form pages will need to be displayed after some guesses have been made.
Rather than duplicate the code for generating a form page, “refactor” the existing
code to make the actual HTML generation the task of a separate subroutine.
(“Refactor” is a lovely word; it sounds so much better than “hack”.)
©nabg

Retest the code to make sure nothing broken during the “refactoring” process.
35. Hangman.php – Version 2:
The code has to take input from the form. It really should check the input data –
but I was lazy and didn’t bother. (So, some hacker will crash my hangman game.)
It should then determine how much of the target word has been guessed.
If the user has now guessed all the letters in the target word, then he/she should be
congratulated.
If the user has reached the limit of six incorrect guesses, the game should
terminate.
Otherwise, a new form page with updated information should be returned.
It seems that four functions are needed:
36. The killplayer() and congratulateWinner() functions are both simple – just the
output of a little static content and markup:
©nabg

37. The matchLetters() function takes as arguments a string value for the word that is
to be guessed, and a string that contains the letters that the player has used as
guesses.
It is to return a string representing the word with _ (underscore) characters for
letters still unguessed and actual letters where these have been guessed. (The
letter or underscore characters are separated by space characters so that this string
will appear more clearly in the form display).
It works by checking each successive letter in the word, using the strstr() function
to determine whether this letter is among those used as guesses:
38. The handleGuess() function:
©nabg

39. It should now work – test it.
©nabg