BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH CÔNG NGHỆ PHẦN MỀM

Giới thiệu về SVdanang Diễn đàn Svdanang là một diễn đàn dành cho sinh viên ở Đà Nẵng, là một tổ chức phi lợi nhuận đã thành lập được 15 năm.Tổ chức thường tạo ra các sự kiện dành cho si

KHOA CÔNG NGHỆ THÔNG TIN

MỤC LỤC

Nội dung

MỤC LỤC 1

DANH MỤC HÌNH ẢNH 3

MỞ ĐẦU 5

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 6

1.1 Đề tài 6

1.2 Giới thiệu về SVdanang 6

1.3 Nhu cầu người dùng 6

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 7

2.1 Spring boot 7

2.1.1 Giới thiệu 7

2.1.2 Phiên bản 7

2.1.3 Tạo một Spring boot application 7

2.1.4 Giới thiệu RESTful Webservice 7

2.2 Angular 9

2.2.1 Giới thiệu 9

2.2.2 Các đặc tính của Angular 9

2.2.3 Các thành phần chính trong Angular 9

2.3 Android 11

2.3.1 Giới thiệu 11

2.3.2 Cơ chế hoạt động 12

2.3.3 Môi trường phát triển 13

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15

3.1 Phân tích và thiết kế hệ thống 15

3.1.1 Đặc tả chức năng của hệ thống 15

3.1.2 Phân tích đối tượng 15

3.1.3 Hệ thống sơ đồ Use-case 16

3.1.4 Cơ sở dữ liệu 18

CHƯƠNG 4 XÂY DỰNG CHƯƠNG TRÌNH 20

4.1 Xây dựng hệ thống 20

4.1.1 Phần Back-End 20

4.1.2 Phần Front-End website 29

4.1.3 Phần Front-End application 44

4.2 Bảng phân công công việc 48

CHƯƠNG 5 TRIỂN KHAI HỆ THỐNG 49

5.1 Kế hoạch làm việc 49

5.2 Triển khai hệ thống API trên VPS 51

5.2.1 Java SE Runtime Environment 8 51

5.2.2 Apache Tomcat 51

5.2.3 Triển khai Database bằng MySQL 52

5.2.4 Triển khai Spring Boot Application trong Tomcat 52

5.3 Triển khai hệ thống website trang public 54

5.3.1 Build dự án Angular với cấu hình product 54

5.3.2 Sao chép toàn bộ output folder lên folder của Web Server 54

5.4 Quá trình triển khai dự án thông qua Trello 56

CHƯƠNG 6 KẾT QUẢ SẢN PHẨM VÀ ĐÁNH GIÁ 57

6.1 Kết quả sản phẩm 57

6.1.1 Trang Public 57

6.1.2 Trang quản lý 63

6.1.3 Ứng dụng di động 67

6.2 Kết luận và hướng phát triển 71

6.2.1 Đạt được 71

6.2.2 Chưa đạt 71

6.2.3 Hướng phát triển 71

DANH MỤC HÌNH ẢNH

Hình 1 Thành phần chính trong Angular 9

Hình 2 Các thành phần chính trong Android 12

Hình 3 Sơ dồ Use case Admin của Svdanang 16

Hình 4 Sơ đồ Use case trưởng ban 17

Hình 5 Sơ đồ Use case thành viên diễn đàn 17

Hình 6 Sơ đồ Use case người dùng 18

Hình 7 Cơ sở dữ liệu 19

Hình 8 Quá trình CRUD với 4 phương thức API Mapping 22

Hình 9 Thanh toán bằng Paypal SDK 22

Hình 10 JWT framework 24

Hình 11 Hoạt động của JWT 25

Hình 12 JWT trả về khi đăng nhập 26

Hình 13 Swagger trong dự án 28

Hình 14 Cách tổ chức ứng dụng trang quản lý 29

Hình 15 Core Module trang quản lý 30

Hình 16 Shared Module trang quản lý 31

Hình 17 User Module trang quản lý 32

Hình 18 Role Module trang quản lý 32

Hình 19 Event Module trang quản lý 33

Hình 20 Project Module trang quản lý 34

Hình 21 Blogpost Module trang quản lý 35

Hình 22 Meeting Module trang quản lý 35

Hình 23 Profile Module trang quản lý 36

Hình 24 Dashboard Module trang quản lý 36

Hình 25 Cách tổ chức ứng dụng cho trang public 37

Hình 26 Core Module trang public 38

Hình 27 Shared Module trang public 38

Hình 28 Home Module trang public 39

Hình 29 Register-Loing Module trang public 40

Hình 30 Blog Module trang public 41

Hình 31 Event Module trang public 41

Hình 32 Fund - Raising Project Module trang public 42

Hình 33 Me Module trang public 43

Hình 34 Java SE Runtime Environment 51

Hình 35 Apache Tomcat 52

Hình 36 Triển khai database bằng MySQL 52

Hình 37 Spring Boot Application trong Tomcat 52

Hình 38 Kết quả việc Update packaging JAR into WAR 53

Hình 39 Triển khai Tomcat 53

Hình 40 Kết quả thực hiện triển khai trên Tomcat 54

Hình 41 Giao diện công cụ FileZilla FTP Client 55

Hình 42 Triển khai dự án thông qua Trello 56

Hình 43 Trang chủ 57

Hình 44 Trang danh sách bài viết 58

Hình 45 Trang chi tiết bài viết 58

Hình 46 Trang danh sách sự kiện 59

Hình 47 Trang chi tiết sự kiện 59

Hình 48 Form đăng kí tham gia sự kiện 60

Hình 49 Trang danh sách dự án gây quỹ 60

Hình 50 Trang chi tiết dự án gây quỹ 61

Hình 51 Form ủng hộ dự án gây quỹ 61

Hình 52 Trang thanh toán khi ủng hộ (Paypal) 62

Hình 53 Trang quản lý thông tin cá nhân của người dùng 62

Hình 54 Trang liên hệ 63

Hình 55 Trang quản lý 63

Hình 56 Trang tạo người dùng mới 64

Hình 57 Trang quản lý vai trò 64

Hình 58 Tạo mới vai trò 65

Hình 59 Trang phân quyền cho vai trò 65

Hình 60 Trang quản lý bài đăng 66

Hình 61 Trang tạo mới bài đăng 66

Hình 62 Quản lý lịch họp 67

Hình 63 Trang tạo mới cuộc họp 67

Hình 64 Trang xem dự án gây quỹ trên di động 68

Hình 65 Trang chỉnh sửa thông tin cá nhân trên di động 68

Hình 66 Trang xem thông tin cá nhân trên di động 69

Hình 67 Thanh Sidebar trong ứng dụng di động 69

Hình 68 Trang chủ ứng dụng 70

Hình 69 Ủng hộ dự án trên di động 70

MỞ ĐẦU

Lời đầu tiên, chúng em muốn gửi những lời cảm ơn và biết ơn chân thànhnhất của mình tới tất cả những người đã hỗ trợ, giúp đỡ chúng em về kiến thức vàtinh thần trong quá trình thực hiện đồ án

Trước hết chúng em xin chân thành cảm ơn Thầy Nguyễn Văn Hiệu, Giảngviên Khoa Công Nghệ Thông Tin, Trường Đại Học Bách Khoa – Đại Học Đà Nẵng,người đã trực tiếp hướng dẫn, nhận xét, giúp đỡ chúng em trong suốt quá trình thựchiện đồ án

Xin chân thành cảm ơn ban giám hiệu nhà trường, các thầy cô trong KhoaCông Nghệ Thông Tin và các phòng ban nhà trường đã tạo điều kiện tốt nhất chochúng em cũng như các bạn khác trong suốt thời gian làm đồ án

Với đề tài thiết thực và hữu ích cho xã hội, chúng em đã làm việc một cáchđầy nỗ lực với mục tiêu sản phẩm được đến với người dùng một cách dễ dàng vàđầy sự hấp dẫn

Tuy nhiên với vốn kiến thức hạn hẹp, và thời gian làm việc có hạn nên chúng

em không tránh khỏi những thiếu sót Chúng em rất mong nhận được những ý kiến, đóng góp, phê bình của Quý thầy cô để sản phầm được hoàn thiện hơn Đó sẽ là hành trang quý giá để chúng em tiếp tục hoàn thiện kiến thức của mình sau này

Em xin chân thành cảm ơn

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI

1.1 Đề tài

Xây dựng website và ứng dụng di động cho cổng thông tin về sự kiện sinh viên và dự án gây quỹ vì cộng đồng dành cho diễn đàn Svdanang

1.2 Giới thiệu về SVdanang

Diễn đàn Svdanang là một diễn đàn dành cho sinh viên ở Đà Nẵng, là một tổ chức phi lợi nhuận đã thành lập được 15 năm.Tổ chức thường tạo ra các sự kiện dành cho sinh viên đăng kí tham gia cũng như các dự án cộng đồng cần sự giúp đỡ

và gây quỹ từ mọi người Mục tiêu của diễn đàn sẽ là cổng thông tin cho sinh viên

và học sinh tiếp cận được với thông tin và các dự án cộng đồng một cách nhanh chóng và thuận lợi nhất có thể

1.3 Nhu cầu người dùng

 Diễn đàn cần tạo ra 1 website và ứng dụng để cập nhật thông tin các chươngtrình và sự kiện của diễn đàn đến với mọi người Mọi người có thể đăng kí trực tuyến cũng như ủng hộ cho các dự án vì cộng đồng Nhận và đọc các tin tức về hoạt động sinh viên nhanh và thuận tiện Thành viên trong diễn đàn cóthể quản lý thành viên nhân sự trong diễn đàn, tạo cuộc họp nhanh và tiện lợi

 Hệ thống phục vụ cho 3 đối tượng người dùng chính:

o Admin diễn đàn

o Thành viên diễn đàn

o Người dùng là Sinh viên, người ủng hộ…

 Website cho phép người dùng có thể lưu trữ và điền trực tiếp các thông tin vào các Form đăng kí tuyển tình nguyện viên dành cho các sự kiện diễn đàn Svdanang, ngoài ra người dùng còn có thể ủng hộ trực tuyến cho các dự án gây quỹ vì cộng đồng được tổ chức bởi diễn đàn Svdanang

 Thành viên của diễn đàn thì có thể tiếp cận với các lịch họp và nắm bắt thôngtin người đăng ký cũng như thành viên của diễn đàn

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 Spring boot

2.1.1 Giới thiệu

Spring boot là một module của Spring Framework cung cấp tính năng RAD(RapidApplication

Development) để phát triển ứng dụng nhanh Nếu như trước đây, công đoạn khởi tạ

o một dự án Spring khá vất vả từ việc khai báo các dependency trong file pom.xml  cho đến cấu hình bằng XML hoặc annotation phức tạp, thì giờ đây với Spring

Boot, chúng ta có thể tạo các ứng dụng Spring một cách nhanh chóng và cấu hình cũng đơn giản hơn

Dưới đây một số tính năng nổi bật của Spring Boot:

Có các tính năng của Spring Framework

Tạo ứng dụng độc lập, có thể chạy bằng java -jar (cho cả java web)

Cung cấp một loạt các tính năng phi chức năng phổ biến cho các dự án lớn như nhúng trực tiếp web server như Tomcat, Jetty,…

Cấu hình ít, tự động cấu hình bất kì khi nào có thể (Giảm thời gian viết code, tăng năng suất)

Không yêu cầu XML config

Cung cấp nhiều plugin

Chuẩn cho Microservices (Cloud support; giảm việc setup,

config; các thư viện hỗ trợ…)

2.1.2 Phiên bản

Phiên bản 2.1.x

2.1.3 Tạo một Spring boot application

Để tạo một Spring boot application chúng ta cần có các thành phần chính sau:

 Java 1.8

 Gradle 2.3+ hoặc Maven 3.0+

 Spring Framework 5.0.0.BUILD-SNAPSHOT

 An IDE (Spring Tool Suit) – một extention trong eclipse

2.1.4 Giới thiệu RESTful Webservice

2.1.4.1 Giới thiệu

RESTful Web Service là các Web Service được viết dựa trên kiến trúc REST.REST đã được sử dụng rộng rãi thay thế cho các Web Service dựa trên SOAP vàWSDL RESTful WebService nhẹ, dễ dàng mở rộng và bảo trì REST định nghĩa

các quy tắc kiến trúc để bạn thiết kế Web services, chú trọng vào tài nguyên hệthống, bao gồm các trạng thái tài nguyên được định dạng như thế nào và đượctruyền tải qua HTTP, và được viết bởi nhiều ngôn ngữ khác nhau Nếu tính theo sốdịch vụ mạng sử dụng, REST đã nổi lên trong vài năm qua như là một mô hình thiết

kế dịch vụ chiếm ưu thế Trong thực tế, REST đã có những ảnh hưởng lớn và gầnnhư thay thế SOAP và WSDL vì nó đơn giản và dễ sử dụng hơn rất nhiều

2.1.4.2 Xây dựng RESTful Webservice

Quy tắc để tạo ra một ứng dụng WebService tuân thủ 4 quy tắc sau thiết kế cơ bản sau:

 Sử dụng các phương thức HTTP một cách rõ ràng

Bạn muốn thực hiện các thao tác trên dữ liệu cần lưu ý các thao tác sau:

- Để tạo một tài nguyên trên máy chủ, bạn cần sử dụng phương thức POST

- Để truy xuất một tài nguyên, sử dụng GET

- Để thay đổi trạng thái một tài nguyên hoặc để cập nhật nó, sử dụng PUT

- Để huỷ bỏ hoặc xoá một tài nguyên, sử dụng DELETE

 Hiển thị cấu trúc thư mục như các URls

- REST đưa ra một cấu trúc để người dùng có thể truy cập vào tài nguyên của

nó thông qua các URL, tài nguyên ở đây là tất cả những cái mà bạn có thể gọi tên được (Video, ảnh, báo cáo thời tiết, )

- Một vài nguyên tắc bổ sung để lưu ý trong khi nói về cấu trúc địa chỉ của RESTful Web service là:

• Giấu các đuôi tài liệu mở rộng của bản gốc trong máy chủ(.jsp, php, asp), nếu có, vì vậy bạn có thể giấu một số thứ mà không cầnthay đổi địa chỉ Urls

• Để mọi thứ là chữ thường

• Thay thế các khoảng trống bằng gạch chân hoặc hoặc gạch nối (một tronghai loại)

- Khi Client gửi một yêu cầu tới web service nó thường được truyền tải dướidạng XML hoặc JSON và thông thường nhận về với hình thức tương tự.

- Đôi khi Client cũng có thể chỉ định kiểu dữ liệu nhận về mà nó mong muốn(JSON, hoặc XML, ), các chỉ định này được gọi là các kiểu MINE, nó đượcgửi kèm trên phần HEADER của request

- Dưới đây là các kiểu MINE phổ biến thường sử dụng với REST service

Tốc độ, hiệu năng và hiệu suất

Hỗ trợ phát triển toàn diện

2.2.3 Các thành phần chính trong Angular

Hình 1 Thành phần chính trong Angular

Module:

Giúp tổ chức ứng dụng thành các khối chức năng liên kết

Mỗi ứng dụng phải có ít nhất một module, thường là AppModule

Component:

Là cách thức chính xây dựng và xác định thành phần trên trang

Ứng dung sẽ được cấu trúc như một cây Component

Root Component là thành phần cao nhất chứa các thành phần còn lại

Templates:

Cho phép component render HTML trên trang web

Metadata:

Là dạng siêu dữ liệu cho Angular biết cách để thực thi một class

Các metadata decorators thường dùng

là @Component, @Injectable, @Input và @Output

để tạo và thể hiện component và phần view tương ứng

output Nếu chạy trên browser thì input, output chính là các yếu tố thuộc tính (properties) và sự kiện (events)

Data binding:

Là cách thức tự đồng bộ hoá dữ liệu giữa template và component

Component gửi các giá trị, truyền các thuộc tính cho DOM hiển thị

DOM bắt các sự kiện của người dung như click để gửi về cho component thực hiện

Two-way binding: giá trị từ component được hiển thị trên DOM và khi

người dung tác động, thay đổi giá trị này trên DOM thì trong component giá trị

Structual directive: làm thay đổi layout bằng cách thêm, sửa, xoá các phần tử

DOM như *ngFor, *ngIf

Attribute directive: làm thay đổi giao diện hoặc hành vi của một phần tử đã

xuất hiện như ngModel, ngSwitch, ngStyle, ngClass

2.3 Android

2.3.1 Giới thiệu

 Android là một hệ điều hành có mã nguồn mở dựa trên nền tảng Linux được thiết kế dành cho các thiết bị di động có màn hình cảm ứng như điện thoại thông minh và máy tính bảng

 Android gồm 5 phần chính sau được chứa trong 4 lớp:

o Nhân Linux: Đây là nhân nền tảng mà hệ điều hành Android dựa vào

nó để phát triển Đâu là lớp chứa tất cả các thiết bị giao tiếp ở mức thấp dùng để điều khiển các phần cứng khác trên thiết bị Android

o Thư viện: Chứa tất cả các mã cái mà cung cấp cấp những tính năng chính của hệ điều hành Android, đôi với ví dụ này thì SQLite là thư viện cung cấp việc hộ trợ làm việc với database dùng để chứa dữ liệu Hoặc Webkit là thư viện cung cấp những tính năng cho trình duyệt Web

o Android runtime: Là tầng cùng với lớp thư viện Android runtime cungcấp một tập các thư viện cốt lỗi để cho phép các lập trình viên phát triển viết ứng dụng bằng việc sử dụng ngôn ngữ lập trình Java

Android Runtime bao gốm máy ảo Dalvik(ở các version < 4.4, hiện tài là phiên bản máy ảo ART được cho là mạnh mẽ hơn trong việc xử

lý biên dịch) Là cái để điều khiển mọi hoạt động của ứng dụng Android chạy trên nó(máy ảo Dalvik sẽ biên dịch ứng dụng để nó có thể chạy(thực thi) được , tương tự như các ứng dụng được biên dịch trên máy ảo Java vậy) Ngoài ra máy ảo còn giúp tối ưu năng lượng pin cũng như CPU của thiết bị Android

o Android framework: Là phần thể hiện các khả năng khác nhau của Android(kết nối, thông báo, truy xuất dữ liệu) cho nhà phát triển ứng dụng, chúng có thể được tạo ra để sử dụng trong các ứng dụng của họ

o Application: Tầng ứng dụng là tầng bạn có thể tìm thấy chuyển các thiết bị Android như Contact, trình duyệt…Và mọi ứng dụng bạn viết đều nằm trên tầng này

Sau khi được cài đặt vào một thiết bị, ứng dụng sẽ được đặt vào bên trong mộthộp cát bảo mật của chính nó:

 Vì hệ điều hành Android là một hệ thống Linux đa người dùng, trong đó mỗiứng dụng là một người dùng

 Theo mặc định, hệ thống gán cho từng ứng dụng một ID người dùng Linux duy nhất (ID chỉ được dùng bởi hệ thống và không xác định với người dùng)

Hệ thống sẽ gán quyền tất cả các tệp trong một ứng dụng sao cho ID người dùng được gán cho ứng dụng đó thì mới có thể truy cập

 Mỗi một tiến trình có máy ảo riêng của mình, vì thế mã của một ứng dụng sẽ chạy độc lập với các ứng dụng khác

2.3.2.2 Thành phần

người dùng, cửa sổ này thường lấp đầy màn hình nhưng cũng có thể nhỏ hơnmàn hình và nổi lên trên màn hình khác.

Ứng dụng bao gồm nhiều hoạt động liên kết lỏng lẻo với nhau Thường thì một hoạt động trong một ứng dụng, sẽ được quy định là hoạt động chính, nó được trình bày trước khi ứng dụng khởi chạy lần đầu tiên Sau đó, mỗi hoạt động có thể bắt đầu hoạt động khác Mỗi khi một hoạt động mới được khởi tạo, hành động trước đó sẽ dừng lại, nhưng hệ thống vẫn giữ nguyên hoạt động đó trong một ngăn xếp (back-stack) Khi một hoạt động mới được khởi tạo, nó sẽ được đưa lên đỉnh ngăn xếp, chiếm lấy tiêu điểm của người dùng

và theo cơ chế vào sau ra trước của ngăn xếp

Khi một hoạt động bị dừng vì hoạt động khác được khởi tạo, nó được thông báo về sự thay đổi này thông qua vòng đời của hoạt động

 Dịch vụ (Service): là một thành phần chạy ngầm để thực hiện các thao tác chạy lâu hoặc để thực hiện công việc việc cho các ứng dụng từ xa Dịch vụ không cung cấp một giao diện người dùng Ví dụ, một ứng dụng có thể phát nhạc dưới nền trong khi người dùng đang ở một ứng dụng khác hoặc nó có thể tải ứng dụng qua mạng mà không chặn người dùng tương tác với hoạt động Dịch vụ triển khai như một lớp con của Service

 BroadcastsReceive là một thành phần có chức năng hồi đáp lại các thông báotrên hệ thống, có nhiều broadcast receiver trên hệ thống như: pin yếu hoặc pin đã tắt hoặc một bức ảnh đã được chụp

 Intent: Các loại thành phần trên sẽ được kích hoạt bằng một thông báo khôngđồng bộ gọi là Intent Intent sẽ gắn kết các thành phần với nhau lúc runtime

Nó được khởi tạo từ một đối tượng Intent, nó định nghĩa một thông báo để kích hoạt một thành phần Đối với các Activity và Service Intent có chức năng định nghĩa một hoạt động sẽ thực hiện và có thể chỉ định URI của dữ liệu để hành động dựa trên đó

 AndroidManifest (bản kê khai): kê khai các thành phần trong ứng dụng

Xác định quyền của người dùng mà ứng dụng yêu cầu, chẳng hạn truy cập Intenet

o Mô tả mức API tối thiểu mà ứng dụng yêu cầu dựa trên những API

mà ứng dụng sử dụng

o Khai báo các tính năng phần cứng phần mềm được sử dụng hoặc yêu cầu bởi hệ thống

o Các thư viện API mà ứng dụng cần liên kết

2.3.3 Môi trường phát triển

 Hệ điều hành:

Ứng dụng Android có thể được lập trình trên cả 3 nền tảng hệ điều hành phổ

biến nhất hiện nay: Microsoft Windows, Linux và Mac.

 Java development kit (JDK):

JDK là một hệ tiêu chuẩn trong việc triển khai nền tảng Java, bao gồm các trình thông dịch dịch và thư viện lớp

 Android Software Development Kit (SDK):

SDK là bộ Công Cụ Phát Triển Cho Android SDK này sẽ cung cấp cho

chúng ta một bộ các thư viện và công cụ cần thiết để chúng ta có thể build, kiểm tra và debug cho các ứng dụng Android

 Android Studio:

Chức năng của Android Studio là cung cấp giao diện để tạo các ứng dụng và

xử lý phần lớn các công cụ quản lý file phức tạp đằng sau hậu trường Ngôn ngữ lập trình được sử dụng ở đây là Java và được cài đặt riêng trên thiết bị của bạn Android Studio rất đơn giản, bạn chỉ cần viết, chỉnh sửa và lưu các

dự án của mình và các file trong dự án đó Đồng thời, Android Studio sẽ cấp quyền truy cập vào Android SDK

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

3.1 Phân tích và thiết kế hệ thống

3.1.1 Đặc tả chức năng của hệ thống

Diễn đàn Svdanang hiện chỉ đang quảng bá thương hiệu trên Facebook, vì vậy hiện nay diễn đàn muốn tái xây dựng trang website cho chính các hoạt động của diễn đàn

và kèm theo đó là thông tin bên lề liên quan đến sinh viên, và Svdanang đang muốn

có một hệ thống gồm các chức năng chính như sau:

 Quản lý các thành viên trong diễn đàn

o Quản lý về số lượng thành viên diễn đàn

o Quản lý về thông tin thành viên diễn đàn

o Quản lý các thông tin thành viên đăng bài

o Quản lý các cuộc họp của nội bộ thành viên diễn đàn

 Tạo ra một cổng thông tin cho người dùng bên ngoài

o Cung cấp các tin tức hoạt động về sinh viên

o Cung cấp thông tin về các sự kiện đã đang và sẽ diễn ra được tổ chức bởi diễn đàn Svdanang

o Cung cấp thông tin về các dự án vị cộng đồng cần được gây quỹ ủng hộ

o Đăng kí tham gia các hoạt động sự kiện do Svdanang tổ chức

o Thanh toán trực tuyến để ủng hộ các dự án

3.1.2 Phân tích đối tượng

• Quản lý tài khoản người dùng

• Quản lý lịch họp của diễn đàn

• Quản lý bài đăng về sự kiện và dự án

• Quản lý các giao dịch ủng hộ

• Kiểm duyệt các bài viết

• Quản lý thông tin người đăng kí tham gia sự kiệnThành viên diễn đàn • Xem bài đăng về sự kiện, dự án gây quỹ

• Tạo bài đăng về sự kiện, dự án gây quỹ

• Xem lịch họp và báo vắng

• Xem kế hoạch sự kiện

• Ủng hộ dự án gây quỹ

• Quản lý người đăng kí tham gia sự kiệnNgười dùng • Đăng kí tham gia tình nguyện viên, người chơi

3.1.3.3 Người dùng

Hình 6 Sơ đồ Use case người dùng

3.1.4 Cơ sở dữ liệu

Hình 7 Cơ sở dữ liệu

CHƯƠNG 4 XÂY DỰNG CHƯƠNG TRÌNH

4.1 Xây dựng hệ thống

4.1.1 Phần Back-End

4.1.1.1 Triển khai ứng dụng với Maven project.

Maven là công cụ quản lý và thiết lập tự động 1 dự án phần mềm Maven

hỗ trợ việc tự động hóa các quá trình tạo dự án ban đầu, thực hiện biên dịch, kiểm thử, đóng gói và triển khai sản phẩm

Trong mỗi project Maven tạo ra một file pom, trong file này định nghĩa ra những task như task khi chạy test, task khi build và khi chạy Maven sẽ dựa vào những định nghĩa này để thao tác với project

4.1.1.2 Các đối tượng trả về.

o Class ApiResponse: dùng cho việc trả về các phản hồi trạng thái từ Server

<groupId>bkdn.svdanang</groupId>

<artifactId>svdanang</artifactId>

<version>0.0.1-SNAPSHOT</version>

<name>svdanang</name>

<description>Dự án website Sinh Viên Đà Nẵ-ng</

description>

<packaging>jar</packaging>

<groupId>, <artifactId>, <version> bộ ba thông tin

để mô tả tên, version của project

<packaging> định nghĩa định dạng khi đóng gói thành phần, có

thể là jar, war, ear… jar (đóng gói thành jar )

<dependency> nơi khai báo các thư viện sử dụng trong dự án

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>jpa</artifactId>

spring-boot-starter-data-</dependency>

o Class ApiResponseDTO: dùng cho việc trả về các phản hồi trạng thái

từ Server có đối tượng đính kèm

4.1.1.3 Xử lý ngoại lệ

 class FileStorageException extends

RuntimeException xử lý ngoại lệ khi thao tác với File

 class CustomizedResponseEntityExceptionHandler

extends ResponseEntityException xử lý ngoại lệ khi đăng nhập không thành công, truy cập bị từ chối, phương thức không được chấp nhận, BAD REQUEST

 class ResourceNotFoundException extends

RuntimeException xử lý ngoại lệ khi khi không tìm thấy Resource

o NATIVE:

4.1.1.6 Quá trình CRUD với 4 phương thức API Mapping

Hình 8 Quá trình CRUD với 4 phương thức API Mapping

4.1.1.7 Thanh toán bằng Paypal SDK

- /api/paypal/make/payment: Thực hiện trung gian việc tạo đối tượng Payment và gởi token và đường dẫn url để người dung tiếp tục quá trình ủng hộ( Tương ứng quá trình 1 và 2).

- /api/paypal/complete/payment/{projectId}: Thực hiện việc xác nhận ủng hộ, bằng việc nhận PayerId, PaymentId bên phía Paypal trả về và thực hiện lưu thông tin người ủng hộ vào Database.( Tương ứng quá trình 5 và 6)

4.1.1.8 Gọi api tiền tệ từ bên phía thứ 3.

API quy đổi tiền tệ từ USD -> VND và VND -> USD tại :

JSON Web Token (JWT) là 1 tiêu chuẩn mở (RFC 7519) định nghĩa

cách thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng

JSON Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào

"chữ ký" của nó Phần chữ ký của JWT sẽ được mã hóa

lại bằng HMAC hoặc RSA

Hình 10 JWT framework

Những đặc điểm nổi bật của JWT:

1 Kích thước nhỏ: JWT có thể được truyền thông qua URL, hoặc qua giao thức POST, hay nhét vào bên trong phần HTTP Header Kích thước nhỏ hơn ứng với công việc truyền tải sẽ nhanh hơn Dưới đây

là cách thức truyền token vào trong HTTP Header sử

dụng Bearer Schema

Authorization: Bearer <token>

2 Khép kín: Phần Payload (hiểu nôm na là khối hàng) chứa toàn bộ những thông tin mà chúng ta cần tới, ví dụ như thông tin của người dùng (thay vì phải truy vấn cơ sở dữ liệu nhiều lần)

Hoạt động của JWT:

Server sẽ tạo một JWT và trả về cho người dùng thông qua response.

3 Người dùng nhận được JWT do Authentication Server vừa mới trả về làm

"chìa khóa" để thực hiện các "lệnh" tiếp theo đối với Application Server

4 Application Server trước khi thực hiện lệnh được gọi từ phía User, sẽ verify JWT gửi lên Nếu OK, tiếp tục thực hiện lệnh được gọi

Tích hợp JWT trong Spring Framework:

<! For Working with Json Web Tokens (JWT) >

Hình 12 JWT trả về khi đăng nhập

4.1.1.10 Spring Security:

Spring Security là một dự án nổi bật trong hệ sinh thái Spring Spring Security cung cấp các dịch vụ bảo mật toàn diện cho các ứng dụng doanh nghiệp có nền tảng Java EE

Spring Security cung cấp 2 cơ chế cơ bản:

- Authentication (xác thực): là tiến trình thiết lập một principal

Principal có thể hiểu là một người, hoặc một thiết bị, hoặc một

hệ thống nào đó có thể thực hiện một hành động trong ứng

dụng của bạn

- Authorization (phân quyền) hay Access-control: là tiến trình

quyết định xem một principal có được phép thực hiện một hành

động trong ứng dụng của bạn hay không Trước khi diễn tiến tới Authorization, principal cần phải được thiết lập bởi Authentication

UserDetails và UserDetailsService:

- UserDetails là một interface cốt lõi của Spring Security Nó

đại diện cho một principal nhưng theo một cách mở rộng và cụ thể hơn UserDetails bao gồm các method sau:

isAccountNonExpired(): trả về true nếu tài khoản của người dùng chưa hết hạnisAccountNonLocked(): trả về true nếu người dùng chưa bị khóa

isCredentialsNonExpired(): trả về true nếu chứng thực (mật khẩu) của người dùng chưa hết hạn

isEnabled(): trả về true nếu người dùng đã được kích hoạt

- UserDetailsService là một interface có duy nhất một phương

thức loadUserByUsername để thực hiện việc tìm kiếm trong CSDL, record thỏa mãn username Nếu không tìm thấy, ta sẽ ném ra ngoại lệ UsernameNotFoundException

GrantedAuthority: Một GrantedAuthority là một quyền được ban cho

principal Các quyền đều có tiền tố là ROLE_, ví dụ

như ROLE_ADMIN, ROLE_MEMBER

4.1.1.11 Swagger Documentation

Swagger là một bộ công cụ mã nguồn mở để xây dựng OpenAPI

specifications giúp bạn có thể thiết kế, xây dựng tài liệu và sử dụng REST APIs.

Tích hợp Swagger trong Spring Application

<! ADD DOCUMENT by Swagger >

<dependency>

<groupId>io.springfox</groupId>

<artifactId>swagger2</artifactId>

Sử dụng Swagger trong dự án:

Hình 13 Swagger trong dự án

4.1.2 Phần Front-End website

4.1.2.1 Trang quản lý Cách tổ chức ứng dụng:

Hình 14 Cách tổ chức ứng dụng trang quản lý

Ứng dụng được chia thành các module như hình

Module gốc là App Module, trong App Module chứa các module Core, Shared, và các module cho các tính năng của hệ thống:

Dashboard: trang thông tin tổng quan

User: trang quản lý người dùng

Role: trang quản lý vai trò, phân quyền

Event: trang quản lý sự kiện

Meeting: trang quản lý lịch họp

BlogPost: trang quản lý các bài viết

Project: trang quản lý dự án gây quỹ

Profile: trang cập nhật thông tin cá nhân, mật khẩu

Mỗi module tính năng chứa các component (tương ứng với các trang) và các servicegọi API để thao tác với dữ liệu từ server

 Core Module: là module chứa các singleton services, các components và các

tính năng khác mà chỉ khởi tạo 1 thể hiện (instance) trong suốt toàn bộ ứng dụng

Login component: trang đăng nhập vào hệ thống quản trị

Footer component: chứa layout footer của trang web

Sidenav component: chứa các thanh điều hướng chính của trang web

Hình 15 Core Module trang quản lý

 Shared Module: là module chứa tất cả các thành phần dùng chung trong ứng

dụng Ví dụ như các components, pipes và directives

SpinnerOverlayComponent, ConfirmDialogComponent: các component hiển

thị spinner loader và hiển thị dialog xác nhận

Hình 16 Shared Module trang quản lý

Các module chức năng:

 User Module: là module chức các components để quản lý người dùng hệ

thống

UserListComponent: trang hiển thị danh sách người dùng

UserFormComponent: trang hiển thị thông tin chi tiết của người dùng, dùng

để chỉnh sửa hoặc tạo mới người dùng

UserService: dùng để thao tác với dữ liệu người dùng

Hình 17 User Module trang quản lý

 Role Module: là module chứa các components để quản lý vai trò, phân

quyền người dùng

RoleListComponent: trang hiển thị danh sách vai trò

RoleFormComponent: trang hiển thị thông tin chi tiết của vai trò, các quyền

được cấp phép cho vai trò, dùng để chỉnh sửa hoặc tạo mới vai trò

RoleService: dùng để thao tác với dữ liệu vai trò

Hình 18 Role Module trang quản lý

 Event Module: là module chứa các components để quản lý sự kiện

EventListComponent: trang hiển thị danh sách sự kiện

EventFormComponent: trang hiển thị thông tin chi tiết của sự kiện, dùng để chỉnh

EventScheduleFormComponent: trang chỉnh sửa chi tiết lịch trình của sự kiện

VolunteerListComponent: trang hiển thị danh sách tình nguyện viên của sự kiện

VolunteerDetailsComponent: trang xem chi tiết thông tin tình nguyện viên

EventService, EventTopicService: dùng để thao tác với dữ liệu sự kiện, chủ đề sự

kiện

Hình 19 Event Module trang quản lý

 Project Module: là module chứa các components để quản lý dự án gây quỹ

ProjectListComponent: trang hiển thị danh sách dự án

ProjectFormComponent: trang hiển thị thông tin chi tiết của dự án, dùng để chỉnh

sửa hoặc tạo mới dự án

ProjectTopicListComponent: trang hiển thị danh sách chủ đề dự án

ProjectTopicFormComponent: trang hiển thị thông tin chi tiết của chủ đề dự án,

dùng để chỉnh sửa hoặc tạo mới chủ đề dự án

DonationListComponent: trang hiển thị danh sách người ủng hộ cho dự án

DonationFormComponent: trang chỉnh sửa thông tin ủng hộ cho dự án

ProjectService ProjectTopicService: dùng để thao tác với dữ liệu dự án, chủ đề dự

án

Hình 20 Project Module trang quản lý

 BlogPost Module: là module chứa các components để quản lý bài viết.

BlogPostListComponent: trang hiển thị danh sách bài viết

BlogPostFormComponent: trang hiển thị thông tin chi tiết của bài viết, dùng

để chỉnh sửa hoặc tạo mới bài viết

BlogPostService, BlogPostTopicService: dùng để thao tác với dữ liệu bài

viết, chủ đề bài viết

Hình 21 Blogpost Module trang quản lý

 Meeting Module: là module chứa các components để quản lý cuộc họp.

MeetingComponent: trang hiển thị danh sách cuộc họp

MeetingFormComponent: trang hiển thị thông tin chi tiết của cuộc họp, dùng

để chỉnh sửa hoặc tạo mới cuộc họp

MeetingService: dùng để thao tác với dữ liệu cuộc họp

Hình 22 Meeting Module trang quản lý

 Profile Module: là module chứa component trang thông tin cá nhân.

ProfileForm: trang chỉnh sửa thông tin cá nhân, mật khẩu

UserService: dùng để thao tác với dữ liệu người dùng