TỔNG QUAN VỀ ĐỀ TÀI
Lý do chọn đề tài
Hình thức bán quần áo truyền thống, chỉ bán hàng tại cửa hàng, đã không còn đủ để giúp doanh nghiệp phát triển nhanh chóng và quảng bá thương hiệu hiệu quả Trong bối cảnh dịch bệnh hiện nay, thói quen mua sắm của người tiêu dùng đã chuyển sang hình thức online, khiến cho phương thức bán hàng truyền thống gặp nhiều khó khăn hơn bao giờ hết.
Hiện nay, có nhiều phương thức bán hàng trực tuyến như qua mạng xã hội và các trang thương mại điện tử Một trong những cách hiệu quả nhất là bán hàng qua website riêng của doanh nghiệp.
Mục tiêu của đề tài
Xây dựng được giao diện website bán quần áo Canifa đảm bảo tính thẩm mỹ và thân thiện với người dùng.
Xây dựng các giao diện như:
- Trang xem chi tiết thông tin quần áo
- Các trang quản trị hệ thống
Giới hạn và phạm vi của đề tài
- Đối tượng nghiên cứu: Các cửa hàng bán quần áo của Canifa
- Khách thể nghiên cứu: Ban quản lý của Canifa và khách hàng.
- Phạm vi không gian: tại các cửa hàng cửa Canifa
- Phạm vi thời gian: 3 tháng
Nội dung thực hiện
- Lấy yêu cầu của khách hàng
- Phân tích thiết kế hệ thống
Phương pháp tiếp cận
Tiếp cận người dùng hệ thống thông qua khảo sát hệ thống cũ, từ đó đề xuất và lựa chọn hệ thống mới, bao gồm nhiều phương án để chủ đầu tư có thể lựa chọn.
CƠ SỞ LÝ THUYẾT
Quy trình phát triển phần mềm
Lập kế hoạch và thực hiện
- Đồ án môn học được thực hiện trong 16 tuần.
Khảo sát chi tiết cửa hàng và yêu cầu của khách hàng là bước quan trọng trong quá trình phát triển phần mềm Việc thu thập thông tin và phân tích kỹ lưỡng giúp xác định rõ yêu cầu chức năng cần thiết Các yêu cầu này sẽ được đặc tả một cách trực quan thông qua các biểu đồ, hỗ trợ cho việc thiết kế và triển khai phần mềm hiệu quả.
Khảo sát và phân tích đặc tả yêu cầu
- Khảo sát và phân tích đặc tả yêu cầu: khảo sát các chức năng, nghiệp vụ, yêu cầu của website bán mỹ phẩm.
- Tham khảo các trang web khác trên mạng internet.
Thiết kế môi trường tạo trang web
Để có cái nhìn trực quan nhất về website và mối quan hệ giữa các đối tượng, cần thực hiện thiết kế tổng thể Sau đó, áp dụng các công cụ và phương pháp để thiết kế chi tiết, nhằm tạo ra mô hình hệ thống hiệu quả.
Lập trình thiết kế website
Thiết kế website bao gồm hai phần chính: hệ thống quản trị và giao diện người dùng Hệ thống quản trị cho phép người quản trị quản lý toàn bộ cơ sở dữ liệu và website, bao gồm các chức năng như thêm, sửa, xóa, cập nhật thông tin, cũng như thực hiện thống kê và tìm kiếm thông tin hiệu quả.
- Yêu cầu cho trang quản trị:
Hệ thống cho phép nhân viên quản lý thông tin về quần áo, bao gồm loại, giá cả, tin tức và địa chỉ Nếu có sai sót, quản trị viên có quyền thêm, sửa hoặc xóa thông tin Đồng thời, quản trị viên cũng có khả năng chiết xuất và thống kê chi tiêu cũng như lợi nhuận của trang web.
• Cho phép quản trị viên có thể quản lý đơn hàng
- Yêu cầu cho trang người dùng:
• Cho phép người dùng truy cập vào website để tìm kiếm quần áo, thông tin và tìm kiếm địa điểm
• Khi người dùng chọn quần áo thì có thể thay đổi cho quần áo của mình
- Thiết kế giao diện bằng ngôn ngữ HTML, CSS
Ngôn ngữ lập trình web cho phép chúng ta sử dụng các phần tử để xây dựng cấu trúc cho trang web, bao gồm việc phân chia đoạn văn và tiêu đề Bằng cách áp dụng các thẻ và thuộc tính, chúng ta có thể tạo ra một cấu trúc rõ ràng và hợp lý cho nội dung trang web.
- Lập trình hoạt động của website bằng ngôn ngữ Javascript.
JavaScript cho phép phát triển các chức năng phức tạp trên website, bao gồm việc hiển thị nội dung được cập nhật theo thời gian thực, tương tác với bản đồ, điều khiển phương tiện và tạo hoạt cảnh cho hình ảnh Ngoài ra, nó còn hỗ trợ việc tạo ra nội dung đa phương tiện động, mang đến trải nghiệm tương tác phong phú cho người dùng.
JavaScript cho phép triển khai tập lệnh bên phía máy khách, giúp người dùng dễ dàng viết và tích hợp các tập lệnh tùy chỉnh vào HTML Điều này tạo ra khả năng tương tác mạnh mẽ, cho phép phản hồi ngay lập tức với người dùng.
- Lập kế hoạch và kiểm soát việc kiểm thử.
- Đánh giá kết quả thực thi và báo cáo kết quả.
Thiết kế giao diện web với HTML, CSS
1 Thiết kế giao diện với HTML
HTML (Ngôn ngữ Đánh dấu Siêu văn bản) là ngôn ngữ được phát triển để xây dựng các trang web, giúp trình bày thông tin trên World Wide Web một cách hiệu quả.
HTML là tập hợp các quy định chung để trao đổi tài liệu như văn bản, hình ảnh, âm thanh, video và các tập tin đa phương tiện giữa máy chủ web và trình duyệt web.
Trang web được cấu trúc bằng các thẻ HTML, trong đó phần đầu được định nghĩa bởi cặp thẻ , nơi chứa các liên kết đến file CSS, tiêu đề trang và file JS Nội dung mà người dùng thấy sẽ được đặt trong cặp thẻ .
• Thẻ để nhúng hình ảnh, thẻ để liên kết đến một trang khác, thẻ
để định dạng các đoạn văn, thẻ để chứa khối lệnh và chia bố cục trang web.
- Có thể tích hợp được với các ngôn ngữ khác như CSS, JavaScript,
- Ngôn ngữ được sử dụng rộng rãi, có nhiều nguồn tài nguyên hỗ trợ.
- Sử dụng mượt mà trên hầu hết mọi trình duyệt.
- Quá trình học đơn giản và trực tiếp.
- Mã nguồn mở và hoàn toàn miễn phí.
- Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3W).
- Dễ dàng tích hợp các ngôn ngữ backend như PHP và Node.js.
- Được dùng chủ yếu cho web tĩnh Đối với các tính năng động cần sử dụng JavaScript hoặc ngôn ngữ backend.
- Một lượng lớn code phải được viết để tạo một trang web đơn giản.
- Một số trình duyệt chậm hỗ trợ tính năng mới.
- Tính năng bảo mật không tốt.
2 Thiết kế giao diện web với CSS
CSS, viết tắt của Cascading Style Sheets, là công cụ quan trọng để định dạng các phần tử trên trang web Nó xác định cách hiển thị các phần tử HTML, ảnh hưởng đến diện mạo của trang web.
Bộ chọn (selector) dùng để xác định phần tử HTML muốn định dạng.
Each property-value pair is referred to as a declaration, which is used to set or reset the value of a CSS property for an element For example, the declaration "color: yellow;" specifies that the text color of the element should be yellow.
Bộ định dạng là một tập hợp gồm nhiều khai báo, nó dùng để thiết lập lại giá trị cho các thuộc tính CSS của phần tử.
Tên bộ chọn Chọn gì Ví dụ
Bộ chọn phần tử (đôi khi được gọi là thẻ hoặc loại bộ chọn)
Tất cả (các) thành phần HTML của loại được chỉ định Chọn
Mỗi phần tử trên trang HTML phải có một ID duy nhất, với quy định rằng chỉ có một phần tử được phép sử dụng mỗi ID trên một trang cụ thể.
#my-id Chọn
or
(Các) Thành phần trên trang có lớp (class) được chỉ định (lớp có thể xuất hiện nhiều lần trên một trang).
.my-class Chọn
và
Bộ chọn thuộc (Các) thành phần trên trang cóimg[src] tính thuộc tính được chọn.
Chọn nhưng không phải
Các thành phần được chỉ định chỉ hoạt động khi ở trạng thái được chỉ định, chẳng hạn như khi rê chuột qua liên kết với pseudo-class a:hover Điều này có nghĩa là lựa chọn chỉ xảy ra khi con trỏ chuột di chuyển qua liên kết.
Lập trình phía front-end
Front-end là quy trình thiết kế giao diện cho trang web hoặc ứng dụng web bằng HTML, CSS và JavaScript, giúp người dùng tương tác trực tiếp Mục tiêu chính là tạo ra trải nghiệm dễ dàng cho người dùng, mặc dù họ sử dụng nhiều loại thiết bị với kích thước và độ phân giải khác nhau Điều này đòi hỏi Front End Developer phải xem xét kỹ lưỡng để đảm bảo trang web hiển thị chính xác trên các trình duyệt, hệ điều hành và thiết bị khác nhau Để trở thành lập trình viên Front End, việc nắm vững HTML, CSS và JavaScript là bắt buộc, cùng với việc bổ sung kiến thức liên quan khác.
HTML và CSS là hai ngôn ngữ cơ bản thiết yếu cho việc phát triển giao diện web Việc nắm vững hai ngôn ngữ này là điều kiện tiên quyết để bạn có thể thiết kế trang web hiệu quả.
JavaScript cho phép bạn có thể tạo ra rất nhiều tính năng tương tác cho trang web Giúp cho người dùng dễ dàng sử dụng website hơn.
jQuery là một thư viện JavaScript nhẹ, giúp đơn giản hóa việc tạo ra các tương tác, sự kiện và hiệu ứng trên website Với nhiều hiệu ứng đa dạng, việc tìm hiểu jQuery sẽ mang lại lợi ích lớn cho việc phát triển web.
Tối ưu hóa trải nghiệm người dùng là một yếu tố quan trọng trong phát triển web Các lập trình viên front-end cần nắm vững thiết kế giao diện để nâng cao trải nghiệm người dùng khi truy cập website.
Thiết kế giao diện Reponsive và thiết kế Mobile
Hiện nay, các hệ quản trị nội dung (CMS) nổi tiếng như WordPress và Joomla đang thu hút sự chú ý của nhiều người dùng, vì chúng cho phép tạo trang web nhanh chóng hơn so với việc lập trình từ đầu Với tỷ lệ truy cập internet từ thiết bị di động vượt trội hơn so với máy tính để bàn, kỹ năng thiết kế mobile trở nên cực kỳ quan trọng trong mắt các nhà tuyển dụng Thiết kế responsive giúp trang web tương thích với nhiều loại thiết bị di động có kích thước màn hình khác nhau, mang lại trải nghiệm người dùng tốt hơn.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Phát biểu bài toán
Xây dựng một website cho cửa hàng quần áo Canifa nhằm giới thiệu sản phẩm và cho phép khách hàng đặt hàng trực tuyến Website sẽ cung cấp tính năng xem và đặt hàng online, đồng thời cho phép nhân viên quản lý thông tin và theo dõi hoạt động đặt hàng cũng như giao hàng Các yêu cầu của hệ thống được nêu rõ để đảm bảo hiệu quả hoạt động.
1 Cửa hàng bán các loại quần áo cho Mỗi loại có các thông tin (Mã loại, tên loại) Khi cửa hàng nhập một loại quần áo mới nhân viên cửa hàng có nhiệm vụ cập nhật thông tin về loại mặt hàng vào trong hệ thống, nếu thông tin có sai sót nhân viên có thể thực hiện sửa hoặc xóa thông tin về loại mặt hàng.
2 Một loại quần áo sẽ có nhiều quần áo khác nhau Mỗi quần áo trong cửa hàng gồm các thông tin (Mã quần áo, Tên quần áo, chất liệu, size, màu sắc, mô tả). Mỗi sảm phẩm sẽ có nhiều size và màu sắc khác nhau Khi cửa hàng bán một quần áo mới, nhân viên thực hiện nhập thông tin về quần áo vào trong hệ thống, nếu thông tin của quần áo có sai sót nhân viên có thể thực hiện sửa hoặc xóa thông tin của quần áo.
3 Giá bán của các mặt hàng được điều chỉnh theo giá bán của thị trường, khi giá của các mặt hàng thay đổi thì nhân viên có nhiệm vụ cập nhật lại giá bán, nếu giá bán có sai sót thì có thể thực hiện sửa giá bán Giá bán của mỗi quần áo gồm các thông tin (Mã quần áo, Giá bán, Ngày hiệu lực, Ngày hết hiệu lực).
4 Cửa hàng có nhập quần áo từ nhà cung cấp của Canifa Khi nhập hàng về cửa hàng, nhân viên có nhiệm vụ nhập quần áo vào cửa hàng và lưu thông tin về hóa đơn nhập hàng vào hệ thống hóa đơn nhập hàng gồm thông tin (Mã hóa đơn nhập, Ngày nhập, Thành tiền và các thông tin về quần áo nhập (Mã quần áo, Số lượng, Giá nhập,) Khi thông tin về hóa đơn nhập có sai sót, hệ thống cho phép nhân viên kho có thể sửa, xóa thông tin hóa đơn nhập.
5 Khi khách hàng muốn mua quần áo, khách hàng vào website xem thông tin của các quần áo (thông tin về các quần áo có thể được hiển thị theo nhóm như quần áo xu hướng mới nhất, quần áo bán chạy nhất, quần áo khuyến mại, quần áo theo loại) Khi khách hàng quan tâm đến quần áo nào khách hàng có thể xem thông tin chi tiết về quần áo đó Trong quá trình xem thông tin quần áo trên website, nếu khách hàng mua quần áo nào sẽ chọn quần áo đó đưa vào giỏ hàng.
6 Sau khi chọn mua các quần áo trong giỏ hàng, khách hàng có thể xem thông tin các quần áo trong giỏ hàng, sửa số lượng quần áo mua hoặc xóa quần áo chọn mua trong giỏ hàng Khi khách hàng muốn đặt mua, khách hàng sẽ thực hiện đặt hàng, thông tin đơn đặt hàng được lưu vào hệ thống Thông tin của đơn hàng gồm các thông tin (Mã đơn hàng, thông tin của khách hàng, ngày đặt hàng, thành tiền, địa chỉ giao hàng, số điện thoại nhận hàng, trạng thái đơn hàng và các thông tin về các quần áo đặt mua gồm (Mã quần áo, số lượng, đơn giá).
7 Khi có một khách hàng mới đặt hàng lần đầu trong hệ thống, thông tin của khách hàng sẽ được lưu lại sau khi thực hiện xác minh được thông tin của khách Thông tin của khách hàng gồm (Mã khách hàng, Tên khách hàng, Số điện thoại, Email, Địa chỉ) Khách hàng có thể xem lại thông tin khách hàng, nếu có sai sót khách hàng có thể thực hiện sửa thông tin.
8 Khách hàng có thể đăng nhập vào website để nhận được các ưu đã và các khuyến mãi đặc biệt của website.
9 Khách hàng có thể xem lại danh sách các đơn đặt hàng đã đặt và thông tin chi tiết từng đơn hàng đã đặt Với các đơn hàng chưa được giao, khách hàng có thể sửa số lượng các mặt hàng đã đặt mua, xóa bớt các mặt hàng đã đặt hoặc hủy đơn đặt hàng
10 Với các đơn hàng khách hàng đã đặt, nhân viên cửa hàng có thể thực hiện xóa và xem được các đơn hàng chưa xác thực; xem danh sách các đơn hàng đã xác thực và xác nhận đã xử lý; xem được các đơn hàng đã xử lý và xác nhận đã chuyển cho nhà cung cấp; xem được các đơn hàng đang vận chuyển và xác nhận đã thanh toán hoặc đổi trả hoặc giao hàng không thành công
11 Tất cả nhân viên thực hiện quản lý thông tin hệ thống phải đăng nhập trước khi thực hiện, thông tin nhân viên gồm (Mã nhân viên, Mật khẩu, Vai trò, Trạng thái hoạt động).
12 Nếu nhân viên cửa hàng vắng mặt/bận thì admin có thể đóng vai trò như nhân viên.
Đặc tả yêu cầu phần mềm
1.2.1 Các yêu cầu chức năng a) Chức năng của phân hệ quản trị nội dung (nếu có)
Hình 3-1 Biểu đồ tổng quát trang quản trị
Mục đích: Cho phép người dùng đăng nhập vào hệ thống
Tác nhân liên quan: Khách hàng, Nhân viên, Admin
2 Chức năng quản lý loại quần áo
Mục đích: Cho phép người dùng quản lý các loại quần áo
Tác nhân liên quan: Nhân viên, Admin
1 Yêu cầu chức năng đang nhập
2 SYSTEM Hiển thị giao diện đăng nhập
3 Nhập user name, nhập password
5 SYSTEM Lấy về thông tin người dùng nếu người dùng đăng nhập sai chuyển sang luông phụ 5a
6 if Nếu chọn ghi nhớ tài khoản
6.1 SYSTEM Hệ thống lưu ghi nhớ tài khoản
7 SYSTEM Thiết lập trạng thái đăng nhập, đóng giao diện đăng nhập
5.a User name hoặc password không đúng
1 SYSTEM Hệ thống hiển thị thông báo đăng nhập không thành công, yêu cầu nhập lại, quay lại bước 3
Hình 3-2 Biểu đồ phân rã của use case quản lý loại quần áo
Dòng sự kiện của chức năng quản lý loại quần áo
1 Nhân viên yêu cầu chức năng quản lý loại quần áo
2 SYSTEM Hệ thống lấy về danh sách loại hàng hiển thị lên giao diện
3 Nhân viên thực hiện các ca sử dụng tùy chọn
3.1 if chọn chức năng thêm
3.1.1 Thực hiện ca sử dụng thêm loại 3.1 end if
3.2 if Chọn một loại quần áo yêu cầu xóa
3.2.1 Thực hiện ca sử dụng xóa 3.2 end if
3.3 if Chọn một loại quần áo yêu cầu xóa
3.3.1 Thực hiện ca sử dụng sửa 3.3 end if
Dòng sự kiện của chức năng nhập loại quần áo
1 Người dùng yêu cầu chức năng nhập mới loại quần áo
2 SYSTEM Hệ thống hiển thị giao diện nhập
3 Nhân viên nhập thông tin loại quần áo
4 SYSTEM Hệ thống kiểm tra tính hợp lệ của các thông tin
5 Nhân viên yêu cầu nhập
6 SYSTEM Hệ thống lưu thông tin quần áo vào trong hệ thống
7 SYSTEM Hệ thống thêm Loại vào danh sách loại và quay trở lại màn hình ban đầu
4.a Thông tin không hợp lệ
1 Hệ thống hiển thị thông báo lỗi và yêu cầu nhập lại
5.a Nhân viên hủy chức năng nhập
1 SYSTEM Hệ thống hiển thị thông báo xác nhận thao tác hủy, nếu đúng thì chuyển sang luồng phụ 5b
1 SYSTEM Hệ thống đóng giao diện nhập và quay lại giao diện chính
Dòng sự kiện của chức năng sửa loại quần áo
1 Nhân viên yêu cầu sửa loại quần áo
2 SYSTEM Hệ thống hiển thị giao diện sửa loại quần áo và hiển thị thông tin loại quần áo cần sửa
3 Nhân viên sửa thông tin loại quần áo
4 Nhân viên yêu cầu lưu thông tin quần áo đã sửa
5 SYSTEM Hệ thống kiểm tra tính hợp lệ thông tin, nếu thông tin không hợp lệ chuyển sang luồng phụ 5a
6 SYSTEM Hệ thống cập nhật thông tin loại quần áo lên hệ thống và hiển thị thông tin cập nhật lên giao diện
7 SYSTEM Hệ thống đóng giao diện sửa loại quần áo
5.a Thông tin loại quần áo không hợp lệ
1 SYSTEM Hệ thống hiển thị thông báo lỗi và yêu cầu nhập lại thông tin
Dòng sự kiện của chức năng xóa loại quần áo
1 Nhân viên chọn loại quần áo cần xóa
2 SYSTEM Hệ thống hiển thị thông báo xác nhận xóa loại quần áo
3 if Nếu người dùng xác nhận xóa loại quần áo
3.1 SYSTEM Hệ thống xóa quần áo đã chọn và thông báo xóa quần áo thành công
3.a Nếu người dùng yêu cầu xóa quần áo
1 SYSTEM Đóng cửa sổ xóa quần áo và quay lại trang chủ
3 Chức năng quản lý quần áo
Mục đích: Cho phép người dùng quản lý các quần áo
Tác nhân liên quan: Nhân viên, Admin
Hình 3-3 Biểu đồ phân rã của use case quản lý quần áo
4 Chức năng quản lý khách hàng
Mục đích: Cho phép người dùng quản lý các khách hàng
Tác nhân liên quan: Nhân viên, Admin
Hình 3-4 Biểu đồ phân rã của use case quản lý khách hàng
5 Chức năng quản lý đơn hàng
Mục đích: Cho phép người dùng quản lý các đơn hàng
Tác nhân liên quan: Nhân viên, Admin
Hình 3-5 Biểu đồ phân rã của use case quản lý đơn hàng
6 Chức năng quản lý hóa đơn nhập
Mục đích: Cho phép người dùng quản lý các hóa đơn nhập
Tác nhân liên quan: Nhân viên, Admin
Hình 3-6 Biểu đồ phân rã của use case quản lý hóa đơn nhập
7 Chức năng quản lý nhân viên
Mục đích: Cho phép Admin quản lý các nhân viên
Tác nhân liên quan: Admin
Hình 3-7 Biểu đồ phân rã của use case quản lý nhân viên
Mục đích: Cho phép Admin xem các thông số thống kê
Tác nhân liên quan: Admin
Hình 3-8 Biểu đồ phân rã của use case thống kê
1 Nhân viên yêu cầu chức năng thống kê
2 Nhân viên thực hiện các ca sử dụng tùy chọn
2.1 if Chọn chức năng thống kê doanh thu lợi nhuận
2.1.1 if Chọn chức năng hiển thị doanh thu lợi nhuận theo ngày
2.1.1.1 Nhân viên nhập ngày muốn xem doanh thu lợi nhuận 2.1.1.2 SYSTEM Hiển thị doanh thu lợi nhuận của ngày đã nhâp 2.1.1 end if
2.1.2 if Chọn chức năng hiển thị doanh thu lợi nhuận theo tháng
2.1.2.1 Nhân viện nhập tháng muốn xem doanh thu lợi nhuận 2.1.2.2 SYSTEM Hiển thị doanh thu lợi nhuận của tháng đã nhập 2.1.2 end if
2.1.3 if Chọn chức năng hienr thị doanh thu lợi nhuận theo năm
2.1.3.1 Nhân viên nhập năm muốn xem doanh thu lợi nhuận 2.1.3.2 SYSTEM Hiển thị doanh thu lợi nhuận của năm đã nhập 2.1.3 end if
2.2 if Chọn chức năng hiển thị sản phẩm bán chạy
2.2.1 Hiển thị số lượng bán được của các sản phẩm từ cao đến thấp 2.2 end if
2.1.1.1.a Thời gian không hợp lệ
1 Hệ thống hiển thị thông báo lỗi và yêu cầu nhập lại
2.1.2.1.a Thời gian không hợp lệ
1 Hệ thống hiển thị thông báo lỗi và yêu cầu nhập lại b) Chức năng của phân hệ người dung (nếu có)
Hình 3-9 Biểu đồ tổng quát của trang người dùng
1 Chức năng xem thông tin quần áo
Mục đích: Cho phép khách hàng xem thông tin quần áo
Tác nhân liên quan: Khách hàng
Hình 3-10 Biểu đồ phân rã của use case Xem quần áo
1 Người dùng chọn loại quần áo cần xem
2 SYSTEM Hệ thống hiển thị giao diện xem quần áo
3 SYSTEM Hệ thống lấy về danh sách quần áo theo loại đã chọn, không có quần áo nào chuyển sang luồng phụ 2a
4 SYSTEM Hiển thị danh sách quần áo
1 SYSTEM Hiển thị thông báo không có quần áo thuộc loại đã chọn
2 Chức năng quản lý đơn hàng
Mục đích: Cho phép khách hàng quản lý đơn hàng
Tác nhân liên quan: Khách hàng
Hình 3-11 Biểu đồ phân rã của use case quản lý đơn hàng
3 Chức năng quản lý giỏ hàng
Mục đích: Cho phép khách hàng quản lý giỏ hàng
Tác nhân liên quan: Khách hàng
Hình 3-12 Biểu đồ phân rã của use case quản lý giỏ hàng
1 Người dùng yêu cầu chức năng quản lý giỏ hàng
2 SYSTEM Hệ thống kiểm tra có quần áo trong giỏ hàng hay không, nếu ko có chuyển sang luồng phụ 2a
3 SYSTEM Hiển thị giao diện quản lý giỏ hàng
4 SYSTEM Hệ thống lấy về danh sách quần áo đã đặt hiển thị lên giao diện Extension:
2.a Không có quần áo trong giỏ hàng
1 SYSTEM Hệ thống hiển thị thông báo là không có quần áo trong giỏ hàng
Luồng sự kiện của chức năng sửa số lượng quần áo trong giỏ hàng
1 Người dùng sửa số lượng quần áo
2 SYSTEM Hệ thống kiểm tra số lượng quần áo còn đủ để đặt hàng không,nếu không chuyển sang luồng phụ 2a
3 SYSTEM Hệ thống cập nhật lại số lượng quần áo đặt hàng trong giỏ hàng và tổng thành tiền
2.a Số lượng quần áo không đủ
1 SYSTEM Thông báo số lượng quần áo không đủ cho khách hàng
Luồng sự kiện của chức năng xóa quần áo trong giỏ hàng
1 Người dùng chọn quần áo cần xóa
2 Yêu cầu xóa quần áo khỏi giỏ hàng
3 SYSTEM Hệ thống xóa quần áo khỏi giỏ hàng
Mục đích: Cho phép khách hàng đặt hàng
Tác nhân liên quan: Khách hàng
Hình 3-13 Biểu đồ của use case đặt quần áo
1 Người dùng vào quản lý giỏ hàng và yêu cầu chức năng đặt hàng
2 SYSTEM Hệ thống kiểm tra trạng thái nhập thông tin của khách hàng, nếu chưa nhập thông tin chuyển sang luồng phụ 2a
3 SYSTEM Hiển thị giao diện đặt hàng
4 SYSTEM Lấy về danh sách các quần áo đã đặt trong giỏ hàng,hiển thị lên giao diện
5 SYSTEM Lấy về thông tin khách hàng hiển thị lên giao diện
6 SYSTEM Lấy về các địa chỉ giao hàng của khách hàng
7 if Nếu khách chọn địa chỉ giao hàng khác
7.1 Khách nhập thông tin giao hàng mới hoặc chọn địa chỉ giao hàng khác địa chỉ mặc định đã có
9 SYSTEM Sinh mã đơn hàng
10 SYSTEM M Lưu thông tin đơn hàng vào hệ thống
11 if Nếu nhập thông tin giao hàng mới
11.1 SYSTEM Lưu thông tin giao hàng vào trong hệ thống
12 SYSTEM Lưu danh sách mặt hàng trong đơn hàng vào hệ thống
2.a Khách hàng chưa nhập thông tin đặt hàng
1 SYSTEM Hiển thị thông báo nhập thông tin
1.2.2 Biểu đồ lớp thực thể
Hình 3-14 Biểu đồ lớp thực thể
1.2.3 Các yêu cầu phi chức năng
Yêu cầu về giao diện: Giao diện đẹp, thân thiện, dễ dàng thao tác, phù hợp trên nhiều loại thiết bị như Tablet, mobile, PC
Thời gian thực thi: Khi khách hàng sử dụng hệ thống mua hàng tốc độ phản hồi lại cho khách hàng rất nhanh không quá 2 giây
Khách hàng yêu cầu hệ thống phải đảm bảo độ tin cậy cao khi thanh toán hóa đơn đặt hàng, với khả năng tính toán giá trị hóa đơn chính xác đến phần nghìn.
Để đảm bảo tính bảo mật, hệ thống cần phân quyền cho người sử dụng theo từng chức năng, giúp bảo vệ khả năng lưu trữ dữ liệu và phục hồi hệ thống Ngoài ra, việc bảo mật thông tin người dùng và mã hóa dữ liệu là rất quan trọng để ngăn chặn tình trạng bị đánh cắp thông tin.
Cơ sở dữ liệu (CSDL) cần đảm bảo tính logic bằng cách mỗi bảng phải chứa đầy đủ các thuộc tính của đối tượng, bao gồm mã và tên Mã được sử dụng làm khóa chính, trong khi khóa ngoại phải không trùng lặp với các khóa chính của các bảng khác Đồng thời, tên của đối tượng không được để trống.
Trong quá trình thiết kế phần mềm, có một số ràng buộc quan trọng cần lưu ý, bao gồm việc thực hiện các yêu cầu thiết kế như báo cáo nghiên cứu khả thi, kế hoạch dự án, tài liệu yêu cầu phần mềm, tài liệu thiết kế và tài liệu kiểm thử Ngoài ra, các ngôn ngữ thiết kế chính thường được sử dụng là HTML, CSS và JavaScript, giúp đảm bảo tính khả thi và hiệu quả cho sản phẩm cuối cùng.
Bảo trì: hệ thống dễ dàng bảo trì, phát triển khi người dùng muốn thanh đổi
Tính khả chuyển: phần mềm được chạy trên các hệ thống khác nhau như:Mobile, Website
Thiết kế giao diện
Trang người dùng bao gồm các giao diện chính như: giao diện đăng ký và đăng nhập, cho phép người dùng tạo tài khoản mới hoặc truy cập vào tài khoản hiện có; giao diện giỏ hàng mini, giúp người dùng xem các sản phẩm đã thêm vào giỏ; giao diện trang chủ, hiển thị các thông tin và sản phẩm nổi bật; và giao diện chi tiết sản phẩm, cung cấp thông tin cụ thể về từng sản phẩm.
Giao diện sản phẩm cho phép người dùng xem thông tin chi tiết và phản hồi của khách hàng đã mua sản phẩm Giao diện giỏ hàng giúp người dùng dễ dàng đặt mua các sản phẩm đã chọn Giao diện tất cả sản phẩm hiển thị toàn bộ sản phẩm trên trang web, ngoại trừ các sản phẩm được giảm giá mạnh ở mục outlet Các giao diện quản trị hỗ trợ nhân viên cửa hàng trong việc nhập hàng, xác nhận đơn đặt hàng, quản lý khách hàng và theo dõi báo cáo cửa hàng.
Hình 3-15 Giao diện đăng nhập
Hình 3-16 Giao diện đang ký
Hình 3-17 giao diện giỏ hàng mini
Hình 3-18 Giao diện trang chủ
Hình 3-19 Giao diện trang chủ
Hình 3-20 Giao diện trang chủ
Hình 3-21 Giao diện trang chủ
Hình 3-22 Giao diện trang chủ
Hình 3-23 Giao diện trang chủ
Hình 3-24 giao diện chi tiết sản phẩm
Hình 3-25 giao diện chi tiết sản phẩm
Hình 3-26 giao diện chi tiết sản phẩm
Hình 3-27 giao diện chi tiết sản phẩm
Hình 3-28 giao diện chi tiết sản phẩm
Hình 3-29 giao diện chi tiết sản phẩm
Hình 3-30 giao diện chi tiết sản phẩm
Hình 3-31 giao diện chi tiết sản phẩm
Hình 3-32 giao diện chi tiết sản phẩm
Hình 3-33 Giao diện giỏ hàng
Hình 3-34 Giao diện giỏ hàng
Hình 3-35 Giao diện tất cả sản phẩm
Hình 3-36 Giao diện tất cả sản phẩm
Hình 3-37 Giao diện tất cả sản phẩm
Hình 3-38 Giao diện quản lý loại quần áo
Hình 3-39 Giao diện quản lý quần áo
Hình 3-40 Giao diện quản lý khách hàng
Hình 3-41 Giao diện quản lý nhân viên
Hình 3-42 Giao diện quản lý hóa đơn nhập
Hình 3-43 Giao diện quản lý đơn đặt hàng
Hình 3-44 Giao diện báo cáo doanh thu lợi nhuận
TRIỂN KHAI WEBSITE
Triển khai các chức năng cho phân hệ người dùng
− Có thể sử dụng chức năng đăng kí, đăng nhập tài khoản của mình
− Khách hàng có thể xem danh sách sản phẩm bản chạy nhất ở trang chủ
− Khách hàng có thể xem chi tiết sản phẩm bằng cách click vào một sản phẩm nào đó
− Khách hàng có thể xem tất cả sản phẩm của cửa hàng ở trang tất cả sản phẩm
− Khách hàng vào trang giỏ hàng để đặt những mặt hàng mình muốn mua
1.4.1 Trang chủ a) Phía font end
Xây dựng bố cục trang Home bằng các thẻ HTML
Hình 45 Bố cục trang home page bằng html
Trang chủ của một website được cấu tạo từ hai phần chính: head và body Phần head, được bao quanh bởi cặp thẻ , đóng vai trò quan trọng trong việc cấu hình trang web, bao gồm việc khai báo các thư viện, liên kết và các thẻ SEO như .
− Phần body gồm các thẻ để tạo nên cấu trúc của trang web dùng cặp thẻ
Trang web được cấu trúc thành ba phần chính: header, main và footer, tất cả đều được hỗ trợ bởi HTML5 Phần header sử dụng cặp thẻ đặc biệt để xác định nội dung tiêu đề của trang.
Phần header của trang web bao gồm thanh điều hướng () và thanh công cụ Thanh điều hướng được tạo thành từ cặp thẻ , bên trong chứa thẻ
- .
- , có các menu con được định dạng tương tự như menu chính, nhưng sẽ được bổ sung thêm các hậu tố (pseudo class) để tạo sự khác biệt và dễ nhận biết.
Khi sử dụng hiệu ứng "hover", menu con sẽ xuất hiện khi người dùng di chuột vào từng mục của menu cha Khi nhấp vào các mục này, trang web sẽ chuyển hướng, với mỗi mục chứa các thẻ và thuộc tính href để dẫn đến các liên kết Mặc định, các thẻ có màu chữ xanh và gạch chân; để loại bỏ định dạng này, cần sử dụng thuộc tính color và text-decoration.
Để tạo form tìm kiếm, sử dụng cặp thẻ với các thuộc tính method và action Các thành phần tương tác cho người dùng bao gồm thẻ input với type="text" và thẻ button với type="submit" Sử dụng phương thức GET là hợp lý khi chưa có backend hỗ trợ xử lý dữ liệu Khi người dùng nhập từ khóa và nhấn nút submit, trang web sẽ chuyển hướng theo đường dẫn trong thuộc tính action, và thanh địa chỉ sẽ hiển thị các tham số tương ứng với tên các input trong form Để lấy giá trị của các tham số này, ta sử dụng đối tượng URL.
− Cuối cùng là phần chân được bao bới thẻ footer và các danh sách trong footer được làm bằng cặp thẻ ul và li
Kỹ thuật định dạng bằng CSS
Sử dụng Javascript, Jquery để lập trình các chức năng
Hình 46 Javascript xử lý giao diện chức năng đăng nhập đăng ký của người dùng
Triển khai các chức năng cho phân hệ quản trị nội dung
Thêm sửa xóa các loại quần áo
Thêm sửa xóa các sản phẩm
Thêm sửa xóa khách hàng
Thêm sửa xóa nhân viên
Thêm hoặc xóa hóa đơn nhập hàng
Tìm kiếm hoặc chuyển đổi trạng thái của đơn đặt hàng
Thống kê báo cáo doanh thu lợi nhuận theo ngày, tuần, hoặc tháng và theo dạng bảng hoặc biểu đồ
Kiểm thử và triển khai ứng dụng
• Máy tính truy cập internet
Các trình duyệt như Cốc cốc, Google Chrome, Egde, FireFox…
Bên trong các thẻ
