EXPOSÉ

Programmation Web
Avancée

Master 1 Génie Informatique

OWAGOKE Nataniel Owa Shina

AKA Assoumou Jean Boris
FOFANA Issiaka
DEMBE Abdoul
YAO Adjoua Grace
Mercredi 10 Mai 2022

1
Introduction
I. Programmation Orientée Objet (POO)
1. Définition
2. Éléments de la POO
3. Concepts de la POO
4. Les avantages de la POO
II. Design Pattern
1. Définition
2. Utilisations des Design Patterns
3. Modèles de création d’objets
4. Types de Design Patterns
5. Avantages
6. Inconvénients
7. Exemple de Design Patterns: le Modèle-Vue- Contrôleur (MVC)
III. Framework
1. Définition
2. Avantages
3. Exemple de framework : cas de Laravel
a) Généralité
b) Structure de Laravel
c) Package Livewire
d) Package Voyager

Conclusion

2
Introduction
Pour développer de bon logiciel et les livrer à temps, il nous faut connaitre
certaines méthodes de programmations lesquels nous permettrons de gagner en
efficacité. C’est dans ce cadre que nous avons préparé ce travail qui nous donnera
de faire la lumière sur les c’est méthodes et outils nous permettant de mieux
évoluer dans le développement tels que la programmation orientée objet (POO), le
Design pattern et les Framework. Il s’agira pour nous de présenter et de montrer les
avantages de ces outils et méthodes.

3
Programmation Orientée Objet

Définition
La programmation orientée objet (POO) est un paradigme informatique
consistant à définir et à faire interagir des objets grâce à différentes technologies,
notamment les langages de programmation (Python, Java, C++, Ruby, Visual
Basic.NET, Simula...). On appelle objet, un ensemble de variables complexes et de
fonctions, comme par exemple un bouton ou une fenêtre sur l’ordinateur, des
personnes (avec les noms, adresse...), une musique, une voiture... Presque tout peut
être considéré comme un objet. L’objectif de la programmation orientée objet est
de se concentrer sur l’objet lui-même et les données, plutôt que sur la logique
nécessaire et les actions à mener pour faire cette manipulation. De plus, il nous faut
savoir La programmation orientée objet se déroule en plusieurs étapes. La première
consiste à modéliser les données en identifiant les objets que le programmeur
souhaite manipuler ainsi que leurs interactions. Une fois que les objets ont été
modélisés, ils sont ensuite conceptualisés dans une classe d’objets, qui aura des
attributs et des méthodes. Les attributs correspondent aux caractéristiques de
l’objet et les méthodes aux actions que peut faire cet objet. Une fois l’objet créé, il
communique avec une interface bien définie appelée message.
En masquant les fonctions et variables de l’objet, le programmeur crée un code
source parfois complexe mais facilement utilisable, tout en renforçant la sécurité́
du système et en évitant la corruption accidentelle de données. Grâce à ses
propretés d’héritages et de polymorphisme, une classe est réutilisables par le
programme pour lequel elle a été créée, mais aussi par d’autres programmes
orientées objet.
La structure, ou les blocs de construction, de la programmation orientée objet
comprennent les éléments suivants :

● Les classes : est un ensemble de code contenant des variables et des

fonctions permettant de créer des objets. Une classe peut contenir plusieurs
objets.
● Les objets : est un bloc de code mêlant des variables et des fonctions,
appelées respectivement attributs et méthodes. Les attributs définissent les
caractéristiques d’un objet d’une classe, les méthodes définissent quant à̀
elles les fonctions propres aux instances d’une classe.

4
 ● Les méthodes : sont des fonctions définies à l'intérieur d'une classe qui
décrivent les comportements d'un objet. Chaque méthode contenue dans les
définitions de classe commence par une référence à un objet d'instance. De
plus, les sous-routines contenues dans un objet sont appelées méthodes
d'instance. Les programmeurs utilisent les méthodes à des fins de
réutilisation ou pour garder la fonctionnalité encapsulée dans un seul objet à
la fois.
● Les attributs sont définis dans le modèle de classe et représentent l'état d'un
objet. Les objets auront des données stockées dans le champ des attributs.
Les attributs de classe appartiennent à la classe elle-même.

Concepts principales de la POO

La programmation orientée objet est basée sur les principes suivants:

● Encapsulation: Ce principe stipule que toutes les informations importantes

sont contenues dans un objet et que seules certaines informations sont
exposées. L'implémentation et l'état de chaque objet sont conservés de
manière privée dans une classe définie. Les autres objets n'ont pas accès à

5
 cette classe et n'ont pas le droit d'y apporter des modifications. Ils peuvent
uniquement appeler une liste de fonctions ou de méthodes publiques. Cette
caractéristique de dissimulation des données assure une plus grande sécurité
du programme et évite la corruption involontaire des données.
● Abstraction: Les objets ne révèlent que les mécanismes internes qui sont
pertinents pour l'utilisation d'autres objets, en cachant tout code
d'implémentation inutile. La classe dérivée peut voir sa fonctionnalité
étendue. Ce concept peut aider les développeurs à apporter plus facilement
des modifications ou des ajouts au fil du temps.
● Héritage: Les classes peuvent réutiliser le code d'autres classes. Les
relations et les sous-classes entre les objets peuvent être attribuées, ce qui
permet aux développeurs de réutiliser une logique commune tout en
maintenant une hiérarchie unique. Cette propriété de la POO oblige à une
analyse plus approfondie des données, réduit le temps de développement et
garantit un niveau de précision plus élevé.
● Polymorphisme: lorsqu'une classe hérite des méthodes d’une classe parent,
il est possible de surcharger une méthode, qui consiste à redéfinir la
méthode de la classe parent pour que les deux classes ne fassent pas les
mêmes tâches.

Les avantages de la POO

Les avantages de la POO sont les suivants :

● Modularité: L'encapsulation permet aux objets d'être autonomes, ce qui

facilite le dépannage et le développement collaboratif.
● Réutilisabilité: Le code peut être réutilisé grâce à l'héritage, ce qui signifie
qu'une équipe n'a pas besoin d'écrire le même code plusieurs fois.
● Productivité: Les programmeurs peuvent construire de nouveaux
programmes plus rapidement grâce à l'utilisation de bibliothèques multiples
et de code réutilisable.
● Facilité de mise à niveau et d'évolution: Les programmeurs peuvent
implémenter les fonctionnalités du système de manière indépendante.

6
 ● Descriptions des interfaces: Les descriptions des systèmes externes sont
simples, en raison des techniques de passage de messages qui sont utilisées
pour la communication des objets.
● Sécurité: En utilisant l'encapsulation et l'abstraction, le code complexe est
caché, la maintenance du logiciel est plus facile et les protocoles Internet
sont protégés.
● Flexibilité: Le polymorphisme permet à une seule fonction de s'adapter à la
classe dans laquelle elle est placée. Des objets différents peuvent également
passer par la même interface

Design Pattern

Définition

En ingénierie logicielle, un modèle de conception est une solution générale

reproductible à un problème courant de conception de logiciel. Un design pattern
n'est pas une conception finie qui peut être transformée directement en code. Il
s'agit d'une description ou d'un modèle de la manière de résoudre un problème qui
peut être utilisé dans de nombreuses situations différentes.

Utilisation des Design Patterns

Les modèles de conception peuvent accélérer le processus de développement en

fournissant des paradigmes de développement testés et éprouvés. Pour concevoir
efficacement un logiciel, il faut tenir compte de problèmes qui peuvent ne devenir
visibles que plus tard dans la mise en œuvre.

La réutilisation des patrons de conception permet d'éviter des problèmes subtils qui
peuvent être à l'origine de problèmes majeurs et améliore la lisibilité du code pour
les codeurs et les architectes qui connaissent bien les patrons.

Souvent, les gens ne comprennent que la façon d'appliquer certaines techniques de

conception de logiciels à certains problèmes. Ces techniques sont difficiles à
appliquer à un éventail plus large de problèmes. Ainsi, Les patrons de conception

7
fournissent des solutions générales, documentées dans un format qui ne nécessite
pas de spécificités liées à un problème particulier.

En outre, les patrons permettent aux développeurs de communiquer en utilisant des

noms connus et bien compris pour les interactions logicielles.

Les modèles de conception communs peuvent être améliorés au fil du temps, ce

qui les rend plus robustes que les conceptions basiques.

Modèles de création d’objets

Ces patrons de conception concernent tous l'instanciation des classes. Ce modèle

peut être divisé en modèles de création de classes et modèles de création d'objets.
Alors que les patrons de création de classes utilisent efficacement l'héritage dans le
processus d'instanciation, les patrons de création d'objets utilisent efficacement la
délégation pour faire le travail.

Exemple de fabrique abstraite:

● Constructeur: Sépare la construction de l'objet de sa représentation

● Méthode Factory: Crée une instance de plusieurs classes dérivées
● Pool d'objets: Évite l'acquisition et la libération coûteuses de ressources en
recyclant les objets qui ne sont plus utilisés.
● Prototype: Une instance entièrement initialisée à copier ou à cloner.
● Singleton: Classe dont il ne peut exister qu'une seule instance.

Type de Design Pattern

Il existe trois grands types de design pattern qui sont:

 Design Patterns de création: il décrit la manière dont un objet ou un

ensemble d’objets peuvent être créés, initialisés, et configurés et Isolation du
code relatif à la création, à l’initialisation afin de rendre l’application
indépendante de ces aspects. Nous pouvons aussi noter que ces modèles sont
conçus pour l'instanciation de classe. Il peut s'agir de modèles de création de

8
 classes ou de modèles de création d'objets. Exemple: Le design pattern
singleton.
 Design Patterns de structure: il décrit la manière dont doivent être
connectés des objets de l’application afin de rendre ces connections
indépendantes des évolutions futures de l’application. Il permet le
découplage de l’interface et de l’implémentation de classes et d’objets.
Exemple: Le design pattern singleton.
 Design Patterns de comportement: Ces modèles sont conçus en fonction
de la façon dont une classe communique avec les autres et permettent la
gestion des interactions dynamiques entre des classes et des objets. .
Exemple: Le design pattern de commande.

Avantages

La possibilité de recourir à des solutions qui ont fait leurs preuves permet

une économie de temps et d’argent. Les équipes de développement n’ont pas à
constamment réinventer la roue pour résoudre une sous-tâche, déjà résolue mille
fois, dans une nouvelle séquence de programme. Les différents modèles portent
généralement des noms issus d’un vocabulaire de conception commun, ce qui
simplifie à la fois la discussion entre les développeurs et la communication avec
l’utilisateur de la future solution. La documentation d’un logiciel est
également simplifiée si des modules déjà documentés sont utilisés. Ces avantages
s’appliquent ensuite également au maintien et au développement ultérieur d’un
programme.

Inconvénients

L’utilisation de patrons de conception nécessite de solides connaissances. La

disponibilité des patrons de conception peut également produire la fausse
impression que tous les problèmes peuvent être résolus grâce à eux. Autrement dit,
la créativité peut être limitée ainsi que la curiosité de chercher des nouvelles
solutions (plus efficaces).

9
Exemple de design pattern: le Modèle-Vue-Contrôleur (MVC)
Un des plus célèbres design patterns s'appelle MVC, qui signifie Modèle - Vue -
Contrôleur.
En effet, le Modèle-Vue–Contrôleur (MVC) met l'accent sur la séparation entre
la logique métier et l'affichage du logiciel. Cette «séparation des préoccupations»
permet une meilleure répartition du travail et une maintenance améliorée C’est-à-
dire le pattern MVC permet de bien organiser son code source. Il va vous aider à
savoir quels fichiers créer, mais surtout à définir leur rôle. Le but de MVC est
justement de séparer la logique du code en trois parties que l'on retrouve dans des
fichiers distincts qui sont :
 Modèle : cette partie gère les données de votre site. Son rôle est d'aller
récupérer les informations « brutes » dans la base de données, de les
organiser et de les assembler pour qu'elles puissent ensuite être traitées par le
contrôleur. On peut y trouve donc entre autres les requêtes SQL.
 Vue : cette partie se concentre sur l'affichage. Elle ne fait presque aucun
calcul et se contente de récupérer des variables pour savoir ce qu'elle doit
afficher. On peut y trouve essentiellement du code HTML mais aussi
quelques boucles et conditions PHP très simples, pour afficher par
exemple une liste de messages.
 Contrôleur : cette partie gère la logique du code qui prend des décisions.
C'est en quelque sorte l'intermédiaire entre le modèle et la vue : le contrôleur
va demander au modèle les données, les analyser, prendre des décisions et
renvoyer le texte à afficher à la vue. Le contrôleur peut contenir
exclusivement du PHP. C'est notamment lui qui détermine si le visiteur a le
droit de voir la page ou non (gestion des droits d'accès).
La figure suivante schématise le rôle de chacun de ces éléments.

L'architecture MVC
Il est important de bien comprendre comment ces éléments s'agencent et
communiquent entre eux. Regardez bien la figure suivante.

10
 Échange d'informations entre les éléments
Il faut tout d'abord retenir que le contrôleur est le chef d'orchestre : c'est lui qui
reçoit la requête du visiteur et qui contacte d'autres fichiers (le modèle et la vue)
pour échanger des informations avec eux.
Le fichier du contrôleur demande les données au modèle sans se soucier de la
façon dont celui-ci va les récupérer. Par exemple : « Donne-moi la liste des 3
derniers personne inscrites dans mon annuaire ». Le modèle traduit cette demande
en une requête SQL, récupère les informations et les renvoie au contrôleur.
Une fois les données récupérées, le contrôleur les transmet à la vue qui se chargera
d'afficher la liste des messages.
Ce qui se traduit pas le schéma suivant :

11
Framework
Définition
Un Framework est une boite à outils pour un développeur web. Frame
signifie cadre et work se traduit par travail. Un Framework contient des
composants autonomes qui permettent de faciliter le développement d’un site web
ou d’une application. Ces composants résolvent des problèmes souvent rencontrés
par les développeurs (CRUD, arborescence, normes, sécurités, etc.). Ils permettent
donc de gagner du temps lors du développement du site.

Avantages
Le Framework permet un gain de temps et d’efficacité pour le développeur, il
lui sert de structure de base à chaque nouveau projet. Ainsi, ce dernier n’est pas
contraint de développer le support de A à Z, il peut alors se concentrer sur la
réalisation de tâches spécifiques. De plus, Par sa structuration le Framework
permettra également une maintenance simplifiée ce qui n’est pas négligeable.
Enfin, en termes de sécurité le Framework possède un vrai avantage puisque les
failles de sécurité seront déjà pré-protégées en amont du développement.

Inconvénients
Bien que les Framework possèdent de nombreux avantages ce serait plus
transparent d’en présenter les points durs. Premièrement, un Framework peut être
contraignant lorsque l'on souhaite ajouter de la complexité à notre code. On se
retrouvera plus rapidement bridé. De plus, un Framework pourra augmenter
l’incertitude sur la capacité à maintenir un projet dans le temps puisque le
code sera grandement dépendant de la solvabilité de ce Framework. Enfin, un
Framework impose une contrainte de poids puisque ses composants prennent une
place importante dès le début du projet.
Exemple de framework: Cas de Laravel
Généralité
Laravel est un Framework web open-source écrit en PHP respectant le
principe modèle-vue-contrôleur et entièrement développé en programmation
orientée objet. Laravel est distribué sous licence MIT, avec ses sources hébergées

12
sur GitHub.. En juin 2011, Laravel a publié sa première version bêta, et plus tard
dans le même mois, Laravel 1 est sorti. Outre l’authentification, Laravel a
également un support intégré pour la localisation, les vues, le traitement des
sessions, le routage de la demande vers le contrôleur spécifique et d’autres
fonctionnalités étonnantes.

Installation
Pour installer une application laravel il faut d’abord télécharger et installer
composer qui est tout simplement un gestionnaire de dépendances PHP. Ensuite,
composer vous aidera à installer votre application en utilisant la commande create-
project de composer. Par exemple je veux créer une application dans un
dossier laravel 8 à la racine de mon serveur, voici la syntaxe à utiliser :
composer create-project laravel/laravel nom-de-votre-application-que-vous
voulez-créer
L’installation démarre et je n’ai plus qu’à attendre quelques minutes pour que
Composer fasse son travail jusqu’au bout. Vous verrez s’afficher une liste de
téléchargements.
Structure de Laravel

Un projet laravel est structuré comme suite:

Dossier app

Ce dossier contient les éléments essentiels de l’application :

13
Voici une description du contenu du dossier app

 Console : toutes les commandes en mode console,

 Exceptions : pour gérer les erreurs d’exécution,
 Http : tout ce qui concerne la communication : contrôleurs, middlewares (il
y a 7 middlewares de base qui servent à filtrer les requêtes HTTP) et le
kernel,
 Providers : tous les fournisseurs de services (providers), il y en a déjà 5 au
départ. Les providers servent à initialiser les composants.
 Models : le dossier des modèles avec déjà un présent qui concerne les
utilisateurs.

Évidemment tout cela doit vous paraître assez nébuleux pour le moment mais nous
verrons en détail ces éléments au fil du cours. Et on verra d’ailleurs que seront
créés bien d’autres dossiers selon nos besoins.

14
 Autres dossiers

Voici une description du contenu des autres dossiers

 bootstrap : scripts d’initialisation de Laravel pour le chargement

automatique des classes, la fixation de l’environnement et des chemins, et
pour le démarrage de l’application,
 public : tout ce qui doit apparaître dans le dossier public du site : images,
CSS, scripts…

Le dossier public contient tous les fichiers accessibles directement par vos
visiteurs.

Par exemple, si vous avez des images publiques sur votre site, elles doivent
être dans le dossier public (ou dans un sous-dossier du dossier public).
Même chose pour vos fichiers CSS et JavaScript.

Laravel fournit de base quelques fichiers utiles comme un favicon, un fichier

robots.txt…

Le fichier index.php est la porte d’entrée de votre application. C’est le seul

fichier PHP accessible de l’extérieur et il sera responsable de lancer le
framework et d’appeler votre code situé dans le dossier app. Vous n’aurez
jamais à modifier ce fichier directement car, comme dit précédemment, notre
code PHP se trouve dans le dossier app

 config : toutes les configurations : application, authentification, cache, base

de données, espaces de noms, emails, systèmes de fichier, session…
 database : migrations et populations, Le dossier database permet la gestion
de la base donnée. Les migrations sont des fichiers permettant de décrire

15
 votre base de données afin de permettre à Laravel de créer, modifier ou
supprimer les tables et les colonnes automatiquement pour vous.
 resources : vues, fichiers de langage et assets (par exemple les fichiers
Sass),
 routes : la gestion des urls d’entrée de l’application,

Le répertoire routes contient toutes les définitions d'itinéraire pour votre

application. Par défaut, plusieurs fichiers de route sont inclus avec Laravel:
web.php, api.php, console.php et channels.php.

Le fichier web.php contient les routes que le RouteServiceProvider place

dans le groupe middleware web, qui fournit l'état de session, la protection
CSRF et le cryptage des cookies. Si votre application n'offre pas d'API
RESTful sans état, toutes vos routes seront probablement définies dans le
fichier web.php.

Le fichier api.php contient les routes que le RouteServiceProvider place

dans le groupe middleware api, qui fournit une limitation de débit. Ces
routes sont destinées à être sans état, donc les demandes entrant dans
l'application via ces routes sont destinées à être authentifiées via des jetons et
n'auront pas accès à l'état de session.

Le fichier console.php est l'endroit où vous pouvez définir toutes vos

commandes de console basées sur Closure. Chaque fermeture est liée à une
instance de commande permettant une approche simple pour interagir avec
les méthodes IO de chaque commande. Même si ce fichier ne définit pas les
routes HTTP, il définit les points d'entrée (routes) de la console dans votre
application.

Le fichier channels.php est l'endroit où vous pouvez enregistrer tous les

canaux de diffusion d'événements pris en charge par votre application.

 storage : contient données temporaires de l’application : vues compilées,

caches, clés de session…
 tests : contient des fichiers de tests unitaires,
 vendor : tous les composants de Laravel et de ses dépendances (créé par
composer).

16
 Fichiers de la racine

Il y a un certain nombre de fichiers dans la racine dont voici les principaux :

 artisan : outil en ligne de Laravel pour des tâches de gestion,

 composer.json : fichier de référence de composer,
 package.json : fichier de référence de npm pour les assets,
 phpunit.xml : fichier de configuration de phpunit (pour les tests unitaires),
 .env : fichier pour spécifier l’environnement d’exécution.

Essayons de détaillé un peu plus le fichier artisan et .env

Fichier .env :

 Les fichiers .env contient les mots de passe de vos services ainsi que toutes
les données sensibles de votre application (mot de passe de base de données,
adresse de la base de données…).
 Ce fichier ne doit jamais être partagé. Afin de connaître les informations à
renseigner, il existe un fichier .env.example qui contient uniquement des
valeurs d’exemple.

17
Fichier artisan :

 Le fichier artisan permet de lancer des commandes comme php artisan serve.
Ces commandes vont nous permettre de faire beaucoup de choses avec
Laravel et nous verrons au fur et à mesure des tutoriels les différentes
commandes existantes.

Remarque : Pour des raisons de sécurité sur le serveur seul le dossier public doit
être accessible :

L’architecture MVC

 Le MVC (Model View Controller) est une méthode d’organisation du

développement d’applications Web permettant de séparer les différents
concepts résultant de nos pages PHP.
 Laravel, comme une grande partie des autres Framework php, a une
architecture dite MVC (Model – View – Controller).

18
 Le Model-View-Controller (MVC) que le framework Laravel utilise est
essentiellement un modèle architectural qui divise une application en trois
composants logiques: modèle, vue et contrôleur, comme son nom
l’indique. Ces composants gèrent des aspects de développement spécifiques
d’une application pour rendre Laravel accessible, puissant et également
fournir les outils nécessaires pour exécuter et maintenir des applications
volumineuses et robustes.
 Laravel se base effectivement sur le patron de conception MVC, c’est-à-dire
modèle-vue-contrôleur.
 Le modèle interagit avec la base de données, les regroupe, traite et gère les
données. Le model contient les données et leur logique.
 La vue s’occupe principalement de faire afficher ce que le modèle renvoie.
Ensuite, elle s’occupe de recevoir toute interaction de l’utilisateur. La view
contient la présentation graphique à renvoyer à l’utilisateur.
 Le contrôleur prend en charge de synchroniser le modèle et la vue. Il capte
toutes les activités de utilisateur et, en fonction de ces activités, il actionne
les changements à effectuer sur l’application. Le controller traite les actions
utilisateur (via des requêtes), demande au modèle d’effectuer les
changements, puis passe les données à la vue.
 La séparation des composants d’une application en ces trois catégories
permet une clarté de l’architecture des dossiers et simplifie grandement la
tâche aux développeurs. Ainsi la figure ci dessous nous décris l’architecture
MVC de Laravel.

19
Le schéma ci-dessus montre le cheminement du traitement à partir d’un URL
jusqu’à l’affichage d’une page Web.

 On y voit, en rouge, que Laravel commence par rechercher une route qui
correspond à l’URL (ici : « / »).
 On y voit en bleu qu’ensuite, Laravel va appeler le contrôleur indiqué dans
le « uses » de la route (ici : PagesController). Plus précisément, en vert, on
voit le nom de la méthode d’action à exécuter dans ce contrôler (ici :
accueil).
 En rose, on voit que Laravel va afficher la vue mentionnée dans la méthode
d’action. La vue doit être placée dans un sous-dossier de ressources/views
(ici : pages) et porter le nom spécifié (ici : accueil).
 C’est ainsi qu’on obtient à l’écran le visuel de l’URL demandé.

Nous pouvons aussi noter que laravel a d’important packages lui permettant de
faciliter le travail aux developpeurs tels que Livewire et Voyager que nous
étudierons de plus prêt dans la suite de notre travail.
Livewire

Livewire est un framework full-stack pour Laravel qui simplifie la création

d’interfaces dynamiques,sans quitter le confort de laravel.

Livewire permet à travers une syntaxe prédéfinie d’effectuer des requêtes

AJAX(permet d'effectuer des requêtes au serveur web et, en conséquence, de

20
modifier partiellement la page web affichée sur le poste client sans avoir à afficher
une nouvelle page complète.) sans écrire du code JavaScript ; le code s’écrit
totalement en PHP

Livewire intègre le système de binding de données de manière intuitive et facile à

appréhender tel que les Framework front end évolués

Exemple

Installation :
- Inclure php

Composer require livewire/livewire

- Inclure livewire sur chaque page qui l’utilisera
...

2 @livewireStyles

3</head>

4<body>

5 ...

6 

7 @livewireScripts

8</body>

9</html>
- Dans un premier temps on va créer une classe qui va représenter notre
composant et son état. Toutes les propriétés public de ce composant seront
exposées et manipulables par le client et une méthode render() permet de
générer une nouvelle version HTML du composant.
use Livewire\Component;

class SearchUsers extends Component

{
public $search = '';

public function render()

{
return view('livewire.search-users', [

21
 'users' => User::where('username', $this->search)->get(),
]);
}
}

Ensuite dans la vue, il sera possible d'utiliser des attributs spéciaux compris par
livewire qui permettront de communiquer avec notre composant.

<div>
<input wire:model.debounce.300ms="search" type="text" placeholder="Rechercher des
utilisateur..."/>

<ul>
@foreach($users as $user)
<li>{{ $user->username }}</li>
@endforeach
</ul>
</div>

Enfin, on peut maintenant utiliser le composant dans n'importe quelle page :

<body>
<!-- En utilisant une directive -->
@livewire('search-users')

<!-- Ou en utilisant la syntaxe composant -->

<livewire:search-users />
...
</body>

Lorsque l'utilisateur entrera une recherche dans le champ la vue se mettra

automatiquement à jour pour n'afficher que les utilisateurs correspondants à la
recherche.

Voyager
Voyager est simplement un administrateur pour une application Laravel. Tout ce
que vous voudrez que l’application fasse sur le front-end dépend entièrement de
vous. Vous contrôlez votre application et vous pouvez utiliser Voyager pour vous
simplifier la vie en ajoutant des données, en modifiant des utilisateurs, en créant
des menus et de nombreuses autres tâches administratives.

Avant d'installer Voyager, assurez-vous d'avoir installé l'une des versions suivantes
de Laravel : Laravel 6, Laravel 7,Laravel 8,Laravel 9

22
De plus, Voyager nécessite que vous utilisiez PHP 7.3 ou une version plus récente.
Laravel vous oblige à utiliser PHP 8 ou une version plus récente lors de l'utilisation
de Laravel 9.
Installation de Voyager
Voyager est super facile à installer. Après avoir créé votre nouvelle application
Laravel, vous pouvez inclure le package Voyager avec la commande suivante :
– composer require tcg/voyager
Assurez-vous ensuite de créer une nouvelle base de données et d'ajouter vos
informations d'identification de base de données à votre fichier .env, vous voudrez
également ajouter l'URL de votre application dans la APP_URLvariable :
– APP_URL=http://localhost
– DB_HOST=localhost
– DB_DATABASE=homestead
– DB_USERNAME=homestead
– DB_PASSWORD=secret
Enfin, nous pouvons installer Voyager. Vous pouvez choisir d'installer Voyager
avec ou sans données factices. Les données factices comprendront 1 compte
administrateur (si aucun utilisateur n'existe déjà), 1 page de démonstration, 4
publications de démonstration, 2 catégories et 7 paramètres.

Pour installer Voyager sans données factices, exécutez simplement

– php artisan voyager:install
Si vous préférez l'installer avec les données factices, exécutez la commande
suivante :
– php artisan voyager:install –with-dummy
Une fois l’installation terminé nous pouvons maintenant demarrer notre serveur de
développement local avec php artisan serve Et, visitez l'URL :
https://localhost:8000/admin dans votre navigateur.

23
Si vous avez installé avec les données factices, un utilisateur a été créé pour vous
avec les identifiants de connexion suivants :
email : admin@admin.com
mot de passe : password
Note rapide
Un utilisateur factice n'est créé que s'il n'y a aucun utilisateur actuel dans votre
base de données.
Si vous n'avez pas opté pour l'utilisateur factice, vous souhaiterez peut-être
attribuer des privilèges d'administrateur à un utilisateur existant. Cela peut
facilement être fait en exécutant cette commande :
– php artisan voyager:admin votre@email.com
Si vous souhaitez créer un nouvel utilisateur administrateur, vous pouvez passer le
--createdrapeau, comme ceci :
– php artisan voyager:admin your@email.com –create
Et vous serez invité à entrer le nom d'utilisateur et le mot de passe.

Configurations
Avec l'installation de Voyager, vous trouverez un nouveau fichier de configuration
situé dans config/voyager.php.
Dans ce fichier, vous trouverez diverses options pour modifier la configuration de
votre installation Voyager.

'user' => [
'add_default_role_on_register' => true,
'default_role' => 'user',
'default_avatar' => 'users/default.png',
'redirect' => '/admin',
],

24
Ici on peut régler ce qui concerne les utilisateurs au niveau des rôles, de l’avatar et
de la redirection.
On trouve dans le même fichier des réglages concernant :
- l’espace de nom pour les contrôleurs
- le storage
- les fichiers masqués pour le medias manager
- les réglages pour la base de données
- les langues
- le dashboard
- les breads (on voit plus loin de quoi il s’agit)
- les assets…
Nous passerons en revu certains d’entre eux.

Les routes
On a évidemment de nouvelles routes pour l’administration qui seraient trop
longues à lister ici. Dans notre fichier routes/web.php on trouve ce nouveau code :
Route::group(['prefix' => 'admin'], function () {
Voyager::routes();
});

Les rôles
À partir de l’administration on peut gérer les rôles :

25
De base on n’en a que 2 (d’ailleurs la pagination n’est pas très heureuse là…).
On a les actions classiques (voir, modifier, supprimer, créer un nouveau).
En mode création ou modification on peut gérer très précisément les permissions :
on a aussi les users, les pages, les posts, les catégories. Je suppose que tout ça est
modifié de façon dynamique quand on change des entités, je vérifierai plus loin.

Les utilisateurs
On peut aussi gérer les utilisateurs :

26
On n’a que l’administrateur au départ. On retrouve toutes les actions classiques à
ce niveau également. On peut remarquer la gestion de l’avatar.

BREAD
Un aspect intéressant de Voyager est la facilité de mise en place des opérations de
base sur la base de données :
 BROWSE
 READ
 EDIT
 ADD
 DELETE
Ce qui donne l’acronyme BREAD, du pain sur la planche !
Lorsque le BREAD est déjà en place on a des boutons sinon on a un lien pour créer
un BREAD :

Conclusion
En conclusion, nous pouvons signifier que le Design Patttern est une méthode de
conception proposant des solutions nous permettant de vite évoluer dans le
devéloppement et le Modèle-Vue–Contrôleur (MVC) est un Design Patttern
interessant qui est utilisé par plusieurs framework tels que Laravel.

27
28