Make a dynamic web page

Assignment Help Web Project
Reference no: EM131296584

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://www.food.gov.uk), and we have developed a simple PHP script that will provide the results of the inspections for Canterbury 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 Canterbury in JSON format.

Requirements & constraints: 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 must use the JQuery library (i.e., no plain Javascript where jQuery can be used) and, if you wish, JqueryUI and the validation plugin. You cannot use any other JQuery plugins, or any other JavaScript libraries. You should submit your single HTML file via Moodle before the deadline.

Part 1 : hygiene ratings

Part 1 focuses on hygiene ratings. The main challenges are setting up AJAX calls and pagination.

The Server-Side Script
The server-side script is hosted at the following URL:

https://www.cs.kent.ac.uk/people/staff/lb514/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 (20) results. Expects the page parameter pages                               Returns how many pages of results are available

searchname          Returns the first 20 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.

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. postcode The postcode of the business

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, 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/lb514 to ~lb514 will cause the CORS to fail.

Task 1.1 - Retrieving the First Page of Results When the Page Loads

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. Also you want to avoid visualising the postcode twice. The screenshot below shows you what the output might look like.

Business Address Rating Date
A La Turka 110-111 Northgate, Canterbury, CT1 1BH 4 5/18/2015
Abode Hotel 30-33 High Street, Canterbury, CT1 2RX 5 2/2/2015
Active Life Limited  Kingsmcad Pool, Kingsmcad Leisure Centre, Kingsmcad Road, Canterbury, CT2 7PH 5 11/26/2014
Age UK 16 Reculver Road, Herne Bay, CT6 6LE 5 9/18/2014
Age UK Canterbury  Castle Row, Canterbury, CT1 2QY 5 8/4/2015
Age UK Whitstable  Vulcan Close, Whitstable, CT5 4LZ 5 8/28/2015
Ancient Raj 26 North Lane, Canterbury, CT2 7EE 3 2/5/2015
Andy's 88 Cafe  48 St Peter's Street, Canterbury, CT1 2BE 4 7/28/2014
ASK Italian  24 High Street, Canterbury, CT1 2AY 5 11/19/2014
Azouma 4 Church Street St Pauls, Canterbury, CT1 1NH 5 12/16/2014

Task 1.2 - A Basic Paginator

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.

1355_Figure.jpg

Task 1.3 - Search Functionality

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.

1832_Figure1.jpg

Part 2 : customer ratings - mashup

The Server-Side Script

The server-side script is hosted at the following URL:

https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/rating.php

The script can be manipulated using several GET parameters, appended on to the end of the URL. The parameters accepted by the script are documented in the table below.

Parameter Name

Description

 

 

Name

Expects a string specifying the search term business names are to be matched against. Returns all matching records for businesses whose name contains the specified search term. Each record will include the following information:

  • 'business' : the full name of the matching item,
  • 'address' : the address including the postcode,
  • 'rating' : the current average customer rating of the matching item.

JSON Format of Returned Data

The data is returned in JSON format. The format is an array of individual JavaScript objects, with each object having the following properties:

business                 The name of the business matched.

address                  The address, including post code, of the business matched.

rating         A customer rating (out of 5).

If no business matched the given name the script returns an empty array. Note that for some businesses there may not be a rating available (in which case key ‘rating' is associated to the empty string).

Accessing the Script

As before, the script outputs CORS headers. Use the form of URL given above as given.

Task 2.1 - Retrieving the Customer Rating when Requested by the User

Extend each row of the table with one button that allows the user to retrieve the customers' ratings for the business in that row. The screenshot below shows you what the extended table might look like.

669_Figure2.jpg

Each button must trigger an AJAX request directed at the server-side script rating.php. The customer rating for the (one) selected business must be displayed in a pop up window.

Notes

- buttons must be added to any table displayed, no matter if populated using the demo, page search, or name search functionality from Phase 1.

- The script rating.php may return more than one matching business. You need to find a way to match the business you are looking for with one (the right one!) of those returned by rating.php.

- If the customer rating is not available (e.g., rating.php returns the empty array, none of the records returned matches the business you are looking for, or the matching business has empty rating) then you must notify the user, also using a pop up window.

Reference no: EM131296584

Questions Cloud

How the given concept is exemplified in the news story : Thirdly, you will write a short (750-1000 words) Discussion Post that gives a definition of the concept, explains how this concept is exemplified in the news story, and includes a link or directions to view the story you've chosen.
What does elasticity of substitution illustrate : What does elasticity of substitution illustrate? What two factors affect its magnitude?
Estimates of the percentage of body fat : Stat 6242 Assignment. The bodyfat data set contains estimates of the percentage of body fat determined by underwater weighing and various body circumference measurements for men
Buying or price acceptance decisions : How does convenience impact your buying or price acceptance decisions? Please provide a detailed, in your own words explanation.
Make a dynamic web page : CO539 Assessment  - Food Hygiene Ratings - 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.
Write a paper about demand elasticity on transportation cost : Write a paper about demand elasticity on transportation cost.
Cash plus checking account balances : Assume you have $100 in cash, $500 in your checking account, and $2,000 in savings. According to the M1 definition (cash plus checking account balances) the amount of money you have is?
Liquidity trap and insensitive investment function : The Keynesian Transmission mechanism will eliminate a recessionary gap if there are not Liquidity Trap or Insensitive Investment function.  Explain:
Write a paper about the atomic bomb dropped on nagasaki : Watch a video on youtube and wirte a reflection.write a paper about the Atomic Bomb Dropped On Nagasaki (National Geographic Documentary)

Reviews

Write a Review

 

Web Project Questions & Answers

  Describe three special features that can be added using css

Describe at least three special features that can be added using Cascading Style Sheets. Explain why you picked these three and include an example of how each is beneficial.

  Using the correct ftp platform for your computer

Using the correct FTP platform for your computer (Mac or PC), connect to it and upload the .html document you created in Week 3. This was named "lastname_page1.html". Once you have it uploaded, view the information above and post your URL address int..

  Produce html code and an external css file

An ordered list below the image setting out your personal priorities in taking this degree course. Choose an option that is different from lower Roman.

  Human factors to consider when building a web site

What are some human factors to consider when building a Web site and what are some technical factors to consider when building a Web site?

  Mention why is the mouse cursor slightly tilted

Mention why is the mouse cursor slightly tilted and not straight?

  Design and develop a web page on corning glass

Assignment: Research the emerging computer technology topic - Corning Glass. Write a 500 word paper and design and develop a Web page on this topic

  Risk management consulting assignment

Provision of organization data and access on an organizational website, Risk Management Consulting assignment

  Write report on leadership and management is related

The report should demonstrate that the team has thoroughly researched the keywords and the key issues of their selected statement/topic including any existing arguments. "Project Management techniques can overcome the Project failures", "Leadershi..

  Develop a web site to support the mrsl

Most simply put, you will develop a web site to support the Murfreesboro Recreational Soccer League (MRSL) operation. You will build this web using HTML 5, CSS 3, Tables, Images and Forms

  Projects on myitlab access

Question: Make a projects on myitlab access and excel grader .

  Create html code and an external css file

An unordered list having links to the home pages of Microsoft, Google, and SourceForge. It will employ the disc option for bullet points.

  Organizational dynamics change

Recall extensive change you have witnessed recently inside your corporation or a corporation you are familiar with. Has it been successful? Characterize why it won or failed.

Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd