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

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

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

この記事では、

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

とう基本的な内容から、

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

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

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

elementとは

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

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

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

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

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

elementの使い方

elementの基本的な使い方

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

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

SampleController.php

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

index.ctp

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

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

test.ctp

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

Cake/src/Template/Element/test.ctp

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

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

まとめ

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

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ヤマシタ

エンジニア歴10年のフリーランスエンジニア。ITに関わるさまざまなコンテンツの企画・制作も行っています。
ITに関してはノウハウ系、ライフハック系、トレンド系など、200本以上の執筆経験があります。

おすすめコンテンツ

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

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