---
tags: Laravel入門
---
# 2020/07/10
## Day1

### Day2 筆記 : [20200710-17_Laravel 工作坊](https://hackmd.io/593qWvQYQHmaTiCTPw03cA)

------
### 對應講義 : [20200710-1_環境安裝與建置.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AAC6MiqSP5NPaThj4okBlBH8a/20200710-PHP%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20200710-1_%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D%E8%88%87%E5%BB%BA%E7%BD%AE.pdf&subfolder_nav_tracking=1)
### 網站環境建置組合:
是Web application stacks的一種，也就是一組綁在一起來運行動態網站或伺服器的開源軟體。
#### 架構:作業系統(operating system)、網頁伺服器(web server)、資料庫伺服器(database server)、程式語言(programming language)。

常見開源軟體種類:
* LAMP (Linux + Apache + MySQL + PHP)
* WAMP (Windows + Apache + MySQL + PHP)
* MAMP (Mac OS + Apache + MySQL + PHP)

PHP、Apache、資料庫伺服器合作原理 :

[圖檔](https://www.dropbox.com/home/Laravel?preview=laravel.pptx)

#### [HTTP 狀態碼](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status?fbclid=IwAR3R8ETVWhvmdtc-C13EAmxXtK_BFUJq2u-6IuAXD4IqCk3pNwFHiDiXaB0)

使用者透過PHP存取資料庫伺服器內容的流程:
* 1.使用者向Apache要求PHP相關網頁(.php)。
* 2.當Apache收到這個要求，經判斷，把此要求轉交給PHP直譯器負責。
* 3.PHP直譯器解譯此網頁的PHP語法，當遇到資料庫相關的函式，則把Request間接傳遞給資料庫伺服器。
* 4.資料庫伺服器把所要求的結果反傳回PHP 。
* 5.PHP直譯器把此結果包裝成Apache看得懂的HTML語法，後傳回給Apache。
* 6.Apache把此結果(已被PHP處理成HTML)傳回給使用者的browser。

Laravel 運行環境與建置需要 :
* 運行環境 : 網頁伺服器、PHP直譯器、資料庫
* 開發工具 : 程式編輯器、版本控制系統、指令執行工具、資料庫操作 adminer

### 免安裝可攜的 Laravel 開發環境 : [wagon](https://www.dropbox.com/sh/7ire7s50qgaf3qp/AACNIIhKNzEke6H5h_qIYZvma/%E8%BB%9F%E9%AB%94/wagon-release-1.5.0.exe?dl=0)
#### wagon 整合了 cmder、git、UwAmp、composer
cmder為PHP CLI (PHP Command line interface)

### Cmder 的使用 :
* [UNIX指令](https://cscc.cs.nctu.edu.tw/unix-basic-commands)

git 為版本控制系統
UwAmp 開啟Apache與MySQL服務及設定PHP Version
composer為PHP的套件管理工具

### 進入PHPMyAdmin :
(1) 在網址列輸入 /mysql
(2) 在 UwAmp 介面上Tools 點 PHPMyAdmin
### 登入PHPMyAdmin :
* 輸入伺服器的主機位址:連接埠(hostname:port)
* 輸入帳號、密碼
* 輸入資料庫名稱
# 換成wagon 1.5.1 ， 因為PHP為7.3版
( 藍色框框:說明帳號、密碼預設都為root ，下面可修改帳密)


### 程式編輯器軟體: [PhpStorm](https://www.dropbox.com/sh/7ire7s50qgaf3qp/AAC-rKG0ZaLbhQe5rdGmPFd5a/%E8%BB%9F%E9%AB%94/PhpStorm-2020.1.2.exe?dl=0)
內建很好的PHP IDE

[介紹PhpStorm — 以 Laravel 開發為例](https://medium.com/@shengyou/full-in-love-with-phpstorm-f6d484109978)

### 後端語言的套件管理工具 :
* Node.js : npm、Yarn
* Ruby : gem
* PHP : Composer、Pear、Pecl

### 語意化版本(Semantic Versioning) :
X(主版號).Y(次版號).Z(修訂號)
版號遞增規則如下：
* 主版號：當你做了不相容的 API 修改
* 次版號：當你做了向下相容的功能性新增
* 修訂號：當你做了向下相容的問題修正

### 版本號演進 :


至於 Laravel 的版本號沒有遵循上面是因為，作者前面沒有按照語意化版本的規則排，換版的時候也比較不會在乎更新維護上的差別，後來有按照規則跑，後面頂多就只有小編號跟修正號的差異而已，不會到有以前換號就像是重大更新那樣，所以他才會把小編號開始的數字直接省略為'X'，因為在使用說明上同一版本不會有太大影響。

### PHP推薦標準 : [PHP-FIG](https://www.php-fig.org/)
* PSR標準規範: 目前最新為PSR-4
### PHP的套件管理中心 : [Packagist](https://packagist.org/)

--------
### 對應講義 : [20200710-2_初階版本管理.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AAC6MiqSP5NPaThj4okBlBH8a/20200710-PHP%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20200710-2_%E5%88%9D%E9%9A%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86.pdf&subfolder_nav_tracking=1)

### 防止防火牆阻擋 :
剛開始用PhpStorm時，點Event Log之後出現的視窗，按Fix..來防止防火牆阻擋


按 Configure Automatically按鈕，就完成了


### 設定git.exe路徑 :

git/ cmd下的 git.exe


選擇完git路徑後，按 Test 按鈕，成功則會出現版本號


### 初始化專案 (git init):

在左下角出現綠色框框訊息，
顯示 Created Git repository in 目前專案位置


### 這為 PhpStorm 內建的 git 介面 :


勾選 Use non-modal commit interface後，視窗會釘選在左邊


沒勾選，則出現在下面Git那的 Local Changes


這種git的操作比較麻煩，建議是放在左邊

### git add :
勾選動作為 git add


### git commit -m '訊息' :
輸入Commit Message後， 按Commit 按鈕，完成git commit 動作


#### Log:all視窗 :
在這，看到剛剛commit上去的紀錄

### git log : 查看commit紀錄
### git status : 查詢當前狀態

### git commit 後，檔案上的列數旁顏色變化說明 :

* 綠色 : 新增
* 藍色 : 修改
* 灰色箭頭 : 刪除


### git diff :

看 git commit 前後的差異

Log:all視窗中，點選一筆commit紀錄後，右邊會出現檔案及commit message，點擊檔案2下後，則會開新視窗，就可以達到上方畫面效果
### show History :

可查看多筆 git commit 完成的差異


### 中階版本管理 : [20190125-2_中階版本管理.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AABugKXoa_Wdq286zcyIPfwca/20190124_Laravel%E8%AA%B2%E7%A8%8B(%E4%B8%89%E5%A4%A9)/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20190125-2_%E4%B8%AD%E9%9A%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86.pdf&subfolder_nav_tracking=1)

-----
### 對應講義 : [20200710-4_Route 與 Controller.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AAC6MiqSP5NPaThj4okBlBH8a/20200710-PHP%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20200710-4_Route+%E8%88%87+Controller.pdf&subfolder_nav_tracking=1)

### Route :

在 routes 資料夾下，選擇 web.php
#因為應用於網頁


紅色框框為 Route::get() 對應的 PHP 語法


### 設定 Router 動作 :


### HTTP request method : get
get方法的參數意義，Route::get('網址','反應')

### 設定 Router 反應 :


### [PHP的 Http request methods 呈現方式](https://www.dropbox.com/sh/smckyemt1i82les/AADoUR6gB6E6Zu7jQe64svUba/20190718_Laravel%20API%E5%8F%8ASSO%E8%AA%B2%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20190718-2_HTTP.pdf&subfolder_nav_tracking=1)

#### 反應 :
* 回傳字串

EX-1 :

在本機 (http://localhost:8000/) 下


EX-2:

在/hello (http://localhost:8000/hello) 下


EX-3:

在/hello/index (http://localhost:8000/hello/index) 下

#### 反應 :
* 回傳 view

跳至XXX.blade.php (MVC架構的V:View)
(XXX.blade.php來自於resources/views下)

EX-1:

在本機 (http://localhost:8000/)下，跳至 welcome.blade.php



EX-2:

在/hello (http://localhost:8000/hello)下，跳至 hello.blade.php



EX-3:

在/hello/index (http://localhost:8000/hello/index)下，跳至 index.blade.php



#### 反應 :
* 跳轉頁面

EX:

routes/web.php


app/Http/Controllers/AlinkController.php



噴錯誤 :


改善方法 :


to() 方法 :

dd() 函式 : 是開發過程中最常用的函式之一，可以印出送入的參數，並且暫停程式。

#### [redirect後接的方法](https://stackoverflow.com/questions/28642753/redirect-to-external-url-with-return-in-laravel)


### Router 接收參數 :


#### 接收選擇性參數 :
* 自行輸入參數 :

輸入 shengyou


* 沒有輸入參數 :

name變數值，預設為Everybody

### Laravel 的 MVC 分工 :


#### [MVC 架構演進 — 為什麼需要MVC](https://medium.com/@rayshih771012/mvc-%E6%9E%B6%E6%A7%8B%E6%BC%94%E9%80%B2-%E7%82%BA%E4%BB%80%E9%BA%BC%E9%9C%80%E8%A6%81mvc-d1a13aa687a0)

### Controller :

避免都把程式邏輯寫在routes/web.php，太長也沒有分類，
所以利用 Controller檔來控制 Router(路徑)，
由他的method 來處理查詢(Model)、回傳頁面(View)、跳轉頁面(Redirect)。

### 產生 Controller 檔 :

#### artisan make:controller


Cmder 輸入 : artisan make:controller {nameController}

成功建立 HomeController檔後，出現在 app/Http/Controllers 下


#### RESTful :

* 簡單來說就是一個Http request method使用API的協定及回傳格式制式化，讓其他工程師維護的話能快速看懂某支API的用途，由工程師之間互相約定好的道德標準，讓程式碼維護起來會快速、方便、簡潔。

在發送 Http request 時通常都是使用 get 、 post 這兩種，但在 RESTful 協定下多了 put、patch、delete 這些method，主要是為了開發、維護方便及清楚。

在有遵守的狀況下，網址會是以下範例：

http://localhost/delete/5

這行清楚顯示，這是負責某資料刪除的API

http://localhost/patch

這行清楚顯示，這是負責修改資料的API

但實際上在運作 :
get和delete還是使用get來傳遞參數(從網址)，而其他的method還是使用post來傳遞參數(從request body)

### RESTful API講義 : [20190719-1_RESTful API.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AADoUR6gB6E6Zu7jQe64svUba/20190718_Laravel%20API%E5%8F%8ASSO%E8%AA%B2%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20190719-1_RESTful+API.pdf&subfolder_nav_tracking=1)
### 將 Route 指向 Controller :

#### HTTP介紹 : [20190718-2_HTTP.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AADoUR6gB6E6Zu7jQe64svUba/20190718_Laravel%20API%E5%8F%8ASSO%E8%AA%B2%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20190718-2_HTTP.pdf&subfolder_nav_tracking=1)
#### 示範步驟流程 (get 為例) :

在 web.php 的 get方法裡，第2個參數的 function 區塊剪下


貼至 HomeController.php 的 Class 裡


補上 function 名稱後，在 function 前加上 public


之後回到 web.php 頁面，get方法的第二個參數要補上東西


輸入對應的 Controller檔@function name


完成在本機下，呈現的頁面(view) 為welcome.blade.php


#### 設定4個Http request methods(get、post、patch、delete) 範例 :


### Module :

module 連資料庫

在 database/migrations 下


詳細操作可參考 :
[Laravel 5.8 會員註冊及登入系統API：Model & Controller](https://ithelp.ithome.com.tw/articles/10226796)

----
### 對應講義 : [20200710-3_初始 Laravel 專案.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AAC6MiqSP5NPaThj4okBlBH8a/20200710-PHP%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20200710-3_%E5%88%9D%E5%A7%8B+Laravel+%E5%B0%88%E6%A1%88.pdf&subfolder_nav_tracking=1)
### 開啟wagon的Web預設畫面 :
### 修改wagon的Web預設畫面 :

調整完，Apache Server會暫停


啟動完，就可看到firstproject專案的 Web

### 成功安裝Composer :
輸入composer指令後，會出現composer版本號

### 用 Composer 建立 laravel 專案 skeleton :
輸入
composer create-project laravel/laravel {專案名稱} --prefer-dist


安裝完畢


### composer 的 create-project指令後的參數說明 :


### 使用 Laravel 的 Documnet Root :
要指向 /public


Laravel 框架的Route才啟動成功

### public 資料夾 :


### (重點) Laravel 目錄結構 :

### 修改預設的Laravel框架Web :

### composer.json
屬性值的意義


### 查看Laravel的版本號
(1) Cmder下輸入 artisan (artisan --version)


(2)在 composer.json 下的 require 屬性裡的 laravel/framework


### 使用laravel其他的版本號 :
假如要使用6.0


Cmder下輸入 composer update


composer.lock

### .json和.lock差別 :

功用 :


比較 :


### namespace
* 解決不同人(或者是資料夾)使用同樣名稱的類別(Class)

EX:
取名一個叫做 Toy 的空間，在 namespace 後面的 Class 都將會被歸類在 Toy 底下


匯入namespace，使用use語法 : use namespace \ Class name


小提醒 :

使符號閱讀性高、人性化的方法，
勾選 Enable font ligatures


符號閱讀性高、人性化的種類 :


結果 :


### Laravel 裡建立 Class :

規則:
* 為 namespace 建立一個 以他為名的資料夾
* 使用 namespace 的檔案，檔案命名為 Class 的名稱
* namespace 裡的 Class 檔案，放至他的資料夾下

示範流程 :

使用 namespace 的 Class name 為 Car
( Class name 的開頭必須為大寫)


修改檔案名稱


修改完後，在Car.php 旁會出現藍色圓圈的C，
代表這檔案為Class (類別 )


namespace 為 Toy，所以新增以 Toy 為名的資料夾


之後在把 Car.php 移至 Toy 資料夾下


這樣也使 use 後的路徑，比較直覺


### PHP-FIG 制定的套件開發標準 : [PSR-4](https://docs.laravel-dojo.com/fig-standards/master/PSR-4)

在 PSR-4 的 Autoloader 規格中，會自動載入 namespace

[( 詳細 ) PSR-4的自動載入規格](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-4-autoloader-examples.md)

在composer.json中有PSR-4規格


### Laravel 專屬的指令列工具 : artisan

輸入 artisan 指令，顯示Laravel框架的版本號及 artisan 可用的指令


假如每個專案內的Laravel版本號不同，就會有不同的artisan


-----

### 對應講義 : [20200710-5_Blade 樣板引擎.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AAC6MiqSP5NPaThj4okBlBH8a/20200710-PHP%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20200710-5_Blade+%E6%A8%A3%E6%9D%BF%E5%BC%95%E6%93%8E.pdf&subfolder_nav_tracking=1)

### 義大利麵( 米粉 ) 程式碼

### Laravel 的 MVC 之 View 是甚麼:


### Laravel 的樣板引擎 :


### 啟動 Blade 解析器 :


### 常見的網頁排版 :


### 方便管理網頁共用問題 :

* 利用 Blade 語法

#### 示範流程 (以 Blog Home 為例 ) :

搜尋 startbootstrap : [startbootstrap-Blog](https://startbootstrap.com/templates/)，進去 Blog Home 裡面
按 Free Download 下載，或是直接點擊下方練習素材


練習素材:
* [Blog Home](https://www.dropbox.com/sh/7ire7s50qgaf3qp/AACOT6_II8sjrQT-gaB9FK6oa/%E7%B7%B4%E7%BF%92%E7%B4%A0%E6%9D%90/startbootstrap-blog-home-gh-pages.zip?dl=0)

下載完 Blog Home後，解壓開啟他的資料夾

#### 把 css 相關的丟至 blog 專案下的 public/css 下

* \css


* \vendor\bootstrap\css


#### 把 js 相關的丟至 blog 專案下的 public/js 下

* \vendor\bootstrap\js


* \vendor\jquery


public/css；public/js 完成畫面 :


在 resources/views 下 新增 blog 資料夾


#### 把 index.html 丟至 blog 資料夾下後


#### 改名成 index.blade.php


#### 在 /hello/index 下，畫面連至 blog/index.blade.php


在 /hello/index (http://localhost:8000/hello/index)下的畫面 :



### 解決css、js 沒吃到問題 : [asset()](https://laravel.com/docs/7.x/helpers#method-asset)

#### asset()是Laravel helpers函數，其功能就是導向專案資料夾public
#### {{}} 簡化PHP標籤及一些語法

小提醒 :

{{}} 會跟 Vue(前端JS框架)顯示語法衝到，可以利用 @ 跳脫

<h1>Laravel</h1>

{{-- 利用 @ 跳脫，Blade 並不會處理這段，而是直接完整顯示 {{ name }} 在 HTML 中 --}}
Hello, @{{ name }}.

原本 :

<link rel="stylesheet" href="<?php echo asset('css/app.css') ?>">

使用 {{}} ：

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

* 原先 css 路徑 :


使用 asset() 語法修法 css path :


* 原先 js 路徑 :


使用 asset() 語法修法 js path :


吃到 css 及 js 完成畫面 :


### 開始拆解區塊 :

在 resources/views 下 新增 layouts 資料夾


再 layouts 資料夾下，新增 partials 資料夾

#### 拆解 Navigation 區塊 :

* 在 partials 資料夾下，新增 navigation.blade.php


* 在 blog/index.blade.php 裡，
把 Navigation 區塊剪下至 navigation.blade.php


完成畫面 :


#### 拆解 Footer 區塊 :

* 在 partials 資料夾下，新增 footer.blade.php


* 在 blog/index.blade.php 裡，
把 Footer 區塊剪下至 footer.blade.php


完成畫面 :


#### 拆解 Sidebar 區塊 :

* 在 partials 資料夾下，新增 sidebar.blade.php


* 在 blog/index.blade.php 裡，
把 Sidebar 區塊(紅色框框)剪下至 sidebar.blade.php


完成畫面 :


### Blade 樣板引擎 :

在 layouts 資料夾下，新增 master.blade.php，
#### master.blade.php 為 父view (子views繼承來自他)


master.blade.php 的檔案階層跟 partials 一樣


把 blog/index.blade.php 內容剪下至 master.blade.php


### 使用 @include 引入view :

* navigation.blade.php


* footer.blade.php


把這段剪下，貼至 blog/index.blade.php


畫面 :


### 使用 @yield 用來顯示給定區塊的內容 :
在 master.blade.php 輸入 @yield


### 使用 @extends 指定子頁面應該「繼承」哪一個view :

在 blog/index.blade.php下，輸入 @extends


在 Page Content 區塊加入 sidebar.blade.php


### 使用 @section 定義內容區塊 :
在 Page Content 區塊 前後 加入@section


結果畫面 :


### show.blade.php


把 index.blade.php 內容複製


貼上後，修改 @section 與 @endsection 中間的內容，改為 SHOW!!!


在 /hello/show (http://localhost:8000/hello/index) 下 的 Route，指向 show.blade.php 頁面


畫面 :


----
最終結果檔:
* [blog.zip](https://www.dropbox.com/sh/7ire7s50qgaf3qp/AACbpAywbsmI_hWvSD5SrX1ta/%E7%AF%84%E4%BE%8B%E6%AA%94?dl=0&preview=blog.zip&subfolder_nav_tracking=1)
---
作業檔 :
* [Blog Post](https://www.dropbox.com/sh/7ire7s50qgaf3qp/AABFFKtI1FnyzbQNmyeyFgg7a/%E7%B7%B4%E7%BF%92%E7%B4%A0%E6%9D%90/startbootstrap-blog-post-gh-pages.zip?dl=0)

### 作業要求 :


# (圖片要修改)

利用 Blade 樣板引擎，製作

* /
* /blog
* /blog/{id}

---
### 參考資料 :
* [Web application stacks](https://ithelp.ithome.com.tw/articles/10215686)
* [PHP、Apache、MySQL合作原理](https://www.cyut.edu.tw/~hcchu/course/MAN_95A/MANCh10.pdf)
* [wagon介紹](https://github.com/laravel-dojo/wagon)
* [安裝/設定 PhpStorm](https://ithelp.ithome.com.tw/articles/10195317)
* [語意化版本](https://semver.org/lang/zh-TW/)
* [Laravel 文件瀏覽器](https://medium.com/laraveldojo/laravel-dojo-monthly-challenge-no1-200ff7d0f02b)
* [修改 Laravel 版本號](https://ithelp.ithome.com.tw/articles/10213570)
* [Laravel 5.8 會員註冊及登入系統API：Model & Controller](https://ithelp.ithome.com.tw/articles/10226796)
* [Laravel Helpers-dd()](https://ithelp.ithome.com.tw/m/articles/10222233)
* [Composer 從入門到實戰](https://www.slideshare.net/shengyou/composer-fromscratch?ref=https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fembed_code%2Fkey%2F2vT5bqPgWM7mhr&url=http%3A%2F%2Fwww.slideshare.net%2Fshengyou%2Fcomposer-fromscratch&image=http%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fcomposer-from-scratch-160923040723-thumbnail-4.jpg%3Fcb%3D1475337195&key=d04bfffea46d4aeda930ec88cc64b87c&type=text%2Fhtml&schema=slideshare)
* [20190718-1_Composer 套件管理.pdf](https://www.dropbox.com/sh/smckyemt1i82les/AADoUR6gB6E6Zu7jQe64svUba/20190718_Laravel%20API%E5%8F%8ASSO%E8%AA%B2%E7%A8%8B/%E6%8A%95%E5%BD%B1%E7%89%87?dl=0&preview=20190718-1_Composer+%E5%A5%97%E4%BB%B6%E7%AE%A1%E7%90%86.pdf&subfolder_nav_tracking=1)
* [php – namespace 命名空間教學介紹](http://jsnwork.kiiuo.com/archives/1947/1947/)
* [asset 語法與 {{}} 介紹](https://ithelp.ithome.com.tw/articles/10194132)
* [Laravel 5.2 Blade 樣板引擎語法介紹](https://laravel.tw/docs/5.2/blade#defining-a-layout)
* [Laravel 5.7 Views and Blade](https://blog.johnsonlu.org/laravel-blade-views/)