IT業界未経験者を含めたPHP初心者のためのLaravelの画面開発基礎と遷移

猫踏んじゃった

■Laravelプロジェクトの実行

まずは作成したプロジェクトを実行してみます。

1.ターミナルから「php artisan serve」を入力し、Enterキーを押下します。
※「ctr+@」でターミナルを開きます。
F1キーのメニューから「ser」を入力し、Artisan： start Serverを選択しても問題ありません、但しhttpサーバの起動は直打ちより遅いです。

無題

2.ブラウザを開き「php artisan serve」を入力し、ページを表示します。
成功すれば以下のように表示されます。
※停止する場合「ctr+c」を押下して下さい。

無題

補足：上記のやり方は面倒なのでappacheの設定ファイルを書き換える事でコマンドなしで起動する事も出来ます。
「C:\xampp\apache\conf\extra\httpd-vhosts.conf」
の中身を開き、最後の行に以下を追加してください。

<VirtualHost example.com:80>
DocumentRoot "C:\xampp\htdocs\projectTest\public"
##ServerName example.com
<Directory "C:\xampp\htdocs\projectTest\public">
AllowOverride All
Options All
Require all granted
</Directory>
</VirtualHost>

「C:\xampp\htdocs\index.php」
の中身を開き、「dashboard/」を「projectTest/public/」に書き換えて下さい。

XAMPPのコンソールからAppacheの項目のStartボタンを押下し、ブラウザに以下のアドレスを入力するとページが表示されます。
「http://localhost/」

補足：初期表示の呼び出し元はroutes配下の「web.php」です。

無題

初期表示の実体はresources配下の「welcome.blade.php」に格納されています。

無題


■MVCの作成

MVCとはモデル（ソースの実態）、ビュー（実際に表示する枠）、コントロール（モデルとビューを紐づけるもの）の略です。
webが出てきた当初、これらの多くは混ぜて開発されていましたが保守性の観点からソースを混ぜると分かり辛くなるため、この様なカテゴリ化は浸透しました。Javaでも同じ概念が浸透しています。

1.「php artisan make:model Models/（画面名） -c -r -f」を入力し、Enterを押下してください。画面毎のスケルトンを作成します。

無題

※「php artisan help make:model」を入力してEnterを押下するとオプションの詳細役割が表示されます。
artisanコマンドの詳細は「https://note.com/fteneko2020/n/nbdd74d95b2ec」を参照ください。凡そで何が出来るかは理解できると思います。

2.実行すると以下のファイルが自動生成されます。

無題

画面名：Test
・app/Http/Controllers/画面名Controller.php
　画面名.phpを呼び出します
・app/Http/Models/画面名.php
　具体的な処理のふるまい（画面名Controllerに返却）
・database/factories/画面名Factory.php
　データの抽出や登録などに使います

3.2.で作成されたコードを呼び出す為に「web.php」に以下のソースを追加します。

無題

画面名：test
Route::group(['prefix' => '画面名'], function () {
    // 画面名コントローラーのindexメソッドと連携するルーティング
    Route::get('/', '画面名Controller@index')->name('画面名.index');
});

※このソースは「http://localhost:8000/画面名」に要求する為に最低限必要なソースです。詳細は以下を参考にして下さい。

https://readouble.com/laravel/5.5/ja/routing.html

4.実行すると以下の様にまっさらな画面が表示されます。
（失敗すると404 Not Foundが表示されます）

無題

動きとしては以下になります。
・http://localhost:8000/画面名をリクエスト
・web.phpの「Route::group(['prefix' => '画面名'], function ()」を呼び出し
　※「name('画面名.index')」でブラウザのURLとコントローラが紐づけされる
・「画面名Controller」の「public function index()」を呼び出し
　※Models/画面名.phpは呼び出し記載が無いので無視される
・「public function index()」は空なので、そのままweb.phpに返却
・ブラウザに表示


■ブレードの作成

　※一旦はMVCは無視してファイルの配置と動きを先に理解する

laravelではviewを扱う時にブレードという単語が出てきます。
javaでいうjspに近い存在で、phpコードを埋め込んだりモデルを呼び出す事ができます。
また、ひな型の画面枠を作っておくと同じようなhtmlコード（ヘッダーやフッターといった統一すべき同じレイアウト）を書かなくても済む様になります。

無題

1.web.phpを修正します。
※ここでは「test」にしておきます。

無題

2.以下のファイルを「resources/views」の配下に作成します。

無題

layouts/base.blade.php

<DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>@yield('title') </title>
   <meta name="description" itemprop="description" content="@yield('description')">
   <meta name="keywords" itemprop="keywords" content="@yield('keywords')">
   @yield('pageCss')
</head>
<body>
   {{-- header.blade.phpを埋め込み指定 --}}
    @yield('header')
   <div class="contents">
       <div class="main">
           {{-- test.blade.phpで宣言したcontentを埋め込み指定 --}}
           @yield('content')
       </div>
   </div>
   {{-- footer.blade.phpを埋め込み指定 --}}
   @yield('footer')
</body>
</html>

layouts/header.blade.php

@section('header')
<header class="header" style="background: #000000 ;">
   <div style="color: #FFFFFF ;height: 40px;">
       menyu
   </div>
</header>
@endsection

layouts/footer.blade.php

@section('footer')
<footer class="footer" style="background: #CCAAAA ;">
   <div style="color: #FFFFFF ;height: 80px;">
       <center>Copyright© hogehoge. ALL rights reserved.</center>
   </div>
</footer>
@endsection

test.blade.php

@extends('layouts.base')

{{-- ********************** --}}
{{-- * レイアウト利用宣言     --}}
{{-- ********************** --}}
@include('layouts.header') {{-- ヘッダー baseのyield('header')で利用 --}}
@include('layouts.footer') {{-- フッター baseのyield('footer')で利用--}}

{{-- ********************** --}}
{{-- * 変数利用宣言          --}}
{{-- ********************** --}}
@section('title', 'テストサンプルページ')
@section('keywords', 'A,B,C')
@section('description', '説明文')
@section('pageCss')
<link href="/css/page.css" rel="stylesheet">
@endsection

{{-- コンテンツ baseのyield('content')で利用 --}}
@section('content')
   <p>コンテンツ内容</p>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
@endsection

※@extendsはlayoutsディレクトリー配下のbase.blade.phpの取り込みを指します。sectionは対応する変数扱い、includeは利用宣言で、どこに書いても構いません。

3.「http://localhost:8000/」を開くと「test.blade.php」のソースが実行され、ブラウザに表示されます。

■ブレードとコントローラの紐づけ

ここまでは単純にブレードを表示する所までを説明してきました。
実際にはコントローラと紐づけて処理を行いますが、ここではその基本的な呼び出しに変更します。

1.web.phpを修正します。
※ここでは「test」にしておきます。

Route::get('/', 'TestController@index');

2.TestController.phpを修正します。

    /**
    * Display a listing of the resource.
    *
    * @return \Illuminate\Http\Response
    */
   public function index()
   {
       return view('test');
   }

3.test.blade.phpを修正します。

@extends('layouts.base')

{{-- ********************** --}}
{{-- * レイアウト利用宣言     --}}
{{-- ********************** --}}
@include('layouts.header') {{-- ヘッダー baseのyield('header')で利用 --}}
@include('layouts.footer') {{-- フッター baseのyield('footer')で利用--}}

{{-- ********************** --}}
{{-- * 変数利用宣言          --}}
{{-- ********************** --}}
@section('title', 'テストサンプルページ')
@section('keywords', 'A,B,C')
@section('description', '説明文')
@section('pageCss')
<link href="/css/page.css" rel="stylesheet">
@endsection

{{-- コンテンツ baseのyield('content')で利用 --}}
@section('content')
<form action="{{action('TestController@index')}}" method="post">
   <br>
   <input type="text" name="name"><br>

   <input type="text" name="email"><br>

   <textarea name="message"></textarea><br>

   <input type="submit" value="Confirm"><br>
</form>
@endsection

4.実行されると以下の様に表示します。

無題


この記事が気に入ったらサポートをしてみませんか？