Advertisement
  1. Code
  2. PHP

Buat Grid Data Ajax dengan CodeIgniter dan jQuery

Scroll to top
Read Time: 14 min

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Dalam pelajaran ini, kita akan membuat pustaka CodeIgniter yang memungkinkan kita untuk menghasilkan data grid secara otomatis untuk mengelola tabel database apa pun. Saya akan menjelaskan setiap langkah yang diperlukan untuk membuat kelas ini; jadi Anda mungkin akan mempelajari beberapa teknik/konsep OOP baru dalam prosesnya!

Sebagai bonus, kita akan terus menulis beberapa kode jQuery yang akan memungkinkan pengguna untuk memperbarui konten kisi data tanpa harus menunggu penyegaran halaman.


Harap dicatat...

Tutorial ini mengasumsikan bahwa Anda memiliki pemahaman sederhana tentang framework CodeIgniter dan jQuery.

Apa itu Data Grid?

Datagrid adalah tabel yang menampilkan konten database atau tabel bersama dengan kontrol penyortiran.

Sebuah datagrid adalah tabel yang menampilkan isi dari database atau tabel bersama dengan kontrol penyortiran. Dalam tutorial ini, kita akan diberi tugas untuk menyediakan fungsionalitas ini, tetapi juga menyelamatkan pengguna dari menunggu halaman diperbarui setiap kali operasi dilakukan. Berkat jQuery, ini akan menjadi tugas yang cukup sederhana!

Bagaimana dengan pengguna yang tidak mengaktifkan Javascript? Jangan khawatir, kita akan menggantinya juga!


Langkah 1: Membuat Kelas Generator Data Grid

Kita ingin membuat alat yang memungkinkan membuat datagrid secara dinamis untuk tabel database apa pun yang dimiliki. Ini berarti kode tidak terikat pada struktur tabel tertentu, dan, dengan demikian, tidak tergantung pada data itu sendiri. Semua pembuat kode (pengembang yang menggunakan kelas kita) harus tahu adalah nama tabel yang akan diubah menjadi kisi dan kunci utama untuk tabel itu. Inilah pengantar kelas yang akan dikembangkan untuk sebagian besar tutorial ini:

Kelas Datagrid bisa ditambahkan ke folder aplikasi/perpustakaan, tetapi kita akan menambahkannya sebagai penolong ke framework CodeIgniter. Kenapa? Karena memuat pustaka tidak memungkinkan kita meneruskan argumen ke konstruktor kelas, maka memuatnya sebagai penolong akan menyelesaikan masalah. Poin ini akan lebih masuk akal bagi Anda ketika kita selesai menulis konstruktor.

Metode Konstruktor Kelas

Kita sudah banyak melakukan hal ini; tapi jangan khawatir, karena saya akan menjelaskan semuanya untuk Anda di paragraf berikutnya.

Konstruktor mengambil dua argumen: yang pertama adalah nama tabel dalam database yang ingin Anda tampilkan sebagai datagrid kepada pengguna; param kedua adalah nama kolom yang berfungsi sebagai kunci utama untuk tabel itu (lebih lanjut tentang itu nanti). Di dalam tubuh konstruktor, kita instantiate Objek CodeIgniter, Objek Database dan kelas/pustaka Tabel HTML. Semua ini akan dibutuhkan sepanjang masa objek Datagrid dan sudah dibangun ke dalam framework CI. Perhatikan bahwa kita juga memeriksa apakah kunci utama benar-benar ada di tabel yang diberikan, dan, jika tidak, kita melemparkan pengecualian yang melaporkan kesalahan tersebut. Sekarang variabel $this->tbl_fields akan tersedia untuk digunakan nanti, jadi kita tidak perlu mengambil database lagi.

"Kita bisa menggunakan perintah, $CI->db->list_fields($tbl_name) untuk mengambil nama semua bidang yang dimiliki tabel. Namun, untuk kinerja yang lebih baik, saya sarankan caching hasilnya. "

Metode untuk Menyesuaikan Judul Tabel

Ini memungkinkan Anda untuk menyesuaikan judul tabel kisi data Anda - yaitu, dengan itu, Anda bisa menimpa nama kolom asli untuk bidang tabel tertentu. Dibutuhkan array asosiatif, seperti ini: regdate => "Registration Date". Alih-alih hanya "Regdate" teknis sebagai tajuk kolom untuk jenis data itu, kita memiliki judul yang lebih dapat dibaca manusia sebagai gantinya. Kode yang bertanggung jawab untuk menerapkan pos akan segera terungkap.

Metode untuk Ignoring/Hiding Bidang Tabel

ignoreFields menerima array yang berisi bidang yang akan diabaikan ketika mengambil data dari database. Ini berguna ketika kita memiliki tabel dengan banyak bidang, tetapi kita hanya ingin menyembunyikan beberapa saja. Metode ini cukup pintar untuk melacak upaya untuk mengabaikan bidang kunci utama dan kemudian melewati itu. Ini karena kunci utama tidak dapat diabaikan karena alasan teknis (Anda akan segera tahu alasannya). Namun, jika Anda ingin menyembunyikan kolom kunci utama agar tidak muncul di UI, Anda dapat menggunakan metode hidePkCol:

Metode ini menerima nilai boolean untuk menunjukkan jika kita ingin menyembunyikan kolom kunci utama sehingga tidak akan muncul di kisi data. Kadang-kadang, itu ide yang buruk untuk menampilkan data pkey, yang biasanya merupakan kode numerik tanpa makna bagi pengguna.

Metode contoh berikutnya:

Di sini kita memiliki metode pembantu; itu sebabnya ia memiliki pengubah "pribadi" dan diawali dengan karakter garis bawah (konvensi kode). Ini akan digunakan oleh metode generate() - dijelaskan secara singkat - untuk memilih bidang tabel yang sesuai dan juga judul yang tepat diatur ke object tabel (generator). Perhatikan baris berikut:

Di sinilah kita menerapkan tajuk atau resor yang disesuaikan ke tajuk default jika tidak ada yang diberikan. Jika kolom pk seharusnya disembunyikan dari view, maka judulnya akan dilewati. Perhatikan juga baris berikut:

Perintah di atas menginstruksikan program untuk menambahkan kotak centang "Master" sebagai judul pertama tabel. Kotak centang itu berbeda dari kotak centang lain dalam kotak karena memungkinkan pengguna untuk memeriksa atau menghapus centang semua kotak centang hanya dalam satu kali jalan. Fungsionalitas toggling ini akan diimplementasikan dalam beberapa saat dengan cuplikan kode jQuery sederhana.

Metode untuk Generate/Render Datagrid

Sekarang tibalah saatnya melakukan pekerjaan nyata untuk kita:

Metode generate, seperti namanya, bertanggung jawab untuk menghasilkan data grid itu sendiri. Anda harus memanggil metode ini hanya setelah Anda mengkonfigurasi objek sesuai dengan kebutuhan Anda. Hal pertama yang dilakukannya adalah memanggil metode $this->_selectFields() untuk melakukan tindakan yang dijelaskan sebelumnya. Sekarang harus mengambil semua baris dari database dan kemudian mengulanginya, menambahkan kotak centang ke awal setiap baris:

Di dalam loop foreach pada metode generate, jika flag $this->hide_pk_col disetel ke true, maka kita harus menghapus setingan entri primary key di $row array sehingga tidak akan muncul sebagai kolom ketika $this->CI->table object tabel memproses semua baris dan menghasilkan output html akhir. Pada titik ini, boleh saja menghapus kunci utama, jika perlu, karena kita tidak lagi memerlukan informasi itu. A

Tapi apa yang dilakukan pengguna dengan baris yang dipilih/dicentang? Untuk menjawab ini, saya telah menyiapkan beberapa metode lagi. Yang pertama memungkinkan kita untuk membuat "tombol aksi" tanpa harus mengetahui detail teknis tentang cara kerja sistem kisi secara internal:

Metode untuk Menambahkan Tombol ke Formulir Data Grid

Cukup berikan nama tindakan sebagai argumen pertama dan argumen kedua untuk menunjukkan label untuk tombol yang dihasilkan. Atribut class secara otomatis dihasilkan untuk tombol itu sehingga kita bisa bermain-main dengannya lebih mudah ketika kita bekerja dengannya di JavaScript. Tapi, bagaimana kita tahu jika tombol aksi tertentu telah ditekan oleh pengguna? Jawabannya dapat ditemukan di metode selanjutnya:

Ya! Metode statis lain yang membantu kita ketika kita berhadapan dengan formulir. Jika ada kisi data yang dikirimkan, metode ini akan mengembalikan nama tindakan (atau "operasi") yang terkait dengan peristiwa pengiriman itu. Selain itu, alat praktis lain untuk memproses formulir datagrid kita adalah...

...yang mengembalikan array yang berisi ids yang dipilih sehingga Anda dapat melacak baris mana yang telah dipilih pada kisi dan kemudian melakukan beberapa tindakan dengannya. Sebagai contoh dari apa yang dapat dilakukan dengan pemilihan id baris, saya telah menyiapkan metode lain - ini menjadi metode contoh, dan bukan metode statis, karena menggunakan sumber daya contoh objek untuk melakukan bisnisnya:

Jika setidaknya satu kotak centang dicentang, metode deletePostSelection() akan menghasilkan dan mengeksekusi pernyataan SQL seperti berikut (misalkan $tbl_name='my_table' dan $pk_col='id'):

...yang secara efektif akan menghapus baris yang dipilih dari layer persisten. Mungkin ada lebih banyak operasi yang dapat Anda tambahkan ke data grid, tetapi itu akan tergantung pada spesifikasi proyek Anda. Sebagai tip, Anda dapat memperluas kelas ini menjadi, katakanlah, InboxDatagrid, jadi, di luar metode deletePostSelection, ini dapat mencakup operasi tambahan, seperti moveSelectedMessagesTo($place), dll...

Menyatukan semuanya

Sekarang, jika Anda telah mengikuti langkah demi langkah tutorial ini, Anda seharusnya berakhir dengan sesuatu yang mirip dengan yang berikut ini:

Perhatikan: Jangan lupa untuk menyimpan file ini sebagai datagrid_helper.php, dan letakkan di "application/helper/"


Langkah 2: Menguji Kelas Pembantu Datagrid dengan Controller CodeIgniter

Kita sekarang akan membuat test controller sederhana dan memuat kelas Datagrid sebagai helper di konstruktornya. Tapi sebelum itu, kita harus mendefinisikan tabel database dummy dan mengisinya dengan beberapa data sampel.

Jalankan SQL berikut untuk membuat database dan tabel pengguna:

Selanjutnya, mari tambahkan beberapa pengguna ke dalamnya:

Sekarang, simpan kode berikut sebagai "test.php," dan menambahkannya ke folder "application/controllers":

Sebuah instance dari kelas ini dibuat dan diteruskan sebagai referensi ke anggota $this->Datagrid. Perhatikan bahwa kita akan mengambil data dari tabel yang disebut "users" yang kunci utamanya adalah kolom "id"; kemudian, pada metode indeks kita mengambil langkah-langkah berikut: mengkonfigurasi objek Datagrid, merendernya di dalam formulir dengan tombol hapus yang ditambahkan padanya dan melihat apakah semuanya berfungsi seperti yang diharapkan:

Pertanyaan: Apa yang terjadi ketika formulir dikirim?

Jawaban: Metode "Test::proc()" menangani pemrosesan formulir dan memilih operasi yang tepat untuk diterapkan terhadap id yang dipilih oleh pengirim formulir. Itu juga menangani permintaan AJAX, jadi itu akan menggemakan objek JSON kembali ke klien. Fitur AJAX-aware ini akan berguna ketika jQuery mulai beraksi, yang sekarang!

"Itu selalu merupakan ide cerdas untuk membuat aplikasi web yang mengkompensasi ketika JavaScript/AJAX tidak tersedia. Dengan cara ini, beberapa pengguna akan memiliki pengalaman yang lebih kaya dan lebih cepat, sementara yang tanpa JavaScript diaktifkan masih dapat menggunakan aplikasi secara normal."


Langkah 3: Menerapkan Ajax (jQuery to the Rescue!)

Ketika pengguna mengklik tombol (atau tombol aksi lainnya), kita ingin, mungkin, untuk mencegah halaman memuat ulang dan harus membuat semuanya lagi; ini bisa membuat pengguna aplikasi kita tertidur! Mengatasi masalah ini tidak akan menjadi tugas yang sulit jika kita tetap menggunakan pustaka jQuery. Karena ini bukan tutorial "pemula", saya tidak akan membahas semua detail terkait cara mendapatkan perpustakaan, cara memasukkannya ke halaman, dll. Anda diharapkan mengetahui langkah-langkah ini sendiri.

Buat folder, bernama "js", tambahkan pustaka jQuery di dalamnya, dan buat file tampilan, bernama users.php. Buka file baru ini, dan tambahkan:

Apakah Anda menyadari bahwa kita telah memindahkan kode dari Test::index dan ke skrip view yang baru? Ini berarti kita harus mengubah metode Test::index() sesuai:

Itu lebih baik. Jika Anda ingin menambahkan beberapa gaya ke kotak, Anda dapat menggunakan CSS berikut (atau membuat tata letak yang lebih baik sendiri):

Sekarang, tolong, buat "datagrid.js" file, letakkan di direktori "js", dan mulai dengan kode ini:

Di dalam penutupan ini, kita akan menulis kode yang akan bertugas mengendalikan acara pengiriman tertentu begitu halaman telah sepenuhnya dimuat. Hal pertama yang perlu kita lakukan adalah melacak ketika pengguna mengklik tombol kirim pada formulir kisi data, dan kemudian mengirim data itu untuk diproses di server.

Atau, kita bisa mulai dengan sesuatu seperti: $('.dg_form').submit(function(e){...}). Namun, karena saya ingin melacak tombol mana yang telah ditekan dan mengekstrak nama tindakan yang dipilih berdasarkan itu, saya lebih suka mengikat event handler ke tombol kirim itu sendiri dan kemudian naik ke atas hierarki node untuk menemukan bentuk yang tombol yang ditekan milik:

Selanjutnya, kami menambahkan elemen input tersembunyi di dalam elemen form untuk menunjukkan tindakan mana yang sedang dikirim:

Ini diperlukan karena fungsi tidak menganggap tombol kirim sebagai entri formulir yang valid. Jadi kita harus memiliki retasan itu di tempat ketika membuat serial data formulir.

"Jangan lupa: fungsinya mengabaikan tombol kirim, mengabaikannya hanya sebagai sampah markup!"

Mengirim Data Formulir ke Server

Selanjutnya, kita lanjutkan untuk mendapatkan atribut action dari elemen bentuk dan menambahkan string "/ajax" ke url itu, sehingga metode ini akan tahu bahwa ini, pada kenyataannya, adalah permintaan AJAX. Setelah itu, kita menggunakan fungsi jQuery.post untuk mengirim data untuk diproses oleh controller yang sesuai, sisi server, dan kemudian mencegat acara respons dengan panggilan balik/penutupan terdaftar:

Perhatikan bahwa kita meminta respons untuk dikodekan sebagai "json" karena kita meneruskan string itu sebagai argumen keempat dari fungsi $.post. Isi dari callback yang berhubungan dengan respons server harus agak mudah dipahami; itu menentukan apakah ada kesalahan, dan, jika demikian, memberitahukannya. Jika tidak, itu akan menunjukkan bahwa tindakan berhasil diproses (dalam hal ini, jika itu adalah tindakan "", kita menghapus baris yang terkait dengan id yang dipilih oleh pengguna).


Langkah 4: Periksa Semua atau Tidak Ada!

Satu-satunya hal yang hilang sekarang adalah fungsi sakelar yang saya janjikan sebelumnya. Kita harus mendaftarkan fungsi callback ketika kotak centang "Master" - yang memiliki atribut kelas diatur ke "dg_check_toggler" - diklik. Tambahkan potongan kode berikut setelah yang sebelumnya:

Ketika kotak centang "toggler" diklik, jika masuk ke keadaan "dicentang", maka semua baris dari kisi data terkait akan diperiksa secara bersamaan; kalau tidak semuanya akan dicentang.


Pikiran terakhir

Kita belum mencapai puncak gunung es ketika datang ke kisi data untuk sistem manajemen konten yang lebih kompleks. Fitur lain yang mungkin terbukti bermanfaat adalah:

  • Menyortir data grid berdasarkan nama kolom
  • Tautan pagination untuk menelusuri data grid
  • Edit/Ubah tautan untuk memperbarui data satu baris
  • Mekanisme pencarian untuk memfilter hasil

Terima kasih sudah membaca. Jika Anda ingin tutorial lanjutan, beri tahu saya di komentar!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.