Tìm hiểu công nghệ meanstack và xây dựng ứng dụng website bệnh viện thú y COWHOPI

LỜI CẢM ƠN Để hoàn thành Khóa luận tốt nghiệp chuyên ngành Công Nghệ Phần Mềm nói chung và quá trình tìm hiểu công nghệ để xây dựng được website bệnh viện thú y CowHopi nói riêng, nhóm c

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

TÌM HIỂU CÔNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG

DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI

GVHD: LÊ VĂN VINH SVTT: LÊ VŨ HOÀNG HIỆP MSSV: 15110206

SVTT: TRẦN PHÚ QUÝ MSSV: 15110298

SK L 0 0 5 7 6 4

- -

LÊ VŨ HOÀNG HIỆP -15110206

Đề Tài:

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

TÌM HIỂU CÔNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI

KHÓA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH TRẦN PHÚ QUÝ - 15110298

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

- -

TRẦN PHÚ QUÝ - 15110298

Đề Tài:

TÌM HIỂU CÔNG NGHỆ MEANSTACK VÀ XÂY DỰNG

ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI

KHÓA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH KHÓA 2015 – 2019

LÊ VŨ HOÀNG HIỆP - 15110206

ĐH SƯ PHẠM KỸ THUẬT

TP.HCM KHOA CNTT

*******

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA

VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: LÊ VŨ HOÀNG HIỆP MSSV 1: 15110206

Họ và tên Sinh viên 2: TRẦN PHÚ QUÝ MSSV 2: 15110298

Ngành: Công nghệ Thông tin

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MEANSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI

Họ và tên giáo viên hướng dẫn: LÊ VĂN VINH

NHẬN XÉT

1 Về nội dung đề tài khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT

TP.HCM KHOA CNTT

*******

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT

NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: LÊ VŨ HOÀNG HIỆP MSSV 1: 15110206

Họ và tên Sinh viên 2: TRẦN PHÚ QUÝ MSSV 2: 15110298

Ngành: Công nghệ Thông tin

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MEANSTACK VÀ XÂY DỰN ỨNG DỤNG WEBSITE BỆNH VIỆN THÚ Y COWHOPI

Họ và tên giáo viên phản biện: NGUYỄN MINH ĐẠO

NHẬN XÉT

1 Về nội dung đề tài khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Để hoàn thành Khóa luận tốt nghiệp chuyên ngành Công Nghệ Phần Mềm nói chung và quá trình tìm hiểu công nghệ để xây dựng được website bệnh viện thú y

CowHopi nói riêng, nhóm chúng em xin gửi lời cảm ơn chân thành đến:

Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM đã tạo điều kiện về cơ

sở vật chất tốt, đáp ứng được nhu cầu của sinh viên, giảng viên với phòng học sạch đẹp, máy chiếu, wifi để phục vụ cho việc học tập và tìm kiếm thông tin của sinh viên, giảng dạy của giảng viên

Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM đã tạo điều kiện thuận lợi cho nhóm chúng em thực hiện đề tài khóa luận tốt nghiệp này

Giảng viên hướng dẫn Thầy Lê Văn Vinh, người đã giảng dạy, hướng dẫn và chỉ bảo tận tình, chi tiết, giải đáp thắc mắc kịp thời để chúng em có thể hoàn thành đề tài khóa luận tốt nghiêp này một cách tốt nhất

Xin chân thành cảm ơn các anh, chị khóa trên và bạn bè đã ủng hộ, giúp đỡ và động viên chúng em trong thời gian học tập và nghiên cứu khóa luận tốt nghiệp Do chưa

có nhiều kinh nghiệm nên không thể tránh khỏi những thiếu sót và hạn chế, rất mong nhận được ý kiến đóng góp từ phía thầy, cô để đề tài được hoàn thiện hơn nữa

TP Hồ Chí Minh, ngày … tháng 09 năm 2019

Nhóm sinh viên thực hiện

Lê Vũ Hoàng Hiệp

Trần Phú Quý

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ tên SV: Lê Vũ Hoàng Hiệp ……… MSSV: 15110206

GV hướng dẫn: TS Lê Văn Vinh

Nhiệm vụ của khóa luận:

- Tìm hiểu công nghệ MeanSatck

- Xây dựng website bệnh viện thú y CowHopi

Đề cương viết luận văn:

1 Phần 1: MỞ ĐẦU

1 Tính cấp thiết của đề tài

2 Mục đích của đề tài

3 Đối tượng và phạm vị nghiên cứu

4 Phương pháp nghiên cứu

2 Phần 2: NỘI DUNG

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

ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN



1.2 Giới thiệu Angular:

1.3 Giới thiệu NodeJs:

1.4 Giới thiệu Express:

1.5 Giới thiệu MongoDb:

1.6 Kết Luận:

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

2.1 Khảo sát hiện trạng:

2.2 Xác định yêu cầu:

2.2.1 Yêu cầu chức năng:

2.2.2 Yêu cầu phi chức năng:

2.2.3 Lược đồ Use Case:

2.2.3.1 Use Case người dùng và nhân viên:

2.2.3.2 Use Case quản trị viên:

2.2.4 Mô tả Use Case:

CHƯƠNG 3: THIẾT KẾ WEBSITE

3.1 Đặc tả Website:

3.2 Thiết kế cơ sở dữ liệu:

3.3 Thiết kế giao diện:

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ

KẾ HOẠCH THỰC HIỆN STT Thời gian (Tuần mấy) Công việc đã làm

1 Tuần 1(Bắt đầu 15/03/2019) Khảo sát hiện trạng , xác định yêu cầu

2 Tuần 2 (22/03/2019) Vẽ useCase , đặc tả useCase

3 Tuần 3(29/03/2019) Hoàn thiện đặc tả useCase , thiết kế cơ sở dữ liệu

4 Tuần 4(05/04/2019) Thiết kế giao diện người dùng

5 Tuần 5(12/04/2019) Thiết kế giao diện nhân viên , bác sĩ

6 Tuần 6(19/04/2019) Thiết kế gioa diện admin , hoàn thành giao diện

9 Tuần 9(10/05/2019) Chức năng nhân viên 50%

10 Tuần 10(17/05/2019) Chức năng nhân viên 50% , chức năng bác sĩ 60%

13 Tuần 13 (07/06/2019) Hoàn thiện admin , xếp lịch trực

14 Tuần 14(14/06/2019) Hoàn thiện chức năng thống kê , kiểm lỗi

15 Tuần 15(21/06/2019) Viết báo cáo

16 Tuần 16(28/06/2019) Viết báo cáo

17 Tuần 17(5/07/2019)

Ngày 30 tháng 12 năm 2018

Người viết đề cương

Lê Vũ Hoàng Hiệp

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ………

………

………

………

………

………

………

………

………

………

………

………

………

………

(Ký và ghi rõ họ tên)

Mục Lục

LỜI CẢM ƠN 8

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP 9

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 12

Mục Lục 13

DANH MỤC HÌNH ẢNH 1

BẢNG MỤC BẢNG MẪU 5

PHẦN MỞ ĐẦU 9

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 9

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 9

3.1 Đối tượng nghiên cứu 9

3.2 Phạm vi nghiên cứu 9

4 PHƯƠNG PHÁP NGHIÊN CỨU 10

CHƯƠNG 1: CỞ SỞ LÝ THUYẾT 11

1.1 Giới thiệu MeanStack : 11

1.2 Giới thiệu Angular: 12

1.3 Giới thiệu NodeJs : 14

1.4 Giới thiệu ExpressJs : [2] 17

1.5 Giới thiệu về MongoDb: 19

1.6 Kết Luận : 20

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 21

2.1 Khảo sát hiện trạng: 21

2.1.1 Khảo sát hiện trạng: 21

2.1.2 Khảo sát các WebSite liên quan : 22

2.2 Xác định yêu cầu : 24

2.2.1 Yêu cầu chức năng : 24

2.2.2 Yêu cầu phi chức năng : 26

2.2.3 Lược đồ Use Case : 27

2.2.4 Mô tả UseCase : 29

CHƯƠNG 3: THIẾT KẾ WEBSITE 84

3.1 Đặc tả Website: 84

3.2 Thiết kế cơ sở dữ liệu : 86

3.3 Thiết kế giao diện : 87

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 142

4.1 Cài đặt: 142

4.2.Kiểm thử : 142

PHẦN KẾT LUẬN 148

1 Kết quả đạt được: 148

2 Ưu điểm: 149

3 Hạn chế: 149

4 Hướng phát triển: 149

DANH MỤC TÀI LIỆU THAM KHẢO 149

DANH MỤC HÌNH ẢNH

Hình 1.1.1: MeanStack[1] ……….11

Hình 1.2.1 Component[2] ……… 13

Hình 2.1.1 Hình ảnh minh họa websitethuypetpro.com.vn[13] ……… 22

Hình 2.1.2.1 Hình ảnh minh họa website sasakihospital.com [14] ……… 23

Hình 2.2.3.1 Usecase người dùng , nhân viên , bác sĩ ……… 27

Hình 2.2.3.2 Usecase quản trị viên ……… 28

Hình 2.2.4.1 Sequence diagram đăng ký ……… 29

Hình 2.2.4.2 Sequence diagram đăng nhập ……… 30

Hình 2.2.4.3 Sequence diagram đăng nhập ……… 31

Hình 2.2.4.4 Sequence diagram cập nhập thông tin cá nhân ………32

Hình 2.2.4.5 Sequence diagram cập nhập thông tin thú cưng ……… 33

Hình 2.2.4.6 Sequence diagram đổi mật khẩu ……… 34

Hình 2.2.4.7 Sequence diagram xem thông tin bệnh viện ………35

Hình 2.2.4.8 Sequence diagram tìm kiếm dịch vụ ………36

Hình 2.2.4.9 Sequence diagram xem thông tin dịch vụ ………37

Hình 2.2.4.10 Sequence diagram xem nội dung bài viết ……… 38

Hình 2.2.4.11 Sequence diagram lịch hẹn ………40

Hình 2.2.4.12 Sequence diagram xem thông tin lịch hẹn ……….41

Hình 2.2.4.13 Sequence diagram chỉnh sửa lịch hẹn ………42

Hình 2.2.4.14 Sequence diagram lịch sử bệnh án ………43

Hình 2.2.4.15 Sequence diagram xem thông tin dịch vụ ……… 44

Hình 2.2.4.15 Sequence diagram xem lịch sử thanh toán……… 45

Hình 2.2.4.15 Sequence diagram xem thông tin hóa đơn ……….46

Hình 2.2.4.15 Sequence diagram xem lịch trực phòng khám ……… 47

Hình 2.2.4.19 Sequence diagram xem danh sách dịch vụ ………48

Hình 2.2.4.20 Sequence diagram tạo bệnh án ……… 49

Hình 2.2.4.22 Sequence diagram kiểm tra lịch hẹn ……….51

Hình 2.2.4.23 Sequence diagram gọi số thứ tự ………52

Hình 2.2.4.24 Sequence diagram yêu cầu dịch vụ………54

Hình 2.2.4.25 Sequence diagram nhập kết quả ………55

Hình 2.2.4.26 Sequence diagram nhập toa thuốc ……….56

Hình 2.2.4.27 Sequence diagram xem danh sách thuốc ……… 57

Hình 2.2.4.28 Sequence diagram kiểm tra kho thuốc ……… 58

Hình 2.2.4.29 Sequence diagram nhập thuốc ……… 59

Hình 2.2.4.30 Sequence diagram thống kê thuốc ………60

Hình 2.2.4.31 Sequence diagram xem lịch làm việc ………61

Hình 2.2.4.32 Sequence diagram cập nhập thông tin bệnh viện ……… 62

Hình 2.2.4.33 Sequence diagram tạo tài khoản nhân viên ……… 63

Hình 2.2.4.34 Sequence diagram khóa tài khoản nhân viên ……….64

Hình 2.2.4.35 Sequence diagram Xem danh sách nhân viên……… 65

Hình 2.2.4.36 Sequence diagram xem danh sách dịch vụ ………66

Hình 2.2.4.37 Sequence diagram thêm dịch vụ ………67

Hình 2.2.4.38 Sequence diagram khóa dịch vụ ………68

Hình 2.2.4.39 Sequence diagram cập nhập dịch vụ ……….69

Hình 2.2.4.40 Sequence diagram xóa dịch vụ ……… 70

Hình 2.2.4.41 Sequence diagram xem danh sách bài viết ………71

Hình 2.2.4.42 Sequence diagram Thêm bài viết ……… 72

Hình 2.2.4.43 Sequence diagram khóa bài viết ………73

Hình 2.2.4.44 Sequence diagram cập nhập bài viết ……….74

Hình 2.2.4.45 Sequence diagram xóa bài viết ……… 75

Hình 2.2.4.46 Sequence diagram xem danh sách phòng khám ………76

Hình 2.2.4.47 Sequence diagram khóa phòng khám ………77

Hình 2.2.4.48 Sequence diagram cập nhập phòng khám ……….78

Hình 2.2.4.50 Sequence diagram xếp lịch hẹn ………80

Hình 2.2.4.51 Sequence diagram thống kê doanh thu ……….81

Hình 2.2.4.52 Sequence diagram thống kê dịch vụ ……….82

Hình 2.2.4.15 Sequence diagram thống kê lượt truy cập ………83

Hình 3.2.1 Cơ sở dữ liệu ……… 86

Hình 3.3.1 Giao diện đăng nhập của khách hàng ……….87

Hình 3.3.2 Giao diện đăng ký thành viên ……….88

Hình 3.3.3 Giao diện header người dùng ……….89

Hình 3.3.4 Giao diện trang chủ người dùng ……….91

Hình 3.3.5 Giao diện thông tin dịch vụ phía người dùng ……….92

Hình 3.3.6 Giao diện thông tin bài viết phía người dùng ……….94

Hình 3.3.6 Giao diện đặt lịch của thành viên ……… 95

Hình 3.3.8 Giao diện cài đặt lịch của thành viên ……… 97

Hình 3.3.9 Giao diện thông tin cá nhân của thành viêt ………98

Hình 3.3.10 Giao diện thông tin thú cưng của thành viên ………99

Hình 3.3.11 Giao diện đăng nhập của nhân viên ………100

Hình 3.3.12 Giao diện header của nhân viên ……… 102

Hình 3.3.13 Giao diện trang chủ nhân viên ………102

Hình 3.3.14 Giao diện thông tin cá nhân của nhân viên……… 103

Hình 3.3.16 Giao diện lịch làm việc của nhân viên ……… 104

Hình 3.3.17 Giao diện thông tin khách hàng của nhân viên ……… 105

Hình 3.3.18 Giao diện thao tác bệnh án của nhân viên ……… 106

Hình 3.3.19 Giao diện tạo bệnh án ……….108

Hình 3.3.20 Giao diện tạo bệnh án ……….109

Hình 3.3.21 Giao diện thanh toán hóa đơn ……….111

Hình 3.3.22 Giao diện chi tiết hóa đơn ……… 112

Hình 3.3.23 Giao diện kiểm ra hóa đơn ……… 113

Hình 3.3.25 Giao diện kho thuốc ……….115

Hình 3.3.26 Giao diện nhập thuốc bằng phương pháp thủ công ………116

Hình 3.3.27 Giao diện nhập thuốc bằng file excel ……….117

Hình 3.3.28 Giao diện đăng nhập của bác sĩ ……… 118

Hình 3.3.29 Giao diện phòng khám của bác sĩ ……… 119

Hình 3.3.30 Giao diện thêm thuocs vào bệnh án ………121

Hình 3.3.31 Giao diện đăng nhập của quản trị viên ……… 122

Hình 3.3.32 Giao diện trang chủ admin ……….123

Hình 3.3.33 Giao diện quản lý tài khoản ………124

Hình 3.3.35 Giao diện cấp tài khoản cho nhân viên ……… 125

Hình 3.3.36 Giao diện quản lý khách hàng ……….126

Hình 3.3.37 Giao diện thông tin khách hàng của quản trị viên ……… 127

Hình 3.3.38 Giao diện quản lý nhân viên ……… 128

Hình 3.3.39 Giao diện thông tin nhân viên ……… 129

Hình 3.3.40 Giao diện quản lý dịch vụ ……… 129

Hình 3.3.41 Giao diện thêm dịch vụ ………131

Hình 3.3.43 Giao diện cập nhập dịch vụ ……….132

Hình 3.3.44 Giao diện quản lý bài viết ……… 133

Hình 3.3.45 Giao diện thêm bài viết ……… 134

Hình 3.3.46 Giao diện cập nhập bài viết ………135

Hình 3.3.47 Giao diện quản lý phòng khám ……… 136

Hình 3.3.48 Giao diện thêm phòng khám ……… 137

Hình 3.3.49 Giao diện cập nhập phòng khám ………137

Hình 3.3.50 Giao diện sắp xếp lịch làm việc ……… 138

Hình 3.3.51 Giao diện thống kê lượt truy cập ………139

Hình 3.3.52 Giao diện thống kê doanh thu ……….140

Hình 3.3.53 Giao diện thống kê dịch vụ ……….141

BẢNG MỤC BẢNG MẪU

Bảng 2.2.4.1 Mô tả usecase đăng ký……….29

Bảng 2.2.4.2 Mô tả usecase đăng nhập ………30

Bảng 2.2.4.3 Mô tả usecase đăng xuất ……….31

Bảng 2.2.4.4 Mô tả usecase cập nhập thông tin cá nhân ……… 32

Bảng 2.2.4.5 Mô tả usecase cập nhập thông tin thú cưng ………33

Bảng 2.2.4.6 Mô tả usecase đổi mật khẩu ………34

Bảng 2.2.4.7 Mô tả usecase xem thông tin bệnh viện ……… 35

Bảng 2.2.4.8 Mô tả usecase tìm kiếm dịch vụ ……… 36

Bảng 2.2.4.9 Mô tả usecase xem thông tin dịch vụ ……… 37

Bảng 2.2.4.10 Mô tả usecase xem nội dung bài viết ………38

Bảng 2.2.4.11 Mô tả usecase đặt lịch ……… 39

Bảng 2.2.4.12 Mô tả usecase xem thông tin lịch hẹn ……… 40

Bảng 2.2.4.13 Mô tả usecase chỉnh sửa lịch hẹn ……… 41

Bảng 2.2.4.14 Mô tả usecase xem lịch sử bệnh án ……… 42

Bảng 2.2.4.15 Mô tả usecase xem thông tin bệnh án ……… 43

Bảng 2.2.4.16 Mô tả usecase xem lịch sử thanh toán ……… 44

Bảng 2.2.4.17 Mô tả usecase xem thông tin hóa đơn ……… 45

Bảng 2.2.4.18 Mô tả usecase xem lịch trực phòng khám ……….46

Bảng 2.2.4.19 Mô tả usecase xem danh sách dịch vụ ……… 47

Bảng 2.2.4.20 Mô tả usecase tạo bệnh án ……….49

Bảng 2.2.4.21 Mô tả usecase cấp STT ……….50

Bảng 2.2.4.22 Mô tả usecase kiểm tra lịch hẹn ………51

Bảng 2.2.4.23 Mô tả usecase gọi số TT ………52

Bảng 2.2.4.25 Mô tả usecase nhập kết quả ……… 54

Bảng 2.2.4.26 Mô tả usecase nhập toa thuốc ………55

Bảng 2.2.4.27 Mô tả usecase xem danh sách thuốc ……….56

Bảng 2.2.4.28 Mô tả usecase kiểm tra kho thuốc ……….57

Bảng 2.2.4.29 Mô tả usecase nhập thuốc vào kho……… 58

Bảng 2.2.4.30 Mô tả usecase thống kê thuốc ……… 59

Bảng 2.2.4.31 Mô tả usecase xem lịch làm việc ……… 60

Bảng 2.2.4.32 Mô tả usecase cập nhập thông tin bệnh viện ……….61

Bảng 2.2.4.33 Mô tả usecase tạo tài khoản nhân viên ……… 62

Bảng 2.2.4.34 Mô tả usecase khóa tài khoản nhân viên ……… 63

Bảng 2.2.4.35 Mô tả usecase xem danh sách nhân viên ……… 64

Bảng 2.2.4.36 Mô tả usecase xem danh sách dịch vụ ……… 65

Bảng 2.2.4.37 Mô tả usecase thêm dịch vụ ……… 66

Bảng 2.2.4.38 Mô tả usecase khóa dịch vụ ……… 67

Bảng 2.2.4.39 Mô tả usecase cập nhập dịch vụ ………68

Bảng 2.2.4.40 Mô tả usecase xóa dịch vụ ………69

Bảng 2.2.4.41 Mô tả usecase xem danh sách bài viết ……… 70

Bảng 2.2.4.42 Mô tả usecase thêm bài viết ……… 71

Bảng 2.2.4.43 Mô tả usecase khóa bài viết ……… 72

Bảng 2.2.4.44 Mô tả usecase cập nhập bài viết……… 73

Bảng 2.2.4.45 Mô tả usecase xóa bài viết ………74

Bảng 2.2.4.46 Mô tả usecase xem danh sách phòng khám ……… 75

Bảng 2.2.4.47 Mô tả usecase thêm phòng khám ……… 76

Bảng 2.2.4.48 Mô tả usecase cập nhập phòng khám ………77

Bảng 2.2.4.49 Mô tả usecase xóa phòng khám ………78

Bảng 2.2.4.50 Mô tả usecase xếp lịch làm việc ………79

Bảng 2.2.4.51 Mô tả usecase thống kê doanh thu ………80

Bảng 2.2.4.53 Mô tả usecase thống kê dịch vụ ………82

Bảng 3.3.1 Danh sách đối tượng trong giao diện đăng nhập của khách hàng ………….87 Bảng 3.3.2 Danh sách đối tượng trong giao diện đăng ký thành viên ……….88 Bảng 3.3.3 Danh sách đối tượng trong header người dùng ……….89 Bảng 3.3.4 Danh sách đối tượng trong giao diện trang chủ người dùng ……….90 Bảng 3.3.5 Danh sách đối tượng trong giao diện thông tin dịch vụ ……….93

Bảng 3.3.6 Danh sách đối tượng trong giao diện nội dung bài viết ……….93 Bảng 3.3.7 Danh sách đối tượng trong giao diện đặt lịch ………96 Bảng 3.3.9 Danh sách đối tượng trong giao diện cài đặt lịch ……… 97 Bảng 3.3.10 Danh sách đối tượng trong giao diện thông tin cá nhân ……… 98

Bảng 3.3.11 Danh sách đối tượng trong giao diện thông tin thú cưng ……… 100 Bảng 3.3.12 Danh sách đối tượng trong giao diện đăng nhập nhân viên ……… 101 Bảng 3.3.13 Danh sách đối tượng trong giao diện header nhân viên ……….102 Bảng 3.3.14 Danh sách đối tượng trong giao diện trang chủ nhân viên ……….103 Bảng 3.3.15 Danh sách đối tượng trong giao diện thông tin cá nhân của nhân viên… 104

Bảng 3.3.16 Danh sách đối tượng trong giao diện lịch làm việc………105 Bảng 3.3.17 Danh sách đối tượng trong giao diện thông tin khách hàng ……… 106 Bảng 3.3.18 Danh sách đối tượng trong giao diện bệnh án của nhân viên ………107 Bảng 3.3.19 Danh sách đối tượng trong giao diện tạo bệnh án……… 108 Bảng 3.3.20 Danh sách đối tượng trong giao diện thông tin bệnh án ………110

Bảng 3.3.21 Danh sách đối tượng trong giao diện thanh toán ……… 111 Bảng 3.3.22 Danh sách đối tượng trong giao diện chi tiết hóa đơn ……… 112 Bảng 3.3.23 Danh sách đối tượng trong giao diện kiểm tra hóa đơn ……….113 Bảng 3.3.24 Danh sách đối tượng trong giao diện tạo hóa đơn ……….114 Bảng 3.3.25 Danh sách đối tượng trong giao diện kho thuốc ………115

Bảng 3.3.26 Danh sách đối tượng trong giao diện nhập thuốc bằng tay ………116 Bảng 3.3.27 Danh sách đối tượng trong giao diện nhập thuốc bằng excel ………117

Bảng 3.3.29 Danh sách đối tượng trong giao diện phòng khám ………120

Bảng 3.3.30 Danh sách đối tượng trong giao diện thêm thuốc bệnh án ……….121 Bảng 3.3.31 Danh sách đối tượng trong giao diện đăng nhập quản trị viên ………… 122 Bảng 3.3.33 Danh sách đối tượng trong giao diện quản lý tài khoản ……….124 Bảng 3.3.35 Danh sách đối tượng trong giao diện tạo tài khoản ………125 Bảng 3.3.36 Danh sách đối tượng trong giao diện quản lý nhân viên ………126

Bảng 3.3.37 Danh sách đối tượng trong giao diện thông tin khách hàng ……… 127 Bảng 3.3.38 Danh sách đối tượng trong giao diện quản lý nhân viên ………128 Bảng 3.3.39 Danh sách đối tượng trong giao diện quản lý dịch vụ ……… 130 Bảng 3.3.40 Danh sách đối tượng trong giao diện thêm dịch vụ ……… 131

Bảng 3.3.41 Danh sách đối tượng trong giao diện quản lý bài viết ……… 133 Bảng 3.3.40 Danh sách đối tượng trong giao diện cập nhập phòng khám ……….137 Bảng 3.3.50 Danh sách đối tượng trong giao diện sắp xếp lịch trực ……… 138 Bảng 3.3.51 Danh sách đối tượng trong giao diện thống kê lượt truy cập ……….139 Bảng 3.3.52 Danh sách đối tượng trong giao diện thống kê doanh thu ……….140

Bảng 3.3.53 Danh sách đối tượng trong giao diện thống kê dịch vụ ……….141

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Ngày nay nhu cầu cuộc sống của mỗi người ngày càng tăng cao cả về nhu cầu vật chất, lẫn tinh thần Cùng với sự phát triền của các hiệp hội bảo vệ động vật, và sự yêu mến động vật của giới trẻ ngày nay, những vật nuôi trong nhà dần trở thành những người bạn thân, những đứa con cưng trong mỗi gia đình Vì vậy nhu cầu về chăm sóc, làm đẹp, khám chữa bệnh cho vật nuôi ngày càng tăng cao Nhận thấy được sự phát triển của các

cơ sở thú y và nhu cầu số hóa quá trình khám chữa bệnh và quản lý của các bệnh viện thú

y nhằm nâng cao hiệu quả làm việc và mang lại lợi ích cho khách hàng Vì vậy nhóm em

đã chọn đề tài “Tìm hiểu công nghệ MeanStack và xây dựng website bệnh viện thú y CowHopi” nhằm cung cấp giải pháp giải quyết vấn đề đó

2 MỤC ĐÍCH CỦA ĐỀ TÀI

- Tìm hiểu về công nghệ MeanStack

- Ứng dụng công nghệ xây dựng dựng website bệnh viện thú y CowHopi

- Viết báo cáo khoa học

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

3.1 Đối tượng nghiên cứu

- Công nghệ MeanStack

- Các công nghệ liên quan như socket-io, ajax

- Các công nghệ và thư viện phía front-end như: Jquery, Bootstrap, mDatatable

- Lĩnh vực phát triển website: website bệnh viên thú y

3.2 Phạm vi nghiên cứu

- Tìm hiểu các công nghệ được sử dụng trong đề tài: MeanStack

- Tìm hiểu nghiệp vụ bệnh viện thú y

- Tìm hiểu các nghiệp vụ liên quan đến phát triển 1 website hoàn chỉnh, có tính

4 PHƯƠNG PHÁP NGHIÊN CỨU

Để thực hiện mục tiêu và nhiệm vụ nghiên cứu, nhóm đã sử dụng các phương pháp nghiên cứu sau:

- Phương pháp nghiên cứu tài liệu: đọc ebook, các tài liệu tham khảo, và các bài viết liên quan đến MeanStack

- Phương pháp chuyên gia: nhờ sự góp ý, giúp đỡ, tư vấn từ giáo viên hướng dẫn và các thầy cô trong khoa Công nghệ thông tin trường Đại học Sư phạm kỹ thuật TP.HCM

PHẦN NỘI DUNG CHƯƠNG 1: CỞ SỞ LÝ THUYẾT

1.1 Giới thiệu MeanStack :

NodeJs: Là một nền tảng được xây dựng dựa trên “V8 javascript engine”

ExpressJs: Là frame word của nodejs Cung cấp các tính năng mạnh mẽ cho việc xây dựng một ứng dụng web hoặc web API

MongoDb: Đóng vai trò là database nới lưu giữ dữ liệu của ứng dụng

1.1.2 Đặc điểm nổi bật của MeanStack:[3]

- Là mã nguồn mở hoàn toàn

- Hỗ trợ mô hình MVC

- Thống nhất ngôn ngữ trong toàn bộ stack

- Có khả năng xây dựng các ứng dụng thời gian thực

1.2 Giới thiệu Angular:

1.2.1 Khái niệm :

Angular là một bộ Javascript Framework rất mạnh và thường được sử dụng

để xây dựng Single Page Application (SPA) Nó hoạt động dựa trên các thuộc tính mở rộng HTML Là một Framework mạnh mẽ được phát triển bởi

Google vào năm 2010 với phiên bản AngularJS , đến nay đã có phiên bản

Angular 7 với ngôn ngữ chính đó là typescript

1.2.2 Module:

Một TypeScript/ES6 module là một cách để đóng gói, nhóm, tái sử dụng, phân phối và nạp code trong JavaScript

Nói chung, một module sẽ chứa code, đóng gói một chức năng cụ thể

Module sẽ phân phối chức năng này tới phần còn lại của ứng dụng bằng cách định nghĩa một loạt exports, sau đó các phần khác của hệ thống có thể import

Angular chia sự phát triển ứng dụng thành các Module khác nhau Tất cả các ứng dụng của Angular đều có 1 module gốc, module gốc được gọi

là AppModule và có ít nhất một lớp NgModule.

Tùy theo quy mô của ứng dụng, với ứng dụng nhỏ chỉ cần một module là

đủ Tuy nhiên với các ứng dụng lớn có thể có chứa rất nhiều các Module khác

1.2.3 Component trong angular[2] :

Một ứng dụng được tạo bởi angular thực chất là một tập hợp các

Component, chúng ta tạo ra từng Component và sắp xếp chúng lại để tạo ra ứng

dụng

Hình 1.2.1 Component [2]

Một Angular Component bao gồm:

 Một mẫu (template) cái mà sẽ tạo ra giao diện (layout view) cho người dùng, template này được tạo ra từ HTML Trên trang HTML này, chúng ta sẽ sử dụng

Angular Binding và Directives để tăng sức mạnh cho View.Hỗ trợ tất cả các bộ công

cụ như JQuery, Bootstrap,

 Component sẽ có một Class để chúng ta liên kết với View Các Class này được tạo ra bằng TypeScript Class có chứa các thuộc tính và phương thức, cũng tương tự như định nghĩa Class của lập trình hướng đối tượng

 Một phần không thể thiếu khác của Component là Metadata, nó cung cấp

thông tin bổ xung cho Angular Component và giúp định nghĩa Class này như một

Angular Component Metadata được định nghĩa bởi một Decorator Một decorator có thể hiểu đơn giản là phương thức thêm Metadata vào Class

1.2.4 Directive :

Directives là một đối tượng giúp chúng ta dễ dàng thay đổi một đối tượng khác và cách áp dụng rất đơn giản và linh hoạt

- Component-Directives với template

- Structural directives-thay đổi cấu trúc DOM bằng việc thêm bớt các phần tử trong DOM Ví dụ điển hình của structural directive chính

là *ngIf và *ngFor

- Attribute directives-thay đổi giao diện và tương tác của các đối tượng hoặc thay đổi directive khác

1.2.5 Binding data :

Angular hỗ trợ giao tiếp dữ liệu giữa view với controller , giữa các

component với component , giữa service với service một cách mạnh mẽ và linh hoạt Angular cung cấp nhiều phương thức binding data khác nhau như Interpolation, one way binding , tow way binding , event binding

1.2.6 Đặc điểm nổi trội[7] :

 Angular sử dụng class trong ES6 với một loạt các thuộc tính để xây dựng cấu trúc từng thành phần

 Mô hình MVVM trong Angular :

- Phần giao diện (view) được định nghĩa trong một template bao hàm HTML dành cho một component nhất định Template có thể là toàn bộ Layout hoặc bất cứ mảnh ghép nào trong Layout đó

- Model được định nghĩa như là các thuộc tính của component class Có thể hiểu là dữ liệu, dựa vào đó để phần View sử dụng để thực thi

- view/model là class quản lý cả view cũng như model Là phần code sẽ

xử lý việc truy xuất dữ liệu, đồng thời thực thi các tương tác của người dùng trên view

Với việc ứng dụng các điểm tích cực của các thành phần trên, Angular khiến việc phát triển ứng dụng trở nên dễ dàng và hiệu quả hơn

1.3 Giới thiệu NodeJs :

1.3.1 Khái niệm về NodeJs :[10]

Node.js là một nền tảng dựa vào javascript được xây dụng trên Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn Node.js sử dụng các phần phát sinh các sự kiện (event-driven), mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng dụng về dữ liệu thời gian thực chạy trên các thiết bị phân tán

NodeJs là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server và các ứng dụng liên quan đến mạng Ứng dụng Node.js được viết bằng Javascript và có thể chạy trong môi trường Node.js trên hệ điều hành Window, Linux

Node.js cung cấp các module Javascript đa dạng từ đó đơn giản hóa sự phát triển của các ứng dụng web sử dụng Node.js với các phần mở rộng

1.3.2 Đặc điểm NodeJs :

- Không đồng bộ và hướng sự kiện : Tất cả các API của thư viện Node.js

đều không đồng bộ Về cơ bản, điều đó có nghĩa là máy chủ dựa trên Node.js không bao giờ chờ API trả về dữ liệu Máy chủ chuyển sang API tiếp theo sau khi gọi nó và trong Node.js có sẵn một cơ chế thông báo để giúp máy chủ nhận được phản hồi từ lệnh gọi API trước đó

- Tốc độ rất nhanh : Được xây dựng trên Công cụ JavaScript V8 của

Google Chrome, thư viện Node.js rất nhanh trong việc thực thi mã

- Single Threaded nhưng có khả năng mở rộng cao : Node.js sử dụng một

mô hình luồng đơn với vòng lặp sự kiện Cơ chế sự kiện giúp máy chủ phản hồi theo cách không chặn và làm cho máy chủ có khả năng mở rộng cao so với các máy chủ truyền thống tạo ra các luồng hạn chế để xử lý các yêu cầu Node.js sử dụng một chương trình luồng đơn và cùng một chương trình có thể cung cấp dịch

vụ cho số lượng yêu cầu lớn hơn nhiều so với các máy chủ truyền thống như Máy chủ HTTP Apache

- Ít tốn bộ nhớ đệm : Các ứng dụng Node.js tiêu tốn bộ nhớ đệm rất ít Các

ứng dụng này chỉ đơn giản là xuất dữ liệu trong khối

1.3.3 Khởi tạo web-server với NodeJs[8]:

Node.js cung cấp một modules http có thể được sử dụng để tạo HTTP

client-server Sau đây là cấu trúc tối thiểu của máy chủ HTTP lắng nghe tại cổng

Cấu trúc của một file server.js như sau :

 Import modules http có sẵn trong NodeJs

 Qui định hostname và port để truy cập web server

 Tạo một web server http thông qua phương thức createServer của http

 Cho server lắng nghe ở hostname và port đã được qui định Kết quả :

Khi ta truy cập vào địa chỉ 127.0.0.1:3000 , mở console chúng ta sẽ thấy

được nội dung trả về :”Server running at http://127.0.0.1:3000

1.3.4 Khái niệm về RESTFUL Api :

REST là viết tắt của Representational State Tranfer REST là một chuẩn web dựa vào các kiến trúc cơ bản sử dụng giao thức HTTP Nó xử lí tài nguyên, nơi mà mỗi thành phần là một tài nguyên và nguồn tài nguyên này có thể được truy cập qua các giao diện chung bởi sử dụng các phương thức HTTP chuẩn

Về cơ bản, một REST Server cung cấp các chế độ truy cập đến nguồn tài nguyên và REST Client truy cập và sửa đổi các nguồn tài nguyên này bởi sử dụng phương thức HTTP Ở đây mỗi nguồn tài nguyên được xác định bởi một URI REST sử dụng các cách biểu diễn khác nhau để biểu diễn các nguồn tài nguyên như text, JSON, XML nhưng phổ biến nhất vẫn là JSON

Phương thức HTTP được sử dụng trong REST

Dưới đây là các phương thức HTTP được sử dụng rộng rãi trong kiến trúc REST

 GET - Được sử dụng chỉ để đọc các nguồn tài nguyên

 PUT - Được sử đụng để cập nhật các bản ghi hiện tại nguồn tài nguyên

 DELETE - Được sử dụng để xóa các nguồn tài nguyên

 POST - Được sử dụng để cập nhật các bản ghi hiện tại và tạo mới nguồn tài

Dưới đây là các tính năng cơ bản của Express framework:

 Cho phép thiết lập các lớp trung gian để trả về các HTTP request

 Định nghĩ bảng routing có thể được sử dụng với các hành động khác

 Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template

1.4.2 Khởi tao Web Server NodeJs bằng Express Framework:

Cài đặt Express Framework thông qua bộ thư viện npm :

$ npm install express –save

Khởi tạo Web Server :

var express = require('express');

var app = express();

app.get('/', function (req, res) {

res.send('Hello World');

})

var server = app.listen(3000, function () {

var host = server.address().address;

var port = server.address().port;

console.log("Server running at: http://%s:%s", host, port);

1.5 Giới thiệu về MongoDb:

1.5.1 Giới thiệu về MongoDB:[12]

 MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql được hàng triệu người sử dụng

 MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh

 Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với

MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

 Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

 Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS 1.5.2 Kết nối MongoDB trong ứng dụng NodeJs :

Để kết nối với MongoDB chúng ta cần import package mongodb có trong bộ thư viện npm

> npm install mongodb

Sau khi import package chúng ta sẽ kết nói với mongodb thông qua câu lệnh kết nối

var MongoClient = require('mongodb').MongoClient;

// Kết nối database

ưu việt và sự hỗ trợ mạnh mẽ của mình MeanStack có thể rút ngắn thời gian phát triển và tối ưu ứng dụng

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

2.1 Khảo sát hiện trạng:

2.1.1.Khảo sát hiện trạng:

Qua khảo sát hiện trạng của một số cơ sở thú y cho thấy đối với một cơ sở thú y lượng thông tin cần quản lý là vô cùng lớn và cần sự logic cao Các thông tin cần quản lý như : Thông tin chủ cơ sở , thông tin cơ sở , thông tin người dùng , thông tin dịch vụ , thông tin bài viết chia sẽ , thông tin lịch hẹn , thống kê hàng tháng … Vì vậy việc quản lý bằng phương pháp ghi chép ngày xưa đã lạc hậu và mang lại hiệu quả thấp Ngoài quản lý thông tin nhu cầu thực hiện các chức năng nghiệp vụ như thêm, xóa, sửa, thống kê,… , các dịch vụ tiện ích như đặt lịch online , là vô cùng cần thiết Mặt khác các bệnh viện thú y thường chọn giải pháp xây dựng website và (phần mềm nghiệp vụ) ứng dụng thực hiện nghiệp vụ khám chữa bệnh là 2 ứng dụng riêng biệt và khác nhau hoàn toàn Phần mềm nghiệp vụ

thường được viết trên nền tảng winform được cài đặt trực tiếp trên máy tính ở bệnh viện Điều đó làm tốn chi phí của các bệnh viện

Dưa trên hiện trạng đã được khảo sát và sự phát triển mạnh mẽ của công nghệ hiện nay , chúng em đã quyết định ứng dụng công nghệ vào trong việc quản

lý và thực hiện nghiệp bằng cách xây dựng một website có thể đáp ứng được các nhu cầu trên và vẫn đảm bảo tốc độ xử lý nhanh và chính xác Nhằm mang đến cho cơ sở thú y một giải pháp tối ưu trong quá trình vận hành, có được sự trải nghiệm mới lạ và tiết kiệm chi phí

Website là nơi cung cấp thông tin của doanh nghiệp và dịch vụ cần thiết cho người dùng Cung cấp các chức năng quản lý và vận hành cho chủ bệnh viện Cung cấp môi trường thực hiện nghiệp vụ khám chữa bệnh cho nhân viên và bác sĩ trong bệnh viện

2.1.2.Khảo sát các WebSite liên quan :

2.1.2.1 https://thuypetpro.com.vn/

Hình 2.1.1 Hình ảnh minh họa websitethuypetpro.com.vn [13]

https://thuypetpro.com.vn/ là một website của Bệnh viện Thú-Y Petpro ở thành

phố Hồ Chí Minh Website là nơi giới thiệu các dịch vụ chăm sóc ,khám chữa

bệnh cho thú cưng của bệnh viện

Ưu điểm :

 Giao diện đẹp , có responsive

 Nội dung rõ ràng đầy đủ

 Hỗ trợ đặt lịch online

Khuyết điểm :

 Responsive menu chưa chuẩn

 Chưa cho khách hàng tạo tài khoản trên hệ thống

2.1.2.2 http://sasakihospital.com/

Hình 2.1.2 Hình ảnh minh họa website sasakihospital.com [14]

http://sasakihospital.com/ : Đây là trang website của một cơ sở thú y ở quận 7 , thành phồ Hồ Chí Minh Đây là một cơ sở thú y của Nhật với đầy đủ các dịch

vụ chăm sóc , khám và chữa bệnh Website là nơi giới thiệu dịch vụ và cung cấp thông tin đầy đủ về cơ sở

Ưu điểm :

 Website được trình bày theo bố cục rõ ràng , rõ nét

 Nội dung đầy đủ cung cấp đến người dùng đầy đủ thông tin của doanh nghiệp

Khuyết điểm :

 Không có chức năng đặt lịch

 Không có chức năng nhắn tin

 Không có mục hiển thị bài viết chia sẽ

 Giao diện chưa được thiết kế responsive

2.2 Xác định yêu cầu :

2.2.1 Yêu cầu chức năng :

 Đăng ký tài khoản

 Đăng nhập bằng tài khoản được tạo trên website

 Đổi mật khẩu

 Lưu trữ :

- Tài khoản người dùng

- Thông tin người dùng , thú cưng

- Thông tin cơ sở thú y

- Thông tin bác sĩ

- Thông tin bệnh án

- Thống tin thuốc thú y

- Thông tin hóa đơn thanh toán

- Thông tin , nội dung dịch vụ , bài viết chia sẽ

- Thông tin của doanh nghiệp

- Danh sách người dùng và thông tin cá nhân , thú cưng của người dùng

- Danh sách bệnh án và thông tin chi tiết bệnh án

- Danh sách hóa đơn và thông tin chi tiết hóa đơn

- Danh sách bác sĩ và thông tin cá nhân của bác sĩ

- Lịch làm việc của nhân viên

- Danh sách dịch vụ và nội dung chi tiết của một dịch vụ

- Danh sách bài viết và nội dung chi tiết của một bài viết

- Danh sách lịch hẹn và nội dung chi tiết của một lịch hẹn

- Cấp tài khoản nhân viên và khóa tài khoản

- Cập nhập thông tin doanh nghiệp

- Thêm , xóa , sửa thông tin nhân viên

- Thêm , xóa , sửa thông tin , nội dung dịch vụ

- Thêm , xóa , sửa thông tin , nội dung bài viết

- Thêm , xóa , sửa thông tin phòng khám

- Sắp xếp lịch làm việc cho nhân viên

- Thống kê lịch hẹn

- Thống kê lượt truy cập

- Thống kê doanh thu

- Chỉnh sửa thông tin doanh nghiệp

- Kiểm tra lịch khám của khách hàng

- Thanh toán hóa đơn bệnh án

- Kiểm tra hóa đơn bệnh án

- Kiểm tra thuốc trong kho

- Nhập thuốc vào kho