Flaskで簡単なCRUDサンプルアプリを作る方法を解説する

2023.01.18 2022.10.31

この記事では、CRUDについて学んだ後、Flask CRUDアプリケーションを作成します。

CRUDアプリケーションとは？
FlaskのCRUDアプリケーションを作成する
CRUDアプリケーションのフルコード
Flask CRUDアプリケーションの実装
まとめ

CRUDアプリケーションとは？

Webアプリケーションのうち、Create/Retrieve/Update/Deleteの操作を行うものをCRUDアプリケーションと呼びます。

CRUDアプリケーションの典型的な例として、ブログサイトがあります。

ここでは

Blogを新規に作成することができます。作成
投稿されたブログを見ることができます。取得する
ブログを更新する更新する
ブログを削除します。削除

CRUDの定義をまとめると、以下のようになります。

| オペレーション｜ファンクション
| — | — |
| 作成：新しいデータを作成し、データベースに追加します。

| Retrieve｜データベースからデータを取得します。

| 更新(Update): 既存のデータをデータベースに更新します。

| Delete(削除): 既存のデータをデータベースから削除します。

pip install flask_sqlalchemy

FlaskのCRUDアプリケーションを作成する

社員情報の作成/取得/更新/削除ができるシンプルなFlaskのCRUDアプリケーションを作成します。

したがって、このアプリケーションでは、次のことができます。

新しい従業員情報を作成する
従業員のリストを見る。
1. 特定の従業員の情報を見る
従業員の情報を更新する
社員情報の削除

1. Models.py のコーディング

ここでは、Flask_SQLAlchemyとSQLite DBを使用します。

まず、Flask_SQAlchemyをインストールします。

from flask_sqlalchemy import SQLAlchemy
 
db = SQLAlchemy()
 
class EmployeeModel(db.Model):

    __tablename__ = "table"
 
    id = db.Column(db.Integer, primary_key=True)

    employee_id = db.Column(db.Integer(),unique = True)

    name = db.Column(db.String())

    age = db.Column(db.Integer())

    position = db.Column(db.String(80))
 
    def __init__(self, employee_id,name,age,position):

        self.employee_id = employee_id

        self.name = name

        self.age = age

        self.position = position
 
    def __repr__(self):

        return f"{self.name}:{self.employee_id}"

models.pyを作成し、以下のコードを追加します。

from flask import Flask
 
app = Flask(__name__)
 
app.run(host='localhost', port=5000)

ここではEmployeeModelを作成しています。

もし構文が理解できない場合は、SQLAlchemyのチュートリアルを参照してください。

2. メインアプリケーションのコーディング

では、メインの Flask Application File をコーディングしてみましょう。

まず、Flask をインポートし、flask app を初期化し、アプリケーションのランタイムの詳細を設定するところから始めます。

from flask import Flask
 
app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///<db_name>.db'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
app.run(host='localhost', port=5000)

次に、SQLite DB と SQLAlchemy を連携させます。

そこで、以下のコードスニペットを追加します。

from flask import Flask
 
app =Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///<db_name>.db'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)
 
@app.before_first_request

def create_table():

    db.create_all()
 
app.run(host='localhost', port=5000)

は、DB File の名前に置き換えてください。

また、ユーザーがサーバーにアクセスする前に、(models.py から)DB インスタンスをリンクして、DB ファイルを作成する必要があります。

@app.route('/data/create' , methods = ['GET','POST'])

def create():

    if request.method == 'GET':

        return render_template('createpage.html')
 
    if request.method == 'POST':

        employee_id = request.form['employee_id']

        name = request.form['name']

        age = request.form['age']

        position = request.form['position']

        employee = EmployeeModel(employee_id=employee_id, name=name, age=age, position = position)

        db.session.add(employee)

        db.session.commit()

        return redirect('/data')

さて、DBとモデルの準備ができたので、CRUDビューをコーディングしましょう。

この記事もチェック：Flaskのライブラリflask-wtfの使い方|簡単にフォームを作成するよ

3. 作成ビューのコーディング

Create ビューは、以下の機能を備えている必要があります。

クライアントがこのページにアクセスすると（GET メソッド）、クライアントのデータを取得するためのフォームが表示されます。
送信時（POST メソッド）には、クライアントのデータを EmployeeModel データベースに保存する必要があります。

というわけで、Create View は以下のようになります。

<form action='' method = "POST">

  <p>employee ID <input type = "integer" name = "employee_id" /></p>

  <p>name <input type = "text" name = "name" /></p>

  <p>age <input type = "integer" name = "age" /></p>

  <p>position <input type = "text" name = "position" /></p>

  <p><input type = "submit" value = "Submit" /></p>

</form>

createpage.html には、HTML Form が含まれます。

@app.route('/data')

def RetrieveDataList():

    employees = EmployeeModel.query.all()

    return render_template('datalist.html',employees = employees)

4. 取得ビューのコーディング

ここでは、2つのビューを用意します。

従業員のリストを表示します。
従業員のリストを表示します。 * 単一の従業員の情報を表示します。

最初のRetrieveDataListビューは次のようになります。

{% for employee in employees %}

<h3>{{employee}}</h3><hr>

{% endfor %}

datalist.html ファイルは、従業員のリストを表示します。

@app.route('/data/<int:id>')

def RetrieveSingleEmployee(id):

    employee = EmployeeModel.query.filter_by(employee_id=id).first()

    if employee:

        return render_template('data.html', employee = employee)

    return f"Employee with id ={id} Doenst exist"

テンプレート言語については、Flask Templateを参照してください。

そして、2つ目のRetrieveSingleEmployeeビューは以下のようになります。

<h3>Id</h3>

<p>{{employee.employee_id}}</p><hr>

<h3>Name</h3>

<p>{{employee.name}}</p><hr>

<h3>Age</h3>

<p>{{employee.age}}</p><hr>

<h3>Position</h3>

<p>{{employee.position}}</p><hr>

EmployeeModel.query.filter_by(employee_id = id).first() は、DB 内の Employee ID = id を持つ最初の Employee を返し、その ID を持つ Employee が存在しない場合は None を返します。

Data.html には、Employee の情報が表示されます。

@app.route('/data/<int:id>/update',methods = ['GET','POST'])

def update(id):

    employee = EmployeeModel.query.filter_by(employee_id=id).first()

    if request.method == 'POST':

        if employee:

            db.session.delete(employee)

            db.session.commit()
 
            name = request.form['name']

            age = request.form['age']

            position = request.form['position']

            employee = EmployeeModel(employee_id=id, name=name, age=age, position = position)
 
            db.session.add(employee)

            db.session.commit()

            return redirect(f'/data/{id}')

        return f"Employee with id = {id} Does nit exist"
 
    return render_template('update.html', employee = employee)

5. 更新ビューのコード化

Update View は、DB 内の Employee 詳細情報を、ユーザが送信した新しい情報に更新します。

したがって、Update View は次のようになります。

<form action='' method = "POST">

  <p>name <input type = "text" name = "name" value="{{employee.name}}"/></p>

  <p>age <input type = "integer" name = "age"  value="{{employee.age}}"/></p>

  <p>position <input type = "text" name = "position" value="{{employee.position}}"/></p>

  <p><input type = "submit" value = "Submit" /></p>

</form>

ユーザはフォームから新しい情報を送信します。

ここでは、まず DB 内の古い情報を削除し、新しい情報を追加します。

update.htmlには、新しい情報を送信するためのフォームが表示されます。

@app.route('/data/<int:id>/delete', methods=['GET','POST'])

def delete(id):

    employee = EmployeeModel.query.filter_by(employee_id=id).first()

    if request.method == 'POST':

        if employee:

            db.session.delete(employee)

            db.session.commit()

            return redirect('/data')

        abort(404)
 
    return render_template('delete.html')

6. Delete View のコード化

Delete View は、DB File から Employee 情報を削除するだけです。

Delete View は次のようになります。

<form action='' method="post">

    Click YES to confirm

    <input type = "submit" value="YES">

    <a href='/data'>Cancel</a>

</form>

delete.html は、削除の再確認を行うだけです。

from flask_sqlalchemy import SQLAlchemy
 
db =SQLAlchemy()
 
class EmployeeModel(db.Model):

    __tablename__ = "table"
 
    id = db.Column(db.Integer, primary_key=True)

    employee_id = db.Column(db.Integer(),unique = True)

    name = db.Column(db.String())

    age = db.Column(db.Integer())

    position = db.Column(db.String(80))
 
    def __init__(self, employee_id,name,age,position):

        self.employee_id = employee_id

        self.name = name

        self.age = age

        self.position = position
 
    def __repr__(self):

        return f"{self.name}:{self.employee_id}"

ユーザがYesを押せば、その社員は削除されます。

そうでなければ、元に戻されます。

CRUDアプリケーションのフルコード

models.py。

from flask import Flask,render_template,request,redirect

from models import db,EmployeeModel
 
app = Flask(__name__)
 
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)
 
@app.before_first_request

def create_table():

    db.create_all()
 
@app.route('/data/create' , methods = ['GET','POST'])

def create():

    if request.method == 'GET':

        return render_template('createpage.html')
 
    if request.method == 'POST':

        employee_id = request.form['employee_id']

        name = request.form['name']

        age = request.form['age']

        position = request.form['position']

        employee = EmployeeModel(employee_id=employee_id, name=name, age=age, position = position)

        db.session.add(employee)

        db.session.commit()

        return redirect('/data')
 
@app.route('/data')

def RetrieveList():

    employees = EmployeeModel.query.all()

    return render_template('datalist.html',employees = employees)
 
@app.route('/data/<int:id>')

def RetrieveEmployee(id):

    employee = EmployeeModel.query.filter_by(employee_id=id).first()

    if employee:

        return render_template('data.html', employee = employee)

    return f"Employee with id ={id} Doenst exist"
 
@app.route('/data/<int:id>/update',methods = ['GET','POST'])

def update(id):

    employee = EmployeeModel.query.filter_by(employee_id=id).first()

    if request.method == 'POST':

        if employee:

            db.session.delete(employee)

            db.session.commit()

            name = request.form['name']

            age = request.form['age']

            position = request.form['position']

            employee = EmployeeModel(employee_id=id, name=name, age=age, position = position)

            db.session.add(employee)

            db.session.commit()

            return redirect(f'/data/{id}')

        return f"Employee with id = {id} Does nit exist"
 
    return render_template('update.html', employee = employee)
 
@app.route('/data/<int:id>/delete', methods=['GET','POST'])

def delete(id):

    employee = EmployeeModel.query.filter_by(employee_id=id).first()

    if request.method == 'POST':

        if employee:

            db.session.delete(employee)

            db.session.commit()

            return redirect('/data')

        abort(404)
 
    return render_template('delete.html')
 
app.run(host='localhost', port=5000)