モブプロな人たちのブログ

横浜で Web サービス開発しているエンジニアの日記です。Python 大好き Flask 大好き。たまに SpriteKit でゲーム開発も。

Flask + Flask-SQLAlchemy のチュートリアルを日本語で (ユーザ削除機能編)

こんにちは、kaorr です。

一人アドベントカレンダー14日目です。

チュートリアル関連記事

はじめに

今回は、ユーザ削除機能を追加することにします。

これで追加、表示、変更、削除の一通りの機能を実装したことになりますね!

f:id:kaorr_mob:20171214203707j:plain

各ファイルの修正

Python ファイル修正

hello.py ファイルを以下のようの修正します。

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///hello.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True)

    def __init__(self, username):
        self.username = username


@app.route("/")
def hello():
    user_list = User.query.all()
    return render_template('hello.html', user_list=user_list)

@app.route("/add_user", methods=['POST'])
def add_user():
    username = request.form.get('username')
    if username:
        user = User(username)
        db.session.add(user)
        db.session.commit()

    return redirect(url_for('hello'))

@app.route("/user/<int:user_id>", methods=['GET'])
def show_user(user_id):
    target_user = User.query.get(user_id)

    return render_template('show.html', target_user=target_user)

@app.route("/user/<int:user_id>", methods=['POST'])
def mod_user(user_id):
    target_user = User.query.get(user_id)
    username = request.form.get('username')
    if target_user and username:
        target_user.username = username
        db.session.commit()

    return redirect(url_for('hello'))

# del_user メソッドを追加し、ユーザ削除に関する処理を行う
# user_id という変数で、URL に含まれる数字を受け取る
@app.route("/del_user/<int:user_id>", methods=['POST'])
def del_user(user_id):
    # primary key を利用する場合、get メソッドで対象ユーザを取得できる
    target_user = User.query.get(user_id)

    # 一応データの存在確認
    if target_user:

        # 対象ユーザを削除し、コミット
        db.session.delete(target_user)
        db.session.commit()

    # 処理が完了したら、トップページへリダイレクト
    return redirect(url_for('hello'))

if __name__ == '__main__':
    app.run(debug=True)

HTML(Jinja2 テンプレート) ファイル修正

templates/show.html ファイルを以下のように修正します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Detail</title>
  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <div class="page">
    <h1>User Detail</h1>
    <form action="{{ url_for('mod_user', user_id=target_user.id) }}" method="post">
      <dl class="show-user">
        <dt>ID</dt><dd>{{ target_user.id }}</dd>
        <dt>Name</dt>
        <dd><input type="text" size="30" name="username" value="{{ target_user.username }}"></dd>
      </dl>
      <input type="submit" value="Submit">
    </form>
    <a href="{{ url_for('hello') }}">Back</a>
    <!-- ユーザを削除するフォームを追加 -->
    <form class="del-form" action="{{ url_for('del_user', user_id=target_user.id) }}" method="post">
      <input type="submit" value="Delete">
    </form>
  </div>
</body>
</html>

CSS ファイル修正

static/style.css ファイルを以下のように修正します。

body {
  font-family: sans-serif;
  background: #eee;
}

h1 {
  color: #377ba8;
  font-family: 'Georgia', serif;
  margin: 0;
  border-bottom: 2px solid #eee;
}

.page {
  margin: 2em auto;
  width: 35em;
  border: 5px solid #ccc;
  padding: 0.8em;
  background: white;
}

.users {
  list-style: none;
  margin: 0;
  padding: 0;
}

.users li {
  margin: 0.8em 1.2em;
}

.add-user {
  font-size: 0.9em;
  border-top: 2px solid #eee;
  padding: 0.5em;
}

.show-user dt {
  float: left;
  font-weight: bold;
}

.show-user dd {
  margin-left: 100px;
}

/* ユーザ削除ボタン用のスタイルを追加 */
.del-form {
  display: flex;
  justify-content: flex-end;
}

.del-form input {
  color: white;
  background-color: red;
}

表示確認

ブラウザから http://127.0.0.1:5000/ にアクセスし、

f:id:kaorr_mob:20171214210859p:plain

user ユーザの Detail をクリックすると・・・、

f:id:kaorr_mob:20171214210926p:plain

右下に削除用ボタンが登場しましたね。

ユーザ削除!!

Delete をクリックすると・・・、

f:id:kaorr_mob:20171214211018p:plain

はい、user ユーザが削除されました。

おわりに

今回は、ユーザを削除する機能を追加しました!

これで追加、表示、変更、削除と一通りの機能を実装できました。めでたしめでたし。

・・・とは言え、見た目があまりに貧相なので、番外編として見た目をキレイにしてみたいと思います。(また今度。)