Server Project

A REST client-server application

I have written a Spring Boot application that implements a back end server for a web application. Your job in this assignment will be to construct a web page that acts as the front end of this application.

The first thing you will need to do is to get the server application up and running. Click the button above to download the project folder for this server application. Here are some steps you will need to do to get the server running:

1. Use the MySQL workbench application to make a new, empty database with the name of 'events'.
2. The project folder for the server contains a database folder. Use the data import feature in the MySQL workbench to import these database files.
3. Locate the pom.xml file in the Project Files folder in the NetBeans project. Edit the java.version setting in this file to match the version of Java you are using.
4. Run the project to start up the Spring Boot server.

The server serves up information about upcoming events, and allows users to sign up to participate in those events. Once the server is running you can test it in a browser. Paste the URL

http://localhost:8085/handles

into your browser. The server will respond with some basic information about the upcoming events that are available.

To see more detailed information about any event, paste a URL of the form

http://localhost:8085/events/<id>

with <id> replaced with the id number of the event you want to see information on.

You can see information about who is signed up for an event with a URL of the form

http://localhost:8085/participants?event=<id>

with <id> replaced with the id number of the event whose participants you want to see.

The server also allows you to POST registrations for events. To register a user for an event, POST an object of the form

{"event":<id>,"name":<name>,"email":<email>}

to the URL

http://localhost:8085/participants

The web front end

The web front end you will construct for this assignment will use the URLs shown above to interaction with the server. You should implement this front end as a single page application with four divs.

The first div should simply display a loading message. At startup you should hide all of the other divs, and then do a fetch() request with the URL

 http://localhost:8085/handles

to get the list of available events. Once that data arrives you should hide the loading div and show a div that displays a list of events in a select element and prompts the user to select an event and click a button to move to the next screen.

When the user has selected an event to view, you should do a couple of fetch() requests to get more detailed information on the event and a list of participants. When that information arrives you can hide the div you just had open and show the next div, which will display more detailed information about the event and who is currently signed up to attend.

At the bottom of that div you should also display some text input elements that allow the user to sign up for the event by entering their name and email address. When the user clicks the sign up button you should post the sign up request to the server. When you get confirmation from the server that the sign up is successful, you should hide the current div and show the last div, which displays a simple confirmation message to confirm that the user has successfully signed up for the event.