¿Cómo completar nuestro sistema de plantillas en Laravel?
El diseño de sistemas de plantillas es una habilidad invaluable para cualquier desarrollador web que busque optimizar la estructura y presentación de sus aplicaciones. En esta clase, vamos a concluir el diseño de nuestro sistema utilizando Laravel, una de las herramientas más poderosas para desarrolladores PHP. Acompáñame en este viaje técnico para crear la base de un sitio web bien estructurado con funcionalidades modernas.
¿Cómo configurar el header y el footer en Blade?
Para establecer una estructura básica en tu aplicación, primero configuramos el encabezado y el pie de página (header y footer) utilizando HTML5 dentro de Blade, la potente herramienta de plantillas de Laravel. La creación de un diseño con líneas limpias y sombras sutiles puede mejorar significativamente la estética de tu sitio. Aquí están algunos pasos simples que seguimos:
Header con línea y sombra:
<header><div class="bg-blue-900 py-1"><!-- Contenido del header --></div></header>
Navegación e imagen isotipo:
Eventualmente, añadimos una navegación sencilla apuntando a la ruta de inicio. Si aún no tienes una imagen, asegúrate de crear la carpeta correspondiente y añadirla:
¿Cómo manejar rutas y enlaces correctamente en Laravel?
Gestionar rutas y enlaces de forma óptima es esencial para una navegación fluida. Debes asignar nombres a tus rutas para evitar errores y permitir una referencia sencilla y limpia desde tus vistas. Usa route para obtener la URL nombrada:
¿Cómo utilizar condicionales Blade basadas en autenticación?
El uso de condicionales en Blade permite personalizar la experiencia del usuario. Aquí se hace uso de @auth y @else para distinguir el contenido visible dependiendo del estado de autentificación del usuario:
Usuari@ autenticad@: se presenta un enlace a su panel de control.
Usuari@ no autenticad@: se muestran opciones para iniciar sesión o registrarse.
¿Es necesario un sistema de caché para las imágenes?
Aunque el caché puede acelerar la carga haciendo que elementos repetitivos se carguen más rápidamente, es crucial asegurarse de que las imágenes estén correctamente posicionadas en tu estructura de carpetas. Un simple arrastre al directorio public funcionará inicialmente:
// Asegúrate de colocar imágenes en la carpeta correcta.public/imagenes/isotipo-platzi.png
¿Cómo asegurar el correcto funcionamiento de funciones PHP dentro de Blade?
Para ejecutar funciones PHP dentro de Blade, siempre envuélvelas en las llaves dobles típicas de Blade:
{{URL::to('login')}}
Esto garantiza que las funciones se interpreten correctamente y no como texto literal. Este paso es fundamental para asegurar la correcta ejecución de las funcionalidades de Laravel.
Ahora que has añadido estas configuraciones a tu plantilla, estás listo para expandir tu aplicación y seguir mejorando su funcionalidad y apariencia. ¡Adelante, el viaje del aprendizaje es continuo y apasionante!
Recomiendo también instalar en VSCode la extensión "Laravel Blade Snippets" para poder trabajar más cómodamente con Blade y tener snippets que autocompletan sintaxis de Blade :D
.
Les dejo el isotipo de Platzi:
.
.
Y el logotipo también (es blanco, no se ve pero ahí está xD):
.
Gracias
Suuuper muchas gracias! :)
Si tienen problemas con los estilos, ejecuten "npm run development" en la terminal, es uno de los scripts que estan en package.json
gracias, esa era la solución
este me funciono.
Si alguno tuvo el problema que no todas las clases de Tailwind no cargaban correctamente, lo que yo hice fue borrar la carpeta node_modules y lock file y reinstalar con npm install
lock file?
Me funcionó. Gracias
Index y Layout: complementar estructura
asset() busca dentro de la carpeta public.
Para poder hacer una validación de imprimir si el usuario está logeado o no, utilizamos el siguiente código
Para los que tienen en general problemas con los estilos de tailwind en la version 3.x solo ejecuten npm run watch esto lo que hará es que mirara cada cambio que se haga con las clases de los div, section etc. y compilara los estilos para que los muestre Esto es un comando propio de tailwind
Funciono perfectamente, version 3.1.0 tailwindcss
Si los estilos no funcionan no basta con solo correr el comando "npm run development", tenemos que ir a:
"tailwind.config.js" y en la parte de module.exports tenemos que agregar la carpeta que no esta funcionando, esto le dirá al compilador que reduzca de tamaño el tailwind en ese punto en especifico y que no consuma tanta memoria, en mi caso agregue en: module.exports en la parte de content: './layouts/**/*.blade.php'
En este lugar mis estilos no funcionaban, seguido de eso ejecutamos el: "npm run development" en terminal y se acuerdan de mi cuando les funcione.
me sirvió, muchas gracias!!!!
Los que estén haciendo este curso en 2024, donde evidentemente 8 no es la versión actual de Laravel y cuando acceden a /login /register y no sale bien, no cargan los estilos, etc.
Sucede que a partir de laravel 9 se usa vite en lugar de laravel mix, por por lo que se debe ajustar el app.blade.php y guest.blade.php quitando las referencia a @vite
¿Cuál sería la diferencia entre las funciones url() y route()?
route()
acepta como parametro el ++nombre que le pusiste a las rutas++, o su nombre por defecto si no las nombraste manualmente:
.
url()
acepta como parametro la ruta url, genera el vinculo a partir de la ++ruta url que definiste dentro de get++()
.
Cada vez que quiero usar una clase de tailwind tengo que hacer "npm run dev"? sino no me las aplica... a que es debido
Es por que el comando npm run dev, realiza la compilación sola vez, si quieres que se compilen cada vez que hagas un cambio en tus archivos, puedes usar npm run watch
¿ No es mala práctica adicionar la imagen isotipo en el directorio Public ?.
¿ No se debería copiar con laravel mix desde resources hacia Public ?
Ambas funcionan, lo recomendable es lo segundo que mencionas, pero lo primero tampoco está mal :D
¿A alguien no le carga el logo de platzi? Tengo el mismo código, ya borre cache y corri el comando npm run dev, pero no carga la imagen.
Muestra la carpeta en la que esta el logo y la línea de código desde donde lo llamas para verificar si hay un error.
Hola Larry saludos, los estilos de Tailwind se aplican una ves se ejecuta el comando "npm run dev", pero para no estar ejecuentando este comando cada vez que hagamos un cambio, se puede ejecutar el comando "npm run watch" en otra terminal para que siempre esté a la escucha de los cambios. Espero te funcionen
con este codigo quiero centrar la imagen del isotipo de Platzi pero no funciona no se adonde esta el problema
Hola! Te recomiendo usar CSS para hacerlo, no uses HTML tal cual para dar estilos a tus elementos, te recomiendo el Curso Definitivo de HTML y CSS :D
a donde guardo la imagen del isotipo de Platzi, acaso asset es la carpeta public y alli debo crear la carpeta images
minuto 4:46
Dentro de la carpeta de tu proyecto public/images/isotipo-platzi.png
he seguido el curso al pie de la letra hasta este punto... y bien... sin embargo, la parte del login y Register, al acceder, la plantilla no reconocela ruta de app.css y se ve todo mal. lo volví a hacer pero sigue lo mismo. que estoy haciendo mal?
pudiste resolverlo?
En Laravel siempre hay varias formas de obtener el mismo resultado.
.
Comparto varias formas de generar urls, pueden usarse dentro de las etiquetas anchor o formularios
.
<a href="/articles/{{$article->id}}"></a><a href="{{url('/articles', $article->id)}}"></a>{{-- llamar a las rutas por su nombre --}}<a href="{{route('articles.index')}}"></a>{{--Si la ruta es muy larga y complicada se puede extraer hacia el modelo
publicfunctionpath(){return'/articles/card/'.$this->id;}--}}<a href="{{$card->path()}}"></a>
.
Habia una forma para llamar directamente una accion de un metodo, no tengo seguridad si ya es obsoleta (deprecated) pero no logre hacer que funcionara dentro de blade, la dejo por si acaso alguien se encuentra con esta estructura:
.
{{-- llamar una accion directamente, pasar array de parametros --}}<a href="{{action('ArticlesController@show',[$article->i])}}"></a>
Eso de la imagen me sucede mucho con SASS, el cache no se va incluso utilizaba la funcion cache de php y lo configuraba para que se borrara la cache con cada reinicio y no funcionaba, a veces es molesto.