php – Codeigniter – 在任何地方都能使用 CI 開發

繼承前一篇 Codeigniter – 如何讓 System 交給 Composer 保管

最近因為要在 Codeigniter 以外使用 Codeigniter 的工具,花了一兩天思考,後來受到製作 Codeigniter Restful 的 Chris Kacerguis 啟發,想到原來可以這麼設計。

假設我們想把已經寫好的 Codeigniter 類別庫、或是想使用 Codeigniter 的工具,用在如應用在其他 CMS、其他框架、傳統 PHP 的話,那該如何橋接呢?很簡單,改改名稱就好。

 

修改路徑與檔名

  • application/ 替換成 ci_app/
  • index.php 替換成 bridge_codeigniter.php

bridge_codeigniter.php 本來是 Codeigniter 的 index.php,在這個範例中為了語意化,我們不使用 index.php 。

 

替換 Codeigniter application 位置

瀏覽器開啟 bridge_codeigniter.php 應該也能看到 Codeigniter 的歡迎畫面,不過我們其實不需要了。

 

刪除 Welcome 歡迎畫面

ci_app/controllers/Welcome.php

 

建立測試文件

新增一個 helloworld.php

我示範了 Codeigniter 的字串加解密類別庫,瀏覽器打開 helloworld.php 能看到結果。這樣一來,就能在任何 PHP 底下執行 Codeigniter ,接著發揮你的創意吧。

雖然這種使用方式無疑會跑完整個 codeigniter 生命週期,但因為 CI 的效能算是框架中快速的,中小型開發不會有太大的影響,所以這是一種把 Codeigniter 接在其他系統底下的方式,但是否使用就取決於你的決定。

php – Codeigniter – 如何讓 System 交給 Composer 保管

前言

一般來說,最簡單方式是使用 “composer create-project codeigniter/framework” 來安裝,可以參考這一篇教你的一般安裝法。不過這裡要教的安裝方式,就是分離 system 目錄,可以達到

  1. 移植到主機不需移動 system,因為核心的部分統一交給 composer 管理,由 composer install 統一下載。
  2. GIT 在使用提交 git commit 指令的時候,無須加入 system 目錄。
  3. 釋出 Codeigniter 版本的時候,只要指定版本並下指令 composer update 就可以自動替換掉目錄 system,免除手動替換。
  4. 可以在任何CMS、框架或傳統 PHP 開發中使用 Codeigniter 功能(參考我)

這種安裝方式官方沒有教,不過在 CI 中的 index.php 都已經支援這樣的特性。

 

安裝步驟

 

使用 composer 下載

新增一個空白目錄後初始化 composer.json 並下載 codeigniter。注意!為了讓開發的系統穩定,我固定版本 3.1.9 ,請改成你想要的版本可以在這裡找到

因為 Codeigniter 升級有可能會需要小幅度的修改你的程式碼 (但大致上來說很少),明確指定可以避免執行 composer update 不小心升級造成的麻煩。

 

複製

將這兩個檔案複製到你的根目錄

  • vendor/codeigniter/framework/application/
  • vendor/codeigniter/framework/index.php

這時候打開瀏覽器,只會看到遺失訊息。這是因為預設的 system 資料夾指定位置找不到。

 

修改 index.php

發現了嗎?我們把 system 指向到 vendor 中的 Codeigniter ,只要重新打開瀏覽器就可以看到 Hello World 。

 

如何升級/降級 Codeigniter?

直接修改 composer.json 中的版本,例如我把 3.1.9 降級為 3.1.8

這樣就完成替換囉,你可以試著 echo CI_VERION; 查看。

決定 Codeigniter 使用哪個版本核心,取決於 composer.json 的設定檔,但記得每次版本異動都要查看官方升級指南喔。

 

jQuery – 好用的外掛 select2。介紹AJAX方法。

安裝

可以使用 NPM 安裝,用 Webpack 執行。以下介紹簡單傳統用法。

加入 jQuery 與 select2

 

npm

 

基本用法

<option> 外層不一定要使用 <optgroup> 做分類

 

動態定義 option

data 的部分可以透過 AJAX 取得以後,再渲染 <option>。

上面示範有使用 <optgroup> 的作法,如果不需要分類就直接

要給 <option> 的格式,務必要包含 id, text 兩個參數。

AJAX

當搜尋的時候,才開始向伺服器要資料,並呈現再 <option>

processResults 從伺服器取得的結果,因為 return.results 要產生 <option> ,所以記得格式務必為

 

複選

<select> 改為複選之外,select2 也要添加 tags: true。

 

AJAX 預選

從遠端取得資料後,只需要對綁定的元素使用 jQuery 的 apeend() 與 trigger() 觸發就可以了。

 

Select2 相關設定可以參考官方

jQuery – TouchSwipe 簡單支援 Swipe 滑動手勢的偵測

現在做 WebAPP 簡直是家常便飯的時候了,要把 Web 做成更高的易用性,jQuery 在今天還是非常好懂得工具而且超方便,尤其是這種滑動的套件,真的是太簡單了。如果要在手機拖曳的話,請看這篇

使用套件:TouchSwipe-Jquery-Plugin

或是使用 npm 裝到開發環境裡

使用方式

swipe() 回傳的參數

  • event 事件
  • direction 滑動的方向,如果是點擊的話,會是 null
  • distance 滑動的距離
  • duration 滑動持續的時間
  • fingerCount 使用的手指頭數量
  • fingerData 在事件中手指頭的座標
  • currentDirection 使用者正在滑動的當前方向,目前看起來與 distance 一樣,不知道差別在哪….

選用的參數與支援的方法可以參考官方的設定

通常我會把 threshold 設定為 0。這樣當滑動大於 0px 的時候,就會觸發事件,預設的滑動要大於 75px 才會觸發。

 

jQuery – 在行動裝置上使用 Draggable 的方法

jQuery UI 的 Draggable 或任何滑鼠拖曳事件,在手機或是平板上都無法作用。我們可以加入 jQuery UI Touch Punch 的外掛事件,就能流暢的在手機上使用囉。

下載到電腦後,加入

之後什麼都不用寫,依照原本的 jQuery UI 拖曳事件如 Draggable 或 Sortable 等等事件,就能順利的支援在手機了。