Title

JoesTable

Topics Covered

HTML/CSS

Databases/JDBC/SQL

Java Servlets

AJAX

Introduction

Just in time! Magnificent job with the successful launch of the JoesTable driver scheduling   system, and as a result you have received special blessings from the director. “ Perhaps it’s  time to do something more modern?” Honestly, it’s not such a bad idea given the amount of success you’ve had. Don’t resist the modern call of duty - embrace it.

This time around, the Council of SAL is looking to expand their product line and make their new product more up-to-date and user-friendly.

Overview

In this assignment, you will be making a web application that builds on the Yelp API from the previous homework assignment. The program will allow users to search for restaurants, add them to their list of favorite restaurants, and schedule reservations for these restaurants.

This means that you’ll need to implement a database to keep track of user information as well as use a variety of different APIs.

The rest of this document includes mockups of the web pages. Your web pages should look reasonably similar in style to the examples shown in the figures. For example, we may not   penalize you if the margins are off by 5px, but there will be deductions if an image is

misaligned or half the size it should be. We’ve also provided the sample assets here:

https://drive.google.com/drive/folders/1T6zVhCP88TzsWNhS8Eo_Wq5ijgUunzao?usp=shari ng

Google Maps API

When querying a search, users will have to type in the latitude and longitude, or instead use the Google Maps API to generate a map overview that can populate coordinates. An

example of this is shown in Figure 2. You can learn more about the API here:

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

Please keep in mind that you may have to generate API keys for the Google-affiliated APIs, so do not start this assignment on the last day!

The user arrives at this page after clicking on the Google Maps button from Figure 1. The    user can click any location on the map, and doing so will populate the latitude and longitude fields with the latitude and longitude of the selected location. For example, if the user clicks  on the Los Angeles area, the latitude and longitude could be populated with 34.02116 and    -118.287132 respectively.

Users can use the top menu bar to navigate between the Home Page by clicking on “ Home,” and the Login / Signup page by clicking on “ Login / Sign Up.” If the user is already logged     in, the menu bar should instead contain “ Home,” “ Favorites” , “ Reservations” and “ Logout.”     This menu bar should persist between all pages of this application.

Clicking on the logo (JoesTable!) should redirect the user to the Home page as well. This should apply to all the pages in this assignment.

Clicking on the “Add Reservation” button, appropriate text fields should display underneath   the button without needing to refresh the entire webpage. The user can select a date on the  calendar, select or enter in a time as well as enter any additional notes for the reservation. If any of the fields are missing information, be sure to print out the appropriate error message. The reservation is added to the reservation list when they click on the “Submit Reservation” button.

On clicking Date, a calendar should pop up for date selection and on clicking Time, the time picker should pop up. This functionality can be achieved using HTML5 Date and Time input type.

HTML5 Date and Time

When making reservations users have to enter the date and time of reservation. You should use the HTML5 Date and Time input types. Below is sample HTML code to create date and time fields in your reservation form (you might have to modify it to suit your needs):

For Date:

For Time:

Important notes:

1.   In the event that any mysql-related class or any other externally added JAR class is not included in the Eclipse Export ZIP file, despite being included in the classpath,   the web content of the project will be unable to access the JAR file.

To enable web content to locate the JAR file, it is imperative that the JAR file be placed in the classpath and also be placed within the web app/WEB-INF folder, specifically inside a directory named lib. See the lecture notes.

If the lib folder has not been automatically generated by Eclipse, you should

manually create the lib folder within the web app/WEB-INF directory and proceed to add the necessary JAR files to the web app/WEB-INF/lib folder.

In earlier versions of Eclipse, WebContent was used instead of webapp.

2.   To properly access the JDBC Connector from your servlet, and start a connection with MySQL, include the following code:

Class.forName ("com.mysql.cj.jdbc.Driver");

DriverManager.getConnection("jdbc:mysql://localhost/database?user=use

rname&password=password");

(note that Class.forName (“com.mysql.jdbc.Driver”); is deprecated)

SQL Script Submission

You should include a SQL file, named create.sql, that contains the SQL statements to create your database, and place it at the top of your project folder, and ensure that it is

included in the Eclipse Export ZIP file.

Dataflow between Browser - Server - Database

This section describes the flow of data between a browser (client), a Tomcat web server, a Java Servlet, and a MySQL database when using AJAX `fetch()` to retrieve data in JSON format.

This is the process, step by step:

1. Browser (Client):

- The client, typically a web browser, initiates an AJAX request using the `fetch()` JavaScript API.

- The request is made to a specific URL on the Tomcat web server, which is hosting the  Java Servlet. The URL may look like: `http://localhost:8080/YourWebApp/YourServlet`.

2. Tomcat Web Server:

- The Tomcat web server listens for incoming HTTP requests.

- When it receives the request, it maps the URL to the appropriate servlet based on the servlet mapping defined in the `web.xml` or annotations (if using Servlet 3.0+).

3. Java Servlet:

- The servlet receives the HTTP request.

- It processes the request by extracting any query parameters or data sent in the request (e.g., query string parameters, request body data).

- The servlet interacts with the MySQL database using JDBC. It sends a SQL query to the database to retrieve the requested data.

4. MySQL Database:

- The MySQL database receives the SQL query from the servlet.

- It processes the query and retrieves the data from the database tables.

- The result set is typically returned as a set of rows and columns.

5. Java Servlet (Continued):

- The servlet receives the data from the database and formats it into a JSON response.

- It sets the appropriate HTTP response headers to indicate that the response is in JSON format.

- The servlet sends the JSON response back to the client as part of the HTTP response body.

6. Browser (Client) - AJAX Response Handling:

- The browser receives the JSON response from the server.

- The client-side JavaScript code in the browser can then parse and process the JSON data.

- The data can be used to dynamically update the web page, display results, or perform other actions as required by the web application.