Homework 6: Travel and Entertainment Search Server-side
Scripting
1. Objectives
● Get experience with the PHP programing language;
● Get experience with the Google Places API;
● Get experience using JSON parsers in PHP and JavaScript.
2. Description
In this exercise, you are asked to create a webpage that alows you to search for places
information using the Google Places API, and the results wil be displayed in a tabular format.
The page wil also provide reviews and photos for the selected place.
2.1. Decription of the Search Form.
A user first opens a page, caled place.php (or any valid web page name). You should use the ip-
api.com HTTP API (Se hint 3.3) to fetch the user’s geolocation, after which the search button
should be enabled (it is initialy 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 al 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 fregeoip.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 Scren (Search button disabled)
Figure 1(b): Search Scren (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. wil 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 eror “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.
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:
If the location edit box is selected, the PHP script. (i.e., place.php) uses the input addres to get
the geocoding via Google Maps Geocoding API. The Google Maps Geocoding API is
documented here: The Google Maps Geocoding API expects two parameters:
• Addres: The stret addres that you want to geocode, in the format used by the national
postal service of the country concerned. Additional addres elements such as busines
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 HTP request to the Google Maps Geocoding API, when the location addres
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 addres. 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 addres, combined with other input information, are needed
when constructing a restful web service URL to retrieve al 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
alowed 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, al types following the first entry are ignored).
• Keyword: A term to be matched against al content that Google has indexed for this place,
including but not limited to name, type, and addres, as wel as customer reviews and other
third-party content.
An example of an HTP 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:
519,-118.285117&radius=16090&type=cafe&keyword=usc&key= YOUR_API_KEY
Figure 5 shows an example of the JSON response returned by the Google Places API Nearby
Search web service response. Se the documentation on “Search Responses” at the bottom of the
Place Search section in the Google Places API Developer’s Guide at:
The PHP script. (i.e., place.php) should pas the returned JSON object to the client side, or parse
the returned JSON and extract useful fields and pas these fields to the client side in JSON
format. You should use JavaScript. to parse the JSON object and display the results in a tabular
format. A sample output is shown in Figure 6. The displayed ⁴㱡⼠㹩൮ⱬ⁵‼†♹㬬ⵎ㹡♡㭡㱥⽤㹲ੳ⸠⁁䕐†⁹⁴㰬⽥㸠഼♬㭰㱯⼠㹨ൡ੶⁵⁵⁆㕩†‾㱥⁴⽨㹥ഠੳⱮ⁴♣㭹♤㭡⁰㰠⼠㹤ൡੴ㱤⽯㹭ഠੴ‼⁁⁴⁈ⴠ㩡††‼††㰯 ⽈㹔്ੌ†⡃Ɱ†⥣⠠†䘠㥴⥥㱲⁔⽨㹥ഠ੶†…†ⵢ†…ⁱ※㱴‼⽢㹲ഠਯ⸠⁶†⁴…⁵Ⱪ†♴㭳♦㬯‾⁴㱳⽱㹵൯Ⱳ† ♥㬠♯㬠…⁵†⁴⡥††⤠‼ ⸦㱤⼻㹲ੳ☦㬻☮㬯‾ⵡ⁍†⁵†㕇Ⱐ†䙬†ㄯ〾⸍ 䔼 †㱄⁰⽬㹡൹੩⁒☠㭨⁴‼ ⽉†⽩†㱯⁴⽨㹥ഠ੮†♯㭬♨㭥†† 㔠⁵⡥⁐䙥†ㄦ⥬ⁱ䥵※㱥⽴㹡൩੬⁵Ɱ⁴†‾⁶⁰ 㱴⽥㹴൲੩⁶⁴㱯⽦㹥൲䥮⁵䅳䥤†⁴
⁴ⱴ††⁵♩㭹䙩♳㭤㱮⁵⽳㹩൮੧⁐⁐♬㭨䙱☠㬾⁴†⁴䅰⁵⁓
㰺⽲㸠യਾ†䘊※ㄠ㉰ 䙩†ㅩ㍤⸠㱥⽮㹥ਠ㨠㱦⽥㸠േ੯♯㭐†䡹‼䩢‾※⁙ⵐ㱉⽹㸮ഠ⸠†䅩䥥⁵†⁵䩲㱭⁴⼮㸠഼♲㬊‼䕢†ⴠ⁴⁴⁁䩐⁴㰠†⽳㹨൯›⁴›䩰㱥⽳㸮ൣ੯♭㭳 䡡⵰‿‽⁖⁷䡢† …†㱙⁒⽟㹁⁙ⴾ⹐⁈⡥䩴⥥†⁰†㱳⁐⽉㸠੬††㱱⽹㸬ഠ㱯‼⽢㹲ഠਯ㈾⸍㐊䑨䴠⁐䑩㱳⁴⽨㹥ഠ㱓†⽯㹢൪䥣††ⁱⱥ⁰‾†Ⱶ⁴䝮㱳⽡㸠േ੯䵯⁵※䥲†䜼䴊Ⰽ 㱳⽥㹱൵੩†⁵ⵐ⁁†㱴⁴⼠㹵൮੩††⸍ †⁐⸠㱲⽡㹣ਠ㱄⽩㹬൳ਠ⁵‾䝵䵹䩵䱯ⱉ†㨠㱤⁴⽩㹦൩㩲⼠⽳⽦⼍⽴ⴍⴻ⁸㱨⽨㹴ഠ੯†㱴†⽭㹡൸੩㱭†⽤㹥൳੩䅲⁴†䙩ㅬ㑳⁴⁵♲㭹㘠㥴㥨䔠⁴䉯ⱥ䱶䄮☾㬠 㰾⁁⽮㸠⁰䌠䱦䍱†㱴⁴⽨㹥ഠੇ㱯⽥㸠੬㱡⼠㹁㰠⽣㹥ഠ䙨ㅳ㐠㩳䵯† ›㱰⽰㹩യੰ㱬⼯㹰൨੯ㅴ㑯‿㱭⁷⽩㹤൴੨䄽‵ Ɱ⁒⁔‴⁐‹⁐⁴⁐⡶⁅ⱐ⁘䉙⁄㱟‱⽲㸼ൢੲⱖ⁔䐴⁑⥰⹆⁘䤷⁺ⁱ′⁉⁕ⱈ⁸⁹䝌⁶䴳⁗⁁⁑䵢‾⁇㱳⁈⽒㹉੩⁆⁅䜹⁸䵯⁄″⁌…⁙ ⁙☠㭨♳㭮㱲⽭㹡൧†††䜠䴠⸠⁴䅨‾†䙥ㄠ㕴㱥⁵⽮㹣൴੩♟㭯⁴♤㬠⁆†䘩ㄠ㑡⸠㱡⽥㸠൲㱳⽳㹥ഠ਼ 䐠⁶⁴⁵⁰⁴㱨⁰⽬㹡ൣ⠠㩬⼠⽩⽳⽮⼠⥥㰠⼠㹴൯ੰ㰠⁰⽨㹯൴੯㱳⼠㹡ഠੴ䙡†ㅦ㕯㩲†⁁⁰☠㭶♡㭥㱤⼠㹳൨੯㱷⽥㸠൮㉭㔠⁰䥬‼㱢 ⼾㸍ഊ਼㱢 ⼾㸍ഊ䥯⁴ⱥ†䡯⁶⁴䘠㰠⼊㹐൬Ɐ†⁉†♯㭷䭥㨠 䌊ⰼ䍲㩢☺㭮Ⱨ†䑴㩬⁴ㄠ㕦䡯☠㭳Ⱐ⁁㱮†⽈㹔്ੌ ††⁉†††䥳ⱳ⁴㰠⽥㹶൩⁹†♉㭥♧㭯Ɱ†††⁴⽐†† ⁵㰠⁰⽯㹩൮ੴ‾†䥬⁴⁵⼾ 㰀 ⼀㸀ഀ ⼀⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ䤀 Ⰰ 㨀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ☀㬀 䈀 Ⰰ 䰀 㰀 ⼀㸀ഀ 䜀 䄀䤀 ⸀ 㰀 ⼀㸀ഀ☀㬀 ⠀ ⤀ 䨀 䨀 䨀⸀ 㰀 ⼀㸀ഀ☀㬀 䐀 ⸀ 㰀 ⼀㸀ഀ☀㬀 䐀 ⸀ 㰀 ⼀㸀ഀ☀㬀 䐀 ⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㌀⸀ 䠀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㌀⸀ 䠀 䜀 䄀䤀 䬀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ☀㬀 䜀 䄀䤀 Ⰰ 㨀 㰀 ⼀㸀ഀ☀㬀 䜀 䜀 䐀 䌀㨀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㔀 㰀 ⼀㸀ഀ㨀⼀⸀⸀⸀⼀⼀㼀㴀☀㬀㴀䔀㰀 ⼀㸀ഀ䔀䤀䐀䔀☀㬀㴀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ☀㬀 䌀 ⸀ 㰀 ⼀㸀ഀ☀㬀 䄀 䜀 䄀䤀☀㬀 Ⰰ ☀㬀䜀 ☀㬀 ⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ 䌀 ⴀ⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㌀⸀㈀ 䜀 䴀 䨀⸀ 䄀䤀 䄀䤀 䐀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ☀㬀 䄀 䜀 䴀 䴀 㨀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㨀⼀⸀⸀⼀⼀⼀⼀ⴀⴀⴀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ☀㬀 䐀 㨀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㨀⼀⸀⸀⼀⼀⼀⼀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㌀⸀㌀ 䜀 䤀ⴀ䄀䤀⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ ⴀ⸀ 䤀 ⸀ 䄀 㰀 ⼀㸀ഀ 㨀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㨀⼀⼀ⴀ⸀⼀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ 䨀 䘀 㘀⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ䘀 㘀㨀 ⴀ⸀ 䄀䤀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ 䄀䤀Ⰰ 㘀 㨀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㘀 㰀 ⼀㸀ഀ㨀⼀⸀⼀ⴀⴀⴀⴀⴀ⼀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ 䘀 䄀䤀 ⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㌀⸀㐀 䨀ⴀ 䠀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ䤀 䠀 㔀Ⰰ 䨀ⴀ ☀㬀☀㬀 ⸀ 䘀 㰀 ⼀㸀ഀⰀ 㨀⼀⸀⼀⼀⼀⸀ⴀ⸀⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ 䨀ⴀ ☀㬀☀㬀 ⸀ 䘀 㰀 ⼀㸀ഀⰀ 㨀⼀⸀⼀⼀⼀⸀ⴀ⸀⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㌀⸀㔀 䠀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ 䨀ⴀ Ⰰ ☀㬀☀㬀 ⸀ 㰀 ⼀㸀ഀ Ⰰ ☀㬀☀㬀 ⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ㐀⸀ 䘀 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ䤀 Ⰰ 䠀 㘀 㰀 ⼀㸀ഀ ⸀ 䄀Ⰰ ⠀ ⸀ 㰀 ⼀㸀ഀ⤀ 㔀㜀 㰀 ⼀㸀ഀ☀㬀 䴀 ⸀ 㰀 ⼀㸀ഀ㰀 ⼀㸀ഀ⨀⨀䤀䴀䄀⨀⨀㨀 㰀 ⼀㸀ഀ☀㬀 䄀 㰀 ⼀㸀ഀ ⸀ Ⰰ 㰀 ⼀㸀ഀ ⸀ 䤀 ⼀ 㰀 ⼀㸀ഀ Ⰰ ⸀ 㰀 ⼀㸀ഀ☀㬀 䨀 䠀 㘀⸀ 㰀 ⼀㸀ഀ☀㬀 䜀 䄀䤀 ⠀ Ⰰ 㰀 ⼀㸀ഀ Ⰰ ⤀ 䨀Ⰰ 㰀 ⼀㸀ഀ䄀⼀䠀