Présentation
Un carrousel est un composant interactif qui permet de parcourir plusieurs éléments (comme des images, des vidéos, ou des textes) horizontalement. Ce module est fréquemment utilisé pour mettre en avant des contenus importants sur les pages d'accueil ou les pages de produits. Il permet non seulement d'engager visuellement les utilisateurs mais aussi de rendre l'expérience utilisateur plus dynamique et informative.
Ce projet dédié à la catégorisation d'articles de la section "Blogs" du site vitrine Frianbiz, a été conçu pour offrir aux utilisateurs une expérience de recherche plus intuitive et efficace, en leur permettant de découvrir et de trier facilement les articles en fonction de leurs intérêts.
Le Carrousel de Tags est une solution qui vise à simplifier la navigation à travers une variété d'articles, en les identifiant par des tags.
Fonctionnalités :
- Filtrage d'articles : Le cœur du projet réside dans son mécanisme de filtrage des articles de blog rédigés par les développeurs de l'entreprise. Il suffit de sélectionner les tags qui intéressent le plus le visiteur du site web afin d'afficher directement les articles associés. Il est possible de sélectionner un seul ou plusieurs tags ete il suffit de recliquer sur ceux-ci afin de les déselectioner.
Gestion du projet
La gestion du projet se déroule sur l'outil collaboratif Notion où il est possible de consulter les missions de tous les collaborateurs du projet et d'estimer le temps passé sur chaque tâche.
Les Technologies utilisées
Listing des fonctionnalités du programme
- Fichier BlogController.php
namespace App\Http\Controllers\Front; : Définit l'espace de noms pour le contrôleur de blog dans le front-end de l'application.
use App\Http\Controllers\Controller; : Importe la classe de base des contrôleurs Laravel pour ce contrôleur.
use App\Models\BlogPost; : Importe le modèle de publication de blog pour le contrôleur.
use App\Models\Tag; : Importe le modèle de tag pour le contrôleur.
class BlogController extends Controller : Définit la classe du contrôleur de blog, héritant de la classe de base des contrôleurs Laravel.
public function index() : Méthode de contrôleur qui affiche la liste des publications de blog.
public function show(BlogPost $blog) : Méthode de contrôleur qui affiche les détails d'une publication de blog spécifique.
- Fichier index.blade.php
@extends('front.layouts.app') : Étend le layout par défaut de l'application front-end.
@section('title', __('front.layout.title', ['title' => __('front.blogs.title')])) : Définit le titre de la page en utilisant la traduction pour le titre du blog.
@section('content') : Début de la section de contenu de la page.
@foreach($tags as $tag) : Boucle à travers chaque tag pour afficher les options de filtre.
@foreach ($blogs as $key => $blog) : Boucle à travers chaque blog pour afficher les publications.
@section('scripts') : Début de la section pour inclure des scripts JavaScript.
- Fichier Tag.php
namespace App\Models; : Déclare l'espace de noms pour le modèle Tag dans l'application.
use Illuminate\Database\Eloquent\Factories\HasFactory; : Importe le trait HasFactory pour le modèle Tag, permettant l'utilisation des factories.
use Illuminate\Database\Eloquent\Model; : Importe la classe Model pour le modèle Tag, fournissant des fonctionnalités de base pour les modèles Eloquent.
class Tag extends Model : Définit la classe Tag qui étend la classe de base Model d'Eloquent.
use HasFactory; : Utilise le trait HasFactory dans la classe Tag pour activer les factories.
protected $fillable = ['name']; : Définit les attributs remplissables du modèle Tag, permettant le remplissage massif du champ 'name'.
public function blogs() : Définit la relation entre les tags et les blog posts, indiquant qu'un tag peut être associé à plusieurs blog posts.
- Fichier custom-components.scss
.tag-btn : Définit les styles pour les boutons de tag.
label input : Sélectionne les balises input à l'intérieur des balises label dans les boutons de tag et applique des styles.
position: absolute; Positionne l'élément de manière absolue par rapport à son premier ancêtre positionné.
display: none; Masque l'élément, le rendant invisible.
color: #fff !important; Définit la couleur du texte en blanc pour les boutons de tag, avec une priorité élevée.
input + span : Sélectionne les balises span qui suivent immédiatement les balises input dans les boutons de tag et applique des styles.
transition: transform 0.3s; Applique une transition de transformation avec une durée de 0.3 seconde pour les boutons de tag.
position: relative; Positionne l'élément de manière relative par rapport à sa position normale.
z-index: 1; Définit l'empilement de l'élément par rapport à ses éléments frères.
.selected : Définit les styles pour les éléments sélectionnés.
background-color: #e2e8f0; Définit la couleur de fond pour les éléments sélectionnés.
transform: translateX(-50%); Applique une transformation pour déplacer l'élément de 50% vers la gauche lorsqu'il est sélectionné.
z-index: 2; Définit une valeur d'empilement supérieure pour les éléments sélectionnés par rapport à ceux qui ne le sont pas.
.selected .tag-cross : Sélectionne les éléments avec la classe "tag-cross" à l'intérieur des éléments avec la classe "selected" et applique des styles.
display: inline-block; Affiche l'élément comme un bloc, mais permet de définir sa largeur et sa hauteur.
margin-left: 4px; Définit la marge à gauche de l'élément.
color: #718096; Définit la couleur du texte pour l'icône de croix.
cursor: pointer; Définit le curseur de la souris comme une main, indiquant que l'élément est cliquable.
.tag-cross:hover : Sélectionne les éléments avec la classe "tag-cross" au survol de la souris et applique des styles.
Code
Sauvegarde du projet
Chaque nouvelle version de ce projet est poussée vers un dépôt distant et passée en revue par d'autres développeurs dans une Merge Request, puis validée et mise en production via le dépôt distant GitLab.
