Đề tài xây dựng website bán hàng cho shop trần duy hưng spring boot và angular

Use CaseCa sử dụng Một chuỗi các hành động mà hệ thống thực hiện mang lại một kếtquả quan sát được đối với ActorLớp Entity Class Lớp thực thể Mô hình hóa các thông tin lưu trữ lâu dài tr

TỔNG QUAN VỀ ĐỀ TÀI

Lý do chọn đề tài

Thương mại điện tử là hình thức mua bán và trao đổi thông tin qua internet, cho phép công ty và doanh nghiệp giới thiệu sản phẩm qua hình ảnh và thông tin trên trang web Khách hàng có thể dễ dàng xem, tham khảo và lựa chọn sản phẩm Đây là một phương thức kinh doanh tiện lợi và đang phát triển mạnh mẽ, mang lại cơ hội lớn cho các công ty, doanh nghiệp trong quá trình phát triển và xây dựng thành công, danh tiếng.

Thương mại điện tử mang lại nhiều lợi ích, bao gồm việc giảm thời gian và chi phí cho các giao dịch Kinh doanh trực tuyến không chỉ đáp ứng nhu cầu người tiêu dùng mà còn cho phép họ so sánh giá từ nhiều nguồn để tìm được sản phẩm tốt với giá hợp lý Với kiến thức đã học và kinh nghiệm thực tế, tôi đã chọn đề tài “Xây dựng website bán hàng cho shop Đặng Hải bằng Spring Boot và Angular”.

Mục tiêu của đề tài

Mục tiêu xây dựng trang web này nhằm giúp cho khách hàng có thể mua hàng trực tiếp từ xa thông qua mạng internet

Khách hàng có thể dễ dàng tìm kiếm thông tin sản phẩm, so sánh giá cả và lựa chọn sản phẩm phù hợp với nhu cầu của mình, dù ở nhà hay tại cửa hàng Điều này giúp việc mua sắm trở nên nhanh chóng, tiện lợi và tiết kiệm thời gian, đồng thời đáp ứng nhu cầu thực tế của người tiêu dùng.

Hệ thống tìm kiếm dễ dàng và giao diện thân thiện giúp khách hàng dễ dàng đăng nhập bằng tài khoản đã có hoặc thực hiện vài bước đăng ký đơn giản Sau đó, khách hàng có thể thoải mái lựa chọn sản phẩm và tạo đơn đặt hàng trong hệ thống.

Giới hạn và phạm vi của đề tài

• Đối tượng nghiên cứu của đề tài là môi trường website động, có kết nối CSDL.

• Khách thể nghiên cứu: Các loại điện thoại di động thông minh, hóa đơn, khách hàng, cơ sở quản lý

• Ý nghĩa khoa học và thực tiễn của đề tài

- Là một Website chuyên bán các sản phẩm về điện thoại di động thông minh cho mọi cá nhân, hoặc tập thể.

- Là một Website động, các thông tin được cập nhật, quản lý và lưu trên Database.

- Người dùng truy cập vào Website có thể xem, tìm kiếm, mua các sản phẩm,hoặc đặt hàng sản phẩm.

- Các sản phẩm được sắp xếp hợp lý Vì vậy người dùng sẽ có cái nhìn tổng quan về tất cả các sản phẩm hiện có.

- Người dùng có thể xem chi tiết từng sản phẩm (có hình ảnh minh hoạ sản phẩm).

- Khách hàng cũng có thể bỏ đi những sản phẩm không vừa ý đã có trong giỏ hàng.

- Nếu đã quyết định mua các sản phẩm trong giỏ hàng thì người dùng click vào mục thanh toán để hoàn tất việc mua hàng.

- Giá của đơn hàng sẽ có trong giỏ hàng.

- Có thể gửi liên hệ cho cửa hàng

Phương pháp tiếp cận

- Tìm hiểu kỹ thuật lập trình, cách thức hoạt động của các đối tượng trong Java Spring boot và Angular.

- Hiểu được cách lưu dữ liệu của hệ quản trị cơ sở dữ liệu MySql

- Sử dụng ngôn ngữ Java và hệ quản trị MySql để xây dựng một trang web động.

- Dựa theo website: Hoanghamobile.com

- Website cho phép khách hàng xem danh sách, chi tiết và đặt mua điện thoại trực tuyến.

- Sử dụng ngôn ngữ Java và hệ quản trị MySql để xây dựng một trang web động.

Khảo sát sơ bộ hệ thống

❖Nhằm làm rõ yêu cầu hệ thống.

❖Tiếp cận nghiệp vụ chuyên môn, môi trường hoạt động của hệ thống.

❖Tìm hiểu chức năng, cách thức hoạt động của hệ thống.

❖Thu thập thông tin, sổ sách, mẫu biểu phục vụ cho pha phân tích.

❖Thu thập thông tin nghiệp vụ, các quy trình xử lý.

❖Có 1 vị trí bán hàng: Người bán hàng

Diện tích của chi nhánh khá hạn chế, chỉ đủ để phục vụ từ 5 đến 10 khách vào ban ngày Khi lượng khách tăng cao, khách hàng sẽ phải chờ đợi để được phục vụ mua hàng.

❖Nhân lực: o Nhân viên bán hàng o Nhân viên giám sát

❖Mức độ tự động hóa hiện tại: Nhập và in hóa đơn từ 1 máy tính.

Nhược điểm của việc mua sắm trực tiếp là khách hàng phải đến cửa hàng để mua sản phẩm, điều này có thể gây bất tiện Hơn nữa, khi có đông khách, quá trình thanh toán sẽ bị chậm trễ do phải chờ đợi.

Hệ thống hiện tại cần được phát triển thành một website quản lý hoạt động bán hàng và thống kê thu chi Khách hàng có thể dễ dàng đặt hàng từ bất kỳ đâu chỉ với một chiếc điện thoại di động hoặc máy tính có kết nối internet.

Xác định yêu cầu của hệ thống

1.6.1 Yêu cầu chức năng Đáp ứng những yêu cầu cơ bản của 1 website bán hàng phổ thông:

❖ Cần phân quyền cho các nhóm người dùng.

❖ Giao diện người dùng cần tương thích cho mọi loại màn hình.

❖ Các chức năng tìm kiếm, lọc sản phẩm cần tối ưu nhất có thể nhằm giúp khách hàng dễ dàng tìm kiếm được các sản phẩm muốn mua.

+ Nhóm các nút để chọn loại hàng hóa muốn mua.

+ Nút thêm vào giỏ hàng.

1.6.2 Yêu cầu phi chức năng

❖Giao diện phải sắp xếp dễ sử dụng và phải có tính tương tác với người dùng

❖Thời gian phản hồi nhanh

❖Độ bảo mật thông tin cao

❖Không vi phạm bản quyền thiết kế hoăc phải xin phép, mua bản quyền

❖Hệ thống phải được bảo trì thường xuyên, dễ sử dụng

❖Người sử dụng có thể tìm kiếm từ khóa sản phẩm mình muốn mua

❖Hệ thống phải hỗ trợ nhiều định dạng văn bản hình ảnh tài liệu

Khảo sát chi tiết hệ thống

1.7.1 Hoạt động của hệ thống

Khi khách hàng đặt hàng, hệ thống sẽ chuyển yêu cầu vào hàng chờ để nhân viên xác nhận trạng thái giao hàng Đồng thời, hệ thống tự động tính toán và cung cấp tổng số tiền cần thanh toán cho tất cả sản phẩm đã đặt.

Khi có yêu cầu thống kê doanh số bán hàng thì hệ thống sẽ tổng hợp các hóa đơn và đưa ra kết quả tổng hợp.

Cập nhật thông tin hệ thống

Người quản lý có thể thêm, sửa, xóa thông tin:

1.7.2 Tài liệu thu thập được

❖ Một số mẫu hóa đơn thanh toán thu thập được

CƠ SỞ LÝ THUYẾT

Quy trình phát triển phần mềm

Quy trình của một phần mềm cụ thể được chia thành các giai đoạn như sau:

Nghiên cứu sơ bộ, hay còn gọi là Nghiên cứu tính khả thi, là giai đoạn quan trọng nhằm xác định các yêu cầu cơ bản cho một hệ thống khả thi và mong muốn, bao gồm cả khía cạnh kỹ thuật và xã hội Kết quả của giai đoạn này là Báo cáo kết quả nghiên cứu tính khả thi, và khi hệ thống tương lai được chấp nhận dựa trên báo cáo này, giai đoạn Phân tích sẽ bắt đầu.

- Phân tích yêu cầu (Analysis): Kết quả của giai đoạn phân tích là bản Đặc Tả Yêu Cầu(Requirements)

Bản Đặc Tả Thiết Kế Chi Tiết sẽ được chuyển giao cho các lập trình viên để tiến hành giai đoạn xây dựng phần mềm, đảm bảo hệ thống được thiết kế một cách hiệu quả và chính xác.

Trong quá trình xây dựng phần mềm, thử nghiệm đơn vị là giai đoạn quan trọng, nơi người viết code kiểm tra các phần của chương trình bằng cách sử dụng dữ liệu giả (test/dummy data) theo một kế hoạch thử nghiệm mà họ tự soạn thảo Mục tiêu chính của thử nghiệm này là đảm bảo chương trình hoạt động đúng như mong đợi Thử nghiệm đơn vị, còn được gọi là "Thử hộp trắng" (White Box Testing), có thể được thực hiện độc lập bởi một thành viên khác trong nhóm, người không tham gia viết code để đảm bảo tính khách quan Kế hoạch thử nghiệm vẫn do người viết code chuẩn bị, nhằm duy trì sự nhất quán trong quy trình kiểm tra.

Thử nghiệm hệ thống là giai đoạn quan trọng sau khi các thủ tục riêng lẻ đã được kiểm tra Trong quá trình này, toàn bộ hệ thống sẽ được tích hợp và chạy thử để đảm bảo rằng tất cả các yêu cầu trong Đặc Tả Yêu Cầu cũng như mong đợi của người dùng đều được đáp ứng Dữ liệu thử nghiệm cần được lựa chọn cẩn thận, và kết quả sẽ được phân tích kỹ lưỡng nhằm phát hiện bất kỳ sự sai lệch nào so với mong đợi.

Trong giai đoạn triển khai hệ thống, nhóm phát triển cần đảm bảo rằng hệ thống mới được đưa vào sử dụng hiệu quả cho người dùng Trước khi người dùng bắt đầu, các file dữ liệu cần thiết phải được tạo ra và người dùng cũng cần được huấn luyện để sử dụng hệ thống một cách tối ưu.

Bảo trì và nâng cấp hệ thống là cần thiết để đảm bảo hiệu quả sử dụng, đặc biệt khi môi trường thay đổi Hệ thống có thể trở nên lỗi thời và cần được sửa đổi để đáp ứng nhu cầu mới Mức độ bảo trì và nâng cấp sẽ khác nhau tùy thuộc vào tình trạng và yêu cầu cụ thể của hệ thống.

Phương pháp phân tích thiết kế hướng đối tượng

UML là một ngôn ngữ mạnh mẽ được áp dụng trong nhiều giai đoạn của quy trình phát triển phần mềm, từ thiết kế đến thực hiện và bảo trì Mục tiêu chính của UML là sử dụng các biểu đồ hướng đối tượng để mô tả hệ thống, cho phép nó được áp dụng cho nhiều loại hệ thống khác nhau.

Hệ thống thông tin là công cụ quan trọng giúp lưu trữ, truy xuất và biến đổi thông tin cho người dùng Nó có khả năng xử lý khối lượng lớn dữ liệu với các mối quan hệ phức tạp, được lưu trữ trong các cơ sở dữ liệu quan hệ hoặc hướng đối tượng.

Hệ thống kỹ thuật là những thiết bị chuyên biệt được sử dụng để xử lý và điều khiển trong các lĩnh vực như viễn thông, hệ thống quân sự và quy trình công nghiệp Các thiết bị này thường yêu cầu xử lý giao tiếp đặc biệt, không sử dụng phần mềm chuẩn và hoạt động trong môi trường thời gian thực.

Hệ thống nhúng (Embedded System) được triển khai trên phần cứng tích hợp trong các thiết bị như điện thoại di động và hệ thống điều khiển xe hơi Chúng hoạt động thông qua lập trình mức thấp với khả năng hỗ trợ thời gian thực Thông thường, các hệ thống này không bao gồm các thiết bị ngoại vi như màn hình hoặc ổ đĩa cứng.

Hệ thống phân bố (Distributed System) là một mô hình cho phép truyền dữ liệu giữa nhiều máy tính một cách dễ dàng và hiệu quả Để đảm bảo toàn vẹn dữ liệu, hệ thống này yêu cầu các cơ chế liên lạc đồng bộ Các kỹ thuật đối tượng như CORBA, COM/DCOM và Java Beans/RMI thường được sử dụng để xây dựng các hệ thống phân bố này.

Hệ thống Giao dịch (Business System) bao gồm mục đích hoạt động, tài nguyên như con người và máy tính, cùng với các quy tắc như luật pháp, chiến thuật kinh doanh và cơ chế vận hành Nó đóng vai trò quan trọng trong việc tổ chức và quản lý các công việc liên quan đến hoạt động kinh doanh.

Phần mềm hệ thống, hay còn gọi là System Software, đóng vai trò quan trọng trong việc thiết lập cơ sở hạ tầng kỹ thuật cho các phần mềm khác Nó bao gồm các thành phần như hệ điều hành, cơ sở dữ liệu và giao diện người sử dụng, giúp đảm bảo sự hoạt động hiệu quả và đồng bộ của toàn bộ hệ thống.

UML và các giai đoạn phát triển hệ thống

Trong giai đoạn điều tra sơ bộ, các use case thể hiện yêu cầu của người dùng, với phần mô tả xác định các yêu cầu và diagram minh họa mối quan hệ cùng giao tiếp với hệ thống Giai đoạn phân tích tập trung vào việc trừu tượng hóa và hiểu các cấu trúc trong phạm vi bài toán, sử dụng class diagrams để làm rõ sự tồn tại và mối quan hệ của các thực thể ngoài đời thực, chỉ chú trọng đến những lớp nằm trong phạm vi bài toán.

Kết quả của phần phân tích đã được chuyển đổi thành các giải pháp kỹ thuật cụ thể Các lớp được mô hình hóa một cách chi tiết nhằm cung cấp hạ tầng kỹ thuật, bao gồm giao diện và nền tảng cho cơ sở dữ liệu Từ đó, phần thiết kế tạo ra các đặc tả chi tiết cần thiết cho giai đoạn xây dựng phần mềm.

The design model is transformed into code, with programmers utilizing UML diagrams during the design phase to comprehend issues effectively Testing incorporates these UML diagrams from earlier stages, and there are four distinct methods for system testing.

● Unit testing (class diagrams & class specifications): kiểm tra tổng đơn thể, được dùng để kiểm tra các lớp hay các nhóm đơn thể

Integration testing involves assessing the interaction between various components and layers to ensure they function correctly together This process utilizes integration and collaboration diagrams to visualize and verify the seamless integration of system elements.

● System testing (use-case diagrams): kiềm tra xem hệ thống có đáp ứng được chức năng mà người sử dụng yêu cầu hay không

Kiểm tra chấp nhận là quá trình đánh giá tính chấp nhận của hệ thống, thường do khách hàng thực hiện Hoạt động này diễn ra tương tự như kiểm tra hệ thống, nhằm đảm bảo rằng sản phẩm đáp ứng đầy đủ các yêu cầu và mong đợi của người dùng.

Thiết kế và lập trình front-end

Front End là quy trình sử dụng HTML, CSS và JavaScript để thiết kế và xây dựng giao diện cho trang web hoặc ứng dụng web, giúp người dùng có thể xem và tương tác trực tiếp.

Mục tiêu thiết kế trang web là tạo trải nghiệm người dùng dễ dàng trên nhiều thiết bị khác nhau Điều này đòi hỏi Front End Developer phải cân nhắc đến kích thước và độ phân giải đa dạng của thiết bị, cũng như đảm bảo trang web hiển thị chính xác trên các trình duyệt và hệ điều hành khác nhau.

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 Để thiết kế một trang web hiệu quả, việc thành thạo hai ngôn ngữ này là điều không thể thiếu Đây là những ngôn ngữ đầu tiên mà bạn nên học nếu bạn muốn trở thành một Front End Developer.

JavaScript là ngôn ngữ lập trình phổ biến nhất toàn cầu, đóng vai trò quan trọng trong việc phát triển Front End Nó cho phép tạo ra nhiều tính năng tương tác, giúp người dùng dễ dàng sử dụng website hơn.

Sử dụng thành thạo các Frameworks JavaScript như Angular JS, Backbone, Ember và ReactJS giúp lập trình viên tiết kiệm thời gian, tối ưu hóa quy trình phát triển và tạo ra các tương tác thân thiện với người dùng một cách dễ dàng.

CSS and popular front-end frameworks like Bootstrap are essential for efficient and standardized web design Mastery of this framework is crucial for nearly all front-end developers to enhance their skills and application.

● Kinh nghiệm với CSS Preprocessors

CSS preprocessors enhance the speed and efficiency of writing CSS by adding functionality that makes the code more scalable and manageable They process the code before it is published on a website, converting it into cross-browser compatible and well-formatted CSS According to actual job listings, SASS and LESS are the most in-demand preprocessors in the industry.

● Thiết kế Responsive và Thiết kế Mobile

Hiện nay, tỷ lệ truy cập internet từ thiết bị di động vượt xa máy tính để bàn, khiến kỹ năng thiết kế mobile trở nên quan trọng trong mắt 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.

Giới thiệu về ngôn ngữ JAVA

Java là một ngôn ngữ lập lập trình, được phát triển bởi Sun Microsystem vào năm

1995, là ngôn ngữ kế thừa trực tiếp từ C/C++ và là một ngôn ngữ lập trình hướng đối tượng.

Ngôn ngữ lập trình Java được đặt tên theo hòn đảo Java ở Indonesia, nổi tiếng với loại cà phê Peet, một thức uống ưa thích của các kỹ sư Sun Ban đầu, ngôn ngữ này được gọi là "Oak" (Cây sồi) vào năm 1991, nhưng do tên này đã được đăng ký nhãn hiệu, các nhà phát triển buộc phải tìm một tên mới Từ đó, Java ra đời và trở thành tên gọi chính thức của ngôn ngữ lập trình này.

● Phát triển ứng dụng cho các thiết bị điện tử thông minh, các ứng dụng cho doanh nghiệp với quy mô lớn.

● Tạo các trang web có nội dung động (web applet), nâng cao chức năng của server.

● Phát triển nhiều loại ứng dụng khác nhau: Cơ sở dữ liệu, mạng, Internet, viễn thông, giải trí,

2.4.3 Những đặc điểm cơ bản của JAVA

Tiêu chí hàng đầu của Ngôn ngữ Lập trình Java là "Write Once, Run

Java cho phép lập trình viên viết mã một lần và chạy trên nhiều hệ điều hành khác nhau, như Windows, Linux và Mac OS, nhờ vào tính năng "Viết một lần, chạy mọi nơi" Điều này giúp tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng.

Với đặc điểm nổi bật đó, Java có những đặc điểm cơ bản như sau:

Java là một ngôn ngữ lập trình đơn giản và quen thuộc, kế thừa trực tiếp từ C/C++ Mặc dù dựa trên nền tảng C++, Sun đã loại bỏ những tính năng phức tạp nhất của C++ để giúp Java trở nên dễ sử dụng hơn.

● Hướng đối tượng và quen thuộc.

● Mạnh mẽ (thể hiện ở cơ chế tự động thu gom rác - Garbage Collection) và an toàn.

● Kiến trúc trung lập, độc lập nền tảng và có tính khả chuyển (Portability).

● Máy ảo (biên dịch và thông dịch).

Java hỗ trợ tính năng đa nhiệm, cho phép xây dựng ứng dụng với nhiều quá trình diễn ra song song Tính năng này giúp lập trình viên phát triển phần mềm hiệu quả hơn, cải thiện khả năng tương tác và đáp ứng trong thời gian thực.

2.4.4 Tại sao lại chọn JAVA cho đề tài này?

● Khả năng bảo mật cao

Java được xem là ngôn ngữ lập trình có độ bảo mật vượt trội so với nhiều ngôn ngữ khác Việc sử dụng mã nguồn Java giúp bạn yên tâm hơn về vấn đề bảo mật và giảm thiểu nguy cơ bị hack thông tin trên website.

Java nổi bật với khả năng tạo ra các website hoạt động mạnh mẽ trên mọi nền tảng, điều này làm cho nó trở thành một ngôn ngữ lập trình được ưa chuộng Không phải ngôn ngữ nào cũng có thể đảm bảo tính linh hoạt và hiệu suất cao như Java.

Mọi chương trình cần được biên dịch thành mã máy để có thể hoạt động, tuy nhiên, mã máy này khác nhau tùy thuộc vào kiến trúc CPU của từng loại máy tính.

Trước đây, các chương trình sau khi biên dịch chỉ có thể chạy trên một kiến trúc CPU cụ thể Tuy nhiên, sự ra đời của Java đã giải quyết vấn đề này Mỗi chương trình viết bằng Java được biên dịch thành mã máy ảo Java, và máy ảo này sẽ chuyển đổi chương trình sang mã máy tương ứng, cho phép chạy trên bất kỳ hệ điều hành và kiến trúc CPU nào.

Ngôn ngữ lập trình Java kết hợp cả hai phương thức biên dịch và thông dịch Chương trình nguồn Java, với đuôi tệp *.java, được biên dịch thành tệp *.class trước khi được thông dịch thành mã máy.

● Độc lập nền, khả năng di chuyển

Java cho phép các chương trình chạy trên nhiều hệ điều hành và máy tính khác nhau, miễn là có cài đặt Java Virtual Machine Điều này mang lại lợi thế lớn cho Java với nguyên tắc "Viết một lần, chạy mọi nơi" (Write Once, Run Anywhere).

Hướng đối tượng trong ngôn ngữ lập trình Java khá gióng với C++, tuy nhiên lại là ngôn ngữ lập trình hướng đối tượng hoàn toàn.

● Đa nhiệm – đa luồng (MultiTasking - Multithreading)

Ngôn ngữ lập trình này cho phép lập trình đa nhiệm và đa luồng, giúp chạy song song nhiều tiến trình và tiểu trình trong cùng một thời điểm, đồng thời tạo ra sự tương tác giữa chúng.

● Hỗ trợ mạnh cho việc phát triển ứng dụng

Java nổi bật với việc cung cấp đa dạng công cụ và thư viện lập trình, hỗ trợ hiệu quả cho việc phát triển nhiều loại ứng dụng khác nhau.

- J2SE (Java 2 Standard Edition) hỗ trợ phát triển những ứng dụng đơn, ứng dụng client-server.

- J2EE (Java 2 Enterprise Edition) hỗ trợ phát triển các ứng dụng thương mại.

- J2ME (Java 2 Micro Edition) hỗ trợ phát triển các ứng dụng trên các thiết bị di động, không dây,

Sự ra đời của ngôn ngữ lập trình Java đã tạo ra một cuộc cách mạng trong công nghệ thông tin, mở đường cho việc phát triển ứng dụng Java và các thế hệ máy tính với vi mạch hỗ trợ Java Việc sử dụng và làm quen với công nghệ Java sẽ giúp người dùng tiếp cận những tiến bộ mới trong lĩnh vực này.

Web Service

Dịch vụ web là một tập hợp các giao thức và tiêu chuẩn mở, cho phép trao đổi dữ liệu hiệu quả giữa các ứng dụng hoặc hệ thống khác nhau.

Các ứng dụng phần mềm, được phát triển bằng nhiều ngôn ngữ lập trình và nền tảng khác nhau, có thể sử dụng web service để trao đổi dữ liệu tương tự như cách các tiến trình giao tiếp trên một máy tính Ưu điểm của web service bao gồm khả năng tương tác linh hoạt và hiệu quả giữa các hệ thống khác nhau.

- Có sẵn trên internet hoặc mạng nội bộ,

- Sử dụng hệ thống XML messaging tiêu chuẩn,

- Không bị trói buộc vào một hệ điều hành hay ngôn ngữ lập trình nào,

- Có thể tự diễn tả chính nó thông qua một cấu trúc XML đơn giản,

- Có thể được tìm kiếm bằng những phương thức đơn giản (simple mechanism).

Giới thiệu về framework SpringBoot

Spring Boot là một module của Spring Framework, cung cấp tính năng RAD (Rapid Application Development) – Phát triển ứng dụng nhanh.

Spring Boot được dùng để tạo các ứng dụng độc lập dựa trên Spring.

Spring Boot không yêu cầu cấu hình XML

Nó là một chuẩn cho cấu hình thiết kế phần mềm, tăng cao năng suất cho developer.

Spring Boot mang lại nhiều ưu điểm nổi bật, bao gồm việc tích hợp các tính năng của Spring Framework, cho phép tạo ứng dụng độc lập có thể chạy bằng lệnh java -jar, bao gồm cả ứng dụng web Nó hỗ trợ nhúng trực tiếp các server như Tomcat và Jetty, giúp loại bỏ nhu cầu triển khai file WAR Hệ thống cấu hình của Spring Boot rất linh hoạt, tự động hóa nhiều quy trình để giảm thiểu thời gian viết code và tăng năng suất Ngoài ra, Spring Boot không yêu cầu cấu hình XML, cung cấp nhiều plugin hữu ích và chuẩn hóa cho các kiến trúc Microservices, hỗ trợ đám mây và giảm thiểu công việc setup cũng như cấu hình.

Giới thiệu về Angular JS

Angular is a JavaScript framework developed by Google for creating Single Page Applications (SPAs) using JavaScript, HTML, and TypeScript It offers integrated features such as animations, HTTP services, auto-complete, navigation, toolbars, and menus Code written in TypeScript is compiled into JavaScript and rendered in the browser To learn Angular, it is essential to have a foundational understanding of HTML, CSS, JavaScript, TypeScript, and the Document Object Model (DOM).

Các phiên bản của Angular: o Angular js: Phiên bản đầu tiền của angular là AngularJS được bắt đầu từ năm

AngularJS, được ra mắt vào ngày 20 tháng 10 năm 2010, là một dự án do lập trình viên Misko Hevery tại Google phát triển với mục đích giải trí Ban đầu, AngularJS được xây dựng theo mô hình MVC (Model-View-Controller).

▪ Model là thành phần trung tâm thể hiện hành vi của ứng dụng và quản lý dữ liệu.

▪ View được tạo ra dựa trên thông tin của Model.

▪ Controller đóng vai trò trung gian giữa Model và View và để xử lý logic. o Angular 2:

Vào tháng 3 năm 2015, Angular 2 ra đời để thay thế Angular JS, mang đến các khái niệm mới nhằm tối ưu hóa quá trình phát triển Angular 2 hoàn toàn khác biệt với Angular JS, thay thế Controllers và $scope bằng components và directives, trong đó components kết hợp với templates để tạo nên view và xử lý logic Angular 2 được viết hoàn toàn bằng TypeScript, nhanh hơn Angular JS, hỗ trợ đa nền tảng và trình duyệt, với cấu trúc code đơn giản và dễ sử dụng hơn.

Angular 5, ra mắt vào ngày 1 tháng 11 năm 2017, là phiên bản nâng cấp từ Angular 4, tập trung vào việc cải thiện tốc độ và giảm kích thước tệp Phiên bản này đã giảm kích thước tệp được đóng gói xuống 60% so với trước đó, từ đó đẩy nhanh quá trình phát triển ứng dụng So với Angular 4, Angular 5 mang đến nhiều tính năng mới, giúp tối ưu hóa hiệu suất và trải nghiệm lập trình.

▪ Sử dụng HTTPClient thay vì sử dụng HTTP: bởi vì nó nhanh, an toàn và hiệu quả hơn.

▪ Với phiên bản Angular 5 mặc định sử dụng RxJs 5.5

▪ Multiple export aliases: Một component có thể được xuất bằng nhiều bí danh (aliases) để giảm bớt quá trình di chuyển.

▪ Internationalized Pipes for Number, Date, and Currency: Các pipe mới được giới thiệu để tiêu chuẩn hóa tốt hơn.

Optimize your production build by utilizing the built-in build optimizer tool within the CLI This tool enhances tree-shaking and eliminates redundant code, ensuring a more efficient application.

Improve compilation speed by utilizing TypeScript transforms; now, when building, use the command "ng serve aot." AOT enhances page load performance and is essential for deploying apps in Angular 6 production.

The latest update to the command line interface (CLI) introduces new commands, including "ng-update" for upgrading to the current version and "ng-add" for integrating additional features, enhancing the application into a progressive web app.

Angular Element cho phép các component của Angular được triển khai dưới dạng component web, giúp dễ dàng sử dụng chúng trong bất kỳ trang HTML nào.

▪ Multiple Validators: cho phép nhiều Validators được áp dụng trên form builder.

▪ Tree-shakeable providers: giúp loại bỏ mã code chết.

▪ Sử dụng RxJS 6 với syntax thay đổi. o Angular 7:

▪ Được phát hành vào 18 tháng 10 năm 2018 với những thay đổi như:

● ScrollingModule: Để scroll load dữ liệu.

● Drag and Drop: Chúng ta có thể dễ dàng thêm tính năng kéo và thả vào một mục

● Angular 7.0 đã cập nhật RxJS 6.3 o Angular 8:

▪ Ra mắt 28 tháng 5 năm 2019 với CLI workflow improvements, Dynamic imports for lazy routes …. o Angular 9:

Angular 9, ra mắt vào ngày 6 tháng 2 năm 2020, đã chuyển tất cả các ứng dụng sang sử dụng trình biên dịch Ivy và thời gian chạy mặc định Phiên bản này cũng được cập nhật để tương thích với TypeScript 3.6 và 3.7.

Esclipse là gì?

Eclipse là một môi trường phát triển tích hợp (IDE) nổi bật dành cho lập trình Java, nhưng cũng hỗ trợ nhiều ngôn ngữ khác như C/C++ và PHP Tuy nhiên, Eclipse thể hiện sức mạnh vượt trội nhất khi sử dụng cho Java.

Có nhiều IDE khác nhau cho lập trình Java, như Netbeans và Intellij IDEA Netbeans thường được sử dụng trong giảng dạy, trong khi Intellij IDEA, mặc dù mới hơn, nhưng mạnh mẽ và hỗ trợ nhiều tính năng, lại có thể khó sử dụng cho người mới Trong bài viết này, tôi sẽ giới thiệu cách cài đặt Eclipse, một IDE phổ biến được nhiều công ty phần mềm tin dùng.

Eclipse là phần mềm miễn phí, với nhiều plugin tiện ích (một số plugin phải trả phí mới được dùng)

Visual Studio Code

Hình 2.9 Logo Visual Studio Code

Visual Studio Code là một trình soạn thảo mã nguồn miễn phí do Microsoft phát triển, hỗ trợ cho lập trình viên trên nhiều hệ điều hành phổ biến như Windows, Linux và macOS Đây là sự kết hợp hoàn hảo giữa môi trường phát triển tích hợp (IDE) và trình biên tập mã, mang đến trải nghiệm lập trình tối ưu.

Visual Studio Code không chỉ đơn thuần là công cụ soạn thảo và chỉnh sửa code, mà còn cung cấp nhiều tính năng hữu ích như đổi theme, phím tắt tiện dụng, chức năng debug tích hợp, hỗ trợ Git, syntax highlighting giúp quá trình gõ code dễ dàng hơn, và phần gợi ý code thông minh.

Postman

Postman là một công cụ hữu ích cho lập trình viên, cho phép làm việc với các API mà không cần viết mã, giúp gọi Rest API một cách đơn giản Công cụ này hỗ trợ tất cả các phương thức HTTP và lưu lại lịch sử các request, thuận tiện cho việc sử dụng lại Giao diện của Postman rất đơn giản, cho phép gửi HTTP Request với các phương thức như GET, POST, PUT và DELETE Người dùng có thể gửi dữ liệu dưới dạng form (key-value), text, hoặc JSON, và nhận kết quả trả về dưới dạng text, hình ảnh, XML hoặc JSON Bên cạnh đó, Postman còn hỗ trợ cài đặt các biến môi trường như URL gốc và API key, giúp kiểm tra trên nhiều môi trường dễ dàng hơn.

MySQL

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới, được ưa chuộng bởi các nhà phát triển nhờ vào tốc độ cao, tính ổn định và dễ sử dụng Hệ thống này có khả năng hoạt động trên nhiều hệ điều hành khác nhau và cung cấp nhiều hàm tiện ích mạnh mẽ Với tính bảo mật cao, MySQL rất phù hợp cho các ứng dụng truy cập cơ sở dữ liệu qua internet Người dùng có thể tải MySQL miễn phí từ trang chủ, với nhiều phiên bản tương thích cho các hệ điều hành như Windows, Linux, Mac OS X, và nhiều hệ điều hành khác.

THIẾT KẾ CƠ SỞ DỮ LIỆU

Mô hình hóa dữ liệu

3.1.1 Biểu đồ thực thể liên kết

Hình 3 1.1.1 Biểu đồ thực thể liên kết

3.1.2 Mô tả vắn tắt các thực thể

● product: Lưu thông tin chi tiết về sản phẩm của cửa hàng.

● bill: Lưu thông tin chung của đơn hang.

● bill_detail: Lưu thông tin chi tiết về của đơn hang.

● users: Lưu thông tin của người dùng bao gồm cả thông tin đăng nhập trang bán hang.

● admin: Lưu thông tin về người quản trị bao gồm cả thông tin đăng nhập trang quản trị.

● brand: Lưu thông tin về danh mục thương hiệu sản phẩm.

● category: Lưu thông tin về danh mục loại sản phẩm.

● config: Lưu thông tin cấu hình bao gồm cả email của cửa hang.

● email_job: Lưu thông tin người dùng sau khi đặt hàng cũng như nội dung để gửi đến người dùng.

● contact: Lưu thông tin liên hệ của người dùng mỗi khi người dùng có yêu cầu. 3.1.3 Các quy tắc nghiệp vụ

● Mỗi danh mục có thể có 0,1 hoặc nhiều sản phẩm Mỗi sản phẩm phải nằm trong 1 danh mục.

● Mỗi thương hiệu có thể có 0,1 hoặc nhiều sản phẩm Mỗi sản phẩm phải nằm trong 1 thương hiệu.

● Mỗi sản phẩm có thể có trong 0, 1 hoặc nhiều giỏ hàng Mỗi giỏ hàng có thể có

● Mỗi khách hàng có 1 giỏ hàng, mỗi giỏ hàng phải thuộc 1 khách hàng.

● Mỗi khách hàng có thể lập 0, 1 hoặc nhiều đơn hàng Mỗi đơn hàng cần được lập bởi một khách hàng.

● Mỗi khách hàng có thể có một hoặc nhiều phản hồi, mỗi phản hồi phải do 1 khách hàng gửi.

Thiết kế bảng

Hình 3.2.1 Mô tả thông tin của bảng Users

Hình 3.2.2 Mô tả thông tin của bảng Admin

Hình 3.2.3 Mô tả thông tin của bảng Product

Hình 3.2.4 Mô tả thông tin của bảng Category

Hình 3.2.5 Mô tả thông tin của bảng Brand

Hình 3.2.6 Mô tả thông tin của bảng Bill

Hình 3.2.7 Mô tả thông tin của bảng Bill_detail

Hình 3.2.8 Mô tả thông tin của bảng Email_job

Hình 3.2.9 Mô tả thông tin của bảng Config

Hình 3.2.10 Mô tả thông tin của bảng Contact

Quan hệ giữa các bảng trong hệ quản trị CSDL

Hình 3.3 Quan hệ giữa các bảng trong csdl

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Mô hình hóa chức năng

4.1.1 Biểu đồ use case tổng quát

Hình 4.1.1 Biểu đồ usecase tổng quát

4.1.2 Mô tả chi tiết các use case

4.1.2.1Mô tả use case Đăng nhập

Tên usecase Đăng nhập Code UC01

Mụ tả Cho phộp actor đăng nhõ ơp vào hờ ơ thống

Actor Người dùng Trigger Actor bấm nút login

Post condition Chuyển tới trang chính

Main Flow: Login thành công

1 Actor nhõ ơp tờn đăng nhõ ơp/mõ ơt khẩu và click vào button Login trờn trang đăng nhõ ơp

2 Kiểm tra tờn đăng nhõ ơp/mõ ơt khẩu là chính xác sau đó chuyển tới trang chính

MS01 “Tên Đăng Nhập và/hoặc Mật Khẩu của bạn không chính xác Vui lòng kiểm tra và thử lại.”

Message thụng bỏo khi actor nhõ ơp sai tờn đăng nhõ ơp/mõ ơt khẩu

4.1.2.2Mô tả use case Đăng ký

Name Đăng ký tài khoản Code UC02

Description Cho phép actor đăng ký tài khoản để đăng nhập vào hệ thống

Actor Người dùng Trigger Load form đăng ký tài khoản

Post condition View thông tin chi tiết của sản phẩm

Main Flow: Đăng ký tài khoản thành công

1 Actor click vào icon user trên trang chính

2 Actor click vào nút Sign up

3 Hiển thị toàn bộ form đăng ký tài khoản

4.1.2.3Mô tả use case Xem danh mục sản phẩm

Name Xem danh mục Code UC03

Description Cho phộp actor view toàn bụ ơ danh mục sản phẩm trong hờ ơ thống

Actor Người dùng Trigger Load trang chính

Post condition View danh sỏch toàn bụ ơ danh mục trong hờ ơ thống

Main Flow: Hiển thị chính xác danh mục của sản phẩm

1 Actor click vào sub menu item ở bên góc phải màn hình

2 Load thụng tin toàn bụ ơ danh mục của sản phẩm

4.1.2.4Mô tả use case Xem danh sách sản phẩm

Name Xem danh sách sản phẩm

Description Cho phộp actor view toàn bụ ơ danh sỏch sản phẩm trong hờ ơ thống

Actor Người dùng Trigger Load trang chính

Post condition View danh sỏch toàn bộ sản phẩm trong hờ ơ thống

Main Flow: Hiển thị chính xác các sản phẩm

1 Load thụng tin toàn bụ ơ danh mục của sản phẩm

4.1.2.5Mô tả use case Giỏ hàng

Name Xem thông tin giỏ hàng

Description Cho phép actor xem thông tin, thêm sửa xóa sản phẩm trong giỏ hàng

Actor Người dùng Trigger Load trang giỏ hàng

Pre-condition Actor đã thêm sản phẩm vào giỏ hàng

Post condition Hiển thị danh sách sản phẩm trong giỏ hàng

Main Flow: Hiển thị chính xác thông tin chi tiết của giỏ hàng

1 Actor click vào giỏ hàng

2 Hiển thị toàn bộ thông tin về giỏ hàng của khách hàng

4.1.2.6Mô tả use case Thanh toán

Name Thanh toán Code UC06

Description Cho phép actor thanh toán sản phẩm trong giỏ hàng

Actor Người dùng Trigger Load trang thanh toán

Pre-condition Actor đã thêm sản phẩm vào giỏ hàng

Post condition Thanh toán thành công

Main Flow: Thanh toán thành công

1 Actor click vào nút thanh toán

2 Hiển thị toàn bộ thông tin cần điền để hoàn thành thanh toán

4.1.2.7Mô tả use case Xem thông tin chi tiết của sản phẩm

Name Xem thông tin chi tiết sản phẩm

Description Cho phép actor xem thông tin chi tiết của giỏ hàng

Actor Người dùng Trigger Load trang thông tin chi tiết

Post condition View thông tin chi tiết của sản phẩm

Main Flow: Hiển thị chính xác thông tin chi tiết sản phẩm

1 Actor click vào một sản phẩm trên trang chủ

2 Hiển thị toàn bộ thông tin chi tiết về sản phẩm phẩm

4.1.2.8Mô tả use case Quản lý tài khoản

Thông tin chi tiết của user

Name Hiển thị thông tin chi tiết của user

Description Cho phộp actor view chi tiết mụ ơt user

Actor Admin Trigger Actor click link

Người dựng của mụ ơt user trên gridview

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống.

Post condition View chi tiết user thành công

Main Flow: Hiển thị thông tin chi tiết thành công

1 Từ màn hình quản lý thông tin người dùng actor click vào link người dùng

2 Select thông tin chi tiết user được chọn.

3 Load thông tin user lên trang Thông tin người và hiển thị

Name Thêm mới user Code UC09

Description Cho phộp actor thờm mới mụ ơt user

Actor Admin Trigger Actor click button [Thêm mới] trên màn hình Thêm mới người dùng

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Thêm mới user thành công.

Main Flow: Thêm mới user thành công

1 Từ màn hình bất kỳ, actor lựa chọn left menu Quản lý ngư‘i d’ng/Thêm mới

2 Load trang Thêm mới thông tin người dùng

3 Nhõ ơp vào cỏc thụng tin được yêu cầu.

4 Validation cỏc thụng tin nhõ ơp vào.

5 Sửa lại những thông tin chưa đỳng (nếu hờ ơ thụng check validation chưa đúng).

6 Lưu thông tin người dùng mới vào CSDL, thông báo thành công và chuyển sang trang Quản lý thông tin người dùng

Sửa thông tin của user

Name Sửa user Code UC10

Description Cho phộp actor cõ ơp nhõ ơt thụng tin mụ ơt user

Actor Admin Trigger Actor kích nút [Câ ”p nhâ ”t]

Pre-condition Actor đăng nhõ ơp vào hờ ơ thống

Post condition Sửa user thành công.

Main Flow: Sửa user thành công.

1 Từ màn hình quản lý thông tin người dùng, actor click vào link Câ p nhâ t

2 Load thông tin user lên trang Thông tin người dùng và hiển thị

3 Cõ ơp nhõ ơt những thụng tin cần thiết và ấn button [Câ ”t nhâ ”t]

3 Validation cỏc thụng tin nhõ ơp vào.

4 Sửa lại cỏc thụng tin nhõ ơp vào nếu validation chưa đúng

5 Update thông tin vào user vào CSDL, thông báo thành công và chuyển về màn hình Quản lý thông tin người dùng

Name Delete user Code UC11

Description Cho phộp actor xúa mụ ơt user

Actor Admin Trigger Actor click button [Delete]

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Xóa user thành công

Main Flow: hiển thị danh sách user

1 Từ màn hình view Thông tin người dùng, click button

2 Xóa thông tin người dùng khỏi CSDL, thông báo thành công vào chuyển về trang Quản lý thông tin người dùng

4.1.2.9Mô tả use case Quản lý sản phẩm

Thông tin chi tiết của sản phẩm

Name Hiển thị thông tin chi tiết của sản phẩm

Description Cho phộp actor view chi tiết mụ ơt sản phẩm

Actor Admin Trigger Actor click link Sản phẩm

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống.

Post condition Hiển thị thông tin chi tiết sản phẩm thành công

Main Flow: Hiển thị thông tin chi tiết thành công

1 Từ màn hình trang chủ actor kích vào link Sản phẩm

2 Load thông tin sản phẩm lên trang quản lý sản phẩm

Name Thêm mới sản Code UC13 phẩm

Description Cho phộp actor thờm mới mụ ơt sản phẩm

Actor Admin Trigger Actor click button [Thêm mới] trên màn hình Thêm mới sản phẩm

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Thêm mới sản phẩm thành công.

Main Flow: Thêm mới sản phẩm thành công

1 Từ màn hình bất kỳ, actor lựa chọn left menu Sản phẩm/Thêm mới

2 Load trang Thêm mới thông tin sản phẩm

3 Nhõ ơp vào cỏc thụng tin được yêu cầu.

4 Validation cỏc thụng tin nhõ ơp vào.

5 Sửa lại những thông tin chưa đỳng (nếu hờ thụng checkơ validation chưa đúng).

6 Lưu thông tin sản phẩm mới vào CSDL, thông báo thành công và chuyển sang trang Quản lý sản phẩm

Sửa thông tin của sản phẩm

Name Sửa sản phẩm Code UC14

Description Cho phộp actor cõ ơp nhõ ơt thụng tin mụ ơt sản phẩm

Actor Admin Trigger Actor kích nút [Câ ”p nhâ ”t]

Pre-condition Actor đăng nhõ ơp vào hờ ơ thống

Post condition Sửa sản phẩm thành công.

Main Flow: Sửa sản phẩm thành công.

1 Từ màn hình quản lý sản phẩm

, actor click vào link Câ p nhâ t

2 Load thông tin sản phẩm lên trang Thông tin người dùng và hiển thị

3 Cõ ơp nhõ ơt những thụng tin cần thiết và ấn button [Câ ”t nhâ ”t]

3 Validation cỏc thụng tin nhõ ơp vào.

4 Sửa lại cỏc thụng tin nhõ ơp vào nếu validation chưa đúng

5 Update thông tin vào sản phẩm vào CSDL, thông báo thành công và chuyển về màn hình Quản lý sản phẩm

Name Delete sản phẩm Code UC15

Description Cho phộp actor xúa mụ ơt sản phẩm

Actor Admin Trigger Actor click button [Delete]

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Xóa sản phẩm thành công

Main Flow: hiển thị danh sách sản phẩm

1 Từ màn hình view Thông tin sản phẩm, click button

2 Xóa thông tin sản phẩm khỏi CSDL, thông báo thành công vào chuyển về trang Quản lý sản phẩm

4.1.2.10 Mô tả use case Quản lý loại sản phẩm

Thêm mới loại sản phẩm

Name Thêm mới loại sản phẩm

Description Cho phộp actor thờm mới mụ ơt loại sản phẩm

Actor Admin Trigger Actor click button [Thêm mới] trên màn hình Thêm mới loại sản phẩm

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Thêm mới loại sản phẩm thành công.

Main Flow: Thêm mới loại sản phẩm thành công

1 Từ màn hình bất kỳ, actor lựa chọn left menu Loại sản phẩm /Thêm mới

2 Load trang Thêm mới thông tin loại sản phẩm

3 Nhõ ơp vào cỏc thụng tin được yêu cầu.

4 Validation cỏc thụng tin nhõ ơp vào.

5 Sửa lại những thông tin chưa đỳng (nếu hờ thụng checkơ validation chưa đúng).

6 Lưu thông tin loại sản phẩm mới vào CSDL, thông báo thành công và chuyển sang trang Quản lý loại sản phẩm

Sửa thông tin của sản phẩm

Name Sửa loại sản phẩm Code UC17

Description Cho phộp actor cõ ơp nhõ ơt thụng tin mụ ơt loại sản phẩm

Actor Admin Trigger Actor kích nút [Câ ”p nhâ ”t]

Pre-condition Actor đăng nhõ ơp vào hờ ơ thống

Post condition Sửa loại sản phẩm thành công.

Main Flow: Sửa loại sản phẩm thành công.

1 Từ màn hình quản lý loại sản phẩm, actor click vào link Câ p nhâ t

2 Load thông tin loại sản phẩm lên trang Thông tin người dùng và hiển thị

3 Cõ ơp nhõ ơt những thụng tin cần thiết và ấn button [Câ ”t nhâ ”t]

3 Validation cỏc thụng tin nhõ ơp vào.

4 Sửa lại cỏc thụng tin nhõ ơp vào nếu validation chưa đúng

5 Update thông tin loại sản phẩm vào CSDL, thông báo thành công và chuyển về màn hình Quản lý loại sản phẩm

Name Delete loại sản phẩm Code UC18

Description Cho phộp actor xúa mụ ơt loại sản phẩm

Actor Admin Trigger Actor click button [Delete]

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Xóa loại sản phẩm thành công

Main Flow: hiển thị danh sách sản phẩm

1 Từ màn hình view Thông tin loại sản phẩm, click button

2 Xóa thông tin loại sản phẩm khỏiCSDL, thông báo thành công vào chuyển về trang Quản lý loại sản phẩm

4.1.2.11 Mô tả use case Quản lý thương hiệu

Name Thêm mới thương hiệu

Description Cho phộp actor thờm mới mụ ơt thương hiệu

Actor Admin Trigger Actor click button [Thêm mới] trên màn hình Thêm mới thương hiệu

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Thêm mới thương hiệu thành công.

Main Flow: Thêm mới thương hiệu thành công

1 Từ màn hình bất kỳ, actor lựa chọn left menu Thương hiệu /Thêm mới

2 Load trang Thêm mới thông tin thương hiệu

3 Nhõ ơp vào cỏc thụng tin được yêu cầu.

4 Validation cỏc thụng tin nhõ ơp vào.

5 Sửa lại những thông tin chưa đỳng (nếu hờ thụng checkơ validation chưa đúng).

6 Lưu thông tin thương hiệu mới vàoCSDL, thông báo thành công và chuyển sang trang Quản lý thương hiệu.

Sửa thông tin của sản phẩm

Name Sửa thương hiệu Code UC20

Description Cho phộp actor cõ ơp nhõ ơt thụng tin mụ ơt thương hiệu

Actor Admin Trigger Actor kích nút [Câ ”p nhâ ”t]

Pre-condition Actor đăng nhõ ơp vào hờ ơ thống

Post condition Sửa thương hiệu thành công.

Main Flow: Sửa thương hiệu thành công.

1 Từ màn hình quản lý thương hiệu, actor click vào link Câ p nhâ t

2 Load thông tin thương hiệu lên trang Thông tin người dùng và hiển thị

3 Cõ ơp nhõ ơt những thụng tin cần thiết và ấn button [Câ ”t nhâ ”t]

3 Validation cỏc thụng tin nhõ ơp vào.

4 Sửa lại cỏc thụng tin nhõ ơp vào nếu validation chưa đúng

5 Update thông tin thương hiệu vào CSDL, thông báo thành công và chuyển về màn hình Quản lý thương hiệu

Name Delete thương hiệu Code UC21

Description Cho phộp actor xúa mụ ơt thương hiệu

Actor Admin Trigger Actor click button [Delete]

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Xóa thương hiệu thành công

Main Flow: hiển thị danh sách thương hiệu

1 Từ màn hình view Thông tin thương hiệu, click button

2 Xóa thông tin thương hiệu khỏi CSDL, thông báo thành công vào chuyển về trang Quản lý thương hiệu

4.1.2.12 Mô tả use case Quản lý hóa đơn

Cập nhật trạng thái hóa đơn

Name Cập nhật trạng thái hóa đơn

Description Cho phép actor cập nhật trạng thái hóa đơn

Actor Admin Trigger Actor kích vào combobox

[Trạng thái] và chọn Pre-condition Actor đăng nhõ ơp vào hờ ơ thống

Post condition Cập nhật trạng thái hóa đơn thành công.

Main Flow: Cập nhật trạng thái hóa đơn thành công.

1 Từ màn hình quản lý hóa đơn, actor kích vào combobox

2 Load thông tin các trạng thái và hiển thị

3 Chọn trạng thái muốn cập nhật

4 Update thông tin trạng thái của hóa đơn và lưu vào database

Name Hủy đơn hàng Code UC23

Description Cho phép actor hủy một đơn hàng

Actor Admin Trigger Actor click button [Hủy]

Pre-condition Actor đó đăng nhõ ơp vào hờ ơ thống

Post condition Xóa thương hiệu thành công

Main Flow: hiển thị danh sách thương hiệu

1 Từ màn hình view Thông tin thương hiệu, click button

2 Thay đổi trạng thái đơn hàng, lưu vàoCSDL và thông báo thành công và chuyển về trang Quản lý hóa đơn

Phân tích Use case

4.2.1 Biểu đồ lớp phân tích

Hình 4.2.2.1 Biểu đồ lớp phân tích use case Đăng ký

Hình 4.2.2.2 Biểu đồ lớp phân tích use case Đăng ký

4.2.1.3Use case Xem danh sách sản phẩm

Hình 4.2.1.3 Biểu đồ lớp phân tích use case Xem danh sách sản phẩm

4.2.1.4Use case Xem danh mục sản phẩm

Hình 4.2.1.4 Biểu đồ lớp phân tích use case Xem danh mục sản phẩm

Hình 4.2.1.5 Biểu đồ lớp phân tích use case Thanh toán

4.2.1.6Use case Quản lý tài khoản

Hình 4.2.1.6 Biểu đồ lớp phân tích use case Quản lý tài khoản

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

Hình 4.2.1.7 Biểu đồ lớp phân tích use case Quản lý sản phẩm

Hình 4.2.2.1 Biểu đồ trình tự use case Đăng nhập

Hình 4.2.2.2 Biểu đồ trình tự use case Đăng ký

4.2.2.3Use case Xem danh sách sản phẩm

Hình 4.2.2.3 Biểu đồ trình tự use case Xem danh sách sản phẩm

4.2.2.4Use case Xem danh mục sản phẩm

Hình 4.2.2.4 Biểu đồ trình tự use case Xem danh mục sản phẩm

Hình 4.2.2.5 Biểu đồ trình tự use case Thanh toán

4.2.2.6Use case Quản lý tài khoản

Hình 4.2.2.6 Biểu đồ trình tự use case Quản lý tài khoản

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

Hình 4.2.2.7 Biểu đồ trình tự use case Quản lý sản phẩm

Thiết kế giao diện

❖ Màn hình chi tiết sản phẩm

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

❖ Màn hình quản lý thể loại

❖ Màn hình quản lý thương hiệu

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

❖ Màn hình quản lý hóa đơn

4.3.2 Biểu đồ lớp màn hình

Hình 4.3.2.1 Biểu đồ lớp của use case Đăng nhập

Hình 4.3.2.2 Biểu đồ lớp của use case Đăng ký

4.3.2.3Use case Xem danh sách sản phẩm

Hình 4.3.2.3 Biểu đồ lớp của use case Xem danh sách sản phẩm

4.3.2.4Use case Xem danh mục sản phẩm

Hình 4.3.2.4 Biểu đồ lớp của use case Xem danh mục sản phẩm

Hình 4.3.2.5 Biểu đồ lớp của use case Giỏ hàng

Hình 4.3.2.6 Biểu đồ lớp của use case Thanh toán

4.3.2.7Use case Quản lý ngư‘i d’ng

Hình 4.3.2.7 Biểu đồ lớp của use case Quản lý người dùng

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

Hình 4.3.2.8 Biểu đồ lớp của use case Quản lý sản phẩm

4.3.2.9Use case Quản lý danh mục sản phẩm

Hình 4.3.2.9 Biểu đồ lớp của use case Quản lý danh mục sản phẩm

TRIỂN KHAI WEBSITE

Triển khai các chức năng cho phân hệ người dùng

Để phát triển các chức năng của trang người dùng theo thiết kế đã nêu trong chương 3, đồ án đã áp dụng HTML, CSS và JavaScript để tạo giao diện và xử lý dữ liệu theo yêu cầu Bài viết này sẽ tiếp tục trình bày các kỹ thuật được sử dụng trong quá trình xây dựng các trang.

- Xây dựng bố cục trang Home bằng các thẻ HTML.

+ Sử dụng thẻ , để phân trang thành các khối.

+ Sử dụng thẻ

,
• để tạo menu.

  + Sử dụng thẻ

  để tạo các đoạn văn bản.

  + Sử dụng thẻ để đặt link đến các giao diện trang website.

  + Sử dụng thẻ để hiển thị hình ảnh sản phẩm.

  + Sử dụng thẻ để xây dựng bảng.

  + Sử dụng thẻ để xử lý dữ liệu nhập và gửi đi cho hệ thống

  - Kỹ thuật định dạng bằng CSS.

  + Sử dụng kỹ thuật External style sheet thông qua thẻ để đưa định dạng CSS vào giao diện.

  + Sử dụng kỹ thuật Inline style để định dạng.

  ⮚ Sử dụng các selector HTML, selector class, selector ID để định dạng Kỹ thuật định dạng bằng CSS

  .

  ⮚ Sử dụng Javascript, Jquery, Bootrap để lập trình các chức năng

  .

  - Triển khai các lớp các api service theo mô hình MVC sử dụng Spring Boot.

  Triển khai các chức năng cho phân hệ quản trị nội dung (nếu có)

  - Các chức năng cho phân hệ trang quản trị nội dung: quản lý người dung, thể loại, thương hiệu, sản phẩm, hóa đơn.

  - Các chức năng thêm, sửa, xóa, tìm kiếm, thống kê doanh thu, update trạng thái đơn đặt hàng đơn đặt hàng.

  Kiểm thử và triển khai ứng dụng

   Kiểm thử tính khả dụng

  - Nội dung chính xác, không có bất kì lỗi chính tả nào

  - Tất cả phông chữ đúng theo yêu cầu.

  - Tất cả thông báo lỗi chính xác, khớp với nhãn trường.

  - Tất cả các button có 1 định dạng và kích thước chuẩn

  - Liên kết đến trang chủ có trên mỗi trang

  - Hệ thống sẽ hiển thị thông báo lỗi cho các trường bắt buộc.

  - Kiểm tra thông báo xác nhận sẽ hiển thị cho các hoạt động cập nhật và xóa.

  - Kiểm tra chức năng thời gian chờ

  - Kiểm tra độ dài tối đa của mỗi trường.

   Kiểm tra tính tương thích

  - Kiểm tra trang web trong các trình duyệt khác nhau

  - Kiểm tra hình ảnh hiển thị chính xác trong các trình duyệt khác nhau.

   Kiểm thử cơ sở dữ liệu

  - Xác minh tên cơ sở dữ liệu

  - Xác minh xem cột có cho phép null hay không

  - Xác minh khóa chính và khóa ngoại của mỗi bảng.

  - Chuột phải vào Project, chọn Publish.

  Môi trư‘ng phần cứng

  - CPU: Pentium IV 3.0 GHz hoặc cao hơn.

  - HDD: Dung lượng tối thiểu trống 4G.

  Môi trư‘ng phần mềm

  - Môi trường: Java 8, Note js, Angular 13.

  - Công cụ phát triển: Esclipse, Visual studio code, MySql workbench.