Struktur Proyek Flask dan Manajemen Template

Tujuan Pembelajaran

Setelah menyelesaikan modul ini, Anda diharapkan mampu:

Memahami struktur proyek yang baik dalam pengembangan aplikasi Flask.
Menggunakan template Jinja2 untuk memisahkan logika aplikasi dan tampilan.
Membuat aplikasi Flask dengan struktur yang terorganisir dan template dinamis.

Pengenalan Struktur Proyek Flask

Dalam pengembangan aplikasi Flask, memiliki struktur proyek yang terorganisir sangat penting untuk memudahkan pemeliharaan dan pengembangan lebih lanjut. Struktur yang baik memungkinkan pemisahan antara logika aplikasi, tampilan, dan komponen lainnya.

Struktur Proyek Dasar

Berikut adalah struktur dasar yang umum digunakan dalam proyek Flask:

flask_app/
├── app/
│   ├── __init__.py
│   ├── routes.py
│   ├── models.py
│   ├── templates/
│   │   ├── base.html
│   │   ├── index.html
│   │   └── about.html
│   └── static/
│       ├── style.css
│       └── script.js
├── venv/
├── config.py
├── run.py
└── requirements.txt

Penjelasan struktur di atas:

`flask_app/`: Direktori utama proyek.
`app/`: Paket Python yang berisi aplikasi Flask.
- `__init__.py`: Menginisialisasi aplikasi dan mengimpor modul yang diperlukan.
- `routes.py`: Menangani definisi rute dan logika tampilan.
- `models.py`: Mendefinisikan model untuk interaksi dengan basis data.
- `templates/`: Folder untuk menyimpan file template HTML.
- `static/`: Folder untuk menyimpan file statis seperti CSS, JavaScript, dan gambar.
`venv/`: Lingkungan virtual Python untuk proyek ini.
`config.py`: File konfigurasi untuk aplikasi.
`run.py`: Skrip untuk menjalankan aplikasi.
`requirements.txt`: Daftar dependensi yang diperlukan oleh proyek.

Struktur ini membantu dalam memisahkan berbagai komponen aplikasi, sehingga memudahkan pengelolaan dan pengembangan lebih lanjut.

Membuat Aplikasi Flask dengan Struktur yang Baik

Berikut adalah langkah-langkah untuk membuat aplikasi Flask dengan struktur yang terorganisir:

1. Membuat Direktori Proyek dan Mengatur Lingkungan Virtual

mkdir flask_app
cd flask_app
python3 -m venv venv
source venv/bin/activate

2. Menginstal Flask

pip install flask

3. Membuat Struktur Direktori

mkdir app
mkdir app/templates
mkdir app/static

4. Membuat File `__init__.py`

Buat file `app/__init__.py` dan tambahkan kode berikut:

from flask import Flask

def create_app():
    app = Flask(__name__)
    app.config.from_object('config.Config')

    with app.app_context():
        from . import routes
        return app

5. Membuat File `routes.py`

Buat file `app/routes.py` dan tambahkan kode berikut:

from flask import render_template
from . import create_app

app = create_app()

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

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

6. Membuat File Template

Buat file `app/templates/base.html` sebagai template dasar:

 
 <!doctype html>
 <html lang="id">
 <head>
     <meta charset="utf-8">
     <title>{% block title %}{% endblock %} - Aplikasi Flask</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
     <nav>
         <a href="{{ url_for('index') }}">Beranda</a>
         <a href="{{ url_for('about') }}">Tentang</a>
     </nav>
     {% block content %}{% endblock %}
 </body>
 </html>

Kemudian, buat file `app/templates/index.html`:

 {% extends 'base.html' %}
 
 {% block title %}Beranda{% endblock %}
 
 {% block content %}
     <h1>Selamat Datang di Aplikasi Flask!</h1>
     <p>Ini adalah halaman beranda.</p>
 {% endblock %}

Dan file `app/templates/about.html`:

   
 {% extends 'base.html' %}
 
 {% block title %}Tentang{% endblock %}
 
 {% block content %}
     <h1>Tentang Aplikasi Ini</h1>
     <p>Informasi tentang aplikasi ini.</p>
 {% endblock %}

7. Membuat File `run.py`

Buat file `run.py` di direktori utama proyek:

from app import create_app

app = create_app()

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

8. Menjalankan Aplikasi

Setelah menambahkan file statis dan menghubungkannya ke template, jalankan aplikasi Flask Anda:

python run.py

Akses aplikasi melalui browser di http://127.0.0.1:5000/. Anda akan melihat bahwa gaya dari style.css telah diterapkan, dan jika Anda membuka konsol pengembang browser, pesan dari script.js akan muncul.

Kesimpulan

Dengan menambahkan file statis seperti CSS dan JavaScript, Anda dapat meningkatkan tampilan dan interaktivitas aplikasi Flask Anda. Struktur proyek yang terorganisir dengan pemisahan antara logika, tampilan, dan aset statis akan memudahkan pengembangan dan pemeliharaan aplikasi di masa mendatang.

Referensi

[Tutorial Flask Resmi](https://flask.palletsprojects.com/en/stable/tutorial/)

Pranala Menarik

Web Programming