Belajar Framework Flask - Flask MVC

 

Dalam membuat sebuah aplikasi tentu perlu memikirkan architecture pattern yang akan digunakan, tujuanya adalah ketika aplikasi semakin kompleks maka tidak mengalami kesulitan untuk mengatur kodenya. maka diperlukan architecture MVC.

Design pattern adalah sebuah kosep atau tehnik yang diterapkan dalam membuat sebuah aplikasi. MVC adalah singkatan dari ( Model View Controller ) yaitu sebuah cara atau pola yang digunakan dalam mebuat aplikasi.

Berbicara masalah MVC design pattern maka perlu mengetahui tiga hal atau tiga kata kunci ini :

• Model Adalah cara mengolah data.
• View Adalah cara membuat user interface atau tampilan dari sebuah aplikasi.
• Controller Adalah tempat melakukan proses yang cukup rumit dari aplikasi .

MVC on Flask

Pada aplikasi flask agak sedikit perbedaan penamaan. Yang paling mencolok nanti adalah ketika ingin mengurusi view maka disini menggunakan templates.

Nah berikut ini adalah contoh aplikasi yang tidak mengimplementasikan MVC.

from flask import Flask app = Flask(__name__) def index(): return "Hello world." app.add_url_rule('/', 'index', index) app.run()

Sekilas contoh diatas tidak masalah, simple dan juga jelas. Akan tetapi permasalahan adalah bagaimana kalau memilii 100 type route dan 100 prosess yang berbeda yang cukup kompleks. Masih bisa di buat, tapi itu akan membuat kode yang ditulis didalam satu file akan menjadi cukup banyak dan akan membuat kesulitan untuk melakukan debugging jika terjadi error.

Struktur project terlebih dahulu :

|---project-flask |---app |---__init__.py |---models.py |---cores |---__init__.py |---admin |---__init__.py |---controller.py |---route.py |---auth |---__init__.py |---controller.py |---route.py |---static |---app.css |---app.js |---templates |---auth |---admin |---index.html |---migrations |---tests |---config.py |---run.py

Diatas adalah contoh struktur project aplikasi yang akan dibuat dengan flask, akan dibahas satu per satu struktur nya.

#	Folder	Keterangan
1	app	Pada folder app ini akan digunakan untuk menaruh segala file yang akan dibuat
2	migrations	Pada folder migration ini sebenarnya akan di generate otomatis yang mana nanti disini isinya adalah file - file untuk migration database
3	tests	Pada folder test berisi file - file yang digunakan untuk unit testing
4	app/cores	Pada folder app/cores ini akan berisi modul - model dari aplikasi yang akan ditulis.
5	app/cores/admin	Pada folder app/cores/admin contoh dari module admin.
6	app/cores	Pada folder app/cores/auth ini adalah contoh module Authentication.
7	app/static	Pada folder app/static ini digunakan untuk file static atau yang tidak berubah secara dinamis, seperti gambar, file css, file js dan yang lainya.
8	app/template	Pada folder app/templates ini digunakan untuk menaruh file html untuk aplikasi.

Belajar Framework Flask - Accessing Request Data

Ketika mengembangkan aplikasi dengan protokol http/https, akan sering menemukan atau berhadapan dengan url parameter yang kompleks dan kemudian parameter tersebut harus diambil untuk digunakan sesuai kebutuhan. Lihat contoh url dibawah ini:

https://www.example.com/data?name=dhani&role=Software%20Developer

Contoh url diatas sering ditemukan dan terkadang harus mengambil nilai dari name yaitu dhani atau role yaitu Software Developer. .

Flask Request Args

Untuk mengambil parameter url seperti contoh diatas maka harus mengimport modul flask request. Berikut ini kodenya

Jalankan kode diatas kemudian buka di browser ketikkan

https://127.0.0.1:5000/data?name=dhani&role=developer

Flask Request Form

Pada saat penanganan form secara umum ada dua method yang sering dijumpai yaitu GET dan POST. GET digunakan untuk parameter atau argumen yang dapat dilihat valuenya dibrowser seperti contoh diatas. Sekarang coba menggunakan Form dengan method GET.

Hasilnya sama saja seperti contoh sebelumnya tapi disini menggunakan form. Seperti yang dilihat pada browser, setiap mengetikkan kata atau kalimat kemudian menekan submit, maka pada browser terlihat parameter yang ketikkan pada form, itu terjadi karena pada form menggunakan method GET.

Bagaimana jika ingin yang mengetikkan tidak kelihatan pada form,  misal untuk kasus form login tentu tidak ingin password kelihatan dibrowser kan. Berikut contohnya

Kode diatas jika dijalankan seperti sebelumnya maka dibrowser url tidak akan kelihatan parameter yang diketikkan pada form.

Jika mempunyai banyak field pada form dapat menuliskan secara singkat dengan request.form dengan return dictionary.

Flask Request Files

Jika ingin upload file maka dapat menggunakan request.files dan didalam html jangan lupa untuk menulis enctype='multipart/form-data' pada element form, Contoh dibawah ini hanya menghasilkan keluaran/output nama file dan file tidak diupload

Belajar Framework Flask - Rendering Templates

 

Templates

Templates pada flask yang dimaksud adalah file html yang bisa disisipi logic. Supaya bisa mengoptimalkan penulisan html, maka bisa mengeksted template yang mana dengan begitu tidak perlu menulis kode yang sama berulang - ulang.

Yang dibahas terlebih dulu struktur project sederhana. Jadi file html yang akan di render secara default diletakkan pada folder templates. Berikut ini contoh strukturnya

|---app |---app.py |---static |---app.css |---templates |---index.html

Folder templates adalah tempat menaruh segala file html yang akan digunakan, sedangkan folder static adalah tempat dimana akan menaruh file static seperti css misalnya.

Render Template

Contoh merender template atau html pada sebuah aplikasi flask, berikut ini:

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') app.run()

Dan berikut ini untuk file index.html :

<!DOCTYPE html> <html> <head> <title> Welcome </title> <link rel="stylesheet" type="text/css" href="/static/app.css"> </head> <body> <h1> Hello world </h1> </body> </html>

Belajar Framework Flask - Static Files

 

Sebuah web yang cukup kompleks tentu akan memiliki data yang dinamis, akan tetapi ada data - data yang tidak berubah seperti halnya gambar, video, audio, file css, file js dan yang lainya. Pada aplikasi flask untuk mengakses sebuah file static atau file yang tidak berubah secara dinamis maka perlu melakukan hal berikut ini.

|---app |---app.py |---static |---app.css |---img |---profile.jpg

Contoh struktur project aplikasi flask sederhana, jadi ketika ingin mengkases file static maka yang pertama perlu menaruh file static tersebut pada folder /static. Dan untuk mengkasesnya seperti berikut ini :

from flask import Flask, redirect, url_for app = Flask(__name__) @app.route('/assets/css/style.css') def stylesheet(): return redirect(url_for('static', filename='app.css')) app.run()

Atau bisa mengkases secara static dengan cara berikut ini :

// URL http://localhost:5000/static/app.css // Link <a href="http://localhost:5000/static/app.css"></a> // Jinja <a href="http://localhost:5000/static/app.css"></a>

Static Folder

Yang perlu diketahui juga adalah direktori yang di akses oleh static files pada flask ini adalah berada di root instance flask di buat. Misalkan seperti berikut ini :

|---project-folder-name |---app |---__init__.py |---static |---app.css |---img |---profile.jpg |---app.py |---config.py |---run.py

Pada contoh struktur folder project diatas membuat dua instance flask yaitu pada file __init__.py dan app.py. Jika menjalankan aplikasi flask yang di app.py maka folder static tidak terdeteksi oleh flask karena folder static adalah sub folder dari app. Akan tetapi jika menjalankan run.py maka folder static akan terdeteksi akan tetapi menjalankan instance flask yang ada di folder app, maka pada file run.py menjadi seperti berikut ini :

from app import app if __name__ == '__main__': app.run()

Dan pada file app/__init__.py seperti ini :

from flask import Flask app = Flask(__name__) // app setup

Belajar Framework Flask - Routing

 

Pada aplikasi web salah satu komponen yang paling penting adalah routing,  dimana dengan komponen ini bisa mengatur interakasi dari user kedalam aplikasi. Tujuan dari routng adalah supaya user lebih mudah memahami navigasi pada website. Keuntungan dari sisi pengembang adalah dapat mengatur navigasi pada web dengan mudah.

Routing Pada Flask

Lihat kode berikut ini.

from flask import Flask app = Flask(__name__) def index(): return "Hello world." app.add_url_rule('/', 'index', index) app.run()

Atau kode simple untuk membuat routing pada aplikasi flask ini.

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

Custom Routing

Cara mengambil data dari route dengan menginjectkan varibale kedalam route, seperti contoh ini :

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

Akses pada browser sepert ini :

http://127.0.0.1:5000/hello/Mbah%20google

Hasil akan serperti ini :

Hello Mbah google!

Untuk membatasi type variable, contoh :

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

Pada route diatas jika di akses maka seperti rule nya :

// Benar karena menggunakan integer pada varibale posID // Hasilnya : Blog Number 1 http://127.0.0.1:5000/blog/1 // Salah karena seperti ini http://127.0.0.1:5000/blog/tutorial

Coba dengan tipe data yang lain misalanya membuat route seperti ini :

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

Maka seperti rule nya :

// Benar karena menggunakan type variable float pada revNo // Hasilnya : Revision Number 1.200000 http://127.0.0.1:5000/rev/1.2 // Salah jika seperti ini http://127.0.0.1:5000/rev/12

Http Method

Dalam membangun web menggunakan protokol http untuk transformasi data, pada protocol http ini terdapat beberapa method yang bisa digunakan untuk type routing pada aplikasi.

No	Nama	Keterangan
1	GET	Method get berguna untuk meminta data dari server untuk di berikan ke user.
2	HEAD	Hampir mirip seperti method akan tetapi tidak ada response.
3	POST	Method post berguna untuk mengirimkan data dari user ke server.
2	PUT	Method put ini juga hampir mirip dengan post akan tetapi kalau di post itu bertujuan untuk menambahkan database, kalau dengan put maka kita akan mereplace data yang sudah ada atau mengupdate data.
4	DELETE	Method delete berguna untuk meminta server menghapus data tertentu oleh user.

Cara mengimplementasikan routing http method pada aplikasi flask. Secara default http method dari route pada flask ini adalah GET, akan tetapi jika ingin merubah bisa dengan memberi nilai variable methods pada route.

@app.route('/login', methods=['POST']) def index(): return "You have logined." @app.route('/login', methods=['GET']) def index(): return "Login please."

Contoh diatas bisa jadikan lebih sederhana menjadi seperti ini :

from flask import request @app.route('/login', methods=['GET','POST']) def index(): if request.method == 'POST' return "You have logined." return "Login please."

Hal yang penting di pahami dari penggunaan http method ini adalah seperti, jika ingin mengambil data menggunakan GET, jika ingin menambahkan data maka dengan POST, ingin merubah data dengan PUT dan untuk mengghapus data menggunakan DELETE.

Belajar Framework Flask - Instal Python & Flask

 

Intallasi Python

Flask dibangun diatas bahasa pemrograman python, maka hal yang pertama perlu diinstall adalah python. Pada tutor ini menggunakan python3 dan flask version 1.0.2. Untuk menginstall python di setiap sistem operasi tentu akan berbeda beda.

Windows

Untuk menginstall python di windows, download di web python. Terdapat banyak pilihan binary python silahkan pilih sesuai spesifikasi windows yang dipakai, apakah 32bit/64bit. Setelah selesai silahkan jalankan instller dan klik install now.

Selanjutnya sudah selesai silahkan klik close.

Untuk versikasi apakah proses installasi sudah berhasil atau belum dengan membuka CMD dan menjalankan perintah berikut ini.

python -V

Linux Ubuntu

Pada tutorial ini akan menginstall python pada linux ubuntu 16.04 LTS. Pertama tambahkan repository untuk installasi python dengan menjalankan perintah berikut, terminal linux :

sudo add-apt-repository ppa:jonathonf/python-3.6

Selanjutnya silahkan update installasi python dengan menjalankan perintah berikut ini.

sudo apt-get update sudo apt-get install python3.6

Setelah selesai, cek apakah installasi sudah berhasil dengan menjalankan perintah berikut ini.

// Biasanya secara default pada ubuntu sudah terinstall python2 python -V // Jalankan perintah ini jika ingin menjalankan python3 python3 -V

Jika mengalami config yang berbeda Bisa baca untuk lebih detail tentang installasi di ubuntuhandbook.org

Mac OS

Pengguna MacOS akan menggunakan homebrew untuk menginstall. Pertama install homebrew dengan menjalankan perintah berikut ini.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Selanjutnya tambahkah path brew ke terminal dengan menambahkan code berikut ini pada ~/.profile.

export PATH=/usr/local/bin:/usr/local/sbin:$PATH

Sekarang install python dengan menjalankan perintah berikut ini.

brew install python

Tunggu beberapa menit dan jika proses installasi sudah selesai jalankan perintah berikut ini untuk mengetahui apakah installasi sudah berhasil.

python --version

Intallasi Flask

Perlu install flask, nflask ini adalah kumpulan kode, jadi pada proses installasi flask  akan mendownload code flask ini ke komputer.

Pada python untuk pengolahan dependency code dikenal dengan nama pip. Install virtual env terlebih dahulu dengan menjalankan perintah berikut ini.

pip install virtualenv

Selanjutnya install dependency flask dengan menjalankan perintah berikut ini.

pip install Flask

Test Flask

Sekarang buat aplikasi sederhana untuk mengecek apakah flask sudah berhasil diinstall. Silahkan buat folder project nya seperti berikut ini.

sudo apt-get update sudo apt-get install python3.6

Cek apakah installasi sudah berhasil dengan menjalankan perintah berikut ini.

// Pada windows md flask-hello-world // Linux or osx mkdir flask-hello-world // Masuk ke dalam direktori cd flask-hello-world

Copykan code dibawah ini untuk membuat aplikasi hello world sederhana simpan dengan nama file app.py.

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

Jalankan aplikasi sederhana dengan menjalankan perintah berikut ini.

FLASK_APP=app.py flask run

Selanjutnya buka http://localhost:5000/