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.
Mengenal Charge di iDempiere
Fixed Asset di iDempiere
Membuka Kunci Sukses Implementasi ERP
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.