【python】勉強メモ　速習Flask③


## 1 はじめに

今回は、DBに登録された情報を表示する学習です。
- [【python】勉強メモ　速習Flask②](https://qiita.com/qiitataro/items/682faa9749d596cb3496) の続きとなります。
- 今回は、修正を行うファイルのみ掲載します。


## 2 コード編集
app.pyと、index.htmlを以下の様に編集。
```app.py
from flask import Flask
from flask import render_template
from flask import request
from flask import redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
import pytz

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///blog.db"
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title= db.Column(db.String(50), nullable=True)
    body = db.Column(db.String(300), nullable=True)
    created_at = db.Column(db.DateTime, nullable=False,default=datetime.now(pytz.timezone('Asia/Tokyo')))

# GETとPOSTを受け取れる様にする。
@app.route("/", methods=['GET', 'POST'])
def index():
    # ページにアクセスしたら（HTTP GETでアクセスしたら）
    if request.method == 'GET':
        # DBに登録されたデーターを全てPostで取得する。取得したデーターは、postsに、リスト形式で格納される。
        posts = Post.query.all()
        # index.htmlに表示するため、posts=postsで、取得したデーターを渡す。
        return render_template('index.html', posts=posts)


@app.route("/create", methods=['GET', 'POST']) 
def create():
    if request.method == 'POST':
        title = request.form.get('title')
        body = request.form.get('body')

        post = Post(title=title, body=body)

        db.session.add(post)
        # 変更を保存
        db.session.commit()

        return redirect('/')
    else:
        return render_template('create.html')
```

```index.html
{% extends "base.html" %}
{% block content %}
<h1>ブログアプリケーション</h1>

<a href="/create" role="button">新規作成画面</a>
{% for post in posts %}
<article>
    <h2>{{ post.title }}</h2>
    <p>作成日時： {{ post.created_at }}</p>
    <p>{{ post.body }}</p>
</article>
{% endfor %}
{% endblock %}
```

新規登録画面から、新規登録を行い、登録内容が掲載さる。

![Flask-10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014502/2918b0cf-9f15-a848-634a-cd59333fac12.png)

以下の様にテスト入力したものが登録され、表示される。
![Flask-11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014502/859a5940-28dd-9d51-a90a-7bd9c67c5c54.png)

### 編集方法

**templates**フォルダ内に、新たに、**update.html**を作成。
**create.html**をコピーして必要箇所を修正が効率良いです。

```update.html
{% extends "base.html" %}
{% block content %}
<h1>編集</h1>
<form method="POST">
    <label for="title">タイトル</label>
    <!-- value="{{ post.title }}" は、render_templateから情報を取得してくる -->
    <input type="text" name="title" value="{{ post.title }}">
    <label for="body">内容</label>
    <!-- value="{{ post.body }}" も、render_templateから情報を取得してくる -->
    <input type="text" name="body" value="{{ post.body }}">
    <input type="submit" value="更新">
</form>
{% endblock %}
```


```index.html
{% extends "base.html" %}
{% block content %}
<h1>ブログアプリケーション</h1>

<a href="/create" role="button">新規作成画面</a>
{% for post in posts %}
<article>
    <h2>{{ post.title }}</h2>
    <!-- 編集ボタン作成 -->
    <a href="/{{post.id}}/update" role="button">編集</a>
    <p>作成日時： {{ post.created_at }}</p>
    <p>{{ post.body }}</p>
</article>
{% endfor %}
{% endblock %}

```

app.pyの編集
```app.py
from flask import Flask
from flask import render_template
from flask import request
from flask import redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
import pytz

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///blog.db"
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title= db.Column(db.String(50), nullable=True)
    body = db.Column(db.String(300), nullable=True)
    created_at = db.Column(db.DateTime, nullable=False,default=datetime.now(pytz.timezone('Asia/Tokyo')))

# GETとPOSTを受け取れる様にする。
@app.route("/", methods=['GET', 'POST'])
def hello():
    # ページにアクセスしたら（HTTP GETでアクセスしたら）
    if request.method == 'GET':
        # DBに登録されたデーターを全てPostで取得する。取得したデーターは、postsに、リスト形式で格納される。
        posts = Post.query.all()
        # index.htmlに表示するため、posts=postsで、取得したデーターを渡す。
        return render_template('index.html', posts=posts)


@app.route("/create", methods=['GET', 'POST']) 
def create():
    if request.method == 'POST':
        title = request.form.get('title')
        body = request.form.get('body')

        post = Post(title=title, body=body)

        db.session.add(post)
        # 変更を保存
        db.session.commit()

        return redirect('/')
    else:
        return render_template('create.html')

# update処理を作成
@app.route("/<int:id>/update", methods=['GET', 'POST']) 
def update(id):
    post = Post.query.get(id)
    
    if request.method == 'GET':
        return render_template('update.html', post=post)
    
    # 更新ボタンが押されると、POSTが送信されるめ、eles移行が実行される
    else:
        post.title = request.form.get('title') # 書き換え
        post.body = request.form.get('body') # 書き換え
        
        # 不要なのでコメントアウト
        # post = Post(title=title, body=body)
        
        # db.session.add(post) 更新なので、addする必要はないため削除
        # commitだけすれば良い
        db.session.commit()

        return redirect('/')
        # return render_template('create.html')
```
ブラウザで、`127.0.0.1:5000`へアクセスし、**編集**ボタンが作成されていることを確認
![Flask-12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3014502/7faac2b9-215d-88f6-9243-b4c5bbded530.png)

次回は、登録内容の編集（更新）を行います。