Assignment #3

CSCI 201 Fall 2024

8% of course grade

Title

WeatherConditions

Topics Covered
Java Classes	HTML	CSS
MySQL	Java Servlets	Databases
JavaScript	AJAX	JDBC
Overview

Assignment 3 follows the ideas of the previous Assignment 1, Weather Conditions. This assignment focuses both on web front-end and on database backend portion of your website, and you will need to use MySQL, Google Maps API, and OpenWeatherMap API.

OpenWeatherMap API & Google Maps API

Instead of reading in data through a hard-coded JSON file, you will use the Open WeatherMap API to retrieve weather data. In other words, the weather data should now be pulled from this API as a JSON data stream, and you will not have to read in data from a JSON file. You can   learn more about the API here:

https://openweathermap.org/api.

You can learn more about the retrieved data at this site:

https://openweathermap.org/current.

The data will be returned in JSON format.

You will use the Google Maps API to generate a map overview when searching by latitude and longitude. You can learn more about the API here:

https://developers.google.com/maps/documentation/javascript/tutorial

You will need this to create the overlay displayed in Figure 3.

You will have to generate API keys for both sites, so make sure you do this early. Validation can take up to a few hours, so do not start this assignment on the last day.

Parsing JSON

The data from the APIs is going to be returned as a JavaScript. Object Notation (JSON) file.

JSON is a lightweight data-interchange format. In other words, it is a syntax that allows for easy storage and organization of data. It is commonly used to exchange information between client and server, and it is popular because of its language independence and human readability. JSON is built upon two basic data structures that you should already be familiar with: dictionaries (maps) and ordered lists. An object in JSON is represented by an unordered set of name/value   pairs (i.e. dictionary). Objects are contained by braces, { }, inside of which will list the object’s attributes (with the syntax name : value), using a comma as the separator.

As in Assignment #1, your will use GSON to deserialize JSON. GSON is known for its ease   and flexibility of converting Java objects into JSON objects (and vice versa), and it is simple   and straightforward to use. See Assignment #1 for the steps needed to include the GSON JAR file into your project.

MySQL

In this assignment, you will also track user data. You should construct a simple MySQL database that stores usernames, passwords, search queries for each user, and a timestamp of when the search occurred. You will need to display this data on the Profile Page for each user when logged in (see Figure 10).

Images

All images needed for this assignment are included in a ZIP file provided in the assignment folder on D2L Brightspace.

 

Figure 1 Home Page (City)

 

Figure 2 Home Page (Lat/Long)

 

Figure 3 Home Page (Google Maps overlay)

Home Page

At the top right corner of the Home Page, there are two menu items: “Login” and “Register.

(Figure 1). Clicking the “Login” menu will direct the user to the login page (see Figure 4).

Clicking the “Register” menu will direct the user to the Registration / Sign up page (see Figure 5).

If the user clicks the “Location” radio button, the page will add a Google Maps icon to the right of the search bar (see Figure 2). The user can click on that icon, which will create a Google CSCI 201 Assignment 3

Maps overlay for the page (see Figure 3).

You can do this by creating three new <div> tags: one for the map with a percentage sizing in the center of the viewport, another for the background, and one more <div> to contain the other two. Clicking on the map should make the map disappear, returning the user to Figure 2, and auto-populate the “latitude” and “longitude” fields with the chosen latitude and longitude. Note: The “Display All” button should be removed.

 

Figure 4 Login Page

Login Page

Once the user arrives to this page, the user can login with a pre-existing account. There are three different scenarios to account for:

●   Wrong username: This user does not exist.

●   Correct username, wrong password: Incorrect password.

●   Correct username, correct password: Successful login!

Once the user enters the correct username/password information, the program will redirect the user back to the home page (see Figure 6). Otherwise, the program will keep the user on the   login page and display the error message between the password field and the “Login” button.

 

Figure 5 Register Page

Registration Page

When the user clicks the “Register” menu, he will be directed to the Registration page. The user can sign up for a new account on this page. There are three different scenarios to account for:

●   Username already taken: This username is already taken.

●   Passwords do not match: The passwords do not match.

●   Username is unique, and passwords match: Successfully create a new account!

Once the user enters the correct username/password information, the program will redirect the user back to the home page (see Figure 6). The user is automatically logged into this new account. If the entered information is not valid, the program should leave the user on the Registration page and should display an error message between the “Confirm Password” field and the “Register” button.

 

Figure 6 Home Page (after logging in)

Home Page (After Login)

Upon successfully logging into an account or successfully creating a new account, the “Login” and “Register” menus should be replaced with “Profile” and “Sign Out”, respectively. Clicking on the “Profile” button redirects the user to the Profile page (see Figure 10). Clicking “Sign Out” will log out the user and redirect him to the home page (see Figure 1).

If the user performs a search while logged in, you should add this data into a MySQL table. If a   search is completed while not logged in, no data is stored in the database. Make sure to add the   timestamp of the transaction to the database. This process should be repeated whenever a search is completed from any page of the site.

 

Figure 7a Search Results

Search Results

The Search Results should be displayed under the Search area, as a table displaying the city name, low and high temperatures for all results, and dropdown to select the type of sorting, as shown in Figure 7a. The Search Results can be implemented with a <div> section. Selecting from the Sort by dropdown should re-arrange the list as shown in Figure 7b.

 

Figure 7b Sort Options

The Search area (edit boxes, radio buttons, etc.) is still active and its functionality remains the same as before.

If more than one city matches the search query (i.e. “Springfield” or “Washington”), the OpenWeatherMapAPI will return data for all cities with the same name. You should use the table to display data for all matching cities.

 

Figure 8 Details (values definitions)

 

Figure 9 Details

Details

When clicking on a city name in a row of the Search Results, the Details for that city will replace the Search Results (The <div> section is updated) as shown in Figure 8 and Figure 9.

 

Figure 10 Profile Page

Profile Page

When the user clicks on “Profile” menu, the user should be directed to a new Profile page. This page will display the user’s search history. When the user is in the Profile page, the menu on top  should still read “Home” and “Sign Out”. Using the browser back button should allow the user to  go back to searching on the homepage.

The search history table heading should display the actual username of the currently logged-in user, as shown in Figure 10. The search history list should display all the searches made by the user, either by city or by latitude / longitude. The searches are ordered from newest (at the top) to oldest (at the bottom). Clicking on a city name or lat/long location, should display the Details for that location, under the search history, again using a <div> section.

Grading Criteria

The output must match as close as possible to the screenshots provided above. The maximum number of points earned is 6.

User Login Functionality (0.9)

0.2 - Login and Register links are on the Home page and Register page if a user is not logged in 

0.1 - Profile and Sign Out links are on the Home page, if a user is logged in

0.1 - Profile and Sign Out links are on the Profile page, if a user is logged in

0.1 - Login page looks like the screenshot    

0.1 - Register page looks like the screenshot 

0.1 - Profile page looks like the screenshot

0.1 - Error messages displayed properly on the Login page    

0.1 - Error messages displayed properly on the Register page

Home Page (0.8)

0.1 - When latitude/longitude radio button is clicked, the Google Maps icon is displayed 

0.3 - Clicking the Google Maps icon displays the Google Map in the center of the page

0.4 - Clicking on the Google Map makes the map disappear and populates the latitude/longitude text fields properly

Search Results (1.6%)

0.5 - Searching by city returns proper results

0.5 - Searching by latitude/longitude returns proper results 

0.3 - Sorting functionality works properly

0.1 - Clicking on city name (and not on temperatures) show to city details

0.1 - If no city matches search, the table and drop-down menu are not shown, but an appropriate message is displayed.

0.1 - If only one city matches the search, Sort by drop-down menu is not shown.

Details (1.5)

1.5 - Details area shows proper live data

Top Search Bar (0.1)

0.1 - When latitude/longitude radio button is clicked, the Google Maps icon is displayed

Profile Page (0.6)

0.1 - Profile page shows all the searches performed by a user

0.1 - Clicking browser back button in Profile page, brings back the home page 

0.1 - Profile page shows user’s name

0.2 - Results are sorted from newest to oldest

0.1 - Profile page looks like the screenshot