Ejercicios

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 objetivo es realizar un sitio web para la gestión interna en un videoclub, el cual 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.

Ejercicio 1 - Instalación de Laravel (0.5 puntos)

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 2 - Definición de las rutas (0.5 puntos)

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

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 3 - Layout principal de las vistas con Bootstrap (1 punto)

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 "https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template", pero modificando los siguientes elementos:

Dentro de la sección <body> del HTML, eliminamos el texto que viene de ejemplo (<h1>Hello, world!</h1>) e incluimos la barra de navegación que hemos guardado antes utilizando el siguiente código:
```
@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:
```
<div class="container">
  @yield('content')
</div>
```

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 4 - Crear el resto de vistas (1 punto)

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 de 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

@stop

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

home.blade.php

resources/views/

login.blade.php

resources/views/auth/

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 se carguen 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:

return view('home');
return view('catalog.index');
return view('catalog.show', array('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.

PreviousPlantillas mediante Blade NextCapítulo 2. Controladores, middleware y formularios

Last updated 4 years ago