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 😄
.
Les dejo el isotipo de Platzi:
.
.
Y el logotipo también (es blanco, no se ve pero ahí está xD):
.
Introducción
¡Actualizamos este curso!
Qué aprenderás sobre Laravel 8
Laravel 6
Jetstream
Proyecto con Laravel 8
¿Qué vamos a construir?
Configuración inicial
Factories y Seeders
Index y Layout: estructura inicial
Index y Layout: definiendo estructura HTML
Index y Layout: complementar estructura
Componente Livewire
Livewire: diseño del componente
Página de curso individual
Detalle del curso
Listado de lecciones
Cursos similares
Componentes
Panel administrativo
Conclusión
Repaso final
Despedida
Bonus
Aprendiendo PHP y Laravel
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How to complete our template system in Laravel?
Template system design is an invaluable skill for any web developer looking to optimize the structure and presentation of their applications. In this class, we will complete the design of our system using Laravel, one of the most powerful tools for PHP developers. Join me on this technical journey to create the basis of a well-structured website with modern functionalities.
How to set up the header and footer in Blade?
To establish a basic structure in your application, we first set up the header and footer using HTML5 inside Blade, Laravel's powerful templating tool. Creating a design with clean lines and subtle shadows can significantly improve the aesthetics of your site. Here are some simple steps we followed:
-
Header with line and shadow:
<header> <div class="bg-blue-900 py-1"><!-- Contents of header--> </div></header></div> </header>. -
Navigation and isotype image:
Eventually, we add a simple navigation pointing to the home path. If you don't already have an image, be sure to create the corresponding folder and add it:
<nav> <a href="{{ route('home') }}"> <img src="{{ asset('images/isotype-platzi.png') }}" class="h-8 mx-auto"> </a></nav></a>. -
Footer with logged-in user conditional:
We create a footer that varies its content depending on the user's login status.<footer class="py-4 text-center"> @auth <a href="{{ url('dashboard') }}" class="text-sm text-gray-700">Dashboard</a> @else <a href="{{ route('login') }}" class="ml-4">Login</a> <a href="{{ route('register') }}">Register</a> @endauth</footer>
How to manage routes and links correctly in Laravel?
Managing routes and links optimally is essential for smooth navigation. You must assign names to your routes to avoid errors and allow easy and clean reference from your views. Use route to get the named URL:
Route::get('/', function () { return view('welcome');})->name('home');How to use Blade conditionals based on authentication?
The use of conditionals in Blade allows customizing the user experience. Here we make use of @auth and @else to distinguish the visible content depending on the user's authentication status:
- Authenticated user@: a link to their control panel is presented.
- Unauthenticated user: options to login or register are displayed.
Is an image caching system necessary?
While caching can speed up loading by making repetitive items load faster, it is crucial to make sure that images are correctly positioned in your folder structure. A simple drag to the public directory will work initially:
// Make sure you place images in the correct folder. public/images/isotype-platzi.pngHow to ensure the correct operation of PHP functions inside Blade?
To execute PHP functions inside Blade, always wrap them in the typical Blade double braces:
{{ URL::to('login') }}This ensures that the functions are interpreted correctly and not as literal text. This step is critical to ensure proper execution of Laravel functionality.
Now that you have added these settings to your template, you are ready to expand your application and continue to improve its functionality and appearance. Go ahead, the journey of learning is continuous and exciting!
Contributions 15
Questions 9
Sort by:
Si tienen problemas con los estilos, ejecuten “npm run development” en la terminal, es uno de los scripts que estan en package.json
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
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
@auth
<a href="{{url('dashboard')}}" class="text-sm text-gray-700 underline">Dashboard</a>
@else
<a href="{{url('login')}}" class="text-sm text-gray-700 underline">Ingresar</a>
<a href="{{url('register')}}" class="ml-4 text-sm text-gray-700 underline">Registro</a>
@endif
Les comparto el código del archivo
web.blade.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursos de Programación Web</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}"
</head>
<body>
<header class="shadow-lg">
<div class="bg-blue-900 py-1"></div>
<nav class="bg-blue-800 py-2">
<a href="{{ route('home') }}">
<img src="{{ asset('images/isotipo-platzi.png') }}" alt="" class="h-8 mx-auto">
</a>
</nav>
</header>
<main class="py-10">
<div class="container mx-auto px-4">
@yield('content')
</div>
</main>
<footer class="py-4 text-center">
@auth
<a href="{{ url('dashboard') }}" class="text-sm text-gray-700 underline">
Dashboard
</a>
@else
<a href="{{ url('login') }}" class="text-sm text-gray-700 underline">
Login
</a>
<a href="{{ url('register') }}" class="ml-4 text-sm text-gray-700 underline">
Register
</a>
@endauth
</footer>
</body>
</html>
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
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.
Ruta
web.php
Route::view('/', 'index')->name('home');
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
Saludos.
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
public function path() {
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.
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.
Me dio bastante guerra que tomara la nueva ruta home no actualizo
pueden listar las rutas por consola asi:
php artisan route:list
y para reiniciar las rutas con
php artisan route:clear
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 8 - Platzi - JJ</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<header class="shadow-lg">
<div class="bg-blue-900 py-1">
</div>
<nav class="bg-blue-800 py-2">
<a href="{{ route('home') }}">
<img src="{{ asset('images/isotipo-platzi.png') }}" class="h-8 mx-auto">
</a>
</nav>
</header>
<main class="py-10">
<div class="container mx-auto px-4">
@yield('content')
</div>
</main>
<footer class="py-4 text-center">
@auth
<a href="{{url('dashboard')}}" class="text-sm text-gray-700 underline">Dashboard</a>
@else
<a href="{{url('login')}}" class="text-sm text-gray-700 underline">Login</a>
<a href="{{url('register')}}" class="ml-4 text-sm text-gray-700 underline">Registro</a>
@endif
</footer>
</body>
</html>
Porque los formularios de login y register no me aplica las clases de tailwind siendo que en los archivos construidos (index y web) si se aplicaron correctamente las clases ?
Want to see more contributions, questions and answers from the community?