Order Description

Create a web application that allows the user to select a genre of music and display a list of the movies for that genre. The other part of the application allows the user to enter new movie information and have it stored.

Details:

Your program must contain the following components:

An HTML page to View Movies

This page is called viewMovies.html and contains a form with a drop down list (or equivalent) which allows the user to select as genre of music and then displays all the movies for that genre.

The list of genres is retrieved from a file called genres.txt. Use a jQuery Load or Get command or the fetch command to read the files genres.txt.

Once a genre is selected or changed, a server file getMovies.php is called using the JavaScript fetch command or jQuery AJAX command with the parameter ‘genre’ and the value one of the genres.

The possible genres are: Action, Animation, Comedy, Drama, Horror, Musical and Science Fiction/Fantasy.

When the command returns, update a div (or similar) with the information about each movie in that genre (returned from the call to the getMovies.php server code). Display the output sorted alphabetically by the movie title, formatted nicely and include: movie title, runtime, rating, studio, director and release date. The format of the data returned is pictured below.  The fields do NOT have to be displayed in this order; make it look good.

The possible values for rating are G – General, PG – Parental Guidance, PG-13 – Parental Guidance 13, R – Restricted and Unrated. Display the expanded text (and the abbreviation if you choose).

Make sure you format things nicely using proper CSS techniques and varying colours/font sizes to make the display look good.  Flex boxes and grids are

The div (and only the div) containing the information must update automatically every 20 seconds to include any other movies that might have been added.

A Second HTML page to Add Movies

This page is called AddMovies.html and has a form to allow the user to enter movie information for a new movie and save that information on the server. Storing the information is done using the PHP program addMovie.php which is called using the POST method.

You must send the information to the program using a jQuery POST command or JavaScript fetch. You must use the name value pairs of all fields. The name in the name value pair (that is the name of the field from the form) corresponds to the element name of the entity. All entities are required and error checking must be done to make sure that the information sent is complete and accurate. Make sure you use genres.txt to retrieve the genres. You must also check the value returned and deal with it appropriately.

Remember, use the power of the developer options in the browsers to know what is being sent as parameters. YOU CANNOT USE A FORM WITH A POST METHOD. YOU MUSTUSE THE POST METHOD USING EITHER JQUERY POST OR JAVASCRIPT FETCH TO SEND THE INFORMATION ASYNCHRONOUSLY.

The Final 5

Doing everything about perfectly will get you a maximum 95%. To get the final 5% you need to do at least 2 of the following:

1.      Allow the user to change the search order. By default, the list is sorted by movie title, but the user should be able to sort them by rating or release date (other fields if you like, but at least those two).

2.      Create a file for the ratings just like I provided for the genres and use it for display and form selection.  The ratings file should include both the short form and the expanded form of the rating.

3.      All selection by year in addition to genre. If there are no movies for the year entered, display an appropriate error message.

4.      Give the user the option of a light or dark theme and allow them to switch from one to another.

Other Things

1.      There are marks for interface design. Use appropriate colours, labels, headers, etc. This does not mean make it garish or having flashing lights, it means make it professional. Design for mobile first.

2.      Make the code efficient; there are marks for efficiency.

3.      You must use HTML5 and (proper) CSS techniques for this assignment.  You are welcome to use grid layout if you wish.

4.      The application must be responsive at the bootstrap breakpoints which are: >=768px, and >=1200px (you do NOT have to do the other ones but you may). That is, the page must adjust at each of those breakpoints. You do NOT have to use bootstrap. Remember it needs to look good on your phone so make sure that you try it on the phone and that it has proper font sizes and positioning.

To submit

When you have completed the assignment zip the YourUserName_C31A01 folder containing all the files for the assignment and copy it to the course page.