Lab 2: COMP 105 Art Entry Form

Introduction

The goal of this lab is to set up a "crowd-sourced" (or, at least, "class-sourced") database of interesting art images, with thumbnails and basic information about each piece. The functionality for the COMP 105 Art Gallery is divided into three pieces: a form in which users can enter information (you will write this piece using JavaScript), a program on the CS server that adds your entry to the art gallery database, and a page that displays the current contents of the art gallery. Fortunately for us, the pieces that add new entries to the gallery database and display the current contents of it have already been written. All that's left to do is to design the Art Entry Form.

Getting Started

The first step is to set up a new web page that you will use to post a new entry to the art gallery. It should prompt you for the web address of the picture you want to add, as well as some information about the work of art represented in the picture. 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 "artEntry.html") in your folder or project and then copying and pasting the page source from the Skeleton Art Entry Form 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 art gallery 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 artistName 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 "Include URL?" checkbox was checked: "artistName"/"Vincent van Gogh" (if that was the value typed into the field) and "includeURL"/"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 field's 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
`postedBy`	Your name	`text` field	30
`imageURL`	Image web address, e.g., https://upload.wikimedia.org/.../imageName.png. (An address like this is also known as a URL, for Uniform Resource Locator).	`textarea`	not applicable
`title`	The work's title, if known. Can be left blank.	`text` field	30
`artistName`	The artist's name or, if the artist is unknown (e.g., for archaeological artifacts), the cultural group.	`text` field	30
`year`	When the art work was created (might be a specific year, e.g. 1953, or a century or century range, e.g., 9th-11th Centuries).	`text` field	30
`museum`	The museum (or other organization) housing this work of art. This should be collected with a `select` element that provides the user with several different museums to choose from. Provide at least 3-5 options, but be sure to include the museum(s) or institution(s) for the works you will be entering.	`select` menu	50
`medium`	Several types of art work, such as drawing, painting, statue, other. Again, provide at least 3-5 options.	`radio` buttons	30
`notes`	A description of the work or what you like about it.	`textarea`	not applicable
`includeURL`	A `checkbox` that determines whether or not to display the full URL with the title, artistName, etc., or just display the image. The value attribute of the checkbox should initially be set to "yes": <input type="checkbox" name="includeURL" id="includeURL" 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 Entry

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/ArtGallery/testEntry.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 testEntry.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 testEntry.php page is correct, you are ready to submit it to the actual art gallery set up for this lab. Just change the file associated with the action property from testEntry.php to postEntry.php. This will insert the data you submit into a database that the art gallery page 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 entering new data to the Art Gallery. Load your page in a web browser and try to post a message. (Remember: this is a single art gallery database for the whole class, so everyone will be able to see your entry -- keep it appropriate for a general audience!) Look at the output on the postEntry.php page, but also look at the actual COMP 105 Art Gallery .

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 Art Entry Form page. You should also add a link to the Art Gallery page itself: http://www.cs.kzoo.edu/cs105/labs/ArtGallery/comp105gallery.php from your course web page. Add HTML comments to your newly created pages containing:

A description of the Lab: "Lab 2: Art Entry Form".
Today's date.
The names of all group members. (If you worked in a group.)

Publish your completed pages to the web server and test them, using a different image, to make sure that the pages still work as expected.