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

android osHaahhh, 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.

peta-google-map-android-1

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 :

shot_000038shot_000040

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….!!!!

29 comments

  1. yeyep sudrajat Reply

    “…….dan belum punya pacar baru, hahaha…”
    yang penting tetap kobarkan semangat dan daya juang untuk mendapatkan sang pujaan hati
    biar hidup tak terasa hampa Bli…he3….

  2. ekka Reply

    bang, tau Raspberry PI?
    kira-kira dengan RPi itu bisa dikembangkan ide sistem apa ya?

  3. Jacks Reply

    mas kenapa detail activity nya kosong ya?

    coba di posting isi detail.php nya beserta dengan keluaran dari detail php nya

  4. Jacks Reply

    Mas mau nanya juga nih, Kalo JSON itu ga bisa menampilkan data TEXT atau varchar lebih dari 500 karakter?

  5. Jacks Reply

    bli itu kok gambar nya gak muncul ya, setelah saya coba ternyata database gambarnya tidak ada, trus bagaimana cara nampilkan gambar pada JSON?

  6. Siyadi Reply

    Bli.
    kalo kirim photo disertai titik koordinat
    kira-kira pembuatan databasenya kayak gmn?

  7. windy Reply

    mas, klo daftar peta mau dibikin dilistview gito, jadi tempat2 nya dilist view klo dipilih salah satu tempat maka dia bakalan munculin berdsarkan peta yang dipilih dilistview tadi mas. terima kasih mas.

  8. irwan Reply

    gan, kalo aplikasi gps di android yang menampilkan peta sekalian ada keterangan titik koordinatnya, kira2 apa? mohon pencerahan . . .

    • Hanix Reply

      ea maz…ngitung jarak posisi kita ma posisi tempat tujuan pake’ google maps v2 n android kitkat…mohon bantuannya mas…^_^

  9. Rofi Reply

    gan… bikin tutorial buat nentuin kompas arah kiblat donk… lagi butuh nech…

  10. Uki Reply

    dbname=srikmcom_peta”, “srikmcom_lumbung”, “lumbung32”);
    ni ambil data dari database yang mana? mohon penjelasannya..

  11. evy Reply

    kalo mau menampilkan polyline yang ada di database gmn caranya? polyline yang disimpen dalam bentuk encode. terimakasi sebelumnya

  12. kipli Reply

    brooooo file tambah, edit, and hapus ga ad broooo…..
    mohon bantuannya

  13. Dimitrios Reply

    wah panjang banget codingannya. saya pelajarin dulu deh

  14. rochim Reply

    mas lumbung , kalau menampilkan peta berdasarkan id gimana iya , menampilkan peta satu persatu dari database ?

    • Agustin Reply

      Hallo mas rochim, sepertinya problem kita sama, Mas. Anda menggunakan database apa? Format sqlite atau json atau yg lain mas? Trm ksh

  15. Dimas Reply

    database yang buat map itu mana ? ko ada judul, keterangan, dan gambar ?

Leave a Reply

Your email address will not be published. Required fields are marked *