Chương 14.

Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

GIÁO TRÌNH
THƯƠNG MẠI ĐIỆN TỬ VÀ ỨNG DỤNG THƯƠNG MẠI ĐIỆN TỬ
TRONG DOANH NGHIỆP

MÃ MÔN HỌC: TMĐT

CHƯƠNG 14. THỰC HÀNH XÂY DỰNG WEBSITE

THƯƠNG MẠI ĐIỆN TỬ VÀ CỬA HÀNG TRỰC TUYẾN

Thời gian: 2 buổi x 3 tiếng

Mục tiêu bài giảng:

 Các công nghệ xây dựng website thương mại điện tử

 Máy chủ web, Hệ quản trị cơ sở dữ liệu, Ngôn ngữ lập trình web
 Cài đặt và quản lý website thương mại điện tử
 Cài đặt và quản lý cửa hàng trực tuyến
 Nâng cấp và phát triển website thương mại điện tử
 Thực hành: Hợp đồng điện tử, thanh toán điện tử

Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 1
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

TÀI LIỆU HƯỚNG DẪN THỰC HÀNH

Phần 1. CÀI ĐẶT WEBSITE

1. Cài đặt Xampp
Chạy file Xampp trong thư mục tài nguyên
Sử dụng bản Xampp 1.6.7, có thể download tại địa chỉ http://itc.ftu.edu.vn hoặc
http://www.apachefriends.org/ Mục đích: Cài đặt máy chủ web Apache và Hệ
quản trị cơ sở dữ liệu MySQL
2. Tạo cơ sở dữ liệu cho website
Mở FireFox hoặc IE; Vào địa chỉ: http://localhost/xampp
Chọn PhpMyadmin trong mục Tools
Nhập vào Tên cơ sở dữ liệu (vd. mobile_data) và chọn kiểu dữ liệu
utf8_general_ci (để hỗ trợ tiếng Việt cho website sau này). Sau khi chọn xong
nhấn và Create để thực hiện việc tạo CSDL. Lưu ý: Ghi nhớ tên cơ sở dữ liệu để
dùng trong quá trình cài đặt website.
3. Cài đặt website
Sử dụng bộ cài Joomla phiên bản 1.5.6 (có thể download tại:
http://itc.ftu.edu.vn hoặc www.joomla.org)
Copy nội dung website vào trong thư mục C:\xampp\htdocs
Lưu ý 1: Nếu giải nén bộ cài website cần giải nén vào 1 thư mục để sau đó đổi
tên và thực hiện cài đặt.
Lưu ý 2: Trong htdocs, mỗi thư mục chứa toàn bộ nội dung một website, có thể
cài đặt nhiều website trên cùng một máy chủ.
Vd. sau khi giải nén, đổi tên thư mục website thành mobile, khi đó đường dẫn
đến website có dạng C:\xampp\htdocs\mobile (lưu ý: trong thư mục mobile lúc
này chứa toàn bộ nội dung website)
Để khởi động quá trình cài đặt website, chạy FireFox hoặc IE
Nhập vào địa chỉ: http://localhost/mobile (để khởi động quá trình cài đặt cho
website mobile – nội dung trong thư mục ..htdocs/mobile)
Lưu ý: nếu sử dụng thư mục khác thì gọi đường dẫn theo tên thư mục đó.
Ví dụ: thư mục ..htdocs/laptopmart thì đường dẫn là
http://localhost/laptopmart.
Thực hiện đủ 7 bước để cài đặt theo hướng dẫn của bộ cài !
Lưu ý:
Tại bước số 1, chọn ngôn ngữ là tiếng Việt để dễ theo dõi
Tại bước số 2, 3 ấn Next/Tiếp theo
Tại bước số 4: nhập vào localhost, root, mật khẩu để trống, tên cơ sở dữ liệu
đã tạo ở bước 2 (vd. mobile_data) – Lưu ý đọc kỹ hướng dẫn trên màn hình cài
đặt tại bước này để điền chính xác thông tin vào các ô tương ứng.
Bước 5, next
Bước 6, nhập vào tên website, email, mật khẩu quản trị, lưu ý: Nhớ mật khẩu
này để sử dụng sau này.
Bước 7, hoàn tất viêc cài đặt bằng cách xóa thư mục Installation nằm trong thư
mục Mobile ở trên.

Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 2
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

4. Mở website để xem: Dùng địa chỉ: http://localhost/mobile

5. Quản trị website: Dùng địa chỉ: http://localhost/mobile/administrator
Nhập vào tên đăng nhập (admin) và mật khẩu (đã đặt trong bước 6 ở phần cài
đặt). Lưu ý: Để thuận tiện trong quá trình thực hành và kiểm tra, các nhóm đặt
mật khẩu chung là tmdt2008.
6. Đối với các nhóm muốn đưa website vào hoạt động sau này cần:
Sử dụng tên website dạng: tenwebsite.ftu.edu.vn thì không mất phí. Lưu
trữ tại FTU miễn phí 5 năm.

Phần 2. QUẢN LÝ WEBSITE

1. Cài đặt Tiếng Việt
Vào phần Quản trị: http://localhost/mobile/administrator
Nhập vào tên và mật khẩu
Vào phần Extensions (ở cột thứ 5)
Chọn Install (ở dòng 1)
Tại giao diện cài đặt, Browse đến thư mục tài nguyên, chọn file nén vi-VN.rar,
sau đó ấn vào nút cài đặt (để cài đặt tiếng Việt cho phần người dùng).
Tiếp tục Browse đến thư mục trên, chọn tiết vi-VN_admin để cài tiếng Việt
cho phần Quản trị. Sau khi cài đặt xong, chọn Extensions, tại dòng thứ 5 chọn
tiếp Language Manager, kích chọn ô Tiếng Việt ở từng phần Front end và
Administration, sau đó ấn và nút Default để xác nhận. Sau bước này, website
hiển thị các hướng dẫn bằng tiếng Việt ở cả phần Frontend và Backend.
2. Thay đổi banner
Tùy từng template mà website sẽ sử dụng.
Khuyến khích các nhóm chọn từng Template tùy ý và nghiên cứu sử dụng
Lưu ý : Giảng viên sẽ hướng dẫn cụ thể cách thay banner và logo cho 1 hoặc 2
template.
Mỗi template có 1 thư mục riêng chứa ảnh, style và các tài nguyên liên quan. Để
chỉnh sửa logo, chọn thư mục template, sau đó chọn thư mục có tên của template
đang dùng tìm đến ảnh đang dùng làm logo và thay vào đó 1 ảnh mới.
Ví dụ template mặc định khi cài xong website có tên là ‘rhuk_milkyway’. Để
sửa logo của template này từ thư mục website, chọn template->rhuk_milkyway-
>images. Trong thư mục đó có 1 file ảnh ‘mw_joomla_logo.png’ đang được
dùng làm logo. Để thay logo, cách đơn giản nhất là thiết kế 1 cái ảnh khác có
cùng kích thước, tên và loại file với file này, sau đó copy thay vào trong thư mục
đó.
3. Quản lý Main Menu
Vào phần Quản trị
Chọn Trình đơn (ở cột 2), chọn Main Menu (ở dòng thứ 3)
Muốn sửa Menu nào, kích chuột thẳng vào Menu đó để chỉnh sửa
Vd. Home  Trang chủ; Products  Sản phẩm
4. Quản lý Top Menu
Trong phần Quản trị
Chọn Trình đơn, chọn Top Menu (ở dòng thứ 5)
Trong đó có 4 menu con, để sửa menu nào, kích chuột vào menu đó
Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 3
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

Sửa tên trong bảng cấu hình và Save lại (nút save góc trên, bên phải)
5. Quản lý Menu bên trái
Tắt hai mục Main Menu và Other Menu ở cột bên trái
- Vào phần quản trị
- Vào Phần mở rộng  Quản lý Module  Tại cột ví trí, chọn Left để hiển thị
các module ở cột bên trái.
- Lần lượt kích vào nút dấu tích màu xanh để tắt các menu Main menu và Other
menu
- Ra trang mặt tiền để kiểm tra (ấn F5 hoặc Refresh để kiểm tra kết quả)
Lưu ý: Các vấn đề cụ thể, hỏi giảng viên hướng dẫn.
6. Đổi tên các module bên trái
Vào phần quản trị
Vào Phần mở rộng  Quản lý Module  Tại cột thứ 3, Chọn vị trí, chọn Left.
Các module của cột bên trái được sắp sếp đúng thứ tự
Muốn sửa tên module nào, kích chuột vào đó và sửa tên, sau đó Save lại.
Lưu ý: Module này là mô đun thuộc phần quản lý cửa hàng, sẽ thực hành chi
tiết ở phần sau. Đây là loại module Article Categories cho phép hiển thị các
nhóm tin (categories)
7. Tạo một khối MENU để quản lý tin, hiển thị ở bên trái gồm các nội dung
sau
GIỚI THIỆU SẢN PHẨM
Sam sung
Nokia
Motorola
BenQ
Mục đích: Khi kích vào các menu này sẽ hiện ra thông tin giới thiệu chung về
từng loại sản phẩm đó. Đây là Menu tin giới thiệu về các hãng, dòng sản phẩm.
Các bước cụ thể như sau:
Trước hết vào phần Quản trị
i. Nội dung (cột 3)  Quản lý nhóm tin  Thêm mới (bên phải, trên)
Đặt tên Nhóm tin (Section) là: SẢN PHẨM
ii. Nội dung  Quản lý chủ đề con  Thêm mới
Thêm lần lượt các chủ đề con tương ứng với Samsung, Nokia, Motorola,
BenQ.
Lưu ý : khi thêm, đặt tên và chọn chủ đề con nằm trong nhóm tin là SẢN PHẨM
đã tạo ở bước trên.
ii. Tạo khối MENU tương ứng với Nhóm tin SẢN PHẨM (để khi kích vào
Menu đó sẽ hiển thị tin ra ngoài trang chủ).
Vào phần quản trị
Trình đơn (cột 2)  Quản lý Menu (dòng 1)
Thêm mới, lưu ý điền cả 4 ô là : SẢN PHẨM sau đó Lưu lại.
Lưu ý : Bước này mởi chỉ tạo ra Khối menu, chưa có menu cụ thể link đến các
hãng.
iii. Hiển thị Menu ra ngoài, đặt tại cột bên trái, vị trí đầu tiên
Vào phần quản trị
Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 4
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

Phần mở rộng (cột 5)  Quản lý Mô đun (dòng 2)

Tìm mô đun có tên là SẢN PHẨM vừa tạo, kích chuột vào đó để cấu hình . Lưu
ý : Chọn các nút : Cho hiển thị tiêu đề, Đã bật, vị trí là Left . Sau đó Lưu lại.
Ra ngoài kiểm tra (ấn F5 hoặc reFresh). Lưu ý : Sau bước này, trên trang chủ
mới chỉ có Tên tiêu đề Menu to, chưa có các menu con trong đó.
Tiếp tục tạo các Menu con
- Vào phần quản trị
- Trình đơn (cột 2)  SẢN PHẨM (dòng cuối)
- Thêm mới  Các bài viết/Article Giao diện chủ đề con dạng Blog layout
 Nhập vào đủ các thông tin ở những ô : Tiêu đề, Alias và Chủ đề con tương
ứng với tên Menu con đó, ví dụ : menu là Samsung thì Chủ đề con chọn là
Samsung.
Sau đó Lưu lại và ra ngoài kiểm tra.
Lần lượt tạo đủ các Menu con tương ứng với các loại sản phẩm đã dự kiến.
ưu ý : Khi kích vào các Menu con là đều chưa có tin chi tiết do chưa tạo tin
trong các thư mục tin để hiển thị ra ngoài.
8. Tạo tin cho các Menu trên
Vào phần quản trị
Nội dung (cột 3)  Quản lý bài viết (dòng 1)
Thêm mới
Nhập vào các nội dung của bài viết :
- Tiêu đề
- Alias
- Chọn : Chủ đề
- Chọn : Chủ đề con
- Nhập vào Nội dung
- Chèn Ảnh
- Chèn Phim
Sau đó Lưu
Ra ngoài và kiểm tra
Việc chèn ảnh, phim vào từng tin theo sự hướng dẫn của giảng viên.
Tiếp tục tạo thêm một khối Menu với nội dung sau :
Tạo một Section là CÁC DỊCH VỤ,
Tạo 3 Categories với tên là: Đào tạo, Tư vấn, Dịch vụ khách hàng
Mỗi category tạo 5 tin với đầy đủ hình ảnh, phim, nhạc.
Phần 3. QUẢN LÝ CÁC MODULE CHỨC NĂNG TRÊN WEBSITE
9. Biên tập đường dẫn Breadcrumbs
Chọn Phần mở rộng-> Quản lý mô –đun->Breadcrumbs
Gõ nội dung vào ô Dòng chữ cho mục Trang chủ, sau đó ấn nút Lưu ở góc
phải-trên
10. Biên tập menu: popular news
Chọn Phần mở rộng-> Quản lý mô –đun->Popular (ở trang 2)
Sau đó chỉnh các tham số như tiêu đề, vị trí,... và ấn nút Lưu ở góc phải –trên
Đổi tên thành TIN NỔI BẬT
11. Biên tập menu: latest news
Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 5
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

Chọn Phần mở rộng-> Quản lý mô –đun->Latest News (ở trang 2)

Sau đó chỉnh các tham số như tiêu đề, vị trí,... và ấn nút Lưu ở góc phải -trên
Đổi tên thành TIN MỚI NHẤT
12. Biên tập lời dẫn trên trang chủ: Welcome to Frontpage  Chào mừng
bạn đến với Website ThegioiMobile.
Chọn Trình đơn-> Main menu-> Home (chú ý hàng có dấu sao màu vàng ở cột
Mặc định), chọn Các tham số - Hệ thống, đổi nội dung vào ô Tiêu đề trang
thành Chào mừng bạn đến với Website ThegioiMobile.
13. Biên tập tiêu đề các tin trên trang chủ (Frontpage Manager)
Chọn Nội dung-> Quản lý trang chủ. Muốn sửa tiêu đề bản tin nào, chọn bản
tin đó. Gõ lại tiêu đề bản tin trong ô Tiêu đề, và các thông tin khác nếu cần, sau
đó ấn nút Lưu ở góc phải –trên.
14. Biên tập Module Polls
- Chọn Components->Thăm dò, chọn Thêm mới, sau đó nhập tiêu đề, Alias, ấn
Yes ở lựa chọn đã được bật và nội dung của các lựa chọn. Sau đó ấn nút Lưu ở
góc phải –trên.
- Chọn Phần mở rộng -> Quản lý Mô đun, chọn nút Mới (phải - trên), chọn Loại
Thăm dò ý kiến (cột 2, hàng 6). Nhập tiêu đề, đã bật, vị trí,... chọn Thăm dò ý
kiến trỏ tới phiếu thăm dò mới tạo ở bước trên.
15. Biên tập Advertising
Luu ý: Tạo Ads mới trong Components/Banners/Banners; tạo bằng copy các ads
cũ, rồi chỉnh sửa; sau đó cấu hình module Quảng cáo trong Module Managers để
hiển thị các banner quảng cáo trên website.
Lưu ý: Chèn ảnh vào các quảng cáo trong Advertising bằng cách thêm dòng
lệnh trỏ đến ảnh cần chèn.
- Chọn Components->Bảng quảng cáo-> Thể loại, chọn thêm mới, nhập
tiêu đề, alias, đã được bật,.. sau đó ấn nút Lưu.
- Chọn Components->Bảng quan cáo->Các khách hàng, chọn thêm mới,
nhập các thông tin cần thiết, sau đó ấn lưu.
- Chọn Components->Bảng quảng cáo->Bảng quảng cáo, chọn thêm mới,
nhập các thông tin tương ứng, nhập nội dung quảng cáo, đường dẫn hình ảnh
vào ô Tùy chọn mã quảng cáo sau đó ấn Lưu.
- Chọn phần mở rộng-> quản lý mô đun, chọn nút mới, chọn bảng quảng
cáo, nhập các thông tin tiêu đề, alias, đã bật, vị trí, bảng quảng cáo của
khách, chủ đề con,... sau đó ấn Lưu.
16. Thực hành nâng cao:
Khuyến khích các nhóm tự tìm hiểu và cài đặt thêm các Component,
Module mới cho website để thể hiện ý tưởng của mình.
Nghiên cứu và sử dụng các Component, Module mở rộng trên website:
www.joomla.org, phần Extension.
Lưu ý: Đối với các module bổ sung, để được tính điểm thưởng, các nhóm
phải ghi lại trong báo các cách cài đặt và phương pháp sử dụng và người chịu
trách nhiệm chính đối với các phần mở rộng đó.
17. Các thao tác để sao lưu và khôi phục lại website

Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 6
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

Lưu ý: Các nhóm khi làm bài tập thực hành không đặt mật khẩu cho cơ
sở dữ liệu để nộp và trình chiếu thuận tiện. Tài khoản quản trị dùng chung là:
admin/tmdt2008. Những website tốt sẽ được giữ làm bài mẫu để khóa sau tham
khảo hoặc được hỗ trợ lưu trữ miễn phí để các nhóm sử dụng sau này.
Ở bước 1, sau khi cài xong xampp, mặc định máy tính sẽ sinh ra một thư
mục xampp trên ổ C. Trong đó có 2 thư mục quan trọng đó là htdocs và mysql.
Thư mục htdocs chứa mã nguồn của các website, còn thư mục mysql chứa
dữ liệu của các website.
Để sao lưu 1 website cụ thể nào đó, copy thư mục có tên là tên website
tương ứng trong htdocs và thư mục dữ liệu tương ứng trong mysql\data.
Khi nào cần khôi phục thì copy ngược lại từ nơi backup sang chính xác 2
thư mục tương ứng trên.
Ví dụ website có tên là mobile, copy thư mục mobile vào trong thư mục
htdocs, còn trong mysql\data copy thư mục mobile_data vào đó.
Phần 4. Cài đặt cửa hàng trực tuyến VirtueMart
1. Cài đặt cửa hàng trực tuyến
Sử dụng bộ cài VirtueMart_1.1.2-COMPLETE_PACKAGE.j15.zip.
Download tại website: http://itc.ftu.edu.vn hoặc www.virtuemart.com
- Giải nén bộ cài VirtueMart_1.1.2-COMPLETE_PACKAGE.j15.zip ra
một thư mục nào đó, trong thư mục đó có thư mục con module, plugins và một
bộ cài com_virtuemart_1.1.2.j15.zip.
- Để cài cửa hàng trực tuyến, chọn Phần mở rộng-> Cài đặt/Tháo gỡ, chọn
Browse tìm đến file com_virtuemart_1.1.2.j15.zip, sau đó ấn nút Tải tập tin lên
& cài đặt. Chọn Install SAMPLE DATA >> để cài đặt dữ liệu mẫu, ấn OK, chờ
cho đến khi chương trình cài xong.
2. Cấu hình cửa hàng trực tuyến để hiển thị trên trang chủ
- Chọn Phần mở rộng->Cài đặt/Tháo gỡ, chọn nút Browse, chọn đến thư
mục module mới được giải nén từ bộ cài cửa hàng trực tuyến, chọn module
mod_virtuemart_1.1.2.j15.zip, sau đó chọn nút Tải tập tin lên & cài đặt.
- Chọn Phần mở rộng-> Quản lý mô đun, chọn VirtueMart Module, chọn
đã bật là Yes, và chỉnh các tham số cần thiết khác, sau đó ấn nút Lưu.
3. Cài đặt gói ngôn ngữ tiếng Việt cho Cửa hàng trực tuyến
Cách 1
- Gỡ nén bộ cài tiếng việt cho cửa hàng trực tuyến
Language_Pack_for_VirtueMart_1.1.2, trong đó sẽ có 1 thư mục có tên là
languages.
- Copy thư mục languages vào thư mục website\administrator\
components\com_virtuemart
- đổi tên các file vietnames thành english trong tất cả các thư mục trong
language.
Cách 2:
- Vào thư mục website  administrator  components 
com_virtuemart language
- mỗi thư mục con của thư mục trên có 1 tệp english.php tương ứng

Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 7
Chương 14. Thực hành Xây dựng website thương mại điện tử và Cửa hàng trực tuyến

- mở các tệp đó ra, và thay trực tiếp nội dung tiếng việt cho các từ tiếng
anh tương ứng.
4. Tạo 5 nhóm sản phẩm, mỗi nhóm tạo 3 nhóm con
Chọn Components->Virtuemart, chọn Category Tree, chọn New, sau đó nhập
các thông tin cần thiết như tên category,...
Nếu tạo “nhóm con” thì phải chọn “nhóm cha” tại ô Parent.
Sau khi nhập đủ thông tin ấn nút Save.
5. Cập nhật 5-10 sản phẩm cho mỗi nhóm con (tổng cộng 75-150 sản phẩm)
Chọn Components->Virtuemart, chọn Sản phẩm, sau đó chọn Thêm nhập các
thông tin cần thiết sau đó ấn nút Save.
6. Đóng vai trò khách hàng, tự đăng ký một tài khoản là: kh1/abc123 hãy
thực hiện quá trình đặt hàng
-Từ giao diện trang chủ, chọn Đăng ký, điền đầy đủ các thông tin sau đó ấn nút
Đăng ký
7. Đóng vai trò quản trị vào kích hoạt tài khoản khách hàng
Từ giao diện quản trị, chọn Quản lý thành viên, ấn chuột trái vào biểu tượng ô
tròn đỏ tại cột Đã được bật để kích hoạt tài khoản của khách hàng.
8. Thực hiện quá trình mua hàng:
- Tại giao diện trang chủ, gõ tên đăng nhập và mật khẩu đã đăng ký vào ô Tên
đăng nhập và mật khẩu, sau đó ấn nút Đăng nhập, chọn các sản phẩm cần
mua, chọn Add to Cart, tiếp tục mua các sản phẩm khác tương tự. Muốn xem
giỏ hàng, chọn nut Show cart bên dưới Cửa hàng điện tử.
- Muốn kết thúc mua hàng, chọn Check Out, điền đầy đủ thông tin vào đơn
hàng, sau đó ấn nút Send Registration, kiểm tra thông tin của đơn hàng, nhập
thông tin địa chỉ giao hàng nếu địa chỉ giao hàng không cùng địa chỉ của chủ tài
khoản, sau đó ấn Next.
- Chọn hình thức vận chyển, sau đó ấn Next.
- Chọn hình thức thanh toán, sau đó ấn Next
- Nhập thông tin cần lưu ý nếu có, sau đó ấn Confirm Order để xác nhận đơn
hàng
9. Đóng vai trò quản lý cửa hàng vào kiểm tra tình trạng các đơn hàng
Chọn Components->Virtuemart, sau đó chọn Order->List Order để xem và xử
lý các đơn hàng.
Lưu ý: Sau khi hoàn thành các bài tập thực hành trên, các nhóm lập báo cáo
công việc chung của nhóm và công việc cụ thể của từng thành viên theo hướng
dẫn trên website: http://elearning.ftu.edu.vn

Trường Đại học Ngoại thương – Bộ môn Thương mại điện tử, tháng 9.2008, V1 8