Amiratur RafifahPada seri Belajar Python Part 14, kita telah berhasil mengubah aplikasi CRUD berbasis CLI menjadi aplikasi web sederhana menggunakan Flask. Aplikasi tersebut dapat menampilkan, menambah, mengedit, dan menghapus data barang melalui browser. Namun, jika diperhatikan, tampilannya masih sangat sederhana karena hanya mengandalkan HTML polos dengan sedikit CSS bawaan.
Pada belajar Python Part 15 ini, kita akan mempercantik tampilan aplikasi tersebut menggunakan Bootstrap, salah satu framework CSS paling populer di dunia. Dengan Bootstrap, kita bisa membuat tampilan aplikasi menjadi lebih rapi, responsif, dan modern tanpa perlu menulis banyak CSS dari nol.
Apa itu Bootstrap?
Bootstrap adalah framework front-end open source yang menyediakan berbagai komponen siap pakai untuk membantu developer membuat tampilan website. Komponen tersebut mencakup tombol, form, navbar, tabel, alert, hingga sistem grid untuk mengatur tata letak halaman.
Bootstrap awalnya dikembangkan oleh tim Twitter dan kini menjadi salah satu framework CSS yang banyak digunakan oleh developer. Dengan berbagai komponen siap pakai yang tersedia, Bootstrap dapat membantu proses pembuatan dan pengembangan tampilan website menjadi lebih cepat dan praktis.
Beberapa alasan mengapa Bootstrap cocok digunakan untuk mempercantik aplikasi Flask antara lain:
- Responsif dan tampilan otomatis menyesuaikan diri di berbagai ukuran layar, mulai dari desktop hingga smartphone.
- Komponen tombol, form, tabel, alert, dan navbar sudah memiliki styling bawaan yang rapi.
- Bootstrap bisa dipakai cukup dengan menambahkan tautan CDN pada file HTML, tanpa perlu instalasi tambahan di sisi Python.
- Bootstrap memiliki dokumentasi resmi yang mudah diikuti, sehingga cocok untuk pemula.
Cara Mengintegrasikan Bootstrap ke Flask
Umumnya ada dua cara untuk menggunakan Bootstrap pada aplikasi Flask, yaitu melalui CDN atau dengan mengunduh filenya secara lokal. Pada artikel ini, kita akan menggunakan CDN karena caranya paling praktis dan tidak memerlukan instalasi tambahan.
Cukup tambahkan tautan berikut pada bagian <head> di file layout utama:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Dengan menambahkan dua baris kode di atas, seluruh kelas CSS dan komponen JavaScript Bootstrap sudah dapat digunakan di template HTML kita.
Mempercantik Template Aplikasi Toko
Selanjutnya, kita akan menerapkan Bootstrap pada template yang telah dibuat di Part 14, yaitu base.html, index.html, tambah.html, dan edit.html. Struktur folder project masih sama seperti sebelumnya, kita hanya perlu memperbarui isi file template.
1. Layout Utama (base.html)
Layout utama adalah dasar dari aplikasi yang akan dibuat dan akan diperbarui dengan menambahkan navbar Bootstrap dan container agar konten lebih rapi.
<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi Toko</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
<div class="container">
<a class="navbar-brand" href="/">Sistem Manajemen Barang</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Daftar Barang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tambah">Tambah Barang</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %}{% endblock %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Pada bagian ini, elemen <nav> diubah menjadi navbar Bootstrap lengkap dengan warna latar (bg-primary) dan teks putih (navbar-dark). Selain itu, seluruh konten dibungkus dengan <div class="container"> agar memiliki margin dan lebar yang konsisten di berbagai ukuran layar.
2. Halaman Daftar Barang (index.html)
Selanjutnya, tabel daftar barang akan diperbarui menggunakan kelas tabel Bootstrap, dan flash message akan ditampilkan menggunakan komponen alert.
{# templates/index.html #}
{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4">Daftar Barang</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% set alert_class = 'success' if category == 'success' else ('danger' if category == 'error' else 'info') %}
<div class="alert alert-{{ alert_class }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<a href="/tambah" class="btn btn-primary mb-3">+ Tambah Barang</a>
<table class="table table-striped table-bordered align-middle">
<thead class="table-dark">
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Harga (Rp)</th>
<th>Stok</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
{% for item in produk %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ item['nama'] }}</td>
<td>{{ "{:,.0f}".format(item['harga']) }}</td>
<td>{{ item['stok'] }}</td>
<td>
<a href="/edit/{{ item['id'] }}" class="btn btn-sm btn-warning">Edit</a>
<a href="/hapus/{{ item['id'] }}" class="btn btn-sm btn-danger"
onclick="return confirm('Yakin hapus barang ini?')">Hapus</a>
</td>
</tr>
{% else %}
<tr><td colspan="5" class="text-center">Belum ada data barang.</td></tr>
{% endfor %}
</tbody>
</table>
{% endblock %}Note perubahan pada laman index.html:
- Tabel menggunakan kelas table table-striped table-bordered agar tampil lebih rapi dengan garis pemisah antar baris.
- Header tabel diberi kelas table-dark agar lebih menonjol.
- Flash message ditampilkan sebagai alert Bootstrap yang bisa ditutup (dismissible) menggunakan tombol close.
- Tombol Edit dan Hapus diberi warna berbeda (btn-warning dan btn-danger) agar lebih mudah dibedakan secara visual.
3. Form Tambah Barang (tambah.html)
Form input akan diperbarui menggunakan kelas form-label, form-control, dan btn dari Bootstrap.
{# templates/tambah.html #}
{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4">Tambah Barang</h2>
<form method="POST" action="/tambah" class="card p-4 shadow-sm">
<div class="mb-3">
<label class="form-label">Nama Barang</label>
<input type="text" name="nama" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Harga (Rp)</label>
<input type="number" name="harga" step="0.01" min="0" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Stok</label>
<input type="number" name="stok" min="0" class="form-control" required>
</div>
<div>
<button type="submit" class="btn btn-primary">Simpan</button>
<a href="/" class="btn btn-secondary">Batal</a>
</div>
</form>
{% endblock %}Form kini dibungkus dalam elemen card dengan sedikit bayangan (shadow-sm) agar terlihat seperti kotak formulir yang jelas, terpisah dari elemen lain di halaman.
4. Form Edit Barang (edit.html)
Pola yang sama juga diterapkan pada form edit, dengan tambahan nilai awal (value) sesuai data barang yang sedang diedit.
{# templates/edit.html #}
{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4">Edit Barang</h2>
<form method="POST" action="/edit/{{ produk['id'] }}" class="card p-4 shadow-sm">
<div class="mb-3">
<label class="form-label">Nama Barang</label>
<input type="text" name="nama" class="form-control"
value="{{ produk['nama'] }}" required>
</div>
<div class="mb-3">
<label class="form-label">Harga (Rp)</label>
<input type="number" name="harga" step="0.01" min="0" class="form-control"
value="{{ produk['harga'] }}" required>
</div>
<div class="mb-3">
<label class="form-label">Stok</label>
<input type="number" name="stok" min="0" class="form-control"
value="{{ produk['stok'] }}" required>
</div>
<div>
<button type="submit" class="btn btn-primary">Perbarui</button>
<a href="/" class="btn btn-secondary">Batal</a>
</div>
</form>
{% endblock %}Menjalankan Aplikasi
Setelah seluruh template diperbarui, jalankan kembali aplikasi seperti biasa:
cd path/ke/folder/projectpython app.pyKemudian buka browser dan akses:
http://127.0.0.1:5000Berikut contoh tampilan aplikasi yang dibuat dengan Bootstrap:
Kali ini, tampilan aplikasi sudah jauh lebih rapi. Navbar berwarna, tabel bergaris rapi dengan header gelap, tombol aksi berwarna sesuai fungsinya, serta form input yang tampil dalam kotak card dengan bayangan halus. Perubahan ini tidak mengubah satu pun logika Python di app.py maupun database.py, karena Bootstrap hanya bekerja pada sisi tampilan (frontend), sementara seluruh proses CRUD tetap berjalan seperti sebelumnya.
Source Code
Sebagai rangkuman dari materi belajar Python part 14, berikut adalah keseluruhan kode aplikasi mempercantik tampilan aplikasi python menggunakan Bootstrap. Lihat source code.
Penutup
Pada seri Belajar Python Part 15 ini, kita telah berhasil mempercantik tampilan aplikasi Flask yang sebelumnya dibangun memanfaatkan Bootstrap. Mulai dari navbar, tabel, alert, hingga form input kini tampil lebih modern dan responsif, tanpa perlu mengubah logika backend sedikit pun.
Dengan tampilan yang sudah lebih baik, aplikasi ini semakin siap untuk dikembangkan lebih lanjut. Pada Belajar Python Part 16 nanti, kita akan membahas cara melakukan deploy aplikasi Flask ini agar bisa diakses secara online melalui layanan hosting, sehingga tidak hanya berjalan di localhost saja. Semoga bermanfaat!
