Django Template – Menggunakan Tags

by

Django Tags berguna untuk menambahkan logic kedalam template. Banyak tags yang disediakan oleh Django, Kita akan bahas beberapa tags sebagai contoh saja.

Jika pada variable digunakan simbol {{ variable_goes_here }}, pada tag digunakan simbol {% tags_goes_here %}

Untuk jelasnya, mari kita langsung praktik. Buka file my_app/templates/my_app/variable.html.

For Loop Tag

Aturan penulisan for loop adalah:

{% for var1 in var2 %}
  ...
  ...
{% endfor %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Menggunakan For Loop tags untuk my_list</h1>
    <ul>
        {% for item in my_list %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Code diatas akan melakukan for loop pada variable my_list, kemudian menampilkan isi list dalam format html un-ordered list .

Jika dibuka di browser, akan ditampilkan kurang lebih seperti dibawah.

If Else Tag

Aturan penuliasn if else tag

{% if kondisi %}

   ...
{% elif athlete_in_locker_room_list %}
    ...
{% else %}
    ...
{% endif %}

Untuk kebutuhan tutorial ini, buka file my_app/views.py, lalu tambahkan variable is_logged_in,

Kemudian buka file my_app/templates/my_app/variable.html, kita ubah seperti berikut:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Menggunakan For Loop tags untuk my_list</h1>
    <ul>
        {% for item in my_list %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
    <h1>Menggunakan if else</h1>
    {% if is_logged_in %}
        <p>Selamat datang, {{ first_name }}</p>
    {% else %}
        <p>Anda belum login</p>
    {% endif %}
</body>
</html>

Sesuai ekspektasi, pada browser akan ditampilkan paragraph selamat datang.

URL name tag

Seperti yang sudah dibahas pada modul sebelumnya, kita bisa memberikan url name pada fungsi path(). url name tersebut dapat kita pakai dengan mudah dalam template dengan menggunakan url name tag.

Format penulisan url name tag adalah

{% url 'path_name' %}

Untuk keperluan demo, buka file my_app/urls.py, lalu tambahkan name pada path untuk menampilkan example_view dan variable_view.

from django.urls import URLPattern, path
from . import views

urlpatterns = [
    path('', views.example_view, name="example"), #tambahkan parameter name.
    path('variable/', views.variable_view, name="variable"), #tambahkan parameter name.
    path('<int:numpg>/', views.numpg_view),
    path('<str:cat>/', views.cat_view, name="bycat"),
    path('<int:num1>/<int:num2>', views.add_view),
]

Kemudian kita buka file my_app/templates/my_app/example.html, lalu tambahkan url name tag untuk mengakses variable.html.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Using Django Template</h1>
    <!-- menggunakan url name tag -->
    <a href="{% url 'variable'%}">variable.html</a>
</body>
</html>

Buka file my_app/templates/my_app/variable.html, tambahkan url tag untuk mengakses example.html.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- menggunakan url name tag -->
    <a href="{% url 'example'%}">Go to example.html</a>
    
    <h1>Menggunakan For Loop tags untuk my_list</h1>
    <ul>
        {% for item in my_list %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
    <h1>Menggunakan if else</h1>
    {% if is_logged_in %}
        <p>Selamat datang, {{ first_name }}</p>
    {% else %}
        <p>Anda belum login</p>
    {% endif %}
</body>
</html>

Jika Anda jalankan, pada browser akan tampil link seperti berikut. Jika di click akan pindah ke halaman yang dimaksud.

Penggunaan tag pada modul ini hanya dibahas bagian dasarnya, jika Anda ingin melihat fitur lebih dalam kunjungi dokumentasinya di https://docs.djangoproject.com/en/4.0/ref/templates/builtins/

Sharing is caring:

Leave a Comment