J’ai fait face à la première difficulté, rien d’insurmontable mais suffisamment ‘complexe’ pour un novice Laravel et peu de sujets parlant de ce cas dans son entier, c’est donc en faisant un amalgame de plusieurs d’entre eux que j’ai finalement réussi à faire ce que je voulais.

Résultat souhaité :

Affichage des langues définies dans la base dans une liste déroulante lors de la création d’un compte utilisateur.

Problématiques :

  • Passer la variable au moteur blade.
  • Passer la variable en cascade aux différents composants (fichier principal, champs de formulaire, liste déroulante), du fait du découpage au mieux pour réutiliser le code.

Tout d’abord passer la variable au fichier blade principal, pour cela dans le contrôleur d’authentification, j’ai mis ces 2 lignes :

$data = ['languages' => addslashes(Language::all())];

Cette ligne récupère toutes les langues qui sont retournées sous forme d’un objet json, auquel on applique un addslashes pour échapper les guillemets, ce pour ne pas poser de problème lors du parsing de cette chaine dans les fichiers la recevant, ensuite on place la chaine comme valeur d’une clé languages, puis le résultat dans la variable data.

return view('auth.register')->with('data', $data);

On retourne ensuite la vue du fichier cible en lui envoyant une variable data contenant nos données.

Utilisation de la variable dans le fichier principal :

<x-form-field name="language_id" id="language_id" type="select" required="true" values="languages" :data="$data['languages']">{{ __('Language') }}</x-form-field>

Cette ligne indique donc que nous souhaitons faire appel au composant form-field (ce dernier comporte un conteneur, un label et un élément de formulaire) en lui passant divers paramètres dont data (les langues de notre variable reçue du contrôleur).

A noter, un élément précédé de : permet de traiter la chaine et non l’envoyer brute.

Pour notre exemple, la chaine reçue par le form-field sera :

[{\"id\":1,\"iso\":\"en\",\"name\":\"English\"},{\"id\":2,\"iso\":\"fr\",\"name\":\"Fran\u00e7ais\"},{\"id\":3,\"iso\":\"de\",\"name\":\"Deutsch\"}]

Sans : ce serait la chaine $data['languages']

Dans le form-field, on ajoute la variable à un tableau de propriétés, en lui donnant une valeur par défaut pour le cas où elle n’existerait pas :

@props(['name', 'type', 'placeholder' => '', 'id', 'required' => '', 'value' => '', 'data' => ''])

Puis on l’utilise :

<x-form-select required="{{ $required }}" name="{{ $name }}" id="{{ $id }}" :data="$data" />

Ici encore nous faisons appel à un composant, ce dernier sera défini en fonction du type envoyé au form-field, ici le type est select, notez que le data est toujours envoyé après traitement.

Enfin nous arrivons au form-select qui ajoute la variable à un tableau de propriétés :

@props([‘data’ => ”])

Ensuite nous devons transformer cette chaine en tableau (nécessaire uniquement dans le cas ou data est un json et qu’on souhaite faire une itération) en effet on ne peut pas passer de tableau ou d’objet dans les éléments de composants (en l’état actuel de mes connaissances tout au moins), uniquement des chaines, pour cela nous allons utiliser la directive @php, qui va nous permettre d’exécuter du code php standard :

@php

$values = json_decode(stripslashes($data));

@endphp

Et ensuite utiliser notre boucle :

@foreach ($values as $value)

<option value="{{ $value->id }}">{{ $value->name }}</option>

@endforeach

Le résultat est bien celui attendu :

Pour terminer, je dirais qu’on pourrait appeler le modèle directement dans le fichier blade (ici ce n’est pas possible car les données sont factorisées depuis la vue principale), mais il me semble préférable de laisser les contrôleurs récupérer les variables des différents modèles et les envoyer aux vues, c’est leur rôle, de plus, mon background Prestashop parle aussi ici.

Leave a Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

92 − = quatre-vingt trois