Sejarah baru

Membangun Server Web dengan Python dan Flask

oleh Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

Terlalu panjang; Untuk membaca

Artikel ini memandu Anda membangun server web sederhana menggunakan Python dan framework Flask. Anda akan mempelajari konsep-konsep utama seperti perutean, pembuatan templat, dan penanganan permintaan HTTP, sambil membuat aplikasi web yang fungsional.

featured image - Membangun Server Web dengan Python dan Flask

Era digital menuntut pengalaman web yang dinamis dan interaktif. Membangun server web adalah landasan lanskap digital ini, yang memungkinkan Anda membuat aplikasi yang melampaui halaman HTML statis. Python, dengan sintaksisnya yang elegan dan pustaka yang luas, menyediakan fondasi yang kuat untuk pengembangan web. Flask, kerangka kerja mikro yang ringan dan serbaguna, semakin menyederhanakan proses tersebut. Dengan menggabungkan fleksibilitas Python dengan pendekatan Flask yang efisien, pengembang dapat dengan cepat dan efisien membangun server web yang tangguh. Perjalanan ini menggali konsep inti pengembangan web, mulai dari penanganan permintaan dan respons HTTP hingga perutean dan pembuatan templat, yang memberdayakan Anda untuk membangun aplikasi web yang menarik dan fungsional yang dapat menghubungkan dan menginformasikan dunia.

"Web sedang menjadi alun-alun kota bagi desa global masa depan." - Bill Gates

Prasyarat

Bahasa Inggris Python 3.x
Labu

Instal Flask menggunakan pip:

 pip install flask

Kode

Berikut adalah kode lengkap untuk sistem reservasi Restoran sederhana:

 from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/submit', methods=['POST']) def submit(): # Extract form data name = request.form['name'] phone = request.form['phone'] email = request.form['email'] date = request.form['date'] time = request.form['time'] # Create a message for the result page message = ( f"Hello, {name.split()[0]}! Your reservation has been booked for {date} at {time}. " f"A reminder has been sent to {phone} and {email}" ) return render_template('result.html', message=message) if __name__ == '__main__': app.run(debug=True)

Mengimpor Modul Flask : Kita mulai dengan mengimpor modul yang diperlukan dari Flask. Flask adalah kelas utama untuk aplikasi kita, render_template digunakan untuk merender templat HTML, dan request digunakan untuk menangani data formulir yang masuk.
Membuat Aplikasi Flask : Kita membuat contoh kelas Flask, yang akan menjadi aplikasi WSGI (Web Server Gateway Interface) kita.
Menentukan Rute :
- Rute Indeks ('/') : Rute ini menyajikan templat index.html , yang seharusnya berisi formulir bagi pengguna untuk memasukkan rincian reservasi mereka.
- Submit Route ('/submit') : Rute ini menangani pengiriman formulir. Rute ini mengekstrak data dari formulir menggunakan request.form dan membuat pesan konfirmasi. Pesan tersebut kemudian diteruskan ke template result.html untuk dirender.
Menjalankan Aplikasi:

 python app.py

Mode Debug : Jika app.py Anda menyertakan app.run(debug=True) , server akan memulai dalam mode debug, yang berguna untuk pengembangan. Mode ini menyediakan pesan kesalahan terperinci dan secara otomatis memuat ulang server saat Anda membuat perubahan pada kode Anda.

Port dan Host : Secara default, Flask berjalan pada http://127.0.0.1:5000/ . Jika Anda perlu mengubah host atau port, Anda dapat mengubah panggilan app.run() di app.py Anda:

 if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True)

indeks.html

File index.html berfungsi sebagai antarmuka pengguna untuk sistem reservasi, yang menampilkan formulir tempat pengguna dapat memasukkan detail mereka seperti nama, nomor telepon, email, tanggal, dan waktu untuk memesan meja. Formulir ini ditata dengan CSS untuk memberikan pengalaman yang menarik secara visual dan ramah pengguna. Setelah pengiriman, data formulir dikirim ke server untuk diproses.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restaurant Table Booking</title> <style> body { font-family: Arial, sans-serif; background-image: url('https://img.freepik.com/premium-vector/delicious-food-menu-landing-page-template-homepage-design_631465-116.jpg?w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); max-width: 300px; width: 100%; } h1 { text-align: center; color: #333; } label { display: block; margin-bottom: 8px; color: #555; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="form-container"> <h1>Book a Table</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="date">Date:</label> <input type="date" id="date" name="date" required> <label for="time">Time:</label> <input type="time" id="time" name="time" required> <input type="submit" value="Submit"> </form> </div> </body> </html>

Hasil.html

File result.html menampilkan pesan konfirmasi kepada pengguna setelah formulir dikirimkan. File ini secara dinamis menampilkan detail reservasi, mengonfirmasi pemesanan, dan memastikan bahwa pengingat telah dikirim ke informasi kontak yang diberikan.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reservation Confirmation</title> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-image: url('https://img.freepik.com/free-vector/minimal-doodle-frame-background-social-story-highlight_53876-97970.jpg?t=st=1735447681~exp=1735451281~hmac=d8f33db86d2b336838279674afb91df8c2089c7e8be13d316dc26982e0b30ac2&w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; } .form-container { background-color: rgba(0, 0, 0, 0.7); padding: 40px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); max-width: 400px; width: 100%; text-align: center; } h1 { font-family: 'Lobster', cursive; font-size: 32px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body> <div class="form-container"> <h1>Reservation Confirmed!</h1> <p>{{ message }}</p> </div> </body> </html>

Pemikiran Penutup

Kami telah mendalami prinsip-prinsip inti pengembangan web, mulai dari menangani permintaan HTTP hingga merender konten dinamis, yang menjadi landasan yang kokoh untuk usaha-usaha di masa mendatang. Web adalah lanskap yang terus berkembang, penuh dengan peluang untuk inovasi dan kreativitas. Terimalah tantangan ini, teruslah mengeksplorasi kemungkinan-kemungkinan pengembangan web yang luas, dan berkontribusilah pada jalinan internet yang terus berkembang.