Configuración Visual y Paginación en Laravel y Vue.js
Contenido del curso
Carlos Eduardo Gomez García
Mayk Edison Perez Arzapalo
Alfonso Alexander Briones Ventura
KEVIN BRAYAN LUNA FIGUEROA
Fernando Mejia
Guillermo Rafael Pagan Diaz del Valle
Juan Sanchez
Platzi Team
Leonel Moyano
Esteban Ramírez García
Jorge Esteban Llanos Bermúdez
Joseph Dakkak
Tomas Goldenberg
Jorge Luis Chavarriaga Vargas
Jose Luis Barboza Gonzales
Jose Luis Barboza Gonzales
Carlos Eduardo Gomez García
Melisa Quintero
Patricio Castro Andrade
JIMMY RAUL MORALES MORE
Cristian Henao
Erik Elyager
Martin Campos
Quevin Santiago Martinez Botina
Julian David Alzate Cuervo
Geordy Elian Reyes Mendoza
Giselle Katherin Castillo Ariza
Jorge Andrés Pérez Jiménez
Javier Amaya Patricio
Jimmy Buriticá Londoño
Jhon Fabio Cardona Martinez
Me encanta que Laravel está tan preparado que ya incluye sus propios métodos par paginación!
Si a ustedes no se les muestra bien la paginación (Los estilos se rompen) les comparto esta solucón, solo deben escribir lo siguiente en donde va links:
{{ $posts->links("pagination::bootstrap-4") }}
Los estilos se rompan porque el HTML generado por defecto por el método 'links' es compatible con Tailwind CSS framework. Otra solución sería colocarlo en PageController.
class PageController extends Controller { public function posts() { // paginator::useBootstrap(); return view('posts', [ 'posts'=> Post::with('user')->latest()->paginate() ]); }```
Yo estoy usando tailwind, saben cual es el metodo para sarlo con talwind??
Encontre la documentación de laravel en la sección de Helpers que podemos utilizar esto:
use Illuminate\Support\Str; $truncated = Str::limit('The quick brown fox jumps over the lazy dog', 20); // The quick brown fox...
En este caso sería:
public function getGetExcerptAttribute(){ return Str::limit($this->body,140); }
si ambas son totalmente validas, el profe lo hiso con PHP nativo pero la clase Str es propia de laravel y justo en la version 7 que caban de sacar el mes pasado, se agregaron varios metodos para hacer mas fluida la api de esta clase
Para poder retornar menos de 10 post por paginacion hay que editar el método, en este caso lo deje en 5
public function posts(){ return view('posts', [ 'posts' => Post::with('user')->latest()->paginate(5) ]); }
Acá dejo lo siguiente https://laravel.com/docs/8.x/pagination#using-bootstrap en dado caso los elementos de la paginación a nivel de diseño no se les muestre bien sobre todo en Laravel 8, ya que por defecto, la paginación trabaja con Tailwind CSS framework
Gracias juan, excelente aporte, deberia estar mas arriba hahah Me ayudaste mucho estaba dando vueltas sin entender, Idolo
Muchas gracias por tu aporte!
Para los que tienen problemas de css a la hora de llamar $posts->links() se puede usar:
Paginator::useBootstrap()
dentro de la funcion posts del archivo PageController se soluciona el problema Basicamente quedaría asi:
PageController.php
class PageController extends Controller { public function posts() { Paginator::useBootstrap(); return view("posts",[ "posts"=>Post::with("user")->latest()->paginate(), ]); } //... todo el resto de la clase PageController }
Y asi la linea de links en la vista: posts.blade.php
{{$posts->links()}}
Aqui se puede encontrar mas información acerca de Paginators
Antes de agregar Paginator::useBootstrap();
se debe incluir el llamado de use
Illuminate\Pagination\Paginator;
use Illuminate\Pagination\Paginator; class PageController extends Controller { public function posts(){ Paginator::useBootstrap(); return view('posts', [ 'posts' => Post::with('user')->latest()->Paginate(5) ]); } public function post(Post $post){ return view('post' , ['post' => $post]); } }
Un tema que queda acá entre lineas es que para que funcionen los comandos que competen a npm se debe tener instalado Node.js
.
Una solución practica que encontré es entrar en el layout y sustituir las lineas:
<script src="{{ asset('js/app.js') }}" defer></script> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
Por las URLs directas de bootstrap que pueden ser encontradas en la documentación de su site.
RESUMEN
Diseño de enlace de paginacion y extracto de post 1 Empezemos con el extracto del post ATRIBUTOS COMO VIMOS EN posts.blade.php para el estracto utilizamos {{$post->get_excerpt}} //get_excerpt luego lo utilizaremos en Post.php... //para obtener atributo usuario->get_titulo //en Usuario.php hariamos public function getGetTituloAttribute(){...} -"Post.php" queremos substraer las primeras 140 palaabras public function getGetExcerptAttribute(){ return substr($this->body,0,140); } "listo el post ya tiene su extracto de 140 palabras" 2 Paginacion posts.blade.php Debajo del foreach //links es un method interno de laravel por haber usado paginator en PageController {{ $posts->links() }} ya tenemos botones de paginacion
En laravel 8, te coloca ademas unos botones con iconos ( < > ) de siguiente y anterior en la paginación, si solo quieres dejar los botones sencillos usamos el siguiente metodo.
'subtipos' => Subtipo::with('estrategia')->latest()->simplePaginate(3)
en vez de
//'subtipos' => Subtipo::with('estrategia')->latest()->Paginate(3)
¿Por qué no se puso bien la paginación?
prueba con estos amigo
Post::with('user')->latest()->paginate(10)]);
Post::with('user')->latest()->simplepaginate(10)]);
Si te refieres a los estilos, esta es la solución:
{{ $posts->links("pagination::bootstrap-4") }}
Si se está usando laravel 8x e instalas jetstream. ¿Hay alguna manera de usar bootstrap, o se está obligada a usar TailwindCSS?
en la paginación me salía al final los botonoes > y < enormes y pues se dañaba el diseño, esto soluciona mediente el uso de:
{{ $posts->links()}} cambiar por
{{ $posts->links("pagination::bootstrap-4") }}
en el earchivo de posts.blade.php
Presento el siguiente error al ejecutar el comando npm run dev
ERROR Failed to compile with 2 errors 16:57:36
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
alguien me puede ayudar?
me sale en la siguiente línea de código
return Str::limit($this->body,140); }``` el siguiente error: ParseError syntax error, unexpected 'public' (T_PUBLIC), expecting end of file ¿Alguien sabe a que pueda deberse?
Pareces tener un error en la estructura de tu archivo con la palabra "public" para usar métodos públicos, privados o protegidos recuerda que deben estar dentro de una clase.
A mi me salia error, importe la libreria
use Illuminate\Support\Str;
Y listo
🚨Si tienes problemas con la paginación🚨
Estó es porque se requiere tailwind, dentro de " resources/views/layouts/app.blade.php" debes incluir esto:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Recuerda que esto debe ir en el head, un saludo ❤️.
En laravel 9 no olviden copiar esta linea en app.blade.php
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">Es que Laravel es beautiful
Para quienes tienen problema con bootstrap les recomiendo ver esta pag https://www.neoguias.com/instalar-bootstrap-laravel/
En el controlador podemos ingresar un parámetro en el método “paginate”, para mostrar una cantidad de elementos en la vista.
Ejemplo del controlador del blog:
return view('posts', [ 'posts' => Post::with('user')->latest()->paginate(5) ]);
En la vista solo mostrará 5 posts y más links de paginación.
Aplicar los enlaces de paginación
return view('posts',[ 'posts' => Post::with('user')->latest()->paginate() ]);
{{ $posts->links() }}
Bootstrap le proporciona un diseño fantástico a nuestros sitios web.
Es un buen framework
