â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
Botia Flask na kosalelaka pip:
pip install flask
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)
index.html
, oyo esengeli ezala na formulaire pona ba usagers ba kotisa ba détails ya réservation na bango.request.form
mpe kotonga message ya confirmation. Na nsima, nsango yango elekisami na modèle result.html
mpo na kosala yango. 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)
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>
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>
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