Panduan Lengkap Django Template System
1. Tag Template Dasar
Tag Variable
Tag variable digunakan untuk menampilkan nilai dari variable yang dikirim dari view.
{{ variable }}
<!-- Menampilkan isi variable biasa -->
{{ user.username }}
<!-- Menampilkan atribut dari objek user -->
{{ object.attribute }}
<!-- Mengakses atribut dari sebuah objek -->
{{ dictionary.key }}
<!-- Mengakses nilai dari dictionary -->
Tag Kontrol Dasar
{# Ini adalah komentar satu baris #} {% comment %} Ini adalah komentar multi-baris Semua yang ada di sini akan diabaikan {% endcomment %}
<!-- Pernyataan If -->
{% if condition %}
<p>Ini akan muncul jika condition bernilai true</p>
{% elif other_condition %}
<p>Ini akan muncul jika other_condition bernilai true</p>
{% else %}
<p>Ini akan muncul jika semua kondisi false</p>
{% endif %}
2. Tag Perulangan (Loop)
Perulangan Dasar
{% for item in items %}
<p>{{ item.name }}</p>
{% empty %}
<p>Tidak ada item ditemukan</p>
{% endfor %}
Variable dalam Perulangan
{% for item in items %} {{ forloop.counter }}
<!-- Mulai dari 1 -->
{{ forloop.counter0 }}
<!-- Mulai dari 0 -->
{{ forloop.revcounter }}
<!-- Menghitung mundur, mulai dari 1 -->
{{ forloop.first }}
<!-- True jika iterasi pertama -->
{{ forloop.last }}
<!-- True jika iterasi terakhir -->
{% endfor %}
3. Template Inheritance (Pewarisan Template)
Template Dasar (base.html)
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Judul Default{% endblock %}</title>
</head>
<body>
<header>
{% block header %}
<h1>Website Saya</h1>
{% endblock %}
</header>
<main>
{% block content %}
<!-- Konten akan diisi oleh template turunan -->
{% endblock %}
</main>
<footer>
{% block footer %}
<p>© 2025 Website Saya</p>
{% endblock %}
</footer>
</body>
</html>
Template Turunan
{% extends 'base.html' %} {% block title %}Halaman Utama{% endblock %} {% block content %}
<h1>Selamat Datang</h1>
<!-- Konten spesifik halaman -->
{% endblock %}
4. Filter Template
Filter Teks
{{ text|lower }}
<!-- Ubah ke huruf kecil -->
{{ text|upper }}
<!-- Ubah ke huruf besar -->
{{ text|title }}
<!-- Kapital setiap awal kata -->
{{ text|truncatewords:30 }}
<!-- Batasi menjadi 30 kata -->
Filter Angka
{{ number|add:10 }}
<!-- Tambah 10 ke angka -->
{{ number|floatformat:2 }}
<!-- Format 2 angka desimal -->
Filter Tanggal
{{ date|date:"Y-m-d" }}
<!-- Format tanggal -->
{{ date|timesince }}
<!-- Waktu sejak tanggal tertentu -->
5. Include Tag
<!-- Menyertakan template lain -->
{% include "navbar.html" %} {% include "sidebar.html" with variable=value %}
6. URL Tags
<!-- URL dasar -->
<a href="{% url 'nama_view' %}">Link</a>
<!-- URL dengan parameter -->
<a href="{% url 'detail_produk' produk.id %}">Lihat Produk</a>
7. Static Files (File Statis)
{% load static %}
<!-- Gambar -->
<img src="{% static 'images/logo.png' %}" alt="Logo" />
<!-- CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
8. Forms dalam Template
<!-- Form Dasar -->
<form method="post">
{% csrf_token %} {{ form.as_p }}
<button type="submit">Kirim</button>
</form>
<!-- Render Form Custom -->
<form method="post">
{% csrf_token %} {% for field in form %}
<div class="form-group">
{{ field.label_tag }} {{ field }} {% if field.errors %}
<span class="error">{{ error }}</span>
{% endif %}
</div>
{% endfor %}
<button type="submit">Kirim</button>
</form>