python: Flaskアプリの作成15 ユーザーの登録②

備忘録です。

前回、ユーザーを登録することができるようにしました。今回は、全ユーザーの表示と編集と削除の項目を付け加えます。

members

全ユーザーの表示ページ＋編集ページ＋削除の機能

その1　全ユーザーを表示するページ

#app.py

# 全ユーザーを表示するページ
@app.route('/all-users')
def users():
    our_users = Users.query.order_by(Users.id)
    return render_template('all_users.html', our_users=our_users)

{% endblock %}

# all_users.html

{% extends "base.html"%}

{% block content %}
<br/>
<h1>全ユーザー</h1>
  <br/><br/><br/>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">name</th>
        <th scope="col">email</th>
      </tr>
    </thead>
    <tbody>
      {% for our_user in our_users %}
      <tr>
        <th scope="row">{{ our_user.id }}</th>
        <td>{{ our_user.name }}</td>
        <td>{{ our_user.email }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

{% endblock %}

bootstrapの基本のテーブル形式にしました。

その2　ユーザー情報の編集ページを作成

# app.py

# ユーザーを編集するページ
@app.route('/user/edit/<int:id>', methods=['GET', 'POST'])
def edit_user(id):
    user = Users.query.get_or_404(id)
    form = UserForm()
    if form.validate_on_submit():
        user.name = form.name.data
        user.email = form.email.data
        db.session.add(user)
        db.session.commit()
        our_users = Users.query.order_by(Users.id)
        return render_template('all_users.html', our_users=our_users)
    form.name.data = user.name
    form.email.data = user.email
    return render_template('edit_user.html', form=form)

# edit_user.html

{% extends "base.html"%}

{% block content %}
<br/>
<h1>ユーザー登録</h1>
<br/>
<div class="shadow p-3 mb-5 bg-body rounded">
  <form method="POST">
    {{ form.hidden_tag() }}

    {{ form.name.label(class="form-label") }}
    {{ form.name(class="form-control") }}
    <br/>

    {{ form.email.label(class="form-label") }}
    {{ form.email(class="form-control") }}
    <br/>

    {{ form.submit(class="btn btn-secondary") }}

  </form>

</div>

{% endblock %}

その3 ユーザーの削除

# app.py

# ユーザーを削除
@app.route('/user/delete/<int:id>')
def delete_user(id):
    user_to_delete = Users.query.get_or_404(id)
    db.session.delete(user_to_delete)
    db.session.commit()
    our_users = Users.query.order_by(Users.id)
    return render_template('all_users.html', our_users=our_users)

削除後は、全ユーザーのページに戻しています。

その4 編集と削除のボタンを設置

# all_users.html

  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">name</th>
        <th scope="col">email</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      {% for our_user in our_users %}
      <tr>
        <th scope="row">{{ our_user.id }}</th>
        <td>{{ our_user.name }}</td>
        <td>{{ our_user.email }}</td>
        <td><a href="{{ url_for('edit_user', id=our_user.id) }}" class="btn btn-outline-secondary btn-sm">編集</a>
        <a href="{{ url_for('delete_user', id=our_user.id) }}" class="btn btn-outline-danger btn-sm">削除</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

全ユーザーを表示させるテーブル内にボタンを設置しました。

ここまでは特に問題なく設定可能。