[Laravel入門]一頁式網站的從零出發實作指南 #by Voyager

###### tags: `Laravel教學已拍` # [Laravel入門]一頁式網站的從零出發實作指南 #by Voyager ![](https://i.imgur.com/rCN0rBx.jpg) ## 課程介紹你是正在入門的Laravel新手還是還是喜愛VUE開發的前端工程師? 你是否有實作後台功能的問題需要解決呢? 我正準備製作一支影片來解決你們的問題，而且一點都不難! 這影片將教會你如何將前端套版檔案導入Laravel專案中如何將資料從後台抓出後送至前台如何自動生成後台介面如何動態從後台管理選單如何動態從後台管理設定仍在Laravel入門的你，將不需要再為後台開發除錯而充滿挫折喜歡專注於VUE開發的你，將能夠升級為全棧工程師，自己搞定後台這支影片花了我大量的時間，從年前就規劃並製作到現在，足以作為付費課程內容，一段時間之後可能就會下架，如果有需要的話，可要趕緊在下架前學起來唷! 我知道你擔心自己跟不上，這支影片是一步步的帶著你作出網頁，再加上觀念說明，所以長度超過60分鐘，就算不熟PHP的你都做得到! 想知道影片何時會上線? 告訴你個好消息，影片已經上架囉，趕緊搶個好位置來學習自動生成後台技術吧! https://youtu.be/wXg0ZdH9Kl0 ## 腳本 ### 導言各位小夥伴大家好我是哥布林工程師因為之前都在錄製人工智慧系列的課程所以有一段時間沒有在錄製Laravel教學讓大家久等了真是不好意思從這個禮拜開始原則上每週或至少每兩週都會有一個Laravel實戰單元有不少小夥伴希望能夠有Voyager的實戰教學那今天就要來直接一步步的示範如何從一個新專案開始使用Voyager來快速建構出一個帶後台的一頁式網頁從這個教學裡頭你將學到Voyager套件的核心架構以及如何結合Laravel來作網頁極速開發如果你對於後台自動生成技術感興趣的話今天這個單元可千萬不要錯過另外我先前在Laravel社團分享 Voyager 的中文手冊如果還沒拿到有需要索取的可以在底下留言如果留言數超過100 我就發布連結到影片資訊欄裡頭那麼就讓我們開始吧 --- ### 專案準備首先我們先來準備專案資料夾課程是假設大家都已經擁有Laravel的開發環境如果還沒有開發環境的小夥伴也沒關係你可以參考我放在資訊欄的環境建置筆記第一步先建立一個新的專案開啟Terminal 輸入以下指令 `laravel new webs` webs 就是專案的名稱 > 建立新專案示範第二步要為專案建立資料庫名稱同樣取為 webs 資料庫編碼請選擇utf8mb4 這樣才能支援表情符號 > 建立資料庫示範第三步確認專案的設定是否正確第一個確認 config/app.php 第二個確認 .env 隱私設定檔 > 確認設定檔示範第四步下載 Voyager 套件開啟Terminal 輸入以下指令 `composer require tcg/voyager` > 下載套件示範第五步安裝 Voyager 套件輸入以下指令 `php artisan voyager:install` 這一步其實可以加上--with-dummy選項就能安裝假資料但我今天的實作不會用到假資料有需要的小夥伴你可以自己試試看 > 安裝Voyager套件示範第六步 Voyager安裝完畢代表後台已經生成了但是我們還沒有帳號能夠登入所以這一步需要生成管理員帳號輸入以下指令 `php artisan voyager:admin admin@admin.com --create` 這裡加上create選項是表示這個使用者還不存在需要新增接著Terminal就會以互動的方式要求你輸入使用者相關的欄位資料 > 建立管理員帳號示範最後完成管理者帳號的建立第六步最後我們確認看看後台能否正常登入與使用開啟瀏覽器輸入專案網址並在後面加上/admin http://webs.test/admin 在登入頁面輸入剛才設定的帳號與密碼如果一切順利你應該就能看到Voyager的後台後台的文字也應該都是繁體中文才對如果你看到的是英文版本就代表第三步確認設定出了問題請回去再看一次然後把資料庫清空再做一次到這裡我們已經完成了專案的前置準備接下來進入一頁式網頁的實作展示對了如果你是第一次來到我們頻道的話哥布林挨踢頻道是專注於電腦科學相關的課程每週四下午6點都有新的影片上線如果聽完今天的單元覺得對你有幫助的話請幫忙給影片按讚訂閱我們的頻道也別忘了開啟小鈴鐺唷 --- ### 前台套版導入回到實作展示這次實作的前端是使用免費的前端版型Moderna 好方便大家可以拿來練習它的網址會列在下方資訊欄實際上你可以替換成任何自己喜歡的版型作法都一樣也不會有任何問題的請放心另外這次的實作展示的所有內容都會放在筆記本當中所有的程式碼也都可以到筆記本裡頭去複製筆記本連結請參考底下資訊欄這一小節我們來示範前端套版的導入 > 前台套版導入示範　進到Moderna官網點Free Download來把版型下載到電腦裡頭我們選擇 Bootstrap v4的版本下載並解壓縮後會看到一堆的html範例檔以及assets資料夾請把assets資料夾放進public資料夾而index.html就是我們這次要使用的模版把index.html檔案複製到resources/view資料夾內更名為 demo.blade.php 新增一個控制器名為SiteController 開啟Terminal，輸入以下指令 `php artisan make:controller SiteController` 開啟 SiteController.php 我們將要加入一個 renderDemoPage() 用來渲染展示頁請輸入以下程式碼: ``` //app\Http\Controllers\SiteController.php public function renderDemoPage(){ return view('demo'); } ``` 接著要在路由檔去加入路由來將請求分配給新的控制器方法開啟 web.php 請輸入以下程式碼: ``` //routes\web.php Route::get('/demo','App\Http\Controllers\SiteController@renderDemoPage'); ``` 完成之後，開啟瀏覽器輸入專案網址以及demo路徑看看網頁是否正常出現到這裡我們已經完成前端框架的導入是否很簡單呢 --- ### 示範 Voyager 的BREAD 這一小節我們要示範如何導入Voyager來實作CRUD 現在前端的資料都來自於Blade檔還沒有與資料庫連結所以接下來我將要示範如何改由Voyager來管理資料庫的資料以及將資料從後端拋到前台畫面上 > Voyager的BREAD示範 #### 示範腳本拜現在網頁都要支持RWD所賜現在的網頁看起來都很像是積木一樣也就是說一頁式網頁就是由多的網頁元素拼圖組合而成就像是畫面現在所劃的樣子這就是多個網頁元素每個網頁元素包含title標題 subtitle次標題 image 圖片以及 content 內容等欄位取名為Element，而對應的表格就是elements 為了簡化示範，我已經把Migration檔案內容準備好了就像是這個樣子大家可以直接到筆記本去複製下來改用 ``` <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; class CreateElements extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('elements', function (Blueprint $table) { $table->id(); $table->string('page', 20); //頁面 $table->string('title', 40); //標題 $table->string('position', 20); //位置 $table->string('icon', 40)->nullable(); //圖示 $table->string('subtitle', 80)->nullable(); //副標題 $table->string('content', 2000)->nullable(); //內容 $table->string('url', 255)->nullable(); //網址 $table->string('url_txt', 100)->nullable(); //網址文字 $table->string('pic', 255)->nullable(); //圖片 $table->string('video', 255)->nullable(); //影片網址 $table->string('alt', 100)->nullable(); //替代文字 $table->integer('sort')->default(0); //排序 $table->boolean('enabled')->default(true); //是否啟用 $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('elements'); } } ``` 我們就用它來建立Migration檔案開啟Terminal 輸入以下指令 `php artisan make:migration create_elements_table` `php artisan migrate` 完成後確認一下表格是否正常生成接著就要開始Voyager的功能設定作業了在進到BREAD的設定實作之前先簡單的說一下在Voyager裡頭兩個很重要的表格分別是 data_types 以及 data_rows 這邊說明一下DataType以及DataRow的關係每個資料庫表格都會有一個DataType來紀錄該表格的BREAD設定而每個DataType擁有多個DataRow來說明各欄位的BREAD設定進到後台開啟 BREAD 功能這時候 elements 的 BREAD 功能還沒建立先來建立它接著開始設定 elements的 BREAD > BREAD 設定說明完成設定之後，你就有個CRUD介面可以使用囉我們就開始建立元素資料把前台的內容填進去吧 > 填寫網頁元素資料資料面已經準備好了再下來我們調整控制器請控制器到後台抓取資料後再傳進View裡頭 ``` //app\Http\Controllers\SiteController.php public function renderDemoPage(){ $items_slider = Element::where('page', 'home')->where('position', 'slider')->where('enabled', 1)->orderBy('sort', 'asc')->get(); $item_row3_top = Element::where('page', 'home')->where('position', 'row3')->where('mode', 'txt')->where('enabled', 1)->orderBy('sort', 'asc')->first(); $items_row3 = Element::where('page', 'home')->where('position', 'row3')->where('mode', 'imgText')->where('enabled', 1)->orderBy('sort', 'asc')->get(); return view('demo',compact('items_slider','item_row3_top','items_row3')); } ``` 接著修改 View 視圖把原本寫死的文字改成抓取控制器傳來的參數 ``` //resources\views\demo.blade.php ``` 完成之後，開啟瀏覽器輸入專案網址以及demo路徑看看網頁上的內容是否正確 --- 另外BREAD可以說是Voyager的核心透過剛才的展示沒辦法把所有細節講完建議大家可以去參考我整理的Voyager中文技術手冊 --- ### 示範 Voyager 的選單管理員接下來這一小節我們要示範如何利用Voyager來管理前端的選單目前前端的選單結構都是寫死在Blade檔裡頭但其實Voyager就有個選單管理員可以來幫助我們管理選單接著我來展示該如何使用 > 主選單建立示範 #### 示範腳本完成了選單的建立接著就可以回到前台來叫用囉這裡就可以先將選單的程式碼先註解掉改成以下的程式碼 `{{ menu('frontend')}}` frontend就是我們剛為選單所取的名字完成之後，開啟瀏覽器輸入專案網址以及demo路徑看看網頁上的主選單是否有出現內容你會發現內容確實有出來但遺憾的是格式卻跑掉了怎麼辦呢你不用擔心 Voyager早就為你想到了因為大部分套版都有自定義樣式類別如果沒在標籤中加入這些樣式類別就無法正常出現因此我們必須要新增一個選單視圖並告知menu()要使用它請在views資料夾建立一個menu子資料夾並在裡頭建立primary.blade.php 檔案裡頭程式碼像這樣 ``` //resources/views/menu/primary.blade.php <nav class="nav-menu float-right d-none d-lg-block"> <ul> @foreach($items as $item) @php $sub2menu = $item->children; @endphp @if(isset($sub2menu) && count($sub2menu) > 0) <li class="drop-down"><a href="{{$item->link()}}">{{$item->title}} </a> <ul> @foreach($sub2menu as $sub2_item) <li><a href="{{$sub2_item->link()}}">{{$sub2_item->title}} </a></li> @endforeach </ul> @else <li><a href="{{$item->link()}}">{{$item->title}} </a> @endif </li> @endforeach </ul> </nav> ``` 再回到前台視圖把menu()加入第二參數也就是選單視圖改用menu資料夾的primary `{{ menu('frontend','menu.primary') }}` 完成之後，再開啟瀏覽器輸入專案網址以及demo路徑看看這次網頁上的選單是否格式就正確了 --- 這個技巧除了可以用來製作上方的主選單下面的Footer選單同樣可以舉一反三用Voyager選單管理員來製作唷 --- ### 示範 Voyager 設定管理員最後這一小節我們要示範如何利用Voyager來管理前端的參數比如電話號碼.社群連結與地址等等 > 設定管理員示範 #### 示範腳本目前這些資料都同樣寫在視圖內修改較為不便我們將透過Voyager的設定管理員來幫我們管理這些設定將前台的電話和Email這兩個設定移到後台去進到Voyager後台的設定管理員在frontend這個群組加上phone和email這兩組設定 > 在設定管理員加入設定完成之後預設你會看到旁邊有程式碼提示告訴你可以怎麼去取得設定因此你可以把這段複製起來貼到前端視圖替換掉原本的內容當我們把這些內容全都替換完畢後儲存再開啟瀏覽器輸入專案網址以及demo路徑看看這次網頁下方的聯絡方式有沒有正常顯示 --- 透過這次的一頁式網頁實作我們展示了Voyager的BREAD 選單管理員以及設定管理員的使用並簡單示範如何與Laravel結合如果這個單元的示範你覺得意猶未盡不用擔心我為大家準備好了EzLaravel套件裡頭的demo頁有今天這個示範的完整程式碼供你參考關於EzLaravel套件的使用說明請參考資訊卡或底下資訊欄更棒的是這個套件不只是作為範例你可以用它來快速建置你的網站裡頭已經為網頁元素以及文章等表格建立了完整的BREAD設定了連CRUD視圖都客製好方便你提包入住下一個單元我們仍將利用Voyager來為你示範更多應用如果有你想知道而我沒展示的請在底下留言也許下個單元我就會製作你要的應用囉如果今天的示範教學你覺得有幫助的話希望你能夠訂閱我們頻道並開啟小鈴鐺以免錯過我為你製作的下一支教學影片我是哥布林工程師，我們下次再見，掰掰 ## 影片時間軸課程計畫　00:11 專案準備　01:30 前台套版導入　08:13 後台自動生成示範　13:48 動態選單製作　49:48 動態選單製作 57:25 更多好康　1:00:00 ## 參考網址 [Laravel5.8 從入門到實戰](https://hahow.in/cr/goblinlab-laravel58) [Moderna前台套版](https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/download/) [課程筆記](https://hackmd.io/@goblinlab/SkDdTe4kO) [EzLaravel套件介紹影片](https://youtu.be/J5SjwZ2aY6c) [Voyager套件簡介影片](https://youtu.be/ZW4RLDDUuFQ)