Tutorial Menampilkan Data JSON pada Android (Android Json)

TheHeran.com/ February 20, 2015/ Java Android, Json, Slide/ 1 comments

Halo readers…!

JSON (JavaScript Object Notation) merupakan sarana untuk saling bertukar data antara server dengan client atau pertukaran data antar web. Pada awalnya pertukaran data biasanya menggunakan XML (eXtensible Markup Language) namun seiringnya waktu XML kian di tinggalkan meskipun hingga saat ini masih ada beberapa menggunakan XML dalam hal RSS Feed. Format penulisan data menggunakan JSON sangatlah singkat karena menggunakan notasi-notasi javascript seperti kurung siku [] dan kurung kurawal {}.[1]

Karena kesederhanaan penulisan JSON maka ukuran file yang dihasilkan pun menjadi lebih ramping dibandingkan XML (karena terus mengulangi kata yang sama dalam tag-tag yang digunakan). Hal ini berimbas pada kecepatan loading transfer data, pertukaran data JSON lebih cepat jika dibandingkan dengan XML. Oleh karena itu banyak situs-situs besar yang menggunakan JSON sebagai format pertukaran data [1]. Nah, pada tutorial kali ini akan membahas tentang Bagaimana Cara Parsing Data JSON kedalam ListView Android.

Kali ini saya sudah menyiapkan sample data JSON yang menurut saya sederhana karena hanya menampilkan data id, nama, email, alamat dan hp. Contoh data tersebut bisa di lihat dibawah ini dan kalian pun bisa download data JSON lengkap melalui link berikut ini. Download


{
    "kontak": [
        {
                "id": "c200",
                "nama": "Ana Saputra",
                "email": "[email protected]",
                "alamat": "Denpasar",
                "jk" : "Laki - Laki",
				"hp" : "0857 7777 xxxx"
        },

        {
                "id": "c201",
                "nama": "Agung Saputra",
                "email": "[email protected]",
                "alamat": "Denpasar",
                "jk" : "Laki - Laki",
				"hp" : "0857 7777 xxxx"
        }

       . . .
    ]
}

Langkah – langkah selanjutnya dapat di lihat di bawah ini.

1. Buat project baru di Eclipse dengan cara File ⇒ New Project ⇒ Application Project dengan nama main classnya MainActivity dan beri nama packagenya com.theheran.jsonparsing.  Yang belum jelas bisa klik disni
2. Karena kali ini saya akan “ngeload”  data JSONnya menggunakan HTTP maka dari itu perlu menambahkan ‘izin’ (permission) pada file AndroidManifest.xml. Buka file tersebut dan tambahkan kode di bawah ini

     <!-- Internet permission -->
    <uses-permission android:name="android.permission.INTERNET" />

Hingga file AndroidManifest.xml lengkapnya menjadi seperti dibawah ini

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.theheran.jsonparsing"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <!-- Internet permission -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name="com.theheran.jsonparsing.MainActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

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

        <!-- Kontak List Item Activity -->
        <activity
            android:label="Contact"
            android:name="com.theheran.jsonparsing.KontakActivity" >
        </activity>
    </application>
</manifest>

4. Buatlah class baru dan beri nama sebagai ServiceHandler.java. Class ini berfungsi untuk menghandle HTTP. Ketik kode di bawah ini.

package com.theheran.jsonparsing;

import java.io.IOException;
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.apache.http.util.EntityUtils;

public class ServiceHandler {

	static String response = null;
	public final static int GET = 1;
	public final static int POST = 2;

	public ServiceHandler() {

	}

	public String makeServiceCall(String url, int method) {
		return this.makeServiceCall(url, method, null);
	}

	public String makeServiceCall(String url, int method,
			List<NameValuePair> params) {
		try {
			// http client
			DefaultHttpClient httpClient = new DefaultHttpClient();
			HttpEntity httpEntity = null;
			HttpResponse httpResponse = null;

			// Checking http request method type
			if (method == POST) {
				HttpPost httpPost = new HttpPost(url);
				// adding post params
				if (params != null) {
					httpPost.setEntity(new UrlEncodedFormEntity(params));
				}

				httpResponse = httpClient.execute(httpPost);

			} else if (method == GET) {
				// appending params to url
				if (params != null) {
					String paramString = URLEncodedUtils.format(params, "utf-8");url += "?" + paramString;
				}
				HttpGet httpGet = new HttpGet(url);

				httpResponse = httpClient.execute(httpGet);

			}
			httpEntity = httpResponse.getEntity();
			response = EntityUtils.toString(httpEntity);

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

		return response;

	}
}

5.  Selanjutnya buatlah Sebuah file activity_main.xml dengan cara klik kanan pada res/layout ⇒ New ⇒ Android XML File  dan paste code di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

6. Selanjutnya adalah kita memerlukan satu layout untuk menampung data-data yang akan menampilkan data yang dikirim dari ListView. Berinama layout tersebut dengan nama activity_kontak.xml selanjutnya copy kode di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="10dp">
  <!-- Nama -->
  <TextView android:id="@+id/name_label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="25dip"
            android:textStyle="bold"
            android:paddingTop="10dip"
            android:paddingBottom="10dip"
            android:textColor="#43bd00"/>
  <!-- Email  -->
  <TextView android:id="@+id/email_label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#acacac"/>
  <!-- No. Handphone -->
  <TextView android:id="@+id/mobile_label"
      		android:layout_width="fill_parent"
      		android:layout_height="wrap_content"
      		android:textStyle="bold"/>

  <!--
  nb: anda bisa mengkostumasi tampilan berikut sesuai dengan kebutuhan anda. 🙂
   -->
</LinearLayout>

6. Pada class MainActivity.java ketik kode di bawah ini :

package com.theheran.jsonparsing;

import com.theheran.jsonparsing.R;
import java.util.ArrayList;
import java.util.HashMap;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.ListActivity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

public class MainActivity extends ListActivity {

	private ProgressDialog pDialog;

	// URL untuk mengambil data kontak JSON
	private static String url = "http://192.168.43.190:81/kontak.json";

	//Nama-nama Node pada JSON
	private static final String TAG_KONTAK = "kontak";
	private static final String TAG_ID = "id";
	private static final String TAG_NAMA = "nama";
	private static final String TAG_EMAIL = "email";
	private static final String TAG_ALAMAT = "alamat";
	private static final String TAG_JK = "jk";
	private static final String TAG_HP = "hp";

	// kontak JSONArray
	JSONArray kontak = null;

	// Hashmap for ListView
	ArrayList<HashMap<String, String>> contactList;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

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

		ListView lv = getListView();

		// Action klik pada Listview
		lv.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {

				// Mengambil data dari ListView yang dipilih
				String nama = ((TextView) view.findViewById(R.id.nama)).getText().toString();
				String email = ((TextView) view.findViewById(R.id.email)).getText().toString();
				String hp = ((TextView) view.findViewById(R.id.hp)).getText().toString();

				// Memulai memanggil ke class KontakActivity dengan beberapa data
				Intent in = new Intent(getApplicationContext(),KontakActivity.class);
				in.putExtra(TAG_NAMA, nama);
				in.putExtra(TAG_EMAIL, email);
				in.putExtra(TAG_HP, hp);
				startActivity(in);

			}
		});

		// Menggunakan async task untuk "ngeload" data JSON
		new GetContacts().execute();
	}

	private class GetContacts extends AsyncTask<Void, Void, Void> {

		@Override
		protected void onPreExecute() {
			super.onPreExecute();
			pDialog = new ProgressDialog(MainActivity.this);
			pDialog.setMessage("Tolong Tunggu...");
			pDialog.setCancelable(false);
			pDialog.show();

		}

		@Override
		protected Void doInBackground(Void... arg0) {
			// Creating service handler class instance
			ServiceHandler sh = new ServiceHandler();

			// Making a request to url and getting response
			String jsonStr = sh.makeServiceCall(url, ServiceHandler.GET);

			Log.d("Response: ", "> " + jsonStr);

			if (jsonStr != null) {
				try {
					JSONObject jsonObj = new JSONObject(jsonStr);

					// Getting JSON Array node
					kontak = jsonObj.getJSONArray(TAG_KONTAK);

					// looping through All Contacts
					for (int i = 0; i < kontak.length(); i++) {
						JSONObject c = kontak.getJSONObject(i);

						String id = c.getString(TAG_ID);
						String name = c.getString(TAG_NAMA);
						String email = c.getString(TAG_EMAIL);
						String address = c.getString(TAG_ALAMAT);
						String gender = c.getString(TAG_JK);
						String hp = c.getString(TAG_HP);

						// tmp hashmap for single contact
						HashMap<String, String> contact = new HashMap<String, String>();

						// adding each child node to HashMap key => value
						contact.put(TAG_ID, id);
						contact.put(TAG_NAMA, name);
						contact.put(TAG_EMAIL, email);
						contact.put(TAG_HP, hp);

						// adding contact to contact list
						contactList.add(contact);
					}
				} catch (JSONException e) {
					e.printStackTrace();
				}
			} else {
				Log.e("ServiceHandler", "Couldn't get any data from the url");
			}

			return null;
		}

		@Override
		protected void onPostExecute(Void result) {
			super.onPostExecute(result);
			// Dismiss the progress dialog
			if (pDialog.isShowing())
				pDialog.dismiss();
			/**
			 * Updating parsed JSON data into ListView
			 * */
			ListAdapter adapter = new SimpleAdapter(
					MainActivity.this, contactList,
					R.layout.list_item, new String[] { TAG_NAMA, TAG_EMAIL,TAG_HP },
					new int[] { R.id.nama,R.id.email, R.id.hp });

			setListAdapter(adapter);
		}

	}

}

Terakhir, jalankan project dengan cara Klik kanan pada project⇒ Run As ⇒ 1 Android Application

  1. listview with icon android Listview with icon
    Password file zip: www.theheran.comDownload Source Code Splash Screen Android Password file zip: www.theheran.comDownload File Apk Splash Screen Android

Bagaimana Readers? Sudah Jelas? Yang belum jelas bisa mention ke @the_heran. Nah Sekarang sekian dulu ya pembahasan Tutorial Menampilkan Data JSON pada Android . Sampai jumpa :)

Salam Hangat

@the_heran | @ade_girie

 

 

source [1]: http://www.ariona.net/apa-itu-json/ 

Comments

comments