Tutorial Android JSON Webservice PHP MySQL

Artikel ini melanjutkan artikel sebelumnya tentang JSON. Dalam artikel sebelumnya telah dibahas tentang format JSON dan bagaimana membuat data JSON dari tabel MySQL dengan PHP. Dalam artikel ini, kita akan menampilkan data JSON tadi kedalam Listview seperti tampak dibawah ini.

Sekenario

Kita akan menampilkan data JSON ke dalam Listview. Jika item di klik maka akan menampilkan detail datanya.

Demo Webservice JSON Android PHP MySQL
Demo Webservice JSON Android PHP MySQL
Untuk membuat program ini minimal dibutuhkan 4 file yaitu

  1. event.java
  2. eventAdapter.java
  3. ListEventActivity.java
  4. EventDetailActivity.java

    Dari penamaannya saja, anda sudah paham masing masing file java diatas kan?Bagi yang belum memahami Custom listview, saya sarankan anda membaca artikel saya yang berjudul custom Listview sehingga anda paham dengan konsep customAdapter.

    Kode mengambil event dari server

    List<NameValuePair> params = new ArrayList<NameValuePair>();
    		JSONObject json = jParser.makeHttpRequest(VIEW_EVENT_URL, "GET", params);
    		Log.d("JSON", json.toString());
    		// when parsing JSON stuff, we should probably
    		// try to catch any exceptions:
    		try {
    			arrayevent = json.getJSONArray("list_event");
    
    			// looping through all posts according to the json object returned
    			for (int i = 0; i < arrayevent.length(); i++) {
    				JSONObject event = arrayevent.getJSONObject(i);
    				listevent.add(new
    				 Event(BitmapFactory.decodeResource(getResources(),
    				 R.drawable.jadwal), 
    				 event.getString("eventID"), 
    				 event.getString("judul"),
    				 event.getString("tanggal"),
    				 event.getString("jam"),
    				 event.getString("lokasi"))); // end of add					
    			}
    
    		} catch (JSONException e) {
    			e.printStackTrace();
    		}
    		

    menampilkan data di listview

    
    		EventAdapter adapter = new EventAdapter(this, listevent);
    		lvEvent.setAdapter(adapter);
    

    .

    mengaktifkan onItemClick

    lvEvent.setOnItemClickListener(new OnItemClickListener() {
    
    			@Override
    			public void onItemClick(AdapterView<?> parent, View view,
    					int position, long id) {
    
    				// getting values from selected ListItem
    				String eventID = ((TextView) view.findViewById(R.id.tveventID))
    						.getText().toString();
    
    				// Starting new intent
    				Intent in = new Intent(getApplicationContext(),
    						EventDetailActivity.class);
    				// sending idnama_kasus to next activity
    				in.putExtra("eventID", eventID);
    
    				// starting new activity and expecting some response back
    				startActivityForResult(in, 100);
    
    			}
    		});
    

    Perhatikan saat user mengklik listitem, eventID akan di kirim ke halaman EventDetailActivity
    Di halaman event detail activity, parameter eventID dipakai untuk mengambil
    data detail dari webservice dan menampilkannya di TextView

    Download source code

    Topik ini memang cukup komplek dan jika kode ditulis semua, maka artikel ini menjadi sangat panjang. Oleh karena itu, silahkan anda mendowload source codenya dan mencobanya sendiri. Download disini

    Happy Coding!

Penjelasan Struktur Data JSON

logo-jsonJSON adalah kependekan dari Javascript Object Notation. JSON dipakai untuk dua hal; yang pertama untuk format transfer data antar device/OS/bahasa pemerograman yang berbeda dan sebagai media penyimpanan data seperti MongoDB. JSON dalam artikel ini lebih menekankan pada transfer data. Sebenarnya selain JSON, format transfer data antar sistem bisa dilakukan XML, plaintext ataupun HTML, namun 3 format tersebut punya banyak kekurangan, terutama dari sisi ukuran. Saingant terdekat dari JSON adalah XML, dalam layanan Web API atau webservice, sebagian layanan menggunakan JSON, sebagian yang lain menggunakan format XML. Dua format ini bisa saling menggantikan.

Kelebihan JSON

Walaupun XML sudah sejak lama dipakai dalam format transfer data, namun beberapa tahun terakhir, JSON menggeser posisi XML. Kelebihan JSON dari XML adalah sbb:

  1. Ukuran lebih kecil dibanding XML, efeknya transfer data lebih cepat dan lebih hemat resource, terutama bandwidth
  2. JSON adalah format data bawaan di Javascript, artinya jike data dari server di kirim ke client , dan client menggunakan javascript, maka tidak perlu library tambahan untuk memprosesnya
  3. Dibanding XML, format JSON lebih sederhana.
  4. library JSON ada di setiap bahasa pemrograman sehingga memudahkan programer yang berbeda bahasa pemrograman. (lihat di :

Perbandingan format JSON dan XML

berikut ini adalah contoh data JSON tentang event kegiatan

{"list_event":
	[
		{"eventID":"1",
		"judul":"Pengajian Akbar menyambut ramadhan",
		"tanggal":"2014-05-19",
		"jam":"20:00",
		"lokasi":"Masjid Kampus UGM"
		},
		{ "eventID":"2",
		"judul":"Bedah buku kesesatan syiah",
		"tanggal":"2014-05-21",
		"jam":"09:00",
		"lokasi":"Masjid Kampus UII "
		}
	]
}

list_eventadalah adalah Array JSON. Array terdiri dari beberapa object. Dalam kasus ini, kita punya 2 object event. Masing masing object event ini mempunyai 5 field.

Representasi Data dalam format XML

Format JSON diatas bisa direpresentasikan dengan XML. Berikut ini adalah format XML untuk data yang sama

<list_event>
	<event>
		<eventID>1</eventID>
		<judul>Pengajian Akbar menyambut ramadhan</judul>
		<tanggal>2014-05-19</tanggal>
		<jam>20:00</jam>
		<lokasi>Masjid Kampus UGM</lokasi>
	</event>
	<event>
		<eventID>2</eventID>
		<judul>Bedah buku kesesatan syiah</judul>
		<tanggal>2014-05-21</tanggal>
		<jam>09:00</jam>
		<lokasi>Masjid Kampus UII </lokasi>
</event>
</list_event>

Tampak perbedaan yagn paling mendasar adalah ukuran JSON lebih kecil,perhatikan jumlah text dan tag penutup di XML yang membuat ukuran XML menjadi besar. Dari dua format diatas juga terlihat format XML lebih kompleks.

Cara mudah menganalisa format JSON

Untuk lebih memahami struktur data JSON, alangkah baiknya anda menginstall JSON viewer seperti plugin JSON viewer di Notepad++. Anda bisa menginstallnya lewat plugin manager. Berikut ini adalah struktur data JSON yang ditampilkan dengan JSON Viewer.
Untuk memakai plugin ini, install, lalu blok kode JSONnya lalu klik menu plugin->JSON viewer->Show JSON Viewer

JSON viewer di Notepad++
JSON viewer di Notepad++

Membuat format JSOn secara manual sangat jarang dilakukan dalam pembuatan program ataupun layanan webservice. Sekenario yang umum adalah data didapat dari database lalu sebelum di kirim ke client, data di format sebagai JSON. Dalam artikel selanjutnya kita akan membahas cara membuat format JSON dari database MySQL dengan Bahasa pemrograman PHP.