Modul 1.2: Struktur Proyek Flask dan Manajemen Template

1. 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.

1. 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.

1. 1. 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.

1. 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**

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



2. **Menginstal Flask**

  ```bash
  pip install flask
  ```



3. **Membuat Struktur Direktori**

  ```bash
  mkdir app
  mkdir app/templates
  mkdir app/static
  ```



4. **Membuat File `__init__.py`**

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

  ```python
  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:

  ```python
  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:

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



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

  ```html
  {% extends 'base.html' %}

  {% block title %}Beranda{% endblock %}

  {% block content %}

Selamat Datang di Aplikasi Flask!

Ini adalah halaman beranda.

  {% endblock %}
  ```



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

  ```html
  {% extends 'base.html' %}

  {% block title %}Tentang{% endblock %}

  {% block content %}

Tentang Aplikasi Ini

Informasi tentang aplikasi ini.

  {% endblock %}
  ```



7. **Membuat File `run.py`**

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

  ```python
  from app import create_app

  app = create_app()

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



8. **Menjalankan Aplikasi**

  Jalankan aplikasi dengan perintah:

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.

  - **1.2. Struktur Proyek Flask dan Manajemen Template**
    - Mempelajari struktur proyek yang baik dalam Flask dan penggunaan template untuk memisahkan logika dan tampilan.
    - Contoh: Menggunakan Jinja2 untuk membuat template dinamis.
    - Referensi: [Tutorial Flask Resmi](https://flask.palletsprojects.com/en/stable/tutorial/)

Struktur Proyek Flask dan Manajemen Template

Selamat Datang di Aplikasi Flask!

Tentang Aplikasi Ini

Navigation menu

Search