Pernahkah kalian kesulitan untuk membuat struktur organisasi berbasis web? Biasanya, kalian pasti akan menggunakan aplikasi Visio atau Excel atau Spreadsheet untuk menampilkan struktur organisasi.
Bagi sebagian developer, membayangkan struktur organisasi berbasis web saja rasanya sudah pusing. Banyak yang harus dipikirkan, mulai dari merancang tabel untuk mengelola data hirarki, menangani fungsi-fungsi CRUD untuk data hirarki, sampai kepada menampilkan struktur organisasi dengan bagan pohon di halaman web.
Ada beberapa hal yang perlu dipertimbangkan sebelum membuat aplikasi web yang berisi struktur organisasi.
Pertama, apakah organisasi di suatu perusahaan tersebut memiliki tingkatan (Level). Biasanya, di suatu perusahaan besar, pasti memiliki organisasi mulai dari level Unit Pelaksana Teknis, Regional, sampai kepada level Kantor Pusat. Untuk itu, kita harus menyediakan table Level di database untuk menyimpan data tersebut.
Kedua, apakah di bawah Level tadi, masih ada tingkatan yang lebih detail lagi. Biasanya, sering kita sebut dengan istilah Sub Level. Dari contoh di atas, untuk level Unit Pelaksana Teknis, biasanya perusahaan itu akan membagi ke dalam 2 Sub Level lagi, masing-masing: Kantor Cabang Utama dan Kantor Cabang. Atau bahkan ada yang sampai 3 Sub Level, yaitu sampai ke Kantor Cabang Pembantu. Contoh lainnya, untuk level Kantor Pusat, maka perusahaan itu akan memiliki 2 Sub Level juga, yaitu: Direktorat, dan Sub-Direktorat. Untuk itulah, kita wajib menyediakan table Sub Level di database.
Ketiga, kita juga harus mengelompokkan tingkatan di struktur organisasi. Contoh, untuk Level Kantor Pusat dengan Sub Level Sub-Direktorat, ada kelompok Senior Vice President, ada kelompok Vice President, ada kelompok Manager, ada kelompok Asisten Manajer, dan seterusnya. Contoh lainnya, untuk Level Unit Pelaksana Teknis dengan Sub Level Kantor Cabang Utama KCU, ada kelompok Executive General Manager (EGM), ada kelompok Deputy EGM, ada kelompok Manajer KCU, ada kelompok Asisten Manajer KCU, dan seterusnya. Untuk itulah, kita juga wajib menyediakan table Structure Group.
Keempat, yang tak kalah pentingnya, kita harus menyediakan table Employees untuk mengelola data Pegawai atau Karyawan. Untuk contoh berikut, kita menyederhanakan table ini hanya berisi data ID Karyawan, Nama Karyawan, Foto Karyawan, dan Status Aktif.
Kelima, kita juga harus menyediakan wadah untuk mengelola data organisasi, yang kita sebut dengan table Organizations. Data ini sangat penting, untuk memisahkan organisasi yang satu dengan lainnya, apalagi jika di dalam sebuah perusahaan dapat memiliki lebih dari satu organisasi yang dikelompokkan berdasarkan Level dan Sub-Level yang sudah dijelaskan di atas tadi.
Keenam, nah, ini adalah jantung atau inti dari aplikasi ini. Apa itu? Ya, table untuk menampung data hirarki dari struktur organisasi beserta path atau alamat dari setiap node di struktur organisasi tersebut. Dalam hal ini, kita menggunakan metode Closure Table. Seperti yang kita ketahui, metode ini merupakan yang paling efektif dan efisien dalam menangani data hirarki.
Metode Closure Table menggunakan pendekatan bahwa sebuah node itu pasti memiliki informasi yang menunjukkan siapa induknya dan/atau anaknya. Nah, data master node tadi akan disimpan di table khusus, yang dalam hal ini kita sebut dengan table Structure.
Selanjutnya, untuk menyimpan alamat atau data hirarki untuk setiap node tadi, kita harus memiliki data Ancestor (induk) dan Descendant (anak), termasuk informasi kedalaman dari sebuah node di struktur organisasi, dan apakah data ini merupakan posisi puncak atau Top. Nah, data hirarki ini harus disimpan di table tersendiri, dan kita sebut dengan table Structure Path.
Sampai di sini kita sudah memiliki semua informasi yang wajib ada untuk membangun struktur organisasi, dan sudah kita pisahkan di beberapa table.
Selanjutnya, kita tinggal menulis sedikit kode PHP di beberapa server event dari dalam project PHPMaker kita, untuk menangani proses CRUD untuk setiap data di semua table yang sudah kita sebutkan di atas. Jika kita membuat aplikasi web dari titik nol, tentu saja hal ini membutuhkan waktu yang sangat lama.
Sudah tidak diragukan lagi, PHPMaker terbukti sebagai development tools yang dapat mempercepat proses pengembangan aplikasi web. Termasuk untuk mengelola struktur organisasi yang dapat menghasilkan pohon organisasi (organization tree).
Untuk table Level, Sub Level, dan Structure Group di atas tadi, kita bisa membuat parameter pencarian berdasarkan ketiga data tersebut di PHPMaker, dengan menggunakan fitur Dynamic Selection List. Bahkan, fitur ini bisa kita implementasikan juga menggunakan Custom Files, hanya dengan meng-cloning kode yang sudah dihasilkan oleh PHPMaker.
Hanya dengan menulis sedikit kode PHP saja di beberapa server event, ditambah dengan penggunaan Custom Files untuk menampilkan organization tree, kita sudah dapat menghasilkan struktur organisasi berbasis web. Kita juga bisa menggunakan Recursive Function di PHP untuk membangun struktur organisasi yang memiliki hirarki data dari table Structure dan Structure Path tadi.
Seperti yang kita ketahui, Recursive Function adalah fitur yang powerful di PHP yang mengijinkan sebuah function memanggil dirinya sendiri secara berulang sampai kondisi tertentu terpenuhi. Dengan kata lain, Recursive Function memanggil dirinya sendiri selama function tersebut sedang dieksekusi. Recursive Function dapat mengatasi masalah yang membutuhkan logika berulang, seperti menelusuri data hirarki, algoritma mencari atau mengurutkan data, bahkan sampai kepada perhitungan matematika.
Meskipun demikian, Recursive Function dapat bersifat kompleks dan membutuhkan penanganan yang hati-hati untuk menghindari perulangan yang tidak berhingga, atau kemungkinan terburuk bisa menyebabkan pemakaian memory yang berlebihan. Tapi, jika digunakan dengan benar, seperti pada contoh aplikasi web struktur organisasi ini, maka Recursive Function sangatlah bermanfaat.
Kembali ke aplikasi web untuk menampilkan struktur organisasi tadi, maka demonya dapat dilihat melalui link ini: https://demo.phpmakerprojects.com/org_chart/
Dari aplikasi web demo tersebut, kalian bisa mulai dengan mengklik menu START HERE. Di bawah menu ini, terdapat beberapa item menu yang urutannya sudah diatur mulai dari table yang wajib dikelola terlebih dulu, yaitu table Levels, Sub Level, Structure Group, Employees, dan Organizations.
Sedangkan untuk menu Org. Structure, kita dapat menampilkan semua struktur organisasi cukup dalam satu halaman saja. Untuk setiap organisasi, akan memiliki kota warna biru yang lebih gelap, dan di bagian paling atas memiliki jabatan dengan cetakan tebal yang menandakan itu adalah jabatan puncak di organisasi tersebut.
Di bagian paling atas, terdapat link Add A New Structure, yang jika diklik akan menampilkan jendela Modal berisi form untuk menambahkan struktur organisasi baru. Di form tersebut hanya terdapat 3 field saja, masing-masing Organization, Position, dan Employee.
Data Organization akan lookup ke table Organizations, dan syarat supaya data ini muncul di lookup tersebut, tentu saja sudah harus ditambahkan terlebih dulu ke table Organizations. tadi. Jika belum ada, kalian bisa mengklik tombol plus di sebelah kanan field Organization tadi, yang selanjutnya akan menampilkan jendela Modal berisi data form untuk menambahkan data Organization yang baru.
Di sinilah nikmatnya menggunakan PHPMaker itu. Kita bisa mengaktifkan fitur Allow Add untuk field yang lookup ke table Organizations tadi. Bayangkan jika kalian menangani fitur ini menggunakan framework-framework yang banyak berserakan di Internet saat ini.
Kembali ke menu Org. Structure tadi. Jika kursor mouse kita gerakkan ke atas dari setiap struktur organisasi, maka terdapat beberapa tombol dengani icon dan tooltip yang menjelaskan fungsi dari masing-masing tombol tadi. Di bagian paling atas dari setiap struktur terdapat icon bintang sudut lima dengan tooltip View Organization Tree 1, yang jika diklik akan menampilkan pohon organisasi.
Di sebelah kanannya juga terdapat icon bintang sudut enam dengan tooltip View Organization Tree 2, yang jika diklik akan menampilkan pohon organisasi yang di setiap node-nya juga tersedia beberapa icon atau tombol untuk mengelola data node di struktur organisasi tersebut.
Jadi, perbedaan antara Organization Tree 1 dan Organization Tree 2 adalah, di menu pertama hanya menampilkan pohon organisasi yang sifat-nya Read-Only. Sedangkan di menu kedua, selain menampikan pohon organisasi, di sana juga terdapat beberapa tombol untuk setiap node yang dapat mengelola data struktur organisasi yang bertalian.
Selanjutnya mari kita perhatikan beberapa item menu di bawah menu BEHIND SCREEN. Seperti namanya, di bawah menu ini terdapat beberapa table atau database view yang kita buat di project PHPMaker yang digunakan di belakang layar untuk mendukung beberapa fungsi untuk mengelola data struktur organisasi tadi.
Di sana ada table Structure dan Structure Path, yang datanya bisa kalian lihat sendiri dari masing-masing table tersebut. Lalu ada menu Add Position, untuk menambahkan node baru di suatu struktur organisasi. Kemudian ada menu Move Position, untuk memindahkan satu node ke bawah node lain masih dalam satu struktur organisasi yang sama.
Berikutnya ada menu Move As a New Top, yang fungsinya untuk memindahkan suatu node menjadi posisi puncak atau ke dalam struktur organisasi baru. Ada juga menu Move To Another Top, fungsinya untuk memindahkan sebuah node ke satu level di bawah jabatan puncak di struktur organisasi yang lain.
Lalu ada menu Delete Position untuk menghapus suatu node di suatu struktur organisasi. Proses penghapusan ini tentu harus ditangani secara khusus, karena node ini memiliki alamat atau path di table Structure Path tadi.
Di sinilah semakin nikmatnya menggunakan PHPMaker sebagai tools untuk web development. Kita bisa mengoptimalkan fitur-fitur Modal Dialog yang sudah kita sediakan di beberapa menu di atas tadi, seperti Add Position, Move Position, Move As a New Top, Move to Another Top, Edit Node, maupun View Node.
Artinya, kita tidak perlu menulis kode yang berpuluh-puluh atau beratus-ratus baris hanya untuk menampilkan setiap form tadi menggunakan jendela Modal Dialog. Semua kode itu sudah dibangkitkan oleh PHPMaker, dan kita sebagai Web Developer cukup hanya dengan memanggilnya saja!
Kembali ke menu berikutnya …
Ada menu View Ancestors, yang fungsinya untuk menampilkan node induk (Ancestor) maupun node anak (Descendant), termasuk tingkat kedalaman (Depth) dari setiap posisi/jabatan yang terdapat di dalam struktur organisasi.
Lalu ada juga menu View Top Ancestors, untuk menampilkan data jabatan/posisi puncak untuk setiap struktur organisasi.
Menu Select Organization berfungsi untuk menampilkan data hirarki antara Level dan Sub Level dari setiap Organization yang diuraikan untuk setiap Structure Group.
Menu Org. Without Chart berfungsi untuk menampilkan data Organization yang masih belum memiliki struktur organisasi. Data ini digunakan sebagai Lookup Table dari field Organization pada menu Add A New Structure di atas tadi.
Menu View Structure Employee menampilkan data Karyawan dan Jabatan terkait pada Organisasi yang bertalian.
Menu View Sub Level untuk menampilkan data Sub Level yang direlasikan ke data Level.
Menu View Organization Structure untuk menampilkan data struktur organisasi yang memiliki kolom Level, Sub Level, Organization, Structure Group, Parent Group, dan Karyawan yang bersangkutan.
Terakhir, menu View Organization Leader untuk menampilkan data Leader atau Pimpinan di setiap struktur organisasi yang sudah dibuat dari table Organizations.
Untuk menu RESTORE DATA, kalian bisa mengosongkan data melalui menu Empty Data. Atau, kalian juga bisa hanya menampilkan Data Minimum, dimana hanya data referensi Level, Sub Level, Structure Group saja yang dibangkitkan, tanpa data Employees, Organizations, Structure, dan Structure Path. Sedangkan menu Data Sample, untuk mengembalikan ke posisi data sample yang lengkap untuk semua table yang sudah disebutkan di atas tadi.
Rifan mengatakan
Bang mau nanya, setelah kita generate project file, cara untuk mempublish/deploy ke server kita sendiri atau hosting sendiri gimana ya? Saya udah coba upload file hasil phpmaker ke file manager tapi error seperti ini:
An exception occurred in the driver: SQLSTATE[HY000] [1045] Access denied for user ‘root’@’localhost’ (using password: NO)
Saya belum paham cara menghubungkan database dengan file PHPnya. Mohon bantuannya, terima kasih
Masino Sinaga mengatakan
Ada dua alternatif.
Alternatif pertama, jika status project yang bisa diatur dari menu Tools -> Advanced Settings -> Project -> Environment sudah diubah menjadi production, maka cukup ubah setting database dari file src/config.production.php, sedangkan jika statusnya masih development, maka cukup ubah setting database dari file src/config.development.php. Nah, alternatif pertama ini memang sedikit cukup merepotkan.
Alternatif kedua, bisa menggunakan server event Database_Connecting. Lihat contoh 2 di dokumentasi tersebut, di situ ada kode untuk setting database di localhost maupun setting database di server production. Artinya, jika kita menggunakan alternatif kedua ini, maka tidak perlu lagi repot-repot mengubah setting database seperti pada cara alternatif pertama tadi.
Rifan mengatakan
Alhamdulillah, saya coba alternatif pertama bisa. Terima kasih pak Masino🙏
Masino Sinaga mengatakan
Sama-sama.