15 Menampilkan Data JSON Dengan Listiview

1| ListView dan Data JSON
MENAMPILKAN DATA JSON DATABASE MYSQL DENGAN LISTVIEW
1. Sahabat ASIC setelah kita berhasil melakukan pencarian data Database MySql di WebServer
XAMPP lokal menggunakan PHP WebService dan library JSON Volley via java Android. Karena
data yang dikembalikan dari web server masih berupa format array data JSON maka kita akan
menampilkannya dengan menggunakan komponen layout ListView untuk diolah lebih lanjut.
2. Sebelum mengolahnya di lokal android menggunakan ListView kita perlu memastikan struktur
data JSON tersebut menggunakan browser dengan sedikit merubah parameter POST dari
android menjadi GET query string yang bisa kita eksekusi menggunakan URL browser.
3. Buka Notepad++ dan open file webserver C:\xampp\htdocs\aflowz\volley_cari.php. Simpan

sebagai web_cari.php via menu FileSaveAs. Modifikasi code php dengan menghilangkan
if($_SERVER['REQUEST_METHOD']=='POST') menjadi $d_kriteria = $_GET['kriteria'];. Simpan
perubahan dengan klik menu FileSave.
<?php
//-------------database
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'aflowz_db';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Could not connect: ' . mysql_error());
mysql_select_db($dbname);
//------------------------
// array for JSON response
$response = array();
//------if($_SERVER['REQUEST_METHOD']=='POST'){
$d_kriteria = $_GET['kriteria'];
$zsql = "";
$zsql = $zsql."select * from tbl_user";
$zsql = $zsql." WHERE id_rec like '%%".$d_kriteria."%%'";
$zsql = $zsql." or user_id like '%%".$d_kriteria."%%'";
$zsql = $zsql." or user_name like '%%".$d_kriteria."%%'";
$zsql = $zsql." or department like '%%".$d_kriteria."%%'";
$zsql = $zsql." or user_sex like '%%".$d_kriteria."%%'";
$zsql = $zsql." or role_admin like '%%".$d_kriteria."%%'";
$zsql = $zsql." or role_user like '%%".$d_kriteria."%%'";
astimen@gmail.com – http://aflowz.com
$result = mysql_query($zsql);
if (mysql_num_rows($result) > 0) {
$response["datauser"] = array();
while ($row = mysql_fetch_array($result)) {

// temp user array
$datafield= array();
$datafield["id_rec"] = $row["id_rec"];
$datafield["user_id"] = $row["user_id"];
$datafield["user_name"] = $row["user_name"];
$datafield["department"] = $row["department"];
$datafield["user_sex"] = $row["user_sex"];
$datafield["role_admin"] = $row["role_admin"];
$datafield["role_user"] = $row["role_user"];
// push single product into final response array

array_push($response["datauser"], $datafield);
}
// success
$response["success"] = 1;
// echoing JSON response

echo json_encode($response);
}
else
{
$response["success"] = 0;
$response["message"] = "No user found";
// echoing JSON response
echo json_encode($response);
}
//-------close database
mysql_close($conn);
?>
4. Buka browser chrome dan akse page tersebut melalui URL dengan manambahkan query string
kriteria : http://localchost/aflowz/web_cari.php?kriteria=male. Akan ditampilkan data JSON
hasil kembalian dengan kriteria semua field yang mengandung kata “male”
5. Untuk menampilkannya dalam format array data JSON secara terstruktur kita perlu menginstal
ekstensi chrome untuk JSON View. Buka menu kanan atas Chrome, pilih setelan (setting).
6. Akan ditampilkan halaman setting browser chrome, pilih menu Extensi. Akan ditampilkan
ekstensi yang telah terpasang dalam chrome. Klik Link Dapatkan ekstensi lainnya.
7. Akan ditampilkan page chrome.google.com. Isi pencarian dengan jsonview, akan ditampilkan
daftar ekstensi terkait dengan JSON View. Pilih JSONView dan klik Button TAMBAHKAN KE
CHROME.
8. Akan ada konfirmasi persetujuan instalasi ekstensi JSONView. Klik Button Tambahkan ekstensi
9. Jika instalasi ekstensi berhasil akan ada konfirmasi JSONView telah diinstal dan ditambahkan ke
browser chrome. Pada halaman ekstensi setting chrome juga terdapat informasi bahwa
JSONView telah terpasang.
10. Jika kita refresh Tab URL data JSON hasil pengembalian database MySql dari
http://localhost/aflowz/web_cari.php?kriteria=male akan ditampilkan halaman web dengan
format array data JSON yang telah terstruktur sesuai dengan child nya. Jika kita mouse over
salah satu child maka pada status chrome ditampilkan datauser[0]id_rec.
{
datauser: [
{
id_rec: "20170105135026564",
user_id: "asti",
user_name: "astimen",
department: "Finance",
user_sex: "Male",
role_admin: "true",
role_user: "false"
},
{
id_rec: "20170106112608339",
user_id: "andi",
user_name: "andika",
department: "Sales",
user_sex: "Male",
role_admin: "false",
role_user: "true"
}
],
success: 1
}
11. Data JSON memperlihatkan array JSON datauser yang memiliki dua object data. Masing-masing
object memiliki 7 (tujuh) field.
12. Kita akan memanfaatkan php JSON data web service web_cari.php?kriteria=xxxx sebagai URL
yang digunakan dalam pencarian java android menggunakan metode GET. Buka Android Studio
untuk menambahkan ListView pada layout fragement_frg_search.xml. Pastikan bahwa ListView
tidak menutupi object layout pencarian yang sudah dibuat sebelumnya.
13. Tambahkanlah kedalam frame_layout sebuah RelativeLayout karena kita akan membuat dua
buah grup. Grup pertama adalah grup pencarian (TextView, EditText dan Button) yang tersususn
horisontal, makanya menggunakan LinearLayout Horisontal yang diberi id “cari”. Grup kedua
adalah sebuah LinearLayout bersifat Vertical yang didalamnya ditambahkan ListView dengan id
lvDataUser untuk menampung data JSON yang telah kita dapatkan dari web server.
14. Hubungan antara kedua grup ini adalah relative karena berada dalam RelativeLayout. Grup
kedua berada dibawah grup pertama sehingga di LayoutLinier vertical grup kedua diberikan
properties posisi “android:layout_below="@+id/cari"
15. Kode XML fragment_frg_search.xml dapat dilihat dibawah ini
<FrameLayout 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"
tools:context="com.example.astimen.myapplication.fragment.frg_search">

<RelativeLayout
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/cari"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:text="Kriteria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView2"
android:fontFamily="sans-serif"
android:textAlignment="center"
android:layout_weight="2"
android:textSize="18sp" />
<EditText
android:inputType="textPersonName"
android:id="@+id/txtKriteria"
android:layout_weight="10" />
<Button
android:text="Find"
android:layout_width="68dp"
android:id="@+id/btnSearch"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_below="@+id/cari">
<ListView
android:id="@+id/lvDataUser" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
16. Selanjutnya kita akan membuat layout xml tambahan untuk menampung field field data JSON
yang akan ditampilkan dalam ListView. Untuk menambahkan layout klik kanan folder layout di
appreslayoutNewXMLLayout XML File.
17. Akan ditampilkan dialog Configure Component untuk XML Layout. Isi text isian Layout File
Name dengan “datauser_list_view.xml” dan isian Root Tag dengan “RelativeLayout”, karena kita
akan menyusun semua TextView disamping kanan ImageView dan sata sama lain tersusun ke
bawah relative terhadap yang lain.
18. Android Studio otomatis akan membuatkan sebuah file layout xml dengan nama
datauser_list_view.xml. Tambahkan object layout sebuah ImageView dan enam buah TextView
untuk menampilkan data JSON dari webserver sebagai berikut
id_rec: "20170105135026564",
user_id: "asti",
user_sex: "Male",
role_admin: "true",
role_user: "false"
19. Data field user_sex baik male atau female kita tidak tampilkan dalam bentuk TextView tapi
dalam bentuk gambar icon pria dan wanita menggunakan ImageView. Gambarnya nanti kita
akan copy paste ke folder appresdrawable.
10 | L i s t V i e w d a n D a t a J S O N
20. Buka mode Design. Drag and Drop ImageView dari pallete Image & Media ke RelativeLayout beri
nama id imgUser. Drag and Drop enam buah TextView di bawahnya dan beri nama id nya seperti
pada gambar.
21. Buka mode Text Atur posisi relative nya pada text XML seperti kode xml dibawah ini. Beri
properties imgUser layout_width = “100dp” dan layout_height=”120dp”. Ukuran tersebut dapat
disesuaikan sesuai kebutuhan. Untuk txtIdRec berikan properties disebelah kanan imgUser atau
layout_toRightOf=”@id/imgUser”.
<?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"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="100dp"
android:layout_height="120dp"
app:srcCompat="@mipmap/ic_launcher"
android:id="@+id/imgUser" />
<TextView
android:text="TextView"
android:id="@+id/txtIdRec"
android:layout_toRightOf="@id/imgUser"/>
<TextView
android:id="@+id/txtUserId"
android:layout_toRightOf="@id/imgUser"
android:layout_below="@id/txtIdRec"/>
<TextView
android:id="@+id/txtUserName"
android:layout_below="@id/txtUserId"/>
<TextView
android:id="@+id/txtDepartment"
android:layout_below="@id/txtUserName"/>
<TextView
android:id="@+id/txtRoleAdmin"
android:layout_below="@id/txtDepartment"/>
<TextView
android:id="@+id/txtRoleUser"
android:layout_below="@id/txtRoleAdmin"/>
</RelativeLayout>
22. Semua keenam TextView memiliki properties ini agar berada di samping kanan imgUser.
TextView mulai txtUserId diberikan properties relatif dibawah dari TextView diatasnya.
Perhatikan kode XML diatas.
23. Sekarang kita akan melakukan pengkodean java Android yang cukup banyak perhatikan
langkahnya setahap demi setahap. Buka file java Fragment frg_search d lokasi Android Studio:i
appJavacomfragmetfrg_search.java.
24. Buat deklarasi private static di bagian awal badan class frg_search sesuai dengan jumlah field
data yang akan ditampilkan sebagai berikut :
//--deklarasi data JSON
/*
id_rec: "20170105135026564",
user_id: "asti",
user_sex: "Male",
role_admin: "true",
role_user: "false"
success: 1
*/
private static String id_rec="";

private static String user_id="";
private static String user_name="";
private static String department="";
private static String user_sex="";
private static String role_admin="";
private static String role_user="";
25. Tambahkan deklarasi nom untuk looping array data dan ArrayList results dan SearchResults sr1
seperti dibawah ini. Object ini digunakan untuk membuat adapter yang menampung data dan
ditampikan ke layout sejumlah data.
private int nom=0;

private static ArrayList<SearchResults> results = new
ArrayList<SearchResults>();
private SearchResults sr1 = new SearchResults();
//----end deklarasi
26. Kita akan menggunakan PHP JSON Data web service dengan URL weblokal :
http://localhost/aflowz/web_cari.php?kriteria=xxxx yang akan dipanggil menggunakan
JSONObject tipe http request GET dari anroid maka kita mengubah domain nya menjadi
http://10.0.2.2/aflowz/web_cari.php?kriteria=xxx
27. Ubahlah class AsyncTask myikc() menjadi JSONObject httpRequest jenis GET sebagai berikut :
class myikc extends AsyncTask<String, String, String> {
@Override
protected void onPreExecute() {
super.onPreExecute();
protected String doInBackground(String... args) {
return null;
}
protected void onPostExecute(String file_url) {
Button btn_search = (Button) getView().findViewById(R.id.btnSearch);

btn_search.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do something
\
EditText etKriteria = (EditText) getView().findViewById(R.id.txtKriteria);
final String setKriteria=etKriteria.getText().toString();
if(setKriteria.trim().length()==0)
{
pesandialog("Entrian Kriteria tidak boleh kosong ...!");
etKriteria.requestFocus();
return;
//------volley
final String REGISTER_URL =

"http://10.0.2.2/aflowz/web_cari.php?kriteria="+setKriteria;
JsonObjectRequest jsonRequest = new JsonObjectRequest

(Request.Method.GET, REGISTER_URL, null, new
Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
// the response is already constructed as a
JSONObject!
Toast.makeText(getActivity(), response.toString(), Toast.LENGTH_LONG).show();
//---proses data response
try {
//istatus=response.getInt("success");
JSONArray ja = response.getJSONArray("datauser");
results.clear();
nom=0;
for (int i = 0; i < ja.length(); i++) {
JSONObject c = ja.getJSONObject(i);
// Storing each json item in variable

nom=nom+1;
id_rec = c.getString("id_rec");
user_id = c.getString("user_id");
user_name = c.getString("user_name");
department = c.getString("department");
user_sex = c.getString("user_sex");
role_admin = c.getString("role_admin");
role_user = c.getString("role_user");
sr1 = new SearchResults();
sr1.set_id_rec(id_rec);
sr1.set_user_id(user_id);
sr1.set_user_name(user_name);
sr1.set_department(department);
sr1.set_user_sex(user_sex);
sr1.set_role_admin(role_admin);
sr1.set_role_user(role_user);
results.add(sr1);
} catch (JSONException e) {
e.printStackTrace();
}
TampilListUser();
//------------------------
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Toast.makeText(getActivity(),"Server :" + error.toString(),
Toast.LENGTH_LONG).show();
}
}){
};
RequestQueue requestQueue = Volley.newRequestQueue(getContext());

requestQueue.add(jsonRequest);
//-------------
}
});
}
}
28. Perhatikan kode dibawah menunjukan deklarasi sebuah class SearchResults() dengan method
set_id_rec dibawnya yang merupakan pasangan get_id_rec, set dan get.

29. Buat sebuah class SearchResults() sebagai berikut dibagian bawah badan program class
frg_search sesuai code dibawah ini. Perhatikan semua field data dibuat pasangan set dan get
nya untuk di set sesuai data JSON dari web server. Setelah di set nilai masing masing field
tersebut nanti akan di get untuk diisikan ke object leyout ImageView dan TextView melalui
sebuah BasedAdapter.
public class SearchResults {
private String id_rec = "";

private String user_id = "";
private String user_name = "";
private String department = "";
private String user_sex = "";
private String role_admin = "";
private String role_user = "";
private String img_user = "";
//------id_rec
public void set_id_rec(String id_rec) {
this.id_rec = id_rec;
}
public String get_id_rec() {
return id_rec;
}
//------user_id
public void set_user_id(String user_id) {
this.user_id = user_id;
}
public String get_user_id() {
return user_id;
}
//------user_name
public void set_user_name(String user_name) {
this.user_name = user_name;
}
public String get_user_name() {
return user_name;
}
//------department
public void set_department(String department) {
this.department = department;
}
public String get_department() {
return department;
}
//------user_sex
public void set_user_sex(String user_sex) {
this.user_sex = user_sex;
}
public String get_user_sex() {
return user_sex;
}
//------role_admin
public void set_role_admin(String role_admin) {
this.role_admin = role_admin;
}
public String get_role_admin() {
return role_admin;
}
//------role_user
public void set_role_user(String role_user) {
this.role_user = role_user;
}
public String get_role_user() {
return role_user;
}
//------role_user
public void set_img_user(String img_user) {
this.img_user = img_user;
}
public String get_img_user() {
return img_user;
}
30. Selanjutnya kita menambahkan sebuah kelas BasedAdapter yang berfungsi untuk mengambil
nilai dari class SearchResults() melaui method Get dan melakukan set nilai ke masing masing
object layout yang telah kita buat dengan nama datauser_list_view.xml secara berulang
sebanyak data. Dalam class ini didefinisikan layout tersebut.
public class MyCustomBaseAdapter extends BaseAdapter {

private ArrayList<SearchResults> searchArrayList;
private LayoutInflater mInflater;
public MyCustomBaseAdapter(Context context, ArrayList<SearchResults>

results) {
searchArrayList = results;
mInflater = LayoutInflater.from(context);
}
public int getCount() {

return searchArrayList.size();
}
public Object getItem(int position) {

return searchArrayList.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.datauser_list_view, null);

holder = new ViewHolder();
holder.txt_id_rec = (TextView) convertView.findViewById(R.id.txtIdRec);
holder.txt_user_id = (TextView) convertView.findViewById(R.id.txtUserId);
holder.txt_user_name = (TextView) convertView.findViewById(R.id.txtUserName);
holder.txt_department = (TextView) convertView.findViewById(R.id.txtDepartment);
holder.txt_user_admin = (TextView) convertView.findViewById(R.id.txtRoleAdmin);
holder.txt_user_role = (TextView) convertView.findViewById(R.id.txtRoleUser);
holder.imgPhoto = (ImageView) convertView.findViewById(R.id.imgUser);

convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();

}
holder.txt_id_rec.setText(searchArrayList.get(position).get_id_rec());
holder.txt_user_id.setText(searchArrayList.get(position).get_user_id());
holder.txt_user_name.setText(searchArrayList.get(position).get_user_name());
holder.txt_department.setText(searchArrayList.get(position).get_department());
holder.txt_user_admin.setText(searchArrayList.get(position).get_role_admin());
holder.txt_user_role.setText(searchArrayList.get(position).get_role_user());
if(searchArrayList.get(position).get_role_admin().equals("true"))
{
holder.txt_user_admin.setText("Admin");
}
else
{
holder.txt_user_admin.setText("Not Admin");
}
if(searchArrayList.get(position).get_role_user().equals("true"))
{
holder.txt_user_role.setText("User");
}
else
{
holder.txt_user_role.setText("Not User");
}
if(searchArrayList.get(position).get_user_sex().equals("Male"))
{
holder.imgPhoto.setImageResource(R.drawable.male);
}
else
{
holder.imgPhoto.setImageResource(R.drawable.female);
}
return convertView;
}
class ViewHolder {
ImageView imgPhoto;
TextView txt_id_rec;
TextView txt_user_id;
TextView txt_user_name;
TextView txt_department;
TextView txt_user_admin;
TextView txt_user_role;
31. Pada kode diatas juga kita menggunakan kondisi if untuk memeriksa nilai dalam class
get_user_sex yang jika equals atau sama dengan “Male” maka akan ditampilkan image male.png
pada ImageView imgUser. Sebailiknya akan di set gambar female.png. Buatlah gambar PNG
atau JPG dan copy di explorer dan paste pada Android Studio appresdrawable.
32. Terakhir kita meletakan perintah untuk menjalankan sebuah fungsi TampilListUser dengan code
dibawah ini. Pada code tersebt terlihat ListView lvDataUser diset menggunakan sebuah class
MyCustomeBaseAdapter. Dan jika row ListView tersebut diclick akan memunculkan informasi
TOAST user tersebut di click karena di set OnItemClickListener.
private void TampilListUser()

{
ArrayList<SearchResults> searchResults = results;
final ListView lv1 = (ListView) getView().findViewById(R.id.lvDataUser);
lv1.setAdapter(new MyCustomBaseAdapter(getActivity(), searchResults));
lv1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
String user_name = ((TextView) view.findViewById(R.id.txtUserName)).getText().toString();

Toast.makeText(getActivity(), "User Name : " + user_name +" clicking ...",
}
});
33. Jalankan Run App dan biarkan Gradle building untuk meloadnya kedalam AVD Android. Setelah
terbuka klik Menu Form Entry untuk menambahkan sebuah data ke Database MySql atas nama
User Ihda Husnayain yang berjenis Female untuk menampilkan gambar female di List View. Klik
menu SEARCH, masukan text kriteria dengan “male”, klik button FIND akan ditampilkan :
34. Selamat mencoba dan tetap semangat
35. Source Code lengkap Fragment Frg_search adalah sbb :
package com.example.astimen.myapplication.fragment;
import android.content.Context;
import android.content.DialogInterface;
import android.content.SharedPreferences;
import android.net.Uri;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AlertDialog;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
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.JsonObjectRequest;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import com.example.astimen.myapplication.R;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.Calendar;
import java.util.HashMap;
import java.util.Map;
import java.util.TimeZone;
import java.util.ArrayList;
/**
* A simple {@link Fragment} subclass.
* Activities that contain this fragment must implement the
* {@link frg_search.OnFragmentInteractionListener} interface
* to handle interaction events.
* Use the {@link frg_search#newInstance} factory method to
* create an instance of this fragment.
*/
public class frg_search extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
// TODO: Rename and change types of parameters

private String mParam1;
private String mParam2;
private OnFragmentInteractionListener mListener;
//--deklarasi data JSON
/*
id_rec: "20170105135026564",
user_id: "asti",
user_sex: "Male",
role_admin: "true",
role_user: "false"
success: 1
*/
private static String id_rec="";

private static String user_id="";
private static String user_name="";
private static String department="";
private static String user_sex="";
private static String role_admin="";
private static String role_user="";
private static Integer istatus;
private int nom=0;

private static ArrayList<SearchResults> results = new
ArrayList<SearchResults>();
private SearchResults sr1 = new SearchResults();
//----end deklarasi
public frg_search() {
// Required empty public constructor
}
/**
* Use this factory method to create a new instance of

* this fragment using the provided parameters.
*
* @param param1 Parameter 1.
* @param param2 Parameter 2.
* @return A new instance of fragment frg_search.
*/
// TODO: Rename and change types and number of parameters
public static frg_search newInstance(String param1, String param2) {
frg_search fragment = new frg_search();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
new myikc().execute();
return inflater.inflate(R.layout.fragment_frg_search, container,

false);
}
// TODO: Rename method, update argument and hook method into UI event
public void onButtonPressed(Uri uri) {
if (mListener != null) {
mListener.onFragmentInteraction(uri);
}
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
if (context instanceof OnFragmentInteractionListener) {
mListener = (OnFragmentInteractionListener) context;
} else {
throw new RuntimeException(context.toString()
+ " must implement OnFragmentInteractionListener");
}
}
@Override
public void onDetach() {
super.onDetach();
mListener = null;
}
/**
* This interface must be implemented by activities that contain this
* fragment to allow an interaction in this fragment to be communicated
* to the activity and potentially other fragments contained in that
* activity.
* <p>
* See the Android Training lesson <a href=
*
"http://developer.android.com/training/basics/fragments/communicating.html"
* >Communicating with Other Fragments</a> for more information.
*/
public interface OnFragmentInteractionListener {
// TODO: Update argument type and name
void onFragmentInteraction(Uri uri);
}
//--myikc--
class myikc extends AsyncTask<String, String, String> {
@Override
protected void onPreExecute() {
super.onPreExecute();
protected String doInBackground(String... args) {
return null;
}
protected void onPostExecute(String file_url) {
Button btn_search = (Button)

getView().findViewById(R.id.btnSearch);
btn_search.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do something
//Toast.makeText(getActivity(), "Button Save Clicked",

EditText etKriteria = (EditText)

getView().findViewById(R.id.txtKriteria);
final String setKriteria=etKriteria.getText().toString();
if(setKriteria.trim().length()==0)
{
pesandialog("Entrian Kriteria tidak boleh kosong
...!");
etKriteria.requestFocus();
return;
//------volley
final String REGISTER_URL =

"http://10.0.2.2/aflowz/web_cari.php?kriteria="+setKriteria;
JsonObjectRequest jsonRequest = new JsonObjectRequest

(Request.Method.GET, REGISTER_URL, null, new
Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
// the response is already constructed as
a JSONObject!
Toast.makeText(getActivity(),
response.toString(), Toast.LENGTH_LONG).show();
//---proses data response
try {
//istatus=response.getInt("success");
JSONArray ja =
response.getJSONArray("datauser");
results.clear();
nom=0;
for (int i = 0; i < ja.length(); i++)

{
JSONObject c =
ja.getJSONObject(i);
// Storing each json item in

variable
nom=nom+1;
id_rec = c.getString("id_rec");
user_id = c.getString("user_id");
user_name =
c.getString("user_name");
department =
c.getString("department");
user_sex =
c.getString("user_sex");
role_admin =
c.getString("role_admin");
role_user =
c.getString("role_user");

sr1.set_user_id(user_id);
sr1.set_user_name(user_name);
sr1.set_department(department);
sr1.set_user_sex(user_sex);
sr1.set_role_admin(role_admin);
sr1.set_role_user(role_user);
results.add(sr1);
} catch (JSONException e) {
e.printStackTrace();
}
TampilListUser();
//------------------------
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError
error) {
Toast.makeText(getActivity(),"Server :" +
error.toString(), Toast.LENGTH_LONG).show();
}
}){
};
RequestQueue requestQueue =
Volley.newRequestQueue(getContext());
requestQueue.add(jsonRequest);
//-------------
}
});
}
}
void pesandialog(String pesan){

DialogInterface.OnClickListener dialogClickListener = new
DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which){
switch (which){
case DialogInterface.BUTTON_POSITIVE:
Toast.makeText(getActivity(), "Isi kembali entrian
yang kosong ...", Toast.LENGTH_LONG).show();
break;
case DialogInterface.BUTTON_NEGATIVE:
break;
}
}
};
AlertDialog.Builder builder = new

AlertDialog.Builder(getView().getContext());
builder
.setTitle("AflowZ")
.setMessage(pesan)
.setCancelable(false)
.setPositiveButton("OK",dialogClickListener)
.show();
//--endMyIkc--
public class SearchResults {

private String id_rec = "";
private String user_id = "";
private String user_name = "";
private String department = "";
private String user_sex = "";
private String role_admin = "";

private String role_user = "";
private String img_user = "";
//------id_rec
public void set_id_rec(String id_rec) {
this.id_rec = id_rec;
}
public String get_id_rec() {
return id_rec;
}
//------user_id
public void set_user_id(String user_id) {
this.user_id = user_id;
}
public String get_user_id() {
return user_id;
}
//------user_name
public void set_user_name(String user_name) {
this.user_name = user_name;
}
public String get_user_name() {
return user_name;
}
//------department
public void set_department(String department) {
this.department = department;
}
public String get_department() {
return department;
}
//------user_sex
public void set_user_sex(String user_sex) {
this.user_sex = user_sex;
}
public String get_user_sex() {
return user_sex;
}
//------role_admin
public void set_role_admin(String role_admin) {
this.role_admin = role_admin;
}
public String get_role_admin() {
return role_admin;
}
//------role_user
public void set_role_user(String role_user) {
this.role_user = role_user;
}
public String get_role_user() {
return role_user;
}
//------role_user
public void set_img_user(String img_user) {
this.img_user = img_user;
}
public String get_img_user() {
return img_user;
}
public class MyCustomBaseAdapter extends BaseAdapter {

private ArrayList<SearchResults> searchArrayList;
private LayoutInflater mInflater;
public MyCustomBaseAdapter(Context context, ArrayList<SearchResults>

results) {
searchArrayList = results;
mInflater = LayoutInflater.from(context);
}
public int getCount() {

return searchArrayList.size();
}
public Object getItem(int position) {

return searchArrayList.get(position);
}
public long getItemId(int position) {

return position;
}
public View getView(int position, View convertView, ViewGroup parent)

{
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.datauser_list_view,
null);
holder = new ViewHolder();
holder.txt_id_rec = (TextView)
convertView.findViewById(R.id.txtIdRec);
holder.txt_user_id = (TextView)
convertView.findViewById(R.id.txtUserId);
holder.txt_user_name = (TextView)
convertView.findViewById(R.id.txtUserName);
holder.txt_department = (TextView)
convertView.findViewById(R.id.txtDepartment);
holder.txt_user_admin = (TextView)
convertView.findViewById(R.id.txtRoleAdmin);
holder.txt_user_role = (TextView)
convertView.findViewById(R.id.txtRoleUser);
holder.imgPhoto = (ImageView)
convertView.findViewById(R.id.imgUser);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.txt_id_rec.setText(searchArrayList.get(position).get_id_rec());
holder.txt_user_id.setText(searchArrayList.get(position).get_user_id());
holder.txt_user_name.setText(searchArrayList.get(position).get_user_name());
holder.txt_department.setText(searchArrayList.get(position).get_department())
;
holder.txt_user_admin.setText(searchArrayList.get(position).get_role_admin())
;
holder.txt_user_role.setText(searchArrayList.get(position).get_role_user());
if(searchArrayList.get(position).get_role_admin().equals("true"))
{
holder.txt_user_admin.setText("Admin");
}
else
{
holder.txt_user_admin.setText("Not Admin");
}
if(searchArrayList.get(position).get_role_user().equals("true"))
{
holder.txt_user_role.setText("User");
}
else
{
holder.txt_user_role.setText("Not User");
}
if(searchArrayList.get(position).get_user_sex().equals("Male"))
{
holder.imgPhoto.setImageResource(R.drawable.male);
}
else
{
holder.imgPhoto.setImageResource(R.drawable.female);
}
return convertView;
}
class ViewHolder {
ImageView imgPhoto;
TextView txt_id_rec;
TextView txt_user_id;
TextView txt_user_name;
TextView txt_department;
TextView txt_user_admin;
TextView txt_user_role;
private void TampilListUser()

{
ArrayList<SearchResults> searchResults = results;
final ListView lv1 = (ListView)

getView().findViewById(R.id.lvDataUser);
lv1.setAdapter(new MyCustomBaseAdapter(getActivity(),
searchResults));
lv1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int
position,
long id) {
String user_name = ((TextView)

view.findViewById(R.id.txtUserName)).getText().toString();
Toast.makeText(getActivity(), "User Name : " + user_name +"
clicking ...", Toast.LENGTH_LONG).show();
}
});

15 Menampilkan Data JSON Dengan Listiview

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

15 Menampilkan Data JSON Dengan Listiview

Diunggah oleh

Hak Cipta:

Format Tersedia

1| ListView dan Data JSON

MENAMPILKAN DATA JSON DATABASE MYSQL DENGAN LISTVIEW

3. Buka Notepad++ dan open file webserver C:\xampp\htdocs\aflowz\volley_cari.php. Simpan

while ($row = mysql_fetch_array($result)) {

// push single product into final response array

// echoing JSON response

15. Kode XML fragment_frg_search.xml dapat dilihat dibawah ini

<?xml version="1.0" encoding="utf-8"?>

//--deklarasi data JSON

private static String id_rec="";

private int nom=0;

private SearchResults sr1 = new SearchResults();

class myikc extends AsyncTask<String, String, String> {

protected String doInBackground(String... args) {

protected void onPostExecute(String file_url) {

Button btn_search = (Button) getView().findViewById(R.id.btnSearch);

final String REGISTER_URL =

JsonObjectRequest jsonRequest = new JsonObjectRequest

Toast.makeText(getActivity(), response.toString(), Toast.LENGTH_LONG).show();

//---proses data response

for (int i = 0; i < ja.length(); i++) {

// Storing each json item in variable

sr1 = new SearchResults();

RequestQueue requestQueue = Volley.newRequestQueue(getContext());

sr1 = new SearchResults();

public class SearchResults {

private String id_rec = "";

public class MyCustomBaseAdapter extends BaseAdapter {

private LayoutInflater mInflater;

public MyCustomBaseAdapter(Context context, ArrayList<SearchResults>

public int getCount() {

public Object getItem(int position) {

public View getView(int position, View convertView, ViewGroup parent) {

convertView = mInflater.inflate(R.layout.datauser_list_view, null);

holder.imgPhoto = (ImageView) convertView.findViewById(R.id.imgUser);

holder = (ViewHolder) convertView.getTag();

private void TampilListUser()

ArrayList<SearchResults> searchResults = results;

final ListView lv1 = (ListView) getView().findViewById(R.id.lvDataUser);

lv1.setAdapter(new MyCustomBaseAdapter(getActivity(), searchResults));

String user_name = ((TextView) view.findViewById(R.id.txtUserName)).getText().toString();

34. Selamat mencoba dan tetap semangat

35. Source Code lengkap Fragment Frg_search adalah sbb :

// TODO: Rename and change types of parameters

private OnFragmentInteractionListener mListener;

//--deklarasi data JSON

private static String id_rec="";

private int nom=0;

* Use this factory method to create a new instance of

return inflater.inflate(R.layout.fragment_frg_search, container,

class myikc extends AsyncTask<String, String, String> {

protected String doInBackground(String... args) {

protected void onPostExecute(String file_url) {

Button btn_search = (Button)

//Toast.makeText(getActivity(), "Button Save Clicked",

EditText etKriteria = (EditText)

final String REGISTER_URL =

JsonObjectRequest jsonRequest = new JsonObjectRequest

//---proses data response

for (int i = 0; i < ja.length(); i++)

// Storing each json item in

sr1 = new SearchResults();

void pesandialog(String pesan){