Panduan praktis dan terstruktur mengenai panduan crud dengan django dan boostrap 4: menampilkan data dari database (part 3) berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan Crud Dengan Django Dan Boostrap 4: Menampilkan Data Dari Database (Part 3) Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.
Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.
Tahapan Implementasi & Walkthrough Kode
Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:
Tahap 1: Penulisan Kode & Konfigurasi
./manage.py shellTahap 2: Penulisan Kode & Konfigurasi
(env) sakukode@sakukode:~/todo-project$ ./manage.py shell
Python 3.9.0 (default, Nov 21 2020, 20:22:25)
[GCC 9.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>>Tahap 3: Penulisan Kode & Konfigurasi
from todo.models import Task
sampletask1 = Task()
sampletask1.title = "Halo Django"
sampletask1.description = "Django merupakan framework yang berbasis bahasa Python"
sampletask1.save()
sampletask2 = Task()
sampletask2.title = "Belajar Django"
sampletask2.description = "Belajar Django sangat mudah dan menyenangkan"
sampletask2.save()Tahap 4: Penulisan Kode & Konfigurasi
from django.shortcuts import render
# import class Task dari file todo/models.py
from .models import Task
# Membuat View untuk halaman daftar task
def index_view(request):
# Mengambil semua data task
tasks = Task.objects.all()
context = {
'tasks': tasks
}
# memparsing data task ke template todo/index.html dan merender nya
return render(request, 'todo/index.html', context)Tahap 5: Penulisan Kode & Konfigurasi
<!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="anonymous">
<title>Todo App</title>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>Daftar Task</h1>
<div>
<a href="#" class="btn btn-success">Tambah Baru</a>
</div>
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="5%">ID</th>
<th width="20%">Judul</th>
<th width="45%">Deskripsi</th>
<th width="5%">Status</th>
<th width="20%">Aksi</th>
</tr>
</thead>
<tbody>
<!-- daftar task-->
{% if tasks %}
{% for task in tasks %}
<tr>
<td>{{ task.id }}</td>
<td>{{ task.title }}</td>
<td>{{ task.description }}</td>
<td>{{ task.status }}</td>
<td>
<a href="#" class="btn btn-warning btn-sm">detail</a>
<a href="#" class="btn btn-primary btn-sm">ubah</a>
<a href="#" class="btn btn-danger btn-sm">hapus</a>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="5">Data tidak ditemukan.</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</body>
</html>Tahap 6: Penulisan Kode & Konfigurasi
from django.urls import path
# import View dari todo Application
from .views import index_view
app_name = 'todo'
urlpatterns = [
# route untuk halaman daftar task
path('', index_view, name='index')
]Tahap 7: Penulisan Kode & Konfigurasi
from django.shortcuts import render
from django.http import Http404
# import class Task dari file todo/models.py
from .models import Task
# Membuat View untuk halaman daftar task
def index_view(request):
# Mengambil semua data task
tasks = Task.objects.all()
context = {
'tasks': tasks
}
# parsing data task ke template todo/index.html dan merender nya
return render(request, 'todo/index.html', context)
# Membuat View untuk halaman detail task
def detail_view(request, task_id):
# Mengambil data task berdasarkan task ID
try:
task = Task.objects.get(pk=task_id)
context = {
'task': task
}
except Task.DoesNotExist:
# Jika data task tidak ditemukan,
# maka akan di redirect ke halaman 404 (Page not found).
raise Http404("Task tidak ditemukan.")
# parsing data task ke template todo/detail.html dan merendernya
return render(request, 'todo/detail.html', context)Tahap 8: Penulisan Kode & Konfigurasi
<!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="anonymous">
<title>Todo App</title>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>Detail Task</h1>
<div>
<a href="{% url 'todo:index' %}" class="btn btn-success">Kembali ke Daftar</a>
</div>
<br>
<div>
<h2>{{ task.title }}</h2>
<h4><span class="badge badge-warning">{{ task.status }}</span></h3>
<p>
{{ task.description }}
</p>
</div>
</div>
</body>
</html>Tahap 9: Penulisan Kode & Konfigurasi
<a href="{% url 'todo:detail' task.id %}" class="btn btn-warning btn-sm">detail</a>Tahap 10: Penulisan Kode & Konfigurasi
from django.urls import path
# import View dari todo Application
from .views import index_view, detail_view
app_name = 'todo'
urlpatterns = [
# route untuk halaman daftar task
path('', index_view, name='index'),
# route untuk halaman detail task
path('<int:task_id>', detail_view, name='detail')
]
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
Kesimpulan
Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.
Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!
