Laravelで業務システム

Laravel関連の記事掲載してます

顧客マスタに削除機能をつけてみる

Laravel

今回は、前回作成した顧客マスタのメイン画面にデータを削除できる機能をつけてみようと思います。

削除機能動作イメージ

メイン画面の一覧の右端に削除ボタンをつけ、ボタンを押すと、削除しても問題ないか注意を促すモーダルウィンドウを出し、削除ボタンを押すとデータが削除されるイメージを考えています。削除画面に遷移して削除させるという場合もありますが、今回は削除画面はつくらないパターンでいこうと思います。なお、検索した状態は保持することも考慮にいれます。

メイン画面の修正

動作イメージを実現できるように以下のように”mst_customer_list.blade.php”を修正します。長くなるので、削除ボタンを配置した後から記載してます。

                                <td class="col-2">{{ $customer->customer_fax }}</td>
                                <td class="col-1 text-center">
                                    <button type="button" class="btn btn-danger btn-sm text-white" data-toggle="modal" data-target="#deleteModal" onclick="set_delete_key('{{ $customer->id }}')">
                                    削除
                                    </button>
                                </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                    @if(isset($customers))
                        {{ $customers->withPath('mst_customer_search')->appends(['search_customer_id'=>"$search_customer_id",'search_customer_nm'=>"$search_customer_nm"])->links('vendor\pagination\bootstrap-4') }}
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalTitle">確認</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                本当に削除しますか？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
                    <a class="btn btn-primary text-white" href="javascript:mst_customer_delete()">削除</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    let id;

    function set_delete_key(delete_id){id = delete_id;}
    function mst_customer_delete(){
        let url = new URL('/mst_customer_delete',window.location.origin);
        url.searchParams.set('id', id);
        location.href = url.href + '&' + $("form").serialize();
    }
</script>

実質今回の目玉はこのBladeファイルになるのですが、思うところもありますので、簡単ですが解説します。

削除ボタンをクリックするとBooststrapのモーダル画面を表示させるため、モーダル画面を下のほうに配置してます。どうしてもソースが見難くなるので、コンポーネント化したほうがいいかもしれません。

今回、削除ボタンは行ごとに持たせる形にしてますので、その行のキーを保存し、モーダル画面の削除ボタンをクリックすることで、ルートにその保存したキーを渡す仕組みを考えました。

ちょっと微妙なのですが、削除ボタンにonClickつけてキー保存用のjavascript関数を呼び出し、モーダル画面の削除ボタンをクリックすると、保存したキーをGETで、削除のメンバ関数を呼び出すルートに渡すようにしました。

尚、検索状態を保持するため、検索フォームの内容は、jQueryでシリアライズして、GETのパラメータに追加しました。

このへんのロジックは普段の開発っぽくなってしまい、Laravelの良さを損なってるかもしれません。

ルートの修正

以下のように"web.php"にルートを追記します。

Route::get('/mst_customer_delete', [App\Http\Controllers\MstCustomerController::class, 'delete'])->name('mst_customer_delete');

コントローラーの修正

"MstCustomerController.php"に以下の関数を追加します。

public function delete(Request $request)
{
    $customer = new Customer();

    $id = $request->input('id');
    $search_customer_id = $request->input('search_customer_id');
    $search_customer_nm = $request->input('search_customer_nm');

    $customer->where('id', $id)->update([ 'status' => 2 ]);

    $customers = $customer->mst_customer_list($search_customer_id,$search_customer_nm);

    return view('mst_customer_list',compact('search_customer_id','search_customer_nm','customers'));
}

上記は削除のロジックになりますが、物理削除でなく論理削除にしてます。

以上で削除機能が実装できました。

まとめ

この程度の機能なのでまだいいのですが、javascriptを活用した機能実装の場合、複雑になるとセキュリティー問題やブラウザ依存の問題をよく考えねばならないため、本当に必要な実装なのかはよく考えたほうがいいかと思います。

今日はここまで。