Menampilkan Data MySQL ke Aplikasi Android dengan Volley dan RecyclerView

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 di komponen RecyclerView. Oke sob, berikut tutorialnya 😁

Menampilkan Data MySQL ke Aplikasi Android dengan Volley dan RecyclerView


Untuk membuat aplikasi android, kadang aplikasi membutuhkan data yan gdi 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

Setelah komponen recyclerview telah ditambahkan, sekarang 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 membuatuhkan layout baru agar kita bisa menampilkan data pada komponen yang kita butuhkan. Pada komponen RecyclerView kita akan tampilkan data gambar dan satu teks sebagai judul data.

Menampilkan Data MySQL ke Aplikasi Android dengan Volley dan RecyclerView

Untuk menampung 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 rbah 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

Menampilkan Data MySQL ke Aplikasi Android dengan Volley dan RecyclerView


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.. 😀


Previous
Next Post »

44 komentar

Click here for komentar
22 February 2017 at 09:01 ×

makasih mas adji udah buat sesuai sama permintaan saya kemarin.

Reply
avatar
22 February 2017 at 09:01 ×

mas aji request tutorial upload image pake volley

Reply
avatar
Aji Setya
admin
22 February 2017 at 21:08 ×

iya sama-sama mas, makasih sudah berkunjung..

Reply
avatar
Aji Setya
admin
22 February 2017 at 21:10 ×

iya insyaallah pada tutorial berikutnya mas, stay cun terus ya =D

Reply
avatar
Crazy Squad
admin
20 April 2017 at 22:12 ×

Klo Dari Blogger Bukan Database Gimana Mas Aji ?

Reply
avatar
Aji Setya
admin
21 April 2017 at 16:17 ×

bisa mas, kalau dari blogger atau wordpress nanti diambil xml rss nya mas, tapi caranya agak beda..

Reply
avatar
22 April 2017 at 01:17 ×

ini kalo tanpa image gimana yah mas? jadi cuma list doang tanpa image, masih bingung logikane hehe

Reply
avatar
Aji Setya
admin
22 April 2017 at 16:24 ×

tinggal diilangin aja ImageView sama variabel gambar-gambarnya mas =D

Reply
avatar
22 April 2017 at 23:09 ×

udah tampil, by the way list itu belum bisa di klik toh mas, masuk ke activity lagi maksudnya :D

Reply
avatar
Fawwaz ihsan
admin
11 May 2017 at 13:17 ×

mas, array saya isinya string sama integer. apakah di ArrayList nya harus diubah?

Reply
avatar
Aji Setya
admin
11 May 2017 at 15:38 ×

datanya string sama integer ya, bisa juga data yang integer diubah ke string dulu mas.. masru masukin ke arraylist..

Reply
avatar
Fawwaz ihsan
admin
11 May 2017 at 16:54 ×

mas kira2 kalo logcatnya gini gimana ya? E/RecyclerView: No adapter attached; skipping layout

Reply
avatar
Fawwaz ihsan
admin
11 May 2017 at 17:35 ×

oya mas setAdapternya mana ya?

Reply
avatar
Aji Setya
admin
11 May 2017 at 17:38 ×

di dalam MainActivity.class gan, tepatnya setelah ngambil data dari json..

Reply
avatar
Fawwaz ihsan
admin
11 May 2017 at 18:47 ×

error mas, bisa bantu ga? dia bilang no adapter attached skipping layout

Reply
avatar
Aji Setya
admin
12 May 2017 at 19:01 ×

selain itu ada error lagi gak mas, coba cek di adapternya mas.. kalau itu saya juga ada tulisan seperti itu..

Reply
avatar
www.RNP.com
admin
24 May 2017 at 23:53 ×

mass.. cara setonclick item dari list view ke secondactivity dengan mysql gimana ya?

Reply
avatar
Aji Setya
admin
25 May 2017 at 05:55 ×

silahkan bisa mas baca artikel saya di sini mas tinyium.com/2OO1

semoga membantu.. :-d

Reply
avatar
www.RNP.com
admin
25 May 2017 at 18:54 ×

maaf mas.. linknya not found mas ketika mau akses...

Reply
avatar
Aji Setya
admin
25 May 2017 at 21:56 ×

eh.. atau mas bisa coba cek artikel saya tentang recyclerview click listener, tinggal cari aja di pencarian mas..

Reply
avatar
17 June 2017 at 01:25 ×

mas 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

Reply
avatar
Aji Setya
admin
19 June 2017 at 11:02 ×

errornya apa ya mas?

Reply
avatar
19 June 2017 at 23:05 ×

kan saya tambahin recycleview item click listener di aplikasi ini? yang eror di recycleview .addontouchonlistener sama di get(position)getid nya mas mohon bantuan mas

Reply
avatar
21 June 2017 at 09:53 ×

Bang aku kan pake fragment. Dia error di AdapterList.java. Pesan errornya Error:(26, 13) error: not an enclosing class: Tab2. Errornya di
public 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.

Reply
avatar
21 June 2017 at 09:58 ×

Bang balas disini ya, yg diatas lupa centang notifikasi bng.

Reply
avatar
21 June 2017 at 14:11 ×

String url= "http://example.com";

bang aku error disini, katanya unreachable statement.
Btw aku pake fragment bng

Reply
avatar
Aji Setya
admin
21 June 2017 at 18:52 ×

di constructornya coba ganti jadi
Adapter(getActivity() mainActivity){
this.context = mainActivity}

Reply
avatar
Aji Setya
admin
21 June 2017 at 18:55 ×

databasenya mba di mana? kalau di localhost pakai ip koneksi laptop mba, kalau udah di hosting pakai url hostinganya..

Reply
avatar
21 June 2017 at 21:40 ×

Bang 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.

Reply
avatar
Muh. Zadi
admin
2 July 2017 at 06:26 ×

cara untuk memberikan action-nya itu gimana gan, misal salah satu gambar itu di klick akan tampil di image switcher.

Reply
avatar
2 July 2017 at 17:41 ×

bang, nampilin record dr database yg udah di hosting gak?

Reply
avatar
bren dhanyy
admin
29 July 2017 at 13:28 ×

mas,,bgaimana carax kalo mau ditampilkan data dari database ke android sesuai kondisi/syarat..misalnya kita mau tampilkan data mahasiswa yang hanya memiliki id= 123..?
tolong bantuannya mas untuk tugasku...
thanks sblumnya mas....

Reply
avatar
bren dhanyy
admin
29 July 2017 at 13:33 ×

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..
thanks sblumnya ya mas

Reply
avatar
Aji Setya
admin
29 July 2017 at 23:25 ×

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..

untuk referensi mas bisa baca di artikel saya tentang menyimpan data ke MySQL menggunakan volley

Reply
avatar
Azzul Arivin
admin
10 August 2017 at 10:37 ×

Bang maaf tolong donk kasih tutorial buat itemclick nya, buat ngelink ke class detail,, saya mau pliss mas urgent ini,,saya bingung...

Reply
avatar
Azzul Arivin
admin
10 August 2017 at 10:37 ×

Bang maaf tolong donk kasih tutorial buat itemclick nya, buat ngelink ke class detail,, saya mau pliss mas urgent ini,,saya bingung...

Reply
avatar
Aji Setya
admin
10 August 2017 at 11:39 ×

silahkan mas bisa buka artikel saya sebelumnya tentang klik pada recyclerview di link ini
http://viahold.com/15SL
dan ini utk ngirim data ke activity lain
http://viahold.com/15Up
semoga membantu..

Reply
avatar
Aji Setya
admin
10 August 2017 at 11:40 ×

silahkan mas bisa buka artikel saya sebelumnya tentang klik pada recyclerview di link ini
http://viahold.com/15SL
dan ini utk ngirim data ke activity lain
http://viahold.com/15Up
semoga membantu..

Reply
avatar
Azzul Arivin
admin
10 August 2017 at 21:27 ×

Bang link yang bawah yang ini :
http://viahold.com/15UP
buat ngirim ke artikel lain error bang linknya,,ada backup di link yang lain bang?

Reply
avatar
Azzul Arivin
admin
10 August 2017 at 21:34 ×

langsung aja mba di url web punya mba dipanggil aja file php yang udah dibuat,,
misal = https://urlberita.com/filemba.php

dia bentuknya array mba..

Reply
avatar
Aji Setya
admin
10 August 2017 at 21:39 ×

untuk imageswitcher tinggal tambahin kompoenenya aja di list_item.xml terus kasih actionya di adapter

Reply
avatar
Aji Setya
admin
10 August 2017 at 21:40 ×

nah betul itu hehe =D

Reply
avatar
Aji Setya
admin
10 August 2017 at 21:42 ×

oh ya ini mas http://viahold.com/15Up

Reply
avatar

Terimakasih atas kunjunganya.
Silahkan berkomentar dan beri kritik serta saran.
Jangan lupa difollow.

ConversionConversion EmoticonEmoticon