Modul 3 Templating Django

BAB 3
Templating Django
3.1 Templating Django
Membuat templating pada Django, kerangkanya akan menggunakan file html, sebagai
wadah yang dipanggil secara default. Adapun default formatnya: app/templates/nama html.
Pembahasan kali ini, akan membuat menu dashboard, products dan custumer, kemudian untuk
pusat templating-nya ada main dan navbar, selanjutnya dibuat file html sesuai dengan di atas
dengan aturan peletakan folder-nya sebagai berikut:
- data/templates/dashboard.html
- data/templates/products.html
- data/templates/custumer.html
- data/templates/main.html
- data/templates/navbar.html
Silakan dibuat folder templates-nya dan file html sesuai dengan format di atas, hasilnya
seperti gambar berikut:
Gambar 3.1 Format tempat file html

Pastikan tulisannya benar, karena akan memperngaruhi ketika pemanggilan file-nya,
kemudian views.py pada app data, menggunakan render, fungsi tersebut untuk merender atau
membaca file-nya. Isian dari app data/views.py diubah sebagai berikut:
app data/views.py
from django.shortcuts import render

from django.http import HttpResponse
# Create your views here.
def home(request):
return render(request, 'dashboard.html')
def products(request):
return render(request, 'products.html')
def custumer(request):
return render(request, 'custumer.html')
Kemudian isi masing-masing file html di atas dengan <h1>Beranda</h1> untuk file
dashboard.html, <h1>Produk</h1> untuk file products.html, <h1>Konsumen</h1> untuk file
custumer.html, Jalankan dan lihat hasilnya:
Gambar 3.2 Hasil memanggil format HTML
Data yang ada pada html sudah tampil, berikutnya, bagaimana cara melempar atau mem-
parsing dari views.py dikirim ke file html. Format pengirimannya alangkah baiknya
menggunakan sistem array, agar parsing data bisa lebih dari satu, parsing data akan digunakan
seterus menerus karena proses kelolah data memerlukannya. Kode views.py pada app data perlu
diubah menjadi berikut:
app data/views.py

def home(request):
context = {
'judul': 'Halaman Beranda',
}
return render(request, 'dashboard.html', context)
context = {
'judul': 'Halaman Produk',
}
return render(request, 'products.html', context)
context = {
'judul': 'Halaman Konsumen',
}
return render(request, 'custumer.html', context)
Penjalasan:
context = {
}
Secara otomatis context menjadi variable pada nilai array, kemudian judul menjadi anak
dari array pada variable context yang memiliki nilai Halaman Beranda, jadi dalam sebuah
array bisa memiliki anak array lebih dari satu. Variable context masukan pada file html format
penulisannya seperi kode di atas. Pemanggilan isian context dengan cara memanggil anak array
yaitu judul dan akan tampil nilai dari anak array judul yaitu Halaman Beranda, cara panggilnya
pada bagian html-nya kode {{ judul }}. Silakan tambahkan {{ judul }}, pada dashboard.html,
products.html dan custumer.html, kemudian jalankan lihat hasilnya.
3.2 Bootstrab Django
Tahap selanjutnya sesuai dengan judul pembahasan di atas yaitu tentang templating,
pusat templating ada pada file main.html, file tersebut sebagai pengaturan dalam mengelolah
file-file yang akan digunakan. File tersebut isi dengan data html, head dan body, kemudian
tambahkan navbar, kemudian isi dengan sistem templating Django yatu block content, lebih
detailnya seperti berikut:
File Folder data/templates/data/main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jualan Barang</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1> Navbar </h1>
<hr>
{% block content %}
{% endblock content %}
</body>
</html>
Kemudian File Folder data/templates/dashboard.html, products.html dan

custumer.html
{% extends "main.html" %}
{% block content %}
<h1>{{ judul }}</h1>
Silakan jalankan dan pidah-pidah urlnya, nilai navbar aka tetap ada di project-nya.
Hasinya:
Gambar 3.3 Hasil Sistem block content Django
Penjelasan:
{% extends "main.html" %}
Kode extends berfungi untuk menampilkan nilai pada suatu file, jadi jika file main.html
menerapkan extends artinya semua nilai yang ada pada main.html dapat dipanggil, dan kode
block content yang ada pada file main.html akan tetap ikut, dengan catatan block content ada
pada file-file lainnya.
Kode extends mengambil nilai, ada juga kode include dalam Django, yang fungsinya
untuk memindahkan keseluruhan data yang di panggil, langsung saja. File main.html, kode
<h1>Navbar</h1> <hr>, pindahkan ke navbar.html kemudian <h1>Navbar</h1> <hr> yang
ada di main.html diganti dengan {% include "navbar.html" %}, lihat hasilnya tidak ada
perubahan ya, artinya fungsi include sudah berjalan. Perhatikan kode detailnya sebagai berikut:
File Folder data/templates/data/main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jualan Barang</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
{% include "navbar.html" %}
{% block content %}
</body>
</html>
File Folder data/templates/navbar.html
<h1> Navbar </h1>

<hr>
Templating sederhana sudah selesai, selanjutnya akan dipoles dengan framework
bootstrap, sebenar terserah mau pak bootstrap atau tidak sesuai dengan keinginan. Buka
https://getbootstrap.com/docs/4.0/getting-started/introduction/. Situs tersebut terdapat halaman
Starter template, copy isiannya dan paste ke main.html, kemudian berikan modifikasi, kode
include navbar dan block content ada pada bagian body, dan title-nya ubah menjadi {{ judul
}}, lebih detailnya perhatikan perubahannya.
File Folder data/templates/main.html
<!doctype html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="an
onymous">
<title>{{ judul }}</title>

</head>
<body>
{% include "navbar.html" %}
{% block content %}


<script src="https://code.jquery.com/jquery-
3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="an
onymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popp
er.min.js" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="an
onymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min
.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="an
onymous"></script>
</body>
</html>
File navbar.html copy-kan https://getbootstrap.com/docs/4.0/components/navbar/,
dipilih navbar seperti gambar berikut:
Gambar 4 Navbar yang dipilih
Setelah navbar di atas di-copy-kan, lakukan modifikasi agar lebih menarik. Perubahan
pertama pada bagian warna navbar, kemudian pada menu juga, perhatikan perubahan-perubahan
berikut:
Awalnya:
navbar-light bg-light
Diganti:
navbar-dark bg-dark
Awalnya:
<a class="nav-link active" href="#">Home <span class="sr-

only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
Diganti:
<a class="nav-link active" href="#">Dashboard</a>

<a class="nav-link" href="#">Product</a>
<a class="nav-link" href="#">Custumer</a>
Silakan jalankan dengan cara seperti biasanya dan seperti berikut hasilnya:
Gambar 3.5 Hasil modifikasi navbar
Perhatikan bagian title di atas sudah ada tulisan Halaman Beranda, sesuai menu yang
dipilih. Warnanya juga berupa, warnanya menjadi dark yang belumnya light. Isian file
navbar.html secara keseluruhan sebagai berikut:
File Folder data/templates/navbar.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="#">DJANGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#">Dashboard</a>

<a class="nav-link" href="#">Product</a>
<a class="nav-link" href="#">Custumer</a>
</div>
</div>
</nav>
Kemudian, pada bagian dashboard, products dan custumer, akan diisi seperti gambar
berikut:
Gambar 3.6 Desain Dashboard

Gambar di atas terdapat dua pembagian yaitu customer dan last 5 orders, karena desain
project menggunakan bootstrap, maka pemanfaatkan fungsi dari grid, total grid berjumlah 12.
Pembagian pertama 5 gird untuk customer dan 7 grid unutk bagian berikutnya, kemudian bagian
bawah menggunakan button yang di block setelah itu menggunakan table, maka kodenya seperti
berikut:
<br>
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<h5>CUSTOMERS:</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-
block" href="">Create Customer</a>
<table class="table table-sm">
<tr>
<th></th>
<th>Customer</th>
<th>Orders</th>
</tr>
</table>
</div>
</div>
<h5>LAST 5 ORDERS</h5>
<hr>
<a class="btn btn-primary btn-sm btn-
block" href="">Create Order</a>
<tr>
<th>Product</th>
<th>Date Orderd</th>
<th>Status</th>
<th>Update</th>
<th>Remove</th>
</tr>
</table>
</div>
</div>
</div>
</div>
Letakkan kode tersebut diantara awalan dan akhiran block pada file dashboard.html,
kemudian lihat hasilnya. Pada bagian products, akan diisi sesuai gambar berikut:
Gambar 3.7 Desain Products
Gambar di atas menggunakan fungsi dari table pada framework bootstrap. Kodenya
sebagai berikut:
</br>
<div class="row">
<div class="col-md">
<h5>Products</h5>
</div>
<table class="table">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
</table>
</div>
</div>
</div>
</div>
Sama dengan di atas, letak kode di atas diantara awalan dan akhiran block pada file
products.html, kemudian lihat hasilnya. Di bagian custumer akan didesain seperti gambar
berikut:
Gambar 3.8 Desain Custumer
Gambar di atas, terdiri dari dua row, row pertama terdapat 3 bagian, dimana
menggunakan masing-masing 4 grid. Row kedua menggunakan table, dan dari ketiga desain
tersebut baik dashboard, products dan custumer, di bungkus dengan class container-fluid.
Adapun kode detailnya sebagai berikut:
<br>
<div class="row">
<h5>Customer:</h5>
<hr>
<a class="btn btn-outline-info btn-sm btn-
block" href="">Update Customer</a>
<a class="btn btn-outline-danger btn-sm btn-
block" href="">Delete Customer</a>
</div>
</div>
<h5>Contact Information</h5>
<hr>
<p>Email: </p>
<p>Phone: </p>
</div>
</div>
<h5>Total Orders</h5>
<hr>
<h1 style="text-align: center;padding: 10px"></h1>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<form method="get">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>
<br>
<div class="row">
<tr>
<th>Product</th>
<th>Category</th>
<th>Date Orderd</th>
<th>Status</th>
<th>Update</th>
<th>Remove</th>
</tr>
</table>
</div>
</div>
</div>
</div>
Seperti biasanya kode di atas diletakkan diantara awalan dan akhiran block pada file
custumer.html, kemudian lihat hasilnya. File dashboard akan ditambah status dari total orders,
oders yang terkirim (Delivered) dan orders yang tertunda (Pending), supaya lebih rapi dan jelas,
akan dibuat status.html di data/templates/status.html, dan akan di masukan di file
dashboad.html dengan fungsi include, tempatnya pada dibawah {% block content %},
kodenya include-nya seperti di bawah:
Sebagai file dashboad.html
{% block content %}
{% include "status.html" %}
…………
Posisinya tepat dibawah kode block awalan, dan kode status.html seperti berikut:
File folder data/templates/status.html
</br>
<div class="row">
<div class="col">
<div class="card text-center text-white mb-3" id="total-orders">
<div class="card-header">
<h5 class="card-title">Total Orders</h5>
</div>
<div class="card-body">
<h3 class="card-title"></h3>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card text-center text-white mb-3" id="orders-
delivered">
<h5 class="card-title">Orders Delivered</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card text-center text-white mb-3" id="orders-
pending">
<h5 class="card-title">Orders Pending</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jalankan dan lihat hasilnya:
Gambar 8 Desain Custumer
Gambar di atas kurang jelas, agar jelas akan ditambah kode css pada di main.html,
letakkan kode berikut di bawah <title>{{ judul }}</title>. Kode css-nya seperti di bawah
berikut:
<style>
#logo{
}
body{
background-color: #ebeff5;
}
#total-orders{
background-color: #4cb4c7;
}
#orders-delivered{
background-color: #7abecc;
}
#orders-pending{
background-color: #7CD1C0;
}
</style>
Setelah ditambah css hasilnya seperi gambar berikut:
Gambar 3.9 Desain Dashboard setelah ditambah css
Sekali lagi kode di atas diletakan di dashboard.html tepat di bawahnya

<title>{{ judul }}</title>.
Penjelasan Css:
#logo{
}
body{
background-color: #ebeff5;
}
Berasal dari id=”logo”, persiapakan jika nanti ada logo, nantinya bisa diatur pada kode di
atas, dari segi ukuran dan posisi dari gambar logo tersebut. Kode di bawah, body atau
keseluruhan tampilan diberikan warna latar belakang dengan kode seperti di atas, kode warna
bisa diubah.
#total-orders{
background-color: #4cb4c7;
}
Berasal dari id=” total-orders” dari status.html, dan isinya adalah warna latar belakang
dengan kode tersebut. Warna bisa diubah sesuai keinginan, dan perubahannya bisa menggunakan
warna dalam bahasa Inggris atau RGB (simbol warna).
#orders-delivered{
background-color: #7abecc;
}
#orders-pending{
background-color: #7CD1C0;
}
Kode di atas penjelasannya sama dengan yang di atas, cuman namanya berbeda. Mungkin
banyak yang sudah paham bahwasannya id dipanggil dengan # (pagar) dan class dipanggil
dengan . (titik).
Berikutnya akan ditambahkan link, jika klik products maka akan tampil products.html
dan seterusnya. Kode link di Django seperi {% url 'nama name pada urls' %}, jadi yang
dipanggil adalah name pada urls.py di bagian path-nya, di navbar.html bagian href tambahkan
seperti berikut:
<a class="nav-link active" href="{% url 'home' %}">Dashboard</a>

<a class="nav-link" href="{% url 'products' %}">Product</a>
<a class="nav-link" href="{% url 'custumer' %}">Custumer</a>
Penjelasan:
Kata home, products, dan custumer diambil dari name pada file urls.py di app data.
Silakan lihat hasilnya dan klik menu-nya akan berganti sesuai yang diinginkan, seperti gambar
berikut:
Gambar 3.10 Hasil dari link yang diklik

Hasil perubahan link di atas sepertinya masih ada yang kurang, gambar di atas mengklik
menu custumer, akan tetapi yang aktif masih menu dashboard, maunya jika diklik adalah
custumer yang aktif atau yang menyala putih adalah menu custumer dan diklik menu lainnya
juga berlaku. Mengatasi permasalahan di atas, dipahami dulu alur aktifnya karena ada kode
active pada link di navbar.html, kemudian dibuat percabangan dimana nilainya akan dibuat
pada parsing data di views.py, kemudian di navbar.html tambahkan logika percabangan,
views.py ditambah seperti kode dibawah:
file di folder data/views.py

def home(request):
context = {
'menu': 'home',
}
return render(request, 'data/dashboard.html', context)
context = {
'judul': 'Halaman Produk',
'menu': 'products',
}
return render(request, 'data/products.html', context)
context = {
'judul': 'Halaman Konsumen',
'menu': 'custumer',
}
return render(request, 'data/custumer.html', context)
Tambahannya yang sudah ditandai kode seperti di atas, kemudian nilainya tersebut
dikirim ke navbar.html dan dibuatkan percabagan jika menu sama dengan menu yang dituju
maka akan nilainya active, lebih detailnya seperti kode di bawah berikut:
Tambahkan pada file di folder data/templates/navbar.html

<a class="nav-
link {% if menu == 'home' %} active {% endif %}" href="{% url 'home' %}">Dashboar
d</a>
<a class="nav-
link {% if menu == 'products' %} active {% endif %}" href="{% url 'products' %}">
Product</a>
<a class="nav-
link {% if menu == 'custumer' %} active {% endif %}" href="{% url 'custumer' %}">
Custumer</a>
Hasilnya:
Gambar 3.11 Hasil Percabangan Link active
Aktif Menu
Project sudah jalan, ada hal yang perlu diperhatikan dalam penuliskan percabangan, tapi
berlaku untuk semua penulisan dalam bahasa pemprograman python atau Django, yaitu spasi
dalam penulisan kodenya. Silakan perhatikan penulisan yang salah dan benar seperti berikut:
Penulisan Benar:
{% if menu == 'home' %} active {% endif %}
Penulisan Salah:
{% if menu =='home' %} active {% endif %}
Jalankan dengan penulisan yang salah, maka hasilnya error seperti gambar berikut:
Gambar 3.12 Hasil error Percabangan kurang spasi
Penulisannya diperhatikan dalam segi spasinya, agar tidak error. Pembuatan templating
bebas tidak harus mengikuti templating di atas, sesuai kesukaan dan keinginan, akan tetapi
proses dasar templating yang harus dikuasai, sehingga dapat menggunakan bermacam-macam
template atau desain tampilan sesuai kemauan. Salah satu cara yang lain agar antara konten dan
kebutuhan yang dipakai secara terus menerus seperti Navbar, Main dan lainnya, maka pada
settings.py pada templates tambahka seperti kode berikut:
Awalnya:
'DIRS': [],
Ganti menjadi:
'DIRS': [os.path.join(BASE_DIR, 'templates')],
Dan tambahkan
from pathlib import Path

import os
Kemudian pindah navbar.html dan main.html ke folder templates dimana folder tersebut
sejajar dengan app dan project. Maka akan jalan seperti sebelumnya, cuman pengaturan
foldernya lebih rapi.

Modul 3 Templating Django

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 3 Templating Django

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 3

3.1 Templating Django

Gambar 3.1 Format tempat file html

from django.shortcuts import render

Gambar 3.2 Hasil memanggil format HTML

from django.shortcuts import render

File Folder data/templates/data/main.html

Kemudian File Folder data/templates/dashboard.html, products.html dan

<h1>{{ judul }}</h1>

<h1> Navbar </h1>

File Folder data/templates/main.html

<title>{{ judul }}</title>

Gambar 4 Navbar yang dipilih

<a class="nav-link active" href="#">Home <span class="sr-

<a class="nav-link active" href="#">Dashboard</a>

File Folder data/templates/navbar.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="nav-link active" href="#">Dashboard</a>

Gambar 3.6 Desain Dashboard

Gambar 3.7 Desain Products

Sebagai file dashboad.html

File folder data/templates/status.html

Gambar 8 Desain Custumer

Sekali lagi kode di atas diletakan di dashboard.html tepat di bawahnya

<a class="nav-link active" href="{% url 'home' %}">Dashboard</a>

Gambar 3.10 Hasil dari link yang diklik

from django.shortcuts import render

Tambahkan pada file di folder data/templates/navbar.html

Gambar 3.11 Hasil Percabangan Link active

{% if menu == 'home' %} active {% endif %}

{% if menu =='home' %} active {% endif %}

'DIRS': [os.path.join(BASE_DIR, 'templates')],

from pathlib import Path

Anda mungkin juga menyukai