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

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

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

こんにちは、kaorr です。

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

チュートリアル関連記事

はじめに

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

前回は手動で登録しましたが、画面上から登録できるようになることで、Web サービス感が増してきますね!

f:id:kaorr_mob:20171201222907j:plain

各ファイルの修正

Python ファイル修正

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

# request, redirect, url_for を追加
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)

# add_user メソッドを追加し、ユーザ登録に関する処理を行う
@app.route("/add_user", methods=['POST'])
def add_user():
    # フォームから渡ってきた username を取得
    username = request.form.get('username')
    if username:
        # 前回、手動で対応した処理と同じ
        user = User(username)
        db.session.add(user)
        db.session.commit()

    # ユーザ登録後は、元ページへリダイレクト
    return redirect(url_for('hello'))

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

フォームから値を取得する際は request.form['hoge'] でも良いんですが、hoge が POST されたフォームの中に存在しない場合にエラーになります。なので、request.form['hoge'] よりも request.form.get('hoge') の方がオススメです。

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>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;
}

表示確認

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

f:id:kaorr_mob:20171211161226p:plain

下部にユーザ登録用フォームが追加されましたね。

ユーザ登録確認!!

ユーザ登録用フォームに user と入力し・・・、

f:id:kaorr_mob:20171211161558p:plain

Add ボタンをクリックすると・・・、

f:id:kaorr_mob:20171211161635p:plain

はい、出ました!

user ユーザも、無事に Hello されましたね。

おわりに

今回は、画面上からユーザ登録を出来るようにするところまで進めました。

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