CRUD Xamarin Android dengan PHP MySQL Backend

Pada kesempatan kali ini, saya telah bereksperiment membuat aplikasi android dengan xamarin yaitu sebuah aplikasi CRUD sederhana. Seperti pada umumnya sebuah aplikasi tidak pernah lepas dari peran CRUD yaitu (Create, Read, Update dan Delete) . Jika kalian sebelumnya adalah developer PHP dan MySQL tentunya istilah CRUD adalah perkara yang waib dikuasai sebelum melangkah lebih lanjut.

Tutorial Xamarin CRUD ini saya persembahkan buat teman-teman seperjuangan saya dalam mempelajari xamarin :). Saya meringkasnya dengan bahasa semudah mungkin walaupun berbelit-belit karena saya bukan penulis yang hebat. Oke lah tanpa basa-basi saya akan menjelaskan tutorial CRUD dengan xamarin android ini.

Yang perlu dipesiapkan adalah :

1. Sebuah database untuk menampung data kalian
2. Tabel-tabel didalam database yaitu tabel tb_produk
3. File PHP untuk Create, Read, Update dan Delete
4. Xamarin IDE untuk membuat aplikasi androidnya

Langkah pertama

Pembuatan Database dengan nama yang kalian suka, kalau saya membuat database dengan nama u9801493_xamarin pada database tersebut saya buat tabel dengan nama tb_produk 

Langkah 2
Kita masukan beberapa data sample ke dalam tb_produk tersebut

INSERT INTO `tb_produk` (`id`, `nama_produk`, `harga`, `qty`, `keterangan`) VALUES
(5, 'MacBook Pro Superior', 30000, 123, 'Oke kali'),
(9, 'Sandisk Ultra 1 TB', 150000, 2345, 'Flashdisk'),
(10, 'SSD Samsung 1 Teraboi', 3000000, 457, 'SSD Tercepat'),
(11, 'Seagate Hardisk External', 900000, 100, 'Hardisk Andalan');

Langkah 3
Siapkan beberapa file PHP dan upload di server anda, pada kasus kali ini saya taruh di folder xamarin, jadi nanti alamat URL JSON nya http://namawemu.com/xamarin/(nama_filejson.php)

produk.php

<?php
    header('content-type: application/json');
    include "koneksi.php";
 
     $sql="SELECT * FROM tb_produk ORDER BY id DESC";
     $result=mysql_query($sql);
     while($hasil=mysql_fetch_assoc($result)) {
      $output[]=$hasil;
     }
     $hasil =json_encode($output);
     echo $hasil;
?>

detail_produk.php

<?php
    header('content-type: application/json');
 include "koneksi.php";
  
 $id = $_GET['id'];
 
 
     $sql="SELECT * FROM tb_produk Where id='$id' ORDER BY id DESC";
     $result=mysql_query($sql);
     while($hasil=mysql_fetch_assoc($result)) {
      $output[]=$hasil;
     }
     $hasil =json_encode($output);
     echo "{"detail_produk":" . $hasil . "}";
     
?>

tambah_produk.php

<?php
$response= array();
header('content-type: application/json');
include("koneksi.php");

$id = $_POST['id'];
$xnamaproduk = $_POST['nama_produk'];
$xharga = $_POST['harga'];
$xqty = $_POST['qty'];
$xketerangan = $_POST['keterangan'];


$sql = "INSERT INTO tb_produk(nama_produk,harga,qty,keterangan) VALUES ('$xnamaproduk','$xharga','$xqty','$xketerangan')";
 $result = mysql_query($sql);

?>

edit_produk.php

<?php
$response= array();
header('content-type: application/json');
include("koneksi.php");

$id = $_POST['id'];
$xnamaproduk = $_POST['nama_produk'];
$xharga = $_POST['harga'];
$xqty = $_POST['qty'];
$xketerangan = $_POST['keterangan'];


$sql = "UPDATE tb_produk SET nama_produk='$xnamaproduk',harga='$xharga',qty='$xqty',keterangan='$xketerangan' where id='$id'";
$result = mysql_query($sql);

?>

delete_produk.php

<?php
    header('content-type: application/json');
 include "koneksi.php";
  
 $id = $_GET['id'];
 
 
     $sql="DELETE FROM tb_produk Where id='$id' ORDER BY id DESC";
     $result=mysql_query($sql);
     while($hasil=mysql_fetch_assoc($result)) {
      $output[]=$hasil;
     }
     $hasil =json_encode($output);
     echo "{"detail_delete":" . $hasil . "}";
     

?>

Langkah 4
Persiapkan xamarin IDE kalian dan buatlah sebuah project baru dengan nama CRUD dengan modern development. Kemudian pada Component- Get More Component lalu instal JSON.NET

Code-code C# Xamarin sebagai berikut

MainActivity.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 CRUD
{
 [Activity(Label = "Produk",MainLauncher = true)]
 public class MainActivity : Activity

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


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

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);

   DaftarProduk = FindViewById<ListView>(Resource.Id.listData);
   itemProduk = new List<Produk>();
   mProgressBar = FindViewById<ProgressBar>(Resource.Id.listProgressBar);

   Button btnTambah = FindViewById<Button>(Resource.Id.btnTambah);
   btnTambah.Click += BtnTambah_Click;

   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   mProgressBar.Visibility = ViewStates.Visible;
   webClient.DownloadStringCompleted += WebClient_DownloadStringCompleted;

  }

  void BtnTambah_Click(object sender, EventArgs e)
  {
   Intent a = new Intent(this, typeof(TambahActivity));
   StartActivity(a);

  }

  //Parsing JSON ke ListView
  private void WebClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  {
   RunOnUiThread(() =>
   {
    itemProduk = JsonConvert.DeserializeObject<List<Produk>>(e.Result);
    MyListViewAdapter adapter = new MyListViewAdapter(this, itemProduk);
    mProgressBar.Visibility = ViewStates.Gone;
    DaftarProduk.Adapter = adapter;

    DaftarProduk.ItemClick += DaftarProduk_ItemClick;


   }
   );


  }

  //JIka listview 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);
  }
 }
}

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
    <Button
        android:text="TAMBAH"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnTambah" />
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listData"
        android:layout_marginTop="58.5dp" />
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listProgressBar"
        android:indeterminate="true"
        android:layout_centerInParent="true"
        android:visibility="gone" />
</RelativeLayout>

TambahActivity.cs

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Net;
using System.Text;

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

namespace CRUD
{
 [Activity(Label = "TambahActivity")]
 public class TambahActivity : Activity
 {
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Tambah);

   EditText namaproduk = FindViewById<EditText>(Resource.Id.txtNamaProduk);
   EditText harga = FindViewById<EditText>(Resource.Id.txtHarga);
   EditText qty = FindViewById<EditText>(Resource.Id.txtQty);
   EditText keterangan = FindViewById<EditText>(Resource.Id.txtKeterangan);
   Button btnAdd= FindViewById<Button>(Resource.Id.btnAdd);

   //Prose Tambah Data
   btnAdd.Click += delegate {
   string xnamaproduk = namaproduk.Text;
   string xharga = harga.Text;
   string xqty = qty.Text;
   string xketerangan = keterangan.Text;

   var data = new NameValueCollection();

   data["nama_produk"] = xnamaproduk;
   data["harga"] = xharga;
   data["qty"] = xqty;
   data["keterangan"] = xketerangan;


   //data["posisi"] = sposisi;
   WebClient xclient = new WebClient();
   xclient.Encoding = Encoding.UTF8;
   var reply = xclient.UploadValues
   ("https://banyu.center/xamarin/tambah_produk.php", "POST", data);


   //set alert untuk konfirmasi
   AlertDialog.Builder alert = new AlertDialog.Builder(this);
   alert.SetTitle ("Konfirmasi Tambah");
   alert.SetMessage ("Apakah anda yakin akan menambah data ini?");
   alert.SetPositiveButton ("Tambah", (senderAlert, args) => {
   Toast.MakeText(this ,"Data berhasil ditambah!" , ToastLength.Short).Show();

   //Jika telah diubah diarahkan ke MainActivity

   Intent a = new Intent(this, typeof(MainActivity));
   StartActivity(a);
   

   });

   alert.SetNegativeButton ("Cancel", (senderAlert, args) => {
    Toast.MakeText(this ,"Data tidak ditambah!" , ToastLength.Short).Show();
    });

   Dialog dialog = alert.Create();
   dialog.Show();
    
   };

   // Create your application here
  }


 }
}

Tambah.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">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaProduk"
        android:textSize="18dp"
        android:textStyle="bold"
        android:hint="Nama Produk" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtHarga"
        android:textSize="12dp"
        android:hint="Harga" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtQty"
        android:textSize="12dp"
        android:hint="Qty" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtKeterangan"
        android:textSize="12dp"
        android:hint="Keterangan" />
    <Button
        android:text="TAMBAH"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnAdd" />
</LinearLayout>

Membuat Class dengan nama Produk.cs

Produk.cs

using System;
namespace CRUD
{
 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; }
 }
}

Adapter ListView dengan nama MyListViewAdapter.cs

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 CRUD
{
 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;
  }
 }
}

ListViewRow.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="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>

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="20dp">
    <EditText
        android:text="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtId" />
    <EditText
        android:text="Nama Produk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaProduk"
        android:textSize="18dp"
        android:textStyle="bold" />
    <EditText
        android:text="2000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtHarga"
        android:textSize="12dp" />
    <EditText
        android:text="100"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtQty"
        android:textSize="12dp" />
    <EditText
        android:text="Keterangan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtKeterangan"
        android:textSize="12dp" />
    <Button
        android:text="UPDATE"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnUpdate" />
    <Button
        android:text="HAPUS"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnDelete" />
</LinearLayout>

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;
using System.Collections.Specialized;

namespace CRUD
{
 [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);
   EditText idnya = FindViewById<EditText>(Resource.Id.txtId);
   EditText namaproduk = FindViewById<EditText>(Resource.Id.txtNamaProduk);
   EditText harga = FindViewById<EditText>(Resource.Id.txtHarga);
   EditText qty = FindViewById<EditText>(Resource.Id.txtQty);
   EditText keterangan = FindViewById<EditText>(Resource.Id.txtKeterangan);
   Button btnUpdate = FindViewById<Button>(Resource.Id.btnUpdate);
   Button btnDelete = FindViewById<Button>(Resource.Id.btnDelete);

   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();

   //Fungsi Ubah Data
   btnUpdate.Click += delegate {
    
   string xid = idnya.Text;
   string xnamaproduk = namaproduk.Text;
   string xharga = harga.Text;
   string xqty = qty.Text;
   string xketerangan = keterangan.Text;

   var data = new NameValueCollection();
   data["id"] = xid;
   data["nama_produk"] = xnamaproduk;
   data["harga"] = xharga;
   data["qty"] = xqty;
   data["keterangan"] = xketerangan;


   //data["posisi"] = sposisi;
   WebClient xclient = new WebClient();
   xclient.Encoding = Encoding.UTF8;
   var reply = xclient.UploadValues
   ("https://banyu.center/xamarin/edit_produk.php", "POST", data);


   //set alert untuk konfirmasi
   AlertDialog.Builder alert = new AlertDialog.Builder(this);
   alert.SetTitle ("Konfirmasi Update");
   alert.SetMessage ("Apakah anda yakin akan mengupdate data ini?");
   alert.SetPositiveButton ("Ubah", (senderAlert, args) => {
   Toast.MakeText(this ,"Data berhasil diubah!" , ToastLength.Short).Show();

   //Jika telah diubah diarahkan ke MainActivity

   Intent a = new Intent(this, typeof(MainActivity));
   StartActivity(a);
   

   });

   alert.SetNegativeButton ("Cancel", (senderAlert, args) => {
    Toast.MakeText(this ,"Data tidak diubah!" , ToastLength.Short).Show();
   });

   Dialog dialog = alert.Create();
   dialog.Show();
       
   };

   //Buat Fungsi Hapus Data
   btnDelete.Click += delegate {
   WebClient clients = new WebClient();
   var jsondelete = clients.DownloadString("https://banyu.center/xamarin/delete_produk.php?id=" + pId);

   //set alert untuk konfirmasi
   AlertDialog.Builder alert = new AlertDialog.Builder(this);
   alert.SetTitle ("Konfirmasi Hapus");
   alert.SetMessage ("Apakah anda yakin akan menghapus data ini?");
   alert.SetPositiveButton ("Hapus", (senderAlert, args) => {
   Toast.MakeText(this ,"Data berhasil dihapus!" , ToastLength.Short).Show();

   //Jika telah diubah diarahkan ke MainActivity

   Intent a = new Intent(this, typeof(MainActivity));
   StartActivity(a);
   

   });

   alert.SetNegativeButton ("Cancel", (senderAlert, args) => {
   Toast.MakeText(this ,"Data tidak dihapus!" , ToastLength.Short).Show();
   });

   Dialog dialog = alert.Create();
   dialog.Show();
   };


  }


 }
}