Web Applications in PHP

Appearance

Shop: detail section ​

tracks

Get selected record ​

  • We will use the wire:click attribute on the Show Tracks icon to pass the id of the selected record to the showTracks method in the component

Pass the id of the selected record ​

  • The showTracks method will retrieve the record from the database and store it in a new public property $selectedRecord
  • Add the wire:click attribute to the Show Tracks icon
php
<button class="w-6 hover:text-red-900">
    <x-phosphor-music-notes-light
        wire:click="showTracks({{ $record->id }})"    
        class="outline-0"
        data-tippy-content="Show tracks"/>
</button>
<button class="w-6 hover:text-red-900">
    <x-phosphor-music-notes-light
        wire:click="showTracks({{ $record->id }})"    
        class="outline-0"
        data-tippy-content="Show tracks"/>
</button>

Route Model Binding ​

  • Instead of only the id we want to store the complete record in the public property $selectedRecord
  • The long way is to query the database for the record with the id and store the result in the public property $selectedRecord
  • But there is a better way: we can use Laravel's Route Model Binding to get the complete record with only the id as a parameter in the method showTracks
  • Line 1: type-hint the parameter $record with the model Record => replace showTracks($record) with showTracks(Record $record)
  • Line 4: dump the property $selectedRecord as an array to the page (add ->toArray())
php
public function showTracks(Record $record)    
{
    $this->selectedRecord = $record;
    dump($this->selectedRecord->toArray());   
}
public function showTracks(Record $record)    
{
    $this->selectedRecord = $record;
    dump($this->selectedRecord->toArray());   
}

Show the tracks in a modal ​

  • Now we have the complete record in the public property $selectedRecord, we can use it to get the tracks and show them in a modal
  • We will use the Jetstream dialog modal for this
  • Let's start with a simple, static modal
php
{{-- Detail section --}}
<x-dialog-modal>        
    <x-slot name="title">Title</x-slot>
    <x-slot name="content">Content</x-slot>
    <x-slot name="footer">Footer</x-slot>
</x-dialog-modal>
{{-- Detail section --}}
<x-dialog-modal>        
    <x-slot name="title">Title</x-slot>
    <x-slot name="content">Content</x-slot>
    <x-slot name="footer">Footer</x-slot>
</x-dialog-modal>

Jetstream dialog modal explained ​

REMARKS

  • The Jetstream dialog modal is a component that is used to show/hide a modal with a title, content and footer
  • More specifically, it's a component that's build on top of a second component
    • Ctrl + click on the x-dialog-modal tag to see the code of the first component
      • This component contains tree slots ($title, $content and $footer) that are wrapped in inside a x-modal component
    • Ctrl + click on the x-modal tag to see the code of the second component
      • The most important part of this component is show: $entangle($attributes->wire('model')) and Alpines x-show="show" directive
      • This is where the connection between the modal and our $showModal property will be made
  • When clicking outside the modal, the modal will close

Show and hide the modal ​

  • Line 2: add the wire:model attribute to the x-dialog-modal tag and set it to the public property $showModal
    • This is the connection between the modal and our $showModal property in the component
  • Line 5: make the footer empty
php
{{-- Detail section --}}
 <x-dialog-modal wire:model="showModal">       
    <x-slot name="title">Title</x-slot>
    <x-slot name="content">Content</x-slot>
    <x-slot name="footer"></x-slot>     
</x-dialog-modal>
{{-- Detail section --}}
 <x-dialog-modal wire:model="showModal">       
    <x-slot name="title">Title</x-slot>
    <x-slot name="content">Content</x-slot>
    <x-slot name="footer"></x-slot>     
</x-dialog-modal>

Title slot ​

  • Let's add the artist, the record title and the cover image to the title slot
  • Paste the following code just before the last closing <x-slot name="title">
  • When the page first loads, the property $selectedRecord is empty and to avoid errors, we need to catch this in the model
    • Line 6: if $selectedRecord->cover doesn't exist, show a dummy cover image
    • Line 8: if $selectedRecord->title doesn't exist, use an empty string
    • Line 7: if $selectedRecord->artist doesn't exist, use an empty string
    • Line 12: if $selectedRecord has no tracks, hide the table
      • Later, we push the tracks in the array, so for now it doesn't exist yet
php
{{-- Detail section --}}
<x-dialog-modal wire:model="showModal">
    <x-slot name="title">
        <div class="flex items-center border-b border-gray-300 pb-2 gap-4">   
            <img class="w-20 h-20"
                 src="{{ $selectedRecord->cover ?? asset('storage/covers/no-cover.png') }}" alt="">
            <h3 class="font-medium">
                {{ $selectedRecord->title ?? '' }}<br/>
                <span class="font-light">{{ $selectedRecord->artist ?? '' }}</span>
            </h3>
        </div>
    </x-slot>
    <x-slot name="content">Content</x-slot>
    <x-slot name="footer"></x-slot>
</x-dialog-modal>
{{-- Detail section --}}
<x-dialog-modal wire:model="showModal">
    <x-slot name="title">
        <div class="flex items-center border-b border-gray-300 pb-2 gap-4">   
            <img class="w-20 h-20"
                 src="{{ $selectedRecord->cover ?? asset('storage/covers/no-cover.png') }}" alt="">
            <h3 class="font-medium">
                {{ $selectedRecord->title ?? '' }}<br/>
                <span class="font-light">{{ $selectedRecord->artist ?? '' }}</span>
            </h3>
        </div>
    </x-slot>
    <x-slot name="content">Content</x-slot>
    <x-slot name="footer"></x-slot>
</x-dialog-modal>

Get the tracks from the API ​

  • Line 4: the URL which contains the mb_id of the selected record
  • Line 5: $response fetches the URL with the Laravel HTTP client (include use Http;) and convert the result to JSON data
    ($response contains all the data from the API, like we can see in the first screenshot of this chapter)
  • Line 6:
    • push a new key tracks to the selected record $this->selectedRecord['tracks']
    • select only the tracks-array in the response ($response['media'][0]['tracks']) and add them to the tracks key
php
 public function showTracks(Record $record)
{
    $this->selectedRecord = $record;
    $url = "https://musicbrainz.org/ws/2/release/{$record->mb_id}?inc=recordings&fmt=json";   
    $response = Http::get($url)->json();
    $this->selectedRecord['tracks'] = $response['media'][0]['tracks'];
    $this->showModal = true;
}
 public function showTracks(Record $record)
{
    $this->selectedRecord = $record;
    $url = "https://musicbrainz.org/ws/2/release/{$record->mb_id}?inc=recordings&fmt=json";   
    $response = Http::get($url)->json();
    $this->selectedRecord['tracks'] = $response['media'][0]['tracks'];
    $this->showModal = true;
}

Tracks from API response

Show tracks in the content slot ​

  • Line 7 - 26: the @isset() directive checks if the property $selectedRecord->tracks exists
    • If it exists, show the table with the tracks
    • If it doesn't exist, (when the page first loads) show nothing
  • Line 17 - 23: loop over the tracks and show the title and duration (you don't need a wire:key here, because it's a static list)
  • Line 19 - 21: show the position, the title and the duration (length) of each track
php
{{-- Detail section --}}
<x-dialog-modal wire:model="showModal">
    <x-slot name="title">
        ...
    </x-slot>
    <x-slot name="content">
        @isset($selectedRecord->tracks)               
            <table class="w-full text-left align-top">
                <thead>
                <tr>
                    <th class="px-4 py-2">#</th>
                    <th class="px-4 py-2">Track</th>
                    <th class="px-4 py-2">Length</th>
                </tr>
                </thead>
                <tbody>
                @foreach($selectedRecord['tracks'] as $track)
                    <tr class="border-t border-gray-100">
                        <td class="px-4 py-2">{{ $track['position'] }}</td>
                        <td class="px-4 py-2">{{ $track['title'] }}</td>
                        <td class="px-4 py-2">{{ $track['length'] }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @endisset
    </x-slot>
    <x-slot name="footer"></x-slot>
</x-dialog-modal>
{{-- Detail section --}}
<x-dialog-modal wire:model="showModal">
    <x-slot name="title">
        ...
    </x-slot>
    <x-slot name="content">
        @isset($selectedRecord->tracks)               
            <table class="w-full text-left align-top">
                <thead>
                <tr>
                    <th class="px-4 py-2">#</th>
                    <th class="px-4 py-2">Track</th>
                    <th class="px-4 py-2">Length</th>
                </tr>
                </thead>
                <tbody>
                @foreach($selectedRecord['tracks'] as $track)
                    <tr class="border-t border-gray-100">
                        <td class="px-4 py-2">{{ $track['position'] }}</td>
                        <td class="px-4 py-2">{{ $track['title'] }}</td>
                        <td class="px-4 py-2">{{ $track['length'] }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @endisset
    </x-slot>
    <x-slot name="footer"></x-slot>
</x-dialog-modal>

Reformat the track length with Carbon ​

  • The track length is in milliseconds, so we need to convert it to mm:ss
  • You can make a custom function for it that handles the transformation, but we prefer to use the Carbon package for this
    • Carbon is an easy to use PHP extension for date/time manipulation and formatting
    • Carbon is by default installed in in every Laravel project
  • The Carbon method we need is createFromTimestampMs($milliseconds)->format('i:s')
    • createFromTimestampMs creates a Carbon object from a timestamp in $milliseconds
    • format formats the Carbon object to a string
  • Line 6: wrap the length of the song in a Carbon object
  • IMPORTANT
    • Because there is no Blade helper for Carbon, we need to use the full namespace for the class Carbon\Carbon::createFromTimestampMs($milliseconds)->format('i:s')
    • Another option is to use the use statement at the top of the file: @php use Carbon\Carbon; @endphp and then use Carbon::createFromTimestampMs($milliseconds)->format('i:s') in the view
php
<tbody>
@foreach($selectedRecord['tracks'] as $track)
    <tr class="border-t border-gray-100">
        <td class="px-4 py-2">{{ $track['position'] }}</td>
        <td class="px-4 py-2">{{ $track['title'] }}</td>
        <td class="px-4 py-2">{{ \Carbon\Carbon::createFromTimestampMs($track['length'])->format('i:s') }}</td>   
    </tr>
@endforeach
<tbody>
@foreach($selectedRecord['tracks'] as $track)
    <tr class="border-t border-gray-100">
        <td class="px-4 py-2">{{ $track['position'] }}</td>
        <td class="px-4 py-2">{{ $track['title'] }}</td>
        <td class="px-4 py-2">{{ \Carbon\Carbon::createFromTimestampMs($track['length'])->format('i:s') }}</td>   
    </tr>
@endforeach

Last updated:

© 2023 - Vince Colson, Jordi De Roeck & Patrick Verhaert