Laravel 入門 #1 – Router と View の作成

Laravel を利用して 簡単な TODO リストの作成を行います。第一回目は 基本的な ルートの設定と画面の作成について紹介していきます。

Laravel を始める前に、まずは Laravel の環境構築を行いまししょう。

執筆時点での最新バージョンの Laravel 5.6 を利用するには PHP 7 の環境が必要です。

PHP 環境の用意が難しい場合、Homestead による仮想環境の構築がおすすめです。Homestead を利用したLaravel の環境構築については、以下の記事でもまとめていますので参考にしてみてください。

Laravel – Homestead 環境の構築

Laravel で画面を作る

Laravel を利用する準備ができたら、まずはルートを作成して、画面を表示してみましょう。Laravel でルートを設定するには routes/web.php を編集します。

routes/web.php を以下のように編集してみましょう。

Route("/",function(){
    return "hello world"
});

サイトのトップページの表示が変わり、画面に hello world と表示されたでしょう。

次に以下の記述を追加してみましょう。

Route::get("/about",function(){
    return "this is about page!";
});

今度は アドレス /aboutthis is about page! の表示を確認できます。

Laravel ではこのように Route::get("画面のURL", 処理 ) の形式でシステムの画面を追加していきます。

HTML を表示する

実際のシステム制作では、hello world のような文字ではなく、HTMLを表示したいケースのほうがほとんどです。
HTML を画面に表示するには、まず resouces/views/index.php を作成し 以下のようなHTMLを記述します。

<h1>hello world</h1>

このHTMLを画面に表示するには、以下のようなルートを記述します。

Route::get("/",function(){
    return view("index");
});

return で文字列を返していた箇所を view 関数を使った処理に書き換えると resources/views フォルダからテンプレートを参照して画面に表示してくれるようになります。

作成した テンプレートファイルが resouces/views/hoge.php の場合、ルート内での記述は view("hoge") になります。

フォルダ階層を区切ることも可能です。 resouces/views/hoge/piyo.php というテンプレートを作成した場合、フォルダ区切りを.で表現して、view("hoge.piyo") という風に記述することが出来ます。

HTML にデータを渡す

ルート内で取得した変数を 画面内で利用する場合、どのようにすればよいでしょうか? view 関数は画面内で利用する変数情報を、第二引数を用いて指定することが出来ます。

Route::get("/",function(){
    return view("index", [ 
        "message" => "hello world"
    ]);
});

指定された値はテンプレートファイル resources/views/index.php の中で PHP 変数として利用する事が出来ます。

<h1><?=$message?></h1>

フォームの作成

テンプレートの利用方法が理解できたら、次にフォームの作成を行っていきましょう。

簡単なタスクリストのフォームを作成する場合、 resources/views/index.php に以下のような記述を追加します。

<form action="/task" method="POST">
    <?= csrf_field() ?>
    <input type="text" name="task_name">
    <input type="submit" value="タスクの追加">
</form>

画面には一つのテキストフィールドと送信ボタンが表示されます。フォームは POST 送信を行うよう method が指定されており、 action で フォームの送信先アドレス action が指定されています。

二行目の csrf_field() は Laravel のフォームセキュリティ上で必要になる記述です。

Laravel ではデフォルトでフォームのセキュリティリスク(CSRF脆弱性)を軽減するため、
フォーム送信に認証用のトークンを必要としています。
csrf_field() の記述をフォーム内に記述することで、自動的に認証トークンのフィールドが生成されるため、簡単にフォームのセキュリティを高める事ができるようになっています。

画面の表示が確認できたら、作成されたボタンをクリックしてみましょう。 アドレスが/taskに遷移し、エラーの画面が表示されるはずです。フォームの送信先アドレス /task がまだ実装されていないため、続いてこれを実装していきましょう。

フォーム送信先の作成

form の action で指定した /task のリクエストを受け取るルートを追加するため、routes/web.php に以下の記述を追加します。

Route::post("/task",function(){
  //TODO ここでDBにデータを投入
  return redirect("/");
});

Route::get ではなく Route::post と記述することで、フォームなどで見られる POST のリクエストを処理することが出来るようになります。

// で始まる行はコメント行といって、実際には何も実行されないメモ用の記述です。

また、return redirect("/") と記述することで / アドレスへのリダイレクトを実施することが出来ます。

再度フォームのボタンを押してみましょう。エラーは出なくなり、 / のアドレスに戻ってくる事ができるようになりました。

ルートの設定と画面の表示が行えたところで、次にDatabase の処理にチャレンジしてみましょう。

Laravel 入門 #1 – Router と View の作成」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です