Xây dựng web bán hàng với Java Springboot/API và Angular

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.1 MB, 67 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNGKHOA CÔNG NGHỆ THÔNG TIN</b>

ĐỒNG NGỌC KHANH

<b>Xây dựng web bán hàngvới Java Springboot/API và</b>

<b>ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC</b>

<b>NGÀNH KỸ THUẬT PHẦN MỀM</b>

<b>THÁI NGUYÊN, 5/2024</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

<b>KHOA CÔNG NGHỆ THÔNG TIN</b>

Giảng viên hướng dẫn: Th.S NGUYỄN VĂN VIỆT

Thái Nguyên, năm 2024

Ảnh 3x4

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Với lòng biết ơn sâu sắc, em xin gửi lời cảm ơn chân thành nhất đến thầyNguyễn Văn Việt đã hướng dẫn, giúp đỡ và tạo điều kiện cho em trong suốt quátrình thực hiện đồ án tốt nghiệp này. Sự nhiệt tình và kiến thức quý báu mà thầy đãtruyền đạt không chỉ là nguồn động viên lớn lao giúp em vượt qua những khó khăn,mà cịn là kim chỉ nam cho bước đường tương lai của em. Em xin cam kết sẽ ápdụng những kiến thức đã học được vào thực tiễn một cách có ích nhất, góp phần vàosự phát triển của ngành và xã hội.

Xin trân trọng cảm ơn!

Em xin cam đoan báo cáo này là kết quả của quá trình tổng hợp và nghiêncứu của cá nhân em, được thực hiện trên cơ sở nghiên cứu lý thuyết, kiến thức dướisự hướng dẫn tận tình của thầy giáo Th.s Nguyễn Văn Việt . Trong báo cáo có sửdụng một số tài liệu tham khảo như đã nêu trong phần tài liệu tham khảo.

Sinh viên thực hiện

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Dự án Xây dựng Web Bán hàng sử dụng Java Spring Boot/APIvà Angular nhằm mục đích tạo ra một nền tảng đầy đủ chức năngvà linh hoạt cho việc triển khai cửa hàng trực tuyến. Bằng cách kếthợp Java Spring Boot/API, chúng tôi cung cấp các công cụ mạnhmẽ để quản lý sản phẩm, đơn hàng và khách hàng, cùng với khảnăng xử lý logic kinh doanh phức tạp. Angular được lựa chọn chophần giao diện người dùng, giúp tạo ra trải nghiệm tương tác tốtnhất cho người dùng cuối.

Mục tiêu của tơi khơng chỉ là đơn giản hóa q trình triểnkhai và tùy chỉnh, mà còn là mở ra khả năng mở rộng linh hoạt,đáp ứng nhu cầu phát triển của các doanh nghiệp từ nhỏ đếnlớn.Tôi mong muốn tạo ra một nền tảng đáng tin cậy và hiệu quả,từ việc duyệt sản phẩm đến việc thanh toán, nhằm mang lại trảinghiệm người dùng tốt nhất và đồng thời thúc đẩy sự phát triểnbền vững của thị trường thương mại điện tử.

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>CHƯƠNG I: CƠ SỞ LÝ THUYẾT...</b>

<b>1.1. Kiến thức cơ bản về ngôn ngữ Lập trình...8</b>

1.1.1. Tổng quan ngơn ngữ java...8

2.1.3. Định nghĩa thuật ngữ và các từ viết tắt...18

2.1.4. Tài liệu tham khảo...19

2.1.5. Mô tả tài liệu...19

<b>2.2. Tổng quan về hệ thống...19</b>

2.2.1. Phát biểu bài toán...19

2.2.2. Mục tiêu hệ thống...20

2.2.3. Phạm vi của hệ thống...21

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

2.4.3. Thiết kế Cơ sở dữ liệu của hệ thống...53

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>3.1. Tổng quan về Website...56</b>

<b>3.2 Giao diện website...57</b>

3.2.1. Giao diện trang chủ...57

3.2.2. Quản lý thông tin...58

3.2.3. Giỏ hàng...58

3.2.4. Tạo đơn hàng...59

3.2.5. Đăng ký tài khoản...60

3.2.6. Đăng nhập tài khoản...60

3.2.7. Chức năng tạo danh mục...61

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Hình 1: Luồng Hoạt Động Của Spring Boot...10

Hình 2: Tác nhân hệ thống...21

Hình 3: UseCase Tổng Quát...22

Hình 4: UseCase phân rã người dùng và khách vãng lai...23

Hình 5: UseCase phân rã quản trị viên...24

Hình 6: Biểu Đồ Lớp...25

Hình 7: Biểu đồ trình tự đăng nhập...26

Hình 8: Biểu đồ hoạt động chức năng đăng nhập...27

Hình 9: Biểu đồ trình tự chức năng đăng ký...28

Hình 10: Biểu đồ hoạt động chức năng đăng ký...29

Hình 11: Biểu đồ trình tự chức năng tìm kiếm...29

Hình 12: Biểu đồ hoạt động chức năng tìm kiếm...30

Hình 13: Biểu đồ trình tự chức năng thêm sản phẩm vào giỏ hàng...30

Hình 14: Biểu đồ hoạt động chức năng thêm sản phẩm vào giỏ hàng...31

Hình 15: Biểu đồ trình tự chức năng đặt hàng...32

Hình 16: Biểu đồ hoạt động chức năng đặt hàng...33

Hình 17: Biểu đồ trình tự chức năng cập nhật thơng tin khách hàng...34

Hình 18: Biểu đồ hoạt động chức năng cập nhật thơng tin khách hàng...35

Hình 19: Biểu đồ trình tự chức năng xố tài khoản khách hàng...36

Hình 20: Biểu đồ hoạt động chức năng xố tài khoản khách hàng...36

Hình 21: Biểu đồ trình tự chức năng thêm sản phẩm...37

Hình 22: Biểu đồ hoạt động chức năng thêm sản phẩm...38

Hình 23: Biểu đồ trình tự chức năng cập nhật sản phẩm...39

Hình 24: Biểu đồ trình tự hoạt động thêm sản phẩm...40

Hình 25: Biểu đồ trình tự chức năng xố sản phẩm...40

Hình 26: Biểu đồ hoạt động chức năng xố sản phẩm...41

Hình 27: Biểu đồ trình tự chức năng thêm danh mục...41

Hình 28: Biểu đồ hoạt động chức năng thêm danh mục...42

Hình 29: Biểu đồ trình tự chức năng cập nhật danh mục...43

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Hình 31: Biểu đồ trình tự chức năng xố danh mục...44

Hình 32: Biểu đồ hoạt động chức năng xố danh mục...45

Hình 33: Biểu đồ trình tự chức năng thống kê...46

Hình 34: Biểu đồ hoạt động chức năng thống kê...47

Hình 35: Thiết kế Cơ sở dữ liệu của hệ thống...53

Hình 36: Giao diện trang chủ của hệ thống web...57

Hình 37: Giao diện chi tiết sản phẩm...57

Hình 38: Giao diện Quản lý thơng tin...58

Hình 39: Giao diện giỏ hàng...58

Hình 40: Giao diện tạo đơn hàng...59

Hình 41: Giao diện đơn hàng...59

Hình 42: Giao diện tài khoản đăng ký...60

Hình 43: Giao diện phần đăng nhập tài khoản...60

Hình 44: Giao diện danh sách danh mục...61

Hình 45: Giao diện thêm mới danh mục...61

Hình 46: Giao diện danh sách sản phẩm...62

Hình 47: Giao diện thêm sản phẩm...62

Hình 48: Giao diện tài khoản...63

Hình 49: Giao diện phần đơn hàng...63

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>CHƯƠNG I: CƠ SỞ LÝ THUYẾT1.1. Kiến thức cơ bản về ngơn ngữ Lập trình1.1.1. Tổng quan ngơn ngữ java</b>

Java là một ngơn ngữ lập trình hướng đối tượng (ObjectOriented), được thiết kế để có càng ít phụ thuộc thực thi càng tốt.Ngơn ngữ lập trình Java có mục đích chung cho phép các nhà pháttriển ứng dụng viết một lần, chạy ở mọi nơi – nghĩa là mã Java đãbiên dịch có thể chạy trên tất cả các nền tảng hỗ trợ Java màkhông cần biên dịch lại.

Java được khởi đầu bởi James Gosling và bạn đồng nghiệp ởSun Microsystems vào năm 1991. Ban đầu, Java được tạo ra nhằmmục đích viết phần mềm cho các sản phẩm gia dụng và có tên làOak. Sau đó, vào năm 1994, Java được phát hành và đến năm2010, nó được Oracle mua lại từ Sun Microsystems. Java được tạora với tiêu chí “Viết (code) một lần, thực thi khắp nơi” (Write Once,Run Anywhere – WORA). Chương trình phần mềm viết bằng Java cóthể chạy trên mọi nền tảng khác nhau thông qua một môi trườngthực thi với điều kiện có mơi trường thực thi thích hợp hỗ trợ nềntảng đó.

<i>Một số đặc điểm quan trọng của Java:</i>

1.Hướng đối tượng hoàn toàn: Java sử dụng các cú pháptương tự C++, nhưng loại bỏ các thao tác với con trỏ để đảm bảotính an tồn và dễ sử dụng hơn.

2.Độc lập phần cứng và hệ điều hành: Chương trình viết bằngJava có thể chạy trên nhiều mơi trường khác nhau, từ máy tính đếnđiện thoại di động, nhờ khả năng “cross-platform”.

3.Ngơn ngữ thông dịch: Java thuộc loại ngôn ngữ thông dịch,cho phép viết mã một lần và chạy trực tiếp mà khơng cần biêndịch trước.

4.Tính an tồn và bảo mật: Java có cơ chế thu gom rác tựđộng, đa luồng, và được thiết kế với tính an tồn và bảo mật cao.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>1.1.2. Spring boot</b>

Spring Boot xuất hiện vào năm 2012, là "con đẻ" của Juergen Hoeller và độingũ Spring Framework, dựa trên nền tảng Spring Framework 3.1 nhằm đơn giảnhóa việc phát triển ứng dụng web Java. Mục tiêu chính của Spring Boot là giúp lậptrình viên tạo ra ứng dụng web Java nhanh chóng, dễ dàng và hiệu quả hơn.

Nhờ cung cấp nhiều tính năng tự động hóa, giảm thiểu cấu hình thủ cơng vàboilerplate code, Spring Boot mang đến lợi ích to lớn về mặt năng suất, giúp tiếtkiệm thời gian và công sức cho lập trình viên.

Điểm nổi bật của Spring Boot nằm ở khả năng khởi động ứng dụng độc lậpbằng java -jar, tự động cấu hình nhiều thành phần Spring, và cung cấp các starterdependencies, annotations cùng cấu hình mặc định để đơn giản hóa việc bắt đầu chongười mới.

Hơn nữa, Spring Boot cịn hỗ trợ đa dạng tính năng như REST APIs, SpringSecurity, database access, messaging và cloud integration, đảm bảo tính linh hoạt vàdễ dàng mở rộng để đáp ứng nhu cầu thay đổi.

Spring Boot cũng có một số hạn chế như kích thước ứng dụng lớn hơn so vớiứng dụng Java truyền thống, mức độ học tập ban đầu cao hơn và tính phụ thuộc vàoSpring Framework. Nhưng Spring Boot vẫn là lựa chọn hàng đầu cho các lập trìnhviên Java trong việc xây dựng các ứng dụng web hiện đại bởi những ưu điểm vượttrội về năng suất, tính dễ sử dụng, linh hoạt và cộng đồng hỗ trợ lớn mạnh.

<i>Luồng đi của Spring boot:</i>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<i>Hình 1: Luồng Hoạt Động Của Spring Boot</i>

 Đầu tiên khi yêu cầu của người dùng có thể được gửi đến ứng dụng spring bootbằng nhiều cách khác nhau chẳng hạn như: Giao diện người dùng (UI), RestAPI, Soket, … Các request đó được tiếp nhận bởi bộ định tuyến của SpringMVC. Bộ định tuyến này sẽ ánh xạ yêu cầu đến một phương thức xử lý cụ thểtrong trong lớp Controller phù hợp

 Xử lý yêu cầu: Các phương thức trong class Controller sẽ thực hiện thu thậpthông tin các yêu cầu ví dụ như: tham số, tiêu đề HTTPS, ... Sau đó xử lý cácrequest bằng cách gọi các dịch vụ service từ bên ngồi thơng qua cơ chếDependency Injection (là một kỹ thuật theo đó một đối tượng (hoặc staticmethod) cung cấp các phụ thuộc của đối tượng khác. Một phụ thuộc là một đốitượng có thể được sử dụng (service))

 Khi Service đã được gọi thì các nghiệp vụ phù hợp sẽ được gọi đến và triểnkhai thực hiện theo yêu cầu của request. sử dụng các phụ thuộc Repository đãđược tiêm ứng với các thực thể entity mà yêu cầu cần tương tác thông qua JPA(viết tắt Java Persistence API, JPA giúp giảm thiểu việc phải viết mã SQL mộtcách trực tiếp và tạo ra một lớp trừu tượng giữa ứng dụng và cơ sở dữ liệu.) để

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

thao tác CURD dữ liệu trên Database. Rồi Chuẩn bị dữ liệu phản hồi để gửi lạicho người dùng.

 Dữ liệu phản hồi được chuẩn bị trong bước xử lý yêu cầu sẽ được chuyển đổithành định dạng phù hợp, chẳng hạn như JSON, XML hoặc HTML. Responseđược gửi lại cho người dùng thông qua giao thức HTTP.

<b>1.1.3. Angular framework</b>

Angular, con đẻ của Google, nổi bật như một framework mã nguồn mở mạnhmẽ, được ưa chuộng trong việc xây dựng các ứng dụng web động một trang (SPA)và các ứng dụng web phức tạp. Nền tảng này dựa trên TypeScript, siêu tập củaJavaScript, mang đến nhiều ưu điểm vượt trội.

Điểm sáng đầu tiên của Angular chính là cấu trúc rõ ràng theo mơ hình MVC(Model-View-Controller), giúp tách biệt các mối quan tâm, tạo nên mã dễ dàng tổchức và duy trì. Nhờ tính năng liên kết dữ liệu hai chiều tự động, việc cập nhật giaodiện người dùng khi dữ liệu thay đổi trở nên đơn giản hơn bao giờ hết.

Angular còn cung cấp kho thư viện sẵn có phong phú cho các tác vụ phổbiến như định tuyến, HTTP, biểu mẫu và kiểm tra tính hợp lệ, tiết kiệm thời gian vàcơng sức cho nhà phát triển. Thêm vào đó, cộng đồng Angular lớn mạnh và tích cựcln sẵn sàng hỗ trợ, cung cấp tài liệu đầy đủ, giúp giải đáp mọi thắc mắc.

Angular cũng có một số vấn đề. Độ cong học tập dốc có thể gây khó khăncho những người mới bắt đầu do cấu trúc phức tạp và nhiều tính năng. Kích thướcframework lớn có thể làm tăng thời gian tải trang web. Ngồi ra, Angular cũng cóthể ít linh hoạt hơn so với các framework JavaScript khác như React hay Vue.js.

Bất chấp những hạn chế đó, Angular vẫn là lựa chọn tối ưu cho việc xây dựngcác ứng dụng web hiện đại, đặc biệt là các ứng dụng web động một trang (SPA),ứng dụng web phức tạp và ứng dụng di động lai. Với sức mạnh và linh hoạt,Angular hứa hẹn mang đến những trải nghiệm web ấn tượng và hiệu quả cho ngườidùng.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<i>Tại sao lại là angular và spring boot:</i>

Việc lựa chọn Angular kết hợp với Spring Boot cho một dự án website bánhàng là một quyết định có lý do và mang lại nhiều lợi ích đáng kể. Angular, với sứcmạnh của việc xây dựng các ứng dụng web hiện đại và giao diện người dùng tươngtác, cùng với Spring Boot, một framework Java mạnh mẽ cho phát triển các ứngdụng máy chủ, tạo nên một nền tảng lý tưởng cho dự án website bán hàng. Dướiđây là một số lý do vì sao Angular và Spring Boot là sự lựa chọn hàng đầu cho dựán này:

Trải nghiệm người dùng tốt: Angular cung cấp một cách tiếp cận mạnh mẽ đểxây dựng giao diện người dùng tương tác và trực quan. Trong một dự án websitebán hàng, trải nghiệm người dùng chất lượng cao là yếu tố quyết định thành công.Angular giúp tạo ra giao diện đẹp mắt và dễ sử dụng, cung cấp một trải nghiệm muasắm trực tuyến tốt nhất cho khách hàng.

Hiệu suất và khả năng mở rộng: Angular cho phép phát triển ứng dụng webđa nền tảng, từ desktop đến di động, đảm bảo rằng ứng dụng có thể hoạt động trênmọi thiết bị. Spring Boot, với khả năng xây dựng các ứng dụng máy chủ mạnh mẽ,giúp đảm bảo hiệu suất cao và mở rộng dễ dàng khi cần thiết.

Quản lý trạng thái và hiệu quả phát triển: Angular cung cấp một cơ sở mãnguồn mở rộng, hỗ trợ mạnh mẽ từ cộng đồng, và các công cụ như Angular CLIgiúp tăng tốc quá trình phát triển. Sự tích hợp tốt với TypeScript cũng giúp giảmthiểu lỗi và tăng tính nhất quán của mã nguồn. Spring Boot, với tính năng auto-configuration và một số cơng cụ hỗ trợ, giúp tạo ra các ứng dụng máy chủ một cáchnhanh chóng và dễ dàng.

Hỗ trợ mạnh mẽ từ cộng đồng: Cả Angular và Spring Boot đều có cộng đồnglớn và tích cực, điều này mang lại lợi ích từ các tài liệu phong phú, hỗ trợ từ cộngđồng và các công cụ phát triển mạnh mẽ. Điều này làm cho việc phát triển dự án trởnên dễ dàng và nhanh chóng.

 Từ những lợi ích trên việc sử dụng angular kết hợp với spring boot dự ánwebsite bán hàng là hồn tồn hợp lý. Khơng chỉ mang lại hiệu suất và độ tin cậymà còn giúp tạo ra một ứng dụng mạnh mẽ, linh hoạt và dễ bảo trì.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>1.1.4. Restful API</b>

RESTful API là một loại API được thiết kế để tuân thủ các nguyên tắc và tiêuchuẩn của kiến trúc REST (Representational State Transfer). Được xây dựng trênnền tảng của giao thức HTTP, RESTful API cung cấp một cách tiếp cận linh hoạt vàhiệu quả để tương tác với các tài nguyên trên web.

Một trong những đặc điểm quan trọng của RESTful API là sự đơn giản và dễsử dụng. API được xác định bằng các URL (Uniform Resource Locator) có ý nghĩavà dễ đọc, mỗi URL đại diện cho một tài nguyên cụ thể trên hệ thống. Các phươngthức HTTP như GET, POST, PUT và DELETE được sử dụng để thực hiện các hoạtđộng khác nhau trên các tài nguyên này.

RESTful API cũng thường sử dụng các định dạng dữ liệu như JSON(JavaScript Object Notation) hoặc XML (eXtensible Markup Language) để truyềntải dữ liệu giữa client và server. Điều này giúp cho việc trao đổi dữ liệu trở nên linhhoạt và tương thích với nhiều ngơn ngữ lập trình và nền tảng khác nhau.

Với cách tiếp cận này, RESTful API đã trở thành một trong những công nghệphổ biến nhất cho việc phát triển các ứng dụng web và dịch vụ trên internet. Sự linhhoạt, đơn giản và hiệu quả của RESTful API đã giúp tạo ra các hệ thống có khảnăng mở rộng và tích hợp tốt, đồng thời cung cấp trải nghiệm người dùng tốt nhất.

<b>1.2. Database – MySql</b>

MySQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở phổ biến vàmạnh mẽ, được sử dụng rộng rãi trong nhiều loại ứng dụng từ các dự án nhỏ đếncác hệ thống phức tạp. Với khả năng linh hoạt, hiệu suất cao và tính bảo mật mạnhmẽ, MySQL đã trở thành một trong những lựa chọn hàng đầu cho việc lưu trữ vàquản lý dữ liệu.

MySQL được phát triển và duy trì bởi Oracle Corporation, và là một phầncủa hệ sinh thái của Oracle. Tuy nhiên, nó vẫn là một dự án mã nguồn mở, có sựđóng góp từ cộng đồng người dùng tồn cầu. Điều này đã tạo ra một cộng đồng lớnvà tích cực, với nhiều tài liệu, hướng dẫn và hỗ trợ trực tuyến.

Một trong những điểm mạnh của MySQL là hiệu suất cao. Với kiến trúcphân tán, hệ thống truy vấn tối ưu và khả năng mở rộng dễ dàng, MySQL có thể xửlý hàng triệu truy vấn mỗi giây, phục vụ cho các ứng dụng web có lưu lượng truycập lớn mà không gặp vấn đề về hiệu suất.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

MySQL cũng cung cấp các tính năng bảo mật mạnh mẽ để bảo vệ dữ liệu củabạn. Tính năng như phân quyền người dùng, mã hóa dữ liệu, và kiểm soát truy cậpcơ sở dữ liệu giúp đảm bảo rằng chỉ những người được ủy quyền mới có thể truycập và sửa đổi dữ liệu.

Ngoài ra, MySQL hỗ trợ nhiều loại dữ liệu khác nhau, từ số nguyên đếnchuỗi ký tự đến dữ liệu đa phương tiện như hình ảnh và video. Điều này cho phépbạn lưu trữ và quản lý mọi loại dữ liệu trong cùng một cơ sở dữ liệu, giúp giảm bớtsự phức tạp và chi phí của hệ thống.

Cuối cùng, MySQL được hỗ trợ trên nhiều hệ điều hành khác nhau, từWindows đến Linux và macOS, cho phép triển khai cơ sở dữ liệu trên mọi môitrường.

MySQL là một hệ quản trị cơ sở dữ liệu mạnh mẽ, linh hoạt và bảo mật, là lựachọn lý tưởng cho việc lưu trữ và quản lý dữ liệu trong các ứng dụng web và doanhnghiệp.

<b>1.3. Công cụ sử dụng1.3.1. IntelliJ IDEA</b>

IntelliJ IDEA là một IDE (Integrated Development Environment) thông minhđược phát triển bởi JetBrains. Đây là một công cụ mạnh mẽ dành cho các nhà pháttriển phần mềm, đặc biệt là cho việc phát triển ứng dụng Java. Dưới đây là một sốđặc điểm và tính năng nổi bật của IntelliJ IDEA:

1. Hỗ trợ mã hóa thơng minh:

IntelliJ IDEA cung cấp hơn 60 mã kiểm tra với khả năng phân tích mã siêunhanh. Điều này giúp bạn tìm ra lỗi và cải thiện chất lượng mã một cách hiệu quả.

Phân tích luồng dữ liệu và tiêm ngơn ngữ (Language Injection) giúp làm việcvới các ngôn ngữ khác nhau trong cùng một dự án.

2. Tính năng sửa lỗi nhanh thông minh:

IntelliJ IDEA cho phép gỡ lỗi inline, nhanh chóng xác định và khắc phục lỗitrong mã.

3. Tạo mã tự động và hỗ trợ Styling Consistent:

IDE này cung cấp các phương tiện tuyệt vời cho sự phát triển Java,JavaScript/ActionScript/Flex, HTML/XHTML/CSS, XML/XSL, PHP, Ruby/JRuby,

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

Groovy, SQL, FreeMarker/Velocity, JSP, JSF, Android, và nhiều ngơn ngữ khác. Cóthể tạo mã “sạch” và thực hiện mã trong thời gian ngắn nhất.

4. Hỗ trợ triển khai và gỡ lỗi từ xa:

IntelliJ IDEA tích hợp sẵn các cơng cụ build/đóng gói như grunt, bower,gradle, và SBT. Nó hỗ trợ các hệ thống kiểm sốt phiên bản như Git, Mercurial,Perforce, và SVN. Có thể truy cập trực tiếp vào các cơ sở dữ liệu như MicrosoftSQL Server, Oracle, PostgreSQL, và MySQL từ IDE.

5. Hỗ trợ mã hóa đa ngôn ngữ:

IntelliJ IDEA xử lý liền mạch cơ sở mã hỗn hợp của Java, Ruby, Groovy,Python, và Scala.

<b>1.3.2. Visual Studio Code</b>

Visual Studio Code (thường được viết tắt là VS Code) là một trình soạn thảomã nguồn mã nguồn mở miễn phí do Microsoft phát triển. Đây là cơng cụ phát triểnmã nguồn rất phổ biến trong cộng đồng phát triển phần mềm và có sẵn cho các hệđiều hành Windows, macOS và Linux.

Đặc điểm và tính năng nổi bật của Visual Studio Code:

1. Hỗ trợ đa ngôn ngữ: VS Code hỗ trợ nhiều ngơn ngữ lập trình, cho phépbạn làm việc với các dự án đa dạng. Có syntax highlighting giúp mã nguồn trở nêndễ đọc và hiểu hơn.

2. Hỗ trợ gỡ lỗi: VS Code đi kèm với chức năng debug, giúp tìm và khắcphục lỗi một cách hiệu quả.

3. Tích hợp Git: VS Code tích hợp sẵn với Git, cho phép quản lý phiên bảnmã nguồn dễ dàng.

4. Tự động hoàn thành mã (IntelliSense): VS Code cung cấp tính năng tựđộng hồn thành mã thơng minh, giúp viết mã nhanh hơn và tránh sai sót.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

5. Hỗ trợ đa nền tảng: Bạn có thể sử dụng VS Code trên nhiều hệ điều hànhkhác nhau, bao gồm Windows, macOS và Linux.

6. Tích hợp Terminal: VS Code cho phép mở terminal trực tiếp từ giao diện,giúp thực hiện các tác vụ liên quan đến mã nguồn một cách thuận tiện.

7. Tiện ích mở rộng: VS Code có hệ thống tiện ích mở rộng mạnh mẽ, chophép bạn tùy chỉnh và mở rộng chức năng của trình soạn thảo.

8. Cấu trúc phân cấp: Mã nguồn trong VS Code được tổ chức theo cấu trúcphân cấp, giúp bạn dễ dàng tìm kiếm và quản lý các tệp tin.

9. Nhiều dự án: VS Code hỗ trợ làm việc với nhiều dự án cùng lúc, giúp tiếtkiệm thời gian và tăng hiệu suất làm việc.

<i>Lý do nên sử dụng Visual Studio Code:</i>

 Đa năng: Phù hợp cho nhiều loại dự án phát triển khác nhau.

 Cơng cụ và tính năng tích hợp: Hỗ trợ gỡ lỗi, Git, và nhiều tính năng hữu íchkhác.

 Cộng đồng năng động: VS Code có cộng đồng lớn, với nhiều tiện ích mởrộng và hỗ trợ từ cộng đồng phát triển.

 Phù hợp để phát triển web: VS Code là lựa chọn tốt cho việc phát triển ứngdụng web và các dự án liên quan.

<b>1.3.3. XAMPP</b>

XAMPP là bộ công cụ giả lập môi trường server (localhost) miễn phí và phổbiến, được phát triển bởi Apache Friends, giúp cài đặt và vận hành dễ dàng các ứngdụng web mà không cần mua hosting hay VPS.

Điểm sáng của XAMPP:

 Hệ sinh thái trọn vẹn: Tích hợp sẵn Apache, MySQL, PHP, FTP Server, MailServer, Perl, FileZilla, SQLite, phpMyAdmin, WebDAV,... hỗ trợ mọi khíacạnh phát triển và quản trị website.

 Dễ dàng chinh phục: Cài đặt chỉ với một cú nhấp chuột, giao diện trực quan,bảng điều khiển đơn giản, giúp quản lý dịch vụ dễ dàng.

 Hỗ trợ đa nền tảng: Windows, Linux, macOS, Solaris - đáp ứng nhu cầu sửdụng đa dạng.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

 Mở rộng không giới hạn: Hỗ trợ cài đặt thêm module, plugin mở rộng tínhnăng theo nhu cầu.

 Miễn phí và mã nguồn mở: Tự do sử dụng, sửa đổi và chia sẻ cho mục đíchcá nhân và phi lợi nhuận.

XAMPP mang đến:

 Mơi trường server hồn chỉnh: Giả lập mơi trường server thực tế, giúp pháttriển, test và triển khai ứng dụng web ngay trên máy tính cá nhân mà khơngcần kết nối internet.

 Quản trị cơ sở dữ liệu hiệu quả: Tạo, quản lý, thao tác dữ liệu MySQL dễdàng thơng qua phpMyAdmin hoặc giao diện dịng lệnh.

 Truy cập file linh hoạt: Upload/download file trên server thông qua FTPServer hoặc FileZilla.

 Hệ thống email nội bộ: Cài đặt và sử dụng Mail Server để gửi/nhận email nộibộ hoặc test chức năng email của website.

 Sân chơi cho ngôn ngữ lập trình: Phát triển ứng dụng web với PHP, Perl,Python,... và ngơn ngữ scripting khác.

XAMPP lý tưởng cho:

 Lập trình viên web: Phát triển, test và triển khai ứng dụng web, website,blog,...

 Sinh viên CNTT: Thực hành lập trình web, quản trị cơ sở dữ liệu, tìm hiểu vềmơi trường server.

 Người dùng cá nhân: Tạo website cá nhân, blog, diễn đàn đơn giản, quản lýfile cá nhân trên server.

Lưu ý:

 XAMPP chỉ phù hợp cho mục đích học tập, nghiên cứu hoặc phát triển webcá nhân. Không nên sử dụng cho các website thương mại hoặc cần độ bảomật cao.

 Kiến thức cơ bản về lập trình web và quản trị server là cần thiết để sử dụngXAMPP hiệu quả.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>CHƯƠNG II: KHẢO SÁT, PHÂN TÍCH VÀ THIẾT KẾ HỆTHỐNG</b>

<b>2.1. Giới thiệu</b>

Tài liệu Phân tích u cầu người dùng (PTYC) nhằm trình bày một cách chitiết và rõ ràng các yêu cầu của người sử dụng đối với Website Bán hàng sử dụngAngular và Spring Boot. Mục tiêu của tài liệu là xác định phạm vi và mục đích củahệ thống, các quy trình kinh doanh sau khi được tự động hóa, yêu cầu chức năng vàphi chức năng, cũng như các ràng buộc và tiêu chuẩn cần tuân thủ của hệ thống.

Tài liệu PTYC là nền tảng để định rõ và đồng nhất các yêu cầu, và là cơ sởcho quá trình phân tích thiết kế và xây dựng hệ thống.

Tài liệu chỉ tập trung vào các yêu cầu liên quan đến Website Bán hàng sửdụng Angular và Spring Boot, bao gồm mục tiêu, phạm vi hệ thống, quy trình kinhdoanh, yêu cầu chức năng và phi chức năng, cũng như các tiêu chuẩn để triển khaihệ thống.

Bất kỳ yêu cầu nào không phù hợp hoặc không liên quan đến Website Bánhàng đều không thuộc phạm vi của tài liệu này.

Sản phẩm đầu ra là một Website Bán hàng hoàn chỉnh và chạy được sử dụngAngular và Spring Boot.

<b>2.1.3. Định nghĩa thuật ngữ và các từ viết tắt</b>

Bảng 1: Định nghĩa thuật ngữ

Thuật ngữ Định nghĩa Ghi chú

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Thuật ngữ Định nghĩa Ghi chú

Bảng 2: Tài liệu tham khảo

Tên tài liệu Ngày pháthành

Nguồn Ghi chú

Tài liệu này sẽ cung cấp một cái nhìn tổng quan về Website Bán hàng sửdụng Angular và Spring Boot, từ mục đích, phạm vi cho đến các yêu cầu chi tiết.

Tài liệu được tổ chức thành 4 phần chính như sau:

Phần 1: Giới thiệu – Trình bày mục đích, phạm vi và ý nghĩa của tài liệu.

Phần 2: Tổng quan về hệ thống – Mô tả tổng quan về Website Bán hàng sửdụng Angular và Spring Boot.

Phần 3: Quy trình kinh doanh - Trọng tâm của tài liệu, trình bày các quy trìnhkinh doanh của Website Bán hàng sau khi được tự động hóa.

Phần 4: Các yêu cầu phi chức năng – Mô tả các yêu cầu không phải là chứcnăng trực tiếp của hệ thống.

<b>2.2. Tổng quan về hệ thống 2.2.1. Phát biểu bài toán </b>

Trong bối cảnh thị trường mua sắm trực tuyến ngày càng phát triển, việc xâydựng một Website Bán hàng trực tuyến là một bước đi hợp lý và cần thiết. Websitenày không chỉ giúp tạo điều kiện thuận lợi cho người tiêu dùng trong việc mua sắmmà cịn mang lại lợi ích cho các nhà kinh doanh trong việc tiếp cận và phục vụkhách hàng một cách hiệu quả và tiết kiệm chi phí. Mục tiêu của dự án là xây dựng

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

một hệ thống Website Bán hàng sử dụng Spring Boot và Angular nhằm cung cấpcác tính năng như: tìm kiếm sản phẩm, xem thơng tin sản phẩm, thêm vào giỏ hàng,thanh toán và quản lý đơn hàng. Đồng thời, Website cũng cung cấp thông tin chi tiếtvề sản phẩm, đánh giá từ người dùng, và hỗ trợ khách hàng trong quá trình muasắm. Mục tiêu cuối cùng là tạo ra một trải nghiệm mua sắm trực tuyến thuận lợi,tiện lợi và an toàn cho người dùng, đồng thời tối ưu hóa quy trình kinh doanh củacác doanh nghiệp.

- Cho phép quản lý đơn hàng: Hệ thống phải cho phép quản trị viên xem vàquản lý các đơn hàng từ khách hàng, bao gồm xem chi tiết đơn hàng, cập nhật trạngthái đơn hàng và tương tác với khách hàng qua các thông điệp hoặc ghi chú.

- Hỗ trợ tìm kiếm sản phẩm: Người dùng có thể tìm kiếm sản phẩm dễ dàngthơng qua các bộ lọc và tìm kiếm tự do, với khả năng tìm kiếm theo tên sản phẩm,danh mục, giá cả và các thuộc tính khác.

- Cung cấp trải nghiệm mua sắm thuận tiện: Website phải cung cấp giao diệnngười dùng thân thiện, dễ sử dụng và thân thiện với người dùng, giúp khách hàngdễ dàng duyệt qua sản phẩm, thêm vào giỏ hàng và thanh toán.

- Quản lý tài khoản người dùng: Hệ thống phải cho phép người dùng đăngký, đăng nhập và quản lý thông tin cá nhân, địa chỉ giao hàng và lịch sử đơn hàng.

- Hỗ trợ thanh tốn an tồn và linh hoạt: Website phải hỗ trợ nhiều phươngthức thanh toán an toàn và tiện lợi cho người dùng, bao gồm thanh tốn qua thẻ tíndụng, chuyển khoản ngân hàng và các cổng thanh tốn trực tuyến khác.

- Cung cấp thơng tin chi tiết về sản phẩm: Người dùng có thể xem thông tinchi tiết về sản phẩm, bao gồm mô tả, hình ảnh, đánh giá từ người dùng khác vàthơng tin kỹ thuật.

- Hỗ trợ tương tác khách hàng: Hệ thống phải cung cấp các kênh tương tácnhư chat trực tuyến, email hoặc hotline để hỗ trợ khách hàng giải đáp thắc mắc và

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

 Quản trị viên: người quản trị website

 Người dùng: những người đăng ký thành viên của hệ thống

 Khách hàng: những người ghé thăm website xem sản phẩm trong hệ thống.Mô tả:

2. Người dùng (khách hàng có tài khoản): - Có tài khoản và đăng nhập vào hệ thống.

- Thực hiện các thao tác mua sắm như xem sản phẩm, thêm vào giỏ hàng,thanh toán.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

- Quản lý thông tin cá nhân, địa chỉ giao hàng, lịch sử mua hàng.3. Khách vãng lai

- Khách hàng chưa đăng ký tài khoản hoặc chưa đăng nhập.

- Có thể xem sản phẩm, tìm kiếm, xem thơng tin chi tiết sản phẩm.

<b>2.2.3.2. Biểu đồ UseCase</b>

<i>Hình 3: UseCase Tổng Quát</i>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<i>Hình 4: UseCase phân rã người dùng và khách vãng lai</i>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<i>Hình 5: UseCase phân rã quản trị viên</i>

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>2.2.3.3. Biểu đồ lớp toàn hệ thống</b>

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>2.3.2.1. Biểu đồ trình tự</b>

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

<b>2.3.4.1. Biểu đồ trình tự</b>

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

<b>2.3.5. Tạo Đơn hàng2.3.5.1. Biểu đồ trình tự</b>

</div>

Xây dựng web bán hàng với Java Springboot/API và Angular

ĐỒNG NGỌC KHANH

<b>Xây dựng web bán hàngvới Java Springboot/API và</b>

<b>ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC</b>

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về