Exercise 1: Zipcode Search

For your first exercise, you should make a page that will let the user enter a zip code, such as 14456, and will look up the city and state where that zip code is located. You don't have to do the lookup yourself! That will be done by a server-side program. You just have to create a form that the user can use to submit data to the server-side program.

The server-side program is at the URL http://math.hws.edu/eck/cs120/zip.php which means that the action in the form must be set equal to that URL. The method in this case can be either GET or POST. This means that your <form> will start with something like:

<form action="http://math.hws.edu/eck/cs120/zip.php" method="POST">

The form needs an <input> where the user can enter the zip code. (The zip code should be a string of exactly five characters.) The name for the input element must be zipcode. Recall that the name is the thing that identifies the data to the server. You don't get to decide on the name; you have to use the name that is expected by the server-side program. In addition to the input, of course, the form also needs a Submit button for submitting the form to the server.

You should create a web page with the required form. Your page must contain enough information to let the user know what the page is for and how to use it. You do not have to make the page look beautiful.

When your page is working, you will be able to use it to get the city and state for a zip code. Don't forget to test that you page actually works!

Exercise 2: Image Resize

For the second exercise, you will create another page with another form. In this case, the form can be used for resizing an image. This example shows how to use a form to submit a file to the server. For that, you need an <input> with type="file", and you need to add the attribute enctype="multipart/form-data". The server-side program is

http://math.hws.edu/eck/cs120/imageresize.php

Use that as the action for your form. The method must be POST. and don't forget to add the special enctype that was mentioned above to the <form> tag.

The form needs a file input and two text inputs. The file input must have the name image. The two text inputs must be named width and height. The values for the width and height specify the new size of the image.

When the form is used, the file will have to be an image file. (There is probably a limit on the size of the files that will be accepted; I think that it is 8 megabytes.) At least one of the width and height inputs must be non-empty, and any value that is specified for the width or height must be a positive integer. The way it works is: If both width and height are non-empty, then they give the new size for the image. If only one is given, then it gives the new width or height, and the other dimension is scaled proportionately. (Usually, proportionate scaling is what you want.) You don't need to know the stuff in this paragraph to write the web page, but the user of the page needs to be aware of it.

When the exercise is complete, you will be able to use your web page to resize an image. You will see the resized image in the web browser. If you want to save it, you can right-click it and use the Save Image command. (You should save the image using a name that ends with .jpg, .png, or .gif, as appropriate; the web browser won't know the name.)

Exercise 3: Login Page

This exercise and the next have to do with a simple web application for saving notes on the Internet so that they can be accessed from any web browser. The notes are stored in a "database", which is just a collection of data stored on the server. This is a very simple demo system. I call it "Notes120". A user has to register to use the application. Once they are registered, they can post notes to the database, and they can view notes that they have posted.

The file register.html that I gave you as an example is used to register as a user of Notes120. Before working on the rest of the lab, you should open that file in a web browser and use it to register yourself as a user. (Remember the user name and password that you register -- but don't use a password that you need to keep secret, since I will be able to see it.)

A user has to log in before posting or viewing notes. Your first assignment is to create a web page with a login form for Notes120. The form needs two text inputs for the user name and password, and they must be named username and password. The server side program that you need for the form's action is

http://math.hws.edu/eck/cs120/notes/login.php

The form must use the POST method. Once you have completed this exercise, you should be able to log into Notes120 using the username and password that you registered.

Exercise 4: Posting Notes

Finally, you need a page for posting notes into the Notes120 database! Create the web page for doing so. The form must use the POST method, and the action must be

http://math.hws.edu/eck/cs120/notes/post.php

The form needs a text input named headline where the user can enter an optional headline for the note. (Headlines can be up to 50 characters.) The page also needs a place where the user enters the content of the note. Since the content could be long, you should use a <textarea> for that. The name of the textarea must be content.

When you finish the exercise, you should be able to use your form to submit notes to the database. Here are some useful URL's for interacting with the server:

          To log out, click:    http://math.hws.edu/eck/cs120/notes/logout.php
          
          To view notes, click: http://math.hws.edu/eck/cs120/notes/view.php

The user must be logged in to post or to view notes.

(One more note: In this lab, you are using absolute URLs for the actions in your forms. It would be more common to use relative URLs, but that isn't possible because the server-side programs for this lab are not part of your own web site.)