簡易電子商務網站 joomla 實務工作坊

Post on 09-Jul-2015

3.660 Views

Category:

Education

0 Downloads

Preview:

Click to see full reader

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資料夾,完成安裝

下載 Joomla! • 由Joomla!台灣網站

下載

• www.joomla.org.tw

解壓縮• 將檔案全部解壓

縮到資料夾內

解壓縮後的結構

輸入網址進入安裝介面

確認上方方塊皆為綠色

輸入資料庫訊息• 主機名稱

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!

top related