Hướng dẫn thiết kế web thương mại điện tử với joomla

TRƯỜNG ĐẠI HỌC NGOẠI THƯƠNG

Hướng dẫn cài đặt và sử dụngHướng dẫn cài đặt và sử dụngWEBSITE THƯƠNG MẠI ĐIỆN TỬWEBSITE THƯƠNG MẠI ĐIỆN TỬ

trong doanh nghiệptrong doanh nghiệp

““Joomla”Joomla”

Giảng viên: Nguyễn Hồng QuânGiảng viên: Nguyễn Hồng Quân

Phần 1.HƯỚNG DẪN CÀI ĐẶT

WEBSITE JOOMLA

Các tài nguyên cần thiếtCác tài nguyên cần thiếtWebsite: joomla

Bước 1: Các tài nguyên cần thiết để cài đặt website Joomla

Phần 1 . Cài đặtPhần 1 . Cài đặt1. Cài đặt Xampp

- Php myadmin- MySql

2. Cài đặt wesbite Joomla3. Cấu hình và sử dụng

1. Cài đặt Xampp 1. Cài đặt Xampp

1. Cài đặt Xampp1. Cài đặt Xampp




1. Cài đặt Xampp (OK)1. Cài đặt Xampp (OK)

Cài đặtCài đặt1. Cài đặt Xampp

- Php myadmin- MySql

2. Cài đặt wesbite Joomla3. Cấu hình và sử dụng

Lưu ý 1.Lưu ý 1.Thư mục Xampp sau khi cài đặt có thể được đặt

tại ổ C (hoặc trong C:\

Program Files)

2. Cài đặt Joomla2. Cài đặt Joomla

Lưu ý 2.Lưu ý 2.Giải nén và Copy nội

dung website Joomla vào trong thư mục Xampp/htdocs/

Và đổi tên tùy ý, vd: ecom12

2. Cài đặt Joomla2. Cài đặt Joomla

2. Cài đặt Website 2. Cài đặt Website JoomlaJoomla

Copy nội dung website vào thư mục chứa máy chủ web

C:\xampp\htdocsC:\xampp\htdocsSau đó đổi tên thư mục này thành ecom12

TẠO CƠ SỞ DỮ LiỆU

Tạo cơ sở dữ liệuTạo cơ sở dữ liệu

Mở IE, vào địa chỉ: Localhost/xampp

Sau đó chọn English


Bước 1. Tạo database cho website

(Vào phpMyAdmin)



-Tên database: ecom12_data

-Chuẩn font: utf8_general_ci

-Nhấn vào Creat



Hoàn thành việc tạo cơ sở dữ liệu cho website

Cài đặt website Ecom12 trên nền

Joomla

Bước 1. gõ địa chỉ website để cài đặt

http://localhost/ecom12

Bước 2. Kiểm tra các thông số của máy chủ

Nếu OK kích vào Tiếp/Next

Bước 3. Kiểm tra License

Nếu OK kích vào Tiếp/Next


Lưu ý: Tên máy chủ: localhost

Tên đăng nhập: root

Mật khẩu: ĐỂ TRỐNG

Tên cơ sở dữ liệu vừa tạo: ecom12_data

Bước 5. Tiếp

Nhập tên website (tùy ý)

Địa chỉ email

Mật khẩu quản trị website (phải nhớ mật khẩu này)

Lưu ý bước 6

Bước 6. Lưu ý – Cài đặt dữ liệu mẫu trước khi bấm Next

Xóa thư mục Installation trong thư mục:

C:\xampp\htdocs\ECom12

Hướng dẫn cài đặt một số module và component

Mở websiteMở website

Mở website tại địa chỉ:

Localhost/ecom12

Giao diện website mẫu

Mở 1 trang web khác quản trị

Localhost/ecom12/administrator

Nhập tên và mật khẩu quản trị

Giao diện quản trị

Hướng dẫn Cấu hình và Quản trị website

Task 1. Quản lý Main Menu

- Dịch các Menu sang tiếng Việt

- Đổi tên Main Menu thành GiỚI THIỆU



Hướng dẫn:

Menu Main Menu Kích vào từng Menu con trong Main Menu để biên tập lại bằng tiếng Việt



Hướng dẫn:

Menu Main Menu Kích vào từng Menu con trong Main Menu để biên tập lại bằng tiếng Việt

Giao diện Biên tập các Menu bằng tiếng Việt

Lưu ý: Nếu database không theo chuẩn utf8_general_ci, các menu có thể không hiển thị đúng tiếng Việt

Đổi tên MAIN MENU thành TRANG CHỦ

Hướng dẫn:

Extensions Module Manager Chọn Main Menu rồi biên tập tên của Module thành Trang Chủ


Hướng dẫn:

Màn hình biên tập


Màn hình kết quả

Task 2. Chỉnh sửa đường dẫn Home thành Trang chủ

Hướng dẫn: Biên tập module Breadcrumbs

Breadcrumbs

Màn hình kết quả

Lưu ý: Module Breadcrumbs có chức năng hiển thị đường link đến trang web đang được mở

Task 3. Disable/Enable một số modules

(Không hiển thị/Hiển thị)

Ví dụ: Disable module: Resources và Key Concepts

Task 3. Disable/Enable một số modules

Disable module: Resources và Key Concepts

Hướng dẫn: Extensions Module Manager Dùng nút Enabled bên phải các Modules

Task 4. Tạo một Menu mới trên Trang chủ với tên là: CÁC DỊCH VỤ

Lưu ý: Đây là task quan trọng và mất nhiều bước để tạo


B1. Tạo Section để lưu trữ tin của Menu đang tạo


B1. Tạo Section để lưu trữ tin của Menu đang tạo


B2. Tạo Category trong Section đã tạo (category tương ứng với các Menu con)

Chọn Category Manager


B2. Tạo Category trong Section đã tạo (category tương ứng với các Menu con)

-Đào tạo

Lưu ý: Category Đào tạo phải được đặt trong Section: CÁC DỊCH VỤ


B3. Tạo thêm một số Category khác trong Section CÁC DỊCH VU

- Tư vấn

- Giải pháp TMĐT


B3. Tạo thêm một số Category khác trong Section CÁC DỊCH VU

- Tư vấn

- Giải pháp TMĐT


B4. Tạo Menu gắn với Section CÁC DỊCH VỤ với tên là CÁC DỊCH VỤ

Hướng dẫn:

Menu Menu Manager


B4. Tạo Menu với tên là CÁC DỊCH VỤ gắn với Section CÁC DỊCH VỤ

Hướng dẫn:

Menu Menu Manager

Lưu ý: Phải nhập đủ tên vào 4 trường



Hướng dẫn:

Menu Menu Manager

Lưu ý 1: Phải nhập đủ tên vào 4 trường

Lưu ý 2: Sau khi tạo xong Menu phải vào Module Manager để enable Module đó cho phép hiển thị trên website



Hướng dẫn:

Menu Menu Manager

Lưu ý 1: Phải nhập đủ tên vào 4 trường

Lưu ý 2: Sau khi tạo xong Menu phải vào Module Manager để enable Module đó cho phép hiển thị trên website


Lưu ý 3: Nhập thông số cấu hình Menu chính

Kết quả 1.

Chưa đẹp do chưa có các Menu con

Cần tạo tiếp các Menu con tương ứng với các Category đã tạo ở trên

Tạo các Menu con trong Menu: CÁC DỊCH VỤ

Hướng dẫn:

Menus CÁC DỊCH VỤ

Tạo các Menu con nằm trong CÁC DỊCH VỤ và gắn với các Category tương ứng đã tạo ở bước trước


Lưu ý: Có 2 định dạng tin phổ biến là Category Blog Layout và Category List Layout


Lưu ý: Gắn từng Menu con với các Category


Lặp lại các bước tạo Menu con cho các Category tương ứng

Kết quả như minh họa!

Task 5. Việt hóa các menu trên Top Menu và tạo thêm 1 menu mới

Hướng dẫn: Menu Top Menu


Hướng dẫn: Menu Top Menu


Hướng dẫn: Biên tập trực tiếp vào các Menu đã có


Hướng dẫn: Biên tập trực tiếp vào các Menu đã có


Kết quả

Sau khi đã quản lý được Top Menu, xóa các Menu cũ, tạo 4 menu mới: Giới thiệu | Kinh nghiệm | Kiến thức chung | Liên hệ


Hướng dẫn:

Tạo 1 section là TOP MENU

Tạo các Category tương ứng trước

Tạo các Menu gắn với các Category đó

Liên hệ có 1 Component riêng


Hướng dẫn:

Tạo 1 section là TOP MENU

Tạo các Category tương ứng trước

Tạo các Menu gắn với các Category đó

Kết quả 3 Categories đã được tạo trong Section TOP MENU

Tạo Menu GiỚI THIỆU trong TOP MENU gắn với Category Giới thiệu đã được tạo ở bước trước

Kết quả

Tạo tiếp các Menu tương ứng để Kết quả như trên

Lưu ý: Khi tạo menu CONTACT chọn kiểu là Contact Category Layout

Để biên tập các nội dung Contact, sử dụng Component Contacts

Task 6. Quản lý Media

Task 6. Quản lý Media

Hướng dẫn tạo các thư mục Video, Audio để lưu trữ file âm thanh, hình ảnh của website

Task 7. Quản lý Articles

Task 7. Quản lý Articles

Hướng dẫn:

-Lưu tin mới vào đúng Category

-Sử dụng các chức năng chèn ảnh, chia trang, readmore.

Task 8. Thay đổi Welcome

Menu manager

Main menu

Parameter Systems

Hướng dẫnCấu hình và quản lý cửa hàng trực tuyến

VirtueMart 13- 301 Cài đặt VirtueMart13- 302 Cấu hình virtueMart13 sau khi cài đặt- 305 Cài đặt tiếng Việt cho cửa hàng – Xem slide- 306 Quản lý Category- 307 Quản lý các mặt hàng- 308 Quy trình mua hàng- 309 Quản lý các đơn đặt hàng- 310 Chỉnh sửa giao diện Website

Hướng dẫn cài đặt Virtue Mart 13 cho Joomla 1.5

Bước 1. Mở giao diện cài đặt

Extensions

Install/Uninstall

Cài đặt VirtueMart (đã giải nén)

Lưu ý: cài Com trước

Lưu ý: Cài đặt dữ liệu mẫu cho cửa hàng ảo.

Sau khi hoàn thành, có thể lặp lại bước trước để cài các Mod

Đã cài đặt xong cửa hàng VirtueMart

Task 2.1. Quản lý VirtueMart

Hướng dẫn:

-Sau khi cài đặt đủ các component và modules của VirtueMart, hiển thị Module VirtueMart lên trang chủ

-Lưu ý: Chỉnh sửa cấu hình Module để hiển thị theo đúng chuẩn

Task 2.1. Quản lý VirtueMart

Hướng dẫn:

Chỉnh sửa cấu hình Module để hiển thị theo đúng chuẩn, như hình minh họa

Hướng dẫn

Login và mua thử 1 sản phẩm

Thực hiện đầy đủ 4 bước mua hàng

Kết quả như minh họa

Hướng dẫn

Tạo các Category

Tạo các Sản phẩm cho từng Category

Hướng dẫn Việt hóa cửa hàngHướng dẫn Việt hóa cửa hàng• Sử dụng gói Languagepack for virtuemart 13• Copy file vietnam.php vào thư mục joomla\administrator\

components\com_virtuemart\language• Đổi tên English thành English 1, đổi tên Vietnam thành English

Một số hướng dẫn khác

• Chỉnh sửa font trong templates(contentheading, component heading)

Hướng dẫn

Kết quả sau khi Việt hóa cửa hàng trực tuyến

3.1

Cài đặt module

BeInvoled

3.1 Cài đặt module

BeInvoled

Sửa lỗi trong Helper

Dòng 96


BeInvoled

Enabled module


BeInvoled

Cấu hình module


BeInvoled

Cấu hình module


BeInvoled

Cấu hình module


BeInvoled

Cấu hình module


BeInvoled

Cấu hình module


BeInvoled

Cấu hình module

Blue:

Chỉnh sửa đường dẫn đến Logo

NewFlash

Chỉnh sửa thành Nguyên tắc hoạt động

Menu: Right

Education

Hướng dẫn thiết kế web thương mại điện tử với joomla