BỘ GIÁO DỤC VÀ ĐẠO TẠO

TRƯỜNG ĐẠI HỌC VĂN LANG

KHOA THƯƠNG MẠI
----------------------------

ĐỒ ÁN MÔN HỌC CUỐI KỲ

HỌC PHẦN: PHÁT TRIỂN WEBSITE CĂN BẢN

ĐỀ TÀI:
PHÁT TRIỂN VÀ TRIỂN KHAI MỘT WEBSITE THƯƠNG MẠI ĐIỆN
TỬ HOÀN CHỈNH BẰNG CMS WORDPRESS

Tp. Hồ Chí Minh, 2024

 BỘ GIÁO DỤC VÀ ĐẠO TẠO
TRƯỜNG ĐẠI HỌC VĂN LANG
KHOA THƯƠNG MẠI
----------------------------

ĐỒ ÁN MÔN HỌC CUỐI KỲ

HỌC PHẦN: PHÁT TRIỂN WEBSITE CĂN BẢN

ĐỀ TÀI:
PHÁT TRIỂN VÀ TRIỂN KHAI MỘT WEBSITE THƯƠNG MẠI ĐIỆN
TỬ HOÀN CHỈNH BẰNG CMS WORDPRESS

GIẢNG VIÊN HƯỚNG DẪN : Thầy Trần Vũ Đại

TÊN HỌC PHẦN : Phát triển Website căn bản
MÃ NHÓM LỚP HỌC PHẦN : 232_71MISS40213_01
SINH VIÊN THỰC HIỆN : Nhóm 06

Tp. Hồ Chí Minh, 2024

 MỤC LỤC
Chương 1: Tổng quan ................................................................................................................. 6
1.1 Trình bày về yêu cầu, chức năng của website mà nhóm thực hiện ................................. 6
1.2 Bảng phân công công việc của các bạn trong nhóm......................................................... 7
Chương 2: Triển khai Website ................................................................................................... 8
2.1 Trình bày các bước cài đặt WP trên máy để thực hiện đồ án ........................................... 8
2.2 Trình bày các bước thực hiện xây dựng các chức năng của website .............................. 14
2.2.1 Cài đặt giao diện cho Website ................................................................................ 14
2.2.2 Cài đặt các Plugins .................................................................................................. 15
2.2.3 Tiến hành thiết kế trang con .................................................................................... 16
2.2.4 Thiết kế danh mục sản phẩm với Plugin WooCommerce ....................................... 19
2.2.5 Chỉnh sửa và xóa sản phẩm ..................................................................................... 22
2.2.6 Thêm mã coupon cho đơn hàng............................................................................... 23
2.2.7 Quản lý danh mục đơn hàng .................................................................................... 25
2.6.8 Danh mục phân tích ................................................................................................. 25
2.3 Trình bày các giao diện chức năng sau khi đã hoàn thành website ................................ 26
2.3.1 Trang giới thiệu ....................................................................................................... 26
2.3.2 Sale .......................................................................................................................... 27
2.3.3 Các trang riêng cho từng dòng sản phẩm ................................................................ 29
2.3.4 Trang thanh toán ...................................................................................................... 33
Chương 3: Kết luận và hướng phát triển .................................................................................. 34
3.1 Kết luận .......................................................................................................................... 34
3.2 Hướng phát triển ............................................................................................................. 34
Phụ lục ...................................................................................................................................... 35

3
 DANH MỤC HÌNH ẢNH
Hình 1 Trang bán hành chính ..................................................................................................... 6
Hình 2 Trang thanh toán ............................................................................................................. 7
Hình 3 Footer .............................................................................................................................. 7
Hình 4 Tạo tài khoản đăng nhập Hostinger ................................................................................ 8
Hình 5 Chọn gói Hosting cùng chức năng đi kèm phù hợp ....................................................... 9
Hình 6 Chọn gói thời gian dùng ................................................................................................. 9
Hình 7 Thanh toán gói Hosting của Hostinger ......................................................................... 10
Hình 8 Tiến hành search và chọn Domain phù hợp (Domain trên ảnh là minh họa) ............... 11
Hình 9 Tiến hành thanh toán Domain ...................................................................................... 11
Hình 10 Xác nhận Domain đã được cài đặt thành công ........................................................... 11
Hình 11 Tiến hành Install wordpress từ Hostinger................................................................... 12
Hình 12 Bước 1: tạo tài khoản admin ....................................................................................... 12
Hình 13 Bước 2: chọn mục đích tạo kênh ................................................................................ 12
Hình 14 Bước 3: Chọn tự tạo từ trang web có sẵn hoặc tự làm từ đầu .................................... 12
Hình 15 Bước 4: chọn theme nếu tạo từ đầu ............................................................................ 13
Hình 16 Bước 5: Tự cài đặt plugins hoặc chọn plugins có sẵn ................................................ 13
Hình 17 Bước 6: Khi đã hoàn thành xong tất cả nhấp vào Admin Panel để được chuyển đến
trang Wordpress đã tải .............................................................................................................. 14
Hình 18 Tải và cài đặt theme Rey ............................................................................................ 15
Hình 19 Tải thêm Plugins ......................................................................................................... 15
Hình 20 Tìm Plugins Elementor để thiết kế giao diện Page..................................................... 16
Hình 21 Nhấp vào Install Now => Active ................................................................................ 16
Hình 22 Bấm vào biểu tượng ngôi nhà chọn View site để vào trang Web .............................. 16
Hình 23 Chọn trang con để thiết kế giao diện .......................................................................... 17
Hình 24 Tiến hành thiết kế trang con với Plugin Elementor .................................................... 17
Hình 25 Tạo thanh cuộn kéo ngang .......................................................................................... 17
Hình 26 Danh mục các sản phẩm ............................................................................................. 18
Hình 27 Hình ảnh sản phẩm của thương hiệu .......................................................................... 18
Hình 28 Thanh tiêu đề .............................................................................................................. 18
Hình 29 Form mẫu giải đáp thắc mắc ...................................................................................... 18
Hình 30 Tạo sản phẩm mới ...................................................................................................... 19
Hình 31 Mô tả sản phẩm .......................................................................................................... 19
Hình 32 Iphone 14 thuộc Categories "Iphone" ......................................................................... 19
Hình 33 Thiết lập giá cho sản phẩm ......................................................................................... 20
4
Hình 34 Thiết lập số lượng còn lại của sản phẩm (Còn hay hết) ............................................. 20
Hình 35 Thêm hình ảnh sản phẩm ............................................................................................ 20
Hình 36 Chọn hình ảnh phù hợp .............................................................................................. 21
Hình 37 Publish sản phẩm ........................................................................................................ 21
Hình 38 Sản phẩm đã hiển thị trên trang Web theo phân loại Iphone...................................... 21
Hình 39 Chọn All products....................................................................................................... 22
Hình 40 Chọn Edit nhanh ......................................................................................................... 22
Hình 41 Giao diện Edit nhanh .................................................................................................. 22
Hình 42 Chọn All products....................................................................................................... 23
Hình 43 Giao diện Edit tiêu chuẩn ........................................................................................... 23
Hình 44 Xóa sản phẩm ............................................................................................................. 23
Hình 45 Chọn coupons ............................................................................................................. 24
Hình 46 Chọn Add coupon ....................................................................................................... 24
Hình 47 Nhập tên coupon ......................................................................................................... 24
Hình 48 Thiết lập % giảm giá................................................................................................... 24
Hình 49 Giao diện quản lý đơn hàng ........................................................................................ 25
Hình 50 Giao diện chi tiết đơn hàng......................................................................................... 25
Hình 51 Trang giới thiệu .......................................................................................................... 26
Hình 52 Footer .......................................................................................................................... 27
Hình 53 Các mục liên quan bên dưới trang Sale ...................................................................... 28
Hình 54 Trang Sản pẩm Sale .................................................................................................... 28
Hình 55 Dòng sản phảm Iphone ............................................................................................... 29
Hình 56 Dòng sản phẩm Samsung ........................................................................................... 29
Hình 58 Dòng sản phẩm Xiaomi .............................................................................................. 30
Hình 57 Các loại đồng hồ ......................................................................................................... 30
Hình 60 Tablet .......................................................................................................................... 31
Hình 59 Cameras ...................................................................................................................... 31
Hình 61 Tai nghe & Headphone ............................................................................................... 32
Hình 62 Ốp lưng điện thoại ...................................................................................................... 32
Hình 63 Trang phụ kiện gồm đồng hồ và ốp lưng.................................................................... 32
Hình 64 Giao diện đặt hàng ...................................................................................................... 33
Hình 65 Giao diện thanh toán ................................................................................................... 33

5
Chương 1: Tổng quan
1.1 Trình bày về yêu cầu, chức năng của website mà nhóm thực
hiện
Nhóm đã thực hiện và thành lập thành công trang web theo các yêu cầu sau:
A. Thực hiện được các chức năng với vai trò quản trị:
✓ Quản lý danh mục sản phẩm
✓ Quản lý sản phẩm
✓ Quản lý khách hàng
✓ Quản lý đơn đặt hàng của khách hàng
✓ Các chức năng thống kê
B. Thực hiện được các chức năng với vai trò người dùng bên ngoài:
✓ Xem danh sách các sản phẩm theo loại, các sản phẩm mới nhất, các sản phẩm
bán chạy nhất
✓ Tìm kiếm sản phẩm
✓ Xem chi tiết một sản phẩm
✓ Quản lý giỏ hàng, đặt hàng

Một vài hình ảnh sơ lược về Website của nhóm:

Hình 1 Trang bán hành chính

6
 Hình 2 Trang thanh toán

Hình 3 Footer

1.2 Bảng phân công công việc của các bạn trong nhóm

Đóng
Họ và tên MSSV Công việc Ghi chú
góp

Lê Văn Trung Tín 2173401151003 Thiết kế Website 100% Nhóm trưởng

Trần Bích Nhi 2173401151681 Soạn thông tin cho danh mục sản phẩm 100%

Tìm hiểu kênh bán Hosting, Domain,

Cao Dương Hùng 2173401150879 100%
Plugins

Hoàng Công Thiện 2173401150428 Lên Layout Website 100%

Trần Bảo Châu 2173401150390 Soạn thông tin cho danh mục sản phẩm 100%

7
Huỳnh Ngô Vĩnh Soạn các thông tin thêm: Giới thiệu,
2173401151339 100%
Trinh Footer, Chính sách

Chương 2: Triển khai Website

2.1 Trình bày các bước cài đặt WP trên máy để thực hiện đồ án

Hình 4 Tạo tài khoản đăng nhập Hostinger

8
Hình 5 Chọn gói Hosting cùng chức năng đi kèm phù hợp

Hình 6 Chọn gói thời gian dùng

9
Hình 7 Thanh toán gói Hosting của Hostinger

10
Hình 8 Tiến hành search và chọn Domain phù hợp (Domain trên ảnh là minh họa)

Hình 9 Tiến hành thanh toán Domain

Hình 10 Xác nhận Domain đã được cài đặt thành công

11
 Hình 11 Tiến hành Install wordpress từ Hostinger

Hình 12 Bước 1: tạo tài khoản admin

Hình 13 Bước 2: chọn mục đích tạo kênh

Hình 14 Bước 3: Chọn tự tạo từ trang web có sẵn hoặc tự làm từ đầu

12
 Hình 15 Bước 4: chọn theme nếu tạo từ đầu

Hình 16 Bước 5: Tự cài đặt plugins hoặc chọn plugins có sẵn

13
 Hình 17 Bước 6: Khi đã hoàn thành xong tất cả nhấp vào Admin Panel để được chuyển đến trang Wordpress đã tải

2.2 Trình bày các bước thực hiện xây dựng các chức năng của
website

2.2.1 Cài đặt giao diện cho Website

• Vào Apperance => Theme để tải và cài đặt Theme phù hợp

14
 Hình 18 Tải và cài đặt theme Rey

2.2.2 Cài đặt các Plugins

Hướng dẫn cài đặt: Chọn Plugins tại thanh bên trái => chọn Add New Plugins

Hình 19 Tải thêm Plugins

15
Các Plugin cần sử dụng:
• Elementor – Thiết kế layout các trang con cho trang web
• WooCommerce – Tạo danh mục sản phẩm, sản phẩm chi tiết, bán hàng
• WPForms Lite – Tạo form thu thông tin từ khách hàng
• Ivory Searc – Tạo thanh tìm kiếm đầu trang web
• Hustle – Tạo hộp thoại Pop up
• Elementor Header & Footer Builder – Tạo footer cho Website
Vào hộp thoại tìm kiếm Plugins bạn cần và tiến hành cài đặt Plugins

Hình 20 Tìm Plugins Elementor để thiết kế giao diện Page

Hình 21 Nhấp vào Install Now => Active

2.2.3 Tiến hành thiết kế trang con

Bước 1: Chuyển hướng qua trang Web

Hình 22 Bấm vào biểu tượng ngôi nhà chọn View site để vào trang Web

16
Bước 2: Chọn 1 trang tương ứng để tiến hành thiết kế với Elementor => Nhấp vào
“Edit with Elementor”

Hình 23 Chọn trang con để thiết kế giao diện

Bước 3: Tiến hành thiết kế trang con với Plugin Elementor

Hình 24 Tiến hành thiết kế trang con với Plugin Elementor

Các chức năng sử dụng từ Elementor:

• Tạo thanh cuộn kéo ngang để xem thêm thông tin khuyến mãi
Hình 25 Tạo thanh cuộn kéo ngang

• Chức năng Products (Grid & Carousel) để hiện thị danh mục sản phẩm trên
trang chính4

17
• Hiển thị sản phẩm ở trang con với chức năng (Products Grid & Carousel)

Hình 26 Danh mục các sản phẩm

• Thêm hình ảnh cho trang

Hình 27 Hình ảnh sản phẩm của thương hiệu

• Tạo tiêu đề lớn cho trang

Hình 28 Thanh tiêu đề

• Tạo Form với plugin WPForms

Hình 29 Form mẫu giải đáp thắc mắc

18
2.2.4 Thiết kế danh mục sản phẩm với Plugin WooCommerce

Bước 1: Tạo danh mục sản phẩm mới chọn Products => Add new

Hình 30 Tạo sản phẩm mới

Bước 2: Điền thông tin sản phẩm Tên sản phẩm, Tóm tắt sản phẩm, Mô tả sản phẩm

Tên sản phẩm

Tóm tắt sản

phẩm

Chi tiết mô tả
sản phẩm

Hình 31 Mô tả sản phẩm

Bước 3: Chọn categories phù hợp cho sản phẩm

Hình 32 Iphone 14 thuộc Categories "Iphone"

19
Bước 4: Thiết lập giá cho sản phẩm bao gồm: Giá gốc, Giá Sale, Thời gian Sale

Hình 33 Thiết lập giá cho sản phẩm

Bước 5: Thiết lập độ tồn kho/số lượng còn lại của sản phẩm (Optional)

Hình 34 Thiết lập số lượng còn lại của sản phẩm (Còn hay hết)

Bước 6: Thêm hình ảnh sản phẩm

• Ở trang General chọn “Choose an image” để thêm hình ảnh sản phẩm

Hình 35 Thêm hình ảnh sản phẩm

20
 • Tải lên và chọn hình ảnh phù hợp cho sản phẩm

Hình 36 Chọn hình ảnh phù hợp

Bước 7: Publish sản phẩm để sản phẩm hiển thị trên trang Web

Hình 37 Publish sản phẩm

Hình 38 Sản phẩm đã hiển thị trên trang Web theo phân loại Iphone

21
2.2.5 Chỉnh sửa và xóa sản phẩm

❖ Edit nhanh

Bước 1: Chọn Products => All products

Hình 39 Chọn All products

Bước 2: QuickEdit

Chọn edit nhanh để điều chỉnh các mục chính rồi sau đó nhấn “Update”

Hình 40 Chọn Edit nhanh

Hình 41 Giao diện Edit nhanh

❖ Edit chi tiết

Bước 1: Chọn Products => All products

22
 Hình 42 Chọn All products

Bước 2: Chọn Edit

Edit các thông tin chi tiết cần thiết sau đó nhấn “Update”

Hình 43 Giao diện Edit tiêu chuẩn

❖ Xóa sản phẩm

Ở giao diện All products => Chọn sản phẩm cần xóa => Nhấn “Trash”

Hình 44 Xóa sản phẩm

2.2.6 Thêm mã coupon cho đơn hàng

Bước 1: Vào Marketing => chọn coupons

23
 Hình 45 Chọn coupons

Bước 2: Chọn Add coupon

Hình 46 Chọn Add coupon

Bước 3: Nhập coupon phù hợp

Hình 47 Nhập tên coupon

Bước 4: Chọn giảm giá theo % và chọn số lượng % giảm giá

Hình 48 Thiết lập % giảm giá

24
2.2.7 Quản lý danh mục đơn hàng

Bước 1: Truy cập Plugins WooCommere => Orders => Chọn 1 đơn hàng để xem
chi tiết

Hình 49 Giao diện quản lý đơn hàng

Hình 50 Giao diện chi tiết đơn hàng

2.6.8 Danh mục phân tích

Chọn Analytics => Overview để xem số liệu thống kê bán hàng của trang

25
2.3 Trình bày các giao diện chức năng sau khi đã hoàn thành
website
Từ giao diện người dùng
2.3.1 Trang giới thiệu
Giới thiệu chung về lịch sử phát triển và hoạt động

Hình 51 Trang giới thiệu

26
 Hình 52 Footer

2.3.2 Sale
Trang Sale dùng để cung cấp thông tin về chương trình khuyến mãi hiện tại đang áp
dụng tại trang web, thông tin về sản phẩm cũng như ưu đãi và phần điền form để giải
đáp thắc mắc.

27
 Hình 54 Trang Sản pẩm Sale

Hình 53 Các mục liên quan bên dưới trang Sale

28
2.3.3 Các trang riêng cho từng dòng sản phẩm

Hình 56 Dòng sản phẩm Samsung

Hình 55 Dòng sản phảm Iphone

29
Hình 58 Dòng sản phẩm Xiaomi

Hình 57 Các loại đồng hồ

30
 Hình 60 Tablet

Hình 59 Cameras

31
 Hình 61 Tai nghe & Headphone

Hình 62 Ốp lưng điện thoại

Hình 63 Trang phụ kiện gồm đồng hồ và ốp lưng

32
2.3.4 Trang thanh toán

• Dùng để kiểm tra giỏ hàng và thực hiện các bước thanh toán
• Nhập “muadongkhonglanh” để giảm 80% trên tổng đơn hàng

Hình 64 Giao diện đặt hàng

Hình 65 Giao diện thanh toán

33
Chương 3: Kết luận và hướng phát triển

3.1 Kết luận

Về quá trình thực hiện:

Thông qua những kiến thức được giảng dạy trên lớp nhóm đã nắm vững kiến thức căn
bản về thiết kế Website từ đó tận dụng được công cụ Wordpress và các Plugins bên
ngoài để thiết kế ra được Website “Genco” để phục vụ cụ thể và rõ ràng cho mục đích
bán hàng.
Về Website:
Mặc dù còn vài thiếu sót nhưng nhìn chung Website đã được thiết kế tối ưu nhất để
phục vụ cho mục đích bán hàng, kinh doanh các thiết bị điện tử. Đặc biệt nhờ vận
dụng được các chức năng thiết kế từ Plugin Elementor đã giúp cho Website trở nên
gần gũi, mượt mà và giảm thiểu sự nhàm chán cho người dùng thực tế.

3.2 Hướng phát triển

Tuy nhiên Website vẫn chưa có đa dạng danh mục sản phẩm và chưa tận dụng hết các
plugin tiềm năng khác trên thị trường nên để cải tiến dài hạn thì Website cần được bổ
sung đa dạng danh mục sản phẩm nhiều hơn và tận dụng tốt hơn nữa về khả năng của
các plugin hiện tại trong việc thiết kế website để tăng khả năng giữ chân khách hàng.
Một vài hướng phát triển thêm:
• Xây dựng chiến lược marketing: Phát triển một chiến lược tiếp thị toàn diện để
quảng bá trang web và thu hút lượng lớn người dùng qua các kênh Social: Youtube,
Tiktok, Facebook,..Tạo nội dung chia sẻ trên mạng xã hội và tương tác với cộng đồng
trực tuyến có thể giúp nâng cao nhận thức và tăng lượng truy cập của trang web.
• Tích hợp tính năng mới: Nghiên cứu và thử nghiệm các tính năng mới để cải thiện
trải nghiệm người dùng và tăng tính hữu ích của trang web như cung cấp khả năng lưu
trữ cá nhân, tích hợp hệ thống thanh toán trực tuyến, hoặc tích hợp các công cụ phân
tích và theo dõi để hiểu rõ hơn về hành vi người dùng.
• Bảo mật website: Đảm bảo bảo mật website để bảo vệ dữ liệu của doanh nghiệp
và khách hàng.

34
Phụ lục
• Link Website của nhóm: Genco.website
• Link video demo Website: https://www.youtube.com/watch?v=2cwMHjTc7So

35