0

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:
Catálogo de animales en adopción

 

Ficha de un animal:

Ficha de un animal

 

Página de adición de un animal:

Pantalla de adición de un animal

 

Página de actualización de datos:
Pantalla de actualización de datos

 

0

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.
@stop

La 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>
@endif
0

Twitter 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 o Bootply se pueden encontrar más temas y plantillas.

0

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.

0

De objetos a BD y viceversa

Laravel incluye una herramienta de mapeo objeto-relacional (ORM) llamado Eloquent, que permite usar el patrón Active Record. El patrón Active Record es una técnica para dar a bases de datos una capa de orientación a objetos. De este modo se puede presentar una tabla como una clase, y una fila como un objeto. El mundo Java tiene otros ORM como Hibernate (una implementación de la Java Persistence API).

Para que Eloquent pueda crear una clase a partir de una tabla, ésta debe tener una columna autoincremental (id) y las columnas created_at y updated_at, que se crean con el método timestamps() en el modelo de Illuminate. Por ejemplo, el modelo de Eloquent correspondiente a la tabla animals se define en el fichero app/models/Animal.php, y es tan sencillo como:

class Animal extends Eloquent
{

}

Con esto ya podemos crear objetos, establecer sus atributos y guardarlos en la base de datos fácilmente:
$a = new Animal;
$a->name = "Toby";
...
$a->save();

Así mismo podemos buscar el registro con un determinado ID:
$a = Animal::find(1)
y editarlo o borrarlo:
$a->delete()
ó
Animal::destroy(1)

Al no necesitar usar sentencias SQL, el código queda mucho más claro y limpio.

0

Modelo de datos inicial

Ésta es la estructura que he pensado inicialmente para la base de datos. De momento sólo están las tablas necesarias para lo más básico (los datos de los animales de la protectora). Posteriormente añadiré más tablas para más funcionalidades. Aún así, es muy probable que estas tablas sufran cambios hasta llegar a la versión 1.0.

esquema
Laravel utiliza PDO, por lo que puede funcionar con diversos sistemas de gestión de bases de datos, incluyendo MySQL, PostgreSQL y SQLite. En mi caso voy a utilizar una base de datos MySQL, que ya he creado. Para configurar Laravel para que la utilice, se edita el fichero app/config/database.php.

Observo que ya está puesto que use MySQL por omisión

'default' => 'mysql',

así que sólo hay que suministrar los datos de conexión

'mysql' => array(
'driver'    => 'mysql',
'host'      => 'localhost',
'database'  => 'androcles',
'username'  => 'quique',
'password'  => 'topsecret',
'charset'   => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix'    => '',
),

Ahora hay que crear la estructura de la base de datos. Laravel incluye una clase, Schema, que permite manipular tablas en diversos RDBMS. También incluye Migrations, unos scripts en PHP que permiten construir o modificar la base de datos guardando un registro de los cambios.
Quiero definir una tabla para almacenar los datos de los animales de la protectora. Para ello ejecuto

php artisan migrate:make create_animals --create=animals

que crea el fichero app/database/migrations/2014_03_13_135630_create_animals.php. Este fichero contiene dos métodos: up() y down(). En up() se indica lo que queremos hacer (por ejemplo crear una tabla con ciertas columnas) y en down() cómo deshacerlo. Por ejemplo:

public function up()
{
    Schema::create('animals', function(Blueprint $table)
    {
        $table->increments('id');
        $table->string('name');
        $table->integer('species_id')->unsigned();
        $table->foreign('species_id')->references('id')->on('species');
        $table->integer('sex_id');
        $table->string('breed');
        $table->date('dateofbirth');
        $table->date('datebroughtin');
        $table->date('dateofexit');
        $table->text('comments');
        $table->boolean('neutered');
        $table->integer('color_id')->unsigned();
        $table->foreign('color_id')->references('id')->on('colors');
        $table->integer('coat_id')->unsigned();
        $table->foreign('coat_id')->references('id')->on('coats');
        $table->integer('status_id')->unsigned();
        $table->foreign('status_id')->references('id')->on('status');
        $table->string('youtube');
        $table->string('provenance');
        $table->string('deliverer');
        $table->string('size');
        $table->string('weight');
        $table->string('chipcode');
        $table->text('vaccinations');
        $table->text('diseases');
        $table->text('surgeries');
        $table->text('treatment');
        $table->text('privatecomments');
        $table->timestamps();
    });
}

public function down()
{
    Schema::drop('animals');
}

Una vez creada la plantilla podemos ejecutar

php artisan migrate

que ejecuta los metodos up() de todas las migraciones, si todavía no se habían ejecutado. La orden

php artisan migrate --pretend

nos dice qué es lo que se ejecutará al ejecutar la migración.

php artisan migrate:rollback

deshace la última migración, y

php artisan migrate:reset

deshace todas las migraciones.

2

Instalación de Laravel 4 en GNU/Linux

Para poder empezar a programar (o usar) Androcles, lo primero que hay que hacer es instalar el framework Laravel 4.  He probado las explicaciones que siguen a continuación en Debian 7.4 (Wheezy) y en Ubuntu Server 12.04 (Precise Pangolin). En otras distribuciones debería ser igual o muy parecido.

Obviamente deberemos tener un entorno LAMP funcionando (Linux + Apache + MySQL + PHP). Laravel requiere PHP >= 5.3.7, y además el paquete php5-mcrypt (así como php5-json y php5-curl si no estuvieran ya instalados). Con la orden php -m podemos ver los módulos de PHP habilitados, con php5enmod y php5dismod habilitarlos o inhabilitarlos a voluntad.

También usaremos git como sistema de gestión de versiones, y composer para gestionar dependencias en PHP.

Composer

composer viene a ser un reemplazo actualizado y mejorado de PEAR. Para instalarlo simplemente ejecutamos esta línea:
curl -sS https://getcomposer.org/installer | php

En el directorio en el que nos encontrábamos aparece el fichero composer.phar.  Para facilitarnos la vida lo renombramos y movemos:
# mv composer.phar /usr/local/bin/composer

Cuando queramos (o necesitemos) actualizar composer simplemente tendremos que ejecutar
# composer self-update

Laravel

Hay dos (o tres) maneras de instalar Laravel:

  1. Usando el instalador.
    Descargamos el instalador, que podemos renombrar y mover como hemos hecho con composer:
    wget http://laravel.com/laravel.phar
    chmod a+x laravel.phar
    # mv laravel.phar /usr/local/bin/laravel

    Para crear un nuevo proyecto de Laravel simplemente ejecutamos
    laravel new mi-proyecto
    que creará un directorio con una instalación de Laravel y todas sus dependencias.
  2. Usando composer.
    Para crear un proyecto ejecutamos:
    composer create-project laravel/laravel /ruta/al/proyecto --prefer-dist
  3. Mediante descarga (como un tarball o usando git).

Configuración

En el fichero app/config/app.php de nuestro proyecto podemos cambiar el idioma y el huso horario:
'timezone' => 'Europe/Madrid',
'locale' => 'es',

El servidor web necesita permisos de escritura sobre los directorios que hay en app/storage:
# chown -R quique:www-data app/storage/*
chmod -R g+w app/storage/*

Servidor web

En un entorno de desarrollo, como puede ser mi portátil, puede ser suficiente usar el miniservidor web que incluye PHP 5.4 y posterior:
php artisan serve --port 8080

En un servidor real, probablemente usaremos Apache. Necesitamos habilitar el módulo mod_rewrite. Podemos crear el enlace simbólico en /etc/apache2/mods-enabled con
# a2enmod rewrite
Enabling module rewrite.
To activate the new configuration, you need to run:
service apache2 restart

Normalmente configuraremos un VirtualHost en el que el DocumentRoot sea la carpeta public de nuestro proyecto, y con la opción
AllowOverride All .

Con esto ya se puede ir a http://localhost en el navegador y comprobar que Laravel está instalado correctamente. Para nuestra comodidad también podemos usar en nuestro VirtualHost la opción
ServerName mi-proyecto.dev
y poner en el fichero etc/hosts la línea
127.0.0.1   mi-proyecto.dev

2

Cómo aprender Laravel

A pesar de ser relativamente joven, Laravel cuenta con una cantidad sorprendentemente alta de recursos para aprender.

En vez de esperar a aprender Laravel por completo antes de ponerme a programar, mi idea es escribir Androcles a la vez que aprendo Laravel (learning by doing). En este blog iré comentando mis progresos y dificultades.

Imagen

El inconveniente de este enfoque es que en más de una ocasión tendré que deshacer cosas para volver a hacerlas mejor. Aunque esto pueda parecer una pérdida de tiempo, creo que los resultados merecerán la pena.

Imagen

Recursos gratuitos

Vídeos

Libros y e-books

He empezado por Learning Laravel, que es gratuito y se ajusta bien a mi forma de aprender. Una lástima que esté sin acabar, pero al menos es útil para tener una visión global de cómo desarrollar una aplicación con Laravel. A continuación tal vez lea Code Bright, que parece tener buenas críticas.

0

Presentación del proyecto

Una vez finalizado el primer cuatrimestre, es hora de (re)tomar este proyecto, y hacerlo avanzar antes de que tenga que dedicar todo mi tiempo a hacer las prácticas, preparar los exámenes, etc del segundo cuatrimestre.

¿Qué es?

Este proyecto pretende construir una aplicación web (un gestor de contenidos o CMS) para protectoras de animales. Este programa debería cubrir todas las necesidades de este tipo de asociaciones, y particularmente facilitar la difusión de los animales en adopción y de noticias de interés.  Un ejemplo privativo es Bambú CMS, pero aunque compartan el mismo objetivo, Androcles no va a ser un clon, sino que tendrá personalidad propia desde el principio.

¿Cómo?

Las aplicaciones web se pueden construir en múltiples lenguajes de programación: Java (JSP y Servlets, J2EE), Python (Django, Flask, etc), Perl, etc.

Yo he decidido escribirla en PHP.  Es cierto que no es el mejor lenguaje del mundo (véase Why PHP Sucks o Why do so many developers hate PHP?), pero es fácil de usar e instalar, está disponible en cualquier proveedor de hosting y es muy conocido. Aunque Scala sea un lenguaje muy superior, si programara Androcles con Play o Lift, seguramente no lograría ningún usuario, porque previsiblemente las protectoras tendrían serios problemas en encontrar alojamiento y para instalarla.

Framework

Independientemente del lenguaje elegido, a la hora de escribir una aplicación web es sumamente conveniente usar un framework que facilite la organización del código y provea las funcionalidades más comunes. PHP dispone de una miríada de frameworks, algunos muy grandes (Symfony, Zend) y otros más pequeños (CodeIgniter, FuelPHP, Yii…).

Androcles utilizará Laravel.  Alguno había que elegir, y éste me pareció moderno, bien documentado y con excelentes opiniones.

Tengo conocimientos básicos de PHP, pero no conozco Laravel (ni ningún otro framework). Así que el primer paso será aprender cómo funciona…

0

Presentación del VIII CUSL en la Universidad de Zaragoza

Mañana miércoles 6 de noviembre estaré en Zaragoza para presentar la VIII edición del Concurso Universitario de Software Libre en la Escuela de Ingeniería y Arquitectura (Campus Río Ebro de la Universidad de Zaragoza).

El CUSL es un concurso de desarrollo de software, hardware y documentación técnica libre. Para poder participar hay que estar matriculado en grado, licenciatura o ingeniería, en másters o doctorados, en un ciclo de formación de grado medio o superior o en bachillerato durante el curso 2013/2014. Ésta será la VIII edición a nivel estatal, y la III que se celebra a nivel local en la Universidad de Zaragoza.

Independientemente del dinero y del prestigio que este concurso aporta a los ganadores, es una gran oportunidad para que un trabajo de fin de grado o máster pueda llegar a más gente y tener una mayor repercusión.

cartel_viii_cusl_unizar

Esta presentación ha sido organizada por la OSLUZ, y se engloba en la VI Semana de la Ingeniería y la Arquitectura. Esta semana persigue que l@s estudiantes de secundaria y bachillerato se acerquen a las Ingenierías y la Arquitectura. Este año se integra además el Girls’ Day (también mañana), que tiene como objetivo fomentar la vocación técnica entre el alumnado femenino.

En el acto participaremos:

  • Joaquín Pérez, creador de Araword, que ganó el premio local de la UZ en la VII edición.
  • Fernando Tricas, Director del Departamento de Informática e Ingeniería de Sistemas (DIIS) de la Universidad de Zaragoza
  • Enrique Teruel, Delegado del Rector para el Servicio de Informática y Comunicaciones de la Universidad de Zaragoza (SICUZ)
  • Eduardo Romero, Coordinador técnico del equipo AZLinux del Ayuntamiento de Zaragoza
  • el equipo de Crom Developer, una empresa aragonesa de reciente creación, especializada en el desarrollo de aplicaciones informáticas y pilar fundamental en la realización de los Scratch Day Zaragoza.
  • y un servidor, cuyo proyecto Nela obtuvo los premios especial de la comunidad y de accesibilidad en la fase final de la VI edición del CUSL, así como el premio local de la UZ.

La presentación tendrá lugar a las 12 h en el Salón de Actos del Edificio Ada Byron.