Menampilkan Data MySQL ke Aplikasi Android menggunakan RecyclerView, CardView dan AQuery

Hai sobat, pada artikel kemarin yang berjudul Membuat Android Register dan Login Menggunakan AQuery dan MySQL, telah dijelskan cara membuat register dan login menggunakan kode AQuery untuk berinteraksi dengan server. Dan pada artikel kali ini, akan membahas tentang cara menampilkan data dari database MySQL ke dalam aplikasi android menggunakan RecyclerView, CardView dan AQuery.


Dalam sebuah aplikasi, perlu adanya tampilan data yang dimunculkan guna memberikan informasi kepada pengguna. Cara untuk menampilkan data di android juga bermacam-macam, Dan ada banyak sumber yang diambil untuk dijadikan sumber data informasi tersebut, salah satunya yaitu data dari database MySQL.

Untuk mengambil data dari MySQL, perlu adanya web service agar aplikasi bisa berinteraksi dengan server. Bisa menggunakan AQuery, Voley, maupun Retrofit. Dan di artikel kali ini menggunakan AQuery sebagai penghubung aplikasi dengan server.

Pada artikel kali ini menggunakan project aplikasi pada artikel sebelumnya yang berjudul Membuat Android Register dan Login Menggunakan AQuery dan MySQL, jika sobat belum membuatnya, silakan bisa dilihat di sini

Membuat File Server

Di dalam database, buat tabel baru dengan nama tbl santri dan buat strukturnya seperti berikut ini

Sebelum masuk ke dalam pembuatan aplikasi, terlebih dahulu membuat untuk kode di sisi servernya. Buat file php dengan nama tampil.php, untuk kodenya seperti berikut ini

<?php  
 include 'db.php'; // konek database
 $hasil = mysql_query("SELECT * FROM tblsantri") or die(mysql_error()); // query sql
 $response = array();
 
//jika data nya ada atau lebih dari 0
if(mysql_num_rows($hasil)> 0){

    $response['result']= "true" ;
    $response['msg']="Data ditemukan";
    $response["data"] = array();

    // fungsi perulangan
 while ($row = mysql_fetch_array($hasil)) {

     $pl = array();

     $pl["nim"] = $row["nim"];
     $pl["nama"] = $row["nama"];
     $pl["bidang"] = $row["bidang"];

     array_push($response["data"], $pl);

 }

 echo json_encode($response);
 
} else {  
 $response['result']= "false" ;
    $response['msg']="maaf,terjadi kesalahan";
}

?>

Membuat Tampilan

Buka project yang sudah dibuat dan buka directory layout, tambahkan layout baru dengan nama list_santri.xml, layout ini berfungsi untuk menampung data per item nantinya. Untuk kodenya seperti berikut ini

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp">

            <TextView
                android:id="@+id/maintxtnim"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Nim"
                android:textSize="14dp" />

            <TextView
                android:id="@+id/maintxtnama"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Nama"
                android:textSize="20dp" />

            <TextView
                android:id="@+id/maintxtbidang"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bidang"
                android:textSize="14dp" />

        </LinearLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

Selanjutnya pada content_main.xml, tambahka object recyclerview di dalamnya, kodenya seperti 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".Activity.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler"/>

</RelativeLayout>

Membuat Activity

Untuk menampilkan data santri, kita perlu untuk membuat modelnya terlebih dahulu, caranya dengan membuat package baru dengan nama Model dan buat class baru di dalamnya dengan nama ModelSantri.java. Untuk kodenya seperti berikut ini

package com.blogsetyaaji.pesantrenidn.Model;

import com.blogsetyaaji.pesantrenidn.BaseApp;

/**
 * Created by AJISETYA on 9/6/2016.
 */
public class ModelSantri{
    private String nim, nama, bidang;

    public String getNim() {
        return nim;
    }

    public void setNim(String nim) {
        this.nim = nim;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public String getBidang() {
        return bidang;
    }

    public void setBidang(String bidang) {
        this.bidang = bidang;
    }
}

Di sini data akan ditampilkan di dalam objek recyclerview, maka membutuhkan adapter. Buat package baru dengan nama Adapter dan buat class baru dengan naa AdapterSantri.java dan buat kodenya seperti berikut ini

package com.blogsetyaaji.pesantrenidn.Adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.blogsetyaaji.pesantrenidn.BaseApp;
import com.blogsetyaaji.pesantrenidn.Model.ModelSantri;
import com.blogsetyaaji.pesantrenidn.R;

import java.util.ArrayList;

/**
 * Created by AJISETYA on 9/9/2016.
 */
public class AdapterSantri extends RecyclerView.Adapter<AdapterSantri.ViewHolder>{

    private ArrayList<ModelSantri> santri;
    Context context;

    public AdapterSantri(Context context, ArrayList<ModelSantri> santri) {
        this.santri = santri;
        this.context = context;
    }

    @Override
    public AdapterSantri.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_santri, null);

        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.nim.setText(String.valueOf(santri.get(position).getNim()));
        holder.nama.setText(String.valueOf(santri.get(position).getNama()));
        holder.bidang.setText(String.valueOf(santri.get(position).getBidang()));
    }

    @Override
    public int getItemCount() {
        return santri.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView nim, nama, bidang;

        public ViewHolder(View itemView) {
            super(itemView);
            nim = (TextView)itemView.findViewById(R.id.maintxtnim);
            nama = (TextView)itemView.findViewById(R.id.maintxtnama);
            bidang = (TextView)itemView.findViewById(R.id.maintxtbidang);
        }
    }

    
}

Selanjutnya kita tampilkan recyclerview di dalam MainActivity. Buka MainActivity.java dan buat kodenya seperti berikut ini

package com.blogsetyaaji.pesantrenidn.Activity;

import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.support.v7.widget.helper.ItemTouchHelper;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.androidquery.callback.AjaxCallback;
import com.androidquery.callback.AjaxStatus;
import com.blogsetyaaji.pesantrenidn.Adapter.AdapterSantri;
import com.blogsetyaaji.pesantrenidn.BaseApp;
import com.blogsetyaaji.pesantrenidn.Helper.Helper;
import com.blogsetyaaji.pesantrenidn.Model.ModelSantri;
import com.blogsetyaaji.pesantrenidn.R;

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

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

public class MainActivity extends BaseApp {

    private RecyclerView recyclerView;
    private ArrayList<ModelSantri> santris;
    private AdapterSantri adapterSantri;
    private Paint p = new Paint();
    public TextView nim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        santris = new ArrayList<>();
        recyclerView = (RecyclerView) findViewById(R.id.recycler);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        nim = (TextView) findViewById(R.id.maintxtnim);

        ambilData();

        

    }

   

    private void ambilData() {
        /*kirim data ke server*/
        String URL = Helper.BASE_URL + "tampil.php";
        Map<String, String> param = new HashMap<>();

            /*menampilkan progressbar saat mengirim data*/
        ProgressDialog pd = new ProgressDialog(context);
        pd.setIndeterminate(true);
        pd.setCancelable(false);
        pd.setInverseBackgroundForced(false);
        pd.setCanceledOnTouchOutside(false);
        pd.setTitle("Info");
        pd.setMessage("Mengambil data");
        pd.show();

        try {
                /*format ambil data*/
            aQuery.progress(pd).ajax(URL, param, String.class, new AjaxCallback<String>() {
                @Override
                public void callback(String url, String object, AjaxStatus status) {
                        /*jika objek tidak kosong*/
                    if (object != null) {
                        try {
                            JSONObject jsonObject = new JSONObject(object);
                            String result = jsonObject.getString("result");
                            String msg = jsonObject.getString("msg");
                            if (result.equalsIgnoreCase("true")) {
                                Helper.pesan(context, msg);
                                JSONArray jsonArray = jsonObject.getJSONArray("data");
                                for (int a = 0; a < jsonArray.length(); a++) {
                                    JSONObject object1 = jsonArray.getJSONObject(a);
                                    ModelSantri santri = new ModelSantri();
                                    santri.setNim(object1.getString("nim"));
                                    santri.setNama(object1.getString("nama"));
                                    santri.setBidang(object1.getString("bidang"));
                                    santris.add(santri);
                                    adapterSantri = new AdapterSantri(context, santris);
                                    recyclerView.setAdapter(adapterSantri);
                                }
                            } else {
                                Helper.pesan(context, msg);
                            }
                        } catch (JSONException e) {
                            Helper.pesan(context, "Error convert data json");
                        }
                    }
                }
            });
        } catch (Exception e) {
            Helper.pesan(context, "Gagal mengambil data");
        }
    }
    
}

Menjalankan Program

Jika sudah, jalankan programnya dengan memilih menu Run ‘app’. Maka tampilan akhirnya akan seperti berikut ini

Konsepnya hampir sama dengan membuat register dan login, dengan menggunakan AQuery, maka data akan dikirim ke server dan server akan memberikan respon lalu respon dimasukkan ke dalam adapter untuk ditampilkan di recycler view.