HCI325 - Labs

Home > Undergraduate > Human Computer Interaction 325 > Labs

HUMAN COMPUTER INTERACTION (233.411)

Lab 4: Adding User Interaction using Forms

Aim

This lab completes the construction of the sudoku widget from the previous three labs.

The aim of this lab is to introduce user interaction using forms. This should allow the user to complete the sudoku grid, either at once or, more likely, one or more entires at a time. Each time the user submits more entries, the program should check the entries for validity using the function written in Lab 2.

The new sudoku widget should look something like the following:

References

The references for this lab are once again:

The Complete Reference: HTML & XHTML (4th ed) by Thomas Powell.
The PHP On-line Manual.

The Task

In Lab 1 you determined how to layout the application using html, but the numbers in the grid had to be "hard wired" into the html. Clearly this does not make it very reusable for other grids, or provide the basic functionality required for an interactive application that allows users to fill in the grid and play the sudoku game.

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.

Adding the Form.
You should by now have recursive code for generating the displayed grid from an array. Encapsulate this code in an HTML form that uses the "post" method.
For each grid position that doesn't have an number defined, insert an input field of one character width. You will need to name these input fields according to their position in the array/grid, so that you can automatically retrieve the submitted values.
Finally add a "submit" button to enter the selections.
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.
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.
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.
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).
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.