Front End Tricks, Single Page CRUD

Latar Belakang:
Dalam setiap proyek, membuat sebuah form CRUD adalah hal yang sudah biasa dilakukan berkali-kali. Dalam CRUD terdapat list yang menampilkan semua data, fitur untuk create, fitur untuk read detail, fitur untuk update, dan fitur untuk delete. Sayangnya, kita saat ini masih membuat fitur create, read detail dan update dalam suatu halaman yang semuanya berbeda, sehingga total ada 3 halaman untuk fitur itu saja

Cara menyelesaikan:
Dalam blog ini saya akan memberikan contoh bagaimana trick yang bisa digunakan untuk membuat create, read detail, update dalam 1 modal yang sama dengan manfaat:

• Reusability tinggi
• Waktu development lebih cepat
• Size menjadi lebih ringkas
• Lebih mudah memantain sekaligus jika berubah

Bagaimana caranya ? Semua elemen di ketiganya sama, yang membedakan mereka adalah

Create: data awal kosong, data bisa diubah, ada action save
Read : data awal berisi, data tidak bisa diubah, tidak ada action
Update : data awal berisi, data bisa diubah, ada action update

1. Buat terlebih dulu halaman list beserta seluruh actionnya

 

Untuk JS sederhananya berisi sebagai berikut

2. Buat suatu modal form sesuai dengan seluruh input sesuai dengan list, begini contohnya dalam vue


Terlihat bahwa ada sebuah state yang mengendalikan modal
Saat state detail maka hanya akan disable input
Saat state create, maka hanya tampil tombol Simpan
Saat state update, maka hanya tampil tombol Update

3. Hasil dari kode akan menghasilkan modal sebagai berikut

Saat klik tombol di kanan atas halaman list masuk state add dan form direset isi nya, serta ada tombol simpan

Saat klik tombol detail list masuk state detail dan form terisi dan tidak dapat diubah, serta tidak ada tombol

Saat klik tombol edit list masuk state update dan form terisi dan dapat diubah, serta ada tombol ubah

Kesimpulan:
Sudah saatnya kita menggunakan state untuk mengatur CRUD, jangan membuat 3 halaman berbeda dan mengulang-ulang kode yang sama. Dont Repeat Yourself