Hai sobat blog setya aji, kembali lagi dengan saya di tutorial android. Pada tutorial sebelumnya yang berjudul Menampilkan Data dari Database MySQL ke Aplikasi Android dengan Volley, saya telah jelaskan bagaimana membuat database server data dan mengambil data tersebut kemudian menampilkannya di aplikasi android menggunakan librari volley. Dan pada aritikel kali ini saya akan meneruskan tutorial kemarin, masih menggunakan librari volley sebagai pengambil data, nah bedanya nanti data akan saya tampilkan banyak data mysql di komponen RecyclerView. Oke sob, berikut tutorialnya 😁
Untuk membuat aplikasi android, kadang aplikasi membutuhkan data yang di simpan di server clound agar bisa diakses oleh banyak pengguna. Data tersebut biasanya disimpan di dalam database MySQL dan diakses dengan file WEB PHP. Untuk bisa mengakses data pada server ke dalam aplikasi android, aplikasi harus mengunakan layanan web (Web Service). Untuk penjelasan lanjut tentang Web Service bisa sobat baca di artikel sebelumnya.
Nah, untuk menggunakan Web Service, kita bisa menggunakan beberapa librari seperti asyntask, Android Query, Volley, maupun Retrofit. Librari-librari tersebut memiliki kelebihan dan kekurangan masing-masing, dan untuk kecepatan mengambil data Retrofit yang paling unggul.
Baca juga "Cara Menampilkan Kecepatan Internet Android di Statusbar"
Pada artikel kali ini masih menggunakan librari volley untuk mengambil data. Dan tambahanya adalah, data yang diambil akan ditampilan pada komponen RecyclerView berbentuk list. Oke berikut angkah pembuatanya.
Pada artikel ini saya menggunakan server dan project dari artikel sebelumnya. Jika sobat belum membuatnya, silahkan bisa sobat buka pada link di bawah ini
Menampilkan Data Dari MySql ke Aplikasi Android
Membuat Server
Server yang saya gunakan sama dengan tutorial sebelumnya, yaitu dengan database MySQL dengan nama database app_blogvolley di table hape
Membuat Project Baru
Untuk project yang dibuat saya ambil dari artikel sebelumnya, yaitu project volley
Menginstal Librari
Librari yang digunakan masih sama dengan artikel sebelumnya, yaitu gabungan antara volley dan glide
Membuat Tampilan
Untuk nanti kita akan tampilkan data pada komponen RecyclerView, untuk menambahkan komponen RecyclerView, silahkan sobat bisa membaca pada postingan saya sebelumnya di link berikut
Membuat Aplikasi Android RecyclerView dan Menampilkan Gambar dengan Glide
Untuk menambah komponen RecyclerView, sekarang sobat buka file activity_main.xml dan tambahkan komponen RecyclerView, 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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.aji.voley1.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/lvhape"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
Kemudian jika kita ingin menampilkan data pada RecyclerView dengan tampilan yang kita inginkan, maka kita membutuhkan layout baru agar kita bisa menampilkan data pada komponen yang kita butuhkan. Pada komponen RecyclerView kita akan menampilkan data gambar dan satu teks sebagai judul data. Untuk tampilan silakan bisa sobat ubah sesuai keinginan sobat (gak harus kaya gini hehe)
Baca juga "Menyimpan Data ke Database MySQL menggunakan Library Volley Andoroid"
Kita menampilkan gambar menggunakan komponen ImageView dan untuk menampilkan teks menggunakan komponen TextView. Silahkan buat layout baru kemudian beri nama dengan list_item.xml, kodenya sebagai berikut
<?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:paddingTop="5dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="@+id/imghp"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/txthape"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="Merk"
android:textSize="25sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Membuat Logika Java
Jika tampilanya sudah dibuat, sekarang masukkan logika java pada file MainActivity.java. Untuk kali ini kita akan ubah beberapa kode yang ada pada artikel sebelumnya, silahkan sobat cek kode pada file MainActivity.java dan rubah seperti berikut ini :
package com.aji.voley1;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
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 RecyclerView lvhape;
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.77/app_blogvolley/getdata.php";
lvhape = (RecyclerView) findViewById(R.id.lvhape);
LinearLayoutManager llm = new LinearLayoutManager(this);
llm.setOrientation(LinearLayoutManager.VERTICAL);
lvhape.setLayoutManager(llm);
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) {
Log.d("response ", 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);
AdapterList adapter = new AdapterList(MainActivity.this, list_data);
lvhape.setAdapter(adapter);
}
} 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);
}
}
Untuk menampilkan data ke dalam RecyclerView, kita membutuhkan adapter untuk memproses data. Adapter yang digunakan adalah adapter yang diubah sesuai keinginan kita agar data tampil di masing-masing komponen yang ada di layout list_item.xml. Oke, untuk membuat adapter, kita menggunakan sebuah class baru yang nanti kita beri nama AdapterList yang class ini memiliki sifat dari RecyclerView.Adapter. Kemudian untuk penampung data, menggunakan ViewHolder yang kita masukan ke dalam AdapterList. Untuk kodenya seperti berikut
package com.aji.voley1;
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.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import java.util.ArrayList;
import java.util.HashMap;
/**
* Created by AJISETYA.
*/
public class AdapterList extends RecyclerView.Adapter<AdapterList.ViewHolder>{
Context context;
ArrayList<HashMap<String, String>> list_data;
public AdapterList(MainActivity mainActivity, ArrayList<HashMap<String, String>> list_data) {
this.context = mainActivity;
this.list_data = list_data;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, null);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Glide.with(context)
.load("http://192.168.95.77/app_blogvolley/img/" + list_data.get(position).get("gambar"))
.crossFade()
.placeholder(R.mipmap.ic_launcher)
.into(holder.imghape);
holder.txthape.setText(list_data.get(position).get("merk"));
}
@Override
public int getItemCount() {
return list_data.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
TextView txthape;
ImageView imghape;
public ViewHolder(View itemView) {
super(itemView);
txthape = (TextView) itemView.findViewById(R.id.txthape);
imghape = (ImageView) itemView.findViewById(R.id.imghp);
}
}
}
Memberikan Izin Mengakses Internet
Karena aplikasi mengambil data dari server lewat internet, maka kita harus memberikan izin internet di dalam AndroidManifest.xml, untuk kodenya di bawah ini lalu letakkan di atas kode <application>
<uses-permission android:name="android.permission.INTERNET"/>
Menjalankan Aplikasi
Jika tampilan dan kode javanya sudah, sekarang aplikasi sudah bisa dijalankan dengan memilih menu Run-app, untuk tampilanya seperti berikut ini
Nah, konsepnya sama seperti kita menampikan data ke aplikasi menggunakan AQuery dan ListView. Jadi data diambil dengan memanggil json dari server, kemudian diproses dan dimasukkan ke dalam RecyclerView untuk ditampilkan pada layar.
Oke sekian artikel tentang Menampilkan Data MySQL ke Aplikasi Android dengan Volley dan RecyclerView, semoga bermanfaat dan membantu sobat yang sedang belajar pemrograman android. Silahkan bagikan artike ini ke taman-teman sobat jika sobat senang dengan artikel ini. Silahkan isi kolom komentar di bawah jika sobat ada pertanyaan, kritik, dan saran. Oke, terimakasih sampai jumpa di artikel selanjutnya.. 😀
Artikel Selanjutnya "Menyimpan Data ke Database MySQL menggunakan Library Volley Andoroid"
44 komentar
Click here for komentarmakasih mas adji udah buat sesuai sama permintaan saya kemarin.
Replymas aji request tutorial upload image pake volley
Replyiya sama-sama mas, makasih sudah berkunjung..
Replyiya insyaallah pada tutorial berikutnya mas, stay cun terus ya =D
ReplyKlo Dari Blogger Bukan Database Gimana Mas Aji ?
Replybisa mas, kalau dari blogger atau wordpress nanti diambil xml rss nya mas, tapi caranya agak beda..
Replyini kalo tanpa image gimana yah mas? jadi cuma list doang tanpa image, masih bingung logikane hehe
Replytinggal diilangin aja ImageView sama variabel gambar-gambarnya mas =D
Replyudah tampil, by the way list itu belum bisa di klik toh mas, masuk ke activity lagi maksudnya :D
Replymas, array saya isinya string sama integer. apakah di ArrayList nya harus diubah?
Replydatanya string sama integer ya, bisa juga data yang integer diubah ke string dulu mas.. masru masukin ke arraylist..
Replymas kira2 kalo logcatnya gini gimana ya? E/RecyclerView: No adapter attached; skipping layout
Replyoya mas setAdapternya mana ya?
Replydi dalam MainActivity.class gan, tepatnya setelah ngambil data dari json..
Replyerror mas, bisa bantu ga? dia bilang no adapter attached skipping layout
Replyselain itu ada error lagi gak mas, coba cek di adapternya mas.. kalau itu saya juga ada tulisan seperti itu..
Replymass.. cara setonclick item dari list view ke secondactivity dengan mysql gimana ya?
Replysilahkan bisa mas baca artikel saya di sini mas tinyium.com/2OO1
Replysemoga membantu.. :-d
maaf mas.. linknya not found mas ketika mau akses...
Replyeh.. atau mas bisa coba cek artikel saya tentang recyclerview click listener, tinggal cari aja di pencarian mas..
Replymas cara menampilkan mengatur recyclerview itemclick di artikel "data mysql ke aplikasi ke android dengan volley dan recycleview" gimana ya mas? saya udah coba tp pas di recycleview.addontouchlistener sama i.putExtra("id", movies.get(position).getId()); eror? movies nya udah di sesuaikan jadi list_data yang salah apanya mas
Replyerrornya apa ya mas?
Replykan saya tambahin recycleview item click listener di aplikasi ini? yang eror di recycleview .addontouchonlistener sama di get(position)getid nya mas mohon bantuan mas
ReplyBang aku kan pake fragment. Dia error di AdapterList.java. Pesan errornya Error:(26, 13) error: not an enclosing class: Tab2. Errornya di
Replypublic AdapterList(Tab2 mainActivity, ArrayList> list_data) {
this.context = mainActivity;
this.list_data = list_data;
}
di this.context = mainActivity bng. Gimana itu bng? Udah aku ganti pake getActivity() gabisa juga.
Bang balas disini ya, yg diatas lupa centang notifikasi bng.
ReplyString url= "http://example.com";
Replybang aku error disini, katanya unreachable statement.
Btw aku pake fragment bng
di constructornya coba ganti jadi
ReplyAdapter(getActivity() mainActivity){
this.context = mainActivity}
databasenya mba di mana? kalau di localhost pakai ip koneksi laptop mba, kalau udah di hosting pakai url hostinganya..
ReplyBang ini aku udah ok semua ga ada yg error, cuma waktu di run saat di klik tab fragment aplikasi langsung force close trus pesan error nya "you cannot start a load on a null context android" btw database sama jsonnya udah di hosting bg.
Replycara untuk memberikan action-nya itu gimana gan, misal salah satu gambar itu di klick akan tampil di image switcher.
Replybang, nampilin record dr database yg udah di hosting gak?
Replymanfaat sam
Replymas,,bgaimana carax kalo mau ditampilkan data dari database ke android sesuai kondisi/syarat..misalnya kita mau tampilkan data mahasiswa yang hanya memiliki id= 123..?
Replytolong bantuannya mas untuk tugasku...
thanks sblumnya mas....
mas,,bgaimana caranya kalo mau ditampilkan data dari database ke android sesuai denga kondisi/syarat...misalnya kita mau tampilkan data mahasiswa yang hanya memiliki id=123...tolong bantuannya ya mas utk tugasku..
Replythanks sblumnya ya mas
caranya gini mas, pertama kirim request ke server denagn membawa data kondisi POST ke server PHP. nah di php nya buat query menampilkan data where data=kondisi yang tadi di kirim aplikasi..
Replyuntuk referensi mas bisa baca di artikel saya tentang menyimpan data ke MySQL menggunakan volley
Bang maaf tolong donk kasih tutorial buat itemclick nya, buat ngelink ke class detail,, saya mau pliss mas urgent ini,,saya bingung...
ReplyBang maaf tolong donk kasih tutorial buat itemclick nya, buat ngelink ke class detail,, saya mau pliss mas urgent ini,,saya bingung...
Replysilahkan mas bisa buka artikel saya sebelumnya tentang klik pada recyclerview di link ini
Replyhttp://viahold.com/15SL
dan ini utk ngirim data ke activity lain
http://viahold.com/15Up
semoga membantu..
silahkan mas bisa buka artikel saya sebelumnya tentang klik pada recyclerview di link ini
Replyhttp://viahold.com/15SL
dan ini utk ngirim data ke activity lain
http://viahold.com/15Up
semoga membantu..
Bang link yang bawah yang ini :
Replyhttp://viahold.com/15UP
buat ngirim ke artikel lain error bang linknya,,ada backup di link yang lain bang?
langsung aja mba di url web punya mba dipanggil aja file php yang udah dibuat,,
Replymisal = https://urlberita.com/filemba.php
dia bentuknya array mba..
untuk imageswitcher tinggal tambahin kompoenenya aja di list_item.xml terus kasih actionya di adapter
Replynah betul itu hehe =D
Replyoh ya ini mas http://viahold.com/15Up
ReplyTerimakasih atas kunjunganya.
Jika ada pertanyaan, komentar, atau saran, silakan tulis pada kolom di bawah ini.
ConversionConversion EmoticonEmoticon