Đề tài website bán hàng thời trang

1.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

Tổng quan công nghệ

Cô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

2 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í

GitHub là nền tảng lưu trữ mã nguồn Git dựa trên web, phù hợp cho các dự án phát triển phần mềm Dịch vụ này cung cấp cả phiên bản miễn phí và trả phí, phục vụ nhiều nhu cầu khác nhau của người dùng Đặc biệt, các dự án mã nguồn mở có thể lưu trữ miễn phí trên GitHub, giúp cộng đồng nhà phát triển dễ dàng cộng tác và chia sẻ mã nguồn mở một cách thuận tiện.

2.2 Tổng quan công nghệ sử dụng

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

 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,

Chỉ các trang web tĩnh mới phù hợp để áp dụng hình thức này Để xây dựng các tính năng động, lập trình viên cần sử dụng thêm JavaScript hoặc các ngôn ngữ lập trình phía máy chủ của bên thứ ba.

 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

Việc kiểm soát cách trình duyệt đọc và hiển thị file HTML gặp nhiều khó khăn, đặc biệt là với các trình duyệt cũ không hỗ trợ các thẻ mới Do đó, dù trong mã HTML có sử dụng các thẻ mới, trình duyệt vẫn có thể không hiển thị đúng hoặc không đọc được các nội dung này, gây ảnh hưởng đến trải nghiệm người dùng và hiệu quả của website.

 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

CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ quan trọng dùng để tìm kiếm, định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu như HTML Nó giúp trang web trông chuyên nghiệp, hấp dẫn hơn bằng cách kiểm soát kiểu dáng, bố cục và màu sắc, nâng cao trải nghiệm người dùng Việc sử dụng CSS tối ưu hóa quá trình thiết kế web, tiết kiệm thời gian và công sức so với chỉnh sửa kiểu dáng trực tiếp trong HTML.

HTML là ngôn ngữ tạo cấu trúc và định dạng cơ bản cho trang web, giúp xác định các phần tử như đoạn văn bản, tiêu đề và bảng Trong khi HTML định hình nội dung, CSS đóng vai trò quan trọng trong việc tạo phong cách, kiểu dáng và bố cục cho trang web, giúp nâng cao trải nghiệm người dùng và tăng tính thẩm mỹ cho website của bạn.

16 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

CSS hoạt động dựa trên các vùng chọn như tên thẻ HTML, ID hoặc class để xác định phần cần áp dụng kiểu dáng Khi đã xác định được vùng chọn, CSS sẽ áp dụng các thuộc tính cần thay đổi để định dạng nội dung trên các phần tử đó một cách chính xác và linh hoạt.

HTML và CSS có mối quan hệ mật thiết, trong đó HTML đóng vai trò là nền tảng của website dưới dạng ngôn ngữ markup, còn CSS chịu trách nhiệm định hình phong cách và giao diện cho trang web Hai yếu tố này không thể tách rời, cùng hợp tác để tạo ra trải nghiệm trực quan và hấp dẫn cho người dùng.

JavaScript là ngôn ngữ lập trình được sử dụng phổ biến để tạo trang web tương tác, từ việc làm mới bảng tin trên mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác Nhờ khả năng cải thiện trải nghiệm người dùng, JavaScript trở thành một trong những công nghệ cốt lõi của World Wide Web Là ngôn ngữ kịch bản phía máy khách, JavaScript cho phép các chức năng như quảng cáo quay vòng dạng hình ảnh và menu thả xuống nhấp để hiển thị hoạt động mượt mà và hiệu quả trên các trang web.

17 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

PHP là viết tắt của cụm từ Personal Home Page nay đã được chuyển thành

PHP, viết tắt của Hypertext Preprocessor, là một ngôn ngữ lập trình kịch bản đa mục đích phổ biến trong phát triển ứng dụng web trên máy chủ PHP cho phép xử lý các chức năng phía server như thu thập dữ liệu từ biểu mẫu, sửa đổi cơ sở dữ liệu, quản lý tệp trên server và sinh mã HTML động gửi đến trình duyệt của người dùng Nhờ đó, PHP đóng vai trò quan trọng trong việc xây dựng các trang web động và hấp dẫn.

Bootstrap giúp quá trình thiết kế website trở nên nhanh chóng và dễ dàng hơn nhờ vào các thành tố cơ bản như typography, forms, buttons, tables, grids, navigation và image carousels Thư viện này cung cấp các tính năng linh hoạt, hỗ trợ lập trình viên tối ưu hóa công việc và nâng cao trải nghiệm người dùng Cùng Mắt Bão khám phá các lợi ích nổi bật của Bootstrap để nâng cao hiệu quả phát triển website của bạn!

Bootstrap là bộ sưu tập miễn phí gồm các mã nguồn mở và công cụ hỗ trợ tạo website hoàn chỉnh một cách dễ dàng Với các thuộc tính về giao diện được định sẵn như kích thước, màu sắc, độ cao, độ rộng, Bootstrap giúp các designer tiết kiệm thời gian và công sức trong quá trình thiết kế Nhờ tính linh hoạt và các thành phần sẵn có, Bootstrap cho phép sáng tạo nhiều sản phẩm mới mẻ mà vẫn đảm bảo tính nhất quán và chuyên nghiệp cho website.

- 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 tích hợp nhiều module đa dạng, từ module hiệu ứng đến module truy vấn selector, giúp website hoạt động hiệu quả và dễ dàng thao tác Khoảng 99% các trang web trên thế giới sử dụng jQuery, chứng tỏ tính phổ biến và lợi ích vượt trội của nó trong lập trình web Các module chính của jQuery gồm có module hiệu ứng giúp tạo các hiệu ứng động mượt mà và module truy vấn selector giúp dễ dàng tìm kiếm và thao tác với các phần tử trong DOM.

- Các module phổ biến của jQuery bao gồm:

 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

Tổng quan công nghệ sử dụng

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

 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,

Chỉ áp dụng chủ yếu cho các trang web tĩnh, việc tạo các tính năng động đòi hỏi lập trình viên phải sử dụng thêm JavaScript hoặc các ngôn ngữ backend của bên thứ ba để phát triển chức năng phù hợp.

 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

Việc kiểm soát cách trình duyệt đọc và hiển thị file HTML gặp nhiều khó khăn, đặc biệt là với các trình duyệt cũ không thể render các thẻ HTML mới, dẫn đến tình trạng các thẻ này không hiển thị đúng hoặc bị bỏ qua.

 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

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm kiế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 Nó giúp thiết kế giao diện web chuyên nghiệp, tăng tính thẩm mỹ và tối ưu trải nghiệm người dùng Việc sử dụng CSS là yếu tố quan trọng trong quá trình phát triển website hiện đại, giúp kiểm soát giao diện một cách linh hoạt và hiệu quả.

HTML là ngôn ngữ tạo phong cách cho trang web, giúp định dạng các phần tử như đoạn văn, tiêu đề và bảng Trong khi HTML xác định cấu trúc nội dung, thì CSS đảm nhận vai trò tạo kiểu dáng cho website, nâng cao thẩm mỹ và trải nghiệm người dùng Việc sử dụng cả HTML và CSS sẽ giúp xây dựng trang web chuyên nghiệp, bắt mắt và dễ sử dụng.

16 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

CSS hoạt động dựa trên các vùng chọn, bao gồm tên thẻ HTML, ID hoặc lớp (class), giúp xác định chính xác phần tử cần thay đổi Sau đó, CSS áp dụng các thuộc tính đã xác định lên vùng chọn đó để định dạng hoặc chỉnh sửa giao diện website một cách hiệu quả.

HTML và CSS có mối quan hệ mật thiết, trong đó HTML đóng vai trò là ngôn ngữ đánh dấu nền tảng của website, còn CSS chịu trách nhiệm định hình phong cách và giao diện người dùng Hai yếu tố này không thể tách rời, tạo nên sự hoàn chỉnh cho một trang web chuyên nghiệp và thu hút người dùng.

JavaScript là ngôn ngữ lập trình được sử dụng để tạo trang web tương tác, giúp cải thiện trải nghiệm người dùng thông qua các chức năng như làm mới bảng tin trên mạng xã hội, hiển thị hình ảnh động và bản đồ tương tác Là ngôn ngữ kịch bản phía máy khách, JavaScript đóng vai trò 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ạn sẽ thấy các quảng cáo quay vòng dạng hình ảnh hoặc menu thả xuống nhấp để hiển thị, đều nhờ vào khả năng của JavaScript trong việc tạo ra các hiệu ứng động và tương tác trên trang web.

17 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

PHP là viết tắt của cụm từ Personal Home Page nay đã được chuyển thành

PHP, hay còn gọi là Hypertext Preprocessor, là một ngôn ngữ lập trình kịch bản đa mục đích phổ biến trong phát triển ứng dụng web trên máy chủ Ngôn ngữ này cho phép xử lý các chức năng phía server 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 và tạo mã HTML động để hiển thị trên trình duyệt của người dùng PHP đóng vai trò quan trọng trong việc xây dựng các website động và ứng dụng web phức tạp nhờ khả năng xử lý mã phía server hiệu quả.

Bootstrap giúp quá trình thiết kế website trở nên nhanh chóng và dễ dàng hơn nhờ các thành tố cơ bản như typography, forms, buttons, tables, grids, navigation và image carousels Tính năng và lợi ích của Bootstrap mang lại cho lập trình viên bao gồm tăng hiệu quả công việc, giảm thiểu thời gian phát triển và cải thiện tính phản hồi của website Cùng Mắt Bão khám phá những điểm nổi bật của Bootstrap để tối ưu hóa quá trình lập trình web của bạn!

Bootstrap là bộ sưu tập mã nguồn mở miễn phí và công cụ giúp tạo trang web hoàn chỉnh nhanh chóng Nhờ vào các thuộc tính giao diện có sẵn như kích thước, màu sắc, độ cao, độ rộng, Bootstrap giúp các designer dễ dàng sáng tạo các sản phẩm mới mà vẫn tiết kiệm thời gian trong quá trình thiết kế giao diện website.

- 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

502 Bad GatewayUnable to reach the origin service The service may be down or it may not be responding to traffic from cloudflared

- Các module phổ biến của jQuery bao gồm:

 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

Phân tích thiết kế

Yêu cầu nghiệp vụ

- 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

 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ị

Biểu đồ Use case

Hình 3.1.1 Sơ đồ Use case khách hàng

Hình 3.1.2 Sơ đồ Use case admin

Có quyền truy cập đến tất cả tính năng

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.2 Danh sách Actors

3.2.3 Danh sách các Use case

STT Use case chính Phân rã Use-case Ý nghĩa/Ghi chú

Thêm người dùng Thêm người dùng vào hệ thống Sửa người dùng Sửa thông tin người dùng

Xóa người dùng Xóa người dùng khỏi hệ thông

Xem sản phẩm Xem danh sách sản phẩm Thêm sản phẩm Thêm mới sản phẩm Sửa sản phẩm Sửa thông tin sản phẩm

Xóa sản phẩm Xóa sản phẩm hỏi hệ thống

Xem danh sách đơn hàng

Hiển thị danh sách đơn hàng

Chấp nhận đơn hàng Chấp nhận đơn hàng

Từ chối đơn hàng Từ chối đơn hàng

Hiển thị danh sách phản hồi của khách hàng Đánh dấu Đánh dấu những phản hồi đã đọc

5 Quản lý Danh mục Thêm, sửa và xóa

Có thể thêm mới danh mục, sửa và xóa danh mục hiện có

Tìm kiếm Tìm kiếm Tìm kiếm sản phẩm theo tên

Lọc theo loại Hiển thị các sản phẩm theo loại sản phẩm

Lọc theo giá Hi Hiển thị các sản phẩm dựa theo mức giá đưa ra

Trục tiếp Người dùng nhận hàng và thanh toán trực tiếp sau khi nhận hàng

Trực tuyến Người dùng thanh toán trước và sau đó nhận hàng

Bảng 3.2.3 Danh sách các Use case

3.2.4 Đặc tả các Use case

3.2.4.1 Đặc tả Use case Quản lý người dùng

Use case: Quản lý người dùng

Tác nhân chính: Quản trị viên, user

 Hệ thống đang ở trạng thái hoạt động

 Có quyền sử dụng Use case

Sự kiện kích hoạt: Chọn “quản lí người dùng” ở danh mục Điều kiện thực hiện: Đăng nhập vào hệ thống

 Hệ thống hiển thị danh sách người dùng

 Bấm “Xóa” hoặc “Sửa” để sửa hoặc xóa người dùng khỏi hệ thống

 Người dùng chọn thêm và nhập thông tin vào các ô

 Nếu thành công sẽ quay lại trang quản lý người dùng

Bảng 3.2.4.1 Use case quản lý người dùng

3.2.4.2 Đặc tả Use case Quản lý sản phẩm

Use case: Quản lý sản phẩm

Chức năng chính của hệ thống là quản lý sản phẩm, bao gồm các thao tác như thêm mới, chỉnh sửa và xóa sản phẩm để duy trì dữ liệu chính xác và cập nhật Hệ thống còn cho phép xem danh sách sản phẩm toàn diện, giúp người quản trị dễ dàng theo dõi và quản lý kho hàng một cách hiệu quả Để sử dụng các chức năng này, người dùng cần đáp ứng các điều kiện tiên quyết đã được quy định, đảm bảo quá trình quản lý diễn ra thuận lợi và an toàn.

Sự kiện kích hoạt: Chọn “quản lí sản phẩm” ở danh mục Điều kiện thực hiện: Đăng nhập vào hệ thống

 Hệ thống hiển thị danh sách sản phẩm

 Bấm “Xóa” hoặc “Sửa” để sửa hoặc xóa sản phẩm khỏi hệ thống

 Người dùng chọn thêm và nhập thông tin vào các ô

 Nếu thành công sẽ quay lại trang quản lý sản phẩm

Bảng 3.2.4.2 Use case quản lý sản phẩm

3.2.4.3 Đặc tả Use case Quản lý đơn hàng

Use case: Quản lý đơn hàng

Chức năng của hệ thống bao gồm việc xử lý các tác vụ liên quan đến sản phẩm như xác nhận hoặc từ chối đơn hàng, cũng như xem danh sách các đơn hàng đã được ghi nhận trên hệ thống Điều kiện tiên quyết để thực hiện các chức năng này là đảm bảo người dùng có quyền truy cập phù hợp và hệ thống hoạt động ổn định Các thao tác này giúp quản lý đơn hàng hiệu quả hơn, nâng cao trải nghiệm người dùng và tối ưu quy trình bán hàng trực tuyến.

Sự kiện kích hoạt: Chọn “quản lí đơn hàng” ở danh mục Điều kiện thực hiện: Đăng nhập vào hệ thống

 Hệ thống hiển thị danh sách đơn hàng

 Bấm nút “Approve” hoặc “Cancel” để đống ý hoặc hủy bỏ đơn hàng

 Nhấp vào tên khách hàng để xem chi tiết đơn hàng

Bảng 3.2.4.3 Use case quản lý đơn hàng

3.2.4.4 Đặc tả Use case Quản lý danh mục

Use case: Quản lý danh mục

 Dùng để thự hiện các chức năng liên quan đến sản phẩm như :Thêm, sửa, xóa danh mục Có thể xem danh sách danh mục hiện có

Sự kiện kích hoạt: Chọn “quản lí danh mục” ở danh mục Điều kiện thực hiện: Đăng nhập vào hệ thống

 Hệ thống hiển thị danh sách danh mục

 Bấm nút Sửa hoặc Xóa để sửa hoặc xóa danh mục

 Nhập vào ôm và nhân nút thêm để thêm danh mục

Bảng 3.2.4.4 Use case quản lý danh mục

3.2.4.5 Đặc tả Use case Quản lý phản hồi

Use case: Quản lý đơn hàng

 Dùng để thự hiện các chức năng liên quan đến phản hồi của người dùng như: Xem và đánh dấu các phản hồi Điều kiện tiên quyết:

Sự kiện kích hoạt: Chọn “quản lí phản hồi” ở danh mục Điều kiện thực hiện: Đăng nhập vào hệ thống

 Hệ thống hiển thị danh sách phản hồi

 Bấm nút “Seen” để đánh dấu danh mục đã đọc

Bảng 3.2.4.5 Use case quản lý phản hồi

3.2.4.6 Đặc tả Use case Tìm kiếm

Tác nhân chính: Khách hàng

 Dùng để tìm kiếm sản phẩm theo tên Điều kiện tiên quyết:

Sự kiện kích hoạt: Nhập vào ô từ khóa và nhấn nút tìm kiếm Điều kiện thực hiện: không

 Hệ thống hiển thị danh sách sản phẩm

Bảng 3.2.4.6 Use case tìm kiếm

3.2.4.7 Đặc tả Use case Lọc

 Dùng để lọc các sản phẩm theo tên và giá

 Xem danh sách tất cả sản phẩm Điều kiện tiên quyết:

Sự kiện kích hoạt: Nhập vào các mục cần lọc Điều kiện thực hiện: không

 Hệ thống hiển thị danh sách sản phẩm theo tên và giá

3.2.4.8 Đặc tả Use case Thanh Toán

 Hiển thị danh sách sản phẩm đã thêm vào giỏ hàng

 Chọn phương thức thanh toán

Sự kiện kích hoạt: Nhấn vào thanh toán Điều kiện thực hiện: không

 Hệ thống hiển thị danh sách sản phẩm trong giỏ hàng

 Chọn các phương thức thanh toán để tiến hành thanh toán

Bảng 3.2.4.8 Use case Thanh toán

Thiết kế cơ sở dữ liệu

Tên Kiểu dữ liệu Ý nghĩa

Trong hệ thống quản lý người dùng, each user được xác định bằng các trường thông tin quan trọng như mã định danh (id), tên đầy đủ (fullname), và địa chỉ email (email) để đảm bảo nhận diện chính xác Thông tin liên hệ như số điện thoại (phone_number) và địa chỉ (address) giúp liên lạc dễ dàng và phục vụ mục đích giao hàng hoặc xác thực danh tính Mật khẩu người dùng (password) được lưu trữ dưới dạng mã hóa để đảm bảo an toàn thông tin cá nhân Bên cạnh đó, mỗi người dùng còn có thể được phân quyền truy cập thông qua role_id, cho phép điều chỉnh quyền hạn phù hợp với vai trò của họ trong hệ thống Các trường dữ liệu này kết hợp tạo thành một hồ sơ người dùng đầy đủ, hỗ trợ quản lý thông minh và an toàn trong hệ thống.

Created_at datetime Thời điểm bắt đầu

Updated_at datetime Thời điểm cập nhật deleted int Trạng thái của người dùng

_id Int Định danh người dùng name Varchar(20) Loại người dùng

_id Int Định danh người dùng firstname Varchar(30) Tên người dùng lastname Varchar(30) Tên người dùng

32 email Varchar(20) Email người dùng

Phone_number Varchar(20) Số điện thoại người dùng

Subject_name Varchar(350) Chủ đề phản hồi note int Ghi chú status int Trạng thái

Updated_at datetime Thời điểm cập nhật

_id Int Định danh sản phẩm

The product category is identified by a Category_id (int), which classifies the item within the inventory Each product has a title (varchar(250)), describing its name for easy reference The price (int) indicates the standard cost of the product, while the discount (int) shows any applicable price reductions to attract buyers A thumbnail image (varchar(500)) provides a visual preview of the product, enhancing the shopping experience Finally, the longtext description offers an in-depth overview of the product’s features and details, helping customers make informed purchasing decisions Optimizing these product details with relevant SEO keywords can improve online visibility and drive more traffic to your store.

Updated_at datetime Thời điểm cập nhật deleted int Trạng thái của của phẩm

_id Int Định danh đơn hàng

User_id int Định danh người đặt hàng fullname Varchar(50) Tên người đặt hàng email Varchart(150) Email người đặt hàng

Phone_number Varchar(20) Số điện thoại người đặt hàng address Varchar(200) Địa chỉ nhận hàng note Varchar(1000) Ghi chú

Order_date datetime Thời điểm đặt hàng status int Trạng thái đơn hàng

Total_money int Tổng tiền đơn hàng

_id Int Định danh chi tiết đơn hàng

Order_id int Định danh đơn hàng

Product_id Int Mã sản phẩm price int Giá sản phẩm num int Số lượng sản phẩm

Total_money int Tổng tiền đơn hàng

_id Int Định danh hình ảnh

Product_id int Định danh loại sản phẩm thumbnail Varchar(500) Hình ảnh của sản phẩm

_id Int Định danh loại sản phẩm name Varchar(100) Tên loại sản phẩm

Chương 5 Giao diện người dùng

5.1 Giao diện website người dùng

5.1.1 Giao diện trang đăng nhập

Hình 5.1.1 Màn hình đăng nhập

Trang đăng nhập cho phép người dùng truy cập vào website bằng cách nhập địa chỉ email và mật khẩu Người dùng chỉ cần điền thông tin và nhấn nút "Đăng nhập" để truy cập vào tài khoản của mình Ngoài ra, trang đăng nhập còn cung cấp các tuỳ chọn như ghi nhớ mật khẩu, lấy lại mật khẩu nếu quên, và đăng ký tài khoản mới dành cho những người chưa có tài khoản trước đó.

5.1.2 Giao diện trang đăng ký

Hình 5.1.2 Màn hình đăng ký

Trang đăng ký là nơi người dùng mới có thể đăng ký tài khoản bằng cách điền đầy đủ thông tin như họ tên, email, số điện thoại và mật khẩu Sau khi điền thông tin, người dùng chỉ cần nhấn nút "Đăng ký" để hoàn tất quá trình tạo tài khoản trên website Ngoài ra, nếu đã có tài khoản, người dùng có thể sử dụng nút "Đăng nhập" để truy cập vào trang của mình dễ dàng và nhanh chóng.

 Giao diện trang chủ sẽ được chia làm 3 phần :

Hình 5.1.3.1 Màn hình trang chủ Header

Tại trang web này, phần đầu hiển thị các yếu tố quan trọng như thông tin liên hệ ở phía trên cùng, giúp khách hàng dễ dàng liên lạc Ngay dưới đó là khu vực hiển thị logo thương hiệu, ô tìm kiếm để dễ dàng tìm sản phẩm, cùng các nút Thông báo, Tài khoản và Giỏ hàng để nâng cao trải nghiệm người dùng Cuối cùng, trang web sẽ thể hiện danh mục sản phẩm phong phú, giúp khách hàng thuận tiện trong việc duyệt và chọn lựa hàng hóa.

Hình 5.1.3.2 Màn hình trang chủ Body - Banner

Hiển thị banner quảng cáo cho website Người dùng có thể click trực tiếp vào banner để xem chi tiết

Hình 5.1.3.3 Màn hình trang chủ Body – Sản phẩm mới

Hiển thị danh sách các sản phẩm mới nhất tại cửa hàng giúp khách hàng dễ dàng lựa chọn Người dùng có thể nhấn vào biểu tượng để xem chi tiết sản phẩm và quyết định mua ngay hoặc thêm vào giỏ hàng để các bước mua sắm thuận tiện hơn.

Hình 5.1.3.4 Màn hình trang chủ Body – Sản phẩm nổi bật

Tại đây sẽ hiển thị thông tin sản phẩm bán chạy nhất của cửa hàng để người dùng có thể tham khảo

Hình 5.1.3.5 Màn hình trang chủ Body – Danh mục

Hiện danh sách sản phẩm theo từng danh mục

Hình 5.1.3.6 Màn hình trang chủ Footer

Hiển thị thông tin hỗ trợ và thông tin liên hệ

Hình 5.1.4 Màn hình danh mục

Giao diện danh mục từng loại sản phẩm sẽ hiển thị danh sách sản phẩm theo loại

Ví dụ: Nếu người dùng nhân vào các loại sản phẩm là nam thì sẽ hiển thị danh sách sản phẩm dành cho nam

5.1.5 Giao diện trang giỏ hàng

Hình 5.1.5 Màn hình giỏ hàng

Hiển thị danh sách các sản phẩm đã được thêm vào giỏ hàng giúp người dùng dễ dàng quản lý đơn hàng của mình Tại đây, khách hàng có thể chỉnh sửa số lượng hoặc xóa các sản phẩm bất kỳ trước khi tiến hành thanh toán Việc cập nhật giỏ hàng thuận tiện và nhanh chóng đảm bảo quá trình mua sắm trực tuyến trở nên dễ dàng và thuận tiện hơn.

5.1.6 Giao diện trang thanh toán

Hình 5.1.6 Màn hình trang thanh toán

Giao diện trang thanh toán sẽ hiển thị đơn hàng cần thanh toán Người dùng nhập thông tin đặt hàng để tiến hành thanh toán đơn hàng

5.1.7 Giao diện trang liên hệ và phản hồi

Hình 5.1.7 Màn hình trang liên hệ và phản hồi

Người dùng có thể nhận xét, gửi phản hồi cho cửa hàng

5.1.8 Giao diện trang chỉnh sửa thông tin cá nhân

Hình 5.1.8 Màn hình chỉnh sửa thông thin tài khoản

Dùng để chỉnh sửa thông tin người dùng và đăng xuất tài khoản khỏi hệ thống

5.1.9 Giao diện tìm kiếm và lọc sản phẩm

Hình 5.1.9 Màn hình tìm kiếm và lọc sản phẩm

 Người dùng có thể tìm kiếm sản phẩm theo tên

 Người dùng có thể lọc sản phẩm theo danh mục hoặc mức giá

5.2 Giao diện website quản lý

Hình 5.2.1 Màn hình tổng quan

Giao diện tổng quan hiển thị các danh mục chính và cung cấp thông tin quan trọng về hệ thống, bao gồm số lượng người dùng, tổng số sản phẩm và tổng số phản hồi Điều này giúp người quản trị dễ dàng theo dõi hiệu quả hoạt động của nền tảng và tối ưu hóa quản lý nội dung Giao diện này là công cụ hữu ích để nắm bắt tình hình vận hành và đưa ra các quyết định chiến lược phù hợp.

5.2.2 Giao diện quản lý danh mục

Hình 5.2.2 Màn hình quản lý danh mục

Giao diện quản lý danh mục sản phẩm hiển thị các loại mặt hàng Người quản lý có thể Thêm, Sửa, Xóa các loại mặt hàng đang có

5.2.3 Giao diện quản lý sản phẩm

Hình 5.2.3 Màn hình quản lý sản phẩm

Giao diện quản lý sản phẩm hiển thị danh sách các loại sản phẩm hiện có, bao gồm các thông tin quan trọng như STT, Thumbnail, Tên sản phẩm, Giá và Danh mục Người dùng có thể dễ dàng chỉnh sửa hoặc xóa thông tin của từng sản phẩm để duy trì cập nhật và chính xác trên hệ thống Đây là công cụ quản lý sản phẩm hiệu quả giúp tối ưu quá trình quản lý danh mục và nâng cao trải nghiệm người dùng.

Ngoài ra, Người dùng có thể thêm sản phẩm mới:

Hình 5.2.3.1 Màn hình thêm sản phẩm

5.2.4 Giao diện quản lý đơn hàng

Hình 5.2.4 Màn hình quản lý đơn hàng

Giao diện quản lý đơn hàng hiển thị danh sách các đơn hàng đã đặt, bao gồm các thông tin quan trọng như Họ và Tên, Số điện thoại, Email, Địa chỉ, Nội dung đơn hàng, Ngày đặt hàng và Tổng tiền Người quản lý có thể dễ dàng chấp thuận hoặc hủy bỏ các đơn hàng dựa trên thông tin chi tiết của từng đơn Tính năng này giúp quản lý đơn hàng hiệu quả hơn và nâng cao trải nghiệm của khách hàng.

Ngoài ra, người quản lý có thể xem chi tiết đơn hàng mà người dùng đã đặt hàng

Hình 5.2.4.1 Màn hình xem chi tiết đơn hàng

5.2.5 Giao diện quản lý phản hồi

Hình 5.2.5 Màn hình phản hồi

Giao diện quản lý phản hồi hiển thị danh sách các phản hồi người dùng gửi lên hệ thống, giúp quản trị viên dễ dàng theo dõi và xử lý Người quản lý có thể đọc tất cả các phản hồi và đánh dấu những phản hồi đã được xem để đảm bảo không bỏ lỡ thông tin quan trọng Điều này tối ưu hóa quy trình xử lý phản hồi, nâng cao trải nghiệm người dùng và duy trì sự chuyên nghiệp của hệ thống.

5.2.6 Giao diện quản lý người dùng

Hình 5.2.7 Màn hình quản lý người dùng

Giao diện quản lý người dùng hiển thị danh sách các người dùng hiện có trên hệ thống, bao gồm các thông tin quan trọng như số thứ tự, họ và tên, email, số điện thoại, địa chỉ và quyền truy cập Trang quản lý này giúp người quản trị dễ dàng xem xét và quản lý các tài khoản người dùng một cách thuận tiện và hiệu quả Việc cập nhật và kiểm tra thông tin người dùng tại đây đảm bảo dữ liệu luôn chính xác, nâng cao bảo mật hệ thống.

Tại đây, người quản lý có thể Sửa hoặc xóa thông tin của người dùng

Ngoài ra, người quản lý có thể thêm người dùng mới vào hệ thống

Hình 5.2.7.1 Màn hình thêm người dùng

Chương 6 Kết quả đạt được và hướng phát triển

- Có thêm kiến thức về các công nghệ và ngôn ngữ lập trình mới

- Hiểu được quy trình và cách phát triển một trang web

- Biết cách sử dụng các công cụ quản lý mã nguồn như Github

- Hoàn thiện được website bán hàng với giao diện đẹp mắt, dễ thao tác và sử dụng

- Xây dựng được Website có đầy đủ các chức năng cần thiết của một website bán hàng

- Khả năng reponsive còn hạn chế

- Một số chức năng chưa thực sự mang lại hiệu quả

- Xây dựng thêm chức năng quản lý kho cho cho website người quản lý

- Tạo thêm các phương thức thanh toán cho người dùng

- Xây dựng thêm chức năng khuyến mãi, giảm giá

Thiết kế giao diện

Giao diện quản lý

5.1.9 Giao diện tìm kiếm và lọc sản phẩm

Hình 5.1.9 Màn hình tìm kiếm và lọc sản phẩm

 Người dùng có thể tìm kiếm sản phẩm theo tên

 Người dùng có thể lọc sản phẩm theo danh mục hoặc mức giá

5.2 Giao diện website quản lý

Hình 5.2.1 Màn hình tổng quan

Giao diện tổng quan hiển thị các danh mục chính cùng các thông tin quan trọng như số lượng người dùng, tổng số sản phẩm và tổng số phản hồi, giúp người quản trị dễ dàng theo dõi tình hình hoạt động của hệ thống.

5.2.2 Giao diện quản lý danh mục

Hình 5.2.2 Màn hình quản lý danh mục

Giao diện quản lý danh mục sản phẩm hiển thị các loại mặt hàng Người quản lý có thể Thêm, Sửa, Xóa các loại mặt hàng đang có

5.2.3 Giao diện quản lý sản phẩm

Hình 5.2.3 Màn hình quản lý sản phẩm

Giao diện quản lý sản phẩm hiển thị danh sách các loại sản phẩm hiện có, bao gồm các thông tin như STT, Thumbnail, Tên sản phẩm, Giá cả và Danh mục Người dùng có thể dễ dàng chỉnh sửa hoặc xóa thông tin của từng sản phẩm để cập nhật dữ liệu chính xác và mới nhất Đây là công cụ quản lý sản phẩm hiệu quả, giúp tối ưu hóa quá trình vận hành và nâng cao trải nghiệm người dùng.

Ngoài ra, Người dùng có thể thêm sản phẩm mới:

Hình 5.2.3.1 Màn hình thêm sản phẩm

5.2.4 Giao diện quản lý đơn hàng

Hình 5.2.4 Màn hình quản lý đơn hàng

Giao diện quản lý đơn hàng hiển thị danh sách các đơn hàng đã đặt của khách hàng, bao gồm các thông tin quan trọng như Họ và tên, số điện thoại, email, địa chỉ, nội dung yêu cầu, ngày đặt hàng và tổng số tiền Người quản lý có khả năng chấp thuận hoặc hủy bỏ đơn hàng dựa trên thông tin chi tiết của từng đơn Đây là công cụ giúp quản lý bán hàng hiệu quả, đảm bảo xử lý các đơn hàng nhanh chóng và chính xác.

Ngoài ra, người quản lý có thể xem chi tiết đơn hàng mà người dùng đã đặt hàng

Hình 5.2.4.1 Màn hình xem chi tiết đơn hàng

5.2.5 Giao diện quản lý phản hồi

Hình 5.2.5 Màn hình phản hồi

Giao diện quản lý phản hồi cho phép hiển thị danh sách các phản hồi người dùng đã gửi lên hệ thống Người quản trị có thể dễ dàng đọc và duyệt các phản hồi này để nắm bắt ý kiến khách hàng Ngoài ra, tính năng đánh dấu phản hồi đã xem giúp quản lý dễ dàng theo dõi và phản hồi kịp thời Với giao diện thân thiện, quản lý phản hồi trở nên nhanh chóng và hiệu quả hơn, nâng cao trải nghiệm người dùng và tối ưu hóa dịch vụ.

5.2.6 Giao diện quản lý người dùng

Hình 5.2.7 Màn hình quản lý người dùng

Giao diện quản lý người dùng hiển thị danh sách các người dùng đang có trên hệ thống, bao gồm các thông tin quan trọng như số thứ tự, họ và tên, email, số điện thoại, địa chỉ và quyền truy cập Đây là công cụ quan trọng giúp quản trị viên dễ dàng theo dõi, quản lý và phân quyền người dùng một cách hiệu quả trên nền tảng của bạn Việc cập nhật và duy trì chính xác các thông tin này đảm bảo hệ thống hoạt động trơn tru và an toàn, nâng cao trải nghiệm người dùng.

Tại đây, người quản lý có thể Sửa hoặc xóa thông tin của người dùng

Ngoài ra, người quản lý có thể thêm người dùng mới vào hệ thống

Hình 5.2.7.1 Màn hình thêm người dùng

Kết quả đạt được và hướng phát triển

Hướng phát triển

[1] Bootstrap 4 : https://getbootstrap.com/docs/4.0/getting-started/introduction/

[2] Html, Css, JavaScript : https://www.w3schools.com/

[3] Form: https://www.codingnepalweb.com/login-and-registration-form-in-html/

[5] Host: https://vn.000webhost.com/

Tiêu đề	Website Bán Hàng Thời Trang
Tác giả	Nguyễn Xuân Sơn
Người hướng dẫn	ThS. Trần Thị Hồng Yến
Trường học	Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án
Năm xuất bản	2022
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	54
Dung lượng	2,56 MB