Exercise 1: Changing Passwords

For your first exercise, you will create a web page with a <form> that a bb120 member can user to change his or her password.

The folder lab13-files contains the file login.html that allows a member to log into bb120. You can open this file and use it to log in. You can also use it as a model for your password-change page. (In fact, you can copy it, and edit the copy to make your page.)

The server-side program for changing a password already exists. Your form will just collect data from the user and send it to that program. You need to know the URL of the server-side program to use in the action of the form. The URL in this case is

http://math.hws.edu/bb120/process_change_password.php

Your form must use the POST method to send the data. You also need to know what data to send to the server. Remember that each data item has a name that identifies the data to the server, and you have to use exactly the right name in the name attribute of the corresponding input widget in the form. for the change password program, the required data names are

• username -- the member's user name.
• oldpw -- the member's current password.
• newpw -- the new password that the member will use in the future.
• confirmpw -- another copy of the new password (to verify that it was typed correctly).

After creating your web page, use your form to change your own password. Try logging in with the new password to make sure that your form worked!

(You are certainly welcome to make your page more attractive than my login page.)

Exercise 2: Posting Messages

For your second exercise, you should create a second web page, with another <form>. This form will be used by a member to post a message to the bulletin board. The form must contain a <textarea> where the user will type the message. It must also have a group of three radio buttons, which the user will use to select whether the message will be public, member, or private.

The data from the form must be sent to the server-side program at the following URL, using the POST method:

http://math.hws.edu/bb120/process_post.php

The data items that must be sent to the server are

• message -- the message to be posted, from the textarea.
• visibility -- the value from the selected radio buttons, which must be one of the strings public, member, or private.

After completing your web page, you should test it by posting at least three messages, one public, one private, and one for members. To post messages, you will have to log on to the bulletin board, using the file login.html or this link:

http://math.hws.edu/bb120/login.html

The server-side program process-post.php returns an error if your haven't logged in. Note that you can always view at least the public messages at this link:

http://math.hws.edu/bb120/show.php

Exercise 3: The Basic AJAX-Enabled Page

For the remainder of the lab, you should work on the file ajax.html. This file will use AJAX to implement a "Web 2.0" version of the bulletin board application. The body of the web page is mostly done already. It contains several elements that have id's so that they can be used in JavaScript. One AJAX request -- for logging on -- is already implemented.

You should open your copy of ajax.html in a web browser. For the AJAX to work, you must load it from the server math.hws.edu. That is, you must access it using a URL something like http://math.hws.edu/~zz9999/lab13/ajax.html.

The page is already functional to some extent. If you use it to try to log in with a bad username and password, you will get an error alert. If you use your correct username and password, it will log you in, but you will get no indication on the page that the login has succeeded. That's the first thing you have to implement.

When the user clicks the Log In button, the JavaScript function login() is called. This function sends an AJAX request to the server, using $.getJSON(). The function doneLogin is designated to receive the response from the server. This response function has a parameter named data that represents the response received from the server. The response is a JavaScript object with two properties data.status and data.info. The value of data.status is "ok" if the login succeeded and is "error" if the login failed. The value of data.info is a string that describes the response in a way that you might want to display to the user.

Currently, the function doneLogin handles the case where data.status is "error" by putting up an alert to inform the user of the error. The alert contains the information string data.info from the server's response. Your first task is to complete doneLogin by handling the case where the user's login has succeeded.

First of all, the <div> that contains the Log In button should be hidden. (This div has id="login".) Second, the <div> that contains the Log Out button should be shown. (This div has id="loggedin".) Finally, you should put the data.info string into the element that has id="loginfo". (This string contains the real name of the user.)

As the second part of this exercise, you need to implement the Log Out button. When this button is clicked, function logout() is called. Write that function. It should use $.getJSON() to send an AJAX request to the URL

http://math.hws.edu/bb120/ajax/logout.php

This server-side program does not require any data to be sent with the request. It just logs out whatever user is currently logged in, if any. However, you do need to designate a "phase2" function to say what should happen when the response is received from the server. You have to write that function as well. It should hide the "loggedin" div and show the "login" div.

As the final part of this exercise, you need to load messages from the server and display them on the web page. There is a <div id="messages"> in which the messages should be displayed. You have to use AJAX to retrieve the messages. Write a function named loadMessages to send the AJAX request. This function needs to be called when the page is first loaded, in the init() function, as well as when the user has logged in and when the user has logged out. (You have to call loadMessage() in the latter two cases since the set of messages that can be viewed changes when a user logs in or logs out.)

The loadMessage function should use $.getJSON to send an AJAX request to the following URL:

http://math.hws.edu/bb120/ajax/messages-html.php

For now, you don't have to send any data with the request. You do need to write a function that will be called when the response is received. The response function will have a parameter named data. This parameter will be an object with several properties. The only ones that you need are data.ok, data.html, and data.info. The value of data.ok is "ok" or "error", and it tells whether an error occurred when the server tried to access the messages. (An error would be some sort of problem with the server, and it should be rare.) If data.status is "error", then data.info contains an error message. If data.status is not "error", then data.html is HTML code that contains all the messages that you want to display. All you have to do with it is load it into the div with id="messages."

Exercise 4: Selecting Message Visibility

Once you have the basic ajax.html page working, there is one more feature that you need to add to it.

For this exercise, you should allow the user to have some control over what type of messages are displayed. The user should be able to choose whether to see all messages, private messages only, member messages only, or public messages only. You can do this with a <select> menu in which the <option>'s are all, private, member, public. (The options must be exactly as stated, all lower case, to work with the server-side application.) Add the select menu to the web page. It should appear and disappear along with the "loggedin" div.

The onchange event of the <select> element should call the loadMessages() function that you have already written. However, you will have to modify that method so that it takes the current setting of the select element into account. You need to send this information as data along with the AJAX request to the server. The AJAX request will accept a data item whose name is "visibility" and whose value is one of the strings "all", "public", "member", or "private". So you just need to use an object such as { visibility: val } as the data, where val is the value of the select element. (Note that if no one is logged in, the server ignores the requested visibility and just sends public messages.)

Extra Credit: Do Something Creative

You can get some extra credit on this lab by doing some extra work with the AJAX application.

One extra feature is to add some CSS styling to ajax.html, including some styling of the messages. The messages come with classes that you can use to apply style. Here is a description of the message format: each message is in its own <div>; a message div has class="even" or class="odd" to tell whether is is in an even or an odd-numbered position in the list of messages; a message div also has class="member" or class="public" or class="private", to tell what visibility the message has; the message includes information about the person who posted the message and when it was posted in a <span> that has class="posted". You will want to make the page look nice!

On the programming side, you could fix a problem with ajax.html. If the page is reloaded, it will show the Log In div, even if a user is already logged in. You can fix this by asking the server whether someone is logged in, and you can do that with the server-side program

http://math.hws.edu/bb120/ajax/whoami.php

Send an AJAX request to this program when the page loads. The request requires no data. In the response, data.status is "ok" if someone has logged in and is "error" if not. If data.status is "ok", then data.info is a string that you can add to the web page to show the real name of the user.

If you want more substantial extra credit, there are some other server side programs that you could use on new web pages. For example, it is possible to delete messages (delete-message.php). It is possible to get message data in an array instead of in one big chunk of HTML, so that you can do what you want with it (messages.php). It is possible to get a list containing only messages posted by the logged in user (my-messages.php). You would probably need help with using any of these programs. Come see me for help, if you want to use them. For a complete description of the AJAX API for accessing the bulletin board, see

http://math.hws.edu/bb120/ajax/bb120-ajax-API.txt