CakePHP - View Elements

---

---

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 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 Cake\Http\Middleware\CsrfProtectionMiddleware;
use Cake\Routing\Route\DashedRoute;
use Cake\Routing\RouteBuilder;
$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 App\Controller;
   use App\Controller\AppController;
   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.