Menyimpan Data Baru

Pagi kawan ⛅

Cuaca dingin banget ini, tapi tidak mengurangi semangat belajar yaa. Melanjutkan artikel sebelumnya Mengambil dan Menampilkan Data API, artikel kali ini akan membahas tentang cara menyimpan sebuah data ke dalam basis data menggunakan API yang dibangun.

Pastikan telah dari awal mengikuti seri flutter api ini dari awal, sebab pembuatan api tidak dibahas dalam artikel ini langsung. Disini hanya menggunakan api yang telah digunakan.

🕮 Membangun API Laravel

Langkah Pertama,

Buat method baru dalam PostController. Method ini bisa di cek dengan menjalankan perintah 

php artisan route:list

Akan menghasilkan informasi route yang disediakan oleh api, yaitu post.store yang menggunakan post

Buka PostController.php, tambahkan perintah berikut

Dalam method 

store(Request $request)

Seperti biasa, memiliki parameter Request, di dalamnya terdapat validator yang berfungsi untuk mengecek data tidak boleh kosong ditandai dengan required.

Lanjut terdapat kode

        $post = Post::create([

            'nama' => $request->nama,

            'email' => $request->alamat

        ]); 

Digunakan untuk menuliskan & menyimpan data kedalam tabel nama dan email dari kiriman url yang mengandung parameter nama dan request. Parameter tersebut diambil dengan kode

$request->nama

Langkah Kedua,

Cek fungsi kodenya menggunakan Postman 🚀

Klik Tautan Ini Melihat Langkahnya

Langkah Ketiga,

Buka flutter code, folder proyek dan buat UI baru dengan widget TextField() serta ElevatedButton()

Langkah Keempat,

Buat variabel sebagai controller untuk TextField(), variabel ini yang akan meng-handle input value dari widget ini

Bawahnya, lanjut membuat fungsi future yang hampir mirip seperti mengambil data. Bisa dilihat dalam artikel sebelumnya

1. Nama fungsi future yaitu addData()
2. url menggunakan http.post, bukan http.get() seperti sebelumnya
3. Menambah parameter body dengan data nama dan alamat sebagai pengisi value yang diminta oleh $request Laravel.
4. Kode dalam statusCode menggunakan angka diantara ≥ 200 dan ≤ 300

Langkah Kelima,

Tambahkan properti

 controller: nama,

 controller: alamat,

dalam TextField() dan dalam widget ElevatedButton() panggil method addData()

Pilih salah satu dari baris kode berikut 

Langkah Terakhir, uji coba kode

Jalankan aplikasi dengan flutter run -d chrome

Parameter -d chrome menandakan perintah langsung dijalankan dengan web browser Google Chrome

Testing App

Data Terkirim, Berhasil Disimpan dan Tampil 

Uji Coba di Web Browser, Data Muncul

Data berhasil disimpan 😍

Bagaimana, bisa ? Kalau belum, cek lagi baris perintah dari awal dan cek juga bagian back end Laravelnya