web design 2 - kent international college

Web Design 2 Kent International College
Website Development and Multimedia Course 2
CHƯƠNG 1:
GIỚI THIỆU JOOMLA
1. Hệ thống quản trị nội dung CMS
Với sự phát triển của Internet và báo chí điện tử, sự cần thiết để cập nhật nội dung trang web nhanh hơn
và cập nhật tức thì các nội dung, tin tức, bài báo, báo chí, hay clip, ngày càng phát triển. Kể từ khi các
ông chủ doanh nghiệp & công ty muốn thiết kế trang web của họ để cập nhật website của họ nhanh hơn,
hệ thống quản trị nội dung (CMS) đã đóng một vai trò quan trọng trên Web
Những điều cần thiết của CMS
Ba yếu tố quan trọng trong mỗi CMS có đó là cho dù sử dụng công nghệ nào đi chăng nữa, đó là: Giao
diện (Templates), Nội dung (Content) và Meta data. Hơi khó hiểu, nhưng đại loại ba yếu tố này đóng vai
trò quang trọng trong CMS: Giao diện (Templates) là đồ họa cho website, Nội dung (Content) là quản lý
tất cả nội dung của website, Meta data giúp cho việc tối ưu hóa công cụ tìm kiếm (SEO).
Giao diện (Templates)
Giúp bản kiểm soát nội dung của website của bạn trông như thế nào và rất có ích khi website của bạn có
nhiều hơn 10 trang web. Giao diện (Templates) là một wrapper đồ họa đồng bộ trên mỗi trang web, bất
kể nội dung nào đi nữa. Nó là cho website của bạn trông đẹp hơn, chuyên nghiệp hơn.
Khi bạn muốn thay đổi Giao diện (Templates) - màu sắc hoặc hình ảnh nào đó, bạn chỉ cần thay đổi chỉ
một lần và nó sẽ được tự động hiển thị trên tất cả các trang web của bạn. CMS miễn phí phổ biến như
Wordpress và ExpressionEngine, có nhiều mẫu Giao diện (Templates) miễn phí có thể giảm chi phí và giúp
bạn tùy chỉnh hệ thống Giao diện (Templates) của website.
Nội dung (Content)
được tạo, quản lý và chỉnh sửa độc lập với tất cả các yếu tố của CMS khác. Nội dung có thể là bất cứ thứ
gì từ văn bản soạn thảo trong trang "Giới thiệu" của công ty bạn như: thông cáo báo chí, tin tức hay các
thông tin về tổ chức của bạn.
Tất cả nội dung thường được quản lý thông qua trình soạn thảo WYSIWYG (Làm những gì bạn muốn)
có tích hợp thêm công cụ tải ảnh lên. Giúp bạn tạo các trang web mới của bạn, quản lý và chỉnh sửa các
trang liên kết đến trang này hay trang khác và chỉ định các khu vực khác mà không cần sao chép chúng.
Meta data

Là một phần quan trọng trong việc tối ưu hóa công cụ tìm kiếm (SEO). Đó là một chức năng tuyệt vời

Web Design 2 Kent International College
Website Development and Multimedia Course 3
của CMS nó gần như giúp bạn để bạn không thể quen quản lý thêm thông tin này, góp phần tìm kiếm
trang web và xếp hạng và chỉ số index trên các máy tìm kiếm như Google, Yahoo và Bing. Meta data chứa
thông tin về thể loại, tác giả, ngày xuất bản, tiêu đề, mô tả ngắn gọn và từ khóa cho trang web.
Một chức năng tuyệt vời của Meta data là tự động thêm vào tiêu đề và mô tả cho liên kết khi đăng trên
các mạng xã hội như Facebook. Không chỉ giúp bạn tiết kiệm thời gian khi nhập lại thông tin này mà vẫn
giữ lại thông tin có liên quan. Thông tin này có thể được tìm thấy bởi các máy tìm kiếm khác mà trang
web bạn được liệt kê, nên chính vì vậy nên cho thêm thông tin vào nội dung trang khi viết nó.
2. Chức năng chuẩn của CMS
Hệ thống quản trị nội dung (CMS) mang lại cho bạn nhiều tính năng chuẩn giúp bạn tạo, quản lý và
chỉnh sửa nội dung của bạn. Ngoài các tính năng chuẩn, các tính năng bổ sung có thể thêm vào cho hệ
thống càng thêm linh hoạt và tiện dụng. Các tính năng bổ sung này thường được gói là Addon
Modules hoặc Plug-in. Vì một CMS rất linh hoạt, bạn có thể sử dụng nó cho một trang web đơn giản với
rất ít nội dung hoặc mở rộng các tính năng để hỗ trợ các trang web phức tạp hơn với nhiều nội dung.
Chức năng chuẩn - Standard Features
Các tính năng là là những gì làm cho hệ thống quản trị nội dung của bạn mở rộng hơn và linh hoạt hơn.
Chúng cho phép bạn đăng, chỉnh sửa nội dung và tổ chức quản lý các thành viên, và có nhiều khả năng
bảo mật cho hệ thống của bạn.
Quản lý thành viên (Member management)
Sẽ giúp bạn kiểm soát tất cả tài khoản của người dùng trên web của bạn. Là quản trị viên, bạn toàn quyền
kiểm soát có bao nhiêu người truy cập vào web của bạn và làm thế nào để họ có thể giới hạn quyền hạn
của mình trên website của bạn. Điều này đặc biệt quan trọng với các công ty lớn, nơi có nhiều người (Tác
giả, biên tập, xuất bản, ) có trách nhiệm viết và duy trì nội dung.
 Administrator (quản trị viên): là người điều khiển tất cả hoạt động của người dùng trang web và có
thể truy cập vòa tất cả chức năng quản trị của website.
 Editor (Biên tập): Có thể xuất bản và quản lý nội dung riêng của họ cũng như nội dung của người
khác.

 Author (Tác giả): Có thể xuất bản và quản lý nội dung của riêng họ.
 Contributor: có thể viết và quản lý nội dung của riêng họ nhưng không xuất bản nó.
 Subscriber: Có thể đọc nội dung, xem và ghi các ý kiến, nhận các bản tin, mà không thể chỉnh sửa
bất cứ thứ gì
Bạn có thể tích hợp các Module Add-on hoặc Plug-in vào CMS để tăng thêm giá trị, nâng cao khả năng
tiếp cập và nhiều chức năng hơn. Với sự kết hợp các tính năng, bạn có thể tạo một website phù hợp với
kế hoạch kinh doanh của bạn và giúp công ty bạn đạt được mục tiêu đó.
 Company blog
 Tích hợp E-commerce
 Diễn đàn thảo luận (Discussion forums)
 Thư viện ảnh (Photo galleries)
 Quản lý Video (Video management)
 Hỗ trợ đa ngôn ngữ (Multi-language support)
 RSS feeds
 Bản tin / danh sách gửi thư (Newsletters/mailing lists)
 Thống kê/Theo dõi (Statistics/tracking)
Web Design 2 Kent International College
Website Development and Multimedia Course 4
3.Giới thiệu về Joomla
Joomla là gì ?
Joomla là một hệ quản trị nội dung mã nguồn mở (Tếng Anh : Open Source Content Management
Systems . Joomla được viết bằng ngôn ngữ PHP và kết nối tới cơ sở dữ liệu MySQL , cho phép người sử
dụng có thể dễ dàng xuất bản các nội dung của họ lên Internet hoặc Intranet.
Joomla được sử dụng ở khắp mọi nơi trên thế giới, từ những website cá nhân cho tới những hệ thống
website doanh nghiệp có tính phức tạp cao, cung cấp nhiều dịch vụ và ứng dụng. Joomla có thể dễ dàng
cài đặt, dễ dàng quản lý và có độ tin cậy cao.
Joomla có mã nguồn mở do đó việc sử dụng Joomla là hoàn toàn miễn phí cho tất cả mọi người trên thế
giới.
Joomla! và những ứng dụng thực tiễn
Joomla! đã được sử dụng trên khắp thế giới, đã được ứng dụng vào xây dựng các website từ đơn giản

như website cá nhân tới các ứng dụng website phức tạp. Sau đây là 1 số ứng dụng có thể được xây dựng
bằng Joomla !
 Trang web của các tổ chức hoặc các cổng thông tin ( Portal )
 Thương mại điện tử
 Trang web cho các công ty cỡ nhỏ
 Ứng dụng cho các cơ quan hành chính
 Trang web cho các trường học và nhà thờ
 Trang web cá nhân và gia đình
 Các cổng thông tin cộng đồng
 Trang web báo điện tử và tạp chí
 và nhiều ứng dụng khác nữa
4. Cài đặt cài chương trình Server Wamp5
Wamp5 là chương trình tạo máy dịch vụ Web (Web Server) trên máy tính cá nhân (Localhost) được tích
hợp sẵn Apache, PHP, MySQL và các công cụ như PHPmyadmin, SQLitemanager. Ưu điểm của Wamp5
là đơn giản, dễ sử dụng, Wamp5 được download và sử dụng miễn phí tại:
/>Web Design 2 Kent International College
Website Development and Multimedia Course 5
Thay đổi các thông số của PHP (php.ini) trong Wamp5 bằng cách nhấn chuột trái vào biểu tượng Wamp5
nằm ở khay hệ thống (ở góc dưới bên phải màn hình), chọn PHP Settings -> nhấn vào thông số muốn
thay đổi, thông số nào được chọn (Enable) sẽ xuất hiện dấu mũi tên phía trước.
5. Quy trình cài đặt Joomla
Quy trình cài đặt Joomla !
Việc cài đặt Website Joomla là rất dễ dàng, đơn giản và nhanh chóng đối với tất cả mọi người. Bạn chỉ
cần truy cập Website Joomla , download bộ cài đặt, giải nén, upload lên host, tạo database và tiến hành
cài đặt theo từng bước. Màn hình cài đặt của Joomla 1.5 khá thân thiện và được bố trí hợp lý. Bạn chỉ cần
chú ý một điều duy nhất là "phải tạo 1 database với Collation - charset: utf8_general_ci" trước khi cài đặt
mà thôi.
Dưới đây là các bước thực hiện
Bước 1: Download & Upload bộ cài đặt Joomla!
Download Joomla 1.5 : link download: Joomla 1.5 beta (night builds)

Upload Joomla : Upload lên Server và giải nén vào thư mục gốc chứa Web của bạn (hoặc một thư mục
con của nó và đặt tên là joomla).
Thư mục gốc chứa Web thường có tên là: htdocs, public_html, www, wwwroot
C:\wamp\www\
C:\Program Files\xampp\htdocs\
Bạn có thể Upload bằng một số cách:
 Bằng Copy trực tiếp (nếu cài trên máy của bạn)
Web Design 2 Kent International College
Website Development and Multimedia Course 6
 Bằng công cụ quản trị mà HOSTING cung cấp.
 Bằng công cụ FTP: WS_FTP, Total Commander, Net2FTP
Bước 2: Chọn ngôn ngữ cài đặt
Mở trình duyệt và gõ vào địa chỉ Website của bạn.
 Nếu bạn giải nén bộ cài đặt vào thư mục gốc thì gõ: http://yoursite/
VD: />VD: http://localhost/ (nếu cài trên máy của bạn)
 Nếu bạn giải nén bộ cài đặt vào thư mục joomla (thư mục con của thư mục gốc) thì gõ:
http://yoursite/joomla/
Bước 3: Kiểm tra cấu hình hệ thống
Nếu các giá trị kiểm tra có màu xanh thì OK. Nếu các giá trị kiểm tra có màu đỏ thì bạn cần hỏi bộ phận
Hỗ trợ kỹ thuật của Server. Bạn vẫn có thể tiếp tục cài đặt tuy nhiên một số chức năng có thể sẽ không
hoạt động.
Bước 4: Thông tin bản quyền
Bạn nên dành một chút thời gian để đọc các thông tin này.
Bước 5: Thiết lập các thông số để kết nối tới Cơ sở dữ liệu
Hostname: Thường là giá trị "localhost"
(chỉ điền giá trị khác nếu như Database Server và Web Server nằm ở 2 nơi khác nhau, hoặc Host của bạn
cung cấp như vậy)
- User name: Tên tài khoản có quyền đối với cơ sở dữ liệu chứa Joomla của bạn.
- Password: Mật khẩu của tài khoản trên
- Availbe Collations: Bạn nên chọn là "utf8_general_ci"

- Database Name: Tên cơ sở dữ liệu của bạn
Web Design 2 Kent International College
Website Development and Multimedia Course 7
Bước 6: Thiết lập các thông số FTP
- Nếu Host của bạn không hỗ trợ, mục này sẽ không hiển thị
- Nếu Host của bạn hỗ trợ, bạn cần chú ý:
 Username: Tên tài khoản FTP
 Password: Mật khẩu tương ứng.
 Auto Find Path: Tự động tìm đường dẫn tới nơi chứa Web của bạn
(Nên dùng chính tài khoản mà bạn đã Upload bộ cài đặt Joomla lên HOST)
Bước 7: Thiết lập cấu hình site Joomla của bạn
- Site name: tên site của bạn.
VD: VnExpress, Hosting Việt Nam, ThanhNienOnline
- Your Email: địa chỉ email của bạn
VD: This e-mail address is being protected from spambots. You need JavaScript
enabled to view it
- Admin Password: Mật khẩu để quản trị Joomla
Các thông số trên sau này đều có thể thay đổi dễ dàng nên bạn không cần bận tâm lắm. Chỉ cần nhớ mật
khẩu là đủ.
- Install Defaul Sample Data: Cài đặt dữ liệu mẫu. Bạn nên nhấn nút này để Joomla tạo mẫu cho bạn một
Web Design 2 Kent International College
Website Development and Multimedia Course 8
trang web đơn giản.
Bước 8: Kết thúc
- Vào xóa thư mục Installation
- Lưu ý: tài khoản truy nhập hệ thống là: admin; mật khẩu: mật khẩu mà bạn đã gõ ở bước 6.
- Để xem Website của bạn: Nhấn vào nút Site
- Để quản trị Website: Nhấn vào nút Admin. Đường dẫn sẽ có dạng như sau:
 http:// www.yoursite.com/administrator/ hoặc
 hoặc

 http://localhost/administrator/(nếu cài trực tiếp trên máy của bạn)
6. Cấu hình cơ bản Joomla
Quy trình tạo một bài viết trong Joomla!
Content (bài viết) trong Joomla! được tổ chức theo mô hình phân cấp và chỉ gồm 2 mức:
 Mức cao nhất: Section (phần/mục)
 Mức tiếp theo: Category (chuyên mục) là mức con của Section.
Bạn có thể xem sơ đồ dưới đây hoặc hình vẽ mô tả bên cạnh.
|Section|
|Category|
|Content 1|
|Content 2|
Do vậy để tạo một bài viết chúng ta cần thực hiện tối đa là 3 bước.
 Bước 1. Tạo Section (phần/mục).
 Bước 2: Tạo Category (chuyên mục).
 Bước 3: Tạo Content (bài viết).
Chú ý:
 Khi tạo Website nên định hình và tạo ngay các phần/mục (Section) và các chuyên mục (Category)
tương ứng.
 Joomla! chỉ hỗ trợ phân cấp thành 2 mức như trên. Do vậy nếu muốn chia thành nhiều mức hơn
Web Design 2 Kent International College
Website Development and Multimedia Course 9
bạn cần tìm một component hỗ trợ từ site:
7. Quản lý menu trong Joomla
Có thể nói 1 trong những đặc điểm rất hay và linh hoạt của joomla chính là hệ thống menu. Trong
Joomla bạn có thể tùy biết các menu rất dễ dàng
Truy cập Menu / Menu Manager để vào giao diện quản lý menu
Sau khi truy cập bạn sẽ nhận được danh sách các Menu đã tạo trước đó(nếu có)
Để thêm 1 Menu mới bạn Click chọn nút New trên thanh công cụ
Trong giao diện thêm mới 1 Menu bạn cần điền các thông tin sau
- Unique Name: Tên của Menu (không dấu, viết liền)

- Title: Tiêu đề của menu
- Description: Mô tả về menu
- Module Title: Tiêu đề của module ứng với Menu này (Mỗi menu sẽ có 1 Module tương ứng với nó để
định nghĩa các hiển thị, vị trí hiển thị, trạng thái hiển thị)
Sau khi khai báo đầy đủ thông tin -> chọn Save (Lưu)
Để thêm mới 1 Menu Item bạn chọn New từ thanh công cụ
Web Design 2 Kent International College
Website Development and Multimedia Course 10
Giao diên thêm mới 1 Menu Item
+ Đầu tiên hệ thống yêu cầu bạn chọn loại Menu Item mà bạn muốn tạo ra(Menu Item của bạn liên kết
đến cái gì - Khi click vào Menu Item nó hiện ra thông tin gì trên trang web của bạn)
ở đây có 1 số lựa chọn thông dụng mà bạn cần quan tâm
- Internal link / Articles: Menu Items liên kết đến các bài viết
Web Design 2 Kent International College
Website Development and Multimedia Course 11
+ Article / Article layout
Menu Item loại này có tác dụng liên kết đến 1 bài viết(hiển thị nội dung 1 bài viết). Các thông số cần
quan tâm:
- Title: Tiêu đề của Menu Item
- Alias: Tiêu đề không dấu của Menu Item (sử dụng trong SEO)
- Parent Item: Menu Item cấp cha
- Published: Trạng thái của Menu Item (bật/tắt)
- Access Level: Cấp độ người dùng được phép truy cập (Công cộng / Đã đăng ký / Có quyền quản trị)
- Parameters (Basic) / Select Article: Chọn 1 bài viết để liên kết đến
+ Articles / Article Submission Layout
Menu Item loại này có tác dụng liên kết đến 1 form để đăng bài viết từ front-end. Các thông số cần quan
tâm:
- Title: Tiêu đề của Menu Item
- Alias: Tiêu đề không dấu của Menu Item (sử dụng trong SEO)
- Parent Item: Menu Item cấp cha

- Published: Trạng thái của Menu Item (bật/tắt)
- Access Level: Cấp độ người dùng được phép truy cập (Công cộng / Đã đăng ký / Có quyền quản trị)
+ Category / Category Blog Layout
Menu Item loại này có tác dụng liên kết đến 1 danh sách các bài viết cùng Chủ đề(Catagory) trình bày
dưới dạng blog.
Các thông số cần quan tâm:
- Title: Tiêu đề của Menu Item
- Alias: Tiêu đề không dấu của Menu Item (sử dụng trong SEO)
- Parent Item: Menu Item cấp cha
- Published: Trạng thái của Menu Item (bật/tắt)
- Access Level: Cấp độ người dùng được phép truy cập (Công cộng / Đã đăng ký / Có quyền quản trị)
- Parameters (Basic)
+ Catagory: Catagory mà các bài viết trong đó được hiển thj
+ Description: Hiển thị phần mô tả của Catagory
+ Description Image: Hiển thị ảnh trong phần mô tả của Catagory
+ Leading: Số lượng bài viết mở đầu
+ Intro: Số lượng bài viết được hiển thị cùng với phần tóm tắt của bài viết
+ Columns: Số cột hiển thị bài viết
+ Link: Số lượng bài viết được hiển thị dưới dạng Link
- Parameters (Advanced)
Web Design 2 Kent International College
Website Development and Multimedia Course 12
+ Primary Order: Kiểu sắp xếp của bài viết
+ Multi Column Order: Kiểu trình bày của bài viết theo cột(dọc hoặc ngang)
+ Pagination: Hiển thị phân trang(có/không)
- Parameters (System)
+ Page Title: Tiêu đề trang
+ Show Page Title: Hiển thị tiêu đề trang(có/không)
+ Menu Image: Ảnh của Menu
+ Category / Category List Layout

Menu Item loại này có tác dụng liệt kê danh sách dạng tiêu đề các bài viết trong Category
- Parameters (Basic)
+ Category: Category chứa các bài viết cần hiển thị
+ # Links: Số lượng bài viết hiển thị
+ Table Headings: Ẩn/hiện tiêu đề bảng chứa tiêu đề các bài viết
+ Date Column: Ẩn/hiện cột ngày tháng của bài viết
+ Date Format: Định dạng hiển thị ngày tháng(sử dụng lệnh format PHP strftime)
+ Filter: Ẩn/hiện khung lọc dữ liệu
+ Filter Field: Trường dữ liệu sử dụng cho việc lọc(Filter)
- Parameters (Advanced)
Web Design 2 Kent International College
Website Development and Multimedia Course 13
+ Primary Order: Kiểu sắp xếp dữ liệu
+ Pagination: Ẩn/hiện phân trang
+ Contacts / Contact Category Layout: Liên kết đến 1 trang hiển thị nội dung của các liên hệ mà khách
hàng đã gửi
+ Contacts / Standard Contact Layout: Liên kết đến 1 trang chứa form liên hệ. Với nội dung liên hệ
được cấu hình trước tại mục Components / Contacts
- Internal link / Search: Hiển thị 1 form tìm kiếm thông tin trong các bài viết của website
- Internal link / User: Các chức năng liên quan đến việc đăng ký, đăng nhập, thông tin người sử
sụng(đang đăng nhập), reset mật khẩu
- Internal link / Polls: Liên kết đến trang "lấy ý kiến người sử dụng" với các bình chọn, đánh giá đã
đươc tạo lập từ trước tại mục Component / Polls.
- External Link: Liên kết đến 1 địa chỉ Url bên ngoài website của bạn
- Separator: Tạo ra 1 Menu Item trống không có liên kết phục vụ cho 1 ý đồ hiển thị nào đó.
- Alias: Tạo ra ảnh của 1 Menu Item đã tồn tại. Sử dụng các thông số cài đặt của Menu Item mà nó ảnh
xạ tới
8. Quản lý Template
Xem vị trí các module trên Template
Web Design 2 Kent International College

Website Development and Multimedia Course 14
Theo mặc định, các Website Joomla đều cho phép xem vị trí các module của Template theo dạng đường
dẫn
http://domain/index.php?tp=1 hoặc http://domain/?tp=1
VD: />Cấu trúc Template
Template của Joomla! 1.5.x không còn đơn giản chỉ là giao diện của trang web, các cải tiến trong phiên
bản này cho phép Template có nhiều tính năng hơn, cho phép thay đổi các thông số về độ rộng, màu
sắc, trong phần quản lý Template.
Joomla! 1.5.x cũng có Temp dành cho Frontpage gọi là Site Template và dành phần Quản trị (Admin)
gọi là Administrator Template, sau đây là cơ bản về Site Template của Joomla! 1.5.x
Cấu trúc:
 template_name: Thư mục chính thường được đặt tên của Temp.
 css: Thư mục chứ các tập tin bảng kiểu với các thông số định dạng cho Temp, trong đó có tập tin
chính có tên là template.css và có thể được bổ sung thêm một số tập tin css khác.
 html: Thư mục chứa các tập tin dùng để thay đổi hoặc định dạng lại cho các thành phần mở rộng
Web Design 2 Kent International College
Website Development and Multimedia Course 15
của Joomla!, có thể không cần nếu không muốn thay đổi.
 images: Thư mục chứa các tập tin hình ảnh của Temp.
 index.html: Tập tin ngăn sự truy cập trực tiếp vào thư mục của Temp.
 index.php: Tập tin chính sử dụng mã PHP tạo nên cấu trúc của Temp.
 params.ini: Tập tin lưu các thông số mặc định của Temp, được thiết lập trong phần quản lý
Temp.
 template_thumbnail.png: Tập tin ảnh dùng để cho xem hình dạng của Temp.
 templateDetails.xml: Tập tin chứa các thông tin và thông số liên quan đến Temp được dùng khi
cài đặt và quản lý Temp.
 Ngoài ra còn có thể có một thư mục js chứa các tập tin mã lệnh sử dụng trong Template.
Cài đặt:
Template của Joomla! 1.5 thường được đóng gói dưới dạng nén zip và được cài đặt thông qua Menu
Extensions (1) -> Install/Uninstall (2) -> Browse (3) -> Chọn gói Temp -> Open -> Upload File &

Install (4)
Sử dụng:
 Chuyển sang Temp mới vừa cài đặt bằng cách truy cập Menu Extensions (1) -> Template
Manager (2) -> Site (3) -> chọn Temp mới vừa cài (4) -> Nhấn Default để chọn làm Temp mặc
định (5) -> Temp mặc định sẽ có dấu sao (6)
 Thay đổi thông số bằng cách nhấn vào tên của Temp, sẽ có các nút chức năng dùng để chỉnh sửa
Web Design 2 Kent International College
Website Development and Multimedia Course 16
tập tin
index.php
và
template.css
, ngoài ra tùy theo Temp sẽ cho phép chỉnh khác các thông số
như độ rộng, màu sắc,
 Nếu muốn thay đổi Temp khác cho một vài trang (Menu) thì sau khi cài đặt Temp khác, trong
phần Template Manager nhấn vào tên của Temp để mở ra, đánh dấu vào Select from List và
chọn Menu, có thể chọn nhiều Menu khác nhau bằng cách nhấn phím Ctrl trên bàn phím và
nhấn nút trái chuột vào các Menu đó.
Chú ý:
 Nếu muốn cũng có thể cài đặt nhiều Temp cho Joomla! và mỗi Menu chọn 1 Temp khác nhau tùy
ý thay đổi.
 Có rất nhiều trang Web cho tải Temp miễn phí, bạn hãy dùng công cụ tìm kiếm với từ khóa "free
joomla template", tuy nhiên các Temp miễn phí này thường đơn giản và có những hạn chế nhất
định, để có được một Temp như ý thì thông thường phải chỉnh sửa nhiều thứ trong Temp. Bạn
cũng có thể chọn mua các Temp thương mại được thiết kế rất đẹp và nhận được sự hỗ trợ của tác
giả.
Web Design 2 Kent International College
Website Development and Multimedia Course 17
CHƯƠNG 2:
THƯƠNG MẠI ĐIỆN TỬ

1. Giới thiệu về Virtuemart
Virtuemart là 1 giải pháp thương mại điện tử mã nguồn mở(Open Source E-Commerce solution) được sử
dụng cùng với hệ quản trị nội dung(Content Management System - CMS) Joomla. Virtuemart cung cấp
rất nhiều chức năng phục vụ cho việc quản lý sản phẩm(products), danh mục sản phẩm, phương thức vận
chuyển, phương thức thanh toán và các phương thức trình diễn sản phẩm như: danh sách danh mục sản
phẩm, sản phẩm mới, sản phẩm topten, sản phẩm đặc biệt
Các bạn có thể tìm hiểu thêm thông tin và download phiên bản mới nhất của Virtuemart tại địa chỉ:

Web Design 2 Kent International College
Website Development and Multimedia Course 18
2. Cấu hình chung cho Virtuemart
+ Truy cập trang cấu hình Virtuemart: Admin / Configuation
+ Các tùy chọn cấu hình cơ bản
Global
Web Design 2 Kent International College
Website Development and Multimedia Course 19
+ Shop is offline: Đóng cửa ứng dụng
+ Ofline Message: Thông báo hiển thi khi đóng cửa ứng dụng
+ Use only as catalogue: Chỉ sử dụng virtuemart dạng trình bày sản phẩm và thông tin sản phẩm mà
không sử dụng chức năng thanh toán, giỏ hàng.
Price Configuration
+ Show Price: Hiện giá của sản phẩm
+ Membergroup to show price to: nhóm người sử dụng sẽ nhìn thấy giá sản phẩm
+ Show "(including XX% tax)" when applicable: Hiện giá dạng %
-Security Settings
+ SECUREURL, Site URL: Đường dẫn của ứng dụng cài đặt Virtuemart. Bạn phải thay đổi đường dẫn
này cho phù hợp khi thay đổi domain hoặc upload lên server.
Display
+ PDF - Button: hiển thị nút chức năng chiết suất nội dung ra file pdf
+ Show the "Recommend to a friend" link: hển thị nút chức năng gửi link sản phẩm hiện tại cho bạn bè

+ Show the "Print View" link: hiển thị nút chức năng in nội dung hiển thị
+ Default product sort order: kiểu sắp xếp mặc định
+ Available "Sort-by" fields: danh sách các trường thông tin dùng để sắp xếp
+ Show the Number of Products: hiển thị số lượng sản phẩm trong mỗi category
+ "no image" image: hình ảnh dùng để hiển thị khi sản phẩm không có hình ảnh
+ Show footer : hiển thị footer(logo của Virtuemart)
Layout
+ Select the theme for your Shop: Chọn giao diện hiển thị cho ứng dụng. Cấu hình chi
tiết(Configuration):
- Product List Style: kiểu hiển thị của danh sách sản phẩm
+ Product listing with a table: hiển thị danh sách sản phẩm dạng bảng
+ Flat product list: danh sách sản phẩm dạng flat. Mỗi sản phẩm trình bày trên 1 hàng
+ Product list (div-base): hiển thị sản phẩm trong thẻ div. cách hiển thị phụ thuộc vào viêc css cho các
Web Design 2 Kent International College
Website Development and Multimedia Course 20
thẻ div này
- Show the Feed Icon: hiển thị nút chức năng Feed
- Show the Add-to-cart Button on the product list: hiển thị nút thêm sản phẩm vào giỏ hàng trên giao diện
danh sách sản phẩm
- Show Prev/Next Product Link: hiển thị link đến sản phẩm trước và sau sản phẩm hiện tại
- Open Product Images in a LightBox: hiển thị ảnh lớn của sản phẩm sử dụng lightbox
- Use Ajax to add, update or delete products from the cart: sử dụng Ajax để thêm, cập nhật và xóa sản
phẩm từ giỏ hàng
- Show featured products on frontpage: hiển thị danh sách sản phẩm đặc biệt trên trang chủ của ứng dụng
Virtuemart
- Show the latest products on the frontpage: hiển thị danh sách sản phẩm mới nhất trên trang chủ của ứng
dụng Virtuemart
- Number of recent products to Display: số lượng sản phẩm mới xem của khách hàng
+ Default number of products in a row: Số lượng sản phẩm hiển thị trên cùng 1 hàng
+ Category Template: template trang hiển thị sản phẩm trong 1 category

+ FLYPAGE: template trang hiển thị chi tiết sản phẩm
+ Enable Dynamic Thumbnail Resizing: bật chức năng tự động thay đổi kích thước ảnh sang dạng ảnh
nhỏ
+ Thumbnail Image Width, Thumbnail Image Height: chiều cao, rộng của ảnh nhỏ
Shipping:
Danh sách module các phương thức vận chuyển hàng hóa
- Checkout: Bật/tắt Checkout bar, danh sách các bước checkout
Thông tin cửa hàng
+ Store: Thông tin cửa hàng
- Store Name: Tên cửa hàng
- Store Company Name: Tên công ty quản lý của hàng
- URL: Website của công ty
- Address 1: Địa chỉ 1 của cửa hàng
- Address 2: Địa chỉ 2 của cửa hàng
- City: Thành phố
- Country: Quốc gia
- State/Province/Region: Vùng miền, bang
- Zip/Postal Code: Mã số bưu điện
- Phone: Số điện thoại
- Store Address Format: Định dạng địa chỉ cửa hàng
- Store Date Format: Định dạng kiểu hiển thị của thời gian
+ Contact Information: Thông tin liên hệ
- First Name, Middle Name, Last Name: Tên người liên hệ
- Phone 1, Phone 2: Số điện thoại liên hệ
- Fax: Số fax
- Email: Email liên hệ
Web Design 2 Kent International College
Website Development and Multimedia Course 21
+ Currency Display Style:
Cấu hình tiền tệ

- Currency: Loại tiền tệ sử dụng
- Currency symbol: Ký kiệu tiền tệ
- Positive format: Vị trí hiển thị tương đối giữa ký hiệu và giá trị tiền tệ
- List of accepted currencies: Danh sách tiền tệ chấp nhập thanh toán
+ Store Information
- Full Image: Logo hoặc banner quảng cáo về cửa hàng
+ Description: Nội dung giới thiệu về cửa hàng
+ Terms of Service: Danh mục điều khoản dịch vụ(khách hàng phải chấp nhận khi thanh toán)
Quản lý sản phẩm
Thêm mới 1 category - Click nút New trên giao diện quản trị List categories. Các trường thông tin cần
chú ý
+ Category Name: tên của danh mục sản phẩm
+ Category Description: Tóm tắt nội dung giới thiệu về danh mục sản phẩm
+ Parent: Category cấp trên của category đang tạo
+ Category Browse Page: Template sử dụng cho việc hiển thị danh sách sản phẩm trong catagory này
+ Category Flypage: Template sử dụng cho việc hiển thị chi tiết sản phẩm trong catagory này
+ Tab Images / Auto-Create Thumbnail: Tự động tạo ảnh nhỏ từ ảnh chính được upload lên
Quản lý danh sách sản phẩm (Truy cập Product / List Product)
+ Tab Product Information
- Publish: bật sản phẩm này luôn hay không?
- SKU: mã sản phẩm
- Name: tên sản phẩm
- Categories: danh mục sản phẩm chứa sản phẩm này(có thể chọn nhiều category)
- Product Price (Net): giá sản phẩm chưa bao gồm thuế
- VAT Id: loại mức thuế
- Discount Type: loại mức giảm giá
- Short Description: mô tả ngắn về sản phầm - sẽ hiển thị ở trang danh sách sản phẩm
- Product Description: mô tả chi tiết sản phẩm - hiển thị ở trang chi tiết sản phẩm
+ Tab Display Options: tùy chọn hiển thị cho sản phẩm này
+ Tab Product Status:

- In Stock: số lượng sản phẩm còn trong kho
- Minimum Purchase Quantity: số lượng mua tối thiểu
- Maximum Purchase Quantity: số lượng mua tối đa
- Availability Date: thời điểm có hàng - mặc định là thời điểm hiện tại khi thêm sản phẩm
- Availability: Thông báo bất kỳ - ví dụ như khoảng thời gian có hàng từ khi khách hàng đặt(kết hợp với
tùy chọn select image bên dưới)
- On Special: đánh dấu là sản phẩm đặc biệt
- Attribute List: tùy chọn các thuộc tính thêm(ngoài các thuộc tính sẵn có)
+ Tab Product Dimensions and Weight
- Cấu hình chiều dài, chiêu cao, chiều dài, đơn vị đo chiều dài, khối lượng, đơn vị đo khối lượng, đơn vị
Web Design 2 Kent International College
Website Development and Multimedia Course 22
hàng hóa, số đơn vị hoàng hóa trong 1 gói hàng, số lượng đơn vị hàng hóa trong 1 hộp
+ Tab Product Images
- Tải lên hình ảnh của sản phẩm - Tích chọn Auto-Create Thumbnail để hệ thống tự động tạo ảnh nhỏ của
sản phẩm
2. Cấu hình Virtuemart
2.1 Cấu hình
Bỏ chọn
Chọn thẻ Site
Chọn vào Edit Store
Web Design 2 Kent International College
Website Development and Multimedia Course 23
2.2 Cài đặt Themes
Chép Themes từ: source\themes\shop Đến components\com_virtuemart\themes
Quay về VM
Tạo các danh mục sản phẩm
Web Design 2 Kent International College
Website Development and Multimedia Course 24
2.3 Nhập sản phẩm vào các danh mục

Web Design 2 Kent International College
Website Development and Multimedia Course 25
2.4 Tạo menu để show các danh mục sản phẩm
\source\shopper_frenzy\mod\mod_s5_vm_accordion
Cài đặt bộ accordion menu style từ Folder: