-->

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.

Sekian artikel tentang Menampilkan Data MySQL menggunakan RecyclerView dan CardView, semoga bermanfaat. Nantikan artikel menarik lainya.


Previous
Next Post »

25 komentar

Click here for komentar
Unknown
admin
1 November 2016 at 12:00 ×

source kode nya dong gann.... sama sama santri yg lagi kuliah IT loh ini...
lagi butuh refernsi tugas akhir..

Reply
avatar
18 January 2017 at 09:06 ×

gan saya coba ngikutin scrip,tapi malah aquery error ,kenapa ya..?

Reply
avatar
Aji Setya
admin
18 January 2017 at 09:34 ×

ehehe silahkan dipraktekkan mas :-d

Reply
avatar
Aji Setya
admin
18 January 2017 at 09:35 ×

errornya gimana mas? ketika sudah dijalankan atau masih diketik?

Reply
avatar
Unknown
admin
13 March 2017 at 07:32 ×

gan untuk magatasi masalah text length ga sesuai seperti di database bagaimana yah semisal text di database panjangnya 60 tetapi outputnya mucan 50?
trimakasih sebelumnya.

Reply
avatar
Unknown
admin
13 March 2017 at 07:58 ×

oh bodonya saya. solved gan editing length di mysql

Reply
avatar
Aji Setya
admin
13 March 2017 at 09:01 ×

nah itu, diubah panjang karakternya di mysql :-d seep dah

Reply
avatar
Aji Setya
admin
30 March 2017 at 17:25 ×

yoi sama sama om.. :-d

Reply
avatar
Unknown
admin
10 May 2017 at 18:41 ×

db.php nya mana ya gan ??

Reply
avatar
Aji Setya
admin
11 May 2017 at 09:01 ×

kodenya di artikel sebelumnya mas, link nya sudah saya sertakan di atas.. :D

Reply
avatar
Dudy
admin
2 July 2017 at 14:31 ×

layout activity_main nya gimana itu gan? sama minta email nya gan

Reply
avatar
Anonymous
admin
14 July 2017 at 10:55 ×

layout activity_main gimna ?
orror FindByID(toolbar). karena nga ada layout activity admin

Reply
avatar
Aji Setya
admin
17 July 2017 at 20:40 ×

activity_main adalah layout pasangan MainActivity.java mas, letaknya di dalam folder layout

Reply
avatar
Aji Setya
admin
17 July 2017 at 20:42 ×

activity_main adalah layout pasangan MainActivity mas, coba di cek file javanya mas namanya apa? biasanya namanya sama

Reply
avatar
Unknown
admin
26 July 2017 at 15:04 ×

Main activitynya ndak ada tuh mas

Reply
avatar
Unknown
admin
26 July 2017 at 15:07 ×

activity_main yang layout mas bukan yang java

Reply
avatar
Aji Setya
admin
26 July 2017 at 16:28 ×

saya pake activity basic mas, yang kodenya ditaruh di content_main, jadi activity_main gak saya cantumkan di sini. Tapi kika mas adanya activity_main maka masukkan kode yang ada pada content_main

Reply
avatar
Aji Setya
admin
26 July 2017 at 16:33 ×

samakan kodenya adengan content_main mas

Reply
avatar
Aji Setya
admin
26 July 2017 at 16:35 ×

saya pake basic activity basic mas. coba ganti type activitynya, kalau gak hapus aja yang support toolbarnya terus samakan kodenya adengan content_main mas

Reply
avatar
Unknown
admin
27 July 2017 at 12:34 ×

Siap sudah bisa mas terima kasih :D sangat membantu

Reply
avatar
Unknown
admin
27 July 2017 at 13:27 ×

Kalau nampilin gambar pakai Aquery bisa gak bang ? makasih

Reply
avatar
irsyad
admin
28 July 2017 at 16:49 ×

bisa dimasukkan ke githubnya ga mas,, biar gampang xD

Reply
avatar
Aji Setya
admin
29 July 2017 at 07:18 ×

bisa mas, tinggal pakai cara yang diatas, ambil nama gambarnyanya (contoh : gambar.png) terus tampilin pakai librari Glide (contoh : "http://web apinya/" + namaGambar)

Reply
avatar
Aji Setya
admin
29 July 2017 at 07:18 ×

wah itu projectnya udah ga ada di laptop ane gan, silahkan dicoba dah, pasti bisa hehe

Reply
avatar

Terimakasih atas kunjunganya.
Jika ada pertanyaan, komentar, atau saran, silakan tulis pada kolom di bawah ini.

ConversionConversion EmoticonEmoticon