在美好的構想後，就是我們的實作之路了，今天我們會先從網站進去後最先遇到的route和middleware介紹，前者負責指引網頁的去向，而後者則負責檢查當前的使用者是否有資格可以瀏覽導向的那個網站。

我們先打開routes\web.php，未來所有的路徑都將放在這裡。

在開始寫程式前，要記得打開你的資料庫，不然會收到目標拒絕連線的報錯。

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

1. 導向根目錄(/)的welcome，且使用get的http request，既然有get，理所當然會有post、put、patch、delete和options，一個URI，可以使用多個不同的requst，在未來code時，要注意對URI發出的請求種類。

welcome的前端放在\resources\views\welcome.blade.php裡。

2. 導向/dashborad，且會經過兩個middleware，分別是做登入認證的auth和信箱驗證的verified，信箱驗證還需要其他設定，但並不在我們所規劃的30天內，所以我們不會對此詳細介紹。而最後的name是為了方便而存在的，在未來網址可能會越來越長，如果為網址命名，就可以減少我們code時，輸入長到記不得的網址和減少打錯字的風險。

我們打算讓使用者進到網頁就可以看到活動列表，登入驗證會在他要報名活動時才驗證，所以我們先把首頁導向dashboard(我們未來要放活動列表的地方)，並取消驗證，所以我們修改程式碼。

Route::get('/', function () {
    return view('dashboard');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->name('dashboard');
//->middleware(['auth', 'verified'])->name('dashboard');

然後收穫我們第一個報錯，name是null，因為我們把身分驗證取消了，我們作為無名人士，當然沒有名字。這個blade是負責顯示dashboard上邊負責網站各個去向的，如果你沒親眼見過，推薦你把程式還原，幫自己辦個帳號，進去看一眼。

讓我們繼續把路暢通，進入resources\views\layouts\navigation.blade.php，找到的註解，預想登入的使用者顯示使用者資訊，未登入就請他去登入了。

<!-- Settings Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ml-6">
				@auth
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
                            <div>{{ Auth::user()->name }}</div>

                            <div class="ml-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <x-dropdown-link :href="route('profile.edit')">
                            {{ __('Profile') }}
                        </x-dropdown-link>

                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
                    </x-slot>
                </x-dropdown>
				
				<!-- 訪客顯示 -->
				@else
					<a href="{{ route('login') }}" class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Log in</a>

					@if (Route::has('register'))
						<a href="{{ route('register') }}" class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Register</a>
					@endif
				@endauth

@auth是Laravel提供的酷東西，他會幫我們判斷目前操作的人是否登入程式了。

但事情還未結束，在Laravel有響應式網頁，所以還要再修改另一個地方，找到，並修改成我們想要的樣子。

<!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
			@auth
				<div class="px-4">
					<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
					<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
				</div>

				<div class="mt-3 space-y-1">
					<x-responsive-nav-link :href="route('profile.edit')">
						{{ __('Profile') }}
					</x-responsive-nav-link>

					<!-- Authentication -->
					<form method="POST" action="{{ route('logout') }}">
						@csrf

						<x-responsive-nav-link :href="route('logout')"
								onclick="event.preventDefault();
											this.closest('form').submit();">
							{{ __('Log Out') }}
						</x-responsive-nav-link>
					</form>
				</div>
				
			<!-- 訪客顯示 -->
			@else
				<div class="px-4">
					<x-responsive-nav-link :href="route('login')">
						{{ __('Log in') }}
					</x-responsive-nav-link>
					<x-responsive-nav-link :href="route('register')">
						{{ __('Register') }}
					</x-responsive-nav-link>
				</div>
			@endauth
        </div>

今天遇到報錯不要緊張，因為今後只會有越來越多。把報錯當成協助你開發的一個工具，說不定碰到夠多後可以畫出一個魔法陣召喚精靈吧，我們也還在召喚精靈中。