Membuat CRUD Flutter

dengan API Laravel

Berikut adalah langkah-langkah untuk membuat API CRUD menggunakan
Laravel dan kemudian membuat aplikasi Flutter untuk berinteraksi dengan API
tersebut:

A.Langkah-Langkah Membuat API CRUD dengan

Laravel Menggunakan SQLite
1. Persiapan Lingkungan:

o Instal PHP, Composer, dan Laravel di sistem Anda.

o Buat proyek Laravel baru.

2. Konfigurasi Database SQLite:

o Buka file .env di proyek Laravel Anda.

o Ubah konfigurasi database menjadi SQLite.

o Gantilah dengan jalur absolut ke folder proyek Anda.

3. Buat File Database SQLite:

o Buat file database SQLite secara manual di folder database proyek Anda.
4. Buat Model dan Migrasi:

o Buat model dan migrasi untuk tabel yang akan digunakan (misalnya
Form).

o Edit file migrasi di database/migrations/ untuk menambahkan kolom

yang diperlukan (misalnya name, email, message).

Secara keseluruhan, file ini mendefinisikan struktur

tabel forms yang akan digunakan untuk menyimpan data formulir dalam
aplikasi Laravel.
Penjelasan:
 Namespace dan Import

Kode ini mengimpor kelas-kelas yang diperlukan untuk membuat

migrasi dan mendefinisikan skema tabel.
 Kelas CreateFormTable
 Kelas ini mewarisi dari kelas Migration, yang merupakan bagian
dari Laravel untuk mengelola migrasi database.
 Method up()

Metode ini dipanggil saat migrasi dijalankan. Di dalamnya,

tabel forms dibuat dengan kolom-kolom berikut:
- id: kolom auto-increment yang menjadi primary key.
- name: kolom untuk menyimpan nama (tipe string).
- email: kolom untuk menyimpan alamat email (tipe string).
- message: kolom untuk menyimpan pesan (tipe text).
- timestamps():
menambahkan kolom created_at dan updated_at secara
otomatis.

 Method down()

Metode ini dipanggil saat migrasi dibatalkan. Di dalamnya,

tabel forms dihapus jika ada.
5. Jalankan Migrasi:

o Jalankan migrasi untuk membuat tabel di database SQLite.

6. Buat Controller:

o Buat pengontrol untuk menangani operasi CRUD.

7. Definisi Rute:

o Tambahkan rute ke file routes/api.php untuk menghubungkan URL

dengan controller.

Secara keseluruhan, file ini mendefinisikan rute-

rute untuk mengelola data formulir dan mendapatkan informasi
pengguna dalam aplikasi Laravel.
Penjelasan:
 Namespace dan penggunaan

Bagian ini mengimpor kelas yang diperlukan dari framework

Laravel, termasuk Request untuk menangani permintaan
HTTP, Route untuk mendefinisikan rute,
dan FormController yang berisi logika untuk menangani
permintaan terkait formulir.
 Pengelolaan rute

Rute-rute di dalam grup ini akan memiliki prefiks forms, sehingga

semua rute di dalamnya akan dimulai dengan /forms.
 Rute untuk mengelola data formular
  Rute untuk mendapatkan informasi pengguna

Rute ini dilindungi oleh middleware auth:sanctum, yang berarti

hanya pengguna yang terautentikasi yang dapat mengaksesnya.
Rute ini mengembalikan informasi pengguna yang sedang login.
8. Implementasikan Metode CRUD di Controller:

o Implementasikan metode index, store, show, update, dan destroy di

FormController.php.
Secara keseluruhan, FormController ini menyediakan fungsi CRUD
(Create, Read, Update, Delete) untuk model Form, memungkinkan
aplikasi untuk mengelola data formulir dengan mudah.
 Namespace dan Import

- Namespace App\Http\Controllers; mendefinisikan ruang

lingkup untuk controller ini.
- use App\Models\Form; mengimpor model Form yang
digunakan untuk berinteraksi dengan tabel formulir di
database.
- use Illuminate\Http\Request; mengimpor kelas Request untuk
menangani permintaan HTTP.
 Kelas FormController

Kelas ini mewarisi dari kelas Controller yang disediakan oleh

Laravel.
 Metode index
 Metode ini menangani permintaan GET untuk mengambil semua
data formulir dari database dan mengembalikannya dalam format
JSON.
 Metode store

Metode ini menangani permintaan POST untuk membuat data

baru. Ia memvalidasi input yang diterima, menyimpannya ke
database, dan mengembalikan respons JSON.
 Metode update

Metode ini menangani permintaan PUT untuk memperbarui data

yang ada berdasarkan ID. Ia memvalidasi input yang diterima dan
memperbarui data di database.
 Metode destroy
 Metode ini menangani permintaan DELETE untuk menghapus data
berdasarkan ID. Ia mencari data dan menghapusnya dari database.
9. Uji API dengan Postman:

o Gunakan Postman untuk menguji endpoint API yang telah dibuat.

B.Langkah-Langkah Membuat Aplikasi CRUD di

Flutter
1. Buat Proyek Flutter:

o Buat proyek Flutter baru.

1. Tambahkan Dependencies:

o Edit file pubspec.yaml dan tambahkan dependensi untuk HTTP dan

manajemen status (jika diperlukan).
 o Jalankan perintah untuk menginstal dependensi:

1. Buat Model Data:

o Buat model data (form_model.dart) untuk mencerminkan struktur data

yang diterima dari API.

Secara keseluruhan, kelas ini berfungsi untuk memudahkan pengelolaan

data formulir dengan menyediakan cara untuk mengonversi antara objek
Dart dan format JSON.
Penjelasan:
 Deklarasi kelas

Kelas FormModel didefinisikan untuk merepresentasikan

model data yang berisi informasi yang diperlukan untuk formulir.
 Variable anggota
 id: Merupakan variabel bertipe int?, yang berarti bisa bernilai null.
Ini menunjukkan bahwa ID mungkin tidak selalu ada saat
membuat data baru.
- name, email, dan message: Merupakan variabel
bertipe String yang wajib ada (required) saat
membuat objek FormModel.
 Konstruktor

Konstruktor ini digunakan

untuk menginisialisasi objek FormModel.
Parameter id bersifat opsional, sedangkan name, email,
dan message adalah parameter yang wajib diisi.
 Metode factory

Metode ini digunakan untuk membuat objek FormModel dari repre

sentasi JSON.
Ini berguna untuk mendeserialisasi data yang diterima dari API ata
u sumber lain.
 Metode toJson

Metode ini mengubah objek FormModel kembali menjadi represen

tasi JSON. Ini berguna untuk mengirim data
ke server atau menyimpannya dalam format JSON.
 Pengambilan nilai
- Dalam fromJson, objek FormModel diinisialisasi dengan nilai-
nilai yang diambil dari peta JSON.
- Dalam toJson, peta yang berisi nilai-nilai dari name, email, dan
message dikembalikan.
1. Buat Layanan untuk API:
o Buat layanan (api_service.dart) untuk menangani permintaan HTTP ke API
Laravel.

Secara keseluruhan, kelas ApiService ini menyediakan antarmuka untuk

berinteraksi dengan API yang mengelola data formulir, termasuk operasi
untuk mengambil, membuat, memperbarui, dan menghapus formulir.
 Import library

- dart:convert: Digunakan untuk mengonversi data JSON ke objek

Dart dan sebaliknya.
- package:http/http.dart: Mengimpor paket HTTP untuk
melakukan permintaan HTTP.
- ../models/form_model.dart: Mengimpor
model FormModel yang digunakan untuk memetakan data
formulir.
 Kelas ApiService
 Kelas ini mendefinisikan ApiService yang memiliki URL dasar untuk
API.
 Metode fetchForm

Metode ini melakukan permintaan GET untuk mengambil daftar

formulir dari API. Jika berhasil, data JSON diubah menjadi daftar
objek FormModel.
 Metode createForm

Metode ini melakukan permintaan POST untuk membuat formulir

baru. Data formulir diubah menjadi format JSON sebelum dikirim.
 Metode updateForm

Metode ini melakukan permintaan PUT untuk memperbarui

formulir yang sudah ada berdasarkan ID-nya.
 Metode deleteForm

Metode ini melakukan permintaan DELETE untuk menghapus

formulir berdasarkan ID.
 Penanganan respon
 Setiap metode memeriksa status kode respons untuk memastikan
bahwa permintaan berhasil. Jika tidak, akan melempar
pengecualian dengan pesan kesalahan yang sesuai.
1. Buat UI untuk Menampilkan Data:

o Ubah file main.dart seperti di bawah ini.

Penjelasan:
 Import library

- kode ini mengimpor paket flutter/material.dart,

yang menyediakan berbagai widget dan tema untuk aplikasi Flu
tter.
- Juga mengimpor form_screen.dart, yang kemungkinan berisi
layar atau widget lain yang akan digunakan dalam aplikasi.
 Fungsi main()

- Fungsi main adalah titik masuk dari aplikasi.

- runApp(MyApp()) menjalankan aplikasi dengan
widget MyApp sebagai root widget.
 Kelas MyApp
 - MyApp adalah kelas yang mewarisi dari StatelessWidget, yang
berarti widget ini tidak memiliki status yang dapat berubah.
- Metode build mengembalikan widget MaterialApp,
yang merupakan widget dasar untuk aplikasi berbasis
Material Design.
- Beberapa properti dari MaterialApp:
- debugShowCheckedModeBanner: false:
Menyembunyikan banner debug di sudut kanan atas aplikasi.
- title: 'CRUD Flutter': Menetapkan judul aplikasi.
- theme: ThemeData(primarySwatch: Colors.blue):
Menetapkan tema aplikasi dengan palet warna biru.
- home: HomePage(): Menetapkan
widget HomePage sebagai halaman utama aplikasi.
o Buat tampilan utama (home_page.dart) yang menampilkan daftar data
dan tombol untuk menambahkan data baru.
Penjelasan:
 Import library

- flutter/material.dart: Mengimpor paket material design dari

Flutter, yang menyediakan berbagai widget dan tema untuk
membangun antarmuka pengguna.
- add_form_screen.dartdanedit_form_screen.dart :
Mengimpor layar untuk menambah dan mengedit form.
- form_service.dart: Mengimpor layanan yang bertanggung
jawab untuk berinteraksi dengan API (misalnya, mengambil,
menambah, mengedit, dan menghapus formulir).
- form_model.dart: Mengimpor model data , yang
merepresentasikan bentuk struktur data.FormModel
 Kelas HomePage

- HomePage: Kelas utama yang merupakan widget stateful. Ini

berarti bahwa widget ini memiliki status yang dapat berubah
seiring waktu.
- createState(): Metode ini digunakan untuk membuat instance
dari , di mana logika dan tampilan akan dikelola._HomePageState
 Inisialisasi _HomePageState
 - _HomePageState: Kelas yang mengelola negara
untuk .HomePage
- late Future<List<FormModel>> futureForms;:
Mendeklarasikan variabel , yang akan menyimpan hasil dari
pemanggilan API untuk mendapatkan form daftar. Kata
kunci menunjukkan bahwa variabel ini akan diinisialisasi
nanti.futureFormslate
- initState(): Metode ini dipanggil saat widget pertama kali dibuat.
Di sini, kami memanggil metode dari , yang mengembalikan berisi
formulir daftar.fetchForms()ApiServiceFuture
 Method build
 - build(BuildContext context): Metode ini membangun UI dari
widget. Ini adalah tempat di mana kita mendefinisikan tampilan
antarmuka pengguna.
- Scaffold: Widget dasar untuk struktur visual aplikasi, termasuk
elemen seperti , , dan .AppBarbodyfloatingActionButton
- AppBar(title: Text('CRUD Forms')): Menambahkan bar atas
dengan judul "CRUD Forms".
- FutureBuilder<List<FormModel>>: Widget ini digunakan
untuk membangun UI berdasarkan status dari . Ini
memungkinkan kita untuk menampilkan data saat sudah
tersedia atau menampilkan indikator pemuatan saat data
sedang dimuat.Future
 Daftar form
 - Pembuat ListView() : Menggunakan builder untuk membuat
item dalam daftar berdasarkan jumlah form yang diterima.
- DaftarUbin : Menampilkan setiap form dengan nama sebagai
judul ( ) dan email serta pesan sebagai subtitle ( ).titlesubtitle
- Ikon yang tertinggal : Menambahkan dua tombol di sebelah
kanan setiap item:
1. Tombol edit ( ) untuk navigasi ke halaman edit
form.IconButton
2. Tombol hapus ( ) untuk menghapus formulir dengan
konfirmasi.IconButton
 Navigasi ke halaman edit

- Ketika tombol edit ditekan, navigasikan ke halaman edit dengan

menggunakan .Navigator.push()
- Kirimkan bentuk objek yang dipilih ke halaman edit sebagai
parameter.
- Setelah kembali dari halaman edit, panggil kembali untuk
memperbarui daftar form.fetchForms()
 Dialog konfirmasi hapus
 - Ketika tombol delete ditekan, tampilkan dialog konfirmasi
menggunakan .showDialog()
- Dialog memiliki dua tombol:
1. Tombol "Batal" untuk membatalkan penghapusan.
2. Tombol "Hapus" untuk melanjutkan penghapusan.
- Jika pengguna mengkonfirmasi penghapusan ( ), panggil
metode dari , lalu refresh daftar form dengan memanggil
kembali .confirmDelete ==
truedeleteForm()ApiServicefetchForms()
 Navigasi ke halaman tambah form

- Tombol aksi mengambang digunakan untuk menambah form

baru.
- Ketika tombol ditekan, navigasikan ke halaman .AddFormPage
 - Setelah kembali dari halaman tambah, refresh daftar form
dengan memanggil kembali .fetchForms()
1. Buat Halaman Tambah Data:

o Buat halaman (add_form_page.dart) untuk menambahkan data baru ke

API.

 Import library

- flutter/material.dart: Mengimpor paket material design dari

Flutter, menyediakan berbagai widget untuk membangun
antarmuka pengguna.
- form_service.dart: Mengimpor layanan yang digunakan untuk
berinteraksi dengan API, khususnya untuk membuat form baru.
- form_model.dart: Mengimpor model data , yang
merepresentasikan bentuk struktur data.FormModel
 Kelas AddFormPage
 - AddFormPage: Kelas utama yang merupakan widget stateful,
memungkinkan kita untuk mengelola state (data) dari halaman
ini.
- createState(): Metode ini digunakan untuk membuat instance
dari , di mana logika dan tampilan akan
dikelola._AddFormPageState
 Inisialisasi state _AddFormPageState

- _AddFormPageState: Kelas yang mengelola negara

untuk .AddFormPage
- final _formKey = GlobalKey<FormState>();: Mendeklarasikan
kunci global untuk form, yang digunakan untuk
mengidentifikasi dan mengelola status form.
- Variabel name, email, danmessage : menyimpan input
pengguna dari form. Semua variabel diinisialisasi dengan string
kosong.
 Fungsi submit

- submit(): Fungsi ini dipanggil ketika pengguna menekan

tombol "Kirim".
 - Formulir Validasi : Memeriksa apakah formulir valid
menggunakan . Jika semua field valid (tidak ada yang kosong), maka
fungsi akan melanjutkan ke langkah
berikutnya._formKey.currentState!.validate()
- Membuat Objek FormModel : Jika valid, buat objek baru
dengan nama, email, dan pesan yang diinputkan oleh
pengguna.FormModel
- Mengirim Data ke API : Panggilan metode dari , yang
bertanggung jawab untuk mengirim data dari
server.createForm()ApiService
- Kembali ke Halaman Sebelumnya : Setelah pengiriman
berhasil, gunakan untuk kembali ke halaman sebelumnya
(misalnya, halaman daftar form).Navigator.pop(context)
 Membangun UI dengan Scaffold

- build(BuildContext context): Metode ini membangun UI dari

widget. Ini adalah tempat di mana kita mendefinisikan tampilan
antarmuka pengguna.
- Scaffold: Widget dasar untuk struktur visual aplikasi, termasuk
elemen seperti , , dan pengaturan padding.AppBarbody
- AppBar(title: Text('Add Form')): Menambahkan bar atas
dengan judul "Add Form".
 - Padding dan Form :
 Menggunakan widget untuk memberikan ruang di sekitar
form.Padding
 Widget menggunakan untuk mengelola status dan validasi
formulir.Form_formKey
 Bidang input dan tombol kirim

- Kolom Masukan : Menggunakan widget untuk menyusun

kolom input secara vertikal.Column
- TextFormField : Tiga field input disediakan untuk nama, email,
dan pesan:
1. Dekorasi ( ): Menambahkan label pada setiap
bidang.InputDecoration(labelText: '...')
2. Validator : Fungsi validator memeriksa apakah input
kosong. Jika ya, akan mengembalikan pesan kesalahan.
3. sedang diubah : Menggunakan callback ini untuk
memperbarui state setiap kali input berubah. Ini
memastikan bahwa nilai terbaru disimpan dalam
variabel , , atau .nameemailmessage
- Kotak Berukuran : Menambahkan jarak vertikal antara kolom
input dan tombol kirim.
 - Tombol Kirim :
1. Tombol menggunakan widget .ElevatedButton
2. Ketika tombol ditekan, fungsi dipanggil.submit()
1. Buat Halaman Edit Data:

o Buat halaman (edit_form_page.dart) untuk mengedit data yang sudah

ada.

Penjelasan:
 Import library

- flutter/material.dart: Mengimpor paket material design dari

Flutter, menyediakan widget dan tema untuk membangun
antarmuka pengguna.
- form_service.dart: Mengimpor layanan yang digunakan untuk
berinteraksi dengan API, khususnya untuk memperbarui form.
- form_model.dart: Mengimpor model data , yang
merepresentasikan bentuk struktur data.FormModel

 Membuat kelas EditFormPage

 - EditFormPage: Kelas utama yang merupakan widget stateful.
Ini memungkinkan kita untuk mengelola state (data) dari
halaman ini.
- final FormModel form;: Mendeklarasikan variabel yang akan
menyimpan form data yang akan diedit. Variabel ini diisi
melalui konstruktor dan harus diisi ( ).formrequired
- createState(): Metode ini digunakan untuk membuat instance
dari , di mana logika dan tampilan akan
dikelola._EditFormPageState
 Inisialisasi State _EditFormPageState

- _EditFormPageState: Kelas yang mengelola negara

untuk .EditFormPage
- final _formKey = GlobalKey<FormState>();: Mendeklarasikan
kunci global untuk form, digunakan untuk mengidentifikasi dan
mengelola status form.
 - Variabel name, email, danmessage : menyimpan input
pengguna dari form. Semua variabel diinisialisasi dengan kata
kunci , menunjukkan bahwa mereka akan terisi nanti.late
- initState(): Metode ini dipanggil saat widget pertama kali
dibuat. Di sini, kita menginisialisasi variabel , , dan dengan nilai
dari objek yang diterima.nameemailmessageform
 Fungsi submit

- submit(): Fungsi ini dipanggil ketika pengguna menekan

tombol "Update".
- Formulir Validasi : Memeriksa apakah formulir valid
menggunakan . Jika semua field valid (tidak ada yang kosong),
maka fungsi akan melanjutkan ke langkah
berikutnya._formKey.currentState!.validate()
- Membuat Objek FormModel yang Diperbarui : Jika valid, buat
objek baru dengan ID dari form yang sedang diedit dan nilai
terbaru dari nama, email, dan pesan.FormModel
- Mengirim Data ke API : Panggilan metode dari , yang
bertanggung jawab untuk mengirim formulir data yang
diperbarui ke server.updateForm()ApiService
- Kembali ke Halaman Sebelumnya : Setelah pengiriman
berhasil, gunakan untuk kembali ke halaman sebelumnya
(misalnya, halaman daftar form).Navigator.pop(context)
 Membangun UI dengan Scaffold
 - build(BuildContext context): Metode ini membangun UI dari
widget. Ini adalah tempat di mana kita mendefinisikan tampilan
antarmuka pengguna.
- Scaffold: Widget dasar untuk struktur visual aplikasi, termasuk
elemen seperti , , dan pengaturan padding.AppBarbody
- AppBar(title: Text('Edit Form')): Menambahkan bar atas
dengan judul "Edit Formulir".
- Padding dan Form :
1. Menggunakan widget untuk memberikan ruang di sekitar
form.Padding
2. Widget menggunakan untuk mengelola status dan validasi
formulir.Form_formKey
 Bidang input dan tombol pembaruan
 - Kolom Masukan : Menggunakan widget untuk menyusun
kolom input secara vertikal.Column
- TextFormField : Tiga field input disediakan untuk nama, email,
dan pesan:
1. InitialValue ( ) digunakan untuk menampilkan nilai awal
field input berdasarkan data yang ada saat ini.initialValue:
name
2. Dekorasi ( ): Menambahkan label pada setiap
bidang.InputDecoration(labelText: '...')
3. Validator : Fungsi validator memeriksa apakah input
kosong. Jika ya, akan mengembalikan pesan kesalahan.
4. sedang diubah : Menggunakan callback ini untuk
memperbarui state setiap kali input berubah. Ini
memastikan bahwa nilai terbaru disimpan dalam variabel , ,
atau .nameemailmessage
- Kotak Berukuran : Menambahkan jarak vertikal antara kolom
input dan tombol update.

- Pembaruan Tombol :
1. Tombol menggunakan widget .ElevatedButton
2. Ketika tombol ditekan, fungsi dipanggil.submit()
1. Integrasikan Semua Bagian:

o Pastikan semua bagian terintegrasi dengan baik, termasuk navigasi antar

halaman.
1. Uji Aplikasi Flutter:
 o Jalankan aplikasi Flutter dan uji semua fungsi CRUD (Create, Read,
Update, Delete).
o Projek ini di uji dengan menggunakan emulator android dari Android
Studio, bisa juga menggunakan perangkat fisik android dengan
menyambungkannya menggunakan USB

Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat API CRUD
menggunakan Laravel dengan SQLite dan aplikasi Flutter yang terhubung
dengan API tersebut. Pastikan untuk melakukan pengujian menyeluruh pada

setiap bagian agar semuanya berfungsi dengan baik.