Создайте сокращатель ссылок с помощью Python и Flask

Введение

В этом проекте мы узнаем, как создать сокращатель ссылок с использованием Python и Flask. Сокращатель ссылок - это инструмент, который берет длинную ссылку и преобразует ее в более короткую, удобную для управления ссылку. Это может быть полезно для обмена ссылками в социальных сетях или электронных письмах, а также для повышения удобства использования длинных ссылок.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать папку проекта и создавать необходимые файлы для сокращателя ссылок;
• настраивать базу данных SQLite для хранения исходных ссылок и соответствующих им сокращенных ссылок;
• генерировать сокращенные ссылки с использованием случайных символов;
• создавать главную страницу, на которой пользователи могут отправить ссылку для сокращения и увидеть сокращенную ссылку;
• перенаправлять пользователей на исходную ссылку, когда они вводят сокращенную ссылку;
• создавать страницу истории для отображения всех сокращенных ссылок;
• запускать проект и тестировать его в веб-браузере.

🏆 Достижения

После завершения этого проекта вы сможете:

• понять, как настроить проект Flask и создать необходимые файлы;
• использовать SQLite для создания базы данных и выполнения запросов;
• генерировать случайные символы для сокращенных ссылок;
• разрабатывать HTML-шаблоны и расширять базовые шаблоны;
• обрабатывать отправку форм и отображать динамический контент с использованием Flask;
• реализовывать перенаправление по ссылке на основе ввода пользователя.

Создание файлов проекта

Для начала работы нам нужно создать папку проекта и добавить в нее следующие файлы:

• app.py: В этом файле будет содержаться весь код нашего сокращателя ссылок.
• templates/index.html: В этом файле будет содержаться HTML-код для главной страницы нашего сайта.
• templates/history.html: В этом файле будет содержаться HTML-код для страницы истории нашего сайта.
• templates/base.html: В этом файле будет содержаться базовый HTML-код, который будет использоваться в index.html и history.html.

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

Настройка базы данных

Для нашего сокращателя ссылок понадобится база данных для хранения исходных ссылок и соответствующих им сокращенных ссылок. Мы будем использовать SQLite для нашей базы данных, которая является легкой и простой в использовании системой управления базами данных.

Для настройки базы данных сначала нужно импортировать необходимые модули в app.py:

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

Далее нужно подключиться к базе данных SQLite и создать объект курсора:

## Подключиться к базе данных SQLite
conn = sqlite3.connect("urls.db", check_same_thread=False)
db = conn.cursor()

Затем можно создать таблицу в нашей базе данных для хранения ссылок:

## Создать таблицу urls, если она не существует
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()

Генерация коротких URL

Для генерации сокращенных ссылок мы будем использовать комбинацию случайных букв и цифр. Это можно сделать с использованием модулей string и random в Python. Мы создадим функцию generate_short_url(), которая будет возвращать случайную строку из 6 символов:

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

Создание главной страницы

Главная страница нашего сайта позволит пользователям отправить ссылку для сокращения. Она также будет отображать сокращенную ссылку, как только она будет сгенерирована. HTML-код для этой страницы можно найти в templates/index.html.

Во - первых, нам нужно расширить шаблон base.html и создать форму для пользователей, чтобы они могли отправить свои ссылки:

{% extends "base.html" %} {% block content %}
<div class="text-center">
  <h1 class="text-3xl font-bold text-gray-900 mb-8">Сократите свою ссылку</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"
        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"
      >
        Сократить
      </button>
    </div>
  </form>
  {% if short_url %}
  <div class="mt-4">
    <p class="text-lg text-gray-700">
      Сокращенная ссылка:
      <a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
        >{{ request.host_url }}{{ short_url }}</a
      >
    </p>
  </div>
  {% endif %}
</div>
{% endblock %}

В index.html у нас есть форма с одним полем ввода для пользователя, чтобы он мог ввести свою ссылку. Форма будет отправлена на ту же страницу, поэтому мы устанавливаем атрибут action в /. Мы также устанавливаем атрибут method в POST, чтобы данные формы были отправлены в теле запроса.

Теперь нужно добавить templates/base.html:

<!doctype html>
<html>
  <head>
    <title>Сокращатель ссылок</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"
        >Сокращатель ссылок</a
      >
      <div>
        <a href="/" class="text-gray-800 mr-6">Главная</a>
        <a href="/history" class="text-gray-800">История</a>
      </div>
    </nav>
    <main class="container mx-auto max-w-xl pt-8 min-h-screen">
      {% block content %} {% endblock %}
    </main>
  </body>
</html>

В base.html у нас есть навигационная панель вверху страницы с ссылками на главную страницу и страницу истории. Также у нас есть элемент main, который будет содержать контент каждой страницы. Блок content - это место, где будет вставлен контент каждой страницы.

Нам также нужно добавить необходимый код в app.py, чтобы обработать отправку форм и сгенерировать сокращенную ссылку:

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

        ## Вставить исходную и сокращенную ссылки в базу данных
        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")

В index() мы проверяем, является ли метод запроса POST. Если да, мы получаем исходную ссылку из данных формы и генерируем сокращенную ссылку. Затем мы вставляем исходную и сокращенную ссылки в базу данных и отображаем шаблон index.html с сокращенной ссылкой.

Перенаправление на исходный URL

Когда пользователь вводит сокращенную ссылку, мы хотим перенаправить его на соответствующую исходную ссылку. Для этого нам нужно создать функцию, которая будет получать исходную ссылку из базы данных на основе сокращенной ссылки:

@app.route("/<short_url>")
def redirect_to_url(short_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")

Создание страницы истории

Страница истории будет отображать все сокращенные ссылки, вместе с их исходными ссылками и датой добавления. HTML-код для этой страницы можно найти в templates/history.html.

Во - первых, нам нужно расширить шаблон base.html и добавить таблицу для отображения ссылок:

{% 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"
        >
          Исходная ссылка
        </th>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Сокращенная ссылка
        </th>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Дата
        </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 %}

Нам также нужно добавить необходимый код в app.py, чтобы получить ссылки из базы данных и передать их в шаблон:

@app.route("/history")
def history():
    ## Получить все ссылки из базы данных, отсортированные по самой свежей
    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)

Запуск проекта

Добавьте следующий код в конец файла app.py:

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

После установки модулей мы можем запустить наш проект, выполнив python app.py в терминале. Это запустит сервер разработки Flask, и наша веб - страница будет доступна по адресу http://localhost:8080.

Переключитесь на вкладку 8080 и обновите страницу. Вы должны увидеть следующее:

Резюме

В этом проекте мы научились создавать сокращатель ссылок с использованием Python и Flask. Мы сначала настроили необходимые файлы проекта и базу данных, а затем создали функции для генерации сокращенных ссылок и обработки отправки форм. Мы также узнали, как получать и отображать ссылки из базы данных. С помощью этого проекта вы теперь можете создать свой собственный сокращатель ссылок и настроить его по своему вкусу.