J3.x

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

From Joomla! Documentation

< J3.x:Developing an MVC Component
Revision as of 03:35, 5 February 2021 by Shawnhy (talk | contribs) (Created page with "這是前台使用者訪問 Hello World! 元件的入口")
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎italiano • ‎português do Brasil • ‎русский • ‎العربية • ‎中文（中国大陆）‎ • ‎中文（台灣）‎
Joomla! 
3.x
教學
開發一個 Model-View-Controller 元件

本系列文章

  1. 介紹
  2. 開發一個基本的元件

新增前台的 view

新增一個選單類型到前台

新增一個 model 到前台

在選單類型中新增一個變數請求

使用資料庫

基本的後台

新增語言管理

新增後台行為

新增後台的佈置

新增表單驗證

新增類別

新增設定介面

  1. 新增 ACL

新增一個安裝/移除/更新程式碼檔案

新增一個前台表單

  1. 新增一個圖片
  2. 新增一個 map
  3. 新增 AJAX
  4. 新增一個別名

使用語言過濾功能

  1. 新增一個 model
  2. 新增關聯
  3. 新增回存
  4. 新增排序
  5. 新增階層
  6. 新增版本控制
  7. 新增標籤
  8. 新增存取權限
  9. 新增批次作業
  10. 新增快取
  11. 新增 Feed

新增更新伺服器

  1. 新增客製化欄位
  2. Upgrading to Joomla4



這是一系列的多篇文章，旨在介紹如何開發一個 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 )。

上一篇：介紹
下一篇：新增前台的 view
Retrieved from "https://docs.joomla.org/index.php?title=J3.x:Developing_an_MVC_Component/Developing_a_Basic_Component/zh-tw&oldid=782113"