Scribd
Unggah
57 tayangan

Modul 3 Templating Django

Dokumen tersebut menjelaskan tentang templating pada Django untuk membuat template halaman dashboard, produk, dan pelanggan dengan menggunakan sistem block content dan include. Template utama berisi navbar yang dipanggil dari file terpisah, sedangkan konten berada di dalam block content.

Diunggah oleh

Mukhlas Griez
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
57 tayangan

Modul 3 Templating Django

Dokumen tersebut menjelaskan tentang templating pada Django untuk membuat template halaman dashboard, produk, dan pelanggan dengan menggunakan sistem block content dan include. Template utama berisi navbar yang dipanggil dari file terpisah, sedangkan konten berada di dalam block content.

Diunggah oleh

Mukhlas Griez
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 18

Templating Django

Membuat templating pada Django, kerangkanya akan menggunakan html, sebagai


wadahnya, yang dipanggil secara default, meski menggunakan aturan tersebut tidaka apa-apa
namun ada setting yang perlu diubah. Adapun default-nya formatnya: app/templates/nama app/
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/data/dashboard.html
- data/templates/data/products.html
- data/templates/data/custumer.html
- data/templates/data/main.html
- data/templates/data/navbar.html

Silakan dibuat folder templates-nya, folder data-nya dan file html sesuai dengan format
di atas, hasilnya seperti gambar berikut:

Gambar 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:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 1


app data/views.py

from django.shortcuts import render


from django.http import HttpResponse
# Create your views here.

def home(request):
return render(request, 'data/dashboard.html')

def products(request):
return render(request, 'data/products.html')

def custumer(request):
return render(request, 'data/custumer.html')

Kemudian isi 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 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:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 2


app data/views.py

from django.shortcuts import render


from django.http import HttpResponse
# Create your views here.

def home(request):
context = {
'judul': 'Halaman Beranda',
}
return render(request, 'data/dashboard.html', context)

def products(request):
context = {
'judul': 'Halaman Produk',
}
return render(request, 'data/products.html', context)

def custumer(request):
context = {
'judul': 'Halaman Konsumen',
}
return render(request, 'data/custumer.html', context)

Penjalasan:

context = {
'judul': 'Halaman Beranda',
}
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.

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:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 3


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/data/dashboard.html, products.html dan


custumer.html

{% extends "data/main.html" %}

{% block content %}

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

{% endblock content %}

Silakan jalankan dan pidah-pidah urlnya, nilai navbar aka tetap ada di project-nya.

Hasinya:

Gambar 3 Hasil Sistem block content Django

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 4


Penjelasan:

{% extends "data/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 "data/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 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>
{% include "data/navbar.html" %}
{% block content %}

{% endblock content %}
</body>
</html>

File Folder data/templates/data/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.

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 5


File Folder data/templates/data/main.html

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<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 "data/navbar.html" %}
{% block content %}

{% endblock content %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 6


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 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:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 7


File Folder data/templates/data/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 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>

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 8


<table class="table table-sm">
<tr>
<th></th>
<th>Customer</th>
<th>Orders</th>
</tr>

</table>
</div>
</div>

<div class="col-md-7">
<h5>LAST 5 ORDERS</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-
block" href="">Create Order</a>
<table class="table table-sm">
<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 7 Desain Products

Gambar di atas menggunakan fungsi dari table pada framework bootstrap. Kodenya
sebagai berikut:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 9


</br>
<div class="container-fluid">
<div class="row">
<div class="col-md">
<div class="card card-body">
<h5>Products</h5>
</div>
<div class="card card-body">
<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 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:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 10


<br>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="card card-body">
<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>

<div class="col-md-4">
<div class="card card-body">
<h5>Contact Information</h5>
<hr>
<p>Email: </p>
<p>Phone: </p>
</div>
</div>

<div class="col-md-4">
<div class="card card-body">
<h5>Total Orders</h5>
<hr>
<h1 style="text-align: center;padding: 10px"></h1>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="card card-body">
<form method="get">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</div>

</div>
<br>
<div class="row">

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 11


<div class="col-md">
<div class="card card-body">
<table class="table table-sm">
<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/data/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 "data/status.html" %}
…………
Posisinya tepat dibawah kode block awalan, dan kode status.html seperti berikut:
File folder data/templates/data/status.html

</br>

<div class="container-fluid">

<div class="row">
<div class="col">
<div class="col-md">
<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>

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 12


</div>
</div>

<div class="col">
<div class="col-md">
<div class="card text-center text-white mb-3" id="orders-
delivered">
<div class="card-header">
<h5 class="card-title">Orders Delivered</h5>
</div>
<div class="card-body">
<h3 class="card-title"></h3>
</div>
</div>
</div>
</div>
<div class="col">
<div class="col-md">
<div class="card text-center text-white mb-3" id="orders-
pending">
<div class="card-header">
<h5 class="card-title">Orders Pending</h5>
</div>
<div class="card-body">
<h3 class="card-title"></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Jalankan dan lihat hasilnya:

Gambar 8 Desain Custumer

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 13


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 9 Desain Dashboard setelah ditambah css

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


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

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 14


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:

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 15


Gambar 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

from django.shortcuts import render


from django.http import HttpResponse
# Create your views here.

def home(request):
context = {
'judul': 'Halaman Beranda',
'menu': 'home',
}
return render(request, 'data/dashboard.html', context)

def products(request):
context = {
'judul': 'Halaman Produk',
'menu': 'products',

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 16


}
return render(request, 'data/products.html', context)

def custumer(request):
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/data/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 11 Hasil Percabangan Link active

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 17


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

Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 18

Anda mungkin juga menyukai