Tutorial Xamarin Android : Intent Pada Xamarin (Dengan Backend PHP MysQL) Part 2

Baiklah, kita akan melanjutkan tutorial penggunaan Intent ini, pastikan kalian mengikuti tutorial sebelumnya yaitu Pada Part 1 : Tutorial Xamarin Android : Intent (1) . Pada langkah sebelumnya kita sudah memiliki sebuah database yang memiliki beberapa tabel antara lain tb_level, tb_anggota dan tb_produk. Selain itu juga memiliki beberapa code php antara lain : koneksi.php , login.php, produk.php dan detail_produk.php. Kita juga sudah mempraktekan passing data intent id_level yang disediakan oleh MainActivity yang dapat dikirimkan ke WelcomeActivity.

Langkah selanjutnya adalah membuat sebuah Activity baru yaitu ProdukActivity.cs, disini kita akan meLoad Data JSON dalam bentuk ListView yang kita ambil dari generate JSON produk.php. Jika kalian cek maka produk.php memiliki struktur JSON sebagai berikut.

[
{
id: "4",
nama_produk: "Hardisk Toshiba 1 TB",
harga: "1000000",
qty: "45",
keterangan: "Hardisk Eksternal"
},
{
id: "3",
nama_produk: "SSD 1 GB Samsung",
harga: "2000000",
qty: "50",
keterangan: "SSD Tercepat 2017"
},
{
id: "2",
nama_produk: "Microsoft Surface Pro",
harga: "30000000",
qty: "100",
keterangan: "Laptop Mahal performa menantang"
},
{
id: "1",
nama_produk: "Laptop MacBook Pro 2017",
harga: "18000000",
qty: "100",
keterangan: "Laptop terbaik 2017"
}
]

Nah data-data JSON dalam bentuk Array yang kita generate dari file produk.php tersebut akan kita tampilkan dalam bentuk ListView. Jika kalian mengikuti tutorial saya  yg membahas listview maka kita membutuhkan sebuah Class Khusus untuk menampung data nya , pada kesempatan kali ini saya membuat sebuah class dengan nama Produk.cs.

Produk.cs

using System;
namespace AppIntent
{
 public class Produk
 {
  public Produk()
  {
  }

  public int id { get; set; }
  public string nama_produk { get; set; }
  public string harga { get; set; }
  public string qty { get; set; }
  public string keterangan { get; set; }
 }
}

code diatas akan mendefinisikan nama field pada tb_produk di database anda.

Selanjutnya kita membutuhkan sebuah Adapter yaitu

MyListViewAdapter.cs

using System;
using System.Collections.Generic;
using Android.Widget;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using System.Net;
using Newtonsoft.Json.Linq;
namespace AppIntent
{
 public class MyListViewAdapter : BaseAdapter<Produk>
 {
  public MyListViewAdapter()
  {
  }

  public List<Produk> itemProduk;
  private Context mContext;

  public MyListViewAdapter(Context context, List<Produk> items)
  {
   itemProduk = items;
   mContext = context;
  }

  public override int Count
  {
   get
   {
    return itemProduk.Count;
   }
  }

  public override Produk this[int position]
  {
   get
   {
    return itemProduk[position];
   }
  }

  public override long GetItemId(int position)
  {
   return position;
  }



  public override View GetView(int position, View convertView, ViewGroup parent)
  {
   View row = convertView;
   if (row == null)
   {
    row = LayoutInflater.From(mContext).Inflate(Resource.Layout.ListViewRow, null, false);

   }

   TextView txtNamaProduk = row.FindViewById<TextView>(Resource.Id.txtNamaProduk);
   txtNamaProduk.Text = itemProduk[position].nama_produk;

   TextView txtHarga = row.FindViewById<TextView>(Resource.Id.txtHarga);
   txtHarga.Text = itemProduk[position].harga;


   return row;
  }
 }
}

Adapter akan dijadikan sebuah media untuk mengambil dan menaruh data ke dalam listview. Oleh karena itu kita membutuhkan sebuah layout yaitu Produk.axml

Produk.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">
    <TextView
        android:text="List Produk"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="22.0dp" />
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listData"
        android:layout_marginTop="9.0dp" />
</LinearLayout>

Kemudian isi format ListViewnya kita buat

ListViewRow.xml nya

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">
    <TextView
        android:text="Nama Produk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaProduk"
        android:textSize="18dp"
        android:textStyle="bold" />
    <TextView
        android:text="2000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtHarga"
        android:textSize="12dp" />
</LinearLayout>

Okey, setelah tampilan, adapternya dah siap kita buat Activity dengan nama ProdukActivity.cs ya

ProdukActivity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using Newtonsoft.Json.Linq;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Newtonsoft.Json;

namespace AppIntent
{
 [Activity(Label = "Produk")]
 public class ProdukActivity : Activity

 {
  private List<Produk> itemProduk;
  private ListView DaftarProduk;
  private Uri BaseUri = new Uri("https://banyu.center/xamarin/produk.php?");

  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Produk);
   DaftarProduk = FindViewById<ListView>(Resource.Id.listData);
   itemProduk = new List<Produk>();
   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   webClient.DownloadStringCompleted += WebClient_DownloadStringCompleted;




  }

  private void WebClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  {
   RunOnUiThread(() =>
   {
    itemProduk = JsonConvert.DeserializeObject<List<Produk>>(e.Result);
    MyListViewAdapter adapter = new MyListViewAdapter(this, itemProduk);
    DaftarProduk.Adapter = adapter;

    DaftarProduk.ItemClick += DaftarProduk_ItemClick;


   }
   );


  }


  void DaftarProduk_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  {
   //var DaftarProduk = sender as ListView;
   var t = itemProduk[e.Position];
   Toast.MakeText(this, t.id.ToString(), ToastLength.Short).Show();

   string str = t.id.ToString();
   Intent a = new Intent(this, typeof(DetailActivity));
   a.PutExtra("sid", str);
   StartActivity(a);
  }
 }
}

Nah disini kita juga bekerja dengan Intents untuk mengirim Id ya, Id ini nantinya akan kita gunakan untuk mengambil Detail produk jika ListView item di Klik .

void DaftarProduk_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  {
   //var DaftarProduk = sender as ListView;
   var t = itemProduk[e.Position];
   Toast.MakeText(this, t.id.ToString(), ToastLength.Short).Show();

   string str = t.id.ToString();
   Intent a = new Intent(this, typeof(DetailActivity));
   a.PutExtra("sid", str);
   StartActivity(a);
  }

Kode diatas adalah sebuah aktivitas ketika listview di klik maka akan dikirimkan sebuah id yang bisa di passing pada DetailActivity

Selanjutnya kita akan membuat Activity baru yaitu DetailActivity.cs yang digunakan untuk menampilkan data JSON detail_produk.php yang disesuaikan berdasarkan id yang di klik pada listview. Misalkan pada listview kita klik id= 4 , maka di detail akan ditampilkan semua data nya yaitu

{
id: "4",
nama_produk: "Hardisk Toshiba 1 TB",
harga: "1000000",
qty: "45",
keterangan: "Hardisk Eksternal"
},

Kode DetailActivity.cs tersebut juga mengambil id yang telah diset oleh ProdukActivity.cs

DetailActivity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using Newtonsoft.Json.Linq;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Newtonsoft.Json;

namespace AppIntent
{
 [Activity(Label = "Detail Produk")]
 public class DetailActivity : Activity

 {
  string pId;


  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.ListViewDetail);
   TextView idnya = FindViewById<TextView>(Resource.Id.txtId);
   TextView namaproduk = FindViewById<TextView>(Resource.Id.txtNamaProduk);
   TextView harga = FindViewById<TextView>(Resource.Id.txtHarga);
   TextView qty = FindViewById<TextView>(Resource.Id.txtQty);
   TextView keterangan = FindViewById<TextView>(Resource.Id.txtKeterangan);

   string idproduk = Intent.GetStringExtra("sid");

   pId = idproduk;
   WebClient client = new WebClient();
   var jsonstring = client.DownloadString("https://banyu.center/xamarin/detail_produk.php?id=" + pId);
   JObject o = JObject.Parse(jsonstring);
   var ab = o.GetValue("detail_produk").ToString();
   JArray arr = JArray.Parse(ab);
   idnya.Text = arr[0]["id"].ToString();
   namaproduk.Text = arr[0]["nama_produk"].ToString();
   harga.Text = arr[0]["harga"].ToString();
   qty.Text = arr[0]["qty"].ToString();
   keterangan.Text = arr[0]["keterangan"].ToString();


  }





 }
}

Untuk layout nya kita membuat

ListViewDetail.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">
    <TextView
        android:text="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtId" />
    <TextView
        android:text="Nama Produk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaProduk"
        android:textSize="18dp"
        android:textStyle="bold" />
    <TextView
        android:text="2000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtHarga"
        android:textSize="12dp" />
    <TextView
        android:text="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtQty"
        android:textSize="12dp" />
    <TextView
        android:text="Keterangan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtKeterangan"
        android:textSize="12dp" />
</LinearLayout>