Sponsor Link

Tuesday, May 19, 2015

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

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.
1package dlmbg.pckg.petabesakih;
2
3public class Koneksi {
4
5    public String isi_koneksi()
6    {
7        //isi sendiri dengan alamat ip/domain
8        String isi = "http://192.168.1.12/";
9        return isi;
10    }
11
12}
3. Output data yang saya ambil, formatnya berupa JSON. Jadi disini saya menggunakan class JSONParser untuk melakukan parsing datanya.
1package dlmbg.pckg.petabesakih;
2
3import java.io.BufferedReader;
4import java.io.IOException;
5import java.io.InputStream;
6import java.io.InputStreamReader;
7import java.io.UnsupportedEncodingException;
8import java.util.List;
9
10import org.apache.http.HttpEntity;
11import org.apache.http.HttpResponse;
12import org.apache.http.NameValuePair;
13import org.apache.http.client.ClientProtocolException;
14import org.apache.http.client.entity.UrlEncodedFormEntity;
15import org.apache.http.client.methods.HttpGet;
16import org.apache.http.client.methods.HttpPost;
17import org.apache.http.client.utils.URLEncodedUtils;
18import org.apache.http.impl.client.DefaultHttpClient;
19import org.json.JSONException;
20import org.json.JSONObject;
21
22import android.util.Log;
23
24public class JSONParser {
25
26    static InputStream is = null;
27    static JSONObject jObj = null;
28    static String json = "";
29
30    public JSONParser() {
31
32    }
33
34    public JSONObject makeHttpRequest(String url, String method,
35            List params) {
36
37        try {
38
39            if(method == "POST"){
40                DefaultHttpClient httpClient = new DefaultHttpClient();
41                HttpPost httpPost = new HttpPost(url);
42                httpPost.setEntity(new UrlEncodedFormEntity(params));
43
44                HttpResponse httpResponse = httpClient.execute(httpPost);
45                HttpEntity httpEntity = httpResponse.getEntity();
46                is = httpEntity.getContent();
47
48            }else if(method == "GET"){
49                DefaultHttpClient httpClient = new DefaultHttpClient();
50                String paramString = URLEncodedUtils.format(params, "utf-8");
51                url += "?" + paramString;
52                HttpGet httpGet = new HttpGet(url);
53
54                HttpResponse httpResponse = httpClient.execute(httpGet);
55                HttpEntity httpEntity = httpResponse.getEntity();
56                is = httpEntity.getContent();
57            }
58
59        } catch (UnsupportedEncodingException e) {
60            e.printStackTrace();
61        } catch (ClientProtocolException e) {
62            e.printStackTrace();
63        } catch (IOException e) {
64            e.printStackTrace();
65        }
66
67        try {
68            BufferedReader reader = new BufferedReader(new InputStreamReader(
69                    is, "iso-8859-1"), 8);
70            StringBuilder sb = new StringBuilder();
71            String line = null;
72            while ((line = reader.readLine()) != null) {
73                sb.append(line + "\n");
74            }
75            is.close();
76            json = sb.toString();
77        } catch (Exception e) {
78            Log.e("Buffer Error", "Error converting result " + e.toString());
79        }
80
81        try {
82            jObj = new JSONObject(json);
83        } catch (JSONException e) {
84            Log.e("JSON Parser", "Error parsing data " + e.toString());
85        }
86
87        return jObj;
88    }
89
90    public JSONObject AmbilJson(String url) {
91
92        try {
93            DefaultHttpClient httpClient = new DefaultHttpClient();
94            HttpPost httpPost = new HttpPost(url);
95
96            HttpResponse httpResponse = httpClient.execute(httpPost);
97            HttpEntity httpEntity = httpResponse.getEntity();
98            is = httpEntity.getContent();
99
100        } catch (UnsupportedEncodingException e) {
101            e.printStackTrace();
102        } catch (ClientProtocolException e) {
103            e.printStackTrace();
104        } catch (IOException e) {
105            e.printStackTrace();
106        }
107
108        try {
109            BufferedReader reader = new BufferedReader(new InputStreamReader(
110                    is, "iso-8859-1"), 8);
111            StringBuilder sb = new StringBuilder();
112            String line = null;
113            while ((line = reader.readLine()) != null) {
114                sb.append(line + "\n");
115            }
116            is.close();
117            json = sb.toString();
118        } catch (Exception e) {
119            Log.e("Buffer Error", "Error converting result " + e.toString());
120        }
121
122        try {
123            jObj = new JSONObject(json);
124        } catch (JSONException e) {
125            Log.e("JSON Parser", "Error parsing data " + e.toString());
126        }
127
128        return jObj;
129
130    }
131}
4. Selanjutnya buka file MainActivity.java. Class MainActivity mengimplementasikan abstract class OnMapLongClickListener. Copy kode di bawah ini, lumayan banyak :p
1package dlmbg.pckg.petabesakih;
2
3import java.util.ArrayList;
4import java.util.HashMap;
5
6import org.json.JSONArray;
7import org.json.JSONException;
8import org.json.JSONObject;
9
10import android.app.Activity;
11import android.app.FragmentManager;
12import android.app.ProgressDialog;
13import android.content.Intent;
14import android.os.AsyncTask;
15import android.os.Bundle;
16import android.view.View;
17import android.widget.TextView;
18
19import com.google.android.gms.common.ConnectionResult;
20import com.google.android.gms.common.GooglePlayServicesUtil;
21import com.google.android.gms.maps.CameraUpdateFactory;
22import com.google.android.gms.maps.GoogleMap;
23import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
24import com.google.android.gms.maps.GoogleMap.OnInfoWindowClickListener;
25import com.google.android.gms.maps.GoogleMap.OnMapLongClickListener;
26import com.google.android.gms.maps.MapFragment;
27import com.google.android.gms.maps.model.LatLng;
28import com.google.android.gms.maps.model.Marker;
29import com.google.android.gms.maps.model.MarkerOptions;
30
31public class MainActivity extends Activity implements OnMapLongClickListener, OnInfoWindowClickListener{
32
33    static final LatLng AWAL = new LatLng(3.584695,98.675079);
34    ArrayList> dataMap = new ArrayList>();
35    private ProgressDialog pDialog;
36    JSONParser jParser = new JSONParser();
37    Koneksi lo_Koneksi = new Koneksi();
38    String isi = lo_Koneksi.isi_koneksi();
39    String link_url = isi + "peta.php";
40    JSONArray str_json = null;
41
42    class MyInfoWindowAdapter implements InfoWindowAdapter{
43
44        private final View myContentsView;
45
46        MyInfoWindowAdapter(){
47            myContentsView = getLayoutInflater().inflate(R.layout.custom_info_contents, null);
48        }
49
50        @Override
51        public View getInfoContents(Marker marker) {
52            TextView tvTitle = ((TextView)myContentsView.findViewById(R.id.title));
53            tvTitle.setText(marker.getTitle());
54            TextView tvSnippet = ((TextView)myContentsView.findViewById(R.id.snippet));
55            tvSnippet.setText(marker.getSnippet());
56
57            return myContentsView;
58        }
59
60        @Override
61        public View getInfoWindow(Marker marker) {
62            return null;
63        }
64
65    }
66
67    class getListInfo extends AsyncTask {
68        @Override
69        protected void onPreExecute() {
70            super.onPreExecute();
71            pDialog = new ProgressDialog(MainActivity.this);
72            pDialog.setMessage("Menghubungkan ke server...");
73            pDialog.setIndeterminate(false);
74            pDialog.setCancelable(true);
75            pDialog.show();
76        }
77
78        protected String doInBackground(String... args) {
79
80            JSONObject json = jParser.AmbilJson(link_url);
81
82            try {
83                str_json = json.getJSONArray("info");
84
85                for(int i = 0; i < str_json.length(); i++)
86                {
87                    JSONObject ar = str_json.getJSONObject(i);
88                    HashMap map = new HashMap();
89
90                    map.put("judul", ar.getString("judul"));
91                    map.put("koordinat_lang",  ar.getString("koordinat_lang"));
92                    map.put("koordinat_lat",  ar.getString("koordinat_lat"));
93                    map.put("keterangan",  ar.getString("keterangan"));
94
95                    dataMap.add(map);
96                }
97            } catch (JSONException e) {
98                e.printStackTrace();
99            }
100
101            return null;
102        }
103
104        protected void onPostExecute(String file_url) {
105            pDialog.dismiss();
106            runOnUiThread(new Runnable() {
107                public void run() {
108
109                    for (int i = 0; i < dataMap.size(); i++)
110                    {
111                        HashMap map = new HashMap();
112                        map = dataMap.get(i);
113                        LatLng POSISI = new LatLng(Double.parseDouble(map.get("koordinat_lat")),Double.parseDouble(map.get("koordinat_lang")));
114
115                        myMap.addMarker(new MarkerOptions()
116                        .position(POSISI)
117                        .title(map.get("judul"))
118                        .snippet(map.get("keterangan")));
119
120                    }
121                }
122            });
123        }
124
125    }
126
127    final int RQS_GooglePlayServices = 1;
128    private GoogleMap myMap;
129    TextView tvLocInfo;
130
131    @Override
132    protected void onCreate(Bundle savedInstanceState) {
133        super.onCreate(savedInstanceState);
134        setContentView(R.layout.peta_online);
135
136        FragmentManager myFragmentManager = getFragmentManager();
137        MapFragment myMapFragment
138            = (MapFragment)myFragmentManager.findFragmentById(R.id.map);
139        myMap = myMapFragment.getMap();
140
141        myMap.setMyLocationEnabled(true);
142
143        myMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
144
145        myMap.getUiSettings().setZoomControlsEnabled(true);
146        myMap.getUiSettings().setCompassEnabled(true);
147        myMap.getUiSettings().setMyLocationButtonEnabled(true);
148
149        myMap.getUiSettings().setAllGesturesEnabled(true);
150
151        myMap.setTrafficEnabled(true);
152
153        myMap.setOnMapLongClickListener(this);
154        myMap.setInfoWindowAdapter(new MyInfoWindowAdapter());
155        myMap.setOnInfoWindowClickListener(this);
156
157        myMap.moveCamera(CameraUpdateFactory.newLatLngZoom(AWAL, 15));
158
159        myMap.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
160
161        new getListInfo().execute();
162
163    }
164
165    @Override
166    protected void onResume() {
167        super.onResume();
168
169        int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getApplicationContext());
170
171        if (resultCode != ConnectionResult.SUCCESS)
172        {
173            GooglePlayServicesUtil.getErrorDialog(resultCode, this, RQS_GooglePlayServices);
174        }
175    }
176
177    @Override
178    public void onMapLongClick(LatLng point) {
179
180    }
181
182    @Override
183    public void onInfoWindowClick(Marker marker) {
184        Intent intent = new Intent(this, DetailPeta.class);
185
186        String replace_string_first = marker.getTitle().replace(" ", "_");
187        intent.putExtra("judul", replace_string_first);
188        startActivity(intent);
189
190    }
191
192}
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.
1package dlmbg.pckg.petabesakih;
2
3import java.io.BufferedInputStream;
4import java.io.IOException;
5import java.io.InputStream;
6import java.net.URL;
7import java.net.URLConnection;
8import java.util.ArrayList;
9import java.util.HashMap;
10
11import org.json.JSONArray;
12import org.json.JSONException;
13import org.json.JSONObject;
14
15import android.app.Activity;
16import android.app.ProgressDialog;
17import android.graphics.Bitmap;
18import android.graphics.BitmapFactory;
19import android.os.AsyncTask;
20import android.os.Bundle;
21import android.util.Log;
22import android.widget.ImageView;
23import android.widget.TextView;
24
25public class DetailPeta extends Activity {
26
27    ArrayList> dataMap = new ArrayList>();
28    private ProgressDialog pDialog;
29    JSONParser jParser = new JSONParser();
30    String link_url = "";
31    JSONArray str_json = null;
32    Koneksi lo_Koneksi = new Koneksi();
33    String isi = lo_Koneksi.isi_koneksi();
34
35    TextView judul_set, keterangan_set;
36    ImageView gambar_set;
37
38    protected void onCreate(Bundle savedInstanceState) {
39        super.onCreate(savedInstanceState);
40        setContentView(R.layout.detail_peta);
41
42        keterangan_set = (TextView) findViewById(R.id.keterangan);
43        judul_set = (TextView) findViewById(R.id.judul);
44        gambar_set = (ImageView) findViewById(R.id.gambar);
45
46        Bundle b = getIntent().getExtras();
47        String judul = b.getString("judul");
48
49        link_url = isi + "detail.php?judul="+judul;
50        new getListInfo().execute();
51    }
52
53    class getListInfo extends AsyncTask {
54        @Override
55        protected void onPreExecute() {
56            super.onPreExecute();
57            pDialog = new ProgressDialog(DetailPeta.this);
58            pDialog.setMessage("Menghubungkan ke server...");
59            pDialog.setIndeterminate(false);
60            pDialog.setCancelable(true);
61            pDialog.show();
62        }
63
64        protected String doInBackground(String... args) {
65
66            JSONObject json = jParser.AmbilJson(link_url);
67
68            try {
69                str_json = json.getJSONArray("info");
70
71                for(int i = 0; i < str_json.length(); i++)
72                {
73                    JSONObject ar = str_json.getJSONObject(i);
74                    HashMap map = new HashMap();
75
76                    map.put("judul", ar.getString("judul"));
77                    map.put("koordinat_lang",  ar.getString("koordinat_lang"));
78                    map.put("koordinat_lat",  ar.getString("koordinat_lat"));
79                    map.put("keterangan",  ar.getString("keterangan"));
80                    map.put("gambar",  ar.getString("gambar"));
81
82                    dataMap.add(map);
83                }
84            } catch (JSONException e) {
85                e.printStackTrace();
86            }
87
88            return null;
89        }
90
91        protected void onPostExecute(String file_url) {
92            pDialog.dismiss();
93            runOnUiThread(new Runnable() {
94                public void run() {
95
96                    for (int i = 0; i < dataMap.size(); i++)
97                    {
98                        HashMap map = new HashMap();
99                        map = dataMap.get(i);
100                        judul_set.setText(map.get("judul"));
101                        keterangan_set.setText(map.get("keterangan"));
102
103                        new DownloadImagesTask().execute(isi+"gambar/"+map.get("gambar"));
104                    }
105                }
106            });
107        }
108
109    }
110    public class DownloadImagesTask extends AsyncTask {
111
112        @Override
113        protected Bitmap doInBackground(String... urls) {
114            return download_Image(urls[0]);
115        }
116
117        @Override
118        protected void onPostExecute(Bitmap result) {
119            gambar_set.setImageBitmap(result);
120        }
121
122        private Bitmap download_Image(String url) {
123            Bitmap bm = null;
124            try {
125                URL aURL = new URL(url);
126                URLConnection conn = aURL.openConnection();
127                conn.connect();
128                InputStream is = conn.getInputStream();
129                BufferedInputStream bis = new BufferedInputStream(is);
130                bm = BitmapFactory.decodeStream(bis);
131                bis.close();
132                is.close();
133            } catch (IOException e) {
134                Log.e("Hub","Error getting the image from server : " + e.getMessage().toString());
135            }
136            return bm;
137        }
138    }
139}
6. Selanjutnya kita buat 3 file layout xml untuk aplikasi peta sederhana ini :
peta_online.xml
1
2http://schemas.android.com/apk/res/android
"
3  android:layout_width="match_parent"
4  android:layout_height="match_parent"
5  android:orientation="vertical">
6
7    
8        android:id="@+id/map"
9        android:layout_width="match_parent"
10        android:layout_height="match_parent"
11        class="com.google.android.gms.maps.MapFragment"/>
12
13
detail_peta.xml
1
2http://schemas.android.com/apk/res/android
"
3    android:layout_width="match_parent"
4    android:layout_height="match_parent"
5    android:orientation="vertical"
6    android:padding="10dp" >
7
8
9    android:layout_width="fill_parent"
10    android:layout_height="wrap_content"
11>
12    
13    android:layout_height="wrap_content" android:layout_width="fill_parent"
14    android:orientation="vertical" >
15
16    
17        android:layout_height="wrap_content"
18        android:id="@+id/judul"
19        android:textSize="20sp"
20        android:textColor="#000"
21        android:layout_width="fill_parent" >
22    
23
24    
25        android:layout_height="200dp"
26        android:id="@+id/gambar"
27        android:layout_width="fill_parent" >
28    
29
30    
31        android:layout_height="wrap_content"
32        android:id="@+id/keterangan"
33        android:textSize="14sp"
34        android:textColor="#000"
35        android:layout_width="fill_parent" >
36    
37
38
39
40
41
custom_info_contents.xml
1
2http://schemas.android.com/apk/res/android
"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:orientation="horizontal">
6
7    
8        android:layout_width="wrap_content"
9        android:layout_height="wrap_content"
10        android:orientation="vertical">
11        
12            android:id="@+id/title"
13            android:layout_width="wrap_content"
14            android:layout_height="wrap_content"
15            android:textSize="12dp"
16            android:textStyle="bold"/>
17        
18            android:id="@+id/snippet"
19            android:layout_width="wrap_content"
20            android:layout_height="wrap_content"
21            android:textSize="10dp"/>
22    
23
24
7. Sekarang kita beralih ke pembuatan database dan tabelnya, saya buat tabel yang sederhana saja.
1CREATE TABLE `dlmbg_sitemap` (
2  `nomor` int(5) NOT NULL auto_increment,
3  `nama` varchar(100) NOT NULL,
4  `jenis` varchar(100) NOT NULL,
5  `deskripsi` tinytext NOT NULL,
6  `lat` double NOT NULL,
7  `lng` double NOT NULL,
8  PRIMARY KEY  (`nomor`)
9) 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
1
2try
3{
4    $DBH = new PDO("mysql:host=localhost;dbname=srikmcom_peta", "srikmcom_lumbung", "lumbung32");
5    $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
6
7} catch (PDOException $e) {
8    echo "Terjadi error..";
9    echo $e->getMessage();
10}
11
12?>
peta.php
1
2    include("koneksi.php");
3
4    $kueri = "SELECT judul, SUBSTRING(keterangan,1,200) as keterangan, koordinat_lang, koordinat_lat FROM dlmbg_sitemap";
5    $STH = $DBH->prepare($kueri);
6    $STH->execute();
7
8    while($data = $STH->fetch())
9    {
10        $arr[] = $data;
11    }
12
13        echo '{"info":'. json_encode($arr).'}';
14?>
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.
Diposkan oleh di No comments:
Subscribe to: Posts (Atom)