DB2 и открытый исходный код: Разместите свою информацию на карте с помощью Google Maps API, DB2/Informix и PHP на Linux

Лучше один раз увидеть, но потом вам все равно понадобится Web-браузер…

Google Maps API вместе с DB2® или Informix®, PHP, JavaScript и XML позволят вам создать простую в использовании карту с вашей личной информацией на ней. Введите ваш почтовый индекс для того, чтобы увидеть информацию о конкретной местности. Пользуйтесь собственными значками, изменяйте подписи на картах, создавайте сноски и используйте обработчик событий.

Марти Льюри (Marty Lurie), специалист по информационным технологиям, IBM

фото автораМарти Льюри (Marty Lurie) начал свою компьютерную карьеру, набивая тонны перфокарт в попытках написать Fortran на IBM 1130. Его каждодневная работа – это проектирование систем для IBM's Informix, но, если поднажать, то он, конечно, признается, что чаще всего он просто играет с компьютерами. Его любимая программа - это та, которую он написал, чтобы соединить свою беговую дорожку с лэптопом (из-за чего лэптоп потерял два фунта, а его уровень холестерина снизился на 20%). Марти получил сертификаты IBM DB2 DBA, IBM Business Intelligence Solutions Professional и Informix Professional.


developerWorks Contributing author
        level

Эйрон Льюри (Aron Lurie), выпускник 9 класса/Web-мастер, Newton South High School/Hebrew College

фото автораЭйрон Льюри (Aron Lurie) учился в 9 классе, когда он написал эту статью. К тому времени у него уже было свое дело по Web-разработкам, а с 4 класса он занимался изучением новых языков программирования. Его основной клиент – это Hebrew College, где он занимает должность Web-мастера. Также недавно он стал Web-мастером школьной газеты, и, вдобавок, местного отделения USY. В свободное время - Эйрон член лыжной команды Newton South. К сожалению, он пока еще не нашел пути сочетания увлечений компьютером и лыжами.



18.06.2007

Картография

Современный информационный взрыв вызвал появление множества новых технологий, которые помогают привести в порядок все эти гигабайты. Большинство людей лучше справляются с графическим изложением информации при попытке усвоить очень много информации. Информация географического характера, в данном случае взятая из US Census, может быть лучше представлена при использовании Google Maps, а не в традиционных географических информационных системах (ГИС). Зачем нужна эта статья, если индекс популярности поиска слов "google maps" достигает 69 миллионов запросов? Потому что здесь мы фокусируемся на применении PHP, Informix, DB2 и Linux. К тому же, доходчивость и понятность кода, который здесь выложен, может быть обеспечена только 14-летним программистом. (См. Ресурсы, чтобы ознакомиться с другими статьями автора).

Примеры в этой статье основаны на данных Census. Для поиска предусмотрен бланк введения почтового индекса. Страница результата поиска выдает плотность населения на территории, заданной почтовым индексом, а также смежные почтовые индексы, обозначенные указателями определенного цвета. Двигаться по карте можно нажатием левой клавиши, а также перетаскиванием с помощью мыши; масштабная линейка может регулироваться в окошке изменения масштаба в левом верхнем углу карты.

Листинг 1 показывает некоторые образцы после очистки данных. Схема базы данных показана в листинге 2.

Листинг 1. Образец данных
state         AL
zip           35004
longitude     -86.502492000000
latitude      33.6063790000000
population    6998
housingunits  2815
sqmeters      49387881

state         ME
zip           03901
longitude     -70.845590000000
latitude      43.2901600000000
population    6338
housingunits  2406
sqmeters      96091016

state         WA
zip           98001
longitude     -122.26608100000
latitude      47.3037220000000
population    25771
housingunits  9158
sqmeters      46475168
Листинг 2. Схема базы данных
Column name          Type                                    

state                char(2)   
zip                  char(5)  
longitude            decimal(16) 
latitude             decimal(16)
population           integer   
housingunits         integer  
sqmeters             int8

Рисунок 1 иллюстрирует страницу поиска, первое, с чем столкнется пользователь.

Рисунок 1. Первая загрузка страницы
Первая загрузка страницы

После того, как пользователь ввел почтовый индекс, результат будет выдан так, как показано на рисунке 2. Плотность населения указана на карте цветом. Текст справа показывает индексы, отмеченные на карте. В верхнем левом углу - управление масштабом. Окошко с информацией показывает детали округа с индексом 02222.

Рисунок 2. Страница результатов поиска по индексу 02222
Страница результатов поиска

Обзор архитектуры

Итак, как пройти путь от таблицы базы данных к поиску и выводу результатов на экран, (рисунки 1 и 2)? Комбинация источников данных и интерфейс Google Map известна как "mashup" (Wikipedia.org) или гибридное Web-приложение. Рисунок 3 иллюстрирует архитектуру сервера.

Действительно интересен здесь принцип интегрирования браузером различных источников данных. Для успеха данного подхода критически важным является ограничение объема информации, объединенной клиентским браузером. Как только пользователь начнет запрашивать чрезмерные объемы информации, сетевые ограничения и скорость процессора будут мешать пользователю.

Рисунок 3. Архитектура организации работы с аннотированными картами
Архитектура

Архитектура достаточно проста. Запрос идет от браузера к Web-серверу Apache. Требуемая страница PHP включает HTML и JavaScript. JavaScript вызывает сервер Google Map, и полученная таким образом страница отображается (как показано на рисунке 1). Когда почтовый индекс введен в поле поиска, запрос передается Web-серверу, который использует PHP ODBC соединение с внутренними базами данных Informix. Образцы кодов, данные в статье, описывают использование Informix. Ознакомьтесь со статьей "DB2 и Open Source: Опрос в интернете о DB2, PHP и Linux" (developerWorks, август 2004) для того, чтобы научиться конфигурировать DB2 для работы с PHP.

Данные для страницы извлекаются из базы данных. Разная плотность населения определяется указателями разного цвета. Были отобраны области населения, чтобы получить одинаковое количество цветов для каждого распределения.

Пожалуйста, ознакомьтесь с обсуждением кода и комментариями, данными в статье для дополнительной информации о работе структуры.


Компоненты

Ajax/JavaScript и Google API

Google API, JavaScript и Ajax составляют большую часть приложения. Для Google Maps API необходим определенный ключ к конкретному каталогу конкретного Web-сайта. Для получения ключа, зайдите на www.google.com/apis/maps и выберите "Sign up for a Google Maps API key." (подписаться на ключ Google Maps API). API содержит множество полезных функций, включая включая класс Ajax HttpRequest и средства управления обработчиками событий. Google обеспечивает великолепную документацию для API, которую можно найти на www.google.com/apis/maps/documentation/. Однако, Ajax – это всего лишь акроним сочетания JavaScript и XML. Как вы увидите ниже, вызывая Ajax и анализируя HTML, возвращенный PHP, можно избавиться от необходимости обновлять браузер пользователя.

Большинство браузеров, включая Mozilla Firefox и Internet Explorer 6, поддерживают JavaScript и Google API. Некоторые устаревшие браузеры могут не поддерживать используемые CSS.

Apache, PHP и ODBC

Серверы промежуточного уровня обеспечивают доступ к Web-страницам, среде исполнения и базам данных. Apache-сервер наиболее известен и, согласно статистике, используется на 70% сайтов. Apache поддерживает встроенные модули, а наш сервер использует mod_php для обеспечения PHP окружения. Вы можете произвести простую проверку php-скрипта, выбрав команду php из командной строки. Apache и mod_php вступают в игру, когда php-код должен быть исполнен и отправлен запрашивающему браузеру.

Бывало, что доступ к базе данных – ODBC, страдал из-за ошибок в работе. Ранее выпущенные ODBC были медленными. В дальнейшем реализации значительно улучшились, обеспечив необходимую эффективность. Использование ODBC обеспечивает превосходную совместимость системами. Существуют библиотеки для получения собственного доступа к DB2 и Informix, специфичные для баз данных клиентов API.

Informix/DB2

С Web-сайта IBM:

  • Семейство DB2: система управления базами данных, обеспечивающая гибкую и рентабельную платформу для создания надежных бизнес-приложений по требованию.
  • Семейство Informix: обеспечивает превосходную производительность приложений в средах с высокой интенсивностью транзакций.

(Работая с Informix определенное количество лет, я могу свидетельствовать, что эта серия также отлично работает с хранилищами данных и информационной моделью.)

Статья "DB2 и Open Source: Опрос в интернете о DB2, PHP и Linux" ссылается на множество примеров из DB2, так что мы приведем примеры из Informix. Пожалуйста, ознакомьтесь с другими статьями автора, если у вас возникнут затруднения при создании этого примера работы с DB2. (См. "Ресурсы).


Код

Наш код состоит из трех страниц:

  1. Главная страница, написанная на HTML/JavaScript, на которой находится карта
  2. PHP-скрипт, который возвращает долготу/широту почтового индекса в виде XML
  3. Другой PHP-скрипт, возвращающий данные о почтовом индексе в границах карты в виде XML

Начнем с рассмотрения двух компонентов, которые не видны пользователю - PHP-скрипты, вызываемые JavaScript, взаимодействуют с базой данных и возвращают XML:

Листинг 3. PHP-код для поиска долготы/широты по заданному почтовому индексу
<?php
header("Content-Type: text/xml");
echo"<?xml version=\"1.0\"?>";
$newloc=$_GET[location];
//соединение с базой данных db2/informix
        //соединить vars
        $dbname="census";
        $username="informix";
        $password="useyourown";
        // odbc_pconnect возвращает 0, если попытка соединения не удалась
        // в противном случае возвращается ID соединения, 
        используемый другими ODBC функциями
//                echo ( "attempt connect.....\n " );
        $conn = odbc_pconnect ( $dbname, $username, $password );

        if ( $conn == 0 ) {
                echo ( "Connection to database failed." );
                //Если соединение было прервано, то сообщение об ошибке было:
                $sqlerror = odbc_errormsg ( $conn );
                die($sqlerror);
        }
        $sql = "select longitude,latitude,zip from census_data where zip = '$newloc'";
        $locResult=odbc_exec($conn,$sql);
        $locData=odbc_fetch_object($locResult);

        echo "\n<Results>";
        if($locData->latitude !=""){
        echo "\n\t<Zip>";
        echo "\n\t\t<Latitude>$locData->latitude</Latitude>";
        echo "\n\t\t<Longitude>$locData->longitude</Longitude>";
        echo "\n\t</Zip>";}
        echo "\n</Results>";



?>

Вы могли заметить, что этот код связывается с источником данных ODBC с именем census. Данная система была настроена при использовании Informix и unixODBC. Неплохое учебное пособие по настройке можно найти на сайте unixODBC. (См. "Ресурсы"). Однако этот скрипт может быть легко преобразован в скрипт для DB2. В статье "Связь PHP-приложения с IBM DB2 Universal Database" (developerWorks, июль 2001) описывается настройка DB2 для взаимодействия с PHP.

Результат кода в листинге 3 вернет аккуратно отформатированный XML-файл с тегами Latitude и Longitude внутри тега Zip в теге Results. Далее он будет искать базу данных, указанную в адресе URL. Если результат не найден, тег Results не будет содержать Zip. Более практическую роль тега Results можно будет увидеть во втором PHP-скрипте.

Листинг 4– пример вывода скрипта при использования почтового индекса 02222 (Бостон, Массачусетс).

Листинг 4. Образец вывода скрипта широты/долготы
<?xml version="1.0"?>
<Results>
	<Zip>
		<Latitude>42.367797</Latitude>
		<Longitude>-71.062829</Longitude>
	</Zip>
</Results>

Этот скрипт будет вызываться только JavaScript на главной странице. Так как он будет возвращен в виде XML с корректными заголовками (установленными функцией header()), XML будет проанализирован программой, встроенной в Google Maps API. (Вы сможете увидеть это в листинге 6.)

Листинг 5. PHP-код для запроса данных о почтовых индексах на экране пользователя
<?php
header("Content-Type: text/xml");
echo"<?xml version=\"1.0\"?>";
//$newloc=$_GET[location];
//соединение с базой данных db2/informix
        //соединение vars
        $dbname="census";
        $username="informix";
        $password="useyourown";
        //odbc_pconnect возвращает 0, если попытка соединения не удалась
        // в противном случае возвращается ID соединения, 
        используемый другими ODBC функциями
//                echo ( "attempt connect.....\n " );
        $conn = odbc_pconnect ( $dbname, $username, $password );

        if ( $conn == 0 ) {
                echo ( "Connection to database failed." );
                //Если соединение было прервано, то сообщение об ошибке было:
                $sqlerror = odbc_errormsg ( $conn );
                die($sqlerror);
        }
        $sql = "select * from census_data where longitude > '$_POST[left]' 
		and longitude < '$_POST[right]' 
		and latitude > '$_POST[bottom]' 
		and latitude <'$_POST[top]'";
        $locResult=odbc_exec($conn,$sql);
        echo "\n<Results>";
        while($locData=odbc_fetch_object($locResult))
        {
        echo "\n\t<Zip>";
        echo "\n\t\t<Code>$locData->zip</Code>";
        echo "\n\t\t<State>$locData->state</State>";
        echo "\n\t\t<Latitude>$locData->latitude</Latitude>";
        echo "\n\t\t<Longitude>$locData->longitude</Longitude>";
        echo "\n\t\t<Population>$locData->population</Population>";
        echo "\n\t\t<Housing>$locData->housingunits</Housing>";
        echo "\n\t\t<Area>$locData->sqmeters</Area>";
        echo "\n\t</Zip>";
        }
        echo "\n</Results>";



?>

XML, возвращенный этим скриптом, в общем, основан на первом скрипте. Он будет иметь корневой тег Results, как вы видели в первом скрипте. Однако скорее всего скрипт вернет несколько тегов Zip. Каждая строчка данных, возвращенных источником, будет воспринята циклом while как единый объект, и тег Zip будет выдан вместе со всеми данными. (См. листинг 1).

Наиболее важная часть кода – это запрос SQL (листинг 6), Ajax переключается на POST вместо GET (как видно в листинге 3), и отправляет четыре переменные: left, right, bottom и top. Эти переменные определены как границы по широте/долготе на видимой карте. Запрашивая почтовые индексы из базы данных в указанных границах, вы, тем самым, исключаете ненужные данные, помогая серверу и сокращая время ответа.

Код в листинге 6 состоит из трех частей:

  1. CSS
  2. Теги <div>
  3. JavaScript и немного PHP

Первая часть – это каскадные таблицы стилей (CSS), встроенные в тег <head>. Их границы обозначены тегами <style type="text/css"> и </style>. CSS настраивает классы, которые будут использованы тегами <div> для создания "вида и дизайна" страницы. Без CSS не будет цвета, компоновка страницы будет свободной и менее организованной.

Внутри основного тега располагается следующая часть: структурный блок тегов <div>, который играет роль ведущего узла компоновки, информации и поисковых сервисов. Благодаря работе JavaScript, теги <div> отлично подходят для легкообновляемых страниц.

Последняя часть наиболее важна – это JavaScript. Как уже было указано, JavaScript включает несколько частей:

  • Методы поиска
  • Методы контроля знака LOADING..
  • Методы анализа XML и вывода маркеров на карту
  • Несколько PHP циклов for, которые создают иконки
  • Методы, запускаемые, когда нажата кнопка поиска или после того, как форма "передала" свои данные

Наиболее функциональным из всех этих методов являются те, которые анализируют XML. Они создают новый класс GXmlHttp.create();, являющийся классом HttpRequest, встроенным в Google Maps API. Это основа не только обновления карт, но и многих Ajax-приложений. (Однако не все они используют классы HttpRequest Google Maps).

После отправки запроса к PHP- файлу и получения XML, происходит просмотреть кода и поиск тегов Zip. При нахождении такого тега, добавляется маркер на карте. Также происходит добавление "слушателя событий" - в данном случае, ожидающего, что кто-то нажмет на маркер. Как и HttpRequest, функция "слушателя событий" встроена в Google Maps API.

Другой важный аспект работы с картами – это "слушатель событий", который определяется после всех методов движения по карте. В зависимости, является ли уровень выше или ниже 6 (чтобы сократить время ответа), он либо обновит карту и боковое меню, либо уведомит пользователя, что увеличение слишком сильное.


Что дальше?

Возможности вывода географических данных ограничены только вашей фантазией. Примеры из этой статьи основаны на данных US Census. Архитектура и методы, показанные здесь, могут быть применены к любым данным по вашему выбору. Мы надеемся, что это окажется полезным для вас, и будем заинтересованы в ваших отзывах, основанных на опыте создания "mashups".


Загрузка

ОписаниеИмяРазмер
Пример кодаgoogleAPI.zip  ( HTTP | FTP )35KB

Ресурсы

Научиться

Получить продукты и технологии

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Information Management, Open source, Linux
ArticleID=231501
ArticleTitle=DB2 и открытый исходный код: Разместите свою информацию на карте с помощью Google Maps API, DB2/Informix и PHP на Linux
publish-date=06182007