第10章 削除

1　toukou.html

自分が投稿したもののみ、削除できるようにします。まず、削除のリンクをtoukou.htmlに作成します。

if文で、投稿のユーザIDがセッションのユーザIDと一致する場合、自分の投稿ですので削除のリンクを設置します。

{% if toukou.uid == session.uid %}
<div class="operation">
<a href="/del/{{toukou.tid}}" class="del">削除</a>
</div>
{% endif %}

2　app.py（確認画面）

app.py で削除確認画面を表示するdel_get関数を作成します。URLからtidを受け取り、tid から投稿テーブルを検索し、それをdel.htmlに渡します。

@app.get('/del/<tid>')
def del_get(tid):
    row = Toukou.query.get_or_404(tid)
    return render_template("del.html",toukou=row)

3　del.html

del.htmlでは削除の確認で、まず投稿内容を表示します。これは、投稿一覧の画面表示と同じです。ただし本文を表示します。また、その下にフォームで/del/投稿IDにpostで送信するようにします。

<div class="toukou">
    <div class="uname"><a href="/user/{{toukou.user.uid}}">{{toukou.user.uname}}</a></div>
    <div class="hi">{{toukou.hi}}</div>
    <div class="image">
        <img src="/static/{{toukou.image}}" class="">
    </div>
    <div class="mes">{{toukou.mes}}</div>
</div>

<form method="post" action="/del/{{toukou.tid}}">
    <input type="submit" value="削除">
</form>

4　app.py（削除処理）

app.pyで削除処理を書きます。受け取ったtidで投稿を削除します。また、アップロードされたファイルをos.remove で削除し、投稿一覧にリダイレクトします。

@app.post('/del/<tid>')
def del_post(tid):
    row = Toukou.query.get_or_404(tid)
    db.session.delete(row)
    db.session.commit()

    os.remove(os.path.dirname(__file__) + '/static/' + row.image)

    return redirect(f"/")

5　style.css

staticフォルダにあるstyle.cssにスタイルを設定します。 まず、削除を行うリンクを囲む.operationにスタイルを設定します。このあと、削除の他に編集のリンクも付加するため、それを横に並べるように flex を設定し、その間隔を1文字としています。

.operation {
    display: flex;
    gap: 1em;
    margin: 1em;
}

削除のリンクはボタン風にするためにまず、リンクの下線を消去し、枠線の内側に余白を付けます。枠線の角は丸くします。

.operation a {
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 4px;
}

削除の背景色は赤色とし、文字色は白とします。

.operation .del {
    background-color: #f44336;
    color: white;
}