Hamm Studio.: 實作 Joomla Component

影片觀賞建議使用 (HD) 並全螢幕, 部份內容將提到程式碼撰寫 (片中並無背景音樂)

這個影片是 Hamm 所拍攝, 主要是瞭解如何撰寫 Joomla Component,

與瞭解程式碼的進入點, 我們並還沒有開始討論 Joomla MVC or Joomla 架構,

這個範例只是簡易的輸出妳想要顯示的內容, 分別再前端與後台,

希望有助妳瞭解 Joomla, 而且可以快速的開發 (前提是我們要努力去瞭解它!)

專案的名稱 : com_myfirstcomponent

專案的目錄結構

/admin
/admin/index.html
/admin/myfirstcomponent.php
/front
/front/index.html
/front/myfirstcomponent.php
/install.xml

index.html

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

說明 : 這是預設的範本, 提供給 Joomla 使用,
再 Joomla 中, 絕大多數 index.html 內容都是長這樣

front/myfirstcomponent.php

<?php
/**
 * @package Hamm.Studio
 * @subpackage Components
 * @components/com_myfirstcomponent/myfirstcomponent.php
 * @link http://hamm-studio.blogspot.com/
 * @license GNU/GPL
 * 
 * */

// No direct access
defined('_JEXEC') or die('Restricted access');

admin/myfirstcomponent.php

<?php
/**
 * @package Hamm.Studio
 * @subpackage Components
 * @administrator/components/com_myfirstcomponent/myfirstcomponent.php
 * @link http://hamm-studio.blogspot.com/
 * @license GNU/GPL
 * 
 * */

// No direct access
defined('_JEXEC') or die('Restricted access');

install.xml

<?xml version="1.0" encoding="UTF-8"?>
<install type="component" version="1.5.0">
    <name>MyFirstComponent</name>
    <creationDate>2010-04-26</creationDate>
    <author>Hamm Huang</author>
    <authorEmail>mm.happy.studio@gmail.com</authorEmail>
    <authorUrl>http://www.hamm-studio.blogger.com</authorUrl>
    <copyright>GNU/GPL</copyright>
    <license>License Info</license>
    <version>0.0.1</version>
    <description>My first Joomla Component</description>
    
    <files folder="front">
        <filename>myfirstcomponent.php</filename>
        <filename>index.html</filename>
    </files>
    
    <administration>
        <menu>My First Component</menu>
        <files folder="admin">
            <filename>myfirstcomponent.php</filename>
            <filename>index.html</filename>
        </files>
    </administration>
    
 </install>

說明 : myfirstcomponent.php, 我們可以看到 myfirstcomponent.php 分別存在於 front 與 admin 兩個目錄下,
其主要目的是區分前端與後台的目錄, 我們假定 front 目錄是存放前端的程式碼, admin 目錄是放置後端的程式碼,
目前只有看到一堆註解和一行程式碼 (Joomla 採用 Phing 建立來文件),
// No direct access
defined('_JEXEC') or die('Restricted access');
很容易懂, 就是當 Joomla 無法處理就會跳出 Restricted access 的字眼, 很像 mysql die command,
最後是 install.xml, 這部份是再描述整個 Component 的內容,

<install type="component" version="1.5.0">

再描述這是一個元件, 若你寫的是 Model, 哪 type="component" 就需要改為 type="model",

<files folder="front">
        <filename>myfirstcomponent.php</filename>
        <filename>index.html</filename>
    </files>

前端檔案的定義

<administration>
        <menu>My First Component</menu>
        <files folder="admin">
            <filename>myfirstcomponent.php</filename>
            <filename>index.html</filename>
        </files>
    </administration>

這部份比較有趣, menu tag 就是定義後台 Components 選單下的子選單, 並給予選單一個名稱, My First Component, 點選後就會去執行 admin/myfirstcomponent.php

接下來安裝這個專案到 Joomla, 可以用目錄安裝或是將專案壓縮 zip, 再由 Joomla 進行安裝, 即可.

安裝成功後, 妳會看到後台的 Components 選單下, 多了一個 My First Component,
單選它後, 並不會任何資訊, 連 Hello, World 也沒有 > <",

問 : 我該如何看到前端的程式輸出內容與我要如何去執行它 !?

答 : 在前端輸入 (我假定你的目錄是 joomla)
http://localhost/joomla/index.php?option=com_myfirstcomponent
就可以正確的顯示出 front/myfirstcomponent.php 的內容,

現在我們來實現 Hello, World, 當然妳也可以不要 Hello, World ...
現在打開 Joomla 的主目錄,

joomla/components/com_myfirstcomponent/myfirstcomponent.php
輸入 echo "Hello, front";

joomla/administrator/components/com_myfirstcomponent/myfirstcomponent.php
輸入 echo "Hello, admin";

前端執行 index.php?option=com_myfirstcomponent

後台 index.php?option=com_myfirstcomponent

若都可以正確的顯示出來, 哪就代表我們成功了,

這只是個簡易的輸出,

希望對你有幫助.

本著作係採用創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣授權條款授權.

Hamm Studio.

2010-04-26

實作 Joomla Component

沒有留言:

張貼留言