View source for 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:

<pre> 
 <!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>
</pre>   

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

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

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

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

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]]