Introduction
For this assessment, you are going to use jQuery and AJAX to make a dynamic web page that communicates with two server-side scripts that we have developed for you.
The first script uses data from the Food Standards Agency. The Food Standards Agency makes the results of restaurants’ (and other businesses serving food) hygiene inspections publicly available (see here: https://ratings.food.gov.uk/), and we have developed a simple PHP script that will provide the results of the inspections for Maidstone in JSON format.
The second script is uses data from Google Places. Google Places provides (among other data) customer ratings for restaurants and other businesses. We have developed a PHP script that will provide the customer ratings for some businesses in Maidstone in JSON format.
Requirements & constraints:
You should contain all of your work on this assignment in a single HTML document. Your CSS for formatting and JavaScript code should be embedded in the header section of the HTML document.
You must use the jQuery library (i.e., avoid plain JavaScript where jQuery can be used). You cannot use any other jQuery plugins, external CSS, or any other JavaScript libraries for this assessment.
You should submit your single HTML file via Moodle before the deadline.
General correctness
You are expected to follow the instructions as specified in the assessment. You should ensure that your HTML document is valid and no bugs in your scripts. Please pay attention to issues with loading-order and robustness as well.
Design & coding quality
You should define the visual presentation of your HTML document using CSS. Your web page should be user-friendly with appropriate colour scheme and font, e.g. the table should have proper size, spacing and margins to maximise usability. You should also ensure good coding quality with appropriate comments and indentation. You code should be well organised with minimum code duplication.
Part 1: Hygiene ratings
Part 1 focuses on the hygiene ratings. The main tasks are: setting up AJAX calls and pagination.
The server-side script: hygiene.php
The server-side script is hosted at the following URL:
https://www.cs.kent.ac.uk/people/staff/yh/co539/A2-data/hygiene.php
This script can be manipulated using several GET parameters. Accessing the script without any parameters returns the first 10 businesses’ ratings in JSON format for testing.
Examples:
To retrieve the results on page 7:
https://www.cs.kent.ac.uk/people/staff/yh/co539/A2-data/hygiene.php?op=get&page=7
To find the businesses whose names contain the string “Eat”:
https://www.cs.kent.ac.uk/people/staff/yh/co539/A2-data/hygiene.php?op=search&name=Eat
JSON format of the returned data
The demo, get, and search operations all return data in the same JSON format. The format is an array of individual JavaScript objects with the following properties:
name The name of the business inspected
address The full address of the business
type The type of the business, e.g. Restaurant/Cafe/Canteen
rating The rating (out of 5) awarded to the business
date The date on which the inspection was carried out
The pages operation returns a single JSON object, with a single “pages” property. This property contains the number of pages of the results that are available.
Accessing the server-side script
The script outputs special HTTP headers, CORS (Cross-Origin Resource Sharing, https://enable-cors.org/), which will allow your browser to access the script using AJAX requests regardless of where your HTML file is, in spite of the same origin policy. This means that you can complete this work from home without needing a webserver or database. We have hosted the script on a publicly accessible webserver, so you don’t need to use the VPN either. Because of the way these headers are interpreted by your browser, you must use the form of the URL as given above (e.g. leaving out the www. will cause the CORS to fail).
Task 1.1 – Retrieving the first page of the results on loading the web page
Write an HTML web page containing a heading, a brief description about the content on the page, and an empty table. Use jQuery and an AJAX request (you must use the jQuery function $.get to do this) to the given server-side script to populate the table with the first page (page 1) of the results when your web page is loaded in a browser. It should display each business’s name, address, type, the hygiene rating and the date when the inspection was carried out.
Task 1.2 – Basic pagination
Now you need to perform an additional AJAX request to find out the total number of pages of the inspection results that are available from the given server-side script. And then create a row of buttons, one for each page. Each button should be labelled with a page number; when clicking on the button it should empty the results table, perform an AJAX request to the server-side script to fetch the results of the requested page, and display the results in the table.
Part 2: Customer ratings – mashup
Part 2 focuses on merging information from more than one source: the server-side script you used in Part 1 and another script for information on customer ratings. As before, the script outputs CORS headers, so you can develop your solution from home.
The server-side script: rating.php
The server-side script is hosted at the following URL:
https://www.cs.kent.ac.uk/people/staff/yh/co539/A2-data/rating.php
This script can be manipulated using GET parameters, appended on to the end of the URL. The parameters accepted by the script are documented in the table below.
Example:
To find businesses whose names contain the string “Pizza”:
https://www.cs.kent.ac.uk/people/staff/yh/co539/A2-data/rating.php?business=Pizza
To help you testing your script, you can view all available rating data using the link below:
https://www.cs.kent.ac.uk/people/staff/yh/co539/A2-data/rating.php?html
JSON format of the returned data
The returned data is in JSON format, i.e. an array of JavaScript objects, each with the following properties:
business: the name of the business matched
address: the address of the business
rating: the average customer rating (out of 5)
total the total number of customer ratings
If no business matched the given search string the script returns an empty array. Note that for some businesses there may not be an address or rating available (in which case key is associated to null).
Task 2.1 – Retrieving the customer rating when requested by as user
Add a new ‘Get rating’ button at the end of each row that allows users to retrieve the customers’ ratings for the business in that row. When clicking on a ‘Get rating’ button it triggers an AJAX request to the server-side script rating.php (you must use the jQuery function $.get), and then displays in a pop-up window the average rating and the total number of customer ratings for the selected business.
Please notes:
The ‘Get rating’ buttons must be visible in any tables populated using the operations demo, page, search, or name search functionality from Part 1.
The script rating.php may return more than one matching business. You need to find a way (e.g. using the address) to match the business you are looking for with one (the right one!) of those returned by the script.
The script rating.php returns an empty array when no matches are found, or the matching business has no rating. You should alert if no rating is found for the selected business.
Part 3: Search functionality
Task 3.1 – Add a search input textbox and a button
You need to add a form on your web page containing an input textbox and a search button.
When users enter a search string in the input textbox and clicks on the search button, your page should clear the results table, perform an AJAX request to the server-side script for Part 1 (you must use the jQuery function $.get) and display the search results in the table.
Late or non-submission of the assessment
The penalty for late or non-submission of coursework is that a mark of zero is awarded for the missing piece of work and the final mark for the module is calculated accordingly.
Plagiarism and duplication of material Senate has agreed the following definition of plagiarism: "Plagiarism is the act of repeating the ideas or discoveries of another as one's own. To copy sentences, phrases or even striking expressions without acknowledgement in a manner that may deceive the reader as to the source is plagiarism; to paraphrase in
a manner that may deceive the reader is likewise plagiarism. Where such copying or close paraphrase has occurred the mere mention of the source in a bibliography will not be deemed sufficient acknowledgement; in each such instance it must be referred specifically to its source. Verbatim quotations must be directly acknowledged either in inverted commas or by indenting."
The work you submit must be your own, except where its original author is clearly referenced. We reserve the right to run checks on all submitted work in an effort to identify possible plagiarism, and take disciplinary action against anyone found to have committed plagiarism.
When you use other peoples' material, you must clearly indicate the source of the material using the Harvard style (see http://www.kent.ac.uk/uelt/ai/styleguides.html).
In addition, substantial amounts of verbatim or near verbatim cut-and-paste from web-based sources, course material and other resources will not be considered as evidence of your own understanding of the topics being examined.
The School publishes an on-line Plagiarism and Collaboration Frequently Asked Questions (FAQ) which is available at:
http://www.cs.ukc.ac.uk/teaching/student/assessment/plagiarism.local
Work may be submitted to Turnitin for the identification of possible plagiarism. You can find out more about Turnitin at the following page: https://www.kent.ac.uk/elearning/turnitin/?tab=information-for-students
Comments