Mudahnya Membuat Star Rating dengan PHPMaker 2024

Ada yang kesulitan membuat Star Rating di aplikasi web yang akan dihasilkan oleh PHPMaker 2024? Seperti namanya, Star Rating merupakan fitur penilaian lewat icon bintang, dimana Pengguna Akhir dapat memilih atau mengklik berapa bintang yang akan dia berikan untuk menilai suatu kondisi atau keadaan.

Jumlah bintang biasanya sebanyak 5. Setiap bintang memiliki makna. Contoh, bintang satu artinya sangat buruk (terrible), bintang dua artinya buruk (poor), bintang tiga artinya rata-rata (average), bintang empat artinya baik (good), dan bintang lima artinya sangat bagus (excellent).

Untuk membuat fitur Star Rating, tentu kita mengandalkan library Javascript yang sudah sangat banyak tersedia di Internet. Daripada membuat dari titik nol, lebih baik memilih salah satu library yang kita rasa terbaik dari yang lain.

Masalahnya, untuk memilih library Javascript yang cocok tersebut, tidak semudah membalikkan telapak tangan. Ada beberapa faktor yang perlu dipertimbangkan sebelum memilih library yang tepat, antara lain:

1. Apakah libarary Javascript tersebut tersedia dalam bentuk npm package?
2. Bagaimana cara menghubungkan antara nilai bintang dengan field terkait di form Add/Edit?
3. Bagaimana cara menampilkannya pada halaman List/View yang notabene dalam mode Read Only?
4. Bisakah Star Rating tersebut dibuat dalam mode Read Only melalui kode di sisi server event?
5. Apakah hasil rata-rata penilaian bisa ditampilkan juga secara visual menggunakan bintang?

Untuk menjawab beberapa pertanyaan tersebut, tentu harus melalui proses eksplorasi beberapa library Javascript, membandingkan antara satu dengan yang lain, lalu memilih yang cocok atau sesuai dengan karakteristik project PHPMaker kita. Dibutuhkan kesabaran dan ketelitian, tentunya.

Setelah melalui proses eksplorasi, coba-coba, utak-atik, membandingkan, dan memastikan yang cocok, maka pilihan jatuh pada star-rating.js. Alasan utama penulis memilih library yang satu ini, karena karakteristiknya yang dapat mengkonversi dari control Select atau Combobox menjadi tampilan bintang.

Seperti yang kita ketahui, sangat masuk akal jika kita menggunakan control Combobox untuk field yang akan menyimpan penilaian tadi, karena dapat dihubungkan dengan Lookup Table yang menyimpan data referensi Star Rating seperti yang sudah dijelaskan pada alinea kedua tulisan ini.

Dalam hal ini, bayangkanlah jika kita masih belum bisa menampilkan Star Rating di form pada halaman Add maupun Edit. Tentu kita harus menyediakan control yang memungkinkan Pengguna Akhir memilih salah satu dari 5 pilihan di atas tadi. Nah, control Select atau Combobox sangat cocok untuk kebutuhan ini.

Selain itu, jika control Select atau Combobox tadi dalam status tidak aktif (disabled), maka Star Rating pun otomatis menjadi tidak aktif. Jadi, sangat sinkron antara business-logic yang bisa kita terapkan di sisi server maupun di sisi client. Untuk saat ini, belum ada event khusus atau API di sisi client yang dapat menonaktifkan Star Rating tadi.

Tapi sayangnya lagi, pada dokumentasi library juga ini tidak pernah menjelaskan bagaimana cara menampilkan bintang-bintang tadi dalam mode Read Only tanpa menggunakan kode Select Option seperti layaknya digunakan oleh control Combobox tersebut.

Tapi tidak apa-apa, karena sudah terlanjur cocok dengan karakteristik yang bisa mengkonversi control Combobox, dan setelah melakukan sedikit eksplorasi dari Internet, ternyata hal ini bisa diatasi dengan sangat mudah menggunakan kode CSS. Kita bisa menerapkannya cukup melalui server event Row_Rendered.

Di balik beberapa keterbatasan tadi, library Javascript ini sudah tersedia dalam bentuk npm package, sehingga mudah untuk dikelola/diunduh melalui project PHPMaker 2024 kita. Seperti yang kita ketahui, pada versi 2024, PHPMaker masih memiliki fitur npm package (terdapat di bawah menu Tools). Cukup cari package tersebut, lalu tambahkan dari menu tadi.

Langkah selanjutnya adalah mendeklarasikan file .css dan .js dari server event Page_Head. Hanya sedikit kode saja yang kita tambahkan di bagian ini, maka library ini sudah siap digunakan dari halaman manapun pada aplikasi web yang kita kelola melalui project PHPMaker.

Kemudian dilanjutkan dengan menulis kode di sisi client. Beruntunglah PHPMaker sudah menyediakan fitur Client Scripts, tempat di mana kita bisa men-subscribe event updatedone (lihat Example 3 dari link dokumentasi tersebut). Seperti yang kita ketahui, event ini akan dibangkitkan setelah semua opsi pada field yang menggunakan control Combobox tadi selesai di-update.

Lalu beralih ke bagian Startup Script untuk form Add dan Edit. Di bagian ini kita cukup hanya menulis satu baris kode saja yang akan menambahkan class CSS yang bernama star-rating. Nah, kode di bagian ini saling terkait erat dengan kode di bagian Client Scripts pada alinea sebelumnya.

Hanya begitu saja, dan bam! Kita sudah bisa menampilkan Star Rating di form Add maupun Edit. Keren sekali! Tidak perlu menulis berpuluh-puluh atau beratus-ratus baris kode di dalam project PHPMaker kita.

Ada fakta menarik lainnya yang Penulis alami saat berusaha membuat agar Star Rating bisa dikonversi dari control Select atau Combobox menjadi icon bintang. Ternyata kita harus mengubah tipe control yang digunakan dari Select2 menjadi Native Select. Jika tidak, maka Star Rating tidak bisa ditampilkan.

Nah, untuk yang satu ini, PHPMaker sudah menyediakan method khusus yang bisa diterapkan ke field terkait. Katakanlah nama field untuk menampung penilaian tadi adalah rate, maka kita cukup menulis kode ini di server event Page_Load milik halaman Add dan Edit:

$this->rate->setNativeSelect(true);

Hanya dengan satu baris kode itu saja, maka kita sudah bisa mengganti dari Select2 menjadi Native Select atau Combobox biasa. Di sinilah semakin terasa menyenangkan saat menggunakan PHPMaker sebagai tools development yang dapat membantu pekerjaan Web Developer.

Untuk menampilkan hasil rata-raat penilaian, kita bisa mengaktifkan fitur Aggregate yang terdapat di bawah Field setup pada project PHPMaker, yaitu dengan memilih AVERAGE (rata-rata). Lalu, untuk menampilkan hasil Star Rating pada halaman List maupun View, dari data yang sudah tersimpan di database, kita cukup menggunakan server event Row_Rendered.

Hanya sebelas baris kode PHP saja yang kita tambahkan ke server event ini, untuk menampilkan Star Rating pada halaman List maupun View. Termasuk juga untuk menampilkan hasil rata-rata penilaian yang letaknya berada pada baris paling bawah atau footer di tabel pada halaman List. Keren, ‘kan? 😉

Tapi sebelumnya, kita perlu menambahkan beberapa baris kode CSS dari menu HTML -> Styles -> User, yang tujuannya untuk menampilkan hasil penilaian dalam format icon bintang di halaman List dan View melalui kode PHP di server event Row_Rendered tadi.

Cek demonya di sini: https://demo.phpmakerprojects.com/star_rating/pleaseratelist