【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の使い方を忘れてしまったら、この記事を思い出してくださいね!

未来に繋がるプログラミング学習、できていますか?

エンジニアと一口にいっても、フロントエンド、サーバーサイド、アプリ開発、AI関連など様々な業界や職種があり、業務内容や働き方、年収は変わります。

どんな働き方をしたいのか、どのくらい年収が欲しいのかなど具体的なキャリアパスを考えて、それを達成できる学習カリキュラムを考えていかないと、希望する方向性とは違うエンジニアになってしまったり、遠回りの学習に時間を費やしてしまう可能性があります。

侍エンジニア塾では目的から逆算する形で、まずあなたの目指すキャリアをヒアリングさせて頂いてからそれを達成するためのオリジナルの学習カリキュラムを作成しています。

今学んでいることが理想のエンジニアになるために繋がっているか不安でしたら、下記の無料体験レッスン予約カレンダーよりお気軽にご相談ください。

LINEで送る
Pocket

書いた人

ヤマシタ

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

おすすめコンテンツ

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

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