Volley - Menampilkan Data dari Database MySQL ke Aplikasi Android

Hai sobat, kembali lagi dengan saya, masih di tutorial tentang pemrograman android. Pada artikel sebelumnya yang berjudul Tutorial Membuat Aplikasi Android Menggunakan Librari Volley, telah saya jelaskan bagaimana persiapan membuat dan mengambil data dari database ke dalam aplikasi android menggunakan librari Volley. Dan pada artikel kali ini saya akan meneruskan ke tahap selanjutnya yaitu menampilkan data yang telah diambil ke dalam beberapa komponen sesuai data.

Pada artikel sebelumnya telah saya jelaskan persiapan yang dibutuhkan untuk membuat aplikasi android dan menambahkan librari volley untuk mengambil data dari database MySQL. Silahkan bagi sobat yang belum mengetahui cara dan persiapanya bisa mempelajarinya terebih dahulu di link berikut ini

Tutorial Membuat Aplikasi Android Menggunakan Librari Volley

Pada tutorial kai ini, saya akan coba membuat aplikasi android untuk menampilkan spesifikasi handphone. Data handphone sudah disimpan di dalam database MySQL dan untuk mengirim ke dalam aplikasi android menggunakan file PHP sebagai server. Nanti data pada MySQL diambil oleh file PHP kemudian diproses menjadi bentuk JSON, nah JSON ini akan diambil oleh aplikasi kemudian diproses lalu ditampilkan di layar aplikasi. Kira-kira alurnya seperti itu sob, agak bingung ya 😅 tenang ntar mudeng sendiri..

Oke mari buat aplikasi android kita, langkah-langkahnya seperti berikut ini :

Menyiapkan Database

Untuk datanya nanti kita simpan di dalam databse MySQL, silahkan instal aplikasi web server seerti XAMPP dan aplikasi sejenisnya. Jika sudah silahkan buat database dengan nama app_blogvolley, kemudian buat table baru dengan nama hape, untuk strukturnya seperti berikut ini

Jika databse sudah, sekarang pada folder htdocs, buat folder baru dengan nama app_blogvolley, kemudian tambah folder baru dengan nama img di dalamnya.

Agar bisa terkoneksi dengan database, kita membuatuhkan satu file php sebagai koneksi utama, untuk membuatnya silahkan buka aplikasi teks editor dan buat flebaru dengan nama koneksi.php. Untuk kodenya seperti berikut ini

<?php
$server ="localhost";
$username   = "root"; 
$password   =""; 
$database   ="app_blogvolley";
 
mysql_connect($server, $username, $password) or die("Koneksi tidak ada");
mysql_select_db($database) or die("Database tidak ditemukan");
?>

Setelah bisa terhubung dengan database, sekarang kita bisa mengambil data dari database menggunakan sebuah file yang berisi query untuk menampilkan data, silahkan buat file baru dengan nama getdata.php dan bua kodenya seperti berikut ini

<?php  
 include 'koneksi.php'; 
 $hasil         = mysql_query("SELECT * FROM hape") or die(mysql_error());
 $json_response = array();
 
if(mysql_num_rows($hasil)> 0){
 while ($row = mysql_fetch_array($hasil)) {
     $json_response[] = $row;
 }
 echo json_encode(array('handphone' => $json_response));
} 
?>

Nah, sekarang simpan semua file, kemudian buka aplikasi browser sobat dan coba akses file getdata.php yang baru saja dibuat. Kirang lebih jika diakses hasilnya akan seperti berikut ini

Membuat Project Baru

Silahkan buat project baru dengan nama volley, untuk jenis activity pilih yang empty activity

Menginstal Librari

Untuk mengambil data dari server, kita membutuhkan librari dengan nama Volley, agar bisa mengguanaknya kita harus menginstal librarinya di dalam file build:grandle.

Selanjutnya kita akan menampilkan gambar dari database ke dalam komponen ImageView pada aplikasi. Karena gambar yang akan kita tampilkan berasal dari server atau url, maka kita membutuhkan librari sebagai penampil gambar (Image Loader). Di sini kita akan menggunakan sebuah librari sebagai image loader yaitu librari Glide. Untuk lebih lengkapnya tentang Glide, sobat bisa membacanya di link berikut ini

Librari Glide

Setelah saya cari-cari, saya menemukan sebuah librari yaitu gabungan antara volley dan glide. Librari ini bisa digunakan seperti librari biasanya, silahkan instal librarinya di dalam build:grandle(Project), kodenya seperti berikut

compile 'com.github.bumptech.glide:volley-integration:1.4.0'

Setelah librari sitambahkan, jangan lupa pilih Sync Now untuk mensingkronkan project.

Membuat Tampilan

Untuk tampilanya, nanti akan kita tampilkan gambar dan spesifikasi. Nah untuk membuatnya, silahkan pada file activity_main.xml tambahkan satu komponen ImageView dan tiga komponen TextView, untuk kodenya speerti berikut ini

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.aji.voley1.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/imghp" />

    <TextView
        android:text="Merk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imghp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="16dp"
        android:id="@+id/txtmerk" />

    <TextView
        android:text="Tipe"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtmerk"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="16dp"
        android:id="@+id/txttipe" />

    <TextView
        android:text="Keterangan"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/txttipe"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="19dp"
        android:id="@+id/txtketerangan" />
</RelativeLayout>

Membuat Logika Java

Setelah membuat tampilannya, selanjutnya membuat logika program pada file java. Buka file MainActivity.java, kemudian buat kodenya seperti berikut ini

package com.aji.voley1;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.bumptech.glide.Glide;

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

import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {

    private ImageView imghp;
    private TextView txtmerk, txttipe, txtketerangan;

    private RequestQueue requestQueue;
    private StringRequest stringRequest;

    ArrayList<HashMap<String, String>> list_data;

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

        String url = "http://192.168.95.91/app_blogvolley/getdata.php";

        imghp = (ImageView)findViewById(R.id.imghp);
        txtmerk = (TextView)findViewById(R.id.txtmerk);
        txttipe = (TextView)findViewById(R.id.txttipe);
        txtketerangan = (TextView)findViewById(R.id.txtketerangan);

        requestQueue = Volley.newRequestQueue(MainActivity.this);

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

        stringRequest = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
                try {
                    JSONObject jsonObject = new JSONObject(response);
                    JSONArray jsonArray = jsonObject.getJSONArray("handphone");
                    for (int a = 0; a < jsonArray.length(); a ++){
                        JSONObject json = jsonArray.getJSONObject(a);
                        HashMap<String, String> map  = new HashMap<String, String>();
                        map.put("id", json.getString("idhp"));
                        map.put("merk", json.getString("merk"));
                        map.put("tipe", json.getString("tipe"));
                        map.put("gambar", json.getString("gambar"));
                        map.put("keterangan", json.getString("keterangan"));
                        list_data.add(map);
                    }
                    Glide.with(getApplicationContext())
                            .load("http://192.168.95.91/app_blogvolley/img/" + list_data.get(0).get("gambar"))
                            .crossFade()
                            .placeholder(R.mipmap.ic_launcher)
                            .into(imghp);
                    txtmerk.setText(list_data.get(0).get("merk"));
                    txttipe.setText(list_data.get(0).get("tipe"));
                    txtketerangan.setText(list_data.get(0).get("keterangan"));
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });

        requestQueue.add(stringRequest);
    }
}

Di dalam kode di atas, pertama kita deklarasikan variable masing masing komponen yang akan digunakan. Kemudian pada method onCreate, kita inisialisasikan variable yang sudah dideklarasikan. Selanjutnya buat method untuk mengambil data pada StringRequest dengan memasukan url atau alamat server.

Akan ada 2 method lagi di dalamnya yaitu onRespon dan Error.Listener. Pada method onRespon, aplikasi akan mengambil data berupa json kemudian disimpan pada variable respon, selanjutnya dimasukkan ke dalam JSONObject dan diurai menggunakan JSONArray. Data yang sudah disimpan diambil berdasarkan field dan index dengan perulangan for, kemudian masing-masing data dipilah dan dimasukkan ke dalam HashMap lalu ke ArrayList.

Baca juga "Cara Merubah Tampilan Android menjadi IOS/IPhone"

Setelah data masuk ke dalam ArrayList, maka data bisa diambil kemudian ditampilkan ke masing-masing komponen. Pada method Error.Listener kita bisa menampilkan perintah ketika terjadi error, di sini saya buat sebuah toast yang menampilkan teks error.

Memberi Izin Mengakses Internet

Agar aplikasi bisa mengambil data pada server, aplikasi membutuhkan izin utnuk mengakses internet. Untuk menambahkanya, silahkan buka AndroidManifest.xml dan tambahkan kode di bawah ini tepat di atas tag <application>

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

Menjalankan Program

Jika semuanya sudah, sekarang aplikasi sudah bisa dijalankan dengan memilih Run-app. Tampilan aplikasi kira-kira akan seperti ini sob 👇👇

Nah, seperti itu sob, cara mengambil data dari database ke dalam aplikasi android, cukup mudah bukan. Sekian artikel kali ini, semoga membentu dan bermanfaat. Silahkan share artikel ini jika sobat menyukai artikel ini. Sobat juga bisa memberikan kritik, saran atau bertanya dengan mengisi kolom komentar di bawah. Sampai jumpa di artikel berikutnya... 😁

Tutorial selanjutnya "Menampilkan Data MySQL di RecyclerView menggunakan Librari Volley"