Uso de Themes en CakePHP 3

EL uso de themes en Cakephp 2.x era muy sencillo, bastaba con cambiar el valor de la propiedad $this->theme en el controlador para asignar la plantilla que nos interese. Con la primera versión de CakePHP 3.x el uso del theming ha cambiado un poco, por ello intentaremos en este artículo explicarte qué cosas han cambiado.

Para poder seguir este tutorial deberás tener experiencia en la instalación de CakePHP 3.x y en el uso de la herramienta bake para la generación del modelo, controlador y vistas.

Paso 1

-- Table structure for table `posts`
--

CREATE TABLE IF NOT EXISTS `posts` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(50),
`body` text,
`created` datetime,
`modified` datetime,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

--
-- Dumping data for table `posts`
--

INSERT INTO `posts` (`id`, `title`, `body`, `created`, `modified`) VALUES
(1, 'El título', 'Este el contenido del título.', '2017-02-28 14:15:57', '2017-07-19 11:02:12'),
(2, 'Segundo título', 'Contenido del segundo título', '2017-02-28 14:15:57', '2017-07-19 11:02:19'),
(3, 'Tercer título', 'Contenido del tercer título', '2017-02-28 14:15:57', '2017-07-19 11:02:24'),
(5, 'Último título', 'Contenido del último título', '2017-07-19 04:41:18', '2017-07-19 04:41:18');
        

Paso 2

Genera con bake el modelo, el controlador y las vistas de la tabla posts. En este momento, si visitas http://www.tupaginaweb.com/posts deberías de poder ver un listado de las entradas que volcamos en la base de datos.

Paso 3

Los temas de CakePHP 3 se tratan como si fuera plugins, así que prepara un complemento llamado 'Twitter' usando el siguiente comando en la CLI.

cake bake plugin Twitter
    

Paso 4

Estamos creado un tema basado en bootstrap. Descarga la distribución bootstrap y copia los directorios css, fonts y js en plugins/Twitter/webroot.

Paso 5

Como funciona los themes en CakePHP 3: Los ficheros de tu theme residirán en plugins/Twitter/src/Template, la estructura de este directorio será exactamente la misma que la del directorio src/Template/ de la aplicación principal, pero el archivo layout del nuevo tema que se cargue será el de plugins/Twitter/src/Template/Layout. Crea un archivo llamado default.ctp y añade el siguiente contenido.

<?php
$cakeDescription = 'CakePHP: the rapid development php framework';
?>


            <?= $this->Html->charset(); ?>
    
    
    
            <?php
                echo $this--->Html->meta('icon');

        echo $this->Html->css('bootstrap.min.css');
        echo $this->Html->css('starter-template.css');

        echo $this->fetch('meta');
        echo $this->fetch('css');
        echo $this->fetch('script');
    ?>
            
            
            


            




<?= $this->Html->link($cakeDescription, 'http://cakephp.org'); ?>


    <?= $this->Flash->render(); ?>

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

Paso 6

Como en el paso anterior, crea un fichero llamado index.ctp en plugins/Twitter/src/Template/Posts y copia el siguiente contenido:

<?= __('Posts'); ?>




<?php foreach ($posts as $post): ?>



<?php endforeach; ?>





<?= $this->Paginator->sort('id'); ?>


<<?= $this->Paginator->sort('title'); ?>


<?= $this->Paginator->sort('body'); ?>


<?= $this->Paginator->sort('created'); ?>


<?= __('Actions'); ?>



<<?= h($post->id); ?> 


<?= h($post->title); ?> 


<?= h($post->body); ?> 


<?= h($post->created); ?> 



                <?= $this->Html->link(__('View'), ['action' => 'view', $post->id], ['class' => 'btn btn-sm btn-default']); ?>
    <?= $this->Html->link(__('Edit'), ['action' => 'edit', $post->id], ['class' => 'btn btn-sm btn-info']); ?>
    <?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $post->id], ['confirm' => __('Are you sure you want to delete # %s?', $post->id), 'class' => 'btn btn-sm btn-danger']); ?>






    <?= $this->Paginator->counter(); ?>


        <?php
            echo $this->Paginator->prev('< ' . __('previous'));
            echo $this->Paginator->numbers();
            echo $this->Paginator->next(__('next') . ' >');
        ?>







<?= __('Actions'); ?>
    <?= $this->Html->link(__('New Post'), ['action' => 'add'], ['class' => 'btn btn-default']); ?>

Paso 7

Edita el fichero AppController.php de tu aplicación principal y añade la siguiente línea para activar tu recién creado theme. Antes de la versión de CakePHP 3.1

public $theme = 'Twitter';

Versiones Posteriores a CakePHP 3.1

public function beforeRender(\Cake\Event\Event $event)
    {
        $this->viewBuilder()->theme('Twitter');
    }

Paso 8

Recarga tu página en el navegador y disfruta de tu nuevo theme.

Volver al índice del blog