簡易電子商務網站 joomla 實務工作坊
DESCRIPTION
2012 悠識數位上課講義 若您有任何 Joomla 應用需求，歡迎至夏木樂洽詢： http://simular.co/TRANSCRIPT
簡易電子商務網站
Joomla!實務工作坊
講師：Asika
開課單位：悠識數位
認識Joomla!
來自非洲斯瓦希裡語
意思是：「all together」或「as a whole」
Joomla! 的發展
Joomla! 2.5 (2012)
Joomla!1.6/1.7 (2011)
Joomla!1.5 (2007)
Joomla! 1.0 (2005)
Mambo (2001)
What is CMS?
• Content Management System (內容管理系統)
• 與Blog的比較：
o 巨量內容的管理
o 多人共用的環境
o 高度功能擴充性
o 長期維護的穩定
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
安裝 Joomla!
Joomla! 安裝流程1. 下載 Joomla! 安裝包 （zip壓縮檔）
2. 解壓縮到安裝資料夾
3. 輸入網址，進入安裝介面
4. 輸入資料庫帳號密碼
5. 跳過FTP設定
6. 輸入網站基本資料
7. 移除Installation資料夾，完成安裝
解壓縮• 將檔案全部解壓
縮到資料夾內
解壓縮後的結構
輸入網址進入安裝介面
確認上方方塊皆為綠色
輸入資料庫訊息• 主機名稱
o 一般是 localhost
• 帳號密碼o MySQL帳號密碼
• 資料庫o 要安裝的資料庫名稱
o 在自己電腦安裝時，如果沒有先創造資料庫，Joomla! 會幫你創造一個
• 前綴字o 當一個資料庫裝了兩個Joomla!
時，可用前綴字區分。
FTP設定可跳過
輸入網站基本資料• 網站名稱
o 你想要的網站名稱
• Emailo 管理員帳號的 Email，有訊息會通
知
• 帳號密碼o 建立一個管理員帳號
• 範例資料o 裝一些範例資料，可以了解內容是
怎麼設定的。範例資料中也有操作教學
完成安裝
重安裝
• 如果不移除 installation 資料夾，只是改名的話。日後可以用來重新安裝Joomla!
• 重安裝方法：1. 將 installation 資料夾改名回到原本名稱
2. 將網站目錄下的 configuration.php 移除
3. 輸入網址即可重新安裝
4. 注意：重安裝後所有資料也會被移除
Joomla! 的前後台Frontend and Backend
前台
後台• http://your-site.com/administrator
Joomla! 的內容管理
Joomla! 內容類型
• Content – 文章
• Category – 分類
• Menu – 選單
• Modules – 模組（區塊）
分類與文章結構網站
分類
分類
文章
文章
文章
分類
文章
文章
分類
文章
文章
文章
分類
文章
文章
選單結構內容層級 選單結構
分類一
分類二
文章A
文章B
文章C
文章D
分類一
分類二
文章A
文章B
文章C
文章D
選單結構內容層級 選單結構
分類一
分類二
文章A
文章B
文章C
文章D
分類一
分類二
文章A
文章B
文章C
文章D
所以使用者會看到...
分類一
分類二
文章A
文章B
文章C
文章D
分類一
分類二
文章A
文章B
文章C
文章D
後台 前台
模組Modules
show menu data
內容管理 Part II
分類管理
新增/編輯分類
•
文章管理
•
新增/編輯
文章
• 標題o 文章名稱
• 別名o 用來當做網址
• 分類o 選擇文章要放在哪個分類
• 狀態o 是否發佈這篇文章
• 精選o 要不要出現在首頁精選文章區
• 文章建立資訊o 可以選擇作者與建立時間
選單管理
選單結構Site
Menu Type
Menu item
Menu item
Menu item
Menu item
Menu Type
Menu item
Menu item
Menu item
Menu Type
Menu item
Menu item
Menu item
Menu item
選單結構網站
選單群組
選單項目
選單項目
選單項目
選單項目
選單群組
選單項目
選單項目
選單項目
選單群組
選單項目
選單項目
選單項目
選單項目
Joomla!的模組
什麼是模組
• Banner 模組
menu 模組
news 模組
計數器模組
login模組
主要頁面內容區
文章或元件
• 選單模組mod_menu
登入模組mod_login
路徑模組mod_breadcrumb
主要內容頁面（元件）
main body (component)
觀看模組位置 I
• 後台 選單列 > 擴充套件 > 佈景主題管理 > 選項
• 預覽模組位置：o 啟用
觀看模組位置 II
• 在頁面的網址後方，輸入：?tp=1• 例如：http://yoursite.com/index.php?tp=1
變更模組位置
•
(也可以手動輸入)
模組頁面指派
• 選擇頁面即可（頁面=選單）
網站規劃
通常，我們會從客戶那邊拿到…
• 首頁• 關於我們• 最新消息
o 新品情報o 活動快訊
• 商品列表o 分類A
• 子分類• 子分類
o 分類Bo 分類C
• 子分類
• FAQo 購買流程o 保養方式o 售後服務o 常見問題
• 留言討論• 聯絡我們
讓我們做一個簡單的排版
選單
首頁 關於我們 最新消息
新品情報
活動快訊
商品列表
分類A
子分類
子分類
分類B 分類C
子分類
FAQ
購買流程
保養方式
售後服務
常見問題
留言討論 聯絡我們
區分分類與單篇文章
選單
首頁 關於我們 最新消息
新品情報
活動快訊
商品列表
分類A
子分類
子分類
分類B 分類C
子分類
FAQ
購買流程
保養方式
售後服務
常見問題
留言討論 聯絡我們
標出特殊功能
選單
首頁 關於我們 最新消息
新品情報
活動快訊
商品列表
分類A
子分類
子分類
分類B 分類C
子分類
FAQ
購買流程
保養方式
售後服務
常見問題
留言討論 聯絡我們
使用商品展示元件 使用討論版元件
我們需要的有：
分類
• 最新消息
o 新品情報
o 活動快訊
• FAQ
o 保養方式
文章
• 關於我們
• 聯絡我們
• 購買流程
• 售後服務
• 常見問題
經過重新整理
• 公司簡介
o 關於我們
o 交通位置
o 聯絡方式
• 新品情報
• 活動快訊
• FAQ
o 保養方式
o 購買流程
o 售後服務
o 常見問題
（藍色為文章）
• 首頁• 關於我們• 最新消息
o 新品情報o 活動快訊
• 商品列表o 分類A
• 子分類• 子分類
o 分類B
o 分類C• 子分類
• FAQo 購買流程o 保養方式o 售後服務o 常見問題
• 留言討論• 聯絡我們
文章分類：• 公司簡介
o 關於我們o 交通位置o 聯絡方式
• 新品情報• 活動快訊• FAQ
o 保養方式o 購買流程o 售後服務o 常見問題
元件：• 商品展示元件• 留言討論元件
首頁規劃圖
Axure RP
•
功能需求清單功能需求
購物車 元件
留言板 元件
討論區 元件
檔案管理 元件
相簿 元件
流量統計 or 計數器 模組
隨機文章 模組
熱文商品 模組
最新商品 模組
電子報 元件
電子報訂閱 模組
作業
作業
• 設計一個你自己的網站架構，前台與後台。
• 思考你會需要用到什麼樣的功能，列一個功能清單出來。可以先上JED尋找你要的套件。
• 從你的網站內容，簡易的規劃一下首頁的排版。
• 安裝一個Joomla!網站，把你規劃的基礎內容都先上架。可以先用假文填補頁面。
下一次上課內容
• 詳細講解 Joomla!的「擴充套件」與機制。
• 介紹幾個最常見的商品展示與購物車套件。
• 實際動手操作。
Thank you!