Tutorial Membuat Website Menggunakan Framework Flask

Ditulis oleh:Waktu baca:

admin~3 menit

Halo semua, dalam postingan kali ini saya kita akan belajar membuat membuat aplikasi web menggunakan Flask. Flask sebuah framework web berbasis bahasa Python yang cukup ringan dan mudah digunakan. Flask sangat cocok untuk para pemula yang ingin belajar membuat sebuah aplikasi web.

Buat kamu yang ingin belajar membuat aplikasi web, tutorial ini sangat cocok buat kamu, karena python adalah bahasa yang sangat mudah dipelajari dan Flask juga adalah salah satu framework yang sangat mudah digunakan.

Prasyarat:

Python 3.x sudah terinstall.
Pengalaman basic dengan Python.

Step 1: Instal Flask

Pertama, buka terminal atau cmd, lalu install Flask menggunakan pip:

pip install Flask

Step 2: Membuat Struktur Folder

Buat folder untuk proyek Kamu, misalnya my_flask_app, dan di dalamnya buat file app.py sebagai entry point aplikasi.

my_flask_app/
└── app.py

Step 3: Menulis Kode Python

Buka app.py dan tuliskan kode berikut:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, Flask!"

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

Penjelasan

Flask(__name__): Membuat instance Flask.
@app.route("/"): Mendefinisikan rute URL untuk halaman utama.
app.run(debug=True): Menjalankan aplikasi dalam mode debug.

Step 4: Jalankan Aplikasi

Kembali ke terminal, pindak direktori ke folder proyek, dan jalankan aplikasi Flask yang sudah dibuat dengan perintah:

python app.py

Kamu akan melihat output seperti berikut:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Buka browser dan kunjungi http://127.0.0.1:5000/ untuk melihat aplikasi Kamu. Jika berhasil, Kamu akan melihat teks "Hello, Flask!" di browser.

Step 5: Menambahkan Halaman Lain

Sekarang, mari tambahkan halaman baru. Tambahkan rute lain dalam app.py:

@app.route("/about")
def about():
    return "Ini adalah halaman About."

Restart server Flask, lalu buka http://127.0.0.1:5000/about. Kamu akan melihat pesan "Ini adalah halaman About."

Step 6: Menggunakan Template HTML

Flask sudah support penggunaan template HTML untuk membuat halaman yang lebih kompleks. Buat folder bernama templates di dalam proyek, lalu buat file home.html:

my_flask_app/
├── app.py
└── templates/
    └── home.html

Isi file home.html dengan kode HTML berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>Hello, Dunia!</h1>
    <p>Selamat datang di aplikasi Flask.</p>
</body>
</html>

Lalu, ubah fungsi home di app.py agar menggunakan template ini:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")

Jalankan kembali aplikasi dan buka http://127.0.0.1:5000/. Sekarang Kamu akan melihat halaman HTML yang lebih menarik.

Step 7: Menambahkan Formulir dan Memproses Data

Buat halaman form untuk menginput nama. Tambahkan rute berikut di app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/greet", methods=["POST"])
def greet():
    name = request.form.get("name")
    return f"Hello, {name}!"

Update home.html lalu tambahkan form:

<form action="/greet" method="post">
    <label for="name">Nama:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>

Sekarang, ketika user menginputkan nama dan mengirimkan form, maka akan diarahkan ke halaman yang menampilkan "Hello, [nama]!"

Penutup

Kamu sekarang sudah bisa membuat aplikasi web sederhana dengan Flask yang mendukung beberapa route, template, dan form. Untuk memperkaya aplikasi, kamu dapat menambahkan halaman lainnya, logic, serta mempelajari cara menggunakan database seperti SQLite atau MySQL dengan Flask.

InsyaAllah di postingan yang akan datang akan dibahas lagi mengenai tips pembuatan aplikasi lainnya dan juga tips teknologi digital lainnya.

Akhir kata, semoga tutorial sederahana ini bermanfaat untuk pembaca semua, dan sampai jumpa di postingan berikutnya..

Wassalamualaikum...

Share postingan ini: