{"id":66653,"date":"2026-08-18T08:23:00","date_gmt":"2026-08-18T01:23:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=66653"},"modified":"2026-08-18T08:53:03","modified_gmt":"2026-08-18T01:53:03","slug":"belajar-python-part-15","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-python-part-15\/","title":{"rendered":"Belajar Python Part 15: Mempercantik Flask dengan Bootstrap"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pada seri Belajar Python <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-python-part-14\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Part 14<\/a>, 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 <em>browser<\/em>. Namun, jika diperhatikan, tampilannya masih sangat sederhana karena hanya mengandalkan HTML polos dengan sedikit CSS bawaan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pada belajar Python Part 15 ini, kita akan mempercantik tampilan aplikasi tersebut menggunakan Bootstrap, salah satu <em>framework <\/em>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Bootstrap?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blog.rumahweb.com\/bootstrap-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"Bootstrap adalah\">Bootstrap<\/a> adalah <em>framework<\/em> <em>front-end<\/em> <em>open source<\/em> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap awalnya dikembangkan oleh tim Twitter dan kini menjadi salah satu <em>framework<\/em> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beberapa alasan mengapa Bootstrap cocok digunakan untuk mempercantik aplikasi Flask antara lain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Responsif dan tampilan otomatis menyesuaikan diri di berbagai ukuran layar, mulai dari desktop hingga smartphone.<\/li>\n\n\n\n<li>Komponen tombol, form, tabel, alert, dan navbar sudah memiliki <em>styling <\/em>bawaan yang rapi.<\/li>\n\n\n\n<li>Bootstrap bisa dipakai cukup dengan menambahkan tautan CDN pada file HTML, tanpa perlu instalasi tambahan di sisi Python.<\/li>\n\n\n\n<li>Bootstrap memiliki dokumentasi resmi yang mudah diikuti, sehingga cocok untuk pemula.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Cara Mengintegrasikan Bootstrap ke Flask<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Umumnya ada dua cara untuk menggunakan Bootstrap pada aplikasi <a href=\"https:\/\/blog.rumahweb.com\/flask-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"Flask adalah\">Flask<\/a>, 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cukup tambahkan tautan berikut pada bagian <code>&lt;head&gt;<\/code> di file layout utama:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dengan menambahkan dua baris kode di atas, seluruh kelas CSS dan komponen JavaScript Bootstrap sudah dapat digunakan di template HTML kita.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mempercantik Template Aplikasi Toko<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Layout Utama (base.html)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Layout utama adalah dasar dari aplikasi yang akan dibuat dan akan diperbarui dengan menambahkan navbar Bootstrap dan container agar konten lebih rapi.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- templates\/base.html --&gt;\n&lt;!DOCTYPE html&gt;\n\n&lt;html lang=\"id\"&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=\"UTF-8\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Aplikasi Toko&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\n\n&lt;\/head&gt;\n\n&lt;body class=\"bg-light\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-primary mb-4\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"container\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"navbar-brand\" href=\"\/\"&gt;Sistem Manajemen Barang&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"collapse navbar-collapse\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"navbar-nav\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"nav-item\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"nav-link\" href=\"\/\"&gt;Daftar Barang&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/li&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"nav-item\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"nav-link\" href=\"\/tambah\"&gt;Tambah Barang&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/li&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"container\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% block content %}{% endblock %}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Pada bagian ini, elemen <code>&lt;nav&gt;<\/code> diubah menjadi navbar Bootstrap lengkap dengan warna latar (bg-primary) dan teks putih (navbar-dark). Selain itu, seluruh konten dibungkus dengan <code>&lt;div class=\"container\"&gt;<\/code> agar memiliki margin dan lebar yang konsisten di berbagai ukuran layar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Halaman Daftar Barang (index.html)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Selanjutnya, tabel daftar barang akan diperbarui menggunakan kelas tabel Bootstrap, dan flash message akan ditampilkan menggunakan komponen alert.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{# templates\/index.html #}\n{% extends 'base.html' %}\n\n{% block content %}\n\n&lt;h2 class=\"mb-4\"&gt;Daftar Barang&lt;\/h2&gt;\n\n{% with messages = get_flashed_messages(with_categories=true) %}\n\n&nbsp;&nbsp;{% if messages %}\n\n&nbsp;&nbsp;&nbsp;&nbsp;{% for category, message in messages %}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% set alert_class = 'success' if category == 'success' else ('danger' if category == 'error' else 'info') %}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"alert alert-{{ alert_class }} alert-dismissible fade show\" role=\"alert\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ message }}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"&gt;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;{% endfor %}\n\n&nbsp;&nbsp;{% endif %}\n\n{% endwith %}\n\n&lt;a href=\"\/tambah\" class=\"btn btn-primary mb-3\"&gt;+ Tambah Barang&lt;\/a&gt;\n\n&lt;table class=\"table table-striped table-bordered align-middle\"&gt;\n\n&nbsp;&nbsp;&lt;thead class=\"table-dark\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;No&lt;\/th&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Nama Barang&lt;\/th&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Harga (Rp)&lt;\/th&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Stok&lt;\/th&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Aksi&lt;\/th&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&lt;\/thead&gt;\n\n&nbsp;&nbsp;&lt;tbody&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;{% for item in produk %}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;{{ loop.index }}&lt;\/td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;{{ item&#91;'nama'] }}&lt;\/td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;{{ \"{:,.0f}\".format(item&#91;'harga']) }}&lt;\/td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;{{ item&#91;'stok'] }}&lt;\/td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"\/edit\/{{ item&#91;'id'] }}\" class=\"btn btn-sm btn-warning\"&gt;Edit&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"\/hapus\/{{ item&#91;'id'] }}\" class=\"btn btn-sm btn-danger\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onclick=\"return confirm('Yakin hapus barang ini?')\"&gt;Hapus&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/td&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;{% else %}\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;&lt;td colspan=\"5\" class=\"text-center\"&gt;Belum ada data barang.&lt;\/td&gt;&lt;\/tr&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;{% endfor %}\n\n&nbsp;&nbsp;&lt;\/tbody&gt;\n\n&lt;\/table&gt;\n\n{% endblock %}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Note perubahan pada laman index.html:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tabel menggunakan kelas table table-striped table-bordered agar tampil lebih rapi dengan garis pemisah antar baris.<\/li>\n\n\n\n<li>Header tabel diberi kelas table-dark agar lebih menonjol.<\/li>\n\n\n\n<li>Flash message ditampilkan sebagai alert Bootstrap yang bisa ditutup (dismissible) menggunakan tombol close.<\/li>\n\n\n\n<li>Tombol Edit dan Hapus diberi warna berbeda (btn-warning dan btn-danger) agar lebih mudah dibedakan secara visual.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Form Tambah Barang (tambah.html)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Form input akan diperbarui menggunakan kelas form-label, form-control, dan btn dari Bootstrap.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{# templates\/tambah.html #}\n\n{% extends 'base.html' %}\n\n{% block content %}\n\n&lt;h2 class=\"mb-4\"&gt;Tambah Barang&lt;\/h2&gt;\n\n&lt;form method=\"POST\" action=\"\/tambah\" class=\"card p-4 shadow-sm\"&gt;\n\n&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-label\"&gt;Nama Barang&lt;\/label&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"text\" name=\"nama\" class=\"form-control\" required&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-label\"&gt;Harga (Rp)&lt;\/label&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"number\" name=\"harga\" step=\"0.01\" min=\"0\" class=\"form-control\" required&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-label\"&gt;Stok&lt;\/label&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"number\" name=\"stok\" min=\"0\" class=\"form-control\" required&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Simpan&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"\/\" class=\"btn btn-secondary\"&gt;Batal&lt;\/a&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&lt;\/form&gt;\n\n{% endblock %}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Form kini dibungkus dalam elemen card dengan sedikit bayangan (shadow-sm) agar terlihat seperti kotak formulir yang jelas, terpisah dari elemen lain di halaman.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Form Edit Barang (edit.html)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pola yang sama juga diterapkan pada form edit, dengan tambahan nilai awal (value) sesuai data barang yang sedang diedit.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{# templates\/edit.html #}\n\n{% extends 'base.html' %}\n\n{% block content %}\n\n&lt;h2 class=\"mb-4\"&gt;Edit Barang&lt;\/h2&gt;\n\n&lt;form method=\"POST\" action=\"\/edit\/{{ produk&#91;'id'] }}\" class=\"card p-4 shadow-sm\"&gt;\n\n&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-label\"&gt;Nama Barang&lt;\/label&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"text\" name=\"nama\" class=\"form-control\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=\"{{ produk&#91;'nama'] }}\" required&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-label\"&gt;Harga (Rp)&lt;\/label&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"number\" name=\"harga\" step=\"0.01\" min=\"0\" class=\"form-control\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=\"{{ produk&#91;'harga'] }}\" required&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label class=\"form-label\"&gt;Stok&lt;\/label&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=\"number\" name=\"stok\" min=\"0\" class=\"form-control\"\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=\"{{ produk&#91;'stok'] }}\" required&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Perbarui&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"\/\" class=\"btn btn-secondary\"&gt;Batal&lt;\/a&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&lt;\/form&gt;\n\n{% endblock %}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Menjalankan Aplikasi<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah seluruh template diperbarui, jalankan kembali aplikasi seperti biasa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd path\/ke\/folder\/project<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>python app.py<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Kemudian buka browser dan akses:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;127.0.0.1:5000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut contoh tampilan aplikasi yang dibuat dengan Bootstrap:<br \/><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"381\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-1024x381.png\" alt=\"Daftar Barang\" class=\"wp-image-67479\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-1024x381.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-300x112.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-768x286.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-370x138.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-270x100.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-570x212.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang-740x275.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Daftar-barang.png 1232w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br \/><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-1024x449.png\" alt=\"Tambah Barang\" class=\"wp-image-67480\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-1024x449.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-300x132.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-768x337.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-370x162.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-270x119.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-570x250.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang-740x325.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Tambah-barang.png 1171w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br \/>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><em>Source Code<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sebagai rangkuman dari materi belajar Python part 14, berikut adalah keseluruhan kode aplikasi &nbsp;mempercantik tampilan aplikasi python menggunakan Bootstrap. Lihat <a href=\"https:\/\/github.com\/frayacode\/bootstrapaplikasipython\" target=\"_blank\" rel=\"noopener\" title=\"\"><em>source code<\/em>.<\/a>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penutup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada 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 [&hellip;]<\/p>\n","protected":false},"author":354,"featured_media":67402,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[2483,1176,2485],"class_list":["post-66653","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-programming","tag-belajar-python","tag-python","tag-python-dasar"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Amiratur Rafifah\"\/>\n\t<meta name=\"google-site-verification\" content=\"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ\" \/>\n\t<meta name=\"keywords\" content=\"belajar python,python,python dasar\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.rumahweb.com\/journal\/belajar-python-part-15\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"id_Id\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Rumahweb Journal \u2013 Panduan Website, Hosting, dan Server\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Belajar Python Part 15: Mempercantik Flask dengan Bootstrap\" \/>\n\t\t<meta property=\"og:description\" content=\"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.rumahweb.com\/journal\/belajar-python-part-15\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Belajar-Python-Part-15.webp\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Belajar-Python-Part-15.webp\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-08-18T01:23:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-08-18T01:53:03+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RumahwebIndonesia\/\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@rumahwebtweet\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Belajar Python Part 15: Mempercantik Flask dengan Bootstrap\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@rumahwebtweet\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Belajar-Python-Part-15.webp\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Belajar Python Part 15: Mempercantik Flask dengan Bootstrap","description":"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.","canonical_url":"https:\/\/www.rumahweb.com\/journal\/belajar-python-part-15\/","robots":"max-image-preview:large","keywords":"belajar python,python,python dasar","webmasterTools":{"google-site-verification":"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ","miscellaneous":""},"schema":null,"og:locale":"id_Id","og:site_name":"Rumahweb Journal \u2013 Panduan Website, Hosting, dan Server","og:type":"article","og:title":"Belajar Python Part 15: Mempercantik Flask dengan Bootstrap","og:description":"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.","og:url":"https:\/\/www.rumahweb.com\/journal\/belajar-python-part-15\/","og:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Belajar-Python-Part-15.webp","og:image:secure_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Belajar-Python-Part-15.webp","og:image:width":1200,"og:image:height":631,"article:published_time":"2026-08-18T01:23:00+00:00","article:modified_time":"2026-08-18T01:53:03+00:00","article:publisher":"https:\/\/www.facebook.com\/RumahwebIndonesia\/","twitter:card":"summary_large_image","twitter:site":"@rumahwebtweet","twitter:title":"Belajar Python Part 15: Mempercantik Flask dengan Bootstrap","twitter:description":"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.","twitter:creator":"@rumahwebtweet","twitter:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/Banner-Belajar-Python-Part-15.webp"},"aioseo_meta_data":{"post_id":"66653","title":null,"description":"Dalam Belajar Python Part 15, kita akan mempercantik tampilan aplikasi Flask menggunakan Bootstrap, salah satu framework CSS paling populer di dunia.","keywords":null,"keyphrases":{"focus":{"keyphrase":"Belajar Python","score":0,"analysis":[]},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-07-22 09:34:47","updated":"2026-08-18 01:53:50","seo_analyzer_scan_date":null,"focus_keyword":"Belajar Python","additional_keywords":null,"truseo_locale":"id_ID"},"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/354"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=66653"}],"version-history":[{"count":11,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66653\/revisions"}],"predecessor-version":[{"id":67481,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66653\/revisions\/67481"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/67402"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=66653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=66653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=66653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}