Cara Membuat Web App Menggunakan Flask Di Python3

Pada tutorial kali ini, kita akan membagian bagaimana cara membuat Web App menggunakan FLASK pada Python3 di Windows dan Ubuntu. Sebelum memulai cara membuat Web Application menggunakan Flask kalian harus install terlebih dahulu Python3 dan Text Editor kesukaan kalian.

Apa itu Flask

Flask adalah framework web Python kecil dan ringan yang menyediakan alat dan fitur berguna yang memudahkan pembuatan aplikasi web dengan Python. Ini memberi pengembang fleksibilitas dan kerangka kerja yang lebih mudah diakses untuk developer baru karena kalian dapat membuat aplikasi web dengan cepat hanya menggunakan satu file Python. Flask juga dapat diperluas dan tidak memaksakan struktur direktori tertentu atau memerlukan kode boilerplate yang rumit sebelum memulai.

1. Instal Flask

Hal yang harus kalian lakukan adalah membuka cmd di dalam folder yang sudah kalian buat sebelum nya untuk memulai project flask python kalian dengan cara ketik cmd pada address bar windows kalian seperti di bawah.

python3-flask-web-app-1

Jika kalian ada di ubuntu buka terminal pada folder dengan cara klik kanan pada folder yang di tuju lalu pilih `Open in Terminal`.

Setelah cmd/terminal terbuka selanjutnya yang kalian harus lakukan adalah membuat virtual environment dengan mengetik kode di bawah ini.

Windows

F:\Tutorial\Tutorial Flask>python3 -m venv env

Ubuntu

kamargaming@v1:~/tutorial$ python3 -m venv env

Jika terdapat error seperti gambar di bawah, maka yang kalian lakukan selanjutnya menjalankan sudo apt install sesuai dengan informasi yang sudah di berikan pada error message.

python3-flask-web-app-1

Jika berhasil maka akan ada folder env yang terbuat seperti gambar di bawah ini.

File Env pada Virtual Environment Python3 Flask

Setelah folder env terbuat, selanjutya masuk virtual environment.

Windows

python3-flask-web-app-3

Ubuntu

cara-masuk-virtual-environemnt-ubuntu

Selanjutnya setelah masuk ke dalam virtual environment lalu jalankan pip install flask untuk menginstal flask lalu tekan enter.

(env) F:\Tutorial\Tutorial Flask>pip install flask
(env) kamargaming@v1:~/tutorial$ pip install flask

2. Buat Struktur Folder

Selanjutnya silahkan buat struktur folder dan file sebagai berikut.

struktur-folder-flask-python3

3. Memulai Menulis Kode

Setelah membuat struktur base folder selanjutnya kita edit main.py dengan kode di bawah ini:

from flask import Flask, render_template      

app = Flask(__name__)

@app.route("/")
def beranda():
    return render_template("beranda.html")
    
@app.route("/contoh")
def contoh():
    return "Halo, Kamarkode"
    
if __name__ == "__main__":
    app.run(debug=True)

Lalu file beranda.html dengan kode di bawah

<h2>Selamat datang di totorial FLASK</h2>

Setelah kita edit file html tersebut, kita jalankan flask nya dengna cara seperti di bawah.

Lalu buka browser kalian dan buka http://127.0.0.1:5000

Pada contoh di atas kalian menjalankan template html yang ada di dalam folder Templates > beranda.html, kalian juga dapat return langsung string seperti yang sudah di buat pada def contoh di mana kalian tinggal menambahkan sesuai dengan nama routes yang sudah di definisakan sebelum nya. Contoh di atas adalah http://127.0.0.1:5000/contoh yang akan menghasilkan seperti gambar di bawah

4. Membuat Halaman Lain

Sekarang mari kita coba membuat halaman lain dengan cara edit main.py seperti di bawah ini

main.py

from flask import Flask, render_template      

app = Flask(__name__)

@app.route("/")
def beranda():
    return render_template("beranda.html")
    
@app.route("/contoh")
def contoh():
    return "Halo, Kamarkode"
  
@app.route("/about")
def about():
    return render_template("misc/about.html")
    
if __name__ == "__main__":
    app.run(debug=True)

Lalu membuat file baru di seperti struktur folder di bawah ini

about.html

<h2>Di sini Halaman About</h2>

Lalu jalankan kembali di browser dengan routes http://127.0.0.1:5000/about

Dan itulah bagaimana kalian pertama kali membuat web app flask untuk pertama kali nya, semoga ilmu ini bermanfaat bagi kita semua.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share via
Copy link
Powered by Social Snap