Erstelle einen URL-Kürzer mit Python Flask

Einführung

In diesem Projekt lernen wir, wie man einen URL-Kürzer mit Python und Flask erstellt. Ein URL-Kürzer ist ein Tool, das eine lange URL nimmt und sie in eine kürzere, leichter zu verarbeitende URL umwandelt. Dies kann nützlich sein, um Links in sozialen Medien oder E-Mails zu teilen, sowie um lange URLs nutzerfreundlicher zu gestalten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie man einen Projektordner einrichtet und die erforderlichen Dateien für den URL-Kürzer erstellt.
• Wie man eine SQLite-Datenbank einrichtet, um die ursprünglichen URLs und ihre zugehörigen gekürzten URLs zu speichern.
• Wie man mit zufälligen Zeichen gekürzte URLs generiert.
• Wie man eine Indexseite erstellt, auf der Benutzer eine URL eingeben können, die verkürzt werden soll, und die verkürzte URL anzeigt.
• Wie man Benutzer umleitet, wenn sie eine verkürzte URL eingeben, zur ursprünglichen URL.
• Wie man eine Historie-Seite erstellt, um alle URLs anzuzeigen, die verkürzt wurden.
• Wie man das Projekt ausführt und es in einem Webbrowser testet.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Zu verstehen, wie man ein Flask-Projekt einrichtet und die erforderlichen Dateien erstellt.
• SQLite zur Erstellung einer Datenbank und Ausführung von Abfragen zu nutzen.
• Zufällige Zeichen für die gekürzten URLs zu generieren.
• HTML-Vorlagen zu entwickeln und Basisvorlagen zu erweitern.
• Formular-Einreichungen zu verarbeiten und dynamischen Inhalt mit Flask anzuzeigen.
• URL-Umleitungen basierend auf Benutzereingaben zu implementieren.

Erstellen der Projekt-Dateien

Um zu beginnen, müssen wir einen Projektordner erstellen und die folgenden Dateien hinzufügen:

• app.py: In dieser Datei wird all der Code für unseren URL-Kürzer enthalten sein.
• templates/index.html: In dieser Datei wird der HTML-Code für die Indexseite unserer Website enthalten sein.
• templates/history.html: In dieser Datei wird der HTML-Code für die Historie-Seite unserer Website enthalten sein.
• templates/base.html: In dieser Datei wird der Basis-HTML-Code enthalten sein, der in sowohl index.html als auch history.html verwendet wird.

cd ~/project
touch app.py
mkdir templates
touch templates/index.html templates/history.html templates/base.html

Einrichten der Datenbank

Unser URL-Kürzer wird eine Datenbank benötigen, um die ursprünglichen URLs und ihre zugehörigen gekürzten URLs zu speichern. Wir werden SQLite für unsere Datenbank verwenden, das ein leichtgewichtiges und einfach zu bedienendes Datenbankmanagementsystem ist.

Um die Datenbank einzurichten, müssen wir zuerst in app.py die erforderlichen Module importieren:

## app.py
from flask import Flask, render_template, request, redirect
import string
import random
import sqlite3

Als nächstes müssen wir uns mit der SQLite-Datenbank verbinden und ein Cursor-Objekt erstellen:

## Verbinde dich mit der SQLite-Datenbank
conn = sqlite3.connect("urls.db", check_same_thread=False)
db = conn.cursor()

Anschließend können wir in unserer Datenbank eine Tabelle erstellen, um die URLs zu speichern:

## Erstelle die URLs-Tabelle, wenn sie nicht existiert
db.execute(
    """CREATE TABLE IF NOT EXISTS urls
              (id INTEGER PRIMARY KEY AUTOINCREMENT,
               original_url TEXT NOT NULL,
               short_url TEXT NOT NULL,
               created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)"""
)
conn.commit()

Generieren von gekürzten URLs

Um gekürzte URLs zu generieren, werden wir eine Kombination aus zufälligen Buchstaben und Zahlen verwenden. Dies kann mit den Modulen string und random in Python erreicht werden. Wir werden eine Funktion namens generate_short_url() erstellen, die einen zufälligen String aus 6 Zeichen zurückgeben wird:

def generate_short_url():
    characters = string.ascii_letters + string.digits
    short_url = "".join(random.choice(characters) for _ in range(6))
    return short_url

Erstellen der Indexseite

Die Indexseite unserer Website wird Benutzern ermöglichen, eine URL einzugeben, die verkürzt werden soll. Sie wird auch die verkürzte URL anzeigen, sobald sie generiert wurde. Der HTML-Code für diese Seite befindet sich in templates/index.html.

Zuerst müssen wir das Template base.html erweitern und ein Formular erstellen, mit dem Benutzer ihre URLs einreichen können:

{% extends "base.html" %} {% block content %}
<div class="text-center">
  <h1 class="text-3xl font-bold text-gray-900 mb-8">Verkürze deine 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="URL eingeben"
        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"
      >
        Verkürzen
      </button>
    </div>
  </form>
  {% if short_url %}
  <div class="mt-4">
    <p class="text-lg text-gray-700">
      Verkürzte URL:
      <a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
        >{{ request.host_url }}{{ short_url }}</a
      >
    </p>
  </div>
  {% endif %}
</div>
{% endblock %}

In index.html haben wir ein Formular mit einem einzelnen Eingabefeld, in dem Benutzer ihre URL eingeben können. Das Formular wird an die gleiche Seite gesendet, daher legen wir das action-Attribut auf / fest. Wir legen auch das method-Attribut auf POST fest, damit die Formulardaten im Anfragekörper gesendet werden.

Jetzt müssen wir templates/base.html hinzufügen:

<!doctype html>
<html>
  <head>
    <title>URL-Kürzer</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">URL-Kürzer</a>
      <div>
        <a href="/" class="text-gray-800 mr-6">Startseite</a>
        <a href="/history" class="text-gray-800">Verlauf</a>
      </div>
    </nav>
    <main class="container mx-auto max-w-xl pt-8 min-h-screen">
      {% block content %} {% endblock %}
    </main>
  </body>
</html>

In base.html haben wir eine Navigationsleiste oben auf der Seite mit Links zur Startseite und zur Verlaufsseite. Wir haben auch ein main-Element, das den Inhalt jeder Seite enthalten wird. Der content-Block ist der Ort, an dem der Inhalt jeder Seite eingefügt wird.

Wir müssen auch den erforderlichen Code in app.py hinzufügen, um Formulareingaben zu verarbeiten und die verkürzte URL zu generieren:

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        original_url = request.form["original_url"]
        short_url = generate_short_url()

        ## Füge die ursprüngliche und die verkürzte URL in die Datenbank ein
        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")

In index() überprüfen wir, ob die Anfrage-Methode POST ist. Wenn ja, erhalten wir die ursprüngliche URL aus den Formulardaten und generieren eine verkürzte URL. Wir fügen dann die ursprüngliche und die verkürzte URL in die Datenbank ein und rendern das index.html-Template mit der verkürzten URL.

Weiterleiten zur ursprünglichen URL

Wenn ein Benutzer eine verkürzte URL eingibt, möchten wir sie zur entsprechenden ursprünglichen URL weiterleiten. Dazu müssen wir eine Funktion erstellen, die die ursprüngliche URL aus der Datenbank basierend auf der verkürzten URL abruft:

@app.route("/<short_url>")
def redirect_to_url(short_url):
    ## Hole die ursprüngliche URL aus der Datenbank basierend auf der verkürzten URL
    db.execute("SELECT original_url FROM urls WHERE short_url=?", (short_url,))
    result = db.fetchone()

    if result:
        original_url = result[0]
        return redirect(original_url)

    return render_template("index.html")

Erstellen der Verlaufsseite

Die Verlaufsseite wird alle verkürzten URLs anzeigen, zusammen mit ihren ursprünglichen URLs und dem Datum, an dem sie hinzugefügt wurden. Der HTML-Code für diese Seite befindet sich in templates/history.html.

Zuerst müssen wir das Template base.html erweitern und eine Tabelle hinzufügen, um die URLs anzuzeigen:

{% extends "base.html" %} {% block content %}
<div class="w-full overflow-x-auto">
  <table class="w-full bg-white rounded shadow overflow-hidden">
    <thead class="bg-gray-200">
      <tr>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Ursprüngliche URL
        </th>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Verkürzte URL
        </th>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Datum
        </th>
      </tr>
    </thead>
    <tbody>
      {% for result in results %}
      <tr class="hover:bg-gray-100">
        <td class="border-t">
          <p class="py-3 px-4">{{ result[0] }}</p>
        </td>
        <td class="border-t">
          <a
            href="{{ request.host_url }}{{ result[1] }}"
            class="py-3 px-4 text-blue-500 hover:text-blue-700"
            >{{ request.host_url }}{{ result[1] }}</a
          >
        </td>
        <td class="border-t">
          <p class="py-3 px-4">{{ result[2] }}</p>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

Wir müssen auch den erforderlichen Code in app.py hinzufügen, um die URLs aus der Datenbank abzurufen und an das Template zu übergeben:

@app.route("/history")
def history():
    ## Hole alle URLs aus der Datenbank, sortiert nach den neusten
    db.execute(
        "SELECT original_url, short_url, created_at FROM urls ORDER BY created_at DESC"
    )
    results = db.fetchall()
    return render_template("history.html", results=results)

Ausführen des Projekts

Fügen Sie folgenden Code am Ende von app.py hinzu:

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

Sobald die Module installiert sind, können wir unser Projekt ausführen, indem wir python app.py in unserem Terminal ausführen. Dadurch wird der Flask-Entwicklungsserver gestartet und unsere Website wird unter http://localhost:8080 erreichbar sein.

Wechseln Sie zur 8080-Taste und aktualisieren Sie die Seite. Sie sollten Folgendes sehen:

Zusammenfassung

In diesem Projekt haben wir gelernt, wie man einen URL-Kürzer mit Python und Flask erstellt. Zunächst haben wir die erforderlichen Projektdateien und die Datenbank eingerichtet, dann haben wir Funktionen erstellt, um verkürzte URLs zu generieren und Formulareingaben zu verarbeiten. Wir haben auch gelernt, wie man die URLs aus der Datenbank abruft und anzeigt. Mit diesem Projekt können Sie jetzt Ihren eigenen URL-Kürzer erstellen und ihn nach Ihren Wünschen anpassen.