Tuesday, January 21, 2020

Membuat CRUD dan Search pada Flutter (Dengan Backend PHP dan MySQL)

Membuat CRUD Flutter
Tutorial Lengkap Membuat CRUD + Search pada Flutter dengan Backend PHP dan MySQL dilengkapi Source Code - CRUD atau kependekan dari Create Read Update dan Delete adalah fungsi operasional paling dasar dalam pembuatan aplikasi, baik aplikasi desktop, web, maupun mobile. Untuk itu memahami pembuatan CRUD adalah dasar utama dalam pembuatan aplikasi, karena sejatinya dalam membuat aplikasi baik desktop, maupun mobile tentu saja tidak akan terlepas dari aktifitas membuat data (create), membaca data (read), memperbaharui data (update) dan menghapus data (delete).

Selain CRUD sendiri, biasanya kita juga perlu menambahkan beberapa fitur untuk mempermudah pengguna aplikasi yang kita buat, seperti paging dan pencarian data (search). Kusus untuk pembuatan aplikasi mobile termasuk menggunakan framework Flutter, kita harus melibatkan proses back-end, dikarenakan database yang kita gunakan bersifat central (berada pada server).

Dengan demikian untuk melakukan proses CRUD pada aplikasi mobile dengan database pada server, kita harus membuat layanan API agar data dari apliakasi mobile hasil interaksi dengan pengguna bisa sampai ke server dengan API tersebut.

Prinsip Pembuatan CRUD

Pada pembuatan CRUD kali ini, saya akan jelaskan secara singkat dimana pada aplikasi mobile kita akan menggunakan Flutter dan sebagai back-end kita menggunakan PHP dan MySQL sebagai database nya. Secara singkat bisa saya gambarkan bahwa ketika proses CRUD terjadi, aplikasi mobile mengirimkan data data dengan identitas tertentu untuk membedakan setiap aksi melalui API, lalu data yang dikirimkan API (biasanya method POST) di proses oleh webserver dan PHP dan MySQL sebagai database nya.

Adapun gambaran singkat CRUD seperti yang saya jelaskan di atas, bisa dilihat dari gambar dibawah ini:
Skema CRUD
Pada source code CRUD dengan Flutter yang saya buat prinsipnya adalah dengan menggunakan parameter dengan method POST sebagai pengenal untuk melakukan setiap aksi, dimana saya menentukan parameter utama sebagai pengenal utama apakah peintah yang dikirimkan melalui API untuk proses Create, Read, Update, Delete, atau Search data. Parameter utama-nya adalah cmd dengan daftar perintah sebagai berikut:
1. get_all_data : untuk melakukan proses READ dan search data (dengan parameter tambahan)
2. insert_data : untuk melakukan proses CREATE data
3. update_data : untuk melakukan proses UPDATE data
4. delete_data : untuk melakukan proses DELETE data

Untuk memperjelas konsep dan penjelasan CRUD di atas, mari kita mulai pebuatan kode aplikasi CRUD pada Flutter dengan back-end PHP dan MySQL.

Struktur Table MySQL

Sebelum memulai pembuatan kode untuk PHP dan Flutter, kita harus membuat table yang akan kita lakukan prose CRUD, pada contoh CRUD kali ini saya membuat table dengan nama siswa pada database eduprog dengan struktur / query sebagai berikut.
CREATE TABLE `siswa` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
`alamat` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
`jk` varchar(1) COLLATE utf8_unicode_ci DEFAULT NULL,
`status` int(11) NOT NULL DEFAULT '1' COMMENT '0 = tidak aktif, 1 = aktif',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Table terdiri dari 5 kolom, dimana kita hanya akan mengisi 3 kolom pada CRUD yaitu nama, alamat, dan jk. Khusus untuk kolom `jk` kita akan mengisi dengan 1 karakter, dimana P untuk perempuan dan L untuk laki-laki, karena inputan ini sudah kita tentukan maka pada aplikasi mobile kita akan menggunakan Dropdown untuk kolom ini. Kolom id sebagai kunci utama table dengan sifat auto increment sehingga kita tidak perlu menyebut kolom tersebut saat melakukan query insert.

Kode Backend PHP


Setelah kita membuat table pada MySQL, langkah selanjutnya adalah membuat kode back-end yang mengkonsumsi table tersebut. Berikut adalah kode PHP sebagai API aplikasi mobile kita untuk keperluan CRUD kali ini.

Kode pada Flutter

Lalu setelah kita membuat kode untuk API dengan PHP, langkah selanjutnya adalah membuat aplikasi mobile atau membuat kode untuk aplikasi mobile dengan Flutter. Sebelumnya kia harus menambahkan library http pada pubspec.yaml dan permission internet  android:name="android.permission.INTERNET" /> (untuk release apk) pada file AndroidManifest.xml.

Berikut adalah kode lengkap aplikasi CRUD pada sisi Flutter:


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 
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

0 komentar: