Tutorial Implementasi Bootstrap di Flask -

Bootstrap merupakan framework HTML, CSS dan Javascript yang digunakan untuk mempermudah pembuatan layout website. Dalam membangun website yang cantik bukan hanya sekedar menggunakan HTML tapi juga memerlukan CSS dan Javascript

Berikut adalah perbandingan halaman login menggunakan HTML dan Kombinasi HTML dan CSS

Mendesain halaman website dengan CSS membutuhkan kreatifitas dan insting desain yang tidak semua orang punya. Bootstrap menawarkan layanan yang dengan mudah kita panggil dan membuat halaman web kita menjadi cantik

Banyak kelebihan Bootstrap seperti

Mudah digunakan
Cocok untuk berbagai platform seperti Desktop, Mobile, Tab dst
Membuat Web Interaktif
Adanya Sistem Grid
Dokumentasi Lengkap
Banyak Font dan Icon
Memiliki komunitas yang besar
dan banyak lagi yang lain

Jadi sudah tahu kan pentingnya bootstrap? Yuk kita mulai belajarnya dan pastikan anda sudah familiar dengan konsep HTML dan CSS. Jika belum anda bisa juga membaca artikel Tutorial Dasar HTML

Contents

Menggunakan Bootstrap

Bootstrap adalah framework yang harus kita panggil dulu di dalam tag <head> dengan menggunakan tag <link>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial Bootstrap @ngodingdata</title>
    <link rel="stylesheet" type=text/css href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
</head>
<body>
    
</body>
</html>

tag <link> ini merupakan tag untuk memanggil CSS yang bisa kita simpan di lokal atau langsung dari website Bootstrap. Kalau kita buka file Bootstrap.min.css tampilannya akan seperti ini

Tutorial Implementasi Bootstrap di Flask

Bootstrap sudah menyiapkan berbagai bentuk kelas yang kita cukup panggil saja. Misalnya saat kita membuat tombol dengan tag <button> kita panggil kelasnya dengan menambahkan btn btn-primary dan variasinya dan hasilnya akan seperti ini

Keren bukan… Untuk menggunakan elemen Bootstrap kita perlu membaca halaman dokumentasinya

Containers & Grid System

containers merupakan elemen paling dasar di Bootstrap jika ingin menggunakan grid system

<div class="container">
  <!-- Content here -->
</div>

Grid System atau sistem grid digunakan untuk mengatur tata letak secara responsif. Misalnya kita tambah kode ini di dalam tag body

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Hasilnya akan terbentuk 1 baris dengan 3 kolom

Misalnya kita ingin menambah baris bisa bisa panggil class row di tag <div>

Hapus kode sebelumnya dan tempel kode berikut

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Button

adalah tombol yang ada di halaman website digunakan untuk menjalankan suatu aktifitas misal untuk login, register, post status, delete dan sebagainya. Bootstrap menawarkan berbagai bentuk Button yang menarik

Untuk mendapatkan berbagai jenis Button ini tempelkan kode dibawah ini di tag body

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Kita juga bisa atur ukuran tombol dengan menambahkan class.btn-lg or .btn-sm atau membuat tombol seperti blok dengan class .btn-block

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Table

Table digunakan untuk menyimpan data tabular yang terdiri dari kolom dan baris. Mudahnya saja anda bayangkan seperti merekap data di Excel

Untuk membuat tabel kita gunakan tag <table> dengan memanggil class table

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Faqih hamami</td>
      <td>Bandung</td>
      <td>Informatics</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob Antoni</td>
      <td>Bandung</td>
      <td>Information System</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Rano Sudrajat</td>
      <td>Jakarta</td>
      <td>Informatics</td>
    </tr>
  </tbody>
</table>

Agar bentuknya ada perbedaan warna antara baris ganjil genap bisa tambahkan kelas .table-striped

<table class="table table-striped">

Form

Elemen form digunakan untuk membuat form seperti form login, register dan sebagainya

Tag <form> digunakan untuk membuat form dengan memanggil class .form-control saat memanggil tag <input> atau <textarea>

Tempel kode ini di tag body

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form action="#">
                    <div class="mb-3 mt-3">
                    <label for="email" class="form-label">Email:</label>
                    <input type="email" class="form-control" placeholder="Email" name="email">
                    </div>
                    <div class="mb-3">
                    <label for="pwd" class="form-label">Password:</label>
                    <input type="password" class="form-control" placeholder="Input password" name="password">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>

Hasilnya keren kan.. saat kita tekan tombol submit akan divalidasi bahwa input email harus dengan formatnya karena sudah kita define tipe input adalah email

Sebenarnya masih banyak elemen lain di Bootstrap tapi sementara kita cukupkan dulu dan untuk lebih detail silahkan baca halaman dokumentasinya. Selanjutnya kita akan membahas implementasi Bootstrap di Flask

Flask dan Bootstrap

Pada pertemuan sebelumnya kita sudah belajar membuat aplikasi website dengan Flask. di artikel itu juga kita menggunakan HTML untuk menampilkan ke user. Tetapi seperti pada diskusi di atas bahwa HTML saja tidak cukup untuk membuat website yang cantik. Dibutuhkan CSS dan Javascript untuk mempercantik halaman

Bootstrap menyediakan banyak kelas yang sudah siap dipanggil dengan mudah. Kita akan coba implementasi bootstrap dengan flask

untuk hirarky dari projek ini adalah seperti ini

app.py
---static
      ---bootstarp.min.css 
---template
      ---login.html
      ---dosen.html

app.py adalah file utama untuk memanggila Flask
folder static adalah folder untuk menyimpan file css dan js
folder templates adalah folder untuk menyimpan kode HTML

File bootstrap.min.css bisa didownload di sini dan disimpan di folder static

Sebelum memulai membuat kombinasi Flask dan Bootstrap silahkan dibaca dulu artikel awal Tutorial flask – Web Framework Python

Tutorial Flask – Web Framework Python

Pertama, buatlah file dengan nama app.py dan buat objek dari kelas Flask. Selain itu juga kita panggil fungsi render_template untuk render kode HTML, url_for untuk handel URL dan redirect untuk mengarahkan ke route tertentu

from flask import Flask, render_template, url_for, redirect, request

app = Flask(__name__)

Buat route login route('/login') yang membaca halaman HTML login. Route ini menggunakan metode GET untuk bisa mengakses halaman dan POST untuk mengirimkan input login

@app.route('/login', methods=['GET', 'POST'])
def login():
    return render_template('login.html')

Tambahkan kode HTML untuk login di templates/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" type=text/css href="{{ url_for('static', filename='bootstrap.min.css') }}">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form action="#">
                    <div class="mb-3 mt-3">
                    <label for="email" class="form-label">Email:</label>
                    <input type="email" class="form-control" placeholder="Email" name="email">
                    </div>
                    <div class="mb-3">
                    <label for="pwd" class="form-label">Password:</label>
                    <input type="password" class="form-control" placeholder="Input password" name="password">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Kembali ke app.py dan tambahkan kode di paling bawah untuk menjalankan fungsi run

if __name__ == '__main__':
    app.run(debug=True, port='3000')

Set auto reload

set FLASK_ENV=development

Jalankan dengan perintah python app.py dan buka browser dengan mengetik localhost:3000/login

Ok sampai sini kita berhasil menampilkan halaman login dengan framework bootstrap. Selanjutnya kita akan modif route('/login') agar saat submit dia diredirect ke halaman dosen. Pada kasus ini kita belum mengimplementasikan autentikasi dengan username password.

Ganti kode di route('/login') menjadi seperti ini

@app.route('/login', methods=['GET','POST'])
def login():
    if request.method == 'POST':
        return redirect(url_for('dosen'))
    return render_template('login.html')

Tambahkan route('/dosen')dengan menambahkan kode ini

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

Setelah itu tambahkan kode HTML untuk halaman dosen di templates/dosen.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dosen Page</title>
    <link rel="stylesheet" type=text/css href="{{ url_for('static', filename='bootstrap.min.css') }}">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12"></div>
                <h2>Welcome Dosen</h2>
                                
                <button type="button" class="btn btn-primary float-right">Tambah Dosen</button>

                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">NIP</th>
                        <th scope="col">Nama Dosen</th>
                        <th scope="col">Jurusan</th>
                        <th scope="col">Aksi</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Faqih</td>
                        <td>Telkom University</td>
                        <td>Information System</td>
                        <td><button type="button" class="btn btn-warning btn-sm">Edit</button> <button type="button" class="btn btn-danger btn-sm">Delete</button></td> 
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Aulia</td>
                        <td>Telkom University</td>
                        <td>Informatics</td>
                        <td><button type="button" class="btn btn-warning btn-sm">Edit</button> <button type="button" class="btn btn-danger btn-sm">Delete</button></td> 
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>Ali Fauzi</td>
                        <td>Brawijaya University</td>
                        <td>Informatics</td>
                        <td><button type="button" class="btn btn-warning btn-sm">Edit</button> <button type="button" class="btn btn-danger btn-sm">Delete</button></td> 
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Terakhir pada templates/login.html edit tag form menjadi seperti ini sehingga jika tombol submit diklik akan diarahkan ke route login dengan method POST

<form action="{{ url_for('login') }}" method=post>

Buka browser dan ketik localhost:3000/dosen

Oke selanjutnya kita akan tes dari awal login sampai diarahkan ke halaman dashboard dosen

Tutorial Implementasi Bootstrap di Flask

Menggunakan Bootstrap

Containers & Grid System

Button

Table

Form

Flask dan Bootstrap

2 Comments

Leave a Reply Cancel reply

Important Pages