Tutorial Flask – Web Framework Python

Flask adalah micro-framework Python yang digunakan untuk pengembangan aplikasi berbasis web. Flask mudah dan banyak digunakan untuk pengembangan website berbasis Python

Berdasarkan survei GitHub, Flask merupakan salah satu web framework yang paling banyak bintangnya di GitHub

Berdasarkan survei StackOverflow, Flask juga merupakan salah satu web framework yang paling banyak disukai

Source:

https://towardsdatascience.com/top-10-in-demand-web-development-frameworks-in-2021-8a5b668be0d6
https://insights.stackoverflow.com/survey/2020

Dari beberapa survei diatas jadi worth it nih belajar Flask.. Yuk mari kita mulai belajarnya

Pertama Install terlebih dulu dengan perintah

pip install flask

Flask Hello World

Untuk menggunakan Flask terlebih dahulu kita harus mengimport flask dan membuat objek dari kelas Flask

from flask import Flask

app = Flask(__name__)

Setelah itu kita buat routingnya dan kita kembalikan string hello world dengan route('/')

route('/') adalah dekorator yang digunakan untuk mendefinisikan URL apa yang memanggil fungsi dibawahnya.

@app.route('/')
def index():
    return "hello world"

Terakhir tambahkan kode untuk menjalankan aplikasi dengan fungsi run()

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

Simpan filenya dengan nama one.py dan coba jalankan

python one.py

Buka browser dan ketik alamat http://127.0.0.1:5000

Berikut adalah fullcode-nya

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "hello world"


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

Routing

di atas kita sudah mengenal cara membuat routing. Kita bisa menambahkan route lainnya dan bisa dipanggil di browser.

Misalnya kita ingin menabah routing /nama maka tambahkan kode berikut di bawah route('/nama') dan masukkan fungsi yang berbeda dengan route yang sebelumnya

@app.route('/nama')
def nama():
    return "halaman nama"

Saat kita memasukkan URL localhost:5000/nama maka fungsi nama() akan dipanggil yang menampilkan string ‘ halaman nama‘

Routing Dinamis

Kita juga membuat route dinamis berdasarkan input dari user yang dikenal dengan variable-name

Kita tambahkan parameter dengan tipe data tertentu seperti string, integer dan lainnya

Misalnya kita ingin menambah nama yang dinamis maka tambahkan route('/nama/<string:nama>') dengan fungsi getnama() yang menggunakan parameter nama

@app.route('/nama/<string:nama>')
def getnama(nama):
    return "nama anda adalah {}".format(nama)
    

Tambahkan nama anda disetelah parameter nama dan jalankan kembali aplikasinya

Auto Reload

Jika ada perubahan pada kode Flask maka harus menjalankan ulang kodenya

Hal ini tentu saja sangat menggangu dan membutuhkan waktu tambahan untuk menjalankan aplikasi kembali

Gunakan auto reload yang berfungsi untuk membaca update kode secara otomatis

Caranya mudah cukup jalankan perintah di terminal seperti ini

export FLASK_ENV=development (Untuk Linux)
set FLASK_ENV=development (Set Windows)

Maka setiap ada perubahan kode maka akan secara otomatis direload saat kode disimpan dengan shortcut CTRL + S dengan ada keterangan seperti ini

 * Restarting with windowsapi reloader
 * Debugger is active!
 * Debugger PIN: 311-127-285
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Render HTML

Kita bisa memasukkan kode HTML sehingga output lebih menarik

Misalnya kita tambahkan route('/mahasiswa') untuk menampilkan judul yang berbentuk Heading

@app.route('/mahasiswa')
def getmahasiswa():
    return '<h1>Data Mahasiwa</h1>'

Note: Jika belum familiar dengan kode HTML bisa belajar di artikel ‘Tutorial Dasar HTML untuk Pemula‘

Tentu saja cara seperti kurang cocok jika banyak tag yang ditampilkan

Untuk lebih memudahkan gunakan fungsi render_template() yang digunakan untuk render kode HTML

Kita siapkan file HTML misal dengan nama mahasiswa.html yang kita simpan di folder templates (harus dengan nama ini)

Stuktur folder adalah sebagai berikut

myFlask -- one.py
        -- templates
                     -- mahasiswa.html

Misalnya kita punya folder utama yang bernama myFlask yang didalamnya terdapat file one.py dan folder templates

Pada file one.py panggil render_template terlebih dulu

from flask import Flask, render_template

Masukkan kode HMTL berikut ke templates/mahasiswa.html

<html>
    <head>
        <title>Halaman Mahasiswa</title>
    </head>
    <body>
        <h2>Welcome Mahasiswa</h2>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quidem saepe, debitis ipsa sequi voluptate explicabo culpa assumenda porro atque fugiat animi, non nam accusamus, expedita eius. Ratione, debitis voluptatibus.</p>
    </body>
</html>

modifikasi route('/mahasiswa') seperti ini

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

Refresh browser dan hasilnya akan seperti ini

Jinja Template

Flask menggunakan template engine yang bernama Jinja2 Template. dengan Jinja2 variabel dan ekspresi yang dituliskan di kode Python dapat ditampilkan juga saat HTML dirender

Misalnya kita ingin menambahkan variabel kelas di route('/mahasiswa') dan ditampilkan di kode HTML

Modifikasi one.py di route mahasiswa

@app.route('/mahasiswa')
def getmahasiswa():
    kelas = 'IF-4201'
    return render_template('mahasiswa.html', kelas=kelas)

Tambahkan tag Heading 3 di mahasiswa.html serta cetak variabel kelas dengan sintaks {{ kelas }}

<html>
    <head>
        <title>Halaman Mahasiswa</title>
    </head>
    <body>
        <h2>Hello Mahasiswa</h2>
        <h3>Ini adalah Kelas {{ kelas }}</h3>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quidem saepe, debitis ipsa sequi voluptate explicabo culpa assumenda porro atque fugiat animi, non nam accusamus, expedita eius. Ratione, debitis voluptatibus.</p>
    </body>
</html>

Simpan kode dan reload browser maka akan muncul nama kelas yang sudah didefinsikan

Dalam Jinja2 Template ada beberapa beberapa delimiter untuk keluar dari HTML seperti untuk mencetak variabel, menggunakan IF statement dan perulangan

{% ... %} untuk Pernyataan seperti IF dan FOR
{{ ... }} untuk mencetak variabel/ekspresi ke template
{# ... #} untuk Komentar yang tidak disertakan 

FOR dan IF Statement

Kita juga bisa masukkan pernyataan for dan if untuk dirender di HMTL.

berikut adalah contoh untuk menampilkan list tanpa menggunakan for

buatlah route('/dosen') yang mempunyai hobi ['membaca', 'jalan-jalan', 'nonton']

@app.route('/dosen')
def getdosen():
    hobi = ['membaca', 'jalan-jalan', 'nonton']
    return render_template('dosen.html', hobi=hobi)

buat file dosen.html di folder templates dan masukkan kode ini

<html>
    <head>
        <title>Halaman Dosen</title>
    </head>
    <body>
        <h2>Hello Dosen</h2>

        <p>
            hobi dosen : 
                <ul>
                    <li>{{hobi[0]}}</li>
                    <li>{{hobi[1]}}</li>
                    <li>{{hobi[2]}}</li>
                </ul>
        </p>
    </body>
</html>

Hasilnya adalah

Tapi tentu saja cara ini tidak bagus karena tidak dinamis

Kita bisa gunakan for di Jinja2 Template dengan {% for %}

Ganti kode di tag <ul></ul> seperti ini

            <ul>
                {% for i in hobi %}
                    <li>{{i}}</li>
                {% endfor %}
            </ul>

Final Code

Berikut adalah final code dari aplikasi sederhana dengan Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return "hello world"

@app.route('/nama')
def nama():
    return "halaman nama"

# routing flask dinamis
@app.route('/nama/<string:nama>')
def getnama(nama):
    return "nama anda adalah {}".format(nama)

@app.route('/mahasiswa')
def getmahasiswa():
    kelas = 'IF-4201'
    return render_template('mahasiswa.html', kelas=kelas)

@app.route('/dosen')
def getdosen():
    hobi = ['membaca', 'jalan-jalan', 'nonton']
    return render_template('dosen.html', hobi=hobi)

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

Ini adalah adalah tutorial part 1 dari pengenalan web framework Flask

Selanjutnya di tutorial Flask part 2 akan membahas integrasi Flask dengan Bootstrap agar tampilan web lebih elegan dan fitur-fitur Flask lainnya. So Stay tuned 😀