BÀI 7

THIẾT KẾ TRANG WEB TMĐT VỚI NỀN

TẢNG TRỰC TUYẾN WIX

GV ThS. Thiều Quang Trung

Email: thieutrung@gmail.com
Nội dung

1 • Các phương án xây dựng website TMĐT

2 • Các nền tảng tạo trang web TMĐT

3 • Tạo trang web TMĐT với WIX

GV Thiều Quang Trung 2

Các phương án xây dựng website
TMĐT
• Các phương án:
1. Tạo website bằng các ngôn ngữ lập trình web:
• Ngôn ngữ client-side: HTML, CSS, Javascript, …
• Ngôn ngữ server-side: PHP, ASP, JSP, …
2. Sử dụng nền tảng có sẵn, có 2 cách tiếp cận:
• Tạo trang web TMĐT trên nền tảng trực tuyến mà
không cần cài đặt như Shopify, Wix, ...
• Cài đặt và phát triển dựa trên mã nguồn như
Wordpress, Magento, PrestaShop, Opencart,…
GV Thiều Quang Trung 3
Các phương án xây dựng website
TMĐT
• Đặc điểm ngôn ngữ client-side:
–Ngôn ngữ kịch bản chạy trên trình duyệt local
–Thay đổi nội dung trang web sau khi trình duyệt
thông dịch nó
–Truy cập hoặc thao tác trên trình duyệt web
• Đặc điểm ngôn ngữ server-side:
–Ngôn ngữ kịch bản thực thi từ một máy chủ web
–Phát triển các trang web tương tác giao tiếp với cơ
sở dữ liệu

GV Thiều Quang Trung 4

Phương án xây dựng website TMĐT
• Tạo website bằng các ngôn ngữ lập trình web:

GV Thiều Quang Trung 5

Phương án xây dựng website TMĐT
• Tạo website trên nền tảng Shopify:

GV Thiều Quang Trung 6

Phương án xây dựng website TMĐT
• Tạo website trên nền tảng WIX:

GV Thiều Quang Trung 7

Phương án xây dựng website TMĐT
• Tạo website với mã nguồn Wordpress và plugin
WooCommerce:

GV Thiều Quang Trung 8

Phương án xây dựng website TMĐT
• Tạo website với mã nguồn Magento:

GV Thiều Quang Trung 9

Các nền tảng tạo website TMĐT
• So sánh mức độ phổ biến giữa các nền tảng tạo
trang TMĐT -> Wordpress chiếm 22%

source: https://barn2.co.uk/woocommerce-stats

GV Thiều Quang Trung 10

Các nền tảng tạo website TMĐT
• So sánh giữa Wix và Wordpress:
– WIX: có gói miễn phí, không cần mua tên miền
hay thuê hosting. Ít tính năng, không được dùng
tên miền riêng, phiên bản trả phí khá đắt.
– WordPress: miễn phí, phải có tên miền và thuê
hosting. Chi phí của WordPress sẽ tăng lên tùy
thuộc vào các plugin và theme WordPress sử
dụng.

GV Thiều Quang Trung 11

Tạo trang web TMĐT với WIX
• WIX là một nền tảng xây dựng website tích hợp với
ngôn ngữ HTML5 cho phép người dùng khởi tạo
website trực tuyến dựa trên thao tác kéo thả.
• Nền tảng WIX miễn phí với tính năng cơ bản khi
thiết kế web. Với gói trả phí WIX cung cấp nhiều
tính năng nâng cấp như xóa logo của WIX, thêm các
tính năng của trang thương mại điện tử, sử dụng
tên miền riêng …
• Hiện tại WIX đang được hơn 100 triệu người sử
dụng trên phạm vi hơn 190 quốc gia.
GV Thiều Quang Trung 12
Ưu điểm của WIX
• Ưu điểm của WIX thể hiện ở các tính năng:
– Sử dụng đơn giản
– Mẫu thiết kế có sẵn
– Được hỗ trợ tối đa
– Thương mại điện tử
– Gợi ý thông minh
– Cập nhật thường xuyên

GV Thiều Quang Trung 13

Ưu điểm của WIX
• Sử dụng đơn giản
– WIX cho phép xây dựng website chỉ bằng các
thao tác kéo thả rất đơn giản.
– Các công cụ, tính năng được tích hợp một cách
thông minh giúp việc thiết kế và chỉnh sửa giao
diện website thuận lợi và nhanh chóng.
– Trang web tạo xong sẽ được tự động thêm vào
trình đơn điều hướng (mục Manage Pages).

GV Thiều Quang Trung 14

Ưu điểm của WIX
• Nhiều mẫu thiết kế có sẵn
– Nền tảng WIX hiện đang có khoảng hơn 510 giao
diện mẫu website dành cho nhiều ngành nghề
khác nhau như: công nghệ, bất động sản, du lịch,
giáo dục, thương mại điện tử,… và chúng đều có
sẵn dữ liệu mẫu (dummy data).
– Để thiết kế website, chỉ cần chọn giao diện mong
muốn, update lại nội dung và hình ảnh là hoàn
thành xong một trang web.

GV Thiều Quang Trung 15

Ưu điểm của WIX
• Được hỗ trợ tối đa
– WIX có một thư viện các công cụ hỗ trợ thiết kế
web với hơn 300 ứng dụng (một số miễn phí và
một số tính phí). Ngoài ra, đối với bất cứ tính
năng nào thì WIX có sẵn nút “Help” để người
dùng có thể tìm hiểu thêm.
– Không chỉ nhận hướng dẫn từ thư viện, nếu có
bất kỳ thắc mắc nào trong quá trình dùng WIX,
người dùng có thể gọi điện hoặc gửi mail cho đội
ngũ kỹ thuật viên để được giải đáp.
GV Thiều Quang Trung 16
Ưu điểm của WIX
• Thương mại điện tử
– Xây dựng một cửa hàng trực tuyến với WIX bằng
cách chọn một mẫu từ danh mục Online Store,
hoặc chọn nút thêm một cửa hàng vào website
WIX sẵn có.
– Nếu thiết kế website có nhu cầu tạo trang chấp
nhận các phương thức thanh thanh toán trực
tuyến thì cần nâng cấp lên gói trả phí và WIX
không thu bất kỳ khoản hoa hồng nào đối với
doanh số bạn tạo ra.
GV Thiều Quang Trung 17
Ưu điểm của WIX
• Gợi ý thông minh
– Khi chỉnh sửa website với WIX, sẽ có các cửa sổ
hướng dẫn bật lên chia làm 2 thẻ:
• What’s Next: liệt kê các bước cần thực hiện để hoàn
thành website. Thường là những tác vụ cơ bản, như
thêm nội dung và xem trước website. Khi chọn vào
một tác vụ, bạn sẽ được hướng dẫn từng bước qua
suốt quá trình.
• Smart Tips: cho biết khi một thứ gì đó trên website
cần được cập nhật.

GV Thiều Quang Trung 18

Ưu điểm của WIX
• Cập nhật thường xuyên
– WIX thường đưa ra phiên bản cập nhật liên tục
mỗi tháng cho các công cụ của mình với mục đích
đem đến cho người dùng nhiều tính năng mới và
hữu ích nhất.

GV Thiều Quang Trung 19

Các bước thiết kế web với WIX
• Gồm 6 bước thực hiện:
1. Đăng ký tài khoản WIX
2. Chọn giao diện
3. Thiết kế và chính sửa nội dung
4. Tích hợp ứng dụng của bên thứ ba
5. Sử dụng các công cụ tối ưu SEO trên website
6. Xuất bản website

GV Thiều Quang Trung 20

Các bước thiết kế web với WIX
• Đăng ký tài khoản WIX:
– Truy cập trang web https://www.wix.com ->
Chọn nút “Get Started”, xuất hiện bảng thông tin
để đăng ký tên người dùng và mật khẩu.
– Sau khi hoàn tất, WIX sẽ yêu cầu chọn cách thức
khởi tạo website. Có thể tạo giao diện tự động
bằng cách trả lời một vài câu hỏi, hoặc có thể tạo
giao diện dựa trên các template mẫu.

GV Thiều Quang Trung 21

Các bước thiết kế web với WIX

GV Thiều Quang Trung 22

Các bước thiết kế web với WIX
• Đăng ký tài khoản WIX:
– Đăng ký tài khoản với địa chỉ email có sẵn.
– Check mail để nhận thông báo WIX gửi
– Trong nội dung trang “Create the Website You Want” chọn
mục
“Start Creating”
để bắt đầu tạo trang

GV Thiều Quang Trung 23

Các bước thiết kế web với WIX
• Trang “Create Your First Site” xuất hiện, chọn mục
“Create New Site” để tạo một website mới

GV Thiều Quang Trung 24

Các bước thiết kế web với WIX
• Trang “What kind of website do you want to create”
xuất hiện, chọn mục “Online Store” để tạo website loại
cửa hàng trực tuyến

GV Thiều Quang Trung 25

Các bước thiết kế web với WIX
• Chọn giao diện:
– Chọn cách thức khởi tạo website. Có thể tạo giao diện tự động
bằng cách trả lời một vài câu hỏi, hoặc có thể tạo giao diện dựa
trên các template mẫu.

GV Thiều Quang Trung 26

Các bước thiết kế web với WIX
• Chọn giao diện:
– Nếu chọn khởi tạo website tự động, bạn sẽ phải
trả lời các câu hỏi của hệ thống như:
• Loại site cần thiết kế
• Các tính năng muốn có trên website
• Loại hình dịch vụ bạn cung cấp,…
– Sau đó WIX sẽ tự động tạo một trang web mẫu
cho bạn.

GV Thiều Quang Trung 27

Các bước thiết kế web với WIX
• Chọn giao diện:
– Nếu chọn khởi tạo website dựa trên các template
mẫu, hệ thống sẽ đưa bạn đến thư viện gồm
hàng trăm mẫu giao diện được phân theo từng
hạng mục.

GV Thiều Quang Trung 28

Các bước thiết kế web với WIX
• Lựa chọn template mẫu phù hợp với website online
store của bạn

GV Thiều Quang Trung 29

Các bước thiết kế web với WIX
• Thiết kế, chỉnh sửa nội dung:
– Để xem trước mẫu -> chọn nút “View”. Xuất hiện
mẫu giao diện với các nội dung có sẵn.
– Để hiệu chỉnh -> chọn nút “Edit”. Xuất hiện trang
hiệu chỉnh cho mẫu đã chọn. Tại đây bạn có thể
chỉnh sửa nội dung trang với các chức năng
tương ứng trên màn hình Edit.

GV Thiều Quang Trung 30

Các bước thiết kế web với WIX

GV Thiều Quang Trung 31

Các bước thiết kế web với WIX
• Thiết kế, chỉnh sửa nội dung:
– Khi đã chọn được mẫu template như mong
muốn, bạn chỉ cần click vào nút “Edit this site” ở
góc phải, phía trên màn hình và tiến hành chỉnh
sửa.
– Trong tab thiết kế, bạn sẽ thấy rất nhiều công cụ
hỗ trợ giúp thay đổi hình nền, màu sắc, font
chữ,… Tất cả những gì cần làm chỉ là nhấn nút và
kéo thả, rất đơn giản, tiện lợi.

GV Thiều Quang Trung 32

Các bước thiết kế web với WIX
• Tích hợp ứng dụng của bên thứ ba:
– Muốn tích hợp thêm các ứng dụng của bên thứ ba
chỉ cần vào “WIX App Market” và tìm kiếm app
phù hợp. Ví dụ như: Shopify, Instagram,
Soundcloud hay Adsense của Google.
– Ứng dụng Shopify cho phép tạo ra một cửa hàng
trực tuyến để bán các sản phẩm, dịch vụ dễ dàng.
– Để tăng hiệu quả và độ tín nhiệm cho website,
bạn nên tích hợp các kênh mạng xã hội vào
website của mình.
GV Thiều Quang Trung 33
Các bước thiết kế web với WIX
• Tích hợp ứng dụng của bên thứ ba:
– Nhờ vào công cụ SEO WIZ của WIX bạn thực hiện
việc tối ưu cho website WIX một cách dễ dàng.
– Thông qua bảng điều khiển SEO WIZ để lấy các đề
xuất từ khóa và theo dõi trên các công cụ tìm
kiếm.
– Khi dùng gói trả phí bạn có thể kết nối website
WIZ với Google Analytics để biết thông tin chi tiết
về khách hàng truy cập vào trang web của bạn.

GV Thiều Quang Trung 34

Các bước thiết kế web với WIX
• Xuất bản website:
– Sau khi thiết lập thành công, bạn có thể đưa
website của mình đi vào hoạt động chính thức
bằng cách chọn nút “Publish”.
– Website sẽ được đặt theo tên miền chung của
WIX có dạng: username.wixsite.com/sitename.
Trong đó: username là tên tài khoản khi đăng ký
và sitename là tên bạn đặt cho trang chủ.

GV Thiều Quang Trung 35

Sản phẩm trang web sinh viên nộp
Minh họa 1: https://trong0124563.wixsite.com/mysite

GV Thiều Quang Trung 36

Sản phẩm trang web sinh viên nộp
Minh họa 2: https://phuongnghi3533.wixsite.com/website

GV Thiều Quang Trung 37

Sản phẩm trang web sinh viên nộp
Minh họa 3: https://nemchahue.wixsite.com/my-site

GV Thiều Quang Trung 38

Sản phẩm trang web sinh viên nộp
Minh họa 4: https://luongthithanhtruc2.wixsite.com/website

GV Thiều Quang Trung 39

Sản phẩm trang web sinh viên nộp
Minh họa 5: https://phuongphuong210199.wixsite.com/my-site13

GV Thiều Quang Trung 40

Sản phẩm trang web sinh viên nộp
Minh họa 6: https://huynhnhatminh18150.wixsite.com/mysite

GV Thiều Quang Trung 41

Sản phẩm trang web sinh viên nộp
Minh họa 7: https://trantrungnam25.wixsite.com/my-site-8

GV Thiều Quang Trung 42

Sản phẩm trang web sinh viên nộp
Minh họa 8: https://minhphuong14071001.wixsite.com/website10

GV Thiều Quang Trung 43

Sản phẩm trang web sinh viên nộp
Minh họa 9: https://longgxhc123.wixsite.com/drone

GV Thiều Quang Trung 44

Sản phẩm trang web sinh viên nộp
Minh họa 10: https://nguyenhuutoan19150.wixsite.com/my-site-30

GV Thiều Quang Trung 45

Sản phẩm trang web sinh viên nộp
Minh họa 11: https://buithibaotran411.wixsite.com/my-site

GV Thiều Quang Trung 46

Sản phẩm trang web sinh viên nộp
Minh họa 12: https://lamtrungthai191502.wixsite.com/mththnh

GV Thiều Quang Trung 47

Sản phẩm trang web sinh viên nộp
Minh họa 13: https://thienngan191502022.wixsite.com/my-site-1

GV Thiều Quang Trung 48

Sản phẩm trang web sinh viên nộp
Minh họa 14: https://lebao13ks1c.wixsite.com/my-site

GV Thiều Quang Trung 49

Sản phẩm trang web sinh viên nộp
Minh họa 15: https://luongnhathao115.wixsite.com/planthousstore

GV Thiều Quang Trung 50

Sản phẩm trang web sinh viên nộp
Minh họa 16: https://lptthanhnhan190402.wixsite.com/timbnhcaamy

GV Thiều Quang Trung 51

Sản phẩm trang web sinh viên nộp
Minh họa 17: https://truongnhatquang260.wixsite.com/camera-store

GV Thiều Quang Trung 52

Sản phẩm trang web sinh viên nộp
Minh họa 18: https://tranthanhthao19150.wixsite.com/my-site-1

GV Thiều Quang Trung 53

Sản phẩm trang web sinh viên nộp
Minh họa 19: https://tranthanhthao19150.wixsite.com/my-site-1

GV Thiều Quang Trung 54

Sản phẩm trang web sinh viên nộp
Minh họa 20: https://haomy2k1.wixsite.com/my-site

GV Thiều Quang Trung 55

GV: Thiều Quang Trung 56