Dasar pemrograman Flask dengan Pycharm

Pada pembahasan kali ini, saya akan mencoba mereview tentang Flask. apa itu Flask? Flask adalah salah satu framework di python yang digunakan untuk membuat web application. Begitu mudahnya membuat web app dengan Flask. Kita cukup mengetikkan beberapa baris, lalu run. Aplikasi kita sudah bisa dijalankan.

Oke, penasaran? langsung saja. Berikut langkah2 membuat web app dengan Flask di pycharm.

Membuat project dan setting environment variable

buat project baru di pycharm via File > New Project
buat folder baru misalnya basic (optional)
buat environment variabel via File > Setting > Project Interpreter
pada window project interpreter klik tombol setting. lalu pilih Add
Check New Environment dan pilih folder tertentu sebagai environment variable
klik ok

Install requirement untuk flask

untuk masuk ke terminal pycharm, klik tab terminal di bagian bawah IDE
Install flask melalui pip

pip install flask

untuk mengecek versi Flask, ketikkan perintah berikut

flask --version

Membuat web app dengan Flask

Setelah semua requirement terinstall, berikutnya kita akan membuat web app menggunakan flask. berikut langkah2nya:

klik kanan folder basic pilih New > Python File
berinama file dengan app.py
tuliskan script berikut pada file app.py

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
       return 'Bismillah'
if __name__ == '__main__':
       app.run(debug=True)

untuk menjalankan, ketikkan perintah berikut

$ python app.py

atau

$ flask run

untuk melihat tampilan web kita, ctrl + click pada link di terminal yang akan diarahkan ke http://127.0.0.1:5000. Jika tidak ada error, aplikasi anda akan muncul disana.

Menggunakan render template untuk mempercantik tampilan

Selain mengembalikan string biasa, flask juga dapat mengembalikan render_template yang diasosiasikan dengan file html tertentu. Ini berfungsi seperti template pada umumnya, dimana kita mengirimkan data yang nantinya akan diparsing oleh template tersebut. Flask menggunakan jinja templating.

Untuk membuat template kita perlu mengubah fungsi index diatas menjadi seperti berikut:

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

Pastikan kita membuat file index.html dibawah folder templates. Disini saya mengambil contoh kode dari startertemplate milik bootstrap.

Kita juga bisa menambahkan parameter pada fungsi render_template. Parameter tersebut dapat di print di file template. Berikut contoh kodenya.

@app.route('/hello/<name>/')
def hello(name):
    return render_template('index.html', name=name)

Kita bisa memanggil parameter di jinja2 dengan syntax berikut.

<h1 class="jumbotron-heading">Assalamualaikum {{ name }}</h1>

Dengan templating, kita bisa membuat file css custom. Pada Flask, css diletakkan pada direktori static dibawah folder root. Untuk memanggilnya, kita bisa menggunakan fungsi url_for sebagaimana contoh berikut.

<link href="{{ url_for('static', filename='css/album.css') }}" rel="stylesheet">

Hal yang sama bisa dilakukan untuk file javascript, images dan file2 yang lain yang bersifat publik.

Base template untuk mempermudah pengaturan kode

Jika web app kita mempunyai banyak page, tentunya akan sangat merepotkan apabila header, navigation atau sidebar nya ditulis berulang2 dengan menggunakan template. Terlebih jika ditengah jalan, kita ingin melakukan perubahan. Untuk itulah kita perlu mengimplementasikan base template.

Implementasi base template dilakukan menggunakan fitur extend pada Jinja2. Berikut langkah2 yang perlu dilakukan untuk menerapkan konsep extend template.

Buat base template (base.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <title><JUDUL APLIKASI></title> 
    {% block css %}{% endblock %}
  </head>
  <body>
        {% block content %}{% endblock %}
  </body>
</html>

Pada kode diatas, kita membuat 2 block yaitu block css yang digunakan untuk meload file css sesuai masing2 page dan block content yang digunakan untuk merender content masing2 page.

Buat file template extend base template

{% extends "base.html" %}
{% block css %}
<link href="{{ url_for('static', filename='css/album.css') }}" rel="stylesheet">
{% endblock %}
{% block content %}
Halaman 1
{% endblock %}

Keyword extend digunakan untuk mengambil semua kode dari file base template. Sudah selesai, app web kita sudah bisa dijalankan. Simple kan. :). Selanjutnya kalau kita ingin menambahkan fitur2 lain, kita harus membuat routing dan fungsi yang akan menghandle routing tersebut.

Routing pada Flask

Salah satu keunggulan menggunakan Framework web adalah kebebasan untuk membuat routing rule. Routing digunakan untuk membuat custom url. Routing pada flask dibuat menggunakan decorator @route. Berikut contoh routing pada Flask.

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

Rule diatas akan melakukan binding url index ke fungsi index yang akan merender tampilan dari file index.html. Routing seperti ini dikenal dengan routing statis.

Flask juga bisa melakukan routing dinamis dengan menambahkan variabel pada parameter routing. Variabel ini ditulis dengan sintaks <variable-name> yang nantinya dianggap sebagai parameter input pada fungsi yang melakukan binding. Berikut contoh sintaksnya.

@app.route('/hello/<name>')
def hello_name(name):
   return 'Hello %s!' % name

@app.route('/blog/<int:postID>')
def show_blog(postID):
   return 'Blog Number %d' % postID

@app.route('/rev/<float:revNo>')
def revision(revNo):
   return 'Revision Number %f' % revNo

Untuk variabel yang bertipe string, kita tidak perlu menambakan tipe data didepan parameter routing. Berbeda dengan variabel yang bertipe integer atau float.

Mendapatkan URL pada Flask

Untuk kepentingan optimasi SEO, terkadang kita perlu melakukan hal yang berbeda untuk URL tertentu. Misal kita akan membedakan title untuk index, archive dan single. Dalam hal ini, kita harus mengetahui url apa yang sedang aktif.

Kita bisa mengetahui url di Flask menggunakan variabel request. Berikut beberapa variabel yang bisa digunakan

{{ request.url }}
{{ request.base_url }}
{{ request.url_root }}
{{ request.host_url }}
{{ request.path }}

request.url digunakan untuk mendapatkan seluruh url
request.base_url, request.url_root, request.host_url digunakan untuk mendapatkan root url yang sedang diakses
request.path digunakan untuk mendapatkan path url

Dengan fungsi split kita bisa memilih bagian url mana yang akan diambil. Misalnya untuk url https://islam.bungadiva.com/author/choirul dengan script {{ request.path.split(“/”)[2] }} akan mendapatkan nilai choirul.

Error umum pada Flask

Penyebab:

Flask tidak menemukan file template yang dipanggil dari fungsi render_template().

Solusi:

Pastikan file yang dipanggil oleh fungsi render_template berada di bawah direktori templates.

Kesimpulan

Bekerja dengan framework memudahkan standarisasi koding bagi programmer. Menjadikan proses develop aplikasi lebih simple. Python menjadi sangat populer akhir2 ini karena dukungan library yang banyak dan dapat digunakan untuk berbagai macam keperluan.

Salah satu framework web di python adalah Flask. Banyak orang mengkategorikan flash sebagai micro-framework karena ringan. Kecepatan load page menjadikan flask sebagai salah satu pilihan terbaik untuk membuat website berbasis python.

choirul ihwan

Fullstack Developer yang tinggal di yogyakarta. Suka eksplorasi hal baru yang berhubungan dengan pemrograman dan ilmu keislaman. Berpengalaman dalam pemrograman PHP, Delphi dan sedang upgrade skill dengan python. Just as simple that.