— y2sunlight 2020-05-08

Apricot に戻る

関連記事

• Apricot プロジェクトの作成
• Apricot 公開フォルダ
• Apricot コア
• Apricot アプリ

  • Apricot アプリ作成の準備
  • Apricot ホーム画面
  • Apricot エラー画面
  • Apricot データベースとモデル
  • Apricot ユーザ一覧画面
  • Apricot ユーザ編集画面
  • Apricot バリデーション
  • Apricot トランザクション
• Apricot 拡張

アプリのホーム画面を作ります。画面の作り方の基本はスタブ画面と同じです。本章の前にそちらをご覧下さい。

以下のように config/routes.php を変更し、ホームコントローラのルートを作ります。

/apricot/config

routes.php

<?php
//-------------------------------------------------------------------
// Route Definition Callback
//-------------------------------------------------------------------
return function (FastRoute\RouteCollector $r)
{
    $base = Core\Application::getInstance()->getRouteBase();
    $r->addGroup($base, function (FastRoute\RouteCollector $r) use($base)
    {
        // Home
        $r->get ('/home', 'HomeController@index');
        $r->get('/', function() use($base){
            header("Location: " . $base.'/home');
        });
 
        // Stub
        $r->get('/stub[/{no:\d+}]', 'StubController@index');
    });
};

• /home — ホームコントローラへのルート
• /stub — スタブコントローラへのルート
• / — ホームコントローラ(/home)へリダイレクト

ルーティング設定に関してはFastRouteを参照して下さい。

Controller を継承してホームコントローラを作ります。

/apricot/app/Controllers

HomeController.php

<?php
namespace App\Controllers;
 
use App\Foundation\Controller;
 
/**
 * ユーザコントローラ
 */
class HomeController extends Controller
{
    /**
     * Home Page
     * @return \Core\Foundation\Response
     */
    function index()
    {
        $message = 'Welcomt to '.env('APP_NAME').'!';
        return render('home',['message'=>$message]);
    }
}

• ボイラープレートのrender()関数を呼び出してレスポンスをレンダリングしています
• render(string $view=null, array $variables=[])

  1. $view : テンプレート名
     上例では assets/views/home.blade.php がテンプレートファイルになります
  2. $variables : テンプレート変数の連想配列
     上例では $message をテンプレートに渡しています。

以下にホームコントローラのindexアクションでレンダリングしているHTMLテンプレートを示します。

/apricot/assets/views

home.blade.php

{{-- 親レイアウト --}}
@extends('layout')
 
{{-- 追加スクリプト --}}
@push('scripts')
@endpush
 
{{-- タイトル --}}
@section('title')
@endsection
 
{{-- コンテンツ --}}
@section('content')
    <h1 class="text-center">{{__('messages.home.title')}} <span class="small">{{env('APP_VERSION')}}</span></h1>
    <div class="text-center">
        <img src="{{url_ver('img/apricot.jpg')}}" width="300">
    </div>
    <div class="text-center text-danger small mt-2" style="line-height: 1.5rem">{{$message}}</div>
@endsection

• extends, push, scripts, section の各ディレクティブについては、スタブ画面 を参照して下さい。
• ボイラープレート __(), url_ver() については、layout.blade.php を参照して下さい。

HTMLテンプレートで使用している画像 apricot.jpg は apricot/public/img の下に設置して下さい。

apricot/public/img
apricot.jpg

ホーム画面用の翻訳テキストを言語ファイル( messages.php )に追加します。

apricot/assets/lang/ja

messages.php

<?php
return [
 
    ...
 
    'home'=>[
        'title'=>env('APP_NAME'),
        'msg_change_password'=>'※ :account のパスワードは変更してお使い下さい',
    ],
];

ホーム画面を表示してみましょう。ブラウザ上で以下のURLにアクセスしてみて下さい。

http://localhost/ws2019/apricot/public/

次の画面が表示されます

■ [menu1],[menu2],[menu3]を押すとそれぞれのスタブ画面が表示されます。
■ [About Me]を押すと y2sunlight.com が開きます。