Day1

Day2 筆記 : 20200710-17_Laravel 工作坊

對應講義 : [20200710-1環境安裝與建置.pdf](https://www.dropbox.com/s/6ej3vfis6woatnn/20200710-1%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D%E8%88%87%E5%BB%BA%E7%BD%AE.pdf?dl=0)

網站環境建置組合:

是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、資料庫伺服器合作原理 :

圖檔

HTTP 狀態碼

使用者透過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

wagon 整合了 cmder、git、UwAmp、composer

cmder為PHP CLI (PHP Command line interface)

Cmder 的使用 :

UNIX指令

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

內建很好的PHP IDE

介紹PhpStorm — 以 Laravel 開發為例

後端語言的套件管理工具 :

Node.js : npm、Yarn
Ruby : gem
PHP : Composer、Pear、Pecl

語意化版本(Semantic Versioning) :

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

版本號演進 :

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

PHP推薦標準 : PHP-FIG

PSR標準規範: 目前最新為PSR-4
PHP的套件管理中心 : Packagist

對應講義 : [20200710-2初階版本管理.pdf](https://www.dropbox.com/s/7viugctbkxa2rkx/20200710-2%E5%88%9D%E9%9A%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86.pdf?dl=0)

防止防火牆阻擋 :

剛開始用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/s/7viugctbkxa2rkx/20200710-2%E5%88%9D%E9%9A%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86.pdf?dl=0)

對應講義 : 20200710-4_Route 與 Controller.pdf

Route :

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

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

設定 Router 動作 :

HTTP request method : get

get方法的參數意義，Route::get(‘網址’,’反應’)

設定 Router 反應 :

PHP的 Http request methods 呈現方式

反應 :

回傳字串

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後接的方法

Router 接收參數 :

接收選擇性參數 :

自行輸入參數 :

輸入 shengyou

沒有輸入參數 :

name變數值，預設為Everybody

Laravel 的 MVC 分工 :

MVC 架構演進 — 為什麼需要MVC

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

將 Route 指向 Controller :

HTTP介紹 : 20190718-2_HTTP.pdf

示範步驟流程 (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

對應講義 : [20200710-3初始 Laravel 專案.pdf](https://www.dropbox.com/s/l5af955ybb1df27/20200710-3%E5%88%9D%E5%A7%8B%20Laravel%20%E5%B0%88%E6%A1%88.pdf?dl=0)

開啟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

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

( 詳細 ) PSR-4的自動載入規格

在composer.json中有PSR-4規格

Laravel 專屬的指令列工具 : artisan

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

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

對應講義 : 20200710-5_Blade 樣板引擎.pdf

義大利麵( 米粉 ) 程式碼

Laravel 的 MVC 之 View 是甚麼:

Laravel 的樣板引擎 :

啟動 Blade 解析器 :

常見的網頁排版 :

方便管理網頁共用問題 :

利用 Blade 語法

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

搜尋 startbootstrap : startbootstrap-Blog，進去 Blog Home 裡面按 Free Download 下載，或是直接點擊下方練習素材

練習素材:

Blog Home

下載完 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()

asset()是Laravel helpers函數，其功能就是導向專案資料夾public

簡化PHP標籤及一些語法

小提醒 :

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

<h1>Laravel</h1> 在 HTML 中 --}}
Hello, @.

原本 :

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

使用：

<link rel="stylesheet" href="">

原先 css 路徑 :

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

原先 js 路徑 :

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

吃到 css 及 js 完成畫面 :

開始拆解區塊 :

在 resources/views 下新增 layouts 資料夾

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

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

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

完成畫面 :

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

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

完成畫面 :

在 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

作業檔 :
Blog Post

作業要求 :

(圖片要修改)

利用 Blade 樣板引擎，製作

/
/blog
/blog/{id}

Day1

Day2 筆記 : 20200710-17_Laravel 工作坊

對應講義 : [20200710-1環境安裝與建置.pdf](https://www.dropbox.com/s/6ej3vfis6woatnn/20200710-1%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D%E8%88%87%E5%BB%BA%E7%BD%AE.pdf?dl=0)

網站環境建置組合:

架構:作業系統(operating system)、網頁伺服器(web server)、資料庫伺服器(database server)、程式語言(programming language)。

HTTP 狀態碼

免安裝可攜的 Laravel 開發環境 : wagon

wagon 整合了 cmder、git、UwAmp、composer

Cmder 的使用 :

進入PHPMyAdmin :

登入PHPMyAdmin :

換成wagon 1.5.1 ， 因為PHP為7.3版

程式編輯器軟體: PhpStorm

後端語言的套件管理工具 :

語意化版本(Semantic Versioning) :

版本號演進 :

PHP推薦標準 : PHP-FIG

PHP的套件管理中心 : Packagist

對應講義 : [20200710-2初階版本管理.pdf](https://www.dropbox.com/s/7viugctbkxa2rkx/20200710-2%E5%88%9D%E9%9A%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86.pdf?dl=0)

防止防火牆阻擋 :

設定git.exe路徑 :

初始化專案 (git init):

這為 PhpStorm 內建的 git 介面 :

git add :

git commit -m ‘訊息’ :

Log:all視窗 :

git log : 查看commit紀錄

git status : 查詢當前狀態

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

git diff :

show History :

中階版本管理 : [20190125-2中階版本管理.pdf](https://www.dropbox.com/s/7viugctbkxa2rkx/20200710-2%E5%88%9D%E9%9A%8E%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86.pdf?dl=0)

對應講義 : 20200710-4_Route 與 Controller.pdf

Route :

設定 Router 動作 :

HTTP request method : get

設定 Router 反應 :

PHP的 Http request methods 呈現方式

反應 :

反應 :

反應 :

redirect後接的方法

Router 接收參數 :

接收選擇性參數 :

Laravel 的 MVC 分工 :

MVC 架構演進 — 為什麼需要MVC

Controller :

產生 Controller 檔 :

artisan make:controller

RESTful :

RESTful API講義 : 20190719-1_RESTful API.pdf

將 Route 指向 Controller :

HTTP介紹 : 20190718-2_HTTP.pdf

示範步驟流程 (get 為例) :

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

Module :

對應講義 : [20200710-3初始 Laravel 專案.pdf](https://www.dropbox.com/s/l5af955ybb1df27/20200710-3%E5%88%9D%E5%A7%8B%20Laravel%20%E5%B0%88%E6%A1%88.pdf?dl=0)

開啟wagon的Web預設畫面 :

修改wagon的Web預設畫面 :

成功安裝Composer :

用 Composer 建立 laravel 專案 skeleton :

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

使用 Laravel 的 Documnet Root :

public 資料夾 :

(重點) Laravel 目錄結構 :

修改預設的Laravel框架Web :

composer.json

查看Laravel的版本號

使用laravel其他的版本號 :

.json和.lock差別 :

namespace

Laravel 裡建立 Class :

PHP-FIG 制定的套件開發標準 : PSR-4

Laravel 專屬的指令列工具 : artisan

對應講義 : 20200710-5_Blade 樣板引擎.pdf

義大利麵( 米粉 ) 程式碼

Laravel 的 MVC 之 View 是甚麼:

Laravel 的樣板引擎 :

啟動 Blade 解析器 :

常見的網頁排版 :

換成wagon 1.5.1 ，因為PHP為7.3版

master.blade.php 為父view (子views繼承來自他)