Mobile Programming Universitas Islam Nusantara

Aplikasi Flutter CRUD menggunakan PHP REST API

Pada kesempatan kali ini, kita akan membuat aplikasi android yang dapat terkoneksi dengan
database MySQL. Untuk menghubungkan keduanya harus ada perantara pertukaran data yang
bersifat universal seperti penggunaan JSON (Javascript Object Notation) untuk data hasil
response. Karena kita akan menggunakan framework Flutter, maka kita juga akan mempelajari
tentang Flutter Networking menggunakan library http. Untuk melakukan request ke server ada dua
metode yang akan digunakan yaitu POST (untuk mengirim data) dan GET (untuk mengambil
data).

A. Persiapan
1. Lakukan instalasi apache + PHP + MySQL stack (XAMPP/WAMP).
2. Lakukan instalasi flutter menggunakan VS Code.
B. Implementasi Database
Kita akan membuat aplikasi data siswa sederhana. Pertama, kita buat terlebih dahulu database
dan table.
1. Buka XAMPP lalu klik start pada Apache dan MySQL. Klik admin pada MySQL maka
akan langsung me-redirect untuk membuka link localhost/phpmyadmin seperti pada
gambar di bawah ini.

2. Buat database baru dengan nama school dan table dengan nama student.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

3. Berikut adalah struktur tabelnya. Terdapat id, name, dan age.

C. Implementasi PHP
Karena kita menggunakan XAMPP maka kita buat terlebih dahulu direktori baru di dalam
htdocs. Kita buat foldernya dengan nama flutter_api. Kemudian buat file dengan nama db.php
seperti berikut untuk menghubungkan API dengan Database.

Kemudian buat file PHP untuk setiap tindakan (Create, Read, Update, dan Delete).
1. Untuk Melakukan GET Semua Item dalam Tabel (list.php).

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

2. Untuk Melakukan GET Satu Item tertentu di Tabel (details.php).

3. Untuk Melakukan INSERT data siswa baru (create.php).

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

4. Untuk Melakukan DELETE data siswa dari tabel (delete.php).

5. Untuk Melakukan UPDATE data siswa (update.php).

D. Implementasi Flutter
Pada langkah ini kita akan difokuskan untuk melakukan panggilan kepada routes dan cara
menangani hasil route tersebut di Flutter.
1. Di dalam file main.dart , kita harus menambahkan keempat syntak route beserta context
yang akan kita gunakan. Yaitu seperti pada gambar di bawah ini.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

2. Lalu buat class dengan nama student di dalam direktori models. Objeknya berisi id, name,
dan age.

3. Selanjutnya, buat file dengan nama env.dart di dalam direktori widgets. Di sini variabel
yang kita gunakan yaitu URL API. Ini adalah URL yang akan dipanggil ketika kita
menjalankan aplikasinya di Emulator.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

4. Saat aplikasi dijalankan, tampilan pertama yang akan terbuka adalah

halaman home.dart. Di dalam halaman ini, kita akan membuat list view untuk mengekstrak
semua list data siswa. Lalu di setiap list data siswa terdapat tombol navigasi untuk melihat
detail datanya. Ketika tombol navigasi tersebut di-klik maka akan membuka halaman baru
yaitu halaman detail.dart. Lalu dibagian bawah halaman home.dart terdapat floating
button untuk membuat data siswa baru.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

5. Halaman detail.dart akan menampilkan item/data siswa yang dipilih, User juga dapat
menghapus atau mengeditnya. Data yang diterima adalah respons terhadap HTTP post
request.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

6. Berikut adalah program untuk halaman edit.dart. User dapat mengedit data siswa
menggunakan POST request.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

7. Berikut adalah program untuk halaman create.dart. Halaman ini digunakan untuk membuat
dan menambahkan data siswa baru ke tabel student.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

8. Berikut adalah program untuk halaman form.dart yang dibuat di dalam direktori widget.
Halaman ini telah berisi validasi dan isi dari formulir siswa.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

E. Hasil
1. Berikut adalah hasil ketika aplikasi dijalankan. Disini sudah diisi dengan 2 data siswa yaitu,
Fariz dan Cundi.

2. Kemudian disini kita akan menambahkan satu data lagi dengan nama Hardi yang berusia
19 tahun dengan cara klik tombol floating button berwarna biru di bagian kanan bawah,
lalu klik confirm.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

3. Setelah itu akan datanya akan bertambah menjadi 3 pada halaman home Student List yaitu,
fariz, cundi, dan hardi.

4. Pada saat kita meng-klik salah satu data (misalnya data Fariz) maka akan muncul halaman
Details. Di dalam halaman details terdapat 2 fitur yaitu delete dan edit.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

5. Kemudian disini kita akan mencoba fitur edit terlebih dahulu dengan mengedit bagian
namanya menjadi Fariz Alhazmi R. Klik button edit di pojok kanan bawah kemudian edit
bagian data yang hendak diubah lalu klik confirm.

6. Maka hasilnya data dengan nama fariz akan berubah namanya menjadi Fariz Alhazmi R.

7. Setelah itu kita akan mencoba fitur delete dengan cara kita pilih salah satu data yang hendak
dihapus misalnya data yang bernama hardi.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

8. Saat sudah muncul halaman details klik button delete yang berada di pojok kanan atas
maka akan muncul pop up bertuliskan “Are you sure want to delete this?”. Jika ya datanya
akan kita hapus maka klik button biru yang bertanda centang, jika datanya tidak akan kita
hapus maka klik button merah yang bertanda silang. Karena kita yakin akan
menghapusnya, maka kita pilih centang.

9. Maka hasilnya data yang bernama hardi berhasil terhapus.

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com
Mobile Programming Universitas Islam Nusantara

10. Kemudian kita cek data yang ada di dalam database. Maka hasil akhir pada database akan
sama dengan hasil akhir pada aplikasi

~Selesai~

Muhamad Ikmal Wiawan

Ikmal.wiawan@gmail.com