Laravel 5

https://fernando-gaitan.com.ar/

Fernando Gonzalo Gaitán

 Laravel 5 - https://fernando-gaitan.com.ar/

Índice
Al lector .................................................................................................................................. 1
Instalación............................................................................................................................... 2
Odioso “Hola mundo” ........................................................................................................ 2
Migraciones ............................................................................................................................ 3
Usuarios .................................................................................................................................. 6
Modelos y relaciones .............................................................................................................. 7
Modelos .............................................................................................................................. 8
Relaciones ........................................................................................................................... 9
Controladores y Rutas .......................................................................................................... 10
Controladores.................................................................................................................... 10
Rutas ................................................................................................................................. 10
Vistas y Helpers .................................................................................................................... 14
Helpers .............................................................................................................................. 14
Vistas ................................................................................................................................ 15
Validaciones ......................................................................................................................... 22
Personalizar errores .......................................................................................................... 23
Vue.js y Ajax ........................................................................................................................ 24
Creación del proyecto ................................................................................................... 24
Modelo y Migración ..................................................................................................... 25
Controlador y Rutas ...................................................................................................... 26
Vista .............................................................................................................................. 27
Creando nuestro componente ....................................................................................... 28

Al lector
Este documento ha sido creado con fines educativos. Podés copiar y utilizar cualquier parte
de su contenido, sin embargo se deberá citar la fuente.

Además el mismo ha sido desarrollado el día 15/07/2017, por este motivo pudiesen existir
problemas de incompatibilidad con versiones actuales.

Para seguir en contacto conmigo, podés hacerlo a través de las siguientes redes sociales:

Página 1 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Instalación
Bueno, hace mucho tiempo que no publicaba nada de Laravel, algunos años, cuando
todavía íbamos por la versión 4. Así que en esta ocasión voy a retomar, para mostrarles
cómo crear un aplicación que consistirá de lo siguiente:

Tendremos un formulario para iniciar sesión, y cada usuario podrá acceder a una lista de
tareas que podrán administrar de forma sencilla. Aprenderemos a configurar e instalar un
proyecto Laravel 5, validar los datos, y hacer CRUD.

Sin más palabrería comencemos.

Si sos usuario Windows, como yo, necesitas tres cosas:

• Un servidor apache, por ejemplo Xampp o Wamp.

• Git, el cual podés descargar aquí.
• Composer, para poder trabajar con la consola, porque muchas de las cosas de
Laravel se hacen de este modo. Los descargamos desde aquí.

Una vez hecho todo esto, podemos instalar nuestro primer proyecto. En mi caso voy a crear
un carpeta con el resto de mis proyectos PHP: Por ejemplo en Windows y con Xampp:
cd C:\xampp\htdocs

Y escribimos lo siguiente:
composer create-project laravel/laravel mi_proyecto --prefer-dist

(A esperar…)

Bueno, después de algunos minutos será instalado. Lo siguiente que vamos a hacer será
tirar varias líneas por consola.

Odioso “Hola mundo”

Una vez instalado el proyecto, vamos a la consola y entramos en nuestro proyecto:
cd mi_proyecto

Y luego iniciamos el servidor con:

php artisan serve

Debería mostrarnos por consola un mensaje con algo como: “Laravel development server
started: <https://127.0.0.1:8000>”

Página 2 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Entonces vamos a ir a esa url: “https://127.0.0.1:8000” o bien, “https://localhost:8000/”

Si nos recibe una mensaje:

Vamos bien!

Ahora ingresamos al proyecto que creamos, vemos que se han generado varios archivos y
carpetas. Editamos el archivo routes/web.php, y agregamos la siguiente línea:
Route::get('test', function(){
return 'Hola mundo';
});

Y luego entramos en

https://localhost:8000/test

Vemos un mensaje con el saludo que ingresamos anteriormente.

El archivo web.php, será el encargado de enrutar las acciones de nuestra aplicación, lo cual
es bastante conveniente, podremos definir nuestras urls para cada página de nuestra web, e
incluso definir cuáles son aquellas que por ejemplo necesitan ser accedidas sólo por los
usuarios autentificados.

Migraciones
En la publicación pasada vimos cómo instalar Laravel e iniciar nuestra aplicación, de acá
en adelante vamos a configurar nuestro proyecto, escribiendo algunas líneas por consola
para crear nuestras migraciones, modelos, vistas, controladores y validaciones. Hoy
veremos migraciones.

Las migraciones nos permitirán crear las entidades de la base de datos y tener una cantidad
de versiones a lo largo que hagamos cambios en nuestras tablas.

Primero vamos a crear nuestra base de datos, yo voy a llamarle: “laravel_organizador”.

Página 3 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Ahora abrimos nuestra consola, entramos en nuestro proyecto y escribimos lo siguiente:

php artisan make:migration create_estados_table

Y luego:
php artisan make:migration create_tareas_table

Con respecto a los usuarios, ya viene creada por defecto la migración de dicha tabla, así que
vamos a usar ésa.

Si nos fijamos dentro de database/migrations, nos encontramos con las clases de nuestras
migraciones, incluidas las dos que acabamos de crear.

Editamos la de “estados_table.php” y “tareas_table.php”.

La relación entre estas tres será la siguiente, un usuario podrá crear una tarea con un estado:
“Pendiente”, “En proceso” o “Finalizada”. Por lo cual una tarea será creada por un usuario,
cada usuario puede crear varias tareas y cada tarea tendrá un solo estado, y estos estados
podrán estar presentes en las distintas tareas.

Si vemos bien, en cada tabla tendremos dos métodos: “up()” y “down()”. El primer se va a
disparar cuando hagamos la migración para crear la tabla, y el segundo cuando se haga
rollback (se descartarán los cambios hechos)

Así que en “estados_table.php” vamos a agregar el siguiente código:

public function up()
{
Schema::create('estados', function(Blueprint $table){
$table->increments('id');
$table->string('nombre');
$table->timestamps();
});
}

public function down()

{
Schema::dropIfExists('estados');
}

Y en “tareas_table.php”:
public function up()
{
Schema::create('tareas', function(Blueprint $table){
$table->increments('id');
$table->string('titulo');
$table->text('descripcion');
$table->integer('user_id')->unsigned();
$table->integer('estado_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users');
$table->foreign('estado_id')->references('id')->on('estados');

Página 4 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

$table->timestamps();
});
}

public function down()

{
Schema::dropIfExists('tareas');
}

El código en ambos casos es igual, en los métodos “up()” creamos las columnas de la base
de datos, mientras que en los métodos “down()” eliminamos las tablas.

El método create() va a recibir dos parámetros, el nombre de la table y un callback en

donde vamos a indicar las columnas. En el caso de timestamps(), agregará dos columnas
para tener un control de la fecha en que se inserta un registro y cuando se lo modifica.

Ahora bien, antes de crear las tablas, debemos escribir los datos correctos para que nuestra
aplicación pueda conectarse la base de datos. Así que vamos al archivo: “.env”, de la raíz
de nuestro proyecto y buscamos las siguientes líneas:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Y cambiamos los valores por los de nuestra conexión. Por ejemplo, en mi caso:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_organizador
DB_USERNAME=root
DB_PASSWORD=

Bien, a continuación escribimos en la consola lo siguiente:

php artisan migrate

Posible error:

Tal vez pueda pasarte como a mí, que te devuelva un error desde la consola:
"[Illuminate\Database\QueryException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key
was too long; max key length is 767 bytes (SQ
L: alter table `users` add unique `users_email_unique`(`email`))"

Bueno, en este caso, podés ir a “app/Providers/AppServiceProvider.php”. Editamos este

archivo:

Arriba de todo incluimos la siguiente línea:

Página 5 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

use Illuminate\Support\Facades\Schema;

Y modificamos el método boot, con el siguiente código:

public function boot()
{
Schema::defaultStringLength(191);
}

En este caso, vamos a eliminar la base de datos, que acabamos de crear, y vamos a volver a
crear una con el mismo nombre, y volver a escribir en la consola:
php artisan migrate

(Lo rojo realizarlo en caso de que al intentar hacer la migración, te devuelva un error)

Listo, ya tenemos nuestras tablas. Lo último que podemos hacer es crear a mano unos insert
para los estados:
INSERT INTO estados(id, nombre)
VALUES
(1, 'Pendiente'),
(2, 'En proceso'),
(3, 'Finalizada')

Usuarios
Bien, esta versión de Laravel nos proporciona una forma muy fácil de crear usuarios, y
teniendo en cuenta lo repetitivo y laborioso que es esto, la solución es genial.

Así que simplemente vamos a la consola y escribir lo siguiente:

php artisan make:auth

Si ahora reiniciamos nuestra aplicación con:

php artisan serve

Vamos a ver que al ingresar al sitio, en la parte superior derecha, veremos un “Login” y
“Register”

Todo se ha creado con un profeso scaffolding, así que no vamos a tener que hacer nada
más. Ya podemos empezar a crear usuarios e iniciar sesión.

Login:

Página 6 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Registro de usuarios:

Modelos y relaciones
Bueno, entrando un poco más en nuestro primer CRUD, podemos continuar con los
modelos, donde tratamos la parte de datos que van a interactuar con nuestra aplicación.

Página 7 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Por empezar ya tenemos creado el modelo User, que éste viene por defecto en la
instalación de Laravel, así que vamos a crear los otros dos, Tarea y Estado.

Importante: a la hora de crear tablas deberíamos crearlas en plural, sin embargo los
modelos deberían escribirse en singular, y con la primer letra en mayúscula:

User –> users

Tarea –> tareas

Estado –> estados

(Modelo –> Tabla)

Ojo con esto, porque al escribir las tablas en plural, a diferencia de los modelos que son en
singular, no significa la palabra como tal en castellano/español. Por ejemplo si tuviésemos
que trabajar con canciones en nuestra aplicación, el modelo sería “Cancion”, pero la tabla
no sería “canciones” sino “cancions”:

Cancion –> cancions

Simplemente agregamos una “s” al final. Y tampoco hay que escribir con tildes, aunque eso
debería estar más que claro:

Aunque si no querés seguir esta regla, y querés ponerle cualquier otro nombre a la tabla,
dentro del modelo (ahora vemos como crearlos), podés agregar un atributo donde indicar el
nombre de la tabla:
protected $table = 'nombre_de_la_tabla';

Modelos
Bien, vamos a ir a la consola, y vamos a crear los modelos que nos faltan:
php artisan make:model Estado

Y luego:
php artisan make:model Tarea

Si ahora vamos dentro de la carpeta “app”, podemos ver que ya están creados los nuevos
modelos. Así que vamos a editar ambos, y también el que ya estaba desde el principio, que
es User.

Página 8 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Relaciones
Podemos ver los distintos tipos de relaciones dentro de la documentación de Laravel:

https://laravel.com/docs/5.0/eloquent#relationships

Pero, de momento vamos a crear las relaciones de nuestra aplicación que en realidad ambas
son de 1 a n, tanto para las tareas y los usuarios, como para las tareas y los estados.

Dentro de User vamos a agregar el siguiente método:

public function tareas()
{
return $this->hasMany('App\Tarea');
}

Y dentro de estados lo mismo:

public function tareas()
{
return $this->hasMany('App\Tarea');
}

Esto va a indicarle a ambas entidades que pueden estar ligadas a varias tareas. Por ejemplo
si queremos recuperar un usuario en particular haríamos esto:
$usuario = Usuario::find(1);

Aquí recuperamos el usuario con el id 1.

Y si también queremos recuperar las tareas del mismo:

$usuario = Usuario::find(1);
$tareas = $usuario->tareas;

Tan sencillo como eso.

Finalmente dentro de nuestro modelo Tarea vamos a hacer la otra parte, agregamos a los
métodos que indiquen a qué entidad pertenecen, a qué usuario y en qué estado están:
public function usuario()
{
return $this->belongsTo('App\User');
}

Y luego:
public function estado()
{
return $this->belongsTo('App\Estado');
}

Página 9 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Esto nos va a permitir que cuando recuperemos una tarea, también podremos ver su estado:
$tarea = Tarea::find(5);
$estado = $tarea->estado;

¿Fácil? Claro que sí.

Controladores y Rutas
Bueno, en esta ocasión vamos a continuar con nuestro proyecto, creando las acciones de
nuestra aplicaciones para administrar las tareas de los usuarios.

Controladores
Un controlador es una clase que permite agrupar las acciones de una sección en particular.
Por ejemplo podemos tener controladores como ProductosController,
ContactoController, RegistroController. Y los métodos de por ejemplo
ProductosController serían “crear”, “modificar”, “eliminar”, “listar”, etc.

Rutas
A la hora de administrar datos en particular, podemos crear un controlador y definir cada
una de sus acciones dentro de routes/app.php de la siguiente forma:
Route::get('/home', 'MiControladorController@metodo');

Sin embargo, a medida que vaya creciendo el proyecto este archivo puede llenarse de líneas
con todas las acciones de toda la aplicación.

Para resolver esto vamos a crear un resource indicando un controlador en particular, y

Laravel se va a encargar en crear las acciones y enrutarlas.

Vamos a la consola y escribimos lo siguiente:

php artisan make:controller TareasController --resource

Si ahora vamos a app/Http, podemos observar que se creó nuestro controlador con los
siguientes métodos:

• index: Mostrar registros existentes (GET)

• create: Mostrar nuevos datos a crear (GET)
• store: Crear nuevos datos (POST)
• show: Mostrar un registro (GET)
• edit: Mostrar un registro a modificar (GET)
Página 10 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

• update: Modificar un registro (PUT)

• destroy: Eliminar un registro (DELETE)

Los métodos GET nos van a permitir recuperar datos de la base de datos, y mostrarlos con
una interfaz al usuario. Mientras que los otros son acciones que nos van a permitir realizar
acciones en la base de datos, tanto de INSERT, UPDATE y DELETE. POST para crear
nuevos registros, PUT para modificar registros que ya existente y finalmente DELETE para
eliminarlos.

Como para adelantar un poco, el método create(), que se accede por GET, nos va a mostrar
el formulario para crear nuevas tareas, mientras que store(), que se accede por POST, será
el que nos permita recuperar los datos enviados del anterior y guardarlo en la base de datos.

Ahora para que este controlador pueda ser accedido, tenemos que agregarlo dentro de:
routes/web.php:
Route::resource('/tareas', 'TareasController');

El problema que se presenta acá es que para acceder a esa url: ‘tareas’, tenemos que estar
autentificados, así que para evitar que visitantes sin usuario accedan, deberíamos cambiarlo
por lo siguiente:
Route::group( ['middleware' => 'auth' ], function()
{
Route::resource('/tareas', 'TareasController');
});

Ahora vamos a agregarle el código a nuestras acciones, dentro del archivo

TareasController:
use Auth;

Para usar la autentificación, recordemos que para acceder a esta clase, el usuario debe estar
autentificado.
use App\User;
use App\Tarea;
use App\Estado;

Para poder usar los modelos.

use Illuminate\Support\Facades\Redirect;

Esta librería nos permitirá hacer redireccionamiento de nuestras acciones.

(Todos los use antes de declarar class)

Y ahora nos toca agregar el código para que funcionen las acciones.

El método index() tendrá el siguiente código:

Página 11 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

public function index()

{
$tareas = Tarea::all();
}

Mediante all() podemos recuperar todas las tareas que existen. Sin embargo, tratándose de
las tareas de un usuario en particular tendremos que modificar de modo que sólo nos traiga
las tareas de un usuario. Entonces reemplazamos el código por esto:
$tareas = User::find(Auth::id())->tareas;

El método id() de la clase Auth (clase de autentificación), nos va a devolver el id del

usuario que inicio sesión.

Ahora create(), que es donde vamos a cargar posteriormente nuestro formulario para
guardar una nueva tarea, tendrá el siguiente código:
public function create()
{
$tarea = new Tarea();
$estados = Estado::all();
}

En este caso sí usamos el método all() porque necesitamos todos los registros de una tabla.

Y los datos serán enviados al método store():

public function store(Request $request)
{
//Crear tarea nueva.
$tarea = new Tarea();
$tarea->titulo = $request->titulo;
$tarea->descripcion = $request->descripcion;
$tarea->estado_id = $request->estado_id;
$tarea->user_id = Auth::id();
$tarea->save();
//Redirigir a la lista de tareas.
return Redirect::to('tareas')->with('notice', 'Tarea guardada
correctamente.');
}

La clase Request nos permite recuperar los datos enviados por un usuario, creamos una
nueva instancia de Tarea, le agregamos los datos correspondientes enviados por el usuario y
finalmente usamos el método save() para guardar la tarea. Con respecto a la última línea, es
sólo un redireccionamiento a la lista de tareas del usuario.

En show() simplemente recuperamos una tarea por su id, el cuál se pasa como parámetro:
public function show($id)
{
$tarea = Tarea::find($id);
}

Página 12 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

La acción edit() va a ser similar a create(), sólo que en lugar de crear un nuevo objeto
Tarea, vamos a recuperar uno por su id:
public function edit($id)
{
$tarea = Tarea::find($id);
$estados = Estado::all();
}

Y al enviar los datos desde esta acción van a modificarse con los datos del id:
public function update(Request $request, $id)
{
$tarea = Tarea::find($id);
$tarea->titulo = $request->titulo;
$tarea->descripcion = $request->descripcion;
$tarea->estado_id = $request->estado_id;
$tarea->user_id = Auth::id();
$tarea->save();
return Redirect::to('tareas')->with('notice', 'Tarea guardada
correctamente.');
}

Vemos que a diferencia del método create(), no hacemos un new para crear una nueva
instancia, sino que recuperamos el objeto completo con find($id) y luego modificamos los
valores del registro. Por último también haremos una redirección a la lista de tareas.

Finalmente creamos el último método que es destroy(), el cual nos va a permitir eliminar un
registro:
public function destroy($id)
{
$tarea = Tarea::find($id);
$tarea->delete();
}

Simplemente recuperamos el registro por su id, y finalmente lo eliminamos con el método

delete().

Lo último que tendríamos que cambiar, es que:

$tarea = Tarea::find($id);

Nos va a traer una tarea por su id, sin embargo, teniendo en cuenta que cada tarea le va a
pertenecer a otro usuario, y no debería ser accedida por otro, deberíamos reemplazar esa
línea por lo siguiente:
$tarea = Tarea::where(array(
'id' => $id,
'user_id' => Auth::id()
))->first();

Página 13 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Bueno, en la próxima publicación vamos a corregir el código para agregar los formularios
correspondientes y así darle una interfaz gráfica a nuestra aplicación.

Vistas y Helpers
Bueno, ahora que ya tenemos el funcionamiento lógico de nuestra aplicación, sólo nos falta
agregar la parte visual. Para ello vamos a tener que crear los archivos para ver, modificar o
eliminar las tareas.

Helpers
En mi opinión, siempre prefiero evitar este tipo de herramientas, pero visto y considerando
que son muy útiles para la mayoría de los desarrolladores, vamos a crear nuestra aplicación
con helpers.

Los helpers nos permiten crear contenido html por medio de código propio del framework,
una función a la cual podemos pasar parámetros y ésta se encargará de crear el código html
correspondiente.

Así que primero vamos a abrir nuestro archivo “composer.json”, y a buscar “require”. En
mi caso mi archivo es así:
"require": { "php": ">=5.6.4", "laravel/framework": "5.4.*",
"laravel/tinker": "~1.0" }

Dentro de la lista, vamos a agregar un ítem más. En mi caso:

"laravelcollective/html": "5.4.*"

Entonces me quedará de este modo:

"require": {
"php": ">=5.6.4",
"laravel/framework": "5.4.*",
"laravel/tinker": "~1.0",
"laravelcollective/html": "5.4.*"
}

Pero atención, la versión que yo estoy usando de Laravel es la “5.4”, si estás usando otra,
deberías poner la que corresponde. Podés fijarte en el valor de “laravel/framework”, o bien
escribir en consola:
php artisan --version

Una vez que terminemos de editar este archivo, vamos a la consola y escribimos lo
siguiente:

Página 14 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

composer update

Y empezarán a descargarse las dependiencias.

Una vez que termine la descarga desde la consola, editar el archivo “config/app.php”, y
buscamos dentro de “providers”, y dentro de la lista agregamos:
Collective\Html\HtmlServiceProvider::class,

Y en el mismo archivo, dentro de “aliases”:

'Form' => 'Collective\Html\FormFacade',
'Html' => 'Collective\Html\HtmlFacade',

Vistas
Bueno, ahora vamos a crear las vistas. Tendremos tres vistas, una para mostrar las tareas,
otra para visualizar una en particular y otra para guardarlas (crear o modificar)

Así que dentro de resources/views vamos a crear un directorio llamado tareas, y dentro los
tres archivos:

• index.blade.php
• show.blade.php
• save.blade.php

(No te olvides de ‘.blade’ antes de ‘.php’)

Antes de editar el código, vamos a detenernos algo. A la hora de crear interfaces visuales,
casi siempre hay código html que se repite entre página y página. Por ejemplo cabeceras,
pies de página, archivos externos (css, js, imágenes). Laravel nos permite crear una plantilla
base, y luego poder reutilizar dicho diseño, incluyendo solamente en cada una el código que
cambia entre página y página.

Si nos fijamos bien dentro de resources/views/layouts/app.blade.php, vamos a ver código

html. Aquí podemos modificar si por ejemplo necesitamos agregar un css, un js, o
simpemente cambiar el diseño de nuestro sitio.

Por ejemplo, podemos encontrar los enlaces del menú que cambian dependiente de si el
usuario está logueado o no:
@if (Auth::guest())

Esta línea indica que el usuario no está logueado, así que va a visualizar en este caso los
enlaces para iniciar sesión o bien registrarse.

Página 15 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Vamos a aprovechas para agregar el siguiente enlace para acceder con un link a las tareas,
siempre y cuando el usuario esté logueado:
<li>
<a href="/tareas">
Tareas
</a>
</li>

Bueno, a continuación vamos a editar los archivos visuales. Dentro de save.blade.php

copiamos el siguiente código:
@extends('layouts.app')
@section('content')
<div class="container">
<h1> Guardar tarea </h1>
{!! Form::open(array('url' => 'tareas/' . $tarea->id, 'method' =>
$method)) !!}
<div class="form-group">
{!! Form::label('titulo', 'Título') !!}
{!! Form::text('titulo', $tarea->titulo, ['class' => 'form-
control']) !!}
</div>
<div class="form-group">
{!! Form::label('descripcion', 'Descripción') !!}
{!! Form::textarea('descripcion', $tarea->descripcion,
['class'=>'form-control', 'rows' => 2, 'cols' => 40]) !!}
</div>
<div class="form-group">
{!! Form::label('estado', 'Estado') !!}
<select name="estado_id" id="estado_id" class="form-control">
<option value=""> --- </option>
@foreach ($estados as $item)
@if($tarea->id != null && $item->id == $tarea->estado-
>id)
<option selected="selected" value="{{ $item->id }}">
{{ $item->nombre }} </option>
@else
<option value="{{ $item->id }}"> {{ $item->nombre }}
</option>
@endif
@endforeach
</select>
</div>
{!! Form::submit('Guardar', ['class' => 'btn btn-primary']) !!}
{!! link_to('tareas', 'Cancelar', ['class' => 'btn btn-danger'])
!!}
{!! Form::close() !!}
</div>
@endsection

Bueno, sé que es mucho código, pero vamos a ir viéndolo de a poco.

En primer lugar extendemos de otra vista, la cual tiene una suerte de plantilla para el resto
de nuestras interfaces gráficas:

Página 16 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

@extends('layouts.app')

Esto dibujará la cabecera y el pie sin necesidad de repetirlo en cada vista.

Comenzando con los helper, primero usamos:

{!! Form::open(array('url' => 'tareas/' . $tarea->id, 'method' =>
$method)) !!}

Este es un helper para abrir un formulario. La url es ‘tareas’ + barra (/) + id, en caso de que
haya un id. Osea este formulario nos va a servir cuando tengamos una tarea nueva o una
que vamos a editar. Por eso en la publicación pasado escribimos :
$tarea = new Tarea();

Para una tarea que aún no se ha creado

$tarea = Tarea::find($id);

Con una tarea que ya existe, y que recuperamos por id.

Otra cosa que hay que aclarar es que:

'method' => $method

Será una variable que le pasamos el método. Cuando sea el método create(), le vamos a
pasar ‘POST’, que es para crear un nuevo registro; cuando sea el edit(), entonces será
‘PUT’, para modificar.

Y cerramos con:
{!! Form::close() !!}

El resto de los helpers son simplemente elementos de formulario, por ejemplo:

{!! Form::label(‘titulo’, ‘Título’) !!}

{!! Form::text(‘titulo’, $tarea->titulo, [‘class’ => ‘form-control’]) !!}

En el caso de label(), el primer parámetro es el for, y el segundo el texto de la etiqueta.

Mientras que text() es el name, el value por defecto y el tercer parámetro es un array con
datos adicionales como la clase que usamos.

Y un select para mostrar los estados:

<select name="estado_id" id="estado_id" class="form-control">
<option value=""> --- </option>
@foreach ($estados as $item)
@if($tarea->id != null && $item->id == $tarea->estado->id)
<option selected="selected" value="{{ $item->id }}"> {{ $item-
>nombre }} </option>
@else

Página 17 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

<option value="{{ $item->id }}"> {{ $item->nombre }} </option>

@endif
@endforeach
</select>

Verificamos si la tarea ya existe con:

$tarea->id != null

Y luego si coincide con el estado que estamos recorriendo, para ponerla en selected o no:
$item->id == $tarea->estado->id

Finalmente vamos a modificar los métodos create() y edit() que creamos la última vez,
permitiendo que se cargue esta vista.
public function create()
{
$tarea = new Tarea();
$estados = Estado::all();
return View('tareas.save')
->with('tarea', $tarea)
->with('estados', $estados)
->with('method', 'POST');
}

public function edit($id)

{
$tarea = Tarea::where(array(
'id' => $id,
'user_id' => Auth::id()
))->first();
$estados = Estado::all();
return View('tareas.save')
->with('tarea', $tarea)
->with('estados', $estados)
->with('method', 'PUT');
}

Como podemos observar le pasamos por parámetro un dato llamado ‘method’, el cual va a
cambiar dependiendo de si lo enviamos por ‘POST’ o ‘PUT’.

Página 18 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Luego vamos a editar el archivo index.blade.php con el siguiente código:

@extends('layouts.app')
@section('content')
<div class="container">
@if(Session::has('notice'))
<div class="alert alert-success">
{{ Session::get('notice') }}
</div>
@endif
<h1> Lista de tareas </h1>
<div class="row">
<div class="col-lg-12">
{!! link_to('tareas/create', 'Crear', ['class' => 'btn btn-
primary']) !!}
</div>
</div>
<table class="table">
<thead>
<tr>
<th style="width: 35%"> Título </th>
<th style="width: 35%"> Estado </th>
<th style="width: 10%"> </th>
<th style="width: 10%"> </th>
<th style="width: 10%"> </th>
</tr>
</thead>
<tbody>
@foreach ($tareas as $tarea)
<tr>
<td> {{ $tarea->titulo }} </td>

Página 19 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

<td> {{ $tarea->estado->nombre }} </td>

<td>
{!! link_to('tareas/'.$tarea->id, 'Ver', ['class' =>
'btn btn-primary']) !!}
</td>
<td>
{!! link_to('tareas/'.$tarea->id.'/edit', 'Editar',
['class' => 'btn btn-primary']) !!}
</td>
<td>
{!! Form::open(array('url' => 'tareas/' . $tarea->id,
'method' => 'DELETE')) !!}
{!! Form::submit('Eliminar', ['class' => 'btn btn-
danger']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection

Usamos el helper link_to para crear un enlace al formulario de creación de tareas:

{!! link_to('tareas/create', 'Crear', ['class' => 'btn btn-primary']) !!}

Recorremos las tareas creadas actualmente por el usuario, podremos verlas:

{!! link_to('tareas/'.$tarea->id, 'Ver', ['class' => 'btn btn-primary'])
!!}

Editarlas:
{!! link_to('tareas/'.$tarea->id.'/edit', 'Editar', ['class' => 'btn btn-
primary']) !!}

O bien, eliminarlas:
{!! Form::open(array('url' => 'tareas/' . $tarea->id, 'method' =>
'DELETE')) !!}
{!! Form::submit('Eliminar', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}

Es importante observar que en este último, debemos crear un formulario para hacer un
envío con el método ‘DELETE’, al igual que lo hacíamos en el formulario para guardar con
‘POST’ o ‘PUT’.

Y debemos modificar el método index también con el siguiente código:

public function index()
{
$tareas = User::find(Auth::id())->tareas;
return View('tareas.index')->with('tareas', $tareas);
}

Página 20 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Por último y para termina vamos a reemplazar show.blade.php con el siguiente código:
@extends('layouts.app')
@section('content')
<div class="container">
<h1> {{ $tarea->titulo }} ({{ $tarea->estado->nombre }}) </h1>
<div class="row">
<div class="col-lg-12">
{{ $tarea->descripcion }}
</div>
<hr />
<div class="col-lg-12">
{!! link_to('tareas', 'Volver', ['class' => 'btn btn-danger'])
!!}
</div>
</div>
</div>
@endsection

Solamente para ver la tarea con su descripción.

Y reemplazamos el método por lo siguiente:

public function show($id)
{
$tarea = Tarea::where(array(
'id' => $id,
'user_id' => Auth::id()
))->first();
return View('tareas.show')
->with('tarea', $tarea);
}

Página 21 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Validaciones
Bueno, ya tenemos nuestra aplicación funcionando, podemos registrarnos, iniciar sesión y
administrar tareas. Sin embargo, por si no lo notaste, cuando guardamos una tarea no
tenemos en cuenta los campos de validación. Aunque las validaciones parecen siempre un
dolor de cabeza, Laravel nos permite hacerlo más llevadero, e incluso en esta última
versión es más fácil que nunca.

En primer lugar vamos a detenernos en algo, si volvemos a nuestro controlador de tareas,

podemos ver que tanto en los métodos store(), como update(), tenemos el siguiente
parámetro:
Request $request

Los objetos de tipo Request nos permiten recuperar datos del cliente, como por ejemplo los
campos ingresados por el usuario.

Entonces vamos a crear una clase Request de la siguiente forma. Abrimos la consola e
ingresamos:
php artisan make:request TareasRequest

Ahora si vamos a app/Http/Requests podemos encontrar la clase que acabamos de crear

TareasRequest. Aquí vamos a definir las validaciones de la siguiente manera:
public function authorize()
{
return false;
}

Lo reemplazamos para que devuelva true.

public function authorize()
{
return true;
}

Página 22 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Y luego reemplazamos el método rules():

public function rules()
{
return [
'titulo' => 'required|min:5|max:255',
'descripcion' => 'required|max:800',
'estado_id' => 'required|numeric'
];
}

Ahora para que el controlador acepte estas validaciones vamos a reemplazar la cabecera de
los métodos store() y update(). Primero vamos a TareasController y agregamos la siguiente
línea en la cabecera (antes de class):
use App\Http\Requests\TareasRequest;

Ya está disponible la clase, así podemos usarla. Así que reemplazamos:

public function store(TareasRequest $request)

Y luego:
public function update(TareasRequest $request, $id)

(En ambos casos reemplazamos Request por TareasRequest)

Y en la vista, save.blade.php vamos a agregar el contenedor que muestre sí hay errores de

validación:
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

Personalizar errores
Por último, al ingresar datos incorrectos, podemos observar que estos se ven así:

• The titulo field is required.

• The descripcion field is required.
• The estado id field is required.

Para cambiar el mensaje de error, simplemente debemos agregar un método a la clase

TareasRequest:

Página 23 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

public function messages()

{
return [
'titulo.required' => 'Usted debe ingresar un título',
'descripcion.required' => 'Usted debe ingresar una descripción',
'estado_id.required' => 'Usted debe ingresar un estado'
];
}

Los errores entonces se verán ahora así:

• Usted debe ingresar un título

• Usted debe ingresar una descripción
• Usted debe ingresar un estado

Vue.js y Ajax
Bien, en esta publicación vamos a ver cómo integrar Vue a un proyecto hecho en Laravel.
El ejemplo será el siguiente: vamos a administrar una lista de notas con Ajax. Será muy
simple, sin embargo llevaremos a cabo una serie de pasos como crear migraciones,
compilar un archivo .Vue, usar la librería de vue-resource, etc.

En primer lugar, antes de empezar debemos tener instalado lo siguiente:

• Composer
• Node.js

En el caso de Node.js, la instalación del mismo, nos permitirá usar el comando npm. Podés
probar en tu computadora, abriendo una terminal (símbolo de sistema en Windows) y
escribir lo siguiente:
npm --info

Si te devuelve un error, es porque nunca instalaste Node. Es un buen momento para

hacerlo:

https://nodejs.org/es/

Creación del proyecto

Abrimos la consola y creamos nuestro proyecto Laravel:

composer create-project laravel/laravel laravel_vuejs --prefer-dist

Página 24 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Una vez instalado, vamos a la raíz del proyecto y buscamos un archivo llamado:
‘package.json’, donde van las dependencias (‘devDependencies’), agregamos vue y vue-
resource:
"vue": "^2.1.10",
"vue-resource": "^1.3.4"

Probablemente ya exista la primera (vue), de ser así, la dejamos y sólo agregamos ‘vue-
resource’

Luego volvemos a la consola y entramos en nuestro proyecto:

cd laravel_vuejs

Y ejecutamos el comando de node que nos va a instalar estas dependencias:

npm install

(Puede tardar bastante, a esperar…)

Modelo y Migración

Primero vamos creamos una base de datos, en mi caso se va a llamar ‘laravel_vuejs’. Luego
en el raíz de nuestro proyecto editamos .env:
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_vuejs
DB_USERNAME=root
DB_PASSWORD=

(Escribimos los datos para conectar a nuestra base de datos)

Volvemos a la consola y escribimos lo siguiente:

php artisan make:migration create_notas_table

Vamos al archivo que acabamos, en database/migrations de crear y le cambiamos los

métodos up() y down() por:
public function up()
{
Schema::create('notas', function(Blueprint $table){
$table->increments('id');
$table->string('descripcion');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('notas');
}

Página 25 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Volvemos a la consola y creamos la tabla:

php artisan migrate

Y por último el modelo:

php artisan make:model Nota

Controlador y Rutas

Vamos a la consola y creamos el controlador:

php artisan make:controller NotasController

Una vez creado, nos dirigimos al controlador en app/Http/Controllers, y lo editamos con el

siguiente código:
use App\Nota;
class NotasController extends Controller {
public function notas(){
return view('notas');
}
public function mostrarNotas(){
return Nota::all();
}
public function guardarNota(Request $request){
$nota = new Nota();
$nota->descripcion = $request->input('descripcion');
$nota->save();
return $this->mostrarNotas();
}
public function eliminarNota(Request $request){
$nota = Nota::find($request->input('id'));
$nota->delete();
return $this->mostrarNotas();
}
}

Analicemos el código. Los métodos:

• notas(): Carga una vista (GET)

• mostrarNotas(): Devuelve un json con las notas cargadas (GET)
• guardarNota(): Recibe una nota, la guarda y devuelve las notas actualizadas
(POST)
• eliminarNota(): Recibe una nota, la elimina y devuelve las notas actualizadas
(POST)

Ahora nos queda agregar las rutas en routes/web.php:

Route::get('/notas', 'NotasController@notas');

Página 26 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Route::get('/mostrar_notas', 'NotasController@mostrarNotas');
Route::post('/guardar_nota', 'NotasController@guardarNota');
Route::post('eliminar_nota', 'NotasController@eliminarNota');

Vista

Ahora vamos a crear la vista para administrar las notas, dentro de resources/views con el
nombre ‘notas.blade.php’,:
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel y Vue</title>
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
</head>
<body>
<div id="app" class="container">
<h1> Notas </h1>
<notas></notas>
</div>
<input type="hidden" id="csrf_token" value="{{ csrf_token() }}" />
<script src="{{ elixir('js/app.js') }}"></script>
</body>
</html>

Vamos a detenernos para entender algunas líneas de este código:

Cargamos una hoja de estilos, esto tiene que ver más con la parte estética, no influye en el
funcionamiento:
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">

Incluimos el componente:
<notas></notas>

Aunque aún no lo hemos creado, esta es la forma de incluir componentes. Toda la parte
visual de la administración de notas se incluye con las etiquetas con dicho nombre.
Etiquetas que por supuesto no son de html, sino inventadas por el desarrollador.

Incluimos un campo de entrada con el token:

<input type="hidden" id="csrf_token" value="{{ csrf_token() }}" />

Página 27 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

Aunque las peticiones por POST las haremos con ajax, de cualquier manera tenemos que
enviar el token en cada envío, ya que Laravel por cuestiones de seguridad espera por
cabecera este dato.

Y por último incluimos el .js base de la aplicación, el cual va a incluir por ejemplo vue,
vue-resource y los componentes que vayamos creando:
<script src="{{ elixir('js/app.js') }}"></script>

Creando nuestro componente

Antes de continuar vamos a detenernos en algo importante: ¿Qué es un componente? Un

componente es código HTML extendido. Va a estar divido en dos partes: una vista y un
controlador. La vista es el código HTML, mientras que el controlador es el código
Javascript que le da funcionalidad a esa vista.

Creo que a estas alturas la mayoría deben saber de qué se trata, pero si no es así podés verlo
de la siguiente forma: imaginate un tablero que contiene una pantalla, botones y palancas.
La vista serían justamente esos elementos que en conjunto forman el tablero, pero será el
controlador quien por ejemplo guarde la información que vemos y no vemos por pantalla
(datos), o que al pulsar en un botón suceda algo (métodos)

La ventaja del componente es que podemos encapsular un apartado visual y reutilizarlo

cada vez que queramos.

Para crear nuestro componente primero tenemos que incluir las librerías, entonces vamos a
resources/assets/js/app.js y copiamos el siguiente código:
require('./bootstrap');
window.Vue = require('vue');
Vue.use(require('vue-resource'));
Vue.http.headers.common['X-CSRF-TOKEN'] =
document.getElementById('csrf_token').value;

Aquí incluimos bootstrap y vue. También vue-resource la librería que nos va a permitir
hacer peticiones http. Y finalmente agregamos el token para no tener que preocuparnos en
cada petición por POST.

Y más abajo incluimos el componente que aún no hemos creado:

Vue.component('notas', require('./components/Notas.vue'));

Vamos a resources/assets/js/components y creamos un archivo llamado Notas.vue con el

siguiente código:
<template>
<form>
<div class="form-group">

Página 28 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

<label> Descripción </label>

<input type="text" class="form-control" v-
model="nota_temp.descripcion" />
</div>
<button type="button" class="btn btn-primary" v-
on:click="guardarNota()"> Guardar nota </button>
<hr />
<ul>
<li v-for="n in notas">
{{ n.descripcion }}
|
<a href="#" class="text text-danger" v-
on:click="eliminarNota(n)"> Eliminar </a>
</li>
</ul>
</form>
</template>

<script>
export default {
data(){
return {
nota_temp: {
descripcion: ''
},
notas: []
}
},
methods: {
mostrarNotas(){
this.$http.get('/mostrar_notas').then(response => {
this.notas = response.body;
}, response => {
alert('Error');
});
},
guardarNota(){
this.$http.post('/guardar_nota', {
descripcion: this.nota_temp.descripcion
}).then(response => {
this.nota_temp.descripcion = '';
this.notas = response.body;
}, response => {
alert('Error');
});
},
eliminarNota(p_nota){
this.$http.post('/eliminar_nota', {
id: p_nota.id
}).then(response => {
this.notas = response.body;
}, response => {
alert('Error');
});
}
},
created(){

Página 29 de 30
 Laravel 5 - https://fernando-gaitan.com.ar/

this.mostrarNotas();
}
}
</script>

Finalmente volvemos a la consola y compilamos el componente que acabamos de crear:

npm run dev

(Cada cambio requiere que hagamos esto)

Página 30 de 30