paint-brush
Kotonga Serveur Web na Python na Flaskpene@ajayvallab
Lisolo ya sika

Kotonga Serveur Web na Python na Flask

Molai mingi; Mpo na kotánga

Lisolo oyo ezali kotambwisa yo na nzela ya kotonga serveur web ya pete na kosalelaka Python mpe cadre ya Flask. Okoyekola makanisi ya ntina lokola routage, modèle, mpe kosimba ba demandes HTTP, nionso wana tango ozali kosala application web oyo ezali kosala
featured image - Kotonga Serveur Web na Python na Flask
Ajay Krishnan Prabhakaran HackerNoon profile picture
0-item
1-item
2-item

â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 flask

Mobeko 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.form mpe kotonga message ya confirmation. Na nsima, nsango yango elekisami na modèle result.html mpo na kosala yango.
  • 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> 


Lokasa ya kosala réservation ya restaurant


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> 



Lokasa ya kondimisa réservation


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

L O A D I N G
. . . comments & more!

About Author

Ajay Krishnan Prabhakaran HackerNoon profile picture
Ajay Krishnan Prabhakaran@ajayvallab
Senior Data Engineer | Big Data Wrangler | AI/ML Enthusiast | Full-Stack Developer | Turning chaos into insights

KOKANGA BA ÉTIQUES

ARTICLE OYO EZALAKI PRESENTE NA...