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   sederhana: sistem reservasi Restoran   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)    : 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. Mengimpor Modul Flask    : Kita membuat contoh kelas Flask, yang akan menjadi aplikasi WSGI (Web Server Gateway Interface) kita. Membuat Aplikasi Flask    : Menentukan Rute    : Rute ini menyajikan templat   , yang seharusnya berisi formulir bagi pengguna untuk memasukkan rincian reservasi mereka. Rute Indeks ('/') index.html    : Rute ini menangani pengiriman formulir. Rute ini mengekstrak data dari formulir menggunakan   dan membuat pesan konfirmasi. Pesan tersebut kemudian diteruskan ke template   untuk dirender. Submit Route ('/submit') request.form result.html   Menjalankan Aplikasi:   python app.py    : Jika   Anda menyertakan   , 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. Mode Debug app.py app.run(debug=True)    : Secara default, Flask berjalan pada   . Jika Anda perlu mengubah host atau port, Anda dapat mengubah panggilan   di   Anda: Port dan Host http://127.0.0.1:5000/ app.run() app.py   if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True) indeks.html  File   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. index.html     <!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   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. result.html     <!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.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Read My Stories

Audio ini diproduksi dalam bahasa asli cerita!

Membangun Server Web dengan Python dan Flask

About Author

KOMENTAR

HANG TAG

ARTIKEL INI DISAJIKAN PADA

Related Stories

How to Fetch Large Data Files Through GitHub API

19 things I learnt reading the NodeJSdocs

THE DAWN COMES, AND MY UNCLE APPEARS IN A NEW SILK HAT

PROMISES FULFILLED.

How to Fetch Large Data Files Through GitHub API

19 things I learnt reading the NodeJSdocs

THE DAWN COMES, AND MY UNCLE APPEARS IN A NEW SILK HAT

PROMISES FULFILLED.

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps