Mudahnya Membuat AJAX Shopping Cart di Aplikasi Web dengan PHPMaker 2023

Jika Anda adalah salah seorang yang masih meragukan kehandalan PHPMaker sebagai tools untuk membangun aplikasi web yang memiliki fitur Shopping Cart, maka keraguan Anda itu sepertinya sudah tidak beralasan lagi. Mengapa? Karena PHPMaker 2023 sudah terbukti dapat membantu Anda sebagai Web Developer untuk membuat aplikasi web yang dilengkapi dengan AJAX Shopping Cart. Semuanya itu dapat diimplementasikan dengan sangat mudah dan cepat.

Ini bukanlah sekedar janji saja. Saya sudah membuktikannya sendiri melalui sebuah project sederhana yang saya buat sejak dua hari yang lalu: AJAX Shopping Cart. Percaya atau tidak, project tersebut dapat saya selesaikan hanya dalam waktu dua hari saja. Tentu saja semua itu bisa terwujud karena saya menggunakan tools PHPMaker 2023 (versi terakhir saat artikel ini saya tulis). Rasanya tidak terbayang jika saya membuatnya dengan cara-cara konvensional seperti menulis kode from the scratch.

Tadinya memang saya seperti Anda kebanyakan yang masih meragukan, apakah PHPMaker 2023 dapat membuat aplikasi web e-commerce pada umumnya yang memiliki fungsi AJAX Shopping Cart untuk menambahkan item Produk ke dalam keranjang belanja. Kira-kira harus darimana ya saya memulainya? Di bagian Server Event atau Client Scripts yang mana saya harus menambahkan kodenya? Dan segudang pertanyaan lainnya yang justru membuat saya ragu-ragu untuk memulainya.

Setelah melalui beberapa eksperimen, dimulai dengan browsing ke Internet untuk melihat contoh-contoh aplikasi web yang memiliki fitur AJAX Shopping Cart, kemudian melihat contoh-contoh kode sederhana yang mengajarkan konsep dasar fitur Add to Cart, Remove item from Cart, atau bahkan Empty Cart, lalu berusaha menterjemahkannya ke dalam project PHPMaker 2023, tentu saja dengan selalu mengeksplorasi fitur-fitur PHPMaker 2023 melalui web dokumentasinya, akhirnya bisa juga diterapkan ke dalam project PHPMaker 2023.

Itu artinya, lagi-lagi kita tidak perlu menulis kode dari awal atau mengubah kode yang sudah dibangkitkan oleh PHPMaker 2023. Kita hanya cukup menulis sedikit kode PHP, Javascript/jQuery, dan sedikit kode CSS saja dari sisi project PHPMaker 2023. Sedangkan sisanya, sudah ditangani oleh PHPMaker 2023. Fitur-fitur CRUD standar lainnya sudah ditangani oleh si PHPMaker. Sama seperti yang sudah sering saya katakan di beberapa artikel saya terdahulu.

Project AJAX Shopping Cart ini merupakan project sederhana yang akan membuat Anda semakin memahami betapa cantiknya framework aplikasi web yang telah disediakan oleh PHPMaker 2023. Saya menyebutnya dengan istilah framework aplikasi web, karena memang seperti itulah yang terjadi. Sebuah framework untuk membuat aplikasi web. PHPMaker 2023 bukanlah sekedar tools PHP code generator saja, tapi sudah lebih jauh dari itu. Dia dilengkapi dengan framework untuk mengoptimalkan kode di sisi server sekaligus di sisi client, melalui pengoptimalisasian penggunaan beberapa class dan object yang tersedia di dalamnya.

Project ini juga semakin membuktikan lagi, bahwa untuk membuat aplikasi web dengan fitur yang dulunya kita bayangkan sangat rumit di bagian backend-nya pun di frontend-nya, ternyata tidaklah seperti itu kenyataannya. Semua bisa disederhanakan melalui project PHPMaker 2023. Anda akan melihat gambaran besar sebuah aplikasi web cukup dari bagian yang bercetakan tebal di dalam project PHPMaker.

Contoh, kita bisa membuat AJAX Shopping Cart yang nantinya akan berada di bagian Navbar aplikasi web, cukup dengan menulis beberapa baris kode HTML saja di server event Page_Foot project PHPMaker 2023. Jangan khawatir, ini merupakan langkah awal sederhana yang sangat bagus dan menentukan. Karena saya yakin, Anda pasti akan membayangkan, selanjutnya bagaimana?

Selanjutnya, kita bisa menambahkan tombol baru untuk fungsi Add to Cart di setiap record pada halaman List dengan menggunakan server event ListOptions_Load dan ListOptions_Rendered. Hal yang sama juga di halaman View, kita bisa menambahkan tombol yang sama melalui server event Page_Render. Ini adalah tombol yang sangat menentukan untuk menambahkan item produk ke dalam keranjang belanja.

Setelah itu, kita harus mendefinisikan terlebih dulu beberapa API buatan kita sendiri melalui server event Api_Action. Tentu saja kita harus mengenali terlebih dulu, event-event apa saja yang biasanya dibutuhkan untuk mengelola data di dalam sebuah keranjang belanja, seperti add to chart, remove an item from chart, dan empty chart. Fungsi-fungsi itulah yang diterjemahkan ke API tadi, sekaligus untuk memproses datanya di sisi server, yang inputannya akan kita peroleh dari event yang terjadi di sisi client melalui kode Javascript/jQuery di sisi Client Script dan Startup Script.

Tergantung dari scope-nya, yang dalam hal ini karena Shopping Cart ini akan terlihat terus di bagian Navbar aplikasi web, maka kita akan menambahkan sedikit kode di bagian Global Startup Script untuk menangani kemungkinan pengguna akhir menampilkan isi dari Shopping Cart dengan cara mengklik icon keranjang belanja di bagian Navbar.

Untuk itu, maka kita pun harus menangani variabel session dengan ukuran multi-dimensional. Mengapa? Karena informasi yang akan kita simpan di session tersebut pasti akan memiliki lebih dari satu record, dan di setiap record sudah pasti terdiri dari beberapa field. Bayangkan saja di sebuah keranjang belanja, kita harus menyimpan item produk, jumlah item, harga, dan nominal perkalian jumlah item dan harga untuk setiap item.

Nah, bagian yang paling menariknya adalah, bagaimana cara kita menghubungkan antara event yang terjadi di sisi client pada browser dengan event yang terjadi di sisi server. Di sinilah lagi-lagi PHPMaker 2023 sudah menyediakan fitur API (sebelumnya sudah kita definisikan melalui server event Api_Action) yang bisa kita panggil dengan mudah dari sisi client.

Yang lebih kerennya lagi, setelah API yang kita definisikan tadi berhasil dieksekusi, kita bisa mendefinisikan sendiri output balikan yang akan kita tangkap kembali di sisi client sesuai kebutuhan. Nah, dengan cara inilah maka kita bisa mengimplementasikan fitur AJAX, sehingga ketika pengguna akhir ingin melihat informasi berupa rincian detail keranjang belanjanya, maka dia cukup hanya mengklik icon keranjang belanja di Navbar.

Setelah itu, muncullah jendela kecil yang berisi semua item produk yang sudah ditambahkan ke keranjang belanja, lengkap dengan hasil perhitungan antara perkalian jumlah dan harga produknya. Di setiap item produk pada keranjang belanja tadi, dilengkapi juga dengan tombol Delete untuk menghapus per item, dan juga tombol untuk mengosongkan isi keranjang belanja sekaligus.

Pengguna Akhir harus bisa menampilkan isi keranjang belanjanya dari halaman manapun di aplikasi web tersebut. Itu artinya, kita harus bisa menangani secara global informasi di keranjang belanja tadi, tanpa harus tergantung kepada satu halaman tertentu saja. Di sinilah tantangannya, sekaligus terjawab melalui penggunaan project di PHPMaker 2023.

Pengguna Akhir juga harus bisa menambahkan item produk ke dalam keranjang belanja tidak hanya dari halaman List yang menampilkan beberapa record sekaligus, tapi juga harus bisa menambahkan item produk ke dalam keranjang belanja dari halaman View yang menampilkan satu item produk tertentu saja. Lagi-lagi di sini PHPMaker 2023 sudah menyediakan kerangka kerja untuk semua itu.

Termasuk kemungkinan untuk menambahkan suatu item Produk tertentu dengan jumlah lebih dari satu. Kita harus bisa menangani jumlah akumulasi untuk setiap item Produk dengan cara memberikan kesempatan kepada pengguna akhir untuk mengklik beberapa kali item yang sama agar sistem dapat menambahkan jumlah lebih dari satu untuk item Produk yang sama.

Sebagian besar event-event tadi harus bisa dilakukan tanpa harus memuat ulang halaman yang sedang terbuka saat itu. Di situlah sangat diperlukan fitur AJAX, sehingga halaman tidak perlu dimuat ulang setiap kali kita menghubungi server untuk memproses sekaligus memperbarui informasi terkini di dalam keranjang belanja.

Waah, semua clue-nya sudah saya uraikan di atas. Tinggal bagaimana Anda dapat menterjemahkannya ke dalam project PHPMaker 2023. Hehehe, di situlah tantangannya. Kalau saya saja bisa, pastilah Anda juga seharusnya pun bisa.

Tapi, jika ternyata Anda masih kesulitan juga untuk mengimplementasikannya, maka Anda cukup membeli project tersebut dengan harga yang cukup terjangkau. Di samping dapat menghemat waktu Anda, maka project ini bisa sebagai referensi Anda untuk project-project lainnya yang memiliki business-logic yang mirip dengan fitur AJAX Shopping Cart tadi.

Semoga dapat membantu.