Posted: September 18th, 2017

Use JavaScript, JQuery and AJAX to make a dynamic web page that communicates with a server-side script

CO539 Retrieval Coursework Food Hygiene Ratings
Deadline: Monday 10th August 23:55
Introduction
For this piece of retrieval coursework, you are going to use JavaScript, JQuery and AJAX to make a dynamic web page that communicates with a server-side script that we have developed for you. The Food Standards Agency makes the results of restaurants’ (and other businesses serving food) hygiene inspections publicly available (see here), and we have developed a simple PHP script that will provide the results of the inspections for the City of London to you in JSON format.
You should contain all of your work on this assignment in a single HTML file. Use CSS embedded in the page’s header for formatting, likewise for your JavaScript code. You may use only the base JQuery library for this assignment and not JQueryUI, any JQuery plugins, or any other JavaScript libraries. You should submit your single HTML file via moodle before the deadline.
The Server-Side Script
The server-side script is hosted at the following URL:
http://www.cs.kent.ac.uk/people/staff/iau/hygiene/hygiene.php
The script can be manipulated using several GET parameters, appended on to the end of the URL. Accessing the script without any parameters returns the first 10 businesses’ ratings in JSON format for testing. The parameters accepted by the script are documented in the table below.
Parameter Name
Description
op
This is the most important parameter, controlling what type of information the script is to return. The op parameter can be set to one of the following values:
demo
Returns the first 10 businesses’ ratings (default operation)
retrieve
Returns a “page” of (40) results. Expects the page parameter
pages
Returns how many pages of results are available
searchname
Returns the first 40 records for businesses whose name contain the specified search term. Expects the name parameter.
page
Used only by the retrieve operation. Expects an integer specifying which page of results to retrieve. For example, page=2 would return the 2nd page of results.
name
Used only by the searchname operation. Expects a string specifying the search term business names are to be matched against.
Examples:
http://www.cs.kent.ac.uk/people/staff/iau/hygiene/hygiene.php?op=retrieve&page=7
These parameters make the script retrieve the 7th page of results.
http://www.cs.kent.ac.uk/people/staff/iau/hygiene/hygiene.php?op=searchname&name=Eat
These parameters make the script find businesses whose names contain the string “Eat”.
JSON Format of Returned Data
The demo, retrieve, and searchname operations all return data in the same JSON format. The format is an array of individual JavaScript objects, with each object having the following properties:
id The ID of the inspection record.
business The name of the business inspected.
address The address, including post code, of the business inspected.
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 results that are available.
Accessing the Script
The script outputs special HTTP headers, called Cross-Origin Resource Sharing (CORS), which will allow your browser to access the script using AJAX requests regardless of where your HTML file is saved, 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 URL given above. Leaving out the www., or changing people/staff/iau to ~iau will cause the CORS to fail.
Task 1 – Retrieving the First Page of Results When the Page Loads (30%)
Write an HTML page containing a title, some text explaining what the page does, and an empty table. Use JQuery and an AJAX request to the server-side script to populate the table with the first page of results when the page loads. You may omit the id of the inspection record in your table. The screenshot below shows you what the output might look like.
Task 2 – A Basic Paginator (30%)
Your page should now perform an additional AJAX request when the page loads. This request should find out the number of pages of inspection results that are available from the server-side script. Once you have found this out, create a row of buttons, one for each page. Each button should be labelled with a page number. The screenshot below shows you what your row of buttons might look like.
Clicking one of the paginator buttons should empty the results table, perform an AJAX request to the server-side script to fetch the requested page of results, and display them in the table.
Task 3 – Search Functionality (30%)
Add a form to the bottom of your search page containing a text input and a search button. When the user enters text in the text input and clicks the button, your page should clear the results table, perform an AJAX request to the server-side script to retrieve any relevant results, and display them. The screenshot below shows you what your form might look like.
Design & Code Quality (10%)
There are some marks available for the visual design of the page, which you should achieve using CSS. Pay particular attention to the table in terms of size, spacing and margins to maximise usability. You should also make sure that the paginator buttons are a suitable size. You should also ensure that your code is properly commented, organised and laid out.
Late or Non-Submission of Coursework
The penalty for late or non-submission of coursework is normally 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: http://www.kent.ac.uk/uelt/ai/students/usingturnitinsts.html#whatisTurnitin
Version 2.0
Ian Utting
Originally by Kris Welsh

Expert paper writers are just a few clicks away

Place an order in 3 easy steps. Takes less than 5 mins.

Calculate the price of your order

You will get a personal manager and a discount.
We'll send you the first draft for approval by at
Total price:
$0.00
Live Chat+1-631-333-0101EmailWhatsApp