開發 MVC 元件/新增前台的 view
From Joomla! Documentation
< J3.x:Developing an MVC Component
在選單類型中新增一個變數請求
使用資料庫
基本的後台
新增語言管理
新增後台行為
新增後台的佈置
新增表單驗證
新增類別
新增設定介面
新增一個安裝/移除/更新程式碼檔案
新增一個前台表單
使用語言過濾功能
新增更新伺服器
這是一系列的多篇文章,旨在介紹如何開發一個 Joomla! Version Model-View-Controller 元件
讓我們從簡介開始,您可以使用底下的導覽按鈕來瀏覽文章,或是右側的方塊中的連結(列出所有的文章)。
注意
- 本教學是 開發Joomla! 3.x MVC 元件 系列文章的一部分,閱讀本文之前,您應該先看過前面幾篇文章。
- 您可以跟隨以下的步驟,來新增 Hello World! 元件的 view,或是您可以從 封存檔案 直接下載。
- 當您跟著這個教學的步驟進行,您可能會發生一些問題。這時候您會發現參考如何對您的程式碼除錯 Joomla 頁面會有幫助。
- 您可以觀賞和此步驟相關的影片教學 Step 2, 新增view
在 Hello World! 元件中加入 View
在這個文章中,我們會講到如何為基本的 Joomla!元件新增 view,我們使用的範例是...我們會繼續開發 Hello World! 元件。
有很多方式可以更新 Joomla! 元件。在這個教學文件中,我們會針對選項 2。
1 | 手動新增檔案到 <path_to_joomla>/ |
2 | 使用 Joomla! 擴充套件管理、原始路徑、未安裝的元件來執行更新 |
3 | 使用 Joomla! 擴充套件管理以及 上傳伺服器來更新 |
要新增 view 您會需要訪問 com_helloworld,即我們建立元件的原始路徑。使用您喜歡的檔案總管,建立或是上傳以下的檔案。當您建立或是上傳檔案,新增的原始碼內容在 檔案細節。
1 | 更新: helloworld.php | <path_to_com_helloworld>/site/helloworld.php |
2 | 建立: controller.php | <path_to_com_helloworld>/site/controller.php |
3 | 建立: index.html | <path_to_com_helloworld>/site/views/index.html |
4 | 建立: index.html | <path_to_com_helloworld>/site/views/helloworld/index.html |
5 | 建立: view.html.php | <path_to_com_helloworld>/site/views/helloworld/view.html.php |
6 | 建立: default.php | <path_to_com_helloworld>/site/views/helloworld/tmpl/default.php |
7 | 建立: index.html | <path_to_com_helloworld>/site/views/helloworld/tmpl/index.html |
8 | 更新: helloworld.xml | <path_to_com_helloworld/helloworld.xml |
更新 Hello World! 元件
要在 Joomla! 中更新 Hello World! 元件,請參考安裝 Hello World! 元件教學步驟。
檔案細節
site/helloworld.php (Note that some browsers may not copy and paste highlighted text correctly into a text editor. If you find this, then please try a different browser).
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Get an instance of the controller prefixed by HelloWorld
$controller = JControllerLegacy::getInstance('HelloWorld');
// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));
// Redirect if set by the controller
$controller->redirect();
site/controller.php
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
/**
* Hello World Component Controller
*
* @since 0.0.1
*/
class HelloWorldController extends JControllerLegacy
{
}
site/views/helloworld/view.html.php
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
/**
* HTML View class for the HelloWorld Component
*
* @since 0.0.1
*/
class HelloWorldViewHelloWorld extends JViewLegacy
{
/**
* Display the Hello World view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
*
* @return void
*/
function display($tpl = null)
{
// Assign data to the view
$this->msg = 'Hello World';
// Display the view
parent::display($tpl);
}
}
site/views/helloworld/tmpl/default.php
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->msg; ?></h1>
index.html 注意 - 相同的程式碼會套用到所有資料夾
<html><body bgcolor="#FFFFFF"></body></html>
helloworld.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">
<name>Hello World!</name>
<!-- The following elements are optional and free of formatting constraints -->
<creationDate>January 2018</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<!-- The version string is recorded in the components table -->
<version>0.0.2</version>
<!-- The description is optional and defaults to the name -->
<description>Description of the Hello World component ...</description>
<update> <!-- Runs on update; New since J2.5 -->
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>
<!-- Site Main File Copy Section -->
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from /site/ in the package -->
<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
</files>
<administration>
<!-- Administration Menu Section -->
<menu link='index.php?option=com_helloworld'>Hello World!</menu>
<!-- Administration Main File Copy Section -->
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from /admin/ in the package -->
<files folder="admin">
<!-- Admin Main File Copy Section -->
<filename>index.html</filename>
<filename>helloworld.php</filename>
<!-- SQL files section -->
<folder>sql</folder>
</files>
</administration>
</extension>
程式碼解說
為了滿足好奇的您,這裡說明他們是如何運作的。
helloworld.php
defined('_JEXEC') or die('Restricted access');
這可以確保訪問 Joomla 的安全性。 JEXEC 當中有更詳細的說明。
$controller = JControllerLegacy::getInstance('HelloWorld');
JControllerLegacy是一個提供給 Joomla! controller 的 base class。為了要讓我們網站可以使用 controller,我們必須要在元件中擴展這個 class。JControllerLegacy class 的getInstance 靜態 method 會建立一個 controller。在以上的程式碼中,這會實例化一個名為HelloWorldController class 的 controller 物件。Joomla 會在<path_to_joomla>/htdocs/components/com_helloworld/controller.php檔案中尋找該 class 的宣告
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));
在 controller 建立之後,我們要引導 controller 來執行任務,預設是在 URL: <yoursite>/joomla/index.php?option=com_helloworld&task=<task_name>。假如沒有設定任務,會使用預設的任務 'display' 。當使用 display ,'view' 變數會決定顯示哪些項目。其他常見的任務還有儲存、編輯、新增等等。
$controller->redirect();
Controller 有可能會需要跳轉頁面,通常是在執行了像是「儲存」任務之後。This last statement 執行了跳轉頁面的實際作業。
主要的進入點,helloworld.php,essentially passes control to the controller, which handles performing the task that was specified in the request. 我們元件的 specific controller 並不會做超過上層 class 已經執行的任何事,這是為什麼 controller class 內容是空著的原因。
controller.php
class HelloWorldController extends JControllerLegacy
{
}
Request variables中沒有指定任務時,預設的工作就會被執行。預設是「顯示」任務 。JControllerLegacy class 有這樣的任務。在我們的範例終,它會顯示一個名為HelloWorld 的 view。
view.html.php
class HelloWorldViewHelloWorld extends JViewLegacy
{
function display($tpl = null)
{
// Assign data to the view
$this->msg = 'Hello World';
// Display the view
parent::display($tpl);
}
}
The view sets up the text to be output and then calls the base display class。 JViewLegacy 是 Joomla! View的基礎class。在我們的範例中,這個 method 會使用 tmpl/default.php 檔案來顯示資料。
警告: 假如您的 view 需要載入或是嵌入獨立的 JavaScript 程式,請不要放在 view。因為當啟用快取時,程式碼可能不會被包含在裡頭。正確作法是在controller中加入 JavaScript 程式。請參考 the related issue on the issue tracker.
default.php
<h1><?php echo $this->msg; ?></h1>
佈景主題檔案會被 JViewLegacy class 包含,因此在這裡,$this refers HelloWorldViewHelloWorld class.
helloworld.xml
<version>0.0.2</version>
更新版本號
<filename>controller.php</filename>
<folder>views</folder>
告訴安裝程序要如何新增 controller.php 以及 views/directory
元件內容
一路走到教學的這個步驟,您的元件應該包含以下檔案:
1 | helloworld.xml | 這是一個會告訴 Joomla! 應該如何安裝元件的 XML (manifest) 檔案。 |
2 | site/helloworld.php | 這是前台使用者訪問 Hello World! 元件的入口 |
3 | site/index.html | 避免網站伺服器列出路徑檔案內容 |
4 | site/controller.php | 呈現 controller 的檔案 |
5 | site/views/index.html | 避免網站伺服器列出路徑檔案內容 |
6 | site/views/helloworld/index.html | 避免網站伺服器列出路徑檔案內容 |
7 | site/views/helloworld/view.html.php | 呈現 view 的檔案 |
8 | site/views/helloworld/tmpl/index.html | 避免網站伺服器列出路徑檔案內容 |
9 | site/views/helloworld/tmpl/default.php | 預設的 view |
10 | admin/index.html | 避免網站伺服器列出路徑檔案內容 |
11 | admin/helloworld.php | 這是系統管理員進入Hello World! 元件的入口 |
12 | admin/sql/index.html | 避免網站伺服器列出路徑檔案內容 |
13 | admin/sql/updates/index.html | 避免網站伺服器列出路徑檔案內容 |
14 | admin/sql/updates/mysql/index.html | 避免網站伺服器列出路徑檔案內容 |
15 | admin/sql/updates/mysql/0.0.1.sql | 允許啟用 the com_helloworld 元件 schema version 的檔案。 |
請建立一個PR(pull request ),或是到此 https://github.com/joomla/Joomla-3.2-Hello-World-Component 建立一個issue,如果本頁有什麼程式碼方面的差異或是編輯的需要。