CRUD en Laravel 5.

4 Hoja de revisión

Versión Núm. Fecha Descripción de la revisión

PARTE III: LARAVEL Y VUE JS Rev. 0

Rev. 1
17/Julio/2017

18/Julio/2017
Pedro. Propuesta de Plantilla e índice

Pedro. Código para reutilizar plantillas e incluir

(PROGRAMACIÓN REACTIVA) Rev. 2 19/Julio/2017

ayudas.

Pedro. Código para editar y crear un registro

Desarrollado por Ing. Pedro García Guerrero Rev. 3 20/Julio/2017 Pedro. Terminar el documento

Rev. 4

Rev. 5

Rev. 6

 ITSLP
Av. Tecnológico • S/N
Soledad de Graciano Sánchez, SLP 78320
Teléfono 444 189 06 67 • Email pgarcia1000@itslp.edu.mx
Contenido
INTRODUCCIÓN ................................................................................................................................. 3

RECOMENDACIONES INICIALES ..................................................................................................................... 3

Requerimientos mínimos para desarrollo ........................................................................................ 3
Equipo recomendado para producción ............................................................................................ 3

1 LIBRERÍA BOOTSTRAP................................................................................................................ 3

2 HERENCIA DE PLANTILLAS .................................................... ¡ERROR! MARCADOR NO DEFINIDO.

1.1 VISTA INICIAL (INDEX) .................................................................................................................... 4

1.2 VISTA PARA VER UN SOLO REGISTRO (SHOW) ..................................................................................... 6
1.3 VISTA PARA BORRAR UN REGISTRO (DELETE) ...................................................................................... 6
1.4 VISTA PARA MOSTRAR MENSAJES Y/O AYUDAS (ASIDE) ......................................................................... 7
1.5 VISTA PARA EDITAR UN REGISTRO (EDIT) ........................................................................................... 8
1.6 VISTA PARA CREAR UN REGISTRO (CREATE) ........................................................................................ 9
  Microsoft Windows 7 profesional edition, o cualquier otra que incluya IIS
INTRODUCCIÓN
El presente documento usaremos Vue JS que una librería de programación reactiva. Con 1 Librería Vue JS (The Progressive JavaScript
ella pretendemos sustituir en gran parte a javascript y jquery. Mejoraremos la
comprensión del código y aceleraremos el desarrollo de las vistas, pues Vue JS se integra
Framework)
de manera natural a LARAVEL.
Vue.js es un nuevo framework de JavaScript “reactivo” que implementa el enlace de
datos en dos direcciones o “two way data binding” (entre la vista y el modelo) de una
Recomendaciones iniciales manera muy eficiente y rápida.
Es deseable haber tenido un acercamiento con bootstrap y tener a la mano libros,
tutoriales y link del mismo y así tener fluidez en el desarrollo. Vue.js, está más enfocado hacia la vista, y puede ser implementado en el HTML de
Para que los desarrolladores puedan trabajar apropiadamente en su computadora son cualquier proyecto web sin requerir cambios drásticos en el marcado. Por otro lado,
necesarios los requerimientos mínimos. Si su pc carece de alguno de estos elementos o también existen componentes que permiten manejar rutas, peticiones AJAX etc.
características puede que no funcione correctamente o que tenga problemas de
rendimiento. Vue es la parte central que se encarga de mantener en sincronía los datos del modelo y
la vista, este concepto es llamado data driven view. En palabras simples, si los datos
Requerimientos mínimos para desarrollo cambian, la vista cambiara también.
 Computadora con procesador Core i5 o i5 o AMD FX-8320 o superior
 10GB de espacio libre en HDD
Es por eso que en muchos lugares de la documentación veras que se refiere a Vue como
 4GB de memoria ram el vm (view-model). Para lograr esta sincronización, Vue utiliza directivas que se escriben
 Ratón como atributos html en los elementos que necesites enlazar al vm, y cuando los datos
 Windows, Linux o Unix de 64bits del modelo se modifiquen, todos los elementos enlazados serán actualizados también.
 Tarjeta de red
 Puertos USB. Para que nuestra página pueda hacer uso de Vue.js, debemos incluir la librería, que
podemos conseguir de la siguiente dirección:
Equipo recomendado para producción https://vuejs.org/v2/guide/installation.html
Los requerimientos de producción están fuertemente ligados a la cantidad de usuarios
concurrentes y los recursos computacionales demandados por sus procesos. Se estima
que SII atenderá al total de la población del itslp, que se estima esta entre 5000 alumnos
y 200 trabajadores. Aunque no todos usaran el sistema al mismo tiempo debemos
considerar esa posibilidad.
 Computadora con procesador Intel Core i5 o AMD FX-8320
 8GB de memoria ram
 Ratón compatible con Windows
 2 Vista inicial (index)
Modificamos el archivo index.blade.php para indicarle que hereda de la plantilla y solo
insertará donde está la etiqueta @yield

resources\views\index.blade.php

@extends('plantilla')
@section('contenido')
<div class="col-sm-8" style="background-color: #cccccc">
<h1>Lista de Amigos</h1>
<h4><a href="{{route('amigos.create')}}">Registrar nuevo
amigo</a></h4>
@if($amigos)
<table class="table table-hover table-stripped">
<thead>
<th>Nombre</th>
<th>Edad</th>
<th>Sueldo</th>
<th>local</th>
<th colspan="3"><center>Acciones</center></th>
</thead>
Damos click en cdnj para obtener el link a la librería: <tbody>
https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js @foreach ($amigos as $amigo)
<tr>
<td>{{$amigo->nombre_tx}}</td>
De una vez insertamos la librería axios: <td>{{$amigo->edad_n}}</td>
https://unpkg.com/axios/dist/axios.min.js <td>${{$amigo->sueldo_n}}</td>
<td>{{$amigo->local_yn}}</td>
<td> <a href="{{ route('amigos.show' , $amigo-
Insertamos ambas librerías en la plantilla de donde heredaran todas las demás vistas: >amigo_id)}}"> Ver </a></td>
<td> <a href="{{ route('amigos.edit' , $amigo-
resources\views\plantilla.blade.php >amigo_id)}}"> Editar </a></td>
<td>
: <form action="{{ route('amigos.destroy', $amigo-
<!-- Vue.js framework reactivo--> >amigo_id)}}" method="post">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"> <input name="_method" type="hidden"
</script> value="DELETE">
<input name="_token" type="hidden" value="{{
<!-- Axios para trabajar con laravel y ajax --> csrf_token() }}">
<script src="https://unpkg.com/axios/dist/axios.min.js"> <button type="submit"> Borrar </a>
</script> </form>
</td>
</body> </tr>
 @endforeach
</tbody>
</table>
{{ $amigos->render() }}
@endif
</div>
<div class="col-sm-4" style="background-color: white">
Mensajes...
</div>
@endsection

Ya logramos la división de las secciones y los estilos bootstrap. Pero para lograr la
paginación, también debemos modificar una línea del respectivo archivo controlador:

app\Http\Controllers\AmigoController.php

:
public function index()
{
$amigos = Amigo::orderBy('nombre_tx','DESC')->paginate();
return view('index', compact('amigos'));
}
:
Con estos sencillos cambios logramos que mejorara sustancialmente el aspecto visual,
obteniendo la siguiente vista:
 Obtenemos la siguiente vista:
1.1 Vista para Ver un solo registro (show)
Modificamos el archivo show.blade.php donde le indicamos que hereda del archivo
plantilla.blade.php y usamos estilos de bootstrap para mejorar el aspecto visual.
resources\views\show.blade.php

@extends('plantilla')

@section('contenido')
<div class="col-sm-12" style="background-color: #cccccc">
@if($amigo)
<h2>Amigo: {{$amigo->nombre_tx}} </h2>

<table class="table table-hover table-stripped">

<thead>
<th>Edad</th>
<th>Sueldo</th>
<th>local</th>
<th span=2>Acciones</th>

</thead> 1.2 Vista para Borrar un registro (delete)

<tbody>
<tr>
<td>{{$amigo->edad_n}}</td>
Cuando eliminamos un registro, este simplemente desaparece, sin retroalimentar al
<td>${{$amigo->sueldo_n}}</td> usuario, esto no es recomendable, así que mejoraremos el código para que nos muestre
<td>{{$amigo->local_yn}}</td> un aviso cuando haya eliminado exitosamente un registro.
<td> <a href="{{ route('amigos.edit',$amigo->amigo_id)}}">
Editar </a></td>
<td> <a href="{{ route('amigos.destroy',$amigo- Primero, dentro del directorio view creamos otro directorio que llamaremos fragmentos
>amigo_id)}}"> Borrar </a></td> pues contendrá pequeñas vistas que nos ayudarán a gestionar las ayudas, descripciones
</tr>
</tbody> y mensajes del sistema.
</table>
@endif
Dentro de fragmentos, creamos el archivo de info:
</div>
@endsection
resources\views\fragmentos\info.blade.php

@if(Session::has('info'))
<div class="alert alert-info">
<button type="button" class='close' data-dismiss="alert">
&times;
</button>
{{Session::get('info')}}
</div> Obtenemos la siguiente vista justo después de eliminar un registro:
@endif

Modificamos la vista index (aprox. Línea 8), para indicar donde se insertara el mensaje:

resources\views\fragmentos\index.blade.php

:
:
<h4><a href="{{route('amigos.create')}}">Registrar nuevo
amigo</a></h4>
@include('fragmento.info');
@if($amigos)
<table class="table table-hover table-stripped">
:
:

Modificamos AmigoControlador (el método destroy() ), donde enviamos un mensaje a

la vista info:
:
:
public function destroy($id)
{
try {
$amigo=Amigo::findOrFail($id);
$amigo->delete();
return back()->with('info','El amigo fué eliminado');
} catch (Exception $e) {
return "Error fatal: ".$e.getMessage();
}
:
:

1.3 Vista para mostrar mensajes y/o ayudas (aside)

Cuando estamos en una vista, es deseable contar con una breve descripción de esta, que
auxilie al usuario en las operaciones que puede realizar.

Dentro del directorio fragmentos el archivo lateral que contendrá los textos que
aparecerán a la derecha de los formularios:
 resources\views\fragmentos\lateral.blade.php

<p class='alert alert-info'>

En este formulario podemos crear, eliminar, listar y editar los
registros de amigos.
</p>

Modificamos la vista index:

resources\views\index.blade.php

:
:
<div class="col-sm-4" style="background-color: white">
@include('fragmento.lateral')
</div>

@endsection

Y también modificamos la vista show (la modificación luce idéntica):

resources\views\show.blade.php

:
:
<div class="col-sm-4" style="background-color: white">
@include('fragmento.lateral')
</div>

@endsection

Los formularios ahora pueden contar con un mensaje a la derecha:

1.4 Vista para Editar un registro (edit)

Ahora mejoraremos la vista para editar un registro, modificamos el archivo
edit.blade.php.

resources\views\edit.blade.php

@extends('plantilla')

@section('contenido')
<div class="col-sm-8" style="background-color: #cccccc">
<h1>Edición de un Amigo</h1>

<form method="POST" action="/agenda/public/amigos/{{$amigo-

>amigo_id}}"
class="form-group">

<input type="hidden" name="_method" value="PUT">

<input type="hidden" name="_token" value="{{ csrf_token() }}">

<label class="label label-default" >Nombre</label>

<input class="form-control" type="text" name="nombre"
placeholder="Nombre" value="{{$amigo->nombre_tx}}" /> <br/>

<label class="label label-default" >Edad</label>

<input class="form-control" type="text" name="edad"
placeholder="Edad" value="{{$amigo->edad_n}}" /> <br/>

<label class="label label-default" >Sueldo</label>

<input class="form-control" type="text" name="sueldo"
placeholder="Sueldo" value="{{$amigo->sueldo_n}}" /> <br/>

<label class="label label-default" >Vive en la ciudad?</label>

<input class="form-control" type="text" name="local"
placeholder="0 o 1" value="{{$amigo->local_yn}}" /> <br/>

<button class="btn btn-primary pull-right"

type="submit">Actualizar</button>
<br/>
<br/>

</form> 1.5 Vista para Crear un registro (create)

</div>

<div class="col-sm-4" style="background-color: white"> Ahora mejoraremos la vista para crear un registro, modificamos el archivo
<p class='alert alert-info'> create.blade.php.
Introduce los datos y despúes oprime el boton de actualizar.
Si no quieres editar, resources\views\create.blade.php
solo regresa a la página previa.
</p> @extends('plantilla')
</div>
@endsection @section('contenido')
<div class="col-sm-8" style="background-color: #cccccc">
A continuación vemos como luce el formulario para editar un amigo:
<h1>Registrar un nuevo Amigo</h1>

<form method="post" action="/agenda/public/amigos" >

<input type="hidden" name="_token" value="{{ csrf_token() }}">

<label class="label label-default" >Nombre</label>

<input class="form-control" type="text" name="nombre"
placeholder="Nombre" /> <br/>

<label class="label label-default" >Edad</label>

<input class="form-control" type="text" name="edad"
placeholder="Edad" /> <br/>

<label class="label label-default" >Sueldo</label>

<input class="form-control" type="text" name="sueldo"
placeholder="Sueldo" /> <br/>

<label class="label label-default" >Vive en la ciudad?</label>

<input class="form-control" type="text" name="local"
placeholder="0 o 1" /> <br/>

<button class="btn btn-primary pull-right"

type="submit">Registrar</button>
<br/>
<br/>

</form>
</div>

<div class="col-sm-4" style="background-color: white">

<p class='alert alert-info'>
Introduce los datos y despúes oprime el boton de Registrar. Si Con esto terminamos este tutorial. En el próximo veremos cómo usar la librería VUE JS.
no quieres agregar,
solo regresa a la página previa.
</p>
</div>
@endsection

A continuación vemos como luce el formulario para crear un registro de amigo: