WebPage & WebForm: Portal Antar dunia Frappe

Rio Pramana

Pendahuluan

Setelah membangun dasar yang kuat melalui DocTypes di aplikasi Ride Management, saatnya untuk melangkah lebih jauh dalam meningkatkan interaksi pengguna. Episode ini akan membahas dua komponen kunci Frappe yang akan membawa aplikasi kita ke tingkat selanjutnya: Web Page dan Web Form.

Kedua komponen ini memungkinkan kita untuk menampilkan dan mengumpulkan informasi dari pengguna luar tanpa mengekspos data/sistem internal kita. Pengguna luar dapat mengakses Web Page dan Web Form tanpa harus melakukan proses login. Kita akan mempelajari cara menciptakan halaman web yang menarik, formulir web yang interaktif, dan tampilan web yang dinamis, semuanya dirancang untuk menyajikan informasi dan mengumpulkan data dari pengguna dengan cara yang paling efektif.

Web Page

Web Page adalah sebuah halaman portal yang dapat menampilkan informasi statis atau dinamis. Dengan fitur Web Page, kita dapat dengan mudah membuat halaman portal tanpa memerlukan coding sedikitpun. Kita bisa mendesain halaman yang akan menunjukkan nilai dan layanan aplikasi kita, seperti halaman beranda, tentang kami, atau kontak. Web Page merupakan salah satu DocType yang telah disediakan oleh Frappe, maka untuk membuat sebuah web page, kita cukup membuat record baru.

Route pada web page ini dapat kita tentukan sendiri, atau akan diisi secara otomatis oleh Frappe sesuai dengan Title yang kita tentukan.

Untuk menambahkan konten, kita dapat memilih Content Type yang memiliki pilihan seperti HTML dan Markdown. Untuk membuat web page no-code, kita dapat memilih Page Builder dan menambahkan komponen-komponen web page pada Page Building Blocks.

Untuk mengakses web page ini, kita cukup menggunakan route dari web page tersebut dibelakang URL site kita.

Jika kita ingin menggunakan data dinamis/real-time, kita dapat menggunakan menu Scripting yang memungkinkan kita untuk memasukkan kode Python sebagai context dan kode JavaScript.

Context ini kemudian dapat kita gunakan pada HTML web page untuk menampilkan data-data dari DocType yang telah kita buat.

Yang kita gunakan untuk menampilkan data dari context tersebut adalah Jinja2 yang dapat kita aktifkan dengan menggunakan content type HTML dan Dynamic Template.

Hasil:

Web Form

Web Form memungkinkan kita untuk mengumpulkan data dari pengguna dengan cara yang terstruktur. Di Frappe, formulir ini dapat dengan mudah dibuat dan dimodifikasi sesuai dengan kebutuhan aplikasi.

Sama seperti Web Page, Web Form juga merupakan sebuah DocType pada Frappe sehingga kita cukup membuat record baru untuk membuat Web Form. Kita perlu memilih DocType yang ingin kita buatkan Web Form-nya, kemudian kita tinggal menekan tombol Get Fields untuk memunculkan kolom-kolom tersebut pada Web Form. Pada Web Form Fields, kita dapat mengendalikan fields apa saja yang akan diminta pada Web Form.


Terdapat banyak customization yang dapat kita pilih pada tab Settings dan Customization sehingga kita dapat membuat Web Form yang dinamis dan lengkap tanpa harus menyentuh keyboard Anda sekalipun. Anda dapat mengakses Web Form ini dengan menggunakan URL [site-url]/[route]/new.


Setelah Web Form di-submit, record baru pada DocType yang Anda pilih akan dibuat secara otomatis oleh Frappe menggunakan data pada Web Form tersebut.

Kesimpulan

Web Page dan Web Form membentuk pasangan yang hebat untuk menghadirkan backend yang solid ke tampilan depan yang interaktif dan informatif. Kedua komponen ini memungkinkan kita untuk tidak hanya menampilkan data tetapi juga untuk mengumpulkan dan memanfaatkan data pengguna dari luar sistem kita dengan cara yang efisien dan efektif.

Share this article

Photo of author

About the author

Rio Pramana