Per què fem servir Python i Flask?
Cal entendre la diferència entre una web estàtica i una de dinàmica.
· Web estàtica (Htlm i CSS): La informació és fixa i només es pot llegir, no es pot modificar ni guardar dades ni interactuar amb la base de dades.
· Web dinàmica (Python i Flask): El Python actua com el Backend
- Connexió amb Base de Dades: Python ens permet connectar la web amb MySQL per guardar registres, llegir dades i generar informes en temps real.
- Processament de dades: Ens permet fer que la web “faci coses”, com validar un formulari, gestionar sessions d’usuari (login) i escalar l’aplicació a mesura que creix.
- Gestió de rutes: Python decideix què mostrar a l’usuari en funció de les seves accions, enviant dades de la base de dades directament a la interfície.
El prompt que vaig utilitzar per generar el codi Python amb la IA, per fer el registre de la LAN Party, va ser el següent:
Vull que em facis un formulari de registre per a la LAN Party de l’Institut Castellbisbal amb codi Python. El formulari ha de ser en català i ha de preguntar el nom, cognoms, el “nickname”, telèfon, correu electrònic, dies d’assistència (10, 11 i 12 d’abril), DNI/NIE i si hi ha alguna intolerància.
Vull que els colors siguin contrastants perquè hi sigui visible i estètic.
El codi que em va generar va ser el següent:
import http.server
import socketserver
import urllib.parse
# Configuración del puerto
PORT = 8000
class MiServidor(http.server.BaseHTTPRequestHandler):
def do_GET(self):
"""Dibuja el formulario de la LAN Party con diseño CLARO"""
self.send_response(200)
self.send_header("Content-type", "text/html; charset=utf-8")
self.end_headers()
# HTML con diseño CLARO y acentos morados
html = f'''
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Inscripció LAN Party</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Fondo general gris muy suave para no cansar la vista */
body {{ background-color: #f0f2f5; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }}
/* Tarjeta blanca con sombra suave */
.card {{
max-width: 600px;
margin: auto;
border: none;
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-top: 6px solid #8e44ad; /* Borde superior morado */
}}
/* Títulos y textos */
h2 {{ color: #8e44ad; font-weight: 800; }} /* Morado intenso */
.form-label {{ font-weight: 600; color: #34495e; }}
/* Botón personalizado morado */
.btn-gamer {{
background-color: #8e44ad;
color: white;
font-weight: bold;
padding: 12px;
transition: background 0.3s;
border: none;
}}
.btn-gamer:hover {{
background-color: #732d91;
color: white;
}}
/* Inputs más visibles */
.form-control:focus {{
border-color: #8e44ad;
box-shadow: 0 0 0 0.25rem rgba(142, 68, 173, 0.25);
}}
</style>
</head>
<body>
<div class="card p-4">
<h2 class="text-center">🎮 INSCRIPCIÓ LAN PARTY</h2>
<p class="text-center text-secondary">Formulari de registre oficial</p>
<hr>
<form method="POST" action="/reservar">
<div class="mb-3">
<label class="form-label">Nom</label>
<input type="text" name="nom" class="form-control" style="background-color: #f8f9fa;" required>
</div>
<div class="mb-3">
<label class="form-label">Cognoms</label>
<input type="text" name="cognoms" class="form-control" style="background-color: #f8f9fa;" required>
</div>
<div class="mb-3">
<label class="form-label">Nom d'usuari (Nickname)</label>
<input type="text" name="nickname" class="form-control" placeholder="Ex: ProGamer99" style="border: 2px solid #ddd;" required>
</div>
<div class="mb-3">
<label class="form-label">Correu electrònic</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Número de telèfon</label>
<input type="text" name="tel" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">DNI / NIE</label>
<input type="text" name="dni" class="form-control">
</div>
<div class="mb-3 p-3 bg-light rounded border">
<label class="form-label d-block text-primary">📅 Quins dies assistiràs?</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="dies" value="Dia 10">
<label class="form-check-label">Dia 10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="dies" value="Dia 11">
<label class="form-check-label">Dia 11</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="dies" value="Dia 12">
<label class="form-check-label">Dia 12</label>
</div>
</div>
<div class="mb-4">
<label class="form-label">Intoleràncies o al·lèrgies</label>
<textarea name="alergies" class="form-control" rows="2" placeholder="Ex: Celíac, fruits secs..."></textarea>
</div>
<button type="submit" class="btn btn-gamer w-100">FINALITZAR REGISTRE</button>
</form>
</div>
</body>
</html>
'''
self.wfile.write(html.encode("utf-8"))
def do_POST(self):
"""Gestiona el envío del formulario"""
content_length = int(self.headers['Content-Length'])
post_data = self.rfile.read(content_length).decode('utf-8')
params = urllib.parse.parse_qs(post_data)
# Extraer datos
nickname = params.get('nickname', [''])[0]
dies_selecionats = params.get('dies', [])
dies_str = ", ".join(dies_selecionats) if dies_selecionats else "Cap dia seleccionat"
self.send_response(200)
self.send_header("Content-type", "text/html; charset=utf-8")
self.end_headers()
# Respuesta visual
missatge = f"✅ REGISTRE COMPLET: Benvingut, <b>{nickname}</b>!<br>T'esperem els dies: <b>{dies_str}</b>."
color = "success" # Verde
if not dies_selecionats:
color = "warning" # Amarillo
missatge = f"⚠️ ATENCIÓ {nickname}: T'has registrat però no has marcat cap dia."
respost_html = f'''
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>body {{ background-color: #f0f2f5; font-family: sans-serif; padding-top: 50px; }}</style>
<div class="container text-center">
<div class="card shadow p-5">
<h3 class="mb-4">Estat de la Inscripció</h3>
<div class="alert alert-{color}">{missatge}</div>
<a href="/" class="btn btn-outline-secondary mt-3">Tornar al formulari</a>
</div>
</div>
'''
self.wfile.write(respost_html.encode("utf-8"))
# --- BLOQUE PRINCIPAL ---
if __name__ == "__main__":
with socketserver.TCPServer(("", PORT), MiServidor) as httpd:
print(f"✅ Servidor iniciado en http://localhost:{PORT}")
print("Presiona Ctrl+C en la terminal para detenerlo.")
try:
httpd.serve_forever()
except KeyboardInterrupt:
print("\n🛑 Servidor detenido.")
httpd.server_close()I el formulari que va generar va ser el següent:
