Jelaskan cara membangun komponen reusable

Sebagian pengguna tidak menyukai konfirmasi penghapusan dan konfirmasi update. Bagi mereka, hal ini tidak berguna, bahkan hanya menghambat kelancaran pekerjaan. Namun, bagi sebagian lainnya, hal ini sangat bermanfaat untuk mencegah ketidaksengajaan menghapus maupun memperbaharui data.

Sebagai contoh, berikut adalah tangkapan layar daftar pengarang.

Ketika pengguna mengklik salah satu tombol Delete, bila tidak ada konfirmasi, datanya langsung terhapus dari basis data dan tidak ada cara mudah untuk mengembalikannya. Namun bila ada konfirmasi, terlebih dahulu tampil pesan berikut.

Begitu pula pembaruan data pengarang berikut.

Ketika pengguna mengklik tombol Save, bila tidak ada konfirmasi, datanya langsung tersimpan ke dalam basis data. Bila ada kesalahan data, pengguna harus mengedit ulang datanya. Namun bila ada konfirmasi, terlebih dahulu tampil pesan berikut.

Selain pengarang, masih ada data buku dan penerbit yang juga memerlukan konfirmasi penghapusan dan konfirmasi update sehingga total ada enam konfirmasi. Walaupun tidak salah, membuat enam buah konfirmasi sangat tidak efisien. Bagaimana kalau ada tambahan data lain, misalnya data anggota, data peminjaman, dsb., apakah harus dibuat lagi konfirmasi tambahannya?

Ada kesamaan format tampilan pada dua contoh konfirmasi di atas. Daripada membuat enam komponen dialog yang berbeda, akan lebih efisien bila membuat sebuah komponen dialog yang dapat digunakan kembali tanpa batas.

Membuat Komponen Dialog

(1) Membuka aplikasi BookApp.

• Klik BookApp.sln untuk membuka aplikasinya.

(2) Membuat folder Component.

• Pada jendela Solution Explorer, klik kanan BookApp.
• Pilih submenu: Add|New Folder.

• Ketik Components sebagai nama foldernya.

(3) Membuat file komponen Dialog.

• Pada jendela Solution Explorer, klik kanan folder Components.
• Pilih submenu Add|Razor Component...

• Klik Razor Component.
• Di kotak teks Name, ketik Dialog.razor sebagai nama filenya.
• Klik tombol Add.

• Klik ganda Dialog.razor untuk membuka filenya.

(4) Kode sumber

Berdasarkan gambar di atas, komponen dialog berisi properti berikut:
(1) Caption berisi teks judul.
(2) Message berisi teks pesan.
(3) Category merupakan jenis dialog.

Ada dua tombol yang kalau diklik memunculkan event (kejadian) yang memicu metode. Klik tombol pertama untuk menyetujui aksi yang akan dilakukan. Sebaliknya, klik tombol kedua untuk membatalkan aksi. Dengan demikian, selain tiga properti di atas, komponen dialog berisi dua metode, yaitu:
(4) Metode OK untuk melaksanakan aksi.
(5) Metode Cancel untuk membatalkan aksi.

Berikut adalah kode sumbernya.

Dialog.razor

Pada kode sumber di atas, ada properti ke-4 yaitu OnClose sebagai EventCallback sehingga Dialog.razor sebagai komponen anak dapat mengirimkan argumen ke komponen induk. Dalam kode di atas, argumen memiliki nilai:

• true bila pengguna mengklik tombol pertama dan memicu motode Ok().
• false bila pengguna mengklik tombol kedua yang kemudian memicu motode Cancel().

Untuk menggunakan komponen Dialog.razor dalam aplikasi, tambahkan kode berikut ke dalam_Imports.razor.

@using BookApp.Components

Jadi kode lengkapnya adalah sebagai berikut:

Teks yang dicetak tebal adalah kode tambahan.

Implementasi Konfirmasi Penghapusan

Sebagai contoh, kita akan mengimplementasikan konfirmasi penghapusan data author (pengarang).

• Pada jendela Solution Explorer, buka folder Pages.
• Klik kanan ListAuthor.razor, lalu pilih submenu Open.
• Lakukan modifikasi isi fileListAuthor.razor sehingga kode selengkapnya adalah sebagai berikut.

ListAuthor.razor

Yang dicetak tebal adalah kode yang dimodifikasi dan kode tambahan.

Implementasi Konfirmasi Update

Sebagai contoh, kita akan mengimplementasikan konfirmasi update data publisher (penerbit).

• Pada jendela Solution Explorer, buka folder Pages.
• Klik ganda EditPublisher.razor, lalu pilih submenu Open.
• Lakukan modifikasi isi file EditPublisher.razor sehingga kode selengkapnya adalah sebagai berikut.

EditPublisher.razor

Yang dicetak tebal adalah kode yang dimodifikasi dan kode tambahan.

Sebagai contoh, berikut akan dibahas bagaimana konfirmasi penghapusan berproses.

• Klik Authors untuk membuka halaman daftar pengarang.

• Pada halaman daftar pengarang— ListAuthor.razor sebagai komponen induk— klik tombol Delete.

1. Terjadi event onclick yang memicu metode OpenDialog(). Nilai DialogIsOpen pada baris 131 dan message pada baris 134 secara otomatis sama dengan nilai yang diproses oleh metode OpenDialog().
2. Karena variabel DialogIsOpen bernilai true, komponen ListAuthor.razor menjalankan pernyataan baris 131 s.d 138, sehingga argumen (parameter aktual) memiliki nilai untuk dikirim ke komponen dialog Dialog.razor. Pernyataan OnClose=”@OnDialogClose” membuat event OnClose pada komponen anak (Dialog.razor) terikat ke metode OnDialogClose di komponen induk (ListAuthor.razor). Sedangkan pernyataan Type=”Dialog.Category.DeleteNot” berguna untuk menentukan jenis dialog.
3. Membuka komponen dialog. Dialog.razor sebagai komponen anak menerima nilai argumen dari komponen induk.

Sampai di sini, ada dua pilihan bagi pengguna:

• membatalkan penghapusan dengan mengklik tombol Don’t Delete atau tombol X.
• menyetujui penghapusan dengan mengklik Delete.

Membatalkan penghapusan

Pengguna mengklik tombol Don’t Delete atau tombol X.

1. Terjadi event onclick yang memicu metode Cancel().
2. Event OnClose sebagai EventCallback mengirimkan argumen yang bernilai false ke ListAuthor.razor.

Menyetujui penghapusan

Pengguna mengklik tombol Delete.

1. Terjadi event onclick yang memicu metode Ok().
2. Event OnClose sebagai EventCallback mengirimkan argumen yang bernilai true ke ListAuthor.razor.

Event OnClose pada Dialog.razor memicu metode OnDialogClose(bool isOk) di ListAuthor.razor yang akan menghapus data jika dan hanya jika argumennya bernilai true.

Selain untuk konfirmasi penghapusan dan update, komponen Dialog.razor dapat juga dipergunakan untuk keperluan lain, misalnya untuk menampilkan pesan kesalahan atau sekedar menampilkan informasi.

Mungkin ada cara yang lebih baik untuk membuat komponen dialog modal yang dapat digunakan kembali dan menerapkannya pada konfirmasi penghapusan dan/atau konfirmasi pembaruan. Tolong beri tahu saya jika Anda mengetahuinya.

Mungkin ada cara yang lebih baik untuk mengimplementasikan konfirmasi penghapusan dan konfirmasi update. Tolong beri tahu saya jika Anda mengetahuinya.

Terima kasih sudah membaca. Semoga berfaedah.