jairogarcíarincón

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:



Por último, crea y modifica el archivo de scripts public/js/app.js con el siguiente contenido:

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:



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).

---

Publicado el 29 de Enero de 2025

bloggestor de contenidoslaravelphpcssjquery