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 )
