Mengapa Tampilan dan UI Itu Penting?
Sebuah aplikasi yang baik tidak hanya kuat dalam fungsionalitas, tetapi juga menarik dan mudah digunakan. Dengan memperbaiki tampilan antarmuka atau UI (User Interface), kita dapat membuat aplikasi lebih intuitif, menarik, dan meningkatkan pengalaman pengguna secara keseluruhan. Di artikel ini, kita akan menggunakan Bootstrap, framework CSS yang populer, untuk mempercantik tampilan aplikasi CRUD yang telah kita buat.
Apa yang Akan Dipelajari?
Pada artikel ini, kita akan:
- Mengintegrasikan Bootstrap ke Proyek Django
- Menyesuaikan Tampilan Daftar, Tambah, Edit, dan Hapus Data
- Menggunakan Kelas-Kelas Bootstrap untuk Meningkatkan Tampilan Formulir
Mari kita mulai!
Langkah 1: Mengintegrasikan Bootstrap ke Proyek Django
Bootstrap memberikan kemudahan dalam membuat tampilan yang modern dan responsif. Untuk mengintegrasikan Bootstrap, kita hanya perlu menambahkan tautan CSS dan JavaScript Bootstrap ke template HTML utama.
- Buka Template Dasar HTML Anda:
Jika Anda belum memiliki file template dasar, buat file baru bernamabase.htmldi dalam foldercrud/templates/crud. - Tambahkan Tautan Bootstrap di Template Dasar:
Di dalambase.html, tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Aplikasi CRUD{% endblock %}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>Penjelasan Kode:
container: Kelas Bootstrap yang menjaga tata letak tetap rapi dan terpusat.{% block title %}dan{% block content %}: Blok template untuk memungkinkan halaman-halaman lain mewarisi template dasar ini.
Langkah 2: Memperbarui Tampilan Daftar Artikel
Selanjutnya, kita akan memperbarui template daftar artikel untuk menggunakan gaya Bootstrap agar lebih rapi dan menarik.
- Perbarui Template
list_artikel.html:
Di dalamlist_artikel.html, ubah kode HTML agar menggunakan elemen-elemen Bootstrap.
{% extends 'crud/base.html' %}
{% block title %}Daftar Artikel{% endblock %}
{% block content %}
<h1 class="my-4">Daftar Artikel</h1>
<a href="{% url 'create_artikel' %}" class="btn btn-primary mb-3">Tambah Artikel Baru</a>
<div class="list-group">
{% for artikel in artikel_list %}
<a href="{% url 'update_artikel' artikel.id %}" class="list-group-item list-group-item-action">
<h5 class="mb-1">{{ artikel.judul }}</h5>
<p class="mb-1">{{ artikel.isi|truncatewords:20 }}</p>
<small>Dibuat pada: {{ artikel.tanggal_dibuat }}</small>
</a>
{% empty %}
<p class="text-muted">Belum ada artikel tersedia.</p>
{% endfor %}
</div>
{% endblock %}Penjelasan Kode:
btn btn-primary: Kelas Bootstrap untuk tombol dengan warna utama.list-groupdanlist-group-item: Kelas Bootstrap untuk membuat daftar item yang rapi dan responsif.
Langkah 3: Memperbarui Tampilan Tambah dan Edit Data
Untuk halaman tambah dan edit, kita akan menggunakan kelas Bootstrap untuk memperindah formulir.
- Perbarui Template
create_artikel.htmldanupdate_artikel.html:
Buka kedua file dan tambahkan kelas-kelas Bootstrap untuk mempercantik tampilan formulir.
{% extends 'crud/base.html' %}
{% block title %}Tambah Artikel{% endblock %}
{% block content %}
<h1 class="my-4">Tambah Artikel Baru</h1>
<form method="post" class="needs-validation" novalidate>
{% csrf_token %}
<div class="form-group">
{{ form.judul.label_tag }}
{{ form.judul|add_class:"form-control" }}
</div>
<div class="form-group">
{{ form.isi.label_tag }}
{{ form.isi|add_class:"form-control" }}
</div>
<button type="submit" class="btn btn-success">Simpan</button>
<a href="{% url 'list_artikel' %}" class="btn btn-secondary">Batal</a>
</form>
{% endblock %}Penjelasan Kode:
form-groupdanform-control: Kelas Bootstrap untuk menjaga formulir tetap rapi dan responsif.btn btn-successdanbtn btn-secondary: Kelas Bootstrap untuk tombol dengan warna khusus. Catatan: Untuk menambahkan kelasform-controlpada setiap field Django, Anda bisa menggunakanadd_classfilter dari pustakadjango-widget-tweaks. Anda dapat menginstalnya dengan menjalankan:
pip install django-widget-tweaksLalu, tambahkan 'widget_tweaks' di INSTALLED_APPS pada settings.py dan tambahkan {% load widget_tweaks %} di template.
Langkah 4: Memperbarui Tampilan Konfirmasi Hapus Data
Untuk halaman konfirmasi hapus data, kita juga bisa menambahkan elemen Bootstrap agar terlihat lebih profesional.
- Perbarui Template
delete_artikel.html:
Ubahdelete_artikel.htmlagar menggunakan Bootstrap.
{% extends 'crud/base.html' %}
{% block title %}Hapus Artikel{% endblock %}
{% block content %}
<h1 class="my-4 text-danger">Hapus Artikel</h1>
<p>Apakah Anda yakin ingin menghapus artikel <strong>{{ artikel.judul }}</strong>?</p>
<form method="post">
{% csrf_token %}
<button type="submit" class="btn btn-danger">Ya, Hapus</button>
<a href="{% url 'list_artikel' %}" class="btn btn-secondary">Batal</a>
</form>
{% endblock %}Penjelasan Kode:
text-danger: Kelas Bootstrap untuk teks berwarna merah.btn btn-dangerdanbtn btn-secondary: Kelas untuk tombol konfirmasi dan batal dengan warna khusus.
Langkah 5: Menguji Tampilan Baru di Browser
Setelah selesai, jalankan server Django dan buka browser untuk melihat perubahan yang telah Anda buat. Setiap halaman sekarang harus tampil lebih rapi dan menarik dengan elemen-elemen Bootstrap.
- Jalankan Server Django:
python manage.py runserver- Akses Halaman Daftar, Tambah, Edit, dan Hapus Artikel:
Lihat apakah tampilan sudah sesuai dengan yang diinginkan.
Kesimpulan
Pada artikel ini, Anda telah mempelajari:
- Cara mengintegrasikan Bootstrap ke proyek Django
- Menggunakan kelas-kelas Bootstrap untuk memperindah tampilan daftar artikel, formulir tambah/edit, dan konfirmasi hapus data
- Meningkatkan pengalaman pengguna dengan tampilan yang lebih modern dan rapi
Dengan tampilan yang lebih menarik, aplikasi CRUD Anda kini lebih profesional dan siap digunakan. Pada artikel berikutnya, kita bisa membahas cara menambahkan fitur keamanan dan validasi tambahan untuk lebih memperkuat aplikasi.
Leave a Reply