Laravel : temps de lecture d'un contenu

Vous avez sûrement remarqué sur les différents blog et même sur l'article que vous lisez présentement , il est indiqué 3 min de lecture . Comme sur la photo ci-dessous.

Screenshot_20220727-160827.jpg

Dans cet article je vais vous montrer comment implémenter cela sans pouvoir recourir à des packages externes avec le Framework laravel. Le code est facile à comprendre et peut être implémenté dans n'importe quel code php.

Nous allons partir du fait que vous avez déjà un projet laravel installé.

1 création du model Post, du controller et de sa migration

php artisan make:model Post -rm

Avec cette commande nous avons généré un fichier model, un contrôleur PostController et une migration.

2 modifier la migration

Mettons à jour la migration en y ajoutant, le titre et la description d'un post (article) comme ceci:

public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('description');
            $table->timestamps();
        });
    }

En suite faisons une migration en tapant la commande :

php artisan migrate

3 calcul du temps de lecture

😮 Mathématiques encore, hee je vais juste vous donner une astuce. Selon la convention, un humain peut lire 200 mots en moyenne par minute. Ce qui veut dire:

on récupère le nombre total des mots et on le divise par 200, en le convertissant en entier.

Implementons cela.

4 Modification du model

Ajoutons des fonctions qui nous permettrons de manipuler l'attribut description de notre table posts afin de nous retourner le temps de lecture.


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Casts\Attribute;
use Illuminate\Support\Str;

class Post extends Model
{
    use HasFactory;


    private function getReadingTime($contenu, $motsParMinute= 200) 
    {
        $totalMots = str_word_count(strip_tags($contenu));
        $minutes = (int) floor($totalMots / $motsParMinute);
        $secondes = (int) floor($totalMots % $motsParMinute / ($motsParMinute / 60));

        if ($minutes === 0) 
        {
            return $seconds." ".Str::of('seconde')->plural($secondes);
        } 
        else 
        {
            return $minutes." ".Str::of('minute')->plural($minutes);
        }
    }
    // afin d'utiliser l'attribut dans le blade
    protected function readingTime(): Attribute 
    {
        return Attribute::make(function ($value, $attributes) 
        {
          // utilise l'entrée description pour évaluer le temps
          $time = $this->getReadingTime($attributes['description']);
          return $time;
        });
    }

Nb: n'oubliez pas d'importer les classes : Str , HasFactory , Attribute .

5 ajout de la route et de la fonction du contrôleur

Allez dans le fichier web.php et créez une route qui pointe vers le contrôleur postController avec une fonction index comme ceci:


Route::get('posts/', [App\Http\Controllers\PostController::class, 'index' ]) ;

Et dans votre fonction du contrôleur ajouter ceci à la fonction index:

public function index () {
    $posts = Post::all();

    return view('post', ['posts' =>$posts]) ;

}

6 Ajout du blade

Dans votre dossier des vues créez un fichier post.blade et ajoutez y le code suivant :

<!DOCTYPE html>
<html>
<body>

<h1>Estimate Reading Time - Lushidev.hashnode.dev </h1>

@foreach($posts as $item)
<li> {{$item->title}} - {{ $item->reading_time }} </li>
@endforeach

</body>
</html>

Demarer votre serveur php avec la commande php artisan serve

Et aller à l'adresse localhost/posts Et voilà le temps de lecture affiché, bravo 👏 !!

J'espère que l'article vous a plus, n'oubliez pas de laisser un like et vous abonner à la newsletter pour ne pas manquer mon prochain article.

Chao 👋👋

Did you find this article valuable?

Support lushidev by becoming a sponsor. Any amount is appreciated!