python Flask html 各ページのファイル作成

前回の記事では、views.pyというファイルを編集して、表示するページのルーティングや、データベースの操作をするコードを書きました

今回は、views.pyによって表示されるhtmlファイルを追加、内容を解説していきたいと思います

・環境
・ディレクトリ構成
・コード解説

・環境

Windows 11
Flask 3.1.0
Flask-SQLAlchemy 3.1.1

・ディレクトリ構成

project/
├── flaskr/
│   ├── __init__.py      # アプリケーションの初期化
│   ├── models.py        # データベースのモデル定義
│   ├── views.py         # ルートやビューのロジック
│   └── templates/
│       ├── index.html   # トップページ
│       ├── add.html     # タスクの追加
│       └── update.html  # タスクの編集 
└── run.py               # アプリケーションの起動スクリプト

・コード解説

index.html トップページのコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>
    <a href="/add">Add New Todo</a>
    <ul>
        {% for todo in todos %}
            <li>
                <strong>{{ todo.title }}</strong>
                <p>{{ todo.description }}</p>
                <p>Due Date: {{ todo.due_date.strftime('%Y-%m-%d') if todo.due_date else 'No Due Date' }}</p>
                <a href="/update/{{ todo.id }}">Edit</a>
                <a href="/delete/{{ todo.id }}">Delete</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

解説するような内容はあまりないほどシンプルなトップページです

<a href=”/add”>Add New Todo</a>
タスクを登録するページ /add へのリンクが貼られています

{% for todo in todos %}
全てのタスクをリスト形式で取得し、for文で全て表示します
タイトル、詳細、期限を表示し、update、deleteのリンクも表示します

add.html データベースを追加するページのコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Todo</title>
</head>
<body>
    <h1>Add a New Todo</h1>
    <form action="/add" method="POST">
        <label>Title:</label>
        <input type="text" name="title" required><br>

        <label>Description:</label>
        <textarea name="description"></textarea><br>

        <label>Due Date:</label>
        <input type="date" name="due_date"><br>

        <button type="submit">Add</button>
    </form>
    <a href="/">Back to List</a>
</body>
</html>

データベースに登録するページです

<button type=”submit”>Add</button>
このボタンを押すことによって、method=”POST”としてデータベース保存されます

update.html データベースを編集するページのコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update Todo</title>
</head>
<body>
    <h1>Update Todo</h1>
    <form action="/update/{{ todo.id }}" method="POST">
        <label>Title:</label>
        <input type="text" name="title" value="{{ todo.title }}" required><br>

        <label>Description:</label>
        <textarea name="description">{{ todo.description }}</textarea><br>

        <label>Due Date:</label>
        <input type="date" name="due_date" value="{{ todo.due_date.strftime('%Y-%m-%d') if todo.due_date else '' }}"><br>

        <button type="submit">Update</button>
    </form>
    <a href="/">Back to List</a>
</body>
</html>

このupdateの内容は、ほぼaddのコードと同じです

以上のファイル構成で以下のコマンドを入力すると、WEBアプリケーションがローカルサーバーで起動します

python run.py

ターゲットに表示されるアドレスをCtrl + クリックでアクセスできます

次回以降の記事で、このWEBアプリケーションをサーバーへデプロイして公開する方法を解説したいと思います

python flask 入門 No.5

・環境