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

ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC BÁCH KHOA
KHOA CÔNG NGHỆ THÔNG TIN
____***____

BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH

CÔNG NGHỆ PHẦN MỀM
ĐỀ TÀI:

XÂY DỰNG CỔNG THÔNG TIN SỰ KIỆN SINH VIÊN VÀ
DỰ ÁN GÂY QUỸ

Giáo viên hướng dẫn:TS. Nguyễn Văn Hiệu

Đà Nẵng, tháng 04 năm 2019

Đà Nẵng, ngày 01 tháng 12 năm 2017


Mục lục

GVHD: Nguyễn Văn Hiệu

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.
2.1.2.
2.1.3.
2.1.4.

Giới thiệu................................................................................................................................ 7
Phiên bản................................................................................................................................ 7
Tạo một Spring boot application............................................................................................. 7
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

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 1


Mục lục

GVHD: Nguyễn Văn Hiệu

5.3.3. Cấu hình Server điều hướng request đến file index.html............................................................55

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

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 2


Mục lục

GVHD: Nguyễn Văn Hiệu

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

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 3


Mục lục

GVHD: Nguyễn Văn Hiệu

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

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 4


Mục lục

GVHD: Nguyễn Văn Hiệu

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ành
nhấ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ảng
viê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ực
hiện đồ án.
Xin chân thành cảm ơn ban giám hiệu nhà trường, các thầy cô trong Khoa
Công Nghệ Thông Tin và các phòng ban nhà trường đã tạo điều kiện tốt nhất cho
chú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.

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 5


GVHD: Nguyễn Văn Hiệu

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ương
trì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ông
tin người đăng ký cũng như thành viên của diễn đàn.

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 6


GVHD: Nguyễn Văn Hiệu

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(Rapid
Application
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à

Báo cáo đồ án chuyên ngành Công nghệ phần mềm

Trang 7