FlaskでWebアプリを作成続き３（ユーザーの編集・削除と検索の機能をアップデートまで）

はじめに

前回の続きで、今回は「別のユーザーの投稿は編集・削除不可」と「検索の機能」を追加していきます。

おまけ：絶対位置を中央寄せにする方法「left: 0; right: 0; を追加する」

別のユーザーの投稿は編集・削除不可：

データベースにユーザー名を追加
タイトル表示の方法を変更
編集画面の修正（ゲストはゲストの投稿を編集・削除できる）

検索の機能：

ヘッダーに検索ボックスを作成
フッターの検索ボタンを修正（フォーカスの移動）
検索ワードで絞り込み処理

１．データベースにユーザー名を追加

「models.py」のSQLiteでデータベースを追加します。

user = Column(String(128))

ユーザー名を追加して、データベースを初期化しました。

２．タイトル表示の方法を変更

インデックス画面でタイトルを表示する時のみ「タイトル＠ユーザー名」にして、タイトルのデータ自体はタイトルのみに戻しました。

３．編集画面の修正

編集画面でのタイトルにはユーザー名は付かないようにしました。投稿したユーザー名とログインしている現在のユーザー名が一致していない場合は更新ボタンと削除ボタンを非表示にします。ゲストはゲストの投稿を編集・削除できます。（ゲストが一度投稿したものを編集・削除できなくなるのは良くないと思ったので。ただし、ゲストで投稿したものは他人も編集・削除できます。）

４．ヘッダーに検索ボックスを作成

base.html（追加部分）

<div id="search1">
<form action="/blog/search" method="post">
    <input id="search2" type="text" name="search">
    <input class="btn2" type="submit" value="検  索">
</form>
</div>

親要素としてid「search1」の<div>~</div>を作りました。位置の調整や表示・非表示に使います。

base.css（追加部分）

#search1{
    display: none; /*非表示にする*/
    position: absolute; /*絶対位置で表示*/
    left: 0;
    right: 0;
    width: 90%; /*幅*/
    margin: 10px auto; /*中央寄せ*/
    max-width: 700px; /*最大の幅*/
}

非表示にしておきます。（検索ボタンが押されたら表示します）

苦労した点は、「絶対位置で表示した要素の中央寄せ」です。
「left: 0; right: 0;」で左右のpositionをゼロにするのと、「width: や max-width:」で幅を設定する必要があります。（幅の設定は忘れがちなので、幅を小さくしてみて中央寄せになるかテストしたほうがよさそうです）

５．フッターの検索ボタンを修正（フォーカスの移動）

base.html（変更部分）

<li>

<span onclick="document.getElementById('search1').style.display = 'block'; document.getElementById('search2').focus();">
検　索</span>

</li>

<span onclick="document.getElementById('search1').style.display = 'block';

クリックされた時にCSSで「display: block;」（非表示を表示する）設定をJavascriptで処理します。

document.getElementById('search2').focus();">

クリックされた時にJavascriptでid「search2」（検索のテキストボックス）にフォーカスを移動する処理をします。

６．検索ワードで絞り込み処理

server.py（追加部分）

#「/search」へアクセスがあった場合「blog/index.html」を返す
@app.route('/search', methods=['post'])
def search():  # 検索
    name = session["user_name"]
    all_diary= WikiContent.query.all()
    search = request.form["search"]
    return render_template('blog/index.html',name=name, all_diary=all_diary,search=search)

index.html

{% extends "blog/base.html" %}
{% block body %}

<link rel="stylesheet" type="text/css" href="/static/index.css">

<title>インデックス画面</title>

<div id="main">
    {% for diary in all_diary[::-1] %}
        {% if search == "" or search in diary.user 
            or search in diary.title or search in diary.comment %}

    <form action="/blog/diary/{{diary.id}}">
        <label id="menu" for="{{diary.id}}">

    <div class="table">
        {% if diary.user != "" %}
        <h3>{{diary.title}} ＠{{diary.user}}</h3>
        {% else %}
        <h3>{{diary.title}}</h3>
        {% endif %}
        <p><img src={{diary.image_url}}></p>
        <p>{{diary.comment}}</p>
        <div class="time">{{diary.date.strftime("%Y/%m/%d %H:%M")}}</div>
    </div>

        </label>
        <input type="submit" id="{{diary.id}}" class="update">
    </form>

        {% endif %}
    {% endfor %}
</div>

{% endblock %}

{% if search == "" or search in diary.user
　　or search in diary.title or search in diary.comment %}

検索ワードが「ユーザー名」「タイトル」「コメント」のどれかに含まれていたらインデックス（見出し）に表示します。検索ワードがない場合は全て表示します。