副業におすすめなサイトを見る→

Docker×Laravel8もくもく会アプリ作成16(検索機能)

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

Docker×Laravel8でもくもく会アプリを作成する検索機能①です。

この記事では、以下のようにLaravelと入力して検索ボタンを押したら、該当のイベントが表示される機能になります。

前回の記事の続きになるので、まだの方はぜひ以下の記事をご参照ください。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

Contents

検索機能を実装するステップ

STEP
検索フォームを追加する
STEP
コントローラーのindexアクションを修正する
STEP
モデルに検索機能のロジックを書く

検索フォームを作成する

まずはcommon > nav.blade.phpに検索フォームを作成しましょう。

<style>
    #search-form {
        margin: 0 0 0 auto;
    }
    #search-input {
        width: 300px;
    }
</style>
{{-- ナビゲーション --}}
<nav class="navbar navbar-expand-lg navbar-light bg-light container">
  <div class="container-fluid">
      <a class="navbar-brand" href="{{ route('event.index') }}">{{ 'もくもく会' }}</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mokumoku" aria-controls="mokumoku" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mokumoku">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="{{ route('event.index') }}">{{ 'もくもく会一覧' }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="{{ route('category.index') }}">{{ 'カテゴリ一覧' }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('event.register') }}">{{ '開催する' }}</a>
            </li>
        </ul>
        {{-- 検索フォーム --}}
        <form class="form-inline" id="search-form" method="GET" action="{{ route('event.index') }}">
            <input class="form-control mr-sm-2" id="search-input" type="search" name="search" placeholder="キーワードを入力" value="{{ isset($word) ? $word : '' }}">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
  </div>
</nav>

これはbootstrapから少しカスタマイズした程度になります。

コードの解説

<form class="form-inline" id="search-form" method="GET" action="{{ route('event.index') }}">

メソッドは表示のGETを使い、ルーティングも一覧画面が変えるようにします。

// $wordの値がセットされていれば、$wordの値を、セットされていなければ値は空を返します。
value="{{ isset($word) ? $word : '' }}"

これは登録画面や編集画面でもやりましたが、三項演算子を使っています。

分解すると、

@if (isset($word))
  $word
@else
  ''
@endif

コントローラーのindexアクションを修正する

検索フォームに入力したキーワードを一覧画面で取得できるように以下のようにindexアクションを修正します。

    /**
     * イベント一覧画面
     */
    public function index(Request $request) // 追加①
    {
        // 検索したキーワード
        $word = $request->search; // 追加②
        dd($word); // 追加③

        // Eloquentでeventsテーブルにあるデータを全て取得
        $events = $this->event->allEventsData();

        return view('event.index', compact('events'));
    }

上記により、フォームに何も入力していないとnullが、キーワードを入力していれば入力したキーワードが取得できます。

キーワードが取得できることが確認できたので、以下のように条件分岐を作ります。

    /**
     * イベント一覧画面
     */
    public function index(Request $request)
    {
        // 検索したキーワード
        $word = $request->search;

        // 検索フォームに文字が入力されているか判定
        if (!is_null($word)) {
            // $wordの値がある→nullではない→検索フォームに何かしら入力されている
            // キーワードをもとに、部分一致するイベントを取得
            $events = $this->event->searchWord($word);
        } else {
            // $wordの値がない→null→検索フォームに何も入力されていない、つまり初期状態
            // Eloquentでeventsテーブルにあるデータを全て取得
            $events = $this->event->allEventsData();
        }

        return view('event.index', compact('events'));
    }

モデルに検索機能のロジックを組む

最後に、Eventモデルに検索機能のロジックを書きます。

    /**
     * 部分検索機能
     * 
     * @param string $word 入力した検索ワード
     */
    public function searchWord($word)
    {
        return $this
            ->where('title', 'like', '%'.$word.'%')
            ->orWhere('date', 'like', '%'.$word.'%')
            ->orWhere('start_time', 'like', '%'.$word.'%')
            ->orWhere('end_time', 'like', '%'.$word.'%')
            ->orWhere('content', 'like', '%'.$word.'%')
            ->orWhere('entry_fee', 'like', '%'.$word.'%')
            ->get();
    }

コードの解説をすると、likeと%を使って部分検索ができます。

// 一致検索
where('title', 'Laravel')

// 部分一致検索
where('title', 'like', '%'.$word.'%')

// or検索
where()
->orWhere()
->orWhere()

これで検索機能ができました。

検索フォームにJavaと入力

タイトルまたは内容または…でJavaに一致するイベントだけ取得できる。

お疲れ様でした。

ここまでシリーズでDocker×Laravel8でもくもく会アプリを作成してきましたが、検索機能実装で終わりです。

機能追加としては、ログインやお気に入り、さらに詳細検索機能や非同期処理などたくさんあるので自分でカスタマイズしてみてくださいね!

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる