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>&copy; 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>

Views and URLs Models