CRUD DE DATOS CON LARAVEL 5.4 INTRODUCCIÓN.
- Aprenderemos a
realizar un crud de datos con laravel 5.4. Este crud permitirá eliminar ,guardar,
buscar, editar la información de los registros.
Objetivos
Ø Diseñaremos un CRUD de datos para una tabla SQL.
Ø Crearemos un controlador de recurso para realizar el CRUD.
Ø Realizaremos una validación de datos con Laravel
Ø Traduciremos los mensajes de error de Laravel
Ø Diseñaremos las diferentes vistas para el funcionamiento del CRUD
Ø Usaremos el modelo de datos de Laravel para hacer una conexión a una tabla.
Ø Definiremos las
rutas para el funcionamiento del CRUD
DEBEMOS TENER CONOCIMIENTOS DE :
1.
Definiremos rutas de laravel con parámetros.
2. Tener conocimientos de programación PHP
3. Manejar el uso de consola de Windows
4. Conocimientos de como descargar laravel
5. Realizar peticiones al ORM de laravel por medio de un controlador.
6. Manejar vistas y plantillas con laravel.
7. Tener conocimientos SQL.
8. Tener conocimientos de las funciones PHP.
Descripción
de lo que se realizara
Se diseñará un archivo que
permita la vista de todos los datos en conjuntoSe desarrollará un módulo de
información que permita la comunicación de datos con la tabla de empleados.
Desarrollo
de los contenidos
1. Activar el servidor Apache y Mysql en la aplicación Xampp.
2. Abrir la consola de Windows y acceder mediante comandos de DOS a la
carpeta del proyecto
3. Abriremos nuestro proyecto Laravel en el editor de su preferencia
4. En la consola de Windows crear el controlador de recurso mediante el comando
php artisan make:controller EmpleadoController --resource
php artisan make:controller EmpleadoController --resource
En la sección uses agregar el llamado al modelo Empleado
use App\Estudiante
En el método o función índice, escribir los siguientes comandos:
6. Guardaremos los cambios del paso anterior, y en la carpeta Resource/views crear una carpeta con el nombre estudiante y dentro de ella crear los archivos index.blade.php .
7. Abrir el archivo de rutas y definir la ruta para el controlador de recurso
Route::resource('estudiante','EstudianteController');
|
8. Guardar los cambios del archivo de rutas.
Recuerda que en tutoriales pasados trabajamos con las plantillas blade, hacemos esta mención ya que heredaremos del archivo madre que teníamos en nuestras plantillas el estilo para que lo podamos visualizar en nuestro archivo index creado anteriormente. Abra el archivo index.blade.php y escriba las siguientes líneas de código:
Recuerda que en tutoriales pasados trabajamos con las plantillas blade, hacemos esta mención ya que heredaremos del archivo madre que teníamos en nuestras plantillas el estilo para que lo podamos visualizar en nuestro archivo index creado anteriormente. Abra el archivo index.blade.php y escriba las siguientes líneas de código:
@extends("madre")
Con esto indicamos que queremos heredar el estilo de nuestra plantilla madre
@section('titulopagina')
Crud de estudiantes
@endsection
Aquí le damos el título que tendrá nuestra página
En el siguiente section “contenido” creamos el panel que contendrá un título, un botón Nuevo y una tabla en donde se visualizará la información de los empleados.
En el siguiente section “contenido” creamos el panel que contendrá un título, un botón Nuevo y una tabla en donde se visualizará la información de los empleados.
@section('contenido')
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Informacion de estudiante</h3>
</div>
<div class="panel-body">
<div class="row">
<a href="#" class="btn btn-info">Nuevo</a>
</div>
<div class="row">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Acciones</th>
<th>Identidad</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>Sexo</th>
<th>Dirección</th>
</tr>
</thead>
<tbody>
@foreach($estudiantes as $estudiantes)
<tr>
<td>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="#" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
<td>{{$estudiante->identidad}}</td>
<td>{{$estudiante->nombres}}</td>
<td>{{$estudiante->apellidos}}</td>
<td>{{$estudiante->sexo}}</td>
<td>{{$estudiante->direccion}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@endsection
Podemos observar en el código ya hemos creado una tabla html con sus propiedades; thead: contendrá el nombre de los campos como encabezado de la tabla
tbody: para este hemos creado un foreach y hemos invocado la información de cada registro campo por campo de nuestra tabla estudiante. En la primera columna de nuestra tabla utilizaremos iconos para determinar las acciones que el usuario desea hacer.
tbody: para este hemos creado un foreach y hemos invocado la información de cada registro campo por campo de nuestra tabla estudiante. En la primera columna de nuestra tabla utilizaremos iconos para determinar las acciones que el usuario desea hacer.
Una vez hecho esto el resultado será el siguiente:Solo sera un ejemplo ya que no hemos podido crear nuestra Tabla.
9. Guardar los cambios del paso anterior. Abrir el archivo EmpleadoController y en el método o función créate escriba el siguiente código:
public function create()
{
return view('empleados.create');
}
10. Ahora en la carpeta resource/views/estudianten crear el archivo create.blade.php y dentro de este escribir el siguiente código o marcas html:
@extends("madre")
@section('titulo')
Información de estudiante
@endsection
@section('contenido')
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Informacion de estudiante</h3>
</div>
<div class="panel-body">
<form method="POST" action="{{route('estudiante.store')}}" class="">
{{csrf_field()}}
{{csrf_field()}}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Identidad:</label>
<input type="text" name="identidad" class="form-control" placeholder="Ingrese numero de identidad">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Nombres:</label>
<input type="text" name="nombres" class="form-control" placeholder="Ingrese nombres">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Apellidos:</label>
<input type="text" name="apellidos" class="form-control" placeholder="Ingrese apellidos">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Direccion:</label>
<input type="text" name="direccion"class="form-control" placeholder="Ingrese direccion">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Fecha N.:</label>
<input type="date" name="fechanac" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Sexo:</label>
<select name="sexo" id="" class="form-control">
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="row" style="margin-top: 25px;">
<div class="col-md-6" style="margin-left: -20px;">
<div class="btn btn-info">Guardar</div>
</div>
<div class="col-md-6" style="margin-left: 5px;">
<div class="btn btn-danger">Cancelar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
@endsection
En el archivo create heredaremos el estilo de la plantilla madre como lo hemos hecho con los otros archivos. En este hemos escrito las marcas html para la creación del formulario en donde se ingresaran y guardaran los registros a la tabla de empleados mediante el metodo POST . Para poder visualizar lo que hemos hecho hasta ahorita debemos agregar en el href del botón Nuevo del index la nueva ruta para el nuevo archivo creado anteriormente:
<a href="{{route('estudiantes.create')}}" class="btn btn-info">Nuevo</a>
Una vez creada la ruta, vamos a nuestro navegador y ponemos la dirección de nuestro archivo http://localhost/mi_nuevo_proyecto_laravel_2/public/empleados/create
Nuestra página se vera de la siguiente manera:
Como se puede observar ya nuestro formulario está completado con los campos de nuestra tabla.
11. Abra el archivo EmpleadoController.php y en el método o función store realizaremos una validación de información, para esto escriba el siguiente código:
$this->validate($request,[
'identidad' =>'required',
'nombres' =>'required',
'apellidos' =>'required',
'fechanac' =>'required',
'sexo' =>'required',
'direccion' =>'required'
]);
d

Y de una vez para la acción de eliminar hacemos lo mismo, en el href del icono para eliminar agregamos el siguiente código:
Con esto, si damos clic en el icono de editar de algún registro nos llevará al archivo edit y en el formulario mostrará la información del registro seleccionado:
20. Volvemos al archivo EmpleadoControllery en el método o función update escriba el siguiente código:
23. Casi para finalizar, en la carpeta resource/views/empleados y crear el archivo show.blade.php; dentro de este archivo copiaremos las mismas líneas de código y marcas HTML que tenemos en el archivo edit.blade.php solamente que en los controles del formulario agregaremos el atributo disabled; luego cambiamos la ruta donde se enviaran los datos y el botón guardar cambiaremos por eliminar y el botón cancelar lo cambiaremos a un enlace que nos lleve al archivo de lista de empleados, debido a que no se necesita validar información, entonces procedemos a borrar HTML y código de Laravel para mostrar alerta, también se cambia el method field de PUT a DELETE
Por lo tanto el archivo quedará de la siguiente manera:
Bibliografía
https://medium.com/@sebazamorano/como-crear-un-crud-en-laravel-5-4-24dc0c8f7ba3
12. Lo anterior permite que Laravel realice una validación de los valores capturados y genere un mensaje de error (sin que se cuelgue la aplicación), mismo que para visualizarlo en nuestra vista create.blade.php debemos agregar en nuestro contenido. La secuencia de códigos para mostrar los errores se descargan del sitio webhttps://laravel.com/docs/5.4/validation#quick-displaying-the-validation-errors

debemos descargar los archivos de mensajes Laravel en nuestro idioma, https://github.com/sebgam/Laravel-lang/tree/master/es
En la carpeta resources/lang/(primero deberá crear la carpeta “es”) y dentro de ella crear los archivos individuales.
13. Una vez culminado el paso anterior y se han guardado los cambios, se procede a cambiar la carpeta de llamado de mensajes de idioma, para ello abra el archivo config/app.php y en la línea 80 realice este cambio.
14. Guardamos los cambios y hacemos pruebas en el navegador, agregando un nuevo empleado con información incompleta (dejando campos sin llenar) y luego haciendo clic sobre el botón guardar. Al realizar lo anterior, deberá aparecer un mensaje de alerta provocado y controlado para que no proceda a guardar mientras no proporcione toda la información. Según los campos vacíos aparecerá lo siguiente:
15. Ahora procedemos a realizar la inserción del nuevo registro, para ello abra el archivo EmpleadoController y ubíquese en el método o función store, después de la validación escriba los siguientes comandos:
$estudiantes = Estudiantes::create($request->all());
return redirect('/estudiantes')->with('message','store');
Este será el registro que guardaremos. Al dar clic en Guardar, si todo está correcramente, nos llevará al archivo index y aparecerá en la lista de empleados el nuevo registro:
17. Recuperar los valores temporales cuando se produzcan mensajes de validación, para realizar esto utilizaremos el helper old()
@extends("madre")
@section('titulo')
Información de estudiantes
@endsection
@section('contenido')
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Informacion de estudiantes</h3>
</div>
<div class="panel-body">
@if ($errors->any())
<div class="alert alert-danger alert-dismissible">
<h4>
<strong>
<span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
Oops!
</strong>
</h4>
<p>por favor verifique los siguientes datos:</p>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{route('estudiantes.store')}}" accept-charset="UTF-8">
{{csrf_field()}}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Identidad:</label>
<input type="text" class="form-control" name="identidad" placeholder="Ingrese numero de identidad"value="{{old('identidad')}}" autofocus>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Nombres:</label>
<input type="text" class="form-control" name="nombres" placeholder="Ingrese nombres" value="{{old('nombres')}}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Apellidos:</label>
<input type="text" class="form-control" name="apellidos" placeholder="Ingrese apellidos" value="{{old('apellidos')}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Direccion:</label>
<input type="text" class="form-control" name="direccion" placeholder="Ingrese direccion" value="{{old('direccion')}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Fecha N.:</label>
<input type="date" name="fechanac" class="form-control" value="{{old('fechanac')}}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Sexo:</label>
<select name="sexo" id="" class="form-control">
<option value="Masculino" {{old('sexo')=="Masculino"?"selected":''}}>Masculino</option>
<option value="Femenino" {{old('sexo')=="Femenino"?"selected":''}}>Femenino</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="row" style="margin-top: 25px;">
<div class="col-md-6" style="margin-left: -20px;">
<button type="submit" class="btn btn-info">Guardar</button>
</div>
<div class="col-md-6" style="margin-left: 5px;">
<div class="btn btn-danger">Cancelar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
@endsection
1 18. Guarde los cambios del paso anterior, el siguiente paso en el CRUD es escribir los llamados para editar la información del registro seleccionado (registro al que se hizo clic en el icono de editar), para ello abra el archivo EmpleadoController y diríjase a la función o método edit y escriba el código siguiente:
$estudiantes=estudiante::findOrFail($id);
return view('estudiante.edit',compact('estudiantes'));
1 19. Una vez realizado el paso anterior vamos al directorio resources/views/empleados y creamos un nuevo archivo que llamaremos edit.blade.php en el cual pegaremos el siguiente código PHP y marcas HTML:
@extends("madre")
@section('titulo')
Información de estudiantes
@endsection
@section('contenido')
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Editar información de estudiantes</h3>
</div>
<div class="panel-body">
@if ($errors->any())
<div class="alert alert-danger alert-dismissible">
<h4>
<strong>
<span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
Oops!
</strong>
</h4>
<p>por favor verifique los siguientes datos:</p>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{route('estudiantes.update',$estudiantes->id)}}" accept-charset="UTF-8">
{{csrf_field()}}
{{method_field('PUT')}}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Identidad:</label>
<input type="text" class="form-control" name="identidad" placeholder="Ingrese numero de identidad"value="{{$empleados->identidad}}" >
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Nombres:</label>
<input type="text" class="form-control" name="nombres" placeholder="Ingrese nombres" value="{{$empleados->nombres}}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Apellidos:</label>
<input type="text" class="form-control" name="apellidos" placeholder="Ingrese apellidos" value="{{$empleados->apellidos}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Direccion:</label>
<input type="text" class="form-control" name="direccion" placeholder="Ingrese direccion" value="{{$estudiantes->direccion}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Fecha N.:</label>
<input type="date" name="fechanac" class="form-control" value="{{date('Y-m-d', strtotime($empleados->fechanac)) }}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Sexo:</label>
<select name="sexo" id="" class="form-control">
<option value="Masculino" {{$empleados->sexo=="Masculino"?"selected":''}}>Masculino</option>
<option value="Femenino" {{$empleados->sexo=="Femenino"?"selected":''}}>Femenino</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="row" style="margin-top: 25px;">
<div class="col-md-6" style="margin-left: -20px;">
<button type="submit" class="btn btn-info">Guardar</button>
</div>
<div class="col-md-6" style="margin-left: 5px;">
<div class="btn btn-danger">Cancelar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
@endsection
Nótese que dentro de las marcas HTML hay código php escrito mediante los helpers de Laravel, solo que en esta ocasión se borró el helper old() y se escribió el nombre de la variable que contiene la fila con la información ($empleados)
Si has podido observar los cambios los hemos empezado a hacer desde el comienzo de la creación del formulario en donde cambiamos la acción y mediante la route concatenamos la ruta y el id del registro seleccionado. También hemos cambiado el value de los controles, en este caso ya no sería como en el create en donde se utilizaba old, ahora capturamos la información del campo mediante el objeto $empleados quien apunta al campo requerido. En el input para la fecha lo que cambiamos fue el formato en el que se visualizará y la conversión de donde se ha sacado la información del campo fechanac. Y para el los options del campo sexo creamos una función ternaria.
Una vez hecho esto debemos de hacer el llamado en el icono de la acción editar que hemos creado en nuestra tabla. Para esto dentro de la href debemos agregar el siguiente código:
{ {route('empleados.edit',$empleado->id)}}
Y de una vez para la acción de eliminar hacemos lo mismo, en el href del icono para eliminar agregamos el siguiente código:
{ {route('empleados.show',$empleado->id)}}
Con esto, si damos clic en el icono de editar de algún registro nos llevará al archivo edit y en el formulario mostrará la información del registro seleccionado:
20. Volvemos al archivo EmpleadoControllery en el método o función update escriba el siguiente código:
$this->validate($request,[
'identidad' =>'required',
'nombres' =>'required',
'apellidos' =>'required',
'fechanac' =>'required',
'sexo' =>'required',
'direccion' =>'required'
]);
$empleados=Empleado::findOrFail($id);
$empleados->update($request->all());
return redirect('/empleados')->with('message','update');
21. Guardamos cambios y vamos al navegador a realizar las pruebas para editar la información.
22. Procedemos a escribir las líneas de código para eliminar el registro y completar el CRUD, para ello siempre en el archivo EmpleadoController ubique las líneas de código de la función o método show y escriba el siguiente código:
$empleados=Empleado::findOrFail($id);
return view('empleados.show',compact('empleados'));
23. Casi para finalizar, en la carpeta resource/views/empleados y crear el archivo show.blade.php; dentro de este archivo copiaremos las mismas líneas de código y marcas HTML que tenemos en el archivo edit.blade.php solamente que en los controles del formulario agregaremos el atributo disabled; luego cambiamos la ruta donde se enviaran los datos y el botón guardar cambiaremos por eliminar y el botón cancelar lo cambiaremos a un enlace que nos lleve al archivo de lista de empleados, debido a que no se necesita validar información, entonces procedemos a borrar HTML y código de Laravel para mostrar alerta, también se cambia el method field de PUT a DELETE
@extends("madre")
@section('titulo')
Información de estudiantes
@endsection
@section('contenido')
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"> Eliminar información de estudiantes</h3>
</div>
<div class="panel-body">
<form method="POST" action="{{route('estudiantes.destroy',$estudiantes->id)}}" accept-charset="UTF-8">
{{csrf_field()}}
{{method_field('DELETE')}}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Identidad:</label>
<input type="text" class="form-control" name="identidad" placeholder="Ingrese numero de identidad"value="{{$empleados->identidad}}" disabled >
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Nombres:</label>
<input type="text" class="form-control" name="nombres" placeholder="Ingrese nombres" value="{{$estudiantes->nombres}}" disabled>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Apellidos:</label>
<input type="text" class="form-control" name="apellidos" placeholder="Ingrese apellidos" value="{{$estudiantes->apellidos}}" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Direccion:</label>
<input type="text" class="form-control" name="direccion" placeholder="Ingrese direccion" value="{{$estudiantes->direccion}}" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Fecha N.:</label>
<input type="date" name="fechanac" class="form-control" value="{{date('Y-m-d', strtotime($empleados->fechanac)) }}" disabled>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Sexo:</label>
<select name="sexo" id="" class="form-control" disabled>
<option value="Masculino" {{$empleados->sexo=="Masculino"?"selected":''}}>Masculino</option>
<option value="Femenino" {{$empleados->sexo=="Femenino"?"selected":''}}>Femenino</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="row" style="margin-top: 25px;">
<div class="col-md-6" style="margin-left: -20px;">
<button type="submit" class="btn btn-info">Eliminar</button>
</div>
<div class="col-md-6" style="margin-left: 5px;">
<a href="{{route('empleados.index')}}" class="btn btn-warning">Cancelar</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
@endsection
24. Guardamos cambios y nos devolvemos a EmpleadoController y nos ubicamos en la función o método destroy para escribir las siguientes líneas de código:
public function destroy($id)
{ $estudiantes=Estudiante::findOrFail($id);
$estudiantes->delete();
return redirect('/estudiante')->with('message','delete');
}
25. Y para finalizar, agregamos algunas marcas HTML y código Laravel para que el archivo con la lista de empleados nos muestre los mensajes de guardado, actualizado y eliminación de información. Para ello abra el archivo index.blade.php y agregue lo siguiente:
<?php
$message = Session::get('message');
$mensaje="";
if ($message== 'store')
$mensaje="La información ha sido almacenada correctamente";
elseif ($message== 'update')
$mensaje="La informacion ha sido actualizada correctamente";
elseif ($message== 'delete')
$mensaje="La informacion fue almacenada correctamente";
?>
@if(empty($mensaje)==false)
<div class="row">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4 class="alert-heading">{{$mensaje}}!</h4>
<hr>
<p class="mb-0">Puede verificar que los datos proporcionados esten correctos, utilice la siguiente lista
</p>
</div>
</div>
@endif
@endif
Ya con esto nos aparecerá un mensaje de información para cada acción que realicemos en el CRUD
Conclusión
Aprendimos a crear un crud de datos en laravel
Diseñamos un CRUD de datos para una tabla SQL.
Ø Creamos un controlador de recurso para realizar el CRUD.
Ø Realizamos una validación de datos con Laravel
Ø Tradumos los mensajes de error de Laravel
Ø Diseñamos las diferentes vistas para el funcionamiento del CRUD
Ø Usamos el modelo de datos de Laravel para hacer una conexión a una tabla.
Ø Definimos las rutas para el funcionamiento del CRU
Bibliografía
https://medium.com/@sebazamorano/como-crear-un-crud-en-laravel-5-4-24dc0c8f7ba3
















Comentarios
Publicar un comentario