Setelah kita mempersiapkan semuanya mulai dari instalasi sampai menambahkan URL. Kita akan mulai membuat Simple Todo App yang mana nanti akan terdiri dari 3 halaman utama: halaman task list, halaman task form (untuk menambahkan dan mengubah task) dan halaman task detail untuk menampilkan detail dari task. Kita akan menggunakan framework css Bootstrap 4 untuk mempercantik tampilan web nya. Untuk template bootstrap html nya kamu tidak perlu membuatnya. Cukup download dari link berikut https://github.com/sakukode/template-tutorial-crud-django-bootstrap-4 dan copy folder templates ke dalam folder todo-project/todo.
Daftar Task
Pertama kita akan membuat halaman untuk menampilkan daftar list. Tetapi kita perlu menambahkan beberapa data dulu ke dalam tabel tasks. Nah gimana caranya?apa kita harus menambahkannya secara manual langsung dari database?Tidak. Tetapi kita akan menambahkan data task melalui Python shell. Untuk masuk ke dalam mode Python shell, silahkan ketikkan perintah berikut di terminal atau command prompt.
./manage.py shell
Tampilan terminal / command prompt akan terlihat seperti di bawah ini yang menandakan Python shell sudah aktif.
(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)
>>>
Teruskan ketikkan perintah berikut secara berurutan dari Python shell untuk menambah data task.
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()
Selanjutnya kita akan menambahkan View untuk halaman daftar task. Buka kembali file todo-project/todo/views.py kemudian ubah seperti kode di bawah ini.
todo-project/todo/views.py
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)
Kita perlu mengubah file todo-project/todo/templates/todo/index.html agar bisa menampilkan data task dari database ke dalam tabel html.
todo-project/todo/templates/todo/index.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="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>
Kita juga perlu mengubah di bagian file todo-project/todo/urls.py. Lakukan perubahan seperti di bawah ini.
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')
]
Jalankan kembali aplikasi Django kita dari terminal/command prompt. kemudian buka kembali http://127.0.0.1:8000/todo/. Halaman Daftar Task sudah berhasil kita buat.
Detail Task
Pada halaman daftar task terdapat tombol detail yang sudah kita buat. Yang mana nantinya jika tombol itu diklik akan membuka halaman detail task. Jadi sekarang kita akan membuat halaman untuk detail task. Sama seperti materi sebelumnya, pertama kita perlu membuat atau menambahkan function baru di file todo-project/todo/views.py untuk memroses request untuk halaman detail task. Buka file tersebut dan ubah kode nya seperti di bawah ini.
todo-project/todo/views.py
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)
Selanjutnya di bagian template, buka file todo-project/todo/templates/todo/detail.html. Dan lakukan perubahan seperti di bawah ini.
<!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>
Buka file template todo-project/todo/templates/todo/index.html. Lakukan perubahan juga di bagian button detail di halaman daftar task. Kita menggunakan helper url pada template untuk menggenerate url secara otomatis. diikuti nama route nya dan juga parameternya yaitu task id
<a href="{% url 'todo:detail' task.id %}" class="btn btn-warning btn-sm">detail</a>
Pada file todo-project/todo/urls.py tambahkan route untuk halaman detail task
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')
]
Kita sudah selesai membuat halaman detail task. Silahkan buka kembali url http://127.0.0.1:8000/todo/ dan klik salah satu tombol detail yang ada di daftar task. Jika tidak ada error. Seharusnya tampilannya akan seperti gambar di bawah ini.
INFO :
Ebook Python & Django