Cómo configurar el envío de formularios en Laravel

En nuestra pequeña aplicación de juegos, todavía no tenemos una forma de agregar nuevos juegos a la base de datos utilizando la aplicación. Solo podemos insertar nuevos datos utilizando la consola MySql directamente o mediante phpMyAdmin. Cambiemos eso y comencemos a ver cómo podemos agregar la capacidad de renderizar un formulario para que podamos enviar nuevos juegos. Necesitaremos un nuevo método de ruta y controlador para mostrar el formulario, así como un nuevo método de ruta y controlador para almacenar los datos en la base de datos. Configuremos esto ahora.

Agregar juegos / crear ruta y GamesController @ crear método

Por convención, cuando desea mostrar un formulario, se envía una solicitud GET a games/create. Si se trata de tareas, sería tareas / crear. Si se trata de publicaciones, sería algo así como publicaciones / crear. El método del controlador asociado sería algo así como GamesController @ create . Ok, necesitamos una ruta games/createy necesitamos un método en el controlador para GamesController @ create. Intentemos configurarlos.

rutas / web.php

1
2
3
4
5
6
7
<?php
 
Route::get('games', 'GamesController@index');
 
Route::get('games/{id}', 'GamesController@show');
 
Route::get('games/create', 'GamesController@create'); 

aplicación / Http / Controllers / GamesController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Game;
 
class GamesController extends Controller
{
    public function index()
    {
        $games = Game::all();
        return view('games.index', ['games' => $games]);
    }
    
    public function show(Game $id)
    {
        return view('games.show', ['game' => $id]);
    }
    
    public function create()
    {
        return 'it works';
    }
}

Prueba la ruta

Con la nueva ruta y el nuevo método de controlador implementados, probemos rápidamente esa ruta en el navegador. Cuando visitamos http://54.dev/games/create , notamos un problema.

Lo sentimos, no se pudo encontrar la página que estás buscando.
2/2
NotFoundHttpException en Handler.php línea 131:
No hay resultados de consulta para el modelo [App \ Game].

Uh oh, eso no es genial. ¿Que pasó? Bueno, resulta que el orden de tus rutas importa en el archivo de rutas. Es un proceso de verificación de rutas coincidentes de arriba hacia abajo, y tan pronto como se encuentra una coincidencia, se procesa la ruta. Con la forma en que nuestro archivo de rutas está estructurado ahora, al visitar http://54.dev/games/create , en realidad estamos activando la ruta :: get ('games / {id}', 'GamesController @ show'); ruta y esto no es lo que queremos. Todo lo que necesitamos es reorganizar el archivo de rutas como tal, y todo debería estar bien.

1
2
3
4
5
6
7
<?php
 
Route::get('games', 'GamesController@index');
 
Route::get('games/create', 'GamesController@create');
 
Route::get('games/{id}', 'GamesController@show');

Cuando visitamos la ruta ahora, obtenemos el texto agradable de 'funciona' para que sepamos que la ruta y el método del controlador que queremos están funcionando. Con esto resuelto, podemos actualizar el create()método para representar un archivo de vista para que podamos ver el formulario.

1
2
3
4
    public function create()
    {
        return view('games.create');
    }

Cree una nueva vista de create.blade.php y agregue un formulario

Dentro de recursos / vistas / juegos, continúe y agregue un archivo de vista llamado create.blade.php. Vamos a crear un formulario que nos permita completar el título del juego, el editor del juego, la fecha de lanzamiento del juego, así como subir una imagen del juego. Hay una gran cantidad de errores al crear un formulario como este, por lo que solo mostraremos el marcado y luego repasaremos algunos puntos importantes.

recursos / vistas / juegos / create.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@extends('layouts.master')
 
@section('content')
 
    <h2>Add a game</h2>
 
    <form method="post" action="/games" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="form-group row">
            <label for="titleid" class="col-sm-3 col-form-label">Game Title</label>
            <div class="col-sm-9">
                <input name="title" type="text" class="form-control" id="titleid" placeholder="Game Title">
            </div>
        </div>
        <div class="form-group row">
            <label for="publisherid" class="col-sm-3 col-form-label">Game Publisher</label>
            <div class="col-sm-9">
                <input name="publisher" type="text" class="form-control" id="publisherid"
                       placeholder="Game Publisher">
            </div>
        </div>
        <div class="form-group row">
            <label for="releasedateid" class="col-sm-3 col-form-label">Release Date</label>
            <div class="col-sm-9">
                <input name="releasedate" type="text" class="form-control" id="releasedateid"
                       placeholder="Release Date">
            </div>
        </div>
        <div class="form-group row">
            <label for="gameimageid" class="col-sm-3 col-form-label">Game Image</label>
            <div class="col-sm-9">
                <input name="image" type="file" id="gameimageid" class="custom-file-input">
                <span style="margin-left: 15px; width: 480px;" class="custom-file-control"></span>
            </div>
        </div>
        <div class="form-group row">
            <div class="offset-sm-3 col-sm-9">
                <button type="submit" class="btn btn-primary">Submit Game</button>
            </div>
        </div>
    </form>
 
@endsection

Visitar http://54.dev/games/create nos muestra un formulario bastante atractivo para enviar un nuevo juego.
formulario create-blade-php para enviar datos

Repasemos algunos puntos importantes sobre el nuevo formulario.

El atributo del método debe establecerse en post : Cada formulario tendrá un atributo llamado método . Esto especifica el tipo de solicitud HTTP que realizará con el formulario. Cuando intente agregar un elemento al servidor, debe utilizar una solicitud POST . Dado que eso es exactamente lo que estamos tratando de hacer, establecemos el atributo del método en POST.
El atributo de acción se establece en / juegos : El otro atributo al que debemos prestar atención en los formularios es el atributo de acción . Esto nos dice a dónde queremos enviar la solicitud de publicación. De acuerdo con la convención, hacemos una solicitud de publicación a/games
El atributo enctype se establece en multipart / form-data : dado que incluimos la capacidad de cargar una imagen, necesitamos establecer el atributo enctype en multipart / form-data.
csrf_field es obligatorio: para protegerse contra la falsificación de solicitudes entre sitios, debe incluir este campo justo después de la etiqueta de formulario de apertura como se ve arriba. Si esto no está incluido, se encontrará con errores de falta de coincidencia de token.
cada entrada tiene un nombre único : las etiquetas de entrada en los formularios deben tener un atributo de nombre con un conjunto de valores único. Así es como identificamos qué datos corresponden a qué entrada cuando se procesan en Laravel o PHP en el lado del servidor.
tipo de botón de envío : para enviar el formulario, necesitará un botón con su atributo de tipo configurado para enviar.

Agregar ruta de publicación / juegos y método GamesController @ store

Para procesar realmente los datos que ingresamos en nuestro formulario, necesitamos la ruta asociada y el método de controlador para hacerlo. Podemos actualizar nuestro archivo de rutas así.

1
2
3
4
5
6
7
8
9
<?php
 
Route::get('games', 'GamesController@index');
 
Route::get('games/create', 'GamesController@create');
 
Route::get('games/{id}', 'GamesController@show');
 
Route::post('games', 'GamesController@store');

Obtener datos del envío del formulario

No vamos a intentar guardar ningún dato todavía. Solo queremos ver con qué tenemos que trabajar cuando enviamos el formulario. Recuerde que nuestro formulario tiene cuatro entradas con los nombres de título , editor , fecha de lanzamiento e imagen . Veamos cómo inspeccionarlos cuando enviemos el formulario. Completemos el store()método en nuestro GamesController de esta manera por un segundo rápido.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
use App\Game;
 
class GamesController extends Controller
{
    public function index()
    {
        $games = Game::all();
        return view('games.index', ['games' => $games]);
    }
    
    public function show(Game $id)
    {
        return view('games.show', ['game' => $id]);
    }
    
    public function create()
    {
        return view('games.create');
    }
    
    public function store()
    {
        var_dump(request('title'));
        var_dump(request('publisher'));
        var_dump(request('releasedate'));
        var_dump(request('image'));
    }
}

Sigamos adelante y enviemos nuestro formulario ahora para ver qué obtenemos. Tenga en cuenta que elegimos una imagen, pero no se actualiza visualmente en el formulario simplemente porque está más allá del alcance de este tutorial. Sin embargo, la imagen se pasará a través del formulario.
enviar un formulario con carga de archivo

El resultado de volcar nuestros datos de solicitud se ve así.
captura de datos de solicitud de envío de formulario laravel

Esto muestra que definitivamente estamos obteniendo todos los datos que queremos. Podemos ver que todos los campos del formulario se pasaron con éxito a través de la solicitud de publicación, incluido un archivo de imagen que es un objeto de tipo Illuminate \ Http \ UploadedFile. Fantástico.

Ahora queremos poder guardar el título , el editor , la fecha de lanzamiento y la ruta de la imagen en la base de datos. En nuestra tabla de juegos actual, tenemos campos para el título, el editor y la fecha de lanzamiento, pero nada para la ruta de la imagen. Hmm. Parece que es posible que debamos ajustar nuestro archivo de migración y volver a ejecutar las migraciones. Agreguemos esta línea a nuestro archivo de migración original.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateGamesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('games', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('publisher');
            $table->integer('releasedate');
            $table->string('image');
            $table->timestamps();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('games');
    }
}

Ahora vamos a ejecutar php artisan migrate: refresh , que restablecerá y volverá a ejecutar todas las migraciones. Nunca hagas esto en una base de datos para la que quieras conservar datos, porque esto básicamente elimina todo y reconstruye las tablas. Se perderán todos los datos. Para nuestro pequeño tutorial, esto no es un problema, pero esto es algo a tener en cuenta.
php artisan migrate actualizar

Almacenar el juego en la base de datos

Con nuestra tabla de juegos ahora actualizada para incluir una ruta para un archivo de imagen, estamos listos para almacenar un juego en la base de datos. Así es como podemos actualizar el store()método para hacerlo por nosotros.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Game;
 
class GamesController extends Controller
{
    public function index()
    {
        $games = Game::all();
        return view('games.index', ['games' => $games]);
    }
    
    public function show(Game $id)
    {
        return view('games.show', ['game' => $id]);
    }
    
    public function create()
    {
        return view('games.create');
    }
    
    public function store()
    {
        $game = new Game;
        
        $game->title = request('title');
        $game->publisher = request('publisher');
        $game->releasedate = request('releasedate');
        $game->image = request()->file('image')->store('public/images');
        $game->save();
    }
}

Lo que sucede con este store()método es bastante sencillo. Podemos utilizar la request()función auxiliar para acceder a los datos que queremos del formulario. Sin embargo, uno de estos niños está haciendo lo suyo. Eche un vistazo a la línea que tiene esto: $ juego-> imagen = solicitud () -> archivo ('imagen') -> tienda ('público / imágenes'); Aquí están sucediendo dos cosas a la vez. Laravel acepta el archivo de nuestro formulario de envío y lo almacena en la aplicación en storage / app / public / images . Al mismo tiempo, la ruta de la imagen se almacena en, $game->imagepor lo que obtenemos la fuente de la imagen cuando queremos mostrarla en el navegador más adelante. Usemos Tinker para ver si todo está en la base de datos como esperamos.

se agrega un nuevo juego a través del éxito del formulario

¡Si! Parece que funcionó muy bien, y podemos ver que ahora también tenemos una ruta de imagen para el archivo cargado.

Cómo mostrar imágenes almacenadas

Necesitaremos actualizar nuestra show.blade.phpvista para poder hacer uso de nuestro archivo de imagen recién subido. Veamos qué tenemos que hacer.

Eliminar esta línea resaltada

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@extends('layouts.master')
 
@section('content')
 
    <div class="card" style="width: 270px;margin: 5px">
        <img class="card-img-top" src="/{{ $game->title }}.png" alt="Card image cap">
        <div class="card-block">
            <h3 class="card-title">{{ $game->title }}</h3>
            <p class="card-text">{{ $game->title }} is published by {{ $game->publisher }}</p>
            <a href="/games" class="btn btn-primary">List Games</a>
        </div>
    </div>
 
@endsection

Y reemplazar así

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@extends('layouts.master')
 
@section('content')
 
    <div class="card" style="width: 270px;margin: 5px">
        <img class="card-img-top" src="{{ Storage::url($game->image)  }}" alt="Card image cap">
        <div class="card-block">
            <h3 class="card-title">{{ $game->title }}</h3>
            <p class="card-text">{{ $game->title }} is published by {{ $game->publisher }}</p>
            <a href="/games" class="btn btn-primary">List Games</a>
        </div>
    </div>
 
@endsection

Cree un enlace simbólico de público / almacenamiento a almacenamiento / aplicación / público

Usando el método que hemos tomado anteriormente, las imágenes se almacenarán en el directorio de almacenamiento, o más específicamente en storage / app / public / images. No se puede acceder a esta ubicación mediante solicitudes web. Para habilitar esto, necesitamos crear un enlace simbólico de public / storage a storage / app / public. Hay un comando fácil que puede ejecutar para hacer esto por usted: php artisan storage: link. Puede ejecutar esto directamente desde el directorio raíz de su proyecto. Si tiene problemas con este comando al ejecutar homestead en virtualbox o una estación de trabajo vmware en Windows, deberá crear manualmente el enlace simbólico en el sistema operativo host (Windows) y esto también funcionará. Esto se debe a que los enlaces simbólicos suelen fallar en los sistemas operativos invitados de Linux que usan Vagrant con VMWare Workstation o Virtualbox en Windows. En nuestro ejemplo, seguimos el formato siguiente desde el símbolo del sistema de Windows con privilegios de administrador y funcionó muy bien.

mklink / DC: \ localdev \ 54 \ public \ storage C: \ localdev \ 54 \ storage \ app \ public

Agreguemos un juego más para asegurarnos de que todo funcione.
formulario enviar con carga de archivo laravel

¡Parece que está funcionando muy bien!
carga de archivos y visualización exitosa