CRUD en Laravel 5.

4 Hoja de revisión

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

PARTE II: MEJORAR VISTAS CON Rev. 0

Rev. 1
14/Julio/2017

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

Pedro. Código para reutilizar plantillas e incluir

BOOTSTRAP Rev. 2 16/Julio/2017

ayudas.

Pedro. Código para editar y crear un registro

Desarrollado por Ing. Pedro García Guerrero Rev. 3 17/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 ......................................................................................................... 3

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
INTRODUCCIÓN 1 Librería bootstrap
El presente documento mejoraremos el aspecto visual usando la librería bootstrap. Para que nuestra página pueda hacer uso de bootstrap, debemos incluir la librería, que
podemos conseguir de la siguiente dirección:
Recomendaciones iniciales http://getbootstrap.com/getting-started/
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.
Para que los desarrolladores puedan trabajar apropiadamente en su computadora son
necesarios los requerimientos mínimos. Si su pc carece de alguno de estos elementos o
características puede que no funcione correctamente o que tenga problemas de
rendimiento.

Requerimientos mínimos para desarrollo

 Computadora con procesador Core i5 o i5 o AMD FX-8320 o superior
 10GB de espacio libre en HDD
 4GB de memoria ram
 Ratón
 Windows, Linux o Unix de 64bits
 Tarjeta de red
 Puertos USB.

Equipo recomendado para producción

Los requerimientos de producción están fuertemente ligados a la cantidad de usuarios Copiamos la parte referente al css y lo insertamos en la cabecera de nuestro documento
concurrentes y los recursos computacionales demandados por sus procesos. Se estima html, como se muestra a continuación.
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. 2 Herencia de plantillas
 Computadora con procesador Intel Core i5 o AMD FX-8320
 8GB de memoria ram Creamos el archivo plantilla.blade.php en el directorio de vistas, con la estructura básica
y le agregamos el link para soportar los estilos de bootstrap, la librería para jquery (la
 Ratón compatible con Windows
necesita bootstrap) y la librería para bootstrap:
 Microsoft Windows 7 profesional edition, o cualquier otra que incluya IIS
resources\views\plantilla.blade.php

<!DOCTYPE html>
<html> <div class="row">
<head> <div class="col-xs-12">
<meta charset="utf-8"> <h1>Agenda (CRUD Laravel 5.4)</h1>
<title>Plantilla del sitio</title> </div>
<!-- Latest compiled and minified CSS --> @yield('contenido')
<link rel="stylesheet" </div>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstra </div>
p.min.css"
integrity="sha384- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" <script
crossorigin="anonymous"> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.mi
</head> n.js"></script>
<body> <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> min.js"
<script integrity="sha384-
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.mi Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
n.js"></script> crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --> </script>
<script </body>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap. </html>
min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"> 1.1 Vista inicial (index)
</script>
</body>
</html> Para usar la herencia de plantillas, modificamos el archivo index.blade.php para indicarle
que hereda de la plantilla y solo insertará donde está la etiqueta @yield
Ahora procedemos a crear la distribución:
resources\views\index.blade.php
<!DOCTYPE html>
<html> @extends('plantilla')
<head> @section('contenido')
<meta charset="utf-8"> <div class="col-sm-8" style="background-color: #cccccc">
<title>Plantilla del sitio</title> <h1>Lista de Amigos</h1>
<link rel="stylesheet" <h4><a href="{{route('amigos.create')}}">Registrar nuevo
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstra amigo</a></h4>
p.min.css" @if($amigos)
integrity="sha384- <table class="table table-hover table-stripped">
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" <thead>
crossorigin="anonymous"> <th>Nombre</th>
</head> <th>Edad</th>
<body> <th>Sueldo</th>
<!-- Distribución de la página principal --> <th>local</th>
<div class="container"> <th colspan="3"><center>Acciones</center></th>
 </thead> Con estos sencillos cambios logramos que mejorara sustancialmente el aspecto visual,
<tbody>
@foreach ($amigos as $amigo)
obteniendo la siguiente vista:
<tr>
<td>{{$amigo->nombre_tx}}</td>
<td>{{$amigo->edad_n}}</td>
<td>${{$amigo->sueldo_n}}</td>
<td>{{$amigo->local_yn}}</td>
<td> <a href="{{ route('amigos.show' , $amigo-
>amigo_id)}}"> Ver </a></td>
<td> <a href="{{ route('amigos.edit' , $amigo-
>amigo_id)}}"> Editar </a></td>
<td>
<form action="{{ route('amigos.destroy', $amigo-
>amigo_id)}}" method="post">
<input name="_method" type="hidden"
value="DELETE">
<input name="_token" type="hidden" value="{{
csrf_token() }}">
<button type="submit"> Borrar </a>
</form>
</td>
</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'));
}
:
 Obtenemos la siguiente vista:
1.2 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.3 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.4 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.5 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.6 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: