Emhaihsan's Blog
Mengenal Django dengan Membuat Aplikasi Todo Sederhana

Photo by Thomas Bormans on Unsplash

Mengenal Django dengan Membuat Aplikasi Todo Sederhana

Muhammad Ihsan's photo
Muhammad Ihsan
·

18 min read

Bahasa Python dikenal sebagai bahasa pemrograman yang multipurpose. Disebut demikian karena penggunaannya yang luas mulai dari analisis data, pemodelan matematika, aplikasi web, API, dan sebagainya. Dalam artikel ini, kita akan menggunakan python untuk membuat sebuah aplikasi todo sederhana, kali kini kita juga akan menggunakan Django, sebuah framework web yang sangat populer di bahasa pemrograman Python. Studi kasus todo juga sangat populer untuk pemula karena di dalamnya terdapat fungsionalitas dasar dari sebuah aplikasi yaitu CRUD (Create, Read, Update, Delete).

Prasyarat

Sebelum memulai, pastikan Anda sudah memiliki:

  • Mengetahui dasar Python

  • Mengetahui dasar terminal

  • Mengetahui dasar cara kerja web

Mengenal Django

Django memiliki slogan "The Web Framework for The Perfectionists with Deadlines", hal ini didasari karena ia merupakan framework web high-level yang didesain untuk membuat pengembangan web menjadi lebih cepat dan mudah. Salah satu kelebihan Django adalah ia mengurus banyak aspek kompleks dari pengembangan web, seperti routing, database management, dan security, sehingga kita bisa fokus pada pengembangan fitur.

Menyiapkan Development Environment

Pertama, kita harus memastikan bahwa Python sudah terinstal di sistem kita. Untuk memeriksa apakah Python sudah terinstal, buka terminal atau command prompt dan jalankan perintah berikut:

python --version

Jika Anda belum menginstal Python, kita dapat mengunduh dan menginstalnya dari web resmi Python.

Membuat Virtual Environment

Virtual environment merupakan isolated environment yang memungkinkan kita untuk menginstal paket-paket Python khusus untuk proyek kita tanpa mengganggu instalasi Python global. Penggunaan virtual environment sangat berguna untuk mengelola proyek yang memiliki depedensi paket secara terpisah.

Untuk membuat virtual environment, jalankan perintah berikut di terminal atau command prompt:

python -m venv myenv

Perintah ini akan membuat folder bernama myenv yang berisi semua file yang dibutuhkan untuk virtual environment.

Setelah membuat virtual environment, kita perlu mengaktifkannya agar perintah Python dan pip yang kita jalankan menggunakan isolated environment ini.

  • Untuk MacOS/Linux, jalankan perintah berikut:
source myenv/bin/activate
  • Untuk Windows, jalankan perintah berikut:
myenv\Scripts\activate

Setelah virtual environment diaktifkan, Anda akan melihat nama environment (myenv) muncul di awal prompt terminal Anda, menandakan bahwa virtual environment aktif.

Instalasi Django

Setelah mengaktifkan virtual environment, kita dapat menginstal Django menggunakan pip. Django adalah framework web yang akan kita gunakan untuk membuat aplikasi To-Do List.

Jalankan perintah berikut untuk menginstal Django:

pip install django

Pip akan mengunduh dan menginstal Django beserta semua dependensi yang diperlukan. Setelah proses instalasi selesai, kita dapat memverifikasi instalasi Django dengan menjalankan perintah berikut:

django-admin --version

Perintah ini akan menampilkan versi Django yang telah diinstal, misalnya:

4.2.13

Dengan langkah-langkah ini, kita sudah siap untuk mulai mengembangkan aplikasi Django di dalam virtual environment yang terisolasi.

Membuat dan Menjalankan Proyek Django

Sekarang kita akan memulai dengan membuat proyek Django kita. Proyek Django merupakan kumpulan pengaturan dan aplikasi yang akan saling bekerjasama untuk membentuk suatu aplikasi web yang lengkap.

Membuat Proyek Django

Pertama, kita akan menggunakan perintah django-admin untuk membuat proyek baru. Pastikan kita sudah berada di dalam virtual environment dan di direktori tempat kita ingin menyimpan proyek Anda.

django-admin startproject todoproject

Perintah ini akan membuat direktori baru bernama todoproject yang berisi struktur dasar dari proyek Django. Struktur direktori akan terlihat seperti ini:

todoproject/
    manage.py
    todoproject/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

  • manage.py: Skrip utilitas yang memungkinkan kita untuk berinteraksi dengan proyek Django, severti menjalankan server pengembangan, membuat aplikasi baru, dan melakukan migrasi database.

  • todoproject/: Direktori ini berisi pengaturan proyek keseluruhan. Untuk proyek kali ini, kita tidak perlu memahami secara rinci kegunaan dari masing-masing file, yang perlu kita ketahui sekilas antara lain:

  • init.py: File kosong yang menunjukkan bahwa direktori ini adalah paket Python.

  • settings.py: File pengaturan untuk proyek Django. Di sini kita akan mengkonfigurasi database, aplikasi yang diinstal, middleware, dan pengaturan lainnya.

  • urls.py: File untuk mendefinisikan URL yang dipetakan ke berbagai tampilan di aplikasi kita.

Masuk ke Direktori Proyek:

Setelah proyek dibuat, pindah ke dalam direktori proyek menggunakan perintah cd:

cd todoproject

Sekarang kita telah berada di dalam direktori proyek dan siap untuk menjalankan server pengembangan.

Menjalankan Server Pengembangan

Server pengembangan Django merupakan server web ringan yang hadir bersama Django dan digunakan untuk menguji proyek kita secara lokal. Server ini bukan untuk produksi, tetapi sangat berguna selama pengembangan.

Jalankan perintah berikut untuk memulai server pengembangan:

python manage.py runserver

Setelah menjalankan perintah ini, kita akan melihat output yang mirip dengan ini:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 12, 2024 - 02:23:17
Django version 4.2.13, using settings 'todoproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Ini berarti server pengembangan sudah berjalan dan Anda dapat mengakses proyek Django Anda di browser dengan membuka URL http://127.0.0.1:8000/.

Halaman di atas menunjukkan bahwa proyek Django kita telah berhasil dibuat dan server pengembangan sudah berjalan dengan baik. Selamat, kita telah berhasil membuat dan menjalankan proyek Django. Selanjutnya, kita akan membuat aplikasi di dalam proyek ini dan mulai menambahkan fitur ke aplikasi To-Do List kita.

Membuat Aplikasi Pertama Anda

Setelah berhasil membuat proyek Django, langkah selanjutnya adalah membuat aplikasi di dalam proyek tersebut. Dalam konteks Django, aplikasi adalah modul atau komponen yang melakukan satu tugas tertentu. Proyek dapat terdiri dari satu atau lebih aplikasi, tergantung pada kompleksitas dan fungsionalitas yang diinginkan.

Membuat Aplikasi Baru:

Kita akan menggunakan perintah startapp untuk membuat aplikasi baru. Pastikan bahwa kita masih berada di dalam direktori proyek (todoproject).

manage.py startapp todo

Perintah ini akan membuat direktori baru bernama todo di dalam direktori proyek Anda dengan struktur dasar aplikasi Django. Struktur direktori akan terlihat seperti ini:

todo/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

  • admin.py: File untuk mendaftarkan model-model ke situs admin Django.

  • apps.py: File konfigurasi aplikasi.

  • migrations/: Direktori yang menyimpan file-file migrasi database untuk model.

  • models.py: File tempat mendefinisikan model data.

  • tests.py: File untuk menulis tes otomatis untuk aplikasi.

  • views.py: File tempat mendefinisikan tampilan untuk aplikasi.

Mendaftarkan Aplikasi dalam Proyek:

Agar aplikasi todo dikenali oleh proyek Django, kita perlu menambahkannya ke daftar aplikasi yang terinstal di dalam (INSTALLED_APPS) pada file settings.py. Buka todoproject/settings.py dan tambahkan 'todo', ke dalam daftar INSTALLED_APPS.

INSTALLED_APPS = [
        ...
        'todo',
    ]

Setelah menambahkan aplikasi ke INSTALLED_APPS, Django akan mengenali aplikasi todo dan kita dapat mulai mengembangkan fungsionalitas untuk aplikasi To-Do List.

Menulis Views dan Memetakan URL

Setelah aplikasi todo dibuat, langkah berikutnya adalah menulis views dan memetakan URL untuk aplikasi tersebut. Views adalah fungsi Python yang menerima permintaan web (request) dan mengembalikan respons web (response). URLconf (URL configuration) adalah sistem untuk memetakan URL ke views yang sesuai.

Buat View Sederhana:

Pertama, kita akan membuat view sederhana yang akan menampilkan pesan "Hello, world. You're at the to-do list index." saat diakses. Buka todo/views.py dan tambahkan kode berikut:

from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. You're at the to-do list index.")

Fungsi index di atas adalah view sederhana yang menerima objek request dan mengembalikan objek HttpResponse dengan pesan "Hello, world. You're at the to-do list index."

Membuat URLconf untuk Aplikasi:

Kemudian, kita perlu membuat URL configuration (URLconf) untuk aplikasi todo agar URL dapat dipetakan ke view yang sesuai. Buat file baru bernama urls.py di dalam direktori todo dan tambahkan kode berikut:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

Dalam kode di atas, kita menggunakan fungsi path untuk memetakan URL kosong ('') ke view index. Nama 'index' adalah nama yang dapat kita gunakan untuk merujuk ke URL ini di tempat lain dalam kode kita.

Menghubungkan URL Aplikasi ke Proyek:

Selanjutny, kita perlu menghubungkan URL aplikasi todo ke URL proyek utama. Buka todoproject/urls.py dan tambahkan path untuk aplikasi todo seperti berikut:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todo/', include('todo.urls')),
]

Kode di atas menggunakan fungsi include untuk menyertakan URL configuration dari aplikasi todo. Sekarang, setiap URL yang diawali dengan todo/ akan diteruskan ke URL configuration dari aplikasi todo.

Menguji Konfigurasi

Untuk menguji konfigurasi ini, jalankan server pengembangan dengan perintah berikut:

python manage.py runserver

Lalu buka browser dan akses http://127.0.0.1:8000/todo/. Seharusnya akan muncul pesan "Hello, world. You're at the to-do list index." di dalam browser seperti gambar di bawah

Menggunakan Templates

Untuk membuat tampilan yang lebih menarik dan dinamis, Django menyediakan mekanisme template.

Membuat Template

Pertama, kita perlu membuat folder bernama templates di dalam direktori aplikasi todo. Di dalam folder templates, buat file bernama index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <h1>Hello, world. You're at the to-do list index.</h1>
</body>
</html>

Dalam file index.html di atas, kita menulis HTML dasar untuk menampilkan pesan "Hello, world. You're at the to-do list index." di dalam elemen <h1>.

Menghubungkan Template dengan View

Setelah membuat template, langkah selanjutnya adalah menghubungkannya dengan view. Kita akan memodifikasi view index di todo/views.py untuk menggunakan template yang baru saja kita buat.

Buka todo/views.py dan ubah kode menjadi seperti berikut:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

Dalam kode di atas, kita menggunakan fungsi render dari modul django.shortcuts untuk merender template index.html. Fungsi render mengambil dua parameter: objek request dan nama template yang ingin dirender. Untuk mengetahui apakah template sudah terhubung dengan benar, jalankan lagi server pengembangan dengan perintah berikut:

python manage.py runserver

Lalu buka browser dan akses http://127.0.0.1:8000/todo/. Anda seharusnya melihat halaman HTML dengan pesan "Hello, world. You're at the to-do list index." ditampilkan di dalam elemen <h1>.

Di sini kita telah berhasil membuat template dan menghubungkannya dengan view. Kita bisa mengembangkan template ini dengan menambahkan lebih banyak elemen HTML dan membuat tampilan yang lebih menarik.

Membuat Model Data

Dalam Django, model digunakan untuk mendefinisikan struktur data dalam aplikasi. Model di Django bertanggung jawab untuk memetakan database table dan menyederhanakan query database. Model merupakan representasi dari tabel di dalam database, dan setiap atribut dalam model merupakan kolom dari tabel tersebut.

Untuk membangun model data untuk aplikasi To-Do List, kita perlu mendefinisikan struktur data yang akan digunakan. Struktur ini mencakup informasi seperti judul, deskripsi, dan status penyelesaian dari setiap tugas.

Definisi Model

Pertama, kita tambahkan model Todo di file models.py dalam aplikasi todo:

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

  • title: Field ini menyimpan judul tugas sebagai teks dengan panjang maksimum 200 karakter.

  • description: Field ini menyimpan deskripsi tugas sebagai teks.

  • completed: Field ini menyimpan status penyelesaian tugas sebagai boolean, dengan nilai default False.

  • __str__ method: Method ini digunakan untuk memberikan representasi string dari objek Todo, yang akan menampilkan judul tugas saat objek diakses.

Migrasi Model

Setelah mendefinisikan model, kita perlu membuat dan menerapkan migrasi untuk memperbarui skema database sesuai dengan model yang baru dibuat. Migrasi merupakan cara Django agar bisa menerapkan perubahan yang dibuat pada model ke dalam database.

Jalankan perintah berikut untuk membuat dan menerapkan migrasi:

python manage.py makemigrations
python manage.py migrate

  1. pythonmanage.pymakemigrations: Perintah ini akan memeriksa perubahan yang telah dilakukan pada model dan membuat file migrasi baru berdasarkan perubahan tersebut. File migrasi ini adalah representasi dari perubahan skema database yang perlu diterapkan.

  2. pythonmanage.pymigrate: Perintah ini akan menerapkan file migrasi yang telah dibuat ke dalam database. Dengan demikian, tabel-tabel dalam database akan diperbarui sesuai dengan definisi model Todo yang baru kita buat.

Setelah menjalankan kedua perintah ini, tabel Todo akan dibuat di database dengan kolom-kolom yang sesuai dengan atribut yang telah kita definisikan dalam model.

Mengorganisir Model dalam Aplikasi

Registrasi Model dalam Admin

Django menyediakan admin interface yang sangat berguna untuk mengelola data aplikasi secara langsung melalui web. Untuk dapat mengelola model Todo melalui admin interface, kita perlu mendaftarkan model tersebut ke admin site. Caranya adalah dengan menambahkan kode berikut di file admin.py dalam aplikasi todo:

from django.contrib import admin
from .models import Todo

admin.site.register(Todo)

Dengan menambahkan admin.site.register(Todo), kita memberi tahu Django untuk menampilkan model Todo di admin site. Ini memungkinkan kita untuk menambah, mengedit, dan menghapus item To-Do langsung melalui admin interface.

Menjalankan Server dan Mengakses Admin

Setelah mendaftarkan model Todo dalam admin site, langkah berikutnya adalah menjalankan server pengembangan Django dan mengakses admin interface. Jika belum berjalan, jalankan server dengan perintah python manage.py runserver

Setelah server berjalan, buka browser dan akses admin interface melalui URL:

http://127.0.0.1:8000/admin

Setelah masuk ke tampilan seperti di atas, agar bisa login dan mengakses halaman admin, kita perlu memiliki akun superuser. Jika belum memiliki, kita bisa membuatnya dengan menjalankan perintah berikut di terminal:

python manage.py createsuperuser

Perintah ini akan meminta kita memasukkan username, email, dan password untuk akun superuser. Setelah akun superuser dibuat, login ke admin interface menggunakan akun tersebut.

Setelah login, kita akan melihat model Todo di admin interface. Dari sini, kita bisa mengelola item To-Do seperti menambah item baru, mengedit item yang ada, atau menghapus item yang tidak diperlukan. Admin interface ini sangat membantu dalam pengelolaan data selama pengembangan ataupun setelah aplikasi di-deploy.

Menambahkan Fungsionalitas CRUD

Membuat Formulir untuk Menambah dan Mengedit To-Do

Agar bisa menambahkan dan mengedit item To-Do, kita memerlukan formulir yang dapat digunakan oleh pengguna. Django menyediakan cara simpel untuk membuat formulir dengan menggunakan ModelForm.

Membuat Form di forms.py

Pertama-tama kita perlu membuat file forms.py di dalam aplikasi todo. File ini akan berisi definisi formulir untuk model Todo.

from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        fields = ['title', 'description', 'completed']

  • Import Django Forms: Kita mengimpor modul forms dari Django.

  • Import Model Todo: Kita juga mengimpor model Todo yang telah kita buat sebelumnya.

  • Definisi Kelas TodoForm: Kita membuat kelas TodoForm yang merupakan subclass dari forms.ModelForm.

  • Meta Class: Di dalam kelas TodoForm, kita mendefinisikan kelas Meta. Kelas ini digunakan untuk memberi tahu Django model mana yang akan digunakan untuk membuat formulir dan field mana saja yang akan disertakan dalam formulir.

Dengan menggunakan ModelForm, kita dapat dengan mudah membuat dan mengedit item To-Do, karena Django akan secara otomatis menghasilkan form berdasarkan model Todo dan field yang telah kita tentukan. Formulir ini akan memungkinkan pengguna untuk memasukkan judul, deskripsi, dan status penyelesaian (completed) dari setiap item To-Do.

Menambahkan View untuk Menambah dan Mengedit To-Do

Sejauh ini kita sudah berinteraksi dengan models.py , views.py , dan forms.py Dalam pengembangan web menggunakan Django, sering kali kita perlu berinteraksi dengan database melalui model, mengumpulkan data dari pengguna melalui formulir, dan menampilkan data tersebut melalui view. Sebagai pengingat, models.py berfungsi untuk mendefinisikan struktur data aplikasi Anda. Model ini memetakan database table dan menyediakan antarmuka untuk melakukan query database. Kemudian forms.py berfungsi untuk mendefinisikan formulir yang digunakan untuk mengumpulkan data dari pengguna. Dan terakhir views.py berfungsi untuk mengatur logika aplikasi dan berinteraksi dengan model dan formulir. View mengirim data ke template yang kemudian akan ditampilkan kepada pengguna.

Menulis Views di views.py

Setelahnya sebelumnya kita hanya menampilkan hello world di view. Kini saatnya kita untuk mengatur view untuk membuat dan mengedit to-do. Di dalam views.py dalam aplikasi todo yang akan kita tambahkan antara lain:

from django.shortcuts import render, redirect
from .models import Todo
from .forms import TodoForm

def todo_list(request):
    todos = Todo.objects.all()
    return render(request, 'todo_list.html', {'todos': todos})

def todo_detail(request, pk):
    todo = Todo.objects.get(pk=pk)
    return render(request, 'todo_detail.html', {'todo': todo})

def todo_create(request):
    if request.method == 'POST':
        form = TodoForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('todo_list')
    else:
        form = TodoForm()
    return render(request, 'todo_form.html', {'form': form})

def todo_update(request, pk):
    todo = Todo.objects.get(pk=pk)
    if request.method == 'POST':
        form = TodoForm(request.POST, instance=todo)
        if form.is_valid():
            form.save()
            return redirect('todo_list')
    else:
        form = TodoForm(instance=todo)
    return render(request, 'todo_form.html', {'form': form})

def todo_delete(request, pk):
    todo = Todo.objects.get(pk=pk)
    if request.method == 'POST':
        todo.delete()
        return redirect('todo_list')
    return render(request, 'todo_confirm_delete.html', {'todo': todo})

  • todo_list: View ini mengambil semua item To-Do dari database dan merendernya ke template todo_list.html. View ini digunakan untuk menampilkan daftar semua item To-Do yang ada.

  • todo_detail: View ini mengambil detail dari satu item To-Do berdasarkan primary key (pk) dan merendernya ke template todo_detail.html. View ini digunakan untuk menampilkan detail dari satu item To-Do.

  • todo_create: View ini digunakan untuk membuat item To-Do baru. Jika request method adalah POST, maka data dari form akan divalidasi dan disimpan ke database. Jika valid, pengguna akan diarahkan kembali ke daftar To-Do. Jika request method bukan POST, maka form kosong akan dirender di template todo_form.html.

  • todo_update: View ini digunakan untuk mengedit item To-Do yang sudah ada. Mirip dengan todo_create, namun di sini form diisi dengan data dari item yang akan diedit. Jika request method adalah POST dan form valid, perubahan akan disimpan ke database dan pengguna akan diarahkan kembali ke daftar To-Do.

  • todo_delete: View ini digunakan untuk menghapus item To-Do. Jika request method adalah POST, item To-Do akan dihapus dari database dan pengguna akan diarahkan kembali ke daftar To-Do. Jika bukan POST, pengguna akan diminta konfirmasi penghapusan di template todo_confirm_delete.html.

Dengan menambahkan view-view ini, aplikasi kita sekarang sudah memiliki fungsionalitas CRUD (Create, Read, Update, Delete) untuk item To-Do. View-view ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus item To-Do melalui antarmuka web.

Memetakan URL untuk View CRUD

Untuk menghubungkan view yang telah kita buat dengan URL, kita perlu menambahkan URL pattern di urls.py dalam aplikasi todo. Hal ini memungkinkan aplikasi Django untuk memetakan URL yang diminta oleh pengguna ke view yang sesuai. Buka atau buat file urls.py dalam aplikasi todo. Tambahkan URL pattern berikut untuk memetakan view CRUD:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.todo_list, name='todo_list'),
    path('todo/<int:pk>/', views.todo_detail, name='todo_detail'),
    path('todo/new/', views.todo_create, name='todo_create'),
    path('todo/<int:pk>/edit/', views.todo_update, name='todo_update'),
    path('todo/<int:pk>/delete/', views.todo_delete, name='todo_delete'),
]

  • path(' ', views.todo_list, name='todo_list'): URL ini memetakan root URL (/) ke todo_list view. Ini akan menampilkan daftar semua item To-Do.

  • path('todo/int:pk/', views.todo_detail, name='todo_detail'): URL ini memetakan URL seperti /todo/1/ ke todo_detail view. <int:pk> adalah parameter yang menangkap primary key dari item To-Do yang akan ditampilkan.

  • path('todo/new/', views.todo_create, name='todo_create'): URL ini memetakan URL /todo/new/ ke todo_create view. Ini akan menampilkan formulir untuk menambah item To-Do baru.

  • path('todo/int:pk/edit/', views.todo_update, name='todo_update'): URL ini memetakan URL seperti /todo/1/edit/ ke todo_update view. <int:pk> adalah parameter yang menangkap primary key dari item To-Do yang akan diedit.

  • path('todo/int:pk/delete/', views.todo_delete, name='todo_delete'): URL ini memetakan URL seperti /todo/1/delete/ ke todo_delete view. <int:pk> adalah parameter yang menangkap primary key dari item To-Do yang akan dihapus.

Setelah menambahkan URL pattern di urls.py dalam aplikasi todo, kita perlu menghubungkan URL aplikasi ini ke proyek Django utama. Untuk melakukan ini, tambahkan path aplikasi todo di urls.py dalam proyek todoproject. Buka urls.py dalam direktori proyek todoproject. Tambahkan path aplikasi todo dengan menggunakan include.

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('todo.urls')),
]

Dengan konfigurasi ini, root URL (/) akan langsung dipetakan ke URL pattern yang didefinisikan di urls.py dalam aplikasi todo.

Membuat Template untuk Interface.

Untuk membuat antarmuka pengguna dari aplikasi To-Do yang memiliki fungsionalitas lengkap, kita memerlukan beberapa template HTML. Template ini akan dihubungkan dengan view yang telah kita buat sebelumnya.

Template Halaman Utama untuk Daftar To-Do (todo_list.html):

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <h1>To-Do List</h1>
    <a href="{% url 'todo_create' %}">Add new task</a>
    <ul>
        {% for todo in todos %}
            <li>
                <p><a href="{% url 'todo_detail' todo.pk %}">{{ todo.title }}</a><span>: {{ todo.completed|yesno:"Completed,Not Completed" }}</span>
                <a href="{% url 'todo_update' todo.pk %}">Edit</a>
                <a href="{% url 'todo_delete' todo.pk %}">Delete</a></p>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

Template todo_list.html ini akan menampilkan daftar semua item To-Do. Terdapat tautan untuk menambah tugas baru, melihat detail tugas, mengedit, dan menghapus tugas. Loop {% for todo in todos %} digunakan untuk menampilkan setiap item To-Do dalam daftar.

Template untuk Detail To-Do (todo_detail.html):

<!DOCTYPE html>
<html>
<head>
    <title>To-Do Detail</title>
</head>
<body>
    <h1>{{ todo.title }}</h1>
    <p>{{ todo.description }}</p>
    <p>Status: {{ todo.completed|yesno:"Completed,Not Completed" }}</p>
    <a href="{% url 'todo_list' %}">Back to list</a>
</body>
</html>

Template todo_detail.html ini menampilkan detail dari sebuah item To-Do. Menggunakan variabel {{ todo.title }}, {{ todo.description }}, dan {{ todo.completed|yesno:"Completed,Not Completed" }} untuk menampilkan informasi yang relevan tentang tugas.

Template untuk Formulir To-Do (todo_form.html):

<!DOCTYPE html>
<html>
<head>
    <title>To-Do Form</title>
</head>
<body>
    <h1>To-Do Form</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Save</button>
    </form>
    <a href="{% url 'todo_list' %}">Cancel</a>
</body>
</html>

Template todo_form.html ini digunakan untuk menampilkan formulir yang memungkinkan pengguna menambah atau mengedit item To-Do. Formulir ini menggunakan {{ form.as_p }} untuk menampilkan elemen form secara otomatis berdasarkan TodoForm yang telah kita buat. Token CSRF ({% csrf_token %}) diperlukan untuk keamanan form di Django.

Template untuk Konfirmasi Hapus (todo_confirm_delete.html):

<!DOCTYPE html>
<html>
<head>
    <title>Delete To-Do</title>
</head>
<body>
    <h1>Are you sure you want to delete "{{ todo.title }}"?</h1>
    <form method="post">
        {% csrf_token %}
        <button type="submit">Yes, delete</button>
    </form>
    <a href="{% url 'todo_list' %}">Cancel</a>
</body>
</html>

Template todo_confirm_delete.html ini digunakan untuk meminta konfirmasi dari pengguna sebelum menghapus item To-Do. Template ini menampilkan pesan konfirmasi dengan judul tugas yang akan dihapus dan menyediakan tombol untuk mengonfirmasi atau membatalkan penghapusan.

Dengan keempat template ini, aplikasi To-Do Anda sekarang memiliki antarmuka pengguna yang lengkap untuk melakukan operasi CRUD. Pastikan semua template ini disimpan dalam folder templates di dalam aplikasi todo.

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara membuat aplikasi To-Do List sederhana menggunakan Django, sebuah framework web populer untuk bahasa pemrograman Python. Kita telah melalui berbagai langkah mulai dari instalasi Django hingga membuat dan menjalankan proyek, membangun model data, menulis views, memetakan URL, dan membuat template HTML untuk mendukung operasi CRUD (Create, Read, Update, Delete). Hal-hal yang sudah kita pelajari di artikel ini antara lain:

  • Instalasi dan Penyiapan Lingkungan: Membuat virtual environment, dan menginstal Django.

  • Membuat Proyek Django: Menggunakan django-admin untuk membuat proyek Django dan menjalankan server pengembangan.

  • Membuat Aplikasi Django: Menggunakan startapp untuk membuat aplikasi baru dalam proyek Django.

  • Menulis Views dan Memetakan URL: Membuat views sederhana dan memetakan URL ke views tersebut.

  • Menggunakan Templates: Membuat template HTML dan menghubungkannya dengan views untuk menampilkan data.

  • Membangun Model Data: Definisi dan migrasi model data untuk aplikasi To-Do List.

  • Registrasi Model dalam Admin: Mendaftarkan model ke admin site Django untuk memudahkan pengelolaan data.

  • Menambahkan Fungsionalitas CRUD: Membuat form untuk menambah dan mengedit item To-Do serta menulis views dan template untuk mendukung operasi CRUD.

Masih banyak hal-hal lain yang bisa kembangkan dari aplikasi todo ini, berikut beberapa poin yang bisa kita pelajari selanjutnya setelah membuat aplikasi ini:

  • Tampilan Antarmuka: Tingkatkan tampilan antarmuka pengguna dengan menggunakan framework CSS seperti Bootstrap atau Tailwind CSS untuk membuatnya lebih menarik dan responsif.

  • Validasi Form: Tambahkan validasi form yang lebih kompleks untuk memastikan data yang dimasukkan oleh pengguna sesuai dengan yang diharapkan.

  • Autentikasi dan Otorisasi: Implementasikan fitur login dan registrasi pengguna untuk membatasi akses ke aplikasi hanya untuk pengguna terdaftar. Django memiliki dukungan built-in untuk autentikasi yang bisa digunakan.

  • Fitur Tambahan: Kembangkan fitur tambahan seperti kategori tugas, tanggal jatuh tempo, prioritas tugas, dan notifikasi.

Yang terpenting adalah selalu mau belajar dan terbuka terhadap hal-hal baru. Selamat mencoba! 😁

Source Code: Github

Support kami di sini.

DjangoPythonWeb Development