php – Joomla! 如何在元件中快速取得 GET | POST 的方法

請先了解上一篇 如何設計共用的 Controller 做預處理,在 Component 中其實我們只要修改 Controller 繼承的 Library ,在裡面處理好 GET / POST 的處理,那麼之後就能更快速的使用例如

GET

POST

 

透過 Composer 安裝

我已經寫好套件了,請直接透過 Composer 下載使用吧。

接著載入 composer autoload.php,如果要全域載入記得透過自訂 plugin 觸發 system 的 onAfterInitialise(),參考 如何自動載入類別庫或 composer 到全域 ,例如

在將元件由原本 Controller 繼承 JControllerLegacy 改為繼承 \Jsnlib\Joomla\Controller\Legacy\Helper

現在你可以輕鬆使用 post 或 get。

也可以直接調用

像是上傳檔案需要用到 $_FILES 那麼則需要使用

 

php – Joomla! – 如何設計共用的 Controller 做預處理

不管是不同 Component 下的 Controller,或是同個 Component 底下的 Controller,很多時候我們需要每個 Controller 都得處理共用程序,而不打算每次開新的 Controller 就要從寫一次

例如這個 $input,我可不想每次寫 Controller 都還要寫一次

我希望每次寫 Controller 只需要

或是有個 Model 因為太常使用,我們卻每個 Controller 都要載入

我們可能會很希望直接在 controller::method() 中直接使用

這樣該如何製作?

其實只要透過 plugins 的方式就可以達到,可以先參考這篇 如何自動載入類別庫或 composer 到全域 。我們依照這篇文章的 plugin 設計實做。

建立一個 Library

libraries/src/Jsnlib/Joomla/ControllerLegacy/Form.php

 

注意自動讀取的類別

這個類別如同這篇 如何自動載入類別庫或 composer 到全域 ,我們不需要修改

plugins/system/mylib/mylib.php

 

實際測試

元件 Component 注意繼承改為 extends \Jsnlib\Joomla\ControllerLegacy\Form。

components/com_todolist/controllers/form.php

 

接著我們如果覺得這樣取出 GET/POST 太囉嗦

我想更精簡這樣

那就參考下一篇文章 如何在元件中快速取得 GET | POST 的方法

php – Joomla! – 多國語言設定

後台元件語言位置

如果我們需要依照不同語言顯示,那麼可以製作兩個檔案:

  • administrator/language/zh-TW/zh-TW.com_{你的元件名稱}.ini
    • 後台管理一般的顯示
  • administrator/language/zh-TW/zh-TW.com_{你的元件名稱}.sys.ini
    • 後台管理的 xml 顯示

 

前台元件語言位置

給使用者看的,則只會使用 .ini 一個檔案而已:

  • language/zh-TW/zh-TW.com_{你的元件名稱}.ini

 

添加後台語言檔案

範例寫在 zh-TW 屬於繁體中文(正體中文),若要製作其他語系,可以替換掉語言代號。製作鍵名的時候,我們習慣大寫「COM_{你的元件名稱}_{你自訂的鍵}」。

administrator/language/zh-TW/zh-TW.com_todolist.sys.ini

 

administrator/language/zh-TW/zh-TW.com_todolist.ini

 

測試一般輸出

administrator/components/com_todolist/controllers/todolist.php

 

測試系統設置輸出

components/com_todolist/views/todolist/tmpl/default.xml

注意這個元件的設定檔,雖然是放在前台的 component,但是是從後台中去控制。

後台 > 選單 > Main Menu > 新增,找到元件以後, xml 欄位定義的名稱也會被自動翻譯囉

 

添加前台語言檔案

language/zh-TW/zh-TW.com_todolist.ini

 

CSS – SUSY3 – 部屬架構(3)

直接開發

我在 Github 打包了基本架構叫做 frontpack ,一來也方便我後續開發,依照下方稍微配置了一些路徑與工具,主要就是編寫 JS 與使用 Susy 3 ,可以直接前往 Github 下載使用。下方介紹教學,會與開發包 frontpack 稍微不同。

 

認識架構

繼承上一篇,為了讓 Susy3 的配置更容易維護,我簡單規劃了系統架構。我們的 SUSY 全部放在 assets/src/scss/ 底下喔!

  • assets/src/scss
    • config/
      • _global.scss 全域引入,包含使用設定、載入需要的 mixin
      • _susy.scss 放置 susy map 的部分,包含斷點的設置都在這裡
    • mixin/ 日後擴增的 mixin 位置
      • susy/ 放置官方提供的片段
        • _gallery.scss 如 susy2 的 gallery 一行解決相簿模式排列
        • _susy-breakpoint.scss 如 susy2 的斷點
        • _with-layout.scss 給斷點使用 layout
    • app.scss 範例

 

依序添加

設定檔:config/_global.scss,這是全域使用的,我們可以手動增減我們要的參數、 mixin 等等總體的設定。

 

Susy Map:config/_susy.scss,不同的 map 定義都放在這裡,日後調整斷點或整體外框也能方便許多。

 

好用的 Gallery 畫廊模式:mixin/susy/_gallery.scss,上一篇有提過的範例。

 

斷點:mixin/susy/_susy-breakpoint.scss,參考官方建議

 

mixin/susy/_with-layout.scss

 

全域樣式:src/scss/global.scss

 

單頁樣式:src/scss/app.scss,container 因為在不同尺寸要出現不同的柵欄,所以也要使用 Breakpopint。

 

這樣我們的範例都設定好了,接著產出

並添加到 HTML:dist/index.html

完成!

CSS – SUSY3 – 使用方法(2)

先了解 3 個方法

了解安裝以後,接著只要這三個方法就能解決複雜的 RWD。

1. span()

跨越一個或多個 column 與 gutter 的佔位寬度。可透過 margin 或 padding 來推拉你的元素。

2. gutter()

3. slice()

很少用,在製作不對稱的柵欄系統時會用到。我暫時還搞不懂,之後學會了再補上來。

 

config

整體設定說明,參考

  • min-width:自訂添加的斷點,給我們的 mixin susy-breakpoint() 使用
  • columns:多少個柵欄
  • gutters:流變溝槽是 columns 的倍數,也可以是靜態單位 px
  • spread:擴散元素的溝槽,narrow (沒有), wide (兩側:0.5 + 0.5 = 1), or wider (兩側 1 + 1 = 2)
  • container-spread:擴散 container 的溝槽,同 spread

 

建議的簡單組合

我覺得 container 兩側都使用 1 gutter() 方便釐清跟排版。請查看 span 的設定 。

  • spread: narrow
  • container-spread: wider

spread 與 column 數量的關係(參考官方說明),在算總體寬度的時候可以注意一下,看自己希望怎麼使用:

  • narrow:gutters = columns – 1
    • 兩側沒有 gutter 所以 4 個柵欄會有 0 + 3 + 0 個溝槽
  • wide:gutters 等於 columns
    • 兩側各 0.5 單位溝槽,所以 4 個柵欄會有 0.5 + 3 + 0.5 個溝槽
  • wider:gutters = columns + 1
    • 兩側各 1 單位溝槽,所以 4 個溝槽會有 1 + 3 + 1 個溝槽

若要重複 12 個 5 柵欄

前後各 20px 柵欄,中間重複 3 個 100px 柵欄

 

斷點設計

參考官方教學,添加以下兩個自訂的 with-layoutsusy-breakpoint 即可快速的在不同尺寸底下使用不同的柵欄。例如 Div 在 Mobile 底下佔 2 欄位,但在 Pad 底下站 4 個欄位。

接著添加三個裝置的名稱設定,你可以依照需求增減。其中透過 min-width 指定斷點,例如 $pad 會作用在 0~799px 之間。

所以 container 可以這麼寫 (參考),這樣就能產生不同尺寸縮放的背景柵欄,很適合開發階段使用。

元素可以這麼寫

我們來看範例,背景 0-799px 紅色,800-1279px 綠色,1279px 以上藍色。

 

Gallery

susy2 有好用的 gallery ,但在 3 拿掉了,官方希望你有需要再手動加入

之後,我們要顯示例如相簿,這種每一行左右貼其兩側的話,就非常簡單只要這樣就可以

下一篇我們依照這篇文章,放置到完整架構