Tutorial Menampilkan Data JSON pada Android (Android Json)

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.

Buka Source Code
{
    "kontak": [
        {
                "id": "c200",
                "nama": "Ana Saputra",
                "email": "ana@gmail.com",
                "alamat": "Denpasar",
                "jk" : "Laki - Laki",
                "hp" : "0857 7777 xxxx"
        },
 
        {
                "id": "c201",
                "nama": "Agung Saputra",
                "email": "agung@gmail.com",
                "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

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

Hingga file AndroidManifest.xml lengkapnya menjadi seperti dibawah ini

Buka Source Code
<?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.

Buka Source Code
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

Buka Source Code
<?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

Buka Source Code
<?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 :

Buka Source Code
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 androidListview with icon
    Password file zip: www.theheran.comPassword file zip: www.theheran.com

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/ 

Related posts:

  1. Tutorial Download dan Menampilkan Gambar di ImageView Android
  2. Tutorial Menampilkan Data dari Database MySQL ke Spinner Android
  3. Cara Membuat Desain Menu Dashboard pada Android
  4. Tutorial Input Data Menggunakan Android Volley Library

1 Comment

  1. muzanni

    sangat membantu om.

Leave a Reply