More

    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. pengenalan templates

    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. pengenalan templatesSekarang, 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. pengenalan templates

    Jika terjadi error seperti pada gambar dibawah ini.pengenalan templates

    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 Truepengenalan templates

    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.pengenalan templates

     

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

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

    pengenalan templates

    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.

    Recent Articles

    pengenalan templates

    Tutorial Django Bahasa Indonesia #6: Pengenalan Templates

    0
    Pada artikel sebelumnya kita sudah belajar mengenai routing di django #5 . Dimana, pada tutorial tersebut kita sudah bagaimana cara menampilkan "Hello World" pada...

    Tutorial Django Bahasa Indonesia #5: URL Routing Django

    0
    Pada tutorial kali ini, kita akan membahas tentang URL routing yang ada di django. URL Routing ini berfungsi untuk mengalihkan halaman, dari satu halaman...
    membuat app django

    Tutorial Django Bahasa Indonesia #4: Membuat App Django

    0
    Pada artikel sebelumnya kita telah mengenal apa itu django dan bagaimana cara membuat project pertama dengan django. Pada bagian ke #4 ini saya akan...

    Tutorial Django Bahasa Indonesia #3: Membuat Project Django

    0
    Pada tutorial django bagian #3 ini, kita akan belajar bagaimana cara membuat project baru dengan django. Tak hanya itu, kita juga akan belajar bagaimana...
    tutorial django bahasa indonesia

    Tutorial Django Bahasa Indonesia #2: Installing Requirements

    2
    Masih dalam seri Tutorial Django Bahasa Indonesia. Kali ini saya akan melajutkan artikel sebelumnya yaitu Tutorial DJango Bahasa Indonesia #1: Pengenalan dan Sejarah Perkembangannya. Seperti web...

    Related Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!