Como crear un CRUD con Laravel 5.6 – Parte 3

5 minuto(s)

En esta página:

Demo

En el capitulo anterior Como crear un CRUD con Laravel 5.6 – Parte 2 creamos el Controlador Postres, dentro de este controlador colocamos los métodos CRUD junto a métodos de Laravel para gestionar los registros de la base de datos, en este capitulo numero tres, crearemos las vistas con los formularios para crear, editar, eliminar y claro la vista para listar o leer los registros.

NOTA:

La librería “Laravel Collective” que usamos en este tutorial para crear los formularios del CRUD, ha quedado obsoleta, esto no depende de nosotros si no de los Desarrolladores que dan soporte a esta librería, ellos decidieron darle de baja.

Si crees que aún te sirve el resto del código ADELANTE, si no es así estamos trabajando en un nuevo tutorial “Como crear un CRUD con Laravel 5.8” el cual estaremos publicando en las próximas semanas, dentro de este tutorial explicaremos como crear formularios en las versiones modernas de Laravel.

El Nuevo Tutorial ya se encuentra en este enlace: Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 1

Partes

Parte 1
Parte 2
Parte 3
Parte 4 (Final – Código Fuente GitHub)

En el core de Laravel existe una carpeta predeterminada para colocar las vistas de nuestro proyecto, vamos a crear una carpeta para colocar las vistas del sistema CRUD.

Dirigete a resources > views y dentro de esta carpeta crea una carpeta con el nombre admin y dentro de este crea otra carpeta llamada postres, para colocar allí las vistas de nuestro sistema CRUD, por último dentro de la carpeta postres crea una carpeta más llamada frm para colocar allí los formularios y llamarlos dinámicamente, así evitamos escribir código repetitivo.


/resources 
  ├──views 
    ├── admin
      ├── postres // Acá coloca las vistas de tu sistema CRUD 
/routes

/resources

├──views

├── admin

├── postres // Acá coloca las vistas de tu sistema CRUD

/routes

Vamos a crear las vistas con Bootstrap 4 Framework, si no sabes que es te recomendamos leer nuestro artículo Que es Bootstrap, Historia y tu Primer Hola Mundo y estés familiarizado con las vistas de este tutorial.

Vistas

Crearemos las vistas en el orden Crear, Leer, Actualizar y Eliminar.

Para crear los formularios en las Vistas vamos a usar Laravel Collective, para que no estés perdido te recomendamos leer nuestro articulo Que es Laravel Collective y como implementarlo en Laravel.

Crear (Create)

En esta vista vamos a crear un formulario en donde apunta a la ruta postres.store que es básicamente el método que creamos en el Controlador PostresController del capitulo 3 de este tutorial. Asimismo le damos soporte para archivos enctype=”multipart/form-data” con ‘files’ => ‘true’ vía Laravel Collective.


{!! Form::open(['route'=>'postres.store', 'method'=>'STORE', 'files' => true, 'role' => 'form']) !!}              

  <!-- Llamamos a un formulario creado aparte, evitando así reescribir código -->
  @include('admin.postres.frm.prt')
                                                      
{!! Form::close() !!}

{!! Form::open(['route'=>'postres.store', 'method'=>'STORE', 'files' => true, 'role' => 'form']) !!}

@include('admin.postres.frm.prt')

{!! Form::close() !!}

Puedes ver que dentro del formulario estamos llamando a una vista creada en el archivo prt.php dentro de la carpeta frm es decir:


/resources 
  ├──views 
    ├── admin
      ├── postres
        ├── frm 
          ├── prt.php // Archivo con la vista del Formulario 
/routes

/resources

├──views

├── admin

├── postres

├── frm

├── prt.php // Archivo con la vista del Formulario

/routes

Con esto usaremos únicamente un archivo para el formulario, así evitamos reescribir el código del formulario.


@include('admin.postres.frm.prt')

@include('admin.postres.frm.prt')

Leer (Read)

La siguiente vista va ser la principal en donde se listarán todos los registros de la base de datos, vamos a recorrer y listar los registros de la base de datos con @foreach dentro de una tabla HTML


@foreach($postres as $pos)
  {{$pos->nombre}}
  {{$pos->precio}}
  ...
  ...
@endforeach

@foreach($postres as $pos)

...

@endforeach

Las clases que se ven son clases nativas de Bootstrap 4 y en la tabla crearemos 5 columnas que son nombre, precio, stock, imagen y acciones, en esta última columna colocaremos 2 botones para editar y eliminar el registro correspondiente y un botón que dice Agregar que al hacerle clic nos envía a la vista para Crear nuevo registro


<a href="{{url ('admin/postres/create') }}" class="btn btn-success mt-4 ml-3">
  Crear
</a>

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Stock</th>
      <th>Imagen</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
  @foreach($postres as $pos) 
  <tr>
    <td class="v-align-middle">{{$pos->nombre}}</td>
    <td class="v-align-middle">{{$pos->precio}}</td>
    <td class="v-align-middle">{{$pos->stock}}</td>
    <td class="v-align-middle">
      <img src="{!! asset("uploads/$pos->imagen") !!}" width="30" class="img-responsive">
    </td> 
    <td class="v-align-middle"> 
      <!-- Acá las acciones para cada registro -->
    </td>
  </tr>
  @endforeach 
  </tbody>
</table>

Crear

</a>

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

<th>Stock</th>

<th>Imagen</th>

<th>Acciones</th>

</tr>

</thead>

<tbody>

@foreach($postres as $pos)

<tr>

<td class="v-align-middle">{{$pos->nombre}}</td>

<td class="v-align-middle">{{$pos->precio}}</td>

<td class="v-align-middle">{{$pos->stock}}</td>

<img src="{!! asset("uploads/$pos->imagen") !!}" width="30" class="img-responsive">

</td>

</td>

</tr>

@endforeach

</tbody>

</table>

Actualizar (Update)

En la siguiente vista vamos a llamar a nuestro formulario prt.php al igual que hicimos en la Vista Crear, pero esta vez lo usaremos para editar los datos de un registro seleccionado.


{!! Form::model($postres,['route'=>['postres.update', $postres->id],'files' => true, 'method'=>'PUT', 'role' => 'form']) !!}

  @include('admin.postres.frm.prt')

{!! Form::close() !!}

{!! Form::model($postres,['route'=>['postres.update', $postres->id],'files' => true, 'method'=>'PUT', 'role' => 'form']) !!}

@include('admin.postres.frm.prt')

{!! Form::close() !!}

Lo que hacemos es pasar el id del registro que queremos editar en la ruta del formulario ‘route’=>[‘postres.update’

Eliminar (Delete)

En esta parte no crearemos una Vista, mas bien para que sea dinámico crearemos un botón para eliminar un registro que hará llamado al método destroy que creamos en Nuestro Controlador PostresController en el capítulo 2 de este tutorial y también agregamos de paso un botón para Editar el registro, cuando le haces clic a este botón te envía a la Vista para Actualizar el registro determinado


<a href="{{url ('admin/postres/create') }}" class="btn btn-success mt-4 ml-3">
  Crear
</a>

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Stock</th>
      <th>Imagen</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
  @foreach($postres as $pos) 
  <tr>
    <td class="v-align-middle">{{$pos->nombre}}</td>
    <td class="v-align-middle">{{$pos->precio}}</td>
    <td class="v-align-middle">{{$pos->stock}}</td>
    <td class="v-align-middle">
      <img src="{!! asset("uploads/$pos->imagen") !!}" width="30" class="img-responsive">
    </td> 
    <td class="v-align-middle">
      <!-- Botones Editar y Eliminar 
      {!! link_to_route('postres.edit', $title = 'Editar', $parameters = $pos->id, $attributes = ['class'=>'btn btn-primary'] ) !!} 
      {!! Form::button('Eliminar', array('type' => 'submit', 'class' => 'btn btn-danger')) !!} 
    </td>
  </tr>
  @endforeach 
  </tbody>
</table>

Crear

</a>

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

<th>Stock</th>

<th>Imagen</th>

<th>Acciones</th>

</tr>

</thead>

<tbody>

@foreach($postres as $pos)

<tr>

<td class="v-align-middle">{{$pos->nombre}}</td>

<td class="v-align-middle">{{$pos->precio}}</td>

<td class="v-align-middle">{{$pos->stock}}</td>

<img src="{!! asset("uploads/$pos->imagen") !!}" width="30" class="img-responsive">

</td>

<!-- Botones Editar y Eliminar

{!! link_to_route('postres.edit', $title = 'Editar', $parameters = $pos->id, $attributes = ['class'=>'btn btn-primary'] ) !!}

{!! Form::button('Eliminar', array('type' => 'submit', 'class' => 'btn btn-danger')) !!}

</td>

</tr>

@endforeach

</tbody>

</table>

Vamos a validar el borrado de un registro para esto cada ves que el usuario haga clic en el botón Eliminar le lanzaremos una ventana de confirmación si desea eliminar el registro, con esto evitamos que se borren registros por error, agregamos el siguiente código Javascript para hacer esto, agregalo después de la tabla en donde listas los registros (Vista Leer)


<script type="text/javascript">

  function ConfirmDelete()
  {
    var x = confirm("Estas seguro de Eliminar?");
    if (x)
      return true;
    else
      return false;
  }

</script>

function ConfirmDelete()

{

var x = confirm("Estas seguro de Eliminar?");

if (x)

return true;

else

return false;

}

</script>

Por ejemplo agregamos un registro y nos aparecen botones uno para editar y otro para eliminar el registro

Conclusión

En este capitulo hemos visto como crear las Vistas para el sistema CRUD, repásalos bien. En el siguiente y último capitulo hablaremos sobre validaciones y mensajes al Crear, Editar y Eliminar un registro y otros detalles muy importantes.

Al Final del tutorial colocaremos el código en nuestro repositorio Github para que no tengas problemas en implementarlo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.