Création d'un URL Shortener - Backend
Tout est prêt pour maintenant concevoir le backend : une zone ou l’utilisateur authentifié pourra gérer ses liens de redirection.
On va donc remplacer le composant “welcome” de la page créer par défaut lorsque l’on a installé jetstream.
Pour cela, on commence par générer ce composant Livewire :
php artisan make:livewire LinksOn obtient donc 2 nouveaux fichiers :
- La classe composant Links située dans app/Http/Livewire,
- La vue blade dans resources/views/livewire/links.blade.php.
Direction le fichier dashboard.blade.php pour remplacer l’élément x-jet-welcome par la syntaxe suivante :
@livewire('links')Commençons donc par envoyer nos liens et pour cela il faut modifier la méthode render() du composant.
use WithPagination;
public function render()
{
return view('livewire.links', [
'links' => Link::whereUserId(Auth::user()->id)->paginate(15),
]);
}Livewire est capable de gérer la pagination mais pour cela le trait WithPagination doit être ajouter à notre composant.
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase">
{{ __('Uid') }}
</th>
<th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase">
{{ __('Url') }}
</th>
<th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase">
{{ __('Actions') }}
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($links as $link)
<tr>
<td class="px-6 py-4 whitespace-no-wrap">
{{ $link->uid }}
</td>
<td class="px-6 py-4 whitespace-no-wrap">
{{ $link->url }}
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<a href="#" wire:click="delete({{ $link->id }})">
{{ __('Delete') }}
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="px-4 py-3 border-t border-gray-200 sm:px-6">
{{ $links->links() }}
</div>Pour rajouter une action dans notre tableau (celle de supprimer une ligne), il suffit d’utiliser la syntaxe wire:click au lien et d’implémenter la méthode dans notre composant. Ce qui donne :
public function delete(int $id)
{
Link::whereId($id)->whereUserId(Auth::user()->id)->delete();
}Bon là je fais au plus vite pour le tuto, il y aurait plein de choses à ajuster (utilisation de scope, du softDeletes, etc…).
Et maintenant… Non en fait c’est tout. On vient en quelques lignes de générer un tableau paginé avec un chargement de données et des actions en “ajax”. Sympa non ?