Certain parts of the web pages are repeated on multiple web pages but at different locations. CakePHP can help us reuse these repeated parts. These reusable parts are called Elements − help box, extra menu etc. An element is basically a mini-view. We can also pass variables in elements.
Cake\View\View::element(string $elementPath, array $data, array $options =[])
There are three arguments to the above function −
- The first argument is the name of the template file in the /src/Template/Element/ folder.
- The second argument is the array of data to be made available to the rendered view.
- The third argument is for the array of options. e.g. cache.
Out of the 3 arguments, the first one is compulsory while, the rest are optional.
Example
Create an element file at src/Template/Element directory called helloworld.ctp. Copy the following code in that file.
src/Template/Element/helloworld.ctp
<p>Hello World</p>
Create a folder Elems at src/Template and under that directory create a View file called index.ctp. Copy the following code in that file.
src/Template/Elems/index.ctp
Element Example: <?php echo $this→element('helloworld'); ?>
Make Changes in the config/routes.php file as shown in the following program.
config/routes.php
<?php use Cake\Core\Plugin; use Cake\Routing\RouteBuilder; use Cake\Routing\Router; Router::defaultRouteClass('DashedRoute'); Router::scope('/', function (RouteBuilder $routes) { $routes->connect('/elementexample',['controller'=>'Elems','action'=>'index']); $routes->fallbacks('DashedRoute'); }); Plugin::routes();
Create an ElemsController.php file at src/Controller/ElemsController.php. Copy the following code in the controller file.
src/Controller/ElemsController.php
<?php namespace App\Controller; use App\Controller\AppController; use Cake\ORM\TableRegistry; use Cake\Datasource\ConnectionManager; class ElemsController extends AppController{ public function index(){ } } ?>
Execute the above example by visiting the following URL.
http://localhost:85/CakePHP/element-example
Output
Upon execution, the above URL will give you the following output.