Creando la página de índice
La página de índice de nuestro sitio web permitirá a los usuarios enviar una URL para que sea encurtida. También mostrará la URL encurtida una vez que se haya generado. El código HTML para esta página se puede encontrar en templates/index.html.
Primero, necesitamos extender la plantilla base.html y crear un formulario para que los usuarios envíen sus URLs:
{% extends "base.html" %} {% block content %}
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-900 mb-8">Acorta tu URL</h1>
<form action="/" method="POST" class="w-full max-w-sm mx-auto">
<div
class="flex items-center border-2 border-blue-500 rounded overflow-hidden"
>
<input
type="text"
name="original_url"
placeholder="Ingrese URL"
class="appearance-none bg-transparent border-none w-full text-gray-700 py-2 px-4 leading-tight focus:outline-none"
/>
<button
type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r focus:outline-none"
>
Acortar
</button>
</div>
</form>
{% if short_url %}
<div class="mt-4">
<p class="text-lg text-gray-700">
URL encurtida:
<a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
>{{ request.host_url }}{{ short_url }}</a
>
</p>
</div>
{% endif %}
</div>
{% endblock %}
En index.html, tenemos un formulario con un solo campo de entrada para que el usuario ingrese su URL. El formulario se enviará a la misma página, por lo que establecemos el atributo action en /. También establecemos el atributo method en POST para que los datos del formulario se envíen en el cuerpo de la solicitud.
Ahora, necesitamos agregar templates/base.html:
<!doctype html>
<html>
<head>
<title>Encurtidor de URL</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav class="p-6 bg-white flex justify-between items-center">
<a href="/" class="text-2xl font-bold text-gray-900">Encurtidor de URL</a>
<div>
<a href="/" class="text-gray-800 mr-6">Inicio</a>
<a href="/history" class="text-gray-800">Historial</a>
</div>
</nav>
<main class="container mx-auto max-w-xl pt-8 min-h-screen">
{% block content %} {% endblock %}
</main>
</body>
</html>
En base.html, tenemos una barra de navegación en la parte superior de la página con enlaces a la página de inicio y la página de historial. También tenemos un elemento main que contendrá el contenido de cada página. El bloque content es donde se insertará el contenido de cada página.
También necesitamos agregar el código necesario en app.py para manejar los envíos de formularios y generar la URL encurtida:
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
original_url = request.form["original_url"]
short_url = generate_short_url()
## Insertar las URLs original y encurtida en la base de datos
db.execute(
"INSERT INTO urls (original_url, short_url) VALUES (?,?)",
(original_url, short_url),
)
conn.commit()
return render_template("index.html", short_url=short_url)
return render_template("index.html")
En index(), verificamos si el método de solicitud es POST. Si es así, obtenemos la URL original de los datos del formulario y generamos una URL encurtida. Luego insertamos las URLs original y encurtida en la base de datos y renderizamos la plantilla index.html con la URL encurtida.
