היסטוריה חדשה

בניית שרת אינטרנט עם Python ו-Flask

על ידי Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

יותר מדי זמן; לקרוא

מאמר זה מנחה אותך בבניית שרת אינטרנט פשוט באמצעות Python ומסגרת Flask. תלמד מושגי מפתח כמו ניתוב, תבניות וטיפול בבקשות HTTP, הכל תוך כדי יצירת יישום אינטרנט פונקציונלי

featured image - בניית שרת אינטרנט עם Python ו-Flask

העידן הדיגיטלי דורש חוויות אינטרנט דינמיות ואינטראקטיביות. בניית שרת אינטרנט היא אבן היסוד של הנוף הדיגיטלי הזה, המאפשרת לך ליצור יישומים שחורגים מדפי HTML סטטיים. Python, עם התחביר האלגנטי והספריות הנרחבות שלו, מספק בסיס רב עוצמה לפיתוח אתרים. Flask, מיקרו-מסגרת קלת משקל ורב-תכליתית, מפשטת עוד יותר את התהליך. על ידי שילוב הגמישות של Python עם הגישה היעיל של Flask, מפתחים יכולים לבנות במהירות וביעילות שרתי אינטרנט חזקים. מסע זה מתעמק במושגי הליבה של פיתוח אתרים, החל מטיפול בבקשות HTTP ותגובות ועד לניתוב ותבניות, ומעצים אותך לבנות יישומי אינטרנט מרתקים ופונקציונליים שיכולים להתחבר וליידע את העולם.

"הרשת הופכת לכיכר העיר של הכפר הגלובלי של המחר." - ביל גייטס

דרישות מוקדמות

Python 3.x
בַּקבּוּק

התקן Flask באמצעות pip:

 pip install flask

הקוד

להלן הקוד המלא למערכת הזמנת מסעדה פשוטה:

 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)

ייבוא מודולי Flask : אנו מתחילים בייבוא המודולים הדרושים מ-Flask. Flask הוא המחלקה העיקרית עבור היישום שלנו, render_template משמש לעיבוד תבניות HTML, ובקשה משמשת לטיפול בנתוני טופס נכנסים.
יצירת אפליקציית Flask : אנו יוצרים מופע של מחלקת Flask, שתהיה אפליקציית ה-WSGI (ממשק שער האינטרנט של שרת האינטרנט) שלנו.
הגדרת מסלולים :
- מסלול אינדקס ('/') : מסלול זה מעבד את תבנית index.html , שאמורה להכיל את הטופס שבו משתמשים יוכלו להזין את פרטי ההזמנה שלהם.
- שלח מסלול ('/submit') : מסלול זה מטפל בהגשת הטופס. הוא מחלץ את הנתונים מהטופס באמצעות request.form ובונה הודעת אישור. לאחר מכן ההודעה מועברת לתבנית result.html לעיבוד.
הפעלת האפליקציה:

 python app.py

מצב ניפוי באגים : אם app.py שלך כולל app.run(debug=True) , השרת יתחיל במצב ניפוי באגים, וזה שימושי לפיתוח. הוא מספק הודעות שגיאה מפורטות ומטען מחדש את השרת באופן אוטומטי כאשר אתה מבצע שינויים בקוד שלך.

יציאה ומארח : כברירת מחדל, Flask פועל על http://127.0.0.1:5000/ . אם אתה צריך לשנות את המארח או היציאה, אתה יכול לשנות את הקריאה app.run() ב- app.py שלך:

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

Index.html

הקובץ index.html משמש כממשק המשתמש של מערכת ההזמנות, וכולל טופס שבו המשתמשים יכולים להזין את פרטיהם כגון שם, מספר טלפון, מייל, תאריך ושעה להזמנת שולחן. הוא מעוצב עם CSS כדי לספק חוויה מושכת ויזואלית וידידותית למשתמש. עם שליחת הטופס נשלחים לשרת לעיבוד.

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

Result.html

הקובץ 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>

מחשבות סגירה

התעמקנו בעקרונות הליבה של פיתוח אתרים, מטיפול בבקשות HTTP ועד לעיבוד תוכן דינמי, הנחת בסיס איתן למאמצים עתידיים. הרשת היא נוף מתפתח כל הזמן, שופע הזדמנויות לחדשנות ויצירתיות. תאמצו את האתגר הזה, המשיכו לחקור את האפשרויות העצומות של פיתוח אתרים ותרום לשטייח ההולך וגדל של האינטרנט