- Rabu, 31 Januari 2018

Tutorial Xamarin Android : Registrasi Member dengan Verifikasi Email


Untuk menghindari spammers / registrasi email yang berkali-kali pada aplikasi kita, oleh karena itu kita harus melakukan validasi email. Validasi bisa dengan cara menggunakan email verification. Nah pada tutorial kali ini, saya akan membahasnya. Semoga bisa diterapkan pada aplikasi xamarin android kalian ya .

Saya anggap pembaca disini sudah mengikuti beragam tutorial sebelumnya, karena saya tidak akan membahas secara detail dari insatalasi visual studio atau instal nuget yah :). Jika masih pemula alangkah baiknya ikuti tutorial dasar terlebih dahulu.

Oke saya memiliki sebuah database sebagai berikut :

table : users


Tabel tersebut akan menampung database pendaftaran users ya...

activate 0 = belum active


activate 1 = active



Untuk code php nya kita siapkan beberapa file sebagai berikut :

koneksi.php

<?php

 $server  = "localhost"; //sesuaikan dengan nama server
 $user  = "usernamedatabase"; //sesuaikan username
 $password = "passworddatabase"; //sesuaikan password
 $database = "namadatabase"; //sesuaikan target databese
 
 
 $con = mysqli_connect($server, $user, $password, $database);
 if (mysqli_connect_errno()) {
  echo "Gagal terhubung MySQL: " . mysqli_connect_error();
 }

?>

Gunakan kode diatas untuk menghubungkan database kalian yah.

daftarmember.php

<?php
error_reporting(0);
 header('content-type: application/json');
 
 include "koneksi.php";
 
 $nama  = $_POST['nama'];
 $email  = $_POST['email'];
 $password = $_POST['password'];
 $passwords=md5($password);
 $handphone  = $_POST['handphone'];
 $level = $_POST['level'];
 $activate = $_POST['activate'];

 $checkemail = mysqli_num_rows(mysqli_query($con, "SELECT * FROM users WHERE email = '$email'"));
 
 if ($checkemail > 0) {
   
   
    echo "{"data_event":" ." "gagal" ". "}";
    
 }
 
 else {
     define('ROOT', 'https://namalinkwebsiteanada/');
     $daftar = "INSERT INTO users (nama,email,password,handphone,level,activate) VALUES('$nama','$email','$passwords','$handphone','$level','$activate')" ;
     $query = mysqli_query($con,$daftar);
     
        $kode = md5(uniqid(rand()));
  
  $to = $email;
        $subject = "Aktivasi Email Anda";
        $txt = "Hallo Silahkan Aktivasi Email Anda pada Link berikut !";
        $txt .= "<a href='".ROOT."konfirmasiemail.php?email=".$_POST['email']."&kode=$kode&nama=".$_POST['nama']."'>".ROOT."konfirmasiemail.php?email=".$_POST['email']."&kode=$kode</a>";
        $headers = "From: development@website.com" . "rn" .
        "CC: ipungpurwono@banyu.center";
        
        $kirim = mail($to,$subject,$txt,$headers);

  if($kirim AND $query)
  {
   echo "<p class=info>Berhasil Dikirim</p>";
  }
  else
  {
   echo "<p class=infoGagal>Gagal Dikirim</p>";
  }
     
    
   
 }
?>

Untuk security masih pake password md5 ya , kalian bisa ubah sesuka kalian.

Note : Set email pengirim pada $headers.

konfirmasiemail.php

<?php

    include "koneksi.php";
    

    $query = "UPDATE users SET activate='1'";
 if (mysqli_query($con, $query)) {
    echo "Selamat Email anda sudah Terverifikasi, silahkan login di Apps Panen Diskon";
    } else {
        echo "Email tidak terverifikasi: " . mysqli_error($conn);
    }

?>

code diatas tentunya untuk mengubah status dari non verified menjadi verified member.

Sekarang kita buat layoutnya pada xamarin

HalamanDaftar.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:background="#ffffffff"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:orientation="vertical"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/linearLayout1"
        android:padding="20dp"
        android:background="#30336b">
        <TextView
            android:text="Hello,"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView1"
            android:textColor="#ffffffff"
            android:textSize="@dimen/abc_action_button_min_width_overflow_material"
            android:fontFamily="@string/abc_font_family_title_material" />
        <TextView
            android:text="Silahkan Melakukan Pendaftaran"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView2"
            android:textColor="#ffffffff"
            android:fontFamily="@string/abc_font_family_display_4_material"
            android:layout_marginBottom="27.5dp" />
        <EditText
            android:inputType="textPersonName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtNama"
            android:hint="Nama Anda"
            android:textColorHint="#ff808080"
            android:layout_marginTop="32.0dp"
            android:padding="10dp"
            android:background="#ffffffff"
            android:textColor="#ff1c1718" />
        <EditText
            android:inputType="textEmailAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtEmail"
            android:hint="emailanda@email.com"
            android:textColorHint="#ff808080"
            android:padding="10dp"
            android:background="#ffffffff"
            android:layout_marginTop="7.0dp"
            android:textColor="#ff1c1718" />
        <EditText
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtPassword"
            android:hint="Password"
            android:textColorHint="#808080"
            android:padding="10dp"
            android:background="#ffffffff"
            android:layout_marginTop="7.0dp"
            android:textColor="#ff1c1718" />
        <EditText
            android:inputType="phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtHandphone"
            android:hint="Handphone"
            android:textColorHint="#ff808080"
            android:padding="10dp"
            android:background="#ffffffff"
            android:layout_marginTop="7.0dp"
            android:textColor="#ff1c1718" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/btnDaftar"
            android:background="#ffff5722"
            android:textColor="#ffffffff"
            android:layout_marginTop="16.5dp"
            android:textStyle="bold"
            android:text="DAFTAR" />
    </LinearLayout>
</RelativeLayout>

Selanjutnya adalah Activitynya nih

Daftar.cs

Note : Cari kode berikut


protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.HalamanDaftar);

Note : Masukan kode dibawah ini pas dibawah SetContentView


EditText nama = FindViewById<EditText>(Resource.Id.txtNama);
            EditText email = FindViewById<EditText>(Resource.Id.txtEmail);
            EditText password = FindViewById<EditText>(Resource.Id.txtPassword);
            EditText handphone = FindViewById<EditText>(Resource.Id.txtHandphone);
            Button daftar = FindViewById<Button>(Resource.Id.btnDaftar);

            daftar.Click += delegate {
                string xnama = nama.Text;
                string xemail = email.Text;
                string xpassword = password.Text;
                string xhandphone = handphone.Text;
                string level = "2";
                string activate = "0";


                //Validasikan Form
                var emailvalidate = isValidEmail(xemail);  

                if (xnama == "")
                {
                    Toast.MakeText(this, "Masukan Nama Anda !", ToastLength.Short).Show();
                    nama.RequestFocus();
                    return;
                }
                else if (xemail == "")
                {
                    Toast.MakeText(this, "Masukan Email Anda !", ToastLength.Short).Show();
                    nama.RequestFocus();
                    return;
                }
                else if(emailvalidate == false){
                    Toast.MakeText(this, "Email tidak valid !", ToastLength.Short).Show();
                    nama.RequestFocus();
                    return;   
                }
                else if(xpassword ==""){
                    Toast.MakeText(this, "Masukan Password Anda !", ToastLength.Short).Show();
                    nama.RequestFocus();
                    return;
                }
                else if (xhandphone == "")
                {
                    Toast.MakeText(this, "Masukan Handphone Anda !", ToastLength.Short).Show();
                    nama.RequestFocus();
                    return;
                }
                else if(xhandphone.Length>12){
                    Toast.MakeText(this, "Handphone maksimal 12 Digit !", ToastLength.Short).Show();
                    nama.RequestFocus();
                    return;
                }

                //Tampung Dalam Array
                var data = new NameValueCollection();
                data["nama"] = xnama;
                data["email"] = xemail;
                data["password"] = xpassword;
                data["handphone"] = xhandphone;
                data["level"] = level;
                data["activate"] = activate;




                //set alert for executing the task
                AlertDialog.Builder alert = new AlertDialog.Builder(this);
                alert.SetTitle("Confirmasi");
                alert.SetMessage("Apakah anda yakin akan melakukan pendaftaran?");
                alert.SetPositiveButton("Ya", (senderAlert, args) =>
                {
                    //Panggil file php untuk input data / tambah data pada servermu
                    WebClient client = new WebClient();
                    client.Encoding = Encoding.UTF8;
                    var reply = client.UploadValues
                    ("https://banyu.center/diskonfinder/daftarmember.php?", "POST", data);


                        Toast.MakeText(this, "Silahkan melakukan verifikasi di email anda, setelah memverifikasi lalu anda bisa login kembali!", ToastLength.Short).Show();
                        //jika berhasil maka hapus isi komponennya 

                        nama.Text = "";
                        email.Text = "";
                        password.Text = "";
                        handphone.Text = "";

                        //Jika berhasil maka arahkan ke halaman login kembali
                        Intent c = new Intent(this, typeof(LoginActivity));
                        StartActivity(c);


                });

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

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

            };



Tambahkan fungsi validasi email

public bool isValidEmail(string email)
    {  
        return Android.Util.Patterns.EmailAddress.Matcher(email).Matches();  
    }


Sebagai bukti  verifikasi:

Jika di klik link verifikasi maka akan merubah status 0 menjadi 1 (aktif)

Terimakasih,

Salam Ipung Purwono