bai tap thuc hanh tmdt 2 15

Bài tập thực hành xây dựng website Thương mại điện tử 2015
Yêu cầu:
1. Cài đặt Joomla
2. Font End và Back End (Front-end là các trang Web mà người dùng thấy
khi vào Website. Back-end là phần quản lý Website dành riêng cho các
quản trị (Admin).
3. Quản lý Menu và Benner
4. Thành phần mở rộng (Ngôn ngữ, từ điển…)
5. Components (Contact Manager cho phép bạn quản lý một danh sách các
contact (liên hệ) trong site.
6. Template (Các trang Web được xây dựng thường có một kiểu hiển thị
chung dựa trên một mẫu gọi là Template.)
7. Quản lý nội dung (Quản lý nội dung là công việc quan trọng và thường
xuyên của quản trị Website (Admin). Admin sẽ thực hiện các công việc
liên quan tới các section, category, content,…)
8. Virtuemart component (Nội dung phần này sẽ hướng dẫn các bạn sử dụng
Virtuemart component để xây dựng website bán hàng.)
9. Backup và Restore (giới thiệu cách backup và restore dữ liệu bằng PHP
MyAdmin)
10.Upload file lên host (Nội dung bài học này sẽ hướng dẫn các bạn cách
Upload website lên server)

Bộ môn QTKD TH

Trang 1


Bài tập thực hành xây dựng website Thương mại điện tử 2015
1. Cài đặt Joomla
Trong phần này sẽ hướng dẫn xây dựng website bằng Joomla, một trong những
hệ thống quản trị nội dung dựa trên nền tảng mã nguồn mở tốt nhất hiện nay, nội

dung sẽ tập trung vào hướng dẫn cài đặt Joomla.
Download tập tin Joomla từ website
CÁC TÀI NGUYÊN CẦN THIẾT ĐỂ CÀI ĐẶT WEBSITE JOOMLA

1.1 Cài đặt Xampp
Cài đặt (chạy) xampp-win32-1.7.2.exe vào thư mục gốc C:\ hoặc D:\ chọn
Install

Chạy file xampp-control.exe trong thư mục xampp

Chạy Apache, My SQL từ nút Start tương ứng

Khi thấy xuất hiện Running cạnh các dịch vụ trên thì tắt panel này từ nút close (X)
Bộ môn QTKD TH

Trang 2


Bài tập thực hành xây dựng website Thương mại điện tử 2015
1.2. Cài đặt website Joomla
- Giải nén file Joomla_tueba.rar tới thư mục htdoc trong thư mục xampp sau
đó đổi tên Joomla_tueba thành tên CSDL ví dụ: tmdt

Địa chỉ cần
giải nén

- Mở trình duyệt web, nhập địa chỉ http://localhost/tmdt

Bước 1: Lựa chọn ngôn ngữ sau đó chọn Next

Bước 2: Xuất hiện màn cửa sổ sau chọn tiếp để tiếp tục

Bước 3: chọn tiếp
Bộ môn QTKD TH

Trang 3


Bài tập thực hành xây dựng website Thương mại điện tử 2015
Bước 4: Xuất hiện cửa sổ Cấu hình dữ liệu

Nhập Localhost
Nhập root
Mật khẩu bỏ trống
trống
Nhập tmdt
Bước 5: Chọn Tiếp để tiếp tục, xuất hiện cửa sổ tiếp theo

Bước 6: Đặt tên cho website đang cài đặt vào mục Site name
Nhập tên
cho Website
Nhập email
để hoàn
Nhập mật
khẩu quản trị
Sau khi nhập các
thông tin chọn
cài đặt dữ liệu

Bộ môn QTKD TH

Trang 4


Bài tập thực hành xây dựng website Thương mại điện tử 2015
Bước 7: hoàn thành bằng cách xóa hoặc đổi tên thư mục installation trong thư
mục xampp\htdocs\tmdt

- Chọn Site (trang web) để vào website hoặc chọn Admin (quản trị) để vào
chức năng quản trị website

Bộ môn QTKD TH

Trang 5


Bài tập thực hành xây dựng website Thương mại điện tử 2015
2. Font End và Back End
2.1 Giới thiệu Font-end
Front-end là các trang Web mà người dùng thấy khi vào Website.
Front-end hiển thị nội dung của Website và là nơi người dùng có thể thực
hiện các công việc: đăng ký, đăng bài trên Website
Mở trình duyệt web, nhập địa chỉ http://localhost/tmdt

Giao diện thiết kế website Jooma
Các thành phần khác của Front End ( đăng nhập, quảng cáo, nội dung bài viết...)
2.2 Giới thiệu back-end
Back-end là phần quản lý Website dành riêng cho các quản trị (Admin).
Admin có thể cấu hình các thông số hoạt động, nội dung, hình thức,…
Các thành phần của Back-end bao gồm: Control Panel, Menu,

Information, Các thao tác thường dùng
Mở trình duyệt web, nhập địa chỉ http://localhost/tmdt/administrator

Nhập username
và password để
đăng nhập
(mật khẩu chính là mật khẩu quản trị đã thiết lập ở phần cài đặt)
Bộ môn QTKD TH

Trang 6


Bài tập thực hành xây dựng website Thương mại điện tử 2015

Control panel

Menu - Thiết kế website Joomla

Thông tin web
Bộ môn QTKD TH

Trang 7


Bài tập thực hành xây dựng website Thương mại điện tử 2015

Thao tác với các chức năng trên toolbar



Publish: làm cho nội dung có hiệu lực
 Unpublish: làm cho nội dung không có hiệu lực
 Copy: Copy nội dung
 Delete hoặc Trash: Xóa nội dung
 Edit: Chỉnh sửa nội dung
 New: Thêm mới nội dung
 Help: Hiển thị phần trợ giúp của Joomla
 Save hay Apply: Lưu nội dung
 Cancel: Hủy thao tác
Qua phần này, các bạn đã được làm quen với các thành phần của giao diện cũng
như của trang quản trị website bằng joomla.

Bộ môn QTKD TH

Trang 8


Bài tập thực hành xây dựng website Thương mại điện tử 2015
3. Quản lý Menu và Benner
3.1. Giới thiệu về Menu
Trong website Joomla, để di chuyển qua lại giữa các trang web, ta thường
click vào các liên kết (link), các liên kết này nằm trong một vùng được gọi là
Menu.
Menu
Các Menu Item

Tạo Menu
Sau khi cài đặt VirtueMart thì cần phải tạo Menu cho nó để hiển thị các
sản phẩm trên trang web. Cách thực hiện cũng giống như những Menu thông
thường, tuy nhiên VitrueMart có thêm các thông số để tạo nhiều kiểu Menu khác

nhau. Sau đây là cách tạo Menu cho Component Virtuemart.
Trong phần Quản lý (Administrator) của Joomla!, truy cập vào Menus và chọn
Man Menu* (Trình đơn) nào muốn tạo Menu Item (Danh mục) cho
VirtueMart.

Nhấn New để tạo một Menu Item mới.

Chọn VirtueMart trong Menu Item Type

Bộ môn QTKD TH

Trang 9


Bài tập thực hành xây dựng website Thương mại điện tử 2015
Đặt tên cho Menu này ví dụ: Sản phẩm hot nếu muốn hiển thị VirtueMart theo
dạng chuẩn thì không cần thiết lập thêm thông số gì. Nhấn Save để hoàn tất.

Nếu muốn hiển thị VirtueMart theo các kiểu khác thì thiết lập thêm các thông số
trong phần Parameters (Component). Trong phần này có các tham số sau:











Product ID: Hiển thị trang nội dung chi tiết của một sản phẩm: Nhập
số ID của sản phẩm muốn hiển thị.
Category ID: Hiển thị các sản phẩm trong một Danh mục Nhập số ID của
Danhn mục (Category) muốn hiển thị.
Flypage: Chọn kiểu trang trình bày cho trang Danh mục (Category):
Nhập tên của trang Flypage muốn hiển thị, không bao gồm phần mở
rộng. Nếu muốn dùng trang mặc định thì có thể để trống.
Page: Chọn hiển thị một trang đặc biệt nào đó của VirtueMart: Nhập tên
của trang đó vào, không bao gồm phần mở rộng.
Sau khi thực hiện xong nhấn Save để lưu lại.

Bộ môn QTKD TH

Trang 10


Bài tập thực hành xây dựng website Thương mại điện tử 2015
3.1. Giới thiệu về Benner
Trong Joomla! có tích hợp sẵn một thành phần mở rộng có chức năng tạo
và quản lý Banner, đó là Component Banners và Module Banner. Chức năng
chính của chúng là giúp hiển thị các hình ảnh quảng cáo lên trang web, thống kê
số lượng người xem và nhấn vào quảng cáo.
Sau đây là cách tạo và quản lý các Banner quảng cáo trong Jommla:
Bước 1:
 Tạo hình ảnh dùng để làm Banner và sao chép (copy) chúng vào thư mục
images/banner của Joomla. Hình ảnh này có thể các dạng thông thường
như JPG, GIF, PNG, Animal GIF (ảnh động) hoặc SWF (Flash).

Bước 2:

 Đăng nhập vào phần quản lý (Admin) và chọn Menu Components ->
Banner -> Categories để tạo Category (Chuyên mục) chứa Banner này.

Bước 3:
 Trong Categories, nhấn New để tạo Chuyên mục mới.

Bước 4:
 Đặt tên (Title) cho Chuyên mục này ví dụ: Quảng cáo và giữ nguyên các
thiết lập khác, nhấn Save để lưu lại.

Bộ môn QTKD TH

Trang 11


Bài tập thực hành xây dựng website Thương mại điện tử 2015
Bước 5:
 Chuyển sang phần Client, và nhấn New để tạo danh sách khách đặt bảng
quảng cáo.

Bước 6:
 Nhập các thông tin của khách hàng và nhấn Save để lưu lại.

Bước 7:
 Chuyển sang phần Banners và nhấn New để tạo bảng quảng cáo mới.

Bước 8:












Đặt tên cho Banner trong mục Name.
Đánh dấu chọn Yes trong mục Show Banner để cho phép hiển thị Banner
này.
Nếu muốn cố định Banner thì chọn Yes trong mục Sticky.
Chọn Chuyên mục để chứa Banner trong mục Category.
Chọn tên khách hàng đặt banner này trong mục Client Name.
Nhập địa chỉ liên kết đến trang web của khách hàng vào mục Click URL.
Chọn hình ảnh của Banner trong mục Banner image selector.
Nhập thông số Width (chiều ngang) và Height (chiều cao) của Banner
nếu muốn thay đổi kích thước của Banner.
Hình ảnh của Banner sẽ được hiển thị ngay bên dưới, trong mục Banner
Image.
Sau khi thực hiện xong nhấn Save để lưu lại.

Bộ môn QTKD TH

Trang 12


Bài tập thực hành xây dựng website Thương mại điện tử 2015

Như vậy là một Banner đã được tạo ra, nếu muốn bạn có thể tiếp tục tạo

thêm nhiều Banner khác nữa.
Lưu ý:
 Các Banner có thể của cùng một khách hàng hoặc tạo thêm khách hàng
khác và cũng có thể được đặt trong cùng một Chuyên mục hoặc tạo thêm
Chuyên mục khác nếu cần thiết.
 Banner sau khi được tạo ra và quản lý bằng Component Banner thì cần
phải thông qua Module Banner mới hiển thị được trên trang web.
Bước 9:
 Truy cập vào Menu Extensions -> Module Manager và nhấn New để tạo
Module Banner mới.


Bộ môn QTKD TH

Trang 13


Bài tập thực hành xây dựng website Thương mại điện tử 2015

Bước 10:
 Chọn Banner để tạo một Module Banner mới và nhấn Next.

Bước 11:
 Đặt tên cho Module này và thiết lập các thông số như trong hình. Chọn vị
trí muốn hiển thị Banner trong mục Position.

- Target: Chọn "New Windows with Browser Navigation" để mở một cửa sổ
trình duyệt mới khi nhấn chuột vào bảng quảng cáo.
- Count: Số lượng bảng quảng cáo muốn hiển thị cùng một lúc.
- Banner Client: Chọn Khách hàng đặt quảng cáo, tất cả Banner quảng cáo của

khách hàng này sẽ được hiển thị. Nếu không chọn thì Banner của tất cả các
khách hàng đều được hiển thị.
- Category: Chọn Chuyên mục chứa Banner quảng cáo, tất cả Banner trong
Chuyên mục này sẽ được hiển thị. Nếu không chọn thì Banner trong tất cả các
Bộ môn QTKD TH

Trang 14


Bài tập thực hành xây dựng website Thương mại điện tử 2015
Chuyên mục đều được hiển thị.
- Randomise: Chọn chế độ hiển thị Banner quảng cáo. Nếu chọn "Sticky
Ordering" thì quảng cáo nào được đánh dấu Sticky sẽ được hiển thị trước sau
đó mới tới các quảng cáo có thứ tự được sắp xếp trong phần quản lý Banner.
Nếu chọn "Sticky Randomise" thì quảng cáo được đánh dấu Sticky sẽ được
hiển thị trước sau đó mới tới các quảng cáo còn lại được hiển thị theo thứ tự một
cách ngẫu nhiên.
 Sau khi thết lập xong nhấn Save để lưu lại. Bây giờ các Banner quảng cáo
đã được hiển trị trên trang web.

Lưu ý:
 Tùy theo nhu cầu sử dụng mà có thể tạo một Module Banner để hiển thị
chung nhiều Banner quảng cáo hoặc mỗi Module cho riêng từng Banner
quảng cáo cũng được.
 Bất cứ lúc nào bạn cũng có thể theo dõi các thống kê về số lượt hiển thị
(Impressions) và số lần nhấp chuột (Clicks) vào Banner quảng cáo bằng
cách truy cập vào Components -> Banner -> Banners

Trên đây chi là phần thiết lập các chức năng cơ bản của Banner quảng cáo trong
Joomla! Các thiết lập mở rộng khác như: Sử dụng mã quảng cáo riêng từ các

trang web quảng cáo, quảng cáo giới hạn lượt xem, quảng cáo có chọn lọc theo
"tag",...

Bộ môn QTKD TH

Trang 15


Bài tập thực hành xây dựng website Thương mại điện tử 2015
4. Thành phần mở rộng
4.1. Giới thiệu
 Joomla là một Web miễn phí hoàn chỉnh có đầy đủ các chức năng cơ
bản, tuy nhiên ta có thể bổ sung thêm các tính năng mới cho Joomla khi
cần bằng cách cài thêm các thành phần mở rộng (Component, Module,
Plug-in, Language,…)
 Các tính năng mới này sẽ giúp cho Web Joomla có nhiều chức năng hơn,
phong phú và đa dạng hơn.
 Các thành phần mở rộng có thể là những thành phần đơn cũng có thể là
một gói kết hợp component, module, plug-in,… với nhau.
4.2. Cài đặt thành phần mở rộng (ngôn ngữ)
Cài đặt ngôn ngữ cho site (trang web) và admin (trang quản trị)
Đăng nhập vào phần quản lý (Admin) và chọn Menu Extensions ->
Install/Uninstall

Xuất hiện cửa sổ như sau Chọn Browse

Chọn đường dẫn đến bộ tài nguyên và chọn vi-VN_joomla_lang_site.1.5.15.zip
để cài đặt ngôn ngữ cho site (trang web) sau đó chọn Open

Chọn Uploald File & Install

Tương tự như vậy ta cũng cài đặt ngôn ngữ cho Admin (trang quản trị)

Bộ môn QTKD TH

Trang 16


Bài tập thực hành xây dựng website Thương mại điện tử 2015

Thiết lập ngầm định ngôn ngữ cho Site chọn Extensions->Language Manage

Xuất hiện cửa sổ chọn Site, chọn Vietnamese-VN rồi chọn Default

Tương tự thiết lập ngôn ngữ ngầm định cho Admin Chọn Administrator, chọn
Vietnamese-VN rồi chọn Default
Cài đặt ngôn ngữ cho VirtueMart mở tài nguyên chọn
Language_Pack_for_VirtueMart_1.1.4.zip -> Extract files…

Giải nén vào thư mục như đường dẫn:
xampp\htdocs\tueba\administrator\components\com_virtuemart sau đó
chọn OK

Bộ môn QTKD TH

Trang 17


Bài tập thực hành xây dựng website Thương mại điện tử 2015
Trang Web (Site)

Trang quản trị (Admin)

Trong trang quản trị chọn Component\VirtueMart để vào quản trị bán hàng
Bộ môn QTKD TH

Trang 18


Bài tập thực hành xây dựng website Thương mại điện tử 2015

Bộ môn QTKD TH

Trang 19


Bài tập thực hành xây dựng website Thương mại điện tử 2015
5. Components
5.1. Contact
Giới thiệu
Contact Manager cho phép bạn quản lý một danh sách các contact (liên hệ)
trong site.
Một khi bạn thiết lập các contact của bạn, các visitor sẽ có thể tìm các thông tin
contact và gửi tin nhắn cho contact.
a. Thêm 1 Category
 Bước 1: Vào Menu Components → Contacts→ chọn Categories
 Bước 2: Chọn New để thêm mới Category

Bước 3: Nhập thông tin cho Category và lưu lại
 Kết quả sau khi thêm

b. Thêm 1 Contact
 Bước 1: Vào Menu Components → Contacts → chọn Contacts
 Bước 2: Chọn New để thêm Contact

Bộ môn QTKD TH

Trang 20


Bài tập thực hành xây dựng website Thương mại điện tử 2015


Bước 3: Trong màn hình thêm mới, nhập thông tin cho Contact và chon
Save lưu lại.



Sau khi thết lập xong nhấn Save để lưu lại. Bây giờ contact đã được hiển
trị trên trang web.

Bộ môn QTKD TH

Trang 21


Bài tập thực hành xây dựng website Thương mại điện tử 2015
6. Template
 Các trang Web được xây dựng thường có một kiểu hiển thị chung dựa
trên một mẫu gọi là Template.

 Template dành cho Joomla có rất nhiều kiểu dành cho nhiều lĩnh vực khác
nhau như văn hóa, nghệ thuật, kinh doanh,…
6.1. Cài đặt Template mới
 Bước 1: Download Template mới tại trang
và các trang
khác hoặc tự thiết kế Template.
 Bước 2: Vào menu Extensions → chọn Install/Uninstall Manager



Bước 3: Ở mục Upload Package File, tìm gói Template cần thêm mới, sau
đó click Upload File & Install. Cài đặt template thành công.
Kết quả

6.2. Thay đổi Template
 Bước 1: Vào Extensions → chọn Template Manager
 Bước 2: Trong danh sách các Template hiện có, chọn một Template muốn
thay đổi, sau đó click chọn Default để hoàn thành việc thay đổi Template.

Bộ môn QTKD TH

Trang 22


Bài tập thực hành xây dựng website Thương mại điện tử 2015
6.3. Cập nhật Template
Cấu trúc chung của thư mục Template









CSS: thư mục chứa tập tin template.css (tập tin chứa các định dạng cho
mẫu Template)
Images: thư mục chứa các hình ảnh cần thiết cho Template
index.php: trang chủ
template_thumbnail.png: hình ảnh của template sau khi thiết kế xong
templateDetails.xml: nội dungchi tiết của Template
templates.php: gọi các phương thức để hiển thị Template.

Bộ môn QTKD TH

Trang 23


Bài tập thực hành xây dựng website Thương mại điện tử 2015
7. Quản lý nội dung
Bước 1: Chọn Content – Article Manager – New, xuất hiện hộp thoại điền
thông tin sau đó chọn Save

Title: Tiêu đề bài viết
Alias: tên khác bài viết
Section: vị trí xuất hiện bài viết
Pulished: chọn xuất bản hay không
Front page: có tóm tắt trên đầu trang hay không
Category : phân loại (thường chọn Lastest để bài viết đăng gần nhất sẽ xuất

hiện trước)
Bước 2 : Điền nội dung bài viết cần đăng
Cách chèn ảnh : chọn Image (cuối trang), xuất hiện hộp thoại như hình dưới,
chọn ảnh cần chèn – chọn Insert

Chọn save, bài viết sẽ xuất hiện trên mục News của Menu Layout của trang
web như sau

Bộ môn QTKD TH

Trang 24


Bài tập thực hành xây dựng website Thương mại điện tử 2015
8. Virtuemart component
Nội dung phần này sẽ hướng dẫn các bạn sử dụng Virtuemart component để xây
dựng website bán hàng.
8.1. Giới thiệu Virtuemart component
 Virtuemart là một component của Joomla, được sử dụng để xây dựng
website bán hàng qua mạng.
 Download tại địa chỉ:
8.2. Cài đặt Virtuemart
Bước 1: Truy cập vào trang chủ của VirtueMart và vào mục
Download
Bước 2: Download các file để cài đặt VirtueMart. Có 2 cách thực hiện
 Download các Complete package để cài đặt từng phần cho VirtueMart
(cài component và các module)
 Download file VirtueMart eCommerce Bundle là website Joomla đã cài
đặt và cấu hình sẵn các component và module của VirtueMart.
Chú ý: Trong bài này ta sẽ dùng bản VirtueMart tích hợp sẵn trong Joomla

Bước 3: Chọn Components-> VirtueMart

Trang giao diện

Nâng cấp VirtueMart từ ver 1.1.4 lên ver cao hơn (bản mới nhất)
Bộ môn QTKD TH

Trang 25