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 seolah-olah 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 mencoba-coba 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.
view source
print?
1 public class JSONParser {
2
3
4

static InputStream is = null;

static JSONObject jObj = null;

static String json = "";

6
7

public JSONObject AmbilJson(String url) {

8
9
10
11

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

12
13
14

HttpResponse httpResponse = httpClient.execute(httpPost);

HttpEntity httpEntity = httpResponse.getEntity();

15

is = httpEntity.getContent();

16
17
18

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

19
20

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

21
22

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

23

24
25

try {
BufferedReader reader = new BufferedReader(new
26
InputStreamReader(is, "iso-8859-1"), 8);
27
28

StringBuilder sb = new StringBuilder();

String line = null;

29
30

while ((line = reader.readLine()) != null) {

sb.append(line);

31
32

}
is.close();

33
34

json = sb.toString();
} catch (Exception e) {

Log.e("Buffer Error", "Error converting result " +

e.toString());
36
}
35

37
38

try {

39
40

jObj = new JSONObject(json);

} catch (JSONException e) {

41
42

Log.e("JSON Parser", "Error parsing data " + e.toString());

}

43
44

return jObj;

45
46

47 }

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.
view source
print?
1 public class AksesServerActivity extends ListActivity {
2
3

private static String link_url = "http://10.0.2.2/json-parsing/artikeljson.php";

4
5
6

private static final String AR_ID = "id";

private static final String AR_JUDUL = "judul";

private static final String AR_CONTENT = "content";

8
9
10

JSONArray artikel = null;

ArrayList<HashMap<String, String>> daftar_artikel = new
ArrayList<HashMap<String, String>>();

11
12

@Override

13
14

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

15

setContentView(R.layout.main);

16
17

JSONParser jParser = new JSONParser();

18
19

JSONObject json = jParser.AmbilJson(link_url);

20
21
22

try {
artikel = json.getJSONArray("artikel");

23
24

for(int i = 0; i < artikel.length(); i++){

25

JSONObject ar = artikel.getJSONObject(i);

26
27
28
29

String id = ar.getString(AR_ID);
String judul = ar.getString(AR_JUDUL);
String content =
ar.getString(AR_CONTENT).substring(0,100)+"...(baca selengkapnya)";

30
31

HashMap<String, String> map = new HashMap<String,

String>();

32
33
34

map.put(AR_ID, id);
map.put(AR_JUDUL, judul);

35

map.put(AR_CONTENT, content);

36
37
38

daftar_artikel.add(map);
}

39
40

} catch (JSONException e) {
e.printStackTrace();

41
42

}
this.adapter_listview();

43

44
45

public void adapter_listview() {

46
47
48

ListAdapter adapter = new SimpleAdapter(this, daftar_artikel,

R.layout.list_item,

49
50

new String[] { AR_JUDUL, AR_CONTENT, AR_ID}, new int[] {

R.id.judul, R.id.content, R.id.kode});

51
52

setListAdapter(adapter);

53
54

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

55
56

@Override

public void onItemClick(AdapterView<?> parent, View view,int

position, long id) {
String kode = ((TextView)
58
view.findViewById(R.id.kode)).getText().toString();
57

59
60

Intent in = new Intent(AksesServerActivity.this,

DetailAksesServer.class);

61
62

in.putExtra(AR_ID, kode);
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.
view source
print?
1 public class DetailAksesServer

extends Activity {

2
3
4

private static final String AR_ID = "id";

JSONArray artikel = null;

5
6

@Override
public void onCreate(Bundle savedInstanceState) {

7
8

super.onCreate(savedInstanceState);
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/detail12
artikel.php?kode="+kode;
13
14

JSONParser jParser = new JSONParser();

15
16

JSONObject json = jParser.AmbilJson(link_url);

17
18
19

try {
artikel = json.getJSONArray("artikel");

20
21
22

for(int i = 0; i < artikel.length(); i++){

JSONObject ar = artikel.getJSONObject(i);

23
24

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

25
26

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

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

27
28

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

String detail_d = ar.getString("tanggal")+" "+ar.getString("waktu")+" - "+ar.getString("penulis");

30
String isi_d = ar.getString("content");
29

31
32

judul.setText(judul_d);

33
34

detail.setText(detail_d);
isi.setText(isi_d);

35
36

37
38

} catch (JSONException e) {
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
view source
print?
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
4

android:layout_width="fill_parent"
android:layout_height="fill_parent"

android:orientation="vertical">

6
7
8
9
10

<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

11
12 </LinearLayout>

list_item.xml
view source

print?
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
4

android:layout_width="fill_parent"
android:background="#D7DEF0"

5
6

android:layout_height="wrap_content"
android:orientation="horizontal">

7
8

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"

9
10

android:layout_width="fill_parent"
android:layout_height="wrap_content"

11
12

android:layout_margin="10dp"
android:orientation="vertical">

13
14

<!-- Name Label -->

<TextView

15
16

android:id="@+id/judul"
android:layout_width="fill_parent"

17
18

android:layout_height="wrap_content"
android:textColor="#333333"

19
20

android:textSize="16sp"
android:textStyle="bold"

21
22

android:paddingBottom="2dip" />
<TextView

23
24

android:id="@+id/content"
android:layout_width="fill_parent"

25
26

android:layout_height="wrap_content"
android:textColor="#666666"

27
28

android:textSize="11sp"
android:paddingBottom="2dip">

29
30

</TextView>
<TextView

31
32

android:id="@+id/kode"
android:layout_width="fill_parent"

33
34

android:layout_height="wrap_content"
android:textColor="#D7DEF0"

35
36
37

android:textSize="1sp">
</TextView>
</LinearLayout>

38
39 </LinearLayout>

single_list_item.xml

view source
print?
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3
4

xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"

5
6

android:layout_width="fill_parent"
android:background="#D7DEF0"

7
8

android:padding="10dp"
android:layout_height="wrap_content">

9
10

<TextView android:id="@+id/judul"

11
12

android:layout_width="wrap_content"
android:layout_height="wrap_content"

13
14

android:textSize="20dip"
android:textStyle="bold"

15
16

android:paddingTop="10dip"
android:paddingBottom="5dip"

17
18

android:textColor="#333333"/>
<TextView android:id="@+id/detail"

19
20

android:layout_width="wrap_content"
android:textStyle="bold"

21
22

android:textSize="12dip"
android:paddingTop="5dip"

23
24

android:paddingBottom="5dip"
android:layout_height="wrap_content"

25
android:textColor="#999999"/>
26 <ScrollView
27
28

android:layout_width="fill_parent"
android:layout_height="fill_parent">

29
30

<TextView android:id="@+id/isi"

31
32

android:layout_width="wrap_content"
android:textSize="14dip"

33
34

android:layout_height="wrap_content"
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.
view source
print?
1 <?xml version="1.0" encoding="utf-8"?>
2 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3
4

package="dlmbg.pckg.akses.server"
android:versionCode="1"

android:versionName="1.0" >

6
7

<uses-sdk android:minSdkVersion="10" />

8
9
10

<application
android:icon="@drawable/ic_launcher"

11
12

android:label="@string/app_name" >
<activity

13
14

android:name=".AksesServerActivity"
android:label="Akses Database Server MySQL" >

15
16

<intent-filter>
<action android:name="android.intent.action.MAIN" />

17
18

<category android:name="android.intent.category.LAUNCHER"
/>

19
20

</intent-filter>
</activity>

21
22

<activity
android:label="Detail Artikel"

23
24

android:name=".DetailAksesServer" >
</activity>

25

</application>

26
27
<uses-permission android:name="android.permission.INTERNET" />
28 </manifest>