Bối cảnh và vấn đề nghiên cứu
Trong bối cảnh công nghệ thông tin và kỹ thuật số phát triển nhanh chóng, thương mại điện tử đã trở thành một phương thức kinh doanh phổ biến trên phạm vi toàn cầu. Việc ứng dụng website bán hàng trực tuyến mang lại nhiều lợi ích thực tiễn, bao gồm tiết kiệm chi phí vận chuyển trung gian, giảm thiểu chi phí giao dịch và rút ngắn thời gian mua sắm của người tiêu dùng. Đồng thời, nền tảng số hỗ trợ khách hàng tìm kiếm thông tin hàng hóa tự động theo nhu cầu và sở thích cá nhân ngay tại nhà. Nhờ sự hỗ trợ của các công cụ và nền tảng phát triển web với chi phí triển khai tối ưu, việc xây dựng các hệ thống bán hàng trực tuyến trở nên khả thi và thuận tiện hơn.
Tiểu luận môn học "Thực hành thiết kế web" với đề tài "Thiết kế website bán mỹ phẩm cao cấp" được thực hiện nhằm xây dựng một website bán lẻ mỹ phẩm có giao diện thân thiện, dễ thao tác, hỗ trợ người dùng tiếp cận và tìm kiếm các dòng sản phẩm làm đẹp chính hãng.
Nhiệm vụ và mục tiêu cụ thể của đề tài bao gồm:
- Khảo sát thực tế và phát biểu bài toán kinh doanh mỹ phẩm xách tay trực tuyến.
- Phân tích các yêu cầu chức năng cơ bản của hệ thống website thương mại điện tử.
- Thiết kế sơ đồ cấu trúc website và đặc tả giao diện chi tiết cho các trang thành phần (Trang chủ, Đăng ký, Đăng nhập, Giới thiệu, Sản phẩm, Chi tiết sản phẩm, Tin tức làm đẹp, Bí quyết làm đẹp chi tiết, Hướng dẫn đặt hàng, Liên hệ).
- Hiện thực hóa giao diện bằng mã nguồn HTML, định kiểu CSS và tích hợp các kịch bản tương tác JavaScript/jQuery.
Đối tượng và phạm vi nghiên cứu của đề tài:
- Đối tượng nghiên cứu: Quy trình phân tích, thiết kế giao diện và xây dựng trang web thương mại điện tử kinh doanh mỹ phẩm cao cấp mang thương hiệu "Vintage" (Vintage VietNam Official Store).
- Phạm vi không gian: Đề tài được triển khai trong khuôn khổ môn học tại Viện Kỹ thuật Công nghệ, Trường Đại học Thủ Dầu Một (tác giả: sinh viên Trần Phạm Minh Quang, MSSV: 2024802010332, Lớp: D20CNTT01; Cán bộ hướng dẫn: ThS. Nguyễn Hữu Vĩnh).
- Phạm vi thời gian: Công trình được hoàn thành vào tháng 04 năm 2021.
Cơ sở lý thuyết và phương pháp
Khung công nghệ và công cụ sử dụng
Tác giả sử dụng các công nghệ tiêu chuẩn trong thiết kế và lập trình giao diện web phía máy khách (Front-end):
- Ngôn ngữ đánh dấu: Sử dụng chuẩn tài liệu XHTML 1.0 Transitional và HTML5 để xây dựng cấu trúc các phần tử nội dung (
header, nav, article, aside, footer, bảng biểu, biểu mẫu).
- Ngôn ngữ định kiểu: CSS kết hợp giữa tập tin định kiểu riêng (
vintage.css) và thư viện ngoài để thiết lập màu sắc, phân chia kích thước khung bao, kiểu chữ và hiệu ứng rê chuột (:hover).
- Thư viện giao diện: Framework Bootstrap (phiên bản tích hợp qua MaxCDN) được ứng dụng để dựng thanh điều hướng đa cấp (
navbar-inverse, dropdown-menu), hệ thống lưới (container, row, col-xs/sm/md/lg-12) và trình chiếu ảnh trượt tự động (carousel slide).
- Ngôn ngữ kịch bản: JavaScript kết hợp thư viện jQuery (phiên bản 3.x tải từ máy chủ Ajax) để xử lý các hộp thoại tương tác xác nhận thao tác đặt hàng (
confirm, alert) và hiệu ứng chuyển đổi hình ảnh quảng cáo theo sự kiện chuột (onMouseOver, onMouseOut).
- Dịch vụ tích hợp bên ngoài: Dịch vụ bản đồ số Google Maps nhúng qua thẻ
<iframe> để hiển thị vị trí địa lý của cửa hàng tại địa chỉ Số 6, Trần Văn Ơn, Thủ Dầu Một, Bình Dương.
Phương pháp nghiên cứu và triển khai
Đề tài áp dụng các phương pháp kỹ thuật phần mềm hướng giao diện:
- Phương pháp phân tích yêu cầu: Khảo sát nhu cầu thực tế của người dùng đối với dòng sản phẩm mỹ phẩm xách tay chính hãng; xác định các tiêu chí chất lượng, thông tin nguồn gốc xuất xứ và các kênh hỗ trợ khách hàng.
- Phương pháp thiết kế cấu trúc thông tin (Information Architecture): Thiết lập sơ đồ cây điều hướng website, phân chia ranh giới giữa các khối thông tin chính và thông tin bổ trợ.
- Phương pháp thiết kế wireframe và giao diện: Lập bố cục màn hình chi tiết cho từng trang chức năng, quy định quy tắc hoạt động của người dùng trên form biểu mẫu đăng ký, đăng nhập và mua hàng.
- Phương pháp lập trình và kiểm thử giao diện: Viết mã nguồn HTML/CSS/JS, nhúng các thành phần đồ họa và kiểm tra hiển thị liên kết giữa các trang cục bộ.
Nguồn dữ liệu thực nghiệm
Dữ liệu sử dụng trong website là dữ liệu mẫu mô phỏng hoạt động của cửa hàng mỹ phẩm Vintage, bao gồm:
- Danh mục sản phẩm son và đồ trang điểm: Glacier Velvet Tint (các màu Icy Love, Mermaid Wish, Say So), Touch of Rose (các màu Amelia, Magicfire, Seapearl), Modern Matte Lipstick (các màu Fairy Light, Lady Rose, Snowball), Cotton Lip Cream, Modern Eyeliner.
- Dữ liệu bài viết: Bí quyết làm đẹp tự nhiên, hướng dẫn làm trắng da, kỹ thuật trang điểm và phương pháp ngăn ngừa rụng tóc, kích thích mọc tóc.
- Dữ liệu khuyến mãi: Chương trình Ngày hội Sale 4/4, Voucher 30% cho đơn hàng trên 2.000.000 VNĐ, Voucher 20% cho cặp đôi, chương trình Check-in nhận quà và chính sách ưu đãi cho thành viên (Members).
Thiết kế và triển khai
Hệ thống được thiết kế theo mô hình trang web tĩnh phân tầng bố cục chuẩn, kết hợp giữa mã nguồn HTML tự xây dựng và các thành phần định sẵn của Bootstrap.
Bảng phân tích yêu cầu chức năng hệ thống
| STT |
Tên chức năng |
Mô tả chức năng |
| 1 |
Cung cấp thông tin chi tiết kèm hình ảnh sản phẩm |
Cung cấp thông tin đầy đủ, hình ảnh chi tiết được chụp trực quan theo nhiều góc độ khác nhau. |
| 2 |
Tìm kiếm sản phẩm |
Hỗ trợ khách hàng nhanh chóng tra cứu và có được thông tin sản phẩm theo nhu cầu. |
| 3 |
Chia sẻ các bí quyết làm đẹp |
Chia sẻ công khai các bài viết hướng dẫn làm trắng da, chăm sóc tóc và kỹ thuật trang điểm. |
| 4 |
Cập nhật chương trình khuyến mãi |
Cập nhật thông tin ưu đãi nhanh chóng mỗi ngày, cung cấp nhiều quyền lợi cho khách hàng thành viên. |
| 5 |
Hỗ trợ khách hàng |
Tiếp nhận và hỗ trợ xử lý sự cố trực tuyến cho khách hàng qua Hotline và Email. |
Cấu trúc phân cấp và sơ đồ điều hướng website
Sơ đồ website được tổ chức thành các luồng điều hướng phân cấp rõ ràng từ Trang chủ:
- Trang chủ: Điểm truy cập chính, hiển thị thanh điều hướng, banner chuyển động, danh sách sản phẩm nổi bật, tin khuyến mãi, bản đồ vị trí và chân trang.
- Trang giới thiệu: Thông tin tổng quan về cửa hàng, tiêu chí chất lượng, cam kết hàng chính hãng và chính sách giao nhận hàng.
- Trang sản phẩm: Phân loại theo các dòng mỹ phẩm (Glacier Velvet Tint, Touch of Rose, Modern Matte Lipstick, Cotton Lip Cream, Modern Eyeliner). Mỗi danh mục có trang hiển thị danh sách và trang chi tiết sản phẩm.
- Trang bí quyết làm đẹp / Tin tức làm đẹp: Chuyên mục cẩm nang làm đẹp (Bí quyết làm đẹp chung, Bí quyết làm trắng da, Bí quyết trang điểm).
- Trang hướng dẫn đặt hàng: Hướng dẫn các bước và thủ tục mua hàng trực tuyến.
- Trang liên hệ: Biểu mẫu và kênh tiếp nhận hỗ trợ sự cố đơn hàng, đăng nhập tài khoản.
- Trang tài khoản: Phân hệ bao gồm chức năng Đăng ký tài khoản và Đăng nhập hệ thống.
Thông số kỹ thuật bố cục giao diện (CSS Layout)
Mã CSS (vintage.css) quy định chi tiết cấu trúc hiển thị của website:
- Khung chứa chính (
#menu): Thiết lập chiều rộng cố định width: 1200px, căn giữa màn hình với margin: 0 auto.
- Khu vực nội dung chính (
article): Nằm bên phải với width: 900px, float: right.
- Thanh bên (
aside): Nằm bên trái với width: 260px, float: left, chứa các khối danh mục sản phẩm, tin tức khuyến mãi và iframe bản đồ Google Maps (width="260" height="260").
- Chân trang (
footer): Thiết lập thuộc tính clear: both, tích hợp dòng chữ chạy marquee với nền màu hồng #FFAEB9, màu chữ trắng, bo góc border-radius: 10px.
- Khối sản phẩm (
.box): Kích thước width: 290px, float: left, viền ngoài border: 1px solid #333, có hiển thị ảnh, tên sản phẩm, giá gốc (gạch ngang qua thẻ <del>), giá sau giảm (màu đỏ #F00) và nút bấm "Mua hàng" bo tròn góc.
- Bảng màu chủ đạo: Sử dụng tông hồng
#FFAEB9 cho nền menu/tiêu đề, màu cam #C8782F và xanh lam xám #617F7F cho các thành phần chữ tiêu đề, màu đỏ #F00 cho trạng thái hover và giá bán ưu đãi.
Nội dung chính theo từng chương
Khảo sát và phân tích bài toán
Chương này tập trung mô tả bài toán thực tế của đơn vị kinh doanh mỹ phẩm xách tay:
- Xác định mục tiêu trở thành nơi cung cấp các mặt hàng mỹ phẩm xách tay chính hãng từ Hàn Quốc, Pháp, Hồng Kông và Nhật Bản, đảm bảo bình ổn về giá và cam kết chất lượng được cấp phép hoạt động.
- Xác định chức năng chia sẻ cẩm nang làm đẹp từ phương pháp tự nhiên, an toàn, không gây kích ứng cho người tiêu dùng.
- Thiết lập 5 yêu cầu chức năng cốt lõi cho hệ thống phần mềm (Cung cấp thông tin sản phẩm, Tìm kiếm, Chia sẻ bí quyết, Cung cấp tin khuyến mãi, Kênh chăm sóc khách hàng).
Thiết kế giao diện
Chương này trình bày đặc tả yêu cầu, quy tắc hoạt động và giao diện trực quan của 10 trang chức năng:
- Giao diện trang chủ (Hình 2.2): Tích hợp đầy đủ thanh menu điều hướng, trình chiếu banner Carousel, khối hiển thị các sản phẩm tiêu biểu kèm giá khuyến mãi, menu tin tức khuyến mãi bên trái, khung nhúng bản đồ vị trí shop tại Trường Đại học Thủ Dầu Một và chân trang chứa địa chỉ, số hotline liên hệ.
- Giao diện trang đăng ký trực tuyến (Hình 29.1): Hỗ trợ người dùng tạo mới tài khoản thành viên. Người dùng thao tác nhập tên đăng nhập, mật khẩu và xác nhận mật khẩu để hoàn tất thủ tục đăng ký trước khi mua hàng.
- Giao diện trang đăng nhập (Hình 32.1): Cho phép thành viên điền tên đăng nhập và mật khẩu để xác thực quyền truy cập vào hệ thống và thực hiện thao tác đặt mua sản phẩm.
- Giao diện trang giới thiệu (Hình 35.1): Giới thiệu tên website, lịch sử hình thành, danh mục các đối tác mỹ phẩm nhập khẩu, các tiêu chí bán hàng (giá rẻ, chính hãng, minh bạch), chính sách miễn phí cước vận chuyển toàn quốc cho khách mua lẻ và nhận hàng thanh toán tiền mặt (COD).
- Giao diện trang sản phẩm (Hình 36.1): Hiển thị danh sách sản phẩm theo danh mục, bao gồm hình ảnh đại diện, tên sản phẩm, giá niêm yết cũ và giá khuyến mãi mới.
- Giao diện trang chi tiết sản phẩm (Hình 38.1): Trình bày thông tin chuyên sâu của từng sản phẩm bao gồm tên gọi, công dụng, thành phần, nguồn gốc xuất xứ và bộ ảnh chụp chi tiết từ nhiều góc độ trực quan.
- Giao diện trang tin tức làm đẹp & Bí quyết làm đẹp chi tiết (Hình 39.1): Đăng tải các bài viết hướng dẫn chăm sóc sắc đẹp, chia sẻ công thức chuẩn bị nguyên liệu tự nhiên và các bước thực hiện để ngăn ngừa rụng tóc, kích thích mọc tóc và làm trắng da.
- Giao diện trang hướng dẫn đặt hàng (Hình 40.1): Cung cấp các điều khoản, trình tự thao tác và thủ tục đặt mua hàng trên website.
- Giao diện trang liên hệ (Hình 42.1): Cung cấp kênh tiếp nhận phản hồi và trợ giúp khi người dùng gặp sự cố liên quan đến lỗi website, không thể đặt hàng, lỗi tài khoản hoặc cần tư vấn phương thức thanh toán.
Thiết kế chương trình
Chương này hiện thực hóa các bản thiết kế bằng mã nguồn chi tiết:
- Mã nguồn HTML các trang: Triển khai mã nguồn cấu trúc cho
trangchu.html, gioithieu.html, son1.html (Glacier Velvet Tint) và các trang danh mục liên quan. Mã nguồn tích hợp đầy đủ thẻ meta viewport phục vụ hiển thị đa thiết bị, khai báo đường dẫn liên kết CSS và thư viện JavaScript.
- Mã nguồn CSS (
vintage.css): Thiết lập chi tiết các lớp giao diện (.navbar, .menu, .carousel, .slide, .box, .button, .menu1, .menu2, .ketthuc, .chuchay1), kiểm soát chính xác khoảng cách lề (margin, padding), phông chữ (Times New Roman) và cách sắp xếp khối động.
- Mã nguồn kịch bản JavaScript: Tích hợp đoạn mã xử lý hộp thoại xác nhận khi người dùng nhấn nút "Mua hàng":
function myClick(){
var x = confirm("Xác nhận mua mặt hàng này");
if(x){
alert("Cảm ơn bạn tin tưởng sản phẩm của chúng tôi");
}else{
alert("Mời bạn quay lại tham khảo sản phẩm khác");
}
}
Kết quả và đóng góp
Kết quả đạt được
- Xây dựng thành công bộ giao diện hoàn chỉnh cho website bán mỹ phẩm cao cấp "Vintage" với đầy đủ 10 trang giao diện chức năng theo đúng sơ đồ cây điều hướng đã phân tích.
- Triển khai thành công mã nguồn HTML kết hợp định kiểu CSS tùy biến, đáp ứng bố cục hiển thị 2 cột chuẩn (
article 900px và aside 260px) trên khung hiển thị chuẩn 1200px.
- Nhúng và vận hành ổn định các thư viện giao diện hiện đại như Bootstrap Carousel để hiển thị các banner chuyển động (
Picture/chạy nền 1.jpg, nền 6.jpg, chạy nền 2.jpg) và Google Maps nhúng trực tiếp địa chỉ shop tại Bình Dương.
Giải pháp và chính sách dịch vụ do tác giả đề xuất
- Chính sách bán hàng minh bạch: Đề xuất mô hình kinh doanh kết hợp giữa bán buôn và bán lẻ các dòng mỹ phẩm xách tay nhập từ Hàn Quốc, Pháp, Hồng Kông, Nhật Bản với tiêu chí cam kết chính hãng và công khai thành phần, nguồn gốc.
- Tối ưu trải nghiệm khách hàng: Cung cấp thông tin giá cả rõ ràng (hiển thị đồng thời giá gốc và giá giảm), hỗ trợ giao hàng COD nhận hàng mới trả tiền, giao hàng trực tiếp tại Hà Nội, chuyển phát nhanh bưu điện cho các tỉnh thành khác và miễn cước vận chuyển cho khách mua lẻ trên toàn quốc.
- Hệ thống tư vấn đa kênh: Kết hợp tiếp cận khách hàng qua nhiều kênh liên lạc gồm số điện thoại hotline (0366390140, 0908919812, 0868017117, 0904245355), mạng xã hội Facebook và bản đồ chỉ đường trực quan.
Hạn chế và hướng nghiên cứu tiếp
Hạn chế của đề tài
- Phạm vi kỹ thuật: Hệ thống mới dừng lại ở mức xây dựng giao diện tĩnh phía người dùng (Front-end) trong khuôn khổ môn học thực hành; chưa có cơ sở dữ liệu lưu trữ động (DBMS) và chưa có mã nguồn xử lý logic phía máy chủ (Back-end).
- Tính năng giao dịch: Các chức năng Đăng ký, Đăng nhập và Mua hàng mới chỉ mô phỏng ở tầng giao diện và hộp thoại thông báo kịch bản JavaScript (
alert/confirm), chưa có cơ chế lưu trữ giỏ hàng, xác thực bảo mật mật khẩu hoặc kết nối cổng thanh toán trực tuyến thực tế.
- Đường dẫn tệp: Một số liên kết trong mã nguồn HTML vẫn sử dụng đường dẫn tuyệt đối cục bộ của máy tính cá nhân (
file:///D|/đồ án/Vintage/...), gây hạn chế khi triển khai trên máy chủ web môi trường thực tế.
Hướng phát triển tiếp theo
- Xây dựng hệ thống cơ sở dữ liệu quan hệ (như MySQL, SQL Server) để quản lý danh mục sản phẩm, thông tin khách hàng, bài viết tin tức và lịch sử đơn hàng.
- Lập trình hệ thống Back-end (sử dụng PHP, Node.js hoặc ASP.NET) để xử lý logic đăng ký/đăng nhập phân quyền, quản lý phiên làm việc (Session) của giỏ hàng và tích hợp cổng thanh toán điện tử.
- Xây dựng phân hệ Quản trị viên (Admin Dashboard) để hỗ trợ chủ cửa hàng cập nhật sản phẩm, điều chỉnh giá khuyến mãi và theo dõi tình trạng xử lý đơn hàng.
Giá trị tham khảo
Báo cáo tiểu luận môn học này mang lại giá trị tham khảo thiết thực cho các nhóm đối tượng:
- Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Là tài liệu tham khảo trực quan về cấu trúc một bài báo cáo tiểu luận môn học Thiết kế web cơ bản, từ khâu khảo sát yêu cầu, phân tích chức năng đến thiết kế sơ đồ trang và viết mã giao diện.
- Người học lập trình Front-end cơ bản: Cung cấp các ví dụ thực hành cụ thể về cách kết hợp giữa việc viết mã định kiểu CSS thuần với việc tích hợp các thành phần của thư viện Bootstrap (hệ thống lưới, thanh điều hướng đa cấp, slider Carousel) và cách nhúng mã JavaScript xử lý sự kiện tương tác.
Câu hỏi thường gặp
Đề tài này được thực hiện bởi ai, tại đơn vị đào tạo nào?
Đề tài do sinh viên Trần Phạm Minh Quang (MSSV: 2024802010332, Lớp: D20CNTT01) thực hiện dưới sự hướng dẫn của ThS. Nguyễn Hữu Vĩnh tại Viện Kỹ thuật Công nghệ, Trường Đại học Thủ Dầu Một (hoàn thành vào tháng 04/2021).
Website bán các dòng sản phẩm mỹ phẩm cụ thể nào?
Website mô phỏng việc phân phối các dòng sản phẩm mỹ phẩm nhập khẩu từ Hàn Quốc, Pháp, Hồng Kông và Nhật Bản, tiêu biểu gồm các dòng son và mỹ phẩm trang điểm: Glacier Velvet Tint (các mã màu Icy Love, Mermaid Wish, Say So), Touch of Rose (các mã màu Amelia, Magicfire, Seapearl), Modern Matte Lipstick (các mã Fairy Light, Lady Rose, Snowball), Cotton Lip Cream, Modern Eyeliner và Modern Eye Glitter.
Cửa hàng trong website có địa chỉ thực tế và chính sách giao hàng như thế nào?
Theo thông tin công bố trên website:
- Địa chỉ: Số 6, Trần Văn Ơn, Thủ Dầu Một, Bình Dương (có nhúng bản đồ Google Maps của Đại học Thủ Dầu Một).
- Chính sách giao nhận: Khách hàng nhận hàng mới thanh toán tiền (COD); giao trực tiếp tại Hà Nội; chuyển phát nhanh bưu điện đến các tỉnh thành khác; miễn phí toàn bộ cước vận chuyển đối với khách hàng mua lẻ trên toàn quốc.
Thao tác mua hàng trên website hiện tại được xử lý bằng kỹ thuật gì?
Khi người dùng bấm vào nút "Mua hàng" trên các khối sản phẩm, hệ thống kích hoạt hàm JavaScript myClick() để hiển thị hộp thoại xác nhận confirm("Xác nhận mua mặt hàng này"). Nếu người dùng nhấn xác nhận, hệ thống xuất thông báo alert("Cảm ơn bạn tin tưởng sản phẩm của chúng tôi"); ngược lại sẽ xuất thông báo mời tham khảo sản phẩm khác.
Kết luận
Tiểu luận môn học "Thực hành thiết kế web" của sinh viên Trần Phạm Minh Quang đã hoàn thành tốt mục tiêu khảo sát bài toán kinh doanh mỹ phẩm xách tay và thiết kế hoàn chỉnh hệ thống giao diện cho website bán hàng "Vintage". Đề tài đã xây dựng thành công 10 trang màn hình chức năng với bố cục hợp lý, phối màu hài hòa và tích hợp hiệu quả giữa mã nguồn HTML/CSS tùy biến cùng thư viện Bootstrap và jQuery. Mặc dù còn mang tính chất của một website tĩnh phục vụ học phần thực hành, công trình đã thể hiện rõ phương pháp thiết kế cấu trúc thông tin khoa học và tạo nền tảng vững chắc để tiếp tục mở rộng thành một hệ thống thương mại điện tử hoàn chỉnh với đầy đủ cơ sở dữ liệu và xử lý phía máy chủ.
