# Getting Started Flask Py Flask adalah framework ringan (microframework) untuk Python yang digunakan untuk membangun aplikasi dengan cepat dan sederhana. ### 1. **Instalasi Flask** Sebelum memulai, pastikan kamu sudah menginstal Python. Kemudian, instal Flask menggunakan pip: ``` pip install flask ```
### 2. **Membuat Aplikasi Flask Sederhana** Buat file Python baru, misalnya `app.py`, lalu tuliskan kode berikut:
* `Flask(__name__)` membuat instance aplikasi Flask. * `@app.route("/")` mendefinisikan rute untuk halaman utama. * `app.run(debug=True)` menjalankan server Flask dengan mode debug aktif. Jalankan aplikasi dengan: `python app.py` Lalu buka browser dan akses `http://127.0.0.1:5000/`.
## 3. Routing (Menentukan Halaman) Tambahkan lebih banyak rute ke aplikasi: ``` @app.route('/about') def about(): return "Ini halaman About" ``` ### 3.1 Mengatur halaman khusus untuk /about Untuk membuat halaman khusus menggunakan HTML di Flask.. Buat Folder `templates` Flask mencari file HTML di dalam folder `templates`, jadi buat folder ini jika belum ada. Buat File `about.html` Di dalam folder `templates`, buat file **`about.html`** dengan konten berikut: ``` About

Ini Halaman About

Selamat datang di halaman About!

``` Untuk appnya ```python from flask import Flask, render_template app = Flask(__name__) @app.route("/") def home(): return "Hello, Flask!" @app.route('/about') def about(): return render_template('about.html') if __name__ == "__main__": app.run(debug=False) ``` ## 4. Static File Flask
*** #### **1. Buat Folder `static`** Flask mencari file CSS di dalam folder `static`, jadi buat folder ini jika belum ada. *** #### **2. Buat File `style.css`** Di dalam folder `static`, buat file **`style.css`** dan tambahkan kode berikut: ```css body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; padding: 50px; } h1 { color: #333; } p { font-size: 18px; color: #666; } ``` *** #### **3. Hubungkan CSS ke `about.html`** Ubah file **`about.html`** agar menggunakan **CSS**: ```html About

Ini Halaman About

Selamat datang di halaman About!

``` *** #### **4. Jalankan Flask** Jalankan aplikasi Flask seperti biasa: ```sh python app.py ``` Kemudian buka **`http://127.0.0.1:5000/about`** dan lihat tampilan barunya dengan **CSS**. *** 💡 **Catatan:** Flask secara otomatis mencari file di dalam folder `static`, jadi gunakan `url_for('static', filename='style.css')` untuk memastikan CSS termuat dengan benar. ## 5. Routing Dinamis Kita juga membuat route dinamis berdasarkan input dari user yang dikenal dengan **`variable-name`** Kita tambahkan parameter dengan tipe data tertentu seperti `string, integer` dan lainnya Misalnya kita ingin menambah nama yang dinamis maka tambahkan `route('/nama/')` dengan fungsi *`getnama()`* yang menggunakan parameter *`nama`* ```python @app.route('/nama/') def getnama(nama): return "nama anda adalah {}".format(nama) ``` Tambahkan nama anda disetelah parameter `nama` dan jalankan kembali aplikasinya
## 6. Variabel dalam Python Flask Framework Di Flask, variabel dapat digunakan untuk menyimpan dan mengelola data dalam aplikasi. Variabel bisa digunakan dalam **routing**, **template HTML**, dan **view functions**. Berikut beberapa cara penggunaan variabel di Flask: *** ### **6.1. Variabel dalam Routing** Kita bisa meneruskan variabel dalam URL dan menggunakannya di fungsi view. #### **Contoh: Menampilkan Nama dari URL** ```python from flask import Flask app = Flask(__name__) @app.route('/user/') # Variabel name diambil dari URL def user(name): return f"Hello, {name}!" if __name__ == '__main__': app.run(debug=True) ``` 📝 **Penjelasan:** * `` adalah variabel dalam URL. * Flask otomatis menangkap nilainya dan mengirimkan ke fungsi `user(name)`. * Coba akses **`http://127.0.0.1:5000/user/Ali`**, maka tampil: **"Hello, Ali!"** *** ### **6.2. Variabel dengan Tipe Data dalam Routing** Flask bisa menangani tipe data lain selain **string**, seperti **int, float, path**. #### **Contoh: ID Angka** ```python @app.route('/user/') # Hanya menerima angka def user_id(user_id): return f"User ID: {user_id}" ``` * **``** memastikan hanya angka yang diterima. * Coba akses **`http://127.0.0.1:5000/user/10`**, akan menampilkan: **"User ID: 10"**. *** ### **6.3. Mengirim Variabel ke Template HTML** Variabel bisa diteruskan ke halaman HTML menggunakan `render_template()`. #### **Contoh: Mengirim Nama ke Template** **Kode Flask (`app.py`)** ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/profile/') def profile(name): return render_template('profile.html', username=name) if __name__ == '__main__': app.run(debug=True) ``` **Kode Template (`templates/profile.html`)** ```html Profile

Selamat datang, {{ username }}!

``` 🔹 Coba akses **`http://127.0.0.1:5000/profile/Ali`**, maka tampil: **"Selamat datang, Ali!"** *** ### **6.4. Variabel Global dalam Flask** Kita bisa menggunakan variabel global yang dapat diakses di semua fungsi. ```python app_name = "My Flask App" # Variabel global @app.route('/') def home(): return f"Welcome to {app_name}!" ``` * Setiap kali halaman diakses, `app_name` akan digunakan. *** ### **6.5. Variabel dalam Dictionary** Kita juga bisa menyimpan data dalam dictionary dan mengirimnya ke template. ```python @app.route('/data') def data(): user = {"name": "Ali", "age": 25, "city": "Jakarta"} return render_template('data.html', user=user) ``` **Kode Template (`templates/data.html`)** ```html

Nama: {{ user.name }}

Umur: {{ user.age }}

Kota: {{ user.city }}

``` *** ### 7. FOR dan IF Statement Dalam Flask, kita bisa menggunakan **statement `for` dan `if`** di dalam template HTML menggunakan **Jinja2**, templating engine bawaan Flask. *** ### **7.1. `for` Statement dalam Template Flask** Kita bisa menggunakan **`for` loop** untuk menampilkan data secara berulang dalam HTML. #### **Contoh: Menampilkan List Nama di HTML** **Kode Flask (`app.py`)** ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/users') def users(): user_list = ["Ali", "Budi", "Citra", "Dewi"] return render_template('users.html', users=user_list) if __name__ == '__main__': app.run(debug=True) ``` **Kode Template (`templates/users.html`)** ```html Daftar Pengguna

Daftar Pengguna

    {% for user in users %}
  • {{ user }}
    • {% endfor %}
``` ✅ **Hasilnya di Browser:** ``` Daftar Pengguna: - Ali - Budi - Citra - Dewi ``` *** ### **7.2. `if` Statement dalam Template Flask** Kita bisa menggunakan **`if` statement** untuk menampilkan kondisi tertentu di dalam HTML. #### **Contoh: Menampilkan Pesan Jika Tidak Ada Data** ```html
    {% if users %} {% for user in users %}
  • {{ user }}
    • {% endfor %} {% else %}

    Tidak ada pengguna.

    {% endif %}
``` ✅ **Jika `users` ada isinya**, daftar pengguna akan ditampilkan.\ ✅ **Jika `users` kosong**, akan muncul pesan: **"Tidak ada pengguna."** *** ### **7.3. `for` dan `if` dalam Satu Loop** Kita bisa menggabungkan **`for` dan `if`** untuk memberikan tanda atau format khusus pada elemen tertentu. #### **Contoh: Menandai Admin dalam Daftar User** **Kode Flask (`app.py`)** ```python @app.route('/users') def users(): user_list = [ {"name": "Ali", "role": "admin"}, {"name": "Budi", "role": "user"}, {"name": "Citra", "role": "admin"}, {"name": "Dewi", "role": "user"}, ] return render_template('users.html', users=user_list) ``` **Kode Template (`templates/users.html`)** ```html
    {% for user in users %} {% if user.role == "admin" %}
  • {{ user.name }} (Admin)
    • {% else %}
  • {{ user.name }}
    • {% endif %} {% endfor %}
``` ✅ **Hasilnya di Browser:** ``` - Ali (Admin) - Budi - Citra (Admin) - Dewi ``` *** ### **7.4. `loop.index` dalam `for`** Flask menyediakan **`loop.index`** untuk menampilkan nomor urut dalam `for` loop. #### **Contoh: Menampilkan Nomor Urut** ```html
    {% for user in users %}
  • {{ loop.index }}. {{ user }}
    • {% endfor %}
``` ✅ **Hasilnya di Browser:** ``` 1. Ali 2. Budi 3. Citra 4. Dewi ``` *** ## 8. If Elif and Else Dalam Flask, **`elif` (else if)** juga bisa digunakan dalam template HTML menggunakan **Jinja2**. Ini berguna untuk membuat kondisi lebih kompleks dalam tampilan HTML. *** ### **1. `if`, `elif`, dan `else` dalam Template Flask** Kita bisa menggunakan **`elif`** untuk menangani berbagai kondisi. #### **Contoh: Menampilkan Pesan Berdasarkan Skor** **Kode Flask (`app.py`)** ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/nilai/') def nilai(score): return render_template('nilai.html', score=score) if __name__ == '__main__': app.run(debug=True) ``` **Kode Template (`templates/nilai.html`)** ```html Penilaian

Hasil Penilaian

{% if score >= 90 %}

Nilai Anda: {{ score }} - Sangat Baik! 🎉

{% elif score >= 75 %}

Nilai Anda: {{ score }} - Baik 👍

{% elif score >= 60 %}

Nilai Anda: {{ score }} - Cukup 😊

{% else %}

Nilai Anda: {{ score }} - Perlu Perbaikan 😢

{% endif %} ``` ✅ **Jika diakses dengan `http://127.0.0.1:5000/nilai/95`**, maka tampil:\ \&#xNAN;**"Nilai Anda: 95 - Sangat Baik! 🎉"**\ ✅ **Jika diakses dengan `http://127.0.0.1:5000/nilai/70`**, maka tampil:\ \&#xNAN;**"Nilai Anda: 70 - Cukup 😊"** *** ### **2. `for` dengan `if-elif-else`** Kita juga bisa menggabungkan **loop** dengan **if-elif-else**. #### **Contoh: Menampilkan Status Mahasiswa** **Kode Flask (`app.py`)** ```python @app.route('/mahasiswa') def mahasiswa(): daftar_mahasiswa = [ {"nama": "Ali", "nilai": 92}, {"nama": "Budi", "nilai": 80}, {"nama": "Citra", "nilai": 65}, {"nama": "Dewi", "nilai": 55}, ] return render_template('mahasiswa.html', mahasiswa=daftar_mahasiswa) ``` **Kode Template (`templates/mahasiswa.html`)** ```html Daftar Mahasiswa

Daftar Mahasiswa

    {% for mhs in mahasiswa %}
  • {{ mhs.nama }} - Nilai: {{ mhs.nilai }} - {% if mhs.nilai >= 90 %} Lulus dengan Pujian 🎓 {% elif mhs.nilai >= 75 %} Lulus 👍 {% elif mhs.nilai >= 60 %} Lulus Bersyarat 😊 {% else %} Tidak Lulus 😢 {% endif %}
    • {% endfor %}
``` ✅ **Hasilnya di Browser:** ``` Daftar Mahasiswa: - Ali - Nilai: 92 - Lulus dengan Pujian 🎓 - Budi - Nilai: 80 - Lulus 👍 - Citra - Nilai: 65 - Lulus Bersyarat 😊 - Dewi - Nilai: 55 - Tidak Lulus 😢 ``` *** {% hint style="success" %} ## Simple Interest App Program {% endhint %}
#### 1️⃣ **Menentukan Fitur Kalkulator** Misalnya, kalkulator bisa menghitung: * **Bunga tabungan** (bunga sederhana/majemuk) * **Cicilan pinjaman** (menggunakan rumus anuitas) * **Return investasi** (menghitung pertumbuhan investasi) #### 2️⃣ **Membuat Struktur Flask Project** Struktur proyek sederhana bisa seperti ini: ``` flaskb/ │── app.py # File utama Flask │── templates/ │ ├── index.html # Halaman utama │ ├── result.html # Halaman hasil perhitungan │── static/ │ ├── style.css # CSS untuk tampilan │── requirements.txt # Paket yang dibutuhkan │── venv/ # Virtual environment (opsional) ``` #### 3️⃣ **Mengembangkan `app.py`** Contoh Flask sederhana untuk kalkulator bunga:
#### 4️⃣ **Membuat Halaman `index.html`**
#### 5️⃣ **Membuat Halaman `result.html`**
*** {% hint style="success" %} ## Kalkulator Engagement Rate {% endhint %}
*** #### **1️⃣ Struktur Proyek Flask** ``` flaskb/ │── app.py # File utama Flask │── templates/ │ ├── index.html # Form input & hasil kalkulasi │── static/ │ ├── style.css # CSS styling │── requirements.txt # (Opsional) Paket Flask ``` *** #### **2️⃣ `app.py` - Logika Flask** Buat file `app.py`:
*** #### **3️⃣ `index.html` - Tampilan Form Input & Hasil** Buat file `templates/index.html`: ```html Kalkulator Engagement Rate

Kalkulator Engagement Rate

{% if er is defined and er is not none %}

Engagement Rate: {{ er }}%

{% endif %}
``` *** #### **4️⃣ `style.css` - CSS untuk Tampilan** Buat file `static/style.css`: ```css body { font-family: Arial, sans-serif; background-color: #f8f9fa; text-align: center; } .container { max-width: 400px; margin: 50px auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h2 { color: #007bff; } form { display: flex; flex-direction: column; } label { margin: 10px 0 5px; font-weight: bold; } input { padding: 8px; border: 1px solid #ccc; border-radius: 5px; } button { margin-top: 20px; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } h3 { margin-top: 20px; color: #28a745; } ``` *** #### **5️⃣ Cara Menjalankan Proyek** 1. **Jalankan server Flask** ```sh python app.py ``` 2. **Buka browser** dan akses: ``` http://127.0.0.1:5000/ ``` ***