Création de la page d'accueil
La page d'accueil de notre site web permettra aux utilisateurs de soumettre une URL à raccourcir. Elle affichera également l'URL raccourcie une fois qu'elle aura été générée. Le code HTML de cette page se trouve dans templates/index.html.
Tout d'abord, nous devons étendre le modèle base.html et créer un formulaire pour que les utilisateurs puissent soumettre leurs URLs :
{% extends "base.html" %} {% block content %}
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-900 mb-8">Raccourcis ton 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="Entrez l'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"
>
Raccourcir
</button>
</div>
</form>
{% if short_url %}
<div class="mt-4">
<p class="text-lg text-gray-700">
URL raccourcie :
<a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
>{{ request.host_url }}{{ short_url }}</a
>
</p>
</div>
{% endif %}
</div>
{% endblock %}
Dans index.html, nous avons un formulaire avec un seul champ d'entrée pour que l'utilisateur puisse entrer son URL. Le formulaire sera soumis sur la même page, donc nous définissons l'attribut action sur /. Nous définissons également l'attribut method sur POST de manière à ce que les données du formulaire soient envoyées dans le corps de la requête.
Maintenant, nous devons ajouter templates/base.html :
<!doctype html>
<html>
<head>
<title>Raccourcisseur d'URL</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/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"
>Raccourcisseur d'URL</a
>
<div>
<a href="/" class="text-gray-800 mr-6">Accueil</a>
<a href="/history" class="text-gray-800">Historique</a>
</div>
</nav>
<main class="container mx-auto max-w-xl pt-8 min-h-screen">
{% block content %} {% endblock %}
</main>
</body>
</html>
Dans base.html, nous avons une barre de navigation en haut de la page avec des liens vers la page d'accueil et la page d'historique. Nous avons également un élément main qui contiendra le contenu de chaque page. Le bloc content est où le contenu de chaque page sera inséré.
Nous devons également ajouter le code nécessaire dans app.py pour gérer les soumissions de formulaire et générer l'URL raccourcie :
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
original_url = request.form["original_url"]
short_url = generate_short_url()
## Insérer les URLs originales et raccourcies dans la base de données
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")
Dans index(), nous vérifions si la méthode de la requête est POST. Si c'est le cas, nous obtenons l'URL originale à partir des données du formulaire et générons une URL raccourcie. Nous insérons ensuite les URLs originales et raccourcies dans la base de données et affichons le modèle index.html avec l'URL raccourcie.
