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àngTạ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ộ

Trang 1

Bài 9

Hướng dẫn thiết kế website bán hàng trực

tuyến bằng Joomla

Trang 2

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ànthiệ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ànthiện trên wampserver

• Hiểu cách sử dụng các gói Quickstart Joomla để tạo

website

Trang 5

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

Trang 6

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ướicá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ố AuthorName, 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

-Thay tiêu đề Home thành Trang chủ;

-Đặt tham số #Link là 0 để không có liên kết phía dướicá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ố AuthorName, 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

Trang 7

Danh sách Section

Trang 8

Danh sách Category

Trang 9

Tạo bài viết

Trang 10

Sửa trình đơn Home

Trang 11

Hiểu chỉnh thứ tự bài viết trong Fronpage Manager

Trang 12

Trang Frontend lúc này:

Trang 13

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ớitham 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 CategoryTin 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 CategoryTin 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

-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ớitham 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 CategoryTin 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 CategoryTin 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

Trang 14

Trang Frontend, mục tin tức lúc này:

Trang 15

Tải và cài đặt extension

-Joom Shopping: là extension làm trang bán hàng trựctuyến bao gồm component và các plugin, module hỗ trợ

http://www.webdesigner-profi.de

-Aicontactsafe: là extension tạo chức năng liên hệ trựctuyến, được tải từ http://www.algisinfo.com

-Joom Shopping: là extension làm trang bán hàng trựctuyến bao gồm component và các plugin, module hỗ trợ

http://www.webdesigner-profi.de

-Aicontactsafe: là extension tạo chức năng liên hệ trựctuyến, được tải từ http://www.algisinfo.com

Trang 16

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ềnViệ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à thanhtoá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ậnchuyển cũ, tạo mới hình thức vận chuyển tới tận nhà

-Vào Option chọn Currencies, thêm mới 1 loại tiền tệ là tiềnViệ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à thanhtoá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ậnchuyển cũ, tạo mới hình thức vận chuyển tới tận nhà

Trang 17

-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ụcthời trang trẻ em và đồ chơi trẻ em

Trang 18

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à 2trình đơn con là Thời trang trẻ em, Đồ chơi trẻ em tương ứngtrỏ tới danh sách các sản phẩm của 2 chuyên mục này

Trang 19

Tạo trình đơn liên hệ

Thêm mới trình đơn Liên hệ trỏ tới componentAicontactsafe

Trang 20

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

Trang 21

Đư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íchthước 730x350px trong 2 module này

-Đư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íchthước 730x350px trong 2 module này

Trang 22

Trang Frontend lúc này:

Trang 23

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

Trang 24

Đư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:

-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:

Trang 25

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ừ QuickStartJoomla 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 khaiwebsite nhanh chóng mà lại có giao diện đẹp, chức năng

hoàn thiện

- 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ừ QuickStartJoomla 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 khaiwebsite nhanh chóng mà lại có giao diện đẹp, chức năng

hoàn thiện

Trang 26

Giới thiệu QuickStart Joomla

Ví dụ QuickStart Joomla của Joomlart: JA University

-Xem Demo:

http://www.joomlart.com/demo/#jo omla25-

templates.joomlart.com/ja_universi ty

-Bộ Quickstart này có tích hợp sẵn:

•Template được xây dựng trên nền tảng JAT3 2 Framework

•7 extension: (xem thông tin tại: http://www.joomlart.com/joomla/te mplates/ja-university )

-Xem Demo:

http://www.joomlart.com/demo/#jo omla25-

templates.joomlart.com/ja_universi ty

-Bộ Quickstart này có tích hợp sẵn:

•Template được xây dựng trên nền tảng JAT3 2 Framework

•7 extension: (xem thông tin tại: http://www.joomlart.com/joomla/te mplates/ja-university )

Trang 27

Tổng kết bài học

-Tổng hợp lại toàn bộ kiến thức, kỹ năng và quy trình xây dựng website từ Joomla CMS

-Hiểu cách thức đưa một website Joomla lên hosting

-Tìm hiểu về QuickStart Joomla

Định dạng
Số trang	27
Dung lượng	3,3 MB