2012 悠識數位上課講義 若您有任何 Joomla 應用需求，歡迎至夏木樂洽詢： http://simular.co/

1. 簡易電子商務網站
Joomla!實務工作坊
講師：Asika
開課單位：悠識數位

2. 認識Joomla!
來自非洲斯瓦希裡語
意思是：「all together」或「as a whole」

3. Joomla! 的發展
Mambo (2001)
Joomla! 1.0 (2005)
Joomla!1.5 (2007)
Joomla!1.6/1.7 (2011)
Joomla! 2.5 (2012)

4. What is CMS?
• Content Management System
(內容管理系統)
• 與Blog的比較：
o 巨量內容的管理
o 多人共用的環境
o 高度功能擴充性
o 長期維護的穩定

5. Joomla!的系統需求
• Apache, PHP, MySQL 最常見的網路伺服器環境。
o Apache 2.0 以上
o PHP 5.2.4 以上
o MySQL 5.0 以上
o Linux, Windows 皆可。
• 1.6 以後，支援 Windows IIS 伺服器。
• 2.5 以後，支援 MSSQL 資料庫。
• 日後將繼續支援 Oracle, PostgreSQL

6. 安裝 Joomla!

7. Joomla! 安裝流程
1. 下載 Joomla! 安裝包 （zip壓縮檔）
2. 解壓縮到安裝資料夾
3. 輸入網址，進入安裝介面
4. 輸入資料庫帳號密碼
5. 跳過FTP設定
6. 輸入網站基本資料
7. 移除Installation資料夾，完成安裝

8. 下載 Joomla!
• 由Joomla!台灣網站
下載
• www.joomla.org.tw

9. 解壓縮
• 將檔案全部解壓
縮到資料夾內

10. 解壓縮後的結構

11. 輸入網址進入安裝介面

12. 確認上方方塊皆為綠色

13. 輸入資料庫訊息
• 主機名稱
o 一般是 localhost
• 帳號密碼
o MySQL帳號密碼
• 資料庫
o 要安裝的資料庫名稱
o 在自己電腦安裝時，如果沒有先
創造資料庫，Joomla! 會幫你創
造一個
• 前綴字
o 當一個資料庫裝了兩個Joomla!
時，可用前綴字區分。

14. FTP設定可跳過

15. 輸入網站基本資料
• 網站名稱
o 你想要的網站名稱
• Email
o 管理員帳號的 Email，有訊息會通
知
• 帳號密碼
o 建立一個管理員帳號
• 範例資料
o 裝一些範例資料，可以了解內容是
怎麼設定的。範例資料中也有操作
教學

16. 完成安裝

17. 重安裝
• 如果不移除 installation 資料夾，只是改名的話。日
後可以用來重新安裝Joomla!
• 重安裝方法：
1. 將 installation 資料夾改名回到原本名稱
2. 將網站目錄下的 configuration.php 移除
3. 輸入網址即可重新安裝
4. 注意：重安裝後所有資料也會被移除

18. Joomla! 的前後台
Frontend and Backend

19. 前台

20. 後台
• http://your-site.com/administrator

21. Joomla! 的內容管理

22. Joomla! 內容類型
• Content – 文章
• Category – 分類
• Menu – 選單
• Modules – 模組（區塊）

23. 分類與文章結構
網站
分類 分類 分類
分類 分類 文章 文章
文章 文章 文章 文章
文章 文章 文章
文章

24. 選單結構
內容層級 選單結構
分類一 分類一
文章A 文章A
文章B 文章B
分類二 分類二
文章C 文章C
文章D 文章D

25. 選單結構
內容層級 選單結構
分類一 文章A
文章A 文章D
文章B 分類一
分類二 文章B
文章C 分類二
文章D 文章C

26. 所以使用者會看到...
分類一 文章A
文章A 文章D
文章B 分類一
分類二 文章B
模組
文章C 分類二
文章D 文章C
Modules
show menu data
後台 前台

27. 內容管理 Part II

28. 分類管理

29. 新增/編輯分類
•

30. 文章管理
•

31. 新增/編輯
文章
• 標題
o 文章名稱
• 別名
o 用來當做網址
• 分類
o 選擇文章要放在哪個分類
• 狀態
o 是否發佈這篇文章
• 精選
o 要不要出現在首頁精選文章區
• 文章建立資訊
o 可以選擇作者與建立時間

32. 選單管理

33. 選單結構
Site
Menu Type Menu Type Menu Type
Menu item Menu item Menu item
Menu item Menu item Menu item
Menu item Menu item Menu item
Menu item Menu item

34. 選單結構
網站
選單群組 選單群組 選單群組
選單項目 選單項目 選單項目
選單項目 選單項目 選單項目
選單項目 選單項目 選單項目
選單項目 選單項目

35. Joomla!的模組

36. 什麼是模組
Banner 模組
•
計數器
模組
menu 模組
主要頁面內容區 login
模組
文章或元件
news 模組

37. 路徑模組
mod_breadcrumb
• 選單模組
mod_menu
登入模組
mod_login
主要內容頁面（元件）
main body (component)

38. 觀看模組位置 I
• 後台 選單列 > 擴充套件 > 佈景主題管理 > 選項
• 預覽模組位置：
o 啟用

39. 觀看模組位置 II
• 在頁面的網址後方，輸入： ?tp=1
• 例如：http://yoursite.com/index.php?tp=1

40. 變更模組位置
•
(也可以手動輸入)

41. 模組頁面指派
• 選擇頁面即可（頁面=選單）

42. 網站規劃

43. • 首頁
• 關於我們
• 最新消息
通常， o 新品情報
o 活動快訊
• 商品列表
我們會從 o 分類A
• 子分類
客戶那邊 • 子分類
o 分類B
o 分類C
拿到… • FAQ
• 子分類
o 購買流程
o 保養方式
o 售後服務
o 常見問題
• 留言討論
• 聯絡我們

44. 讓我們做一個簡單的排版
選單
首頁 關於我們 最新消息 商品列表 FAQ 留言討論 聯絡我們
新品情報 分類A 分類B 分類C 購買流程
活動快訊 子分類 子分類 保養方式
子分類 售後服務
常見問題

45. 區分分類與單篇文章
選單
首頁 關於我們 最新消息 商品列表 FAQ 留言討論 聯絡我們
新品情報 分類A 分類B 分類C 購買流程
活動快訊 子分類 子分類 保養方式
子分類 售後服務
常見問題

46. 標出特殊功能
選單
首頁 關於我們 最新消息 商品列表 FAQ 留言討論 聯絡我們
新品情報 分類A 分類B 分類C 購買流程
活動快訊 子分類 子分類 保養方式
子分類 售後服務
常見問題
使用商品展示元件 使用討論版元件

47. 我們需要的有：
分類 文章
• 最新消息 • 關於我們
o 新品情報 • 聯絡我們
o 活動快訊 • 購買流程
• FAQ • 售後服務
o 保養方式
• 常見問題

48. • 公司簡介
o 關於我們
o 交通位置
經過重新 o 聯絡方式
• 新品情報
整理 • 活動快訊
（藍色為文章） • FAQ
o 保養方式
o 購買流程
o 售後服務
o 常見問題

49. • 首頁
文章分類： • 關於我們
• 公司簡介 • 最新消息
o 關於我們 o 新品情報
o 交通位置 o 活動快訊
o 聯絡方式 • 商品列表
• 新品情報 o 分類A
• 子分類
• 活動快訊 • 子分類
• FAQ o 分類B
o 保養方式 o 分類C
• 子分類
o 購買流程
o 售後服務 • FAQ
o 常見問題 o 購買流程
o 保養方式
o 售後服務
元件： o 常見問題
• 商品展示元件 • 留言討論
• 留言討論元件 • 聯絡我們

51. 首頁
規劃圖

52. Axure RP
•

53. 功能需求清單
功能需求
購物車 元件
留言板 元件
討論區 元件
檔案管理 元件
相簿 元件
流量統計 or 計數器 模組
隨機文章 模組
熱文商品 模組
最新商品 模組
電子報 元件
電子報訂閱 模組

54. 作業

55. 作業
• 設計一個你自己的網站架構，前台與後台。
• 思考你會需要用到什麼樣的功能，列一個功能清
單出來。可以先上JED尋找你要的套件。
• 從你的網站內容，簡易的規劃一下首頁的排版。
• 安裝一個Joomla!網站，把你規劃的基礎內容都
先上架。可以先用假文填補頁面。

56. 下一次上課內容
• 詳細講解 Joomla!的「擴充套件」與機制。
• 介紹幾個最常見的商品展示與購物車套件。
• 實際動手操作。

57. Thank you!