Đồng thời, đề tài này còn mang tính thực tiễn cao, áp dụngđược vào thực tế, giúp người nghiên cứu rèn luyện kỹ năng thiết kế, lập trình vàxây dựng chiến lược kinh doanh trực tuyến.- Mục
TỔNG QUAN VỀ DỰ ÁN
Giới thiệu Web thương mại điện tử
Web, hay còn gọi là World Wide Web, là một phần của Internet, bao gồm các trang web có thể truy cập qua trình duyệt Website chứa thông tin đa dạng như văn bản, hình ảnh, video và dữ liệu, được lưu trữ trên máy chủ web.
Một trang web là tập tin HTML hoặc XHTML có thể truy cập qua giao thức HTTP hoặc HTTPS Website có thể là tĩnh, được xây dựng từ các tập tin HTML, hoặc động, vận hành trên các hệ thống quản lý nội dung (CMS) chạy trên máy chủ Ngoài ra, website còn được phát triển bằng nhiều ngôn ngữ lập trình khác nhau như PHP, JavaScript, và Java.
● Giúp tiết kiệm chi phí
● Tăng lợi nhuận kinh doanh
● Dễ dàng mở rộng tệp khách hàng
● Linh hoạt mở rộng quy mô và phát triển sản phẩm
● Nâng cao trải nghiệm khách hàng
● Dễ dàng chăm sóc khách hàng
Lý do chọn đề tài
Lý do chọn đề tài thiết kế website thương mại điện tử là do sự phát triển mạnh mẽ của công nghệ và xu hướng số hóa hiện nay Thương mại điện tử mở ra cơ hội kinh doanh mới và là cầu nối quan trọng giữa doanh nghiệp và người tiêu dùng Nghiên cứu và thiết kế website thương mại điện tử giúp hiểu rõ các yếu tố cần thiết để tạo nền tảng trực tuyến hiệu quả, tối ưu trải nghiệm người dùng và đáp ứng nhu cầu thị trường Đề tài này mang tính thực tiễn cao, giúp người nghiên cứu rèn luyện kỹ năng thiết kế, lập trình và xây dựng chiến lược kinh doanh trực tuyến.
Tiểu luận này tập trung vào việc phát triển một trang web thương mại điện tử hoàn chỉnh, bao gồm các chức năng thiết yếu như phân quyền đăng nhập, xem và phân loại sản phẩm, thanh toán, cũng như quản lý sản phẩm và đơn hàng cho người quản lý.
Kết hợp lý thuyết và phân tích thực tế, website được phát triển dựa trên nghiên cứu kiến thức lý thuyết về phát triển ứng dụng web nâng cao, cùng với việc phân tích các website bán hàng để thiết kế một website bán hàng tối ưu nhất.
Website được thực hiện bởi phần mềm Joomla 4
Cơ sở dữ liệu được thực hiện trên Xampp
KẾ HOẠCH THỰC HIỆN THIẾT KẾ WEB CHO CỬA HÀNG KINH
Thu thập dữ liệu
Trên thị trường hiện nay, có nhiều cửa hàng online chuyên bán đặc sản, và để phục vụ cho hoạt động kinh doanh này, họ đã xây dựng các trang web để giới thiệu và bán sản phẩm Dưới đây là một số trang web mà chúng tôi đã tìm hiểu.
Hình 1: Giao diện Website Đặc sản 3 miền SD
Giao diện web của Đặc sản 3 miền SD được thiết kế rõ ràng và dễ nhìn, cung cấp đầy đủ thông tin về cửa hàng và phương thức liên lạc Hình ảnh sản phẩm chân thật cùng với các danh mục giúp khách hàng dễ dàng tìm hiểu về sản phẩm và cửa hàng.
Khi cuộn xuống, bạn sẽ thấy các sản phẩm đặc sản của cửa hàng được phân loại một cách khoa học, kèm theo hình ảnh chân thực, điều này giúp tăng cường độ uy tín cho cửa hàng.
Hình 2: Giao diện sản phẩm của cửa hàng Đặc sản 3 miền SD
Cửa hàng này tổ chức sản phẩm theo danh mục, giúp khách hàng dễ dàng tìm kiếm sản phẩm mong muốn Trang web còn tích hợp thanh tìm kiếm, nút liên hệ và giỏ hàng, tạo điều kiện thuận lợi cho việc quản lý và mua sắm sản phẩm.
Hình 3: Danh mục sản phẩm
Tuy nhiên trang web này còn nhiều thiếu sót cần cải thiện:
- Nhìn tổng thể thiết kế của trang web còn đơn giản thiếu chuyên nghiệp, màu sắc của trang web nhìn không bắt mắt và khá lỗi thời
- Tính năng thanh toán của trang web này chưa có, chỉ đặt đơn và không được chọn phương thức thanh toán khó khăn cho khách hàng.⇒
- Thiếu tính năng đánh giá sản phẩm, giảm đi độ uy tín đối với khách hàng.
Hình 4: Giao diện chính của cửa hàng VOVE
Giao diện VOVE thu hút với màu vàng sáng chủ đạo, tích hợp nhiều tính năng hữu ích như tìm kiếm sản phẩm, danh mục sản phẩm, bộ lọc, thông tin cửa hàng, giỏ hàng và các sản phẩm nổi bật.
Bố cục của trang web cũng khá rõ ràng vừa vào trang web có ngày băng chuyền để cung cấp nhiều thông tin hơn đến với khách hàng
Hình 5: Mô tả sản phẩm của cửa hàng VOVE
Khi khách hàng nhấn vào sản phẩm, họ sẽ nhận được thông tin mô tả chi tiết, các sản phẩm liên quan được gợi ý, và những ưu đãi hấp dẫn Điều này tạo ra một lợi thế lớn cho trang web, góp phần tăng cường nhu cầu mua sắm của khách hàng.
Cửa hàng cung cấp công thức chế biến món ăn từ thực phẩm, thể hiện sự chu đáo và quan tâm đến khách hàng.
Ngoài ra trang web còn có mục sản phẩm đã xem giúp khách hàng tìm lại được sản phẩm đã xem trước đó nếu lỡ thoát ra.
Cửa hàng VOVE cung cấp nhiều phương thức thanh toán linh hoạt, bao gồm cả thanh toán online, giúp khách hàng tiết kiệm thời gian và nâng cao sự tiện lợi trong quá trình mua sắm.
- Trang web thiếu lượt mua sản phẩm và đánh giá sản phẩm của khách hàng giảm độ uy tín đối với khách hàng ⇒
- Thiếu phương thức tương tác đối với khách hàng như Chatbot, khó khăn trong việc giao tiếp và giải quyết vấn đề cho khách hàng kịp thờ.
Hình 7: Giao diện chính của cửa hàng Hương Việt Mart
Giao diện của trang web này khá bắt mắt với những hình ảnh màu sắc tươi tắn, bố cục của trang web rõ ràng, menu
Hình 6: Danh mục sản phẩm đã xem phân loại hợp lý ⇒ Giúp khách hàng tìm kiếm sản phẩm dễ dàng.
Nền tảng này cung cấp nhiều tính năng hữu ích như tìm kiếm sản phẩm, phương thức liên lạc đa dạng, danh mục sản phẩm phong phú, băng chuyền hiển thị, quảng cáo ưu đãi hấp dẫn, và Chatbot hỗ trợ khách hàng trong quá trình mua sắm.
Trang web Hương Việt không chỉ cung cấp thông tin mô tả sản phẩm giống như VOVE mà còn có phần đánh giá sản phẩm, giúp khách hàng có cái nhìn rõ ràng và tích cực hơn về cửa hàng.
Hình 8: Đánh giá sản phẩm
Qua tìm hiểu chúng tôi xác định được một số tính năng và giao diện cần có của một trang web bán hàng là:
- Giao diện có bố cục rõ ràng, màu sắc bắt mắt và hiện đại thu hút người tiêu dùng
- Có danh mục sản phẩm rõ ràng, sản phẩm cần có thông tin sản phẩm rõ ràng
- Có hình ảnh sản phẩm rõ ràng, không mờ giúp khách hàng hình dung được về sản phẩm
- Chatbot, phương thức liên lạc để trực tiếp giao tiếp với khách hàng
- Phương thức thanh toán đa dạng cho khách hàng
- Phương thức vận chuyển đa dạng Đối với nội bộ cửa hàng, trang web cần có:
- Danh sách các nhà cung cấp
- Dữ liệu về khách hàng
Thiết kế giao diện
Giao diện phác thảo của chúng tôi:
Hình 9: Giao diện phác thảo
Sử dụng tông màu xanh lá chủ đạo mang lại cảm giác tươi mát và gần gũi với thiên nhiên, rất phù hợp với hình ảnh các sản phẩm đặc sản vùng miền.
- Typography: Font chữ đơn giản, dễ đọc, tạo sự chuyên nghiệp.
- Hình ảnh: Hình ảnh sản phẩm chất lượng cao, bắt mắt, giúp khách hàng hình dung rõ ràng về sản phẩm.
- Bố cục: Bố cục rõ ràng, khoa học, các thành phần được sắp xếp hợp lý, tạo trải nghiệm người dùng tốt.
Đặc sản vùng miền Góc Quê cung cấp những sản phẩm chất lượng cao, an toàn và giá cả hợp lý, đồng thời mang đến dịch vụ giao hàng toàn quốc tiện lợi Slogan của chúng tôi ngắn gọn và súc tích, truyền tải rõ ràng thông điệp về sản phẩm và dịch vụ mà cửa hàng cung cấp.
- Thông tin sản phẩm: Hình ảnh sản phẩm được trình bày đẹp mắt, kèm theo mô tả ngắn gọn về sản phẩm.
- Thông tin về cửa hàng: Chưa có thông tin cụ thể về cửa hàng (ví dụ: địa chỉ, số điện thoại, giới thiệu về cửa hàng).
- Call to action: Nút "MUA NGAY" được đặt ở vị trí nổi bật, khuyến khích khách hàng thực hiện hành động mua hàng.
- Thanh menu: Gồm các mục cơ bản: Trang chủ, Sản phẩm, Giới thiệu, Liên hệ.
- Tìm kiếm: Cho phép khách hàng tìm kiếm sản phẩm một cách nhanh chóng.
- Giỏ hàng: Chưa hiển thị rõ ràng chức năng giỏ hàng.
- Chatbot: giúp giải đáp mọi thắc mắc về dịccungghay khiếu nại của khách hàng.
Kế hoạch thực hiện đề tài
3.1 Phân tích các chức năng Web thương mại điện tử Để có một trang web thương mại điện tử phù hợp với nhu cầu mua sắm online của khách hàng cần có những chức năng sau:
- Giới thiệu về cửa hàng
- Giỏ hàng, tìm kiếm sản phẩm
- Chatbot, phương thức liên hệ
- Phương thức vận chuyển và phương thức thanh toán đa dạng, phổ biến.
- Mã giảm giá cho khách hàng, đánh giá của khách hàng a Menu chính cho trang Web
Trên phần Menu chính cho trang web chúng tôi xác định cần có các mục là Trang chủ, Giới thiệu, Danh mục sản phẩm, Liên hệ.
Hình 10: Menu chính trong kế hoạch b Trưng bày sản phẩm
Tại trang chủ của website, chúng tôi giới thiệu các sản phẩm nổi bật cùng với các chương trình ưu đãi hấp dẫn để thu hút khách hàng Ngoài ra, chúng tôi cung cấp mô tả ngắn gọn về cửa hàng Để thuận tiện cho việc mua sắm, chúng tôi đã tích hợp giỏ hàng và thanh tìm kiếm thông minh trên giao diện chính Để giải đáp thắc mắc kịp thời, chúng tôi cũng đã thêm tính năng Chatbot và phương thức liên hệ trực tiếp Về phương thức vận chuyển, chúng tôi cung cấp hai lựa chọn: vận chuyển thường và vận chuyển nhanh cho những khách hàng cần sản phẩm gấp Đối với thanh toán, khách hàng có thể chọn thanh toán khi nhận hàng hoặc thanh toán online qua chuyển khoản Chúng tôi cũng cung cấp mã giảm giá để khách hàng tiết kiệm chi phí.
Hình 11: hình ảnh trừng bày sản phẩm trong giao diện chính
3.2 Các công cụ để thực hiện đề tài
- Sử dụng JoomShopping để tạo các cửa hàng bán trên sàn thương mại điện tử
- Sử dụng plugin JCE để tại các bài viết trong website nhanh và dễ dàng hơn.
THỰC HIỆN ĐỀ TÀI
Giới thiệu công cụ
Wonderchat.io là nền tảng tiên tiến cho phép người dùng dễ dàng tạo chatbot AI Với công nghệ ChatGPT, người dùng có thể cá nhân hóa chatbot bằng cách sử dụng kiến thức từ trang web hoặc tải lên tệp PDF Chỉ trong 5 phút, bạn có thể có một chatbot tùy chỉnh sẵn sàng phục vụ khách hàng 24/7.
- Hỗ trợ đa ngôn ngữ
- Tăng trải nghiệm người dùng
● Cách cài đặc Woderchat.io b Jomshopping
●Giới thiệu về công cụ
JoomShopping là một tiện ích mở rộng mạnh mẽ cho Joomla, giúp tạo ra các website thương mại điện tử với giao diện thân thiện và tính năng linh hoạt Đây là giải pháp phổ biến cho việc xây dựng cửa hàng trực tuyến, hỗ trợ nhiều ngôn ngữ.
- Quản lý sản phẩm và danh mục sản phẩm.
- Hỗ trợ các phương thức thanh toán (PayPal, chuyển khoản ngân hàng, v.v.).
- Giao diện người dùng thân thiện và dễ sử dụng.
- Hỗ trợ tùy chỉnh giao diện và tích hợp các module bổ sung.
- Đa ngôn ngữ, phù hợp cho các website quốc tế.
- Hỗ trợ quản lý thuế, giảm giá, và phí vận chuyển. Ứng dụng:
- Tạo cửa hàng bán lẻ trực tuyến.
- Website bán sản phẩm kỹ thuật số (e-book, phần mềm).
- Các cửa hàng chuyên biệt (đồ điện tử, quần áo, đặc sản, v.v.).
Các bước thực hiện đề tài
Bước 1: Truy cập trang web chính thức của JoomShopping hoặc Joomla Extension Directory (JED). https://extensions.joomla.org/extension/joomshopping/
● Bước 2: Vào Extensions > Manage > Install Tải lên file cài đặt của JoomShopping và nhấn Install.
● Bước 3: Kích hoạt và Cấu hình:
- Sau khi cài đặt thành công, vào Components > JoomShopping.
- Cấu hình các thông số cơ bản: tiền tệ, ngôn ngữ, quốc gia, phương thức thanh toán.
Bước 1: Tạo danh mục sản phẩm trước.Vào Joomshopping-> Category
Hình 14: Hướng dẫn tạo danh mục sản phẩm
Bước 2: Ấn vào thanh công cụ Joomla chọn Menus >Main Menu > New
Gõ Đặc sản miền Trung tại ô Title.Vào select chọn -> Joomshopping-> category.
Chỗ Category ID: Ấn chọn danh mục sản phẩm đặc sản miền trung (đã tạo tại bước 1)
Hình 15: Danh mục sản phẩm trên trang Website
Bước : Ấn chọn mục Content > Site Modules > +New > Smart Search
Bước 1: Tìm kiếm và tải plugin WT JShopping Cart tại địa chỉ https://extensions.joomla.org/
Hình 17: Tìm Kiếm Plugin JShopping Cart
Bước 2: Cài đặt Plugin WT JShopping Cart đã tải về Chọn file đã tải về thả vào Extensions: Install
Bước 3: Ấn chọn mục Content > Site Modules > +New > WT JShopping Cart > Thiết lập cấu hình cho plugin này.
Tạo danh mục sản phẩm
Bước 1: Chọn Components > Joomshopping > Category
Bước 2: Chọn New rồi đặt tên danh mục sản phẩm
Hình 21: Tạo danh mục mới
Bước 1: Chọn Components > Joomshopping > Producs
Bước 2: Chọn “ +New” rồi thiết lập sản phẩm
+Short description: Mô tả ngắn về sản phẩm.
+Access: Truy cập (chọn người có thể truy cập)
+Manufacturer name: Nhà cung cấp
+Categories: Chọn danh mục sản phẩm (sản phẩm thuộc danh mục sản phẩm)
- Image: Chọn ảnh cho sản phẩm
- Video: Chọn video cho sản phẩm
Hình 23: Các lựa chọn để tạo sản phẩm
+Tạo bài viết trong thanh tin tức
To create a new article, navigate to the Main Menu and select New Enter "News" in the title field, choose "Articles" for the menu item type, and select "Blog" as the category Then, in the "Choose a Category" section, select the previously created "News" category Finally, click Save to complete the process.
Hình 24: Giao diện trang tin tức
Bước 1: Vào mục Articles và chọn tin tức đã tạo Tại tiêu đề bài viết thứ nhất, nhập mô tả chi tiết trong phần article text Để thêm hình ảnh, sử dụng mục image and link để tải ảnh lên Cuối cùng, nhấn lưu để hoàn tất.
Hình 25: Tạo banner quảng cáo tại trang chủ
To upload a banner image, navigate to System -> Site Modules -> New -> Custom -> CMS Content, select Media, and upload your banner image Then, in the Position section, choose Sidebar-right In the Menu Assignment, select where you want the banner to appear, either on the homepage or in the news section, and finally, click Save.
Hình 26: Kết quả sau khi tạo
Bước 1 : Truy cập trang web Wondercchshat: https://app.wonderchat.io/
Hình 27: Truy cập vào Wonderchat
Bước 2: Ấn vào mục Dashboard > Create Bot > Đặt tên cho chatbot
Hình 28: Đặt tên chô Chatbot
Bước 3: Nhấn vào mục Pages crawled, sau đó dán địa chỉ liên kết và các thông tin liên quan đến sản phẩm của chúng ta, đây là dữ liệu đầu vào cho Chatbot.
Hình 29: Thêm các trang thông tin cho Chatbot
Bước 4 Lấy mã code của Chatbot để tích hợp Chatbot vào Website ( Embed to website)
Hình 30: Tích hợp Chatbot vào Website
Step 4: After copying the Chatbot code, navigate to Joomla Select System > Site Template > choose your website's Template > Editor > Index.php, and paste the copied Chatbot code into the position just before the closing tag.
Hình 31: Dán mac code đã copy vào vị trí
+Tạo băng banner băng chuyền
Bước 1: Cài đặt plugin Smart Slider 3 tại:https://smartslider3.com/free-joomla-slider/ > Download
Bước 2: Install file plugin Smart Slider 3 đã tải về.
- Ấn System > Extensions: Install > thả file Smart Slider 3 đã tải về vào vùng install.
Hình 33: Tải Slider 3 lên hệ thống
Bước 3: Chọn Smart Slider 3 trong Components > New > Tải ảnh lên như hình sau
Hình 34: Tải hình ảnh lên Slider 3
Bước 4: chọn Contens của thanh công cụ Joomla > New> Smart Slider 3 Module> Thiết lập như hình
Hình 35: Thiết lập cho Slider 3
Tạo phân loại sản phẩm
Vào configuration->product->tick chọn show fiters
Hình 36:Tạo phân loại sản phẩm
Đánh giá web đã thực hiện so với thiết kế ban đầu
Nhìn chung thì website dự kiến chưa chi tiết và ít chức năng hơn website trên thị trường.
Nên nhóm tiến hành tạo một website hoàn chỉnh dựa trên thiết kế ban đầu bổ sung thêm banner quảng cáo và đăng nhập người dùng…
DEMO
Phân tích thiết kế hệ thống của website
● Sơ đồ Use-Case với tài khoản quản trị viên
Hình 37: Sơ đồ Use-Case với tài khoản quản trị viên
● Sơ đồ Use-Case cho người dùng tài khoản
Hình 38: Sơ đồ Use-Case cho người dùng tài khoản
Demo các giao diện
Trên giao diện chính sẽ hiển thị thông tin và hình ảnh banner được thiết kế để người dùng có thể biết được thông tin cơ bản của website
- Thanh chức năng bao gồm:
- Ngoài ra, còn có các nút chức năng: Trang chủ, đặc sản miền bắc, đặc sản miền trung, đặc sản miền nam đăng nhập, tài khoản, giỏ hàng.
- Đăng nhập để đăng nhập vào tài khoản người dùng
- Giỏ hàng để xem các sản phẩm đã thêm vào đơn hàng và thanh toán
- Thanh tìm kiếm giúp tiếp kiếm thời gian cho khách hàng trong việc tìm kiếm sản phẩm.
Để thuận tiện trong việc chăm sóc khách hàng, nhóm đã thiết kế giao diện đăng nhập với tên người dùng và mật khẩu Sau khi xác nhận tài khoản, người dùng có thể dễ dàng đăng nhập và sử dụng các dịch vụ trên website.
Hình 41: Giao diện sản phẩm
Trang sản phẩm được phân loại thành các khu vực như đặc sản miền Trung, miền Nam và miền Bắc, giúp khách hàng dễ dàng tìm kiếm sản phẩm mong muốn Khách hàng cũng có thể xem thông tin chi tiết về sản phẩm hoặc thêm sản phẩm vào giỏ hàng.
Hình 42Giao diện giỏ hàng
Giao diện hiển thị tất cả sản phẩm trong thùng hàng của người dùng, cho phép họ thay đổi số lượng hoặc xóa sản phẩm không còn muốn mua Người dùng có thể tiếp tục thanh toán khi đã quyết định mua hàng.
Hình 43: Giao diện mua hàng
Khách hàng tiến hành nhập các thông tin giao hàng như họ tên, email,địa chỉ,số điện thoại, mã giảm giá(nếu có)
Giao diện hiển thị đơn hàng đã tiến hành cải đặt hành thành công và đơn hàng thông tin đã được gửi email của khách hàng.
Giao diện quản lý sản phẩm
Hình 44: Giao diện quản lý sản phẩm
Giao diện quản lý đơn hàng
Hình 45: Giao diện quản lý đơn hàng
Giao diện xem tin tức
Hình 46: Giao diện xem tin tức
Hình 47: Giao diện liên hệ
