Tutorial Flask - Boostrap

Menghubungkan Flask dengan Boostrap
Pengenalan Boostrap dan Flask
Tujuan 1. Memahami apa itu SQLite dan Flask
Pendahuluan
Flask adalah kerangka kerja aplikasi web bersifat
kerangka kerja mikro yang ditulis dalam bahasa
pemrograman Python dan menggunakan dependensi
Werkzeug dan Jinja2.
Flask bisa digunakan untuk membuat website rumit yang berbasis database, memulai dengan
membuat halaman statik berguna untuk memperkenalkan alur kerja, yang nantinya digunakan
untuk membuat halaman lain yang lebih rumit.
Bootstrap adalah framework open-source khusus front end yang

awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk
mempermudah dan mempercepat pengembangan web di front
end.Bootstrap memiliki semua jenis HTML dan template desain
berbasis CSS untuk berbagai fungsi dan komponen, seperti
navigasi, sistem grid, carousel gambar, dan tombol
(button).Framework ini memang menghemat waktu developer
karena tidak perlu mengelola template berkali-kali. Namun, fungsi
utama dari Bootstrap adalah untuk membuat situs yang responsif. Interface website akan
bekerja secara optimal di semua ukuran layar baik di layar smartphone maupun layar
komputer/laptop.
Tahap Instalasi
Langkah Pengerjaan
1. Download Boostrap di https://getbootstrap.com/docs/5.1/getting-started/download

Pilih yang compiled css and js
2. Jika sudah, hasil download nya akan seperti ini
3. Selanjutnya file tersebut dapat di ekstrak ke folder project yang di inginkan
4. Hasil ekstrak an akan seperti di atas
Menggabungkan flask dengan boostrap biasa

Langkah Pengerjaan
1. Buat Folder static didalam folder project anda
2. Setelah itu ektrak boostrap yang sudah didownload tadi didalam folder static
3. Setelah itu kembali dan buka folder templates dan buat file base.html untuk template
4. Selanjutnya kreasikan tampilan html sesuai kenginan contoh seperti dibawah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Smart Home</title>
<link rel="stylesheet"
href="../static/css/bootstrap.rtl.min.css">
<script src="../static/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNavDropdown" aria-
controls="navbarNavDropdown" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active"
href="/login">Login</a>
</li>
<a class="nav-link" aria-current="page"
href="/">Suhu</a>
</li>
<a class="nav-link" href="/lampu">Lampu</a>
</li>

</ul>
</div>
<span class="navbar-text">
<a class="nav-link" href="#">Log out</a>
</span>
</div>

</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
</body>
</html>
5. Jangan lupa dihead panggil library dari bootstrap seperti diabawah
6. Setelah itu buat block content di div class=container untuk mengisi content nantintya
7. Setelah itu buat file lagi yang bernama index.html

8. Untuk file index tidak perlu menuliskan lagi kode sebelumnya kita hanya perlu
mengextends file base.html dan mengisi block content sepertid dibawah
{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-center">
<table class="table table-striped">
<thead>
<tr>
<th colspan="3" ><p class="text-center">Udara</p></th>

</tr>
</thead>
<tbody>
<tr>
<td>Suhu</td>
<td>8 C'</td>
</tr>
<tr>
<td>Kelembapan</td>
<td>9</td>

</tr>
</tbody>
</table>
</div>
{% endblock %}
9. Setelah itu buat file lampu.html isinya sama seperti diatas tapi isi dari bloc
contentnnya berbeda
{% block content %}
<h1 class="text-center">On / Off Lampu</h1>
<p class="text-center"><a href="#" class="btn btn-primary btn-lg
active" role="button" aria-pressed="true">On</a></p>
{% endblock %}
10. Setelah itu buat file login.html untuk form login yang isinya seperti sebelumnya tapi
isi dari block contentnya beda
{% block content %}
<h1 class="text-center">Login</h1>
<div class="row justify-content-center">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control"
id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% endblock %}
11. Setelah itu kembali dan buat file app.py
12. Setelah itu ketik kode dibawah ini untuk mengimportkan library flask
13. Setelah buat variable flask untuk merun project
14. Setelah itu buat route untuk memanggil file html yang sudah dibuat
15. Untuk jadinya seperti dibawah
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def suhu():

return render_template('index.html')
@app.route('/lampu')
def lampu():

return render_template('lampu.html')
@app.route('/login')
def login():

return render_template('login.html')
16. Jika selesai run project anda hasilnya akan seperti dibawah
Menggabungkan Flask dengan adminLte
1. Download adminLte disini
https://github.com/ColorlibHQ/AdminLTE/archive/refs/tags/v3.1.0.zip
2. Jika sudah, hasil download nya akan seperti ini
3. Setelah itu ektrak adminLte maka hasilnya akan seperti dibawah

4. Setelah diekstak copy folder build, dist, plugins ke folder static kalian
5. Setelah itu copy file index.html dari adminLte ke folder templates kalian dan ubah namanya
menjadi base.html
6. Setelah itu edit file base.html sesuai dengan ketentuan seperti sebelumnya dengan mengubah
directory librarynya menjadi isi dari folder static
7. Setelah itu berikan block content

8. Untuk selengkapnya bisa copy kode dibawah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>AdminLTE 3 | Dashboard</title>


<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,400i,700&display=fallback">

href="../static/plugins/fontawesome-free/css/all.min.css">

href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min
.css">

<link rel="stylesheet" href="../static/plugins/tempusdominus-
bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

href="../static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

href="../static/plugins/jqvmap/jqvmap.min.css">

<link rel="stylesheet" href="../static/dist/css/adminlte.min.css">

href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.c
ss">

href="../static/plugins/daterangepicker/daterangepicker.css">

href="../static/plugins/summernote/summernote-bs4.min.css">
<script
src='https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js'><
/script>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">


<nav class="main-header navbar navbar-expand navbar-white navbar-
light">

<ul class="navbar-nav">
<a class="nav-link" data-widget="pushmenu" href="#"
role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>


<ul class="navbar-nav ml-auto">

<a class="nav-link" data-widget="navbar-search" href="#"
role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar"
type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-
widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>


<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-
right">
<a href="#" class="dropdown-item">

<div class="media">
<img src="../static/dist/img/user1-128x128.jpg"
alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i
class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock
mr-1"></i> 4 Hours Ago</p>
</div>
</div>

</a>
<div class="dropdown-divider"></div>
<div class="media">
alt="User Avatar" class="img-size-50 img-circle mr-3">
John Pierce
<span class="float-right text-sm text-muted"><i
</h3>
<p class="text-sm">I got your message bro</p>
</div>
</div>
</a>
<div class="media">
alt="User Avatar" class="img-size-50 img-circle mr-3">
Nora Silvester
<span class="float-right text-sm text-warning"><i
</h3>
<p class="text-sm">The subject goes here</p>
</div>
</div>
</a>
<a href="#" class="dropdown-item dropdown-footer">See All
Messages</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-
right">
<span class="dropdown-item dropdown-header">15
Notifications</span>
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3
mins</span>
</a>
<i class="fas fa-users mr-2"></i> 8 friend requests
hours</span>
</a>
<i class="fas fa-file mr-2"></i> 3 new reports
days</span>
</a>
<a href="#" class="dropdown-item dropdown-footer">See All
Notifications</a>
</div>
</li>
<a class="nav-link" data-widget="fullscreen" href="#"
role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<a class="nav-link" data-widget="control-sidebar" data-
slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>



<aside class="main-sidebar sidebar-dark-primary elevation-4">

<a href="/" class="brand-link">
<img src="../static/dist/img/AdminLTELogo.png" alt="AdminLTE
Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>


<div class="sidebar">

<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="../static/dist/img/user2-160x160.jpg" class="img-
circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">Alexander Pierce</a>
</div>
</div>


<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar"
type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>


<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-
widget="treeview" role="menu" data-accordion="false">

<a href="/" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas"></i>
</p>
</a>
<a href="/lampu" class="nav-link">
<i class="nav-icon fas fa-battery-empty"></i>
<p>
Lampu
<i class="right fas"></i>
</p>
</a>

</ul>
</nav>

</div>

</aside>


<div class="content-wrapper">

<div class="content-header">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">{% block title %} {% endblock %}</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#"></a></li>
<li class="breadcrumb-item active"></li>
</ol>
</div>
</div>
</div>
</div>



<section class="content">

<div class="row">
{% block content %} {% endblock %}
</div>

</div>
</section>

</div>

<footer class="main-footer">
<strong>Copyright © 2014-2021 <a
href="https://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.1.0
</div>
</footer>


<aside class="control-sidebar control-sidebar-dark">

</aside>

</div>



<script src="../static/plugins/jquery/jquery.min.js"></script>

<script src="../static/plugins/jquery-ui/jquery-ui.min.js"></script>

<script>
$.widget.bridge('uibutton', $.ui.button)
</script>

<script
src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script
>

<script src="../static/plugins/chart.js/Chart.min.js"></script>

<script src="../static/plugins/sparklines/sparkline.js"></script>

<script src="../static/plugins/jqvmap/jquery.vmap.min.js"></script>
<script
src="../static/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>

<script
src="../static/plugins/jquery-knob/jquery.knob.min.js"></script>

<script src="../static/plugins/moment/moment.min.js"></script>
<script
src="../static/plugins/daterangepicker/daterangepicker.js"></script>

<script
src="../static/plugins/tempusdominus-bootstrap-4/js/tempusdominus-
bootstrap-4.min.js"></script>

<script src="../static/plugins/summernote/summernote-
bs4.min.js"></script>

<script
src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.
min.js"></script>

<script src="../static/dist/js/adminlte.js"></script>

<script src="../static/dist/js/demo.js"></script>

<script src="../static/dist/js/pages/dashboard.js"></script>
</body>
</html>
9. Setelah buat file index.html untuk file index tidak perlu menuliskan lagi kode
sebelumnya kita hanya perlu mengextends file base.html dan mengisi block content
sepertid dibawah
{% block title %} Dashboard{% endblock %}
{% block content %}
<div class="col-lg-3 col-6">


<div class="small-box bg-info">
<div class="inner">
<h3>Suhu</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
<a href="/chartSuhu" class="small-box-footer">More info <i
class="fas fa-arrow-circle-right"></i></a>
</div>
</div>


<div class="small-box bg-warning">
<div class="inner">
<h3>Kelembapan</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
<a href="#" class="small-box-footer">More info <i class="fas
fa-arrow-circle-right"></i></a>
</div>
</div>


<div class="small-box bg-danger">
<div class="inner">
<h3>Suhu</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
</div>
</div>


<div class="small-box bg-image">
<div class="inner">
<h3>Kelembapan</h3>
<p>C</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
</div>
</div>
{% block chart %} {% endblock %}
{% endblock %}
10. Setelah itu kembali dan buat app.py untuk isi app.py seperti yang ada dibawah
from flask import Flask, render_template

import datetime
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('index.html')
@app.route('/chartSuhu')
def suhu():
return render_template('chart.html')
@app.route('/lampu')
def lampu():
return render_template('lampu.html')
11. Jika langkah anda sudah benar akan muncul tampilan seperti yang ada dibawah

Tutorial Flask - Boostrap

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Flask - Boostrap

Diunggah oleh

Hak Cipta:

Format Tersedia

Menghubungkan Flask dengan Boostrap

Pengenalan Boostrap dan Flask

Tujuan 1. Memahami apa itu SQLite dan Flask

Bootstrap adalah framework open-source khusus front end yang

1. Download Boostrap di https://getbootstrap.com/docs/5.1/getting-started/download

2. Jika sudah, hasil download nya akan seperti ini

3. Selanjutnya file tersebut dapat di ekstrak ke folder project yang di inginkan

4. Hasil ekstrak an akan seperti di atas

Menggabungkan flask dengan boostrap biasa

1. Buat Folder static didalam folder project anda

4. Selanjutnya kreasikan tampilan html sesuai kenginan contoh seperti dibawah

5. Jangan lupa dihead panggil library dari bootstrap seperti diabawah

7. Setelah itu buat file lagi yang bernama index.html

11. Setelah itu kembali dan buat file app.py

13. Setelah buat variable flask untuk merun project

from flask import Flask, render_template

2. Jika sudah, hasil download nya akan seperti ini

3. Setelah itu ektrak adminLte maka hasilnya akan seperti dibawah

7. Setelah itu berikan block content

<div class="col-lg-3 col-6">

<div class="col-lg-3 col-6">

from flask import Flask, render_template

Anda mungkin juga menyukai