# Ejercicios 1
En los ejercicios de esta sección del curso vamos a desarrollar una pequeña web para la gestión interna de un videoclub, empezaremos por definir las rutas y vistas del sitio y, poco a poco, en los siguientes ejercicios la iremos completando hasta terminar el sitio web completo.
El sitio web estará protegido mediante usuario y contraseña. Una vez autorizado el acceso, el usuario podrá listar el catálogo de películas, ver información detallada de una película, realizar búsquedas o filtrados y algunas operaciones más de gestión. Además en los ejercicios finales añadiremos una API REST que nos permitirá realizar estas mismas operaciones.
## Ejercicio 1.1 - Instalación de Laravel
En primer lugar tenemos que instalar todo lo necesario para poder realizar el sitio web con Laravel. Para esto seguiremos las explicaciones del apartado "Instalación de Laravel" que hemos visto en la teoría para instalar un servidor Web y Composer.
Una vez instalado crearemos un nuevo proyecto de Laravel en la carpeta `videoclub`, lo configuraremos (clave de seguridad, permisos, etc.) y probaremos que todo funcione correctamente.
## Ejercicio 1.2 - Definición de las rutas
En este ejercicio vamos a definir las rutas principales que va a tener nuestro sitio web. Para empezar simplemente indicaremos que las rutas devuelvan una cadena (así podremos comprobar que se han creado correctamente). A continuación se incluye una tabla con las rutas a definir (todas de tipo GET) y el texto que tienen que mostrar:
| Ruta | Texto a mostrar |
| ------------------- | --------------------------- |
| `/` | Pantalla principal |
| `login` | Login usuario |
| `logout` | Logout usuario |
| `catalog` | Listado películas |
| `catalog/show/{id}` | Vista detalle película {id} |
| `catalog/create` | Añadir película |
| `catalog/edit/{id}` | Modificar película {id} |
Para comprobar que las rutas se hayan creado correctamente utiliza el comando de `artisan` que devuelve un listado de rutas y además prueba también las rutas en el navegador.
## Ejercicio 1.3 - *Layout* principal de las vistas con Bootstrap
En este ejercicio vamos a crear el *layout* base que van a utilizar el resto de vistas del sitio web y además incluiremos la librería Bootstrap para utilizarla como estilo base.
En primer lugar nos tenemos que descargar desde los materiales de los ejercicios la plantilla para la barra de navegación principal (`navbar.blade.php`) y almacenarla en la carpeta `resources/views/partials`.
A continuación vamos a crear el *layout* principal de nuestro sitio. Para esto creamos el fichero `resources/views/layouts/master.blade.php` y le añadimos como contenido la plantilla base que propone Bootstrap en su documentación "", pero modificando los siguientes elementos:
* Dentro de la sección `` del HTML, eliminamos el texto que viene de ejemplo (`Hello, world!
`) e incluimos la barra de navegación que hemos guardado antes utilizando el siguiente código:
```markup
@include('partials.navbar')
```
* A continuación de la barra de navegación añadimos la sección principal donde aparecerá el contenido de la web:
```markup
@yield('content')
```
Con esto ya hemos definido el *layout* principal, sin embargo todavía no podemos probarlo ya que no está asociado a ninguna ruta. En el siguiente ejercicio realizaremos los cambios necesarios para poder verlo y además añadiremos el resto de vistas hijas.
## Ejercicio 1.4 - Crear el resto de vistas
En este ejercicio vamos terminar una primera versión estable de la web. En primer lugar crearemos las vistas asociadas a cada ruta, las cuales tendrán que extender del *layout* que hemos hecho en el ejercicio anterior y mostrar (en la sección `content` del *layout*) el texto de ejemplo que habíamos definido para cada ruta en el ejercicio 2. En general todas las vistas tendrán un código similar al siguiente (variando únicamente la sección `content`):
```
@extends('layouts.master')
@section('content')
Pantalla principal
@endsection
```
Para organizar mejor las vistas las vamos a agrupar en sub-carpetas dentro de la carpeta `resources/views` siguiendo la siguiente estructura:
| Vista | Carpeta | Ruta asociada |
|---|
| Vista | Carpeta | Ruta asociada |
home.blade.php | resources/views/ | / |
login.blade.php | resources/views/auth/ | login |
index.blade.php | resources/views/catalog/ | catalog |
show.blade.php | resources/views/catalog/ | catalog/show/{id} |
create.blade.php | resources/views/catalog/ | catalog/create |
edit.blade.php | resources/views/catalog/ | catalog/edit/{id} |
> Creamos una vista separada para todas las rutas excepto para la ruta "logout", la cual no tendrá ninguna vista.
Por último vamos a actualizar las rutas del fichero `routes/web.php` para que devuelvan las vistas que acabamos de crear. Acordaros que para referenciar las vistas que están dentro de carpetas, la barra `/` de separación se transforma en un punto, y que además, como segundo parámetro, podemos pasar datos a la vista. A continuación se incluyen algunos ejemplos:
```php
return view('home');
return view('catalog.index');
return view('catalog.show', ['id'=>$id]);
```
Una vez hechos estos cambios ya podemos probarlo en el navegador, el cual debería mostrar en todos los casos la plantilla base con la barra de navegación principal y los estilos de Bootstrap aplicados. En la sección principal de contenido de momento solo podremos ver los textos que hemos puesto de ejemplo.