Menampilkan Data Mysql Ke Aplikasi Android Memakai Recyclerview, Cardview Dan Aquery

Oleh Pojok Guru

Sabtu, 10 September 2016

Bagikan :

Tweet

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

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

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

Pada artikel kali ini memakai project aplikasi pada artikel sebelumnya yang berjudul Membuat Android Register dan Login Menggunakan AQuery dan MySQL, kalau sahabat belum membuatnya, silakan dapat dilihat di sini

Membuat File Server

Di dalam database, buat tabel gres dengan nama tbl santri dan buat strukturnya ibarat berikut ini

Sebelum masuk ke dalam pembuatan aplikasi, terlebih dahulu menciptakan untuk instruksi di sisi servernya. Buat file php dengan nama tampil.php, untuk kodenya ibarat 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 dibentuk dan buka directory layout, tambahkan layout gres dengan nama list_santri.xml, layout ini berfungsi untuk menampung data per item nantinya. Untuk kodenya ibarat 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 ibarat 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 menciptakan modelnya terlebih dahulu, caranya dengan menciptakan package gres dengan nama Model dan buat class gres di dalamnya dengan nama ModelSantri.java. Untuk kodenya ibarat 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 gres dengan nama Adapter dan buat class gres dengan naa AdapterSantri.java dan buat kodenya ibarat 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 ibarat 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 ketika 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 menentukan hidangan Run ‘app’. Maka tampilan alhasil akan ibarat berikut ini

Konsepnya hampir sama dengan menciptakan register dan login, dengan memakai AQuery, maka data akan dikirim ke server dan server akan memperlihatkan respon kemudian respon dimasukkan ke dalam adapter untuk ditampilkan di recycler view.

Sekian artikel perihal Menampilkan Data MySQL memakai RecyclerView dan CardView, semoga bermanfaat. Nantikan artikel menarik lainya.

Tag : Pemrograman, Pemrograman Android