CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Lý do chọn đề tài Thuật ngữ "Bán hàng online" ngày nay đã trở nên vô cùng phổ biến và quen thuộc với đa số mọi người, điều này thể hiện sự phát triển mạnh mẽ của công nghệ số trong cuộc sống hàng ngày. Trong bối cảnh đa dạng và ngày càng phức tạp của thị trường, việc kinh doanh online trở thành một lựa chọn hấp dẫn với vô vàn đề tài và cơ hội. Quyết định chọn đề tài "Website bán quần áo" của nhóm chúng tôi xuất phát từ mong muốn bắt kịp với xu hướng phát triển nhanh chóng của thế giới công nghệ và tích lũy kinh nghiệm trong việc phát triển kỹ năng lập trình web, thiết kế giao diện, và quản lý cơ sở dữ liệu. Chúng tôi tin rằng việc phát triển một website bán quần áo không chỉ giúp chúng tôi áp dụng những kiến thức đã học mà còn mở rộng tầm hiểu biết và kỹ năng thực hành.
Mục tiêu của chúng tôi là không chỉ xây dựng một giao diện trực quan và thuận tiện cho người dùng mà còn tạo ra một hệ thống quản lý linh hoạt, hiệu quả trong việc kinh doanh quần áo online.2 Tính cấp thiết của đồ án Phát triển một trang web bán quần áo không chỉ là một bước tiến thiết yếu mà còn là một chiến lược quan trọng đối với doanh nghiệp trong ngành thời trang. Một số yếu tố quan trọng mà nó mang lại có thể kể đến như sau: Đầu tiên và quan trọng nhất, trang web bán quần áo tạo ra một kênh bán hàng trực tuyến, có thể mở rộng phạm vi tiếp cận khách hàng và tăng cơ hội chuyển đổi. Thứ hai, trang web bán quần áo cung cấp một nền tảng để truyền đạt thông điệp thương hiệu và giới thiệu sản phẩm. Qua trang web, doanh nghiệp có thể thể hiện phong cách, xu hướng và giá trị của mình và tạo ra ấn tượng tích cực đối với khách hàng.
Ngoài ra, tính năng xem trước sản phẩm, đánh giá, và khả năng tìm kiếm linh hoạt trên trang web giúp người tiêu dùng dễ dàng tìm kiếm và chọn lựa sản phẩm phù hợp. Điều này không chỉ tối ưu hóa trải nghiệm người dùng mà còn thúc đẩy quyết định mua sắm và tăng cường sự hài lòng của khách hàng. Kết luận, phát triển một trang web bán quần áo không chỉ là một chiến lược cần thiết mà còn là một bước quan trọng để đáp ứng nhu cầu ngày càng cao của thị trường, tạo ra trải nghiệm mua sắm tích cực và xây dựng một hình ảnh thương hiệu mạnh mẽ trong thế giới thời trang ngày nay.O12 Internet và Công nghệ Web 1.3 Website tham khảo Nhóm đã tham khảo từ website Yody (https://yody.vn/) và Uniqlo (https://www.com/) - Về thiết kế giao diện : Giao diện Website Yody Hình 1: Giao diện Website Yody. Giao diện Website Uniqlo Hình 2: Giao diện Website Uniqlo.
+ Bố cục: Trang web có bố cục sạch sẽ và hiện đại. Menu chính dễ tiếp cận với các danh mục rõ ràng. + Tính thẩm mỹ: Trang web sử dụng thiết kế tối giản, tập trung vào hình ảnh sản phẩm, rất phù hợp cho một trang bán hàng thời trang.O12 Internet và Công nghệ Web - Về tương tác và trải nghiệm người dùng: + Điều hướng: Trang web có hệ thống điều hướng dễ dàng. Các danh mục được ghi rõ ràng, người dùng có thể dễ dàng tìm thấy các phần khác.
+ Hiển thị và thông tin sản phẩm: Sản phẩm được trưng bày nổi bật với các tùy chọn xem chi tiết, cho thấy thiết kế tương tác tốt cho việc mua sắm. Thông tin như tình trạng sẵn có, chi tiết sản phẩm, và giá cả nên dễ dàng truy cập. + Giỏ hàng và quy trình thanh toán: Có biểu tượng túi mua sắm cho thấy giỏ hàng, là tính năng quan trọng của bất kỳ trang thương mại điện tử nào. Quy trình thanh toán nên được đơn giản hóa và thân thiện với người dùng, giảm thiểu bước và thông tin cần thiết cho giao dịch nhanh chóng.
- Đặt hàng: + Giao diện đặt hàng Yody Hình 3: Giao diện đặt hàng Yody. Giao diện đặt hàng Uniqlo 10 IE104.O12 Internet và Công nghệ Web Hình 4: Giao diện đặt hàng Uniqlo. Thông qua việc tiến hành thử đặt hàng, nhóm nhận thấy rằng, hai trang Web trên: + Quy trình trực quan, từ việc chọn sản phẩm đến thêm vào giỏ hàng và tiến hành thanh toán. + Cung cấp nhiều phương thức thanh toán và đảm bảo giao dịch an toàn.
+ Tương tác sau khi đặt hàng như email xác nhận và thông tin theo dõi nâng cao trải nghiệm người dùng. Qua đó, nhóm nhận thấy rằng 2 trang web trên là những mẫu thiết kế tốt để định hướng phát triển trang Web của nhóm.4 Mục tiêu của đồ án Nhóm chúng em thực hiện đề tài với mong muốn xây dựng và vận hành được trang web sử dụng các công nghệ web như HTML, CSS, Javascript,… đối với frontend và xây dựng backend với Node.js và MySQL. Phạm vi và đối tượng hệ thống hướng đến là tất cả những người có nhu cầu mua sắm trên một trang web bán quần áo trực tuyến. Trên trang web này, người dùng có thể xem các loại quần áo, lựa chọn màu, size, số lượng, giá cả và cuối cùng là đặt hàng.
Đồng thời, trang Web còn có thể giúp cho người chủ cửa hàng quảng bá sản phẩm của mình trên nền tảng Web khác và giúp cho việc quản lý sản phẩm, khách hàng…etc trở nên dễ dàng hơn. Tất cả mọi việc đó có thể được thực hiện thông qua điện thoại di động hay máy tính cá nhân.O12 Internet và Công nghệ Web 1.5 Các công cụ hỗ trợ sử dụng trong đồ án - Notion: Notion là một công cụ quản lý thông tin linh hoạt, giúp tổ chức dự án nhóm bằng cách tạo trang, lên kế hoạch, và ghi chú. Nó hỗ trợ cộng tác, phân công nhiệm vụ, và theo dõi tiến độ. Vậy nên nhóm đã chọn đây là nơi nhóm dùng để quản lý tiến độ cũng như phân chia công việc.
- Google Meet: Google Meet là công cụ nhóm dùng trong quá trình thực hiện đồ án để tổ chức các cuộc họp cũng như trao đổi những khó khăn giữa các thành viên khi thực hiện đồ án. - Google Drive: Là một dịch vụ của GooGle hỗ trợ lưu trữ tài liệu như là lưu trữ đám mây. Đây là nơi nhóm chúng tôi lưu trữ toàn bộ tài liệu liên quan đến đồ án như hình ảnh, báo cáo đồ án, video demo. - Git - Github : Github là một công cụ mạnh mẽ để lưu trữ và quản lý source code.
Tại đây, chúng tôi dùng để lưu trữ source code cho đồ án. Đồng thời cũng được coi như là môi trường để nhóm chúng tôi quản lý mọi sự thay đổi của các dòng lệnh. Nhóm chúng tôi cũng sử dụng Git để quản lý các phiên bản của source cũng như hỗ trợ cho việc kéo hoặc đẩy code về. - Figma: Công cụ này được nhóm chúng tôi sử dụng để phác thảo giao diện của Website (UI).
- Visual Studio Code: Nhóm sử dụng trình soạn thảo Visual Studio Code, lý do là vì nó phổ biến, dễ cài đặt và hỗ trợ cho đồ án thuận tiện và nhanh chóng. - Xampp: Xampp là một môi trường phát triển PHP phổ biến, cho phép tạo các ứng dụng web trên máy tính cá nhân. Xampp là một bản phân phối Apache miễn phí và dễ dàng thực hiện các thao tác trên đó. Nhận thấy ưu điểm này nhóm chúng tôi nhận thấy rằng nó là một công cụ hữu ích để hỗ trợ việc phát triển dự án của nhóm và đã sử dụng nó trong quá trình phát triển dự án của mình.6 Các công nghệ và thư viện sử dụng trong đồ án 1.1 Front-end - HTML HTML là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để thiết kế các trang web bằng một ngôn ngữ đánh dấu.
HTML là sự kết hợp của siêu văn bản và ngôn ngữ đánh dấu. Siêu văn bản xác định liên kết giữa các trang web. Ngôn ngữ đánh dấu được sử dụng để xác định tài liệu văn bản trong các thẻ, các thẻ xác định cấu trúc của trang web. Ngôn ngữ này được sử dụng để chú thích (ghi chú cho máy tính) văn bản để máy tính có thể hiểu được và thao tác văn bản theo đó.
Hầu hết các ngôn ngữ đánh dấu (ví dụ: HTML) đều có thể đọc được bởi con người.O12 Internet và Công nghệ Web ngữ sử dụng các thẻ để xác định thao tác nào phải được thực hiện trên văn bản. HTML được trình duyệt sử dụng để thao tác văn bản, hình ảnh và nội dung khác, để hiển thị chúng theo định dạng mong muốn. - CSS CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng để tạo kiểu cho các trang web. CSS cho phép áp dụng các kiểu khác nhau cho các phần tử HTML trên trang web như màu sắc, font chữ, căn lề, kích thước, v.v… CSS còn giúp kiểm soát bố cục của nhiều trang web cùng một lúc, tiết kiệm thời gian và công sức.
CSS cũng cho phép tạo ra các hiệu ứng động và tương tác với người dùng, như chuyển động, chuyển đổi, biến đổi, v.v… - Javascript JavaScript là một ngôn ngữ lập trình được sử dụng để tạo ra các trang web sống động và tương tác. JavaScript có thể thay đổi nội dung, thuộc tính và kiểu của các phần tử HTML trên trang web của bạn, phản ứng với các sự kiện của người dùng, gửi và nhận dữ liệu qua mạng, tạo ra các hiệu ứng đồ họa và hoạt hình, v.2 Các công nghệ Back-end - NodeJs NodeJs là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng.js chứa một thư viện built-in cho phép các ứng dụng hoạt động như một Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS. - MySQL MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở, được phát hành để nhiều người có thể sử dụng được. MySQL sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) để tương tác với cơ sở dữ liệu.
Hoạt động theo mô hình client- server, nơi một máy tính chạy phần mềm MySQL server để lưu trữ và quản lý dữ liệu, và các máy tính khác kết nối tới máy chủ để truy vấn dữ liệu.7 Quy trình làm việc Để xây dựng và thiết kế website, việc lựa chọn một phương pháp để phát triển hướng xây dựng website là rất quan trọng, vì nó có khả năng ảnh hưởng đến hiệu suất, bảo trì, chi phí, thời gian, tài nguyên và kết quả của sản phẩm. Chính vì tầm quan trọng của việc lựa chọn phương pháp để phát triển website, nhóm chúng tôi đã quyết định chọn theo mô hình thác nước (Waterfall) để xây 13 IE104.