Salah satu keuntungan dari banyaknya fitur yang akan Anda implementasikan di Aplikasi Web jika menggunakan Masino Extensions untuk project PHPMaker Anda adalah, adanya beberapa pilihan tersedia, yang memungkinkan untuk me-reset Kata Sandi (Password) Pengguna lebih dinamis.

Sekitar seminggu yang lalu, saya baru saja menerima tantangan dari salah seorang Pelanggan setia saya yang selama ini menggunakan Masino Extensions. Ceritanya begini. Di Aplikasi Web yang dia bangun dengan PHPMaker, beberapa akun Pengguna diperbolehkan menggunakan Email yang sama. Artinya, data Email yang sama bisa digunakan oleh beberapa akun yang berbeda sekaligus.

Jika menggunakan fitur asli bawaan PHPMaker, maka Password dari akun yang memiliki Email sama tadi akan di-reset sekaligus semuanya melalui form Forgot Password. Hal ini bisa terjadi, karena fitur Reset Password bawaan asli PHPMaker berdasarkan input data Email saja. Dia meminta bantuan saya untuk menyediakan pilihan input data Email dan Username.

Sebenarnya, kondisi extension MasinoForgotPwd13 (salah satu dari 15 extension yang terdapat di Masino Extension) sudah menyediakan beberapa pilihan parameter yang bisa dipilih oleh Pengguna. Extension ini sudah menyediakan pilihan, Email saja, Username saja, dan Email ATAU Username. Nah, dia menginginkan adanya pilihan baru lainnya supaya Password yang di-reset harus sesuai dengan data Email DAN Username yang dimasukkan melalui form Forgot Password tadi.

Untungnya, berdasarkan fitur yang sudah saya buat selama ini di extension MasinoForgotPwd13, saya tidak mengalami kesulitan berarti untuk mengimplementasikan satu pilihan baru tadi, yaitu Email AND Username. Seperti namanya, pilihan ini cocok digunakan jika Pengguna ingin me-reset Password yang sesuai dengan kedua parameter data Email dan Username sekaligus, yang dimasukkan melalui form Forgot Password.

Adapun perubahan selengkapnya yang terjadi di extension MasinoForgotPwd13 adalah sebagai berikut:

1. Penambahan pilihan-anak ke dalam pilihan-utama EmailOrUsername, dengan nama: Email & Username.
2. Penambahan pilihan-utama di samping pilihan yang sudah ada sebelumnya: Email, Username, EmailOrUsername, yaitu yang bernama: EmailAndUsername.
3. Pilihan-utama Email berfungsi untuk me-reset Password akun Pengguna yang pertama ditemukan berdasarkan data Email yang dimasukkan.
4. Pilihan-utama Username berfungsi me-reset Password akun Pengguna yang pertama ditemukan berdasarkan data Username yang dimasukkan.
5. Pilihan-anak Email di dalam pilihan-utama EmailOrUsername berfungsi untuk me-reset Password akun Pengguna yang pertama ditemukan berdasarkan data Email yang dimasukkan.
6. Pilihan-anak Username di dalam pilihan-utama EmailOrUsername berfungsi untuk me-reset Password akun Pengguna yang pertama ditemukan berdasarkan data Username yang dimasukkan.
7. Pilihan-anak Email & Username di dalam pilihan-utama EmailOrUsername berfungsi untuk me-reset Password akun Pengguna berdasarkan data yang harus cocok sekaligus dengan Email DAN Username yang dimasukkan.
8. Pilihan-utama EmailAndUsername berfungsi untuk me-reset Password akun Pengguna berdasarkan data yang harus cocok sekaligus dengan data Email DAN Username yang dimasukkan.
9. Anda bisa mengimplementasikan fitur ini cukup dengan cara mengaktifkan pilihan-utama EmailOrUsername lalu Pengguna memilih pilihan-anak Email & Username, ATAU: cukup dengan mengaktifkan pilihan-utama EmailAndUsername.
10. Tentu saja ini tergantung kebutuhan. Jika di dalam table users terdapat beberapa akun yang memiliki data Email yang sama tapi dengan data Username yang berbeda, dan beberapa akun yang lainnya memiliki data Username dan Email yang unik, maka Anda disarankan untuk memilih pilihan utama EmailOrUsername, karena pilihan ini memiliki tiga pilihan-anak, yaitu: Email (hanya Email), Username (hanya Username), dan Email & Username (keduanya).

Dengan menggunakan Masino Extensions di project PHPMaker, maka kita sebagai Web Developer dapat menyediakan beberapa pilihan cara atau parameter data untuk me-reset Password tadi. Kita pun bisa memberi pilihan kepada Pengguna Akhir dari Aplikasi Web, sesuai dengan karakteristik data akun Pengguna yang tersimpan di table users.

Jika Anda sudah berlangganan di website I Love PHPMaker, maka pastikan Anda sudah mengunduh file Masino Extensions untuk PHPMaker versi terakhir (saat artikel ini saya tulis versi 2017.0.1).

Inilah satu lagi alasan lainnya, dari sekian banyaknya keuntungan yang pasti Anda dapatkan jika menggunakan Masino Extensions di project PHPMaker Anda.

Setelah merilis video mengenai Masino Tempalate untuk PHPMaker versi 12 dan versi 2017 di YouTube, saya menerima beberapa pertanyaan lewat Email, yang intinya: “Apa sih perbedaan antara Masino Extensions dan Masino Template”? Pertanyaan yang cukup menggelitik, karena jawabannya bisa panjang dan lebar, hehehe…

Jawabannya: Kalau Masino Extensions berarti file Extensions yang dibuat oleh Masino Sinaga untuk PHPMaker, sedangkan Masino Template adalah file Template yang dibuat oleh Masino Sinaga untuk PHPMaker.

Baahh! Lha memang iya, kan? Kalau itu semua orang juga tahu! Ah, masak sih? Kalau sudah tahu, lalu kenapa bertanya? Yaaah, maksudnya saya ingin tahu jawaban yang lebih detail lagi. Oooh, bilang dong! !@#$%^&* Hehehe…

Ya udah, jadi begini…

Masino Extensions itu adalah file-file Extensions yang saya buat untuk PHPMaker (sebagai gambaran, untuk PHPMaker versi 2017 saat saya menulis artikel ini, ada 15 Extensions) yang berfungsi untuk menambahkan beberapa fitur yang belum disediakan oleh PHPMaker. Mau tahu apa saja di antaranya? Terms and Conditions di form Registrasi User, pilihan tambahan di form Forgot Password untuk me-reset Password, Dynamic Permission untuk Export Data, Jendela Popup untuk form Login, Change Password, Forgot Password, dan Registrasi User, Pemakaian Alertify Javascript untuk Alert dan Notification, Help Online di setiap Halaman, Kostumisasi di bagian Header dan Footer, Animasi Progress saat halaman dimuat, Multi-Themes/Colors, Multi-Font Name, Multi-Font Size, Flat Style, dan masih banyak lagi.

Masino Template itu adalah file Template yang saya buat mulai PHPMaker versi 12, yang fungsi utamanya untuk mengubah layout dan tampilan antar-muka Aplikasi Web yang akan dihasilkan atau di-generate oleh PHPMaker, sehingga akan terlihat lebih menarik dan tidak seperti tampilan asli bawaan PHPMaker. Selain itu, Masino Template juga menyertakan sebagian besar (ingat, hanya sebagian besar, tidak semuanya) fitur yang terdapat di dalam Masino Extensions. Artinya, Masino Template fungsinya bukan sekedar untuk mengubah tampilan Aplikasi Web saja, tapi juga berfungsi seperti Masino Extensions, yaitu menambahkan beberapa fitur yang belum tersedia di PHPMaker.

Jika tidak semua fitur yang ada di Masino Extensions dimasukkan ke dalam Masino Template, lalu fitur apa saja yang tidak dibawa ke Masino Template? Nah, ini baru pertanyaan yang benar-benar bagus dan kritis! Jawabannya, fitur Kostumisasi di bagian Header dan Footer, Multi-Font Name, Multi-Font Size. Meskipun fitur kostumisasi di bagian Header dan Footer yang terdapat di Masino Extensions tidak disertakan ke dalam Masino Template, itu bukan berarti Masino Template masih menggunakan fitur Header dan Footer asli bawaan PHPMaker.

Justru karena menggunakan Masino Template itulah, maka di bagian Header, Footer, plus Sidebar Menu juga mengalami perombakan atau perubahan total. Artinya, Masino Template berhasil membuktikan bahwa untuk mengubah tampilan standar dari Aplikasi Web yang di-generate oleh PHPMaker, maka kita sebagai Web Developer dapat mengubahnya dengan cara membuat versi Template baru berdasarkan Template bawaan asli PHPMaker.

Timbul pertanyaan lain: Mengapa harga Masino Extensions per tahun hanya USD 150, sementara harga Masino Template per versi major PHPMaker, adalah USD 450? Mengapa selisihnya bisa lumayan besar begitu?

Jawabannya, karena Masino Template selain dapat mengubah layout dan tampilan standar dari Aplikasi Web yang dihasilkan oleh PHPMaker sehingga menjadi lebih menarik, atraktif, dan profesional, dia juga sudah menyertakan sebagian besar fitur-fitur yang terdapat di dalam Masino Extensions. Artinya, semakin banyak lagi kemudahan yang akan Anda dapatkan ketika menggunakan Masino Template di project PHPMaker Anda. Mengapa? Karena Anda tidak perlu lagi mengaktifkan seluruh ke-15 Masino Extensions di project PHPMaker.

Sebenarnya harga Masino Template yang USD 450 itu tidaklah mahal. Cukup bayangkan saja, bahwa dengan biaya segitu, Anda sebagai Web Developer tidak perlu lagi pusing-pusing untuk memikirkan membuat layout dan tampilan Aplikasi Web yang menarik, atraktif, dan profesional tadi. Anda juga tidak perlu repot lagi menambahkan fitur-fitur menarik dan diperlukan yang terdapat di dalam Masino Extensions tadi.

Bahkan, dengan biaya segitu, Anda akan tetap di-support oleh saya untuk tetap menyediakan update. Bayangkan bahwa framework Bootstrap yang digunakan oleh PHPMaker dan juga Masino Template tadi akan tetap disinkronkan jika terjadi perubahan. Sama seperti perubahan yang relatif sering terjadi di PHPMaker, maka Masino Template juga akan tetap diperbarui, mengikuti perkembangan PHPMaker dari satu versi ke versi berikutnya.

Anda tidak perlu menyewa Web Designer yang harus memahami luar dan dalam struktur framework PHPMaker, supaya nantinya hasil disain dia dapat digunakan di project PHPMaker. Anda juga tidak perlu repot memikirkan untuk menambahkan fitur-fitur yang belum disediakan oleh PHPMaker di atas tadi ke dalam Aplikasi Web. Dan yang paling penting, dengan menggunakan Masino Template di PHPMaker, Anda bisa menghasilkan Aplikasi Web dengan sangat cepat tanpa sama sekali dibatasi jumlah Aplikasi Web yang bisa Anda buat. Tidak terbatas!

Sekarang, bayangkanlah jika Anda harus mencari-cari potongan kode dari Internet, lalu mencoba mengintegrasikannya ke PHPMaker, dan jika gagal, Anda harus mencari yang lainnya lagi, coba lagi, dan jika masih gagal, cari lagi, demikian seterusnya sampai benar-benar berhasil. Berapa lama waktu Anda terbuang percuma hanya untuk mengerjakan hal-hal teknis yang sebenarnya sudah ada solusinya dengan menggunakan Masino Template itu? Apakah Anda masih berpikir untuk tetap bergerilya ke Internet lalu menggabungkan semua potongan-potongan kecil kode tadi dan memastikan semuanya benar-benar kompatibel dengan PHPMaker?

Sampai di sini, saya berharap Anda bisa memahami mengapa harga Masino Template yang saya tetapkan untuk saat ini adalah USD 450. Biaya itu bukanlah sekedar hanya untuk mendapatkan Template yang menarik dan atraktif itu saja. Di situ sudah termasuk juga biaya support yang selalu saya berikan, sekecil apapun perubahan yang terjadi di PHPMaker, maka Template ini pun ikut dimutahirkan. Biaya itu juga sudah termasuk dengan pengalaman dan kepuasan yang akan dapatkan ketika Aplikasi Web yang Anda generate dengan PHPMaker memiliki kualitas yang tinggi dan sudah terbukti dan teruji sampai saat ini.

Simpelnya begini saja. Cobalah bertanya dalam hati, sebelum memutuskan apakah sesuatu itu mahal atau wajar: Kalau saya dikasih duit USD 450, bisa enggak saya membuat Template seperti itu? Selanjutnya, ya terserah Anda.

Semoga juga Anda sekarang bisa memahami apa perbedaan antara Masino Extensions dan Masino Tempalte.

Mungkin tidak banyak yang tahu, bahwa di Aplikasi Web yang dihasilkan oleh PHPMaker, kita sebagai Web Developer dapat menerapkan Dynamic Selection List di halaman Master/Detail. Artinya, jika Pengguna memilih data tertentu di bagian Master, maka data yang terkait dengan data terpilih tadi akan ditampilkan di bagian Detail.

Supaya semakin jelas, Anda bisa melihat demo-nya melalui link ini. O iya, jika Anda mengklik link tadi, maka muncul pesan yang memberitahukan bahwa Anda tidak berhak mengakses halaman itu. Jangan panik. Klik OK di pesan tersebut, lalu klik tombol Login di form Login yang muncul.

Setelah berhasil Login, maka di halaman berikutnya, ditampilkan form Master/Detail Add untuk menambahkan data Purchases (Master) dan Purchases Detail (Detail). Melalui form ini, kita dapat menambah data Master dan Detail sekaligus dalam satu halaman saja.

Nah, yang dimaksud Dynamic Selection List di halaman Master/Detail tadi adalah, ketika Anda memilih salah satu data Supplier di field Supplier ID pada bagian Master, maka data Supplier yang terpilih tadi akan ditampilkan di field Supplier Number pada bagian Detail.

Dengan cara ini, maka kita dapat memilih data Stock Item sesuai dengan data Supplier Number yang kita pilih di bagian Detail tadi. Jadi, inilah yang dimaksud dengan Dynamic Selection List di Master/Detail PHPMaker.

Untuk menghasilkan fitur ini, Anda dapat mendownload file project PHPMaker yang bernama Stock Inventory Management – PHPMaker 2017 Project.

Dengan file project ini, maka Anda dapat mempelajari bagaimana contoh menentukan setting pada table Purchases dan Purchases Detail. Anda menjadi tahu bagaimana cara menghubungkan antara kedua table tadi, sampai kepada bagaimana cara menentukan nilai property yang terkait di field Supplier ID di bagian Master, serta field Supplier_Number dan Stock_Item di bagian Detail.

Secara umum, syarat yang dibutuhkan untuk menghasilkan fitur ini sangatlah sederhana. Kedua table harus dihubungkan dengan relasi Master/Detail. Kemudian, field Supplier ID, Supplier Number, dan Stock Item masing-masing harus diset sebagai Lookup Field ke table terkait. Selanjutnya, di field Supplier Number, kita harus memilih table yang berperan sebagai parent atau induknya, yang dalam hal ini adalah table Purchases. Dan terakhir, di field Stock Item hanya perlu direlasikan dengan field parent-nya, yaitu Supplier Number.

Betapa mudah, cepat, dan menyenangkan sekali bukan? Semuanya serba terstruktur dan begitu rapinya.

Seperti diketahui, salah satu tujuan saya membuat Masino Extensions adalah untuk menambahkan fitur yang belum terdapat di dalam Template maupun Extension asli PHPMaker. Salah satu fitur yang belum disediakan oleh PHPMaker itu baru hari ini saya sadari. Ternyata link untuk membuka Modal dialog dari area Preview row belum ditangani oleh PHPMaker.

Mengenai hal ini sudah saya sampaikan dengan nada sedikit protes kepada author PHPMaker melalui forum diskusi mereka. Intinya, di topik itu saya protes, mengapa kita tidak bisa membuka Modal dialog dari area Preview Row melalui extension Preview. Cukup seru juga diskusinya. Selengkapnya bisa Anda lihat di sini.

Lucu sekali jika misalnya mereka tidak menangani hal ini melalui extension Preview. Sementara yang kita ketahui, PHPMaker sudah menyediakan pengaturan Modal dialog dari Table setup. Artinya, jika pengaturan ini diaktifkan untuk halaman Add/Copy, Edit, dan View, maka sudah seharusnya form/halaman tersebut ditampilkan dalam Modal dialog. Termasuk dari area Preview Row ketika record Master di-expand dari halaman List master.

Sampai saat saya menulis artikel ini, belum ada respon jawaban lebih lanjut dari author PHPMaker. Sepertinya mereka sedang mempertimbangkan apakah akan menerima dan mengimplementasikan usulan saya supaya Modal dialog ini juga bisa ditangani dari extension Preview. Tapi yang jelas, sungguh sangat tidak masuk akal jika fitur ini tidak mereka tambahkan hanya karena alasan Preview Row tersebut harus di-refresh kembali.

Bukankah halaman List dari record master seharusnya sudah otomatis menangani ini. Jadi, meskipun area Preview Row tadi tidak otomatis ditampilkan kembali, maka alasan yang dikemukakan oleh author PHPMaker di topik di atas sungguh lucu kedengarannya. Bukankah analog dari proses ini sama seperti jika kita menghapus record detail dari area Preview Row atau Preview Overlay seperti yang selama ini sudah kita lakukan?

Nah, daripada harus menunggu kepastian apakah fitur ini akan ditambahkan atau tidak oleh mereka, tangan ini ternyata sudah duluan gatal ingin menerapkan fitur tersebut ke dalam Masino Extensions. Beruntunglah Anda jika selama ini sudah menggunakan Masino Extensions, karena fitur tadi berhasil saya tambahkan hari ini ke dalam extension MasinoPreviewRow13.

Oleh karena itu, silahkan download ulang Masino Extensions tersebut, lalu generate ulang semua file script seperti biasa.

O iya, kalau mau melihat demo-nya, klik halaman Orders pada web demo untuk PHPMaker versi 2017 (pastikan Anda sudah login dengan menggunakan username admin dan password master).

Selanjutnya, klik icon plus (+) di sebelah kiri record Master, lalu di bagian Preview Order Details, klik menu pilihan di sebelah kiri record Order Detail tadi, lalu pilih menu View atau Edit. Anda akan melihat masing-masing halaman tersebut ditampilkan dalam jendela Modal dialog.

Keren kan?

Harus diakui, bahwa sejak versi 2017, PHPMaker menangani separator data yang bertipe angka atau numerik semakin lebih baik dibandingkan di versi-versi major sebelumnya. Sejak dipisahkannya setting regional ke dalam file .json, maka karakter pemisah numerik ini menjadi lebih mudah dioptimalkan untuk field yang formatnya menggunakan tipe Numeric, Currency, dan Percent di PHPMaker.

Seperti keuntungan yang saling melengkapi, hal ini pun berdampak baik bagi extension MasinoAutoNumeric13 yang kompatibel dengan PHPMaker versi 2017. Dengan mengaktifkan extension ini, maka kita sebagai Web Developer tidak perlu lagi menulis kode khusus untuk menangani karakter pemisah data numerik tadi. Kode untuk menangani karakter separator tadi akan dibangkitkan dari dalam extension MasinoAutoNumeric13 tersebut.

Perlu diketahui, bahwa extension MasinoAutoNumeric13 mengoptimalkan setting regional tersebut untuk menangani data yang bertipe numerik. Extension ini juga akan otomatis mencegah Pengguna akhir memasukkan data yang bukan bertipe numerik ke dalam field numerik tadi. Selain itu, ketika Pengguna Akhir sedang menginput data numerik, maka karakter separator akan ditambahkan secara otomatis oleh sistem. Keren, ‘kan?

Hal ini bisa Anda lihat hasilnya dari menu Order Details pada Aplikasi Web yang sudah dibangkitkan oleh PHPMaker 2017 dan Masino Extensions di: Demo I Love PHPMaker 2017. Pastikan Anda sudah login, lalu perhatikanlah ketika Anda menambah atau mengubah data di menu Order Details tadi pada form Add atau Edit. Karakter separator pemisah ribuan maupun desimal untuk data yang bertipe numerik akan otomatis menyesuaikan dengan bahasa yang sedang terpilih.

Supaya dapat mengoptimalkan extension MasinoAutoNumeric13 tadi, maka item pengaturan No. of digits after decimal untuk field Discount pada table orderdetails tadi harus diisi dengan nilai 2. Hal ini penting, karena field ini tipenya Double dan dideteksi oleh extension MasinoAutoNumeric13 sebagai field numerik.

Sedangkan untuk field SubTotal di table orderdetails tersebut, kita ketahui dia menggunakan fitur Custom Field dan diset sebagai Read-Only melalui server event Page_Load. Oleh karena itu, pastikan Anda memilih (None) pada item pengaturan Validate di bawah pengaturan Fields -> panel Edit Tag, sebelum men-generate ulang semua file script seperti biasa menggunakan PHPMaker.

Mengapa pengaturan pada field SubTotal tadi perlu kita sesuaikan? Karena nilai yang ditampilkan pada field tersebut diperoleh dari hasil perhitungan yang melibatkan tiga field sekaligus, yaitu: UnitPrice, Quantity, dan Discount. Kode jQuery yang terkait dengan perhitungan ini bisa Anda lihat pada item pengaturan Client side events pada panel Edit Tag.

Karena perhitungan otomatis yang terjadi di sisi client itu menggunakan kode jQuery, maka kita tidak perlu memilih validasi bertipe Float seperti pengaturan pada field UnitPrice. Alasannya, karena hasil perhitungan yang menggunakan kode Javascript atau jQuery itu harus menggunakan setting Internasional.

Artinya, karakter koma sebagai separator ribuan, dan karakter titik sebagai separator desimal. Dengan kata lain, kita tidak bisa mengubah karakter separator untuk field SubTotal tadi sesuai dengan bahasa yang terpilih.

Nah, di sinilah salah satu keunikan yang harus diperhatikan apabila kita menggunakan MasinoAutoNumeric13 untuk menangani perhitungan di sisi client seperti yang kita lihat pada web demo tadi. Artinya, tidak semua field numerik harus menggunakan validasi data numerik. Ada pengecualian untuk field yang menampung hasil perhitungan secara otomatis di sisi client.

Bagi Anda yang sudah berlangganan di situs I Love PHPMaker, silahkan download ulang semua file Masino Extensions yang baru saja saya perbarui hari ini untuk PHPMaker versi 2017, lalu timpa extension yang lama dengan yang baru tersebut.

Apabila Anda belum pernah memakai Masino Extensions dan ingin menggunakannya, maka silahkan klik menu Membership Options di situs tadi untuk mulai berlangganan sekarang juga. Dapatkan keuntungan tadi serta banyak keuntungan lainnya dari pemakaian Masino Extensions pada project-project PHPMaker Anda mulai hari ini!

Semoga bermanfaat ya.

Saya yakin Anda atau Pengguna Akhir dari Aplikasi Web yang dihasilkan oleh PHPMaker pernah mengalami kejadian yang menyebalkan berikut ini. Apa itu? Jadi begini. Ketika sedang menampilkan halaman Master/Detail List, data di bagian Detail tidak muncul sama sekali. Padahal, kita yakin bahwa record Master tersebut memiliki rincian record di bagian Detail-nya.

Hahaha… Pernah mengalami kejadian lucu sekaligus menyebalkan tersebut, kan? Sama! Saya baru menyadarinya hari ini. Awalnya dimulai dari ketika saya mencari data OrderID = 10252 dari halaman Order Details List. Hasil pencarian menampilkan 3 record Order Details. Sampai di sini belum ada masalah.

Setelah itu, saya membuka halaman Orders List di tab baru, lalu pada record Master dengan OrderID = 11078, saya melihat di bagian Preview Row menunjukkan bahwa terdapat 4 record Order Details di sana. Kemudian saya menampilkan halaman Master/Detail List untuk OrderID = 11078 tadi.

Nah, permasalahan baru muncul di sini. Pada halaman Master/Detail List yang muncul kemudian, di bagian Detail tidak terdapat sama sekali record. Padahal, sebelumnya kita yakin pada halaman Master List page tadi, terdapat 4 record Order Details untuk OrderID = 11078 tersebut. Permasalahan ini masih terjadi pada PHPMaker versi 2017.0.3 (saat artikel ini sedang saya tulis).

Untuk membuktikannya, silahkan Anda coba dari web Demo PHPMaker 2017 yang disediakan oleh vendor PHPMaker. Pastikan Anda sudah login terlebih dulu di sana menggunakan username admin dan password master. Setelah Anda berhasil login, silahkan ikuti langkah demi langkah yang sudah saya uraikan di atas tadi.

Tentu saja hal ini bisa terjadi, karena PHPMaker menggunakan halaman List dari Order Details tadi untuk menampilkan halaman Master/Detail List yang melibatkan record Orders sebagai record Master-nya. Selain itu, PHPMaker masih menggunakan kriteria pencarian pada table Order Details pada halaman Master/Detail List tadi, yaitu OrderID = 10252.

Meskipun Pengguna masih bisa mengklik tombol yang ada tanda icon kaca pembesar dengan tanda x di dalamnya, tapi yang jelas, cara ini sangatlah tidak efektif, karena membutuhkan satu HTTP Request ke server. Secara logika, seharusnya setiap kali Pengguna menampilkan halaman Master/Detail List, maka kriteria pencarian harus dipastikan di-reset terlebih dulu oleh sistem.

Melihat kondisi yang cukup menyebalkan dan menjengkelkan tadi, membuat saya tergelitik untuk mencari solusinya. Setelah beberapa menit mengutak-atik file script Template PHPMaker, Puji Tuhan, akhirnya ketemu juga letak kode yang menyebabkan hal ini. Saya pun langsung menerapkan solusinya ke dalam Masino Extensions. Sudah saya coba, dan berhasil sesuai yang diharapkan.

Untuk membuktikan solusinya itu, maka Anda cukup login ke web Demo I Love PHPMaker 2017 dengan username dan password yang sama seperti tadi, lalu ikuti langkah-langkah seperti yang sudah saya uraikan pada alinea ke-2, 3, dan 4 di atas.

Beruntunglah Anda yang sudah berlangganan di situs I Love PHPMaker, karena solusi ini sudah tersedia di Masino Extensions. Oleh karena itu, silahkan download ulang semua file Masino Extensions yang baru saja saya perbarui hari ini untuk PHPMaker versi 2017, lalu timpa extension yang lama dengan yang baru tersebut.

Apabila Anda belum pernah memakai Masino Extensions dan ingin menggunakannya, maka silahkan klik menu Membership Options di situs tadi untuk mulai berlangganan. Dapatkan solusi tadi serta banyak keuntungan lainnya dari pemakaian Masino Extensions pada project-project PHPMaker Anda mulai dari hari ini! Tunggu apa lagi?

Luar biasa memang fleksibelnya PHPMaker! Setiap hari, ada saja hal baru yang bisa dipelajari sekaligus bermanfaat untuk diterapkan di Aplikasi Web yang di-generate olehnya. Seperti trik yang satu ini. Kita dapat membatasi field apa saja yang akan disertakan untuk Audit Trail, cukup dengan hanya menulis sedikit kode dari bagian Server Events.

Seperti yang kita ketahui, Audit Trail adalah salah satu fitur yang berguna untuk memonitor aktivitas apa saja yang dilakukan oleh Pengguna di Aplikasi Web yang dihasilkan oleh PHPMaker.

Secara standar, jika fitur Audit Trail untuk suatu table kita aktifkan dari PHPMaker, maka sistem akan merekam nilai di semua field yang terdapat di table tadi. Sering kali kita sebagai Web Developer dituntut untuk bisa membatasi field mana saja yang disertakan untuk Audit Trail tadi, dan field mana saja yang tidak perlu. Apalagi jika jumlah field di table tadi relatif banyak, dan kita tidak ingin merekam nilai dari semua field tadi.

Sejak versi 12, PHPMaker sudah menambahkan server event baru lagi khusus untuk kebutuhan itu. Namanya adalah AuditTrail_Inserting. Seperti namanya, server event ini akan dipanggil sesaat sebelum sistem menyimpan data ke table (misalkan namanya) audittrail di Database. Artinya, kita sebagai Web Developer dapat menambahkan sedikit kode PHP untuk menentukan field mana saja yang akan kita sertakan untuk Audit Trail tadi.

Katakanlah kita ingin menerapkan Audit Trail hanya untuk table orderdetails pada file demo project, dan kita tidak ingin menyimpan nilai di semua field pada table orderdetails tadi, tapi hanya ingin menyimpan nilai dari field Quantity saja ke dalam Audit Trail tersebut.

Pertama sekali, pastikan kita sudah mengaktifkan fitur Audit Trail, dan juga item Use database table serta menentukan table tempat menyimpan data Audit Trail tersebut dari menu PHP -> General Options -> PHP -> Audit Trail.

Kedua, pastikan juga kita sudah mengaktifkan pilihan Audit Trail untuk table orderdetails, melalui pengaturan level Table.

Ketiga, dan inilah bagian yang paling mengasyikkan, kita cukup menulis sedikit kode PHP saja ke dalam server event AuditTrail_Inserting, sehingga kode selengkapnya menjadi seperti ini:

// AuditTrail Inserting event
function AuditTrail_Inserting(&$rsnew) {
	//var_dump($rsnew);
	if ($rsnew["table"] == "orderdetails" && $rsnew["field"] == "Quantity") {
		return TRUE;
	} else {
		return FALSE;
	}
}

Perhatikanlah kode tadi. Kita memeriksa apakah nama table-nya adalah orderdetails dan nama field-nya adalah Quantity. Jika ya, maka kembalikan nilai TRUE, sebaliknya kembalikan nilai FALSE. Itu artinya, selain dari nama table dan nama field tadi, maka kita tidak akan menyimpannya ke Audit Trail.

Tentu saja kode tersebut bisa kita kembangkan untuk nama table dan nama field lainnya sesuai kebutuhan. Contoh di atas hanyalah yang paling sederhana saja, untuk memudahkan Anda dalam memahami fungsi dan kegunaan dari server event itu.

Seandainya kita juga ingin menerapkan Audit Trail tadi untuk table orders, dan kita ingin membatasi hanya untuk field OrderID saja, maka kode di atas disesuaikan menjadi seperti ini:

// AuditTrail Inserting event
function AuditTrail_Inserting(&$rsnew) {
	//var_dump($rsnew);
	if ( ($rsnew["table"] == "orderdetails" && $rsnew["field"] == "Quantity") || ($rsnew["table"] == "orders" && $rsnew["field"] == "OrderID")) {
		return TRUE;
	} else {
		return FALSE;
	}
}

Betapa kerennya PHPMaker, bukan? Hanya dengan mengaktifkan pengaturan yang terkait Audit Trail tadi (baik di level Global maupun level Table), lalu menambahkan sedikit kode di server event AuditTrail_Inserting itu saja, kita sudah bisa menggunakan Audit Trail sekaligus membatasi secara dinamis, field mana saja yang disertakan ke dalamnya.

Sekarang, bayangkanlah jika Anda membangun Aplikasi Web masih dengan cara-cara manual. Berapa lama waktu yang Anda butuhkan untuk menghasilkan fitur seperti yang terdapat di PHPMaker tadi? Hohohoho…

Sejak versi 2017, PHPMaker memberi kemudahan sekaligus fleksibilitas yang tinggi untuk mengganti Format Tanggal. Kita sebagai Web Developer dapat mengganti data Format Tanggal secara dinamis.

Katakanlah di sebuah Aplikasi Web yang akan kita hasilkan dengan PHPMaker, kita menggunakan Format Tanggal dd-mm-yyyy jika Pengguna memilih Bahasa Indonesia, dan yyyy-mm-dd untuk Bahasa Inggris (English).

Cukup hanya dengan menambahkan sedikit kode PHP saja ke dalam server event Language_Load, yang berada di bawah lokasi Server Events -> Global -> All Pages, sehingga kode selengkapnya menjadi seperti ini:

// Language Load event
function Language_Load() {
	global $EW_DATE_FORMAT, $gsLanguage;
	if ($gsLanguage == "id") {
		$EW_DATE_FORMAT = "dd-mm-yyyy";
	} else { // default uses English setting
		$EW_DATE_FORMAT = "yyyy-mm-dd";
	}
}

Perhatikanlah kita harus mendeklarasikan terlebih dulu dua buah variabel global yang digunakan PHPMaker untuk menampung data Format Tanggal dan ID Bahasa yang digunakan Aplikasi Web, masing-masing $EW_DATE_FORMAT dan $gsLanguage.

Selain itu, kita juga harus memastikan karakter pemisah data Tanggal tadi sesuai dengan yang kita sertakan di dalam Format Tanggal tadi, yaitu karakter slash atau minus (-).

Terakhir, jangan lupa untuk men-generate ulang semua file script menggunakan PHPMaker seperti biasa.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan?

Kabar baik bagi Anda yang selama ini yang sudah membangun Aplikasi Web dengan menggunakan PHPMaker, PHP Report Maker, dan Masino Extensions. Hari ini saya baru saja merilis file project demo yang bisa Anda pakai sebagai referensi saat menggunakan Masino Extensions di project PHPMaker dan juga di project PHP Report Maker.

Untuk mengunduh file project demo tersebut, silahkan klik di sini. Pastikan Anda sudah login terlebih dulu di website I Love PHPMaker tersebut, supaya dapat mengunduhnya.

File project demo ini sangat bermanfaat, karena bisa membantu Anda membangun Aplikasi Web dengan lebih cepat lagi. Ada beberapa hal yang wajib diperhatikan jika ingin mengintegrasikan file-file yang sudah dihasilkan oleh PHP Report Maker, agar dapat digunakan di Aplikasi Web yang dihasilkan oleh PHPMaker.

Dengan menggunakan file project demo tadi, maka Anda dapat menggunakannya sebagai referensi, karena sudah ada pengaturannya di project tersebut. Bahkan, dengan file project demo itu, Anda juga dapat mengetes sekaligus memastikan bahwa Masino Extensions dapat berfungsi dengan baik, baik pada project PHPMaker, maupun project PHP Report Maker Anda.

Nah, beberapa hal yang penting dan perlu diperhatikan itu adalah sebagai berikut:

1. Baca topik “Compatibility Properties – Integrating with existing PHPMaker project” dari menu Help PHP Report Maker

   Alasannya? Karena melalui topik ini, dijelaskan PHPMaker versi berapa yang kompatibel/cocok dengan PHP Report Maker yang sedang Anda gunakan. Ketika saya menulis artikel ini, saya menggunakan PHP Report Maker versi 9, dan PHPMaker yang kompatibel dengan versi ini adalah versi 2017. Mungkin, beberapa minggu, bulan, atau tahun kemudian, versinya bisa berubah lagi. Misalnya, bisa saja PHPMaker 2017 nanti juga akan kompatibel dengan versi 10, atau PHPMaker versi 2018 atau 14 kompatibel dengan PHP Report Maker versi 11, dan seterusnya. Dengan kata lain, sangat disarankan untuk selalu menggunakan versi terakhir, baik PHPMaker, maupun PHP Report Maker.

   Selain itu, di topik itu juga dijelaskan syarat mengenai pengaturan Lokasi Folder Tujuan Generate, Project Name, dan Security yang harus sama antara project PHPMaker dan project PHP Report Maker. Sekali lagi, pengaturannya baik di project PHPMaker maupun di project PHP Report Maker haruslah sama (sinkron).

2. Pastikan data Project Name dan Project ID di project PHPMaker dan PHP Report Maker Sama

   Syarat utama lainnya di samping kompatibilitas versi antara PHPMaker dan PHP Report Maker adalah nilai pengaturan Project Name dan Project ID yang terdapat pada menu Tools -> Advanced Settings. Pastikan nilai keduanya harus sama. Jika tidak maka hasilnya menjadi tidak sesuai yang diharapkan.

   Sebenarnya jika Anda membaca dengan teliti topik yang saya sebutkan pada poin 1 di atas tadi, sudah dijelaskan bahwa syarat kedua project PHPMaker dan PHP Report Maker harus sama-sama menggunakan Project Name yang sama. Tapi sayangnya, tidak disebutkan mengenai pengaturan Project ID-nya. Makanya di poin 2 ini sengaja saya ulangi dan tegaskan lagi, dengan menambahkan poin Project ID yang juga harus sama.

3. Jika menggunakan Breadcrumb dari Masino Extensions, Pastikan Phrase-nya sudah Ditambahkan ke dalam file .xml Language

   Seperti yang kita ketahui, di Masino Extensions terdapat pengaturan yang memungkinkan Anda untuk memakai data Breadcrumb yang bisa didefinisikan secara dinamis dari Aplikasi Web yang sudah dihasilkan oleh PHPMaker. Jika Anda menggunakan Breadcrumb dari Masino Extensions, maka wajib syaratnya Anda harus menambahkan setiap phrase yang terdapat di Breadcrumb yang Anda definisikan itu ke dalam file .xml Language.

   Supaya aman, pastikan setiap phrase Breadcrumb yang Anda tambahkan ke dalam .xml Language pada sisi PHPMaker, juga Anda tambahkan ke dalam .xml Language pada sisi PHP Report Maker. Paham maksudnya kan? Karena belajar dari pengalaman saya, jika salah satu phrase ada yang tidak dimasukkan ke dalam file .xml Language tadi, maka Breadcrumb tidak dapat ditampilkan seperti yang diharapkan.

Itulah beberapa hal yang paling penting untuk diketahui jika Anda membangun Aplikasi Web menggunakan Masino Extensions baik untuk project PHPMaker maupun untuk project PHP Report Maker, dan Anda ingin mengintegrasikan Report yang dihasilkan oleh PHP Report Maker ke dalam Aplikasi Web yang dihasilkan oleh PHPMaker.

Untuk melihat demo Aplikasi Web yang dihasilkan oleh PHPMaker, PHP Report Maker, dan Masino Extensions, silahkan klik alamat ini: http://demo-pmp-prp.ilovephpmaker.com. O iya, dalam demo tersebut, Anda akan melihat file .php yang dihasilkan oleh PHP Report Maker akan berada di bawah menu Reports.

Happy coding!

Jika Anda menggunakan extension Preview atau MasinoPreviewRow13 di project PHPMaker, maka Pengguna Akhir Aplikasi Web dapat melihat record Detail dengan cara mengklik tanda plus (+) di samping record Master-nya. Selanjutnya record Detail akan ditampilkan di bagian bawah record Master tadi menggunakan AJAX, tanpa memuat ulang halaman tersebut. Fitur ini di PHPMaker disebut dengan Detail Preview Row.

Selain dengan cara tadi, record Detail juga dapat ditampilkan dengan cara menggeser kursor mouse ke atas tombol Detail. Selanjutnya sistem akan menampilkan record Detail di jendela kecil yang muncul secara PopUp, juga masih menggunakan AJAX. Fitur yang kedua ini disebut dengan Detail Preview Overlay.

Kedua fitur Detail Preview Row dan Detail Preview Overlay tadi cocok digunakan jika jumlah record Detail tidak terlalu banyak. Misalkan hanya sekitar 5 atau 10 record. Jika jumlah record Detail sudah relatif banyak, katakanlah di atas 20, 50, 100, atau lebih dari itu, maka area tempat menampilkan record Detail tadi menjadi sangat panjang ke bawah. Hal ini terjadi, karena di area Detail Preview tadi tidak menggunakan Paging untuk membagi record ke dalam beberapa halaman.

Sering kali Web Developer dituntut untuk dapat membatasi maksimal jumlah record Detail yang akan ditampilkan di Detail Preview Row dan Detail Preview Overlay tersebut. Pertanyaannya adalah, bagaimana caranya? Sementara yang kita ketahui, tidak ada Property di PHPMaker yang disediakan untuk menentukan jumlah maksimal record yang bisa ditampilkan di kedua area tadi.

Hehe, bukan PHPMaker namanya jika kita tidak dapat mengatasi hal tersebut. Lagi-lagi dalam hal ini kita dapat menggunakan fitur Server Events. Katakanlah kita ingin membatasi hanya 5 record saja yang ditampilkan di area Detail Preview tadi. Cukup dengan menambahkan sedikit kode PHP saja ke dalam server event Row_Rendered, sehingga kode selengkapnya menjadi seperti ini:

// Row Rendered event
function Row_Rendered() {
	// To view properties of field class, use:
	//var_dump($this-><FieldName>); 
	if (CurrentPageID() == "preview" && $this->RowCnt > 5) {
		$this->RowAttrs["style"] = "display: none";
	}
}

Kita menggunakan server event Row_Rendered, karena dieksekusi oleh sistem ketika table sedang dirender ke browser. Dari kode di atas, kita harus memastikan bahwa kode tersebut hanya untuk halaman Detail Preview saja, dengan menggunakan fungsi global CurrentPageID(). Nilai yang dikembalikan fungsi ini harus sama dengan preview.

Untuk membatasi jumlah record, maka kita mengoptimalkan Property RowCnt milik object Page atau Table. Jika jumlahnya lebih besar dari 5, maka cukup set Property RowAttrs milik object Page atau Table yang bernama style. Caranya, dengan menugaskan kode CSS untuk menghilangkan tampilan di baris record tersebut yaitu display: none;.

Tentu saja kode di atas belum dapat mengubah informasi jumlah record Detail yang sebenarnya. Nah, supaya Pengguna tidak bingung karena jumlah record yang ditampilkan tidak sama dengan informasi jumlah record yang sebenarnya, kita bisa mengakali dengan menambahkan informasi di bagian bawah dari table Detail tadi menggunakan server event Page_DataRendered yang terdapat di bawah lokasi Server Events -> Table-Specific -> Preview Page, sehingga kode selengkapnya menjadi seperti ini:

// Page Data Rendered event
function Page_DataRendered(&$footer) {
	// Example:
	$footer = "Only 5 records are displayed at the moment ...";
}

Dengan cara ini, jika jumlah record Detail yang sebenarnya lebih dari 5, maka Pengguna dapat memaklumi bahwa yang ditampilkan di area tersebut maksimal hanya 5 record saja.

See? Betapa mudah, cepat, dan menyenangkan sekali membangun Aplikasi Web dengan menggunakan PHPMaker, bukan? Tidak perlu menulis kode dari titik nol. Kita hanya cukup menambahkan sedikit kode saja pada server event yang terkait. Selebihnya akan diselesaikan oleh PHPMaker.

Bagi Anda yang belum menggunakan PHPMaker, bisakah metode pengembangan Aplikasi Web yang Anda gunakan saat ini seperti yang terdapat di PHPMaker tersebut?

Sejak PHPMaker memutuskan untuk selalu menggunakan AJAX pada field yang mengambil nilai ke table lain (Lookup Table), maka hal ini juga berdampak langsung kepada kode HTML yang di-generate oleh PHPMaker untuk field tersebut.

Artinya, jika kita menggunakan control CheckBox atau ComboBox untuk menampilkan nilai dari Lookup Table tadi, maka kode HTML yang kita lihat dari View Page Source browser tidak sesuai dengan sintaks HTML umum untuk me-render control tersebut.

Tidak ada sintaks option value per satu record untuk mengisi nilai data ke dalam control ComboBox, atau tidak ada sintaks untuk menampilkan nilai label/text control CheckBox tadi.

Di satu sisi, tentu saja pasti ada keuntungan menggunakan teknik ini. Apa itu? Yang jelas, cara ini dapat menghemat pemakaian bandwidth karena mengurangi kode HTML yang harus ditampilkan di browser saat itu. Bayangkan jika jumlah record tadi mencapai ratusan atau ribuan, betapa hematnya browser untuk menampilkan kode HTML dari Lookup Table tadi.

Tapi, di sisi yang lain, Web Developer yang baru pertama kali mengenal teknik ini pasti kebingungan. Mengapa? Karena dia tidak tahu bagaimana cara mengambil nilai setiap record dari Lookup Table tadi, untuk selanjutnya diolah berdasarkan business-logic tertentu, misalnya.

Katakanlah kita ingin ketika Pengguna Akhir Aplikasi Web yang dibangun dengan PHPMaker memberi centang pada satu atau beberapa pilihan melalui control CheckBox pada form Add dan Edit, maka sistem akan otomatis menghitung nilai tertentu yang ditampilkan pada bagian label control CheckBox tersebut.

Lalu bagaimana dong solusinya? Hehehe… tenang, tenang… jangan buru-buru panik. Beruntunglah Anda jika selama ini sudah menggunakan PHPMaker, khususnya versi terakhir yaitu 2017 saat saya menulis artikel ini. Mengapa? Karena PHPMaker sudah menyediakan sebuah fungsi Javascript yang bernama ew_GetOptTexts.

Fungsi ini bisa kita gunakan untuk mengetahui data label dari control CheckBox yang sedang terpilih atau yang ada tanda centangnya. Berdasarkan fungsi itulah kita bisa memparsing data atau nilai tertentu yang terdapat di dalamnya. Paham maksudnya, kan?

Supaya semakin jelas dan terang-benderang, langsung saja ikuti langkah-langkah berikut dengan teliti.

1. Pertama sekali, pastikan Anda sudah membuat sebuah Database MySQL baru, misalkan nama Databasenya adalah test_db,
2. Selanjutnya eksekusi script SQL berikut untuk membuat dua table baru yang masing-masing bernama hardware dan customer_orders:

   -- ----------------------------
   -- Table structure for hardware
   -- ----------------------------
   DROP TABLE IF EXISTS `hardware`;
   CREATE TABLE `hardware` (
     `ID` int(11) NOT NULL AUTO_INCREMENT,
     `Description` varchar(100) NOT NULL,
     `Price` decimal(10,2) NOT NULL,
     PRIMARY KEY (`ID`)
   ) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
   
   -- ----------------------------
   -- Records of hardware
   -- ----------------------------
   INSERT INTO `hardware` VALUES ('1', 'Laptop', '67.00');
   INSERT INTO `hardware` VALUES ('2', 'Desktop', '5.00');
   INSERT INTO `hardware` VALUES ('3', 'Monitor', '3.00');
   
   -- ----------------------------
   -- Table structure for customer_orders
   -- ----------------------------
   DROP TABLE IF EXISTS `customer_orders`;
   CREATE TABLE `customer_orders` (
     `ID` int(11) NOT NULL AUTO_INCREMENT,
     `Orders` varchar(100) NOT NULL,
     `Order_Date` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
     `Sum_Order` decimal(10,2) DEFAULT NULL,
     PRIMARY KEY (`ID`)
   ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
   

   Ini hanya contoh sederhana. Table customer_orders seharusnya memiliki field ID Customer, tapi untuk saat ini field ID Customer itu tidak kita perlukan, jadi abaikan saja terlebih dulu.

3. Buat project baru PHPMaker dengan mengarahkan ke Database test_db tadi,
4. Klik table customer_orders dari panel Database, dan dari bagian Fields setup, klik field Orders,
5. Pilih control CheckBox, dan beri tanda centang pada pilihan Use lookup table dari panel Edit Tag,
6. Panel Lookup Table akan muncul di sebelah kanannya, lalu:
   – Pilih table hardware dari property Table name,
   – Pilih field ID dari property Link field,
   – Pilih field Description dari property Display field #1,
   – Pilih field ID dari property Display field #2,
   – Pilih field Price dari property Display field #3.
7. Tambahkan kode jQuery berikut ke dalam lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script:

   $('input:checkbox[name="x_Orders\[\]"]').change(function() {
   	ReCalculate();
   });
   
   function ReCalculate(){
   	var sum = 0;
   	var sdata = "";
   	sdata = ew_GetOptTexts("x_Orders[]", "fcustomer_ordersadd")+''; 
   	items = sdata.split(',');
   	for( var i = 0; i < items.length; i++ ) {
   		var myval = 0;
   		if (i == 2 || (i - 2) % 3 == 0) {
   			myval = parseFloat(items[i]);
   		}
   		sum += myval;
   	}
   	$("#x_Sum_Order").val((sum).toFixed(2)); 
   }
   

8. Setelah itu, tambahkan juga kode jQuery berikut ke dalam lokasi Client Scripts -> Table-Specific -> Edit Page -> Startup Script:

   $('input:checkbox[name="x_Orders\[\]"]').change(function() {
   	ReCalculate();
   });
   
   function ReCalculate(){
   	var sum = 0;
   	var sdata = "";
   	sdata = ew_GetOptTexts("x_Orders[]", "fcustomer_ordersedit")+''; 
   	items = sdata.split(',');
   	for( var i = 0; i < items.length; i++ ) {
   		var myval = 0;
   		if (i == 2 || (i - 2) % 3 == 0) {
   			myval = parseFloat(items[i]);
   		}
   		sum += myval;
   	}
   	$("#x_Sum_Order").val((sum).toFixed(2)); 
   }
   

9. Terakhir, generate semua file script menggunakan PHPMaker seperti biasa.

Sekarang, jalankan Aplikasi Web dari browser, klik menu customer orders, klik tombol Add (+), lalu pada form Add yang muncul selanjutnya, Anda akan melihat ada 3 pilihan yang ditampilkan melalui control CheckBox, dengan pilihan kira-kira seperti ini urutannya:

Laptop, 1, 67.00	Desktop, 2, 5.00	Monitor, 3, 3.00

Artinya, setiap pilihan CheckBox memiliki masing-masing 3 informasi dengan urutan: Deskripsi, Kode, dan Harga, yang masing-masing diambil dari field Description, ID, dan Price pada table hardware.

Sekarang, cobalah untuk memberi tanda centang pada CheckBox pertama, maka Anda akan melihat field Sum_Order akan terisi nilai 67.00. Setelah itu, beri tanda centang lagi pada CheckBox kedua, Anda akan melihat field Sum_Order berubah nilainya menjadi 72.00 (67.00 + 5.00). Terakhir, beri tanda centang lagi pada CheckBox ketiga, maka sekarang Anda akan melihat nilai pada field Sum_Order berubah menjadi 75.00 (67.00 + 5.00 + 3.00).

Cobalah juga untuk menghapus satu atau beberapa tanda centang, maka perhatikan lagi nilai pada field Sum_Order. Sistem akan otomatis menyesuaikan setiap kali Pengguna Akhir Aplikasi Web mengklik CheckBox tadi. Artinya, nilai Price dari control CheckBox yang tercentang akan otomatis dijumlahkan, dan hasilnya ditampilkan ke dalam field Sum_Order.

Kesimpulannya, seperti yang sudah disebutkan di atas tadi, PHPMaker ternyata diam-diam sudah menyediakan sebuah Javascript function yang dapat menampilkan label/text yang terdapat pada control CheckBox yang nilainya berasal dari Lookup Table tertentu. Namanya adalah ew_GetOptTexts. Fungsi ini memiliki dua parameter. Parameter pertama adalah ID dari field-nya, dan parameter kedua adalah ID dari form-nya.

Sesuatu yang tadinya kita khawatirkan bagaimana cara mengambil nilai dari control CheckBox yang dihasilkan melalui fitur AJAX, ternyata sudah tersedia solusinya.

Hanya dengan menambahkan sedikit kode jQuery di atas dari bagian Client Scripts, dan mengeset beberapa item pengaturan pada Fields setup, kita sudah bisa menghasilkan Aplikasi Web yang akan otomatis menghitung nilai yang terdapat pada label control CheckBox yang terpilih tersebut.

Bagaimana, PHPMaker keren ‘kan?

Cobalah sekarang bayangkan, jika Anda membangun Aplikasi Web dari titik nol, berapa lama waktu yang akan Anda habiskan untuk menghasilkan fitur yang sama seperti jika kita membangunnya menggunakan PHPMaker? Hohoho…

Tidak semua Aplikasi Web yang dihasilkan oleh PHPMaker selalu menggunakan halaman yang dibangkitkan oleh PHPMaker. Kadang-kadang, ada beberapa halaman atau file .php buatan Web Developer sendiri yang harus disertakan ke dalam Aplikasi Web tadi.

Sebenarnya sudah ada fitur Custom Files yang bisa dioptimalkan untuk hal ini. Kita sebagai Web Developer hanya tinggal memastikan pilihan Include common files pada jendela dialog Custom Files tidak diaktifkan.

Sekalipun kita tidak mengaktifkan pilihan tadi, bukan berarti kita tidak bisa memanfaatkan fitur Security yang terdapat di PHPMaker. Hanya dibutuhkan beberapa baris kode tambahan saja di halaman eksternal PHP yang kita miliki, supaya dapat menggunakan fitur Security tadi.

Katakanlah kita memiliki sebuah file eksternal PHP; yang kode-nya tidak berasal dari hasil pen-generate-an PHPMaker; dan kita ingin memastikan bahwa Pengguna Akhir Aplikasi Web hanya dapat mengakses file eksternal tersebut jika sudah berhasil login.

Maka cukup dengan menggunakan kode berikut (asumsi, kita menggunakan PHPMaker versi 2017; saat artikel ini saya tulis), kita sudah dapat melindungi halaman eksternal tadi:

<?php
if (session_id() == "") session_start(); // Init session data
ob_start(); // Turn on output buffering
?>
<?php include_once "ewcfg13.php" ?>
<?php include_once "phpfn13.php" ?>
<?php
if (!IsLoggedIn()) {
	echo "Akses ditolak. Silahkan <a href='login.php'>login</a> terlebih dulu!<br>";
} else {
	echo "<h1>Selamat datang di halaman eksternal ...</h1>";
	echo "Ini adalah konten yang berasal dari halaman eksternal ...";
}
?>

Perhatikanlah kode di atas. Kita hanya cukup menambahkan sekitar 5 baris kode PHP saja di bagian atas dari halaman eksternal tersebut.

Pastikan kita sudah menyertakan fungsi session_id() dan session_start() untuk memastikan session sudah dikenali. Selanjutnya gunakan function ob_start() untuk menghidupkan output buffering.

Pastikan juga kita sudah memeriksa apakah Pengguna Akhir sudah berhasil login, dengan menggunakan global function IsLoggedIn(). Jika fungsi ini mengembalikan nilai FALSE, maka tampilkan pesan yang menyatakan bahwa akses ditolak dan Pengguna Akhir harus login terlebih dulu.

Sebaliknya, jika fungsi IsLoggedIn tadi mengembalikan nilai TRUE, maka itu artinya Pengguna Akhir dapat mengakses konten dari halaman eksternal PHP tadi.

Nah, meskipun Anda tetap dapat menggunakan halaman eksternal PHP tadi dari luar project PHPMaker, tapi saya menyarankan agar Anda tetap mengelola file ini melalui fitur Custom Files. Pastikan sekali lagi Anda tidak mengaktifkan pilihan Include common files supaya PHPMaker hanya men-generate kode yang Anda tulis di atas tadi.

Betapa mudah, cepat, dan menyenangkan sekali, bukan?

Seperti yang kita ketahui, fitur Modal dialog pada pengaturan level Table mulai ada sejak PHPMaker versi 2017. Halaman Add, Edit, dan View sekarang sudah bisa ditampilkan secara popup dalam kotak dialog Modal Bootstrap. Sebelumnya pada versi 12, baru halaman Advanced Search saja yang bisa ditampilkan menggunakan Modal Bootstrap.

Khusus untuk halaman Add dan Edit, kotak dialog Modal Bootstrap tersebut ternyata masih memiliki keterbatasan. Seperti apa itu? Begini. Jika misalnya kita ingin setelah Pengguna Akhir Aplikasi Web berhasil mengubah data dan ingin kembali lagi ke form Edit tadi, maka sistem akan menampilkan halaman Edit secara normal, dan tidak ditampilkan dalam kotak dialog Modal Edit.

Tentu saja kondisi ini tidak kita harapkan. Karena di samping tidak konsisten, Aplikasi Web kelihatan menjadi kurang begitu profesional. Sudah jelas di awal kita memutuskan untuk menggunakan kotak dialog Modal untuk form Edit tadi, lalu mengapa ketika sistem mengarahkan kembali ke form Edit tadi tapi sistem tidak menampilkannya dalam kotak dialog Modal?

Kondisi ketidakkonsistenan ini sebenarnya hampir mirip dengan kotak dialog Modal Bootstrap yang tidak bisa ditampilkan dari area Preview Row, seperti yang sudah saya tulis pada artikel yang berjudul Supaya Modal Dialog Bisa Dibuka dari Bagian Preview Row di PHPMaker.

Bedanya, kalau di artikel tadi solusinya bisa diatasi melalui extension MasinoPreviewRow13, maka solusi yang sedang kita bahas di artikel ini bisa diatasi melalui fitur Server Events dan Client Scripts. Artinya, bukan PHPMaker namanya jika kita tidak bisa mencari solusi di balik keterbatasan yang masih terjadi di PHPMaker.

Katakanlah di table kantor pada project PHPMaker, nama field yang berperan sebagai Primary Key adalah Kode_Kantor, kita ingin saat Pengguna mengklik link Edit di halaman List, maka sistem menampilkan dalam kotak dialog Modal Bootstrap, dan setelah Pengguna menyimpan data pada form Edit tadi, maka sistem tetap menampilkan form Edit tersebut, masih dalam kotak dialog Modal Bootstrap.

Bagaimana solusinya? Silahkan ikuti petunjuk berikut dengan teliti.

Pertama, pastikan kita sudah mengaktifkan pilihan Modal dialog dari Table setup -> Edit Page.

Kedua, salin kode berikut ke dalam server event Row_Updated yang terdapat di bawah lokasi Server Events -> Table-Specific -> Common, sehingga kode selengkapnya seperti ini:

// Row Updated event
function Row_Updated($rsold, &$rsnew) {
	//echo "Row Updated";
	$_SESSION["Redirect_Edit"] = "Yes";
	$_SESSION["Field_Kode"] = $rsold["Kode_Kantor"];
}

Artinya, kita ingin ada penanda yang memastikan setelah proses Edit data, maka kita akan menampilkan kembali kotak dialog Modal Bootstrap tadi, yaitu melalui variabel session yang bernama Redirect_Edit. Kita juga harus menyimpan data kunci dari field yang telah diubah tadi ke dalam variabel session yang bernama Field_Kode.

Ketiga, salin kode berikut ke dalam Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> List Page:

$(document).ready(function() {
	<?php if (isset($_SESSION["Redirect_Edit"]) && $_SESSION["Redirect_Edit"] == "Yes") { ?>
	<?php $_SESSION["Redirect_Edit"] = ""; ?>
	ew_ModalDialogShow({lnk:this, url:'kantoredit.php?Kode_Kantor=<?php echo $_SESSION["Field_Kode"] ?>', caption:'Edit'});
	<?php } ?>
});

Perhatikan kode yang terakhir ini. Kita dapat menyisipkan kode PHP di dalam kode jQuery pada bagian Client Scripts. Tujuannya, kita memeriksa apakah nilai variabel session Redirect_Edit tadi adalah Yes, dan jika ya, maka jangan lupa untuk mengosongkan nilai variabel session tadi terlebih dulu.

Mengapa harus dikosongkan? Tujuannya supaya kita tidak terjebak dengan logic yang terus-menerus menampilkan kotak dialog Modal Bootstrap tadi saat halaman List tadi diakses oleh Pengguna. Itulah makanya kita perlu memastikan bahwa penanda tadi sudah ditugaskan dari server event Row_Updated.

Setelah itu, panggil fungsi Javascript bawaan PHPMaker yang bernama ew_ModalDialogShow(), di mana parameter di dalamnya kita mengacu kepada URL dari Edit Page table kantor tadi. Pastikan juga kita sudah menyertakan parameter Kode_Kantor pada URL tersebut, yang nilainya kita ambil dari variabel session yang bernama Field_Kode.

Keempat, untuk mencegah sistem menampilkan halaman Edit yang normal (tanpa menggunakan kotak dialog Modal Bootstrap), maka pastikan kita mengosongkan pilihan pada Table setup -> Return Pages -> After edit.

Kelima atau yang terakhir, pastikan kita sudah men-generate ulang semua file script menggunakan PHPMaker, seperti biasa.

Setelah proses generate selesai, jalankan Aplikasi Web melalui browser favorit Anda. Klik link Edit pada salah satu record yang Anda inginkan di table kantor tadi, maka sistem akan menampilkan kotak dialog Modal Bootstrap. Sekarang ubahlah data di form tadi, lalu klik tombol Edit, maka sistem akan menampilkan kembali form Edit tadi masih dalam kotak dialog Modal Bootstrap.

Harus diakui memang, bahwa masih ada keterbatasan dari teknik ini. Apa itu? Pesan Update succeeded setelah proses Edit tadi, ditampilkan duluan atau berada di bawah kotak dialog Modal Bootstrap yang ditampilkan kemudian.

Meskipun demikian, trik yang kita gunakan ini paling tidak sudah mengatasi permasalahan utama dari halaman Edit normal yang ditampilkan jika menggunakan fitur redirect bawaan PHPMaker setelah proses Edit data dilakukan melalui kotak dialog Modal Bootstrap.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan?

Sebagai Web Developer, pernahkah Anda mengalami kesulitan ketika ingin mengetahui nilai Tanggal Akhir berdasarkan nilai Tanggal Awal yang ditambahkan dengan nilai sekian hari pada Aplikasi Web yang Anda buat?

Jika ya, maka trik pada artikel ini akan membuktikan kepada Anda bahwa dengan menggunakan PHPMaker, kita dapat mengetahuinya dengan sangat cepat, mudah, dan menyenangkan.

Misalkan nilai Tanggal Awal adalah 23 Desember 2016 pukul 12:38:50, lalu ditambahkan dengan nilai 12 hari, maka nilai Tanggal Akhir adalah 4 Januari 2017 pukul 12:38:50. Artinya, ketika Pengguna memilih nilai Tanggal Awal, lalu memasukkan nilai jumlah hari, maka nilai Tanggal Akhir akan otomatis terbentuk di sisi browser Pengguna.

Baiklah, supaya tidak semakin penasaran, langsung saja ikuti langkah-langkah berikut ini dengan teliti. Jangan sampai ada yang telolet, eh… terlewat, ya!

Pertama sekali, buatlah sebuah Database di MySQL, lalu jalankan script SQL berikut untuk membuat satu buah table di dalamnya:

CREATE TABLE `table1` (
  `Kode` char(3) NOT NULL,
  `Tanggal_Awal` datetime NOT NULL,
  `Nilai_Tambah` int(11) NOT NULL,
  `Tanggal_Akhir` datetime NOT NULL,
  PRIMARY KEY (`Kode`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Kedua, buatlah sebuah project PHPMaker baru, lalu arahkan ke Database tadi. Pada panel Database, pastikan Anda sudah memberi tanda centang dan memilih object table1.

Ketiga, aktifkan extension JSCalendar dari menu Tools -> Extensions.

Keempat, klik tab Fields lalu klik field Tanggal_Awal, pastikan dari panel Edit Tag, Anda sudah memilih Date dari bagian Validation -> Validate. Pastikan juga pilihan Use date/time picker dan Required sudah ada tanda centangnya. Setelah itu, pada panel View Tag, pastikan Anda sudah memilih Date/Time dari property Format, dan juga sudah memilih YmdHis dari property Date/Time named format.

Kelima, lakukan hal yang sama seperti langkah keempat tadi untuk field Tanggal_Akhir.

Keenam, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu lompat ke lokasi Client Scripts -> Global -> Pages with header/footer -> Global Code, kemudian salin function Javascript berikut ke editor kode tersebut:

function addDays(date, days, id) {
	var tt = date;
	var time = "";
	if (tt.toString().length > 8) {
		time = tt.substring(11);
	} else {
		time = "";
	}
	var begin_date = new Date(date);
	var newdate = new Date(begin_date);
	newdate.setDate(newdate.getDate() + days);
	var dd = newdate.getDate();
	if (dd.toString().length == 1) dd = "0" + dd;
	var mm = newdate.getMonth() + 1;
	if (mm.toString().length == 1) mm = "0" + mm;
	var y = newdate.getFullYear();
	var sFormattedDate = "";
	sFormattedDate = y + EW_DATE_SEPARATOR + mm + EW_DATE_SEPARATOR + dd;
	return sFormattedDate + ' ' + time;
}

Ketujuh, salin kode jQuery berikut ke dalam lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script:

$(document).ready(function() {
	$("#x_Tanggal_Awal").change(function() {
		var sTgl = $("#x_Tanggal_Awal").val();
		var iVal = parseInt($("#x_Nilai_Tambah").val());
		if ($("#x_Nilai_Tambah").val() != "")
		$("#x_Tanggal_Akhir").val(addDays(sTgl, iVal, "x_Tanggal_Akhir"));
	});
	$("#x_Nilai_Tambah").keyup(function(event) {
		var sTgl = $("#x_Tanggal_Awal").val();
		var iVal = parseInt($("#x_Nilai_Tambah").val());
		if (iVal > 0) {
			$("#x_Tanggal_Akhir").val(addDays(sTgl, iVal, "x_Tanggal_Akhir"));
		} else {
			$("#x_Tanggal_Akhir").val("");
		}
	});
});

Kedelapan, lakukan hal yang sama seperti langkah ketujuh tadi pada lokasi Client Scripts -> Table-Specific -> Edit Page -> Startup Script.

Kesembilan, generate semua file script menggunakan PHPMaker, seperti biasa.

Setelah proses generate selesai, sekarang jalankan Aplikasi Web dari browser favorit Anda. Cobalah menambah data dengan mengklik tombol Add (+), lalu pilih tanggal pada bagian Tanggal Awal, masukkan nilai yang Anda inginkan di bagian Nilai Tambah, lalu perhatikan di bagian Tanggal Akhir, nilai tanggal akan otomatis terisi berdasarkan nilai Tanggal Awal ditambah nilai jumlah hari pada Nilai Tambah.

Misalkan kita menggunakan contoh di atas. Nilai pada bagian Tanggal Awal terisi 2016-12-23 12:38:50, lalu Anda memasukkan atau mengetikkan nilai 12 pada bagian Nilai Tambah, maka nilai pada Tanggal Akhir akan terisi menjadi 2017-01-04 12:38:50.

Dalam hal ini, maka disarankan untuk selalu menggunakan format data Tanggal dengan urutan: Tahun, Bulan, Tanggal, Jam, Menit, dan Detik.

Hanya dengan menambahkan sedikit kode itu saja, dan juga mengatur beberapa property dari bagian Field Setup project PHPMaker, kita sudah dapat menghasilkan fitur seperti itu. Selebihnya akan ditangani oleh PHPMaker.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan?

Pernah mengalami kesulitan ketika ingin menampilkan control DatePicker menggunakan JSCalendar di halaman Custom Files? Jangan khawatir. Berikut ini kita akan mengetahui betapa mudahnya mengimplementasikan fitur itu dari dalam project PHPMaker.

Oke, langsung saja ya supaya tidak bertele-tele!

Pertama kali, pastikan kita sudah mengaktifkan extension JSCalendar dari menu Tools -> Extensions.

Setelah itu, pastikan Anda sudah membuat sebuah Custom File baru. Jika belum tahu caranya, baca topik Custom Files di menu Help PHPMaker, atau cari artikel saya di situs ini dengan kata kunci topik tadi.

Selanjutnya, salin kode berikut ke bagian Content dari Custom File yang sudah Anda buat tadi.

<form id="myform" name="myform" class="form-horizontal">
	<div id="r_start" class="form-group">
		<label for="start" class="col-sm-2 control-label ewLabel">Date Start</label>
		<div class="col-sm-10">
		  <span id="el_calendar_start">
		  <input type="text" name="start" data-field="start" data-format="9" size="20" class="form-control" id="start">
		  <script type="text/javascript">
			ew_CreateCalendar("myform", "start", 9);
		  </script>
		  </span>
		</div>
	</div>
</form>

Perhatikan kode barusan. Kita cukup memanggil fungsi Javascript bawaan PHPMaker yang bernama ew_CreateCalendar setelah sintaks untuk menampilkan control TextBox yang bernama dan memiliki ID start.

Parameter pertama adalah ID dari form tempat control TextBox itu berada, yaitu myform.

Parameter kedua adalah ID dari control TextBox, yaitu start.

Parameter ketiga adalah ID dari format data tanggalnya, yaitu 9, yang dalam hal ini artinya adalah data Tanggal beserta Jam, dengan format yyyy-MM-dd hh:mm:ss, atau dikenal di PHP date sebagai YmdHis.

Dalam hal ini, pastikan juga kita sudah mengeset beberapa pengaturan berikut pada file en.json (buka dari menu Tools -> Locale Settings), yaitu:

- Date format ----> YmdHis 
- Date separator ----> - (karakter minus)
- Time separator ----> : (Karakter titik dua).

Terakhir, generate semua file script seperti biasa menggunakan PHPMaker.

Betapa mudah, cepat, dan menyenangkan sekali, bukan?

Hanya dengan sedikit kode itu saja, control DatePicker dapat ditampilkan pada halaman Custom File kita. Selebihnya akan ditangani oleh PHPMaker. Kita tidak perlu menulis kode sampai puluhan, ratusan, atau bahkan ribuan baris secara manual seperti yang mungkin Anda lakukan selama ini.

Salah satu kelebihan PHPMaker dibandingkan tools code generator sejenis lainnya adalah kemudahan sekaligus kefleksibelan untuk mengkostumisasi tampilan di Aplikasi Web yang dihasilkannya. Cukup dengan menambahkan sedikit kode saja ke bagian Server Events, maka kita bisa menyembunyikan elemen tertentu di halaman yang kita inginkan.

Katakanlah kita ingin menyembunyikan tombol Delete di halaman View, hanya jika nilai User ID dari user yang sedang login tidak sama dengan nilai pada field User_ID di halaman View tadi.

Cukup dengan menambahkan sedikit kode PHP saja ke dalam server event Page_Render di bawah lokasi Server Events -> Table-Specific -> View Page, sehingga kode selengkapnya menjadi seperti ini:

// Page Render event
function Page_Render() {
	//echo "Page Render";
	if (CurrentUserID() <> $this->User_ID->CurrentValue) {
		$this->OtherOptions["action"]->Items["delete"]->Visible = FALSE;
	}
}

Dari kode di atas, maka kita bisa menyimpulkan bahwa tombol Delete di halaman View dikelompokkan ke dalam object OtherOptions yang bernama action, dan memiliki property Items yang bernama delete.

Setelah itu, generate ulang semua file script dengan menggunakan PHPMaker seperti biasa.

Betapa mudahnya, bukan?

Sejak versi 2017 atau 13, PHPMaker memiliki fitur baru berupa Modal Dialog pada field yang Lookup ke Table tertentu. Tujuannya, agar Pengguna dapat mencari atau mem-browse record dengan lebih mudah dan cepat, apalagi jika jumlahnya relatif sangat banyak. Jadi, record yang banyak tadi tidak lagi ditampilkan di control Combobox.

Adanya fitur baru ini tentu saja mengubah cara PHPMaker menampilkan data pada field tersebut menjadi sedikit lebih kompleks. Artinya, PHPMaker menambahkan kode lebih banyak, hanya untuk me-render control tadi dengan menyertakan tombol browse yang memiliki icon kaca pembesar.

Tombol browse ini berada di samping field tersebut pada Aplikasi Web yang dihasilkan oleh PHPMaker. Jika Pengguna Akhir Aplikasi Web mengklik tombol tersebut, maka sistem akan menampilkan form dalam jendela Modal Dialog, untuk mencari data, lalu memilih data yang diinginkan.

Tidak hanya itu saja. PHPMaker juga menambahkan kemampuan supaya Pengguna Akhir Aplikasi Web dapat menampilkan jendela Modal Dialog, dengan cara mengklik data pada field tadi. Jadi, selain mengklik tombol browse di atas, mereka juga dapat mengklik tulisan pada field tersebut untuk membuka jendela Modal Dialog.

Semua perubahan di atas tentu saja berpengaruh kepada cara kita sebagai Web Developer dalam memodifikasi kode jika ingin membuat field tersebut menjadi Read Only. Dengan kata lain, kita tidak dapat lagi menggunakan property ReadOnly milik field tersebut, untuk men-disable control tersebut pada Form.

Pertanyaan selanjutnya, lalu bagaimana cara kita men-disable field yang Lookup ke Table tertentu dan menggunakan Modal Dialog untuk memilih/mencari data?

Bukan PHPMaker namanya, jika kita sebagai Web Developer tidak dapat mengatasi permasalahan tersebut. Solusinya sangatlah sederhana. Cukup menambahkan sedikit kode jQuery saja ke bagian Startup Script.

Katakanlah dalam hal ini kita fokus ke halaman/form Edit, karena biasanya kita ingin men-disable field tersebut saat Pengguna Akhir mengubah data di halaman Edit.

Supaya kita lebih mudah memahami dan langsung mencobanya, misalkan kita menggunakan field Trademark dari table cars di project demo. Untuk itu, pastikan kita sudah mengaktifkan pengaturan Use modal dialog for lookup dari bagian Fields project demo tersebut.

Setelah itu, tambahkan kode berikut ke bagian Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> Edit Page:

$(document).ready(function() {
	$("div #r_Trademark .ewLookupBtn").hide(); // sembunyikan tombol browse yang ada icon kaca pembesar
	$("#aol_x_Trademark").hide(); // sembunyikan tombol untuk menambah data Trademark on-the-fly
	$("div #lu_x_Trademark").removeAttr("onclick"); // hilangkan kemampuan click
	$("div #lu_x_Trademark").click(function() { // bila perlu tampilkan pesan bahwa field ini tidak bisa diubah
		ew_Alert("Tidak bisa diubah ya!");
	});
});

Terakhir, generate ulang semua file script seperti biasa menggunakan PHPMaker. Kemudian, jalankan Aplikasi Web dari browser, dan perhatikan sekarang bahwa tombol browse bergambar icon kaca pembesar tadi sudah tidak ditampilkan lagi.

Jika Pengguna mengklik data pada field, maka sistem akan merespon dengan menampilkan pesan bahwa data tidak bisa diubah. Jadi, fungsi Modal Dialog sudah dinonaktifkan, alias tidak dapat digunakan lagi. Seperti yang kita inginkan.

Selain itu, tombol untuk menambah data Trademark juga ikut disembunyikan. Hal ini sekaligus membuktikan bahwa untuk men-disable fungsi penambahan data Trademark on-the-fly, kita cukup menyembunyikan elemennya saja menggunakan kode jQuery.

Tentu saja, kita bisa menambahkan kondisi sesuai kebutuhan kita untuk men-disable field tersebut. Contoh, kita ingin hanya untuk Level Pengguna 1 saja field tersebut di-disable. Kita bahkan bisa menambahkan pemeriksaan kondisi tersebut menggunakan kode PHP di bagian kode jQuery tadi, sehingga kode di atas menjadi seperti ini:

<?php if (CurrentUserLevel() == "1") { ?>
$(document).ready(function() {
	$("div #r_Trademark .ewLookupBtn").hide(); // sembunyikan tombol browse yang ada icon kaca pembesar
	$("#aol_x_Trademark").hide(); // sembunyikan tombol untuk menambah data Trademark on-the-fly
	$("div #lu_x_Trademark").removeAttr("onclick"); // hilangkan kemampuan click
	$("div #lu_x_Trademark").click(function() { // bila perlu tampilkan pesan bahwa field ini tidak bisa diubah
		ew_Alert("Tidak bisa diubah ya!");
	});
});
<?php } ?>

Satu lagi fakta dari sekian banyaknya fitur yang membuktikan bahwa PHPMaker semakin powerful, tapi juga masih tetap fleksibel dari dulu sampai sekarang.

Betapa PHPMaker semakin membantu meringankan pekerjaan Web Developer. Buat yang belum menggunakan PHPMaker, masihkah Anda bertahan menggunakan cara-cara kuno atau konvensional dalam membangun Aplikasi Web?

Belum pernah ada Aplikasi Web yang saya lihat saat menampilkan data yang memiliki relasi Master/Detail secanggih, sebagus, dan sefleksibel Aplikasi Web yang dihasilkan oleh PHPMaker. Apalagi jika relasinya Master/Multiple-Detail, yang artinya satu tabel Master yang dihubungkan dengan beberapa tabel Detail sekaligus.

Mengapa saya katakan demikian? Karena PHPMaker memiliki kemampuan menghasilkan fitur PreviewRow untuk menampilkan data table Detail di bawah baris record Master di halaman List milik tabel Master menggunakan teknik AJAX. Artinya, Pengguna Akhir Aplikasi Web dapat menampilkan dan menyembunyikan tabel Detail cukup dengan mengklik tombol plus (+) atau tombol Preview Row.

Jadi, tabel Detail dapat ditampilkan dan disembunyikan tanpa harus memuat ulang semua konten di halaman List milik tabel Master-nya. Bahkan, Pengguna Akhir semakin dimanjakan lagi dengan adanya kemampuan untuk menampilkan tabel Detail tersebut menggunakan fitur Preview Overlay, yaitu dengan menggeser kursor mouse ke tombol tertentu. Benar-benar canggih dan bagus.

Lalu di mana letak kefleksibelannya? Di artikel ini kita akan membuktikannya. Katakanlah di project demo, kita menggunakan contoh tabel orders sebagai Master, sedangkan untuk tabel Detailnya, kita menggunakan dua tabel sekaligus, yaitu orderdetails (di tab pertama) dan order details extended (di tab kedua).

Selanjutnya kita ingin ketika Pengguna menampilkan tabel Detail melalui fitur PreviewRow, jika tidak ada record ditemukan di tabel Detail yang bernama order details extended, maka kita menyembunyikan tab kedua yang memuat tabel tersebut.

Solusinya cukup dengan menaruh sedikit kode jQuery ke dalam bagian Startup Script yang berada di bawah lokasi Client Scripts -> Table-Specific -> List Page milik tabel orders, sehingga kode selengkapnya menjadi seperti ini:

$(document).on("preview", function(e, args) {
	// Ambil panel tab dari variabel args
	var $tabpane = args.$tabpane;
	// Ambil data link berdasarkan class ewAddEditOption 
	var sLink = $tabpane.find("div:has(.ewAddEditOption)").find("a").attr("href");
	// Ambil data atribut data-target sebagai key unique tab di row tertentu
	var sDataTarget = $(".ewTablePreviewRow td ul li a").attr("data-target");
	// Proses hanya yang memiliki data link
	if (sLink) {
		// Ambil nilai kunci untuk setiap row setelah karakter = yang terakhir
		var myKey = sLink.substr(sLink.lastIndexOf("=") + 1);
		// Ambil jumlah record untuk "order details extended" menggunakan AJAX
		var vRecCount = ew_Ajax("<?php echo ew_Encrypt("SELECT COUNT(*) FROM `order details extended` WHERE OrderID = '{query_value}'"); ?>", myKey);
		// Proses hanya jika jumlah record kurang dari satu alias tidak ada record ditemukan
		if (vRecCount < 1) {
			// Deklarasikan variabel yang terkait atribut untuk menandai tab di setiap row
			var hideThis = {
				'data-table': ['order_details_extended'],
				'data-target': ['' + sDataTarget + '']
			};
			// Mulai proses sembunyikan tab dengan memfilter berdasarkan variabel atribut yang sudah ditentukan sebelumnya
			$('tr > td > ul > li >').filter(function(){
				for (var i in hideThis) {
					var attr = $(this).attr(i),
						match = ('|' + hideThis[i].join('|') + '|').indexOf(attr) > -1;
					if (!match) {
						return false;
					}
				}
				return true;
			}).hide();
		}
	}
});

Sebagai informasi, kode di atas saya hasilkan beberapa menit yang lalu, untuk menjawab pertanyaan di Forum Diskusi PHPMaker: Master Details Hide Second Tab on Condition.

Salah satu pelajaran penting yang bisa kita peroleh dari kode di atas adalah, ternyata PHPMaker sudah menyediakan fungsi Javascript ew_Ajax() yang dapat mengembalikan data tertentu dari Database.

Fungsi ew_Ajax() ini bahkan sudah menyediakan fungsi callback yang bisa dioptimalkan oleh Web Developer untuk menjalankan perintah tertentu.

Dalam contoh di atas, kita tidak menggunakan callback tersebut, karena kita hanya mengambil jumlah record dari Database View yang bernama order details extended berdasarkan field OrderID sebagai kunci yang membedakan antara satu row dengan row yang lain.

Betapa fleksibelnya PHPMaker bagi Web Developer.

Sudah hampir tiga bulan saya tidak menulis artikel di situs ini. Itu karena selama itu saya lumayan sibuk bereksplorasi, bereksperimen, sampai menghasilkan sebuah Template untuk PHPMaker 2017. Hampir setiap hari ada saja ilmu baru yang saya peroleh dalam membuat Template ini.

Hari ini akhirnya Template tersebut saya rilis. Namun, kali ini saya merilisnya melalui website CodeCanyon: Advanced Horizontal Vertical Layout for PHPMaker 2017 Template.

Yup, dari namanya saja Anda pasti sudah bisa menebak, bahwa Template ini mendukung Horizontal dan Vertical Layout untuk PHPMaker 2017. Ada begitu banyak pilihan tersedia, yang bisa Anda gunakan untuk menghasilkan tampilan Aplikasi Web yang unik antara satu dengan lainnya. Bahkan, tersedia juga pilihan yang dapat digunakan oleh End-Users untuk mengubah tampilan sesuai yang diinginkan.

Aplikasi Web yang dihasilkan pun menjadi kelihatan lebih profesional dan user-friendly. Mulai dari warna Header (Left-Header dan Right-Header) dan Sidebar (untuk Vertical Layout), Footer, Main Container, sampai pattern atau pola gambar background dasar Aplikasi Web bisa diganti on-the-fly. Bahkan, trigger menu juga bisa diganti dari Hover ke Click, atau pun sebaliknya.

Selain itu, tersedia juga pilihan untuk menampilkan garis pembatas antar item menu, baik menu maupun submenu. Layout secara vertical pun bisa dengan mudah diganti-ganti, apakah ingin Wide, Box, atau WideBox. Style elemen pun bisa diganti dari Square (siku-siku) menjadi Rounded (oval). Sidebar untuk layout Vertical juga bisa disembunyikan atau di-minimize.

Dan yang terpenting dari semuanya itu adalah, Template ini juga sudah 100% Responsive. Artinya, tampilan Aplikasi Web Anda jika diakses dari perangkat mobile seperti Handphone atau Tablet, akan otomatis menyesuaikan dengan lebar layar perangkat yang bertalian. Untuk berpindah dari Vertical ke Horizontal dan sebaliknya pun sangatlah mudah.

Keren, ‘kan?

Harus saya akui, bahwa Template yang baru saja saya rilis ini belum mendukung RTL (Right-To-Left) Layout. Alasan mengapa belum mendukung RTL, karena dibutuhkan waktu untuk sampai menghasilkan fitur RTL. Itulah mengapa harganya masih relatif lebih murah, yaitu hanya USD 189 saja untuk Regular License, dan USD 770 untuk Extended License (perbedaan kedua License tersebut bisa Anda lihat dari website CodeCanyon tadi).

Rencananya, Template ini akan terus saya kembangkan, sampai nantinya memiliki fitur RTL.

Adapun fitur-fitur yang tersedia sekarang untuk Template tersebut adalah sebagai berikut:

1. Horizontal Menu Layout
2. Vertical Menu Layout
3. Layout Theme Settings Selector
4. Header Theme Color (10 options available)
5. Left-Header Theme Color (10 options available)
6. NavBar Theme Color (10 options available)
7. Footer Theme Color (10 options available)
8. Main Container Theme Color (9 options available)
9. Active Item Theme Color (10 options available)
10. Background Patterns (9 options available)
11. Header Position (Fixed, Relative)
12. Footer Position (Fixed, Relative)
13. Menu Position (Fixed, Relative)
14. Item Menu Border (Show, Hidden)
15. Subitem Menu Border (Show, Hidden)
16. Menu Border Style (Solid, Dotted, Dashed)
17. Navigation View (3 options available)
18. Theme Style (Square, Rounded)
19. Theme Vertical Layout (Wide, Boxed, Widebox)
20. Menu Trigger (Hover, Click)
21. Vertical Sidebar Effect (Shrink, Overlay, Push)
22. Horizontal Menu Icon (Show, Hidden)
23. Default Vertical Menu (Collapsed, Expanded, Expanded PopOver)
24. Smart Layout for Desktop, Tablet, and Phone
25. Sticky Header
26. Sticky Footer
27. Sticky Menu/Navbar
28. Menu Hover
29. Menu Click
30. Collapsed/Expanded Sidebar
31. Menu Item Group
32. Screen Loading Status
33. Auto Highlight Current Menu Item and Its Parent
34. Restore to Default Settings
35. User Profile Dropdown Menu
36. Responsive Design 100%
37. Locale Google Font
38. Alertify Message/Notification System
39. Popup Confirmation Message on Add/Copy/Edit Popup Dialog
40. Popup Window option for Login, Forgot Password, Registration, and Change Password Pages
41. Help-Online Ready on All the Generated Pages
42. Terms and Conditions on The Registration Page
43. Smart Search Panel Status
44. User Permissions for Export Data
45. Countdown to Time Remaining Sessions
46. Table-Level Setting Options (via Extension)
47. Project-Level Setting Options (via Extension)
48. Clean Interface
49. Clean Code
50. Easy and Quick to Implement for any PHPMaker 2017 project
51. Maintained regularly
52. Always Stay Updated to the Latest PHPMaker 2017 Minor Version.

Semoga bermanfaat bagi Anda yang sedang membutuhkan Template untuk PHPMaker 2017.

Gak usah pakai tebak-tebakan ya. Sudah pastilah ada di antara Anda yang menanti-nantikan artikel yang membahas PHPMaker 2018; versi major terakhir saat saya menulis artikel ini. Jujur saja deh, sebenarnya saya tidak terlalu bersemangat membahas PHPMaker versi 2018 yang satu ini. Karena di versi ini, PHPMaker sedikit mengabaikan mutu tampilan hanya untuk menggunakan theme gratisan.

Sekalipun di PHPMaker 2018 ini layout-nya diubah total dengan menggunakan AdminLTE, tetap saja gak bagus kelihatannya. Tanggung gitu, lho. Yang lucunya, sebagian besar orang-orang di luar sana, malah suka dengan theme gratisan sejuta umat itu, hahaha… Ya iyalah, gratisan! Huh, dasar maunya serba gratisan! Ini fitur yang paling tidak saya sukai di PHPMaker 2018.

Hehe, pasti timbul pertanyaan. Mengapa tadi saya katakan PHPMaker 2018 mengabaikan mutu tampilan? Alasannya, karena di versi 2018 ini, PHPMaker merombak total class cMenu dan cMenuItem di dalam template-nya, hanya karena mereka mulai menggunakan AdminLTE tadi. Sebagai informasi aja buat Anda, kedua class ini adalah class untuk membangkitkan Menu di Aplikasi Web yang dihasilkan oleh PHPMaker.

Lalu apa pengaruhnya saya tidak semangat? Jadi begini. Di PHPMaker 2017, kedua class tersebut belum mengacu kepada template apapun, seperti AdminLTE. PHPMaker 2017 masih menggunakan layout bawaan framework Bootstrap 3.3.7 (versi stabil terakhir dari Bootstrap). Karena layout-nya masih asli itulah, makanya kedua class tersebut sangat kompatibel untuk disesuaikan ke theme atau template premium apapun yang ada di luar sana.

Salah satu fakta yang membuktikan hal itu, bisa Anda lihat dari demo ini. Seperti yang Anda lihat, Aplikasi Web pada demo itu masih dibangkitkan dengan PHPMaker 2017. Untuk mengkostumais template-nya sangatlah mudah. Tidak terlalu banyak perubahan yang harus saya lakukan terhadap kedua class tadi.

Tapi tidak untuk PHPMaker 2018. Saya harus memutuskan untuk tidak menggunakan kedua class bawaan template asli versi 2018 tersebut. Artinya, saya harus berani menggunakan kembali kedua class yang digunakan oleh versi 2017 di dalam template versi 2018 tadi untuk menghasilkan Aplikasi Web seperti yang bisa Anda lihat melalui demo yang satu ini.

Silahkan bandingkan sekarang antara demo PHPMaker 2018 yang masih menggunakan AdminLTE dengan PHPMaker 2018 yang sudah menggunakan template yang sudah saya modifikasi di atas itu. Memang, harga tidak bisa menipulah. Ada harga, ada kualitas. Kalau pakai gratisan, bersiap-siap aja untuk gigit jari, karena tidak bisa menggunakan fitur-fitur seperti yang terdapat di link demo saya di atas.

Jadi, sudah tahu sekarang, kan… mengapa saya tidak terlalu semangat membahas PHPMaker 2018 ini? Tidak terlalu signifikan perubahan yang terjadi. Ingin mengubah tampilan tapi justru merusak class Menu yang sudah nyaman dipakai oleh Web Developer. Sudah pakai theme gratisan di dalam template-nya (AdminLTE), eh malah menyusahkan Web Developer lagi untuk mengkostumaisnya.

Di sini terlihat sangat kurang cerdik author PHPMaker dalam merancang class yang terkait penggunaan Menu di dalam Aplikasi Web yang dihasilkan olehnya. Seharusnya dia cukup mempertahankan class yang bersifat umum untuk semua template. Mereka selanjutnya cukup memodifikasi saja berdasarkan nama class dari elemen yang digunakan di komponen Menu untuk template apapun.

Tapi, ya sudah begitulah yang terjadi. Mau gimana lagi, ya kan? Mau protes? Gak bakalan mereka dengar dah! Yang penting sekarang, saya masih tetap dapat mengkostumais template-nya sehingga menghasilkan Aplikasi Web yang fitur-fiturnya jauh lebih powerful dari Aplikasi Web bawaan asli PHPMaker 2018 tersebut.

Oke, sekarang giliran membahas fitur apa saja yang saya sukai di PHPMaker versi 2018. Tidak adil rasanya jika tidak ada satu fitur pun yang bermanfaat di versi terakhir ini.

Pertama, fitur Search and Sort in User Level Permission Setup Page. Ya, seperti namanya, fitur ini memungkinkan Admin dari Aplikasi Web dapat mencari data User Level Permissions, serta dapat mengurutkan nama tabel berdasarkan abjad awal namanya. Fitur ini jelas sangat berguna, khususnya jika terdapat relatif banyak tabel yang terkait dengan User Level Permissions.

Kedua, ada fitur AutoSuggest with “More”. Melalui fitur ini, End-Users bisa mengklik link More… untuk menampilkan pilihan lainnya yang sengaja belum ditampilkan pada control Textbox yang memiliki kemampuan Auto Suggest seperti teks pencarian di halaman Google.

Ketiga, dia memperkenalkan extension DateTime Picker baru menggantikan JSCalendar yang sudah ketinggalan zaman. Di versi 2018 ini, dia menggunakan Bootstrap 3 Date/Time Picker. Ya wajarlah, wong sampai versi 2018 ini, PHPMaker masih menggunakan framework Bootstrap 3.3.7 (versi stabil terakhir untuk Bootstrap 3).

Keempat, dia memperkenalkan fitur Project Versioning, yang memungkinkan kita sebagai Web Developer untuk kembali ke versi yang sesuai dengan jam dan waktu kita menyimpan perubahan sebelum-sebelumnya. Sangat cocok jika kita tidak sengaja melakukan perubahan dan menyimpan project, maka kita bisa meng-undo ke versi project sebelumnya.

Sepertinya hanya empat itu saja sih yang paling saya sukai. Sekalipun fitur yang kedua itu tidak pernah saya gunakan, hahahaha… Belum ada manfaatnya sih selama ini buat saya. Entah kalau buat Anda, ya.

Fitur Icons for Menu Items tidak terlalu saya sukai, karena bisa dikatakan fitur ini terlambat, dan mereka buat hanya karena mereka menggunakan AdminLTE (dasar maunya gratisan! lagi deh).

Demikian juga fitur Auto-Render Template tidak saya sukai sama sekali, karena fitur ini dibuat terlalu spesifik untuk AdminLTE. Heran, kok masih banyak yang mau pakai theme gratisan seperti ini. Entah apapun bagusnya.

Asu dahlaaaaah…