Sunday, October 6, 2019

Membuat Form Login dengan Flutter dan PHP MySQL

Membuat Form Login dengan Flutter dan PHP MySQL
Cara Membuat Form Login pada Flutter dengan Back-end PHP MYSQL (Dilengkapi dengan Full Source Code Projek) - Sobat eduprog kususnya yang hobi coding tentu saja tidak asing dengan form login beserta dengan prosesnya. Ketika kita membuat aplikasi, form dan proses login adalah hal yang paling utama kita pikirkan karena sebagian besar aplikasi akan melalui tahapan login dengan memasukan username dan password (secara umum) sebelum dapat mengakses fitur atau halaman utama dari aplikasi tersebut.

Hal ini juga berlaku pada aplikasi mobile yang kita buat dengan Flutter, form login berikut proses login dari front-end sampai ke back-end adalah hal yang perlu kita pikirkan dari dasar. Tidak hanya desain yang bagus, namun proses login yang aman juga sangat penting mengingat proses login adalah proses paling vital dalam sebuah aplikasi.

Pada kesempatan kali ini saya akan memaparkan bagaimana cara membuat form login di Fluttermulai dari desain sampai proses request ke server (back-end) menggunakan PHP dan database MySQL. Di sini saya memilih PHP dan MySQL untuk back-end aplikasi login Flutter karena PHP dan MySQL sangat popular di kalangan programmer karena gratis dan mudah pelajari dengan berbagai resource yang adalah di internet.

Sebelum masuk ke pembahasan utama perlu sobat ketahui bahwa untuk IDE saya menggunakan Android Studio, namun jika sobat lebih suka IDE lainya seperti Visual Studio Code apa yang tertera di artikel ini juga bisa dipraktikan pada IDE tersebut karena IDE tidak bersifat mengikat.

Membuat Front-End (Flutter)

Buat sebuah projek Flutter kosongan dengan IDE Android Studio atau IDE sejenis kesayangan sobat. Buatlah struktur file source code Flutter (folder lib) sebagai berikut :

1) main.dart : file utama yang dieksekusi dari source code Flutter
2) helper/ScreenHelper.dart : class Screen untuk bantuan membuat ukuran skala persentasi width dan height dari viewport (layar)
3) screen/login.dart : widget atau halaman untuk login
4) screen/home.dart : widget atau halaman home jika proses login berhasil

Tambahan file pada folder assets
1) assets/bg.png

Tambahan dependencies pada file pubspec.yaml
http: ^0.12.0+1

Tambahan assets pada file pubspec.yaml
- assets/bg.png


Kode masing-masing file:

Membuat Back-End (PHP dan MySQL)

Request login yang dilakukan dari aplikasi mobile yang kita buat dengan Flutter di atas, dihandel oleh PHP dan MySQL sebagai database nya.

Buatlah database MySQL bernama eduprog dengan struktur data sebagai berikut:

Lalu buatlah file php bernama service.php untuk ditaruh di lokal / public server sobat, dengan kode sebagai berikut:


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Nah selesai sudah aplikasi login kita dengan Flutter, PHP dan MySQL. Selamat mencoba untuk semua sobat eduprog, jika ada saran kritik ataupun komentar silahkan tulis di kolom komentar.
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

1 comment: