Нова историја

Изградња веб сервера са Питхон-ом и Фласк-ом

од стране Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

Предуго; Читати

Овај чланак вас води кроз изградњу једноставног веб сервера користећи Питхон и Фласк фрамеворк. Научићете кључне концепте као што су рутирање, шаблонирање и руковање ХТТП захтевима, све док креирате функционалну веб апликацију

featured image - Изградња веб сервера са Питхон-ом и Фласк-ом

Дигитално доба захтева динамична и интерактивна веб искуства. Изградња веб сервера је камен темељац овог дигиталног пејзажа, омогућавајући вам да креирате апликације које превазилазе статичне ХТМЛ странице. Питхон, са својом елегантном синтаксом и обимним библиотекама, пружа моћну основу за развој веба. Фласк, лаган и свестран микрооквир, додатно поједностављује процес. Комбинујући флексибилност Питхон-а са модернизованим приступом Фласка, програмери могу брзо и ефикасно да конструишу робусне веб сервере. Ово путовање улази у основне концепте веб развоја, од руковања ХТТП захтевима и одговорима до рутирања и шаблонирања, дајући вам снагу да изградите привлачне и функционалне веб апликације које могу да се повежу и информишу свет.

„Мреж постаје градски трг за глобално село сутрашњице. - Билл Гатес

Предуслови

Питхон 3.к
Фласк

Инсталирајте Фласк користећи пип:

 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)

Увоз Фласк модула : Почињемо увозом потребних модула из Фласк-а. Фласк је главна класа за нашу апликацију, рендер_темплате се користи за приказивање ХТМЛ шаблона, а рекуест се користи за руковање долазним подацима обрасца.
Креирање апликације Фласк : Креирамо инстанцу класе Фласк, која ће бити наша ВСГИ (Интерфејс мрежног пролаза сервера) апликација.
Дефинисање рута :
- Индексна рута ('/') : Ова рута приказује шаблон index.html , који треба да садржи образац за кориснике да унесу своје детаље о резервацији.
- Рута за слање ('/субмит') : Ова рута управља слањем обрасца. Извлачи податке из обрасца користећи request.form и конструише поруку за потврду. Порука се затим прослеђује шаблону result.html за приказивање.
Покретање апликације:

 python app.py

Режим за отклањање грешака : Ако ваш app.py укључује app.run(debug=True) , сервер ће се покренути у режиму за отклањање грешака, што је корисно за развој. Пружа детаљне поруке о грешци и аутоматски поново учитава сервер када унесете измене у свој код.

Порт и Хост : Подразумевано, Фласк ради на хттп: 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 служи као кориснички интерфејс за систем резервација, са формом где корисници могу да унесу своје детаље као што су име, број телефона, е-маил, датум и време за резервацију стола. Стилизован је са ЦСС-ом како би пружио визуелно привлачно и корисничко искуство. Након подношења, подаци обрасца се шаљу серверу на обраду.

 <!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 приказује кориснику поруку потврде након што се образац пошаље. Динамички приказује детаље резервације, потврђујући резервацију и уверава да је подсетник послат на дате контакт информације

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

Завршне мисли

Удубили смо се у основне принципе веб развоја, од руковања ХТТП захтевима до приказивања динамичког садржаја, постављајући чврсту основу за будуће подухвате. Веб је пејзаж који се стално развија, препун могућности за иновације и креативност. Прихватите овај изазов, наставите да истражујете огромне могућности веб развоја и допринесите стално растућој таписерији интернета