ウェブログラム

実践しながらじっくり学ぶ、Webプログラム習得サイトです。自作サービスの公開までWeb開発を実践していきましょう!

Webrogram

自分のオリジナルサービスを作って運営しよう!

【Laravel5.6 view】ビューを作成してWebページを表示してみよう

Laravel入門記事一覧はこちら webrogram.hatenadiary.jp

前回までは、ルーティングとコントローラについて学びました。 いよいよビューを作成しWebページを表示していってみましょう!

環境

  • PHP7.2.5
  • Laravel5.6
  • CentOS7

対象読者

  • Laravelの環境構築が完了している
  • 192.168.33.10:8000で仮想マシンを立ち上げている(ここが分からなければ、前の記事を見てください〜)
  • フレームワーク超初心者
  • ルーティングとコントローラが簡単に使える

ビューの位置づけとしては、「ユーザに見える部分」になります。 ユーザはビューのみを閲覧でき、そのビューにアクセスしたり、フォームで送信したりすることで、 ルーティングにアクセスし、適切なコントローラへ渡して処理を行います。

実際にビューを作成して表示してみる

ビューを作成すると言っても、見た目はただのHTMLです。

違う点としては、拡張子がPHPになります。

index.blade.php

このような感じなファイル名にする必要があります。

このbladeというものは、テンプレートエンジンと呼ばれ、PHPのプログラムとかがかけちゃいます(特殊な書き方で) 書き方自体もとても簡単なのですぐに覚えられると思います。 では、以下のようなファイルを用意しておきましょう。

resources/views/users/index.blade.php

<!doctype html>
<html lang="ja">
<head>
</head>
<body>
  <h1>hello users</h1>
</body>
</html>

本当にだただのHTMLですね。 ファイルを作成しただけでは、どこからもアクセス出来ないので、 UserControllerに作成したbladeファイルを表示する処理を書いてみましょう。

app/Http/Controllers/UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
  public function index(Request $req)
  {
  #    dump("hello webrogram $req->name");
      return view('users.index');
  }
}

これで、usersディレクトリ内のindexファイルを表示することができます。

ブラウザにアクセスしてみましょう。

f:id:iku8:20180603155450p:plain

表示されていますね。 viewというメソッドは、resources/views配下を指定することができます。 view('users.index')と記述していますが、「.」の代わりに「/」でも大丈夫です。

ビューに値を渡してみる

今のままではただのHTMLファイルですから、値をビューに渡して上げましょう。

resources/views/users/index.blade.php

<!doctype html>
<html lang="ja">
<head>
</head>
<body>
  <h1>{{ $user }}</h1>
</body>
</html>

このように書くことで、コントローラから渡された$user変数を表示することができます。 ですが、まだ$userをビューに渡す処理を書いていませんね。

次のようにコントローラを書き換えればOKです。

  public function index(Request $req)
  {
      $data['user'] = $req->name;
      return view('users.index', $data);
  }

これは何をしているかというと、GETパラメータ(ここではname)を取得して、連想配列である$dataのuserに名前を代入しています。 その連想配列をviewメソッドの第2引数に渡すことにより、ビューへと値渡しができます。

このように連想配列を使ってビューへ値を渡していきます。 他にも値を渡す方法はありますので、余力があれば調べてみましょう。

よく使う配列の繰り返し処理

繰り返し処理は本当によく使います。 仕組み自体はとても簡単なので、ぜひこの機会に取得してください。

最初はなれないかもしれないので、何度も書いて覚えて下さいね。

コントローラで複数のユーザが入った配列を用意します。

  public function index(Request $req)
  {
      // ユーザの名前データを3人分用意します
      $data['users'] = [
        'takeshi',
        'minamino',
        'beatban',  // 最後の行にカンマがあってもOKです
      ];

      return view('users.index', $data);
  }

$dataのkeyはユーザが複数人いるのでusersと複数形にしておきました。 これで3人分のデータを持った配列ができました。

このユーザたちを、一人ひとり箇条書きで表示してみましょう。

<!doctype html>
<html lang="ja">
<head>
</head>
<body>
  <ul>
    @foreach($users as $user)
      <li>{{ $user }}</li>
    @endforeach
  </ul>
</body>
</html>

次のように表示されたら成功です。

f:id:iku8:20180603161827p:plain

foreachはPHPのメソッドと同じような使い方ができます。 この処理で<li></li>ごと3人分繰り返しているので箇条書きとなります。

bladeファイルで使用するメソッド等については、先頭に「@」が付きますので、ここもしっかりと抑えておきましょう。 @マークをつけ忘れると、文字として表示されます。

フォームでPOSTしてリダイレクトしてみよう

よく使うユーザの登録等を例に取って、擬似的なルーティング、コントローラ、ビューの動きを見ていきましょう。

流れとしては、以下のようになります。 ・ユーザ登録ページのビューを作成 ・ユーザ登録ページへのルーティング ・POSTリクエストを受け取るルーティングを作成 ・ユーザ登録を行うコントローラを呼び出す ・ユーザを保存する(ここは今回しません、モデルのお仕事です) ・ユーザ登録完了ページへ飛ばす

さらっと作っていきましょう。

ユーザ登録ページのビュー作成

ユーザの一覧ページを今まで作って来ましたが、今度は登録ページを作ってみましょう。 URL的には/users/createにしましょう。

bladeファイルを作っていきましょう。 resources/views/users/create.blade.php

<!doctype html>
<html lang="ja">
<head>
</head>
<body>
  <h1>ユーザ登録</h1>

  <form method="POST" action="/users">
    {{ csrf_field() }}
    <input type="text" name="name">
    <input type="submit" value="作成">
  </form>
</body>
</html>

タグを使って普通にフォームを作成しますが、一点気をつけておかないところがあります。 それは、{{ csrf_field() }}です。 これはCSRF対策と言って、一種のセキュリティ対策です。 今サイトにアクセスしている人が本当にユーザ登録を行っているのか?という保証を取るもだと思って貰えば良いです。

csrf_fieldでトークンというものを発行し、Laravelのアプリケーションへと投げたとき、「今サイトにアクセスしている人が、本当にユーザを登録しようとしている」と判断されます。 このトークンが必要になるのは、今回のようにユーザを登録する場合などです(POST通信を行う場合)。

ユーザ登録ページへのルーティング

さっき作成したユーザ登録ページへアクセスするため、ルーティングを記述しましょう。

routes/web.php

<?php

// ユーザ一覧
Route::get('/users', 'UserController@index');

// ユーザ登録ページ
Route::get('/users/create', 'UserController@create');

これで、ブラウザにアクセスし、以下のようにフォームが表示されていればOKです。

f:id:iku8:20180603164202p:plain

POSTリクエストを受け取るルーティングを作成

続いてフォームによってHTTPメソッドPOSTで投げられた時のルーティングを見ていきましょう。

フォームのアクションには/usersと記述しているので、「POSTで/usersに来た時」というルーティングをすれば良さそうです。

<?php

// ユーザ一覧
Route::get('/users', 'UserController@index');

// ユーザ登録ページ
Route::get('/users/create', 'UserController@create');

// ユーザ登録
Route::post('/users', 'UserController@store');

ユーザ一覧とユーザ登録のURLは一緒でも、メソッドが「get」と「post」などで処理を振り分けることができます。 このようにurl+HTTPメソッドで処理を振り分ける方法「RESTful」と呼んだりします。

ユーザ登録を行うコントローラを呼び出す

次はコントローラです。ユーザ登録時はUserControllerのstoreというアクションを呼び出しているので、storeアクションを作成していきましょう。

  // ユーザ登録
  public function store(Request $req)
  {
      /**
        ここでモデルを使ってユーザを登録する
      **/

      // ユーザ一覧ページへリダイレクト
      return redirect('/users');
  }

storeアクションの中では、今はユーザ一覧ページへリダイレクトする処理のみしか書いていません。 本当に登録するにはDBを設定してモデルを作っていく必要があります。

この$reqの中身についてですが、

  // ユーザ登録
  public function store(Request $req)
  {
      /**
        ここでモデルを使ってユーザを登録する
      **/

      dump($req->name);

      // ユーザ一覧ページへリダイレクト
      return redirect('/users');
  }

このようにすることで、フォームで入力された名前を取ることができます。 今後はこの取得した名前をモデルを呼出してDBへ保存してやります。次の章で実際してみましょう。

dumpを消して、ユーザ登録ページで作成ボタンを押すと、ユーザ一覧ページまで戻ってくれば終わりです。

まとめ

これで、ルーティング、コントローラ、ビューの連携が一通り終わりました。 このようにURLやHTTPメソッドを使って、ルーティングしていきWebアプリケーションを作っていきます。

まだ流れに慣れないかもしれませんが、自分でいろいろなページを作ったり、処理を振り分けていったり、値渡しをしていったりすつことで、 着実にWebアプリケーションが作れるようになっていくので、どんどん実践していきましょう。

そのうち、手に取るようにいろいろな処理が書けるようになると、期待しています。

それでは次回難関であるモデルについて見ていきましょう(実は簡単?)。