スライドショー

【CakePHP入門】エレメント(element)を使ってみよう!

こんにちは!フリーエンジニアのヤマシタです。

CakePHPではWebページで異なるレイアウトでも共通化できる部分については、再利用できるelementという機能があります。

この記事では、

・エレメント(element)とは
・エレメント(element)の基本的な使いかた

とう基本的な内容から、

・エレメント(element)に引数を渡す方法

などの応用的な使い方について解説していきます。

elementは共通化できる部品を繰り返し使用するときに非常に便利ですので、この記事を読んで使い方を覚えましょう!

elementとは

エレメント(element)とは、異なるレイアウトのページでもViewの一部分を共通化して再利用可能にしたものです。

Webページの作成において、広告やヘルプボックス、メニュー、ポップアップ、フォームなどの繰り返し利用できるパーツはelementに記述すると便利です。

elementは「Cake/src/Template/Element/」のディレクトリに拡張子「.ctp」の持つファイルを作成します。

echo $this->element(‘ファイル名’);

引数のファイル名はElement/で作成したctpのファイル名を指定します。

記述方法は基本的にはViewのctpと同じです。

elementの使い方

elementの基本的な使い方

ここでは実際にelementの実装方法を見ていきましょう。

まずは「Cake/src/Controller/SampleController.php」を作成します。

SampleController.php

<?php
namespace App\Controller;

use App\Controller\AppController;

class SampleController extends AppController
{

  public function index() {

  }
}

次に「Cake/src/Template/Sample/index.ctp」を作成します。

index.ctp

<h1>index</h1>
<?php
echo $this->element('test');
?>

index.ctpでは共通化するファイルを「echo $this->element('test’)」の形式で指定します。

引数ではtestと指定しているため、「Cake/src/Template/Element」以下にはtest.ctpファイルを作成しておく必要があります。

test.ctp

<p>
  <?php
    echo $this->Form->create();

    echo $this->Form->input('ユーザー');
    echo $this->Form->input('パスワード');
    echo $this->Form->button('送信');

    echo $this->Form->end();

  ?>
</p>
</div>

test.ctpではFormHelperを使用して、簡単な入力フォームを作成しています。

FormHelperについては、以下の記事で詳しく解説しています!

このサンプルプログラムを実行すると、以下のように表示されます。

element_image1

Viewで「echo $this->element('test’)」を記述すれば、Cake/src/Template/Element/test.ctpの内容が表示されることがわかりますね!

elementに変数を渡す方法

elementに引数を渡す場合には、以下のようにelementの第二引数に連想配列で['変数名'->'値']を指定します。

エレメントのファイルの内部では、引数で渡されたすべての変数をメンバとして利用できます。

これはコントローラーの Controller::set() メソッドと同様の動作となります。

Cake/src/Template/index.ctp

<h1>index</h1>
<?php
echo $this->element('test', ["text" => 'Samurai Engineer']);
?>

Cake/src/Template/Element/test.ctp

<?php
echo $text;
?>

このプログラムを実行すると、’Samurai Engineer’が出力されます。

このようにelementに第二引数を渡すだけで、ControllerからViewに変数を渡す感覚でelementに変数を渡すことができます。

まとめ

ここではelement(エレメント)の基本的な使い方から、elementに引数を渡す方法などについて解説しました。

特定のレイアウトや入力フォームなどを繰り返し使用したい場合、elementは非常に便利ですので使い方はよく覚えておきましょう!

もしelementの使い方を忘れてしまったら、この記事を思い出してくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

ヤマシタ

システムエンジニアとして10年勤務→フリーランスへ。現在は侍ブログ編集部としてこれまでに200記事以上の記事を執筆。
大規模システム開発からWebアプリ開発まで経験あり。最近ではPythonの機械学習に挑戦中。