Laravelでフォーム入力
フォームから「たこ焼きを焼くための最適な温度」を入力すると、「最適な温度！！」「温度高すぎ！」「温度低すぎ！」の何かを画面表示する機能を実装しました。
ちなみにリセットを押すとまた「たこ焼きを焼くために最適な温度は何度でしょう？」の画面に戻ります。
このWebアプリを作るためにいじったのはルートとコントローラとビューの３つです。
それぞれ簡単に解説します。
ルートの記述
web.phpに以下のように記述しました。
Route::get('/takoyaki_calc/', 'HelloController@takoyaki_calc')->name('takoyaki_calc');
Route::post('/takoyaki_calc/', 'HelloController@takoyaki_calc_post');
getの方は「http://localhost:8000/takoyaki_calc」に最初にアクセスした時にHelloControllerのtakoyaki_calcアクションを呼び出します。
またnameでtakoyaki_calcと宣言しているので、route('takoyaki_calc')で「http://localhost:8000/takoyaki_calc」を呼び出せるようになります。
postの方はgetで呼び出した画面に好きな温度を入力して、送信ボタンを押した時にHelloControllerのtakoyaki_calc_postアクションを呼び出します。
同じURLでもhttpメソッドが異なれば、ルートをそれぞれ記述して、アクションも別にできます。
コントローラの記述
続いてコントローラです。いつものように青本のHelloControllerをそのまま活用しています。
public function takoyaki_calc()
{
$data =[ 'kekka' => 'たこ焼きを焼くための最適な温度は何度でしょう？', 'temperature' =>''];
return view('hello.takoyaki_calculation', $data);
}
public function takoyaki_calc_post(Request $request)
{
$msg = $request->msg;
if(ctype_digit($msg)) {
$temperature = (int)$msg;
if ($temperature > 250) {
$data =[ 'kekka' => '温度高すぎ！', 'temperature' => $temperature];
} elseif($temperature < 200) {
$data =[ 'kekka' => '温度低すぎ！', 'temperature' => $temperature];
} else {
$data =[ 'kekka' => '最適温度！！！', 'temperature' => $temperature];
}
} else {
$temperature = '';
$data =[ 'kekka' => '整数を入力してね', 'temperature' => $temperature];
}
return view('hello.takoyaki_calculation', $data);
}
takoyaki_calcアクションはview関数でtakoyaki_calculation.blade.php読み込んで、その内容を返しています。
その時パラメータとしてdataをビューに渡しています。
takoyaki_calc_postアクションはビューで入力された値を$request->msgで取り出して、まずctype_digit関数で整数かそうでないかの判断を行います。
整数であれば、数値によって$kekkaに文字列を入れて、再びビューに返します。
整数でなければ、$kekkaに「整数を入力してね」を入れて、再びビューに返します。
ビューには画面で入力した温度もtemperatureとして返すようにします。
ビューの記述
最後にビューの記述です。
<html>
<head>
<title>最適温度</title>
</head>
<body>
{{$kekka}}
<form action="/takoyaki_calc" method="post">
{{ csrf_field() }}
<input type="text" name="msg" value="{{$temperature}}">
<input type="submit">
</form>
<a href="{{route('takoyaki_calc')}}">
<button type="button">リセット</button>
</a>
</body>
</html>
最初にhttp://localhost:8000/takoyaki_calcにアクセスした時は、$kekkaに「たこ焼きを焼くための最適な温度は何度でしょう？」が格納されており、それが表示されます。
formでは、actionにルートのpostで記述した/takoyaki_calcを設定し、methodはpostにします。
これで送信ボタンを押すと、フォームに入力した値がHelloControllerのtakoyaki_calc_postアクションに渡されて、その結果が表示されるというわけです。
リセットボタンは画面を初期状態（httpメソッドがgetでフォーム画面が呼び出された状態）にするために配置しています。
まとめ
今回もルート→コントローラ→ビューの流れにそった基本的な処理を記述してみました。httpメソッド（getやpost）については過去解説しているので参考にしてください。
