Laravelで投稿順ではなく期限順にリストを並べる方法
801 回閲覧されました
みなさんこんにちは、jonioです。
TODOアプリを作る際に作成した日付順ではなくタスクの期日が前の日付から並べたいと思ったのですが中々情報を見つける事ができなくやっと見つける事ができたので知った情報を忘れない為のアウトプットの記事を残します。
コントローラーはリソースコントローラーを使っていますがリソースコントローラーを使わなくても実装できます。
デモ画像
↓の様に期日が前の日付から並びます。
Laravel Collectiveを使う
フォームを使って日付を入力できますがデータベースに登録したタスクごとの日付の形式が異なる場合はどうやって並べるんだろうと考えて悩みました。（2022-10-01や2022年10月1日とか）
ネットを調べると「Laravel Collective」というフォームを生成できる物で上手くいく事が分かったのでそれを利用しました。
ターミナルで「composer require laravelcollective/html」と入力します。
フォームを表示する記述
そしてLaravel Collectiveを使いたいbladeで↓の記述をします。
このコードの書き方ですがまず1行目・2行目・8行目を書きます。
この時1行目の「post.store」はurlで「‘method‘ => ‘POST‘」はPOSTかGETを書き後はそのままです。
4行目・5行目・6行目ですがどれかの書き方が理解できれば他も理解できるので4行目で説明します。
「{{ Form::textarea(‘content‘, null, [‘class‘ => ‘content-form‘,‘placeholder‘ => ‘ここに内容を書く‘]) }}」を色で対応させます。
「textarea」はFormファサードのtextareaメソッドでHTMLで言う所の「<textarea></textarea>」です。
引数が3つあるのですが「(name属性名,value属性名,class名・placeholder等)」になります。
「content」はname属性名でHTMLで言う所の「<textarea name=”content”></textarea>」です。
Formファサードのメソッドについてはこの記事にまとめてありますので5行目・6行目を理解する時の参考にどうぞ。
なおフォームにバリデーションをかけていてそれに引っかかって送信エラーになった場合に入力をした値を入力欄に残す場合はold関数を使えばいいですがデフォルトで入っているみたいです。
↓はタスクの内容と期日を必須にしていてタスクの内容は書いたけど期日を設定していない場合ですがバリデーションエラーになっていますがタスクの内容（青枠）は入力欄に残っています。
期日が前順に並べる
Laravel Collectiveを使った時のFormファサードの情報をデータベースに登録する際の設定は必要ありませんが期日が前順に表示する為にコントローラーの設定をしないといけません。
コードを↓にします。
3行目の「Post::orderBy(‘deadline’)->get();」で期日の並び順の設定をしています。
今回は期日を必須にしていますが必須にしない場合もあると思います。
その場合はコードを↓にします。
タスクを編集する場合
タスクを編集する時ですが↓（タスクの内容を登録した時の記述）だと編集したいタスクの内容と期日が表示されずに空白になります。
タスクの内容と期日は表示されてないと使いにくいのでコードを↓にします。
old関数を使うのですが6行目で第二引数に「old(‘deadline‘,$post->deadline)」を入れています。
$postはコントローラーの情報ですが↓のコードを見た方が理解が早いと思います。
deadlineはname属性でdedlineはデータベースのカラム名です。
これで編集画面にも編集前の情報が保存されるようになります。