Lab 5: JSPs

Goals

After completing this lab, you should be able to

• Import projects from Github repositories.
• Use Eclipse to coordinate on source code, including doing updates, commits, adds, and deletions.
• Write simple JSPs
• Coordinate between Servlets and JSPs

Importing a Project from GitHub in Eclipse

Go to the README.md file of your project. Follow the instructions for importing the project.

Using Git for Version Control

Git is all about branches, which provide a sandbox for you to work on something and not disturb your collaborators or mess up the code.

1. Under the Team menu, select "Switch to", and then "New Branch". Name the branch "mytest", and check out that branch.
   In the Project Explorer, you should see that you are now in the "mytest" branch.
2. In the project, create a page called yourlastname.html
3. Add some very basic information, like a title and an h1 tag. Save the file. Note where the file was created. It may not be quite the same as what we're used to because we're using some other technologies, which have a slightly different organization.
4. In the Git Staging view, you should see your file in the "Unstaged Changes" panel. Click on your file and select the plus sign.
   This file is now staged.
5. Add a commit message that you created the file.
6. Click the commit button (not Commit and Push)

   The file is now committed.

7. Switch back to the development branch using the Team menu.
8. Right-click on the project. In the Team menu, select Merge and merge the mytest branch into this branch (development). The defaults should be fine.
   These changes are all in your local repository.
9. Now, push your changes to the GitHub repository. In the Team menu, select Push branch development. If you go to GitHub and view the repository, you should see the changes you made.
   You may run into problems because others are pushing changes to the same repository and get an error about being behind. To resolved this, select Team and then Pull. Then, push your changes.
10. Everybody should now do a round of updates, using Team → Pull, to get everyone's files. You should see everyone's files.
11. Now, create a new branch called deletetest branch and delete your file.
12. Again, you'll see the file back in the "Unstaged Changes". Add the file to the Staged Changes. Then, add an appropriate commit message and commit the changes. (Don't push. We don't want to push this branch to the remote/GitHub server.)
13. Switch to the development branch and merge the deletetest branch into the development branch. Then, push the [development] branch. Again, you may have issues with your code not being up to date. Pull the branch first, if needed.
14. Finally, do another Pull of the branch. Hopefully, everyone's .html files have been removed. If not, wait, and do another Pull and check that the files have been removed.
15. If you find that you have too many different branches and need to do some clean up, go to Team → Advanced → Delete Branch to get rid of the branches that you no longer need.

Version Control Lessons Learned

• It's a good idea to divide up the work so that the same people aren't working on the same files because you could get conflicts. Also, you will need to coordinate yourselves so that changes you make to one file, for example a CSS file, do not mess up the presentation of someone else's HTML file.
• Branches will help reduce the conflicts. You'll then merge the changes you made from your [local] branch into the updated development branch.
• Pull the development branch before merging.
• Routinely commit your work in your local branch with good commit messages so that you remember why you were making changes. Commit multiple files that were changed for similar reasons/purposes. For example, you could commit an HTML file and its CSS file at the same time.

Creating JSPs

Create a new Dynamic Web Project named Lab5.

Simple JSP (25 pts)

Next, create a simple JSP.

1. Create a new JSP named "first.jsp", click Finish.

   Note that this file looks very much like a typical HTML file with a new first line.

2. Add a title and a simple heading such as "My First JSP"
3. Run the project on the server and view the page in a browser. The page should show up, although it may take a little while to compile the JSP into a servlet and then execute. On subsequent loads, it should be faster.
4. Make a small change to, say, the heading. Then, simply reload the web page. You should see the change you made--without having to restart the server.
5. Now, we'll add dynamic content to the JSP. Add a paragraph tag with the mesage "The time is now <%= new java.util.Date() %>"
6. Reload the JSP page and see the dynamic content. Reload the page again--you should see the new current time.
7. Create a new Date variable and display it.
   <% java.util.Date date = new java.util.Date(); %> <p>The time is now <%= date %></p>

   Make sure the Server has synchronized (you'll see a message on the Server within Eclipse's console) and reload your JSP.

8. Copy this file into your WebContent directory.
9. Using the JSP include directive, include that file in the JSP's header (<head>).

   Make sure the Server has synchronized and reload your JSP.

10. Modify the declaration for the date variable so that it doesn't need to say "java.util" by importing the package java.util.* using the import directive (see slides).

    Make sure the Server has synchronized and reload your JSP.

11. Modify the JSP so that it displays "Good morning!" if the current hour of the day is greater than 3 but less than 12, prints "Good afternoon" if the current hour of the day is greater than or equal to 12 and less than 17, and prints "Good night!" otherwise.

    You will want to create and use a GregorianCalendar object and its methods/inherited fields to perform the above logic.

Modifying the Login Servlet (50 pts)

Copy your Login-related files (the HTML and servlet file) from Lab 4 into Lab 5.

Objective: Modify your LoginServlet to direct a request to one of two JSPs.

1. Create a Congratulations response in a JSP. Where should the JSP located, since it should only be accessed through a servlet?
2. Convert the login form into a JSP.
3. Modify your LoginServlet to, instead of generating the HTML responses, forward the request to the appropriate JSP response. The rest of the behavior should remain the same.
4. Test that this is behaving correctly.
5. Modify your LoginServlet to create an error message that is stored in the request object as an attribute. There is one error message if the username wasn't entered ("Must enter a username"), one error message if the password wasn't entered ("Must enter a password"), and one error message if the username and password don't match ("Username or password isn't correct.")
6. Modify the login JSP to display the error message (only if the error message exists). Display the error message in an appropriate location and style, since it is an error message. (Think about what error messages tend to look like and where they are placed.)
7. Test that it is behaving correctly.

Turning in the Assignment

Export the project as a .war file named "Lab5.war" and export the source files. Copy the .war file into your turnin directory.

Grading (75 pts)

This lab is due tonight at 11:59.

• Simple JSP (25 pts)
• Login with JSPs (50 pts)