Anda di halaman 1dari 7

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

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