Home | Clases | Creación de un CMS en PHP con Laravel | Layout y rutas del front-end

Layout y rutas del front-end


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, con lo que puedes sustituir todo el contenido del archivo public/css/app.css por el siguiente:



Por último, también puedes sustituir todo el contenido del archivo public/js/app.js por el siguiente:




El layout

Al ser una vista, el archivo debe estar dentro de resources/views y, para mantener las vistas organizadas, crearemos dentro una carpeta llamada layout y en ella el archivo app.blade.php con el siguiente 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:



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:



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:



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).
Fecha de publicación: 24/05/2019
Asignaturas: desarrollo web en entorno servidordespliegue de aplicaciones web
Temas: blog gestor de contenidos laravel php css jquery
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos