Daftar Isi
- Apa Saja yang Dibutuhkan?
- Struktur Folder Proyek
- Langkah 1: Membuat Backend dengan Flask
- Langkah 2: Buat Form HTML
- Langkah 3: Buat Halaman Hasil (result.html)
- Langkah 4: Jalankan Aplikasimu
- ❓ Pertanyaan yang Sering Ditanyakan
- Apakah data dari form bisa disimpan ke database?
- Bagaimana agar form lebih aman?
- Bisa nggak form-nya dibuat lebih menarik?
- Tips Tambahan
Kamu mungkin pernah lihat halaman web yang punya form isian—seperti formulir pendaftaran, login, atau kontak. Nah, kalau kamu bertanya-tanya “gimana sih cara bikin form HTML yang bisa diproses oleh Python di backend?”, jawabannya: mudah banget!
Kita akan bikin form HTML sederhana, lalu menghubungkannya dengan Python backend menggunakan Flask, salah satu framework Python paling populer dan ringan. Dalam waktu singkat, kamu bisa bikin form yang bisa menyimpan, membaca, atau memproses input dari pengguna.
Yuk, kita bahas langkah-langkahnya dari awal!
baca juga : Kenapa Arsitektur Perangkat Lunak Mempengaruhi Kinerja Aplikasi?
Apa Saja yang Dibutuhkan?
Sebelum mulai, kamu perlu menyiapkan:
✅ Python 3.x
✅ Text editor (seperti VS Code atau Sublime)
✅ Terminal / Command Prompt
✅ Flask (bisa di-install dengan pip)
Install Flask lewat terminal:
bashCopyEditpip install flask
Struktur Folder Proyek
Kita akan buat struktur proyek seperti ini:
cssCopyEditform-python/
│
├── app.py
└── templates/
├── form.html
└── result.html
Langkah 1: Membuat Backend dengan Flask
Buat file app.py dan isi dengan kode berikut:
pythonCopyEditfrom flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def form():
return render_template('form.html')
@app.route('/submit', methods=['POST'])
def submit():
name = request.form['name']
email = request.form['email']
return render_template('result.html', name=name, email=email)
if __name__ == '__main__':
app.run(debug=True)
Apa yang dilakukan kode di atas?
- Menampilkan form di route
/ - Menerima data POST dari form di route
/submit - Menampilkan hasil input di halaman baru
Langkah 2: Buat Form HTML
Buat folder templates, lalu file form.html di dalamnya:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Form HTML + Python</title>
</head>
<body>
<h1>Form Pendaftaran</h1>
<form action="/submit" method="POST">
<label>Nama:</label><br>
<input type="text" name="name" required><br><br>
<label>Email:</label><br>
<input type="email" name="email" required><br><br>
<button type="submit">Kirim</button>
</form>
</body>
</html>
Form ini akan mengirim data ke route /submit yang kita buat di backend.
Langkah 3: Buat Halaman Hasil (result.html)
Masih di folder templates, buat file result.html:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Hasil Form</title>
</head>
<body>
<h1>Data Terkirim!</h1>
<p><strong>Nama:</strong> {{ name }}</p>
<p><strong>Email:</strong> {{ email }}</p>
<a href="/">Kembali ke Form</a>
</body>
</html>
Variabel {{ name }} dan {{ email }} akan diisi dengan data dari Python backend secara otomatis lewat Flask.
Langkah 4: Jalankan Aplikasimu
Buka terminal, arahkan ke folder proyek, lalu jalankan:
bashCopyEditpython app.py
Buka browser dan akses:
👉 http://127.0.0.1:5000/
Coba isi form, klik Kirim, dan lihat hasilnya. Data kamu sekarang berhasil terkirim dan ditampilkan di halaman baru.
baca juga : Universitas Teknokrat Indonesia dan Unikom Sepakat Kerja Sama
❓ Pertanyaan yang Sering Ditanyakan
Apakah data dari form bisa disimpan ke database?
Bisa banget! Kamu bisa sambungkan ke database seperti SQLite, PostgreSQL, atau MongoDB lewat Python (misalnya dengan SQLAlchemy).
Bagaimana agar form lebih aman?
Gunakan validasi input dan fitur bawaan Flask seperti Flask-WTF untuk menangani CSRF token.
Bisa nggak form-nya dibuat lebih menarik?
Tentu! Kamu bisa tambahkan CSS atau gunakan framework seperti Bootstrap untuk mempercantik tampilan form.
Tips Tambahan
💡 Gunakan method POST untuk kirim data sensitif (seperti password) karena lebih aman daripada GET.
💡 Pisahkan logic Python dan HTML agar struktur aplikasi tetap bersih dan mudah dipelihara.
💡 Validasi input di sisi frontend dan backend untuk menghindari data tidak valid atau serangan injeksi.
penulis : Muhammad Anwar Fuadi