Tutorial Django Bahasa Indonesia #6: Pengenalan Templates

Pada artikel sebelumnya kita sudah belajar mengenai routing di django #5 . Dimana, pada tutorial tersebut kita sudah bagaimana cara menampilkan “Hello World” pada halaman homepage kita menggunakan HttpResponse. Pada kali ini, kita akan mencoba menampilkan sebuah pesan “Hello World” didalam sebuah template berupa HTML, dimana halaman html tersebut akan di render melalui django views.

Tutorial Django Bahasa Indonesia #6: Pengenalan Templates

Apa itu django templates?

django templates adalah dokumen teks atau string Python yang ditandai menggunakan django template language. Django template akan dirender bersamaan dengan context. Dimana, semua variable yang berada di dalam context akan di tampilkan dihalaman HTML menggunakan tag double brackets {{  }}.

Contoh penggunaan django templates

Untuk bisa menggunakan template django, kita harus membuat sebuah folder terlebih dahulu dengan nama “templates” didalam app direktori.

Perlu diperhatikan, untuk penamaan folder “templates” harus sama persis dengan yang saya contohkan, karena apabila kita memberi nama lain seperti “template”, “temp” dsb maka django tidak bisa mendeteksi lokasi folder templates tersebut dan akan muncul error Template Does’nt Exist.

Setelah itum kita akan membuat file baru dengan nama “index.html” didalam folder templates. Lalu buat struktur html dasar didalam file index.html tersebut. Sekarang, kita akan mencoba menampilkan halaman index.html tersebut dibrowser.

Caranya:

Buka file views.py yang ada didalam app blog. Jika anda mengikuti tutorial sebelumnya, kita sudah mencoba menampilkan hello world menggunakan HttpResponse. Untuk menampilkan halaman index.html tadi, kita perlu mengubah HttpResponse tersebut menjadi render.

return render(request, "index.html")

Kode lengkapnya akan seperti berikut ini:

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return render(request, "index.html")

index.html adalah nama file yang sudah kita buat tadi didalam folder templates.

Sekarang simpan dan coba buka halaman browser. Maka akan muncul halaman html yang sudah kita buat tadi.

Jika terjadi error seperti pada gambar dibawah ini.

Maka, ada beberapa kemungkinan:

1. Salah dalam penamaan file index.html pada bagian views.
2. Kesalahan dalam pemberian nama folder templates.
3. Pengaturan APP_DIRS pada settings.py menjadi False. Seharusnya True

Sekarang kita akan mencoba passing data dari django views kedalam template html.

Buat 2 variable dengan nama first_name dan juga last_name didalam views.py pada function index.

first_name = 'Fikri'
last_name = 'Aja'

lalu kita akan passing kedua variable tersebut kedalam sebuah context.

context = {
        'first_name':first_name,
        'last_name':last_name,
    }

Pada bagian tanda petik, merupakan variable yang akan kita panggil didalam django template.

Saat ini, context tersebut belum terender didalam template. Untuk melakukannya anda perlu menambahkan context didalam return.

return render(request, "index.html", context)

Maka kode lengkapnya akan seperti berikut ini

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    first_name = 'Fikri'
    last_name = 'Aja'

    context = {
        'first_name':first_name,
        'last_name':last_name,
    }
    return render(request, "index.html", context)

Sekarang, kita akan beralih kedalam file index.html. Seperti yang sudah saya katakan, untuk memanggil 2 variable first_name dan last_name didalam django template kita akan menggunakan double bracket {{}}

masukkan kode berikut didalam file index.html

<center>
    <p>
        Hello nama saya adalah {{first_name}} {{last_name}}
    </p>
</center>

Sekarang simpan dan refresh browser anda.

Maka kita akan melihat sebuat string yang sudah kita buat sebelumnya didalam views.

Untuk menampilkan tanggal hari ini anda bisa menggunakan “now” pada template.

saya lahir pada {% now 'd/m/Y' %}

Untuk variable dan tags lain anda bisa membaca langsung pada dokumentasi django melalui link berikut ini

Cukup sekian tutorial django untuk topik pengenalan templates.

Pada artikel berikutnya saya akan membahas tentang staticfiles dan juga integrasi bootstrap di django.