この記事のゴール
- Laravel を使ってPHP経由でWEBページを設置する。(今回DBは使いません。)
- 作成したページがブラウザで正常に表示される。
前提
- コードエディタはMicrosoftのVSCodeを使っています。
- Laravel での開発環境構築済
開発環境構築はこちらの記事を参考にしてください。
WEBページ作成にあたってこれから行うこと
- コントローラー作成・編集:URLへのアクセス時に裏で動くPHPコードの作成・編集。
- ルーティング設定:アクセスされたURLに対応するコントローラー指定。
- ブラウザで表示確認1回目。
- コントローラー修正:Bladeテンプレートを使うよう修正。
- Bladeテンプレート作成・編集:ページのHTML出力を担当するひな形の作成・編集。
- ブラウザで表示確認2回目。
コントローラー作成
Laravel での作成・変更等の操作は、基本的には artisan というPHPプログラム経由で作ります。
面倒な設定やファイルのひな型作成、その他作業を担当してくれる専属の職人です。
コンテナを起動し、sail-shell に接続した状態で、
次のコマンドでコントローラーファイルのひな型を作成しましょう。
※大文字小文字を区別してください。
php artisan make:controller HelloWorldController
![](https://macocci7.net/blog/wp-content/uploads/2023/05/make_controller01.png)
コマンド実行が成功すると、フォルダ [app\Http\Controller\] の中に、
先程のコマンドで指定した [HelloWorldController] に
拡張子 [.php] が付いたファイルが作成されます。
![](https://macocci7.net/blog/wp-content/uploads/2023/05/make_controller02.png)
ファイルの中身を見てみると、最低限のコントローラークラスファイルになっています。
このコントローラー独自のプロパティやメソッドは一切設定されていません。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HelloWorldController extends Controller
{
//
}
ここにURL毎のメソッドを追記していきます。
コントローラー編集
では、作成したコントローラーを編集しましょう。
次のように、/helloworld に対応する index() メソッドを追加して保存しましょう。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HelloWorldController extends Controller
{
public function index() {
return "Hello World.";
}
}
ルーティング設定
作ったコントローラーでページ表示するためには、URLへの対応指定が必用です。
フォルダ [routes\] 内にあるファイル [web.php] を開いて編集します。
![](https://macocci7.net/blog/wp-content/uploads/2023/05/route01.png)
コードの中に、次の行を追記してから保存します。
Route::get('/helloworld', [\App\Http\Controllers\HelloWorldController::class, 'index']);
![](https://macocci7.net/blog/wp-content/uploads/2023/05/route02.png)
これで、http://localhost/helloworld にアクセスした際のコントローラー指定ができました。
ブラウザで表示確認1回目
ブラウザのアドレスバーに http://localhost/helloworld を入力してアクセスてみましょう。
![](https://macocci7.net/blog/wp-content/uploads/2023/05/browser01.png)
Hello World. が表示されていれば成功です。
コントローラー修正
Bladeテンプレートを使うようにコントローラーを修正していきます。
先程の [HelloWorldController.php] を次のように修正して保存します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HelloWorldController extends Controller
{
public function index() {
$pageTitle = 'Greeting';
$message = 'Hello World.';
return view('helloworld.index', [
'pageTitle' => $pageTitle,
'message' => $message,
]);
}
}
view() 関数でBladeテンプレート名を指定し、同時に変数を渡すことができます。
変数を渡す必要が無いときはBladeテンプレート名だけを指定します。
return view('helloworld.index');
Bladeテンプレートに変数を渡すときには、
Bladeテンプレート名の後ろにハッシュ配列で指定します。
Bladeテンプレート名が helloworld.index
になっていますが、
フォルダ [resources\views\helloworld\] 内にある
ファイル [index.blade.php] を指定していることになります。
Bladeテンプレート作成
Bladeテンプレートは artisan コマンドではサポートしていないので、
手作業で作成する必要があります。
まずは、フォルダ [resources\views\] 内に新しいフォルダ [helloworld] を作成してください。
作成したフォルダ内に、新しいファイル [index.blade.php] を作成してください。
![](https://macocci7.net/blog/wp-content/uploads/2023/05/blade01.png)
Bladeテンプレート編集
では、新規作成したファイル [index.blade.php] を編集していきます。
中身はHTMLをベースとして、必要な箇所に変数などの埋め込みをしていきます。
次のように編集して保存してください。
<!DOCKTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{$pageTitle}}</title>
</head>
<body>
<h1>{{$pageTitle}}</h1>
{{$message}}
</body>
</html>
Bladeテンプレートで変数の埋め込みをする際には、
マスタッシュと呼ばれる二重ブラケットの中に変数を入れます。
ブラウザで表示確認2回目
ブラウザのアドレスバーに http://localhost/helloworld を入力してアクセスてみましょう。
![](https://macocci7.net/blog/wp-content/uploads/2023/05/browser02.png)
コントローラーで渡した変数の内容が表示されていれば成功です。
お疲れさまでした。
コメント