昨天實作了讓使用者查看報名的活動列表，今天要實作的是活動方查看報名人數的頁面，我們要產生一個條列報名人員的頁面，網頁的開始我們先延續之前的頁面。

先進入resources\views\articles\index.blade.php，在我們修改刪除的列表裡，新增查看參加資料的選項，

<x-dropdown-link :href="route('joiners.show', $article)">
    {{ __('查看參加資料') }}
</x-dropdown-link>

接下來我們一路向北，不是，我們要進入controller，把article傳送到joiner的show，也是我們要放參加者資料的地方，

$article = Article::find($article);
        return view('joiners.show', ['article' => $article]);

放完後，接著進入前端的顯示，在我們的resources\views\joiners新增show.blade.php加入我們要顯示的畫面，

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('參與名單') }}
        </h2>
    </x-slot>

    <div class="py-2 ">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 ">
            <div class=" bg-white semibold shadow-sm sm:rounded-lg divide-y">
                <div class="text-lg p-4 text-gray-900 ">
                    <div class="relative overflow-x-auto">
                        <table class="table-fixed w-full text-left dark:text-gray-400">
                            <thead class=" text-gray-900 uppercase dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="px-6 py-3">{{ __("姓名") }}</th>
                                    <th scope="col" class="px-6 py-3">{{ __("信箱") }}</th>
                                    <th scope="col" class="px-6 py-3">{{ __("性別") }}</th>
                                    <th scope="col" class="px-6 py-3">{{ __("電話") }}</th>
                                    <th scope="col" class="px-6 py-3">{{ __("生日") }}</th>
                                    <th scope="col" class="px-6 py-3">{{ __("身分證字號") }}</th>
                                    <th scope="col" class="px-6 py-3">{{ __("備註") }}</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

	@foreach($article -> joiners as $joiner)
    <div class="py-1">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 ">
            <div class=" bg-white  shadow-sm sm:rounded-lg divide-y">
                <div class="text-lg p-4 text-gray-900 ">
                    <div class="relative overflow-x-auto">
                        <table class="table-fixed w-full text-base text-left text-gray-500 dark:text-gray-400">
                            <thead>

                            </thead>
                            <tbody>
                                <tr scope="row" class="px-6 py-4 text-gray-900 dark:text-white">
                                    <td class="px-6 py-2 "> {{ $joiner -> name }} </td> 
                                    <td class="px-6 py-2"> {{ $joiner -> email }} </td> 
                                    <td class="px-6 py-2"> {{ $joiner -> gender }} </td> 
                                    <td class="px-6 py-2"> {{ $joiner -> pivot -> phone }} </td> 
                                    <td class="px-6 py-2"> {{ $joiner -> pivot -> birthday }} </td>
                                    <td class="px-6 py-2"> {{ $joiner -> pivot -> ID_number }} </td>
                                    <td class="px-6 py-2 text-sm"> {{ $joiner -> pivot -> note }} </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach


    <div class="text-center px-12 p-4">
		<a href = "{{route('dashboard')}}"> {{ __("回活動列表") }} </a>
    </div>


</x-app-layout>

讓我們抓一些比較特別的程式碼來看，joiner是article的joiners之一，所以我們取得的joiner是一位user，所以讀取名字可以直接使用{{ $joiner -> name }}，但如果是存在中間表裡的資料，我們就要加上pivot才能讀取中間表的資料，例如:{{ $joiner -> pivot -> phone }}，但這個pivot也屬於關係的一環，也就是定義在Model裡，在第20天，我們所寫的joiners的關聯裡，

return $this->belongsToMany(User::class, 'joiners') -> withPivot('phone', 'birthday', 'ID_number', 'note')->withTimestamps();

切記把會用到的pivot放進withPivot裡，不然在使用$joiner -> pivot -> phone的時候是讀不出資料的。

已經到了25天，很多基本的知識和流程都交代得差不多了，今天介紹joiner的show是我們最後一個新增的頁面了，明天會延續今天的內容，更詳細的介紹在這個頁面中所使用到的前端語法，讓我們繼續看下去!