Introducción
En este apartado generaremos el
layout del front--end y, adicionalmente incluiremos
Materialize para generar la interfaz de usuario, ajustando los estilos necesarios a nuestro caso particular, así como
jQuery para crear interactividad.
Estilos, scripts e imágenes
Puesto que inicialmente vamos a a desarrollar un CMS similar al creado en la clase
Creación de un CMS desde cero, vamos a utilizar las mismas imágenes, que puedes descargar
EN ESTE ENLACE y copiar dentro de una nueva carpeta llamada
img dentro de
public.
También vamos a utilizar los mismos estilos del proyecto anterior, para ello, crea y modifica el archivo de hoja de estilos
public/css/app.css con el siguiente contenido:
Ver ejemplo de código
Por último, crea y modifica el archivo de
scripts public/js/app.js con el siguiente contenido:
Ver ejemplo de código
El layout
Al ser una vista, el archivo debe estar dentro de
resources/views y, para mantener las vistas organizadas, crea dentro una carpeta llamada
layouts y en ella el archivo
app.blade.php. Modifícalo con el siguiente código:
Ver ejemplo de código
Como puedes apreciar, hemos incluido en él tanto la parte correspondiente a
head,
header y
nav como el
footer, indicando en el medio mediante la directiva
@yield('content') que es en ese punto en el que se cargará el contenido de la vista seleccionada (en el caso de la
home, la correspondiente al archivo
resources/views/app/index.php).
NOTA: Los enlaces se pueden construir mediante la funcion
route('nombre-de-la-ruta") o bien mediante
url('url-de-la-ruta').
Para indicar a Laravel que debe usar dicho
layout, tan solo debemos modificar el archivo
resources/views/app/index.php de la siguiente forma:
Ver ejemplo de código
Observa que primero incluimos el
layout con la directiva
@extends y a continuación encerramos el contenido a mostrar con las directivas
@section y
@endsection.
Resto de rutas del front-end
Para finalizar y evitar errores, dado que en el menú de navegación estamos llamando a rutas que todavía no existen, debemos dejarlas ya creadas en nuestro archivo
routes/web.php:
Ver ejemplo de código
En este punto ya debería funcionar la home con un
layout similar al del proyecto anterior, si bien las rutas no llevarán a ningún sitio (y de hecho la de
admin ni siquiera es correcta y tendremos que modificarla más adelante, pero su controlador aún no existe y debíamos crearla para poder continuar sin errores.
Acerca de las rutas
Puedes ver un listado de rutas desde la consola con el comando
php artisan route:list.
Puedes limpiar la caché de rutas si estás teniendo problemas mediante el comando
php artisan route:clear.
Si no funciona ninguna ruta nada más que la home, asegúrate de tener habilitado el módulo
mod_rewrite en la consola mediante los comandos:
Ver ejemplo de código
Si aún así no funcionan las rutas, prueba a modificar el parámetro
AllowOverrride None a
AllowOverrride All en la sección
del archivo
/etc/apache2/apache2.conf, guardar, salir y volver a reiniciar Apache (
sudo service apache2 restart).