Belajar Flask - Bagian 7
Mini Project: Daftar Tugas Sekolah
oleh: Suryo Adhy Chandra, ST
Sekarang kita coba membuat project kecil pertama: Daftar Tugas Sekolah (to-do list). Website ini bisa dipakai untuk mencatat tugas, menandai tugas yang sudah selesai, dan menghapus tugas yang tidak dibutuhkan lagi.
1. Fitur yang akan dibuat
- Menampilkan semua tugas yang sudah ditambahkan
- Menambah tugas baru lewat form
- Menandai tugas sebagai "selesai"
- Menghapus tugas dari daftar
2. Kode app.py
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
daftar_tugas = [
{"tugas": "Kerjakan PR Matematika", "selesai": False},
{"tugas": "Baca buku IPA bab 3", "selesai": True},
]
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
tugas_baru = request.form["tugas"]
daftar_tugas.append({"tugas": tugas_baru, "selesai": False})
return redirect("/")
return render_template("tugas.html", daftar_tugas=daftar_tugas)
@app.route("/selesai/<int:index>")
def tandai_selesai(index):
daftar_tugas[index]["selesai"] = True
return redirect("/")
@app.route("/hapus/<int:index>")
def hapus_tugas(index):
daftar_tugas.pop(index)
return redirect("/")
if __name__ == "__main__":
app.run(debug=True)
3. Template templates/tugas.html
<h1>Daftar Tugas Sekolah</h1>
<form method="POST">
<input type="text" name="tugas" placeholder="Tugas baru">
<button type="submit">Tambah</button>
</form>
<ul>
{% for tugas in daftar_tugas %}
<li>
{% if tugas.selesai %}
<s>{{ tugas.tugas }}</s> (selesai)
{% else %}
{{ tugas.tugas }}
<a href="/selesai/{{ loop.index0 }}">Selesai</a>
{% endif %}
<a href="/hapus/{{ loop.index0 }}">Hapus</a>
</li>
{% endfor %}
</ul>
loop.index0 adalah variabel bawaan Jinja2 yang menunjukkan nomor urut data di dalam
perulangan, dimulai dari angka 0. Nomor ini kita pakai sebagai index untuk menandai
atau menghapus tugas yang tepat.
4. Coba jalankan
Jalankan dengan python app.py, lalu buka http://127.0.0.1:5000/.
Coba tambahkan beberapa tugas, tandai salah satu selesai, lalu hapus salah satu tugas.