La era digital exige experiencias web dinámicas e interactivas. La creación de un servidor web es la piedra angular de este panorama digital, ya que le permite crear aplicaciones que van más allá de las páginas HTML estáticas. Python, con su sintaxis elegante y sus amplias bibliotecas, proporciona una base sólida para el desarrollo web. Flask, un microframework liviano y versátil, simplifica aún más el proceso. Al combinar la flexibilidad de Python con el enfoque optimizado de Flask, los desarrolladores pueden construir servidores web robustos de manera rápida y eficiente. Este recorrido profundiza en los conceptos básicos del desarrollo web, desde el manejo de solicitudes y respuestas HTTP hasta el enrutamiento y la creación de plantillas, lo que le permite crear aplicaciones web atractivas y funcionales que puedan conectar e informar al mundo.  «La web se está convirtiendo en la plaza principal de la aldea global del mañana». Bill Gates  Prerrequisitos  Python 3.x  Matraz  Instalar Flask usando pip:   pip install flask  El código  A continuación se muestra el código completo para un   simple: sistema de reservas de restaurante   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)    : comenzamos importando los módulos necesarios de Flask. Flask es la clase principal de nuestra aplicación, render_template se utiliza para representar plantillas HTML y request se utiliza para gestionar los datos entrantes del formulario. Importación de módulos Flask    : Creamos una instancia de la clase Flask, que será nuestra aplicación WSGI (Web Server Gateway Interface). Creando la aplicación Flask    : Definición de rutas    : esta ruta representa la plantilla   , que debe contener el formulario para que los usuarios ingresen los detalles de su reserva. Ruta de índice ('/') index.html    : esta ruta gestiona el envío del formulario. Extrae los datos del formulario mediante   y crea un mensaje de confirmación. Luego, el mensaje se pasa a la plantilla   para su representación. Ruta de envío ('/submit') request.form result.html   Ejecutando la aplicación:   python app.py    : si su   incluye   , el servidor se iniciará en modo de depuración, lo que resulta útil para el desarrollo. Proporciona mensajes de error detallados y recarga automáticamente el servidor cuando realiza cambios en su código. Modo de depuración app.py app.run(debug=True)    : de forma predeterminada, Flask se ejecuta en   . Si necesita cambiar el host o el puerto, puede modificar la llamada   en su   : Puerto y host http://127.0.0.1:5000/ app.run() app.py   if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True) Índice.html  El archivo   sirve como interfaz de usuario para el sistema de reservas y cuenta con un formulario en el que los usuarios pueden introducir sus datos, como nombre, número de teléfono, correo electrónico, fecha y hora para reservar una mesa. Está diseñado con CSS para ofrecer una experiencia visualmente atractiva y fácil de usar. Una vez enviados, los datos del formulario se envían al servidor para su procesamiento. 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>  Resultado.html  El archivo   muestra un mensaje de confirmación al usuario después de enviar el formulario. Muestra dinámicamente los detalles de la reserva, confirma la reserva y garantiza que se haya enviado un recordatorio a la información de contacto proporcionada. 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>  Reflexiones finales  Hemos profundizado en los principios básicos del desarrollo web, desde el manejo de solicitudes HTTP hasta la representación de contenido dinámico, sentando una base sólida para futuros proyectos. La web es un paisaje en constante evolución, repleto de oportunidades para la innovación y la creatividad. Acepte este desafío, continúe explorando las vastas posibilidades del desarrollo web y contribuya al tapiz en constante crecimiento de Internet.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Read My Stories

Este audio es producido en el idioma original de la historia!

Construyendo un servidor web con Python y Flask

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps