Integrar bootstrap de twitter con CakePHP

Posted on Sep 18, 2012 · 362 words · 2 minute read

Bootstrap de twitter es un poderoso framework para diseñar front-end es por eso que hoy en día muchos desarrolladores web lo utilizan, en este sencillo tutorial aprenderás a integrar bootstrap con CakePHP.

Lo primero que tenemos que hacer es descargar la ultima versión del framework (cakePHP) aquí he instalarlo (si no tienes idea de como hacerlo hecha un vistazo a este tutorial Configurar servidor web en ubuntu 10.04 e instalar CakePHP)
Después tambien tenemos que descargar la ultima versión de twitter bootstrap aquí

Al descomprimir la carpeta de bootstrap nos encontraremos con 3 directorios en su interior:

/*  
bootstrap  
├── css  
│ ├── bootstrap-responsive.css  
│ ├── bootstrap-responsive.min.css  
│ ├── bootstrap.css  
│ └── bootstrap.min.css  
├── img  
│ ├── glyphicons-halflings-white.png  
│ └── glyphicons-halflings.png  
└── js  
├── bootstrap.js  
└── bootstrap.min.js  
*/

Si ya tienes algo de experiencia con cakephp sabrás que en el framework existe la carpeta webroot, que es exactamente a donde tenemos que copiar estos archivos, la estructura de directorios y archivos dentro webroot debe de quedar algo así:

/*  
webroot/  
├── css  
│ ├── bootstrap-responsive.css  
│ ├── bootstrap-responsive.min.css  
│ ├── bootstrap.css  
│ ├── bootstrap.min.css  
│ └── cake.generic.css  
├── favicon.ico  
├── files  
│ └── empty  
├── img  
│ ├── cake.icon.png  
│ ├── cake.power.gif  
│ ├── glyphicons-halflings-white.png  
│ ├── glyphicons-halflings.png  
│ ├── test-error-icon.png  
│ ├── test-fail-icon.png  
│ ├── test-pass-icon.png  
│ └── test-skip-icon.png  
├── index.php  
├── js  
│ ├── bootstrap.js  
│ ├── bootstrap.min.js  
│ └── empty  
└── test.php  
*/

Nota como ahora los archivos de bootstrap están en sus respectivos directorios (css, img y js), ahora estamos listos para mandar llamar los archivos en nuestro default.ctp

Abrimos el archivo default.ctp para modificarlo (se encuentra en app/View/Layout/default.ctp) y buscamos la siguiente porción de código:

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

echo $this->Html->css('cake.generic');

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

y las modificamos por estas (solo agregamos las llamadas al css y el js de bootstrap):

<?php  
echo $this->Html->meta('icon');  
echo $this->Html->css('bootstrap');  
echo $this->html->script('bootstrap');  
echo $this->fetch('meta');  
echo $this->fetch('css');  
echo $this->fetch('script');  
?>

Y eso es todo!, podrás comenzar a desarrollar front-end con bootstrap en CakePHP :), yo he copiado el código fuente del ejemplo que nos pone el bootstrap en su sitio en mi layout.ctp para ver que todo funciona bien, el resultado fue:

Integrar bootstrap de twitter con CakePHP

Tags