En nuestra pequeña aplicación de juegos, todavía no tenemos una manera de agregar nuevos juegos a la base de datos utilizando la aplicación en sí.
Agregar juegos / crear ruta y método GamesController @ create
Por convención, cuando desea mostrar un formulario, solicitud GETgames/create . GamesController @ create . games/createy necesitamos un método en el controlador para GamesController @ create.
rutas / web.php
| <?php Route::get('games', 'GamesController@index'); Route::get('games/{id}', 'GamesController@show'); Route::get('games/create', 'GamesController@create'); |
app / 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, probémosla rápidamente en el navegador. http://54.dev/games/create , notamos un problema.
Lo sentimos, la página que estás buscando no se pudo encontrar.
2/2
NotFoundHttpException en Handler.php línea 131:
No hay resultados de consultas para el modelo [App \ Game].
Uh oh, eso no es genial. http://54.dev/games/create , en realidad estamos activando Route :: get ('games / {id}', 'GamesController @ show'); ruta y esto no es lo que queremos.
| <?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 bonito texto de 'funciona' para que sepamos que la ruta y el método de controlador que queremos que funcionen. create()método para representar un archivo de vista para que podamos ver el formulario.
| public function create() { return view('games.create'); } |
Cree una nueva vista de create.blade.php y agregue un formulario
Dentro de los recursos / vistas / juegos continúe y agregue un archivo de vista llamado create.blade.php. subir una imagen para el juego.
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.
Repasemos algunos puntos importantes sobre el nuevo formulario.
- El método debe configurarse para publicar : cada formulario tendrá un atributo llamado método . el tipo de solicitud HTTP que realizará con el formulario. POST .
- El acción se establece en / games : el otro atributo al que debemos prestar atención en los formularios es el acción . una solicitud posterior a
/games - El enctype se establece en multipart / form-data : dado que incluimos la capacidad de cargar una imagen, necesitamos establecer el enctype en multipart / form-data.
- Se requiere
- cada entrada tiene un nombre único nombre con un conjunto de valores único.
- tipo de envío : para enviar el formulario, ¡necesitará un botón con su 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 del controlador para hacerlo.
| <?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
Todavía no vamos a intentar guardar ningún dato. título , editor , fecha de lanzamiento e imagen . 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')); } } |
Avancemos y enviemos nuestro formulario ahora para ver qué obtenemos.
El resultado de deshacerse de nuestros datos de solicitud se ve así.
Esto muestra que definitivamente estamos obteniendo todos los datos que queremos.
Ahora queremos poder guardar el título , el editor , la fecha de lanzamiento y la imagen en la base de datos.
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.
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. store()método para hacer eso 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 en este store()método es bastante sencillo. request()función auxiliar para acceder a los datos que deseamos del formulario. $ game-> image = request () -> file ('image') -> store ('public / images'); Aquí suceden dos cosas a la vez. storage / app / public / images . ruta de la imagen se almacena, por $game->image lo que recuperamos la fuente de la imagen cuando queremos mostrarla en el navegador más adelante.
¡Si!
Cómo mostrar imágenes almacenadas
Vamos a necesitar actualizar nuestra show.blade.php vista para que podamos hacer uso de nuestro archivo de imagen recién cargado.
Eliminar esta línea resaltada
| @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í
| @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 public / storage a storage / app / public
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. enlace simbólico de public / storage a storage / app / public. php artisan storage: link.
mklink / DC: \ localdev \ 54 \ public \ storage C: \ localdev \ 54 \ storage \ app \ public
Agreguemos un juego más para asegurarnos de que todo funcione.
¡Parece que está funcionando muy bien!
Cómo configurar el envío de formularios en el resumen de Laravel
Dimos un gran paso en este tutorial.
0 Comentarios
Dejanos tu comentario para seguir mejorando!