User Interface
User Interface
• Download Bootstrap - JS
• Menu - Navbar
• Menu – Navbar Dropdown
• URL Converter
• HTTP Method
• Flash Message
• Form dan Input Data
• WTForm
Samsu Arif
Download Bootstrap
https://getbootstrap.com/docs/5.1/getting-started/download/
https://popper.js.org/
D:\gis_python\pertemuan_4\1.bootstrap_dan_jquery\static\js\popper.min.js
Samsu Arif
Menu - Navbar
https://www.w3schools.com/bootstrap5/bootstrap_navbar.php
Samsu Arif
Menu - Navbar
D:\gis_python\pertemuan_4\1.bootstrap_dan_jquery\templates\_layout.html
Samsu Arif
Menu – Navbar Dropdown
https://www.w3schools.com/bootstrap5/bootstrap_navbar.php
Samsu Arif
Menu – Navbar Dropdown
D:\gis_python\pertemuan_4\2.menu_navbar\templates\_layout.html
Samsu Arif
URL Converter
Di dalam @app.route(), dapat ditambakan variable ke URL yang dituju dengan bentuk
penulisan <nama_variable>.
Fungsi yang ada di bawah routing kemudian menerima <nama_variable> sebagai kata kunci
argument.
Jenis argument yang diterima secara devault dikenal sebagai string, untuk tipe data spesifik
argument dapat diatur sebagai: integer, float (<int:id>, <float:lokasi>)
http://localhost:5000/zoom/11
http://localhost:5000/koordinat_tengah/-5.1543/119.437
D:\gis_python\pertemuan_4\3.URL_converter\app.py
Samsu Arif
URL Converter
D:\gis_python\pertemuan_4\3.URL_converter\app.py
http://localhost:5000/html_folium/Universitas Hasanuddin
Samsu Arif
HTTP Method
http://localhost:5000/user
Samsu Arif
Flash Message
• Flash message membantu kita memberikan beberapa pesan umpan balik dari server ke browser web.
• Pesannya dapat berupa pesan sukses, atau memberi tahu jika ada yang tidak beres.
• Untuk mengaktifkan pesan flash di aplikasi, letakkan di bawah template Jinja2 agar dapat memperoleh
dan menampilkan pesan flash di dalam _layout.html
D:\gis_python\pertemuan_4\5.flash_message\templates\_layout.html
Samsu Arif
Flash Message
• Di dalam fungsi rute, kita dapat memanggil pesan flash dengan sintaks flash(“pesan”, “tipe”)
• Tipe dapat berupa:
• success
• danger
• info
• dll (sesuai dengan color class di Bootstrap)
Samsu Arif
Flash Message
Samsu Arif
Form dan Input Data
Form Input
Nama
Nomor Telpon
Password
Password Lagi
Setuju
Submit
Submit
Samsu Arif
WTForm
• WTForms adalah perpustakaan validasi dan rendering formulir yang fleksibel untuk pengembangan web Python
• Mendukung validasi data, perlindungan CSRF, internasionalisasi (I18N), dan banyak lagi.
• Bagaimana cara memasukkan Flask WTForm ke dalam aplikasi kita?
• Untuk kasus sederhana, tempatkan definisi formulir di dalam forms.py
/templates
app.py
form.py
Samsu Arif
WTForm
• Buat class UserForm() di dalam file form.py, dengan field: nama, email, telpon, password, confirm, setuju dan
submit
• class UserForm() diwarisi (inherited) dari class Form WTForm
• Di dalam class itu kita bisa meletakkan form field seperti StringField (Input Text), PasswordField (Password
Input), BooleanField (Checkbox Input) dan SubmitField (tombol Submit)
• Penggunaan objek validators yang dapat membantu melakukan validasi data seperti panjang input data, field
yang dibutuhkan, dan lain-lain.
D:\gis_python\pertemuan_4\6.WTForm\form.py
Samsu Arif
WTForm
• Import class UserForm ke dalam app.py
app.py
form.py
• Selanjutnya buat objek form dari class UserForm, dan ambil nilai dari form dengan request.form
D:\gis_python\pertemuan_4\6.WTForm\app.py
Samsu Arif
WTForm
• Atur letak dari elemen form yang disimpan dalam file “_form_macro.html” (dapat diberi nama lain)
• Copy macro dari alamat: http://matrix.umcs.lublin.pl/DOC/python-flask-doc/html/patterns/wtforms.html
D:\gis_python\pertemuan_4\6.WTForm\templates\_form_macro.html
Samsu Arif
WTForm
• Kemudian kita dapat merender formulir menggunakan macro render_field() di dalam file “_form_macro.html”
D:\gis_python\pertemuan_4\6.WTForm\templates\user.html
• Jika kita memiliki banyak bentuk, mekanisme ini jauh lebih bersih dan
mudah dirawat jika spesifikasi bentuk (gaya, dll) berubah.
• Di bagian selanjutnya kita akan belajar bagaimana menambahkan kelas
Bootstrap di dalam bidang yang dirender.
Samsu Arif
WTForm
app.py
User.html render_field(form.nama)
_form_macro.
html
Samsu Arif