Tutorial de Laravel e ImgBB

` como sigue. ```html

GALERÍA

``` Por ahora hemos terminado con las vistas, lo que sigue es conectar la app a la base de datos, crear el modelo y la migración de la tabla que guardará los datos de las imágenes. ### Base de datos Para la base de datos vamos a usar MySQL. Ingresa a tu gestor de base de datos y crea uno. Yo estoy utilizando phpMyAdmin. A la base de datos lo llamé `tutorial_imgbb`. ![base_datos.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1663105236437/IkpXK94O7.png align="left") Ve al archivo de variables de entorno `.env`, busca la variable `DB_DATABASE` y coloca el nombre que le diste a tu base de datos. ```apache DB_DATABASE=tutorial_imgbb ``` Ya estamos conectados, ahora crearemos el modelo y la migración de la tabla `images`. ### Modelo y migración Para generar el modelo y la migración de `Images` ejecutamos el siguiente comando. ```javascript php artisan make:model Image -m ``` Este comando generará dos ficheros. El fichero del modelo se encuentra el el directorio `app/models/Image.php`. Aquí colocamos los atributos que serán "mass assignable". El modelo quedará como sigue. ```php class Image extends Model { use HasFactory; protected $fillable = ['title', 'url']; } ``` Ahora la migración. El fichero se encuentra en `database/migrations/create_images_table.php`. Dentro de la función `up()` añadimos los campos `title` y `url`. La función quedará como sigue. ```php public function up() { Schema::create('images', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('url'); $table->timestamps(); }); } ``` Ahora corremos las migraciónes. ```javascript php artisan migrate ``` Este comando debe insertar la tabla `images` en la base de datos `tutorial_imgbb`, con la estructura definida en la migración. ![images_table_edited.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1663276249249/EhBDDhsdS.png align="left") A continuación generaremos los controladores y definiremos las rutas. ### Controladores Nuestra aplicación tendrá un solo controlador, `ImageController.php`. Lo generamos con el siguiente comando. ```javascript php artisan make:controller ImageController ``` El controlador generado se insertará en el directorio `app/Http/Controllers/ImageController.php`. Abrimos el fichero y vamos a crear primero la función `save()` que se encargará de subir la imagen a nuestra cuenta `imgbb.com` y guardará los datos en la tabla `images`. ```php public function save(Request $request) { $data = ImgBB::image($request->file('fileimage')); $image = new Image(); $image->title = $request->title; $image->url = $data['data']['url']; $image->save(); return redirect()->route('home'); } ``` Veamos que sucede aquí. En la primer línea podemos ver en acción el package `ImgBB` que habíamos instalado y configurado. Esta sencilla línea de código se encarga de subir la imagen a nuestra cuenta. La función `ImgBB::image()` recibe como parámetro la imagen que queremos subir. Accedemos a dicha imagen por medio del método `file` de la instancia de la clase `Request` (`$request->file()`). El `string` que recibe este método debe coincidir con el atributo `name` del `input file` del formulario. En la siguiente línea creamos una instancia del modelo `Image`. Establecemos el atributo `title` accediendo por medio de la instancia de `$request->title`. Para establecer el atributo `url` usamos `$data`. El método `ImgBB::image()` sube la imagen y retorna un `array` con un conjunto de datos. El dato que nos interesa está en `$data['data']['url']`. A continuación llamamos el método `save()` para guardar los datos en la tabla `images`. Finalmente, la última línea hace un redireccionamiento hacia la misma vista `home`. Debajo del método `save()` añadimos la función `show()` e insertamos el siguiente código. ```php public function show() { $data = Image::all(); return view('home', ['images' => $data]); } ``` Este código es muy sencillo. En primer lugar el método `Image::all()` recupera todos los registros de la tabla `images` y los guarda en la variable `$data`. La línea siguiente hace un llamado a la vista `home` y le pasa la variable `$data`. Continuamos definiendo las rutas. ### Rutas Para este ejemplo vamos definir solo dos rutas. Accedemos al fichero `routes/web.php` e insertamos el siguiente código. ```php Route::get('/', [ImageController::class, 'show'])->name('home'); Route::post('/', [ImageController::class, 'save'])->name('save-image'); ``` La primer línea define una petición `GET` y lo vincula al método `show` de la clase `ImageController` que definimos anteriormente. Nombramos esta ruta con el nombre `home`. La segunda línea realiza una petición `POST` y lo enlaza al método `save` del controlador `ImageController`. Lo nombramos `save-image`. Regresamos a las vista para terminar con algunos detalles para finalizar. ### Últimos detalles En la vista `home` buscamos el atributo `action` del formulario y lo vinculamos la ruta `POST`. Debe quedar `action='{{ route("save-image") }}'`. Más abajo en la sección de la galería agregamos una condición para verificar si hay registros o no. ```html @if($images->isNotEmpty())

GALERÍA

@endif ``` Como se observa en la código anterior, al componente galería le pasamos la variable `$images` para que los datos estén disponibles dentro del componente. Ahora en el componente `galeria` debemos establecer que variables estarán disponibles dentro de este componente por medio de la directiva `@props`. ```php @props(['images']) ``` Finalmente modificamos el bucle `for` por un `foreach` para recorrer la variable de `$images` que recordemos es un `array` con los registros de la tabla `images`. El componente debe quedar como se muestra a continuación. ```html @props(['images'])

@foreach ($images as $image)

@endforeach

``` El bucle recorre los registros que están en `$images` y guarda cada fila en `$image`. Remplazamos el valor del atributo `src` de `` con `$image->url` para acceder a dirección de la imagen, luego en la etiqueta `

` mostramos el título de la imagen a través de `$image->title`. Ahora nuestra app es completamente funcional. Debes poder cargar una imagen, subirla a cuenta imgbb y mostrarlas en tu galería. Para terminar, sería genial tener alguna notificación que nos avise cuando la imagen ha sido subida y guardada. Pues, para ello existe un package genial que se integra muy bien con proyectos Laravel, [PHPFlasher](https://php-flasher.io/). ### PHPFlasher PHPFlasher es un poderoso sistema de notificaciones para PHP. Para integrarlo a nuestro proyecto lo instalamos con el siguente comando. ```php composer require php-flasher/flasher-laravel ``` PHPFlasher cuenta con un conjunto de diversas notificaciones. Para nuestra app elegí SweetAlert 2. Para usarlo debemos instalar el correspondiente adaptador para Laravel. ```php composer require php-flasher/flasher-sweetalert-laravel ``` Está listo para usarlo. Abrimos nuestro controlador `ImageController` y al método `save` le pasamos una instancia `SweetAlertFactory` y luego llamamos al método `addSuccess`. ```php file('fileimage')); $image = new Image(); $image->title = $request->title; $image->url = $data['data']['url']; $image->save(); $flasher->addSuccess("La imágen ha sido guardado con éxito!"); return redirect()->route('home'); } public function show() { $data = Image::all(); return view('home', ['images' => $data]); } } ``` Una vez que la imagen suba a nuestra cuenta imgbb y guarde los datos en la tabla `images` se disparará una notificación con el texto que le pasamos al método `addSuccess`. ### Conclusión Hemos concluido con el proyecto. Pudimos comprobar los fácil que es usar ImgBB API e integrarlo a un proyecto Laravel. Logramos subir nuestras imágenes, guardar los datos en nuestra base de datos y mostrarlos en una sencilla galería. El proyecto estará en mi repositorio de [GitHub](https://github.com), puedes encontrarlo haciendo clic [AQUÍ](https://github.com/AlegreCode/tutorial-laravel-imgbb). Espero que lo hayas encontrado entretenido, instructivo y claro. Si tienes alguna duda, puedes hacérmelo saber en los comentarios. Pronto estaré subiendo más tutoriales. Nos vemos en la próxima. Saludos!👋😊