スライドショー

【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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ヤマシタ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説