Lab 2: Adding Server-side Logic with PHP

Aim

The aim of this lab is to introduce functionality for storing the grid in an array, validating it, and dynamically generating the board layout from Lab 1.

References

1. The PHP Home.

   In particualar this gives you access to the On-line Manual.

Note: The above domains have been removed from the normal download quota system. You should note however that there may be links in the sites that take you out of the domain, which will then be included in your quota.

The Task

The task for this lab is to provide this basic functionality by storing the grid in an array, writing a function to validate it, and dynamically generating the board layout from Lab 1.

1. Checking that PHP is running.

   First we want to verify that php is running and that we can access the error log.

   Change into your php directory (see Lab 1), open your favourite editor, and create a file info.php. Type in the following code:

   <?php
     echo "<p>Hello world! Here is some info about my environment...</p>";
     phpinfo();
   ?>
   

   Save the file and open the location http://php.csse.uwa.edu.au/~username/info.php (where username is your login name) in a browser. You should see your salutation, followed by a some tables listing all sorts of information including the server that is processing your script and the version of php it is using.

2. Accessing the error logs.

   Now that you have verified that php is running correctly, the next thing is to check the error log. This will be very useful when you come to do some programming, as the browser itself doesn't relay errors messages from the php preprocessor. (Remember the request/response cycle and the backend preprocessor from the lectures - the browser just receives the finished page from the http server, it doesn't know what happens behind the server.)

   A "window" to the server logs has been provided for you. Open a separate browser tab or window, and point it to the address http://php.csse.uwa.edu.au/logs.php. At the top of this page you should see a list of errors reported by the http server, along with the time they occurred. (These errors may not all necessarily be related to you but rather to other users - see Note 2 below.)

   Scroll to the bottom of the list of errors and locate the last one. Now return to your editor and change the word phpinfo to phppinfo and attempt to reload the window with the info page. You should see an empty page. Now refresh the window with the error log, return to the end of the list, and you should see one or more new lines including one stating Fatal error: Call to undefined function phppinfo() and the file name and line number on which it occurred. (For this reason there is some advantage to using a coding editor which shows line numbers when doing php coding.)

   As you do your php programming, you should consult this error log for messages, particularly when the result you get is not what you expected.

   Note 1: If you are using non CSSE machines to do the labs (for example a home machine) your server setup will be different, and you will need to find out where your server puts its error logs (and, of course, that you have php).

   Note 2: You may be getting some messages in your error log for other users that are passed through from the proxy. If so you can stop these by adding php.csse.uwa.edu.au to the list of sites for which no proxy is used, in your browser's proxy settings. If you don't know how to do this its not important - just ignore those error messages.

3. Storing the grid in a 2-dimensional array.

   As a starting point for this lab copy your file sudoku.html to a file sudoku.php and check that you can view it. It should appear unchanged from the previous lab.

   The first task is to create a data structure for storing the grid. We will use a two dimensional array. In php variables are created as needed - there is no need to declare them, you just begin assigning values.

   Store all the values from the grid from Lab 1 in a 2-d indexed array. Store zeros for the empty squares. Add your code to your file immediately after the <body> tag (remembering to include it between php tags), since you will be adding output to the page content.

   Add a command print_r($myarray); (where $myarray is the name of your array) to print the array out in (somewhat) human readable form. Now refresh your browser and check that you the contents of the array are as you expected. Remember if you don't see what you expect, check the error log to see if it contains any useful information.

4. Printing the array in a more readable grid.

   Remove the print_r command, and add nested loops to your code to print the array out in a simple 9x9 text grid. In order to see if it has printed correctly, refresh your browser, and use the "View Source" menu item of your browser. This shows the content of the page in raw form before it is rendered by the browser. After the <body> tag you should see something like this:

   400080006
   080000030
   009000200
   000503000
   700020008
   000809000
   001000700
   030000090
   500060004
   

   While your grid should appear correctly by viewing the source, in the browser the numbers will probably all appear on one line. This is because the browser doesn't use carriage return or line feeds in the html page - it simply regards them as whitespace. A "quick and dirty" way of seeing the grid in its correct structure is to surround it in <pre> (preformatted text) tags. Do this and check that you can see the grid in the browser.

5. Mixing PHP and HTML to output the fully formatted grid

   Now comes more of a challenge! In the previous lab, you worked out the html code for displaying the grid within your sudoku "widget". Your task now is to produce exactly the same page, but using the numbers from your array to populate the grid.

   This will require a mixture of php with your html code. For example, instead of

     <td>3</td>

   you might have something like

     <td><?php echo $grid[$i][$j]; ?></td>

   or

     <?php echo "<td>".$grid[$i][$j]."</td>"; ?>

   or

     <?php 
       echo "<td>";
       echo $grid[$i][$j];
       echo "</td>";
     ?>
   

   (all of which should produce the same output). You will also need to check for zeros and replace them with empty squares.

   You will of course need to use nested loops again to obtain the right numbers for the right positions. You may wish to break this down into two tasks.

   1. Produce the 9x9 grid without the 3x3 boxes shown (and coloured) individually (which is a bit easier), then
   2. modify it to produce the grid of 3x3 boxes with the blue borders.

   Once you have done this you should be able to incorporate it in the page in place of the old html version, so that you see the same page that you had after Lab 1. Of course now you can change the output grid simply by changing the array assignment, and in future could read this array from an external source, such as a file or a web location (URL).

6. Validating the grid

   We will need to be able to verify the legality of a grid - that is, whether it satisfies the rules that the same number does not appear in any row, column, or 3x3 box. This will become especially important if users are able to create or fill in grids.

   Think about how you can best do this. Obviously it will require nested loops to iterate through the rows, columns and blocks. This should be reasonably straightforward after the practice you had in the two subtasks of the previous task of outputting the grid. You will also need some method of counting how many times each number has appeared, and returning a false value when a number other than zero has appeared more than once. Again this is likely to use an array, but the method you use is up to you.

   Although it is not necessary, you may find it useful to use functions for this task to avoid repeating code. We have not covered functions in the lectures yet, but you can find documentation on them through the reference link above. If you do choose to use functions you should also read about variable scope in the chapter on variables. The safest thing is to pass all variables needed by the function as arguments (rather than use global variables).

   Implement your validation code and check that it works by testing it on both legal and illegal grids.

Copyright © 2005, Cara MacNish School of Computer Science & Software Engineering The University of Western Australia.