Assignment #3 Solution

Title

Sycamore Calendar, Part 2







Topics Covered

HTML

CSS

Java Servlets

AJAX

Databases and SQL




Introduction




Now that you have created the main functionality for your web application, you will be adding additional features such as searching for other users, follow/unfollow users, and viewing other user’s profile & their events.




Assignment




For this assignment, there will be a few changes to the existing UI. Please read carefully over the new requirements. Do your best to get your UI to look similar to the examples shown below. You are now going to use a database to save data. The structure of the database will be up to you. Make sure that you provide a SQL script file that contains all the CREATE statements so the graders will be able to recreate the database during grading. Name the file database.sql and place it in your project directory, which is at the same level as the WebContent directory.




Every time a user logs into the website, record his information in the database if it’s not already there. Then, when users are searching for other users, you can display their calendars without requesting information from the Google API Calendar Server. This will be necessary since you won’t have access to all user calendars at the same time. DO NOT STORE PASSWORDS IN THE DATABASE.






Figure 1: Sign-In Page

The layout of this page is the same as Assignment 2.







Figure 2: Logged-In Page




A search bar has been added in the top bar for logged-in users. Only logged-in users can search for other users.










Figure 3: Profile Page




A search bar has been added in the top bar for logged-in users. Only logged-in users can search for other users.










Figure 4: Home Page (scrolled down)




This page will be displayed when the user clicks “Home”. The set of users that Tommy is following will be displayed under the Add Event section. If there are more than four users that Tommy follows, it will scroll vertically. Display at most four users per row. Clicking on the image or the name will link to that user’s profile page shown in Figure 7.







Figure 5: Search Results Page




From any of the pages with the search bar, users will be directed to a page that looks like the above screenshot after searching. If the user clicks the search button without typing anything, all users in the database will be displayed. If the user types “a” (without quotation marks), all users with a first or last name containing an “a” will be displayed. Similarly, if the user types “ab”, all users with a first or last name containing “ab” will be displayed. If a space is provided, it should be assumed to represent a logical OR operation. All searches should be performed case-insensitively. If no matches are found, display “No Users Found” in the body of the search results page. Here are a few examples. Assume all the names below are in the database.




 
Searching for “a” would return “Allison Smith”, “Alan Smith”, and “Allison Jones”.




 
Searching for “i” would return “Allison Smith”, “Alan Smith”, and “Allison Jones”.




 
Searching for “Allison” would return “Allison Smith” and “Allison Jones”.




 
Searching for “allison s” would return “Allison Smith”, “Alan Smith”, and “Allison Jones”.




 
Searching for “all” would return “Allison Smith” and “Allison Jones”.

 
Searching for “smith” would return “Allison Smith” and “Alan Smith”.

 
Searching for “allisons” (no space) would return nothing.




The user should never see a link to his own profile in the search results, even if he searches for his own name.




Display at most three users per row. The scroll bar should only scroll between the black blocks. When the user clicks on the image or the name, if he is not following that user, it will link to Figure 6, Friend’s Profile 1, where the user can’t see their upcoming events. If he is following that user, it will link to Figure 7. Friend’s Profile Page 2.







Figure 6: Friend’s Profile 1




If Tommy Trojan has not yet followed Allison Smith, it will display “Follow Allison to view Upcoming Events”. If Tommy clicks on the “Follow” button, Allison’s calendar should appear (Figure 7). The entire page should not refresh for this to display (think AJAX).







Figure 7: Friend’s Profile Page 2




If the logged-in user is following Allison, that user’s calendar will be displayed. Note that this is coming from the database and not directly from the Google Calendar API. If Tommy unfollows Allison, Figure 6 should be displayed.




If the user clicks on any part of the event in the user’s calendar that is displayed, that event should be added to the logged-in user’s calendar. A confirmation should be displayed before this is done. The confirmation can be implemented however you would like. The event should be added into the user’s Google Calendar as well as the database.







Additional Comments




Users can have the same first name, last name, and image, but all emails are unique. Display all the users accordingly in the search page.




Images must be round.




The text “Sycamore Calendar” in the top left corner leads to Figure 2, Logged-in Home Page.




The font: American Typewriter




Black: #362f2d




White: #ffffff




Grey: #898989

Grading Criteria




Database (0.2%)

0.2% - SQL script provided for database in the same directory as WebContent




Sign-In Page (0.2%)

0.2% - This page should still function the same as assignment 2.




Logged-In Page (0.4%)

0.2% - This page should still function the same as assignment 2.




0.2% - Search bar functions properly on Logged-In Page




Profile Page (0.4%)

0.2% - This page should still function the same as assignment 2.

0.2% - Search bar functions properly on Profile Page




Home Page (0.7%)

0.2% - This page should still allow adding events the same as in assignment 2.

0.2% - Users that are currently being followed are displayed as described.

0.1% - Clicking on a user links to the friend’s profile page properly.

0.2% - Search bar functions properly on Home Page




Search Results Page (1.2%)

0.5% - Search functionality is implemented as described




0.25% - Clicking on the image or name takes the user to the proper profile page based on whether the user is currently being followed

0.25% - GUI is similar to the sample

0.2% - Search bar functions properly on Search Results Page




Friend’s Profile Page (1.3%)




0.25% - Follow/Unfollow toggles and displays/hides the events accordingly without refreshing the page




0.25% - GUI looks similar to the sample




0.2% - Clicking on an event in a followed calendar displays confirmation to add to your calendar




0.5% - If confirmed, an event on a followed calendar is added to your calendar in Google Calendar and in the database




0.2% - Search bar functions properly on Friend’s Profile Page