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

KHOA KINH TẾ VÀ KINH DOANH QUỐC TẾ

------
Tài liệu hướng dẫn thực hành
Xây dựng Website Cổng thông tin và Cửa hàng trực tuyến
Dành cho K44 – KTĐN
Biên soạn: ThS. Nguyễn Văn Thoan
ThS. Nguyễn Quang Trung
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
1
 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.
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ị
2
 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 đó
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ị
Phần mở rộng (cột 5)  Quản lý Mô đun (dòng 2)
3
 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
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
4
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
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.
5
 Ở 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
- 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.
6
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 vài 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://itc.ftu.edu.vn