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.
25 komentar
Click here for komentarsource kode nya dong gann.... sama sama santri yg lagi kuliah IT loh ini...
Replylagi butuh refernsi tugas akhir..
gan saya coba ngikutin scrip,tapi malah aquery error ,kenapa ya..?
Replyehehe silahkan dipraktekkan mas :-d
Replyerrornya gimana mas? ketika sudah dijalankan atau masih diketik?
Replygan untuk magatasi masalah text length ga sesuai seperti di database bagaimana yah semisal text di database panjangnya 60 tetapi outputnya mucan 50?
Replytrimakasih sebelumnya.
oh bodonya saya. solved gan editing length di mysql
Replynah itu, diubah panjang karakternya di mysql :-d seep dah
Replytq gan
Replyyoi sama sama om.. :-d
Replydb.php nya mana ya gan ??
Replykodenya di artikel sebelumnya mas, link nya sudah saya sertakan di atas.. :D
Replylayout activity_main nya gimana itu gan? sama minta email nya gan
Replylayout activity_main gimna ?
Replyorror FindByID(toolbar). karena nga ada layout activity admin
activity_main adalah layout pasangan MainActivity.java mas, letaknya di dalam folder layout
Replyactivity_main adalah layout pasangan MainActivity mas, coba di cek file javanya mas namanya apa? biasanya namanya sama
ReplyMain activitynya ndak ada tuh mas
Replyactivity_main yang layout mas bukan yang java
Replysaya 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
Replysamakan kodenya adengan content_main mas
Replysaya pake basic activity basic mas. coba ganti type activitynya, kalau gak hapus aja yang support toolbarnya terus samakan kodenya adengan content_main mas
ReplySiap sudah bisa mas terima kasih :D sangat membantu
ReplyKalau nampilin gambar pakai Aquery bisa gak bang ? makasih
Replybisa dimasukkan ke githubnya ga mas,, biar gampang xD
Replybisa mas, tinggal pakai cara yang diatas, ambil nama gambarnyanya (contoh : gambar.png) terus tampilin pakai librari Glide (contoh : "http://web apinya/" + namaGambar)
Replywah itu projectnya udah ga ada di laptop ane gan, silahkan dicoba dah, pasti bisa hehe
ReplyTerimakasih atas kunjunganya.
Jika ada pertanyaan, komentar, atau saran, silakan tulis pada kolom di bawah ini.
ConversionConversion EmoticonEmoticon