Homework 6: Travel and Entertainment Search Server-side Scripting Solution

Objectives



Get experience with the PHP programming language;



Get experience with the Google Places API;
Get experience using JSON parsers in PHP and JavaScript.



Description



In this exercise, you are asked to create a webpage that allows you to search for places information using the Google Places API, and the results will be displayed in a tabular format. The page will also provide reviews and photos for the selected place.




2.1. Description of the Search Form




A user first opens a page, called place.php (or any valid web page name). You should use the ip-api.com HTTP API (See hint 3.3) to fetch the user’s geolocation, after which the search button should be enabled (it is initially greyed out and disabled when the page loads). The user must enter a keyword and choose what Category of place he/she wants to search (categories include a cafe, bakery, restaurant, beauty salon, casino, movie theater, lodging, airport, train station, subway station, bus station) from a drop-down list. The default value for the “Category” drop-down list is “default”, which covers all of the “types” provided by the Google Places API. Also, the user can choose the distance (in miles), which is the radius for the search where the center is “Here” (the current location returned from freegeoip.net HTTP API) or the location listed in the edit box. When the “Here” radio button is selected, the location edit box must be disabled. When the location edit box is selected, it is a required field, and a location string must be entered. The default distance is 10 miles from the chosen location. Use HTML5 “placeholder” to show the string “location” in the location edit box and “10” in the Distance edit box as the initial values. An example is shown in Figure 1.




















































Figure 1(a): Initial Search Screen (Search button disabled)













































Figure 1(b): Search Screen (after fetched location)




The search form has two buttons:




Search button: The button must be disabled while the page is fetching the user’s geolocation and must be enabled once the geolocation is obtained. An example of valid input is shown in Figure 2. Once the user has provided valid input, your client script should send a request to your web server script place.php with the form inputs. You can use either GET or POST to transfer the form data to the web server script. The PHP script will retrieve the form inputs, reformat it to the syntax of the API and send it to the Google Places API nearby search service. If the user clicks on the search button without providing a value in the “Keyword” field or “location” edit box, you should show an error “tooltip” that indicates which field is missing. Examples are shown in Figure 3a and 3b.



Clear button: This button must clear the result area (below the search area) and set all fields to the default values in the search area. The clear operation must be done using a JavaScript function.






















































Figure 2: An Example of valid Search

























2














































Figure 3(a): An Example of Invalid Search (empty input)























































Figure 3(b): An Example of Invalid Search (empty location)




2.2 Displaying Places Results Table




In this section, we outline how to use the form inputs to construct HTTP requests to the Google Places API service and display the result in the web page.




The Google Places API is documented here:




https://developers.google.com/places/




If the location edit box is selected, the PHP script (i.e., place.php) uses the input address to get the geocoding via Google Maps Geocoding API. The Google Maps Geocoding API is documented here:




https://developers.google.com/maps/documentation/geocoding/start




The Google Maps Geocoding API expects two parameters:






















3




Address: The street address that you want to geocode, in the format used by the national postal service of the country concerned. Additional address elements such as business names and unit, suite or floor numbers should be avoided.



Key: Your application's API key. This key identifies your application for purposes of quota management. (Explained in Section 3.1)



An example of an HTTP request to the Google Maps Geocoding API, when the location address is “University of Southern California, CA” is shown below:




https://maps.googleapis.com/maps/api/geocode/json?address=University+of+So uthern+California+CA&key=YOUR_API_KEY







The response includes the latitude and longitude of the address. Figure 4 shows an example of the JSON object returned in the Google Maps Geocoding API web service response.




The latitude and longitude of the address, combined with other input information, are needed when constructing a restful web service URL to retrieve all entities matching the user query, using the Google Places API “Nearby Search” service, documented here:




https://developers.google.com/places/web-service/search




The Google Places API Nearby Search service expects the following parameters:




Key: Your application's API key. This key identifies your application for purposes of quota management.



Location: The geo-location around which to retrieve place information. The geo-location is specified by latitude and longitude values.



Radius: Defines the distance (in meters) within which to return place results. The maximum allowed radius is 50,000 meters. Note that you need to translate miles to meters for a correct value.



Type: Filtering the results to places matching the specified type. Only one type may be specified (if more than one type is provided, all types following the first entry are ignored).



Keyword: A term to be matched against all content that Google has indexed for this place, including but not limited to name, type, and address, as well as customer reviews and other third-party content.



An example of an HTTP request to the Google Places API Nearby Search that searches for the nearby cafés near the University of Southern California within a 10 miles radius is shown below:




https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=34.0223 519,-118.285117&radius=16090&type=cafe&keyword=usc&key= YOUR_API_KEY













4
Figure 5 shows an example of the JSON response returned by the Google Places API Nearby Search web service response. See the documentation on “Search Responses” at the bottom of the Place Search section in the Google Places API Developer’s Guide at:




https://developers.google.com/places/web-service/search




for the details of the output format returned in search responses.

































































































Figure 4: A sample result of Google Maps Geocoding query