Menambah Dan Mengubah Data Ke Database Di Crud Dengan Django Dan Boostrap 4 — Part 4

Panduan praktis dan terstruktur mengenai panduan crud dengan django dan boostrap 4: menambah dan mengubah data ke database (part 4) 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: Menambah Dan Mengubah Data Ke Database (Part 4) 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

pip install django-widget-tweaks

Tahap 2: Penulisan Kode & Konfigurasi

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Aplikasi Todo
    'todo.apps.TodoConfig',
    # package untuk merender form pada template
    'widget_tweaks',
]

Tahap 3: Penulisan Kode & Konfigurasi

from django.forms import ModelForm
from django.utils.translation import gettext_lazy as _

# import class Task dari file todo/models.py
from .models import Task


# membuat class TaskForm untuk membuat task
class TaskForm(ModelForm):
    class Meta:
        # merelasikan form dengan model
        model = Task
        # mengeset field apa saja yang akan ditampilkan pada form
        fields = ('title', 'description', 'status')
        # mengatur teks label untuk setiap field
        labels = {
            'title': _('Judul'),
            'description': _('Deskripsi'),
            'status': _('Status')
        }
        # mengatur teks pesan error untuk setiap validasi fieldnya
        error_messages = {
            'title': {
                'required': _("Judul harus diisi."),
            },
            'description': {
                'required': _("Deskripsi harus diisi."),
            },
        }

Tahap 4: Penulisan Kode & Konfigurasi

from django.shortcuts import redirect, render
from django.http import Http404
from django.contrib import messages

# import class Task dari file todo/models.py
from .models import Task
# import class TaskForm dari file todo/forms.py
from .forms import TaskForm


# 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)


# Membuat View untuk halaman form tambah task
def create_view(request):
    # Mengecek method pada request
    # Jika method-nya adalah POST, maka akan dijalankan
    # proses validasi dan penyimpanan data
    if request.method == 'POST':
        # membuat objek dari class TaskForm
        form = TaskForm(request.POST)
        # Mengecek validasi form
        if form.is_valid():
            # Membuat Task baru dengan data yang disubmit
            new_task = TaskForm(request.POST)
            # Simpan data ke dalam table tasks
            new_task.save()
            # mengeset pesan sukses dan redirect ke halaman daftar task
            messages.success(request, 'Sukses Menambah Task baru.')
            return redirect('todo:index')
    # Jika method-nya bukan POST
    else:
        # membuat objek dari class TaskForm
        form = TaskForm()
    # merender template form dengan memparsing data form
    return render(request, 'todo/form.html', {'form': form})

Tahap 5: Penulisan Kode & Konfigurasi

from .forms import TaskForm

Tahap 6: Penulisan Kode & Konfigurasi

def create_view(request):
    # Mengecek method pada request
    # Jika method-nya adalah POST, maka akan dijalankan
    # proses validasi dan penyimpanan data
    if request.method == 'POST':
        # membuat objek dari class TaskForm
        new_task = TaskForm(request.POST)
        # Mengecek validasi form
        if new_task.is_valid():
            # Simpan data ke dalam table tasks
            new_task.save()
            # mengeset pesan sukses dan redirect ke halaman daftar task
            messages.success(request, 'Sukses Menambah Task baru.')
            return redirect('todo:index')
    # Jika method-nya bukan POST
    else:
        # membuat objek dari class TaskForm
        form = TaskForm()
        # merender template form dengan memparsing data form
        return render(request, 'todo/form.html', {'form': form})

Tahap 7: 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>Task Form</h1>

      <div>
        <a href="{% url 'todo:index' %}" class="btn btn-success">Back to List</a>
      </div>

      <br>

      <div>
        <!-- meload package untuk merender form field -->
        {% load widget_tweaks %}

        <form method="post" novalidate>
          <!-- menambahkan csrf field untuk keamanan form -->
          {% csrf_token %}

          <!-- merender semua field form dari objek TaskForm -->
          {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
              {% for error in form.non_field_errors %}
                {{ error }}
              {% endfor %}
            </div>
          {% endif %}

          {% for field in form.visible_fields %}
            <div class="form-group">
              {{ field.label_tag }}

              {% if form.is_bound %}
                {% if field.errors %}
                  {% render_field field class="form-control is-invalid" %}
                  {% for error in field.errors %}
                    <div class="invalid-feedback">
                      {{ error }}
                    </div>
                  {% endfor %}
                {% else %}
                  {% render_field field class="form-control is-valid" %}
                {% endif %}
              {% else %}
                {% render_field field class="form-control" %}
              {% endif %}

              {% if field.help_text %}
                <small class="form-text text-muted">{{ field.help_text }}</small>
              {% endif %}
            </div>
          {% endfor %}

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
  </div>
 
  </body>
</html>

Tahap 8: Penulisan Kode & Konfigurasi

<div>
	<a href="#" class="btn btn-success">Tambah Baru</a>
</div>

Tahap 9: Penulisan Kode & Konfigurasi

<!-- blok untuk menampilkan notifikasi pesan sukses -->
<div>
{% if messages %}

  	{% for message in messages %}
  	<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
    	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
      		<span aria-hidden="true">&times;</span>
    	</button>
      	{{ message | safe }}
  	</div>
  	{% endfor %}

{% endif %}
</div>

<!-- tombol untuk ke halaman tambah task -->
<div>
	<a href="{% url 'todo:create'  %}" class="btn btn-success">Tambah Baru</a>
</div>

Tahap 10: Penulisan Kode & Konfigurasi

from django.urls import path

# import View dari todo Application
from .views import index_view, detail_view, create_view

app_name = 'todo'
urlpatterns = [
	# url untuk halaman daftar task
    path('', index_view, name='index'),
    # url untuk halaman detail task
    path('<int:task_id>', detail_view, name='detail'),
    # url untuk halaman tambah task
    path('create', create_view, name='create')
]

Tahap 11: Penulisan Kode & Konfigurasi

# Membuat View untuk halaman form ubah task
def update_view(request, task_id):
    try:
        # mengambil data task yang akan diubah berdasarkan task id
        task = Task.objects.get(pk=task_id)
    except Task.DoesNotExist:
        # Jika data task tidak ditemukan,
        # maka akan di redirect ke halaman 404 (Page not found).
        raise Http404("Task tidak ditemukan.")
    # Mengecek method pada request
    # Jika method-nya adalah POST, maka akan dijalankan
    # proses validasi dan penyimpanan data
    if request.method == 'POST':
        form = TaskForm(request.POST, instance=task)
        if form.is_valid():
            # Simpan perubahan data ke dalam table tasks
            form.save()
            # mengeset pesan sukses dan redirect ke halaman daftar task
            messages.success(request, 'Sukses Mengubah Task.')
            return redirect('todo:index')
    # Jika method-nya bukan POST
    else:
        # membuat objek dari class TaskForm
        form = TaskForm(instance=task)
    # merender template form dengan memparsing data form
    return render(request, 'todo/form.html', {'form': form})

Tahap 12: Penulisan Kode & Konfigurasi

from django.urls import path

# import View dari todo Application
from .views import index_view, detail_view, create_view, update_view

app_name = 'todo'
urlpatterns = [
    # url untuk halaman daftar task
    path('', index_view, name='index'),
    # url untuk halaman detail task
    path('<int:task_id>', detail_view, name='detail'),
    # url untuk halaman tambah task
    path('create', create_view, name='create'),
    # url untuk halaman ubah task
    path('update/<int:task_id>', update_view, name='update'),
]

Tahap 13: Penulisan Kode & Konfigurasi

<a href="#" class="btn btn-primary btn-sm">ubah</a>

Tahap 14: Penulisan Kode & Konfigurasi

<a href="{% url 'todo:update' task.id %}" class="btn btn-primary btn-sm">ubah</a>

💡 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!