Toggle main menu visibility
下載輕鬆架
套件下載
使用手冊
發問討論
網站地圖
:::
登入
登入
帳號
密碼
登入
:::
所有書籍
「Laravel 5.8 入門講義 」目錄
MarkDown
4. 了解路由 Router 及視圖 View
1. 關於 Laravel
1-1 為何需要框架？
1-2 快速安裝開發環境及開發工具
1-2-1 以Laragon建立運作環境
1-2-2 修改資料庫密碼並建立myshop資料庫
1-2-3 Visual Studio Code文字編輯器
1-2-4 安裝 Composer
1-2-5 [參考]註冊 GitHub
1-2-6 [參考]瀏覽器附加元件
1-2-7 [參考]申請mailtrap帳號
1-2-8 [參考]用Homestead建構開發環境
2. 專案需求分析
2-1 建立專案
2-2 [參考]將專案加入本地端的 git
2-3 [參考]將專案放上GitHub
2-4 設定專案環境
2-5 Laravel運作週期
3. 建立使用者認證
3-1 新增中文語系
4. 了解路由 Router 及視圖 View
4-1 製作系統主樣板
4-2 為樣板製作中文語系檔
4-3 修改首頁畫面
4-4 Blade 樣板語法（自訂導覽列選項）
5. 安裝 laravel-admin 後台
5-1 修改後台設定檔
5-2 將後台選單中文化的方法
6. 修改使用者資料表
6-1 修改註冊頁面
6-2 讓新增的欄位可以寫入資料庫
6-3 剛剛我們做了什麼？
7. 開始定義系統各項功能
7-1 還沒有控制器的路由寫法
7-2 有控制器的路由寫法
8. 在後台新增買家管理
8-1 建立管理買家的後台控制器
8-2 新增管理買家的路由
8-3 新增選單
8-4 調整可修改的項目
9. 建立商品模型
9-1 編輯並執行商品（Product）的 migrate 檔案
9-2 建立後台商品管理頁面
9-3 中文化商品管理界面
9-4 後台新增商品頁面
9-5 後台的驗證表單資料
9-6 後台加入所見即所得編輯器
9-7 後台修改商品
10. 建立前台顯示商品頁面
10-1 建立前台商品控制器
10-2 修改路由讓首頁呈現商品列表
10-3 修改控制器以執行取得資料動作
10-4 修改模型以正確顯示圖片
10-5 修改視圖以顯示商品列表
11. 建立商品測試資料
11-1 讓系統也可以顯示測試圖片
11-2 建立Seeder快速填充資料
12. 建立商品詳情頁的路由
12-1 建立商品詳情頁的控制器
12-2 路由模型綁定
12-3 建立商品詳情頁的視圖
13. 一般的異常處理
13-1 優雅的異常處理
14. 關於購物車
14-1 建立購物車的模型
14-2 設定商品、購物車與買家的關聯
14-3 建立新增至購物車的路由
14-4 建立購物車控制器
15. 使用 Laravel Mix 來管理前端資源
15-1 修改前台視圖
15-2 安裝 SweetAlert
15-3 實現加入購物車按鈕
15-4 將購物項目寫入資料庫
15-5 用 fillable 批量賦值寫入
15-6 建立Request來做資料整理及檢查
15-7 利用模型觀察器建立使用者資料
15-8 根據不同情況來進行新增品項或累加品項
16. 查看購物車商品
16-1 微調購物車的傳送方式
16-2 刪除某個購物品項
16-3 調整商品數量
17. 關於訂單
17-1 建立訂單及品項的模型及控制器
17-2 設定訂單及訂單項目的關聯
17-3 加入送出訂單按鈕
17-4 我的訂單列表
17-5 後台訂單管理
17-6 中文化訂單管理界面
18. 重建由GitHub下載的Laravel專案
18-1 佈署到主機上
4-2 為樣板製作中文語系檔
Laravel 5.8 入門講義 ================= ### 一、製作主樣板（並將<nav>選單部份移出） 1. 我們可以自己做個主要樣板來用，但從頭做麻煩，拿現成的來改簡單一點。 2. `/專案/resources/views/layouts/app.blade.php`實際上是我們上個單元加入使用者認證下的產物，預設其實是沒有的。 3. 但由於其結構挺不錯的，又支援BootStrap4，所以我們可以直接修改 `/專案/resources/views/layouts/app.blade.php` 並直接將 `app.blade.php` 作為系統的主樣板來使用。 ```markup <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> @include('layouts.nav') <main class="py-4"> @yield('content') </main> </div> </body> </html> ``` 4. 將原本24～73行左右的<nav>標籤全部移出成另一個檔案（`/專案/resources/views/layouts/nav.blade.php`），並於此處用`@include('layouts.nav') `引入該檔案。 5. 若想替導覽列做一點顏色變化可以參考：<https://bootstrap.hexschool.com/docs/4.0/components/navbar/#color-schemes> 6. 其中`{{ }}`裡面可以放PHP變數、函數...等內容，詳情可見：<https://learnku.com/docs/laravel/5.8/blade/3902> 7. 預設情況下，`{{ }}` 語句會自動調用 PHP的 `htmlspecialchars` 函數防止 XSS 攻擊。不想轉義的話，可以使用`{!! !!}`語法。 8. 有時候，若是真的要在視圖上顯示`{{ }}`，或者有其他前端套件也是使用`{{ }}`來進行渲染，那麼，只要寫成`@{{ }}`即可。 ### 二、引入選單子樣板 1. 我們將其中的選單部份獨立出來，另存為 `layouts/nav.blade.php`，並在主樣板中用`@include() `引入子樣板即可，以保持樣板容易理解的狀態。（換言之，沒有一定要分開，只是分開後，會比較清楚，日後好修改） 2. 引入時，只要寫`nav`即可，不須寫完整的`nav.blade.php`，若該樣板放在views的子目錄下，如`layouts/nav.blade.php`，則寫成`layouts.nav`即可。 ```markup <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> <div class="container"> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Left Side Of Navbar --> <ul class="navbar-nav mr-auto"> </ul> <!-- Right Side Of Navbar --> <ul class="navbar-nav ml-auto"> <!-- Authentication Links --> @guest <li class="nav-item"> <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> </li> @if (Route::has('register')) <li class="nav-item"> <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> </li> @endif @else <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> {{ Auth::user()->name }} <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> @endguest </ul> </div> </div> </nav> ``` 3. 到這裡為止，雖然已經做好主樣板，但畫面還沒有太大的改變，也不太有感覺，只要重整畫面，沒有出現錯誤訊息，那就表示您做對了。稍後單元，我們就來改變入口處的畫面。 [](https://github.com/tad0616/myshop/commit/3aa6fed0fe41300304bfd2481b5f2802f0f7fa43) </body></html>
:::
書籍目錄
展開
|
闔起
快速登入
所有討論區
Tad Search 資料查詢
懶人框架討論區
實戰PHP7+MySQL
XOOPS輕鬆架快速上手
校園網站輕鬆架一般討論區
Booking Helper 預約助手
es_stud_sign 班級報名
es charge 學生收費管理
E-Stud import 學生名冊管理
es_after_school 課後照顧報名
es_exam 學生作業繳交
ES_panel 校務行政面板
es_timetable 課表
ES_youtube 本校影音
info_whats 網路設備記錄
jill booking 場地預約
jill_notice 臨時公告
jill query 簡易查詢
jill receipt 領據填報
kw club 社團報名
kw device 設備借用管理系統
ntpc_oprnid 新北市 OpenID 登入
TinyD嵌入內容模組
ugm contact us 聯絡我們
ugm page 自訂頁面
ugm table 萬用表格
Yaoh Servicelearning 服務學習管理系統
dummy 自訂模組
soone_submit 投稿模組
Tad Adm 站長工具箱
Tad Assignment 作業上傳展示模組
Tad Blocks 進階區塊管理
Tad Book3 線上書籍
Tad Cal 行事曆
Tad Cbox 即時留言簿
Tad Discuss 討論區模組
Tad Embed 崁入模組
Tad Evaluation 評鑑檔案管理
Tad Form 萬用表單模組
Tad FAQ 常見問答
Tad Google 相簿
Tad Gallery 電子相簿
Tad Guide 安裝精靈
Tad Honor 榮譽榜
Tad idioms 背背成語
Tad Link 好站連結
Tad Login 快速登入
Tad Lunch3 午餐資訊
Tad Lunch2 營養午餐公告
Tad Meeting 會議系統
Tad Merage 線上合併套印
Tad News 本站消息
Tad Player 影音播放
Tad RSS 友站新聞
Tad Repair 維修通報
Tad SiteMap網站地圖
Tad Timeline 重要紀事
Tad Themes 佈景管理
Tad Tools 工具包
Tad TV 直播電視
Tad Uploader 檔案上傳模組
Tad Users 大量會員管理
Tad Web 多人網頁模組
MyTabs 我的頁籤
Random Quote 隨機小語
LogCounterX 網站流量統計
Yaoh light 多區塊多層次跑馬燈模組
校園網站輕鬆架功能建議區
佈景討論區
即時留言簿
search
進階搜尋
計數器
今天：
昨天：
總計：
4. 了解路由 Router 及視圖 View
