Lab 2: COMP 105 Message Board

 


Introduction

The goal of this lab is to set up a message board where COMP 105 students can post questions and comments. The functionality for the COMP 105 Message board will be divided into three pieces: a page on which users can enter messages (you will write this piece using JavaScript), a program on the CS server that adds new messages to the message board database, and a page that displays the current contents of the message board. Fortunately for us, the pieces that add new messages to the board and display the current contents of the board have already been written. All that's left to do is to design the Message Entry page.

Getting Started

The first step is to set up a new web page that will be used by visitors to post to the message board. In addition to prompting the user for the message content, it should also gather some information about the user (to verify the each user is allowed to post to the board and to display a name on the board along with the message) and allow the user to specify how the message should be displayed (font color and whether or not to convert to all capital letters). The table below shows the types of fields (i.e., form elements) you will need for your page.

Start by creating a new page (e.g., "lab2.html" or "messageBoard.html") in your folder or project and then copying and pasting the page source from the Skeleton Message Board Entry page into your page. The skeleton includes a few sample HTML form elements that you will need on your page and also some extra, temporary code for testing your form elements as you create them.

Read over the code that you have copied, and make sure you understand the various pieces of the code. Notice that the id attribute in each input form element is used by the label tag.

Note: Each input form element has a name attribute that exactly matches one of the field names in the table below. This is necessary in order for the page to interact correctly with the existing message board software on the CS server, which expects to receive information for fields with those specific names.
Some form elements have a value attribute, which determines an initial value for the field. (For example, you could experiment with adding a value attribute to the posted_by field and then refresh the page.) When you enter data in a text or textArea field, that becomes associated with the value attribute, and is passed to the server along with the corresponding field name when the page is submitted. For some form elements, like check boxes, radio buttons, and select menus, only checked or selected name/value pairs are passed to the server on submission. For example, if the existing skeleton code were to be submitted to the CS server, the data going to the server would consist of either one or two name/value pairs, depending on whether the "All caps?" checkbox was checked: "posted_by"/"Alyce Brady" (if that was the value typed into the field) and "shout"/"yes" (only if the checkbox was checked).

Adding Fields

Once you understand the copied code, you are ready to add new form elements to your page. (Recommendation: add your elements one at a time, and test each one before going on to the next.) Give each field a label, whose for attribute matches the field's id. Remember that the name attribute must exactly match the appropriate field name in the table below. Add appropriate code to the showTestResults function to test that your new input element acts as you expect. You can refer to this sample page of HTML form elements for examples of HTML form elements that are not in the skeleton page.

Field Name Description Form Element type Max Length
message The body of the message text. textarea not applicable
topic A title for the message. text field 50
color The font color to be used for the message post. This should be collected with a select element that provides the user with several different colors to choose from. The value of each option needs to be a color identifier that HTML recognizes. Here is a list of recognized color names. select menu 30
salutation The preferred salutation of the poster (Ms., Mr., none, etc.). radio buttons 10
name The name of the person posting the message. text field 30
password The password for the message board. (This field is not actually being used as a password, so you can type anything in when you are testing.) password field 30
shout A checkbox that determines whether or not the message should be converted to upper case. The value attribute of the checkbox should initially be set to "yes":
<input type="checkbox" name="shout" id="shout" value="yes">
checkbox not applicable

Once you have the form elements in place, use formatting instructions in HTML (e.g., line breaks, tables, etc) to give your page a nice layout (not in one long line, for example). Preview your page in a web browser to make sure that it looks OK and that, when you click the "Submit Test" button, all the input form elements have the expected values in the Test Results section.


Submitting the Message

Step 1: Test Submission

Once you have the page looking the way you want and valid results goint to the Test Results section, the next step is to modify your <form> tag to include action and method attributes, as in the example below, and then to add a submit button to your form (right after your "Submit Test" button, for example). Make sure that the new button is inside the form, just as your other form elements are.

<!-- MODIFY THE EXISTING FORM TAG TO LOOK LIKE THIS! -->
<form action="http://www.cs.kzoo.edu/cs105/labs/MessageBoard/testMsg.php" method="POST" >

<!-- YOUR EXISTING INPUT ELEMENTS ARE HERE! -->

<input type="submit" name="submit" value="Submit">

</form>  

What is happening here? The form tags serve to tie together all of the input elements that should be sent to the server when the "Submit" button is clicked. (It is also possible to have multiple forms per page, each of which may be associated with a different action.) The action attribute specifies what should be done with the form's data when the submit button is clicked. In this case, it will be sent to a page named testMsg.php that will show you the data that was submitted. We won't worry about the method attribute. It determines how the data is sent.

Step 2: Real Submission

Once the data on the testMsg.php page is correct, you are ready to submit it to the actual message board set up for this lab. Just change the file associated with the action property from testMsg.php to postMsg.php. This will insert the data you submit into a database that the message board looks at.

Once you have added the action to your form tag and the submit button to your page, you should be able to test the message system. Load your page in a web browser and try to post a message. (Remember: this is a single message board for the whole class, so everyone will be able to see your message -- keep it appropriate for a general audience!) Try making several posts with different input settings to make sure that your page is working as it should. Look at the output on the postMsg.php page, but also look at the actual COMP 105 message board .

Finishing Up

Once you are satisfied that your page works correctly, remove or comment out the button that creates intermediate test results.

Add a link from your course web page to your new message-posting page. You should also add a link to the message page itself: http://www.cs.kzoo.edu/cs105/labs/MessageBoard/cs105messageboard.php from your course web page. Add HTML comments to your newly created pages containing:

Publish your completed pages to the web server and test them to make sure that they still work as expected.