CISC103, Fall 2007
lab11: the final (required*) lab!

* If you are interested in building a website that uses a database, and want to learn some MySQL, contact me and I'll give you some guidance on how you can use your userid.cisc103.pconrad.info account to learn some basic MySQL.   

However, learning MySQL is not a part of this lab and is not a required part of the course. This lab is the last thing you are required to do this semester other than attend class, take quizzes, and take the final exam.

Goals

This lab has three goals

• reinforce what we learned in lab08 and lab09 about JavaScript function definitions
• reinforce what we learned in lab10 about client/side vs. server side programming
• reinforce what we learned in lab10 about working with a commercial-style web hosting account

Overview

In this lab, you'll first choose one of three problems to work on. The problems come from three different areas:

• music
• sports
• math/physics

Each of the problems has one input, and one output.

For the problem you choose, you'll first follow each of the following steps to produce a JavaScript solution:

1. You'll create a directory on copland.udel.edu called lab11 to store your files
2. You'll write a JavaScript function to solve the problem
3. You'll write a test script that checks the JavaScript function to see if it is correct
4. You'll write an HTML page that allows the user to enter the input value, click a button, and see the output value. This page will be structured in a way that is similar to the pages you write in lab08 and lab09.

You'll then follow all of these steps to produce a PHP solution:

5. You'll create a directory on the server userid.cisc103.pconrad.info called lab11 to store your files
6. You'll write a PHP function to solve the problem. The function will be similar to the one you write in JavaScript, with some small changes:
   • Variable names start with dollar signs (e.g. instead of names such as radius, area, diameter, ticketPrice, and cost, you'd have names like these: $radius, $area, $diameter, $ticketPrice, and $cost).
   • In JavaScript, for π we write Math.PI but in PHP, we just write M_PI
   • In JavaScript, for x ^y, we write Math.pow(x,y) but in PHP, we just write pow(x,y)
   • In JavaScript, semicolons at the end of statements are usually optional, but in PHP they are always required.
7. You'll be given a test script (you won't have to write your own) to test your PHP function
8. You'll write a pair of web pages to solve your problem similar to the ones from lab10: one HTML page that asks for the input variable, and one PHP page that displays the result.

When finished with both parts:

9. On each server (once on copland.udel.edu, and then again on userid.cisc103.pconrad.info), you'll create a script showing that your function definition works and passes the tests. these two files on WebCT.

At that point, except for...

• studying for the quizzes that occur during the last three class meetings, and,
• studying for the final exam
• doing any extra credit work you want to do,

... you'll be finished with the course!

Detailed Instuctions

Step 0: Select a problem

Here are three problems you may choose from. Choose only ONE problem. Use the same problem for both Part 1 and Part 2 of the lab.

Once you know which problem you are going to do, you can proceed with the remaining steps in the lab.

Part 1: Client-Side Scripting

Step 1: Create a directory on copland.udel.edu called lab11 to store your files

Create a directory ~/public_html/cisc106/lab11 in which to store your files, and make the directory readable on the web.

This step is straightforward, and detailed instructions appear in previous labs.

Step 2: Write a JavaScript function to solve the problem you selected in step 0

This step is also straightforward. You can write your function directly in the directory ~/public_html/cisc106/lab11

When choosing the name of your file, make the name match the name of your function, e.g. wtf.js, split2finish.js, or rideSpeed.js

Your JavaScript function definition should include comments with information about what the function consumes and produces, and examples, just like the examples given in lab08 and lab09.

If you are stuck on what to do

• Consult lab08 and/or lab09 for examples of writing functions in JavaScript
• Read through the wiki page: CISC103_Design_Recipes
• Consult your JavaScript textbook for more about writing functions in JavaScript.
• Come to your instructor or TAs office hours
• Come to lab
• Ask in lecture
• Make an appointment with your instructor and/or TA

Do not give up until you have tried all of the above items.

Step 3: Write a test script that checks the JavaScript function to see if it is correct

To write a test script, consult the test scripts that you used in lab08 and lab09. Your test script should operate in a similar fashion.

Your test script should be called with a name that is the same as the your function, but with the word test in front of it—for example: testWtf.js, testSplit2finish.js, or testRideSpeed.js

When your function passes all the tests, proceed to the next step.

Step 4: Write an HTML page to call your JavaScript function

This HTML page allows the user to enter the input value in an input box, click a button, and see the output value.

This page will be structured in a way that is similar to the pages you write in lab08 and lab09.

You'll need to pull in the definition of your function with a <script src="filename.js" type="text/javascript"><script> element, as well as include another <script type="text/javascript></script> element containing a function definition that will serve as an event handler for when your button is clicked.

You'll need to put id attributes on your input boxes so that you can use getElementById() in your event handler function. Remember that the choice of id attributes is up to you, but the id attributes must match the ones that you pass into getElementById.

This is an opportunity to practice again the skills that may have eluded you in lab08 and lab09, so that you can be sure to be prepared to answer any questions about these topics that may be on the final exam. So be sure you understand how all the parts work. This is your last opportunity to work with these ideas, so take full advantage of it!

When you are done, and your page works properly, move on to step 2, where you'll follow do a similar process, but in PHP—just like in lab10, but this time you are doing the thinking to come up with the code.

Part 2: Server Side Scripting

Step 5: Create a lab11 on the userid.cisc103.pconrad.info server

You do this by logging into the server called userid.cisc103.pconrad.info just like you did in lab10. Remember:

• The hostname is userid.cisc103.pconrad.info this stands in place of copland.udel.edu in the usual process you use for logging in. Remember that the actual hostname is jsmith.cisc103.pconrad.info, or bfd.cisc103.pconrad.info, or whatever your userid happens to be.
• The username is your userid on the server, which happens to be the same one you use on copland, but only because I deliberately set it up that way. This is not linked in anyway to your copland.udel.edu account.
• Your password is not the same one you use on copland—it is the one listed under MyGrades on WebCT in the initWikiPw field.

Once you have logged in, the process works just like it does on copland.udel.edu—emacs is even working now too (which wasn't true when we did lab10.)

However, instead of creating a directory ~/public_html/cisc103/lab11, we'll just create ~/public_html/lab11 since the cisc103 part is included in the server name already.

Your URL to access these files will be http://userid.cisc103.pconrad.info/lab11

Step 6: You'll write a PHP function to solve the problem.

Now, cd into your ~/public_html/lab11 directory on your userid.cisc103.pconrad.info server, and use emacs to create a file with a .php extension with one of the following names, depending on whether you are doing problem A, B, or C: wtf.php, split2finish.php, or rideSpeed.php.

In this file, put a PHP function definition.

As an example, see the function definition from step 3 of lab10

The function will be similar to the one you write in JavaScript, with some small changes:

• Start the file with <?php on a line by itself, and end it with ?> on a line by itself
• Variable names start with dollar signs (e.g. instead of names such as radius, area, diameter, ticketPrice, and cost, you'd have names like these: $radius, $area, $diameter, $ticketPrice, and $cost).
• You need to be extra careful about ending lines with semicolons, especially assignments statements, and return statements.
• Don't put a semicolon between the function header and the function body though—that cuts off the head from the body.
  • You wouldn't like someone to do that to you, and function definitions don't appreciate it either—not in PHP and not in JavaScript either.
• When dividing, be sure to add a decimal point to your numbers—for example
  • in PHP, use 1.0/12.0 not 1/12
  • in PHP, use 3600.0/5280.0 not 3600/5280
  • Reason: PHP uses integer division, which throws away the remainder (the part after the decimal point) when both numerator and denominator of a function are integers.
  • That means that functions such as 1/12 and 3600/5280 end up being counted as 0 in PHP, but 1.0/12.0 would be counted as 0.0833333333 and 3600/5280 is counted as 0.681818182

Here are some specific things that may have to change depending on which problem you are working on:

• If doing problem A: In JavaScript, for x ^y, we write Math.pow(x,y) but in PHP, we just write pow(x,y)
• If doing problem C: In JavaScript, for π we write Math.PI but in PHP, we just write M_PI

Step 7: Use a test script (provided by instructor) to test your PHP function

For PHP, I've provided three test scripts you can use, plus instructions on how to run them. The test scripts are located at these web pages:

• testWtf.php:   http://www.udel.edu/CIS/103/pconrad/07F/labs/lab11/testWtf.php
• testSplit2finish.php:  http://www.udel.edu/CIS/103/pconrad/07F/labs/lab11/testSplit2Finish.php
• testRideSpeed.php.  http://www.udel.edu/CIS/103/pconrad/07F/labs/lab11/testRideSpeed.php

Step 7a: Copy the proper test script into your account

To copy the test script into your account:

1. Login to your userid.cisc103.pconrad.info server, and at the Unix prompt, change your working directory to ~/public_html/lab11
2. Copy the URL of the file you want to obtain. Here are a few ways to do that:
   • Click on the link above, then click on the link the address bar of the browser when the page comes up, and copy the link
   • In Firefox on windows, right click on the appropriate link above, and use the "copy link location" feature
   • On other browsers, or other platforms, use a similar feature (e.g. on Mac, it might be "option click" instead of "right click", and in Internet Explorer, it might be called "copy shortcut".
3. At the Unix prompt, type wget on the command line, and then after the command wget, paste in the URL that you want to retrieve.
   • For example, to get the file testWtf.php, use the command wget http://www.udel.edu/CIS/103/pconrad/07F/labs/lab11/testWtf.php
   • This will download the file to your current directory.

In general, the wget command, when it is available, is a very useful Unix command for quickly obtaining a file over the web. Many web hosting companies that offer shell access (i..e the ability to get a Unix prompt) offer this command.

Step 7b: Run the test script

To run the test script, you will need to type the Unix command php followed by the name of the test script, e.g.

[userid@linux3 lab11]$ php testWtf.php

You should see that the test passes, for example:

[pconrad@linux3 lab11]$ php testWtf.php 
test 1 passed
test 2 passed
[pconrad@linux3 lab11]$ 
  

If it does not, look at your function defintion and try to determine what is wrong.

If you need help, ask your TA or instructor for assistance.

A reminder: when asking for assistance by email, cc both your instructor and your TA, and copy and paste the command you are typing, and the message you are getting.

Step 8: Write a pair of web pages that use your PHP function

Write a pair of web pages that allow users to calculate solutions to your problem similar to the ones from lab10:

• one HTML page that asks for the input variable, and
• one PHP page that displays the result.

The result page should have link back to the HTML page that asks for the input, just as in lab10. Also, both pages should have links that allow the pages to be validated at validator.w3.org, and should validate as strict XHTML1.0.

When your pages work properly, you are ready to finish and submit.

Finishing and Submitting:

Step 9: Create two scripts and submit both on WebCT

Now, create two scripts documenting your work on this lab.

Step 9a: Login to copland.udel.edu one last time.

Login to copland.udel.edu one last time, and cd into your ~/public_html/cisc103/lab11 directory.

Step 9b: Create a script file (lab11a.txt) demonstrating your JavaScript function

Create a script file called lab11a.txt showing that your JavaScript function works, and passes its tests. You will do this by using the Unix comand script lab11a.txt  and then going into the JavaScript command line interpreter (the js> prompt), loading the function definition and the definition of the test function, and then executing it.

Detailed instructions on how to make a script file (with the Unix script command) appeared in the folowing places, so if you need more detail than what is provided above, consult these previous labs.

• step 4 of lab02
• step 11 of lab04
• step 4 of lab06

Step 9c: Login to userid.cisc103.pconrad.info one last time.

Login to userid.cisc103.pconrad.info one last time, and cd into your ~/public_html/lab11 directory.

Step 9d: Create a script file (lab11b.txt) demonstrating that your PHP function passes its tests

Create a script file called lab11a.txt showing that your PHP function passes its tests.

To do this:

• type script lab11b.txt at the Unix prompt
• type the pwd command to show your curent directory
• type the Unix command you used in step 7b to run the php test script on your function definition
• type exit to end the script

Step 9e: Submit these two files on WebCT

The two files are:

• lab11a.txt
• lab11b.txt

We'll look at the other files (including the PHP files) by accessing them directly on the server. (The TA and instructor have access to see server side files under your accounts on the userid.cisc103.pconrad.info server).

Congratuations!

Except for quizzes and the final exam, you are finished with CISC103!

Grading: 150 pts

Please see the wiki page for lab11 for the detailed grading rubric.

Due Date: 11/29/2007, 11:55pm

Late Penalties:

Copyright 2007, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved