ウェブログラム ~学習するな実践せよ~

作成日: 2018-11-17

ビューを作成してWebページを表示する

前回までは、ルーティングとコントローラについて学びました。 いよいよビューを作成し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ファイルを表示することができます。

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

ビューに値を渡してみる

今のままではただの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>

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

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です。

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アプリケーションが作れるようになっていくので、どんどん実践していきましょう。

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

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

作成日: 2018-11-17