J3.x

Difference between revisions of "Developing an MVC Component/Developing a Basic Component/zh-tw"

From Joomla! Documentation

< J3.x:Developing an MVC Component
(Created page with "一開始，您首先必需要使用檔案總管來為Hello World!元件建立資料夾。資料夾可以放在您的檔案系統的任何地方，只要是在您安裝joomla!...")
(Created page with "這是前台使用者訪問 Hello World! 元件的入口")
 
(19 intermediate revisions by the same user not shown)
Line 15: Line 15:
 
[https://www.youtube.com/watch?v=4JDsdfnlOhE Step 1, Developing a Basic Component] 開始，然後您可以參考影片中使用的簡報檔案[https://docs.google.com/presentation/d/11g6qd64zmQObe8xMuEVubdUeIp0DcZ1wr8dq7LcrXIA Slides].  
 
[https://www.youtube.com/watch?v=4JDsdfnlOhE Step 1, Developing a Basic Component] 開始，然後您可以參考影片中使用的簡報檔案[https://docs.google.com/presentation/d/11g6qd64zmQObe8xMuEVubdUeIp0DcZ1wr8dq7LcrXIA Slides].  
  
−
'''重要! 從版本{{JVer|3.8}} 起 Joomla 開發者開始修改一些 Joomla classes 的命名，以及它們儲存的路徑結構。很多教學文章和影片都還使用舊版的命名原則。要查看新class對應以及它們儲存的位置，請您的<code>libraries/classmap.php file</code>'''
+
'''重要! 從版本{{JVer|3.8}} 起 Joomla 開發者開始修改一些 Joomla classes 的命名，以及它們儲存的路徑結構。很多教學文章和影片都還使用舊版的命名原則。要查看新class對應以及它們儲存的位置，請查看您的<code>libraries/classmap.php file</code>'''
  
 
{{#widget:YouTube|id=4JDsdfnlOhE}}
 
{{#widget:YouTube|id=4JDsdfnlOhE}}
Line 22: Line 22:
 
在這個文章中我們會講到如何建立並安裝基本的 Joomla! 元件。範例中我們會建立 Hello World! 元件。
 
在這個文章中我們會講到如何建立並安裝基本的 Joomla! 元件。範例中我們會建立 Hello World! 元件。
  
−
一開始，您首先必需要使用檔案總管來為Hello World!元件建立資料夾。資料夾可以放在您的檔案系統的任何地方，只要是在您安裝joomla!的資料夾以外的地方就好了。以範例來說我們會命名資料夾為 <tt>com_helloworld</tt>，但其實這個資料夾可以任意命名。
+
一開始，您首先必需要使用檔案總管來為 Hello World! 元件建立資料夾。資料夾可以放在您的檔案系統的任何地方，只要是在您安裝 Joomla! 的資料夾以外的地方就好了。以範例來說我們會命名資料夾為 <tt>com_helloworld</tt>，但其實這個資料夾可以任意命名。
  
−
Next, inside this directory we need to create some files. Using your preferred file manager, create the following files; as you create the files, add the source code for each file which is found in ''[[#File Details| File Details]]''.
+
接下來，在資料夾中我們需要建立一些檔案。使用您喜歡的檔案總管程式，建立以下的檔案。在建立檔案的同時，也新增以下''[[#.E6.AA.94.E6.A1.88.E7.B4.B0.E7.AF.80| 檔案細節]]''的原始碼到檔案中。
  
 
<!--T:28-->
 
<!--T:28-->
Line 30: Line 30:
 
  | 1
 
  | 1
 
  | ''[[#helloworld.xml|helloworld.xml]]''
 
  | ''[[#helloworld.xml|helloworld.xml]]''
−
  | this is an XML (manifest) file that tells Joomla! how to install our component.
+
  | 這是一個會告訴 Joomla! 應該如何安裝元件的 XML (manifest) 檔案。
 
  |-
 
  |-
 
  | 2
 
  | 2
 
  | ''[[#site/helloworld.php|site/helloworld.php]]''
 
  | ''[[#site/helloworld.php|site/helloworld.php]]''
−
  | this is the site entry point to the Hello World! component
+
  | 這是前台使用者訪問 Hello World! 元件的入口
 
  |-
 
  |-
 
  | 3
 
  | 3
Line 46: Line 46:
 
  | 5
 
  | 5
 
  | ''[[#admin/helloworld.php|admin/helloworld.php]]''
 
  | ''[[#admin/helloworld.php|admin/helloworld.php]]''
−
  | this is the administrator entry point to the Hello World! component
+
  | 這是系統管理員進入Hello World! 元件的入口
 
  |-
 
  |-
 
  | 6
 
  | 6
Line 62: Line 62:
 
  | 9
 
  | 9
 
  | ''[[#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
 
  | ''[[#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
−
  | file allowing to initialise schema version of the com_helloworld component.
+
  | 允許啟用 the com_helloworld 元件 schema version 的檔案。
 
  |}
 
  |}
  
 
=== 安裝 Hello World! 元件 ===
 
=== 安裝 Hello World! 元件 ===
−
Using your preferred file manager, create a .zip file of this directory. For this example we will name the file <tt>com_helloworld.zip</tt>, again this file could have been named anything.
+
使用您喜歡的檔案總管，從這個資料夾建立 .zip 檔案。在示範當中我們會命名檔案為 <tt>com_helloworld.zip</tt>，檔案其實可以自由被命名。
  
−
Now we need to install the Hello World! component. There are two ways to do this, both are covered in [[S:MyLanguage/Installing an extension|Installing an Extension]]. Here we will cover the method using the Extension Manager of Joomla!.
+
現在我們需要來安裝 Hello World! 元件。有兩種方式可以安裝，都寫在[[S:MyLanguage/Installing an extension|安裝擴充套件]]裡頭了。這裡我們會使用 Joomla! 擴充套件管理的方法。
  
−
*Using your preferred web browser, navigate to the Administrator panel of your Joomla! site. The address would be <tt><yoursite>/joomla/administrator/index.php</tt>. For this example we will navigate to <tt>localhost/joomla/administrator/index.php</tt>.
+
*使用您慣用的瀏覽器，訪問 Joomla! 網站管理者介面，網址應該像是  <tt><yoursite>/joomla/administrator/index.php</tt>。本機的話我們就會訪問<tt>localhost/joomla/administrator/index.php</tt>.
−
*Click Extensions {{rarr}} Manage {{rarr}} Install {{rarr}} Upload Package File {{rarr}} Choose File
+
*點擊擴充套件 {{rarr}} 管理 {{rarr}} 安裝 {{rarr}} 上傳擴充套件檔案 {{rarr}} 選擇檔案
−
*Navigate and Select File
+
*瀏覽並選擇檔案
−
*Click Upload & Install
+
*點擊上傳並安裝
  
 
注意 -  您應該會看到一個訊息提示您安裝已經完成或是失敗  
 
注意 -  您應該會看到一個訊息提示您安裝已經完成或是失敗  
  
−
You can test this basic function of the component by entering the Hello World! page for the site and administrator portions of your Joomla! website.
+
訪問 Hello World! 前台後台的頁面，來測試這個元件的基本功能。
−
* Using your preferred web browser, navigate to the Hello World! component page located on the site portion of your website. The address would be <tt><yoursite>/joomla/index.php?option=com_helloworld</tt>. For this example we will navigate to <tt>localhost/joomla/index.php?option=com_helloworld</tt>.
+
* 使用您喜歡的網頁瀏覽器，瀏覽您網站上的 Hello World! 元件前台頁面。網址應該會是 <tt><yoursite>/joomla/index.php?option=com_helloworld</tt>。這個範例中，我們瀏覽<tt>localhost/joomla/index.php?option=com_helloworld</tt>.
−
* Using your preferred web browser, navigate to the Hello World! component page located on the administrator portion of your website. The address would be <tt><yoursite>/joomla/administrator/index.php?option=com_helloworld</tt>. For this example we will navigate to <tt>localhost/joomla/administrator/index.php?option=com_helloworld</tt>.
+
* 使用您喜歡的網頁瀏覽器，瀏覽您網站上的 Hello World! 元件後台頁面。網址應該像是 <tt><yoursite>/joomla/administrator/index.php?option=com_helloworld</tt>。這個範例中，我們瀏覽 <tt>localhost/joomla/administrator/index.php?option=com_helloworld</tt>.
  
−
You can also notice that the ''Hello World!'' component is visible in the administrator site of your Joomla installation under the ''Components'' menu.
+
您也可以在 Joomla! 後台管理介面的「元件」選單看到 ''Hello World!'' 元件。
  
 
==檔案細節==
 
==檔案細節==
 
{{vanchor|admin/sql/updates/mysql/0.0.1.sql}}
 
{{vanchor|admin/sql/updates/mysql/0.0.1.sql}}
−
is an empty file allowing to initialise schema version of the com_helloworld component.
+
是一個空白的檔案，允許初始化 com_helloworld 元件的 schema 版本。
  
 
<source lang="sql">
 
<source lang="sql">
Line 165: Line 165:
  
 
==元件內容==
 
==元件內容==
−
At this point in the tutorial, your component should contain the following files:
+
一路走到教學的這個步驟，您的元件應該包含以下檔案：
 
{| border=1
 
{| border=1
 
  | 1
 
  | 1
 
  | ''[[#helloworld.xml|helloworld.xml]]''
 
  | ''[[#helloworld.xml|helloworld.xml]]''
−
  | this is an XML (manifest) file that tells Joomla! how to install our component.
+
  | 這是一個會告訴 Joomla! 應該如何安裝元件的 XML (manifest) 檔案。
 
  |-
 
  |-
 
  | 2
 
  | 2
 
  | ''[[#site/helloworld.php|site/helloworld.php]]''
 
  | ''[[#site/helloworld.php|site/helloworld.php]]''
−
  | this is the site entry point to the Hello World! component
+
  | 這是前台使用者訪問 Hello World! 元件的入口
 
  |-
 
  |-
 
  | 3
 
  | 3
Line 185: Line 185:
 
  | 5
 
  | 5
 
  | ''[[#admin/helloworld.php|admin/helloworld.php]]''
 
  | ''[[#admin/helloworld.php|admin/helloworld.php]]''
−
  | this is the administrator entry point to the Hello World! component
+
  | 這是系統管理員進入Hello World! 元件的入口
 
  |-
 
  |-
 
  | 6
 
  | 6
Line 201: Line 201:
 
  | 9
 
  | 9
 
  | ''[[#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
 
  | ''[[#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
−
  | file allowing to initialise schema version of the com_helloworld component.
+
  | 允許啟用 the com_helloworld 元件 schema version 的檔案。
 
  |}
 
  |}
  
Line 212: Line 212:
 
__NOTOC__
 
__NOTOC__
 
<noinclude>
 
<noinclude>
−
[[Category:Joomla! 3.x]]
+
[[Category:Joomla! 3.x{{#translation:}}]]
−
[[Category:Joomla! 3.0]]
+
[[Category:Joomla! 3.0{{#translation:}}]]
−
[[Category:Joomla! 3.1]]
+
[[Category:Joomla! 3.1{{#translation:}}]]
−
[[Category:Joomla! 3.2]]
+
[[Category:Joomla! 3.2{{#translation:}}]]
−
[[Category:Joomla! 3.3]]
+
[[Category:Joomla! 3.3{{#translation:}}]]
−
[[Category:Joomla! 3.4]]
+
[[Category:Joomla! 3.4{{#translation:}}]]
−
[[Category:Beginner Development]]
+
[[Category:Beginner Development{{#translation:}}]]
−
[[Category:Component Development]]
+
[[Category:Component Development{{#translation:}}]]
−
[[Category:Tutorials]]
+
[[Category:Tutorials{{#translation:}}]]
−
[[Category:Tutorials in a Series]]
+
[[Category:Tutorials in a Series{{#translation:}}]]
 
</noinclude>
 
</noinclude>

Latest revision as of 02:35, 5 February 2021

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

本系列文章

  1. 介紹
  2. 開發一個基本的元件
  3. 新增前台的 view
  4. 新增一個選單類型到前台
  5. 新增一個 model 到前台
  6. 在選單類型中新增一個變數請求
  7. 使用資料庫
  8. 基本的後台
  9. 新增語言管理
  10. 新增後台行為
  11. 新增後台的佈置
  12. 新增表單驗證
  13. 新增類別
  14. 新增設定介面
  15. 新增 ACL
  16. 新增一個安裝/移除/更新程式碼檔案
  17. 新增一個前台表單
  18. 新增一個圖片
  19. 新增一個 map
  20. 新增 AJAX
  21. 新增一個別名
  22. 使用語言過濾功能
  23. 新增一個 model
  24. 新增關聯
  25. 新增回存
  26. 新增排序
  27. 新增階層
  28. 新增版本控制
  29. 新增標籤
  30. 新增存取權限
  31. 新增批次作業
  32. 新增快取
  33. 新增 Feed
  34. 新增更新伺服器
  35. 新增客製化欄位


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