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: