Tutorial Xamarin Android : Membuat Halaman Login dan Registrasi User dengan PHP + MySQL (Part 2)

Yap, kita lanjutkan pada sesi kedua dalam membuat halaman login dan register dengan xamarin  android dengan php mysql. Jika kalian tertinggal bisa cek persiapan file php dan server pada tutorial sebelumnya yaitu  Tutorial Xamarin Android : Membuat Halaman Login dan Registrasi User dengan PHP + MySQL (Part 1). Saya asumsikan kalian sudah mengikuti tutorial sebelumnya ya, baik kita akan melanjutkan yaitu mulai langkah ke 6.

Langkah 6
Buatlah sebuah project baru dengan xamarin anda yaitu blank android apps boleh menggunakan visual studio atau xamarin studio. Buat project dengan nama LoginRegisterMySQL.

Langkah 7
Buatlah sebuah desain layout untuk login yaitu dengan membuka Main.axml lalu ubah codenya sebagai berikut

<?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:minWidth="25px"
    android:minHeight="25px"
    android:padding="20dp">
    <TextView
        android:text="Selamat Datang "
        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="25.5dp" />
    <TextView
        android:text="di Aplikasi Android Xamarin "
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginBottom="39.5dp" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtUsername"
        android:hint="Username" />
    <EditText
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtPassword"
        android:layout_marginBottom="62.0dp"
        android:hint="Password" />
    <Button
        android:text="LOGIN"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnLogin"
        android:background="#ffff5722" />
    <Button
        android:text="REGISTER"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnRegister"
        android:background="#ff8bc34a" />
</LinearLayout>

Langkah 8
Buat file layout baru pada folder Resources -> Layout dengan nama Register.axml , halaman ini adalah halaman pendaftaran member baru , dengan code sebagai berkut

<?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:minWidth="25px"
    android:minHeight="25px"
    android:padding="20dp">
    <TextView
        android:text="Hallo,"
        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="25.5dp" />
    <TextView
        android:text="Silahkan Lakukan Registrasi Member"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginBottom="39.5dp" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtUsernameDaftar"
        android:hint="Username" />
    <EditText
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtPasswordDaftar"
        android:layout_marginBottom="62.0dp"
        android:hint="Password" />
    <Button
        android:text="REGISTER"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnDaftar"
        android:background="#ff8bc34a" />
</LinearLayout>

Langkah 9
Buat kembali sebuah layout dengan nama Welcome.axml yaitu halaman ketika login berhasil dengan code seperti berikut

<?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:background="#ff00bcd4">
    <TextView
        android:text="Cie , sudah berhasil Login"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_centerInParent="true"
        android:textSize="24dp" />
</RelativeLayout>

Nah persiapan pembuatan layout sudah selesai sekarang saat nya kita bermain dengan Activity .

Langkah 10 
Pada folder Components -> Klik Kanan -> Get More Components -> Cari JSON lalu pilih dan instal JSON pada aplikasi anda.

Langkah 11
Buka file MainActivity.cs lalu modifikasi codenya seperti berikut ini.

using Android.App;
using Android.Widget;
using Android.OS;
using System.Net;
using Newtonsoft.Json.Linq;

namespace LoginRegisterMySQL
{
 [Activity(Label = "LoginRegisterMySQL", MainLauncher = true)]
 public class MainActivity : Activity
 {
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   EditText username = FindViewById<EditText>(Resource.Id.txtUsername);
   EditText password = FindViewById<EditText>(Resource.Id.txtPassword);
   Button btnlogin = FindViewById<Button>(Resource.Id.btnLogin);
   Button btnregister = FindViewById<Button>(Resource.Id.btnRegister);


   //Jalankan Aktivity Register Ketika Button Register di Klik
   btnregister.Click += (object sender, System.EventArgs e) =>
   {
    StartActivity(typeof(RegisterActivity));
   };

   //Jalankan fungsi untuk login cek apakah username dan password benar?
   btnlogin.Click += delegate {
    string xusername = username.Text;
    string xpassword = password.Text;
    WebClient client = new WebClient();
    //Panggil file php untuk cek login di server mu
    var jsonstring = client.DownloadString("https://alamatwebsitekamu.com/login.php?username=" + xusername + "&xpassword=" + xpassword);
    JObject o = JObject.Parse(jsonstring);
    var ab = o.GetValue("login_event").ToString();

    if (string.IsNullOrWhiteSpace(ab))
    {
     Toast.MakeText(this, "Username dan Password salah", ToastLength.Short).Show();
    }
    else
    {
     Toast.MakeText(this, "Login Berhasil", ToastLength.Short).Show();
     //Jika login berhasil arahkan ke halaman welcome
     StartActivity(typeof(WelcomeActivity));
    }
   };
  }
 }
}

Keterangan code sudah saya sertakan pada comentar di scriptnya.

Langkah 12
Buatlah sebuah activity baru dengan nama RegisterActivity.cs lalu ketika script sebagai berikut.

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 LoginRegisterMySQL
{
 [Activity(Label = "RegisterActivity")]
 public class RegisterActivity : Activity
 {
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);
   SetContentView(Resource.Layout.Register);
   EditText username = FindViewById<EditText>(Resource.Id.txtUsernameDaftar);
   EditText password = FindViewById<EditText>(Resource.Id.txtPasswordDaftar);
   Button btndaftar = FindViewById<Button>(Resource.Id.btnDaftar);

   btndaftar.Click += delegate {
    
     string xusername = username.Text;
     string xpassword = password.Text;


     // mengecek semua komponen sudah diisi atau tidak
     if (xusername == "")
     {
      Toast.MakeText(this, "Masukan Username Anda !", ToastLength.Short).Show();
      username.RequestFocus();
      return;
     }

     else if (xpassword == "")
     {
      Toast.MakeText(this, "Masukan Pasword Anda !", ToastLength.Short).Show();
      password.RequestFocus();
      return;
     }
     else
     {
      //buat tampungnya dalam array

      var data = new NameValueCollection();
      data["username"] = xusername;
      data["xpassword"] = xpassword;



      //Panggil file php untuk input data / tambah data pada servermu
      WebClient client = new WebClient();
      client.Encoding = Encoding.UTF8;
      var reply = client.UploadValues
      ("https://https://alamatwebsitekamu.com/InsertUsers.php?", "POST", data);
      //usr.Text = reply.ToString();


      //membuat kondisi 
      //set alert for executing the task
      AlertDialog.Builder alert = new AlertDialog.Builder(this);
      alert.SetTitle("Confirmasi");
      alert.SetMessage("Apakah anda yakin akan menyimpan data ini ?");
      alert.SetPositiveButton("Yes", (senderAlert, args) =>
      {
       Toast.MakeText(this, "Input Data Berhasil!", ToastLength.Short).Show();
      //jika berhasil maka hapus isi komponennya 

      username.Text = "";
      password.Text = "";

      //Jika berhasil maka arahkan ke halaman login kembali
      StartActivity(typeof(MainActivity));
      });

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

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

   // Create your application here
  }
 }
}

Langkah terakhir 13
Buatlah kembali sebuah file dengan nama WelcomeActivity.cs lalu masukan code sebagai berikut

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

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

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

   // Create your application here
  }
 }
}