Referensi Aplikasi Web: PHP CRUD Paging Search jQuery Bootstrap

Di artikel ini kita akan membahas salah satu pola Aplikasi Web yang akhir-akhir ini sering dibuat oleh Web Developer, yaitu di mana semua fungsi dan proses hanya dilakukan dari sebuah halaman tunggal. Jadi, setiap proses seperti menambah, mengubah, menghapus, dan mencari data, sampai saat menentukan jumlah Record per halaman, browsing Record ke halaman lain, mengurutkan data dengan cara mengklik judul kolom tabel, semuanya itu dapat dilakukan oleh Pengguna tanpa harus memuat ulang halaman tersebut.

Ini dia referensi Aplikasi Web sederhana yang baru saja seminggu terakhir ini saya selesaikan:
http://www.masinosinaga.com/php-crud-paging-search-jquery-bootstrap/

Saya tertarik membuat pola Aplikasi Web di atas setelah memperhatikan banyak Aplikasi Web menggunakan fitur AJAX tapi tidak memperhatikan hal-hal kecil yang nampaknya sepele tapi layak diterapkan, seperti mengingat halaman terakhir yang dikunjungi Pengguna, sampai kepada posisi halaman yang setelah direfresh oleh Pengguna seharusnya kembali kepada posisi yang terakhir, dan masih banyak lagi.

Fitur-fitur yang terdapat pada pola tersebut yang berhasil saya implementasikan adalah sebagai berikut:

1. Fungsi CRUD (Create, Read, Update, Delete), Pengguna dapat melakukan aksi menambah, membaca, mengubah, dan menghapus data hanya dari halaman List sebagai halaman utama. Sistem akan menampilkan jendela dialog secara popup dengan mengoptimalkan fitur Modal di framework Twitter Bootstrap. Sistem juga akan tetap berada pada halaman ketika Pengguna mengubah data, sehingga ketika data yang diubah disimpan dari jendela Modal, maka data yang baru akan langsung terlihat di tabel. Hal yang sama juga berlaku untuk proses penghapusan data. Inilah hal sepele yang sering kali dilupakan oleh Web Developer, sehingga menjadi tantangan tersendiri bagi saya untuk mengimplementasikannya melalui pola di atas.
2. Fungsi Paging/Pagination, Pengguna dapat melihat pembagian halaman; bukan hanya pada saat semua Record ditampilkan, tapi juga pada Recordset hasil pencarian data. Termasuk juga sudah menangani jika Pengguna mem-browse ke halaman lain pada Recordset hasil pencarian, maka sistem akan tetap mengingat halaman terakhir yang dikunjungi oleh Pengguna. Cobalah me-refresh/reload halaman dengan menekan F5, maka halaman itu akan tetap diingat oleh sistem. Hal kecil seperti ini pun sering kali luput dari perhatian para Web Developer.
3. Fungsi Search, Pengguna dapat melakukan pencarian data di semua Field atau kolom. Event pencarian akan dimulai saat Pengguna menekan Enter (dari yang tadinya saat mengetikkan data akan langsung mengeksekusi pencarian dan ini sangat boros resource) pada kotak teks pencarian. Pembagian halaman juga akan langsung menyesuaikan dengan hasil pencarian yang dikembalikan oleh sistem.
4. Fungsi jQuery, untuk menangani komunikasi dari Client melalui browser ke Web Server. Dengan cara ini, maka halaman tidak perlu dimuat ulang (refresh/reload), sehingga dapat mempercepat proses, dan menjadi terlebih sedikit lebih profesional. Satu-satunya kelemahan dari pola ini yang saya rasakan adalah, Pengguna tidak dapat berbagi URL untuk memperlihatkan kondisi sebuah halaman yang sedang dia kunjungi.
5. Fungsi Bootstrap, Pengguna dapat melakukan operasi tambah dan ubah data melalui jendela kecil yang muncul secara popup dengan memanfaatkan fitur Modal di framework Twitter Bootstrap. Dampaknya, Aplikasi Web menjadi lebih nyaman dilihat dan dioperasikan melalui perangkat mobile seperti Handphone, Tablet, dsb. Untuk contoh yang ini memang masih menggunakan Twitter Bootstrap versi 2. Mudah-mudahan jika ada waktu, akan saya mutahirkan ke versi 3, ehm.
6. Fungsi Sorting, Pengguna dapat mengurutkan data di sebuah kolom cukup dengan mengklik judul kolomnya, tanpa harus memuat ulang halaman tersebut. Fungsi sorting di sini sifatnya toogle, di mana ketika Pengguna mengklik untuk kedua kalinya, maka kolom akan diurutkan dengan orientasi dari lawan yang sebelumnya (ASC -> DESC -> ASC -> dst).
7. Fungsi Record per Page, Pengguna dapat mengubah jumlah Record per halaman on-the-fly tanpa harus memuat ulang halaman. Pembagian halaman di bagian Paging juga akan otomatis menyesuaikan.
8. Fungsi Remember Last Page, Jika Pengguna me-refresh/reload halaman dengan menekan F5 dari keyboard, maka kondisi terakhir pada halaman sebelum dimuat ulang akan dikembalikan lagi. Jadi, tidak kembali ke halaman 1. Dengan cara ini, maka Aplikasi Web menjadi terlihat lebih profesional dan nyaman bagi Pengguna. Ini juga sering diabaikan oleh pada Web Developer.

Dari contoh tersebut, banyak hal menarik sekaligus merupakan tantangan yang seharusnya bisa diimplementasikan ke dalam PHPMaker. Artinya, seharusnya PHPMaker dapat men-generate code dengan pola tersebut di atas. Ya, ini hanya harapan saya saja, karena konsep di PHPMaker tidak menggunakan AJAX seratus persen. Hanya di beberapa bagian kecil saja.

Kalaupun PHPMaker belum bisa menyertakan ke dalam salah satu fitur mereka, peluang untuk membuat Extension yang dapat menghasilkan code tersebut masih terbuka lebar di depan mata meskipun membutuhkan waktu yang tidak sedikit membuatnya jadi kenyataan, hehehe… 😀

O iya, sebagai informasi, pola Aplikasi Web sederhana di atas saya kembangkan berdasarkan contoh dari:
https://arifnd.wordpress.com/2013/06/07/pagination-dan-searcing-menggunakan-php-jquery-dan-twitter-bootstrap/. Kredit buat mas Ari Effendi.