Laravel 工作坊開發流程與工具介紹

shengyou @ 彰師大資工系學會 (2014.12.06)

階段任務• 了解網路應用程式開發流程

• 學習如何使用剛安裝好的各軟體

• 熟悉開發流程與軟體操作

網站預覽

運行環境

佈署平台

版本控制

程式開發流程

SourceTree

pagoda box google chrome

UwAmpcmder指令執行

原始碼撰寫及系統開發

Netbeans原始碼撰寫 composer

套件管理

phpMyAdmin資料庫操作

使用 SourceTree

什麼是版本控制？• 就是將每一階段的程式碼都送進版本控制系統內做紀錄，讓開發過程中的每一個階段都有紀錄可尋、可�、可回溯

• 就像玩遊戲都會找存檔點一樣，萬一開發過程出了差錯，我們還可以回復到上一個存檔點

git 版本控制• 本工作坊使用的版本控制系統為 git，是目前開放原始碼社群內最熱門的系統。其分散式的特性，讓眾多知名開發原始碼軟體都是使用 git 做版本控制

• git 是透過命令提示字元操作，為降低難度，本工作坊採用 SourceTree 軟體，透過圖型化介面教學 git 操作

★ 參考：https://www.atlassian.com/git/

什麼是 SourceTree？• 由 Atlassian 公司開發的 git 圖型化介面軟體，讓操作 git、瀏覽 git 線圖都變得更簡易、直覺

• 目前支援 Windows 及 Mac 兩個平台，只要簡單的註冊就可以免費使用，還可搭配

Bitbucket、Github 等平台使用

操作介面

書籤管理

常用功能鈕

working directory

staging area

檔案差異

儲存庫頁籤

開�書籤管理

新增一個儲存庫

儲存一個版本

加入檔案

輸入儲存紀錄

git 工作流程概念

★ 圖片來源：http://thkoch2001.github.io/whygitisbetter/images/local-remote.png

瀏覽 git 線圖

小提醒• 工作坊每一個階段都會將該階段結果輸入至儲存庫內，當各階段完成後，可以瀏覽各階段程式碼的變更

• 之後會將儲存庫內的原始碼佈署至 PaaS

平台上，讓專案上線

使用 Netbeans

操作介面檔案管理

功能表及常用功能鈕

原始碼編輯區

程式碼結構瀏覽

建立新專案

建立新專案

小提示• Netbeans 有提供語法高亮度及程式碼補完功能，也可透過設定調整主題風格

• Netbeans 具備外掛擴充機制，若有需要額外擴充功能可再安裝

• Netbeans 內建 git 及 composer，也可搭配使用

使用 UwAmp

UwAmp 程式畫面

PHP 版本及偏好設定

�動/停止HTTP 主機

設定 UwAmp• 設定 port：

• http 8000 及 mysql 3306

• 設定 php 版本：

• php 5.5.15

• 設定 Document Root：

• 設定至 C:\UwAmp\www\{專案名稱}

Apache 設定

設定根目錄

設定port

開� rewrite module

�動 UwAmp• 設定 DocumentRoot 至 C:\UwAmp\www

\test\

• 在 Netbeans 裡新增一個 index.php，並輸入一些 php 程式碼

• 打開瀏覽器，瀏覽 http://localhost:8000

• 若要切換不同專案，則依此流程切換

cmder 及常用指令

什麼是指令列？• 一種操作作業系統核心的方式，透過鍵盤輸入指令的方式達成。早期還沒有圖型化介面時，都是用這種方式操作電腦

• 在 Linux 主機上，由於大多沒有安裝圖型化介面，因此都需要透過指令列來遠端操作；而 Laravel 本身的 artisan 也是指令列工具

★ 更多指令教學：https://speakerdeck.com/62gerente/bash-introduction

使用者與系統互動

★ 參考資料：https://pt.opensuse.org/Conceitos

怎麼使用指令列？從桌面上�動 cmder.exe

從鍵盤輸入指令，輸入完按 Enter 鍵

當前工作目錄

ls [opt] {path}• List = 列出檔案列表

- [ -a ] 列出所有(包含隱藏)檔案

- [ -l ] 以列表的方式呈現

• 範例：$"ls"%la

cd {path}• Change Directory = 切換工作目錄

- { . } 當前目錄

- { .. } 回到上一層目錄

• 範例：$"cd"../$"cd"Projects\blog

mkdir {directory}• Make Directory = 建立資料夾

• 範例：$"mkdir"blog$"mkdir"my_project

rm [opt] {file}• Remove = 刪除檔案

- [ -r ] 刪除資料夾

- [ -f ] 強制刪除 (不詢問)

• 範例：$"rm"test.txt$"rm"%r"test_folder$"rm"%rf"*.txt

mv {from} {to}• Move = 移動/重新命名檔案

- { from } 來源路徑

- { to } 目標路徑

• 範例：$"mv"test.txt"../$"mv"test.txt"test.html

clear• clear = 清空螢幕

- 當指令打太多，想要有個乾淨的螢幕時可以使用的指令

• 範例：$"clear

小技巧• 自動補完

- 在輸入指令時，若一時忘記指令的全名時，可按鍵盤 Tab 鍵數次，若該指令在系統有設定提示時，會出現對應的提示，再依提示將指令補完即可送出

設定指令捷徑• 捷徑設定

- 打開 cmder/config 資料夾，裡面的

aliases 及 *.lua 是可以做自定擴充/設定的

- {捷徑}={指令 參數}

• 範例：artisan=php"artisan"$*pj=cd"%USERPROFILE%\Projects

Composer 指令簡介

什麼是 composer？• 早期的 PEAR 套件散佈方式有諸多問題，因此現由 composer + packagist 取代，成為 PHP 新一代套件管理與散佈方式

• 此單元將簡介幾個工作坊會用到的指令，讓學員熟悉幾個必要的 composer 指令操作

★ 更詳細的 composer 教學：https://speakerdeck.com/jaceju/begining-composer

composer [list]• 顯示 composer 所有的指令

• 若在下指令的時候，突然忘了指令的全名時，可以先用這個指令�詢一下，再重新輸入指令即可

• 範例：$"composer$"composer"list

composer {cmd} --help • 部份 composer 指令可接受額外參數，若一時忘記參數的使用方式時，可先加 --

help 於該指令後方，即顯示該指令的說明文件，待確認用法後再重新輸入指令

• 範例：$"composer"list"%%help$"composer"update"%%help

composer create-project• 目前各主流框架都是由 composer 的套件組合而成，而 composer 現支援透過

create-project 指令來安裝各框架的專案結構

• 範例：$"composer"create%project"laravel/laravel"{your%project%name}"%%prefer%dist

composer update• 若專案需要新增/更新套件時，可透過這個指令，讓 composer 自動更新/安裝所有相依套件 (若是新增套件時，需先修改

composer.json 內的設定再執行指令)

• 範例：$"composer"update

使用 phpMyAdmin

什麼是 phpMyAdmin？• 資料庫本身是一台主機 (server)，要操作資料庫的內容，我們必需透過終端機

(client) 連線後，遠端操作

• phpMyAdmin 是一個由 PHP 撰寫的 MySQL

Client，透過網頁瀏覽的方式，我們就可以遠端操控資料庫的設定

建立新資料庫

建立新資料表

建立資料表結構

輸入資料

瀏覽資料表

輸入 SQL 指令

綜合演練• 用 SourceTree �動一個新的儲存庫

• 在 Netbeans 裡輸入這個新專案

• 設定/�動 UwAmp

• 瀏覽器裡預覽

問與答學員可開始練習、實作

單元小結• 在這個單元裡，我們簡介了網路應用程式的開發流程，以及開發流程中會使用到的所有工具使用

• 接下來，我們將學習如何使用 composer

建立一個全新的 Laravel 專案