Scribd
Unggah
120 tayangan

Tutorial Flask - Boostrap

Dokumen ini membahas cara menghubungkan framework Flask dengan Bootstrap dan AdminLTE untuk membangun antarmuka website yang responsif. Langkah-langkahnya meliputi menginstal Bootstrap dan AdminLTE, mengimpor library-librarynya ke dalam proyek Flask, dan menggunakan template untuk menampilkan konten halaman."

Diunggah oleh

hanifah
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
120 tayangan

Tutorial Flask - Boostrap

Dokumen ini membahas cara menghubungkan framework Flask dengan Bootstrap dan AdminLTE untuk membangun antarmuka website yang responsif. Langkah-langkahnya meliputi menginstal Bootstrap dan AdminLTE, mengimpor library-librarynya ke dalam proyek Flask, dan menggunakan template untuk menampilkan konten halaman."

Diunggah oleh

hanifah
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 23

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">
            <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>
          <li class="nav-item">
            <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
{% extends 'base.html' %}
{% 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
{% extends 'base.html' %}
{% 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>

  <!-- Google Font: Source Sans Pro -->


  <link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet"
href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet"
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min
.css">
  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="../static/plugins/tempusdominus-
bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet"
href="../static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet"
href="../static/plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../static/dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet"
href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.c
ss">
  <!-- Daterange picker -->
  <link rel="stylesheet"
href="../static/plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet"
href="../static/plugins/summernote/summernote-bs4.min.css">
  <script
src='https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js'><
/script>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->


  <nav class="main-header navbar navbar-expand navbar-white navbar-
light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <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>

    <!-- Right navbar links -->


    <ul class="navbar-nav ml-auto">
      <!-- Navbar Search -->
      <li class="nav-item">
        <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>

      <!-- Messages Dropdown Menu -->


      <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">
            <!-- Message Start -->
            <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>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../static/dist/img/user8-128x128.jpg"
alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><i
class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i class="far fa-clock
mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../static/dist/img/user3-128x128.jpg"
alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><i
class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i class="far fa-clock
mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All
Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <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>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3
mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12
hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2
days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All
Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#"
role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>
      <li class="nav-item">
        <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>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->


  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <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>

    <!-- Sidebar -->


    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <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>

      <!-- SidebarSearch Form -->


      <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>

      <!-- Sidebar Menu -->


      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-
widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item">
            <a href="/" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
                <i class="right fas"></i>
              </p>
            </a>
            <li class="nav-item">
              <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>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">{% block title %} {% endblock %}</h1>
          </div><!-- /.col -->
          <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><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->


    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          {% block content %} {% endblock %}
        </div>
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <strong>Copyright &copy; 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>

  <!-- Control Sidebar -->


  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->


<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../static/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script
src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script
>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="../static/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="../static/plugins/jqvmap/jquery.vmap.min.js"></script>
<script
src="../static/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script
src="../static/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../static/plugins/moment/moment.min.js"></script>
<script
src="../static/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script
src="../static/plugins/tempusdominus-bootstrap-4/js/tempusdominus-
bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="../static/plugins/summernote/summernote-
bs4.min.js"></script>
<!-- overlayScrollbars -->
<script
src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.
min.js"></script>
<!-- AdminLTE App -->
<script src="../static/dist/js/adminlte.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../static/dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<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

{% extends 'base.html' %}
{% block title %} Dashboard{% endblock %}
{% block content %}

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


    <!-- small box -->
    <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="col-lg-3 col-6">
    <!-- small box -->
    <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="col-lg-3 col-6">


    <!-- small box -->
    <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>
      <a href="#" class="small-box-footer">More info <i class="fas
fa-arrow-circle-right"></i></a>
    </div>
  </div>
 
  <div class="col-lg-3 col-6">
    <!-- small box -->
    <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>
      <a href="#" class="small-box-footer">More info <i class="fas
fa-arrow-circle-right"></i></a>
    </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

Anda mungkin juga menyukai