Đề tài của nhóm đã phát thảo hoàn thiện các giao diện chính của một website bán hàng thời trang bao gồm trang chủ, trang danh mục sản phẩm, trang chi tiết sản phẩm.. Trang tài khoản bao
Trang 1ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
bdôca
ÁP DỤNG HTML, CSS, JAVASCRIPT ĐỂ XÂY
DỰNG WEBSITE THỜI TRANG
Nhóm 6
Sinh viên thực hiện:
1 Huỳnh Lê Minh Thành 22521346 CNTT
2 Trần Phi Thành 22521365 CNTT
3 Chí Nhịt Phú 22521097 CNTT
TP HỒ CHÍ MINH – 12/2024
Trang 21 GIỚI THIỆU
Với nhu cầu mua sắm trực tuyến ngày càng phổ biến của người tiêu dùng hiện nay, nhóm đã quyết định chọn đề tài là thiết kế và xây dựng giao diện website bán hàng thời trang Trong quá trình thực hiện đồ án, nhóm chúng tôi đã sử dụng Visual Studio Code để soạn thảo mã nguồn, công cụ Figma để tạo ra bố cục và vẽ wireframe cho giao diện website thời trang Ngoài ra nhóm còn sử dụng JavaScript để tạo tính năng động và tương tác cho website Về kết quả đề tài, nhóm đã triển khai giao diện bằng HTML, CSS và tạo các chức năng tương tác cơ bản bằng JavaScript Đề tài của nhóm đã phát thảo hoàn thiện các giao diện chính của một website bán hàng thời trang bao gồm trang chủ, trang danh mục sản phẩm, trang chi tiết sản phẩm
Trong đề tài này nhóm chúng tôi cam kết minh bạch về các nội dung đề tài trong
đồ án môn học này Đề tài của nhóm được tham khảo tại một trang web thời trang [1]
để xây dựng trang web bán hàng thời trang Trong quá trình thực hiện nhóm không sao chép và sử dụng mã nguồn trang web này Ngoài ra, đề tài này của nhóm chúng tôi chưa từng chọn để làm đồ án cho bất kì môn học nào trước đây
2 PHÂN TÍCH THIẾT KẾ
Hình 1 Hình minh họa wireframe
Các bản phác thảo về các giao diện của trang web đều sẽ được sử dụng chung phần header và phần footer Phần header sẽ bao gồm Logo được đặt ở chính giữa và hai thanh điều hướng được bố trí hai bên, về thanh điều hướng nằm bên trái sẽ gồm
Trang 3các mục liên kết với hiệu ứng trượt khi người dùng tương tác, về thanh điều hướng nằm bên phải sẽ có thanh tìm kiếm và các biểu tượng icon Về phần footer sẽ có các mục về giới thiệu, dịch vụ, liên hệ, tải ứng dụng và các biểu tượng icon về các mạng
xã hội mà website hoạt động
Trang chủ được phát thảo với các mục SALE nằm dưới phần header, các tab này biểu thị cho các sản phẩm đang được khuyến mãi Tiếp đến, trang chủ được bố cục với các hình ảnh lớn nằm chính giữa trang và được hiển thị theo theo dạng slide bằng cách click chuột vào ô tròn
Mở đầu trang giới thiệu sẽ có thanh địa chỉ trỏ đến trang chủ Trang giới thiệu chủ yếu được bố trí bao gồm các hình ảnh về các cột mốc, sự kiện quan trọng, giá trị cốt lõi để giới thiệu về cửa hàng Các hình ảnh này được bố cục theo cách tuần tự từ trên xuống
Trang tài khoản bao gồm khung chứa ảnh đại diện của người dùng và các danh sách các mục về thông tin tài khoản, lịch sử đăng nhập, quản lý đơn hàng, địa chỉ, sản phẩm yêu thích được bố trí nằm bên trái Về phần chính giữa của trang web sẽ là khung hiển thị thông tin tài khoản của người dùng, ngoài ra sẽ có hai button để người dùng có thể cập nhật thông tin tài khoản và đổi mật khẩu Phần nằm phải của trang tài khoản sẽ là khung hiển thị thông tin chiết khấu của người dùng
Hình 2 Hình minh họa wireframe
Trang 4Trang đăng nhập được bố cục làm hai phần Phần bên trái chính là form đăng nhập bao gồm tiêu đề và text được đặt dành cho người dùng đã có tài khoản, khung thông tin đăng nhập sẽ có các ô nhập liệu e-mail và mật khẩu Phía dưới khung chính
là ô dùng để ghi nhớ tài khoản và các mục liên kết về quên mật khẩu và hình thức đăng nhập khác Về phần bên trái của trang đăng nhập chính là khung thông tin với tiêu đề
và nội dung được đặt cho người dùng chưa có tài khoản Cả hai button đều được bố trí bên dưới cùng của khung để thực hiện chức năng đăng nhập và đăng ký tài khoản Trang đăng ký sẽ chứa hai form thông tin đăng ký và thông tin mật khẩu Cả 2 form đều sẽ có các ô nhập liệu, form thông tin sẽ chứa các ô nhập liệu về tên tài khoản
và các thông tin liên quan đến người dùng Form mật khẩu sẽ có ô nhập liệu về mật khẩu, ô đồng ý với các điều khoản và button thể hiện chức năng đăng ký tài khoản Trang danh mục sản phẩm chứa thanh sidebar nằm phía bên trái cũng chính là bộ lọc sản phẩm Phần còn lại chính là danh sách hiển thị các loại sản phẩm thời trang chiếm phần lớn diện tích của giao diện và thanh chuyển trang được đặt ở phía dưới
Hình 3 Hình minh họa wireframe
Ở giữa giao diện của trang chi tiết sản phẩm, phần hình ảnh sản phẩm được đặt nổi bật ở phía bên trái, bao gồm hình ảnh chính và các hình ảnh phụ được đặt ở bên cạnh Bên phải các hình ảnh sản phẩm là khung thể hiện thông tin chi tiết của sản phẩm đó Phần sản phẩm liên quan là các hình ảnh về các sản phẩm thời trang được đặt ở cuối trang và các thông tin cơ bản về sản phẩm được đặt dưới mỗi hình ảnh
Trang 5Trang chi tiết giỏ hàng sẽ có thanh quy trình đặt sản phẩm được đặt ở phần trên của trang Tiếp đến là danh sách các sản phẩm trong giỏ hàng, với tiêu đề lớn được hiển thị để cho biết có bao nhiêu sản phẩm trong giỏ hàng Mỗi sản phẩm sẽ được trình bày bao gồm hình ảnh minh họa và nội dung thông tin sản phẩm ứng với mỗi tiêu đề nhỏ được đặt ở bên cạnh, button được đặt phía dưới phần danh sách sản phẩm để quay lại trang danh mục sản phẩm Phần bên phải là thông tin tổng tiền của giỏ hàng, button được đặt phía dưới phần thông tin để thực hiện chức năng đặt hàng
Giao diện của trang đặt hàng được chia làm 2 phần Phần bên trái của trang có thanh quy trình đặt sản phẩm được đặt ở phần trên của trang, các mục thông tin địa chỉ, phương thức giao hàng, hoá đơn VAT và phương thức thanh toán được bố cục tuần tự theo thứ tự từ trên xuống Bên cạnh mục thông tin tài địa chỉ chính là mục phương thức giao hàng và mục hoá đơn VAT cho các khách hàng nào cần xuất hoá đơn Cuối cùng chính là các phương thức thanh toán linh hoạt và button có chức năng hiển thị các sản phẩm có trong giỏ hàng Phần bên phải của trang đặt hàng chính là phần nội dung tóm tắt thông tin về giá cả của đơn hàng và mã phiếu giảm giá, button được đặt ngay phía dưới để thực hiện chức năng hoàn thành quá trình thanh toán
Về giao diện của trang liên hệ được bố cục với phần hình ảnh được đặt ngay dưới header của trang Phần chính của trang chính là thông tin liên hệ và được chia làm 2 phần Phần bên trái chứa các thông tin để người dùng có thể liên hệ với của hàng bao gồm thông tin địa chỉ, email, số điện thoại để mua hàng online và các thông tin của bộ phận chăm sóc khách hàng Phần bên phải chính là form liên hệ chứa các thông tin nhập liệu bao gồm thông tin cá nhân và các vấn đề, nội dung hoặc các câu hỏi mà người dùng thắc mắc cần giải đáp Ngoài ra trong form sẽ có button để có thể gửi các yêu cầu của người dùng Phần văn bản được đặt phía dưới phần thông tin liên hệ để giới thiệu về cửa hàng Bản đồ Google Map được đặt ngày bên phải của phần văn bản
để làm nổi bật vị trí của cửa hàng
3 CƠ SỞ THỰC HIỆN
Giao diện của trang web được thực hiện hoàn toàn bằng HTML, CSS và JavaScript Trong việc phân tích thiết kế wireframe chúng tôi có sử dụng công nghệ figma để tạo ra các wireframe theo những gì đã phân tích được Chúng tôi sử dụng
Trang 6HTML nhằm tạo ra cấu trúc cơ bản của các trang, CSS thực hiện việc định dạng, trình bày lại trang web chỉnh chu hơn, JavaScript nhằm tạo các hiệu ứng động và xử lý các
sự kiện Cụ thể, ở trang Login Page, chúng tôi có dùng JavaScript để xử lý sự kiện Đăng ký với thao tác click vào button Đăng ký; Signup Page chúng tôi dùng để xử lý
sự kiện nhập liệu các ô thông tin của người dùng đăng ký, ngoài ra chúng tôi còn xử lý việc tạo mã Captcha ngẫu nhiên [Phụ lục hình 1], và hiển thị đăng ký thành công nếu nhập đúng các định dạng; Với trang category, chúng tôi có sử dụng để xử lý sự kiện đầu tiên là click vào các ô màu sắc ở dưới mỗi mục hình ảnh sẽ đổi ảnh theo màu sắc
đã chọn, hover hình ảnh, active khi click vào trái tim, sự kiện thứ hai là bộ lọc ở bên trái của trang web với nhiều xử lý phức tạp hơn [Phụ lục hình 2]; Với trang product, chúng tôi cũng có xử lý sự kiện tương tự như ở trang category với các hình ảnh mẫu, tăng số lượng sản phẩm, ngoài ra còn có sự kiện ở phần mô tả sản phẩm với các mục giới thiệu, chi tiết sản phẩm, bảo quản khi click vào sẽ hiển thị nội dung của từng phần riêng biệt [Phụ lục hình 3]; Với trang cart chúng tôi xử lý sự kiện tăng số lượng sản phẩm và xóa sản phẩm ra khỏi giỏ hàng [Phụ lục hình 4]; Với trang order, chúng tôi
xử lý sự kiện Hiển thị sản phẩm khi click vào button sẽ hiển thị sản phẩm đã được đặt,
và sự kiện fade đối với button VAT [Phụ lục hình 5]
4 TRIỂN KHAI
Quá trình lập trình và triển khai trang web front-end Chúng tôi đã tiến hành khảo sát website mục tiêu là ivymoda.com Sau đó, chúng tôi phân tích đánh giá chi tiết cấu trúc và giao diện người dùng của website mục tiêu, từ đó đưa ra những ý tưởng thiết
kế cho trang web Các ý tưởng này được cụ thể hóa thành wireframe trên nền tảng Figma Tiếp đến, chúng tôi chuyển đổi các wireframe đã được thống nhất thành các trang web thực tế bằng mã nguồn HTML, CSS, JavaScript trên công cụ VSCode Cuối cùng, chúng tôi đã thiết kế và tạo ra được trang website bán hàng thời trang Và các
mã nguồn trên được chúng tôi tiến hành lưu trữ như sau:
Trang 7Hình 3 Sơ đồ lưu trữ code
Theo sơ đồ lưu trữ code của nhóm thì project được đặt trong một thư mục gốc là thư mục DoAn, trong thư mục gốc này sẽ chứa 4 thư mục con bao gồm thư mục HTML, thư mục CSS, thư mục JavaScript và thư mục Images Các file HTML, CSS
và JavaScript được đặt trong các thư mục tương ứng là thư mục HTML, CSS và JavaScript Về thư mục hình ảnh sẽ chứa thêm 3 thư mục con là thư mục aboutus, colors, product và các file hình ảnh khác Các file hình ảnh dùng để giới thiệu các nội dung về trang web sẽ được đặt trong thư mục aboutus Các file hình ảnh liên quan đến màu sắc được đặt trong thư mục colors Trong thư mục product chứa các file hình ảnh
về các sản phẩm của cửa hàng Thư mục hình ảnh gốc chứa ba thư mục con này để nhóm dễ dàng quản lý hình ảnh Mẫu thiết kế trang chủ chúng tôi đã triển khai thành công [Minh chứng: Phụ lục hình 6]
5 KẾT LUẬN
Trong quá trình thực hiện trang web, chúng tôi bắt đầu với việc truy cập vào trang web mục tiêu là ivymoda.com Sau đó, chúng tôi tiến hành phân tích đánh giá các thành phần của trang web mục tiêu, và lên ý tưởng lại cho việc thiết kế wireframe trên công cụ figma Tiếp đến, chúng tôi phân chia việc coding các trang web như đã được thiết kế wireframe và hoàn thành nó theo mục tiêu đã được đề ra trước đó Cuối cùng, chúng tôi đã thiết kế và tạo ra được trang website bán hàng thời trang Chức năng quan trọng đầu tư nhiều công sức nhất của nhóm chúng tôi đó là thực hiện được
bộ lọc ở trang category.html bởi vì nó khá là nhọc nhằn ở việc click vào icon “+” đề hiển thị list ở bên trong mục đó và cả việc chuyển đổi nó thành icon “-” Tóm lại, kết
Trang 8quả chúng tôi đã đạt được là thành công tạo ra website bán hàng thời trang thông qua việc phân tích website mục tiêu và thiết kế lại theo wireframe của chúng tôi
Trang 9Đồ án môn học Internet và Công nghệ Web - IE104
TÀI LIỆU THAM KHẢO [1] IVY Moda Link: https://ivymoda.com/ (Ngày truy cập: 18 /10/2024)
[2] Toni Gemayel, How to wirefram: https://www.figma.com/blog/how-to-wireframe / (Ngày truy cập: 22 /11/2024)
[3] Teodora Berner, How to Make Website Wireframe in Figma: A Beginner's
Guide Link: https://www.creativecorner.studio/blog/how-to-make-website-wireframe-in -figma (Ngày truy câp: 22/11/2024)
Huỳnh Lê Minh Thành – Trần Phi Thành – Chí Nhịt Phú
Trang 10Đồ án môn học Internet và Công nghệ Web - IE104
PHỤ LỤC PHÂN CÔNG NHIỆM VỤ
ST
1 Huỳnh Lê Minh Thành Code
2 Trần Phi Thành Code, viết báo cáo, soạn powerpoint
3 Chí Nhịt Phú Thiết kế giao diện, viết báo cáo và hiệu chỉnh
code, soạn powerpoint
Huỳnh Lê Minh Thành – Trần Phi Thành – Chí Nhịt Phú
Trang 11Đồ án môn học Internet và Công nghệ Web - IE104
PHỤ LỤC HÌNH
Phục lục hình 1:
Phụ lục hình 2:
Huỳnh Lê Minh Thành – Trần Phi Thành – Chí Nhịt Phú
Trang 12Đồ án môn học Internet và Công nghệ Web - IE104 Phụ lục hình 3:
Phụ lục hình 4:
Huỳnh Lê Minh Thành – Trần Phi Thành – Chí Nhịt Phú
Trang 13Đồ án môn học Internet và Công nghệ Web - IE104 Phụ lục hình 5:
Phụ lục hình 6:
Huỳnh Lê Minh Thành – Trần Phi Thành – Chí Nhịt Phú