cakephp repeat view Archives

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.

Many times, while making web pages, we want to repeat certain part of pages in other pages. CakePHP has such facility by which one can extend view in another view and for this, we need not repeat the code again. The extend() method is used to extend views in View file. This method takes one argument, i.e., the name of the view file with path. Don’t use extension .ctp while providing the name of the View file.

Example

Make changes in the config/routes.php file as shown in the following program.

config/routes.php

<?php use CakeCorePlugin; 
use CakeRoutingRouteBuilder; 
use CakeRoutingRouter; 
Router::defaultRouteClass('DashedRoute'); 
Router::scope('/', function (RouteBuilder $routes) { $routes->connect('extend',['controller'=>'Extends','action'=>'index']); $routes->fallbacks('DashedRoute'); }); 
Plugin::routes();

Create a ExtendsController.php file at src/Controller/ExtendsController.php. Copy the following code in the controller file.

src/Controller/ExtendsController.php

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

Create a directory Extends at src/Template and under that folder create a View file called header.ctp. Copy the following code in that file.

src/Template/Extends/header.ctp

Common Header

<?= $this->fetch('content') ?>

Create another View under Extends directory called index.ctp. Copy the following code in that file. Here we are extending the above view header.ctp.

src/Template/Extends/index.ctp

<?php $this->extend('header'); ?>

This is an example of extending view.

Execute the above example by visiting the following URL.

http://localhost:85/CakePHP/extend

Output

Upon execution, you will receive the following output.

Tag: cakephp repeat view

How to View Elements in CakePHP

Example

Output

How to Extend Views in CakePHP

Example

Common Header