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

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

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

こんにちは、kaorr です。

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

チュートリアル関連記事

はじめに

今回は、ユーザ名変更機能を追加することにし・・・と思ったのですが、そもそも各ユーザの情報を表示するページ(機能)がないことに気がつきました。なので、まず先にユーザ情報表示機能を追加することにします。

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

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

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

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>
    <dl class="show-user">
      <dt>ID</dt><dd>{{ target_user.id }}</dd>
      <dt>Name</dt><dd>{{ target_user.username }}</dd>
    </dl>
    <a href="{{ url_for('hello') }}">Back</a>
  </div>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World!</title>
  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <div class="page">
    <h1>Hello World!</h1>
    <ul class="users">
    {% for user in user_list %}
      <!-- ユーザ情報表示用のリンクを追加 -->
      <li><a href="{{ url_for('show_user', user_id=user.id) }}">Detail</a> Hello {{ user.username }}!</li>
    {% endfor %}
    </ul>
    <form action="{{ url_for('add_user') }}" method="post" class="add-user">
      <label for="username">Name:</label>
      <input type="text" size="30" id="username" name="username">
      <input type="submit" value="Add">
    </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;
}

表示確認

ブラウザから http://127.0.0.1:5000/ にアクセスし、以下の表示になっていることを確認します。

f:id:kaorr_mob:20171212220950p:plain

ユーザ情報表示ページへのリンクが追加されましたね。

ユーザ情報表示!!

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

f:id:kaorr_mob:20171212221135p:plain

出ました!

そして、Back をクリックすると・・・、

f:id:kaorr_mob:20171212221312p:plain

はい、戻りました!

user ユーザも、問題なくページ遷移できるかと思います。

おわりに

今回は、各ユーザの情報を表示するページ(機能)を追加しました。

次回こそ、ユーザ名変更を出来るようにしたいと思います!