jueves, 30 de enero de 2014

Introducción a CakePHP (II): Mostrar datos en una tabla

Suponemos que tenemos CakePHP instalado con una base de datos en la que hemos dado de entrada unos registros de prueba con la tabla articulos como indica aquí.

Bien, veamos el contenido de nuestra tabla articulos:

http://misitio/cake20/articulos

Error: ArticulosController could not be found.

Claro, no hemos definido el controlador para nuestro modelo Articulo. De hecho ni siquiera hemos definido el modelo!  Aunque este paso lo ha hecho CakePHP por nosotros heredando de la clase AppController. ¿Una buena praxis? En absoluto.

Definiendo el controlador

En el capítulo anterior dijimos que los controladores se crean en la carpeta app/Controller de CakePHP. Así que crearemos el controlador con la acción que queremos darle: ver_tabla.

En app/Controller creamos el fichero ArticulosController.php, y le damos el siguiente contenido:

<?php
class ArticulosController extends AppController {
public function ver_tabla() {
$this->set('articulos', $this->Articulo->find('all'));
}
?>

Probemos:
http://misitio/cake20/articulos

Error: The action index is not defined in controller ArticulosController

Increíble. Parece que el modelo que aún no hemos definido y que lo ha hecho CakePHP por nosotros, está esperando la acción index. Para que no desespere cambiamos el nombre a nuestra acción.

<?php
class ArticulosController extends AppController {
public function index() {
$this->set('articulos', $this->Articulo->find('all'));
}
}
?>

¿Qué hace el método set?
Dijimos que para mostrar los datos CakePHP usa algo llamado vistas. Set pasa a la vista una variable (primer parámetro) y su valor (segundo parámetro). 

En este caso le pasa el resultado del método find('all') de nuestro modelo Articulo, que lo que hace es generar una tabla con el contenido de todos los registros de la tabla articulos. ¿Y dónde le hemos dicho que coja esa tabla y no otra? En ningún sitio. Es por eso que es tan importante atenerse a la convención en la nomenclatura de las cosas.  :-)

Veamos pues que sucede:
http://misitio/cake20/articulos

Error: The view for ArticulosController::index() was not found.


Maldición... olvidamos crear la vista. Además si os fijáis en el mensaje de error, lo que nos pide CakePHP es una vista para la acción index.

Dijimos que las vistas se colocaban en la carpeta /app/View al que nosotros añadiremos otro nivel de carpetas para tener todas las vistas de cada controlador separadas.  Eso significa que crearemos una vista llamada index.ctp en la carpeta /app/View/Articulos.

Comentamos que el método set del controlador pasaba el contenido de una variable a la vista, ¿no?. Pues bien como contenido de la vista pongamos lo siguiente:

<pre>
     <?php print_r($articulos); ?>
</pre>

Podemos ver cómo sobre la variable artículo habíamos recibido un array con la estructura y contenido de la tabla articulos de la base de datos:

Array
(
    [0] => Array
        (
            [Articulo] => Array
                (
                    [id] => 1
                    [title] => El título
                    [body] => Esto es el cuerpo del artículo.
                    [created] => 2014-01-27 23:36:46
                    [modified] => 
                )

        )

    [1] => Array
        (
            [Articulo] => Array
                (
                    [id] => 2
                    [title] => Un título otra vez
                    [body] => Y sigue el cuerpo del artículo.
                    [created] => 2014-01-27 23:36:46
                    [modified] => 
                )

        )

    [2] => Array
        (
            [Articulo] => Array
                (
                    [id] => 3
                    [title] => El título vuelve
                    [body] => Esto es realmente excitante! No.
                    [created] => 2014-01-27 23:36:46
                    [modified] => 
                )

        )

)

Para acabar... si en la vista recibimos la tabla... nada nos impide cambiar el contenido de la vista por esto:

<!-- File: /app/View/Articulos/index.ctp -->

<h1>Artículos del Blog</h1>

<table>
    <tr>
        <th>Identificador</th>
        <th>Título</th>
        <th>Creado</th>
    </tr>

<?php foreach ($articulos as $articulo): ?>
    <tr>
        <td><?php echo $articulo['Articulo']['id']; ?></td>
        <td><?php echo $articulo['Articulo']['title']; ?></td>
        <td><?php echo $articulo['Articulo']['created']; ?></td>
    </tr>
<?php endforeach; ?>

</table> 

Ahora sí...
http://misitio/cake20/articulos


Artículos del Blog

IdentificadorTítuloCreado
1El título2014-01-27 23:36:46
2Un título otra vez2014-01-27 23:36:46
3El título vuelve2014-01-27 23:36:46

Lo flipasssssssssss....

martes, 28 de enero de 2014

Introducción a CakePHP (I)

CakePHP es un framework que pretende facilitarnos la vida programando en php. Por poner un ejemplo, se ha terminado el hacer consultas a la base de datos...
Insisto en este artículo, que el propósito de este blog no es más que plasmar mis propias anotaciones sobre los sistemas que ensayo, aunque siendo conocedor que no voy a ser el único que se aproveche de ello, me gusta darle apariencia de tutorial y dirigirme a un posible público como 'profesor' simplemente como diversión y porque me gusta escribir.
Aclarado esto, una vez me he metido en harina en este sistema que estoy probando, me he dado cuenta que el tutorial es un absoluto desastre, por lo que lo voy a reescribir a mi manera.

Instalación

1.- Descargamos CakePHP de la página oficial y lo descomprimimos.
2.- Ahora crearemos una carpeta que llamaremos por ejemplo /cake20 en la raíz de nuestro servidor web (ya sea un hosting en la red o un servidor web en nuestro PC como EasyPHP)
3.- Copiamos o subimos al servidor los archivos descomprimidos en la carpeta que hemos creado anteriormente.
4.- Creamos una base de datos.
5.- Configuramos la base de datos en CakePHP.
Para ello nos dirigimos a la carpeta /app/Config y copiamos el fichero database.php.default y lo renombramos simplemente como database.php.
Editamos el fichero y configuramos la base de datos:
public $default = array(
    'datasource' => 'Database/Mysql',
    'persistent' => false,
    'host' => 'localhost',
    'port' => '',
    'login' => 'cakeBlog',
    'password' => 'c4k3-rUl3Z',
    'database' => 'cake_blog_tutorial',
    'schema' => '',
    'prefix' => '',
    'encoding' => ''
);
 6.- Configuramos la encriptación, más que nada porque si no CakePHP se quejará.

Editamos el fichero core.php que se encuentra en la carpeta /app/Config.

Buscamos la línea Configure::write('Security.salt', 'pl345e-P45s_7h3*S@l7!'); y cambiamos la parte que he marcado en fosforito por la cadena de caracteres que nos de la gana.

Así mismo buscamos Configure::write('Security.cipherSeed', '7485712659625147843639846751'); y cambiamos los números por otra numeració cualquiera.

Y con esto ya hemos acabado.

Como funciona CakePHP

Pues funciona sólo. De hecho, en el manual se habla varias veces de la magia de CakePHP y en ocasiones parece que sea así.
De hecho para saber lo que tiene que hacer CakePHP usa una serie de convenciones en la nomenclatura y la estructura de carpetas y lo veremos con un ejemplo: una lista de artículos (o lo que viene a ser un blog)

Así que lo primero que haremos será rellenar la base de datos con tres artículos para probar. Así que usando nuestro gestor de base de datos (p. ej. PhpMyAdmin) ejecutaremos los siguientes comandos:

/* tabla para nuestros artículos */
CREATE TABLE articulos (
    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(50),
    body TEXT,
    created DATETIME DEFAULT NULL,
    modified DATETIME DEFAULT NULL
);

/* algunos valores de test */
INSERT INTO articulos (title,body,created)
    VALUES ('El título', 'Esto es el cuerpo del artículo.', NOW());
INSERT INTO articulos (title,body,created)
    VALUES ('Un título otra vez', 'Y sigue el cuerpo del artículo.', NOW());
INSERT INTO articulos (title,body,created)
    VALUES ('El título vuelve', 'Esto es realmente excitante! No?', NOW());

Pues bien, aquí viene la primera convención. Fijaos que hemos llamado a la tabla articulos en minúscula. Es más si hubiera sido nombre compuesto la hubiéramos llamado en minúscula y con un underscore ( _ ) entre palabras.

Esta tabla podríamos considerar que es una entidad, un objeto o como llama CakePHP, un modelo.

Los modelos se nombran en mayúscula y en singular y se guardan en la carpeta /app/model. En nuestro caso tendríamos un fichero llamado Articulo.php en esa carpeta. En ese archivo tendremos la declaración del modelo y sus validaciones.

Sólo por usar esa nomenclatura, CakePHP supondrá que en la carpeta /app/Controller, tendremos un fichero llamado ArticulosController.php. Como podemos imaginar, este tipo de objeto se llamará genéricamente controlador y gestionará la lectura y escritura de los datos.

Finalmente necesitaremos un formato de salida en pantalla, un template para entendernos. Sin embargo, no necesitaremos el mismo si mostramos una tabla para seleccionar un registro o el registro en sí, de lo que deduciremos que podremos tener varios. Estos archivos, que llamaremos vistas, llevan extensión '*.ctp' y se alojan en la carpeta /app/View/Nombre_controlador. En nuestro caso /app/View/Articulos/  (Artículos en plural). Los archivos con extensión '*.ctp' pueden tener cualquier nombre.

Con estas 4 cosas y unas pocas líneas de código, podemos desarrollar un mantenimiento CRUD completo. Pero esto, ya lo iremos viendo...

La importancia de las convenciones

Como ya se ha apuntado si seguimos una rígida normativa, CakePHP hará muchas cosas por nosotros.
La normativa para los modelos es que se escriben en singular y en UpperCamelCase si son compuestas.
La normativa para las tablas de la base de datos es que se ecriben en plural y con underscores ( _ ) en lugar de espacios si son compuestas.

Esto significa que si tenemos un modelo llamado Articulo, CakePHP manejará automáticamente la tabla articulos, y si tenemos un modelo llamado ArticuloLargoCakePHP gestionará automáticamente la tabla articulo_largos. (Sí, ya se que en la lengua de Espronceda queda un poco raro, pero hay que hacer un esfuerzo)

Pero aún hay más! Si nuestra tabla tiene el campo name o title las usará como etiquetas en ciertas ocasiones (manda title sobre name) y si tenemos creados los campos created o modified se estamparán las fechas automáticamente! Y es más! (aunque yo no lo he conseguido) pero en principio si el campo id es de tipo int, se rumorea que CakePHP lo gestiona también y si es de tipo char(36) gestiona un identificador UUID)

Y eso es todo por ahora...  hasta la próxima.

lunes, 20 de enero de 2014

CraftyJS - Viewport (I) o cómo posicionar la cámara.

Aunque en principio parezca más propio de los juegos en 3D, el viewport no es más que la cámara que filma la acción. Para ver su funcionamiento acudiremos a un ejemplo que se consta de:
  1. Un helicóptero como protagonista  (Éste)
  2. Una ventana de juego de 480 x 320 píxeles.
  3. Una foto que actuará de fondo de 4608 x 3072 píxeles. (O sea, ésta)
Como os habréis dado cuenta, la foto es mucho más grande que la ventana. Esto lo he ideado así, para que se vea el desplazamiento real del helicóptero. Sobre un fondo monocromático no apreciaríamos visualmente el movimiento.

Si ahora montamos el fondo y el helicóptero sobre la imagen, veremos algo así. Como veis, la foto sale cortada porque no cabe.


Como es algo que a estas alturas ya sabemos hacer, no publico el código aquí, aunque lo podéis ver en funcionamiento junto con el código aquí.

Posicionar la cámara sobre la entidad.

Si ahora movemos el helicóptero a la posición 1000, 1000:

avion = Crafty.e('2D, Canvas, Fourway, avion')
.attr({
   x: 1000,
   y: 1000,
   w: 244,
   h: 982
   })
.fourway(4);

Es fácil imaginar que éste saldrá de pantalla y no lo veremos. Ésto lo podemos subsanar moviendo la cámara sobre el helicóptero, y es más, lo podemos hacer de forma inmediata o aplicando un lapso de tiempo.

Para ello utilizaremos la siguiente instrucción:

Crafty.viewport.centerOn(avion, 10000);

Si os habéis fijado antes al crear la entidad, la he asignado a una variable (avion) que la identifica entre otras instancias. Cuando centro la cámara, lo hago usando la variable.

El siguiente parámetro es el número de milisegundos que tardará la cámara en posicionarse sobre el objetivo (haciendo una especie de travelling). Evidentemente si ponemos un cero, la cosa será inmediata.

Podéis ver un ejemplito de ésto junto al código aquí.  Como la imagen es muy grande se puede perder parte del efecto, así que cuando haya cargado todo, pulsad [F5] para forzar la recarga de la página con la imagen ya en caché.


NOTA: En CraftyJs 6.0.2. esto deja de funcionar. Para subsanarlo debéis buscar la línea:
ctx.setTransform(view._scale, 0, 0, view._scale, view._x*view._scale, view._y*view._scale);
y substituirla por:
ctx.setTransform(view._scale, 0, 0, view._scale, Math.floor(view._x*view._scale), Math.floor(view._y*view._scale));


Follow the lider, lider, lider...

El siguiente paso es de cajón, que la cámara siga al helicóptero durante su movimiento. Como mantenemos quieto el fondo, el resultado será un efecto de scroll.

Para conseguir este efecto usaremos la siguiente instrucción:

Crafty.viewport.follow(Objeto, desplazamiento_x, desplazamiento_y)

El primer parámetro es como en el comando centerOn el nombre de la variable en la que se ha instanciado el objeto que queremos seguir.

Los siguientes parámetros indican el desplazamiento del objeto respecto a la cámara (que siempre estará en el centro).

Por ejemplo, mientras Crafty.viewport.follow(avion, 0, 0) dejaría la cámara sobre el helicóptero ( y en consecuencia éste quedaría centrado como en la imagen de arriba del todo de este artículo),  una instrucción del tipo  Crafty.viewport.follow(avion, 100, 100)  dejaría la imagen así:



Crafty.viewport.follow(avion, -100, -100) así:


Recordad que podéis trastear con todo esto Aquí.



viernes, 3 de enero de 2014

CraftyJS - Sonido

Para finalizar nuestro juego sólo nos queda ponerle sonido, cosa muy sencillita y que hará que este capítulo sea muuuy cortito.

Crafty.audio

Con esta clase podremos reproducir archivos de tipo mp3, ogg y WAV.   Es más, podemos incluso cargar los tres formatos simultáneamente para evitar problemas de compatibilidad. Es decir, yo podría tener el sonido de una moneda repicando y cargarlo así:

Crafty.audio.add("coin", [
"sounds/coin.mp3",
"sounds/coin.ogg",
"sounds/coin.wav"
]);

En nuestro ejemplo en particular, tendremos un par de archivos en de sonido que llamaremos desde la escena principal de carga:

Crafty.scene('Loading', function(){
 ...
  Crafty.load(function(){
  ...
Crafty.audio.add({
coin: ['assets/coin.wav'],
hymn: ['assets/hymn.mp3']
});

  Crafty.scene('Game');
  })
});

Ciertamente podríamos haber sido más finos y preguntar antes de cargar si nuestro sistema soportaba el formato con Crafty.audio.supports("mp3") que nos devolvería verdadero si el navegador es capaz de reproducir el tipo de archivo indicado o falso en caso contrario.

Cuando queramos escuchar el archivo de sonido pulsamos el play:

Crafty.audio.play('hymn');

Y cuando queramos detener la reproducción el stop:

Crafty.audio.play('stop');

Si no vamos a usar más el sonido y queremos detener la reproducción liberando además memoria en el navegador podemos usar:  Crafty.audio.remove("hymn").

Y con esto ya hemos terminado esta parte y de hecho el tutorial de introducción a CraftyJS.

Sólo nos quedaría ver cómo queda nuestro juego ya con sonido pulsando aquí, descargar los fuentes aquí o aquí y despedirnos hasta otra.

Que seáis mu felices.