Bài giữa kì cntmdt.docx

BỘ GIÁO DỤC VÀ ĐÀO TẠO
ĐẠI HỌC UEH
TIỂU LUẬN GIỮA KỲ
MÔN CÔNG NGHỆ THƯƠNG MẠI ĐIỆN TỬ
Đề tài: XÂY DỰNG WEBSITE WORDPRESS
Giảng viên: Trần Lê Phúc Thịnh
Mã lớp học phần: 23C1INF50902603
Tên sinh viên: Nguyễn Minh Châu
Mã số sinh viên: 31211024074
Khóa: 47
TP Hồ Chi Minh, Tháng 11 năm 2023
J

MỤC LỤC
I. Giới thiệu website.................................................................................................................3
II. Xây dựng website................................................................................................................7
1. Cài đặt WP, cài đặt các Plugin cơ bản ...........................................................................7
1.1 Cài đặt thành công Local WP....................................................................................7
1.2 Cài đặt Plugin..............................................................................................................7
2. Cài đặt WooCommerce..................................................................................................11
2.1 Cài đặt Themes .........................................................................................................11
2.2 Thiết lập Thuế...........................................................................................................11
2.3 Thiết lập vận chuyển ................................................................................................13
2.4 Thiết lập thanh toán .................................................................................................15
2.5 Thiết lập mã giảm giá...............................................................................................19
3. Thêm sản phẩm và danh mục .......................................................................................20
3.1 Sản phẩm đơn giản...................................................................................................20
3.2 Sản phẩm có biến thể................................................................................................22
3.3 Sản phẩm nhóm ........................................................................................................24
3.4 Sản phẩm bên ngoài/liên kết....................................................................................25
3.5 Tạo danh mục sản phẩm..........................................................................................26
4. Thiết kế trang chủ ..........................................................................................................28
4.1 Tạo Menu...................................................................................................................29
4.2 Dùng Elementor để thiết kế.....................................................................................31
4.3 Sử dụng shortcode ....................................................................................................33
6. Tạo bài post.....................................................................................................................34
7. Tùy chỉnh website bằng Action và Filter Hook ...........................................................35
7.1 Phương thức sử dụng hook để tinh chỉnh ..............................................................35
7.2 Các action và Filter hook được dùng trong trang web .........................................35
III. Hoàn tất giao diện website..............................................................................................41
1. Trang chủ........................................................................................................................41
2. Trang chi tiết sản phẩm.................................................................................................44
3. Trang bài viết..................................................................................................................45
4. Trang cửa hàng...............................................................................................................46
5. Trang đăng kí/ đăng nhập tài khoản............................................................................46
6. Trang giỏ hàng................................................................................................................47
7. Trang thanh toán............................................................................................................48

DANH MỤC HÌNH ẢNH
Hình 1. Cài đặt thành công Local WP................................................................................7
Hình 2.1 Các plugin đã cài đặt.........................................................................................10
Hình 3. Cài đặt theme.......................................................................................................11
Hình 4.1 Thiết lập thuế.....................................................................................................12
Hình 4.2 Thiết lập thuế.....................................................................................................12
Hình 4.3 Demo trường hợp có tính thuế...........................................................................13
Hình 4.4 Demo trường hợp không tính thuế.....................................................................13
Hình 5.1 Thiết lập vận chuyển..........................................................................................14
Hình 5.2 Thiết lập vận chuyển..........................................................................................14
Hình 5.3 Demo các trường hợp giao hàng.......................................................................15
Hình 6.1 Thiết lập thanh toán...........................................................................................16
Hình 6.2 Thiết lập thanh toán bằng MoMo......................................................................16
Hình 6.3 Demo trang thanh toán......................................................................................17
Hình 7.1 Thiết lập mã giảm giá ........................................................................................19
Hình 7.2 Thiết lập mã giảm giá........................................................................................19
Hình 7.3 Demo mã phunuvn khi thanh toán.....................................................................20
Hình 7.4 Demo mã phunuvn khi thanh toán.....................................................................20
Hình 8.1 Thiết lập sản phảm đơn giản .............................................................................21
Hình 8.2 Thiết lập sản phảm đơn giản 1 ..........................................................................21
Hình 9.1 Thiết lập sản phẩm có biến thể..........................................................................22

Hình 9.2 Thiết lập sản phảm có biến thể..........................................................................23
Hình 10.1 Thiết lập sản phảm nhóm.................................................................................25
Hình 10.2 Thiết lập sản phảm nhóm.................................................................................25
Hình 11.1 Thiết lập sản phẩm bên ngoài..........................................................................26
Hình 12.1 Tạo danh mục sản phẩm..................................................................................28
Hình 13.1 Thiết lập menu .................................................................................................30
Hình 13.4 Hiển thị menu tại trang chủ.............................................................................31
Hình 14.1 Tạo trang chủ bằng Elementor........................................................................32
Hình 15.1 Thiết kế trang dùng shortcode.........................................................................33
Hình 16. Tạo bài post .......................................................................................................35
Hình 17.1 Các hook dùng trong trang web ......................................................................35
Hình 17.2 Các action hook đã dùng.................................................................................36
Hình 17.3 Demo action hook 1.........................................................................................36
Hình 17.10 Các action hook đã dùng...............................................................................40

Hình 17.11 Các action hook đã dùng...............................................................................40
Hình 17.12 Các filter hook đã dùng .................................................................................41
Hình 17.13 Demo filter hook............................................................................................41
Hình 18.1 Giao diện trang chủ.........................................................................................42
Hình 19.1 Giao diện trang chi tiết sp...............................................................................44
Hình 20. Giao diện trang bài viết.....................................................................................46
Hình 21. Giao diện trang cửa hàng..................................................................................46
Hình 22. Giao diện trang tài khoản..................................................................................47
Hình 23. Giao diện trang giỏ hàng...................................................................................48

I. Giới thiệu website
YaMe.vn - Thương hiệu thời trang dành cho giới trẻ
YaMe.vn là một thương hiệu thời trang dành cho giới trẻ Việt Nam, cung cấp đa
dạng các sản phẩm thời trang dành cho giới trẻ, bao gồm áo thun, quần jean, áo khoác,
phụ kiện,... Các sản phẩm của YaMe.vn được thiết kế với phong cách trẻ trung, năng
động, phù hợp với mọi nhu cầu của giới trẻ.
Ưu điểm của YaMe.vn
 Đa dạng sản phẩm: YaMe.vn cung cấp đa dạng các sản phẩm thời trang dành
cho giới trẻ, đáp ứng mọi nhu cầu của khách hàng.
 Phong cách trẻ trung, năng động: Các sản phẩm của YaMe.vn được thiết kế với
phong cách trẻ trung, năng động, phù hợp với xu hướng thời trang mới nhất.
 Giá cả hợp lý: YaMe.vn luôn nỗ lực mang đến cho khách hàng những sản phẩm
chất lượng với giá cả hợp lý.
 Dịch vụ chăm sóc khách hàng tốt: YaMe.vn luôn quan tâm đến trải nghiệm của
khách hàng, với dịch vụ chăm sóc khách hàng tận tình và chu đáo.
Một số sản phẩm nổi bật của YaMe.vn
 Áo thun YaMe: Áo thun là một trong những sản phẩm best-seller của YaMe.vn.
Áo thun YaMe được làm từ chất liệu cotton cao cấp, mềm mại và thấm hút mồ
hôi tốt.
 Quần jean YaMe: Quần jean YaMe được thiết kế với kiểu dáng trẻ trung, năng
động, phù hợp với nhiều vóc dáng.
 Áo khoác YaMe: Áo khoác YaMe được thiết kế với kiểu dáng trẻ trung, năng
động, giúp giữ ấm cho cơ thể trong những ngày thời tiết lạnh.
 Phụ kiện YaMe: Phụ kiện YaMe giúp hoàn thiện phong cách thời trang của bạn.

II. Xây dựng website
1. Cài đặt WP, cài đặt các Plugin cơ bản
1.1 Cài đặt thành công Local WP
Hình 1. Cài đặt thành công Local WP
1.2 Cài đặt Plugin
Dưới đây là các plugin mà website đã cài đặt, bao gồm:
 Chat Bubble
Chat Bubble là một plugin WordPress giúp bạn thêm hộp chat trực tiếp vào trang
web của mình. Hộp chat này sẽ cho phép khách truy cập trò chuyện với bạn hoặc với
các đại diện hỗ trợ khách hàng của bạn.
 Classic Editor
Classic Editor là một plugin WordPress giúp bạn khôi phục trình soạn thảo cổ điển
của WordPress. Trình soạn thảo cổ điển này được nhiều người dùng ưa thích vì nó đơn
giản và dễ sử dụng.
 Classic Widgets
Classic Widgets là một plugin WordPress giúp bạn khôi phục widget cổ điển của
WordPress. Widget cổ điển này được nhiều người dùng ưa thích vì nó đơn giản và dễ
sử dụng.
 Code Snippets
Code Snippets là một plugin WordPress giúp bạn thêm mã ngắn vào trang web của
mình. Mã ngắn này có thể được sử dụng để thêm chức năng hoặc tính năng tùy chỉnh
vào trang web của bạn.

 Contact Form 7
Contact Form 7 là một plugin WordPress giúp bạn tạo biểu mẫu liên hệ. Biểu mẫu
liên hệ này có thể được sử dụng để thu thập thông tin từ khách truy cập trang web của
bạn.
 Elementor
Elementor là một plugin WordPress giúp bạn tạo giao diện người dùng trực quan
cho trang web của mình. Elementor cung cấp một giao diện kéo và thả dễ sử dụng để
giúp bạn tạo các trang web đẹp và chuyên nghiệp.
 Gtranslate
Gtranslate là một plugin WordPress giúp bạn dịch trang web của mình sang các ngôn
ngữ khác. Gtranslate sử dụng Google Translate để dịch trang web của bạn sang hơn 100
ngôn ngữ khác nhau.
 WooCommerce
WooCommerce là một plugin WordPress giúp bạn tạo cửa hàng trực tuyến.
WooCommerce là một plugin miễn phí và mạnh mẽ, cung cấp tất cả các tính năng cần
thiết để tạo một cửa hàng trực tuyến thành công.
 Thanh Toán Quét Mã QR Code Tự Động
Thanh toán qua QR code cho người dùng Việt Nam là một plugin WordPress giúp
bạn thêm hỗ trợ thanh toán qua QR code vào cửa hàng trực tuyến của mình. Plugin này
hỗ trợ các hình thức thanh toán qua QR code phổ biến tại Việt Nam, bao gồm MoMo,
ViettelPay, VNPay và 40 ngân hàng Việt Nam
 WooCommerce VietNam Checkout
WooCommerce VietNam Checkout là một plugin WordPress giúp bạn tùy chỉnh
trang thanh toán của cửa hàng trực tuyến của mình cho phù hợp với thị trường Việt
Nam. Plugin này thêm các trường cho tỉnh, thành phố, và quận/huyện vào biểu mẫu địa
chỉ vận chuyển, cung cấp giá vận chuyển cụ thể cho từng tỉnh/thành phố, và cho phép
khách hàng thanh toán bằng các hình thức thanh toán phổ biến tại Việt Nam, bao gồm
QR code và ví điện tử.
Bảng tóm tắt các thông tin về các plugin WordPress được cài đặt:
Plugin Mục đích
Chat Bubble Thêm hộp chat trực tiếp vào trang web
Classic Editor Khôi phục trình soạn thảo cổ điển của WordPress

Classic Widgets Khôi phục widget cổ điển của WordPress
Code Snippets Thêm mã ngắn vào trang web
Contact Form 7 Tạo biểu mẫu liên hệ
Elementor Tạo giao diện người dùng trực quan cho trang web
Gtranslate Dịch trang web sang các ngôn ngữ khác
WooCommerce Tạo cửa hàng trực tuyến
Thanh Toán Quét Mã QR Code Tự
Động
Thêm hỗ trợ thanh toán qua QR code vào cửa hàng
trực tuyến
WooCommerce VietNam
Checkout
Tùy chỉnh trang thanh toán của cửa hàng trực tuyến
cho phù hợp với thị trường Việt Nam

Hình 2.1 Các plugin đã cài đặt

2. Cài đặt WooCommerce
2.1 Cài đặt Themes
Tên theme: Sydney, là một theme WordPress miễn phí được thiết kế để tạo các
trang web kinh doanh và cửa hàng trực tuyến. Theme này có giao diện hiện đại và
thanh lịch, Sydney được tích hợp sẵn với WooCommerce, cho phép dễ dàng tạo và
quản lý cửa hàng trực tuyến của mình.
Các tính năng nổi bật của theme Sydney:
 Tùy chỉnh dễ dàng: Sydney sử dụng hệ thống tùy biến trực quan để bạn có thể
dễ dàng thay đổi giao diện và bố cục của trang web.
 Tốc độ nhanh: Sydney được tối ưu hóa để tải nhanh, giúp cải thiện trải nghiệm
người dùng.
 Thân thiện với SEO: Sydney được tối ưu hóa cho SEO, giúp trang web của bạn
dễ dàng xếp hạng cao hơn trong kết quả tìm kiếm.
Hình 3. Cài đặt theme
2.2 Thiết lập Thuế
Thiết lập cửa hàng có áp dụng thuế đối với sản phẩm:
Giá sản phẩm hiển thị ngoài cửa hàng đã bao gồm thuế. Các sản phẩm sẽ được tính
thuế dựa trên địa chỉ giao hàng của khách hàng. Thuế giao hàng sử dụng tỉ lệ Chuẩn.
Hậu tố của giá hiển thị thuế sẽ có chữ VAT. Chấp nhận các thiết lập mặc định khác.
Cơ sở tính thuế:
- Mã: VNT - Nếu khách hàng ở VN thì 8%
- Mã: FRA - Nếu khách hàng ở Pháp thì 15%
- Mã: LAT - Nếu khách hàng ở tại Lào thì 10%

Hình 4.1 Thiết lập thuế
Hình 4.2 Thiết lập thuế
Demo các trường hợp tính thuế:
- Trường hợp có tính thuế

Hình 4.3 Demo trường hợp có tính thuế
- Trường hợp không tính thuế
Hình 4.4 Demo trường hợp không tính thuế
2.3 Thiết lập vận chuyển
- Tạo ra các khu vực giao hàng
o Nội thành (TPHCM)
o Trong nước
o Ngoài nước
- Nội thành (TP.HCM): có các hình thức giao hàng
o Lấy hàng tại cửa hàng: Miễn phí ship
o Giao hành nhanh: đồng giá 20.000đ
o Giao hàng hỏa tốc: 15% giá trị đơn hàng. Nếu thấp hơn 30.000đ thì tính
30.000đ. Phí tối đa là: 50.000đ

- Trong nước: có các hình thức giao hàng
o Giao hàng tiết kiệm: 10.000đ * số lượng sản phẩm
o Giao hàng nhanh: 20.000đ * số lượng sản phẩm
- Ngoài nước:
o LA Express: 15% giá trị đơn hàng. Nếu thấp hơn 50.000đ thì tính
50.000đ. Phí tối đa là: 80.000đ
- Tạo ra loại giao hàng đặt biệt đối với “Hàng giá trị cao” sẽ mặc định có phí
giao hàng 100.000đ ở tất cả hình thức
Hình 5.1 Thiết lập vận chuyển
Hình 5.2 Thiết lập vận chuyển
Demo các trường hợp giao hàng:

Hình 5.3 Demo các trường hợp giao hàng
2.4 Thiết lập thanh toán

Các phương thức thanh toán được tích hợp vào trang web:
- Trả tiền mặt khi nhận hàng
- Ví điện tử MoMo – QRcode
- Ví điện tử VNpay – Qrcode
- Chuyển khoản ngân hàng bằng quét mã QR, website hỗ trợ thanh toán ở các
ngân hàng lớn như: Vietcombank, Mbbank, Techcombank, Agribank, BIDV,
Sacombank.
Hình 6.1 Thiết lập thanh toán
Ví dụ một thiết lập thanh toán qua Ví điện tử MoMo-QRcode
Hình 6.2 Thiết lập thanh toán bằng MoMo
Demo hiển thị trang thanh toán

Hình 6.3 Demo trang thanh toán

2.5 Thiết lập mã giảm giá
Các mã khuyến mãi được thiết lập trong trang web:
 Mã phunuvn: Mã này giảm giá 50% cho các sản phẩm thời trang nữ và có thời
hạn sử dụng trước ngày 15/3. Mã này không sử dụng chung với các mã giảm giá
khác và vẫn áp dụng cho các sản phẩm giảm giá.
 Mã giam100k: Mã này giảm giá 100.000đ cho đơn hàng tối thiểu 500k. Mã này
không được sử dụng chung với các mã giảm giá khác và không áp dụng với các
sản phẩm đã giảm giá. Chỉ có 100 mã này được sử dụng cho 100 khách hàng đầu
tiên.
 Mã giam10: Mã này giảm 10% cho toàn bộ đơn hàng với điều kiện tổng giá trị
đơn hàng phải đạt tối thiểu 1.000.000đ. Mã này không sử dụng chung với các
mã giảm giá khác và vẫn áp dụng cho các sản phẩm giảm giá.
Hình 7.1 Thiết lập mã giảm giá
Hình 7.2 Thiết lập mã giảm giá
Demo thiết lập mã giảm giá “phunuvn” khi thanh toán:

Hình 7.3 Demo mã phunuvn khi thanh toán
Hình 7.4 Demo mã phunuvn khi thanh toán
3. Thêm sản phẩm và danh mục
3.1 Sản phẩm đơn giản

Hình 8.1 Thiết lập sản phảm đơn giản
Hình 8.2 Thiết lập sản phảm đơn giản 1

3.2 Sản phẩm có biến thể
Hình 9.1 Thiết lập sản phẩm có biến thể

Hình 9.2 Thiết lập sản phảm có biến thể

3.3 Sản phẩm nhóm

Hình 10.1 Thiết lập sản phảm nhóm
Hình 10.2 Thiết lập sản phảm nhóm
3.4 Sản phẩm bên ngoài/liên kết

Hình 11.1 Thiết lập sản phẩm bên ngoài
3.5 Tạo danh mục sản phẩm
Danh mục sản phẩm được tạo ra trên website: có 3 loại danh mục
 Danh mục sản phẩm theo bộ sưu tập
o SPEED
o The Day’s Eye
o The Style of No Style
o SPACE
 Danh mục sản phẩm tạo ra theo kiểu dáng quần áo
o Áo
 Áo Thun
 Áo Polo
 Áo sơmi
 Áo Khoác

 Áo Sweater
o Quần
 Quần Tây
 Quần vải
 Quần jean
 Quần Short
o BALO
o Phụ kiện
 Danh mục sản phẩm theo loại sản phẩm
o Sản phẩm đơn giản
o Sản phẩm có biến thể
o Sản phẩm bên ngoài/liên kết
o Set combo ( sản phẩm nhóm)

Hình 12.1 Tạo danh mục sản phẩm
4. Thiết kế trang chủ

4.1 Tạo Menu
Tạo ra một menu chính cho website. Hiện thị trên thanh Main header.
- BỘ SƯU TẬP
o The Style of No Style
o SPEED
o The Day’s Eye
o SPACE
- SẢN PHẨM
o Áo
 Áo Thun
 Áo Polo
 Áo sơmi
 Áo Khoác
 Áo Sweater
o Quần
 Quần Tây
 Quần vải
 Quần jean
 Quần Short
o BALO
o Phụ kiện
- COMBO
- BLOG

Hình 13.1 Thiết lập menu

Hình 13.4 Hiển thị menu tại trang chủ
4.2 Dùng Elementor để thiết kế
Sử dụng Elementor để tùy chỉnh thiết kế trang chủ cho website, các thành phần được
sử dụng:
- Thẻ hình ảnh
- Thẻ đường phân cách
- Thẻ shortcode
- Thẻ khoảng đệm
- Thẻ tiêu đề, văn bản
- Thẻ nút
- Thẻ icon mạng xã hội

Hình 14.1 Tạo trang chủ bằng Elementor

4.3 Sử dụng shortcode
Các shortcode đã sử dụng trong thiết kế website
- Hiện thị các sản phẩm của danh mục sản phẩm “SPEED” với tùy chỉnh hiện thị
4 sản phẩm 2 cột. Cú pháp: [products limit="4" columns="2"
Category="SPEED"]
Hình 15.1 Thiết kế trang dùng shortcode
- Hiện thị các sản phẩm của danh mục sản phẩm “The Style of No Style” với tùy
chỉnh hiện thị 4 sản phẩm 2 cột. Cú pháp: [products limit="4" columns="2"
Category="The Style of No Style"]
- Hiện thị các sản phẩm bán chạy với tùy chỉnh hiện thị 4 sản phẩm 4 cột. Cú
pháp: [products limit="4" columns="4" best_selling="true" ]

- Hiện thị các sản phẩm nổi bật với tùy chỉnh hiện thị 4 sản phẩm 4 cột. Cú pháp:
[products limit="4" columns="4" visibility="featured" ]
6. Tạo bài post
Website sử dụng Elementor để tùy chỉnh các bài post. Các bài post của website YaMe
thường nói về thông điệp của các bộ sưu tập sản phẩm ở YaMe.

Hình 16. Tạo bài post
7. Tùy chỉnh website bằng Action và Filter Hook
7.1 Phương thức sử dụng hook để tinh chỉnh
Dùng plugin Snippet để tùy chỉnh website bằng hook.
7.2 Các action và Filter hook được dùng trong trang web
Hình 17.1 Các hook dùng trong trang web
7.2.1 Action hook
Các action hook đã sử dụng trong website
- Thêm nút chia sẽ và nút thích Facebook trong sản phẩm chi tiết

Hình 17.2 Các action hook đã dùng
Hình 17.3 Demo action hook 1
- Bán thêm sản phẩm dưới nút Thêm vào giỏ hàng

- Tính tổng giá khi tăng số lượng sản phẩm

- Hiển thị nút “Tiếp tục mua sắm

- Kiểm tra xem người dùng đã đăng nhập để mua sản phẩm hay chưa

- Kiểm tra người xem đã từng mua sản phẩm này chưa và hỏi khách có muốn
mua lại hay không
7.2.2 Filter hook
Các filter hook đã sử dụng:
- Viết hoa chữ cái đầu tiên trong tên sản phẩm

Hình 17.12 Các filter hook đã dùng
Hình 17.13 Demo filter hook
III. Hoàn tất giao diện website
1. Trang chủ

Hình 18.1 Giao diện trang chủ

2. Trang chi tiết sản phẩm
Hình 19.1 Giao diện trang chi tiết sp

3. Trang bài viết

Hình 20. Giao diện trang bài viết
4. Trang cửa hàng
Hình 21. Giao diện trang cửa hàng
5. Trang đăng kí/ đăng nhập tài khoản

Hình 22. Giao diện trang tài khoản
6. Trang giỏ hàng

Hình 23. Giao diện trang giỏ hàng
7. Trang thanh toán
Hình 24 Giao diện trang thanh toán

Bài giữa kì cntmdt.docx

Recommended

Recommended

More Related Content

Similar to Bài giữa kì cntmdt.docx

Similar to Bài giữa kì cntmdt.docx (20)

Bài giữa kì cntmdt.docx