Xây dựng website hiến máu nhân đạo

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE HIẾN MÁU NHÂN ĐẠO CHUYÊN NGÀNH: CỬ NHÂN CÔNG NGHỆ THÔNG TIN Giảng viên hướng dẫn Sinh viên thực Mã số sinh viên Lớp sinh hoạt Khoa : TS Phạm Anh Phương : Trương Nguyên Đại : 312022151111 : 15CNTT1 : TIN HỌC Đà Nẵng, 05/2020 Blood Donation Website LỜI CẢM ƠN Em xin chân thành cảm ơn q thầy khoa Tin học nói riêng tồn thể thầy trường Đại học Sư Phạm – Đại học Đà Nẵng nói chung, cho em kiến thức bổ ích bốn năm học vừa qua Để hồn thành báo cáo khóa luận tốt nghiệp, em nhận bảo, giúp đỡ tận tình TS Phạm Anh Phương thầy cô khoa Tin học, em xin chân thành cảm ơn Và em gửi lời cảm ơn đến nhà trường nổ lực hỗ trợ cung cấp sở vật chất trang bị cho em nhiều kiến thức để hoàn thành năm đại học Do kiến thức thân nhiều hạn chế nên khơng tránh khỏi thiếu sót, kính mong nhận xét, phê bình, góp ý thầy để em thêm kinh nghiệm phát triển thân sau Cuối cùng, em xin kính chúc q Thầy, Cơ dồi sức khỏe, đạt nhiều thành công tốt đẹp công việc! Trân trọng! Đà Nẵng, ngày… tháng… năm 2020 Sinh viên thực Khóa luận tốt nghiệp: Website hiến máu nhân đạo Mục lục LỜI CẢM ƠN MỞ ĐẦU Lý chọn đề tài: Khách thể đối tượng nghiên cứu: 3 Giới hạn phạm vi nghiên cứu: Mục đích nghiên cứu: Nhiệm vụ nghiên cứu: Phương pháp nghiên cứu: CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Tổng quan ASP.Net Core: Tổng quan Angular Tổng quan HTML Tổng quan Bootstrap 11 Tổng quan SQL Server 11 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ 16 Mục tiêu đề tài 16 Yêu cầu chức 16 Yêu cầu phi chức 16 Phân tích thiết kế hệ thống 17 CHƯƠNG 3: KẾT QUẢ ĐẠT ĐƯỢC 37 Môi trường phát triển 37 I Web-Service: 37 Web-client: 37 II Giao diện 37 1|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện User 37 Giao diện bệnh viện 40 Giao diện Admin 43 III Hạn chế: 47 IV Hướng phát triển: 47 Tài liệu tham khảo: 48 2|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo MỞ ĐẦU Lý chọn đề tài Hiện Việt Nam chưa có hệ thống giúp cho bệnh viện huy động nguồn máu cộng đồng cách chủ động mà huy động thơng qua chương trình “Hiến máu nhân đạo” Việc khiến cho trường hợp cần máu khẩn cấp khó đáp ứng với lượng máu kho lưu trữ, đặc biệt nhóm máu cực ví dụ như: ab- hay nhóm Rh (-) Để tìm kiếm nguồn máu khẩn cấp thơng thường bệnh viện người có nhu cầu kêu gọi ủng hộ thông qua trang mạng xã hội lớn như: FaceBook, Twitter, … Điều khiến cho thơng tin khơng tiếp cận đến người phù hợp Qua đó, xây dựng cổng thông tin kết nối bệnh viện người cộng đồng vô cần thiết Khách thể đối tượng nghiên cứu  Người dùng web Giới hạn phạm vi nghiên cứu:  Tất người dùng web có nhu cầu cho nhận máu  Các bệnh viện muốn tìm kiếm nguồn máu cách nhanh chóng  Các tài liệu ngơn ngữ Net Angular Mục đích nghiên cứu:  Xây dựng website tìm kiếm nguồn máu cách nhanh chóng Nhiệm vụ nghiên cứu:  Xây Dựng Website hoàn chỉnh với đầy đủ chức hỗ trợ quản trị : Thêm, Sửa, Xóa, Cập Nhật  Xây Dựng Website hoàn chỉnh với chức hỗ trợ người dùng Phương pháp nghiên cứu:  Về mặt lý thuyết - Khảo sát tình hình thực tế nhu cầu cho nhận máu - Nghiên cứu quy trình đăng ký tham gia hiến máu 3|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo  Về mặt lập trình - Tìm hiểu kỹ thuật lập trình ngơn ngữ lập trình Net Core - Tìm hiểu Angular để ứng dụng vào website - Hiểu cách lưu trữ liệu hệ quản trị sở liệu SQL Server 4|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Tổng quan ASP.Net Core: ASP.NET core mã nguồn mở tảng cho xây dựng cloud internet kết nối ứng dụng web, loT mobile backends ASP.NET Core chạy NET Core chạy đầy đủ NET Framework ASP.NET Core kiến trúc để cung cấp tảng phát triển tối ưu cho ứng dụng triển khai tới cloud chạy on-premises ASP.NET Core bao gồm thành phần mơ-đun cần thiết tối thiểu, bạn giữ lại tính linh hoạt xây dựng solution bạn Bạn phát triển chạy ASP.NET Core Windows, MAC LINUX ASP.NET Core mã nguồn mở GitHub ASP.NET Core MVC “rich framework” cho việc xậy dựng Web APP APIs sử dụng mơ hình Model-View-Controller ASP.NET Core MVC cung cấp tính dựa mơ hình xây dựng website động cho phép phân chia rõ ràng khối lệnh Nó cung cấp cho bạn tồn quyền kiểm sốt đánh dấu, hỗ trợ phát triển với TDD-friendly sử dụng tiêu chuẩn web ASP.NET core có cải tiến ?  Web UI Web API hợp  Tích hợp frameworks đại cho khách hàng nhà phát triển  A cloud-ready environment-based configuration system  Built-in dependency injection  New light-weight and modular HTTP request pipeline  Khả lưu trữ IIS tự chủ tiến trình riêng bạn  Built on NET Core, which supports true side-by-side app versioning  Ships entirely as NuGet packages  Công cụ vừa đơn giản để phát triển web đại  Xây dựng chạy tảng ứng dụng ASP.NET không Windows mà MAC Linux  Mã nguồn mở có cộng đồng lớn 5|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo Tại cần xây dựng ASP.NET Core ? Các phiên ASP.NET đời gần 15 năm trước phần NET Framework Kể từ có hàng triệu nhà phát triển sử ASP.NET để xây dựng chạy ứng dụng web tuyệt vời, năm qua, Microsoft liên tục phát triển ASP.NET Core có số thay đổi kiến trúc làm cho gọn nhẹ ASP.NET Core khơng cịn dựa System.Web.dll mà dựa tập hợp granular NuGet Nhờ cho phép bạn tối ưu hóa ứng dụng bạn nhờ cần sử dụng gói NuGet mà bạn cần Ngồi bảo mật hơn, cải thiện hiệu suất giảm chi phí nhờ bạn cần trả cho bạn sử dụng mà thơ Tính ASP.NET Core MVC bao gồm:  Routing  Model binding  Model validation  Dependency injection  Filters  Areas  Web APIs  Testability  Razor view engine  Strongly typed views  Tag Helpers  View Components  Routing Routing xác định URL điều khiển thông tin tương ứng với URL mà người dùng web nhập vào Tất cấu hình Routing ứng dụng ASP.NET MVC lưu trữ RouteTable, đóng vai trị định tuyến URL để xác định lớp xử lý tương ứng có request gửi đến từ người dùng web  Model binding Trong ASP.NET Core MVC Model binding chuyển đổi liệu yêu cầu từ phía client (form values, route data, query string parameters, HTTP headers) vào bên đối tượng để controller có 6|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo thể xử lí Kết Controller bạn khơng phải thực cơng việc tìm liệu từ đâu đến Nó đơn giản kiểm tra liệu tham số từ phương thức action  Model validation ASP.NET Core MVC hỗ trợ ràng buộc liệu cho thuộc tính model bạn, thuộc tính kiểm tra client xem có hợp lệ khơng trước giá trị thuộc tính gửi server Cũng server trước action controller gọi  Dependency injection Trong ASP.NET Core MVC controller gửi yêu cầu cần thiết đến service thông cấu trúc xây dựng chúng Filters Filters giúp lập trình viên đóng gói “cross-cutting concerns” giống xử lý ngoại lệ phân quyền Filter kích hoạt để chạy trước sau action controller Ví dụ phân quyền [Authorize] đặt trước action Areas Khi website ASP.NET MVC trở nên lớn phức tạp,số Controller chắn tăng lên, với nhiều controller bạn thấy chúng thuộc nhóm phần Administrator, phần sản phẩm, phần nhóm sản phẩm… Areas cho phép bạn chia Controllers,models views tới vị trí khác solution với thư mục độc lập Web APIs Ngoài việc tảng tuyệt vời để xây dựng trang web ASP.NET Core MVC hỗ trợ nhiều cho việc xây dựng API Web Bạn xây dựng dịch vụ tiếp cận nhiều khách hàng bao gồm trình duyệt web thiết bị di động Testability Việc xây dựng framework’s sử dụng interface DI làm cho việc kiểm tra ứng dụng trở nên dễ dàng framework’s bao gồm tính (like a TestHost and InMemory provider for Entity Framework) chúng giúp ích cho lập trình viên nhiều Razor view engine ASP.NET Core MVC views sử dụng Razor view engine để render code html đến view.Razor sử dụng để tự động tạo nội dung web máy chủ 7|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo Tag Helpers Tag Helpers cho phép mã phía máy chủ tham gia vào việc tạo hiển thị phần tử HTML tệp razor Tổng quan Angular a Giới thiệu Angular Javascript Framework mạnh thường sử dụng để xây dựng project Single Page Application (SPA) Nó hoạt động dựa thuộc tính mở rộng HTML (các atributes theo quy tắc Angular) Đây Framework mã nguồn mở hồn tồn miễn phí hàng ngàn lập trình viên giới ưa chuộng sử dụng Framework hệ Web 2.0 phát triển mạnh b Các đặc tính Angular  Angular Framwork phát triển dựa Javascript để tạo ứng dụng web phong phú  Angular thường dùng để phát triển frontend (giao diện khách hàng) thông qua API để gọi data, sử dụng mơ hình MVC mạnh mẽ  Mã nguồn Angular tự động fit với trình duyệt khác nên bạn khơng cần phải lo vấn đề tương thích trình duyệt  Angular mã nguồn mở, hồn tồn miễn phí phát triển hàng ngàn lập trình viên giới c Các tính code lõi AngularJS  Data-binding: (liên kết liệu) tự động đồng liệu model view  Scope: (Phạm vi) Đây đối tượng kết nối Controller View  Controller: Đây hàm javascript xử lý kết hợp với điều khiển Scope  Service: Như đề cập trên, AngularJS sử dụng API xây dựng từ web service (PHP, ASP) để thao tác với DB  Filters: Bộ lọc lọc thành phẩn mảng trả mảng  Directives: đánh dấu vào yếu tố DOM, nghĩa tạo thẻ HTML tùy chỉnh  Templates: hiển thị thông tin từ controller, thành phần views  Routing: chuyển đổi action controller  MVC: Mơ hình chia thành phần riêng biệt thành Model, View, Controller Đây mơ hình hay Angular chế biến lại chút gần giốn với MVVM (Model View View Model) 8|Trương Nguyên Đại Khóa luận tốt nghiệp: Website hiến máu nhân đạo No Name Type Id Length Allow Null Key integer FALSE PK UserId integer FALSE TimeOld datetime FALSE TimeNew datetime FALSE Time varchar BloodGroupId integer FALSE EventId integer FALSE Status bit FALSE CreateDate datetime FALSE 100 FALSE Bảng 7: Register No Name Type Id Length Allow Null Key integer FALSE PK HospitalId integer FALSE Content nvarchar BloodGroupId integer FALSE Datetime datetime FALSE Address nvarchar Deadline bit MAX 255 FALSE FALSE FALSE 34 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo CreateDate datetime FALSE Bảng 8: Request No Name Type Id Length Allow Null Key integer FALSE PK ReceiverId integer FALSE StatusId integer FALSE Joined bit FALSE Seen bit FALSE RequestId integer FALSE Bảng 9: Notification No Name Type Id Length Allow Null Key integer FALSE PK UserId integer FALSE Name varchar 255 FALSE Content nvarchar MAX FALSE Address nvarchar MAX FALSE StartDate datetime FALSE EndDate datetime FALSE Time varchar FALSE 35 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Number integer FALSE 10 CreateDate datetime FALSE Bảng 10: Event No Name Type Id Length Allow Null Key integer FALSE PK UserId integer FALSE PictureId integer FALSE Title nvarchar MAX FALSE Content nvarchar MAX FALSE CreateAt datetime FALSE UpdateAt datetime FALSE Bảng 11: Post No Name Type Length Id integer Name varchar 50 Allow Null Key FALSE PK FALSE Bảng 12: Status No Name Type Length Id integer Name varchar 50 Allow Null Key FALSE PK FALSE Bảng 13: Picture 36 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo CHƯƠNG 3: KẾT QUẢ ĐẠT ĐƯỢC Môi trường phát triển I Web-Service: - Sql Server - ASP NET API, Entity Framework - RESTful API Web-client: II - Build on Angular - HTML, CSS, Bootstrap Giao diện Giao diện User Giao diện User 1: Màn hình login 37 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện User 2: Màn hình đăng ký tài khoản Giao diện User 3: Trang chủ 38 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện User 4: Trang tin tức Giao diện User 5: Trang profile 39 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện User 6: Trang kiện hiến máu Giao diện User 7: Form đăng ký hiến máu Giao diện bệnh viện 40 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Hospital 1: Trang gửi yêu cầu khẩn Giao diện Hospital 2: Trang quản lý tin tức 41 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Hospital 3: Chỉnh sửa đăng Giao diện Hospital 4: Trang quản lý kiện 42 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Hospital 5: Trang chỉnh sửa kiện Giao diện Hospital 6: Thông tin bệnh viện Giao diện Admin 43 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Admin 1: Trang profile Giao diện Admin 2: Trang quản lý nhóm máu 44 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Admin 3: Thêm nhóm máu Giao diện Admin 4: Chỉnh sửa nhóm máu 45 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Admin 5: Trang quản lý bệnh viện Giao diện Admin 6: Thêm tài khoản bệnh viện 46 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Giao diện Admin 7: Xem chi tiết thông tin bệnh viện III Hạn chế: - UI chưa thật bắt mắt - Độ hoàn thiện chức chưa cao - Chưa clean code - Chỉ thực tiễn áp dụng diện rộng Hướng phát triển: IV - Xây dựng app mobile cho user dùng để tăng độ tiện lợi IONIC - Sử dụng socket để tạo thông báo - Cải thiện UI 47 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo Tài liệu tham khảo: https://www.w3schools.com/bootstrap/default.asp https://angular.io/ Murach’s HTML5 and CSS3 (3rd Edition), Joel Murach, Michael Urban, Mike Murach & Associates, Inc, 2015 48 | T r n g N g u y ê n Đ i ... nghiệp: Website hiến máu nhân đạo Giao diện User 6: Trang kiện hiến máu Giao diện User 7: Form đăng ký hiến máu Giao diện bệnh viện 40 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu. .. nghiệp: Website hiến máu nhân đạo 3: Use case quản lý nhóm máu 4: Use case quản lý tài khoản admin  Bệnh viện 18 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo 5: Use... u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo b Sơ đồ lớp 11: Sơ đồ lớp 30 | T r n g N g u y ê n Đ i Khóa luận tốt nghiệp: Website hiến máu nhân đạo c Sơ đồ ERD 12: Sơ đồ ERP d Thiết