CS 268 Lab 6 Eclipse Test Server and JSPs

Transcription

1 CS 268 Lab 6 Eclipse Test Server and JSPs Setting up Eclipse The first thing you will do is to setup the Eclipse Web Server environment for testing. This will create a local web server running on your machine that you have full control over, specifically in terms of restarting it. To do this, first create a brand new folder in one of your drives. Start Eclipse using this as your workspace. Leave it in the JavaEE perspective (or switch to it if it isn t in that perspective by default). Then you will create a new Dynamic Web Project. The first window will look like:

2 You will, of course, need to give the project a name of your choosing. Then since this is the first time you be creating a Dynamic Web Project, you will need to setup a web server configuration. Select New Runtime. From the dialog below, select Apache Tomcat v7.0 (since this is the version of Tomcat we have installed in the lab). You will have to browse to specify the Tomcat installation directory. The Tomcat files have been preinstalled in the lab under Program Files on the C: drive: If you are working on your own laptop, you will need to install these files on your laptop. You can just grab them from that directory on a lab machine if you want the versions to be compatible between your machine and the labs. Hit Finish on this page to create the web runtime.

3 Lastly, click on next a till the last page and click the box to generate the web.xml deplorment descriptor. And then finish. You have now created your first Dynamic Web Project in Eclipse, setting up a Tomcat server along the way. Later, if you create other Dynamic Web Projects in this workspace you can reuse the same Tomcat setup. In the remainder of this lab you will be placing any Java code (servlets, etc) in packages in the src directory under the Java Resources folder. And any web content (html, jsp, images, etc) in the WebContent folder. Note that the web.xml file is also in a subfolder in this directory.

4 DVD Store Overview First, you are not to do any coding in this section -- this is just an overview section. Don't start coding until the next section. For this lab you will be creating 1 html file and 2 JSPs. These 3 files will run a simple DVD store with checkout. Note that this isn't a full-blown store, just a simple one that allows you to experiment with some various aspects of JSPs and JavaScript. You should read through the following setup before you start coding. The user starts a shopping trip by loading the dvdlist.html file. This produces a page that looks like: You, of course, should change the DVDs in the list to be names of DVDs in which you are interested (I simply picked some past Oscar winners). Note that this page is simply a static HTML page we could have easily upgraded this page be dynamic by creating it with a JSP that populated its movie list from a database of current movies in stock, but we will not do so for this lab. When the "Proceed to Checkout" submit button is pressed, all the information about the DVDs the user wishes to purchase is sent to a JSP for processing. It is the "checkout" JSP s responsibility to record the DVD selections and "produce" the following page:

5 The user will then enter their credit card information and hit the Buy It! Button. This will submit all the credit card information on the page to a second receipt JSP. The receipt JSP should produce one of two different pages: Where the name and the list of DVDs purchased is dynamically changed to match the previously entered information OR

6 Where the name is of the card is dynamically changed to match the card type selected on the previous page. That is, the decision as to if the card has expired occurs on the server side in the JSP code. However, in addition your site should have some JavaScript added to prevent submission to the JSP if either the name field is not filled in: OR the card number field doesn t have 16 digits (just worry about 16 characters, and don t worry about them being digits vs. characters for this lab).

7 The HTML Page The first thing you should do is to create the HTML page. The HTML page (and the JSPs for that matter) will go under the WebContent folder in your project. So make sure you create the HTML (and JSPs later) by right clicking on the WebContent folder and selecting new... The dvdlist page should contain a single form with a number of checkboxes and a submit button. Each of the checkboxes should have the same name (i.e. "DVDs", but different values. It doesn't matter if the submission is via get or post, but you need to make sure that the action points to the Checkout JSP (defined later -- will have to fill this in at a later date). If you don't want to code the HTML for the form by hand (with the code-assist it provides ctrl-space if it doesn t bring up code-assist hints automatically), then fireup DreamWeaver and use its WYSIWYG editor to produce the HTML for you. But simple prototype is fine for this lab. Don t worry about CSS or design issues. The Test Server Now you are ready to "publish" your HTML page. Just as in class, we will be publishing them to the integrated test server. Right-click on your HTML page and select Run on Server. This will bring up a wizard that will start the Tomcat server if it is the first time you have run anything on the server. Once this server has been created and started, it will show you your static HTML page. At the moment, don't worry about the submit button working yet. You might also want to change your preferences so that the browser is an external browser (i.e. FireFox) rather than the integrated browser which sometimes has caching problems. You can do this under Window->Web Browser. The JSPs It is now time to make the JSPs to which the HTML page connects. Call the JSPs checkout.jsp and receipt.jsp.

8 Checkout JSP This JSP needs to do 3 things: 1. Get the DVD parameter list from the request. Note that since all the checkboxes on the dvdlist page have the same name and multiple checkboxes can be checked, this implies that multiple values are assigned to this parameter. Thus, you need to use the getparametervalues method as opposed to the getparameter method (for single values) that I demonstrated in class. You can check out the HttpServletRequest API specification. 2. You need to save the information obtained from the parameters. Why? You are not going to be using this information on the page that this JSP is going to produce, but instead on the page that the other JSP is going to produce. Thus, you need a way for this JSP to save that information so that the other JSP can access it later. You should save this information in the session. And note when doing this that in Java an array is considered a single object. 3. Finally you need to produce HTML as output. This HTML is the credit card gathering form and will be the same for all users, so its generation should be fairly straightforward and not involve any additional JSP tags. Again, you can use DreamWeaver to help with this if you wish. Receipt JSP This JSP needs to dynamically produce HTML since the HTML content will vary from user to user. And, in fact, you will need to produce one of two different looking pages depending on the current date and the expiration date the user has entered for their card. Thus, the steps are the following: 1. Pull the expiration date parameter information from the request. Note that you can use getparameter here because all the parameters are single-valued. 2. Decide if the expiration date is less than or greater than the current date. You can use the Date object for this, but many of its methods have been deprecated. This means that they still work, but are in the process of being phased-out and will not work in later releases of Java. In general you should avoid using deprecated methods as there are usually new ways of accessing the same information. Instead you should probably use the GregorianCalendar class. 3. Either produce a normal receipt which will include pulling the DVD purchase list information from the session, the name, and the card number from the parameters OR produce a card expires page pulling the card type from the parameters. Also be sure that your code works correctly in the case that no DVDs were selected from the first screen. I don t care what approach you take to fix this problem, I just don t want it to come up with a 500 (Internal Server Error). Adding the JavaScript Finally, you are to add the JavaScript part to the receipt.jsp. In particular you are to attach an onclick event to the submit button that calls a JavaScript function. This function should determine if the name is filled in and if the number has 16 characters (don t worry about them being pure digits). If it fails either of these tests then you are to not only prevent the form from being submitted (returning false from the function), but you are to also popup a warning message to the user (using the alert() method from JavaScript). Demo Next week you will be asked to show me your code and demo it working on the test environment. You should be able to start the whole process by running dvdlist.html on your test server.