âge numérique esengaka ba expériences web dynamiques mpe interactives. Kotonga serveur web ezali libanga ya nse ya paysage numérique oyo, kopesa yo makoki ya kosala ba applications oyo eleki ba pages HTML statiques. Python, na syntaxe na yango ya kitoko mpe ba bibliothèques ya minene, epesaka moboko ya makasi mpo na développement web. Flask, microcadre ya kilo mpe oyo ekoki kosalelama na makambo mingi, esalaka ete mosala yango ezala pɛtɛɛ lisusu. Na kosangisaka flexibilité ya Python na approche rationalisée ya Flask, ba développeurs bakoki kotonga noki mpe na ndenge ya malamu ba serveurs web ya makasi. Mobembo oyo ezali ko profonder na ba concepts ya moboko ya développement web, kobanda na ko traité ba demandes na ba réponses HTTP tii na routage na templating, kopesa yo makoki ya kotonga ba applications web engageants pe fonctionnelles oyo ekoki ko connecter pe ko informer mokili.
"Web ezali kokoma esika ya engumba mpo na mboka mondial ya lobi." - Bill Gates, oyo azali na mbula 19
Makambo oyo esengeli liboso
- Python 3.x
- Flacon ya kosala
Botia Flask na kosalelaka pip:
pip install flaskMobeko yango
Awa na nse ezali na code mobimba mpo na système ya réservation ya Restaurant ya pete :
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)
- Importation ya ba modules ya Flask : Tobandi na ko importer ba modules oyo esengeli na Flask. Flask ezali classe principale pona application na biso, render_template esalelamaka pona ko rendre ba modèles HTML, pe demande esalelamaka pona ko gérer ba données ya formulaire oyo ekoti.
- Kosala App ya Flask : Tosalaka instance ya classe ya Flask, oyo ekozala application na biso ya WSGI (Web Server Gateway Interface).
- Kolimbola Banzela :
- Nzela ya Index ('/') : Nzela oyo ezo rendre modèle
index.html, oyo esengeli ezala na formulaire pona ba usagers ba kotisa ba détails ya réservation na bango. - Nzela ya kotinda ('/submit') : Nzela oyo esimbaka botindiki formulaire. Ezali kobimisa ba données na formulaire na kosalelaka
request.formmpe kotonga message ya confirmation. Na nsima, nsango yango elekisami na modèleresult.htmlmpo na kosala yango.
- Nzela ya Index ('/') : Nzela oyo ezo rendre modèle
- Kosala App:
python app.py Mode ya débogage : Soki app.py na yo ezali na app.run(debug=True) , serveur ekobanda na mode ya débogage, oyo ezali na tina pona développement. Ezali kopesa ba messages ya erreur ya détail mpe ezo recharger automatiquement serveur tango osali ba changements na code na yo.
Port mpe Host : Na ndenge ya libela, Flask esalaka na http://127.0.0.1:5000/ . Soki osengeli kobongola hôte to port, okoki kobongola app.run() appel na app.py na yo :
if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True)
Index.html
Fisyé index.html esalaka lokola interface ya mosaleli mpo na système ya réservation, ezali na formulaire esika basaleli bakoki kokotisa makambo na bango lokola kombo, nimero ya telefone, email, mokolo, mpe ngonga mpo na kosala réservation ya mesa. Ezali na style na CSS mpo na kopesa expérience ya visuel mpe ya usager facile. Na tango ya kotinda, ba données ya formulaire etindamaka na serveur pona ko traité.
<!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>
Résultat.html
Fisyé result.html elakisaka nsango ya bondimisi na mosaleli sima ya kotinda formulaire. Ezali kolakisa na ndenge ya dynamique ba détails ya réservation, ko confirmer réservation mpe ko assurer que rappel etindami na ba informations ya contact oyo epesami
<!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>
Makanisi ya kosukisa
Tosili ko profonder na ba principes ya moboko ya développement web, kobanda na ko traité ba demandes HTTP tii na ko rendre contenus dynamique, kotia moboko makasi pona ba efforts ya mikolo ekoya. Web ezali esika oyo ezali kobongwana ntango nyonso, oyo etondi na mabaku ya kosala makambo ya sika mpe ya kokela. Boyamba mokakatano oyo, bokoba kotala ba possibilités minene ya développement web, mpe bopesa maboko na tapisserie oyo ezali se kokola ya internet
