Archivo de la etiqueta: cakePHP

Integrar bootstrap de twitter con CakePHP


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.

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:

CakePHP muestra caracteres extraños

Con este snippet de código puedes solucionar el problema de por que CakePHP muestra caracteres extraños, por lo general el problema se presenta cuando nuestra base de datos tiene almacenados caracteres latinos (como ñ, ó, á, etc). La solución es bastante simple, tan solo tenemos que ubicar nuestro archivo de conexión database.php que se encuentra en webapp/app/config/database.php abrirlo y agregar una línea de código, quedando su contenido de la siguiente manera.

<?php
class DATABASE_CONFIG {

	var $default = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'host',
		'login' => 'user_name',
		'password' => 'user_password',
		'database' => 'database',
		'prefix' => '',
		'encoding' => 'utf8'
	);

}
?>

salu2

Utilizar ReCaptcha en CakePHP

Seguramente muchos de ustedes ya sabrán de que va todo esto pero para los que no, ReCaptcha es un servicio que nos permite implementar captchas (software para detección de bots) en nuestras aplicaciones web y que fue adquirido por google hace algún tiempo ya.

Entonces en este post aprendermos a utilizar captcha en cakephp, los captchas son muy importantes a la hora de manejar formularios, así nos aseguramos que los datos que entran son escritos realmente por un ser humano y no por un bot (aunque no es 100% aun).

Ok manos a la obra, lo primero que tienen que hacer es dar de alta su cuenta para obtener una key en el siguiente sitio ReCaptcha

Atención, estoy obviando la parte de que ustedes ya están familiarizados con el framework CakePHP y por lo tanto saben lo que es un controlador, una vista, un componente, un helper, el AppController, etc :), aun así el espacio de comentarios hasta abajo estará destinado a resolver las dudas que puedan surgir.

Primero tienen que descargar el componente y el helper del reCaptcha, yo he subido los archivos a megaupload (son los que me funcionan perfectamente jeje) pero si uds quieren puedes buscarlos en google.

Descompriman el archivo en su proyecto de cakePHP, al final les debería de quedar el archivo recaptcha.php en controllers/components/ y el helper recaptcha.php en la ruta views/helpers/ dentro de la carpeta de su aplicación.

Para este ejemplo yo tengo un controlador llamado links (links_controller.php es mi archivo), dentro del mismo hago la declaración de los componentes y los helpers que utilizare con el siguiente código:

<?php
class LinksController extends AppController {

  /*****************
  ** Variables Generales - Esto no es importante para el ejemplo
  *****************/
  public $name = 'Links';//nombre controlador
  public $uses = array('Link','User');
  public $layout = 'admin';//disposición de diseño por defecto

        //Esta es la parte importante
        var $components = array('Recaptcha');
        var $helpers = array('Recaptcha');

Con esas 2 instrucciones le indicamos a CakePHP que utilizaremos el componente y el helper de ReCaptcha (los archivos que previamente descargaron y colocaron en sus respectivos lugares) después también escribí un método llamado go (si, este es el código de una aplicación que hice llamada Easylink Share), el código del método es el siguiente:

public function go($key = null)
  {
    $this->layout = 'redirect';
    if(empty($key) && empty($this->data))
    {
      /*$this->msg_result = "link_noexist";
      $this->Session->setFlash(__($this->msg_result, true), 'default');*/
      $this->redirect(array('controller' => 'pages', 'action' => 'view', '404-no-existe-el-link'));
    }

    if($register = $this->Link->find('first',array('conditions' => array('Link.active' => '1', 'Link.key' => $key))) or 
          $register = $this->Link->find('first',array('conditions' => array('Link.active' => '1', 'Link.key' => $this->data['Link']['key']))))
    {
       //Si los datos que trae el form no son nulos
       if(!empty($this->params['form']))
       {
          //Esta es la parte mas importante, aqui es donde se valida que el <strong>código</strong> que trae el <strong>formulario</strong> es el correcto
          if(!$this->Recaptcha->valid($this->params['form']))
          {
              $this->redirect(array('action' => 'go',$register['Link']['key']));
          }
          else
          {
              $this->redirect($register['Link']['url']);
          }
       }
       else
       {
          $this->set('register', $register);
       }
    }
    else
    {
      $this->redirect(array('controller' => 'pages', 'action' => 'view', '404-no-existe-el-link'));
    }
  }

Para hacer mas entendible el código anterior, esta es la parte mas importante de la validación:

if(!$this->Recaptcha->valid($this->params['form']))
          {
              //Si el captcha no es correcto hacer esto
          }
          else
          {
              //Si el captcha si esta correcto hacemos esto otro
          }

El código de tu vista (go.ctp) que incluye el formulario se debe de ver algo parecido a lo siguiente:

<form id="f_register" action="<?php echo $html->url('go'); ?>" method="post" style="text-align:center;">

<div id="catpcha" style="width:315px;margin:0 auto;"><?php $recaptcha->display_form('echo'); ?></div>
<?php echo $form->text('Link.key',array('type' => 'hidden', 'value' => $register['Link']['key'],'class' => 'input_text'));?>

<input style="margin-left:5px;height:25px;" type="submit" name="bot_login" value="<?php __('send');?>" class="input_button" />
</form>

Como ven donde se manda llamar el formulario es en la parte de:

<?php $recaptcha->display_form('echo'); ?>

Tan solo agregar un botón de enviar y entonces lo que coloquemos será enviado y validado por nuestro controlador (el que mostré anteriormente :)).

Y listo, así de fácil se implementa ReCaptcha en CakePHP