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.

CakeViewView::element(string $elementPath, array $data, array $options =[]

There are three arguments to the above function as follows −

• 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.php. Copy the following code in that file.

src/Template/element/helloworld.php

<p>Hello World</p>

Create a folder Elems at src/Template and under that directory create a View file called index.php. Copy the following code in that file.

src/Template/Elems/index.php

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 CakeHttpMiddlewareCsrfProtectionMiddleware;
use CakeRoutingRouteDashedRoute;
use CakeRoutingRouteBuilder;
$routes->setRouteClass(DashedRoute::class);
$routes->scope(''/'', function (RouteBuilder $builder) {
   $builder->registerMiddleware(''csrf'', new CsrfProtectionMiddleware([
      ''httpOnly'' => true,
   ]));
   $builder->applyMiddleware(''csrf'');
   $builder->connect(''/element-example'',[''controller''=>''Elems'',''action''=>''index'']);
   $builder->fallbacks();
});

Create an ElemsController.php file at src/Controller/ElemsController.php. Copy the following code in the controller file.

src/Controller/ElemsController.php

<?php
   namespace AppController;
   use AppControllerAppController;
   class ElemsController extends AppController{
      public function index(){
      }
   }
?>

Execute the above example by visiting the following URL http://localhost/cakephp4/element-example

Output

Upon execution, the above URL will give you the following output.