Tutorial CRUD dengan Django dan Boostrap 4 #3: Menampilkan Data dari Database


Rizqi Maulana
Backend Developer

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


Rizqi Maulana
Backend Developer
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR