[muharihar] - tutorial web service php nusoap googlemap

Tutorial Web Service Sederhana dengan PHP NuSoap

Oleh : Muhammad Hari Suharto (ak. muharihar)

Email : muharihar[at]infoterkini.comBlog : mhs.infoterkini.com

YM : indocyber2002Facebook : www.facebook.com/muharihar

Minomartani, 24 Oktober 2010, 10:48 PM

Masalah

Bagaimana cara membangun aplikasi web service sederhana dengan menggunakan PHP NuSoap sebagai

pustaka web service-nya?

Solusi

Untuk menjawab problematika di atas, marilah kita membuat asumsi mengenai aplikasi web service yang

akan kita bangun. Berikut adalah studi kasus yang akan dibahas dan diselesaikan dengan menggunakan

PHP NuSoap sebagai pustaka PHP untuk web service.

Studi Kasus

Akan di bangun sebuah layanan web service yang menyediakan data jumlah penduduk disetiap propinsi di

Indonesia. Aplikasi layanan web service tersebut nantinya akan dimanfaatkan untuk melayani request

informasi Jumlah Penduduk Indonesia berdasar propinsi dan jenis kelamin yang divisualisasikan dengan

GoogleMap.

Solusi Studi Kasus

Solusi studi kasus akan di bagi menjadi 5 Tahapan, yaitu :

1. Merancang Arsitektur Sistem

2. Merancang dan Membuat Struktur Database/Tabel

3. Membuat Script Web Service Server (WSDL)

4. Membuat Script Web Service Client

5. Visualisasi dengan GoogleMap


Muhammad Hari Suharto (ak. muharihar) 1 / 20

Tahapan Solusi

1. Merancang Arsitektur Sistem

Bagan Arsitektur Sistem

Rancangan Hierarki Script



2. Merancang dan Membuat Stuktur Database/TabelDatabase Engine : MySQLDatabase Navigator : PhpMyAdmin

Struktur Database/TableDatabase Name : db_wsdlmapTable Name : info_penduduk_propinsiStruktur TabelNama Field Type Data Length Nullable Default Constraint/Index

prop_id int (auto increment)

No Primary Key

prop_kode varchar 2 No Unique

prop_nama varchar 100 No

prop_ibukota varchar 100 Yes

prop_jml_penduduk_pria bigint No 0

prop_jml_penduduk_wanita bigint No 0

prop_website varchar 100 Yes

prop_map_latitude float 10,6 No 0

prop_map_longitude float 10,6 No 0

Script :

Create database db_wsdlmap

create database db_wsdlmap;

Create table info_penduduk_propinsi

CREATE TABLE `info_penduduk_propinsi` ( `prop_id` int(11) NOT NULL AUTO_INCREMENT, `prop_kode` varchar(2) NOT NULL, `prop_nama` varchar(100) NOT NULL, `prop_ibukota` varchar(100) DEFAULT NULL, `prop_jml_penduduk_pria` bigint(20) NOT NULL DEFAULT '0', `prop_jml_penduduk_wanita` bigint(20) NOT NULL DEFAULT '0', `prop_website` varchar(100) DEFAULT NULL, `prop_map_latitude` float(10,6) NOT NULL DEFAULT '0.000000', `prop_map_longitude` float(10,6) NOT NULL DEFAULT '0.000000', PRIMARY KEY (`prop_id`), UNIQUE KEY `prop_kode` (`prop_kode`));

Insert data tabel info_penduduk_propinsi

INSERT INTO `info_penduduk_propinsi` (`prop_id`, `prop_kode`, `prop_nama`, `prop_ibukota`, `prop_jml_penduduk_pria`, `prop_jml_penduduk_wanita`, `prop_website`, `prop_map_latitude`, `prop_map_longitude`) VALUES (1, '11', 'Nanggroe Aceh Darussalam', 'Banda Aceh', 2005763, 2025826, 'http://www.acehprov.go.id', 5.351273, 95.562370), (2, '12', 'Sumatera Utara', 'Medan', 5833465, 5855522, 'http://www.pempropsu.go.id', 2.115355, 99.545097), (3, '13', 'Sumatera Barat', 'Padang', 2248970, 2306840, 'http://www.sumbarprov.go.id', -0.739940, 100.800003), (4, '14', 'Riau', 'Pekanbaru', 2329094, 2234312, 'http://www.riau.go.id', 0.886826, 101.706825), (5, '15', 'Jambi', 'Jambi', 1351370, 1275846, 'http://www.jambiprov.go.id', -1.485183, 102.438057),



(6, '16', 'Sumatera Selatan', 'Palembang', 3424444, 3343201, 'http://www.sumselprov.go.id', -3.319437, 103.914398), (7, '17', 'Bengkulu', 'Bengkulu', 788630, 757656, 'http://www.bengkuluprov.go.id', -3.800649, 102.256203), (8, '18', 'Lampung', 'Bandar Lampung', 3682753, 3421819, 'http://www.lampung.go.id', -5.450000, 105.266670), (9, '19', 'Kep. Bangka Belitung', 'Pangkal Pinang', 543878, 498950, 'http://www.babelprov.go.id', -2.741051, 106.440590), (10, '20', 'Kepulauan Riau', 'Tanjung Pinang', 636078, 636933, 'http://www.kepripro.go.id', 0.900000, 104.449997), (11, '30', 'Banten', 'Serang', 4587897, 4420254, 'http://www.bantenprov..go.id', -6.405817, 106.064018), (12, '31', 'DKI Jakarta', 'Jakarta', 4390746, 4448501, 'http://www.jakarta.go.id', -6.211544, 106.845169), (13, '32', 'Jawa Barat', 'Bandung', 19703106, 19183869, 'http://www.jabarprov.go.id', -7.090911, 107.668884), (14, '33', 'Jawa Tengah', 'Semarang', 15929449, 15966665, 'http://www.jatengprov.go.id', -7.150975, 110.140259), (15, '34', 'DI Yogyakarta', 'Yogyakarta', 1669939, 1667156, 'http://www.jogjaprov.go.id', -7.797224, 110.368797), (16, '35', 'Jawa Timur', 'Surabaya', 17906468, 18151639, 'http://www.jatimprov.go.id', -7.289166, 112.734398), (17, '51', 'Bali', 'Denpasar', 1715130, 1662962, 'http://www.baliprov.go.id', -8.670458, 115.212631), (18, '52', 'Nusa Tenggara Barat', 'Mataram', 2014744, 2154951, 'http://www.ntbprov.go.id', -8.581824, 116.106834), (19, '53', 'Nusa Tenggara Timur', 'Kupang', 2125959, 2117223, 'http://www.nttprov.go.id', -10.184301, 123.594849), (20, '61', 'Kalimantan Barat', 'Pontianak', 2070557, 1972260, 'http://www.kalbar.go.id', 0.142927, 109.257378), (21, '62', 'Kalimantan Tengah', 'Palangkaraya', 986430, 926596, 'http://www.kalteng.go.id', -1.681488, 113.382355), (22, '63', 'Kalimantan Selatan', 'Banjarmasin', 1650537, 1620876, 'http://www.kalselprov.go.id', -3.092642, 115.283760), (23, '64', 'Kalimantan Timur', 'Samarinda', 1486179, 1354695, 'http://www.kaltimprov.go.id', 1.640630, 116.419388), (24, '70', 'Gorontalo', 'Gorontalo', 463073, 456942, 'http://www.gorontaloprov.go.id', 0.544261, 123.042610), (25, '71', 'Sulawesi Utara', 'Manado', 1080528, 1040489, 'http://www.sulut.go.id', 1.470889, 124.845459), (26, '72', 'Sulawesi Tengah', 'Palu', 1174656, 1116313, 'http://www.sulteng..go.id', -1.430025, 121.445618), (27, '73', 'Sulawesi Selatan', 'Makasar', 4115294, 4341829, 'http://www.sulselprov.go.id', -5.137623, 119.412460), (28, '74', 'Sulawesi Tenggara', 'Kendari', 988121, 972576, 'http://www.sulteng.go.id', -4.144910, 122.174606), (29, '75', 'Sulawesi Barat', 'Mamuju', 0, 0, 'http://www.sulbar.go.id', -2.844137, 119.232079), (30, '81', 'Maluku', 'Maluku', 634107, 615105, 'http://www.malukuprov.go.id', -3.238462, 130.145279), (31, '82', 'Maluku Utara', 'Ternate', 452127, 429740, 'http://www.malutprov.go.id', 1.570999, 127.808769), (32, '85', 'Papua', 'Jayapura', 1290799, 1149039, 'http://www.papua.go.id', -2.523695, 140.697128), (33, '87', 'Papua Barat', 'Manokwari', 0, 0, 'http://www.papuabarat.go.id', -0.866667, 131.250000);

3. Membuat Script Web Service Server (WSDL)Kebutuhan :1. AMP (Apache MySQL PHP )2. Pustaka/Library PHP NuSoap

Bagan Komunikasi Script

Script Keterangan Dependensi

index.php Halaman Index Web Service (Penyedia WSDL) nusoap.php, db_config.php, ws_server.php

nusoap.php Pustaka NuSoap

db_config.php Konfigurasi Koneksi ke Database MySQL

ws_server.php Script Web Service Server nusoap.php, db_config.php



index.php

nusoap.php db_config.php ws_server.php

Script Index ( index.php )

<?php/** * File Index * * @filesource index.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage WS_Server * @license MIT * @version 0.0.1 */

//just for simple security - all php files must called from index.phpdefine ( 'MUST_FROM_INDEX', 'SAMPLE_WS2011.2' );

//load nusoap libraryrequire '../0.lib/nusoap/lib/nusoap.php';

//load db configurationrequire 'db_config.php';

//run ws serverrequire 'ws_server.php';

?>

Script Konfigurasi Database ( db_config.php )

<?php/** * DB Configuration * * @filesource db_config.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage WS_Server DB Configuration * @license MIT * @version 0.0.1 */

if (! defined ( 'MUST_FROM_INDEX' )) exit ( 'Cannot access file directly' );

$db_host = '127.0.0.1';$db_user = 'mysql_user';$db_pwd = 'mysql_user_password';$db_port = '3306';$db_schema = 'db_wsdlmap';

$conn = mysql_connect ( $db_host, $db_user, $db_pwd ) or die ( 'Failed while making database connection' );if ($conn) {

mysql_selectdb ( $db_schema );}?>



Script Web Service Server ( ws_server.php )

<?php /** * File WS Server * * @filesource ws_server.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage WS_Server Service * @license MIT * @version 0.0.1 */

if (! defined ( 'MUST_FROM_INDEX' )) exit ( 'Cannot access file directly' );

//WS Configurationdefine ( 'WS_NAMA_KELOMPOK', 'WS_KELOMPOK_X' );define ( 'WS_NAMA_WSDL', 'WSDL_' . WS_NAMA_KELOMPOK . '.wsdl' );

//Create WS Service Instance with WSDL$ws_svr = new nusoap_server ();$ws_svr->soap_defencoding = 'UTF-8';$ws_svr->configureWSDL ( WS_NAMA_KELOMPOK, 'urn:' . WS_NAMA_WSDL );

//Function CheckAuth - User Authenticationfunction CheckAuth($p_header) {

global $ws_svr;$arr_h = $p_header;$user_name = $arr_h ['AuthSoapHeader'] ['UserName'];$password = $arr_h ['AuthSoapHeader'] ['Password'];

$user_name = base64_decode($user_name);$password = base64_decode($password);

$return = false;if (($user_name == 'wsclient') & ($password == 'secret')) {

$return = true;} else {

$ws_svr->fault ( 'WSS-ERR-LOGIN-001', 'INVALID_USER_OR_PASSWORD', 'LOGIN', 'Kombinasi User dan Password Salah' );

$return = false;}

return $return;}

//Web Service Function - List Propinsifunction list_propinsi($p_key_search, $p_page, $p_page_size) {

global $conn, $ws_svr;

if (! CheckAuth ( $ws_svr->requestHeader )) {$return ['data_count'] = 0;$return ['data'] = 0;

} else {$v_key_search = (!$p_key_search || $p_key_search=='')? '' : $p_key_search;$v_page = (!$p_page || $p_page=='')? 0 : $p_page;$v_page_size = (!$p_page_size || $p_page_size=='')? 10 : $p_page_size;

$v_page = (int)$v_page;$v_page_size=(int)$v_page_size;

$v_key_search = '%'.$v_key_search.'%';$v_key_search=(string)$v_key_search;

$sql = "SELECT * FROM info_penduduk_propinsiWHERE prop_nama like '%s' LIMIT %d, %d";



$sql = sprintf($sql,$v_key_search,$v_page,$v_page_size);

$stmt = mysql_query ( $sql, $conn );

$return_data_count = mysql_affected_rows ( $conn );

$return_data = array ();if (is_resource ( $stmt )) {

while ( $row = mysql_fetch_array ( $stmt ) ) {$return_data [] = $row;

}}

$return ['data_count'] = $return_data_count;$return ['data'] = $return_data;

} //encode data

$return = base64_encode ( serialize ( $return ) );

return $return;}

//Register Function to Service$ws_svr->register ( 'list_propinsi',

array ('p_key_search' => 'xsd:string', 'p_page' => 'xsd:integer', 'p_page_size' => 'xsd:integer' ),

array ('return' => 'xsd:string' ), 'urn:' . WS_NAMA_WSDL, 'urn:' . WS_NAMA_WSDL . '#list_propinsi', 'rpc', 'encoded', 'Deskripsi fungsi list_propinsi' );

//Create The Service Response$HTTP_RAW_POST_DATA = isset ( $HTTP_RAW_POST_DATA ) ? $HTTP_RAW_POST_DATA : '';$ws_svr->service ( $HTTP_RAW_POST_DATA );exit ();?>

Hasil WSDL Web Service Server

<?xml version="1.0" encoding="ISO-8859-1"?><definitions xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"

xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:tns="urn:WSDL_WS_KELOMPOK_X.wsdl"

xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"

xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="urn:WSDL_WS_KELOMPOK_X.wsdl"><types>

<xsd:schema targetNamespace="urn:WSDL_WS_KELOMPOK_X.wsdl"><xsd:import namespace="http://schemas.xmlsoap.org/soap/encoding/" /><xsd:import namespace="http://schemas.xmlsoap.org/wsdl/" />

</xsd:schema></types><message name="list_propinsiRequest">

<part name="p_key_search" type="xsd:string" /><part name="p_page" type="xsd:integer" /><part name="p_page_size" type="xsd:integer" />

</message>

<message name="list_propinsiResponse"><part name="return" type="xsd:string" />

</message><portType name="WS_KELOMPOK_XPortType">

<operation name="list_propinsi">



<documentation>Deskripsi fungsi list_propinsi</documentation><input message="tns:list_propinsiRequest" /><output message="tns:list_propinsiResponse" />

</operation></portType><binding name="WS_KELOMPOK_XBinding" type="tns:WS_KELOMPOK_XPortType">

<soap:binding style="rpc"transport="http://schemas.xmlsoap.org/soap/http" />

<operation name="list_propinsi"><soap:operation soapAction="urn:WSDL_WS_KELOMPOK_X.wsdl#list_propinsi"

style="rpc" /><input>

<soap:body use="encoded" namespace="urn:WSDL_WS_KELOMPOK_X.wsdl"encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" />

</input><output>

<soap:body use="encoded" namespace="urn:WSDL_WS_KELOMPOK_X.wsdl"encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" />

</output></operation>

</binding><service name="WS_KELOMPOK_X">

<port name="WS_KELOMPOK_XPort" binding="tns:WS_KELOMPOK_XBinding"><soap:address

location="http://localhost/public/lecture/webservice/ws2011.1/1.wss/index.php" />

</port></service>

</definitions>

View WSDL dalam bentuk lain



ScreenShoot Web Service Server (WSDL)



4. Membuat Script Web Service ClientKebutuhan :1. AP (Apache PHP)2. Pustaka/Library PHP NuSoap



index.php Halaman Index ws_client.php

ws_client.php Script Web Service Client nusoap.php

nusoap.php Pustaka NuSoap

Script Index ( index.php )

<?php/** * File Index * * @filesource index.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage WS_Client * @license MIT * @version 0.0.1 */

require 'ws_client.php';

// call list propinsi WSC function $ws_data = call_ws_list_propinsi('',0,100);

$n = $ws_data ['data_count'];$prop_data = $ws_data ['data'];

?><table border="1">

<caption>Daftar Jumlah Penduduk Propinsi di Indonesia</caption><tr>

<th>ID</th><th>KODE</th><th>NAMA</th><th>IBUKOTA</th><th>JML PRIA</th><th>JML WANITA</th>



index.php

nusoap.phpws_client.php

<th>JML PENDUDUK</th><th>WEBSITE</th><th>LATITUDE</th><th>LONGITUDE</th>

</tr><tbody>

<?phpfor($i = 0; $i < $n; $i ++) {

$jml = ($prop_data [$i] ['prop_jml_penduduk_pria'] + $prop_data [$i] ['prop_jml_penduduk_pria']);

?><tr>

<td><?php echo $prop_data [$i] ['prop_id']; ?></td><td><?php echo $prop_data [$i] ['prop_kode']; ?></td><td><?php echo $prop_data [$i] ['prop_nama']; ?></td><td><?php echo $prop_data [$i] ['prop_ibukota']; ?></td><td><?php echo $prop_data [$i] ['prop_jml_penduduk_pria']; ?></td><td><?php echo $prop_data [$i] ['prop_jml_penduduk_wanita']; ?></td><td><?php echo $jml; ?></td><td><?php echo $prop_data [$i] ['prop_website']; ?></td><td><?php echo $prop_data [$i] ['prop_map_latitude']; ?></td><td><?php echo $prop_data [$i] ['prop_map_longitude']; ?></td>

</tr><?php}?>

</tbody></table>

Script Web Service Client ( ws_client.php )

<?php/** * File WS Client * * @filesource ws_client.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage WS_Client Service * @license MIT * @version 0.0.1 */

//include nusoap libraryrequire '../0.lib/nusoap/lib/nusoap.php';

//wsdl configuration$wsdl = 'http://localhost/public/lecture/webservice/ws2011.1/1.wss/index.php?wsdl';

//create instance$ws_client = new nusoap_client ( $wsdl, true );

//debug if needed//$ws_client->debugLevel = 1;

//header configuration$user = "wsclient";$pass = "secret";

//encrypt header value$user = base64_encode ( $user );$pass = base64_encode ( $pass );

$header = '<AuthSoapHeader><UserName>' . $user . '</UserName><Password>' . $pass . '</Password></AuthSoapHeader>';

//set header



$ws_client->setHeaders ( $header );

// Function to print Faultfunction detect_fault() {

global $ws_client;

//detect fault and errorif ($ws_client->fault) {

exit ( $ws_client->faultstring );} else {

$err = $ws_client->getError ();if ($err) {

exit ( $err );}

}}

//Function to Echo Debug Resultfunction echo_debug(){

global $ws_client;echo "<pre>".$ws_client->debug_str."</pre>";

echo "<pre>".$ws_client->request."/<pre>"; print_r($ws_client->requestHeaders);}

//define Call Function for list_propinsi Servicefunction call_ws_list_propinsi($p_key_search, $p_page, $p_page_size) {

global $ws_client;

//parameters configuration$params = array ('p_key_search' => $p_key_search, 'p_page' => $p_page, 'p_page_size' =>

$p_page_size );

//call method service$ws_data = $ws_client->call ( 'list_propinsi', $params);

detect_fault ();

//decode data$ws_data = unserialize ( base64_decode ( $ws_data ) );//print_r($ws_data);

//echo debug if needed//echo_debug();

return $ws_data;}

?>



Hasil SOAP Envelope Web Service Client ( Request ke Web Service Server )

<?xml version="1.0" encoding="ISO-8859-1"?><SOAP-ENV:Envelope SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"

xmlns:tns="urn:WSDL_WS_KELOMPOK_X.wsdl"><SOAP-ENV:Header>

<AuthSoapHeader><UserName>d3NjbGllbnQ=</UserName><Password>c2VjcmV0</Password>

</AuthSoapHeader></SOAP-ENV:Header><SOAP-ENV:Body>

<tns:list_propinsi xmlns:tns="urn:WSDL_WS_KELOMPOK_X.wsdl"><p_key_search xsi:type="xsd:string">ja</p_key_search><p_page xsi:type="xsd:integer">0</p_page><p_page_size xsi:type="xsd:integer">2</p_page_size>

</tns:list_propinsi></SOAP-ENV:Body>

</SOAP-ENV:Envelope>

View Hasil SOAP Envelope Web Service Client ( Request ke Web Service Server )



Hasil SOAP Envelope Web Service Client ( Response dari Web Service Server )

<?xml version="1.0" encoding="UTF-8"?><SOAP-ENV:Envelope SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/">

<SOAP-ENV:Body><ns1:list_propinsiResponse xmlns:ns1="urn:WSDL_WS_KELOMPOK_X.wsdl">

<return xsi:type="xsd:string">YToyOntzOjEwOiJkYXRhX2NvdW50IjtpOjE7czo0OiJkYXRhIjthOjE6e2k6MDthOjE4OntpOjA7czoxOiI1IjtzOjc6InByb3BfaWQiO3M6MToiNSI7aToxO3M6MjoiMTUiO3M6OToicHJvcF9rb2RlIjtzOjI6IjE1IjtpOjI7czo1OiJKYW1iaSI7czo5OiJwcm9wX25hbWEiO3M6NToiSmFtYmkiO2k6MztzOjU6IkphbWJpIjtzOjEyOiJwcm9wX2lidWtvdGEiO3M6NToiSmFtYmkiO2k6NDtzOjc6IjEzNTEzNzAiO3M6MjI6InByb3Bfam1sX3BlbmR1ZHVrX3ByaWEiO3M6NzoiMTM1MTM3MCI7aTo1O3M6NzoiMTI3NTg0NiI7czoyNDoicHJvcF9qbWxfcGVuZHVkdWtfd2FuaXRhIjtzOjc6IjEyNzU4NDYiO2k6NjtzOjI2OiJodHRwOi8vd3d3LmphbWJpcHJvdi5nby5pZCI7czoxMjoicHJvcF93ZWJzaXRlIjtzOjI2OiJodHRwOi8vd3d3LmphbWJpcHJvdi5nby5pZCI7aTo3O3M6OToiLTEuNDg1MTgzIjtzOjE3OiJwcm9wX21hcF9sYXRpdHVkZSI7czo5OiItMS40ODUxODMiO2k6ODtzOjEwOiIxMDIuNDM4MDU3IjtzOjE4OiJwcm9wX21hcF9sb25naXR1ZGUiO3M6MTA6IjEwMi40MzgwNTciO319fQ==

</return></ns1:list_propinsiResponse>

</SOAP-ENV:Body></SOAP-ENV:Envelope>

View Hasil SOAP Envelope Web Service Client ( Response dari Web Service Server )



ScreenShot Web Service Client



5. Visualisasi dengan GoogleMapKebutuhan:1. AP (Apache PHP)2. GoogleMap API3. Koneksi Internet (maps.google.com)



index.php Halaman Index Google Map wsc_prop.php

wsc_prop.php Script Generate XML Data untuk Google Map dari data web service (client)

ws_client.php

ws_client.php Web Service Client ( Point 4 )

Script Index GoogleMap ( index.php )

<?php/** * File Google Map Index * * @filesource index.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage Google Map * @license MIT * @version 0.0.1 */

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps AJAX + WebService Example - Data Jumlah Penduduk Per Propinsi di Indonesia</title>  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map;



index.php

nusoap.phpwsc_prop.php ws_client.php

var geocoder;

function load() { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById('map')); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(-5.137623, 119.412460), 4); } }

function searchLocations() { var address = document.getElementById('addressInput').value; if (!address) { searchLocationsNear('',0,10); } else { searchLocationsNear(address); } }

function searchLocationsNear(prop_name, page, page_size) { var searchUrl = 'wsc_prop.php?prop_nama=' + prop_name; if ((page) & (page_size)) { searchUrl = 'wsc_prop.php?prop_nama=' + prop_name + '&page=' + page + '&page_size' +page_size; } GDownloadUrl(searchUrl, function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); map.clearOverlays();

var sidebar = document.getElementById('sidebar'); sidebar.innerHTML = ''; if (markers.length == 0) { sidebar.innerHTML = 'No results found.'; map.setCenter(new GLatLng(-5.137623, 119.412460), 4); return; }

var bounds = new GLatLngBounds(); for (var i = 0; i < markers.length; i++) { var prop_nama = markers[i].getAttribute('prop_nama'); var prop_ibukota = markers[i].getAttribute('prop_ibukota'); var jml_penduduk = parseFloat(markers[i].getAttribute('prop_penduduk')); var jml_penduduk_pria = parseFloat(markers[i].getAttribute('prop_penduduk_pria')); var jml_penduduk_wanita = parseFloat(markers[i].getAttribute('prop_penduduk_wanita')); var prop_website = markers[i].getAttribute('prop_website'); var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng'))); var marker = createMarker(point, prop_nama, prop_ibukota, jml_penduduk, jml_penduduk_pria, jml_penduduk_wanita, prop_website); map.addOverlay(marker); var sidebarEntry = createSidebarEntry(marker, prop_nama, prop_ibukota, jml_penduduk, jml_penduduk_pria, jml_penduduk_wanita, prop_website); sidebar.appendChild(sidebarEntry); bounds.extend(point); } map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); }); }

function createMarker(point, prop_nama, prop_ibukota, jml_penduduk, jml_penduduk_pria, jml_penduduk_wanita, prop_website) { // Create our "tiny" marker icon var iconBlue = new GIcon(); iconBlue.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png"; iconBlue.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; iconBlue.iconSize = new GSize(24, 40);



iconBlue.shadowSize = new GSize(34, 40); iconBlue.iconAnchor = new GPoint(6, 40); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; iconRed.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRed.infoWindowAnchor = new GPoint(5, 1);

var markerOptions = {}; markerOptions.icon = G_DEFAULT_ICON; if (jml_penduduk > 10000000 ){ markerOptions.icon = iconBlue; } markerOptions.title = prop_nama; markerOptions.draggable = false; var marker = new GMarker(point, markerOptions); var html = 'Propinsi : <b>' + prop_nama + '</b> <br/>' + 'Ibukota : '+ prop_ibukota + '<br/><br/>' + '<table border=1> <thead> <th> Kriteria (Kelamin) </th> <th> Jumlah </th> </thead>' + '<tbody>' + '<tr> <td> Pria </td> <td aling="right">'+jml_penduduk_pria+'</td> </tr>' + '<tr> <td> Wanita </td> <td aling="right">'+jml_penduduk_wanita+'</td> </tr>' + '<tr> <td> Total </td> <td aling="right">'+jml_penduduk+'</td> </tr>' + '</tbody><table/>' + '<br/>' + 'WebSite : <a href="'+prop_website+'" target="_blank">'+prop_website+'</a>' + '<br/><br/>' + '<img src="http://www.facebook.com/profile/pic.php?oid=AQDtJQ70o7Sx0D-7XkRbq7F0PPulc4x-lcehevpw4vZUZULk-dL7nAuYk_iW5OQpSGg&size=normal">' + '<br/>' + 'Author : <a href="http://www.mhs.infoterkini.com" target="_blank">www.mhs.infoterkini.com</a>'; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; }

function createSidebarEntry(marker, prop_nama, prop_ibukota, jml_penduduk, jml_penduduk_pria, jml_penduduk_wanita, prop_website) { var div = document.createElement('div'); var html = '<b>' + prop_nama + '</b> (' + jml_penduduk + ')<br/>' + prop_ibukota; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() { GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; }); return div; } //]]> </script> </head>

<body onload="load()" onunload="GUnload()"> <h2>Google Maps AJAX + WebService Example - Data Jumlah Penduduk Per Propinsi di Indonesia</h2> Propinsi: <input type="text" id="addressInput"/>



<input type="button" onclick="searchLocations()" value="Search"/> <br/> <br/>

<div style="width:1000px; font-family:Arial, sans-serif; font-size:11px; border:1px solid black"> <table> <tbody> <tr> <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 500px; font-size: 11px; color:

#000"></div> </td> <td> <div id="map" style="overflow: hidden; width:800px; height:500px"></div> </td> </tr> </tbody> </table></div>

</body></html>

Script Web Service Client Call ( wsc_prop.php )

<?php/** * File WS Client Prop * * @filesource wsc_prop.php * @author muharihar | Muhammad Hari Suharto * @package Web_Service_Tutorial * @subpackage WS_Client Service Call * @license MIT * @version 0.0.1 */

require '../2.wsc/ws_client.php';

// Get parameters from URL$v_prop_nama = (isset ( $_REQUEST ["prop_nama"] )) ? $_REQUEST ["prop_nama"] : '';$v_prop_nama = '%' . $v_prop_nama . '%';$v_prop_nama = ( string ) $v_prop_nama;$v_page = 0;$v_page_size = 100;

// call list propinsi WSC function $ws_data = call_ws_list_propinsi($v_prop_nama, $v_page, $v_page_size);

$n = $ws_data ['data_count'];$prop_data = $ws_data ['data'];

// Start XML file, create parent node$dom = new DOMDocument ( "1.0" );$node = $dom->createElement ( "markers" );$parnode = $dom->appendChild ( $node );

header ( "Content-type: text/xml" );

// Iterate through the rows, adding XML nodes for eachfor($i = 0; $i < $n; $i ++) {

$jml = ($prop_data [$i] ['prop_jml_penduduk_pria'] + $prop_data [$i] ['prop_jml_penduduk_wanita']);

$node = $dom->createElement ( "marker" );$newnode = $parnode->appendChild ( $node );$newnode->setAttribute ( "prop_nama", $prop_data [$i]['prop_nama'] );$newnode->setAttribute ( "prop_ibukota", $prop_data [$i]['prop_ibukota'] );$newnode->setAttribute ( "prop_penduduk", $jml );$newnode->setAttribute ( "prop_penduduk_pria", $prop_data [$i]['prop_jml_penduduk_pria'] );



$newnode->setAttribute ( "prop_penduduk_wanita", $prop_data [$i]['prop_jml_penduduk_wanita'] );

$newnode->setAttribute ( "prop_website", $prop_data [$i]['prop_website'] );$newnode->setAttribute ( "lat", $prop_data [$i]['prop_map_latitude'] );$newnode->setAttribute ( "lng", $prop_data [$i]['prop_map_longitude'] );

}

echo $dom->saveXML ();?>

ScreenShot GoogleMap Web Service Client



[muharihar] - tutorial web service php nusoap googlemap

Documents

data jumlah

propnama

script index

null default

default null

var html

apache php

php nusoap