AGENDA
Tutorials - Android
Autofill Spinner JSON

Tentang cara mengisi data pada komponen widget android dengan data diambil dari web server menggunakan JSON.



Tutorial ini sifatnya sangat fundamental namun memuat hal prinsip dalam pemrograman Android. Sengaja diberi judul “Autofill JSON”, karena pada tutorial ini akan dibahas tentang cara mengisi data pada beberapa komponen wiget android dengan data yang diambil dari web server menggunakan koneksi JSON (Java Script Object Notation).

Tutorial tersebut akan dibagi menjadi beberapa bagian global yaitu:

  1.  Melakukan koneksi ke web server
  2.  Mengakses data pada PHP dengan menggunakan JSON
  3.  Implementasi pada Autofill Spinner
  4.  Implementasi pada Autofill List View
  5.  Implementasi pada Autofill Grid

 

  1. Autofill Spinner

Komponen spinner memiliki fungsional yang sama dengan radio button, yaitu fasilitas interaksi yang menyediakan sejumlah pilihan atau yang sering disebut sebagai optionterhadap respon yang dapat diberikan oleh user.

Sering sekali kita perlu menyediakan option tersebut dengan data yang diambil dari web server. Bagaimana caranya? Ikuti proyek ini step by step.

Step 1

Buatlah sebuah proyek baru dengan spesifikasi berikut:

  1.  Project Name          : AutoFillSpinnerJSON
  2.  Target Name           : Android 2.2
  3.  Application Name    : AutoFillSpinnerJSON
  4.  Package Name        : www.aplysit.com
  5.  Create Activity         : AutoFillSpinnerJSON
  6.  Min SDK Version     : 8

Selanjutnya klik Finish.

Step 2

Modifikasilah tampilannya, caranya AutoFillSpinnerJSON » res » layout » main.xml lalu tambahkan sebuah widget spinner sehingga source codenya menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
    
    <Spinner 
android:layout_height="wrap_content" 
android:layout_width="fill_parent" 
android:id="@+id/spn_semester"
android:layout_x="90px"
android:layout_y="70px">
    </Spinner>
  </LinearLayout>

Layoutnya adalah seperti berikut:

Step 3

Modifikasilah file AndroidManifest.xml agar aplikasi dapat melakukan akses ke internet, seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="www.aplysit.com"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".AutoFillSpinnerJSON"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

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

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

</manifest>

Yang perlu ditambahkan adalah pada baris 19

Step 4

Buat class baru, caranya AutoFillSpinnerJSON » src » www.aplysit.com [klik kanan] » New  »  Class lalu beri nama kelas pada Name:Global kemudian tekan tombol Finish. Modifikasilah class tersebut sehingga menjadi seperti berikut ini:

/* Nama file : Global.java
 * Website : www.aplysit.com
 * Deskripsi : – Menangani koneksi data dengan web server.
 * – Menangani pemrosesan data yang diterima dari server
 * – Maksimal atribut yang dapat diproses adalah sebanyak 5
 * Author : Ivan Michael Siregar and team
 **/
package www.aplysit.com;

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

import android.content.Context;
import android.widget.Toast;

public class Global {
    //Gunakan ini jika port http yang Anda gunakan adalah defaul 80
    //private static String url = "http://10.0.2.2/project/autofilljson/";

    //Gunakan ini jika port http yang Anda gunakan adalah 8080
    private static String url = "http://10.0.2.2:8080/project/autofilljson/";

    private static String session = null;
    private static Integer jumlahbaris = 0;

    Context ctx;

    public Global(Context ctx) {
        this.ctx = ctx;
    }

    public String getUrl() {
        return this.url;
    }

    public String getSession() {
        return this.session;
    }

    public void setSession(String param) {
        this.session = param;
    }

    public Integer getJumlahBaris() {
        return this.jumlahbaris;
    }

    public void setJumlahBaris(Integer param) {
        this.jumlahbaris = param;
    }

    public String[][] getCollection(String url_param) throws JSONException {
        Json jParser = new Json();
        JSONObject json = jParser.getJSONFromUrl(this.getUrl() + url_param);
        JSONArray jarray = json.getJSONArray("collection");

        //Buka bagian ini untuk melihat berapa jumlah baris yang diterima
        //Toast.makeText(ctx, "Jumlah baris = "+jarray.length() ,10).show();
        String[][] anArray;
        anArray = new String[jarray.length()][5];
        setJumlahBaris(jarray.length());

        for (Integer i = 0; i < jarray.length(); i++) {
            anArray[i][0] = jarray.getJSONObject(i).getString("v1");
            anArray[i][1] = jarray.getJSONObject(i).getString("v2");
            anArray[i][2] = jarray.getJSONObject(i).getString("v3");
            anArray[i][3] = jarray.getJSONObject(i).getString("v4");
            anArray[i][4] = jarray.getJSONObject(i).getString("v5");

            //Buka bagian ini untuk melihat secara detil data yang diterima
            //Toast.makeText(ctx, i +" "+ anArray[i][1], 10).show();
        }

        return anArray;
    }

    public String[] getAllRowsAtSpecifiedVn(String[][] sourceArray, String param, Integer panjang) {

        String[] anArray = new String[this.getJumlahBaris()];

        for (Integer i = 0; i < panjang; i++) {
            if (param.equalsIgnoreCase("v1")) {
                anArray[i] = sourceArray[i][0];
            } else if (param.equalsIgnoreCase("v2")) {
                anArray[i] = sourceArray[i][1];
            } else if (param.equalsIgnoreCase("v3")) {
                anArray[i] = sourceArray[i][2];
            } else if (param.equalsIgnoreCase("v4")) {
                anArray[i] = sourceArray[i][3];
            } else if (param.equalsIgnoreCase("v5")) {
                anArray[i] = sourceArray[i][4];
            }

        }

        //anArray[0] = "a"; anArray[1] = "b"; anArray[2] = "c"; anArray[3] = "d";
        return anArray;
    }

    //Bagian ini untukmendapatkan nilai pada sebuah sel
    //Parameter yang harus didefinisikan adalah nama field dan nilai pada field tersebut
    //maka secara otomatis akan mengembalikan nilai field yang dicari.
    //Contoh:
    //Didefinisikan : v2 dan Semester 1
    //Dicari : v3
    //Maka akan dihasilkan nilai pada v3 yang pada v2 nya bernilai Semeseter 1
    public String getOneCellByPairVnValue(String[][] sourceArray, String originalvn, String originalvnvalue, String targetvn, Integer panjang) {

        Integer i;
        String hasil = "";

        for (i = 0; i < panjang; i++) {
            if (originalvn.equalsIgnoreCase("v1")) {
                if (sourceArray[i][0].equals(originalvnvalue)) {
                    if (targetvn.equalsIgnoreCase("v1")) {
                        hasil = sourceArray[i][0];
                    } else if (targetvn.equalsIgnoreCase("v2")) {
                        hasil = sourceArray[i][1];
                    } else if (targetvn.equalsIgnoreCase("v3")) {
                        hasil = sourceArray[i][2];
                    } else if (targetvn.equalsIgnoreCase("v4")) {
                        hasil = sourceArray[i][3];
                    } else if (targetvn.equalsIgnoreCase("v5")) {
                        hasil = sourceArray[i][4];
                    }
                }
            } else if (originalvn.equalsIgnoreCase("v2")) {
                if (sourceArray[i][1].equals(originalvnvalue)) {
                    //hasil = "fuh";
                    if (targetvn.equalsIgnoreCase("v1")) {
                        hasil = sourceArray[i][0];
                    } else if (targetvn.equalsIgnoreCase("v2")) {
                        hasil = sourceArray[i][1];
                    } else if (targetvn.equalsIgnoreCase("v3")) {
                        hasil = sourceArray[i][2];
                    } else if (targetvn.equalsIgnoreCase("v4")) {
                        hasil = sourceArray[i][3];
                    } else if (targetvn.equalsIgnoreCase("v5")) {
                        hasil = sourceArray[i][4];
                    }
                }
            } else if (originalvn.equalsIgnoreCase("v3")) {
                if (sourceArray[i][0].equals(originalvnvalue)) {
                    if (targetvn.equalsIgnoreCase("v1")) {
                        hasil = sourceArray[i][0];
                    } else if (targetvn.equalsIgnoreCase("v2")) {
                        hasil = sourceArray[i][1];
                    } else if (targetvn.equalsIgnoreCase("v3")) {
                        hasil = sourceArray[i][2];
                    } else if (targetvn.equalsIgnoreCase("v4")) {
                        hasil = sourceArray[i][3];
                    } else if (targetvn.equalsIgnoreCase("v5")) {
                        hasil = sourceArray[i][4];
                    }
                }
            } else if (originalvn.equalsIgnoreCase("v4")) {
                if (sourceArray[i][0].equals(originalvnvalue)) {
                    if (targetvn.equalsIgnoreCase("v1")) {
                        hasil = sourceArray[i][0];
                    } else if (targetvn.equalsIgnoreCase("v2")) {
                        hasil = sourceArray[i][1];
                    } else if (targetvn.equalsIgnoreCase("v3")) {
                        hasil = sourceArray[i][2];
                    } else if (targetvn.equalsIgnoreCase("v4")) {
                        hasil = sourceArray[i][3];
                    } else if (targetvn.equalsIgnoreCase("v5")) {
                        hasil = sourceArray[i][4];
                    }
                }
            } else if (originalvn.equalsIgnoreCase("v5")) {
                if (sourceArray[i][0].equals(originalvnvalue)) {
                    if (targetvn.equalsIgnoreCase("v1")) {
                        hasil = sourceArray[i][0];
                    } else if (targetvn.equalsIgnoreCase("v2")) {
                        hasil = sourceArray[i][1];
                    } else if (targetvn.equalsIgnoreCase("v3")) {
                        hasil = sourceArray[i][2];
                    } else if (targetvn.equalsIgnoreCase("v4")) {
                        hasil = sourceArray[i][3];
                    } else if (targetvn.equalsIgnoreCase("v5")) {
                        hasil = sourceArray[i][4];
                    }
                }
            }

        }

        return hasil;
    }

}

Kemungkinan Anda akan menemukan error pada baris ini:

Json jParser = new Json();

maka abaikan saja, karena Anda perlu membuat Class Json yang akan dilakukan pada langkah berikutnya

Step 5

Dengan cara yang sama seperti langkah sebelumnya, buatlah sebuah class baru bernama Json kemudian modifikasilah isinya sehingga menjadi seperti berikut:

/* Nama file : Json.java
 * Website : www.aplysit.com
 * Deskripsi : – Menangani pembacaan data (parser).
 * Author : Ivan Michael Siregar and team, modified from open source
 **/
package www.aplysit.com;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;

import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

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

import android.util.Log;

public class Json {

    static InputStream is = null;
    static JSONObject jObj = null;
    static String json = "";

    public JSONObject getJSONFromUrl(String url) {
        // making http request
        try {
            // default http client
            DefaultHttpClient httpClient = new DefaultHttpClient();
            HttpGet httpGet = new HttpGet(url);
            HttpResponse httpResponse = httpClient.execute(httpGet);
            HttpEntity httpEntity = httpResponse.getEntity();
            is = httpEntity.getContent();
        } 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 + "\n");
            }
            is.close();
            json = sb.toString();
        } catch (Exception e) {
            Log.e("Buffer Error", "Error converting result " + e.toString());
        }

        // try parse the string to a JSON object
        try {
            jObj = new JSONObject(json);
        } catch (JSONException e) {
            Log.e("JSON Parser", "Error parsing data " + e.toString());
        }

        // return json string
        return jObj;
    }

}

Step 6

Lalu modifikasilah file AutoFillSpinnerJSON.java sehingga menjadi seperti source code berikut:

/* Nama file : AutoFillSpinnerJSON.java
 * Website : www.aplysit.com
 * Deskripsi : – Driver yang mengimplementasikan penggunakan spinner.
 * – Data option pada spinner didatapakan dari class Global
 * – Data bersifat dinamis disediakan oleh web server script php
 * Author : Ivan Michael Siregar and team
 **/
package www.aplysit.com;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;
import android.widget.AdapterView.OnItemSelectedListener;

public class AutoFillSpinnerJSON extends Activity {

    /**
     * Called when the activity is first created.
     */
    Integer jlhBarisSpinner = 0;

    //Instansiasi object global
    Global gSpinner = new Global(AutoFillSpinnerJSON.this);
    String[][] collection = null; //digunakan oleh spinner
    String currentVn = ""; //digunakan oleh spinner

    String pilihan_id = ""; //digunakan oleh spinner untuk mendapat v1
    String pilihan_nama = ""; //digunakan oleh spinner untuk mendapat v2
    String pilihan_periode = ""; //digunakan oleh spinner untuk mendapat v3
    String pilihan_keterangan = ""; //digunakan oleh spinner untuk mendapat v4
    String pilihan_isactivated = ""; //digunakan oleh spinner untuk mendapat v5

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

        //============================{ SPINNER =======================================
        //Mengisi data spinner Semester
        final Spinner spinnersemester = (Spinner) findViewById(R.id.spn_semester);
        final int selectionCurrent = spinnersemester.getSelectedItemPosition();

        //Bagian ini untuk mengisi data pada spinner
        try {
            currentVn = "v2"; //default field yang akan ditampilkan pada Spinner
            collection = gSpinner.getCollection("serviceautofillspinnerjson.php");
            jlhBarisSpinner = gSpinner.getJumlahBaris();
            String[] content_semester = gSpinner.getAllRowsAtSpecifiedVn(collection, currentVn, jlhBarisSpinner);
            ArrayAdapter adapter_semester = new ArrayAdapter(this, android.R.layout.simple_spinner_item, content_semester);
            adapter_semester.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            spinnersemester.setAdapter(adapter_semester);
        } catch (Exception e) {
            // TODO Auto-generated catch block
        }

        //Bagian ini sebagai listener apabila spinner diclick
        spinnersemester.setOnItemSelectedListener(new OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parentView, View selectedItemView, int position, long id) {

                //Toast.makeText(getApplicationContext(), g.getOneCellByPairVnValue(collection, currentVn, spinnerday.getSelectedItem().toString(), "v4"), 10).show();
                pilihan_id = gSpinner.getOneCellByPairVnValue(collection, currentVn, spinnersemester.getSelectedItem().toString(), "v1", jlhBarisSpinner);
                pilihan_nama = gSpinner.getOneCellByPairVnValue(collection, currentVn, spinnersemester.getSelectedItem().toString(), "v2", jlhBarisSpinner);
                pilihan_periode = gSpinner.getOneCellByPairVnValue(collection, currentVn, spinnersemester.getSelectedItem().toString(), "v3", jlhBarisSpinner);
                pilihan_keterangan = gSpinner.getOneCellByPairVnValue(collection, currentVn, spinnersemester.getSelectedItem().toString(), "v4", jlhBarisSpinner);
                pilihan_isactivated = gSpinner.getOneCellByPairVnValue(collection, currentVn, spinnersemester.getSelectedItem().toString(), "v5", jlhBarisSpinner);

                String hasil = pilihan_id + " " + pilihan_nama + " " + pilihan_periode + " " + pilihan_keterangan + " " + pilihan_isactivated;

                Toast.makeText(getApplicationContext(), "Output = " + hasil, 10).show();

                //Eksekusi bagian ini apabila diperlukan aktivitas tambahan
                //………….
            }

            @Override
            public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub

            }
        });

        //============================} SPINNER =======================================
    }
}

Pastikan seluruh source code tidak memiliki error.

Step 7

Buatlah sebuah script serviceautofillspinnerjson.php, dan tuliskan source code berikut ini:

/* Nama file : serviceautofillspinnerjson.php
* Website : www.aplysit.com
* Deskripsi : – Penyedia data bagi Android.
* – Wajib menyediakan 5 field (jangan ditambah/dikurang)
* – Jika ada field yang tidak diperlukan maka tulis sbb
* $arrdata["v4"] = "";
* Author : Ivan Michael Siregar and team
**/

//Siapkan array string yang akan dikembalikan ke Android
$response["collection"] = array();

//Field 1
$arrdata = array();
$arrdata["v1"] = "1";
$arrdata["v2"] = "Semester 1/2010";
$arrdata["v3"] = "Tahun Ajaran 2010";
$arrdata["v4"] = "";
$arrdata["v5"] = "0";
array_push($response["collection"], $arrdata);

//Field 2
$arrdata = array();
$arrdata["v1"] = "2";
$arrdata["v2"] = "Semester 2/2010";
$arrdata["v3"] = "Tahun Ajaran 2010";
$arrdata["v4"] = "";
$arrdata["v5"] = "0";
array_push($response["collection"], $arrdata);

//Field 3
$arrdata = array();
$arrdata["v1"] = "3";
$arrdata["v2"] = "Semester Pendek/2010";
$arrdata["v3"] = "Tahun Ajaran 2010";
$arrdata["v4"] = "Bulan Juli, Agustus, September";
$arrdata["v5"] = "0";
array_push($response["collection"], $arrdata);

//Field 4
$arrdata = array();
$arrdata["v1"] = "4";
$arrdata["v2"] = "Semester 1/2011";
$arrdata["v3"] = "Tahun Ajaran 2011";
$arrdata["v4"] = "";
$arrdata["v5"] = "1";
array_push($response["collection"], $arrdata);

//Field 5
$arrdata = array();
$arrdata["v1"] = "5";
$arrdata["v2"] = "Semester 2/2011";
$arrdata["v3"] = "Tahun Ajaran 2011";
$arrdata["v4"] = "";
$arrdata["v5"] = "0";
array_push($response["collection"], $arrdata);

//Field 6
$arrdata = array();
$arrdata["v1"] = "6";
$arrdata["v2"] = "Semester Pendek/2011";
$arrdata["v3"] = "Tahun Ajaran 2011";
$arrdata["v4"] = "Bulan Juli, Agustus, September";
$arrdata["v5"] = "0";
array_push($response["collection"], $arrdata);

$response["sukses"] = 1;

//Kembalikan hasilnya
echo json_encode($response);

Step 8

Periksalah script php tersebut, dan pastikan bahwa script tersebut dapat memberikan hasil yang sesuai, caranya buka web browser lalu pada URL ketikkan perintah berikut:

http://localhost:8080/project/autofilljson/serviceautofillspinnerjson.php

Hasilnya adalah seperti gambar berikut:

Step 9

Jalankan Androidnya caranya AutoFillSpinnerJSON [klik kanan] » Run As » Android Application » main.xml dan hasilnya adalah seperti gamber berikut:

 

 

 

 

Source code lengkap dapat di download di:www.aplysit.com/kotakbrankas/AutoFillSpinnerJSON.rar

Like or Share This Article




COMMENTS ( 0 )
 
Keep connected with us, mobile apps available now !!