前回パイソンのWEBフレームワークFlaskの簡単な説明をしました。
今回はそのFlaskを使って簡単なメモアプリの作成について書きたいと思います。
今回作成したWEBアプリはこんな感じ。
Flaskでウェブで動く、メモアプリを作ろう
メモ登録画面
この画面でメモを登録すると一覧画面から
確認することができます。
デザインについては以前ブログで取り上げたBootstrapを利用しています。
前回のflaskの時は画面にパラメータを表示するのみでしたが、今回はメモを「保存」する
ために、pythonからデータベースを利用しています。
今回、データベースはpostgresqlを利用しています。
postgresqlのインストール～Flaskでウェブアプリ～
Macを利用しているのでインストールはターミナルから
下記のコマンドを入力すればOKです。
|
1 2 3 |
$brew install postgresql $psql --version $initdb /usr/local/var/postgres -E utf8 |
インストールが完後次のコマンドでデータベースを起動することができます。
|
1 |
$brew services start postgresql |
ちなみに停止はこんな感じですよ。
|
1 |
brew services stop postgresql |
pythonからデータベースを操作する~Flaskでウェブアプリ～
今回pythonからpostgresqlのデータベースを操作するにあたり
ORマッパを利用します。
通常データベースを操作する場合SQL文というデータベース専用の言語でデータを
取り回す必要があります。（select * from 〜といったスクリプトです。）
このSQL文をプログラムに平文で直接記述するとSQLインジェクションを生み出してしまう
セキュリティリスクがあります。
一方ORマッパはデータベースとプログラムのオブジェクトを関連させ、
入力データのクォート処理等適切に処理してくれるためセキュリティ上で有利であり、
また、データベースの構造をほとんど意識することなくプログラムを記述することができます。
今回はflask-sqlalchemy というORマッパを利用します。
flask-sqlalchemyのインストール
ターミナルから必要なモジュールのインストールを行います
|
1 |
$pip3 install psycopg2 psycopg2-binary |
|
1 |
$ pip3 install flask-sqlalchemy |
pythonファイルの作成～Flaskでウェブアプリ～
今回作成したpythonファイルは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
from flask import Flask, request, render_template, redirect from flask_sqlalchemy import SQLAlchemy from werkzeug.utils import secure_filename app = Flask(__name__) app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False app.config['SQLALCHEMY_DATABASE_URI'] = "postgresql://******:******@localhost/keijiban" db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(64), unique=True) content = db.Column(db.String(120)) user_image_url = db.Column(db.String(120)) @app.route('/') def index(): topics = User.query.all() return render_template('index.html', topics=topics) @app.route('/form') def form(): return render_template('form.html') @app.route('/register', methods=['POST']) def register(): if request.form['title'] and request.form['content'] and request.files['image']: f = request.files['image'] filepath = 'static/' + secure_filename(f.filename) f.save(filepath) filepath = '/' + filepath newUser = User(title=request.form['title'], content=request.form['content'], user_image_url=filepath) db.session.add(newUser) db.session.commit() return redirect('/') else: return render_template('error.html') @app.cli.command('initdb') def initdb_command(): db.create_all() |
部分部分で見てみましょう。
|
1 2 3 |
from flask import Flask, request, render_template, redirect from flask_sqlalchemy import SQLAlchemy from werkzeug.utils import secure_filename |
必要なモジュールの読み込みです。
flaskをはじめ、今回のアプリで利用しているリダイレクト、ファイルアップロード
sqlalchemyをインポートしています。
|
1 2 3 4 |
app = Flask(__name__) app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False app.config['SQLALCHEMY_DATABASE_URI'] = "postgresql://******:******@localhost/keijiban" db = SQLAlchemy(app) |
この部分でデータベースの接続情報を引数としてSQLAlchemyの
インスタンスを作成しています。
|
1 2 3 4 5 |
class User(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(64), unique=True) content = db.Column(db.String(120)) user_image_url = db.Column(db.String(120)) |
ORマッパーのメイン部分でモデルを作成しています。
今回はid, title, content、user_image_urlというデータを保存するテーブルを作成して
データを保存していきます。
このクラスを元にプログラムを書いていくことになります。
|
1 2 3 4 |
@app.route('/') def index(): topics = User.query.all() return render_template('index.html', topics=topics) |
ルートの処理です。
先ほど作成したUserクラスのメソッドallを利用して全てのデータを
取得することができます。
取得したデータtopicsをテンプレートファイルindex.htmlに渡して表示しています。
|
1 2 3 |
@app.route('/form') def form(): return render_template('form.html') |
フォームが表示されるページです。
ここではform.htmlのテンプレートを表示しているのみですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@app.route('/register', methods=['POST']) def register(): if request.form['title'] and request.form['content'] and request.files['image']: f = request.files['image'] filepath = 'static/' + secure_filename(f.filename) f.save(filepath) filepath = '/' + filepath newUser = User(title=request.form['title'], content=request.form['content'], user_image_url=filepath) db.session.add(newUser) db.session.commit() return redirect('/') else: return render_template('error.html') |
フォームからデータを受け取って登録処理をする部分です。
フォームの内容である、タイトル、内容、画像が全て入力されている
場合に処理を行います。
処理内容は下記の通りです。
- 画像ファイルをstaticフォルダに保存する。
- テーブルに、タイトルと内容を保存する
- トップページにリダイレクトする
この３つの処理を行なっています。
もし格納データに不足がある場合はエラー画面へ遷移します。
|
1 2 3 |
@app.cli.command('initdb') def initdb_command(): db.create_all() |
flaskのコマンドラインインターフェースと呼ばれるもので、
直接ブラウザからアクセスするのではなく、ターミナル等のコマンドラインから
下記コマンドを入力することで自動的にテーブルを作成してくれます。
|
1 |
flask initdb |
もし別の環境で同じアプリを作成したい場合、１からテーブルを作成せずとも
コマンド１つで必要なテーブルを作成してくれるため非常に便利です。
Flaskでウェブアプリ作り まとめ
WEBアプリを作る上でデータベースは避けては通れないものですが、
SQLがあまり得意でなくても、ORマッパを利用することで比較的簡単に
データベースを用いたプログラムが作成できると思います。
python、flask、postgresqlでWEBアプリをつくってみませんか？
