Layout,Bootstrap,Request y flash

This commit is contained in:
Santiago 2026-06-09 21:08:32 -03:00
parent 9dff95110a
commit 495f97fb67
12 changed files with 546 additions and 118 deletions

View File

@ -4,13 +4,15 @@ namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;
use App\Models\persona;
use App\Models\Persona;
use App\Http\Requests\UpdatePersonaRequest;
use App\Http\Requests\StorePersonaRequest;
class PersonaController extends Controller
{
public function index(Request $request){
$persona = persona::all();
$persona = Persona::withTrashed()->get();
return view('persona.index', ["persona"=>$persona]);
}
@ -32,7 +34,7 @@ public function show($id){
}
public function store(Request $request): RedirectResponse
public function store(StorePersonaRequest $request): RedirectResponse
{
$persona = new persona();
$persona -> fill([
@ -51,7 +53,7 @@ public function show($id){
return redirect('/persona');
}
public function update(Request $request, $id){
public function update(UpdatePersonaRequest $request, $id){
$persona = persona::findOrfail($id);
$persona -> fill([
'nombre' => $request->input('nombre'),
@ -61,4 +63,10 @@ public function show($id){
$persona->save();
return redirect('/persona');
}
public function restore($id){
$persona = persona::withTrashed()->findOrfail($id);
$persona->restore();
return redirect('/persona');
}
}

View File

@ -0,0 +1,46 @@
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class StorePersonaRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*/
public function authorize(): bool
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
*/
public function rules(): array
{
return [
'nombre' => 'required|regex:/^[a-zA-ZáéíóúñÁÉÍÓÚ]+( [a-zA-ZáéíóúñÁÉÍÓÚ]+)*$/|max:20|',
'apellido' => 'required|regex:/^[a-zA-ZáéíóúñÁÉÍÓÚ]+( [a-zA-ZáéíóúñÁÉÍÓÚ]+)*$/|max:20|',
'dni' => 'required|numeric|digits_between:7,8|unique:persona,dni,' . $this->route('persona') . ',id_persona',
];
}
public function messages() {
return [
'nombre.required' => 'El campo nombre es requerido',
'nombre.regex' => 'El campo nombre solo debe contener letras',
'nombre.max' => 'El campo nombre debe contener un maximo de 20 caracteres',
'apellido.required' => 'El campo apellido es requerido',
'apellido.regex' => 'El campo apellido solo debe contener letras',
'apellido.max' => 'El campo apellido debe contener un maximo de 20 caracteres',
'dni.required' => 'El campo dni es requerido',
'dni.unique' => 'Ya existe una persona con este dni',
'dni.numeric' => 'El campo dni debe ser un numero',
'dni.digits_between' => 'El campo dni debe contener entre 7 y 8 digitos'
];
}
}

View File

@ -0,0 +1,45 @@
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class UpdatePersonaRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*/
public function authorize(): bool
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
*/
public function rules(): array
{
return [
'nombre' => 'required|regex:/^[a-zA-ZáéíóúñÁÉÍÓÚ]+( [a-zA-ZáéíóúñÁÉÍÓÚ]+)*$/|max:20|',
'apellido' => 'required|regex:/^[a-zA-ZáéíóúñÁÉÍÓÚ]+( [a-zA-ZáéíóúñÁÉÍÓÚ]+)*$/|max:20|',
'dni' => 'required|unique:persona,dni,' . $this->route('persona') . ',id_persona|numeric|digits_between:7,8',
];
}
public function messages() {
return [
'nombre.required' => 'El campo nombre es requerido',
'nombre.regex' => 'El campo nombre solo debe contener letras',
'nombre.max' => 'El campo nombre debe contener un maximo de 20 caracteres',
'apellido.required' => 'El campo apellido es requerido',
'apellido.regex' => 'El campo apellido solo debe contener letras',
'apellido.max' => 'El campo apellido debe contener un maximo de 20 caracteres',
'dni.required' => 'El campo dni es requerido',
'dni.unique' => 'Ya existe una persona con este dni',
'dni.numeric' => 'El campo dni debe ser un numero',
'dni.digits_between' => 'El campo dni debe contener entre 7 y 8 digitos'
];
}
}

View File

@ -3,17 +3,20 @@
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\SoftDeletes;
use Illuminate\Database\Eloquent\Model;
use App\Models\persona;
class Persona extends Model
{
use HasFactory;
use SoftDeletes;
protected $table = 'persona';
public $primaryKey = 'id_persona';
public $timestamps = false;
public $timestamps = true;
protected $fillable = [
'nombre',
'apellido',

View File

@ -0,0 +1,9 @@
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

View File

@ -0,0 +1,3 @@
@if (session('mensaje-success'))
<p class="alert alert-success">{{ session('mensaje-success') }}</p>
@endif

View File

@ -0,0 +1,111 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title','Sistema Taller')</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap4.min.css">
@stack('styles')
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<!-- Nombre de la aplicación -->
<a class="navbar-brand" href="{{ url('/') }}">
MiApp
</a>
<!-- Menú principal -->
<ul class="navbar-nav">
<!-- Categorías -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
data-toggle="dropdown">
Categorías
</a>
<div class="dropdown-menu">
<a class="dropdown-item"
href="{{ route('persona.index') }}">
Listado
</a>
<a class="dropdown-item"
href="{{ route('persona.create') }}">
Añadir nueva Persona
</a>
</div>
</li>
<!-- Usuarios -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
data-toggle="dropdown">
Usuarios
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Listado
</a>
<a class="dropdown-item" href="#">
Nuevo Usuario
</a>
</div>
</li>
</ul>
</nav>
<div class="container py-4">
<!-- yield('contenido') => espacio donde cada vista Blade inyecta su propio contenido -->
@yield('contenido')
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
@stack('scripts')
</body>
</html>

View File

@ -1,22 +1,80 @@
<form METHOD = "POST" ACTION="{{ route('persona.update', $persona->id_persona) }}">
@csrf
@method('PUT')
<div>
<label for="nombre">Nombre *</label><br>
<input id="nombre" name="nombre" type="text" required value="{{ $persona->nombre }}">
value="{{OLD('nombre', $persona->nombre)}}" required>
@extends('layouts.admin')
@section('contenido')
<!-- row => fila del sistema de grillas de Bootstrap
justify-content-center => centra horizontalmente el contenido dentro de la fila
align-items-center => alinea verticalmente los elementos de la fila -->
<div class="row justify-content-center align-items-center">
<!-- col-lg-11 col-md-11 col-sm-11 col-xs-11 =>
la columna ocupa 11/12 partes en todos los tamaños de pantalla -->
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
<h3>Editar Persona</h3>
</div>
<div style="margin-top:8px;">
<label for="apellido">Apellido</label><br>
<input id="apellido" name="apellido" type="text" value="{{ $persona->apellido }}">
value="{{OLD('apellido', $persona->apellido)}}" required>
</div>
<div class="row">
<div class="col-md-10">
@include('compartido.mensajes')
@include('compartido.errores')
</div>
</div>
<br>
<!-- Formulario de edición de persona -->
<form method="POST"
action="{{ route('persona.update', $persona->id_persona) }}"
enctype="multipart/form-data">
@csrf
@method('PUT') <!-- Indica a Laravel que el método real es PUT -->
<!-- row => agrupa los campos en una fila -->
<div class="row">
<!-- form-group => añade márgenes y separación entre los campos -->
<!-- col-md-3 => cada campo ocupa 3/12 columnas en pantallas medianas o más grandes -->
<div class="form-group col-md-3">
<!-- form-check-label => estilo Bootstrap para etiquetas de formulario -->
<label for="nombre" class="form-check-label">Nombre (*)</label>
<!-- form-control => da estilo uniforme al input -->
<input type="text" name="nombre" id="nombre" class="form-control"
value="{{ old('nombre', $persona->nombre) }}" >
</div>
<div style="margin-top:8px;">
<label for="dni">DNI</label><br>
<input id="dni" name="dni" type="text" value="{{ $persona->dni }}">
value="{{OLD('DNI', $persona->dni)}}" required>
<div class="form-group col-md-3">
<label for="apellido" class="form-check-label">Apellido (*)</label>
<input type="text" name="apellido" id="apellido" class="form-control"
value="{{ old('apellido', $persona->apellido) }}" >
</div>
<div style="margin-top:8px;">
<input type="submit" value="Actualizar">
<div class="form-group col-md-3">
<label for="dni" class="form-check-label">Dni (*)</label>
<input type="text" name="dni" id="dni" class="form-control"
value="{{ old('dni', $persona->dni) }}" >
</div>
</div>
<!-- row justify-content-center align-items-center =>
fila que centra horizontal y verticalmente los botones -->
<div class="row justify-content-center align-items-center">
<div class="col-md-2">
<!-- btn => clase base de Bootstrap para botones
btn-success => verde (acción positiva)
btn-block => ocupa todo el ancho de la columna
btn-lg => tamaño grande -->
<button class="btn btn-success btn-block btn-lg">Guardar</button>
</div>
<div class="col-md-2">
<!-- btn-primary => azul (acción principal)
title="Salir" => tooltip al pasar el mouse -->
<a href="{{ route('persona.index') }}" class="btn btn-primary btn-block btn-lg" title="Salir">Salir</a>
</div>
</div>
</form>
@endsection
@push('scripts')
<script>
//Aquí se pueden agregar scripts específicos de esta vista -->
</script>
@endpush

View File

@ -1,42 +1,130 @@
<!doctype html>
<html lang="es">
<head>
<title>Personas</title>
</head>
<body>
<h1>Personas</h1>
<a href="{{ route('persona.create') }}">Crear Nuevo Registro</a>
<ul>
@extends('layouts.admin')
@section('contenido')
<!-- row => fila del sistema de grillas Bootstrap
justify-content-center => centra horizontalmente los contenidos
align-items-center => centra verticalmente
no centran el texto, centran las columnas dentro de la fila
-->
<div class="row justify-content-center align-items-center">
<!-- col-12 => ocupa todo el ancho en pantallas pequeñas
col-md-11 => ocupa 11/12 del ancho en pantallas medianas o mayores -->
<div class="col-12 col-md-11">
<h3>Listado de Personas</h3>
</div>
</div>
@include('compartido.mensajes')
@include('compartido.errores')
<div class="row justify-content-center align-items-center">
<div class="col-md-2">
<!-- btn => estilo de botón Bootstrap
btn-success => verde (acción positiva)
btn-block => ocupa todo el ancho de la columna
btn-lg => tamaño grande -->
<a href="{{ route('persona.create') }}"
class="btn btn-success btn-block btn-lg"
title="Nueva Persona">
Nuevo
</a>
</div>
</div>
<br>
<div class="row justify-content-center align-items-center">
<div class="col-12 col-md-11">
<!-- table-responsive => hace que la tabla sea "scrollable" en pantallas pequeñas -->
<div class="table-responsive">
<!-- table => tabla con estilos básicos
table-striped => filas alternadas con fondo gris
table-bordered => agrega bordes a todas las celdas
table-hover => resalta la fila al pasar el mouse -->
<table class="table table-striped table-bordered table-hover" id="example">
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Dni</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
@foreach($persona as $per)
<li>
<strong>{{ $per->nombre }}</strong>
{{ $per->apellido }}
{{ $per->dni }}
(ID: {{ $per->id_persona}})
&nbsp;|&nbsp;
<tr>
<td>{{ $per->id_persona}}</td>
<td>{{ $per->nombre }}</td>
<td>{{ $per->apellido }}</td>
<td>{{ $per->dni }}</td>
<td align="center">
<a href="{{ route('persona.show', $per->id_persona) }}">Ver Más</a>
<form action="{{ route('persona.destroy', $per->id_persona) }}"
method="POST" >
@if($per->deleted_at == null)
<form method="POST" action="{{ route('persona.destroy', $per->id_persona) }}" style="display:inline;">
@csrf
@method('DELETE')
<button onclick="return confirm('¿Eliminar este Registro?')">
Eliminar
<!-- btn-info => azul claro (información) -->
<a class="btn btn-info"
href="{{ route('persona.show', $per->id_persona) }}"
title="Ver más">
<i class="fa fa-eye"></i>
</a>
<!-- btn-warning => amarillo (advertencia / editar) -->
<a class="btn btn-warning"
href="{{ route('persona.edit', $per->id_persona) }}"
title="Editar">
<i class="fa fa-pencil"></i>
</a>
<!-- btn-danger => rojo (acción destructiva como eliminar) -->
<button class="btn btn-danger"
onclick="return confirm('¿Está seguro de eliminar esta persona?');"
title="Eliminar">
<i class="fa fa-remove"></i>
</button>
</form>
<form action="{{ route('persona.edit', $per->id_persona) }}"
method="GET" >
@else
<form method="POST" action="{{ route('persona.restore', $per->id_persona) }}" style="display:inline;">
@csrf
<button>
Editar
@method('PUT')
<!-- btn-danger => rojo (acción destructiva como eliminar) -->
<button class="btn btn-success"
onclick="return confirm('¿Está seguro de Restaurar la persona?');"
title="Restaurar">
<i class="fa fa-undo"></i>
</button>
</form>
</li>
@endif
</td>
</tr>
@endforeach
</ul>
</tbody>
</table>
</div>
</body>
</html>
</div>
</div>
@endsection
@push('styles')
@endpush
@push('scripts')
<script>
// DataTables (plugin JS para mejorar tablas: búsqueda, paginación, exportación)
$('#example').DataTable({
dom: 'Bfrtip',
buttons: ['excel'],
pageLength: 5,
});
</script>
@endpush

View File

@ -1,18 +1,79 @@
<form action="{{ route('persona.store') }}" method="POST">
@extends('layouts.admin')
@section ('contenido')
<!-- row => fila del sistema de grillas de Bootstrap
justify-content-center => centra horizontalmente el contenido dentro de la fila
align-items-center => centra verticalmente los elementos dentro de la fila -->
<div class="row justify-content-center align-items-center">
<!-- col-lg-11 col-md-11 col-sm-11 col-xs-11 =>
la columna ocupa 11/12 partes del ancho en todos los tamaños de pantalla -->
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
<h3>Nueva Persona</h3>
</div>
</div>
<div class="row">
<div class="col-md-10">
@include('compartido.mensajes')
@include('compartido.errores')
</div>
</div>
</br>
<!-- Formulario para crear nueva persona -->
<form method="post" action="{{ route('persona.store') }}" enctype=multipart/form-data>
@csrf
<div>
<label for="nombre">Nombre *</label><br>
<input id="nombre" name="nombre" type="text" required>
<!-- row => agrupa los campos en una fila -->
<div class="row">
<!-- form-group => separa cada campo del formulario con márgenes
col-md-3 => ocupa 3/12 columnas en pantallas medianas hacia arriba -->
<div class="form-group col-md-3">
<!-- form-check-label => clase de Bootstrap que estiliza etiquetas de formulario -->
<label for="nombre" class="form-check-label">Nombre (*)</label>
<!-- form-control => aplica estilos consistentes al input-->
<input type="text"
name="nombre"
id="nombre"
value="{{ old('nombre') }}"
required
class="form-control">
</div>
<div style="margin-top:8px;">
<label for="apellido">Apellido</label><br>
<input id="apellido" name="apellido" type="text">
<div class="form-group col-md-3">
<label for="apellido" class="form-check-label">Apellido (*)</label>
<input type="text" name="apellido" id="apellido" value="{{old('apellido')}}" class="form-control">
</div>
<div style="margin-top:8px;">
<label for="dni">DNI</label><br>
<input id="dni" name="dni" type="text">
<div class="form-group col-md-3">
<label for="dni" class="form-check-label">Dni (*)</label>
<input type="text" name="dni" id="dni" value="{{old('dni')}}" class="form-control">
</div>
</div>
<!-- row justify-content-center align-items-center =>
crea una fila y centra horizontal y verticalmente los botones -->
<div class="row justify-content-center align-items-center">
<div class="col-md-2">
<!-- btn => botón base de Bootstrap
btn-success => color verde
btn-block => ocupa todo el ancho de la columna
btn-lg => tamaño grande -->
<button class="btn btn-success btn-block btn-lg">Guardar</button>
</div>
<div class="col-md-2">
<!-- btn-primary => color azul
title="Salir" => muestra tooltip al pasar el mouse -->
<a href="{{ route('persona.index') }}" class="btn btn-primary btn-block btn-lg" title="Salir">Salir</a>
</div>
<div style="margin-top:8px;">
<input type="submit" value="Guardar">
</div>
</form>
@endsection
@push('scripts')
<script>
//Aquí podrías agregar código JavaScript específico para esta vista
</script>
@endpush

View File

@ -1,38 +1,32 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ver Registros</title>
</head>
<body>
<h1>Ver Registro</h1>
<div>
<label for="nombre">Nombre *</label><br>
<input id="nombre" name="nombre" readonly type="text"
value="{{ $persona-> nombre }}" >
@extends('layouts.admin')
@section ('contenido')
<div class="row justify-content-center align-items-center">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
<h3>Ver Persona</h3>
<div class="progress" style="height: 2px;"></div>
</div>
</div>
</br>
<div class="row">
<div class="form-group col-md-3">
<label for="nombre" class="form-check-label">Nombre (*)</label>
<input type="text" name="nombre" id="nombre" class="form-control" value="{{$persona->nombre}}" readonly>
</div>
<div class="form-group col-md-3">
<label for="apellido" class="form-check-label">Apellido (*)</label>
<input type="text" name="apellido" id="apellido" class="form-control" value="{{$persona->apellido}}" readonly>
</div>
<div class="form-group col-md-3">
<label for="dni" class="form-check-label">Dni (*)</label>
<input type="text" name="dni" id="dni" class="form-control" value="{{$persona->dni}}" readonly>
</div>
</div>
<div style="margin-top:8px;">
<label for="apellido">Apellido</label><br>
<input id="apellido" readonly name="apellido" type="text"
value="{{ $persona-> apellido }}">
<legend></legend>
<div class="row justify-content-center align-items-center">
<div class="col-md-2">
<a href="{{ route('persona.index') }}" class="btn btn-primary btn-block btn-lg" title="Salir">Salir</a>
</div>
</div>
<div style="margin-top:8px;">
<label for="dni">dni</label><br>
<input id="dni" readonly name="dni" type="text"
value="{{ $persona-> dni }}">
</div>
<div style="margin-top:12px;">
<a href="{{ route('persona.index') }}">Volver al listado</a>
</div>
</body>
</html>
@endsection

View File

@ -17,10 +17,12 @@ use App\Http\Controllers\PersonaController;
Route::get('/', function () {
return view('welcome');
});
Route::get('persona', [PersonaController::class, 'index'])->name('persona.index');
Route::resource('persona', PersonaController::class);
Route::put('persona/restaurar/{id}', [PersonaController::class, 'restore'])->name('persona.restore');
/*Route::get('persona', [PersonaController::class, 'index'])->name('persona.index');
Route::post('persona', [PersonaController::class, 'store']) ->name('persona.store');
Route::get('persona/create', [PersonaController::class, 'create']) ->name('persona.create');
Route::get('persona/{id}', [PersonaController::class, 'show']) ->name('persona.show');
Route::delete('persona/{id}', [PersonaController::class, 'destroy']) ->name('persona.destroy');
Route::put('persona/update/{id}', [PersonaController::class, 'update']) ->name('persona.update');
Route::get('persona/{id}/edit', [PersonaController::class, 'edit']) ->name('persona.edit');
Route::get('persona/{id}/edit', [PersonaCon:r::class);]*/