MM 270 - Test 2

Forms, Spry, Javascript, PHP, oh my!

Part 1 -- Get (or use) a PHP-based Web Server

1. Get a PHP-based Web server (warning: many free hosts have the mail function deactivated), or, alternately, use the instructor's account as described in the Week 5 Lecture. Remember, only one student can be logged in at any time on the instructor's account, so try again later if you can't seem to get in.
2. If you are using your own Web server, be sure you take some time to get to know the server and how to upload files before you begin Part 2. You may want to create a site definition just for this site in Dreamweaver.
3. If you are using the instructor's account, be sure to create your own user folder (your first and last name together works fine, like janedoe). Also, get in and get out soon after you upload your pages -- other students will definitely appreciate that!

Part 2 -- Construct a Form

1. Create a blank HTML page called contact.html and include the information you see in the picture below (click to enlarge):
   
   

   

2. Some of the features of the form shown in the picture are:
• ONE form tag -- all forms should only have one form tag surrounding the table and all the input field tags.
• 5 row, 2 column table inside the form (form tag)
• all 4 input fields have unique labels (and names): name, email, date, comments
• the name field is a regular form text field
• the email field is a Spry Validation text field: Email type (Invalid Format if not entered correctly), validate on blur
• the date field is a regular form text field
• the comments field is a form text area field: character width 80, number of lines 5, multi-line
• change the text on the Submit button to read Click to Send
3. Remember, when you save this page, a SpryAssets folder also saves with this. Inside that folder are two assets, a Javascript file and a CSS file that go with this form. Be sure to remember to upload these with your other files when you test this form later. Also, you may want to place these in an assets folder under the test2 folder right away and update the links to your contact.html page after you do this. In fact, this is STRONGLY RECOMMENDED.

Part 3 -- Add another Dynamic (Javascript) element to the Form

1. Click on this link to visit the Purdue University Engineering Computer Network site calendar page. This site offers a free Javascript calendar that you can connect to a date field in a form to automatically input the date from a pop-up calendar. This is the kind of calendar that sites that have travel reservations or ticket sales use for their date fields.
2. Read the instructions on this page thoroughly before you attempt to integrate it with your date field.
3. Once you are ready to integrate the Javascript, be sure to download all the related files (CalendarControl.js and CalendarControl.css) into your assets folder under your test2 folder.
4. When you start on the instructions, be sure to notice how and where the code should be used in your Web page and copy and paste what you need. You can put links to the calendar Javascript and calendar CSS in the head tag area of your HTML. Then put the onfocus attribute in your date input field in the HTML as shown.
5. Be very, very, very careful about your links (in the link tag and script tag). Do NOT leave the example links they show. Instead, correct the path to the files so it directs to your assets folder.
6. At this point, you may want to test that date field on your form -- save the contact.html page and preview it in a browser or two (this calendar will definitely work in IE and Firefox).

Part 4 -- Create a PHP Form Processor Page

1. For this part, you need to create a .php file named contact_process.php (be sure to use Dreamweaver to create this file).
2. Save the file in your test2 folder.
3. Update the contact.html form attributes so that action="contact_process.php" and method="post" (this is already the default).
4. Under the coursefiles/php_examples folder, open up the test2_php_example.txt file. As the file suggests, copy everything from the <?php to the ?> and paste it into the body area of your contact_process.php file (in Dreamweaver code view). Save this file again.
5. Note that the EmailTo address in the php is formcatcher@gregkerr.net (password is password) -- this address was set up to collect the forms as you test them. Be sure to leave this address as is. You can check the email account at this Nefirms Webmail link.
6. Correct the Subject string in the php to "MM 270 Test 2 Your Name"
7. Create an ok.html page that has the simple message "Success!" in it.
8. Create an error.html page that has the simple message "Failure!" in it.
9. The ok.html and error.html are referred to in the php file and are the result of validation success and failure at the time you submit the form -- success means all the fields were filled in and the form was sent to the formcatcher email address. Failure tends to mean there was a glitch somewhere, most likely in the way the fields were either filled out or not.
10. You are almost finished, but first, there are things to be paranoid about:
    • You can always check the php in Dreamweaver code view which is really convenient because it color codes everything. The things that are in red are usually the variables that you should be concerned about and that you can edit if needed.
    • The php code refers to 4 form field "names" in the script. These appear red in Dreamweaver code view and they all begin with $_POST['. These names MUST match your name attributes for each of your form fields in contact.html -- double check that these fields actually have name attributes (not just ID attributes) and that they are spelled the same, including the case as the ones in contact_process.php.
    • All the php from the <?php to the ?> should be nested in the body tag area of contact_process.php as stated earlier.
      

Part 5 -- Uploading to the Netfirms Server (not the SWS)

1. Upload all your files to the instructor's Netfirms server. Be sure you put a user folder with your name, much like the one you have on the SWS. The reason you have to use the Netfirms server is so the PHP will function (the SWS doesn't support PHP). Also, you should use the instructor's server instead of your own since the instructor has to have access to view the source of your PHP file -- server side scripts are not accessible due to server security, which is one of the very nice features of these script files.
2. To be sure you have them all, the files that go under the test2 folder are:
• contact.html
• contact_process.php
• ok.html
• error.html
3. Under the assets subfolder, you should have the following files:
• CalendarControl.js
• CalendarControl.css
• SpryValidationTextField.css
• SpryValidationTextField.js
4. After you have uploaded the files, be sure to http to contact.html to test it. You may need to test it a couple of times. Don't go too crazy though! Every time you hit the submit button in the form, it probably cranks out an email message to the formcatcher account!
5. You can login to the formcatcher email account to double check the form processor's accuracy by going to:
   
   Netfirms Webmail
   
   Login (use the full address): formcatcher@gregkerr.net
   
   Password: password
   
   
6. Send an e-mail message to your instructor with a subject like: MM 270 Test 2 Uploaded Your Name -- include in this email a link to your contact.html form on whatever site you uploaded it to.
7. REALLY Bask in the glory of your accomplishment. This was a toughy, and you probably learned more than you ever thought you would about this stuff!