モブプロだった人のブログ

モブプログラミングに魅了されたエンジニアのブログ

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

こんにちは、kaorr です。

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

チュートリアル関連記事

はじめに

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

現状の仕様ですと、一度登録したユーザの名前が変更できず、不便ですよね。

f:id:kaorr_mob:20171202223309j: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)

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

    # username のデータを取得
    username = request.form.get('username')

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

        # username を変更し、コミット
        target_user.username = username
        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>
        <!-- ユーザ名の箇所を input に変更 -->
        <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>
  </div>
</body>
</html>

表示確認

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

f:id:kaorr_mob:20171213152654p:plain

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

f:id:kaorr_mob:20171213152808p:plain

ユーザ情報表示ページで、ユーザ名を変更する準備が整いました。

ユーザ名変更!!

Name を admin2 に変更し、

f:id:kaorr_mob:20171213152950p:plain

Submit をクリックすると、

f:id:kaorr_mob:20171213153102p:plain

はい、admin のユーザ名が admin2 に変わりました。

おわりに

今回は、ユーザ名を変更する機能を追加しました。

ユーザ作成、表示、変更ときたら、次は削除ですね! というわけで、次回は削除機能を追加してみようと思います。