Bagong kasaysayan

Pagbuo ng Web Server gamit ang Python at Flask

sa pamamagitan ng Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

Masyadong mahaba; Upang basahin

Ginagabayan ka ng artikulong ito sa pagbuo ng isang simpleng web server gamit ang Python at ang Flask framework. Matututo ka ng mga pangunahing konsepto tulad ng pagruruta, pag-templat, at paghawak ng mga kahilingan sa HTTP, habang gumagawa ng functional na web application

featured image - Pagbuo ng Web Server gamit ang Python at Flask

Ang digital age ay nangangailangan ng mga dynamic at interactive na karanasan sa web. Ang pagbuo ng isang web server ay ang pundasyon ng digital na landscape na ito, na nagbibigay-daan sa iyong lumikha ng mga application na higit pa sa mga static na HTML na pahina. Ang Python, kasama ang eleganteng syntax at malawak na mga aklatan, ay nagbibigay ng makapangyarihang pundasyon para sa pagbuo ng web. Ang flask, isang magaan at maraming nalalaman na microframework, ay higit na pinapasimple ang proseso. Sa pamamagitan ng pagsasama-sama ng flexibility ng Python sa streamlined na diskarte ng Flask, mabilis at mahusay na makakagawa ang mga developer ng matatag na web server. Ang paglalakbay na ito ay sumasalamin sa mga pangunahing konsepto ng web development, mula sa paghawak sa mga kahilingan at tugon ng HTTP hanggang sa pagruruta at pag-templat, na nagbibigay-kapangyarihan sa iyo na bumuo ng mga nakakaengganyo at functional na web application na maaaring kumonekta at makapagbigay-alam sa mundo.

"Ang web ay nagiging town square para sa pandaigdigang nayon ng bukas." - Bill Gates

Mga kinakailangan

Python 3.x
Prasko

I-install ang Flask gamit ang pip:

 pip install flask

Ang Kodigo

Nasa ibaba ang kumpletong code para sa isang simpleng sistema ng pagpapareserba sa Restaurant :

 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)

Pag-import ng Mga Module ng Flask : Magsisimula tayo sa pamamagitan ng pag-import ng mga kinakailangang module mula sa Flask. Ang flask ay ang pangunahing klase para sa aming aplikasyon, ang render_template ay ginagamit upang mag-render ng mga template ng HTML, at ang kahilingan ay ginagamit upang pangasiwaan ang papasok na data ng form.
Paglikha ng Flask App : Lumilikha kami ng isang instance ng klase ng Flask, na magiging aming WSGI (Web Server Gateway Interface) na application.
Pagtukoy ng mga Ruta :
- Ruta ng Index ('/') : Ang rutang ito ay nagre-render ng template index.html , na dapat maglaman ng form para maipasok ng mga user ang mga detalye ng kanilang reserbasyon.
- Isumite ang Ruta ('/submit') : Ang rutang ito ang humahawak sa pagsusumite ng form. Kinukuha nito ang data mula sa form gamit ang request.form at gumagawa ng mensahe ng kumpirmasyon. Ang mensahe ay ipapasa sa result.html template para sa pag-render.
Pagpapatakbo ng App:

 python app.py

Debug Mode : Kung ang iyong app.py ay may kasamang app.run(debug=True) , magsisimula ang server sa debug mode, na kapaki-pakinabang para sa pagbuo. Nagbibigay ito ng mga detalyadong mensahe ng error at awtomatikong nire-reload ang server kapag gumawa ka ng mga pagbabago sa iyong code.

Port at Host : Bilang default, tumatakbo ang Flask sa http://127.0.0.1:5000/ . Kung kailangan mong baguhin ang host o port, maaari mong baguhin ang app.run() na tawag sa iyong app.py :

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

Index.html

Ang index.html file ay nagsisilbing user interface para sa sistema ng pagpapareserba, na nagtatampok ng isang form kung saan maaaring ipasok ng mga user ang kanilang mga detalye tulad ng pangalan, numero ng telepono, email, petsa, at oras para sa pag-book ng talahanayan. Ito ay naka-istilo gamit ang CSS upang magbigay ng visually appealing at user-friendly na karanasan. Sa pagsumite, ang data ng form ay ipinadala sa server para sa pagproseso.

 <!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>

Resulta.html

Ang result.html file ay nagpapakita ng mensahe ng kumpirmasyon sa user pagkatapos maisumite ang form. Dinamikong ipinapakita nito ang mga detalye ng reservation, na nagkukumpirma sa booking at tinitiyak na may ipinadalang paalala sa ibinigay na impormasyon sa pakikipag-ugnayan

 <!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>

Pangwakas na Kaisipan

Sinuri namin ang mga pangunahing prinsipyo ng web development, mula sa paghawak ng mga kahilingan sa HTTP hanggang sa pag-render ng dynamic na content, paglalatag ng matatag na pundasyon para sa mga pagsusumikap sa hinaharap. Ang web ay isang patuloy na umuunlad na tanawin, puno ng mga pagkakataon para sa pagbabago at pagkamalikhain. Yakapin ang hamon na ito, patuloy na tuklasin ang malawak na posibilidad ng pagbuo ng web, at mag-ambag sa patuloy na lumalagong tapestry ng internet