Difference between revisions of "Pengenalan Flask: Membuat Aplikasi Web Sederhana"

Latest revision as of 12:34, 7 April 2025

Tujuan Pembelajaran

Setelah menyelesaikan modul ini, Anda diharapkan mampu:

Memahami konsep dasar Flask dan cara membuat aplikasi web sederhana.
Membuat halaman "Hello, World!" menggunakan Flask.
Menjalankan aplikasi Flask pada Ubuntu 24.04 tanpa menggunakan alat dari Microsoft.

Pengenalan Flask

Flask adalah micro-framework web yang ditulis dalam bahasa Python. Disebut "micro" karena Flask menjaga intinya tetap sederhana namun dapat diperluas dengan berbagai ekstensi sesuai kebutuhan. Framework ini memungkinkan pengembang untuk membuat aplikasi web dengan cepat dan efisien.

Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki:

Ubuntu 24.04 terinstal pada sistem Anda.
Python 3 terinstal. Untuk memeriksa versi Python, jalankan perintah:

python3 --version

Jika Python belum terinstal, Anda dapat menginstalnya dengan:

sudo apt update
sudo apt install python3

pip (Python package manager) terinstal. Periksa dengan:

pip3 --version

Jika pip belum terinstal, instal dengan:

sudo apt install python3-pip

Membuat Virtual Environment

Sebaiknya kita menggunakan virtual environment untuk mengisolasi dependensi proyek. Buat dan aktifkan virtual environment dengan perintah berikut:

# Instal modul venv jika belum ada
sudo apt install python3-venv

# Buat virtual environment bernama 'venv'
python3 -m venv venv

# Aktifkan virtual environment
source venv/bin/activate

Setelah aktivasi, prompt terminal Anda akan menunjukkan bahwa virtual environment sedang aktif.

Instalasi Flask

Dengan virtual environment aktif, instal Flask menggunakan pip:

pip install flask

Membuat Aplikasi "Hello, World!"

1. Membuat Struktur Proyek

Buat direktori untuk proyek Anda dan navigasikan ke dalamnya:

mkdir hello_flask
cd hello_flask

2. Membuat Aplikasi Flask

Buat file bernama `app.py` dan tambahkan kode berikut:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, World!'

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

Penjelasan kode:

`from flask import Flask`: Mengimpor kelas Flask dari modul flask.
`app = Flask(__name__)`: Membuat instance aplikasi Flask.
`@app.route('/')`: Dekorator yang menentukan URL root ('/') untuk memanggil fungsi `hello`.
`def hello():`: Fungsi yang mengembalikan string 'Hello, World!'.
`if __name__ == '__main__':`: Memastikan server hanya berjalan saat skrip dijalankan secara langsung.
`app.run(debug=True)`: Menjalankan server dalam mode debug untuk pengembangan.

3. Menjalankan Aplikasi

Pastikan virtual environment aktif, lalu jalankan aplikasi dengan:

python app.py

Output yang diharapkan:

Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Restarting with stat
Debugger is active!
Debugger PIN: 123-456-789

4. Mengakses Aplikasi

Buka browser web dan navigasikan ke `http://127.0.0.1:5000/`. Anda akan melihat pesan "Hello, World!" ditampilkan.

Penanganan Rute Tambahan

Flask memungkinkan penanganan berbagai rute. Misalnya, tambahkan rute baru untuk menyapa pengguna berdasarkan nama:

@app.route('/user/<name>')
def greet_user(name):
    return f'Hello, {name.capitalize()}!'

Dengan penambahan ini, mengakses `http://127.0.0.1:5000/user/andi` akan menampilkan "Hello, Andi!".

Menjalankan Aplikasi pada Port Berbeda

Secara default, Flask berjalan pada port 5000. Untuk menjalankan pada port lain, misalnya 8080, ubah pemanggilan `app.run()` menjadi:

app.run(debug=True, port=8080)

Atau jalankan aplikasi dengan perintah:

python app.py --port=8080

Menggunakan Template HTML

Untuk memisahkan logika Python dan tampilan, Flask menggunakan template. Buat folder `templates` dan tambahkan file `index.html`:

Struktur Direktori:

hello_flask/
├── app.py
└── templates/
    └── index.html

Isi `index.html`:

 <!doctype html>
 <html lang="id">
 <head>
     <meta charset="utf-8">
     <title>Halo Flask</title>
 </head>
 <body>
     <h1>{{ message }}</h1>
 </body>
 </html>

Ubah `app.py` untuk merender template ini:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello():
    return render_template('index.html', message='Hello, World!') 

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

Sekarang, saat mengakses `http://127.0.0.1:5000/`, template HTML akan dirender dengan pesan yang diberikan.

Latihan

Tambahkan rute baru `/about` yang menampilkan informasi singkat tentang aplikasi.
Buat halaman HTML terpisah untuk rute `/about` menggunakan template.
Eksplorasi dokumentasi Flask untuk memahami fitur-fitur lainnya.

Dengan menyelesaikan modul ini, Anda telah mempelajari dasar-dasar Flask dan cara membuat aplikasi web sederhana.

Referensi

Untuk pembelajaran lebih lanjut, Anda dapat merujuk pada [Tutorial Flask oleh Miguel Grinberg](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world).

Pranala Menarik

Web Programming