Skip to content
Home ยป Sesi 5: Membuat Tampilan Dinamis dengan Templating di Flask

Sesi 5: Membuat Tampilan Dinamis dengan Templating di Flask

  • by

Selamat datang di Sesi 5 kelas “Python for Beginners“! Pada sesi ini, kita akan mempelajari tentang templating di Flask. Templating memungkinkan kita untuk membuat tampilan web yang dinamis dengan menggunakan data yang bervariasi. Kami akan menjelaskan langkah-langkah yang dibutuhkan untuk membuat tampilan yang lebih fleksibel dan menarik dengan Flask.

Pengenalan Templating di Flask

Templating adalah teknik yang digunakan untuk memisahkan logika aplikasi dan tampilan. Dengan menggunakan templating, kita dapat membuat tampilan web yang dapat menampilkan data secara dinamis dan memisahkan struktur tampilan dari kode aplikasi. Flask menyediakan sistem templating yang fleksibel dan mudah digunakan.

Menggunakan Jinja2 Templating Engine

Flask menggunakan Jinja2 sebagai mesin templating default. Jinja2 adalah bahasa template yang kuat dan mudah dipahami. Jinja2 memungkinkan kita untuk menggabungkan kode Python dengan tampilan HTML secara efisien.

Langkah-langkah untuk Menggunakan Templating di Flask:

  1. Impor Modul Flask dan Jinja2: Impor modul Flask dan Jinja2 agar dapat menggunakannya dalam aplikasi web Flask.
from flask import Flask, render_template
  1. Buat Objek Aplikasi: Buat objek aplikasi Flask.
app = Flask(__name__)
  1. Definisikan Rute dan Fungsi Tampilan: Tentukan rute dan fungsi tampilan yang akan menampilkan tampilan yang menggunakan templating.
@app.route('/')
def home():
    data = {
        'nama': 'John Doe',
        'umur': 25,
        'pekerjaan': 'Web Developer'
    }
    return render_template('index.html', data=data)
  1. Buat Template HTML: Buat template HTML yang akan menggunakan templating. Gunakan sintaks Jinja2 untuk memasukkan variabel dan logika Python di dalam template.
<!DOCTYPE html>
<html>
<head>
    <title>Halaman Utama</title>
</head>
<body>
    <h1>Selamat Datang, {{ data.nama }}</h1>
    <p>Umur: {{ data.umur }}</p>
    <p>Pekerjaan: {{ data.pekerjaan }}</p>
</body>
</html>

Dalam contoh di atas, kita menggunakan variabel data yang berisi informasi seperti nama, umur, dan pekerjaan. Kita dapat mengakses nilai-nilai variabel tersebut menggunakan sintaks {{ data.nama }}, {{ data.umur }}, dan {{ data.pekerjaan }}.

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil menggunakan templating di Flask. Aplikasi web Anda sekarang dapat menampilkan tampilan yang dinamis dengan menggunakan data yang bervariasi.

Latihan Praktis

Untuk melatih pemahaman Anda tentang materi yang telah dipelajari, lakukanlah latihan praktis berikut:

  1. Tambahkan lebih banyak data ke dalam variabel data dan tampilkan informasi tersebut di halaman web.
  2. Buatlah tampilan yang menggunakan logika if-else di dalam template untuk menampilkan konten yang berbeda berdasarkan kondisi tertentu.
  3. Buat halaman web tambahan dengan template yang berbeda dan tambahkan rute serta fungsi tampilan yang sesuai.

Melalui latihan praktis ini, Anda akan mendapatkan pengalaman dalam menggunakan templating di Flask dan meningkatkan pemahaman Anda tentang tampilan web dinamis.

Materi berikutnya: Sesi 6: Interaksi dengan Pengguna: Formulir dan Validasi

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!