Hai sobat, kembali lagi dengan saya, masih di tutorial tentang pemrograman android. Pada artikel sebelumnya yang berjudul Tutorial Membuat Aplikasi Android Menggunakan Librari Volley, telah saya jelaskan bagaimana persiapan membuat dan mengambil data dari database ke dalam aplikasi android menggunakan librari Volley. Dan pada artikel kali ini saya akan meneruskan ke tahap selanjutnya yaitu menampilkan data yang telah diambil ke dalam beberapa komponen sesuai data.
Pada artikel sebelumnya telah saya jelaskan persiapan yang dibutuhkan untuk membuat aplikasi android dan menambahkan librari volley untuk mengambil data dari database MySQL. Silahkan bagi sobat yang belum mengetahui cara dan persiapanya bisa mempelajarinya terebih dahulu di link berikut ini
Tutorial Membuat Aplikasi Android Menggunakan Librari Volley
Pada tutorial kai ini, saya akan coba membuat aplikasi android untuk menampilkan spesifikasi handphone. Data handphone sudah disimpan di dalam database MySQL dan untuk mengirim ke dalam aplikasi android menggunakan file PHP sebagai server. Nanti data pada MySQL diambil oleh file PHP kemudian diproses menjadi bentuk JSON, nah JSON ini akan diambil oleh aplikasi kemudian diproses lalu ditampilkan di layar aplikasi. Kira-kira alurnya seperti itu sob, agak bingung ya 😅 tenang ntar mudeng sendiri..
Oke mari buat aplikasi android kita, langkah-langkahnya seperti berikut ini :
Menyiapkan Database
Untuk datanya nanti kita simpan di dalam databse MySQL, silahkan instal aplikasi web server seerti XAMPP dan aplikasi sejenisnya. Jika sudah silahkan buat database dengan nama app_blogvolley, kemudian buat table baru dengan nama hape, untuk strukturnya seperti berikut ini
Jika databse sudah, sekarang pada folder htdocs, buat folder baru dengan nama app_blogvolley, kemudian tambah folder baru dengan nama img di dalamnya.
<?php
$server ="localhost";
$username = "root";
$password ="";
$database ="app_blogvolley";
mysql_connect($server, $username, $password) or die("Koneksi tidak ada");
mysql_select_db($database) or die("Database tidak ditemukan");
?>
Setelah bisa terhubung dengan database, sekarang kita bisa mengambil data dari database menggunakan sebuah file yang berisi query untuk menampilkan data, silahkan buat file baru dengan nama getdata.php dan bua kodenya seperti berikut ini
<?php
include 'koneksi.php';
$hasil = mysql_query("SELECT * FROM hape") or die(mysql_error());
$json_response = array();
if(mysql_num_rows($hasil)> 0){
while ($row = mysql_fetch_array($hasil)) {
$json_response[] = $row;
}
echo json_encode(array('handphone' => $json_response));
}
?>
Nah, sekarang simpan semua file, kemudian buka aplikasi browser sobat dan coba akses file getdata.php yang baru saja dibuat. Kirang lebih jika diakses hasilnya akan seperti berikut ini
Membuat Project Baru
Silahkan buat project baru dengan nama volley, untuk jenis activity pilih yang empty activity
Menginstal Librari
Untuk mengambil data dari server, kita membutuhkan librari dengan nama Volley, agar bisa mengguanaknya kita harus menginstal librarinya di dalam file build:grandle.
Selanjutnya kita akan menampilkan gambar dari database ke dalam komponen ImageView pada aplikasi. Karena gambar yang akan kita tampilkan berasal dari server atau url, maka kita membutuhkan librari sebagai penampil gambar (Image Loader). Di sini kita akan menggunakan sebuah librari sebagai image loader yaitu librari Glide. Untuk lebih lengkapnya tentang Glide, sobat bisa membacanya di link berikut ini
Librari Glide
Setelah saya cari-cari, saya menemukan sebuah librari yaitu gabungan antara volley dan glide. Librari ini bisa digunakan seperti librari biasanya, silahkan instal librarinya di dalam build:grandle(Project), kodenya seperti berikut
compile 'com.github.bumptech.glide:volley-integration:1.4.0'
Setelah librari sitambahkan, jangan lupa pilih Sync Now untuk mensingkronkan project.
Membuat Tampilan
Untuk tampilanya, nanti akan kita tampilkan gambar dan spesifikasi. Nah untuk membuatnya, silahkan pada file activity_main.xml tambahkan satu komponen ImageView dan tiga komponen TextView, untuk kodenya speerti 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.aji.voley1.MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
app:srcCompat="@mipmap/ic_launcher"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="@+id/imghp" />
<TextView
android:text="Merk"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/imghp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:id="@+id/txtmerk" />
<TextView
android:text="Tipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtmerk"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:id="@+id/txttipe" />
<TextView
android:text="Keterangan"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/txttipe"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="19dp"
android:id="@+id/txtketerangan" />
</RelativeLayout>
Membuat Logika Java
Setelah membuat tampilannya, selanjutnya membuat logika program pada file java. Buka file MainActivity.java, kemudian buat kodenya seperti berikut ini
package com.aji.voley1;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 ImageView imghp;
private TextView txtmerk, txttipe, txtketerangan;
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.91/app_blogvolley/getdata.php";
imghp = (ImageView)findViewById(R.id.imghp);
txtmerk = (TextView)findViewById(R.id.txtmerk);
txttipe = (TextView)findViewById(R.id.txttipe);
txtketerangan = (TextView)findViewById(R.id.txtketerangan);
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) {
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);
}
Glide.with(getApplicationContext())
.load("http://192.168.95.91/app_blogvolley/img/" + list_data.get(0).get("gambar"))
.crossFade()
.placeholder(R.mipmap.ic_launcher)
.into(imghp);
txtmerk.setText(list_data.get(0).get("merk"));
txttipe.setText(list_data.get(0).get("tipe"));
txtketerangan.setText(list_data.get(0).get("keterangan"));
} 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);
}
}
Di dalam kode di atas, pertama kita deklarasikan variable masing masing komponen yang akan digunakan. Kemudian pada method onCreate, kita inisialisasikan variable yang sudah dideklarasikan. Selanjutnya buat method untuk mengambil data pada StringRequest dengan memasukan url atau alamat server.
Akan ada 2 method lagi di dalamnya yaitu onRespon dan Error.Listener. Pada method onRespon, aplikasi akan mengambil data berupa json kemudian disimpan pada variable respon, selanjutnya dimasukkan ke dalam JSONObject dan diurai menggunakan JSONArray. Data yang sudah disimpan diambil berdasarkan field dan index dengan perulangan for, kemudian masing-masing data dipilah dan dimasukkan ke dalam HashMap lalu ke ArrayList.
Baca juga "Cara Merubah Tampilan Android menjadi IOS/IPhone"
Setelah data masuk ke dalam ArrayList, maka data bisa diambil kemudian ditampilkan ke masing-masing komponen. Pada method Error.Listener kita bisa menampilkan perintah ketika terjadi error, di sini saya buat sebuah toast yang menampilkan teks error.
Memberi Izin Mengakses Internet
Agar aplikasi bisa mengambil data pada server, aplikasi membutuhkan izin utnuk mengakses internet. Untuk menambahkanya, silahkan buka AndroidManifest.xml dan tambahkan kode di bawah ini tepat di atas tag <application>
<uses-permission android:name="android.permission.INTERNET"/>
Menjalankan Program
Jika semuanya sudah, sekarang aplikasi sudah bisa dijalankan dengan memilih Run-app. Tampilan aplikasi kira-kira akan seperti ini sob 👇👇
Nah, seperti itu sob, cara mengambil data dari database ke dalam aplikasi android, cukup mudah bukan. Sekian artikel kali ini, semoga membentu dan bermanfaat. Silahkan share artikel ini jika sobat menyukai artikel ini. Sobat juga bisa memberikan kritik, saran atau bertanya dengan mengisi kolom komentar di bawah. Sampai jumpa di artikel berikutnya... 😁
Tutorial selanjutnya "Menampilkan Banyak Data MySQL dengan RecyclerView menggunakan Librari Volley"
60 komentar
Click here for komentargood mas adji, bisa buat yang ada list recycle view nya gak?
Replyterimakasih mas, bisa diterapkan ke dalam RecyclerView mas, tutorialnya masih proses
Replymas kalo mau nggabungin sama list recycleview sama ini gmna yah mas... jd list itu ketika kita klik masuk aktivity ini mas ... ada mas code nya makasih salam #vielarasati
Replyuntuk menggabungkan dengan list recyclerview bisa di cari di artikel selanjutnya mba, ini linknya
Replyhttp://blogsetyaaji.blogspot.co.id/2017/02/android-volley-tutorial-menyimpan-data.html
untuk memberi akasi pada list Recycler bisa mbak lihat di postingan sebelumnya, ini linknya
Replyhttp://blogsetyaaji.blogspot.co.id/2017/02/android-volley-tutorial-menyimpan-data.html
maaf ini linknya
Replyhttp://blogsetyaaji.blogspot.co.id/2016/08/mengatur-recyclerview-item-click.html
atau mbak bisa mencari artikelnya pada navigasi di atas atau fitur pencarian di atas =D
selamat sore mas aji, maaf saya mau tanya mas.. setelah saya coba run file php nya, kenapa isi teks keterangan yang ada di database, gak mau keload seperti yg lainnya ya mas? malah null untuk data keterangannya.. mohon bantuannya mas aji.. terima kasih..
Replymungkin itu ada kesalahan di databasenya mas..
Replypadahal sudah saya sesuaikan dgn yg sampean contohkan.. btw, klu boleh,.. saya minta file sql nya yg udah jadi ya mas.. yg digunakan sebagai tutorial ini.. thanks sebelumnya..
Replykurang tahu juga si, kalau selain keterangan mau muncul mas?
Replyini filenya mas http://adf.ly/1lrlHB
kalau slain komentar dia mau muncul semua mas.. oke, tak cb dl file sql dr sampean ini.. thanks mas ya...
Replywah.. bukan database yg salah gan.. ternyata panjang karakter yg saya ketik, gak bisa ditampung sama typa data text...wkwkwkwk.. pantes null..
Replyudah bisa gan.. thanks
haha sip dah :D joos
Replywah, maaf mas aji.. mengganggu lagi.. setelah tak coba, ada masalah lg mas.. yaitu setelah id kedua, id ke 3 dst, koq null lagi ya untuk keterangannnya.. untuk id 1 dan 2 nya sih mau semua keterangannya.. itu gmna mas aji? tolong sharing nya lagi ya.. thanks banget...
Replyhaha gapapa mas.. :D
Replyitu waktu di tampilin di browser atau di aplikasi mas?
mas String url = "http://192.168.95.91/app_blogvolley/getdata.php";
Replyitu gantinya gmana mas ?
untuk itu diganti sesuai ip atau url hosting untuk mengakses file server mas
Replyhttp://ip atau hosting/ folder/ nama file
mantap
Replyhaha makasih master =D
ReplyKalo sebelum memunculkan data dari mysql pake form pencarian gmn yak?
Replyterimakasih sudah berkunjung.. untuk membuat pencarian bisa menggunakan berbagai metode, hal yang diperlukan adalah server php yang berisi query penampil data berdasarkan inputan/parameter yang dikirimkan oleh aplikasi.
ReplyUntuk mengirim parameter ke server, bisa dibaca pada artikel lanjutan tutorial ini (link di bawah)
http://adf.ly/1m9VMu
artikel yg abang kasih ke topik menyimpan data hehe, saya menanyakan pencarian form sebelum nampilin data dari mysql. mohon bantu bang:)
Replyiya om, tapi prinsipnya sama mas, nanti di buat file server phpnya dengan query select where om.. nah yang kode di androidnya kodenya kira2 kaya artikel nyimpen data itu..
Replytambahan refrensi untuk nampilin data om http://adf.ly/1m9WTn
Oke saya coba bang
Replyini kalo hilangin url nya gimana ya caranya, karna saya coba dengan database tanpa merequest gambar ke url, jadinya error sekarang
Replycra tau ip/hosting itu gmna mas. kalo pemanggilane pake localhost/folder/nama file bisa ga?
Replyip/ alamat url dibuat sebagai alamat utama server, utk localhost kita menggunakan alamat ip laptop yqng bisa didapat di comand propt dgn ipconfig, jika server sudah dihosting menggunakan alamat url utama, contoh blogsetyaaji.com/file server
Replymaksudnya tidak mau menampilkan gambarnya kak? url itu alamat servernya kak, jadi kalau mau hapus tinggal hapus aja, mungkin errornya di bagian lain, coba cek log di android monitor
Replybang kok pas nampilin yg localhost/app_blogvolley/getdata.php malah ada error ?
Replyiya gan, errornya seperti apa ya gan, coba cek kode getdata.php gan..
Replybang, pas nampilin getdata.php muncul error, itu ditutorial di bagian Menyiapkan Database kan nama databasenya app_blogvolley trus itu disuruh buat tabel hape. lah itu di gambarnya ngga ada tabel hape bang. adanya cuma idhp+merek+keterangan+gambar. lah tabel hapenya dimana?
Replyterimakasih mas..
Replydatabase dan tablenya sudah benar, data yg tampil pada gambar adalah data json yang menampilkan data pada table hape yg memiliki field berupa idhape, merk dll
itu saya menggunakan extension json viewer untuk mempermudah dalam melihat data json.. semoga membantu
gan kok gambarnya nggak muncul yah ?
Replygambar sudah dimasukan ke folder img,nama gambar sudah dimasukan ke tabel database juga
mohon pencerahannya
bang aji , itu kan ada 2 data , nah misalnya saya tekan recyler view yang lain , supaya yang tampil,data yang lain itu gimana bang aji?
Replybentar om, ane beli senter dulu..
Replybtw ciba cek url gambarnya gan..
hehe silahkan mas cek di artiel saya tentang recyclerview onclick listener..
Replyaku error Error:(43, 16) error: unreachable statement
Replydi url nya, knp yaaa:((
coba di cek di kode sekitar situ mba.. atau cari errornya di stack overflow hehe
Replynga ada error tapi datanya nga tampil
Replycoba dicek di androidmonitor mas..ada error lainya gak?
Replymaaf mau tanya mas aji, apabila ingin menambahkan crud pada aplikasinya, bagaimana ya?
Replybtw, postingannya sangat bermanfaat dan menambah wawasan saya
silahkan mas lihat postingan saya lanjutan dari artikel ini, judulnya menampilkan data ke database MySQL dengan Volley
Replyterimakasih atas dukungannya..
Mas, knpa datanya cuma mncul satu.?
Replycoba cek file phpnya, atau cek di database, kali aja datanya cuma satu hehe
ReplyMas, kok datanya cuma tampil satu, seharusnya kan ada 2 data?
Replyoiya om, lupa, ini kan cuma nampilin di komponen aja hehe, kalo di list bisa om baca artikel terusanya ini
Replyini cuma nampilin di komponen aja hehe, kalo di list bisa om baca artikel terusanya ini link di artikel ada mas
Replymaaf mas. ketika dirun di android yang tampil sama seperti yg di activty_main, data yg di database tidak ada. itu gmna ya?
Replymaaf mas. klo boleh minta link source code nya soalnya penting bgt buat project tugas akhir saya :( plisss
Replyberati datanya ga nampil, coba cek di dalem method stringRequestnya. atau cek apakah muncul pesan error di aplikasi atau android monitor
Replysilahkan mas bisa download source code project ini gratis di next artikel lanjutan tutorial ini.. ☺
Replymas, bagaimana kalo kita mau tampilkan data dengan menggunakan session,,jadi hanya satu data yang sesuai dengan session saja yang tertampil...??
Replymohon bantuannya ya mas utk tugas..
danke ya mas
gan kalo gue pake fragment gimana gan, sama aja atau ada tambahann?
Replyfast respon ya gan
bisa mas, jadi requestnya dengan membawa satu data yang diambil dari session, kemudian di phpnya buat query untuk menampilkan data sesuai data requestnya tadi, utk referensi coba cek artikel saya tentang login session register android
Replykalau pakai fragment sama aja, paling untuk context kaya MainActivity.this gitu diganti sama getActivity()
Replymas aji, kenapa ya crossfade ane merah.?
Replymas punya saya kok http://localhost/app_blogvolley/getdata.php nya masih acak2n ya gak sperti yg diatas. itu gmna?
Replykalau merah coba ganti urutanya mas, atau hapus aja gapapa..
Replyoo.. di sini saya memakai ekstensi di aplikasi browser saya namanya json viewer biar tampilanya rapi..
Replygan, misal mau nampilin merk hpnya saja, lalu di klik itu lebih detail gimana yaaa?
ReplyTerimakasih atas kunjunganya.
Jika ada pertanyaan, komentar, atau saran, silakan tulis pada kolom di bawah ini.
ConversionConversion EmoticonEmoticon