Primeros pasos con Laravel 5 – Creación de una aplicación Web CRUD – App Web Laravel 1

Empezamos con la creación de la aplicación web con Laravel donde realizaremos una aplicación CRUD (Create Read Update Delete) con MySQL para las 8 tablas del proyecto Learning Project, una vez hecho esto iremos incorporando funcionalidades como: autenficación, multiidioma, creación de informes en pdf y excel,…

Para llegar a esta solución final empezaremos creando un proyecto desde cero, en este capítulo aprenderemos a definir la base de datos en Laravel, gestionar las rutas básicas, crear los modelos y controladores, utilizar migrations y realizar las funcionalidades básicas CRUD sobre una tabla, además, integraremos Bootstrap para facilitar la presentación de la aplicación.

Los detalles para la instalación y creación de un proyecto con Laravel los puedes consultar en la primera lección de este tutorial en:

Estos son los pasos que seguiremos:

1. CREAMOS UN PROYECTO CON LARAVEL
   • Estructura del proyecto con Laravel
   • Creamos un VirtualHost en Apache para nuestro proyecto
2. EL PROYECTO: cb_currency (tabla de monedas)
3. CREACIÓN DE LOS MODELOS
   • Conociendo Artisan
   • Creamos el modelo para cb_currency
4. DEFINICIÓN DE LA BASE DE DATOS Y MIGRACIÓN DE LOS MODELOS
   • Definición de los valores de nuestra base de datos
   • Creamos la migración para la tabla cb_currency
   • Definimos nuestra tabla en CbCurrencyMigration
   • Creación de una base de datos en MySQL
5. DEFINIMOS EL CONTROLADOR Y LAS VISTAS
   • Index – Listado de monedas
     • Creamos el método index() en el controlador
     • Creamos la vista index.blade.php
   • Show – Mostramos la moneda seleccionada
     • Creamos el método show($IdCurrency) en el controlador
     • Creamos la vista show.blade.php
6. AÑADIMOS BOOTSTRAP AL PROYECTO
7. CREAMOS LA PLANTILLA DE LA APLICACIÓN
   • Añadimos la plantilla a index
   • Añadimos la plantilla a show

Software utilizado

• Laravel 5: framework PHP de código abierto que utilizamos en el proyecto.
• PHP 5: lenguaje de programación del lado del servidor que vamos a ver.
• Apache 2:el proyecto Apache HTTP Server es un esfuerzo por desarrollar y mantener un servidor HTTP de código abierto para sistemas operativos modernos, incluyendo UNIX y Windows.
• Atom: editor de texto con múltiples plugins y soporte para muchos lenguajes como PHP.
• Ubuntu: en mi caso uso Linux en particular Ubuntu para los desarrollos.
• MySQL: base de datos que utilizamos para ver las conexiones.
• Bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• JQuery: biblioteca Javascript ligera que nos permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, agregar AJAX, …

1. CREAMOS UN PROYECTO CON LARAVEL

Como partimos con la instalación de Laravel ya realizada en la primera publicación ( Instalación de Laravel) solo tenemos que ejecutar la instrucción para generar nuestro proyecto y que el sistema trabaje por nosotros:

laravel new CustomerdbLaravelWeb-01

Como puedes ver en la información que se muestra en pantalla sobre los módulos instalados que conforman Laravel, encontramos desde phpunit, el framework Laravel y diferentes módulos de Symfony como : debug, http-kernel, console y finder, entre otros; esto nos indica la línea que sigue Laravel de no reinventar la rueda sino aprovechar los recursos existentes en su beneficio.

Una vez finalizada la instalación aparecerá la clave que se genera para nuestra aplicación en mi caso:

Generating optimized class loader
Application key [base64:HfA4hN+UIHTGtkhA06OqNiAlX/WdgaNgvJq/FcVHGYM=] set successfully.
Application ready! Build something amazing.

Estructura del proyecto con Laravel

Los principales directorios que se crean en Laravel los puedes consultar en la documentación de la estructura en español de Laravel, a continuación, una breve explicación de los más importantes:

• app: contiene los modelos, y el código base de nuestra aplicación, incluirá los directorios Console, Http y Providers
• resources/views: contiene las Vistas.
• app/Http/Controllers: aquí será donde se definirán los controladores.
• app/Http/routes.php: para la definición de las rutas.
• app/config/app.php: contiene configuración general de la aplicación.
• public: carpeta pública desde dónde se inicia el proceso de ejecución de una aplicación Laravel.

En el desarrollo de la aplicación iremos comentando más cosas sobre la estructura según vayamos utilizando diferentes elementos del framework.

Creamos un VirtualHost en Apache para nuestro proyecto

Este proyecto lo realizamos con un servidor Apache configurado ya con PHP 5, si necesitas ayuda para llegar a este punto sigue los pasos de mi guía para la Instalación LAMP (Linux + Apache + MySQL + PHP) en Ubuntu 15.10.

Los detalles de los requisitos que necesita Laravel para funcionar correctamente en Apache ya los detallamos en Configuración de Laravel en Apache, con lo que aquí solo necesitamos configurar el proyecto creando nuestro host virtual en /etc/apache2/sites-available/ con el nombre customerdb-laravel-01.conf.

Para ello editamos el fichero con el editor que prefieras en este caso gedit:

sudo gedit /etc/apache2/sites-available/customerdb-laravel-01.conf

Ahora configuramos el Host Virtual con la información de nuestro proyecto:

<VirtualHost *:80>
ServerName customerdb-laravel-01.codigoxules.org
DocumentRoot "/home/xules/xulpro/LaravelProjects/CustomerdbLaravelWeb-01/public"
<Directory "/home/xules/xulpro/LaravelProjects/CustomerdbLaravelWeb-01/public">
DirectoryIndex index.php
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

Creamos un enlace simbólico en la carpeta sites-enabled de la siguiente forma:

sudo ln -s /etc/apache2/sites-available/customerdb-laravel-01.conf

Añadimos en /etc/hosts el nombre que hemos definido para nuestro proyecto en mi caso customerdb-laravel-01.codigoxules.org:

127.0.0.1     customerdb-laravel-01.codigoxules.org

Comprueba que tu usuario con el que has creado el proyecto está incluido en el grupo www-data, también como ya vimos en la creación detallada de un host virtual en el primer capítulo del tutorial necesitamos habilitar la configuración de las diferentes rutas con: sudo a2enmod rewrite.

Por último, necesitamos dar permisos de escritura a la carpeta storage y reiniciar Apache ejecutando:

sudo chmod -R 777 storage
sudo service apache2 restart

Para usar la configuración en el puerto 80 es necesario cambiar la configuración por defecto de Apache en 000-default.conf, cambiamos el puerto por otro, guardamos y reiniciamos, con esto ya tendremos asegurado el acceso a las rutas que creemos en nuestro proyecto, ahora si escribes en tu navegador: http://customerdb-laravel-01.codigoxules.org/ debería aparecer la siguiente pantalla:

Una vez hecho esto es el momento de abrir el proyecto con el editor que lo vayas a desarrollar, en mi caso he utilizado Atom que es un editor de texto con múltiples plugins y soporte para muchos lenguajes como PHP.

 

2. EL PROYECTO: cb_currency (tabla de monedas)

El proyecto que vamos a desarrollar lo detallamos en su globalidad en la explicación del EL PROYECTO, en esta publicación vamos a desarrollar el modelo de datos, el controlador para la tabla de monedas, que nos servirá de ejemplo para familiarizarnos y aprender Laravel.

Desarrollamos el proyecto con las siguientes tablas, a continuación, se explica su utilidad y algunas características básicas, el resto irá directamente sobre el código SQL, como puedes ver aquí con más detalle, estas son las tablas que utilizaremos ya que tienes el desarrollo completo de la base de datos en el Tutorial MySQL (MariaDB) explicado paso a paso, ahora las tablas:

Learning Project
TABLA	DESCRIPCIÓN	CARACTERÍSTICAS DE DISEÑO
cb_currency	Tabla con las monedas registradas en la aplicación, se podrá relacionar con múltiples tablas.

 

3. CREACIÓN DE LOS MODELOS

Para crear el primer modelo de datos para la tabla cb_currency vamos a usar las herramientas que nos proporciona Laravel para crear el esqueleto y ubicar la clase que se creará en el lugar correspondiente, después completaremos el modelo definiendo los campos que lo forman, veamos como.

Conociendo Artisan

Laravel incluye un interfaz de línea de comandos que se conoce como Artisan (Artisan CLI), este nos proporcionará una serie de comandos de ayuda para el desarrollo de nuestros proyectos, como pueden ser la creación de las clases de los modelos, creación de controladores, creación de rutas,…

Artisan está desarrollado utilizando el poderoso componente de consola de Symfony, para ver el listado de opciones que tenemos simplemente ejecutamos:

php artisan list

Laravel incluye un interfaz de línea de comandos que se conoce como Artisan (Artisan CLI), este nos proporcionará una serie de comandos de ayuda para el desarrollo de nuestros proyectos.Código Xules

Creo que no es momento de explicar todas las opciones que nos presenta, sino que según las vayamos utilizando en el desarrollo ir comentando su utilización y algunas opciones.

Para que te hagas una idea de su sencillez y potencia, esta es el comando que utilizaremos en este apartado para crear los modelos

php  artisan  make:model  NombreDelModelo

¿Qué hace este comando?

Pues varias cosas interesantes:

• Crea la clase del modelo: con el nombre proporcionado crea la clase para nuestro modelo con el nombre proporcionado en el lugar adecuado, este es la carpeta app.
• Incluye el ORM Eloquent: este es el ORM que Laravel utilizada por defecto, un ORM (Object-Relatinal Mapping) es una técnica para mapear los datos de una base de datos relacional y convertirlos en un sistema orientado a objetos, que nos facilite su utilización desde la parte de la aplicación, esto suelen venir acompañados con diferentes utilidades de consulta,… Digo por defecto, porque en caso de necesidad podríamos configurar otro ORM, como por ejemplo Doctrine.
• Extensión de Model: con la extensión de la clase proporcionada por ORM Eloquent incorporamos las funcionalidades necesarias para el desarrollo de nuestro modelo, tal y como veremos.

Eloquent es el ORM que Laravel utilizada por defecto, un ORM (Object-Relatinal Mapping) es una técnica para mapear los datos de una base de datos relacional y convertirlos en un sistema orientado a objeto.Código Xules

Creamos el modelo para cb_currency

php artisan make:model CbCurrency

Abrimos en nuestro editor el esqueleto creado para el modelo en la clase CbCurrency que encontrás en CustomerdbLaravelWeb-01/app/CbCurrency.php, y definimos nuestro modelo empezando por el nombre de la tabla:

protected $table='cb_currency';

Indicamos el nombre de la clave primaria, por defecto, Eloquent asume que existe una clave primaria llamada id, si este no es nuestro caso lo tenemos que indicar en la variable $primaryKey con el nombre correspondiente, para la tabla cb_currency la clave primaria es idcurrency, lo indicaramos así:

protected $primaryKey = 'idcurrency';

Definimos los campos de la tabla directamente en la variable de tipo array $fillable, como ves no hemos definido de que tipo son, y es que no lo necesitamos, ya que para exportar los datos a la base de datos utilizaremos las migraciones (migrations) como veremos a continuación:

protected $fillable =  array('currency', 'description', 'isactive', 'isocode', 'cursymbol', 'precisionstd',  'precisioncost', 'precisionprize');

Este será el resultado final:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class CbCurrency extends Model
{
// Nombre de la tabla de la base de datos que definimos (Database table name).
protected $table='cb_currency';

/**
Por defecto Eloquent  asume que existe una clave primaria llamada id,
si este no es nuesto caso lo tenemos que indicar en la variable $primaryKey
*/
protected $primaryKey = 'idcurrency';

// Denimos los campos de la tabla directamente en la variable de tipo array $fillable
protected $fillable =  array('currency', 'description', 'isactive', 'isocode', 'cursymbol', 'precisionstd',  'precisioncost', 'precisionprize');

/**
En la variable $hidden podemos indicar los campos que no queremos que nos devuelvan
en las consultas, por ejemplo, los campos created_at y updated_at, que el ORM Eloquent
añade por defecto
*/
protected $hidden = ['created_at','updated_at'];
}

Como puedes ver en el código hemos los campos created_at y updated_at, que el ORM Eloquent ade por defecto para indicar la fecha de creación y edición de un fichero, al definirlos en la variable hidden lo que hacemos es no mostrar los datos incluidos en las consultas.

 

4. DEFINICIÓN DE LA BASE DE DATOS Y MIGRACIÓN DEL MODELO

Una vez creado el modelo vamos a definir la conexión y la base de datos que utilizamos para el proyecto utilizando las utilidades que nos proporcionan PHP Artisan y Laravel.

Laravel usa Migrations para crear y mantener la base de datos del proyecto, proporcionándonos además un control de versiones de la base de datos que nos va a permitir:

• Modificar el esquema, creando y actualizando las tablas.
• Rellenar datos en las tablas
• Hacer Rollback o volver a un estado determinado
• Generaremos un archivo por cada tabla de la base de datos.
• La carpeta donde se almacenan en Laravel es en database/migrations

Definición de los valores de nuestra base de datos

Uno de los ficheros que tenemos creado en nuestro proyecto es .env, aquí tenemos las definiciones de nuestra aplicación entre ellos la configuración de la base de datos:

APP_ENV=local
APP_DEBUG=true
APP_KEY=base64:6Fwe3mcmRJ8Lguag4FRpOjGCW9tIVx7a50KeqaolVr0=
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

Ahora vamos a definir los parámetros de la base datos, que se entienden fácilmente:

• DB_CONNECTION=mysql: base de datos que vamos a utilizar.
• DB_HOST=127.0.0.1 host en donde se encuentra la base de datos.
• DB_PORT=3306: el puerto configurado para el acceso.
• DB_DATABASE=lwcustomerdb: nombre de la base de datos que vamos a crear.
• DB_USERNAME=xulescode: usuario para la conexión.
• DB_PASSWORD=xulescode: clave del usuario que hemos definido.

Finalmente nuestra conexión quedaría así:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lwcustomerdb
DB_USERNAME=xulescode
DB_PASSWORD=xulescode

Creamos la migración para la tabla cb_currency

Anteriormente ya os prensenté a Artisan, lo vamos a utilizar ahora para crear la plantilla para la migración inicial de la tabla cb_currency la estructura es sencilla, el comando a utilizar es el siguiente, a continuación, lo explicamos:

php artisan make:migration create_table_cb_currency_migration --create=cb_currency

Si todo ha ido bien nos aparecerá el mensaje: Created Migration: 2016_10_05_153838_create_table_cb_currency_migration, que nos indica que se ha creado correctamente la plantilla, expliquemos ahora el comando utilizado

• php artisan: con este comando ejecutamos Artisan.
• make:migration: comando para crear la migración , más adelante
• create_table_cb_currency_migration: nombre único que le damos a nuestro fichero, Laravel guardará en la base de datos las migrations que vamos ejecuntado, esto nos permitirá con otros comandos hacer rollback y otras acciones.
• –create=cb_currency: nombre de la tabla que se utilizará para crear el nombre de la clase de la migración.

Definimos nuestra tabla en CbCurrencyMigration

Ya tenemos creada nuestra clase para la migración la encontraremos en la carpeta database/migrations en mi caso se ha creado el fichero 2016_10_05_153838_create_table_cb_currency_migration.php, este es el fichero que vamos a editar indicando el nombre de la tabla, las claves primarias y foráneas, y los campos que la conforman.

El esqueleto como veremos a continuación ya nos ayuda definiéndonos la creación de la tabla con Schema::create(‘cb_currency’, …) y la creación de un id genérico con $table->increments(‘id’);, también nos añade por defecto $table->timestamps(); que creará en la base de datos los campos created_at y updated_at que nos guardarán las fechas de creación y actualización de cada registro, este es el contenido inicial que te he explicado:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTableCbCurrencyMigration extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('cb_currency', function (Blueprint $table) {
$table->increments('id');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('cb_currency');
}
}

Los detalles de de la creación de tablas los puedes encontrar en la documentación de Laravel Database Migrations: Tables, donde se explica como se recibe un objeto BluePrint ($table) que es el que usamos para definir la nueva tabla como podemos ver en el código superior.

Encontramos también la equivalencia de todos los tipos de datos para las columnas que podemos utilizar: Database Migrations: Columns , algunos de de los que utilizaremos son:

Command	Description
$table->bigIncrements('id');	Incrementing ID (primary key) using a «UNSIGNED BIG INTEGER» equivalent.
$table->boolean('confirmed');	BOOLEAN equivalent for the database.
$table->date('created_at');	DATE equivalent for the database.
$table->dateTime('created_at');	DATETIME equivalent for the database.
$table->decimal('amount', 5, 2);	DECIMAL equivalent with a precision and scale.
$table->float('amount', 8, 2);	FLOAT equivalent for the database, 8 digits in total and 2 after the decimal point.
$table->increments('id');	Incrementing ID (primary key) using a «UNSIGNED INTEGER» equivalent.
$table->integer('votes');	INTEGER equivalent for the database.
$table->rememberToken();	Adds remember_token as VARCHAR(100) NULL.
$table->smallInteger('votes');	SMALLINT equivalent for the database.
$table->softDeletes();	Adds nullable deleted_at column for soft deletes.
$table->string('email');	VARCHAR equivalent column.
$table->string('name', 100);	VARCHAR equivalent with a length.
$table->text('description');	TEXT equivalent for the database.
$table->time('sunrise');	TIME equivalent for the database.
$table->tinyInteger('numbers');	TINYINT equivalent for the database.

Una vez hecha la introducción definamos nuestra tabla con estos elementos quedará finalmente así:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTableCbCurrencyMigration extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('cb_currency', function (Blueprint $table) {
$table->increments('idcurrency');
$table->string('currency');
$table->string('description');
$table->string('isactive');
$table->string('isocode');
$table->string('cursymbol');
$table->decimal('precisioncost', 10, 2);
$table->decimal('precisionstd', 10, 2);
$table->decimal('precisionprize', 10, 2);
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('cb_currency');
}
}

Una vez finalizado ya podemos ejecutar las migraciones (migrations) con Artisan para que cree la tabla en la base de datos MySQL que hemos definido:

php artisan migrate

Si hemos creado la base de datos tu resultado será algo parecido a esto:

Migration table created successfully.
Migrated: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_100000_create_password_resets_table
Migrated: 2016_07_21_164820_cbcurrencys_migration

Si no hemos creado la base de datos nos dará el siguiente error:

Creación de una base de datos en MySQL

Recordamos los pasos para la creación de una base de datos en MySQL vía línea de comandos:

Accedemos a MySQL con root (administrative) por ejemplo usando este comando:

mysql -u root -p

Creamos la base de datos donde vamos a crear las tablas para desarrollar nuestro tutorial, el nombre que utilizamos es customerdb:

CREATE DATABASE lwcustomerdb;

Si no existe el usuario que vamos a utilizar lo creamos en mi caso xulescode y la contraseña, en este caso la misma:

CREATE USER xulescode@localhost IDENTIFIED BY 'xulescode'

Damos todos los privilegios al usuario xulescode sobre las base de datos customerdb:

GRANT ALL PRIVILEGES ON customerdb.* TO xulescode@localhost;

Si necesitas más información no dudes en visitar mi tutorial sobre MySQL (y Mariadb), donde desarrollamos con ejemplos su instalación y creación de base de datos:

 

5.DEFINIMOS EL CONTROLADOR Y LAS VISTAS

Una vez finalizado nuestro manejo de datos, ahora vamos a proceder a crear nuestras vistas para que desde el navegador podamos mandar la información y un controlador para poder definir nuestras operaciones, además de especificar las rutas de nuestro sistema.

Esta parte prefiero explicarla conjuntamente porque creo que así el más fácil de entender, por eso vamos a ir explicando el controlador con su método y la vista correspondiente.

Empezamos creando el controlador con Artisan CLI:

php artisan make:controller CbCurrencyController

Laravel automáticamente crea un archivo dentro de la ruta app/Http/Controllers con el nombre que especificamos y dentro de él desarrollaremos la funcionalidad para los métodos index, create, store, show, edit, updatey delete.

Estos métodos los vamos a ir definiendo a continuación, poco a poco, añadiendo funcionalidades a nuestra aplicación, por el momento vamos a crear en nuestro archivo de rutas un grupo de rutas asociadas a cada uno de los métodos del controlador que acabamos de crear, esto se hace con una ruta de tipo Resource o recurso, modificando el archivo routes.php, que encontrarás en la versión 5.3 de Laravel en routes/web.php (en la versión 5.2 en app/Http/routes.php), agregando el siguiente código:

Route::resource('monedas', 'CbCurrencyController');

Para comprender fácilmente lo que estamos haciendo vamos a analizar las rutas que creamos con esta instrucción y que hacen referencia a la implementación que desarrollaremos en el controlador CbCurrencyController, para ello utilizamos nuevamente artisan para mostrar las rutas en el terminal php artisan route:list:

Así, podemos ver como con una línea hemos definido las urls y las rutas a los métodos que las controlan, como se entiende fácilmente con la visualización en la imagen.

Este diseño del controlador lo vamos a corresponder con el desarrollo de nuestras vistas, la carpeta de nuestro proyecto donde incluiremos nuestras vistas es resources/views/, aquí vamos a crear un directorio que llamaremos monedas donde incluiremos nuestras vistas, inicialmente vamos a crear index y show quedando la siguiente estructura:

Así, a la par que vayamos definiendo nuestro controlador desarrollaremos la vista correspondiente y veremos como se relacionan.

Index – Listado de monedas

En primer lugar, vamos a crear la página de índice donde cargaremos todas las monedas definidas en la tabla, anteriormente hemos definido la ruta monedas con los siguientes parámetros como puedes ver en la imagen de las rutas:

• Method: GET|HEAD , nos indica el método definido para la llamada
• URI: monedas, definimos la carga de nuestro índice con la url de nuestra web más monedas, así: http://customerdb-laravel-01.codigoxules.org/monedas
• Name: monedas.index , nombre de la ruta, nos referiremos ha ella para añadir el enlace al índice en las diferentes páginas.
• Action: App\Http\Controllers\CbCurrencyController@index indicamos donde implementamos la carga de datos para la vista, esto es en el método index de nuestro controlador CbCurrencyController
• Middleware: web, indicamos el tipo de acceso permitido, lo veremos más adelante al securizar nuestra aplicación.

Como podemos ver en la explicación de la ruta no hemos indicado la vista que se corresponde a cada ruta, esto lo haremos dentro de cada método del controlador, donde decidimos que vista renderiza los datos que este nos devuelve.

Creamos el método index() en el controlador

Veamos, ya tenemos creada nuestra clase controladora en App\Http\Controllers\CbCurrencyController.php» vamos a editar este fichero esqueleto e ir implementando los diferente métodos que necesitemos.

En primer lugar creamos el método index() al que hacemos referencia en la ruta monedas, para obtener los datos de las monedas vamos a utilizar el modelo, la implementación con Eloquent nos proporciona ciertos métodos que nos serán de utilidad, así por ejemplo, para obtener todas las monedas podemos usar:

$monedas = CbCurrency::get(); 	// Devolverá todas las monedas

Como puedes ver estamos utilizando la clase del modelo CbCurrency por lo que tenemos que declararla en la clase para poder usarla tal que así:

use App\CbCurrency;

Finalizamos devolviendo en el método la vista que va a mostrar los datos que le pasamos:

return view('monedas.index')->with('monedas', $monedas);

Con esta indicación tendremos acceso en la vista al objeto $monedas que usaremos para recorres los datos de la tabla y mostrarlos en la vista. Nuestro controlador inicial quedaría así:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use App\CbCurrency;

class CbCurrencyController extends Controller
{
/**
* Muestra una lista de las monedas.
*
* @return Response
*/
public function index()
{
// Devolverá todas las monedas
$monedas = CbCurrency::get();
return view('monedas.index')->with('monedas', $monedas);
}
}

Creamos la vista index.blade.php

Para el desarrollo de las vistas Laravel utiliza Blade, es una herramienta nos va a facilitar lacreación de plantillas, la inscrustación de código, y como no, diferentes estructuras de control en la vista que nos facilitará la manipulación de datos. Esto no excluye la utilización directa de PHP en las vista Blade.

Las estructuras principales que utilizaremos en está publicación serán (puedes encontrar más en la documentación de Laravel https://laravel.com/docs/5.2/blade#control-structures):

• Estructuras If : las construiremos utilizando os siguientes directivas: @if, @elseif, @else y @endif, es sencillo ver como lo utilizaremos, iremos viendo ejemplos según avance el desarrollo de la aplicación.
• Bucles: las principales estructuras de bucles que se proporcionan son: @for, @foreach y @while, a continuación utilizaremos @foreachpara recorrer y mostrar en una tabla los datos de las monedas.
• Include: para incluir subvistas, y aprovechar así el sistema de plantillas, veremos un ejemplo al añadir Bootstrap

Después de esta pequeña introducción ya podemos desarrollar index.blade.php combinando HTML y la estructura @foreach:

<h1 class="text-primary">Lista de Monedas</h1>

<table class="table table-bordered" id="tableMonedas">
<thead>
<tr>
<th class="text-center">Id moneda</th>
<th class="text-center">Nombre</th>
<th class="text-center">Descripción</th>
<th class="text-center">Activa</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
@foreach($monedas as $moneda)
<tr>
<td class="text-center">{{ $moneda->idcurrency}}</td>
<td class="text-center">{{ $moneda->currency}}</td>
<td class="text-center">{{ $moneda->description }}</td>
<td class="text-center">{{ $moneda->isactive}}</td>
<td>
<a href="{{ route('monedas.show', $moneda->idcurrency) }}" class="btn btn-info">Ver</a>

</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th class="text-center">Id moneda</th>
<th class="text-center">Nombre</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Acciones</th>
</tr>
</tfoot>
</table>

Creo que se entiende bien ya que se es código html al que añadimos directivas de Blade, antes hemos comentado el bucle que ibamos a utilizar, pero no como se mostraban los datos en pantalla, para ello utilizaremos dobles llaves, tal que así: {{ $moneda->idcurrency}}, lo que incluimos dentro es PHP, donde en cada iteración del bucle vamos accediendo a las columnas del modelo para presentarlos.

He incluido un elemento nuevo más, para que veais algunas utilizadas y métodos más que nos proporciona Laravel, como es el método route, con este lo que hacemos es crear un enlace a la visualización de la moneda seleccionada por id y que desarrollaremos en el siguiente apartado:

{{ route('monedas.show', $moneda->idcurrency) }}

En este caso usamos la directiva global route que nos generará la URL, en el primer campo le pasamos el nombre de la ruta: monedas.show que ya hemos visto anteriormente que la teníamos definada en la declaración de las rutas, y el id que se selecciona con: $moneda->idcurrency.

Finalizada la explicación ya puedes probar el código en la url: http://customerdb-laravel-01.codigoxules.org/monedas , este será el resultado:

Show – Mostramos la moneda seleccionada

Para mostrar la moneda añadiremos un método más al controlador CbCurrencyController.php»: show($IdCurrency), como podemos ver le pasaremos como parámetro el id de la moneda a mostrar, para mostrar los datos utilizaremos html con Blade para implementar show.blade.php, veamos como.

Creamos el método show($IdCurrency) en el controlador

En primer lugar, vamos a crear la página de índice donde cargaremos todas las monedas definidas en la tabla, anteriormente hemos definido la ruta monedas con los siguientes parámetros como puedes ver en la imagen de las rutas:

• Method: GET|HEAD , nos indica el método definido para la llamada
• URI: monedas/{moneda}, definimos el paso del parámetro moneda en la URL donde pasaremos el id de la moneda que queramos mostrar así al cargar la url en nuestra web de la moneda: http://customerdb-laravel-01.codigoxules.org/monedas/7, pasaremos el parámetro al método del controlador.
• Name: monedas.show , nombre de la ruta, nos referiremos ha ella para añadir el enlace al índice en las diferentes páginas.
• Action: App\Http\Controllers\CbCurrencyController@show indicamos donde implementamos la carga de datos para la vista, esto es en el método show de nuestro controlador CbCurrencyController
• Middleware: web, indicamos el tipo de acceso permitido.

Para implementar el método show($IdCurrency) buscaremos la moneda por Id utilizando el método find($Id) definido en el modelo, redirigimos a la vista show.blade.php indicándolo con la ruta a la vista: monedas.show, pasándole los datos de la moneda consultada, el desarrollo del método es el siguiente:

/**
* Muestra la moneda seleccionada por id.
* @param $IdCurrency
* @return Response
*/
public function show($IdCurrency)
{
// Devuelve la moneda seleccionada por id.
$moneda = CbCurrency::find($IdCurrency);
return view('monedas.show')->with('moneda', $moneda);
}

Creamos la vista show.blade.php

En el código html de la vista show vamos a mostrar los datos de una manera sencilla con dos links una para recargar y otro para volver al listado inicial, para obtener los datos de la moneda seleccionada utilizamos el objeto que hemos pasado a la vista como parámetro en el controlador $moneda es es un objeto del tipo StdClass con lo que podemos acceder por referencia los valores de la columna de la base de datos.

Este es el código simple para mostrar todos los datos que he preparado:

<h1>
Moneda {{ $moneda->currency}}
</h1>

<p>Id moneda; {{ $moneda->idcurrency}}</p>
<p>Moneda: {{ $moneda->currency}}</p>
<p>Descripción: {{ $moneda->description }}</p>
<p>Activa: {{ $moneda->isactive}}</p>
<p>Iso:{{ $moneda->isocode}}</p>
<p>Símbolo{{ $moneda->cursymbol}}</p>
<p>Precisión: {{ $moneda->precisionstd}}</p>
<p>Precisión costes: {{ $moneda->precisioncost}}</p>
<p>Precisión precio: {{ $moneda->precisionprize}}</p>
<p>Fecha creación: {{ $moneda->created_at }}</p>
<hr>

<a href="{{ route('monedas.index') }}">Volver al índice</a>
<a href="{{ route('monedas.show', $moneda->idcurrency) }}">Recargar</a>

Este es el resultado final, como ves de momento no buscamos una buena presentación, sino simplemente entender el ciclo del framework Laravel y ver como presentar los datos:

 

6. AÑADIMOS BOOTSTRAP AL PROYECTO

Laravel viene configurado por defecto para trabajas el diseño de nuestro estilos con SASS, este preprocesado de estilos se integra con Laravel con Elixir, en la documentación de Laravel puedes encontrar la documentación para la compilicación en integración en tu proyecto de Elixir (https://laravel.com/docs/5.3/elixir),y así, poder ejecutar la compilación de SASS, y otros creadores de hojas de estilos como LESS.

Si incluyo el desarrollo con Sass o Less al proyecto creo que añadiría una complejidad adicional en el aprendizaje del desarrollo de aplicaciones con Laravel, por ello, voy a utilizar css con Bootstrap directamente, es decir, css plano.

Desde la pagina oficial del framework descargamos los archivos necesarios: http://getbootstrap.com/getting-started/#download.

Puedes descargar la primera opción (Bootstrap), que sólo incluye los archivos necesarios de CSS, JS y las fuentes.

Ahora tenemos que añadir esto a nuestro proyecto, las carpetas js, css y fonts deben incluirse dentro de nuestra aplicación, un lugar ideal para ello es crear un directorio assets dentro de public. Una vez hecho esto ya estamos listos para incluir Bootstrap en plano en nuestros desarrollos, veremos como en el siguiente punto creando una plantilla para nuestra aplicación.

Así queda finalmente la estructura:

 

7. CREAMOS LA PLANTILLA DE LA APLICACIÓN

Una vez que tenemos añadido Bootstrap al proyecto, vamos a crear una sencilla plantilla, que utilizaremos como layout en nuestro proyecto. A esta plantilla la vamos a llamar app.blade.php y se ubicará resources/views/, una vez explicado su diseño la incorporaremos a las vistas index y show ya creadas.

Te comparto directamente el diseño de la plantilla para explicar después los aspectos más importantes relacionados con Blade:

<!DOCTYPE html>
<html>

<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>Customerdb Laravel</title>

<!-- Custom CSS -->
@section('styles_laravel')

<!-- Bootstrap Core CSS -->
<link media="all" type="text/css" rel="stylesheet" href="/assets/css/bootstrap.css">
<link media="all" type="text/css" rel="stylesheet" href="/assets/css/app.css">

<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
@show

@yield('mis_estilos')
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{url('/')}}">Customerdb Laravel</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="disabled" href="#">Empresas</a></li>
<li><a class="disabled" href="#">Clientes</a></li>
<li><a href="#">Países</a></li>
<li><a class="active" href="{{url('/monedas')}}">Monedas</a></li>
<li><a href="#">Idiomas</a></li>
<li><a href="#">Formas de pago</a></li>
<li><a href="#">Ayuda</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<!-- <div class="container-fluid"> -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">

<!-- Aquí incluiremos el contenido de nuestra aplicación -->
@yield('content')

</div>
</div>
</div>
<!-- </div> -->

<!-- Scripts -->
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>

</body>
</html>

En la cabecera he definido simplemente una sección de estilos donde incluimos con HTML clásico las rutas necesarias a los css de Bootstrap, esto no tiene nada novedoso, pero también incluimos @yield(‘mis_estilos’), que nos permitirá inyectar desde las vistas que utilicen esta plantilla código css personalizado que solo se use en esa vista.

Como podemos ver en la cabecera, acompañamos la inclusión de bootstrap.css con la inclusión de los estilos de nuestra aplicación con app.css, esta es un hoja muy sencilla para ajustar un poco el diseño del contenido, te explico un poco en la propia hoja de estilos:

/*
* Estructura básica para la aplicación Customerdb
*/

/* El navbar ocupara 50px por ello desplazamos el contenido por ese valor */
body {
padding-top: 50px;
}
.navbar-inverse{
background-color: #234567;
}

/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}

/*
* Configuración de Sidebar
*/

/* Oculta para el responsive móvil, lo mostramos después*/
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Añadimos scroll al contenido si es necesario. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}

/* Barra de navegacion (Sidebar) */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}

/*
* Contenido principal
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}

En el cuerpo hemos incorporado una barra de navegación con css puro utilizando Bootstrap y simplemente utilizamos otro método de Laravel url(‘RUTA’) para crear la url a la lista de monedas. También incluimos la parte más importante @yield(‘content’), ya que con el sistema de plantillas Blade esto será sustituido en cada vista por su valor correspondiente, veamos como lo hacemos en index y show.

Añadimos la plantilla a nuestras páginas

Esto va a ser bastante sencillo, utilizaremos para ello dos directivas de Blade:

• @extends: nos permite indicar a la vista que fichero plantilla vamos a extender, en este caso añadiremos el nombre de nuestro fichero: app.
• @section: indicamos la sección que vamos a sustituir en la plantilla en este caso content, que hemos especificado en app.blade.php como @yield(‘content’)

Así, el código que tenemos que añadir a los ficheros generados anteriormente es el siguiente:

@extends('app')
@section('content')

C O N T E N I D O   Q U E   C R E A M O S

@stop

Veamos el resultado final.

Añadimos la plantilla a index

Tal y como te expliqué anteriormente, simplemente añadimos las directivas a nuestro código, quedando así:

@extends('app')
@section('content')
<h1 class="text-primary">Lista de Monedas</h1>

<table class="table table-bordered" id="tableMonedas">
<thead>
<tr>
<th class="text-center">Id moneda</th>
<th class="text-center">Nombre</th>
<th class="text-center">Descripción</th>
<th class="text-center">Activa</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
@foreach($monedas as $moneda)
<tr>
<td class="text-center">{{ $moneda->idcurrency}}</td>
<td class="text-center">{{ $moneda->currency}}</td>
<td class="text-center">{{ $moneda->description }}</td>
<td class="text-center">{{ $moneda->isactive}}</td>
<td>
<a href="{{ route('monedas.show', $moneda->idcurrency) }}" class="btn btn-info">Ver</a>

</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th class="text-center">Id moneda</th>
<th class="text-center">Nombre</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Acciones</th>
</tr>
</tfoot>
</table>
@stop

Este este es el resultado final si cargar ahora la url http://customerdb-laravel-01.codigoxules.org/monedas:

Añadimos la plantilla a show

Hacemos lo mismo para la página show, no he actualizado nada, para que veas directamente el resultado:

@extends('app')
@section('content')
<h1>
Moneda {{ $moneda->currency}}
</h1>

<p>Id moneda; {{ $moneda->idcurrency}}</p>
<p>Moneda: {{ $moneda->currency}}</p>
<p>Descripción: {{ $moneda->description }}</p>
<p>Activa: {{ $moneda->isactive}}</p>
<p>Iso:{{ $moneda->isocode}}</p>
<p>Símbolo{{ $moneda->cursymbol}}</p>
<p>Precisión: {{ $moneda->precisionstd}}</p>
<p>Precisión costes: {{ $moneda->precisioncost}}</p>
<p>Precisión precio: {{ $moneda->precisionprize}}</p>
<p>Fecha creación: {{ $moneda->created_at }}</p>
<hr>

<a href="{{ route('monedas.index') }}">Volver al índice</a>
<a href="{{ route('monedas.show', $moneda->idcurrency) }}">Recargar</a>
@stop

Ya puedes añadir las clases css de bootstrap para dar una mejor presentación al código, por ejemplo, añadir a los links una presentación de botones con class=»btn btn-info».

Hasta aquí hemos llegado en esta publicación, en la continuación, finalizaremos el CRUD para cb_currency con el desarrollo de los formularios y las acciones de creación, borrado y actualización.

 

DOCUMENTACIÓN

• Composer – Getting Started: es un gestor de paquetes y dependencias para PHP, en este enlace tienes toda la información sobre su instalación y uso.
• Artisan CLI
• Eloquent ORM: ORM utilizado por defecto por Laravel, en este enlace tienes la documentación proporcionada por Laravel.
• https://laravel.com/docs/5.0/schema
• https://laravel.com/docs/5.0/migrations
• https://laravel.com/docs/5.2/quickstart
• https://laravel.com/docs/5.2/schema#adding-columns: referencia para la definición de las columnas en la base de datos.
• Configuración de la bases de datos y creación de tablas
• Primeros pasos con Laravel
• Laravel – Creación de un Virtual Host
• Desarrollo Web -Introducción a las vistas con Laravel
• Devcode – Laravel 5 nuestro primer proyecto
• Blade el sistema de plantillas de Laravel

Espero que te haya resultado útil el tutorial, si es así ayúdame a difundirlo. Julio Yáñez Novo