Due on: Friday 16th June at 8pm

Submission Instructions:

Please submit a folder containing all of your website files (ReadMe.pdf, assignment3.sql,    HTML and PHP files, a CSS folder, an image folder, and any other resource folders) in a ZIP  folder called 320XXXX-Assignment3.zip, where 320XXXX is your student ID. Additionally, all file paths must be in English to avoid any issues with encoding errors. The assignments are individual work.

Goal:

To provide practice and assess competency in

•   Developing server-side PHP scripts

•   Dynamic generation of web page content

•   Server-side processing of HTML form data

•   Tracking user status using sessions and cookies.

•   Integrating use of a relational database into site functionality

Overview:

You will design and implement a small website that allows registered users to rate a selection of books with a score from 0 to 10 .

(1) The home page will display these books with their information and average rating, ordered from the highest to the least score.

(2) The book list, including the average rating, is visible to everyone, regardless of       having logged in. Registered users can rate the books, after having logged in. They can also change their rating on a book that they have already rated.

(3)  Users can log in and log out, but the website does NOT need to do the functionality for creating/removing/changing users or books.

For example, you have a list of 6 books. The logged in users can give a rating from 0 to 10 to each of these books. The home page displays a list of the books sorted by average rating      (from highest to lowest). Logged in users can rate a book if they have never rated it or          change their rating on the book that they have already rated. They can also log out of the    site. Non-logged in users can only view the list or log in. Note some sample books and users are provided in the SQL file (assignment3.sql).

You will need to also submit a document (ReadMe.pdf) that will describe your work,           starting from the database, then the planning for the pages and functionalities, the queries you will use and finally a reflection on your work. Please follow the instructions ("Steps to  follow") detailed below.

Details of the web application:

Home Page:

The home page should have a list of a small number of books (at least 5 items). The books   should be ordered by their average rating, from highest to lowest, and those without any    rating should be displayed at the bottom and ordered by their title alphabetically, from A to Z. Each book should show its title, author, and average rating .

Logged-in users should be able to rate a book or change their previous rating by clicking a  button next to each book. Non-logged-in users should be able to see the list of books, but  they should also be presented with a message that invites them to log in to rate the books. For instance, the message could say "Please log in to rate the books." Logged-in users, on

the other hand, should be greeted with a welcome message that displays their username

and a link to log out. For example, the message could say " welcome user1!Logout".

Log in Page:

The "log in" page should have a log-in form that allows users to enter their usernames and  passwords, along with a submit button to log in. You do NOT need to implement other         functionalities, such as a "remember me" button or a "forgot your password" option. If the user enters the correct username and password, they should be logged in and redirected to the home page. If the user enters incorrect login credentials, the form should display an       error message.

Log out Page:

The "log out" page should clear the session data related to the user and display a suitable message with a link back to the home page.

Rate Page:

The "rate" page should display information about a specific book that the user is rating. This page should contain a form that allows the user to rate the book if they have not rated it      before or change their rating if they have already rated it. If the user is not logged in, they    should be redirected to the "log in" page instead of being shown the rating page.

After the user chooses or changes a rating, they should click the submit button to submit the rating. Then, the user should see (1) a message confirming that the rating update was successful and (2) a link directing them back to the home page, where the book list should display the updated ratings.

If any error occurs or if the rating data is not updated successfully, an appropriate error       message should be displayed, and the user should be allowed to try to rate the book again.

Error Message:

Any error in the database connection in any page should be immediately reported to the user with a suitable error message.

Log in System:

The log in system must be based on PHP sessions. Log in data (username and password)        must be sent using POST requests. The usernames and passwords as well as the list of books are provided in the SQL file (assignment3.sql) and stored in the database. You do NOT need  to implement functionalities for creating, changing, or removing users or books. Your web    application should assume that the MySQL database already contains the relevant data. You should create those tables and data directly in MySQL using phpMyAdmin.

Page Layout:

The page layout should be simple but clear and effective, and each page should have a         common header and footer. You will need to use CSS to organize and display the content in an effective way. The layout does not have to be responsive, but all pages should display     properly on a laptop screen.

Steps to follow:

Step 1: Prepare the document (ReadMe.doc) to be submitted with the web site.

Prepare a Word document called "ReadMe.doc". Inside the document, write your name and student ID on top, and then the title "Assignment 3" .

Step 2: Prepare the database for the website.

The first thing you need to prepare is the MySQL database.

For this website, you will need 3 tables: one table for the users, one table for the books, and one table for the user ratings. Our SQL file (assignment3.sql) has already provided the user   table and book table. You just need to create the user rating table that will store the rating   data for each user.

For the user rating table, you need to decide what columns you need and decide their data type (and length/range). In "Part A: Database" of the ReadMe Word document, you should specify the columns you have chosen for the user rating table and their respective data     types and ranges. For example, if you have decided to include a "rating" column of integer type, you could explain that this column is intended to store user ratings from 0 to 10.

You will also need to consider the website functionalities when designing the table. For          example, the user needs to be able to log in with a username and password . The logged in    user can give a rating to a book or update an existing rating that the user gave before.            Furthermore, the user rating table should be a mapping between the user table and the        book table, where each row in this table should represent a user rating for a particular book . For example, if user1 gives a rating of 5 to the book titled "Dracula" with book_id=3, the        record in the user rating table would look like this (user='user1', book_id=3, rating=5). This    record can only be changed by user1.

When you have decided the table schema, you can create the user, book, and rating tables using phpMyAdmin.

(1)  Import the SQL file (assignment3.sql) using phpMyAdmin. This will create a database called “assignment3” that contains the user table and book table. The user table includes three users, and the book table has 6 books for testing purpose.

(2) Create the user rating table based on your choices of columns using phpMyAdmin.

Step 3: Plan the pages/functionalities of the website.

In "Part B: Website Planning" of the ReadMe Word document, take screenshots of all the pages in your website and provide a brief explanation for each page (as shown below).

For each page on this website, you should plan what will appear on the page, what actions can be taken from the page, and how these actions will affect the database (e.g., insert a   new user rating record, update an existing user rating, or retrieve the data from one or      more tables). Additionally, you should consider the differences between logged-in and not logged-in users, as they should see different content on the pages. If it helps, you may        include a hand-drawn sketch of the page.

Begin by planning the homepage, and then consider the possible actions that a user can take, such as logging in, rating a new book that has not been previously rated, rating an existing book that has already been rated, and logging out.

Step 4: Write the SQL queries needed by the website.

In "Part C: Database Queries" of the ReadMe Word document, write down the SQL query to retrieve the user ratings made by "user1" and the corresponding book titles. Test your          queries in phpMyAdmin (using real values) to make sure they are correct.

Step 5: Write the HTML/PHP essential code.

Following the functions that you have planned in the above steps, start writing the HTML     and PHP code for your pages. Keep the HTML code to a minimum and focus on forms to       send data, messages in response to user actions, and data display. Try to implement the       website one function at a time, starting with displaying the books, then log in/log out, and   finally user ratings. Make sure each function works before moving on to the next one. If any errors occur, try to understand the cause, and fix them.

Once you have completed the website, test all its intended functionalities, such as adding a  new user rating for a book and ensure that everything is working properly. To test the           website's functionality, try to access each page when you are logged out, and try opening     pages that expect POST data without sending any data when you are logged in. Try inserting invalid data in the forms – what happens? If the user sends invalid data, you need to make   your PHP code display a suitable error message.

Fix any issue you find in your testing.

Step 6: Improve the appearance (HTML/CSS) and check the PHP requirements.

Enhance the appearance of your pages by adding a header and footer, as well as CSS styling to ensure that the information and functionalities are displayed clearly and in an                    aesthetically pleasing manner.

Check that you are following all requirements for PHP (see the "Other Requirements" section) to make sure that you fix any related issues.

Add comments In English to explain your PHP/CSS/HTML code where necessary, and re-test your website after making any changes to the code .

Step 7: Write a reflection.

In the final part "Part D: Reflection" of the ReadMe Word document, you are required to      write a brief reflection on your work after completing the website. It is important to include the following details:

•   Any issues or problems you encountered during the development process and how you resolved them.

•   Suggestions for improvements that can be made to the website and why you believe these changes would be beneficial.

Other requirements:

Database

The database and sample data for your website should be exported to a SQL file called          'assignment3.sql'. You should include this SQL file in the folder of your website so that it can be imported into the MySQL database and submitted on Blackboard. .

HTML

The HTML generated by your PHP scripts should be valid HTML. You can check this using the W3C validator at:

https://validator.w3.org/#validate_by_input

To use the 'direct input' feature of the validator, you can copy and paste the HTML code of your pages from the website hosted on the XAMPP server. Note that using the validator     directly on PHP code will not work.

CSS

Use one CSS file (style.css) to control the presentation and layout of your site's pages and avoid using inline and internal CSS rules. The CSS file should remove unused rules and      repetitions. Validate your CSS code with the W3C validator tool:

https://jigsaw.w3.org/css-validator/

JavaScript

You do NOT need to write or use any JavaScript in this assignment.

PHP

The content of some of the pages depends upon whether the user is logged in. Although  most of the page is the same each time, some of it must be generated dynamically on the server via PHP.

Each page should, therefore, be a .php file rather than an .html file. Most of the page will be HTML markup, but PHP code segments will occur at appropriate points and be placed            between <?php and ?> tags.

Some of the PHP scripts will generate the webpage content. Additional scripts, which            process data without generating webpage content, may be implemented. These scripts may carry out tasks such as validating login data and handling log out, and they should provide a redirect back to another page when they have finished .

PHP scripts can redirect the browser to other pages by setting the HTTP Location header using the header function. PHP code should be used to interact with the database.

Comments

You must include appropriate comments in all your CSS and PHP files – especially in the PHP scripts, where you need to explain your code in English.

Third party content

If you include third party content in your site (such as images, icons, background, etc), do

not link to the original websites. Please download the images and use your copy. You are not allowed to use third-party framework or library.

Folder Structure

Organize your resources by using folders.

(1) All HTML and PHP files go in the root folder .

(2) CSS folder: the CSS file (style.css) is in the 'css' folder.

(3)  Image folder: all the images are in the 'image' folder.

(4) The resources folder if you are using other resources (like fonts). Place all these          resources in the ‘resource’ folder and make sure you link the resources in your HTML files appropriately.

Filenames should contain only ASCII characters.

What to submit:

To submit your assignment, all website and document (PDF) files must be submitted electronically through Blackboard. Follow these steps:

(1) Create a folder named 320XXXXX-Assignment3, where 320XXXXX is your student ID. Place all website files and folders inside this folder.

(2)  Include a SQL file (Assignment3.sql) that is exported from your database with three tables (user, book, and user rating tables). You can use phpMyAdmin's "export"       function to create the SQL file from your database.

(3)  Include the document (ReadMe.pdf) that describes the development of your      website with the parts A-B-C-D described above. Place this document in the root folder.

(4) Create a ZIP archive of the folder, resulting in a file named 320XXXXX- Assignment3.zip.

(5) Submit the ZIP archive via Blackboard.