Báo Cáo Đồ Án Website Bán Hàng Thời Trang - SV. Nguyễn Xuân Son (ĐH CNTT)

Nghiên cứu chuyên sâu Đồ án Website Bán Hàng Thời Trang (Full Code & Báo Cáo) ứng dụng cao trong học thuật và nghiên cứu thực tiễn

• Tác giả: Nguyễn Xuân Son
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Đại học Quốc gia Thành phố Hồ Chí Minh, Trường Đại học Công nghệ Thông tin
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Website Bán Hàng Thời Trang
• Loại tài liệu: Đồ án
• Năm xuất bản: 2022
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Về Đồ Án Website Bán Hàng Thời Trang

Đồ án Website Bán Hàng Thời Trang là một dự án học tập toàn diện tại Đại học Công nghệ Thông tin, Đại học Quốc gia TP. HCM. Dự án này được thực hiện nhằm xây dựng một nền tảng mua bán thời trang trực tuyến hiện đại, kết nối giữa người mua và người bán. Trong bối cảnh thương mại điện tử phát triển mạnh mẽ tại Việt Nam, dự án cung cấp một giải pháp thực tiễn cho nhu cầu mua sắm online. Website bán hàng thời trang này được xây dựng với giao diện thân thiện, các chức năng cơ bản đầy đủ và tích hợp chatbot tư vấn khách hàng. Dự án không chỉ giúp sinh viên vận dụng kiến thức lập trình mà còn tạo ra một sản phẩm có giá trị thực tế trong lĩnh vực thương mại điện tử. Thông qua đề tài này, các lập trình viên trẻ có thể hiểu rõ hơn về quy trình phát triển một ứng dụng web thương mại.

1.1. Lý Do Chọn Đề Tài

Thời đại công nghệ 4.0 đã thay đổi hoàn toàn cách thức mua sắm của người tiêu dùng. Mua bán trực tuyến mang lại nhiều lợi ích vượt trội: dễ dàng thao tác chỉ cần một chiếc điện thoại, tốc độ đặt hàng nhanh chóng, truy cập đa dạng sản phẩm, và giá cả cạnh tranh. Lĩnh vực thời trang là một trong những ngành hàng phổ biến nhất trên các nền tảng thương mại điện tử. Do đó, xây dựng một website bán hàng thời trang là cách tốt để hiểu rõ hơn về kinh doanh online và tạo ra giải pháp hữu ích cho thị trường.

1.2. Mục Tiêu Dự Án

Mục tiêu chính của đồ án website thời trang là xây dựng một nền tảng bán hàng online hoàn chỉnh với các tính năng cơ bản. Giao diện phải thân thiện, dễ sử dụng, cho phép khách hàng dễ dàng tìm kiếm và mua sắm. Website cần tích hợp các chức năng quản lý giỏ hàng, thanh toán an toàn, xác thực người dùng và quản lý tài khoản khách hàng. Ngoài ra, dự án còn tích hợp chatbot tư vấn để hỗ trợ khách hàng trong quá trình mua sắm và giải đáp thắc mắc một cách hiệu quả.

II. Công Nghệ Và Nền Tảng Phát Triển

Để xây dựng website bán hàng thời trang, dự án sử dụng một bộ công nghệ hiện đại và phổ biến trong ngành phát triển web. Phía Front-End được xây dựng bằng HTML, CSS, JavaScript để tạo ra giao diện người dùng hấp dẫn và tương tác. Back-End sử dụng PHP để xử lý logic ứng dụng, quản lý yêu cầu từ khách hàng và kết nối với cơ sở dữ liệu. MySQL được chọn làm hệ quản trị cơ sở dữ liệu để lưu trữ thông tin sản phẩm, khách hàng và đơn hàng một cách an toàn. Ngoài ra, dự án còn sử dụng các framework hỗ trợ như Bootstrap để tối ưu hóa giao diện responsive trên các thiết bị khác nhau, và jQuery để nâng cao hiệu suất JavaScript. Tổ hợp các công nghệ này cho phép xây dựng một ứng dụng web mạnh mẽ đáp ứng được nhu cầu của một nền tảng thương mại điện tử.

2.1. Công Nghệ Front End

HTML, CSS, JavaScript là ba nền tảng cơ bản cho phía giao diện người dùng. HTML cung cấp cấu trúc trang web, CSS định dạng và trang trí giao diện, còn JavaScript thêm tính tương tác. Bootstrap framework giúp xây dựng giao diện responsive design tự động thích ứng với kích thước màn hình khác nhau. jQuery cung cấp các công cụ tiện lợi để xử lý sự kiện DOM một cách nhanh chóng và hiệu quả, giúp website bán hàng hoạt động mượt mà trên tất cả các trình duyệt.

2.2. Công Nghệ Back End Và Cơ Sở Dữ Liệu

PHP là ngôn ngữ phía máy chủ được sử dụng để xử lý logic ứng dụng web bán hàng, như xác thực người dùng, quản lý sản phẩm và đơn hàng. MySQL đóng vai trò là hệ quản trị cơ sở dữ liệu quan trọng, lưu trữ toàn bộ dữ liệu về sản phẩm thời trang, khách hàng, đơn hàng một cách an toàn và có tổ chức. Kết hợp PHP với MySQL tạo nên một hệ thống backend mạnh mẽ cho website thương mại điện tử, đảm bảo hiệu suất cao và bảo mật dữ liệu.

III. Các Chức Năng Chính Của Website

Website bán hàng thời trang được thiết kế với các chức năng cơ bản để đáp ứng nhu cầu của cả người mua lẫn người bán. Hệ thống xác thực người dùng đảm bảo an toàn tài khoản khách hàng thông qua đăng ký và đăng nhập. Tính năng tìm kiếm và phân loại sản phẩm giúp khách hàng nhanh chóng tìm được những mặt hàng thời trang mong muốn. Giỏ hàng cho phép khách hàng lưu trữ các sản phẩm và tiến hành thanh toán online một cách an toàn. Quản lý tài khoản khách hàng cung cấp các tính năng như xem lịch sử mua hàng, cập nhật thông tin cá nhân. Ngoài ra, chatbot tư vấn được tích hợp để hỗ trợ khách hàng 24/7, trả lời thắc mắc về sản phẩm thời trang và quá trình mua sắm. Tất cả các tính năng này tạo nên một trải nghiệm mua sắm hoàn chỉnh cho người dùng.

3.1. Quản Lý Sản Phẩm Và Tìm Kiếm

Khách hàng có thể tìm kiếm sản phẩm thời trang thông qua thanh tìm kiếm hoặc duyệt theo danh mục. Các sản phẩm được hiển thị với hình ảnh, mô tả chi tiết, giá cả và các lựa chọn kích cỡ, màu sắc. Hệ thống lọc sản phẩm nâng cao cho phép khách hàng sắp xếp theo giá, độ phổ biến hoặc ngày đăng. Điều này giúp trải nghiệm mua sắm trở nên dễ dàng và hiệu quả hơn.

3.2. Quản Lý Giỏ Hàng Và Thanh Toán

Khách hàng có thể thêm/xóa sản phẩm vào giỏ hàng, thay đổi số lượng trước khi thanh toán. Hệ thống hiển thị tổng tiền hàng, phí vận chuyển và cho phép chọn phương thức thanh toán khác nhau. Quá trình thanh toán an toàn được mã hóa, bảo vệ thông tin tài chính của khách hàng, tạo nên sự tin tưởng khi mua sắm online.

IV. Kỳ Vọng Và Ứng Dụng Thực Tế

Đồ án website bán hàng thời trang không chỉ là một bài tập học tập mà còn có giá trị ứng dụng thực tế cao. Dự án mong đạt được một website có giao diện thân thiện, dễ thao tác mà người dùng từ mọi lứa tuổi đều có thể sử dụng một cách dễ dàng. Thông qua dự án này, sinh viên được vận dụng kiến thức lập trình vào một bài toán thực tế của thương mại điện tử. Website thời trang này có thể được mở rộng thêm các tính năng nâng cao như thanh toán qua ví điện tử, đánh giá và bình luận sản phẩm, hoặc hệ thống khuyến mãi động. Bên cạnh đó, dự án còn giúp giảng viên và sinh viên hiểu rõ hơn về quy trình phát triển ứng dụng web thực tế. Kết quả cuối cùng là một sản phẩm hoàn chỉnh có thể phục vụ nhu cầu mua bán thời trang trực tuyến trong cộng đồng, đóng góp nhỏ vào sự phát triển của ngành thương mại điện tử tại Việt Nam.

4.1. Mục Tiêu Học Tập Và Kỹ Năng Phát Triển

Thông qua đồ án website bán hàng, sinh viên được rèn luyện kỹ năng lập trình full-stack từ giao diện đến backend. Các bạn học được cách thiết kế cơ sở dữ liệu hiệu quả, xây dựng hệ thống xác thực an toàn, và tích hợp các chức năng thực tế trong ứng dụng web. Dự án còn giúp sinh viên hiểu rõ quy trình phát triển phần mềm, từ phân tích yêu cầu, thiết kế, xây dựng đến kiểm thử và sửa lỗi. Đây là kinh nghiệm quý báu cho những ai muốn phát triển sự nghiệp trong lĩnh vực phát triển web.

4.2. Tiềm Năng Ứng Dụng Thực Tế

Website bán hàng thời trang có thể được mở rộng và triển khai thực tế cho các cửa hàng thời trang nhỏ lẻ hoặc cá nhân kinh doanh. Với các tính năng cơ bản đã được xây dựng, dự án có thể dễ dàng bổ sung tính năng nâng cao như hệ thống quản lý kho hàng, thanh toán đa cách, hay tích hợp mạng xã hội. Dự án này chứng minh rằng các kỹ năng học được trong trường đại học có thể áp dụng hiệu quả vào các dự án kinh doanh thực tế, giúp các sinh viên có nền tảng vững chắc để tiếp tục phát triển sự nghiệp trong lĩnh vực CNTT.

Trích đoạn nội dung tài liệu

Chương 1 Tổng quan đề tài 1.1 Tổng quan Website bán hàng là trang web cho phép doanh nghiệp, cá nhân và khách hàng có thể tiến hành mua bán sản phẩm, dịch vụ trực tuyến. Cụ thểm khi truy cập vào các website này, bạn có thể xem thông tin sản phẩm, tìm kiếm sản phẩm cần mua, đặt hàng và tiến hành thanh toán một cách nhanh chóng và tiện lợi. Đây là giải pháp tối ưu cho cả người mua và người bán trong thời đại công nghệ số.2 Hiện trạng Với sự bùng nổ của công nghệ số và cuộc cách mạng công nghiệp 4.0 thì website bán hàng đang là sự lựa chọn tối ưu cho các doanh nghiệp, cá nhân có nhu cầu quảng bá sản phẩm và tiếp cận đến những khách hàng tiềm năng khi lượng người truy cập internet ngày càng gia tăng. Hiện tại có rất nhiều website bán hàng trực tuyến và phố biến như các website bán hàng thời trang, tiêu dùng và các website thương mại điện tử như tiki,shoppe và lazada.3 Hướng tiếp cận Hướng tiếp cận tìm hiểu - Đối tượng tìm hiểu:  Nhu cầu mua sắm của khách hàng  Các website bán hàng đang nổi bật nên thị trường - Công nghệ:  Ngôn ngữ lập trình : Html, css, javascript và php  Framework : Jquery và bootstrap  Công cụ quản lí mã nguồn : Github  Công cụ chỉnh sửa mã nguồn: Subline Text 11 Chương 2 Tổng quan công nghệ 2.1 Công cụ chỉnh sửa và quản lí mã nguồn 2.1Công cụ chỉnh sửa 1.

Sublime Text là trình soạn thảo mã nguồn đa nền tảng shareware cho Windows, macOS, Linux. Người dùng có thể bổ sung chức năng của Sublime Text với các Python plugin,thường được xây dựng và duy trì theo giấy phép phần mềm tự do. Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có chức năng nổi bật cú pháp (syntax highlighting), tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn.

Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và các tùy chọn khác. Nó miễn phí và là phần mềm mã nguồn mở theo giấy phép MIT,[4] mặc dù bản phát hành của Microsoft là theo giấy phép phần mềm miễn phí.2 Visual Studio Code 2.2 Công cụ quản lí Hình 2.3 Github GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền web cho các dự án phát triển phần mềm. GitHub cung cấp cả phiên bản trả tiền lẫn miễn phí cho các tài khoản. Các dự án mã nguồn mở sẽ được cung cấp kho lưu trữ miễn phí.2 Tổng quan công nghệ sử dụng 2.1 Html HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website.

- Ưu điểm:  Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn  Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay  Học HTML khá đơn giản  Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao  Sử dụng mã nguồn mở, hoàn toàn miễn phí  HTML là chuẩn web được vận hành bởi W3C  Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js,…) - Nhược điểm: 14  Chỉ được áp dụng chủ yếu cho web tĩnh. Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP)  Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer.  Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới. Do đó, dù trong HTML document có sử dụng các tag này thì trình duyệt cũng không đọc được).

 Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML 2.2 Css CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể 15 thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web. Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác.

Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.3 JavaScript JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác. Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web.

Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World Wide Web. Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị 16 hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript.4 Php PHP là viết tắt của cụm từ Personal Home Page nay đã được chuyển thành Hypertext Preprocessor. Hiểu đơn giản thì PHP là một ngôn ngữ lập trình kịch bản (scripting language) đa mục đích. PHP được dùng phổ biến cho việc phát triển các ứng dụng web chạy trên máy chủ.

Dó đó, ngôn ngữ lập trình PHP có thể xử lý các chức năng từ phía server để sinh ra mã HTML trên client như thu thập dữ liệu biểu mẫu, sửa đổi cơ sở dữ liệu, quản lý file trên server hay các hoạt động khác.5 Bootstrap Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích mang lại cho lập trình viên của Bootstrap là gì nhé! Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh. Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website.6 Jquery - jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn. - jQuery được tích hợp nhiều module khác nhau. Từ module hiệu ứng cho đến module truy vấn selector.

jQuery được sử dụng đến 99% trên tổng số website trên thế giới. Vậy các module chính của jQuery là gì? - Các module phổ biến của jQuery bao gồm:  Ajax – xử lý Ajax  Atributes – Xử lý các thuộc tính của đối tượng HTML  Effect – xử lý hiệu ứng  Event – xử lý sự kiện  Form – xử lý sự kiện liên quan tới form  DOM – xử lý Data Object Model  Selector – xử lý luồng lách giữa các đối tượng HTML 19 2.7 Mysql MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server. RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng. Chương 3 Phân tích thiết kế 3.1 Yêu cầu nghiệp vụ 3.1 Phân tích yêu cầu - Yêu cầu về chức năng:  Chức năng truy vấn: Hệ thống phải đáp ứng yêu cầu truy vấn của người dùng như: Tìm kiếm thông tin sản phẩm.

 Chức năng thống kê: Thống kê đầy đủ chi tiết thông tin sản phẩm  Chức năng thêm, cập nhật: Đảm bảo hệ thống cập nhật nhanh chóng, chính xác, tránh phát sinh ra lỗi do người dùng gây ra - Yêu cầu phi chức năng:  Tính hiệu quả: o Trang web hoạt động ổn định, hiệu quả o Có đầy đủ các chức năng liên quan 20  Tính tiện dụng: o Hệ thống có giao diện trực quan, dễ dàng sử dụng. o Các nội dung trên trang web dễ dàng tiếp cận  Tính tiến hóa: Dễ dàng nâng cấp và tái sử dụng  Tính tương thích: o Trang web hoạt động tốt trên tất cả các trình duyệt o Giao diện tương thích với nhiều loại màn hình và thiết bị 3.2 Biểu đồ Use case 3.1 Sơ đồ Use case  Khách hàng Hình 3.1 Sơ đồ Use case khách hàng  Admin 21 Hình 3.2 Sơ đồ Use case admin 3.2 Danh sách Actors STT Tên Actor Ý nghĩa 1 Admin (Quản trị Có quyền truy cập đến tất cả tính năng viên) 2 User Có quyền truy cập đến tất cả tính năng trừ xóa admin 3 Khách hàng Có quyền truy cập tất cả các chức năng của website người dùng Bảng 3.2 Danh sách Actors 3.