4.1 Ejercicio Practico #1

UNIVERSIDAD DE NARIÑO
SEMINARIO DE COMPUTACIÓN E INFORMATICA II
EJERCICIO PRACTICO LARAVEL
PROGRAMA DE INGENIERIA DE SISTEMAS

FACULTAD DE INGENIERIA
EJERCICIO PRÁCTICO # 1: VIDEO CLUB
A) Instalación de Laravel
En primer lugar, tenemos que instalar todo lo necesario para poder realizar el sitio web
con Laravel. Para esto seguiremos los pasos que ya previamente se explicaron en la
unidad de introducción al framework.
Una vez instalado crearemos un nuevo proyecto de Laravel con el nombre videoclub, lo
configuraremos (clave de seguridad, permisos, etc.) y probaremos que todo funcione
correctamente.
Clave de seguridad
Una vez termine el proceso de instalacion abrimos el proyecto en un editor , para el caso
usaremos Visual Studio Code. Desde alli se podra visualizar la estructura completa del
proyecto y finalmente accedemos al directorio config/app.php para concretar ajustes
adicionales con la localizacion y zona horaria.
Y comprobamos en el navegador que el proyecto funciona correctamente:

B) Cargando el proyecto Laravel a un repositorio de Git
Ahora bien, una vez instalado Laravel, continuamos por cargar el proyecto Laravel
denominado videoclub a un repositorio en Git.
Si deseamos podemos cargar el proyecto a un repositorio publico como lo es GitHub.
C) 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:
El resultado se muestra a continuación

Para comprobar que las rutas se hayan creado correctamente se empleará el
comando de artisan que devuelve un listado de rutas.
Ejercicio 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, accedemos a la web "http://getbootstrap.com/" y descargamos la
librería.
Esto nos bajará un fichero zip comprimido con tres carpetas (js, css y fonts) que tenemos
que extraer y poner en la carpeta " public/assets/bootstrap " (tendremos que crear las
carpetas " /assets/bootstrap ").
Para este ejercicio descargaremos material adicional el cual será empleado para el
diseño de las páginas. El material se encontrará en
https://www.dropbox.com/s/s2vj3trbmp8kgkn/ejercicios-laravel-1.zip?dl=
Dentro del directorio descargado encontraremos 3 archivos el cual por el momento se
empleará la barra de navegación principal (navbar.blade.php) y la almacenamos en la
carpeta resources/views/partials.
A continuación, vamos a crear el layout principal de nuestro sitio para eso creamos la
plantilla views/layouts/master.blade.php el cual será el archivo base de nuestro
proyecto.
Dentro del archivo cambiamos las rutas para la carga de los assets (css y js) que se han
almacenado en local.
Para generar la ruta completa y que encuentre los recursos tendremos que escribir los
siguientes comandos:
<link href="{{ url('/assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

<script type="text/javascript" src="{{ url('/assets/bootstrap/js/bootstrap.min.js')
}}"></script>
Dentro de la sección <body> incluimos la barra de navegación que hemos guardado
en resources/views/partials/navbar.blade.php y a continuación de dicha barra se añade
la sección principal donde aparecerá el contenido de la página web.
Ejercicio 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 (master.blade.php) 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.
Para organizar mejor las vistas las vamos a agrupar en sub-carpetas dentro de la
carpeta resources/views siguiendo la siguiente estructura:
En general todas las vistas tendrán un código similar al siguiente (variando únicamente
la sección content )
Por ejemplo para la vista home.php se tendra un codigo como el que se visualiza a
continuacion.
Por último, vamos a actualizar las rutas del fichero routes/web.php para que se carguen
las vistas que acabamos de crear.
Obteniendo el siguiente resultado en el Navegador.

4.1 Ejercicio Practico #1

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4.1 Ejercicio Practico #1

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD DE NARIÑO

SEMINARIO DE COMPUTACIÓN E INFORMATICA II

EJERCICIO PRACTICO LARAVEL

PROGRAMA DE INGENIERIA DE SISTEMAS

Y comprobamos en el navegador que el proyecto funciona correctamente:

Si deseamos podemos cargar el proyecto a un repositorio publico como lo es GitHub.

C) Definición de las rutas

El resultado se muestra a continuación

Ejercicio 3 - Layout principal de las vistas con Bootstrap

<link href="{{ url('/assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

Ejercicio 4 - Crear el resto de vistas

Obteniendo el siguiente resultado en el Navegador.

También podría gustarte