J3.x

開發 MVC 元件/新增前台的 view

From Joomla! Documentation

< J3.x:Developing an MVC Component
This page is a translated version of the page J3.x:Developing an MVC Component/Adding a view to the site part and the translation is 100% complete.

Other languages:
العربية • ‎Deutsch • ‎English • ‎español • ‎français • ‎Nederlands • ‎português do Brasil • ‎русский • ‎中文(台灣)‎
Joomla! 
3.x
教學
開發一個 Model-View-Controller 元件


這是一系列的多篇文章,旨在介紹如何開發一個 Joomla! VersionJoomla 3.x Model-View-Controller 元件

讓我們從簡介開始,您可以使用底下的導覽按鈕來瀏覽文章,或是右側的方塊中的連結(列出所有的文章)。



注意

  • 您可以跟隨以下的步驟,來新增 Hello World! 元件的 view,或是您可以從 封存檔案 直接下載。
  • 當您跟著這個教學的步驟進行,您可能會發生一些問題。這時候您會發現參考如何對您的程式碼除錯 Joomla 頁面會有幫助。

在 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 的檔案。
Info non-talk.png
General Information

請建立一個PR(pull request ),或是到此 https://github.com/joomla/Joomla-3.2-Hello-World-Component 建立一個issue,如果本頁有什麼程式碼方面的差異或是編輯的需要。