Flutter : Membuat Aplikasi Log In PHP - MySQL ( Bag. 3 )

Finally yah gaes, kita sampai pada bagian akhir pembuatan aplikasi autentikasi sederhana dengan Flutter-PHP-MySQL.

Pada bagian awal ( cek disini ) kita membuat UI dan pada bagian kedua kita membuat fungsi-fungsinya. Kini saatnya kita membuat jembatan komunikasinya Flutter - MySQL, yaitu PHP. Tidak lupa juga basis datanya juga 👌

Yuklah kita selesaikan yah...

Hilangkan rasa penisirin untuk simple authentication flutter kitah 😋

Kita perhatikan kembali baris kode Future _login() kita di artikel sebelumnya ya 

  Future _login() async {

    print("\n=======|> memanggil fungsi _login() ");

    var url = Uri.http("localhost", "/flutter/login.php", {'q':'{http}'});

    var response = await http.post(

      url,

      body: {

        "email" : email.text,

        "password" : password.text

        });

Di bagian url, kita menggunakan http untuk mengakses localhost/flutter/login.php

Ini menandakan bahwa kita harus memiliki file login.php di dalam folder flutter. Nah folder flutter ini letaknya di server localhost.

🛈 Letak localhost dengan server XAMPP berada di c:\xampp\htdocs sedang untuk server IIS berada di lokasi C:\inetpub\wwwroot

Karena kita menggunakan server XAMPP, maka kita buat dulu folder kita, yaitu flutter.

Setelah kita membuat file baru ( login.php ) di dalam folder flutter. Sekarang kita buat basis datanya melalui phpMyAdmin.

Buka halaman web localhost/phpmyadmin dan buat basis data db_flutter

Dilanjutkan membuat tabelnya ( tb_login ) dengan struktur data seperti berikut :

Next step 📚

Buka file login.php tersebut dengan VS Code dan kita isi dengan baris-baris kode berikut :

<?php

$db = mysqli_connect(

    "localhost",

    "root",

    "",

    "db_flutter");

   

    header("Content-Type: application/json; charset=utf-8");

    $email = $_POST["email"];

    $password = $_POST["password"];

    $sql=("SELECT * FROM tb_login WHERE

            email = '".$email."' AND password = '".$password."'");

    $result = mysqli_query($db, $sql);

    $count = mysqli_num_rows($result);

   

    if($count == 1) {

        echo json_encode("Success");

        } else {

            echo json_encode("Error");

        }

?>

Baris kode :

$db = mysqli_connect(

    "localhost",

    "root",

    "",

    "db_flutter");

Kita gunakan untuk menyambungkan php dengan mysql dengan db_flutter yang akan kita gunakan basis datanya.

Selanjutnya :

    header("Content-Type: application/json; charset=utf-8");

Kita gunakan sebagai penanda bahwa header kita bertipe JSON. Selanjutnya :

    $email = $_POST["email"];

    $password = $_POST["password"];

Merupakan variabel yang kita gunakan untuk menangkap dan menyimpan data yang dikirim oleh perintah :

    var response = await http.post(

      url,

      body: {

        "email" : email.text,

        "password" : password.text

        });

Yang ada di dalam baris kode flutter kita. Kenapa $_POST ?

Ya karena await hhtp.post, jadi data terkirim dengan method post dan bisa kita tangkap dengan perintah $_POST 😁

    $sql=("SELECT * FROM tb_login WHERE email = '".$email."' AND password = '".$password."'");

    $result = mysqli_query($db, $sql);

Variabel $sql kita menyimpan query SQL untuk mengambil data dari mysql jika email dan password sesuai dengan data yang kita masukkan lewat aplikasi flutter kita. Dan $result kita gunakan untuk menajalankan query $sql.

    $count = mysqli_num_rows($result);

Kita lihat data yang ada dengan fungsi mysqli_num_rows, karena fungsi ini akan mengembalikan data number ( jumlah total data ), bukan datanya.

    if($count == 1) {

        echo json_encode("Success");

        } else {

            echo json_encode("Error");

        }

Jika variabel $count menyimpan angka 1, maka file login.php ini akan menampilkan sebuah data JSON dengan isi Success.

Teks Success inilah yang kita tangkap dalam variabel data ini :

    var data = json.decode(response.body);

    if ( data.toString() == "Success") {

      print("Data 'log in' ditemukan!\n");

      setState(() {

        email.clear();

        password.clear();

      });

Makanya kita bisa gunakan kembali operator percabangan if, dengan membandingkan isi Success 👌😁

Nah sekarang everything is done, try our app now! 

Bagaimana hasilnya, berhasil bukan ( btw jangan lupa isi tabel kita dengan data terlebih dahulu yah )

Any question, just write at comment box below. Thanks for your attention gaes 😉😇

📝 Note for Aplikasi Log In Flutter PHP MySQL

Design UI → Bagian 1

Fungsi → Bagian 2

Back End → Bagian 3 ( This Article )