More than 3 years have passed since last update.

Flask を用いたデータベースアプリケーション制作 Part3

Last updated at 2020-04-03Posted at 2020-04-03

環境

macOS Catalina 10.15.1

アプリケーションの実装内容

Flask の使い方を習得すべく3つのパートに分けた。

Part1 (前々稿)

Web ブラウザの表示
Templates フォルダの html ファイルと連結

Part2 (前稿)

データベース SQLite との連結
Bootstrap を用いた画面表示

Part3(本稿)

POST メソッドを用いた新規ユーザー登録

Part3のフォルダ構成

Part1、Part2 と同様に、全てのコードは run.py によって実行される。
run.py は Part1 と同じものを、 model.py は Part2 と同じものをそれぞれ使用した。

root
|--codes
| |--view.py
| |--templates
| | |--database.html
| | |--index3.html
|--models.py
|--run.py
|--test.db

POSTメソッドを用いた新規ユーザー登録

以下に view.py を示す。

view.py

from flask import Flask,render_template, request, url_for, redirect
from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker 
from models import User

app = Flask(__name__)

engine = create_engine('sqlite:///test.db')
session = sessionmaker(bind=engine)()

# /index3 へアクセスがあった場合に、index3.html を返す。
# ここで DB の新規ユーザー登録が可能。
# index3 で受けたリクエストは /register に POST メソッドで submit される。
@app.route("/index3", methods=['GET'])
def index3():
	return render_template('index3.html')

# index3.html からのリクエストを、User クラスで定義された型に従って /database に返す。
# POST メソッドによりリクエストは暗号化されているため、/register にはアクセスできない。
@app.route("/register", methods=['POST'])
def register():
	name = request.form['name']
	age = int(request.form['age'])
	new_user = User(name=name, age=age)
	session.add(new_user)
	session.commit()
	return redirect(url_for('database'))

# /database へアクセスがあった場合に、DB 画面を表示させる。新規ユーザーを次々と更新できる。
@app.route("/database", methods=['GET'])
def database():
	users = session.query(User).all()
	return render_template('database.html', users=users)

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

index3.html は以下のとおり。入力データを /register に submit している。

index3.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content = "width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<hl>データの入力</hl>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<form name="signin" action="./register" method="POST">
					<input type="text" name="name" class="form-control" placeholder="Name" reqired>
					<input type="text" name="age" class="form-control" placeholder="Age" reqired>
					<button id="btn" class="btn btn-ig btn-primary btn-block" type="submit">Register</button>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

database.html は以下のとおり。

database.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content = "width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<hl>Flask チュートリアル</hl>
			<table class="table table-striped table-hover">
				<thread>
					<tr>
						<th scope="col">#</th>
						<th scope="col">Name</th>
						<th scope="col">Age</th>
					</tr>
				</thread>
				<tbody>
					{% for user in users %}
						<tr>
							<td>{{user.id}}</td>
							<td>{{user.name}}</td>
							<td>{{user.age}}</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
			<p><a href="/index3">ユーザー登録画面へ戻る</p>
		</div>
	</div>
</body>
</html>

同様に、http://127.0.0.1:5000/index3 にアクセスして以下が表示されていれば成功である。

新規ユーザーを登録すると、http://127.0.0.1:5000/database が表示される。

参考

参考：データ収集からWebアプリ開発まで実践で学ぶ機械学習活用ガイドの chapter 3-5

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up