Thursday, August 04, 2011

Create GPS-enabling web applications

Web sites that provide services based on your geographic location are quite popular on the Internet. Sites such as Foursquare, Yelp, and Google Maps all make use of where you are to give you information relevant to you right in that location. You can easily get someone’s location and give them information based on that locale.

In this article, you will build both the back end and the front end of an application that uses GPS location to provide news content to the user. The back end is written in PHP and uses MySQL to hold a list of articles and their related location and its coordinates. The front-end web page uses the location services supported by webkit browsers to get the GPS coordinates of the user. It then sends those coordinates to the back end in an Ajax request. The PHP back-end system responds with an XML listing of articles, which the front end then renders dynamically.

You use locations in two different ways in this article. The first is when you add new articles to the database. You give the PHP back end a location (for example, Fremont, CA or Washington, DC), and the page uses a geolocation service provided by Yahoo! to turn that location into GPS coordinates. The second way you use location is when the web page makes a request to the browser to get the location of the user and then uses that information to query the database using Ajax.


Building the back end

The back end code starts at the database, which in this case is MySQL. Listing 1 shows a schema for the single table database.

Listing 1. db.sql

DROP TABLE IF EXISTS articles;
CREATE TABLE articles(
     lon FLOAT,
     lat FLOAT,
     address TEXT,
     title TEXT,
     url TEXT,
     summary TEXT );


The table has six columns, starting with the latitude and longitude values and the original address provided for the article (for example, Fremont, CA). There is then some biographic information about the article including the title, URL, and summary.

To build the database, first use mysqladmin to create it and then use the mysql command to run the db.sql script:

% mysqladmin --user=root --password=foo create articles
% mysql --user=root --password=foo articles < db.sql


With the database created, you can build the PHP page that you will use to add records to the database. Listing 2 shows the code for the insert.php page. (Note: The value for $url on lines 5 and 6 should appear as a single character string. It appears as two shorter strings for formatting purposes only.)

Listing 2. insert.php

<?php
$dd = new PDO('mysql:host=localhost;dbname=articles', 'root', '');
if ( isset( $_POST['url'] ) ) {
// You need a Yahoo! PlaceFinder application key
// Go to: http://developer.yahoo.com/geo/placefinder/
  $url = "http://where.yahooapis.com/geocode?q=".urlencode($_POST['address']).
         "&appid=[yourappid] ";

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
  $body = curl_exec($ch);

  preg_match( "/\<latitude\>(.*?)\<\/latitude\>/", $body, $lat );
  preg_match( "/\<longitude\>(.*?)\<\/longitude\>/", $body, $lon );

  $sql = 'INSERT INTO articles VALUES ( ?, ?, ?, ?, ?, ? )';
  $sth = $dd->prepare($sql);
  $sth->execute( array(
    $lon[1],
    $lat[1],
    $_POST['address'],
    $_POST['title'],
    $_POST['url'],
    $_POST['summary']
    ) );
}
?>
<html>
<body>
<form method="post">

Read more: developerWorks
QR: index.html

Posted via email from Jasper-Net