# Ejercicios 2

En los ejercicios de esta parte vamos a continuar con el sitio Web que empezamos para la gestión de un videoclub. Primero añadiremos los controladores y métodos asociados a cada ruta, y posteriormente también completaremos las vistas usando formularios y el sistema de plantillas _Blade_.

## Ejercicio 2.1 - Controladores

En este primer ejercicio vamos a crear los controladores necesarios para gestionar nuestra aplicación y además actualizaremos el fichero de rutas para que los utilice.

Empezamos por añadir los dos controladores que nos van a hacer falta: `CatalogController.php` y `HomeController.php`. Para esto tenéis que utilizar el comando de Artisan que permite crear un controlador vacío (sin métodos).

A continuación vamos a añadir los métodos de estos controladores. En la siguiente tabla resumen podemos ver un listado de los métodos por controlador y las rutas que tendrán asociadas:

| Ruta                | Controlador         | Método      |
| ------------------- | ------------------- | ----------- |
| `/`                 | `HomeController`    | `getHome`   |
| `catalog`           | `CatalogController` | `getIndex`  |
| `catalog/show/{id}` | `CatalogController` | `getShow`   |
| `catalog/create`    | `CatalogController` | `getCreate` |
| `catalog/edit/{id}` | `CatalogController` | `getEdit`   |

Acordaros que los métodos `getShow` y `getEdit` tendrán que recibir como parámetro el `$id` del elemento a mostrar o editar, por lo que la definición del método en el controlador tendrá que ser como la siguiente:

```php
public function getShow($id)
{
    return view('catalog.show', array('id'=>$id));
}
```

Por último vamos a cambiar el fichero de rutas `routes/web.php` para que todas las rutas que teníamos definidas (excepto las de _login_ y _logout_ que las dejaremos como están) apunten a los nuevos métodos de los controladores, por ejemplo:

```php
Route::get('/', [HomeController::class, 'getHome']);
```

El código que habíamos puesto en cada ruta con el `return` de la vista asociada lo tenéis que mover al método del controlador correspondiente.

## Ejercicio 2.2 - Completar las vistas

En este ejercicio vamos a terminar los métodos de los controladores que hemos creado en el ejercicio anterior y además completaremos las vistas asociadas:

**Método HomeController@getHome**

En este método de momento solo vamos a hacer una redirección a la acción que muestra el listado de películas del catálogo: `return redirect()->action([CatalogController::class, 'getIndex']);`. Más adelante tendremos que comprobar si el usuario está logueado o no, y en caso de que no lo esté redirigirle al formulario de login.

**Método CatalogController@getIndex**

Este método tiene que mostrar un listado de todas las películas que tiene el videoclub. El listado de películas lo podéis obtener del fichero `array_peliculas.php` facilitado con los materiales. Este array de películas lo tenéis que copiar como variable miembro de la clase (más adelante las almacenaremos en la base de datos). En el método del controlador simplemente tendremos que modificar la generación de la vista para pasarle este array de películas completo (`$this->arrayPeliculas`).

Y en la vista correspondiente simplemente tendremos que incluir el siguiente trozo de código en su sección `content`:

```php
<div class="row">

    @foreach( $arrayPeliculas as $key => $pelicula )
    <div class="col-xs-6 col-sm-4 col-md-3 text-center">

        <a href="{{ url('/catalog/show/' . $key ) }}">
            <img src="{{$pelicula['poster']}}" style="height:200px"/>
            <h4 style="min-height:45px;margin:5px 0 10px 0">
                {{$pelicula['title']}}
            </h4>
        </a>

    </div>
    @endforeach

</div>
```

Como se puede ver en el código, en primer lugar se crea una fila (usando el sistema de rejilla de Bootstrap) y a continuación se realiza un bucle _foreach_ utilizando la notación de _Blade_ para iterar por todas las películas. Para cada película obtenemos su posición en el array y sus datos asociados, y generamos una columna para mostrarlos. Es importante que nos fijemos en como se itera por los elementos de un array de datos y en la forma de acceder a los valores. Además se ha incluido un enlace para que al pulsar sobre una película nos lleve a la dirección `/catalog/show/{$key}`, siendo `key` la posición de esa película en el array.

**Método CatalogController@getShow**

Este método se utiliza para mostrar la vista detalle de una película. Hemos de tener en cuenta que el método correspondiente recibe un identificador que (de momento) se refiere a la posición de la película en el array. Por lo tanto, tendremos que coger dicha película del array (`$this->arrayPeliculas[$id]`) y pasársela a la vista.

En esta vista vamos a crear dos columnas, la primera columna para mostrar la imagen de la película y la segunda para incluir todos los detalles. A continuación se incluye la estructura HTML que tendría que tener esta pantalla:

```markup
<div class="row">

    <div class="col-sm-4">

        {{-- TODO: Imagen de la película --}}

    </div>
    <div class="col-sm-8">

        {{-- TODO: Datos de la película --}}

    </div>
</div>
```

En la columna de la izquierda completamos el TODO para insertar la imagen de la película. En la columna de la derecha se tendrán que mostrar todos los datos de la película: título, año, director, resumen y su estado. Para mostrar el estado de la película consultaremos el valor `rented` del array, el cual podrá tener dos casos:

* En caso de estar disponible (false) aparecerá el estado "Película disponible" y un botón azul para "Alquilar película".
* En caso de estar alquilada (true) aparecerá el estado "Película actualmente alquilada" y un botón rojo para "Devolver película".

Además tenemos que incluir dos botones más: un botón que nos llevará a editar la película y otro para volver al listado de películas.

> Nota: los botones de alquilar/devolver de momento no tienen que funcionar. Acordaros que en Bootstrap podemos transformar un enlace en un botón, simplemente aplicando las clases "btn btn-default" (más info en: [https://getbootstrap.com/docs/5.0/components/buttons/](https://getbootstrap.com/docs/5.0/components/buttons/)).

Esta pantalla finalmente tendría que tener una apariencia similar a la siguiente:

![](https://226154832-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LuvkkjRoEAxp3FvdkL4%2F-Lx_cjIVNhXhk6j2tanJ%2F-Lx_iTvU4eM4yyvvYj9G%2Fsesion_2_ejercicio_2.png?alt=media\&token=dda8d777-f9d5-4908-a575-ce984e37b17b)

**Método CatalogController@getCreate**

Este método devuelve la vista "`catalog.create`" para añadir una nueva película. Para crear este formulario en la vista correspondiente nos podemos basar en el contenido de la plantilla "`catalog_create.php`". Esta plantilla tiene una serie de TODOs que hay que completar. En total tendrá que tener los siguientes campos:

| Label    | Name     | Tipo de campo |
| -------- | -------- | ------------- |
| Título   | title    | text          |
| Año      | year     | text          |
| Director | director | text          |
| Poster   | poster   | text          |
| Resumen  | synopsis | textarea      |

Además tendrá un botón al final con el texto "Añadir película".

> De momento el formulario no funcionará. Más adelante lo terminaremos.

**Método CatalogController@getEdit**

Este método permitirá modificar el contenido de una película. El formulario será exactamente igual al de añadir película, así que lo podemos copiar y pegar en esta vista, y simplemente cambiar los siguientes puntos:

* El título por "Modificar película".
* El texto del botón de envío por "Modificar película".
* Añadir justo debajo de la apertura del formulario el campo oculto para indicar que se va a enviar por PUT. Recordad que Laravel incluye el método `@method('PUT')` que nos ayudará a hacer esto.&#x20;

De momento no tendremos que hacer nada más, más adelante lo completaremos para que se rellene con los datos de la película a editar.

