Ketika Pengguna (End-User) Aplikasi Web mengklik tombol untuk menyimpan data yang baru saja ditambah atau diubah, maka sebaiknya sistem harus bisa menampilkan pesan konfirmasi, apakah data ingin disimpan atau tidak. Hal ini penting, guna memberi kesempatan kepada Pengguna untuk memeriksa ulang, sebelum akhirnya data tadi benar-benar disimpan ke Database.
Sebagai Web Developer, pernahkah Anda mengalami kesulitan ketika ingin menambahkan pesan konfirmasi sebelum data disimpan melalui Aplikasi Web? Jika Anda membangun Aplikasi Web masih dengan cara-cara kuno atau konvensional, yaitu menulis kode baris per baris, kemungkinan besar jawaban Anda adalah: Ya! Bayangkan saja, Anda harus menggabungkan kode entah menggunakan PHP, Javascript, jQuery atau kombinasi ketiganya, supaya dapat menghasilkan fitur tadi.
Sebenarnya PHPMaker sudah memiliki fitur ini, meskipun tidak 100% sesuai yang diinginkan. Kita bisa mengaktifkan fitur Confirm dari pengaturan level Table. Pengaturan ini tersedia untuk halaman Add, Edit, dan Multi-Update. Setelah diaktifkan, lalu tinggal generate ulang semua file script seperti biasa dengan PHPMaker.
Hasilnya, setelah Pengguna menambah atau mengubah data di Aplikasi Web, lalu menekan tombol Save, maka sistem akan menampilkan halaman yang berisi data tadi dalam mode Read-Only. Di halaman konfirmasi ini, Pengguna masih memiliki kesempatan untuk memeriksa data tersebut. Jika menurutnya data sudah benar, maka dia tinggal menekan tombol Confirm yang berada di bawah halaman konfirmasi itu, supaya data disimpan ke Database.
Pertanyaannya adalah, bagaimana jika kita ingin menampilkan pesan tertentu yang menjelaskan data pada field tertentu di halaman konfirmasi tadi? Katakanlah saat Pengguna mengubah data, kita ingin membandingkan data pada field Quantity di table orderdetails. Tentu saja dalam hal ini kita menggunakan file project demo yang disediakan oleh PHPMaker.
Jika data Quantity ini tidak diubah, maka tampilkan pesan kepada Pengguna di halaman konfirmasi tadi. Dengan cara itu, maka Pengguna diingatkan sekali lagi sebelum menyimpan data tersebut, bahwa data Quantity tidak mengalami perubahan.
Pengguna masih bisa membatalkan dengan menekan tombol Cancel, lalu sistem kembali menampilkan form Edit tadi. Atau, jika Pengguna sudah merasa yakin dengan data itu, dia bisa melanjutkan dengan menekan tombol Confirm untuk mengkonfirmasikan ke sistem, sekaligus menyimpan data ke Database.
Penasaran ingin tahu caranya? Oke, langsung saja ikuti langkah-langkah berikut.
Pertama, pastikan file project demo sudah dibuka dengan menggunakan aplikasi PHPMaker.
Kedua, klik table orderdetails dari panel Database, lalu di bagian kanan klik tab Table, aktifkan item pengaturan Confirm yang terdapat di bagian Edit Page.
Ketiga, salin kode PHP berikut ke dalam server event Row_Rendered milik table orderdetails tadi, sehingga kode selengkapnya menjadi seperti ini:
// Row Rendered event
function Row_Rendered() {
// To view properties of field class, use:
//var_dump($this-><FieldName>);
if (CurrentPageID() == "edit" && $this->CurrentAction != "F") {
$_SESSION["old_data"] = $this->Quantity->EditValue;
}
if (CurrentPageID() == "edit" && $this->CurrentAction == "F") {
$_SESSION["new_data"] = $this->Quantity->ViewValue;
if ($_SESSION["old_data"] == $_SESSION["new_data"]) {
$this->setMessage("Data Quantity tidak mengalami perubahan. Yakin untuk disimpan?");
}
}
}
Perhatikanlah kode di atas. Untuk membandingkan data yang lama dan yang baru pada field Quantity, kita menggunakan bantuan variabel session. Kedua data masing-masing kita simpan ke variabel session dengan nama old_data dan new_data.
Data yang lama kita ambil dari property EditValue milik field Quantity hanya pada saat ID halaman bernilai edit dan property CurrentAction tidak bernilai F. Artinya, itu adalah saat form Edit pertama kali terbuka atau dimuat oleh sistem.
Sedangkan data yang baru kita ambil dari property ViewValue milik field Quantity hanya pada saat ID halaman bernilai edit dan property CurrentAction bernilai F. Artinya, itu saat halaman konfirmasi sedang ditampilkan.
Jadi, untuk memeriksa kondisi apakah data lama dan baru tidak mengalami perubahan, kita cukup membandingkan nilai keduanya pada saat halaman konfirmasi tadi ditampilkan. Jika data lama sama dengan data baru, maka tampilkan pesan di halaman tersebut, bahwa data Quantity tidak mengalami perubahan, disertai pertanyaan apakah yakin data ingin disimpan.
Selanjutnya, jika Pengguna mengklik tombol Cancel, maka sistem akan kembali ke form Edit. Sedangkan jika Pengguna menekan tombol Confirm, maka data akan disimpan ke Database.
Keempat, atau yang terakhir, pastikan kita sudah men-generate ulang semua file script dengan menggunakan PHPMaker, seperti biasa.
Setelah itu, jalankan Aplikasi Web dari browser. Klik menu Order Details untuk menampilkan halaman List yang menampilkan data tersebut. Lalu klik menu Edit di salah satu record yang kita inginkan. Sistem akan menampilkan form Edit. Cobalah untuk tidak mengubah data apapun, lalu klik tombol Save, maka di halaman yang muncul selanjutnya, akan terdapat pesan konfirmasi seperti yang terdapat di kode tadi.
Cobalah untuk menekan tombol Cancel, maka sistem akan menampilkan kembali form Edit tadi. Sekarang ubahlah data pada field Quantity. Setelah itu tekan lagi tombol Save, maka di halaman selanjutnya, pesan konfirmasi tadi sudah tidak ada lagi. Artinya, data Quantity sudah diubah oleh si Pengguna tadi.
Sampai di sini kita sudah berhasil menerapkan kebutuhan tadi. Tentu saja, fitur ini masih memiliki sedikit keterbatasan. Apa itu? Untuk menampilkan halaman konfirmasi tadi, sistem tetap membutuhkan satu HTTP Request ke server. Tentu saja hal ini membutuhkan waktu sedikit lama, dibandingkan jika seandainya kita bisa menampikan kotak dialog yang muncul secara popup.
Sayangnya, framework yang digunakan oleh PHPMaker belum sepenuhnya mendukung ini. Saya katakan belum sepenuhnya, karena sebenarnya PHPMaker sudah menyediakan Javascript function untuk menampilkan kotak dialog konfirmasi yang dilengkapi tombol OK dan Cancel. Tapi, untuk menggunakan fungsi ini, tentu kita harus berpikir lagi untuk menambahkan kode yang memanggil fungsi tadi di bagian Client Scripts. Selain itu, kita juga harus menangani kemungkinan jika si Pengguna membatalkan atau melanjutkan ke proses penyimpanan.
Nah, kabar baik buat Anda yang sudah menggunakan Masino Extensions maupun Masino Template. Anda tidak perlu lagi bersusah payah untuk menambahkan kode di server event Row_Rendered tadi. Anda juga tidak perlu repot-repot menambahkan kode di bagian Client Scripts pada project PHPMaker Anda.
Mengapa? Karena pesan konfirmasi menggunakan kotak dialog itu bisa Anda aktifkan cukup dari level Table melalui extension MasinoFixedWidthSite13 (jika menggunakan Masino Extensions). Atau, jika Anda menggunakan Masino Template, maka cukup aktifkan dari level Table melalui extension MasinoTemplateSettings13. Secara standar (default), fitur ini sudah dalam keadaan aktif. Jadi, Anda tinggal generate saja semua file script seperti biasa.
Jika Anda mengaktifkan item pengaturan Modal dialog dari level Table PHPMaker untuk halaman Add dan/atau Edit, maka fitur kotak dialog konfirmasi ini selalu digunakan. Dengan kata lain, fitur ini tidak bisa dinonaktifkan. Alasannya? Adalah wajar ketika Pengguna ingin menyimpan data dari form Add maupun Edit melalui kotak Modal dialog, maka Pengguna harus diberi kesempatan untuk memeriksa ulang data sebelum benar-benar yakin ingin disimpan ke Database.
Yang menariknya lagi adalah, kotak dialog yang muncul secara popup tadi bisa digeser oleh Pengguna ke posisi yang diinginkan. Hal ini sangat berguna, jika Pengguna ingin melihat data yang ditutupi oleh kotak pesan tadi. Selain itu, Aplikasi Web yang kita bangun pun akan semakin terlihat profesional.
Betapa PHPMaker sudah terbukti dan teruji untuk membantu tugas Web Developer dalam membangun Aplikasi Web. Dengan menggunakan PHPMaker ditambah lagi dengan Masino Extensions atau Masino Template, maka Aplikasi Web dapat dikerjakan dengan mudah, cepat, dan menyenangkan tentunya.
Tinggalkan Balasan