Template Engine

Pemrograman Web
Pre-requisite
• Flask Installation
• Flask URL Routing
• Web Programming Basic
• HTML
• CSS
• JavaScript
• Templating Concept
Langkah Praktikum – Aktifkan Service Flask

Sebelum memulai praktikum,

pastikan Service Flask telah aktif
dan siap digunakan !!!
 Langkah Praktikum-01 – Template Rendering
• Siapkan file index.html pada folder [directory] templates.
2

1
3

*jika belum ada maka, create directory dengan nama templates

Langkah Praktikum-01 – Template Rendering
• Ketikan source code berikut, dan amati struktur code nya:
index.html
Langkah Praktikum-01 – Template Rendering
• Pada file controller [app.py], ketikan source code berikut:

- Laporan01 -
Running Flask
[127.0.0.1:5000/], dan
Amati Hasilnya
Langkah Praktikum-02 – Template Variables
• Modifikasi file index.html pada folder [templates] menggunakan source code
berikut.
index.html

- Laporan 02 -
Running Flask Tanpa merubah
File controller [app.py],
kemudian Amati bagaimana
output yang dihasilkan
Langkah Praktikum-02 – Template Variables
• Modifikasi file controller [app.py] dengan source code berikut:

- Laporan 3 -
Running Flask, dan
Amati Hasilnya
Langkah Praktikum-03 – Template Logic
• Modifikasi file controller [app.py] dengan source code berikut:
- Laporan 4 -
1. Running Flask tanpa parameter,
dan Amati Hasilnya.
[127.0.0.1:5000/]
2. Running Flask dengan parameter,
dan Amati Hasilnya.
[127.0.0.1:5000/sugeng]
3. Apakah ada perbedaan output
dari keduanya? jika ada berikan
penjelasan mengenai bagian yang
membedakan.
Langkah Praktikum-03 – Template Logic
• Modifikasi file index.html pada folder [templates] menggunakan source code
berikut :
- Laporan 5 -
index.html 1. Running Flask tanpa parameter, dan Amati
Hasilnya. [127.0.0.1:5000/]
2. Running Flask dengan parameter, dan Amati
Hasilnya. [127.0.0.1:5000/sugeng]
3. Apakah ada perbedaan output dari
keduanya? jika ada berikan penjelasan
mengenai bagian yang membedakan.
4. Apakah ada perbedaan output jika
dibangdingkan dengan output pada slide
sebelumnya (laporan 4)? jika ada berikan
penjelasan mengenai bagian yang
membedakan.
Langkah Praktikum-03 – Template Logic
• Siapkan file comment.html pada folder [templates].
• Ketikkan source code berikut pada file comment.html.

comment.html
Langkah Praktikum-03 – Template Logic
• Tambahkan source code berikut pada file controller [app.py].

- Laporan 6 -
Running Flask arahkan ke URL: /comments, dan Amati Hasilnya.
[127.0.0.1:5000/comments/]
Langkah Praktikum-04 – Template Inheritance
• Siapkan file base.html pada folder [templates].
• Ketikkan source code berikut pada file base.html.
base.html
Langkah Praktikum-04 – Template Inheritance
• Modifikasi file index.html dan comment.html pada folder [templates]
menggunakan source code berikut :
comment.html

index.html
Langkah Praktikum-04 – Template Inheritance
- Laporan 7 -
1. Running Flask tanpa parameter, dan Amati Hasilnya. [127.0.0.1:5000/]
2. Running Flask arahkan ke URL: /comments, dan Amati Hasilnya.
[127.0.0.1:5000/comments/].
3. Apakah ada perbedaan dengan output sebelumnya? Berikan
alasannya.
Pengerjaan Laporan
• Laporan akan berisi
• Screenshot output per laporan, beserta penjelasannya sesuai dengan
ketentuan soal [laporan 1 – laporan 7].
• Dikumpulkan dalam format pdf.
• Format file: nomhs_templateEngine_kelas.pdf
• Misal: 1234_templateEngine_tk01.pdf
• maksimal pengumpulan di waskita:
• 7 hari dari waktu praktikum, 23:59 WIB.
• Yang dikumpulkan adalah:
• file PDF laporan sesuai format dan ketentuan
• .zip dari mywebapps directory [file flask]