Tutorial Menampilkan Data dari Database MySQL ke Spinner Android

TheHeran.com/ January 6, 2017/ Java, Json, ListView, Spinner/ 0 comments

Spinner atau lebih familiar di panggil widget dropdown di android merupakan sebuah fitur yang sangat bermanfaat untuk menampilkan atau memilih data yang sifatnya statis seperti data agama atau pendidikan yang notabene data yang ditampilkan tidak berubah-ubah. Biasanya data tersebut di tulis pada file string.xml dalam bentuk string-array . Contoh adalah sebagai berkut

string.xml:

<string-array name="data_pendidikan">
<item>SD</item>
<item>SMP</item>
<item>SMA</item>
<item>D1</item>
<item>D2</item>
<item>D3</item>
</string-array>

layout:

<Spinner android:id="@+id/spinnerPendidikan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:entries="@array/arr_disiplin" />

Pada baris kode string.xml diatas diinisialisasikan string-array dengan nama “data_pendidikan” kemudian pada balis layout ada spinner dengan id “spinnerPendidikan” dimana datanya diambil langsung ke string.xml dengan tambahan baris kode android:entries=”@array/arr_disiplin”. Dengan begitu data dalam bentuk drop down akan muncul di spinner pendidikan.

Nah, pertanyaannya bagaimana jika spinnernya tersebut merupakan data yang dinamis? tentu saja jawabnya adalah mengambil data dari database baik database Sqlite atau MySQL kemudian data tersebut di push ke spinner. Implementasi atau manfaat dari penggunaan spinner jenis ini menyesuaikan dengan kebutuhan. Agar tidak panjang lebar mari ikut prosedur atau langkah-langkah menampilkan data dari database MySql ke spinner android.

Menyiapkan Database

  1. Buat database dengan nama db_siswa
  2. Buat tabel dengan nama tb_data_siswa
  3. Kolom pada tb_data_siswa: id_siswa (int,primary_key,auto_increment), nama (varchar(50), allow null)
  4. Isikan datanya secara manual. Untuk menampilkan data ke dalam bentuk listview bisa mengikuti tutorial disni
  5. Untuk yang tidak mau ribet database bisa di download disini
  6. Perhatikan Masing – masing gambar dibawah ini
Design Tabel

Contoh Isi Tabel

tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_tabel tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_isi_tabel

Menyiapkan Webservice

  1. Buat folder baru di xampp/htdocs dengan nama : ws_siswa
  2. Membuat file koneksi ke database: koneksi.php –> DOWNLOAD
  3. Membuat file untuk mengambil data : siswaManager.php –> DOWNLOAD
  4. Perhatikan masing – masing gambar di bawah ini

Baris kode koneksi.php

Baris kode siswaManager.php

tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_koneksi_php tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_lokasi_manager

Struktur file ws_siswa

hasil JSON

tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_ws tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_json

Implementasi Android

  1. Buat project android baru dengan nama package “com.theheran.spinnermysql”.  Klik disini untuk lebih detail
  2. Buat class baru dengan nama ModelSiswa.java –>DOWNLOAD
  3. Buat class baru dengan nama ServiceHandler.java –> DOWNLOAD
  4. Buka layout/activity_main.xml dan lakukan modifikasi sehingga seperti baris kode dibawah ini. Ohya, ubah text “hello_word” yang ada pada value/string.xml menjadi “Menampilkan Data Dari Database MySQL ke Spinner” atau sesuai dengan kenginan anda.
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <string name="app_name">SpinnerMySQL</string>
        <string name="hello_world">Menampilkan Data Dari Database MySQL ke Spinner</string>
        <string name="action_settings">Settings</string>
    
    </resources>
    
    
    

    activity_main.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" tools:context="com.theheran.spinnermysql.MainActivity" >
    
        <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="@string/hello_world" android:textSize="17dp" android:textStyle="bold" />
    
        <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignRight="@+id/textView2" android:layout_below="@+id/textView2" android:layout_marginTop="41dp" android:onClick="LoadData" android:text="Tampilkan Data" />
    
        <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/button1" android:layout_alignRight="@+id/button1" android:layout_below="@+id/button1" android:layout_marginTop="16dp" android:text="Spinner Data Siswa" android:textAppearance="?android:attr/textAppearanceMedium" />
    
        <Spinner android:id="@+id/spinner1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_below="@+id/textView1" />
    
    </RelativeLayout>
    
    
    
  5. Buka file MainActivity.java dan ketikkan kode di bawah ini
    
    package com.theheran.spinnermysql;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import org.json.JSONArray;
    import org.json.JSONException;
    import org.json.JSONObject;
    
    import android.app.Activity;
    import android.app.ProgressDialog;
    import android.os.AsyncTask;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemSelectedListener;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    import android.widget.Toast;
    
    public class MainActivity extends Activity {
    
    	/*
    	 Author : www.theheran.com | info@theheran.com
    	 PIN BBM: 571078A7
    	*/
    	
    	Spinner spinnerSiswa;
    	
    	//Ganti "KETIK_IP_DISINI" dengan IP yg di dijadikan laptop. ex: 192.168.1.10
    	private static String URL="http://KETIK_IP_DISINI/ws_siswa/"; 
    	ProgressDialog  pDialog;
    	JSONArray JsonArraySiswa = null;
    	 List<String> valueIdSiswa = new ArrayList<String>();
    	 List<String> valueNamaSiswa = new ArrayList<String>();
    	
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		spinnerSiswa = (Spinner) findViewById(R.id.spinner1);
    	}
    	
    	public void LoadData(View v){
    		// Menggunakan async task untuk "ngeload" data JSON
    		new getDataSiswa().execute();
    	}
    	
    	
    	
    	private class getDataSiswa extends AsyncTask<Void, Void, Void> {
    
    		@Override
    		protected void onPreExecute() {
    			super.onPreExecute();
    			pDialog = new ProgressDialog(MainActivity.this);
    			pDialog.setMessage("Mohon Tunggu...");
    			pDialog.setCancelable(false);
    			pDialog.show();
    
    		}
    
    		@Override
    		protected Void doInBackground(Void... arg0) {
    			//Membuat Service "ServiceHandler" 
    			ServiceHandler sh = new ServiceHandler();
    			
    			// Memanggil URL untuk mendapatkan respon data
    			String jsonStr = sh.makeServiceCall(URL+"siswaManager.php?mode=getAllDataSiswa", ServiceHandler.GET); //siswaManager.php?mode=getAllDataSiswa
    
    			Log.d("Response: ", "> " + jsonStr);
    
    			if (jsonStr != null) {
    				try {
    					JSONObject jsonObj = new JSONObject(jsonStr);
    					
    					// Mendapatkan data Array JSON
    					JsonArraySiswa = jsonObj.getJSONArray("values");
    
    					ArrayList<ModelSiswa> listDataSiswa = new ArrayList<ModelSiswa>();
    					listDataSiswa.clear();
    					
    					//Melakukan perulangan untuk memecah data
    					for (int i = 0; i < JsonArraySiswa.length(); i++) {
    						JSONObject obj = JsonArraySiswa.getJSONObject(i);
    						
    						ModelSiswa modelSiswa = new ModelSiswa();
    							modelSiswa.setIdSiswa(obj.getString("id_siswa"));
    							modelSiswa.setNama(obj.getString("nama"));
    						listDataSiswa.add(modelSiswa);
    						
    						System.out.println("data "+modelSiswa.getIdSiswa());
    					}
    					
    					valueIdSiswa = new ArrayList<String>();
    					valueNamaSiswa = new ArrayList<String>();
    					
    					for (int i = 0; i < listDataSiswa.size(); i++) {
    						valueIdSiswa.add(listDataSiswa.get(i).getIdSiswa());
    						valueNamaSiswa.add(listDataSiswa.get(i).getNama());
    						
    						System.out.println("data 2 "+listDataSiswa.get(i).getNama());
    
    					}
    					
    					System.out.println("id siswa + "+valueIdSiswa.get(0));
    					
    					
    					
    				} 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();
    			
    			
    			// Membuat adapter untuk spinner
    			ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<String>(MainActivity.this,
    					android.R.layout.simple_spinner_item, valueNamaSiswa);
    			
    			spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    
    			//Mengaitkan adapter spinner dengan spinner yang ada di layout
    			spinnerSiswa.setAdapter(spinnerAdapter);
    			spinnerSiswa.setOnItemSelectedListener(new OnItemSelectedListener() {
    					@Override
    			        public void onItemSelected(AdapterView<?> parentView, View selectedItemView, int position, long id) {
    			             String idSiswa = valueIdSiswa.get(position);
    			             String namaSiswa = valueNamaSiswa.get(position);
    			             Toast.makeText(MainActivity.this, "Anda Memilih ID SISWA: "+idSiswa+", Nama: "+namaSiswa, Toast.LENGTH_LONG).show();
    			             
    			        }
    
    			        @Override
    			        public void onNothingSelected(AdapterView<?> parentView) {
    			            // your code here
    			        }
    
    			    });
    			
    		}
    
    	}
    	
    
    
    	@Override
    	public boolean onCreateOptionsMenu(Menu menu) {
    		// Inflate the menu; this adds items to the action bar if it is present.
    		getMenuInflater().inflate(R.menu.main, menu);
    		return true;
    	}
    	
    
    	@Override
    	public boolean onOptionsItemSelected(MenuItem item) {
    		int id = item.getItemId();
    		if (id == R.id.action_settings) {
    			return true;
    		}
    		return super.onOptionsItemSelected(item);
    	}
    }
    
    
    
    
  6. Buka AndroidManifest.xml, tambahkan juga sebuah permission Internet seperti di bawah ini
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.theheran.spinnermysql" android:versionCode="1" android:versionName="1.0" >
    
        <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="18" />
          <!-- Internet permission -->
        <uses-permission android:name="android.permission.INTERNET" />
    
        <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
            <activity android:name=".MainActivity" 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>
    
    </manifest>
    
    
    
  7. Selanjutnya jalankan program ke AVD atau langsung debug ke handphone. PASTIKAN variabel URL sudah di sesuaikan.
  8. Jika tidak ada masalah maka akan tampak seperti gambar dibawah ini
Screenshoot 1, Sebelum menekan tombol “Tampilkan Data”
Screenshoot 2, Setelah menekan tombol “Tampilkan Data” dan mencoba memilih salah satu list dari spinner
tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_screen_shot2 tutorial-menampilkan-data-dari-database-mysql-ke-spinner-android_screen_shot1

Download Source Code untuk mengetahui passwordnya bisa invite BBM 571078A7

Baik sekian tutorial tentang cara menampilkan data dinamis berasal dari database MySql ke Spinner. Tutorial Selanjutnya adalah masih tetap tentang Spinner namun bedanya adalah asal datanya, yakni dari SqlLite.

Jika ada pertanyaan silahkan sampaikan melalui beberapa kontak yang ada di halaman ini. Recomended via BBM (Fast Respon).

Semoga bermanfaat!, Salam Hangat

theheran.com

Comments

comments

Leave a Reply