Androcles
Premio local del CUSL
El pasado lunes tuvo lugar la fase local del Concurso Universitario de Software Libre. El netbook me dio problemas al conectarlo al proyector, por lo que tuvieron que dejarme un portátil y la presentación no salió tan fluida como me habría gustado. No obstante, el proyecto gustó, y recibió el premio :-)
Aún quedan bastante cosas por hacer, pero el proyecto ya va tomando forma. A continuación muestro algunas capturas de pantalla.
Catálogo de animales en adopción:
Ficha de un animal:
Página de adición de un animal:
Página de actualización de datos:
Primera vista con el motor de plantillas Blade
Laravel incluye un potente motor de plantillas llamado Blade. Un fichero de Blade es similar a uno de HTML, pero puede incluir algunas órdenes especiales para mostrar datos de PHP, bucles, condicionales, etc.
El nombre de los ficheros Blade termina en .blade.php, y se colocan en el directorio app/views. Una interesante característica de Blade es la posibilidad de generar una disposición para todas las páginas de la aplicación web. Esta disposición podría incluir un menú, pie de página y demás elementos comunes.
El fichero app/views/layout.blade.php tendrá la estructura de una página web completa, pero incluirá la directiva
@yield('content')para indicar que se cree una sección en ese punto, pero sin definir su contenido.
Las demás páginas tendrán un aspecto similar a éste:
@extends('layout') @section('content') <h1>Soy una página</h1> He sido creada con Blade. @stopLa línea @extends('layout') indica qué disposición usaremos para mostrar nuestro contenido, que inyectamos entre las directivas @section('content') y @stop, insertándose en el punto de la plantilla de disposición donde ponía @yield(‘content’).
Haciendo uso de los bucles y condicionales de Blade la vista app/views/animals/read.blade.php mostrará en una tabla los datos de todos los animales (que habíamos obtenido en el controlador):
@if ($animals->isEmpty()) <p> Currently, there is no animal!</p> @else <table class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th>Species</th> <th>Neutered</th> </tr> </thead> <tbody> @foreach($animals as $animal) <tr> <td>{{ $animal->id }} </td> <td>{{ $animal->name }}</td> <td>{{ $animal->species_id}}</td> <td>{{ $animal->neutered ? 'Yes' : 'No'}}</td> </tr> @endforeach </tbody> </table> @endifTwitter Bootstrap
Idealmente, las etiquetas HTML se deben usar para definir la estructura de la página, mientras que para controlar la presentación se deben usar las hojas de estilo en cascada CSS. Para ayudarme en la presentación voy a hacer uso de Bootstrap, un framework liberado por Twitter en 2011.
Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto proporciona uniformidad y una apariencia moderna para el formateo de los elementos de texto, tablas y formularios. La versión actual de Bootstrap está pensada desde el primer momento para funcionar bien en dispositivos móviles (smartphones y tablets).
Además de los elementos normales de HTML, Bootstrap proporciona una interfaz para elementos tales como botones con características avanzadas (grupos de botones, botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.
Por medio de jQuery también provee elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles.
Un ejemplo de página que hace uso de Bootstrap:
<!--DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <!--[endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>Un buen recurso para aprender Bootstrap, además de la documentación de su web, es este libro. En webs como Start Bootstrap se pueden encontrar más temas y plantillas.
Primer controlador
El patrón MVC se compone de tres partes (modelos, vistas y controladores) que nos permiten separar conceptos. En las dos entradas anteriores he creado los modelos iniciales, y ahora le toca el turno al primer controlador.
Voy a hacer un prototipo de página que me muestre datos de todos los animales que hay en la base de datos. Para ello tendré que definir un controlador (app/controllers/AnimalsController.php) y una vista (app/views/animals/read.blade.php). Cada controlador contendrá varias acciones, agrupando así la lógica referida a ese objeto.
Para que cuando se acceda al URL http://servidor.red/animals se ejecute la acción read() del controlador AnimalsController, inserto esta línea en el fichero app/routes.php:
Route::get('/animals', 'AnimalsController@read');
El fichero AnimalsController.php tendrá inicialmente este contenido (posteriormente le añadiré más acciones):
class AnimalsController extends BaseController { public function read() { $animals = Animal::all(); return View::make('animals.read')->with('animals', $animals); } }La acción read() obtiene todos los registros de la tabla animals, y se los pasa a la vista animals/read.blade.php, de la que hablaré en una próxima entrada.
