Outline

• 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_3\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_3\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_3\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_3\3.URL_converter\app.py

Samsu Arif
 URL Converter
D:\gis_python\pertemuan_3\3.URL_converter\app.py
http://localhost:5000/html_folium/Universitas Hasanuddin

Samsu Arif
 HTTP Method

Kita dapat juga mendefenisikan HTTP Method di dalam @app.route()

Sebagai contoh berikut diperlihatkan bagaimana /user endpoint menerima
method GET dan POST. D:\gis_python\pertemuan_3\4.HTTP_method\app.py

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_3\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)

• perlu menempatkan app.config SECRET_KEY untuk membuat pesan flash berfungsi.

• karena pesan flash menggunakan session untuk bekerja.

Samsu Arif
Flash Message

Samsu Arif
 Form dan Input Data

Form Input
Nama

Email

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_3\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_3\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_3\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_3\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

from form import UserForm

app.py

return render_template("user.html“, form=form)

_layout.html
form.py

class UserForm(Form): {% extends "_layout.html"

%}

User.html render_field(form.nama)

{% from "_form_macro.html" import render_field %}

_form_macro.
html

Samsu Arif