Tutorial Android : Mengakses Data Dari

Database MySQL di ListView Dengan JSON

Atmosfer kampung halaman sedikit menghilangkan pikiran

saya yang sumpek beberapa hari belakangan ini. Permasalahannya lumayan klasik dan seolaholah ingin menjatuhkan saya. Dan yang bikin jengkel, ketika ada yang enak malah diembat
sendiri sama segelintir orang di kampus. Padahal dalam pelaksanaannya memakai asset yang
dulu pernah saya buat. Mungkin begini rasanya ditendang dari tempat yang dulu kita bangun.
Mirip-mirip dikitlah sama kisah hidupnya mendiang om steve jobs (mudah-mudahan saja saya
bisa sukses kayak beliau :ngakaks:). Pas kebetulan di kampus sedang libur, jadilah saya pulang
ke bali saja. Lumayanlah kalau sudah emosi seperti ini, semangat saya jadi bangkit ke 100% lagi.
Dan tadi siang, saya kembali lagi berkutat dengan eclipse serta emulator android untuk mencobacoba membuat aplikasi sederhana untuk mengakses database online yang terdapat di web server
dengan memanfaatkan JSON. Inilah contoh penggunaan metode three tier dalam aplikasi
android, cocok tuh dipakai tema skripsi untuk yang belum punya bayangan untuk skripsinya
(#haha).
Dalam three tier, untuk mengakses database di web server diperlukan sebuah file php yang akan
menjembatani aplikasi android dengan database mysql yang berada di server, dan gak
ketinggalan juga koneksi internet (yang ini kalau sudah online di internet). Hasil query dari
database, disusun sesuai dengan format JSON di dalam file php. Kemudian file php yang
menampung data tersebut dipanggil dari aplikasi android dan kemudian di-parsing untuk
selanjutnya ditampilkan ke dalam ListView. Kita langsung aja ke cara pembuatannya, cekidot.
1. Buat sebuah android project baru, detailnya seperti gambar di bawah ini :

2. Kita membutuhkan sebuah class tersendiri untuk melakukan parsing data JSON. Disini kita
akan memanfaatkan module json, Apache dan IO milik java untuk berkomunikasi dengan web
server yang pada postingan ini saya menggunakan web server apache.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

public class JSONParser {

static InputStream is = null;
static JSONObject jObj = null;
static String json = "";
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();

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

} 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);
}
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;
}
}

3. Buka file AksesServerActivity.java, dan ketikkan kode di bawah ini. File activity ini akan
memanggil class JSONParser di atas, kemudian menampung hasil parsing data ke dalam sebuah
Adapter. Hasilnya ditampilkan ke dalam sebuah ListView. Kita gunakan database yang ada di
komputer lokal alias localhost dan untuk testing bisa menggunakan browser bawaan emulator
android dengan mengetikkan alamat http://10.0.2.2.
1 public class AksesServerActivity extends ListActivity {
2
private static String link_url = "http://10.0.2.2/json-parsing/artikel3
json.php";
4
5
private static final String AR_ID = "id";
6
private static final String AR_JUDUL = "judul";
7
private static final String AR_CONTENT = "content";

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

JSONArray artikel = null;

ArrayList<HashMap<String, String>> daftar_artikel = new
ArrayList<HashMap<String, String>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
JSONParser jParser = new JSONParser();
JSONObject json = jParser.AmbilJson(link_url);
try {
artikel = json.getJSONArray("artikel");
for(int i = 0; i < artikel.length(); i++){
JSONObject ar = artikel.getJSONObject(i);

String id = ar.getString(AR_ID);
String judul = ar.getString(AR_JUDUL);
String content =
29
ar.getString(AR_CONTENT).substring(0,100)+"...(baca selengkapnya)";
30
HashMap<String, String> map = new HashMap<String,
31
String>();
32
33
map.put(AR_ID, id);
34
map.put(AR_JUDUL, judul);
35
map.put(AR_CONTENT, content);
36
37
daftar_artikel.add(map);
38
}
39
} catch (JSONException e) {
40
e.printStackTrace();
41
}
42
this.adapter_listview();
43
}
44
45
public void adapter_listview() {
46
47
ListAdapter adapter = new SimpleAdapter(this, daftar_artikel,
48
R.layout.list_item,
49
new String[] { AR_JUDUL, AR_CONTENT, AR_ID}, new int[] {
50
R.id.judul, R.id.content, R.id.kode});
51
52
setListAdapter(adapter);

53
54
55
56

ListView lv = getListView();
lv.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View view,int
57
position, long id) {
String kode = ((TextView)
58
view.findViewById(R.id.kode)).getText().toString();
59
Intent in = new Intent(AksesServerActivity.this,
60
DetailAksesServer.class);
61
in.putExtra(AR_ID, kode);
62
startActivity(in);
63
64
}
65
});
66
}
67
}

4. Ketika salah satu item di tap/sentuh (lihat di bagian OnItemClickListener), maka akan muncul
detail beritanya pada activity baru. Buat sebuah activity baru dengan nama
DetailAksesServer.java. ID berita dikirimkan ke activity kedua melalui intent, kemudian
digunakan sebagai parameter GET di file php yang bertugas untuk menampilkan hasil query
berita yang sesuai dipilih oleh user.
1 public class DetailAksesServer extends Activity {
2
3
private static final String AR_ID = "id";
4
JSONArray artikel = null;
5
@Override
6
public void onCreate(Bundle savedInstanceState) {
7
super.onCreate(savedInstanceState);
8
setContentView(R.layout.single_list_item);
9
10
Intent in = getIntent();
11
String kode = in.getStringExtra(AR_ID);
String link_url = "http://10.0.2.2/json-parsing/detail-artikel.php?
12
kode="+kode;
13
14
JSONParser jParser = new JSONParser();
15
16
JSONObject json = jParser.AmbilJson(link_url);
17
18
try {
19
artikel = json.getJSONArray("artikel");
20
21
for(int i = 0; i < artikel.length(); i++){
22
JSONObject ar = artikel.getJSONObject(i);

23
24
25
26
27
28

TextView judul = (TextView) findViewById(R.id.judul);

TextView detail = (TextView) findViewById(R.id.detail);
TextView isi = (TextView) findViewById(R.id.isi);

String judul_d = ar.getString("judul");

String detail_d = ar.getString("tanggal")+" 29
"+ar.getString("waktu")+" - "+ar.getString("penulis");
30
String isi_d = ar.getString("content");
31
32
judul.setText(judul_d);
33
detail.setText(detail_d);
34
isi.setText(isi_d);
35
36
}
37
} catch (JSONException e) {
38
e.printStackTrace();
39
}
40
41
}
42
}

5. Sekarang kita lanjut ke pembuatan business process-nya alias file php-nya. Query dan syntax
php-nya cukup sederhana, hanya saja kita harus teliti ketika membuat format JSON-nya. Kalau
salah atau kurang tanda petik satu saja, maka akan gagal di-parsing oleh class JSONParser di
atas. Berhubung hosting blog saya agak error (atau saya-nya yang bego gak bisa setting :p) gak
bisa nyisipkan query mysql, maka syntaxnya saya tampilkan ke dalam gambar. Tenang aja kok,
file android dan php-nya nanti bisa di-download di akhir postingan ini :).
artikel-json.php

detail-artikel.php

6. Kita juga membutuhkan file layout untuk menampilkan data hasil parsing dari activity di atas.
Disini saya membuat 3 layout yang berbeda yaitu main.xml, list_item.xml, dan
single_list_item.xml.

main.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
android:layout_width="fill_parent"
4
android:layout_height="fill_parent"
5
android:orientation="vertical">
6
7
<ListView
8
android:id="@android:id/list"
9
android:layout_width="fill_parent"
10
android:layout_height="wrap_content" />
11
12
</LinearLayout>

list_item.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
android:layout_width="fill_parent"
4
android:background="#D7DEF0"
5
android:layout_height="wrap_content"
6
android:orientation="horizontal">
7
<LinearLayout
8
xmlns:android="http://schemas.android.com/apk/res/android"
9
android:layout_width="fill_parent"
10
android:layout_height="wrap_content"
11
android:layout_margin="10dp"
12
android:orientation="vertical">
13
<!-- Name Label -->
14
<TextView
15
android:id="@+id/judul"
16
android:layout_width="fill_parent"
17
android:layout_height="wrap_content"
18
android:textColor="#333333"
19
android:textSize="16sp"
20
android:textStyle="bold"
21
android:paddingBottom="2dip" />
22
<TextView
23
android:id="@+id/content"
24
android:layout_width="fill_parent"
25
android:layout_height="wrap_content"
26
android:textColor="#666666"
27
android:textSize="11sp"
28
android:paddingBottom="2dip">
29
</TextView>
30
<TextView
31
android:id="@+id/kode"
32
android:layout_width="fill_parent"

33
34
35
36
37
38
39

android:layout_height="wrap_content"
android:textColor="#D7DEF0"
android:textSize="1sp">
</TextView>
</LinearLayout>
</LinearLayout>

single_list_item.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3
xmlns:android="http://schemas.android.com/apk/res/android"
4
android:orientation="vertical"
5
android:layout_width="fill_parent"
6
android:background="#D7DEF0"
7
android:padding="10dp"
8
android:layout_height="wrap_content">
9
10
<TextView android:id="@+id/judul"
11
android:layout_width="wrap_content"
12
android:layout_height="wrap_content"
13
android:textSize="20dip"
14
android:textStyle="bold"
15
android:paddingTop="10dip"
16
android:paddingBottom="5dip"
17
android:textColor="#333333"/>
18
<TextView android:id="@+id/detail"
19
android:layout_width="wrap_content"
20
android:textStyle="bold"
21
android:textSize="12dip"
22
android:paddingTop="5dip"
23
android:paddingBottom="5dip"
24
android:layout_height="wrap_content"
25
android:textColor="#999999"/>
26
<ScrollView
27
android:layout_width="fill_parent"
28
android:layout_height="fill_parent">
29
30
<TextView android:id="@+id/isi"
31
android:layout_width="wrap_content"
32
android:textSize="14dip"
33
android:layout_height="wrap_content"
34
android:textColor="#333333"/>
35
36
</ScrollView>
37
</LinearLayout>

7. Dan yang terakhir jangan lupa untuk mendaftarkan activity yang kedua di dalam file
AndroidManifest.xml. Kalau gak terdaftar, maka aplikasi akan force closed ketika kita memilih
salah satu item di ListView.
1 <?xml version="1.0" encoding="utf-8"?>
2 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3
package="dlmbg.pckg.akses.server"
4
android:versionCode="1"
5
android:versionName="1.0" >
6
7
<uses-sdk android:minSdkVersion="10" />
8
9
<application
10
android:icon="@drawable/ic_launcher"
11
android:label="@string/app_name" >
12
<activity
13
android:name=".AksesServerActivity"
14
android:label="Akses Database Server MySQL" >
15
<intent-filter>
16
<action android:name="android.intent.action.MAIN" />
17
<category android:name="android.intent.category.LAUNCHER"
18
/>
19
</intent-filter>
20
</activity>
21
<activity
22
android:label="Detail Artikel"
23
android:name=".DetailAksesServer" >
24
</activity>
25
</application>
26
27
<uses-permission android:name="android.permission.INTERNET" />
28 </manifest>

8. Jalankan via emulator dan hasilnya seperti di bawah ini :

Sekarang kita sudah mempunyai dasar untuk membuat aplikasi database entah itu yang
menggunakan SQLite (native app) maupun MySQL. Banyak aplikasi database yang bisa
dikembangkan, bisa juga dikombinasikan dengan Google Map API untuk membuat aplikasi web
GIS berbasis android. Wah,,nambah lagi tuh judul skripsi untuk yang masih bingung mau
ngambil judul apaan :ngakaks:. OK deh, sekian dulu postingan saya kali ini. Semoga bermanfaat
untuk kita ke depannya.