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

2018-05-04 / JSN / 1 Comment / 7 人來過

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

GET

$this->getString('task');

$this->getInt('id');

POST

$this->postString('title');

$this->postInt('category');

透過 Composer 安裝

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

composer require jsnlib/joomla_controller_legacy_helper

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

<?php

defined('_JEXEC') or die;

class plgSystemMylib extends JPlugin

{

public function __construct(&$subject, $config)

{

parent::__construct($subject, $config);

}

public function onAfterInitialise()

{

require_once JPATH_ROOT . '/vendor/autoload.php';

}

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

class TodoListControllerForm extends \Jsnlib\Joomla\Controller\Legacy\Helper

{

}

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

// 取得整個陣列

$this->post();

$this->postArray();

// 取得單一值，不轉換型態

$this->post('cid');

// 強制轉換型態

$this->postString('task');

$this->postInt('id');

也可以直接調用

$this->app;

$this->input;

$this->get; // 等同 $this->input->get;

$this->post; // 等同 $this->input->post;

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

$files = $this->input->files->get('jform', '', 'array');

foreach ($files['upl'] as $key => $file)

{

$filename = JFile::makeSafe($file['name']);

}

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

2018-05-04 / JSN / 1 Comment / 4 人來過

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

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

$input = \JFactory::getApplication()->input;

echo $input->post->getString('task');

我希望每次寫 Controller 只需要

$this->post->getString('task');

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

$this->something_model = $this->getModel('something') or die("Invalid Load Model");

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

$somethings = $this->somethings_model->getAll();

這樣該如何製作？

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

建立一個 Library

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

<?php

namespace Jsnlib\Joomla\ControllerLegacy;

class Form extends \JControllerLegacy

{

protected $app;

protected $input;

protected $get;

protected $post;

function __construct($config = array())

{

parent::__construct($config);

$this->app = \JFactory::getApplication();

$this->input = $this->app->input;

$this->get = $this->input->get;

$this->post = $this->input->post;

}

注意自動讀取的類別

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

plugins/system/mylib/mylib.php

<?php

defined('_JEXEC') or die;

class plgSystemMylib extends JPlugin

{

public function __construct(&$subject, $config)

{

parent::__construct($subject, $config);

}

public function onAfterInitialise()

{

// ......

// 這行注意要存在

JLoader::registerNamespace('Jsnlib', JPATH_LIBRARIES . '/src');

// ......

}

實際測試

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

components/com_todolist/controllers/form.php

<?php

defined('_JEXEC') or die;

class TodoListControllerForm extends \Jsnlib\Joomla\ControllerLegacy\Form

{

function __construct($config = array())

{

parent::__construct($config);

}

public function query_insert()

{

// 如預期顯示

echo $this->get->getString('task');

echo $this->post->getString('title');

die;

}

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

$this->get->getString('task');

$this->post->getString('title');

我想更精簡這樣

$this->getString('task');

$this->getInt('id');

$this->postString('title');

$this->postString('description');

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

php – Joomla! – 多國語言設定

2018-05-03 / JSN / 0 Comments / 8 人來過

後台元件語言位置

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

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

; 請使用 UTF-8 存檔

COM_HELLOWORLD_TITLE="代辦事項"

COM_HELLOWORLD_DESC="建立你的代辦事項"

COM_HELLOWORLD_CHOICE="請選擇"

COM_HELLOWORLD_OPT_HELLO="嗨囉"

COM_HELLOWORLD_OPT_BYEBYE="掰掰"

COM_HELLOWORLD_UPLOLD="請上傳"

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

; 請使用 UTF-8 存檔

COM_TODOLIST_NAME="名字"

測試一般輸出

administrator/components/com_todolist/controllers/todolist.php

class TodoListControllerTodoList extends JControllerLegacy

{

public function edit()

{

echo JText::sprintf('COM_TODOLIST_NAME'); // => 名字

}

測試系統設置輸出

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

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

<?xml version="1.0" encoding="utf-8"?>

<message>COM_HELLOWORLD_DESC</message>

</layout>

<field

name="myimage"

type="media"

directory="stories"

label="COM_HELLOWORLD_UPLOLD"

<field

name="type"

type="list"

label="COM_HELLOWORLD_CHOICE"

description="COM_HELLOWORLD_CHOICE"

default="1">

<option value="1">COM_HELLOWORLD_OPT_HELLO</option>

<option value="2">COM_HELLOWORLD_OPT_BYEBYE</option>

</field>

</fieldset>

</fields>

</metadata>

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

添加前台語言檔案

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

<?php

defined('_JEXEC') or die;

class TodoListControllerForm extends JControllerLegacy

{

public function welcom()

{

echo JText::sprintf('COM_TODOLIST_WELCOME'); // => 歡迎

}

CSS – SUSY3 – 部屬架構(3)

2018-05-02 / JSN / 5 Comments / 13 人來過

直接開發

我在 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, 參考 http://oddbird.net/susy/docs/

@import "~susy/sass/susy";

// 使用 susy plugin, 參考 http://oddbird.net/susy/docs/plugin_svg-grid.html

@import "~susy/sass/plugins/svg-grid";

// 使用 compass

@import "~compass-mixins/lib/compass";

// 使用 compass 提供的重設所有瀏覽器預設屬性

@import "~compass-mixins/lib/compass/reset";

// 載入設定檔

@import "./config/susy";

// 載入 mixin

@import "../mixin/susy/with-layout";

@import "../mixin/susy/susy-breakpoint";

@import "../mixin/susy/gallery";

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

$mobile: (

'min-width': 0px,

'columns': susy-repeat(4),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'wider',

);

$pad: (

'min-width': 480px,

'columns': susy-repeat(8),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'wider',

);

$desktop: (

'min-width': 800px,

'columns': susy-repeat(12),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'wider',

);

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

// https://github.com/oddbird/susy/issues/648

@mixin gallery(

$span,

$config: ()

) {

$grid: susy-compile($span, $config);

$span: map-get($grid, 'span');

$column-count: length(map-get($grid, 'columns'));

$count: floor($column-count / $span);

$spread: map-get($grid, 'spread') + 2;

$container-spread: map-get($grid, 'container-spread') + 2;

$extra: ($container-spread - $spread) * 0.5;

$extra-push: su-call('su-gutter', $grid) * $extra;

float: left;

margin-right: -100%;

@for $n from 1 through ($count) {

$nth: unquote('#{$count}n + #{$n}');

$location: $span * ($n - 1) + 1;

&:nth-child(#{$nth}) {

$width: susy-compile($span at $location, $grid);

width: su-call('su-span', $width);

@if ($location > 1) {

$wide: susy-compile('first' $location - 1 'wide', $grid);

clear: none;

margin-left: su-call('su-span', $wide) + $extra-push;

} @else {

clear: both;

margin-left: if($extra-push > 0, $extra-push, 0);

}

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

@mixin susy-breakpoint(

$config

) {

// parse and normalize any shorthand arguments

$config: susy-compile($config);

// build min-and-max queries

$min: map-get($config, 'min-width');

$min: if($min, '(min-width: #{$min})', null);

$max: map-get($config, 'max-width');

$max: if($max, '(max-width: #{$max})', null);

// combine them if we need both

$and: if($min and $max, '#{$min} and #{$max}', null);

// or fall back to the value we need…

$query: $and or $min or $max;

// apply the results…

@media #{$query} {

@include with-layout($config) {

@content;

}

mixin/susy/_with-layout.scss

@mixin with-layout(

$config

) {

// parse and normalize any shorthand arguments

$config: susy-compile($config);

// record the global settings -

// and update the global variable with our new settings

$global: $susy;

$susy: map-merge($susy, $config) !global;

// any content inside this mixin

// will use the local settings

@content;

// return the global variable to its initial value

$susy: $global !global;

}

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

* {

box-sizing: border-box;

}

html, body {

height: 100%;

}

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

@import "./config/global";

@import "global.scss";

.container {

// 寫法可參考範例 http://oddbird.net/2017/06/13/susy-spread/

@include susy-breakpoint($mobile) {

background: svg-grid() no-repeat scroll;

height: 100%;

}

@include susy-breakpoint($pad) {

background: svg-grid() no-repeat scroll;

}

@include susy-breakpoint($desktop) {

background: svg-grid() no-repeat scroll;

}

[data-span='1'] {

@include susy-breakpoint($mobile) {

background: rgba(#DC4040, 0.85);

width: span(2);

margin: 0 gutter() / 2;

}

@include susy-breakpoint($pad) {

width: span(2);

background: rgba(#2C961F, 0.85);

margin: 0 gutter() / 2;

}

@include susy-breakpoint($desktop) {

width: span(3);

background: rgba(#4048DC, 0.85);

margin: 0 gutter() / 2;

}

[data-span] {

line-height: 2rem;

color: #ffffff;

}

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

npm run build

並添加到 HTML：dist/index.html

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

span

</div>

span

</div>

span

</div>

</body>

</html>

完成！

CSS – SUSY3 – 使用方法(2)

2018-05-02 / JSN / 4 Comments / 16 人來過

先了解 3 個方法

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

1. span()

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

See the Pen <a href="https://codepen.io/fdjkgh580/pen/ZoKyNM/">Susy3 span()</a> by JSN (<a href="https://codepen.io/fdjkgh580">@fdjkgh580</a>) on <a href="https://codepen.io">CodePen</a>.

2. gutter()

See the Pen <a href="https://codepen.io/fdjkgh580/pen/erWEgX/">Susy3 gutter()</a> by JSN (<a href="https://codepen.io/fdjkgh580">@fdjkgh580</a>) on <a href="https://codepen.io">CodePen</a>.

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

$susy: (

'min-width': 0px,

'columns': susy-repeat(4),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'narrow',

);

建議的簡單組合

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

spread: narrow
container-spread: wider

See the Pen <a href="https://codepen.io/fdjkgh580/pen/xjdLzZ/">Susy3 Setting</a> by JSN (<a href="https://codepen.io/fdjkgh580">@fdjkgh580</a>) on <a href="https://codepen.io">CodePen</a>.

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 柵欄

$susy: (

columns: susy-repeat(12, 5em),

);

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

$susy: (

columns: 20px susy-repeat(3, 100px) 20px,

);

斷點設計

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

@mixin with-layout(

$config

) {

// parse and normalize any shorthand arguments

$config: susy-compile($config);

// record the global settings -

// and update the global variable with our new settings

$global: $susy;

$susy: map-merge($susy, $config) !global;

// any content inside this mixin

// will use the local settings

@content;

// return the global variable to its initial value

$susy: $global !global;

}

@mixin susy-breakpoint(

$config

) {

// parse and normalize any shorthand arguments

$config: susy-compile($config);

// build min-and-max queries

$min: map-get($config, 'min-width');

$min: if($min, '(min-width: #{$min})', null);

$max: map-get($config, 'max-width');

$max: if($max, '(max-width: #{$max})', null);

// combine them if we need both

$and: if($min and $max, '#{$min} and #{$max}', null);

// or fall back to the value we need…

$query: $and or $min or $max;

// apply the results…

@media #{$query} {

@include with-layout($config) {

@content;

}

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

$mobile: (

'min-width': 0px,

'columns': susy-repeat(4),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'wider',

);

$pad: (

'min-width': 800px,

'columns': susy-repeat(8),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'wider',

);

$desktop: (

'min-width': 1280px,

'columns': susy-repeat(12),

'gutters': 0.25,

'spread': 'narrow',

'container-spread': 'wider',

);

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

.container {

@include susy-breakpoint($mobile) {

background: svg-grid() no-repeat scroll;

height: 100%;

}

@include susy-breakpoint($pad) {

background: svg-grid() no-repeat scroll;

}

@include susy-breakpoint($desktop) {

background: svg-grid() no-repeat scroll;

}

元素可以這麼寫

[data-span] {

@include susy-breakpoint($mobile) {

// 手機樣式

background: #ff0000ab;

line-height: 10rem;

text-align: center;

color: white;

font-size: 5rem;

}

@include susy-breakpoint($pad) {

// 平板樣式

background: #52b752;

}

@include susy-breakpoint($desktop) {

// 桌電樣式

background: #6666d0;

}

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

See the Pen <a href="https://codepen.io/fdjkgh580/pen/pVPpmm/">Susy3 Breakpoint</a> by JSN (<a href="https://codepen.io/fdjkgh580">@fdjkgh580</a>) on <a href="https://codepen.io">CodePen</a>.

Gallery

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

// https://github.com/oddbird/susy/issues/648

@mixin gallery(

$span,

$config: ()

) {

$grid: susy-compile($span, $config);

$span: map-get($grid, 'span');

$column-count: length(map-get($grid, 'columns'));

$count: floor($column-count / $span);

$spread: map-get($grid, 'spread') + 2;

$container-spread: map-get($grid, 'container-spread') + 2;

$extra: ($container-spread - $spread) * 0.5;

$extra-push: su-call('su-gutter', $grid) * $extra;

float: left;

margin-right: -100%;

@for $n from 1 through ($count) {

$nth: unquote('#{$count}n + #{$n}');

$location: $span * ($n - 1) + 1;

&:nth-child(#{$nth}) {

$width: susy-compile($span at $location, $grid);

width: su-call('su-span', $width);

@if ($location > 1) {

$wide: susy-compile('first' $location - 1 'wide', $grid);

clear: none;

margin-left: su-call('su-span', $wide) + $extra-push;

} @else {

clear: both;

margin-left: if($extra-push > 0, $extra-push, 0);

}

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

.box {

@include gallery(4 of 12);

}

See the Pen <a href="https://codepen.io/fdjkgh580/pen/WJjMrW/">Susy3 Gallery</a> by JSN (<a href="https://codepen.io/fdjkgh580">@fdjkgh580</a>) on <a href="https://codepen.io">CodePen</a>.

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

1 2 3 4 … 65

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

GET

POST

透過 Composer 安裝

分享，才能讓我知道對你有幫助：

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

建立一個 Library

注意自動讀取的類別

實際測試

分享，才能讓我知道對你有幫助：

php – Joomla! – 多國語言設定

後台元件語言位置

前台元件語言位置

添加後台語言檔案

測試一般輸出

測試系統設置輸出

添加前台語言檔案

分享，才能讓我知道對你有幫助：

CSS – SUSY3 – 部屬架構(3)

直接開發

認識架構

依序添加

分享，才能讓我知道對你有幫助：

CSS – SUSY3 – 使用方法(2)

先了解 3 個方法

1. span()

2. gutter()

3. slice()

config

建議的簡單組合

斷點設計

Gallery

分享，才能讓我知道對你有幫助：