Sublime Text3 開發環境快速建置

近幾年來，網站開發變得熱門，且相關的工作需求和職缺也越來越多，而我也想了解網站是如何運作以及建置，畢竟現在大家都是使用瀏覽器連上網站完成各自不同的需求 所以我想玩看看網站開發這領域。

那麼進到這領域，對於新手來講，還是要有一個開發環境，那我選擇的是Sublime Text3這個編輯器...

廢話不多說 接下來進入正題 開始來介紹基本安裝、設定、使用教學

首先安裝的部分，開發者只要按照自己電腦並且挑選對應的作業系統安裝即可 就不多談了

裝好之後，就要安裝管理許多套件的管理員Package Control 這可以讓Sublime變得更好用

安裝步驟如下:

Step1:開啟Sublime Text3主程式，點擊View/Show Console或是快捷鍵Ctrl+`叫出主控台

Step2:直接複製貼上Package Control網頁上提供的指令在主控台，直接按Enter就執行，就安裝完畢了，之後按ESC鍵離開主控台

Step3:發現Package Control選項出現選單裡 點擊Preferences/Package Control

到此Package Control已經安裝完畢，接下來就來用看看它到底有多好用

那在開啟Package Control之前，我先用一張圖來介紹它的常用指令 

這是截圖於某位前端高手的PPT，想了解的可以看參考資料

開啟Package Control或按快捷鍵Ctrl+Shift+P，主畫面如下:

用Package Control安裝套件

按下Install Package或是輸入inst 進到如下圖的畫面，在輸入框中輸入套件名稱按Enter就開始安裝套件

強烈建議安裝的套件清單:

1. Emmet(建置原始碼超快)
2. AutoFileName(自動抓取檔案路徑)
3. ColorPicker(調色盤)
4. jQuery(前端開發必用的函式庫)
5. JS Snippets(自動產生常用的JavaScript 片段)
6. LiveReload(瀏覽器自動重新整理)
7. EJS(定義EJS語法)
8. Sass(定義Sass語法)

試用套件:

使用Emmet快速產生HTML5網頁檔

!+Tab 就完成了!!!

使用ColorPicker挑選顏色:

按下快捷鍵Ctrl+Shift+C 跑出調色盤

其餘的套件 留待開發者自己去試就明白囉...

Sublime Text3 並不會自動排版 如果程式寫的太亂很難debug怎麼辦 別擔心

下面教你如何做到自動排版...

程式碼自動排版:

Step1:輸入關鍵字  auto format sublime text

Step2:第一個連結就是了

Step3:

點擊Preferences/Key Bindings - User 叫出空白的設定檔出來 

複製貼上網頁裡這行{ "keys": ["ctrl+shift+r"], "command": "reindent"}指令

按Ctrl+S存檔

注意:快捷鍵改為f12 這部分可以依照使用者習慣 

 到這裡友善的開發環境就建置完成了 ...

如果大家有好用的套件或是開發建議也可以提供哦 ^^

參考資料:

1.Sublime text極速應用教學

2.Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學

3.How do I reformat HTML code using Sublime Text 2?

PHP XAMPP配置PHP環境和Apache80 Port被佔用 解決方案

某天，因為個人需要而去安裝Skype，發現我的Apache無法啟動，原來是Skype占用我的80 Port。這種情況對許多開發者來說，相信一定是很常遇到的問題

如下圖所示:

於是，我就去尋找一個解決方案，經過多次的尋找與思索，決定採取最簡單最有效的方案

那就是將Apache的80 Port改成其他Port

在這裡 我只分享解決問題的做法

至於想深入了解此問題的原由 可以參閱參考資料 或是拜求Google大神 滿足自己的好奇心

以下就來分享 我的做法:

Step1: 開啟 XAMPP Control Panel 點擊Apache(httpd.conf)

Step2: 彈出一個httpd.conf的記事本文件 修改裡面的組態內容 並儲存

(Ctrl+F 搜尋Listen 80 =>80改成8080)

(搜尋ServerName localhost: 80 =>80改成8080)

Step3: 在XAMPP Control Panel 點擊Start 發現正常啟動  對應的Port 也被改成8080

Step4:測試網頁是否能正常訪問 網址列鍵入 localhost:8080/xampp/index.php

能看到XAMPP首頁的畫面 代表成功

注意:因Port已經被修改，往後要開發網頁時，localhost後面必須要加入對應的Prot (這裡是8080)
才能正常訪問


每次重開機後發現一定要進去XAMPP Control Panel，手動啟動Apache，才能run服務，這就意謂著每次都要手動去啟動，難道不能開機時讓Apache自動啟動 答案是可以 如以下步驟:

Step1: 開啟XAMPP Control Panel

Step2: 點擊面板上Apache左邊的有打叉的方格

Step3:彈出對話框，詢問是否要安裝Apache服務 點擊Yes

Step4:面板上Apache左邊的方格變成打勾的方格 狀態列也顯示安裝成功

Step5:啟動Apache 

之後重開機測試 如果可以run服務的話 就沒問題了

參考資料:
(1)PHP XAMPP配置PHP環境和Apache80端口被佔用解決方案

用 PHP 存取 SQL Server2012 (使用XAMPP 5.5.19)

由於最近要做Web專案需要用到，所以自己就Survey一下
以下分享我找到的方法:

--------------------------------------------------------------------------------------------------------------------------

STEP.1 安裝XAMPP 5.5.19

STEP2. 前往 Microsoft for PHP connect SQL Server 下載補丁

 (如上圖，點選Download)

( SQLSRV30.EXE 是 PHP5.3 ~PHP5.4 版本的補丁

  SQLSRV20.EXE 是 PHP5.2 ~PHP5.3 版本的補丁

  SQLSRV31.EXE 是 PHP5.4 ~PHP5.5 版本的補丁

  SQLSRV32.EXE 是 PHP5.4 ~PHP5.6 版本的補丁

  由於我安裝的 XAMPP  5.5.19 內建 PHP5.5.19，所以下載 SQLSRV32.EXE )

STEP3. 安裝補丁 (其實只是把檔案解壓縮，隨便選個空資料夾 暫放) 

STEP4. 將補丁「php_sqlsrv_55_ts.dll」與「php_pdo_sqlsrv_55_ts.dll」複製到以下路徑內

• C:\xampp\php\ext  如下圖所示:

STEP5. 開啟  php.ini   ( C:\xampp\php\php.ini )

在最底下加入這兩行 →儲存檔案

extension=php_sqlsrv_55_ts.dll
extension=php_pdo_sqlsrv_55_ts.dll 

如下圖:

STEP6. 重新啟動Apache服務  (預設是開啟，必須手動停止 再重新啟動)

( 如圖，開始 → 搜尋程式與檔案 → 鍵入'"xampp" → 點選「XAMPP Control Panel」) 

• XAMPP Control Pancel 主畫面  並執行方才講的動作 如下圖所示:

STEP7. 確認安裝成功
用瀏覽器開啟  http://localhost/xampp/phpinfo.php
查看是不是有 sqlsrv 字樣 (可以用Ctrl+F 搜尋)，有找到代表成功

STEP8. 前往 Microsoft® ODBC Driver 11 for SQL Server® - Windows 下載補丁

 (如上圖，點選Download)

(依據自己電腦的環境下載對應的版本)

(x64=>64位元  x86=>32位元)

• 安裝畫面:

 ( 如上圖 點擊Next)

 ( 如上圖 先勾選I accep the terms in the license agreement 再點擊Next)

  ( 如上圖說明 這裡不做任何動作 點擊Next)

 ( 如上圖 點擊Install)

 (正在安裝中 需等幾分鐘)

 ( 如上圖 點擊Finish 完成安裝)

STEP9. 撰寫一隻 PHP程式，測試是否連線

如果輸出 Connection established 代表連線成功 !!

參考資料:

(1)用 PHP 存取 SQL Server (使用AppServ 2.5.10)

(2)PHP 5.5 and MSSQL driver: Installing ODBC Driver 11 in Windows Server 2012 R2

(3)PHP官網=>連結MS SQL Server