1.3.2 Integrasi Bootstrap dengan Flask - dvrg/flask-web-development GitHub Wiki
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:
- Buka https://getbootstrap.com/docs/4.4/getting-started/introduction/
- Copy dan Paste CDN CSS di bawah tag head pada
base.htmlsehingga 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>- Copy dan Paste juga CDN JS di atas
</body>padabase.htmlsehingga 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 😄
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.