SAMSUNG 1024
`
`and mixing data fromCreate practical mashups in PHP, grabbing é
`
`Google Maps, Flickr,Amazon, YouTube, MSN Search, Yahoo!,
`Last.fm, and 411Sync.com
`
`
`
`
`
`
`
`
`
`oe e+Pics|DeanSioa ae a Wee and Ms « Mn SO dos Wer gk EA Stier Sp Ve
`
`
`
`
`
`PHP Web 2.0
`
`Mashup Projects
`
`Shu-Wai Chow
`
`1
`
`SAMSUNG 1024
`
`

`

`
`
`PHP Web 2.0 Mashup Projects
`
`Create practical mashups in PHP, grabbing and
`mixing data from Google Maps, Flickr, Amazon,
`YouTube, MSN Search, Yahoo!, Last.fm, and
`411Sync.com
`
`Shu-Wai Chow
`
`PACKT|
`
`PUBLISHING
`
`BIRMINGHAM - MUMBAI
`
`2
`
`

`

`PHP Web 2.0 MashupProjects
`Create practical mashupsin PHP, grabbing and mixing data from
`Google Maps,Flickr, Amazon, YouTube, MSN Search, Yahoo!,
`Last.fm, and 411Sync.com
`
`Copyright © 2007 Packt Publishing
`
`All rights reserved. No part of this book may be reproduced,stored in a retrieval
`system, or transmitted in any form or by any means, without the prior written
`permission of the publisher, except in the case of brief quotations embedded in
`critical articles or reviews.
`
`Fvery effort has been made in the preparation of this book to ensure the accuracy of
`the information presented. However, the information contained in this book is sold
`without warranty, either express or implied. Neither the author, Packt Publishing,
`norits dealers or distributors will be held liable for any damagescausedor alleged to
`be caused directly or indirectly by this book.
`
`Packt Publishing has endeavored to provide trademark information aboutall the
`companies and products mentioned in this book by the appropriate use ofcapitals.
`However, Packt Publishing cannot guarantee the accuracy of this information.
`
`First published: September, 2007
`
`Production Reference: 1070907
`
`Published by Packt Publishing Ltd.
`32 Lincoln Road
`Olton
`Birmingham, B27 6PA, UK.
`
`ISBN 978-1-847190-88-8
`
`www.packtpub.com
`
`Cover Image by Vinayak Chittar (vinayak .chirraregmail.com)
`
`
`
`3
`
`

`

`Preface
`
`A mashupis a web pageor application that combines data from two or more
`external online sources into an integrated experience. This book is your entrywayto
`the world of mashups and Web2.0. You will create PHP projects that grab data from
`one place on the Web, mix it up with relevantinformation from anotherplace on the
`Webandpresentit in a single application. All the mashup applicationsused in the
`book are built upon free tools and are thoroughly explained. You will findall the
`source code used to build the mashupsin the code downloadsection on our website.
`
`This bookis a practical tutorial with five detailed and carefully explained case
`studies to build new andeffective mashup applications.
`
`What This Book Covers
`You will learn how to write PHP code to remotely consumeservices like Google
`Maps,Flickr, Amazon, YouTube, MSN Search, Yahoo!, Last.fm, and the Internet UPC
`Database, not to mention the California Highway Patrol Traffic data! You will also
`learn aboutthe technologies, data formats, and protocols needed to use these web
`services and APIs, and someof the freely-available PHP tools for working with them.
`
`You will understand how these technologies work with each other and see how
`to use this information, in combination with your imagination, to build your own
`cutting-edge websites.
`Chapter 1 provides an overview of mashups: what a mashupis, and why you would
`wantone.
`
`In Chapter 2 we create a basic mashup, and go shopping. Wewill simply look up
`products on Amazon.com based on the Universal Product Code (UPC). To dothis,
`we cover two basic web services to get our feet wet — XML-RPC and REST. The
`Internet UPC database is an XML-RPC-based service, while Amazon uses REST.
`
`4
`
`

`

`Preface
`
`Wewill create code to call XML-RPC and REST services. Using PHP's SAX function,
`wecreate an extensible object-oriented parser for XML. The mashup covered in this
`chapter integrates information taken from Amazon's E-commerce Service (ECS) with
`the Internet UPC database.
`
`In Chapter 3, we create a custom search engine using the technology of MSN, and
`Yahoo! The chapterstarts with an introduction to SOAP, the most complex of the
`webservice protocols. SOAP relies heavily on other standards like WSDL and XSD,
`which are also covered in readable detail. We take a look at a WSDL documentand
`learn how to figure out what webservices are available from it, and what types of
`data are passed. Using PHP 5's SoapClient extension, we then interact with SOAP
`servers to grab data. We then finally create our mashup, which gathers web search
`results sourced from Microsoft Live and Yahoo!
`
`For the mashupin Chapter 4, we use the API from the video repository site YouTube,
`and the XMLfeeds from social music site Last.fm. We will take a look at three
`different XML-based file formats from those twosites: XSPF for songplaylists, RSS
`for publishing frequently updated information, and YouTube's custom XML format.
`Wewill create a mashup thattakes the songs in two Last.fm RSS feeds and
`queries YouTube to retrieve videos for those songs. Rather than creating our own
`XML-based parsers to parse the three formats, we have used parsers from PEAR,
`one for each ofthe three formats. Using these PEAR packages, we create an
`object-oriented abstraction of these formats, which can be consumed by our
`mashup application.
`
`In Chapter 5, we screen-scrape from the California Highway Patrol website. The
`CHP maintains a website oftraffic incidents. This site auto-refreshes every minute,
`ensuring the user gets live data aboutaccidents throughoutthestate of California.
`This is very valuable if you are in front of a computer. If you are out and about
`running errands, it would be fairly useless. However, our mashupwill use the web
`service from 4115ync.com to accept SMS messages from mobile users to deliver these
`traffic incidents to users.
`
`We've thrown almost everything into Chapter6! In this chapter, we use RDF
`documents, SPARQL, RAP, Google Maps, Flickr, AJAX, and JSON.Wecreate a
`geographically-centric way to presentpictures from Flickr on Google Maps. We see
`howto read RDF documents and how to extract data from them using SPARQL and
`RAP for RDF. This gets us the latitude and longitude of Londontube stations. We
`display them on a Google Map,andretrieve pictures of a selected station from Flickr.
`Our application needs to communicate with the API servers for which we use
`AJAX and JSON, which is emerging as a major data format. The biggestpitfall in
`this AJAX application is race conditions, and wewill learn various techniques to
`overcomethese.
`
`[2]
`
`set
`
`5
`
`

`

`Preface
`
`What You Need for This Book
`To follow along with the projects and use the example code in this book, you will
`need a web server running PHP 5.0 or higher and Apache 1.3.
`
`All of the examples assume you are running the web server on yourlocal work
`station, and all developmentis donelocally.
`
`Additionally, two projects have special requirements. In Chapter 5, you will need
`access to a webserver that can be reached externally from the Internet. In Chapter
`6, you will need a MySQLserver. Again, we assume you are running the MySQL
`serverlocally andit is properly configured.
`
`To quickly install PHP, Apache, and MySQL, check out XAMPP
`(http: //www.apachefriends.org/en/xampp.htm1). XAMPPis a one-step
`installer for PHP, Apache, and MySQL, amongother things.
`
`XAMPPis available for Windows, Linux, and Mac OS X. However, many standard
`Linux distributions already have PHP, Apache, and MySQLinstalled. Check your
`distribution's documentation on howto activate them. Mac OS X already has Apache
`and PHPinstalled by default. You can turn them on by enabling Web Sharing in
`your Sharing Preferences.
`
`MySQLcan be installed as a binary downloaded from MySQL.com
`(http: //dev.mysql.com/downloads/mysql/4.1.htm1).
`
`Conventions
`In this book, you will find a numberofstyles of text that distinguish between
`different kinds of information. Here are some examples ofthese styles, and an
`explanation of their meaning.
`
`Thereare three styles for code. Code words in text are shown as follows: "We can
`include other contexts through the use of the include directive."
`
`A block of code will be set as follows:
`
`<?php
`$aDom = new DOMDocument () ;
`try {
`$aDom- >loadHTMLFile('examplehtml.htm1') ;
`} catch (Exception Sex)
`{
`SaDom = false;
`
`}
`
`[3]
`
`6
`
`

`

`
`
`Preface
`
`When wewishto draw yourattention to a particular part of a code block,the
`relevantlines or items will be made bold:
`
`<param>
`
`<value><string>Hello, world!</string></value>
`</param>
`
`Any command-line input and outputis written as follows:
`
`Buttercup:~ root# pear list
`
`Buttercup:~ root# is the shell prompt on the author's machine.
`
`Newterms and important words are introduced in a bold-type font. Words that you
`see on the screen, in menusor dialog boxes for example, appear in our textlike this:
`"In the search box, enter in your keyword and the region code then press Search."
`
`[s ‘s.
`
`
`Importantnotesappearinaboxlikethis.
`
`Tipsandtricksappearlikethis.
`
`]
`
`]
`
`Reader Feedback
`Feedback from our readers is always welcome. Let us know whatyou think about
`this book, whatyouliked or may havedisliked. Reader feedback is importantfor us
`to developtitles that you really get the mostoutof.
`
`To send us general feedback, simply drop an email to feedback@packtpub. com,
`making sure to mentionthe booktitle in the subject of your message.
`
`If there is a book that you need and wouldlike to see us publish, please send
`us a note in the SUGGESTA TITLEform on www. packtpub. com or email
`suggest@packtpub.com.
`
`If there is a topic that you have expertise in and you are interested in either writing
`or contributing to a book, see our author guide on www.packtpub.com/authors,
`
`[4]
`
`7
`
`

`

`
`
`Preface
`
`Customer Support
`Nowthat you are the proud ownerof a Packt book, we have a numberof things to
`help youto get the most from your purchase.
`
`Downloading the Example Codefor the Book
`Visit http: //www.packtpub.com/support, and select this book from thelist of titles
`to download any example codeorextra resources for this book. The files available
`for downloadwill then be displayed.
`
`The downloadable files contain instructions on how to use them.
`
`Errata
`Although we havetaken every care to ensure the accuracy of our contents, mistakes
`do happen.If you find a mistake in one of our books—maybe a mistakein text or
`code—we would be grateful if you would reportthis to us. By doing this you can
`saveother readers from frustration, and help to improve subsequentversions of
`this book.If you find any errata, report them by visiting http: //www.packtpub.
`com/support, selecting your book,clicking on the Submit Errata link, and entering
`the details of your errata. Once yourerrata are verified, your submission will be
`accepted andthe errata are addedto thelist of existing errata. The existing errata can
`be viewed by selecting yourtitle from http: //www.packtpub.com/support.
`
`Questions
`You can contact us at quest ions@packtpub.com if you are having a problem with
`some aspectof the book, and wewill do our best to addressit.
`
`—— —___—159—_$§_iq_q+qq_wm
`
`8
`
`

`

`
`
`Introduction to Mashups
`
`Mashups, more specifically called web application hybrids by Wikipedia, have been
`an exciting trend in web applications in recent years, Web mashups are exactly what
`they sound like — web applications that merge data from one or more sources and
`present them in new ways. Very often, the data owners encourageandfacilitate
`third parties to use the data. In manycases,this facilitation is made possible by
`the data owners providing application programminginterfaces (API) to their data.
`These APIs follow standard web service protocols and can be implemented quickly
`andeasily in a variety of programming languages, including PHP. New, innovative
`mashups, made by individuals that combine data from traditionally unlikely
`pairings are popping up every day.
`
`One example is the Wii Seeker site. When the Nintendo Wii launched in November
`2006, many knew there would be shortages. The object of the Wii Seekersite is to
`help people find Wiis by combining expected initial shipment information to Target
`stores and Google Maps. A marker on a Google Map represented a Targetretail
`store. If the user clicked on the marker they would see information about the store
`such as the address. They would also see the number of Wiis the store was expected
`to have on launch day. By representing numerical inventory data on a map, a user
`could see Target stores near their location and plan their store visits on launch day to
`maximize their chances of actually finding a Wii.
`
`After the Nintendo Wii was launched,thesite reinvented itself by adding auction
`information from eBay and product information from Amazon. They also added
`additional chain retail stores like Circuit City and Walmart. Instead of seeing
`Nintendo Wii inventory information on each store, the site now allowsvisitors to
`post notes for each other aboutthe store's inventory.
`
`9
`
`

`

`Introduction to Mashu
`
`Another mashup example is Astrolicio.us, This site queries data feeds from sites like
`Digg.com, Google News, and Google Videos and presents it to the user on one page.
`By combining data feeds,the site's creator has madea portal of current astronomy
`newsfor visitors,
`
`4 conteanais mmatup fur metroectny and spect remeaschers andhobhersts. Gel the latest photostom the Hobble Space Tetesonpe. theatest astronomy reports kom news sources, ard the most
`ORCIO.US-
`Stonas hom fhe space calegory efOry We alco ketthe Lop astronomy wdeos kineGoogle and key sites tagged withastronomy Wom deLice.vis SawThenPageto¢
`
`‘Swillintnearsy:net
`oe od ofantotTT Se Teeeer edfoe eaterTeCLA eee Pore
`
`Aemeeng Quattey A
`somme
`Laeeroncoms,
`
`iebyCoegie
`
`Diggon Space
`Astronomy News
`7BiaatyAakersBORBanPiPomcrthaetouflies
`Srayou Nea afte eaeca accent,Poleor: nem Feeee NGta
`eeeo
`
`weyOF mamereatoms Like ome ot Giath minim medfen Sours fer Kaeoeseat, peibeNenad Cee a eeeyrangy oflank fen HALEY CoeANTENA, CARRERE, we!
`mente,
`EEetrenincenter etmechmetonarmy Dee -LameelnteDerereie
`OF tease
`aang Sak.
`ne
`Sa:eae aeraChaethe Cesmeee
`So Reewren my Pa raateraReeSlSorWee Wp Clady
`© Retien Sram EserePRD ipAbmeorecere The Spt,
`‘gm MSGreaferec heSlAteaidacoPheCemMee
`owCeadPai) (aareny EeaSPRCet Au The Shooamine) UR AugTS, IU? Ranier
`Treeaon EresEtaaros aandamaged etmest GatagBfclteben 9 pioneftoere
`PrakeonaeCacterrsn (1%) Brnrany Stange Ran hePRGARmMACG PareeYieeraty cl
`ram trsae MerePAEaon te rnane menta et ind ALLA,Pa
`opens
`9 MESTRONmrFeagrysia searingbac FD iconbvotogy
`‘TitlesArdeafTheoniemevee0:ahonoeMore
`MOET) ameAstin 2 Linch nkemninaenwrap OFmin men OtAO
`Plecet neAROthyA OeoeApSTP winmyet 2 nigaebeming Se amirt
`AeA ROTandenSone! CMEmiscadONengACME oFRIN
`
`‘Sirenstpoemcoger
`neerines
`Agkoomenyheireecr Tage LK Ag 14 2007Ane anor eo wnationsMt amuneaac
`© Satan,Joereoeee(i, Exetnas, Encieaete®Di onyremybape gerBe“akgsemanasonihe?
`Opera, anwale coe ofley
`Lneetit InichedediienlideeniantrieteinlientiiateAdicnal
`_
`.
`TefalRavadeae-cevarter
`FROMMAA ol
`Senety SREATHT:
`PHOTOORAPH
`Puneet woth PeeMinorie
`Scere Say(Fermetebe)FaitTeesdeinecechee tects|imEats Nehaey merePome
`
`toleotar SowSten chewge BuseA800 5
`2. eo be ateneed ie Lived or
`‘Tromrom Sealy(yoreean!then! ge Sucher: chameion @onan! ENG a
`ater a SedCakes Panthae
`
`
`Sette.SacaeeoncelacltiringinceTepermereseaeac
`enha CerawheyoLan MARESHiabee Space TelecoRoceRe Oe pe
`ey hen ofIe iy ace Aang Mewof 50,00 galas=5 mame BAES +SOKOcrtRalTeyee IPED BOSTeMeme’ omee ThBraeienceATA
`
`
`
`
`
`[8]
`
`10
`
`10
`
`

`

`Onthe homepage, the user can quickly scan items that mayinterest them. For news,
`the user is given bullet points for each news item containing the headline and a
`synopsis. For videos, the user is shown a thumbnail. If a user clicks onalink, they
`are taken to the sourceof the article or video, This site is clean, simple, and fullof
`information. It is also quite easy to make using the APIs of the sources.It probably
`did not take the site creator more than an afternoon to go from the start of coding
`to launch,
`
`Chapter 1
`
`Web 2.0 and Mashups
`How,in just a few short years, have mashups suddenly sprung up everywhere? The
`story leads back to just a few years ago. After the technology industry's financial
`bubble collapsed in 2001, internet firms regrouped and redefined themselves. There
`were business lessons to be learned, technologies to be re-evaluated, and people's
`perceptions had changed. By the middle of the decade, many trends and differences
`becameclear. The term "Web 2.0" started to surface, to draw separation between new
`sites and sites that gained popularity in the late Nineties. The term was vague and
`seemed suspiciously gimmicky atfirst. However, the differences between old and
`new werereal. They were not just historical and chronological. Sites like Google,
`YouTube, and Flickr demonstrated new approaches to building a web business.
`These sites often had simple interfaces, fully embraced webservices, and returned a
`lot of control to the user. Manyof thesesites relied solely on their users for content.
`In September 2005, technology publisher Tim O'Reilly wrote an article entitled
`What Is Web 2.0 to succinctly declare the traits of Web 2.0 versus 1.0 sites. There were
`two characteristics that were directcatalysts for the growth of mashups:
`
`Importance of Data
`¢
`e User Communities
`
`Importance of Data
`The first characteristic is the importance of data. The question of who owned data
`and whatthey choose to do with the data becamea big issue. Why in the world
`would companies invest millions of dollars to gather their data and their database
`systems, but then freely give it away for others to use? The answeris by opening
`their systems, mashup developers help increase the reach of the data owners.
`
`O'Reilly used the example of MapQuestto illustrate this. MapQuestwasthe leader
`in mapping in the mid to late nineties. However, their system was closed and did not
`allow outside parties to do anything with their data. In the early Aughts, mapping
`sites started to leverage this weakness. Yahoo! Maps, Microsoft Virtual Earth, and
`Google Maps entered the market, and each one had APIs. Despite the huge
`
`[9]
`
`11
`
`11
`
`

`

`Introduction to Mashups
`
`early market lead, MapQuest quickly lost to bigger players with open data. There
`are many exampleslike this. Amazon opened up their data through the Amazon
`Ecommerce Service (ECS). Many mashups have used this web service to create
`their own store fronts. Amazon gets the sale and gives a percentage to mashup
`developers. This has created many more channels for Amazon to sell their goods
`besides www. amazon.com, Contrast this with a site like BarnesAndNoble.com which
`does not open their data. The only channelthat they cansell is through the main
`website. Not only do theylose sales opportunities, but they lack theaffiliate loyalty
`that Amazonhas.
`
`In our earlier examples, Wii Seeker helps the Target by funneling buyersto stores,
`Wii Seekerin turn, receives adverting revenue andaffiliate commissions on their
`site. Google Videos, Google News, and Digg.com get visitors when a user clicks on
`a link from astrolicious.us. Astrolicious.us gets advertising revenue with very little
`developmenttime invested.
`
`User Communities
`The second characteristic is that user added data is more valuable than we once
`thought. User product reviews on ecommercesites are nothing new. Neither are
`web forums. However, it is how sites are using this information, and who owns
`the data, that is becoming important. Movie rental site Netflix has always allowed
`users to rate movies they have watched. Based on these recommendations, Netflix
`will suggest other movies you mightlike. Recently, they have added a new social
`networking feature called "Friends", where you can see how yourfriends have rated
`movies and whatthey are watching. Onefeature of Friends is compatibility ratings.
`Comparing both you and yourfriends’ recommendations, Netflix comes up witha
`percentage of your shared movie tastes.
`
`Othersites are completely dependent on user-added data. YouTube and Flickr
`provide video andpicture hosting, respectively, for free. Their widespread adoption,
`though, is not simply from hosting. Before Flickr, there were manysites that hosted
`images for free. That was nothing new, Thedifference, again, is what both sites do
`with user-added data. Both sites provide social networking features. You can leave
`your ratings and comments on a hosted item and you can subscribe to a person's
`profile. Anytime that person uploads something, you will be notified of the new
`content. Both sites also allow folksonomic tagging, which basically lets uploaders
`describe the content with their own keywords. Visitors can use these keywordsto
`search whenthey are looking for content. Tagging has proven to be an incredible aid
`for search algorithms.
`
`[10]
`
`12
`
`12
`
`

`

`
`
`
`
`Chapter 1
`
`Thus, it is these two characteristics of newsites that have allowed small web
`developers to appear much bigger. Backed with data from large internet presences,
`mashup developers create usage channels that data owners could not have foreseen,
`or been restricted by businessrules.
`
`How WeWill Create Mashups
`Technologically, the mashup phenomenoncould not have happened without
`website owners making a clean separation between thedata that is used on their
`sites, and the actual presentationofthe data. This has always been a goalin
`computer application development, andtherefore, it is no surprise that website
`and web application architecture have progressed towards this stage ever since the
`World Wide Web wascreated. This separation is quickly turning the World Wide
`Web into whatis known asthe semantic web—a philosophy where webcontentis
`presented not only for humansto read, but also in a way that can be easily processed
`by software and machines. We have moved from static pages to database-driven
`sites, from presentational ont tags to cascading style sheets. It is perhaps inevitable
`that the web has becomean environmentthat fosters mashup development.
`
`Data sources of mashupsare varied. Often, data owners provide mashup developers
`access to their data throughofficial application programminginterfaces. As we are
`talking about web applications, these APIs utilize web services, which come in a
`variety of protocols. Really Simple Syndication (RSS), a family of formats to present
`data, is another common data source that has helped spur the mashup adoption.
`Whenofficial methods are unavailable, developers becomereally creative in getting
`data. Screen scraping is a method that has always been around. Regardlessof the
`method, mashupsalso deal with a variety of data formats. While mashups can be
`simple to create, a mashup developer must be flexible and well-rounded in the
`knowledgeof their tools.
`
`Open-source software is particularly well-suited in this mashup environment. The
`Apache and PHP combination makes for fast development. Being open source,
`developersare constantly and quickly adding new features to keep up with the web
`service world.
`
`This book will take a look at how to use common data sources with PHP. Most
`official APIs are based on the big three web service protocols—XML-RPC, REST, and
`SOAP.Wewill of course look at these protocols. APIs and raw web service requests
`by hand,of course, are not the only wayto retrieve data. Wewill look at using
`third-party libraries to interface with some popularsites. Feeds are also an important
`data source which wewill use. By giving you a broad overviewofthe tools
`used in the mashup world, you should be able to start developing your own
`mashupsquickly.
`
`
`
`{11}
`
`13
`
`13
`
`

`

`Introduction to Mashups
`More Mashups
`For more examples and inspirations, check out these popular mashups:
`
`Popurls (popurls .com)—Collects URLs from popularsites.
`Housingmaps.com (www. housingmaps .com)— Plots housinglistings from
`Craigslist on to a map.
`Keegy (us. keegy.com)—A site that aggregates news from different sources
`and personalizesit for the reader.
`Alkemis (local .alkemis .com)— Aggregates and mapsall sorts of data, for
`example, pictures and live web cams,in selectedcities.
`Gametripping.com (www.gametripping.com)—A collectionof satellite and
`Flickr photos of baseball stadiums.
`
`[12]
`
`14
`
`14
`
`

`

`
`
`London Tube Photos
`
`Project Overview
`What Plot London Tube station locations on Google Maps. When a
`station's iconis clicked, search Flickr for photos of the station
`and display them on the map.
`Protocols Used REST
`
`Data Formats XML, RDF, JSON
`Tools Featured SPARQL, RDF API for PHP, XMLHttpRequest Object (AJAX)
`APis Used Google Maps, Flickr Services
`
`Wehaveused a lot of techniques and APIs in our projects. For the mostpart, things
`have mashed up togetherfairly easily with minimal issues. Oneof the reasons for
`this is that we have relied on PHP to create the presentation for our mashups. This
`simplifies the architecture of our mashup and gives us a lot of control. Many APIs,
`though, are JavaScript-based, and hence, any mashupwill rely heavily on JavaScript
`for the presentation. This introduces a lot of other issues that we will have to deal
`with. In this mashup, we will encounter someofthose issues, and look at ways to
`work around them. PHP will remain an important part of our mashup,but take a
`smaller role than it has played so far.
`
`In this mashup, we will present a geographically-centric way to present pictures
`from the photo-sharingsite, Flickr. When a user loads our application, they will
`be presented with a Google map of London. A pull-down menuofall the London
`Tube lines will be available. The user will select a line, and the application will load
`all of the Tube stations onto the map and display them with markers.If the user
`clicks on a marker, the nameofthe station will appear as a popup on the map.In the
`background,a search query againstFlickr will be initiated, and any pictures of the
`station will appearin the popup as a thumbnail. Clicking on the photo will take the
`user to the photo's page on Flickr.
`
`15
`
`15
`
`

`

`London Tube Photos
`
`JavaScript is not the only new tool that we will integrate into our toolbox. Before we
`can work on the user interface, we will need to populate data into our application.
`Weneedto find out which Tube stations belong to which line, and where those
`stations are located. Many websites have one of those things or the other, but not
`both.If we used them, not only are we dealing with two data sources, but we'd
`haveto resort to screen scraping again. Fortunately, there is one place that has both
`pieces of information. This source is in Resource Description Format, an XML format
`that we glanced at, earlier in Chapter 3. In this mashup, we will take a much closer
`look at RDF, and how to extract data from it using a young query languagecalled
`SPARQL (SPARQLProtocol and RDF Query Language).
`
`Preliminary Planning
`Note that it would not have been wise to pre-plan mashups, butthis application will
`be much more complex, and will definitely require some forethought. Previously,
`our APIs have worked in the background delivering data. We use PHP to retrieve
`data from an API, receive it in whatever formatit gives us, format the response into
`either HTML outputto the user, or another formatto retrieve data from another API.
`PHP gives us a lotofflexibility in the way our applicationis designed.
`
`This time, one API, Google Maps, is a JavaScript API. Another, Flickr Services,is still
`server based. The two cannottalk directly to each other, and we are going to have to
`play within the rules set by each one. More than ever, we are going to have to take a
`close look at everything before we attempt to write a single line of code.
`
`At this point, this is what we know:
`
`1. We needto find a data source for the Tube stations. We need to find the
`names of the stations in eachline, and somepiece of information we can use
`to geographically identify it on a map. The latter will be dictated more by the
`capability of the tool on the receiving end. In other words, as we are going
`to use Google Maps, we are going to have to see how Google Mapsplaces
`markers on its map, and we will have to massage the source data to Google
`Map's liking.
`2. We will use the Google Maps API solely for presentation. JavaScript cannot
`call PHP functions or server side code directly, nor can PHPcall JavaScript
`functions. However, we can use PHP to write JavaScript code on the fly,
`and we do havethe JavaScript XMLHttpRequest object available. The
`XMLHttpRequest object cancall server resources by sending a GET or POST
`request withoutthe page reloading. We can then dynamically update the
`pagein frontof the user. This process is popularly known as AJAX, or
`Asynchronous JavaScript and XML.
`
`[204]
`
`
`
`16
`
`

`

` Chapter 6
`
`Lookingat the Flickr Service's documentation page at
`http://www.flickr.com/services/api/, we find we have an
`incredible variety of formats and protocols to choose from. All of our
`
`SS majorrequest protocols, REST, XML-RPC, andSOAParethere. In
`
`>
`
`addition to these, we can have our choice of JSON orserialized PHP for
`the response format, Thereis also a hugelist of languagekits already
`built. You can use these kits to call Flickr directly from PHP, ColdFusion,
`Java, etc. Unfortunately, JavaScript is not on thatlist.
`
`Finding Tube Information
`Our biggest problem is finding the initial Tube data. Withoutthisfirst step, we
`cannot create our mashup.Thefirst logical step is to look atthe official Tube site at
`http://www.tfl.gov.uk/tube/. Poking around, weseealot of colorful mapsof the
`lines, but nothing machine readable—no feeds and not even a pull-down menu with
`stations.It looks like the official site will be a poor choice as a source of data.
`
`Weshould look at the Google Maps APIto see whatit can even accept.
`The documentation homepageis at http: //www.google.com/apis/maps/
`document at ion/. This site has many examplesas well as class, methods, and
`properties references. Looking around, wesee that a Google Map markeris
`represented by a class called GMarker. There are many examples on howto create a
`marker like so:
`
`marker = new GMarker (point) ;
`map.addOverlay (marker) ;
`
`That's wonderful, but whatis a point that is passed to the GMarker class? Looking at
`the documentation reference, wefind that it is a GLatLng object, which is an object
`that has two simple properties — the longitude of the marker andthelatitude of the
`marker.It looks like the most direct wayto create a marker is through latitude and
`longitude coordinates.
`Ruling out the official Tube site, we still need to find longitude andlatitude
`informationfor sites. With somesearching, I stumbled upon Jo Walsh'ssite,
`frot .org. Ms. Walsh has donea lot of work with open geographical data, andis
`currently an officer in the Open Source Geospatial Foundation (http: //www.osgeo.
`org/). On hersite, she talks about mudlondon, an IRC botshe created.As part ofthis
`bot, she compiled an RDFfile of all London Tube stations. Thefile is located at
`http: //space.frot.org/rd£f/tube_model2.rdf. Thefirst half of this file is
`information abouteachstation, includinglatitude and longitude positions. The
`secondhalf of this file maps out eachline and their station. These two pieces of
`information are exactly what we need. After contacting her, she was gracious enough
`to allow usto use this file for our mashup.
`[205]
`
`
`
`17
`
`17
`
`

`

`London Tube Photos
`
`Being an XML-basedfile, we can create our own parserlike we did before.
`However, some more searching reveals an RDF parser for PHP. This should save
`us someeffort.
`
`There is one problem with this approach. The RDFfile itself is over 500 kilobytes in
`size. It would be perfectly reasonable to treat this RDFfile like an RSS 1.1 feed and
`load and parseit at run time. However,this file is not a blog's stream. Tube stations
`do not change very often. To save bandwidth for Ms. Walsh, and dramatically speed
`up our application, we shouldeliminate this load and parse. One solution is to save
`this file directly onto ourfile system. This will give us a great speed boost. Another
`speed boost can be gained if we retrieved the data from a database insteadof parsing
`the file every time. XML parsers are a fairly new addition into the PHPfeature set.
`They are not as mature as the database extensions. The nature of XMLparsing also
`has an overhead to it compared to just retrieving data from a database.It would
`appear that we should use RDF parsing to populate a database atfirst, and then in
`our application, load the data dynamically from a database.
`
`Integrating Google Maps andFlickr
`Services
`Nowthat we havethe data and know generally how to create markers with that
`data, we need to look at howto bridge a JavaScriptcall in Google Mapsto a server
`call in Flickr Services. Flickr Services has a REST-based endpoint available. T