Page cover image

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

  1. Jalankan server Flask

    python app.py

  2. Buka browser dan akses:

    http://127.0.0.1:5000/
PreviousTypes of Python FrameworksNextGetting Started Django Py

Last updated