Creación de Formularios y Validación en Laravel con Bootstrap
Contenido del curso
KEVIN BRAYAN LUNA FIGUEROA
Usuario anónimo
User
Italo Morales Fantone
Profesor
Crhistian Jackson Ovalle Gamba
William Yesid Granada Pedroza
Nestor David Velasquez Lopez
Sergio Atanacio
Paula Abad
Sergio Atanacio
Jhonny Stiven Agudelo Tenorio
Anuar Rodríguez Medina
Jhonny Stiven Agudelo Tenorio
KEVIN BRAYAN LUNA FIGUEROA
Usuario anónimo
User
Luis Angel Frias Herrera
María Sierra
Victor Emilio Mendoza Andrade
Italo Morales Fantone
Profesor
Susana Piñero Rodríguez
Pedro Renatto Neciosup Liza
Italo Morales Fantone
Profesor
José Tuzinkievicz
Jorge Eliecer Rangel Jimenez
Solarte Orozco Jose Luis
carlos orozco
Angela Patricia Uribe Laiseca
Luis Lira
Juan Camilo Ortiz Villegas
Yerson Danian Morales Rivera
Paula Abad
Yerson Danian Morales Rivera
Manuel Angel Lemus Recinos
Felix Michael Hernandez Flery
Adrian Bautista Orozco
Luis Angel Frias Herrera
Italo Morales Fantone
Profesor
Miguel Angel Muñoz Pozos
Italo Morales Fantone
ProfesorOtra alternativa para cuando utilizamos la funcion validate.
$request->validate([ 'name' => 'required', 'email' => 'required|email|unique:users', 'password' => 'required|min:8', ]);
Podemos poner todas las validaciones solo con que se separen con un " | ".
Técnicamente se les conoce como pipes o filtros, buen dato, lo iba a agregar pero ya te me has adelantado capeón :)
Buen aporte
Reto completado
Muchas gracias, excelente clase...🚀
Traducción de los mensajes explicada en el vídeo del canal de Italo https://www.youtube.com/watch?v=wPW8wXL2pm0&list=PLhCiuvlix-rTH5idwru7vKkPAmVODYJJB&index=13
Un pequeño resumen
@desaextremo muchas gracias por el video me ahorraste un mundo de tiempo...
muchisimas gracias bro, yo estaba agregando los mensajes de manera manual en el controlador
Para los que le quedaron vertical. Creo que poniendo
<div class="form-row" style="display: flex;">
En la en div superior al div que contiene col-sm-3 se puede lograr en algo ponerlo vertical.
Muchas gracias, como podría separar cada input me indicas porfa, me quedaron juntos.
paulabad76
Sería algo como un me-1.
Puedes revisar la documentación. https://getbootstrap.com/docs/5.0/utilities/spacing/
:O como hiciste el diseño?? fue con un template??
Utilice sass, css grid
Una alternativa para obtener los errores de forma separada.
<div class="col-sm-3"> <input type="text" class="form-control" name="name" id="name" placeholder="Nombre" value="{{ old('name') }}"> @error('name') <div class="alert alert-danger" role="alert"> {{ $message }} </div> @enderror </div>
Por usabilidad prefiero así por separado en lugar de un único elemento div con la clase alert, así, el usuario rápidamente sabrá en dónde corregir exactamente, saludos.
@csrf hace referencia a Cross-site request forgery, un tipo de ataque malicioso que se hace a sitios web.
Creando un formulario
Cuando trabajamos con Laravel no interactuamos colocando código SQL, lo hacemos a través de un archivo ya preparado que representara a la tabla que queramos llamar.
// Esto le dice a Laravel que el formulario es nuestro. @csrf
Nunca pensé que usar laravel seria tan fácil, lo que me tardo haciendo en php puro con laravel se lo hace con unas cuantas lineas de código y en muy poco tiempo.
Es su mayor virtud
Me funciono con laravel 8.12
Vista
<div class="card mb-5"> <div class="card-header">Agregar usuario</div> <div class="card-body"> @if($errors->any()) <div class="alert alert-danger" role="alert"> @foreach ($errors->all() as $error) - {{ $error }} <br /> @endforeach </div> @endif <form action="{{ route('users.store') }}" method="POST"> <div class="form-group row"> <div class="input-group mb-3 col-sm-12 col-md-6"> <span class="input-group-text" id="name"><i class="far fa-user"></i></span> <input name="name" id="name" type="text" class="form-control" value="{{ old('name') }}" placeholder="Usuario" aria-label="Usuario" aria-describedby="name"> @error('name') <div class="alert alert-danger" role="alert"> {{ $message }} </div> @enderror </div> <div class="input-group mb-3 col-sm-12 col-md-6"> <span class="input-group-text" id="email"><i class="far fa-envelope"></i></span> <input name="email" id="email" type="email" class="form-control" value="{{ old('email') }}" placeholder="Correo" aria-label="Correo" aria-describedby="email"> @error('email') <div class="alert alert-danger" role="alert"> {{ $message }} </div> @enderror </div> <div class="input-group mb-3 col-sm-12 col-md-6"> <span class="input-group-text" id="password"><i class="fas fa-lock"></i></span> <input name="password" id="password" type="password" class="form-control" placeholder="Contraseña" aria-label="Contraseña" aria-describedby="password"> @error('password') <div class="alert alert-danger" role="alert"> {{ $message }} </div> @enderror </div> <div class="col-auto"> @csrf <button id="store" name="store" type="submit" class="btn btn-primary">Registrar</button> </div> </div> </form> </div> </div>
Controlador
public function store(Request $request) { $request->validate([ 'name' => 'required', 'email' => 'required|email|unique:users', 'password' => 'required|min:8', ]); User::create([ 'name' => $request->name, 'email' => $request->email, 'password' => bcrypt($request->password), ]); return back(); }
Ruta
Route::post('users', [UserController::class, 'store'])->name('users.store');
Perfecto :)
Una opción para validar datos es el uso de Form Requests, de esa manera los controladores se mantienen limpios.
routes/web.php
<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', 'UserController@index'); Route::post('/users', 'UserController@store')->name("users.store"); Route::delete('/users/{user}', 'UserController@destroy')->name("users.destroy");
Controllers/UserController.php
<?php namespace App\Http\Controllers; use App\User; use Illuminate\Http\Request; class UserController extends Controller { public function index() { $users = User::latest()->get(); return view('users.index', [ 'users' => $users ]); } public function store(Request $request) { $request->validate( [ 'name' => 'required', 'email' => ['required', 'email', 'unique:users'], 'password' => ['required', 'min:8'] ] ); User::create([ 'name' => $request->name, 'email' => $request->email, 'password' => bcrypt($request->password) ]); return back(); } public function destroy(User $user) { $user->delete(); return back(); } }
views/users/index.blade.php
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-8 mx-auto"> <div class="card border-0 shadow"> <div class="card-body"> @if($errors->any()) <div class="alert alert-danger"> @foreach($errors->all() as $error) - {{ $error }} <br /> @endforeach </div> @endif <form action="{{ route('users.store') }}" method="POST"> <div class="form-row"> <div class="col-sm-3"> <input type="text" name="name" class="form-control" placeholder="Nombre" value="{{ old('name') }}"> </div> <div class="col-sm-4"> <input type="email" name="email" class="form-control" placeholder="Email" value="{{ old('email') }}"> </div> <div class="col-sm-3"> <input type="password" name="password" class="form-control" placeholder="Contraseña"> </div> <div class="col-auto"> @csrf <button type="submit" class="btn btn-primary">Enviar</button> </div> </div> </form> </div> </div> <table class="table"> <thead> <tr> <th>Id</th> <th>Nombre</th> <th>Email</th> <th> </th> </tr> </thead> <tbody> @foreach($users as $user) <tr> <td>{{ $user->id }}</td> <td>{{ $user->name }}</td> <td>{{ $user->email }}</td> <td> <form action="{{ route('users.destroy', $user) }}" method="POST"> @method('DELETE') @csrf <input type="submit" value="Eliminar" class="btn btn-sm btn-danger" onclick="return confirm('¿Desea Eliminar...? ')" /> </form> </td> </tr> @endforeach </tbody> </table> </div> </div> </div> </body> </html>
Result
Excelente profesor Italo, la forma como transmite la información. El ritmo de trabajo , permite reflexionar sobre lo que se va codificando. La forma en que enfatiza sobre las estructuras del código nos deja buenas bases. que permitirán "correr" mas adelante.!
Estoy muy contento con el cuidado y calidad que se percibe hasta el momento en este curso.
Gracias! Seguimos con toda! :)
Mi formulario me queda vertical... :( cómo puedo dejarlo horizontal?
Tendrías que modificar el CSS, ¿qué código estás usando y cómo queda?
Hola, mira a mi me pasó algo similar, lo que tienes que hacer es lo siguiente donde dice form-row lo dejas de la siguiente forma.
<div class=“row”>
Tengo un problema me salen los campos en vertical
Utiliza esto que vi en un mensaje mas adelante. Lo unico es que no he podido que me queden los input separados. Si sabes algo me avisas.
<div class="form-row" style="display: flex;">Lo resolví accediendo al repositorio del profe y utilizando el link de importación de Boostrap que hay allí...
Con boostrap 5 cambian las clases, a ca las dejo
<form action="{{ route('users.store') }}" method="post"> <div class="row"> <div class="col-3"> <input type="text" name="name" class="form-control" placeholder="Ingrese el nombre"> </div> <div class="col-4"> <input type="text" name="email" class="form-control" placeholder="Ingrese el email"> </div> <div class="col-3"> <input type="password" name="password" class="form-control" placeholder="Ingrese el password"> </div> <div class="col-auto"> @csrf <input type="submit" value="Enviar" class="btn btn-primary"> </div> </div> </form>```
Sin palabras!!! Extraordinario!!! Excelente explicaciones!!
¿El helper @csrf siempre va en donde haya un botón, o puede ir en cualquier parte siempre y cuando este dentro del form?
Siempre irá en todo formulario de tu proyecto, ya que es una "llave" o "token" que indica a Laravel que si es un formulario del mismo proyecto, y que no está recibiendo una petición de un formulario externo. Esta medida se usara para evitar Cross-site request forgery
Yo lo coloco allí para verlo fácilmente, pero lo correcto es que esté dentro de un formulario sin importar en qué ubicación. A veces se coloca debajo de la etiqueta form.
Mis avances 
Genial :)
