開發環境建置
范聖佑 Shengyou Fan
臺中科⼤大資⼯工系 (2015/05/30)
適
⽤用
5.0
版
單元主題
• 了解 PHP 網路應⽤用程式的運作原理
• 了解 Laravel 開發環境需求
• 安裝/設定 wagon 並驗證環境建置成功
• 開發⼯工具簡介
程式運作原理	
  
與開發環境需求
網路應⽤用程式運作原理
HTTP 伺服器
(apache / nginx)
資料庫
(MySQL)
PHP 直譯器
(網路應⽤用程式)
網路主機作業系統
使⽤用者瀏覽
靜態檔案
Laravel 開發環境需求
• HTTP 伺服器 (需⽀支援 rewrite 才可使⽤用 Pretty URL)
• PHP 最低環境需求
- PHP >= 5.4 (官⽅方 Homestead 使⽤用 5.6)
- Mcrypt PHP Extension
- OpenSSL PHP Extension
- Mbstring PHP Extension
- Tokenizer PHP Extension
• 資料庫 (⽀支援多種資料庫系統)
★ 參考⽂文件:http://laravel.com/docs/5.0#server-requirements
環境建置⽅方案
• 依個⼈人喜好及需求有多種環境建置⽅方式:
- 使⽤用官⽅方提供的虛擬機器 Homestead
- 使⽤用多合⼀一組合包 (*AMP)
- 使⽤用 wagon 可攜式安裝包 (Windows-only)
- ⾃自⾏行⼿手動各別安裝
★ wagon 的故事:https://www.youtube.com/watch?v=O7ynMSd0Tlo
wagon 可攜式懶⼈人包
• 免安裝/設定 cmder,還帶⼀一堆 plugins
• 免安裝/設定 UwAmp (內建 PHP 5.6)
• 免安裝 Composer 及 Global Packages
• 獨⽴立的環境變數、port
• 指令列 git 版本控制系統
• 預設好的 Laravel
• 依需求可再加載 Editor/IDE、圖型化 git 軟體…
安裝/設定⽅方式
• 請先⾄至⼯工作坊教學資源下載區下載軟體組合包
• 解壓縮檔案,並把 wagon 放到桌⾯面
• 打開 vcredist 資料夾,安裝Visual C++ 可轉發套件
• 打開 wagon 資料夾
- 執⾏行 cmder/Cmder.exe 啟動指令列⼯工具
- 輸⼊入 php	
  -­‐v 確認 PHP 版本
- 輸⼊入 composer 確認 Composer 可運作
- 執⾏行 uwamp/UwAmp.exe 啟動 UwAmp 確認可運作
開發⼯工具簡介
開發流程及⼯工具
網站預覽
運⾏行環境
佈署平台
版本控制
SmartGit
pagoda box google chrome
UwAmp
cmder
指令執⾏行
原始碼撰寫及系統開發
Sublime Text
原始碼撰寫 composer
套件管理
Adminer
資料庫操作
cmder 指令列⼯工具
cmder 指令列⼯工具
• 什麼是指令列?
- ⼀一種操作作業系統核⼼心的⽅方式,透過鍵盤輸⼊入指令
的⽅方式完成。早期還沒有圖型化介⾯面時,都是⽤用這
種⽅方式操作電腦
- 在 Linux 主機上,由於⼤大多沒有安裝圖型化介⾯面,
因此都需要透過指令列來遠端操作;⽽而 Laravel 本⾝身
的 artisan 也是指令列⼯工具
• cmder ⼜又是什麼?
- Windows 內建的命令提⽰示字元並不好⽤用,網路上的
神⼈人做了⼀一包更好⽤用的⼯工具來取代它
使⽤用者與系統互動的⽅方式
★ 圖表繪製參考:https://pt.opensuse.org/Conceitos
終端機
(Shell)
應⽤用程式
(GUI Application)
作業系統核⼼心
(Kernel)
電腦硬體
(Hardware)
使⽤用者
(User)
cmder 操作簡介
cmder 操作畫⾯面
從鍵盤輸⼊入指令,輸⼊入完按 Enter 鍵
當前⼯工作⺫⽬目錄
UwAmp 多合⼀一組合包
UwAmp 多合⼀一組合包
• 什麼是多合⼀一組合包?
- 在 Windows 上為⽅方便建置 Apache、PHP、MySQL
開發環境⽽而出的多合⼀一組合包,通常以 AMP 結尾
- UwAmp 具備 GUI 圖型介⾯面可協助我們快速的調校
Apache 設定、啟動/關閉 Server、下載/更新 PHP 版
本
wagon 裡的 UwAmp 預設
• 預設 Ports:
- http 8000
- mysql 3306
• PHP 版本:
- 5.6.4
• 預設 Document Root:
- {WAGON_ROOT}uwampwwwdefault
UwAmp 啟動與關閉
PHP 版本及
偏好設定
啟動/停⽌止
HTTP 主機
Apache 設定
設定根⺫⽬目錄
設定port
瀏覽 UwAmp ⾸首⾴頁
http://localhost:8000/
Sublime Text 3
該⽤用 Editor 還是 IDE?
• 在編寫 PHP/Laravel 源始碼時,我們需要編輯器軟體
來協助我們完成這項⼯工作
• ⼀一般⽽而⾔言,Editor 僅提供單純的⽂文字編輯功能,若需
要更多針對程式語⾔言的進階功能,往往要透過外掛
來完成
• 相較於 Editor,IDE 提供更多的整合功能,在編輯源
始碼時,可以有較多的輔助⼯工具可協助我們不出錯
• 在本⼯工作坊裡,可以⾃自由選擇 Sublime Text 3 或
Netbean 做為程式碼編輯⼯工具
Sublime Text 3 主畫⾯面
Netbean 主畫⾯面
檔案管理
功能表及常⽤用功能鈕
原始碼編輯區
程式碼結構瀏覽
建⽴立新專案
建⽴立新專案
Adminer 資料庫管理⼯工具
MySQL GUI
• 資料庫本⾝身是⼀一台主機 (server),要操作資料庫的內
容,我們必需透過終端機 (client) 連線後,遠端操作
• 為了⽅方便操作 MySQL 資料庫,搭配如 Adminer、
phpMyAdmin 這種圖型化操作介⾯面的軟體⽅方便使⽤用
• Adminer 跟 phpMyAdmin ⼀一樣,是⽤用 PHP 撰寫的網路
應⽤用程式,專⾨門⽤用於操作 MySQL 資料庫使⽤用。不過
Adminer ⽐比 phpMyAdmin 更為輕便,純英⽂文 MySQL 版
僅佔 189 kb,且經過整併壓縮只有⼀一個 php 檔案⽽而已
• 在 wagon 裡內載 phpMyAdmin 及 Adminer,可依習慣
選擇⾃自⼰己喜歡的⼯工具來使⽤用
Adminer 登⼊入畫⾯面
http://localhost:8000/adminer
Adminer 主畫⾯面
phpMyAdmin 登⼊入畫⾯面
http://localhost:8000/phpmyadmin
phpMyAdmin 主畫⾯面
若發⽣生 port 衝突時
修改 wagonuwampbindatabasemysql-5.6.20my_uwamp.ini 的 port
[client]	
  
#password	
  =	
  your_password	
  
port	
   	
   =	
  3306	
  
socket	
  	
   =	
  /tmp/mysql.sock
調整 phpMyAdmin 設定
/*	
  Server	
  parameters	
  */	
  
$cfg['Servers'][$i]['host']	
  =	
  'localhost';	
  
$cfg['Servers'][$i]['port']	
  =	
  '3306';
登⼊入 Adminer 時
[mysqld]	
  
default-­‐storage-­‐engine	
  =	
  myisam	
  
port	
   	
   =	
  3306	
  
socket	
  	
   =	
  /tmp/mysql.sock
伺服器輸⼊入	
  localhost:port
SmartGit 版本控制⼯工具
版本控制系統
• 就像打電動有存檔點⼀一樣。寫程式除了在每個檔案
修改完存檔外,每寫完⼀一個功能、完成⼀一個階段性
任務時,可以將這個階段所有變更的檔案儲存成⼀一
個版本
• 透過版本控制系統,除了可以知道每⼀一個階段完成
哪些功能、修改了哪些檔案外,也可以在多⼈人協同
合作時,彼此交換檔案也不會發⽣生將彼此的⼯工作成
果覆蓋的問題
• 本次⼯工作坊使⽤用的版本控制系統稱做 git,是⺫⽬目前開
放源始碼界內主流的版本控制系統。為⽅方便操作,
將搭配 SmartGit 圖型介⾯面軟體來操作
請啟動 smartgit/bin/smartgit.exe
SmartGit 啟動/設定(1)
SmartGit 啟動/設定(2)
SmartGit 啟動/設定(3)
SmartGit 啟動/設定(4)
SmartGit 啟動/設定(5)
SmartGit 啟動/設定(6)
⼩小提醒
• ⼯工作坊每⼀一個階段都會將該階段結果輸⼊入⾄至儲存庫
內,當各階段完成後,可以瀏覽各階段程式碼的變
更
• 每當看到投影⽚片裡的存檔點時,請記得在步驟將程
式碼送進版本控制系統裡儲存
• 之後會將儲存庫內的原始碼佈署⾄至 PaaS 平台上,讓
專案上線
單元總結
• 在這個單元裡我們學到了些什麼?
- PHP 網路應⽤用程式的運作原理
- Laravel 的最低環境需求
- 使⽤用 wagon 建置可攜式的 Laravel 開發環境
- 了解開發⼯工具的使⽤用⽅方式
Q & A
歡迎提問討論

開發環境建置