インデックスページの作成
私たちのウェブサイトのインデックスページでは、ユーザーが短縮するURLを送信できるようになります。また、生成されたら短縮URLも表示されます。このページのHTMLコードはtemplates/index.htmlにあります。
まず、base.htmlテンプレートを拡張し、ユーザーがURLを送信するためのフォームを作成する必要があります。
{% extends "base.html" %} {% block content %}
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-900 mb-8">Shorten Your 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="Enter 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"
>
Shorten
</button>
</div>
</form>
{% if short_url %}
<div class="mt-4">
<p class="text-lg text-gray-700">
Short URL:
<a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
>{{ request.host_url }}{{ short_url }}</a
>
</p>
</div>
{% endif %}
</div>
{% endblock %}
index.htmlでは、ユーザーがURLを入力するための単一の入力フィールドを持つフォームがあります。フォームは同じページに送信されるため、action属性を/に設定します。また、method属性をPOSTに設定して、フォームデータを要求ボディに送信するようにします。
次に、templates/base.htmlを追加します。
<!doctype html>
<html>
<head>
<title>URL Shortener</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">URL Shortener</a>
<div>
<a href="/" class="text-gray-800 mr-6">Home</a>
<a href="/history" class="text-gray-800">History</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ブロックには、各ページのコンテンツが挿入されます。
また、フォームの送信を処理し、短縮URLを生成するために必要なコードをapp.pyに追加する必要があります。
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
original_url = request.form["original_url"]
short_url = generate_short_url()
## 元のURLと短縮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であるかどうかを確認します。もしそうなら、フォームデータから元のURLを取得し、短縮URLを生成します。その後、元のURLと短縮URLをデータベースに挿入し、短縮URL付きでindex.htmlテンプレートをレンダリングします。
