Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / Web Development / Referensi Aplikasi Web: PHP CRUD Paging Search jQuery Bootstrap
Mengapa Web Developer Mencari 1001 Alasan Ketika Client Minta Update?
Tolong Jangan Buat Aplikasi Web yang Bertele-Tele dan Mempersulit Pengguna!

Referensi Aplikasi Web: PHP CRUD Paging Search jQuery Bootstrap

Rab, 21 Januari 2015 oleh Masino Sinaga 6 Komentar

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.

Ditempatkan di bawah: Web Development Ditag dengan:bootstrap, CRUD, jQuery, paging, PHP CRUD Search Paging jQuery Bootstrap, quick search

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Mengapa Web Developer Mencari 1001 Alasan Ketika Client Minta Update?
Tolong Jangan Buat Aplikasi Web yang Bertele-Tele dan Mempersulit Pengguna!

Komentar

  1. Teguh mengatakan

    Kam, 19 Maret 2015 pada 10:24 am

    Kalo Mas Ari Effendi menerangkan secara global perihal aplikasi nya dan yang terutama di share source nya tapi kalau yang ini tidak ada satupun yang bisa dipelajari hanya semacam promotion saja ya ?!

    Balas
    • Masino Sinaga mengatakan

      Kam, 19 Maret 2015 pada 10:32 am

      Betul mas, paling tidak saya ingin menyampaikan ide berisi fungsi-fungsi baru apa saja yang perlu ditambahkan ke model CRUD seperti itu.

      Balas
  2. dika mengatakan

    Jum, 24 April 2015 pada 6:39 pm

    mas ada tutorialnya mas? lagi nyari yang seperti ini mas susah nggak dapet2

    Balas
    • Masino Sinaga mengatakan

      Ming, 26 April 2015 pada 8:10 pm

      Maaf, tutorialnya nggak ada mas.

      Balas
  3. yanu mengatakan

    Kam, 5 Januari 2017 pada 5:08 pm

    gan ditunggu update script dengan ditambah validasi apabila kosong atau apabila tidak sesuai keinginan misal text tertentu wajib angka dan bagaimana cara upload foto di form modal

    Balas
    • Masino Sinaga mengatakan

      Kam, 5 Januari 2017 pada 8:43 pm

      Maaf, lagi gak berminat meneruskan pengembangannya. Masih asyik main PHPMaker, hehehe, hiks.

      Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Pos-pos Terbaru

  • Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Alasan AlwaysUseEnglishUSLocale Sebaiknya Aktif di Masino Extensions untuk PHPMaker 2022
  • MasinoInputMask18 Extension, Autoformat Angka dengan Fitur Lebih Kaya di PHPMaker 2022
  • MasinoSignature18 Extension, Mudahnya Mengelola Tanda Tangan di PHPMaker 2022
  • MasinoFormWizard18 Extension, Mengubah Tampilan Multi-Page di PHPMaker 2022

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Thien Rudi pada Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2021 | WordPress | Catat masuk | Kembali ke atas