Configuración Visual y Paginación en Laravel y Vue.js

Clase 20 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Cómo configurar y formatear texto en tu aplicación de Laravel?

El dominio de la presentación visual y la configuración adecuada de los extractos de texto son esenciales para desarrollar aplicaciones web atractivas e intuitivas. Además de establecer un sistema de autenticación integrado, en Laravel, puedes manipular el formato del texto y trabajar con herramientas específicas para lograr una mejor interfaz de usuario.

¿Cómo se crea un método para formatear texto?

Crear un método para manejar el formato de texto en Laravel implica la utilización de PHP y su integración con la tecnología Blade. A continuación, se detallan los pasos que puedes seguir para lograrlo:

Desarrolla un nuevo método público.
Utiliza la sintaxis de anotaciones que comienza con @Jet y termina con @endJet.
Asigna un nombre pertinente a tu atributo.
Accede a la vista donde todos los elementos están en plural.
Configura el método para retornar el texto formateado. Emplea funciones de PHP para extraer partes del texto deseadas, por ejemplo:
```
$texto_formateado = substr($contenido_de_pagina, 0, 140); 
```

Usar un método como substr() es clave para presentar al usuario solo una parte del contenido, logrando que el diseño siga una lógica intuitiva.

¿Qué pasos seguir para compilar y hacer visible el diseño?

Una vez configurado el formato del texto, es fundamental compilar los archivos CSS y JS necesarios para que el diseño sea visible. En un proyecto de Laravel, generalmente, se utiliza Webpack para gestionar estas tareas. Aquí te explicamos cómo:

Asegúrate de tener instalado Node.js y el administrador de paquetes npm.
Ejecuta el comando en tu terminal:
```
npm run dev
```
Este comando trabajará conforme a las configuraciones en el archivo webpack.mix.js, buscando los archivos en la carpeta de origen y publicándolos en el directorio public.

El resultado es tener tus archivos CSS y JS aplicados, dando vida al diseño creado.

¿Cómo implementar la paginación de manera efectiva?

La paginación mejora sustancialmente la experiencia de usuario al dividir el contenido en partes manejables. Implementarla en Laravel es bastante directo:

Después de imprimir tus datos, incluye el siguiente método para mostrar los enlaces necesarios de paginación:
```
{{ $datos->links() }}
```
Revisa que al actualizar la página, los botones de paginación aparezcan correctamente formateados con tu diseño de Vuestra.

De esta forma, facilitas la navegación de tus usuarios en la aplicación web, permitiéndoles acceder al contenido de manera organizada.

Este recorrido es apenas el comienzo para empoderarte a trabajar con Laravel de manera eficiente y creativa. Recuerda que el aprendizaje continúa, y siempre hay nuevos aspectos de los que aprender y explorar en el desarrollo web. ¡Adelante y sigue practicando!

Carlos Eduardo Gomez García

teacher•

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") }}

Mayk Edison Perez Arzapalo

student•

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()
    ]);
  }```

Alfonso Alexander Briones Ventura

student•

Yo estoy usando tailwind, saben cual es el metodo para sarlo con talwind??

KEVIN BRAYAN LUNA FIGUEROA

student•

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-&gt;body,140);
    }

Fernando Mejia

student•

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

Guillermo Rafael Pagan Diaz del Valle

student•

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)
        ]);
    }

Juan Sanchez

student•

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

Platzi Team

student•

Gracias juan, excelente aporte, deberia estar mas arriba hahah Me ayudaste mucho estaba dando vueltas sin entender, Idolo

Leonel Moyano

student•

Muchas gracias por tu aporte!

Esteban Ramírez García

student•

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

Jorge Esteban Llanos Bermúdez

student•

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]);

    }
}

Joseph Dakkak

student•

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.

Tomas Goldenberg

student•

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

Jorge Luis Chavarriaga Vargas

student•

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)

Jose Barboza

student•

¿Por qué no se puso bien la paginación?

Jose Barboza

student•

prueba con estos amigo

Post::with('user')->latest()->paginate(10)]);

Post::with('user')->latest()->simplepaginate(10)]);

Carlos Eduardo Gomez García

teacher•

Si te refieres a los estilos, esta es la solución:

{{ $posts->links("pagination::bootstrap-4") }}

Melisa Quintero

student•

Si se está usando laravel 8x e instalas jetstream. ¿Hay alguna manera de usar bootstrap, o se está obligada a usar TailwindCSS?

Patricio Castro Andrade

student•

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

JIMMY RAUL MORALES MORE

student•

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?

Cristian Henao

student•

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?

Erik Elyager

student•

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.

Martín S. Campos

student•

A mi me salia error, importe la libreria

use Illuminate\Support\Str;

Y listo

Quevin Santiago Martinez Botina

student•

🚨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 ❤️.

Julian David Alzate Cuervo

student•

En laravel 9 no olviden copiar esta linea en app.blade.php

Geordy Elian Reyes Mendoza

student•

Es que Laravel es beautiful

Giselle Katherin Castillo Ariza

student•

Para quienes tienen problema con bootstrap les recomiendo ver esta pag https://www.neoguias.com/instalar-bootstrap-laravel/

Jorge Andrés Pérez Jiménez

student•

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.

Javier Amaya Patricio

student•

Aplicar los enlaces de paginación

Para poder hacer esto primero hay que configurar que la data que queramos mostrar utilice el método paginate() como en este ejemplo de listado de post.

 return view('posts',[
            'posts' => Post::with('user')->latest()->paginate()
        ]);

Después nos dirigimos a la vista e imprimimos las etiquetas de navegación que ya nos configura Laravel

 {{ $posts->links() }}

Con esto podremos visualizar el siguiente resultado funcionando

Jimmy Buriticá Londoño

student•

Bootstrap le proporciona un diseño fantástico a nuestros sitios web.

Jhon Fabio Cardona Martinez

student•

Es un buen framework