bài 9 hướng dẫn thiết kế website bán hàng trực tuyến bằng joomla

Bài 9
Hướng dẫn thiết kế website bán hàng trực
tuyến bằng Joomla
Mục tiêu bài học
• Hiểu rõ quy trình xây dựng 1 website bằng Joomla
• Tổng hợp các kiến thức cơ bản về xây dựng và quản trị
website Joomla
• Hiểu rõ cách thức đưa website lên host sau khi đã hoàn
thiện trên wampserver
• Hiểu cách sử dụng các gói Quickstart Joomla để tạo
website.
• Hiểu rõ quy trình xây dựng 1 website bằng Joomla
• Tổng hợp các kiến thức cơ bản về xây dựng và quản trị
website Joomla
• Hiểu rõ cách thức đưa website lên host sau khi đã hoàn
thiện trên wampserver
• Hiểu cách sử dụng các gói Quickstart Joomla để tạo
website.
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Cài đặt Joomla trên wampserver, không sử dụng dữ liệu
mẫu
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Xây dựng sơ đồ website
-Trang chủ
-Giới thiệu
-Tin tức
+Tin tuyển dụng
+Tin khuyến mại
-Sản phẩm

+Thời trang trẻ em
+Đồ chơi trẻ em
-Liên hệ
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Trang chủ
-Giới thiệu
-Tin tức
+Tin tuyển dụng
+Tin khuyến mại
-Sản phẩm
+Thời trang trẻ em
+Đồ chơi trẻ em
-Liên hệ
Xây dựng website bán hàng
Tạo Section, Category và một số Article
-Tạo Section: Tin tức
-Tạo Category Tin tuyển dụng, Tin khuyến mại nằm
trong section Tin tức
-Tạo Article Giới thiệu thuộc thuộc uncategorised và đặt
ngoài trang chủ; Tạo một số Article thuộc category Tin
tuyển dụng, Tin khuyến mại, các article này cũng đặt
hiển thị ngoài trang chủ theo 2 cột phía dưới article Giới
thiệu
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Tạo Section: Tin tức
-Tạo Category Tin tuyển dụng, Tin khuyến mại nằm
trong section Tin tức
-Tạo Article Giới thiệu thuộc thuộc uncategorised và đặt
ngoài trang chủ; Tạo một số Article thuộc category Tin
tuyển dụng, Tin khuyến mại, các article này cũng đặt

hiển thị ngoài trang chủ theo 2 cột phía dưới article Giới
thiệu
Xây dựng website bán hàng
Chỉnh sửa trình đơn Home trong khối trính đơn Main
Menu và hiệu chỉnh thứ tự bài viết trong Frontpage
Manager
-Thay tiêu đề Home thành Trang chủ;
-Đặt tham số #Link là 0 để không có liên kết phía dưới
các bài intro;
-Bật chức năng Title Linkable để đặt liên kết vào tiêu đề
bài viết, Tắt hiển thị (chọn hide) ở các tham số Author
Name, Created Date and Time, Modified Date and Time
-Truy cập Frontpage Manager, đặt lại thứ tự các bài viết,
để bài viết Giới Thiệu lên đầu
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Thay tiêu đề Home thành Trang chủ;
-Đặt tham số #Link là 0 để không có liên kết phía dưới
các bài intro;
-Bật chức năng Title Linkable để đặt liên kết vào tiêu đề
bài viết, Tắt hiển thị (chọn hide) ở các tham số Author
Name, Created Date and Time, Modified Date and Time
-Truy cập Frontpage Manager, đặt lại thứ tự các bài viết,
để bài viết Giới Thiệu lên đầu
Xây dựng website bán hàng
Danh sách Section
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Danh sách Category
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng

Tạo bài viết
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Sửa trình đơn Home
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Hiểu chỉnh thứ tự bài viết trong Fronpage Manager
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Trang Frontend lúc này:
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Thêm mới các trình đơn trong khối Main Menu:
-Giới thiệu: Kiểu Article Layout - trỏ tới bài viết Giới thiệu đã
tạo;
-Tin tức: Kiểu Section Blog Layout trỏ tới section Tin tức với
tham số cơ bản là Leading=0; Intro = 4; Columns=2, Links=6 ;
-Tin khuyến mại: Kiểu Category Blog Layout trỏ tới Category
Tin khuyến mại với tham số cơ bản là Leading=1; Intro = 6;
Columns=1, Links=6 ; trình đơn này lựa chọn Parent Item là
Tin tức
-Tin tuyển dụng: Kiểu Category Blog Layout trỏ tới Category
Tin tuyển dụng với tham số cơ bản là Leading=1; Intro = 6;
Columns=1, Links=6 ; trình đơn này lựa chọn Parent Item là
Tin tức
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Giới thiệu: Kiểu Article Layout - trỏ tới bài viết Giới thiệu đã
tạo;
-Tin tức: Kiểu Section Blog Layout trỏ tới section Tin tức với
tham số cơ bản là Leading=0; Intro = 4; Columns=2, Links=6 ;

-Tin khuyến mại: Kiểu Category Blog Layout trỏ tới Category
Tin khuyến mại với tham số cơ bản là Leading=1; Intro = 6;
Columns=1, Links=6 ; trình đơn này lựa chọn Parent Item là
Tin tức
-Tin tuyển dụng: Kiểu Category Blog Layout trỏ tới Category
Tin tuyển dụng với tham số cơ bản là Leading=1; Intro = 6;
Columns=1, Links=6 ; trình đơn này lựa chọn Parent Item là
Tin tức
Xây dựng website bán hàng
Trang Frontend, mục tin tức lúc này:
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Tải và cài đặt extension
-Joom Shopping: là extension làm trang bán hàng trực
tuyến bao gồm component và các plugin, module hỗ trợ.
Joom shopping được tải từ website

-Aicontactsafe: là extension tạo chức năng liên hệ trực
tuyến, được tải từ
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Joom Shopping: là extension làm trang bán hàng trực
tuyến bao gồm component và các plugin, module hỗ trợ.
Joom shopping được tải từ website

-Aicontactsafe: là extension tạo chức năng liên hệ trực
tuyến, được tải từ
Xây dựng website bán hàng
Cấu hình component Joom Shopping
-Vào Option chọn Currencies, thêm mới 1 loại tiền tệ là tiền
Việt Nam Đồng, mã vnd, và đặt loại tiền tệ này là mặc

định
-Vào Option chọn Payment, xóa các hình thức thanh toán
có sẵn thêm mới các hình thức thanh toán:
Tienphongbank, Vietcombank, Techcombank và thanh
toán trực tiếp khi giao hàng
-Vào Option cọn Shipping methods xóa các hình thức vận
chuyển cũ, tạo mới hình thức vận chuyển tới tận nhà
khách hàng và khách hàng nhận hàng tại cửa hàng
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Vào Option chọn Currencies, thêm mới 1 loại tiền tệ là tiền
Việt Nam Đồng, mã vnd, và đặt loại tiền tệ này là mặc
định
-Vào Option chọn Payment, xóa các hình thức thanh toán
có sẵn thêm mới các hình thức thanh toán:
Tienphongbank, Vietcombank, Techcombank và thanh
toán trực tiếp khi giao hàng
-Vào Option cọn Shipping methods xóa các hình thức vận
chuyển cũ, tạo mới hình thức vận chuyển tới tận nhà
khách hàng và khách hàng nhận hàng tại cửa hàng
Xây dựng website bán hàng
Tạo danh mục sản phẩm và một số sản phẩm
-Vào categories tạo 2 danh mục sản phẩm là thời trang trẻ
em và đồ chơi trẻ em
-Vào Products tạo mới một số sản phẩm thuộc 2 danh mục
thời trang trẻ em và đồ chơi trẻ em
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Vào categories tạo 2 danh mục sản phẩm là thời trang trẻ
em và đồ chơi trẻ em
-Vào Products tạo mới một số sản phẩm thuộc 2 danh mục
thời trang trẻ em và đồ chơi trẻ em

Xây dựng website bán hàng
Tạo trình đơn Sản Phẩm trỏ tới trang Joom Shopping
-Vào khối Main Menu, thêm mới trình đơn Sản phẩm và 2
trình đơn con là Thời trang trẻ em, Đồ chơi trẻ em tương ứng
trỏ tới danh sách các sản phẩm của 2 chuyên mục này
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Tạo trình đơn liên hệ
Thêm mới trình đơn Liên hệ trỏ tới component
Aicontactsafe
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Thêm mới khối trình đơn đặt phía trên trang web
Thêm mới khối trình đơn với 2 trình đơn là Thời trang trẻ em và Đồ chơi trẻ em, 2
trình đơn này trỏ tới 2 trình đơn tương ứng trong khối Main Menu và đặt module
hiển thị khối trình đơn này ở vị trí user3
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Đưa một số module ra ngoài trang Frontend
-Đưa các module ra ngoài frontend: mod_jshopping_cart
(module giỏ hàng); mod_jshopping_search (module
tìm kiểm sản phẩm); mod_jshopping_login (module
đăng ký, đăng nhập); mod_jshopping_latest_products
(module sản phẩm mới nhất)
-Đặt các module trên ở vị trí left, có module class suffix là
_menu
-Tạo mới 2 module kiểu Custom HTML 1 đặt ở vị trí User1
và 1 đặt ở ví trí footer, đăng ảnh banner quảng cáo có kích
thước 730x350px trong 2 module này
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla

-Đưa các module ra ngoài frontend: mod_jshopping_cart
(module giỏ hàng); mod_jshopping_search (module
tìm kiểm sản phẩm); mod_jshopping_login (module
đăng ký, đăng nhập); mod_jshopping_latest_products
(module sản phẩm mới nhất)
-Đặt các module trên ở vị trí left, có module class suffix là
_menu
-Tạo mới 2 module kiểu Custom HTML 1 đặt ở vị trí User1
và 1 đặt ở ví trí footer, đăng ảnh banner quảng cáo có kích
thước 730x350px trong 2 module này
Xây dựng website bán hàng
Trang Frontend lúc này:
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Xây dựng website bán hàng
Thay logo trang web
Tạo mới một ảnh định dạng .png có tên mw_joomla_logo.png có kích thước
298x75, chép đè ảnh này vào thư mục templates\rhuk_milkyway\images
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
Đưa website lên host
3 Bước chính để đưa website lên Host
-Bước 1: Upload toàn bộ Source code Joomla lên host bằng cách sử dụng trình
quản lý file manager của host hoặc sử dụng các phần mềm FTP
-Bước 2: Export database trong phpmyadmin của wampserver sau đó import vào
phpmyadmin của Host
-Bước 3: Cấu hình file configuration.php ở các dòng:
var $host
var $user
var $password
var $db
var $dbprefix

var $log_path
var $tmp_path
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla
-Bước 1: Upload toàn bộ Source code Joomla lên host bằng cách sử dụng trình
quản lý file manager của host hoặc sử dụng các phần mềm FTP
-Bước 2: Export database trong phpmyadmin của wampserver sau đó import vào
phpmyadmin của Host
-Bước 3: Cấu hình file configuration.php ở các dòng:
var $host
var $user
var $password
var $db
var $dbprefix
var $log_path
var $tmp_path
Giới thiệu QuickStart Joomla
QuickStart Joomla là gì?
- Là bộ cài đặt Joomla đã có tích hợp sẵn các extension như
Template, module, Plugin, component có thể triển khai luôn.
-Do các bên thứ 3 sản xuất và bán ra thị trường như:
GavicPro, Joomlart, You Joomla
-Quá trình cài đặt QuickStart Joomla giống như cài đặt
Joomla nhưng luôn phải cài đặt dữ liệu mẫu.
-Có thể tham khảo các website demo được cài từ QuickStart
Joomla tại website của các bên thứ 3 như joomlart.com ,
gavicpro.com
-Xu hướng hiện tại nhiều đơn vị dùng QuickStart để triển khai
website nhanh chóng mà lại có giao diện đẹp, chức năng
hoàn thiện.
Bài 9 - Hướng dẫn thiết kế website bán hàng trực tuyến bằng Joomla

- Là bộ cài đặt Joomla đã có tích hợp sẵn các extension như
Template, module, Plugin, component có thể triển khai luôn.
-Do các bên thứ 3 sản xuất và bán ra thị trường như:
GavicPro, Joomlart, You Joomla
-Quá trình cài đặt QuickStart Joomla giống như cài đặt
Joomla nhưng luôn phải cài đặt dữ liệu mẫu.
-Có thể tham khảo các website demo được cài từ QuickStart
Joomla tại website của các bên thứ 3 như joomlart.com ,
gavicpro.com
-Xu hướng hiện tại nhiều đơn vị dùng QuickStart để triển khai
website nhanh chóng mà lại có giao diện đẹp, chức năng
hoàn thiện.