J3.x

開發一個 MVC 元件/開發一個基本的元件

From Joomla! Documentation

< J3.x:Developing an MVC Component
This page is a translated version of the page J3.x:Developing an MVC Component/Developing a Basic Component 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 元件

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



注意

如果您在閱讀本文之前有使用過 Joomla!,您會留意到擴充套件的安裝是使用壓縮的檔案,其中包含了所有安裝及解安裝需要的東西。

您可以跟著以下的步驟來建立一個 Hello World! 元件,或是您也可以從git repository archive直接下載檔案

這裡有一個和這個教學文件有關的簡報檔案,解釋如何建立從基礎到進階的Joomla! 元件。
Joomla! Basic Component Help
Joomla! Advance Component Help

也有好些和這個教學文章相關的影片。
Step 1, Developing a Basic Component 開始,然後您可以參考影片中使用的簡報檔案Slides.

重要! 從版本Joomla 3.8 起 Joomla 開發者開始修改一些 Joomla classes 的命名,以及它們儲存的路徑結構。很多教學文章和影片都還使用舊版的命名原則。要查看新class對應以及它們儲存的位置,請查看您的libraries/classmap.php file

如何新增元件到 Joomla!

在這個文章中我們會講到如何建立並安裝基本的 Joomla! 元件。範例中我們會建立 Hello World! 元件。

一開始,您首先必需要使用檔案總管來為 Hello World! 元件建立資料夾。資料夾可以放在您的檔案系統的任何地方,只要是在您安裝 Joomla! 的資料夾以外的地方就好了。以範例來說我們會命名資料夾為 com_helloworld,但其實這個資料夾可以任意命名。

接下來,在資料夾中我們需要建立一些檔案。使用您喜歡的檔案總管程式,建立以下的檔案。在建立檔案的同時,也新增以下 檔案細節的原始碼到檔案中。

1 helloworld.xml 這是一個會告訴 Joomla! 應該如何安裝元件的 XML (manifest) 檔案。
2 site/helloworld.php 這是前台使用者訪問 Hello World! 元件的入口
3 site/index.html 避免網站伺服器列出路徑檔案內容
4 admin/index.html 避免網站伺服器列出路徑檔案內容
5 admin/helloworld.php 這是系統管理員進入Hello World! 元件的入口
6 admin/sql/index.html 避免網站伺服器列出路徑檔案內容
7 admin/sql/updates/index.html 避免網站伺服器列出路徑檔案內容
8 admin/sql/updates/mysql/index.html 避免網站伺服器列出路徑檔案內容
9 admin/sql/updates/mysql/0.0.1.sql 允許啟用 the com_helloworld 元件 schema version 的檔案。

安裝 Hello World! 元件

使用您喜歡的檔案總管,從這個資料夾建立 .zip 檔案。在示範當中我們會命名檔案為 com_helloworld.zip,檔案其實可以自由被命名。

現在我們需要來安裝 Hello World! 元件。有兩種方式可以安裝,都寫在安裝擴充套件裡頭了。這裡我們會使用 Joomla! 擴充套件管理的方法。

  • 使用您慣用的瀏覽器,訪問 Joomla! 網站管理者介面,網址應該像是 <yoursite>/joomla/administrator/index.php。本機的話我們就會訪問localhost/joomla/administrator/index.php.
  • 點擊擴充套件    管理    安裝    上傳擴充套件檔案    選擇檔案
  • 瀏覽並選擇檔案
  • 點擊上傳並安裝

注意 - 您應該會看到一個訊息提示您安裝已經完成或是失敗

訪問 Hello World! 前台後台的頁面,來測試這個元件的基本功能。

  • 使用您喜歡的網頁瀏覽器,瀏覽您網站上的 Hello World! 元件前台頁面。網址應該會是 <yoursite>/joomla/index.php?option=com_helloworld。這個範例中,我們瀏覽localhost/joomla/index.php?option=com_helloworld.
  • 使用您喜歡的網頁瀏覽器,瀏覽您網站上的 Hello World! 元件後台頁面。網址應該像是 <yoursite>/joomla/administrator/index.php?option=com_helloworld。這個範例中,我們瀏覽 localhost/joomla/administrator/index.php?option=com_helloworld.

您也可以在 Joomla! 後台管理介面的「元件」選單看到 Hello World! 元件。

檔案細節

admin/sql/updates/mysql/0.0.1.sql 是一個空白的檔案,允許初始化 com_helloworld 元件的 schema 版本。

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.1</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>
	</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>

site/helloworld.php

Hello World

admin/helloworld.php

Hello World administration

index.html

每個資料夾都相同

<html><body bgcolor="#FFFFFF"></body></html>


元件內容

一路走到教學的這個步驟,您的元件應該包含以下檔案:

1 helloworld.xml 這是一個會告訴 Joomla! 應該如何安裝元件的 XML (manifest) 檔案。
2 site/helloworld.php 這是前台使用者訪問 Hello World! 元件的入口
3 site/index.html 避免網站伺服器列出路徑檔案內容
4 admin/index.html 避免網站伺服器列出路徑檔案內容
5 admin/helloworld.php 這是系統管理員進入Hello World! 元件的入口
6 admin/sql/index.html 避免網站伺服器列出路徑檔案內容
7 admin/sql/updates/index.html 避免網站伺服器列出路徑檔案內容
8 admin/sql/updates/mysql/index.html 避免網站伺服器列出路徑檔案內容
9 admin/sql/updates/mysql/0.0.1.sql 允許啟用 the com_helloworld 元件 schema version 的檔案。
Info non-talk.png
General Information

本教學步驟最新的 git repository 位於 https://github.com/Stevec4/Joomla-HelloWorld 。如果本頁有什麼程式碼方面的差異或是編輯的需要,請建立一個PR(pull request )。