Laravelでクエリパラメーターの使い方とページ遷移の方法
68 回閲覧されました
みなさんこんにちは、jonioです。
個人開発をしている時にクエリパラメーターを使ってページ遷移をしないといけなかったので調べましたがネットでは見つけることができませんでした。
実装できたのでメモとしてこの記事を残します。
またクエリパラメーターの使い方についてもメモを残します。
目次
クエリパラメーターとは
下記のURLの赤枠の部分です。
これを使うとページに表示されている特定の内容を編集するのが可能になります。
例えばページに「お金」・「日にち」・「メモ」が表示されている場合にお金の編集ページ・日にちの編集ページ・メモの編集ページに入れるといった感じです。
今回はこれを実装します。
ルーティング
web.phpのコードを下記にしました。
Route::controller(PriceController::class)->group(function(){
Route::get('/item/{id}/view', 'view')->name('price.view');
Route::get('/item/{id}/edit', 'edit')->name('price.edit');
});
コントローラー
コードを下記にします。
public function view($id)
{
$target = CategoryPrice::find($id);
return view('price.view', compact('target'));
}
public function edit($id, Request $request)
{
$target = CategoryPrice::find($id);
$field = $request->query('field');
return view('price.edit', compact('target', 'field'));
}
アクションがview→editの流れでページ遷移させますがeditアクションの中に「$request->query(‘field’);」があります。
これでクエリパラメーターを取得します。
view.blade.php
コードを下記にします。
<div class="container pt-6 pb-6">
<a class="text-left" href="{{ route('price.index') }}">戻る</a>
<h2 class="text-center">入力内容詳細</h2>
<div class="d-flex justify-content-between width">
<p>金額 : {{ $target->price }}</p>
<a href="{{ route('price.edit', ['id' => $target->id, 'field' => 'price']) }}">price</a>
</div>
<div class="d-flex justify-content-between width">
<p>カテゴリ : {{ $target->category->name }}</p>
<a href="{{ route('price.edit', ['id' => $target->id, 'field' => 'category']) }}">カテゴリ</a>
</div>
</div>
edit.blade.phpにクエリパラメーターを渡しているのは6行目です。
「route」の第三引数で指定します。
下記の書き方でも同じaタグの表示になります。
<a href="{{ route('price.edit', ['id' => $target->id]) }}?field=price">price</a>
edit.blade.php
クエリパラメーター(field)の値がpriceかcategoryかでページの表示の切り替えをします。
コードを下記にします。
<div class="container pt-6 pb-6">
<h2 class="text-center">編集ページ</h2>
<form method="POST" action="{{ route('price.update', ['id' => $target->id]) }}">
@csrf
@if ($field == 'price')
<div class="form-group">
<label for="price">金額</label>
<input type="number" name="price" value="{{ old('price', $target->price) }}" class="form-control">
@error('price') <p>{{ $message }}</p> @enderror
</div>
@elseif ($field == 'category')
<div class="form-group">
<label for="category">カテゴリ</label>
<select name="category" class="form-control">
@foreach ($categories as $category)
<option value="{{ $category->id }}" {{ $target->category_id == $category->id ? 'selected' : '' }}>
{{ $category->name }}
</option>
@endforeach
</select>
@error('category') <p>{{ $message }}</p> @enderror
</div>
@endif
<button type="submit" class="btn btn-primary">更新</button>
</form>
</div>
クエリパラーメーターの値で表示の切り替えをしているのは5行目・11行目です。
これでクエリパラメーターを使ってページ遷移をして表示の切り替えをするのは完成です。
$request->query()と$request->input()
今回は下記を使いました。
$request->query('field');
これはURLのクエリパラメーターしか取得できません。
だからHttpメソッドの中で「GET」の場合しか使うことができません。
クエリパラメーターを取得する方法として下記もあります。
$request->input();
この場合に取得できるのは下記になります。
- GETの場合のデータ
- POSTの場合のデータ
- JSONデータ
サンプルコードとして下記のコードがあったとします。
<form action="/store" method="POST">
@csrf
<input type="text" name="field" value="price">
<button type="submit">Submit</button>
</form>
「value=”price”」を取得するコントローラーは下記の記述をします。
public function store(Request $request)
{
$field = $request->input('field');
return $field;
}
「$request->input()」を使うと何を取得するのかがはっきりしない(GETで使うのかPOSTで使うのか分からない)のでクエリパラメーターを取得する場合は「$request->query()」の方がいいと個人的に思いました。
$this->request->only()
これはHTTPメソッドのGET・POST・PUT・DELTEで使えます。
また特定のクエリパラメーターだけを取得できるので可読性が上がります。
コードは下記になります。
public function handleRequest(Request $request)
{
$attributes = $request->only(['name', 'age', 'job']);
// 'name' パラメーターを利用
$name = $attributes['name'];
return $name;
}
クエリパラメーターとして使う場合はPOST・GETの両方で使える為GETの場合はやはり「$this->request->query()」の方がいいと思います。
しかしリクエストパラメーターとしてPOSTで使う場合はめちゃくちゃ便利です。
テーブルに値を保存する簡単な例で見ていきます。
テンプレートに下記のコードを書いたとします。
<form action="/users" method="POST">
@csrf
<div>
<label for="name">名前:</label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="email">メールアドレス:</label>
<input type="email" name="email" id="email" required>
</div>
<div>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required>
</div>
<button type="submit">登録</button>
</form>
コントローラーのコードは下記にします。
public function store(Request $request)
{
$data = $request->only(['name', 'email', 'password']);
// パスワードをハッシュ化して保存
$data['password'] = bcrypt($data['password']);
User::create($data);
}
usersテーブルに値を保存するのは8行目だけでコードを凄く短く書けるので便利だと思います。