Android Tutorial : Aplikasi Untuk Menampilkan Titik Koordinat Pada Google Maps v2 Dengan PHP, MySQL, JSON

Haahhh, udah 1,5 bulan saya gak posting lagi di blog ini. Yaw biasalah, ada beberapa kesibukan akhir-akhir ini. Banyak kejadian yang saya alami 1 bulan belakangan ini. Pengalaman baru, teman baru, ilmu baru, dan belum punya pacar baru, hahaha… 1 bulan ini saya banyak belajar tentang ilmu-ilmu baru di dunia software enginering. Ilmu yang banyak saya pelajari sendiri, saya temukan di google, saya praktekkan dan menjadi pengalaman tersendiri. Kalau sudah begini, saya berpikir, untuk apa sebenarnya kita kuliah? Yaw memang saya sadari di dunia perkuliahan kita tidak mendapat ilmu-ilmu tersebut. Justru yang kita dapatkan di dunia perkuliahan adalah ilmu sosial, ilmu untuk berkomunikasi dengan orang lain, ilmu untuk mencari relasi.

Selain itu saya juga mendapatkan pengalaman baru tentang pahitnya kenyataan hidup yang saya temui belakangan ini. Saya menjadi semakin sadar kenapa kita harus mandiri, kenapa kita harus mampu berdiri sendiri, kenapa kita tidak boleh bergantung pada orang lain. Pesan yang selalu disampaikan oleh ibu saya dulu kepada saya. Ketika kita bergantung pada orang lain, dan orang lain itu pergi maka habislah sudah kita.

Pengalaman kehidupan lainnya yang saya temui ialah tak ada gunanya hanya bisa protes, mengkritik, menyindir tanpa memberikan solusi untuk hal tersebut. Kalau cuma bisa protes, nyindir, mengkritik, bocah SMA juga bisa kayak gitu. Gak perlu menempuh pendidikan yang tinggi hanya untuk berperilaku seperti itu. Untuk apa??? Apa hanya agar terlihat idealis?? Terlihat inTelek??? Ahh,,sudahlah, kalau memang dari bibit sudah seperti, mau gimana lagi :D. Dan yang terakhir, yang benar-benar mengena di hati adalah ketika saya dianggap pengkhianat. Walau tidak secara langsung, tapi yaw sudah terlihat jelas. Kadang saya berkata di dalam hati, “Wahai guruku, jika kau salah dan menyesal memberikan ilmumu kepadaku, aku siap menjalani karma dan jalan hidupku sebagai seorang Karna.”

Ahhh, udah dulu sesi curhatnya :D. Di postingan kali ini saya akan membahas tentang google maps di android. Kebetulan kemarin ada yang bertanya tentang bagaimana menampilkan titik-titik koordinat yang sumbernya dari database. Dulu saya pernah membuat seperti ini, saat masih menggunakan google maps versi yang terdahulu. Dan implementasi di google maps yang terbaru ini agak berbeda. OK deh, kita langsung aja ke pembahasannya.

1. Silahkan buat project baru yang mengimplementasikan library google map, tutorialnya ada disini.

2. Buat sebuah class baru untuk file koneksi, Koneksi.java.

package dlmbg.pckg.petabesakih;

public class Koneksi {

	public String isi_koneksi()
	{
		//isi sendiri dengan alamat ip/domain
		String isi = "http://192.168.1.12/";
		return isi;
	}

}

3. Output data yang saya ambil, formatnya berupa JSON. Jadi disini saya menggunakan class JSONParser untuk melakukan parsing datanya.

package dlmbg.pckg.petabesakih;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.util.List;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.utils.URLEncodedUtils;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONException;
import org.json.JSONObject;

import android.util.Log;

public class JSONParser {

    static InputStream is = null;
    static JSONObject jObj = null;
    static String json = "";

    public JSONParser() {

    }

    public JSONObject makeHttpRequest(String url, String method,
            List<NameValuePair> params) {

        try {

            if(method == "POST"){
                DefaultHttpClient httpClient = new DefaultHttpClient();
                HttpPost httpPost = new HttpPost(url);
                httpPost.setEntity(new UrlEncodedFormEntity(params));

                HttpResponse httpResponse = httpClient.execute(httpPost);
                HttpEntity httpEntity = httpResponse.getEntity();
                is = httpEntity.getContent();

            }else if(method == "GET"){
                DefaultHttpClient httpClient = new DefaultHttpClient();
                String paramString = URLEncodedUtils.format(params, "utf-8");
                url += "?" + paramString;
                HttpGet httpGet = new HttpGet(url);

                HttpResponse httpResponse = httpClient.execute(httpGet);
                HttpEntity httpEntity = httpResponse.getEntity();
                is = httpEntity.getContent();
            }

        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        try {
            BufferedReader reader = new BufferedReader(new InputStreamReader(
                    is, "iso-8859-1"), 8);
            StringBuilder sb = new StringBuilder();
            String line = null;
            while ((line = reader.readLine()) != null) {
                sb.append(line + "\n");
            }
            is.close();
            json = sb.toString();
        } catch (Exception e) {
            Log.e("Buffer Error", "Error converting result " + e.toString());
        }

        try {
            jObj = new JSONObject(json);
        } catch (JSONException e) {
            Log.e("JSON Parser", "Error parsing data " + e.toString());
        }

        return jObj;
    }

	public JSONObject AmbilJson(String url) {

		try {
			DefaultHttpClient httpClient = new DefaultHttpClient();
			HttpPost httpPost = new HttpPost(url);

			HttpResponse httpResponse = httpClient.execute(httpPost);
			HttpEntity httpEntity = httpResponse.getEntity();
			is = httpEntity.getContent();

		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		} catch (ClientProtocolException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}

		try {
			BufferedReader reader = new BufferedReader(new InputStreamReader(
					is, "iso-8859-1"), 8);
			StringBuilder sb = new StringBuilder();
			String line = null;
			while ((line = reader.readLine()) != null) {
				sb.append(line + "\n");
			}
			is.close();
			json = sb.toString();
		} catch (Exception e) {
			Log.e("Buffer Error", "Error converting result " + e.toString());
		}

		try {
			jObj = new JSONObject(json);
		} catch (JSONException e) {
			Log.e("JSON Parser", "Error parsing data " + e.toString());
		}

		return jObj;

	}
}

4. Selanjutnya buka file MainActivity.java. Class MainActivity mengimplementasikan abstract class OnMapLongClickListener. Copy kode di bawah ini, lumayan banyak :p

package dlmbg.pckg.petabesakih;

import java.util.ArrayList;
import java.util.HashMap;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.GooglePlayServicesUtil;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.GoogleMap.OnInfoWindowClickListener;
import com.google.android.gms.maps.GoogleMap.OnMapLongClickListener;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends Activity implements OnMapLongClickListener, OnInfoWindowClickListener{

	static final LatLng AWAL = new LatLng(3.584695,98.675079);
	ArrayList<HashMap<String, String>> dataMap = new ArrayList<HashMap<String, String>>();
	private ProgressDialog pDialog;
	JSONParser jParser = new JSONParser();
	Koneksi lo_Koneksi = new Koneksi();
	String isi = lo_Koneksi.isi_koneksi();
	String link_url = isi + "peta.php";
	JSONArray str_json = null;

	class MyInfoWindowAdapter implements InfoWindowAdapter{

		private final View myContentsView;

		MyInfoWindowAdapter(){
			myContentsView = getLayoutInflater().inflate(R.layout.custom_info_contents, null);
		}

		@Override
		public View getInfoContents(Marker marker) {
			TextView tvTitle = ((TextView)myContentsView.findViewById(R.id.title));
            tvTitle.setText(marker.getTitle());
            TextView tvSnippet = ((TextView)myContentsView.findViewById(R.id.snippet));
            tvSnippet.setText(marker.getSnippet());

            return myContentsView;
		}

		@Override
		public View getInfoWindow(Marker marker) {
			return null;
		}

	}

	class getListInfo extends AsyncTask<String, String, String> {
		@Override
		protected void onPreExecute() {
			super.onPreExecute();
			pDialog = new ProgressDialog(MainActivity.this);
			pDialog.setMessage("Menghubungkan ke server...");
			pDialog.setIndeterminate(false);
			pDialog.setCancelable(true);
			pDialog.show();
		}

		protected String doInBackground(String... args) {

			JSONObject json = jParser.AmbilJson(link_url);

			try {
				str_json = json.getJSONArray("info");

				for(int i = 0; i < str_json.length(); i++)
				{
					JSONObject ar = str_json.getJSONObject(i);
					HashMap<String, String> map = new HashMap<String, String>();

					map.put("judul", ar.getString("judul"));
					map.put("koordinat_lang",  ar.getString("koordinat_lang"));
					map.put("koordinat_lat",  ar.getString("koordinat_lat"));
					map.put("keterangan",  ar.getString("keterangan"));

					dataMap.add(map);
				}
			} catch (JSONException e) {
				e.printStackTrace();
			}

			return null;
		}

		protected void onPostExecute(String file_url) {
			pDialog.dismiss();
			runOnUiThread(new Runnable() {
                public void run() {

                    for (int i = 0; i < dataMap.size(); i++)
                    {
                    	HashMap<String, String> map = new HashMap<String, String>();
                    	map = dataMap.get(i);
                    	LatLng POSISI = new LatLng(Double.parseDouble(map.get("koordinat_lat")),Double.parseDouble(map.get("koordinat_lang")));

                    	myMap.addMarker(new MarkerOptions()
                        .position(POSISI)
                        .title(map.get("judul"))
                        .snippet(map.get("keterangan")));

                    }
                }
            });
		}

	}

	final int RQS_GooglePlayServices = 1;
	private GoogleMap myMap;
	TextView tvLocInfo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.peta_online);

        FragmentManager myFragmentManager = getFragmentManager();
        MapFragment myMapFragment
        	= (MapFragment)myFragmentManager.findFragmentById(R.id.map);
        myMap = myMapFragment.getMap();

        myMap.setMyLocationEnabled(true);

        myMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);

        myMap.getUiSettings().setZoomControlsEnabled(true);
        myMap.getUiSettings().setCompassEnabled(true);
        myMap.getUiSettings().setMyLocationButtonEnabled(true);

        myMap.getUiSettings().setAllGesturesEnabled(true);

        myMap.setTrafficEnabled(true);

        myMap.setOnMapLongClickListener(this);
        myMap.setInfoWindowAdapter(new MyInfoWindowAdapter());
        myMap.setOnInfoWindowClickListener(this);

        myMap.moveCamera(CameraUpdateFactory.newLatLngZoom(AWAL, 15));

        myMap.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);

        new getListInfo().execute();

    }

	@Override
	protected void onResume() {
		super.onResume();

		int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getApplicationContext());

		if (resultCode != ConnectionResult.SUCCESS)
		{
			GooglePlayServicesUtil.getErrorDialog(resultCode, this, RQS_GooglePlayServices);
		}
	}

	@Override
	public void onMapLongClick(LatLng point) {

	}

	@Override
	public void onInfoWindowClick(Marker marker) {
		Intent intent = new Intent(this, DetailPeta.class);

		String replace_string_first = marker.getTitle().replace(" ", "_");
		intent.putExtra("judul", replace_string_first);
		startActivity(intent);

	}

}

5. Ketika marker muncul di peta dan kemudian di-tap, maka akan muncul keterangannya. Dan ketika keterangannya di-tap, maka akan muncul keterangan selengkapnya beserta gambarnya.

package dlmbg.pckg.petabesakih;

import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.HashMap;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;

public class DetailPeta extends Activity {

	ArrayList<HashMap<String, String>> dataMap = new ArrayList<HashMap<String, String>>();
	private ProgressDialog pDialog;
	JSONParser jParser = new JSONParser();
	String link_url = "";
	JSONArray str_json = null;
	Koneksi lo_Koneksi = new Koneksi();
	String isi = lo_Koneksi.isi_koneksi();

	TextView judul_set, keterangan_set;
	ImageView gambar_set;

	protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.detail_peta);

        keterangan_set = (TextView) findViewById(R.id.keterangan);
        judul_set = (TextView) findViewById(R.id.judul);
        gambar_set = (ImageView) findViewById(R.id.gambar);

        Bundle b = getIntent().getExtras();
		String judul = b.getString("judul");

    	link_url = isi + "detail.php?judul="+judul;
        new getListInfo().execute();
	}

	class getListInfo extends AsyncTask<String, String, String> {
		@Override
		protected void onPreExecute() {
			super.onPreExecute();
			pDialog = new ProgressDialog(DetailPeta.this);
			pDialog.setMessage("Menghubungkan ke server...");
			pDialog.setIndeterminate(false);
			pDialog.setCancelable(true);
			pDialog.show();
		}

		protected String doInBackground(String... args) {

			JSONObject json = jParser.AmbilJson(link_url);

			try {
				str_json = json.getJSONArray("info");

				for(int i = 0; i < str_json.length(); i++)
				{
					JSONObject ar = str_json.getJSONObject(i);
					HashMap<String, String> map = new HashMap<String, String>();

					map.put("judul", ar.getString("judul"));
					map.put("koordinat_lang",  ar.getString("koordinat_lang"));
					map.put("koordinat_lat",  ar.getString("koordinat_lat"));
					map.put("keterangan",  ar.getString("keterangan"));
					map.put("gambar",  ar.getString("gambar"));

					dataMap.add(map);
				}
			} catch (JSONException e) {
				e.printStackTrace();
			}

			return null;
		}

		protected void onPostExecute(String file_url) {
			pDialog.dismiss();
			runOnUiThread(new Runnable() {
                public void run() {

                    for (int i = 0; i < dataMap.size(); i++)
                    {
                    	HashMap<String, String> map = new HashMap<String, String>();
                    	map = dataMap.get(i);
                    	judul_set.setText(map.get("judul"));
                    	keterangan_set.setText(map.get("keterangan"));

                    	new DownloadImagesTask().execute(isi+"gambar/"+map.get("gambar"));
                    }
                }
            });
		}

	}
	public class DownloadImagesTask extends AsyncTask<String, Void, Bitmap> {

		@Override
		protected Bitmap doInBackground(String... urls) {
		    return download_Image(urls[0]);
		}

		@Override
		protected void onPostExecute(Bitmap result) {
			gambar_set.setImageBitmap(result);
		}

		private Bitmap download_Image(String url) {
		    Bitmap bm = null;
		    try {
		        URL aURL = new URL(url);
		        URLConnection conn = aURL.openConnection();
		        conn.connect();
		        InputStream is = conn.getInputStream();
		        BufferedInputStream bis = new BufferedInputStream(is);
		        bm = BitmapFactory.decodeStream(bis);
		        bis.close();
		        is.close();
		    } catch (IOException e) {
		        Log.e("Hub","Error getting the image from server : " + e.getMessage().toString());
		    }
		    return bm;
		}
	}
}

6. Selanjutnya kita buat 3 file layout xml untuk aplikasi peta sederhana ini :

peta_online.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment"/>

</LinearLayout>

detail_peta.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  	android:layout_width="match_parent"
  	android:layout_height="match_parent"
    android:orientation="vertical"
	android:padding="10dp" >

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
	<LinearLayout
	android:layout_height="wrap_content" android:layout_width="fill_parent"
	android:orientation="vertical" >

	<TextView android:text=""
	    android:layout_height="wrap_content"
	    android:id="@+id/judul"
        android:textSize="20sp"
   	 	android:textColor="#000"
		android:layout_width="fill_parent" >
	</TextView>

	<ImageView
		android:layout_height="200dp"
	    android:id="@+id/gambar"
		android:layout_width="fill_parent" >
	</ImageView>

	<TextView android:text=""
	    android:layout_height="wrap_content"
	    android:id="@+id/keterangan"
        android:textSize="14sp"
   	 	android:textColor="#000"
		android:layout_width="fill_parent" >
	</TextView>

</LinearLayout>
</ScrollView>

</LinearLayout>

custom_info_contents.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10dp"/>
    </LinearLayout>

</LinearLayout>

7. Sekarang kita beralih ke pembuatan database dan tabelnya, saya buat tabel yang sederhana saja.

CREATE TABLE `dlmbg_sitemap` (
  `nomor` int(5) NOT NULL auto_increment,
  `nama` varchar(100) NOT NULL,
  `jenis` varchar(100) NOT NULL,
  `deskripsi` tinytext NOT NULL,
  `lat` double NOT NULL,
  `lng` double NOT NULL,
  PRIMARY KEY  (`nomor`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

8. Sekarang kita memanfaatkan PHP untuk mengambil data dari database MySQL. Disini saya menggunakan koneksi PDO.

koneksi.php

<?php
try
{
    $DBH = new PDO("mysql:host=localhost;dbname=srikmcom_peta", "srikmcom_lumbung", "lumbung32");
    $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {
    echo "Terjadi error..";
    echo $e->getMessage();
}

?>

peta.php

<?php header("content-type: application/json");
	include("koneksi.php");

	$kueri = "SELECT judul, SUBSTRING(keterangan,1,200) as keterangan, koordinat_lang, koordinat_lat FROM dlmbg_sitemap";
	$STH = $DBH->prepare($kueri);
	$STH->execute();

	while($data = $STH->fetch())
	{
		$arr[] = $data;
	}

		echo '{"info":'. json_encode($arr).'}';
?>

9. Langsung coba ke dalam emulator atau debug langsung ke hape android, dan hasilnya seperti di bawah ini :

Hehe, lumayan panjang juga yaw. Menurut saya lebih mudah menampilkan koordinat di google maps V2 ini. Karena sudah banyak class-class yang disediakan dan siap diimplementasikan. OK deh, sekian dulu postingan saya kali ini. Semoga kita bisa menjadi lebih baik untuk ke depannya :).

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!