<p>Pada artikel sebelumnya kita sudah belajar mengenai <a href="https://www.tutorialpedia.net/tutorial-django-bahasa-indonesia-5-url-routing-django/" target="_blank" rel="noopener">routing di django #5</a> . Dimana, pada tutorial tersebut kita sudah bagaimana cara menampilkan &#8220;Hello World&#8221; pada halaman homepage kita menggunakan <strong><a href="https://docs.djangoproject.com/en/3.1/ref/request-response/" target="_blank" rel="noopener">HttpResponse</a></strong>. Pada kali ini, kita akan mencoba menampilkan sebuah pesan &#8220;Hello World&#8221; didalam sebuah template berupa HTML, dimana halaman html tersebut akan di render melalui django views.</p>
<h2><strong>Tutorial Django Bahasa Indonesia #6: Pengenalan Templates</strong></h2>
<p>Apa itu django templates?</p>
<p>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 <strong>{{ }}.</strong></p>
<p> ;</p>
<h3><strong>Contoh penggunaan django templates</strong></h3>
<p>Untuk bisa menggunakan template django, kita harus membuat sebuah folder terlebih dahulu dengan nama <strong>&#8220;templates&#8221; </strong>didalam app direktori. <a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_729-1.png"><img class="aligncenter size-full wp-image-8110" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_729-1.png" alt="pengenalan templates" width="1440" height="765" /></a></p>
<p>Perlu diperhatikan, untuk penamaan folder <strong>&#8220;templates&#8221; </strong>harus sama persis dengan yang saya contohkan, karena apabila kita memberi nama lain seperti &#8220;template&#8221;, &#8220;temp&#8221; dsb maka django tidak bisa mendeteksi lokasi folder templates tersebut dan akan muncul error <strong>Template Does&#8217;nt Exist</strong>.</p>
<p>Setelah itum kita akan membuat file baru dengan nama <strong>&#8220;index.html&#8221; </strong>didalam folder <strong>templates. </strong>Lalu buat struktur html dasar didalam file index.html tersebut. <a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_730-1.png"><img class="aligncenter size-full wp-image-8111" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_730-1.png" alt="pengenalan templates" width="1528" height="656" /></a>Sekarang, kita akan mencoba menampilkan halaman index.html tersebut dibrowser.</p>
<p>Caranya:</p>
<p>Buka file <strong>views.py </strong>yang ada didalam <strong>app blog. </strong>Jika anda mengikuti tutorial <a href="https://www.tutorialpedia.net/tutorial-django-bahasa-indonesia-5-url-routing-django/" target="_blank" rel="noopener">sebelumnya</a>, kita sudah mencoba menampilkan hello world menggunakan HttpResponse. Untuk menampilkan halaman index.html tadi, kita perlu mengubah HttpResponse tersebut menjadi render.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">return render(request, "index.html") 
</pre>
<p>Kode lengkapnya akan seperti berikut ini:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">from django.shortcuts import render 
from django.http import HttpResponse 
 
def index(request): 
 return render(request, "index.html") 
 
</pre>
<p><strong>index.html </strong>adalah nama file yang sudah kita buat tadi didalam folder templates.</p>
<p>Sekarang simpan dan coba buka halaman browser. Maka akan muncul halaman html yang sudah kita buat tadi. <a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_731-1.png"><img class="aligncenter size-full wp-image-8112" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_731-1.png" alt="pengenalan templates" width="1459" height="481" /></a></p>
<p>Jika terjadi error seperti pada gambar dibawah ini.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_732-1.png"><img class="aligncenter size-full wp-image-8113" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_732-1.png" alt="pengenalan templates" width="1792" height="718" /></a></p>
<p>Maka, ada beberapa kemungkinan:</p>
<ol>
<li>Salah dalam penamaan file index.html pada bagian views.</li>
<li>Kesalahan dalam pemberian nama folder templates.</li>
<li>Pengaturan <strong>APP_DIRS </strong>pada <strong>settings.py </strong>menjadi False. Seharusnya <strong>True<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_733-1.png"><img class="aligncenter size-full wp-image-8114" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_733-1.png" alt="pengenalan templates" width="1125" height="593" /></a></strong></li>
</ol>
<p>Sekarang kita akan mencoba <em>passing data </em>dari django views kedalam template html.</p>
<p>Buat 2 variable dengan nama <strong>first_name</strong> dan juga <strong>last_name</strong> didalam <strong>views.py</strong> pada function <strong>index.</strong></p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">first_name = 'Fikri' 
last_name = 'Aja'</pre>
<p>lalu kita akan <em>passing </em>kedua variable tersebut kedalam sebuah context.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">context = { 
 'first_name':first_name, 
 'last_name':last_name, 
 }</pre>
<p>Pada bagian tanda petik, merupakan variable yang akan kita panggil didalam django template.</p>
<p>Saat ini, context tersebut belum terender didalam template. Untuk melakukannya anda perlu menambahkan context didalam return.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">return render(request, "index.html", context) 
</pre>
<p>Maka kode lengkapnya akan seperti berikut ini</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">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) 
 
</pre>
<p>Sekarang, kita akan beralih kedalam file <strong>index.html. </strong>Seperti yang sudah saya katakan, untuk memanggil 2 variable <strong>first_name </strong>dan <strong>last_name </strong>didalam django template kita akan menggunakan double bracket <strong>{{}}</strong></p>
<p>masukkan kode berikut didalam file <strong>index.html</strong></p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic"><;center>; 
 <;p>; 
 Hello nama saya adalah {{first_name}} {{last_name}} 
 <;/p>; 
<;/center>;</pre>
<p>Sekarang simpan dan refresh browser anda.</p>
<p>Maka kita akan melihat sebuat string yang sudah kita buat sebelumnya didalam views.<a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_734-1.png"><img class="aligncenter size-full wp-image-8115" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_734-1.png" alt="pengenalan templates" width="1229" height="539" /></a></p>
<p> ;</p>
<p>Untuk menampilkan tanggal hari ini anda bisa menggunakan &#8220;now&#8221; pada template.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">saya lahir pada {% now 'd/m/Y' %}</pre>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_735.png"><img class="aligncenter size-full wp-image-8116" src="https://www.tutorialpedia.net/wp-content/uploads/Screenshot_735.png" alt="pengenalan templates" width="823" height="288" /></a></p>
<p>Untuk variable dan tags lain anda bisa membaca langsung pada dokumentasi django melalui link <a href="https://docs.djangoproject.com/en/3.1/topics/templates/#:~:text=A%20Django%20template%20is%20a,using%20the%20Django%20template%20language.&;text=A%20template%20is%20rendered%20with,else%20is%20output%20as%20is." target="_blank" rel="noopener">berikut ini</a></p>
<p>Cukup sekian tutorial django untuk topik pengenalan templates.</p>
<p>Pada artikel berikutnya saya akan membahas tentang staticfiles dan juga integrasi bootstrap di django.</p>

Tutorial Django Bahasa Indonesia #6: Pengenalan Templates
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
Related Articles
3 Comments
Leave A Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
artikel lanjutanya mana bang
blum sempet mau lanjutin.
lanjutin tutornya bang, soalnya mudah dipahami