Learn Codingers: Tutorial Menampilkan Gambar dari Localhost dengan Library Picasso pada Eclipse Android

Selamat malam, semoga anda sekeluarga dalam keadaan sehat sejahtera. Postingan kali ini kita akan membahas cara menampilkan gambar dari server localhost ke listview android menggunakan library picasso. Sebelumnya, anda harus men-download library picasso dan memasukkan ke dalam folder libs pada project anda, anda dapat men-donwload nya disini.

Buat database dengan nama test, buat tabel dengan nama tmotor

Isi tabe dengan data seperti pada gambar dibawah ini, pastikan image nya ada di dalam folder di htdoc/test/img/

Buat file PHP dengan nama semua.php lalu simpan ke htdoc/test/
semua.php

<?php
$conn=mysql_connect("localhost","root","");
mysql_select_db("test",$conn);
$cari='';
 
$cari="SELECT * FROM tmotor";
 
$q = mysql_query($cari);
$v = '{"produk" : [';
while($r=mysql_fetch_array($q))
{
 if(strlen($v)<15)
 {
  $v .= '{"pid" : "'.strip_tags($r['id']).'","nama" : "'.strip_tags($r['namamotor']).'","hrg" : "'.strip_tags($r['harga']).'", "gambar" : "'.strip_tags($r['img']).'"}';
 }
 else
 {
  $v .= ',{"pid" : "'.strip_tags($r['id']).'","nama" : "'.strip_tags($r['namamotor']).'","hrg" : "'.strip_tags($r['harga']).'", "gambar" : "'.strip_tags($r['img']).'"}';
 }
 
}
$v .= ']}';
 echo $v;
?>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/maroon"
    android:orientation="vertical"
    android:padding="2dp"
    tools:context=".IndustyList" >
 
    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</LinearLayout>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    android:orientation="horizontal"
    android:paddingTop="4dp" >
 
    <LinearLayout
        android:id="@+id/gbr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="4dp"
        android:layout_marginRight="5dip"
        android:padding="3dip" >
 
        <ImageView
            android:id="@+id/gambar"
            android:layout_width="80dip"
            android:layout_height="80dip"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/gbr"
        android:layout_marginTop="20dp"
        android:layout_toRightOf="@+id/gbr"
        android:orientation="vertical" >
 
        <TextView
            android:id="@+id/id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:visibility="gone" />
 
        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="@color/black"
            android:textSize="16sp"
            android:textStyle="bold" />
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
 
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Harga : "
                android:textColor="@color/black"
                android:textSize="14sp"
                android:textStyle="bold" />
 
            <TextView
                android:id="@+id/harga"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="80000"
                android:textColor="@color/black"
                android:textSize="14sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>
 
</RelativeLayout>

JSONParserGambar.java

package com.codingers;
 
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
 
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONException;
import org.json.JSONObject;
 
import android.util.Log;
 
public class JSONParserGambar {
 
 static InputStream is = null;
 static JSONObject jObj = null;
 static String json = "";
 
 // constructor
 public JSONParserGambar() {
 
 }
 
 public JSONObject AmbilJson(String url) {
 
  // Making HTTP request
  try {
   // defaultHttpClient
   DefaultHttpClient httpClient = new DefaultHttpClient();
   HttpPost httpPost = new HttpPost(url);
 
   HttpResponse httpResponse = httpClient.execute(httpPost);
   HttpEntity httpEntity = httpResponse.getEntity();
   is = httpEntity.getContent();
 
  } catch (UnsupportedEncodingException e) {
   e.printStackTrace();
  } catch (ClientProtocolException e) {
   e.printStackTrace();
  } catch (IOException e) {
   e.printStackTrace();
  }
 
  try {
   BufferedReader reader = new BufferedReader(new InputStreamReader(
     is, "iso-8859-1"), 8);
   StringBuilder sb = new StringBuilder();
   String line = null;
   while ((line = reader.readLine()) != null) {
    sb.append(line + "\n");
   }
   is.close();
   json = sb.toString();
  } catch (Exception e) {
   Log.e("Buffer Error", "Error converting result " + e.toString());
  }
 
  // try parse the string to a JSON object
  try {
   jObj = new JSONObject(json);
  } catch (JSONException e) {
   Log.e("JSON Parser", "Error parsing data " + e.toString());
  }
 
  // return JSON String
  return jObj;
 
 }
}

CustomAdapter.java

package com.codingers;
 
import java.util.ArrayList;
import java.util.HashMap;
 
import com.squareup.picasso.Picasso;
 
import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.ImageView;
import android.widget.TextView;
 
public class CustomAdapter extends BaseAdapter {
 
 private Activity activity;
 private ArrayList<HashMap<String, String>> data;
 private static LayoutInflater inflater = null;
 
 public CustomAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
  activity = a;
  data = d;
  inflater = (LayoutInflater) activity
    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 }
 
 public int getCount() {
  return data.size();
 }
 
 public Object getItem(int position) {
  return position;
 }
 
 public long getItemId(int position) {
  return position;
 }
 
 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  View vi = convertView;
  if (convertView == null)
 
   vi = inflater.inflate(R.layout.list_item, null);
  TextView id = (TextView) vi.findViewById(R.id.id);
  TextView nama = (TextView) vi.findViewById(R.id.name);
  TextView harga = (TextView) vi.findViewById(R.id.harga);
  ImageView gambar = (ImageView) vi.findViewById(R.id.gambar);
  HashMap<String, String> berita = new HashMap<String, String>();
  berita = data.get(position);
 
  id.setText(berita.get(IndustyList.TAG_ID));
  nama.setText(berita.get(IndustyList.TAG_NAME));
  harga.setText(berita.get(IndustyList.TAG_HRG));
  Picasso.with(activity).load(berita.get(IndustyList.TAG_IMG))
    .into(gambar);
 
  return vi;
 }
 
}

MainActivity.java

package com.codingers;
 
import java.util.ArrayList;
import java.util.HashMap;
 
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.Activity;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.os.StrictMode;
import android.util.Log;
import android.view.MenuItem;
import android.widget.ListView;
import android.widget.SearchView;
 
public class IndustyList extends Activity {
 static final String TAG_SUCCESS = "success";
 static final String TAG_USER = "produk";
 static final String TAG_ID = "pid";
 static final String TAG_NAME = "nama";
 static final String TAG_HRG = "hrg";
 static final String TAG_IMG = "gambar";
 ListView lv;
 String[] country_names, iso_codes;
 TypedArray country_flags;
 ArrayList<HashMap<String, String>> data_map = new ArrayList<HashMap<String, String>>();
 CustomAdapter adapter;
 SearchView searchView;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder()
    .permitAll().build();
  StrictMode.setThreadPolicy(policy);
  lv = (ListView) findViewById(R.id.list_view);
  String url_load = "http://10.0.2.2/test/semua.php";
  String imgurl = "http://10.0.2.2/test/img/";
  JSONParserGambar jParser = new JSONParserGambar();
  JSONObject json = jParser.AmbilJson(url_load);
  // cek logcat untuk response dari json
  Log.d("Semua : ", json.toString());
  try {
 
   JSONArray industri = json.getJSONArray(TAG_USER);
   Log.d("WMWMWMWMWMWMWMWMW : ", industri.length() + "");
 
   for (int i = 0; i < industri.length(); i++) {
    JSONObject ar = industri.getJSONObject(i);
 
    String nama = ar.getString(TAG_NAME);
    String gambar = imgurl + ar.getString(TAG_IMG);
    String pid = ar.getString(TAG_ID);
    String harga = ar.getString(TAG_HRG);
 
    HashMap<String, String> map = new HashMap<String, String>();
 
    map.put(TAG_NAME, nama);
    map.put(TAG_IMG, gambar);
    map.put(TAG_ID, pid);
    map.put(TAG_HRG, harga);
    data_map.add(map);
   }
 
  } catch (JSONException e) {
   e.printStackTrace();
 
  }
  adapter = new CustomAdapter(this, data_map);
  lv.setAdapter(adapter);
 
  // searchView.setOnQueryTextListener(this);
 
 }
 
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // Take appropriate action for each action item click
  return true;
 }
}