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:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <h1>Ini Halaman About</h1>
    <p>Selamat datang di halaman About!</p>
</body>
</html>

Untuk appnya

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:

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:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Ini Halaman About</h1>
    <p>Selamat datang di halaman About!</p>
</body>
</html>

4. Jalankan Flask

Jalankan aplikasi Flask seperti biasa:

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/<string:nama>') dengan fungsi getnama() yang menggunakan parameter nama

@app.route('/nama/<string: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

from flask import Flask

app = Flask(__name__)

@app.route('/user/<name>')  # Variabel name diambil dari URL
def user(name):
    return f"Hello, {name}!"

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

📝 Penjelasan:

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

@app.route('/user/<int:user_id>')  # Hanya menerima angka
def user_id(user_id):
    return f"User ID: {user_id}"

<int: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)

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/profile/<name>')
def profile(name):
    return render_template('profile.html', username=name)

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

Kode Template (templates/profile.html)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Profile</title>
</head>
<body>
    <h1>Selamat datang, {{ username }}!</h1>
</body>
</html>

🔹 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.

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.

@app.route('/data')
def data():
    user = {"name": "Ali", "age": 25, "city": "Jakarta"}
    return render_template('data.html', user=user)

Kode Template (templates/data.html)

<h1>Nama: {{ user.name }}</h1>
<p>Umur: {{ user.age }}</p>
<p>Kota: {{ user.city }}</p>

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)

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)

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Pengguna</title>
</head>
<body>
    <h1>Daftar Pengguna</h1>
    <ul>
        {% for user in users %}
            <li>{{ user }}</li>
        {% endfor %}
    </ul>
</body>
</html>

✅ 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

<ul>
    {% if users %}
        {% for user in users %}
            <li>{{ user }}</li>
        {% endfor %}
    {% else %}
        <p>Tidak ada pengguna.</p>
    {% endif %}
</ul>

✅ 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)

@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)

<ul>
    {% for user in users %}
        {% if user.role == "admin" %}
            <li><strong>{{ user.name }} (Admin)</strong></li>
        {% else %}
            <li>{{ user.name }}</li>
        {% endif %}
    {% endfor %}
</ul>

✅ 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

<ul>
    {% for user in users %}
        <li>{{ loop.index }}. {{ user }}</li>
    {% endfor %}
</ul>

✅ 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)

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/nilai/<int:score>')
def nilai(score):
    return render_template('nilai.html', score=score)

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

Kode Template (templates/nilai.html)

<!DOCTYPE html>
<html>
<head>
    <title>Penilaian</title>
</head>
<body>
    <h1>Hasil Penilaian</h1>
    {% if score >= 90 %}
        <p>Nilai Anda: {{ score }} - Sangat Baik! 🎉</p>
    {% elif score >= 75 %}
        <p>Nilai Anda: {{ score }} - Baik 👍</p>
    {% elif score >= 60 %}
        <p>Nilai Anda: {{ score }} - Cukup 😊</p>
    {% else %}
        <p>Nilai Anda: {{ score }} - Perlu Perbaikan 😢</p>
    {% endif %}
</body>
</html>

✅ Jika diakses dengan http://127.0.0.1:5000/nilai/95, maka tampil: "Nilai Anda: 95 - Sangat Baik! 🎉" ✅ Jika diakses dengan http://127.0.0.1:5000/nilai/70, maka tampil: "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)

@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)

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Mahasiswa</title>
</head>
<body>
    <h1>Daftar Mahasiswa</h1>
    <ul>
        {% for mhs in mahasiswa %}
            <li>
                {{ 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 %}
            </li>
        {% endfor %}
    </ul>
</body>
</html>

✅ 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 😢

Simple Interest App Program

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`

Kalkulator Engagement Rate

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:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Engagement Rate</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h2>Kalkulator Engagement Rate</h2>
        <form method="POST">
            <label>Jumlah Likes:</label>
            <input type="number" name="likes" required>

            <label>Jumlah Comments:</label>
            <input type="number" name="comments" required>

            <label>Jumlah Shares:</label>
            <input type="number" name="shares" required>

            <label>Total Followers:</label>
            <input type="number" name="followers" required>

            <button type="submit">Hitung</button>
        </form>

        {% if er is defined and er is not none %}
            <h3>Engagement Rate: {{ er }}%</h3>
        {% endif %}
    </div>
</body>
</html>

4️⃣ `style.css` - CSS untuk Tampilan

Buat file static/style.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

Jalankan server Flask
```
python app.py
```
Buka browser dan akses:
```
http://127.0.0.1:5000/
```

PreviousTypes of Python Frameworks NextGetting Started Django Py

Last updated 1 year ago

hashtag1. Instalasi Flask

hashtag2. Membuat Aplikasi Flask Sederhana

hashtag3. Routing (Menentukan Halaman)

hashtag3.1 Mengatur halaman khusus untuk /about

hashtag4. Static File Flask

hashtag1. Buat Folder static

hashtag2. Buat File style.css

hashtag3. Hubungkan CSS ke about.html

hashtag4. Jalankan Flask

hashtag5. Routing Dinamis

hashtag6. Variabel dalam Python Flask Framework

hashtag6.1. Variabel dalam Routing

hashtagContoh: Menampilkan Nama dari URL

hashtag6.2. Variabel dengan Tipe Data dalam Routing

hashtagContoh: ID Angka

hashtag6.3. Mengirim Variabel ke Template HTML

hashtagContoh: Mengirim Nama ke Template

hashtag6.4. Variabel Global dalam Flask

hashtag6.5. Variabel dalam Dictionary

hashtag7. FOR dan IF Statement

hashtag7.1. for Statement dalam Template Flask

hashtagContoh: Menampilkan List Nama di HTML

hashtag7.2. if Statement dalam Template Flask

hashtagContoh: Menampilkan Pesan Jika Tidak Ada Data

hashtag7.3. for dan if dalam Satu Loop

hashtagContoh: Menandai Admin dalam Daftar User

hashtag7.4. loop.index dalam for

hashtagContoh: Menampilkan Nomor Urut

hashtag8. If Elif and Else

hashtag1. if, elif, dan else dalam Template Flask

hashtagContoh: Menampilkan Pesan Berdasarkan Skor

hashtag2. for dengan if-elif-else

hashtagContoh: Menampilkan Status Mahasiswa

hashtagSimple Interest App Program

hashtag1️⃣ Menentukan Fitur Kalkulator

hashtag2️⃣ Membuat Struktur Flask Project

hashtag3️⃣ Mengembangkan app.py

hashtag4️⃣ Membuat Halaman index.html

hashtag5️⃣ Membuat Halaman result.html

hashtagKalkulator Engagement Rate

hashtag1️⃣ Struktur Proyek Flask

hashtag2️⃣ app.py - Logika Flask

hashtag3️⃣ index.html - Tampilan Form Input & Hasil

hashtag4️⃣ style.css - CSS untuk Tampilan

hashtag5️⃣ Cara Menjalankan Proyek

1. Instalasi Flask

2. Membuat Aplikasi Flask Sederhana

3. Routing (Menentukan Halaman)

3.1 Mengatur halaman khusus untuk /about

4. Static File Flask

1. Buat Folder `static`

2. Buat File `style.css`

3. Hubungkan CSS ke `about.html`

4. Jalankan Flask

5. Routing Dinamis

6. Variabel dalam Python Flask Framework

6.1. Variabel dalam Routing

Contoh: Menampilkan Nama dari URL

6.2. Variabel dengan Tipe Data dalam Routing

Contoh: ID Angka

6.3. Mengirim Variabel ke Template HTML

Contoh: Mengirim Nama ke Template

6.4. Variabel Global dalam Flask

6.5. Variabel dalam Dictionary

7. FOR dan IF Statement

7.1. `for` Statement dalam Template Flask

Contoh: Menampilkan List Nama di HTML

7.2. `if` Statement dalam Template Flask

Contoh: Menampilkan Pesan Jika Tidak Ada Data

7.3. `for` dan `if` dalam Satu Loop

Contoh: Menandai Admin dalam Daftar User

7.4. `loop.index` dalam `for`

Contoh: Menampilkan Nomor Urut

8. If Elif and Else

1. `if`, `elif`, dan `else` dalam Template Flask

Contoh: Menampilkan Pesan Berdasarkan Skor

2. `for` dengan `if-elif-else`

Contoh: Menampilkan Status Mahasiswa

Simple Interest App Program

1️⃣ Menentukan Fitur Kalkulator

2️⃣ Membuat Struktur Flask Project

3️⃣ Mengembangkan `app.py`

4️⃣ Membuat Halaman `index.html`

5️⃣ Membuat Halaman `result.html`

Kalkulator Engagement Rate

1️⃣ Struktur Proyek Flask

2️⃣ `app.py` - Logika Flask

3️⃣ `index.html` - Tampilan Form Input & Hasil

4️⃣ `style.css` - CSS untuk Tampilan

5️⃣ Cara Menjalankan Proyek