1. Open HapEdit. From the menu, choose Project...New...Create Project. A dialog box will appear, allowing you to select a folder. Click the icon to the right of "Create in folder," and navigate to C:\EasyPHP\www\. Create a project name by concatenating "M152" and your name; for example M152Bamberg. A folder icon labeled "M152Bamberg" will appear in the right pane (but here and elsewhere, it will have your own name instead of "Bamberg.") Double click on it, and then click on the Documents icon in the toolbar.
2. From the File menu select New...PHP Page, and save this page as M152Bamberg/permute.php.
3.
Change the title tag of your document to
Permutations
by <Your Name>, for example
<title> Permutations by
Paul Bamberg</title>
4.
Creating a large centered header:
a. Place the cursor immediately below the <body> tag, then choose
Actions...Text...Insert Paragraph from the menu. This will generate a
pair of tags. It's a safe way to generate HTML tags, since they
are guaranteed to be correct and balanced. Type some text between
the tags to
start your page, such as:
<p>Multiplying
Permutations</p>
At any time you may press
F9 to see how this PHP will display as a Web page. Do this now. If
asked about a URL association, choose http://localhost/M152Bamberg.
Close your browser to get back to editing.
b. Change the paragraph to a header, remembering to change both the
opening and closing tags:
<h2>Multiplying
Permutations</h2>
Press F9 again to see more impressive results. Try h3 or h1
instead of h2 to get different sizes.
c. Highlight this header and choose from the main menu
Actions...Text...Align text...center...OK. Press F9 again.
Thanks to the editor, you don't need to memorize the HTML syntax for
centering text.
5. Inserting a form:
6.
Creating a table:
Here is a simple plan for laying out the form. The cells marked
"reserved for" will be your job.
| Row 1, Cell 1 (input) |
Row 1, Cell 2 (powers of a) |
Row 1, Cell 3 (powers of b) |
| Row 2, Cell 2 (products) |
Row 2, Cell 2 (reserved for
powers of a*b) |
Row 2, Cell 3 (reserved for powers of b*a) |
| Row 3, Cell 3 (reserved for
inverses) |
Row 3, Cell 3 (reserved for conjugates) | Row 3, Cell 3 (button) |
<table width="100%" border="1”
cellpadding="3" cellspacing="3>
You
may apply a style to any HTML elements such as tables,
table cells, table rows, button, horizontal rules or to the Body tag.
The preferred way to do this is by putting the style sheet in a
separate file. This is especially efficient if
you want many pages to share the same style. If you put the style sheet
in a
separate file, all pages can point to it.
If you have not already done so, download and
install TopStyle 3.10 Lite Trial version from http://www.bradsoft.com/download/index.asp.
Click on the link to download the TopStyle Lite 3.10
(Free) link. Save this file to your file system and follow the
installation instructions.
8. Launch TopStyle Lite. It will open a New CSS
document for you.
Create the style sheet by typing in the following. The editor
will help you select what is to the left of each colon.
The values of the form #99ccff specify colors, with red,
green, and blue values in hexadecimal (00 minimum, ff maximum).
You can experiment with changing them.
Values of the form 11px specify sizes in pixels. You can experiment
with changing them.
For font-family, there is a list of fonts to guard against the
possibility that the first choice (Verdana) is not available on the
user's computer.
.table {
color: #00008B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: left;
}
.button {
background-color: #99ccff;
border-bottom: #003399 solid 1px;
border-right: #003399 solid 1px;
border-left: #99ccff solid 1px;
border-top: #99ccff solid 1px;
color: White;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-left: 3px;
width: 150px;
}
9. Open your permute.php file in HapEdit and add a link to your
style sheet. First place your cursor between the <head></head>
tags, under the <meta> tags. Type in
<link rel="stylesheet"
href="math152.css">
Apply the button class to the
Calculate button by typing in class="button". Your code should now look
like this:
<input
type="button" name="Calculate" value="Calculate"
class="button">
Now add the table class to the table and see how all the
text changes. Add class=”table” in the opening table tag like this:
<table width="100%"
border="0" cellpadding="3" cellspacing="3"
class="table" >
Press F9 to see what the Web page now looks like. You
should see a dramatic difference.
When you show your finished project to friends and
neighbors, they are more likely to be impressed by the appearance of
your user interface than by your clever algorithm for multiplying
permutations.
II. Implement the
mathematics
10. Now we get to the real business of this
project, which is to work with permutations. Since in a later
project it will be useful to be able to multiply permutations, we will
put the mathematical code in a separate file. Using
File...New...Text, create a new file called permutecalc.php. This
will contain only php code. As the first line, use <?php, and as the last line, use ?>.
The first function that you will need to write is one that treats a
permutation as a function. A reasonable name is Apply. This
function will take two string arguments, a permutation like "(134)" and
a symbol in the range "1"..."9" and return the character that
represents the effect of the permutation on the symbol. So, for
example,
Apply( "(134)","1") returns the value "3".
In order to write and test this, include test code in permutecalc.php,
so it starts as
<?php
function
Apply($perm, $input) {
if ($perm == "I":)
return $input;
}
echo
Apply("I", "2"),"<br>";
?>
This has the nice feature that it is correct for the identity
permutation, so that it will produce correct output as written.
It is your job to write this function and test that it works in all
cases. Study Example 6-3 in the online manual to learn how to inspect
individual characters in a string.
Look at string functions in the online manual, especially strpos(),
strrpos(), and substr(). Once you can process (14)(257)(68) and
determine that
"7" ends a cycle that starts with "2," you have done the hardest step.
11. Once you have the Apply function written and tested, get to work on
the Multiply function. Multiply($second, $first) should return
the permutation that is the result of $first followed by
$second.. It can start like this:
function
Multiply($second, $first) {
if
($second == "I")
return $first;
if
($first == "I")
return $second;
$result
= "";
//your code goes here
if ($result
== "")
return "I";
}
Here is a good strategy:
Initialize an array to mark the characters "1" though "9"
as all unprocessed.
For all characters $c from "1" up through "9" {
if the character is processed,
move on using continue;
if Apply($second, Apply($first, $c)) returns
its input, move on using continue;
find the
complete cycle that starts with $c, marking characters processed as
they occur;
}
C programmers will find one issue tricky. To convert a character
$c to the next one in sequence, you must use
chr(ord($c)+1)
Test this function with lines at the bottom of the file like
echo Multiply("(1236)(45)",
"(123)(457)");
until it works in all cases.
12. Next we need a function to display powers of a permutation.
The result will be displayed in a textarea. This means that to
get a line break, we need to use the character "\n" (newline).
Here is a function that returns precisely the string that needs to be
displayed. Notice the use of the period to concatenate strings in
PHP.
function
PowerString($perm) {
$power
= $perm;
$result =
$perm;
while
($power != "I") {
$power = Multiply($power,$perm);
$result =
$result."\n".$power;
}
return $result;
}
13. You will eventually need a function Inverse($perm), so write and test it
now. A tip on writing this:.
The PowerString function, already provided, is correct in the general
case. At the step just before you calculate the identity, you
have found the inverse. In other words, if a permutation a has
order n, then an-1 is the inverse of a.
It might also be worthwhile to write and test a function Conjugate($a, $b) that calculates a
b a-1. At this point the mathematics is complete, and you
should get no mathematical errors while calculating and displaying
output.
III. Connect the
mathematics with the HTML
14. Once permutecalc.php is fully tested, you
have two choices. Either submit it for partial credit, with all
the test code included, or comment out the test code by putting /*
before it and */ after it, and include it in permute.php with the line
include_once("permutecalc.php")
immediately under the opening
<?
15. When your PHP program executes, it must first simply display the HTML form. Then the user will type permutations into your two text fields aText and bText and press the Calculate button. At this point the values typed into the form are submitted to the PHP program, which must calculate and display the results.
When the "submit button" (Calculate) is pressed, all the values in the
form show up in a PHP
global array named $_POST, and your first task is to save them into PHP
variables, allowing the possibility that they are undefined because the
form is being displayed for the first time.
So immediately under the include statement, type
$Astring = isset($_POST['aText'])?$_POST['aText']:"";
$Bstring =
isset($_POST['bText'])?$_POST['bText']:"";
Displaying the correct output is simply a matter of
writing php code to replace text strings and display the correct
values. For a start, modify
Row 1, Cell 1 to read
<p>a <input
type="text" name="aText" size="20" value="<?php echo $Astring;
?>" /></p>
<p>b <input
type="text" name="bText" size="20" value="<?php echo $Bstring;
?>" /></p>
Be sure you understand what is happening. The first time
the program is run, the
values of aText and bText have not been specified. The isset()
function of PHP detects that the variable $_POST['aText'] has no value,
and it makes $Astring be the empty string, which is of course the right
value to display. Once the user has clicked the Calculate button,
the values that the user enters get stored in $Astring and $Bstring,
and we need to redisplay them, since we are re-creating the whole Web
page from scratch.
Press F9 and verify that whatever permutations you enter get
redisplayed. If this works, you have overcome the hurdle of
communication between client and server, and everything else will be
straightforward.
16. To display the result of multiplication, change Row 2, Cell 1 to
read
<td width="100%">
<p>a*b = <?php echo Multiply($Astring, $Bstring);
?></p>
<p>b*a = <?php echo Multiply($Bstring, $Astring);
?></p>
</td>
Press F9 and test the program.
17. To display the calculation of powers, change Row 1, Cells 2 and 3
to
read
<td width="100%">
<p>Powers of a</p>
<textarea name="powersA" rows="4"
cols="20"><?php echo PowerString($Astring); ?></textarea>
</td>
<td width="100%">
<p>Powers of b</p>
<textarea name="powersB" rows="4"
cols="20"><?php echo PowerString($Bstring); ?></textarea>
</td>
Press F9 and test the program with various inputs.
18. The rest
is up to you. Here are the tasks, with point values. Notice that
you can get 5 points for part II alone
The basic HTML form from part I: 2 points
Write Apply () and Multiply() so that they correctly calculate the
product of any
two
permutations involving the symbols "1" through "9." : 4 points
Write the Inverse() function: 1 point
Display products and powers correctly: 1 point
Display the inverses of a and b: 2 points.
Calculate and display the "conjugates" a b a-1 and b a
b-1: 1 point.
Grading will be based only on correctness. If your program runs
correctly, no one will need to look at your source code. This means
that if you know your computer's IP address, you can just email Paul
Bamberg (bamberg@tiac.net) a link to your php file. Otherwise
email him your php files and your style sheet file, or zip up the
entire directory and email it.
Here are some items for extra credit:
Make some interesting-looking changes to the appearance of the program
by
modifying the CSS file: 1 point.
Deal somewhat gracefully with incorrect input: 1 point