Skip to content

1.3.2 Integrasi Bootstrap dengan Flask

Jump to bottom
David Rigan edited this page Feb 12, 2020 · 1 revision

Integrasi Bootstrap menggunakan CDN

Bootstrap membantu menciptakan antarmuka web menjadi lebih atraktif dan lebih bersih dan compatible dengan semua web browser baik desktop ataupun mobile, dan ini open-source. Di sesi ini kamu akan integrasikan bootstrap dengan web kamu dengan menggunakan CDN. Langkahnya seperti ini:

  1. Buka https://getbootstrap.com/docs/4.4/getting-started/introduction/
  2. Copy dan Paste CDN CSS di bawah tag head pada base.html sehingga menjadi seperti ini
# templates/base.html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>{% block title %}{% endblock %} - My App</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
  1. Copy dan Paste juga CDN JS di atas </body> pada base.html sehingga kode lengkapnya seperti ini
# templates/base.html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>{% block title %}{% endblock %} - My App</title>
</head>
<body>
    {% block content %}{% endblock %}
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Selanjutnya coba jalankan kembali flask run dan pastikan style pada tampilannya berubah 😄

Menambahkan Navbar

Selanjutnya buatlah file baru pada folder templates dengan nama navbar.html sehingga struktur direktory kamu menjadi seperti ini:

├── env/
|   └── .....
├── templates/
|   └── base.html
|   └── navbar.html
|   └── user.html
├── app.py

Lalu tambahkan kode berikut ini pada navbar.html:

# templates/navbar.html
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

navbar.html ini nanti berfungsi sebagai navbar kamu yang bisa kamu panggil secara terus menerus. Caranya tuliskan {% include 'navbar.html' %} dibawah tag body pada base.html sehingga seperti ini:

# templates/base.html
...
<body>
{% include 'navbar.html' %}
...

Kemudian kamu ubah:

...
{% if name %}
    <h1>Hello, {{ name }}</h1>
{% endif %}
...

yang ada di bawah {% block content %} pada user.html menjadi:

# templates/user.html
...
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Hello, {{ name }}</h1>
  </div>
</div>
...

Sekarang kamu restart web browser kamu dan lihat perubahannya.

Referensi :

  • Miguel Grinberg - Flask Web Development, Developing Web Applications with Python

Clone this wiki locally