Tutorial Xamarin Form : Membuat Aplikasi Zakat Pertanian

Hi, semuanya apa kabar, sudah lama saya tidak posting artikel tentang xamarin, admin sedang membuat buku xamarin android nih kali aja nanti berminat hehe. Nah sesuai nama blog ini yaitu xamarin indonesia, yang menyajikan tutorial xamarin dalam bahasa indonesia meliputi xamarin android, ios dan form. Jika sebelumnya sudah sangat banyak xamarin android nya, sekarang giliran xamarin form ya.

Nah pada kesempatan kali ini sih saya membuat aplikasi sederhana baut hitung Pajak, eh Zakat Pertanian. Rumusnya adalah :

1. Mencapai nishab 653 kg gabah atau 520 kg jika yang dihasilkan adalah makanan pokok
2. Jika selain makanan pokok, maka nishabnya disamakan dengan makanan pokok paling umum di sebuah daerah. 
3. Kadar zakat apabila diairi dengan air hujan, sungai, atau mata air, maka 10 % 4. Kadar zakat jika diairi dengan cara disiram (dengan menggunakan lat) atau irigasi maka zakatnya 5%.

Oke, secara rumus sudah kita dapatkan ya, lalu logikanya adalah sebagai berikut :

1. User input kumlah panen,
2. User input harga jual per kilo gram.
3. User memilih apakah perairannya menggunakan iri gasi atau tidak.

Sebagai tool IDE nya saya menggunakan Xamarin Studio ya :).  Jadi ada beberapa variable yang kita butuhkan yaitu variable untuk menampung inputan jumlah panen, harga jual, switch irigasi , sebuah fungsi button untuk menghitung dan sebuah text hasil.

Baik ikuti langkah-langkah berikut untuk membuat aplikasi Zakat Pertanian dengan Xamarin Forms.

Langkah 1:

Bukalah Xamarin Studio / Visual Studio anda. kemudian buat new project / new solution, Berikan nama ZakatApp, dan Pilih Portable Class Library ya. Kemudian next.

Langkah 2:

Buat sebuah file dari ZakatApp anda dengan tipe Content Page Xaml  namai file dengan MainPage. Pada file ini anda dapat menjumpai MainPage.xaml dan MainPage.xaml.cs ya.

Langkah 3:

Buka file App.xaml.cs anda kemudian ubah kode sebagai berikut :

using Xamarin.Forms;

namespace ZakatApp
{
 public partial class App : Application
 {
  public App()
  {
   InitializeComponent();

   MainPage = new NavigationPage(new MainPage());
  }

  protected override void OnStart()
  {
   // Handle when your app starts
  }

  protected override void OnSleep()
  {
   // Handle when your app sleeps
  }

  protected override void OnResume()
  {
   // Handle when your app resumes
  }
 }
}

Jika anda perhatikan pada code MainPage = new NavigationPage(new MainPage());
Kode diatas akan men stel default halaman pertama yang akan dibuka. So ketika aplikasi dijalankan maka MainPage.xaml ini lah yang akan terbuka terlebih dahulu.

Langkah 4 :
Buka file MainPage.xaml lalu ubah kodenya sebagai beirkut :

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
 x:Class="ZakatApp.MainPage">
 <ContentPage.Content>
  <StackLayout Padding="20">

   <StackLayout>
    <Button BackgroundColor="Teal" TextColor="White" Text="Zakat Pertanian" Clicked="OnPertanian"></Button>
   </StackLayout>
  </StackLayout>
 </ContentPage.Content>
</ContentPage>

Kita buat sebuah stack layout, pada android ya mirim dengan linear layout. Pada stacklayout didalamnya kita buat Button yang akan diberikan fungsi untuk menjalankan navigasi ke halaman Perhitungan zakat. Disana bisa anda cek  kode Clicked="OnPertanian".

Langkah 5 :
Buka file MainPage.xaml.cs lalu ubah kode sebagai berikut :

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace ZakatApp
{
 public partial class MainPage : ContentPage
 {
  public MainPage()
  {
   InitializeComponent();
   Title = "Aplikasi Zakat";
  }

  async void OnPertanian(object sender, EventArgs e)
  {
   await Navigation.PushAsync(new Pertanian());
  }
 }
}

Kode diatas kita membuat fungsi

async void OnPertanian(object sender, EventArgs e)
  {
   await Navigation.PushAsync(new Pertanian());
  }

Fungsi tersebut adalah fungsi navigasi ke halaman pertanian.

Langkah 6 :
Sekarang kita buat halaman pertanian dengan pilih add new files Content Page Xaml dengan nama Pertanian.

Kode untuk Pertanian.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ZakatApp.Pertanian">
 <ContentPage.Content>
  <ScrollView>
  <StackLayout Padding="20">
   <StackLayout>
    <Label  FontAttributes="Bold">Syarat Zakat Pertanian</Label>
    <Label FontSize="14">1. Mencapai nishab 653 kg gabah atau 520 kg jika yang dihasilkan adalah makanan pokok</Label>
    <Label FontSize="14">2. Jika selain makanan pokok, maka nishabnya disamakan dengan makanan pokok paling umum di sebuah daerah.</Label>
    <Label FontSize="14">3. Kadar zakat apabila diairi dengan air hujan, sungai, atau mata air, maka 10 %, Jika Irigasi 5%</Label>

   </StackLayout>
   <Label FontAttributes="Bold"  Margin="0, 20, 15, 5">Hitung Zakat Pertanian</Label>
   <StackLayout Margin="0, 20, 15, 5">
    <Entry x:Name="JumlahPanen" Placeholder="Jumlah Hasil Panen " />
    <Entry x:Name="HargaJual" Placeholder="Harga Jual" />
    <Label TextColor="Silver" Text="Apakah Menggunakan Irigasi ?" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Start" />
          <Switch IsToggled="False" Toggled="Handle_Toggled"/>
    <Label Text="Pilih" x:Name="Irigasi"></Label>
    <Button Text="Hitung" BackgroundColor="Silver" Clicked="OnHitung"></Button>
   </StackLayout>
   <StackLayout Margin="0, 20, 15, 5">
    <Label Text="Zakat Pertanian Anda"/>
    <Label x:Name="JumlahZakat" Text="10000" FontSize="50"/>
   </StackLayout>
  </StackLayout>
  </ScrollView>
 </ContentPage.Content>
</ContentPage>

Kode diatas kita membuat form untuk memasukan inputan dengan Entry, untuk text dengan Label, Button untuk proses hitung dan Switch untuk memilih irigasi atau tidak. Pada button bisa kalian lihat ada Clicked = "onHitung". onHitung adalah sebuah fungsi untuk memprosesnya. Kalau di android kita mengenal id maka di xamarin form kita menggunakan x:Name.

Langkah 7 :
Mengubah kode Pertanian.xaml.cs

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace ZakatApp
{
 public partial class Pertanian : ContentPage
 {
  public Pertanian()
  {
   InitializeComponent();
   Title = "Zakat Pertanian";
  }

  void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
  {
   bool isToogled = e.Value;
   if (isToogled == true)
   {
    Irigasi.Text = "Ya";
   }
   else
   {
    Irigasi.Text = "Tidak";
   }

  }

  void OnHitung(object sender, EventArgs args)
  {
   double panenan = double.Parse(JumlahPanen.Text);
   double harganya = double.Parse(HargaJual.Text);
   double hasil;

   string apairigasi = Irigasi.Text;

   if (apairigasi == "Ya")
   {
    hasil = panenan * harganya * 0.05;
   }
   else
   { 
    hasil = panenan * harganya * 0.1;
   }

   JumlahZakat.Text = hasil.ToString();
  }


 }
}

Kode switch yaitu kode berikut

void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
  {
   bool isToogled = e.Value;
   if (isToogled == true)
   {
    Irigasi.Text = "Ya";
   }
   else
   {
    Irigasi.Text = "Tidak";
   }

  }

Adalah kode untuk memilih apakah pake irigasi atau tidak, karena perhitungan presentase nya jika irigasi dikalikan 5% jika tidak maka 10%.

Kode untuk mengitung sebagai berikut :

void OnHitung(object sender, EventArgs args)
  {
   double panenan = double.Parse(JumlahPanen.Text);
   double harganya = double.Parse(HargaJual.Text);
   double hasil;

   string apairigasi = Irigasi.Text;

   if (apairigasi == "Ya")
   {
    hasil = panenan * harganya * 0.05;
   }
   else
   { 
    hasil = panenan * harganya * 0.1;
   }

   JumlahZakat.Text = hasil.ToString();
  }

Kita parse dulu menjadi tipe double agar bisa dihitung ya, terus sesuaikan apakah pake irigasi atau tidak dan set hasilnya pada label.

Baik, kira-kira begitulah cara pembuatan aplikasi zakat pertanian dengan xamairn form cross platform.

Source : https://github.com/banyucenter/ZakatPertanian

Semoga bermanfaat.

Salam.

WhatsApp : 0821-1394-0427
Facebook : ipungz.purwono