Mengelola Data Hirarki Melalui TreeView dengan PHPMaker 2024

Bereksperimen dengan menggunakan tools development PHPMaker 2024 memang sangat menyenangkan. Betapa tidak, sangkin menyenangkannya, ternyata kita dengan mudahnya dapat mengelola data hirarki menggunakan Nested Set Model, sekaligus menampilkannya menggunakan control TreeView.

Sebagai informasi, Nested Set Model merupakan teknik menomori Node sesuai dengan urutan di bagan pohon, dengan cara mengunjungi setiap Node sebanyak dua kali, lalu mengisi nomor sesuai urutan kunjungan, dan pada kedua kunjungannya. Cara ini akan meninggalkan dua nomor untuk setiap Node, yang akan disimpan di database sebagai dua atribut. Biasanya kita sebut dengan istilah Kiri (Left) dan Kanan (Right).

Untuk menampilkannya di TreeView, kita menggunakan jsTree, sebuah jQuery Tree plugin yang menyediakan kemudahan dalam beinteraksi lewat bagan pohon. Selain lisensinya yang free, plugin ini juga open-source, dan dapat dikembangkan serta dapat diatur dengan mudah lewat setting di sisi client pakai kode jQuery.

Selain itu, jsTree juga memiliki fitur drag & drop, navigasi Node lewat keyboard, inline edit, create, delete, tri-state checkboxes, fuzzy searching, dropdown context menu, dan tipe Node-nya bisa dikostumisasi dengan sangat mudah. Pokoknya, plugin jQuery ini sudah terbukti dapat mengatasi permasalahan dalam menampilkan data hirarki lewat bagan pohon (tree structure).

Di awal tulisan ini Penulis menyebutkan menyenangkan, karena cukup dengan menggunakan fitur Custom Files di project PHPMaker 2024, kita sudah bisa mengintegrasikan TreeView ke dalam aplikasi web yang dihasilkan oleh PHPMaker.

Dalam project ini, kita menggunakan Custom File dengan opsi Include common files yang dinonaktifkan (disabled). Itu artinya, kita tidak akan menggunakan route yang dihasilkan oleh PHPMaker 2024, tapi cukup dengan memanggil nama filenya di alamat browser.

Kadang-kadang, kita tidak ingin mengaktifkan opsi Include common files, karena kita tidak akan melibatkan file-file library bawaan PHPMaker lainnya, yang tidak ada katainnya dengan TreeView. Itulah alasan utama mengapa opsi tersebut harus kita non-aktifkan.

Selain itu, untuk menampilkan data menggunakan TreeView, biasanya layout yang digunakan terpisah dengan layout utama dari aplikasi web yang dihasilkan oleh PHPMaker. Itu jugalah alasan mengapa kita tidak mengaktifkan opsi Include common files tadi.

Teknik ini semakin membuktikan betapa fleksibelnya PHPMaker dalam mengintegrasikan file-file script yang sudah disediakan oleh plugin jQuery tertentu. Jadi, tidak selamanya kita harus mengaktifkan opsi Include common files, dan tidak selamanya kita harus menggunakan route yang dibangkitkan oleh PHPMaker 2024.

Kembali ke topik Nested Set Model. Untuk mengelola data hirarki ini, kita akan menggunakan dua buah file masing-masing berisi class yang terkait dengan pengelolaan data hirarki. Pertama adalah class yang mengelola database, dan yang kedua adalah class yang mengelola tree, termasuk operasi CRUD untuk TreeView.

Nah, kedua file class ini akan kita masukkan ke dalam project PHPMaker 2024. Dengan cara ini, maka kita dapat mengubah kode tertentu dengan sangat mudah dan cepat tanpa harus mengubah kode di file di sisi aplikasi web. Cukup dilakukan dari sisi project PHPMaker saja.

Selain itu, dengan cara ini, maka kode dapat dipelihara dengan mudah dan cepat, karena selalu melekat di sisi project PHPMaker. Kita tidak merasa khawatir akan kehilangan file-file terkait. Dan yang lebih penting lagi, karena sudah dimasukkan ke dalam project, maka akan otomatis dibangkitkan sekaligus disalin ke folder di sisi aplikasi web oleh si PHPMaker.

Melalui project ini pula, kita akan sama-sama belajar bagaimana cara menggunakan Custom Files dengan opsi Include common files yang tidak aktif, tapi kita masih tetap dapat mengambil setting database yang dihasilkan oleh PHPMaker 2024 untuk selanjutnya digunakan di Custom File tadi. Tidak lucu bukan kalau kita mengelola setting database lebih dari satu kali?

Tidak itu saja. Untuk keperluan web demo, maka Penulis harus menggunakan server event Database_Connecting untuk menangani dua setting database sekaligus, baik di sisi server localhost komputer Developer, maupun di sisi remote server hosting. Nah, sekalipun kita menggunakan server event tersebut, kita masih bisa menghubungkannya ke Custom File di atas.

Penasaran kan seperti apa tekniknya? Hohoho… 😀

Kembali ke topik TreeView! Karena data sudah ditampilkan menggunakan control TreeView, maka kita dapat dengan mudah menambahkan Node baru secara visual di control tadi. Caranya cukup dengan klik kanan di Node induk, lalu pilih menu Create.

Kita juga dapat mengubah nama Node (dengan menekan tombol F2 di keyboard terlebih dulu), atau bisa juga dengan klik kanan di Node terkait, lalu pilih menu Rename. Tinggal pilih mana yang paling nyaman menurut kita.

Tidak ketinggalan juga dengan fitur hapus Node, cukup dengan klik kanan di Node yang bertalian, lalu pilih menu Delete.

Fitur yang tak kalah menariknya adalah, memindahkan Node ke posisi lain atau ke bawah induk Node lain, dengan cara menyeret dan menjatuhkan (drag and drop) Node tersebut ke posisi yang kita inginkan.

Selain cara tersebut, untuk memindahkan satu Node ke bawah posisi Node tujuan, kita juga bisa klik kanan di Node asal, lalu pilih menu Cut, dan selanjutnya klik kanan di Node tujuan, lalu pilih menu Paste. Bam! Node akan langsung dipindahkan dalam hitungan sepersekian detik.

Setiap perubahan yang terjadi di sisi control TreeView tadi, akan otomatis meng-update data terkait di sisi database. Semua ini bisa terjadi karena kita mengoptimalkan class tree di atas tadi. Keren kan? Fitur yang selama ini banyak dicari-cari oleh Web Developer, dan masih ada yang bingung bagaimana cara mengimplementasikannya ke dalam sebuah aplikasi web.

Tidak itu saja, saat kita menambahkan Node baru, maka sistem akan memastikan tidak ada Node yang menggunakan nama yang sudah digunakan oleh Node lain yang berada di bawah induk Node yang sama. Semuanya ini sudah ditangani dari sisi jsTree. Kita tidak perlu lagi pusing-pusing memikirkannya!

O iya, satu lagi kelebihan dari jsTree ini adalah, kita bisa mengeset supaya saat data di TreeView tadi ditampilkan berikutnya, adalah posisi terakhir saat kita mengunjungi terakhir halaman yang menampilkan TreeView tadi. Artinya, dia bisa mengingat posisi terakhir dan bahkan Node mana yang terakhir terpilih.

Betapa mudah dan cepatnya jika kita menggunakan PHPMaker 2024 dalam mengelola data hirarki. Dengan memiliki project ini, maka Anda menjadi semakin tahu lagi kekuatan sekaligus fleksibilitas yang dimiliki oleh PHPMaker dalam membangun aplikasi web.

Kita juga menjadi tahu seperti apa rancangan tabel di database yang digunakan untuk menyimpan dan mengelola data hirarki tersebut. Dan yang paling penting lagi adalah, bagaimana sistem bisa otomatis menghitung dan menyimpan perubahan berdasarkan event yang terjadi pada control TreeView.

Cek di sini demonya: https://demo.phpmakerprojects.com/treeview/