THIẾT kế và xây DỰNG WEBSITE CHO BỆNH VIỆN đa KHOA HƯNG hà

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN LƯU THỊ THU HÀ THIẾT KẾ VÀ XÂY DỰNG WEBSITE CHO BỆNH VIỆN ĐA KHOA HƯNG HÀ ĐỒ ÁN TỐT NGHIỆP HƯNG YÊN – 2018 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN LƯU THỊ THU HÀ THIẾT KẾ VÀ XÂY DỰNG WEBSITE CHO BỆNH VIỆN ĐA KHOA HƯNG HÀ NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: KỸ THUẬT PHẦN MỀM ĐỒ ÁN TỐT NGHIỆP NGƯỜI HƯỚNG DẪN TS NGUYỄN VĂN HẬU HƯNG YÊN – 2018 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà MỤC LỤC MỤC LỤC DANH SÁCH HÌNH VẼ DANH SÁCH BẢNG BIỂU DANH SÁCH TỪ VIẾT TẮT CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 10 1.1 Lý chọn đề tài 10 1.2 Mục tiêu đề tài 11 1.3 Giới hạn phạm vi đề tài .11 1.4 Nội dung thực 11 1.5 Phương pháp tiếp cận .12 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 13 2.1 Giới thiệu mơ hình MVC .13 2.1.1 Xuất xứ 13 2.1.2 Kiến trúc mơ hình MVC 13 2.1.3 Đặc điểm mơ hình MVC .15 2.2 Mơ hình MVC ASP.NET 15 2.2.1 Giới thiệu tổng quan 15 2.2.2 Lịch sử phát triển ASP.NET 16 2.2.3 Khái quát thành phần ASP.NET MVC 21 2.2.4 So sánh ASP.NET MVC với ASP.NET .22 2.2.5 Lợi ích mơ hình ASP.NET MVC 24 2.3 Tổng quan LINQ to SQL 24 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà 2.3.1 LINQ gì? 24 2.3.2 LINQ to SQL gì? 25 2.3.3 Mơ hình hóa CSDL dùng LINQ to SQL 26 2.3.4 Lớp Datacontext 27 2.3.5 Sử dụng LINQ to SQL ASP.NET .27 CHƯƠNG 3: NỘI DUNG THỰC HIỆN 28 3.1 Phát biểu toán 28 3.2 Yêu cầu hệ thống .28 3.2.1 Yêu cầu chức .28 3.2.2 Yêu cầu phi chức .30 3.3 Biểu đồ UseCase 31 3.3.1 Danh sách Actor 31 3.3.2 Danh sách UseCase 31 3.3.3 Biểu đồ UseCase mức tổng quát 32 3.3.4 Đặc tả UseCase 32 3.4 Biểu đồ lớp .52 3.4.1 Biểu đồ lớp (mức phân tích) 52 3.4.2 Danh sách lớp đối tượng quan hệ 53 3.4.3 Mô tả chi tiết lớp đối tượng .53 3.5 Biểu đồ .64 3.6 Thiết kế sở liệu hệ thống 70 3.7 Thiết kế đặc tả giao diện 84 3.7.1 Một số giao diện hệ thống 84 3.6.2 Một số giao diện CMS .89 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà CHƯƠNG 4: KẾT LUẬN 95 4.1 Kết đạt đề tài 95 4.2 Hạn chế đề tài 95 4.3 Hướng phát triển đề tài 95 CHƯƠNG 5: TÀI LIỆU THAM KHẢO 96 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà DANH SÁCH HÌNH VẼ Hình 2-1: Các thành phần mơ hình MVC .14 Hình 2-2: Mơ hình MVC 14 Hình 2-3: Mơ hình MVC 16 Hình 2-4: Mơ hình ASP.NET Webform .18 Hình 2-5: Nền tảng ASP.NET MVC Framword 21 Hình 2-6: Tạo sở liệu LINQ to SQL 26 Hình 2-7: LINQ to SQL Class 26 Hình 3-1: UseCase mức tổng quát 32 Hình 3-2: UseCase Quản lý tin tức .33 Hình 3-3: UseCase Quản lý danh mục tin tức .34 Hình 3-4: UseCase Quản lý nhật ký hệ thống .36 Hình 3-5: Use case Quản lý danh mục phân quyền .37 Hình 3-6: Use case Quản lý tài khoản 38 Hình 3-7: Use case Quản lý bình luận 40 Hình 3-8: Use case Quản lý danh mục bác sĩ 41 Hình 3-9: Use case Quản lý bệnh viện 42 Hình 3-10: UseCase Quản lý chuyên khoa 44 Hình 3-11: UseCase Quản lý hình ảnh 45 Hình 3-12: Use case Quản lý văn 47 Hình 3-13: Use case Quản lý video .48 Hình 3-14: Use case Đăng viết 49 Hình 3-15: Biểu đồ lớp mức phân tích 52 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Hình 3-16: Biểu đồ Đăng nhập 64 Hình 3-17: Biểu đồ Thêm tin tức 65 Hình 3-18: Biểu đồ Sửa tin tức 65 Hình 3-19: Biểu đồ Xóa tin tức 66 Hình 3-20: Biểu đồ Thêm bệnh viện 67 Hình 3-21: Biểu đồ Sửa bệnh viện 67 Hình 3-22: Biểu đồ Xóa bệnh viện 68 Hình 3-23: Biểu đồ Thêm bác sĩ .69 Hình 3-24: Biểu đồ Sửa thông tin bác sĩ 69 Hình 3-25: Biểu đồ Xóa bác sĩ 70 Hình 3-26: Mơ hình liệu quan hệ .71 Hình 3-27: Giao diện trang chủ website 84 Hình 3-28: Giao diện sở vật chất, video, đội ngũ bác sĩ 85 Hình 3-29: Giao diện thơng tin chi tiết bác sĩ .86 Hình 3-30: Giao diện chi tiết tin tức .87 Hình 3-31: Giao diện trang liên hệ chân trang 88 Hình 3-32: Giao diện đăng nhập tài khoản Website .89 Hình 3-33: Giao diện trang chủ CMS 90 Hình 3-34: Giao diện trang hiển thị danh mục tin tức Website 90 Hình 3-35: Giao diện danh sách tin đăng 91 Hình 3-36: Giao diện thêm tin tức 92 Hình 3-37: Giao diện trang chỉnh sửa tin tức 93 Hình 3-38: Giao diện trang Nhật ký hệ thống .94 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà DANH SÁCH BẢNG BIỂU Bảng 2-1: Quá trình phát triển Asp.net 17 Bảng 2-2: So sánh ASP.NET Webform ASP.NET MVC 23 Bảng 3-1: Danh sách Actor .31 Bảng 3-2: Danh sách UseCase 31 Bảng 3-3: Danh sách lớp đối tượng quan hệ 53 Bảng 3-4: Mô tả chi tiết lớp nhật ký hệ thống .53 Bảng 3-5: Mô tả chi tiết lớp danh mục tin tức .54 Bảng 3-6: Mơ tả chi tiết lớp bình luận 55 Bảng 3-7: Mô tả chi tiết lớp chuyên khoa .56 Bảng 3-8: : Mô tả chi tiết lớp bác sỹ .57 Bảng 3-9: Mô tả chi tiết lớp văn .58 Bảng 3-10: Mô tả chi tiết lớp tin tức .59 Bảng 3-11: Mô tả chi tiết lớp phân quyền .60 Bảng 3-12: Mô tả chi tiết lớp danh mục bệnh viện .60 Bảng 3-13: Mơ tả chi tiết lớp hình ảnh 61 Bảng 3-14: Mô tả chi tiết lớp quản trị viên 62 Bảng 3-15: Mơ tả chi tiết lớp nhóm người dùng 63 Bảng 3-16: Mô tả chi tiết lớp video 63 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà DANH SÁCH TỪ VIẾT TẮT Từ viết tắt ASP Từ đầy đủ Active Server Page Giải thích Là mở rộng ISAPI, cung cấp khung làm việc cho ứng dụng phía Server MVC Model, View, Controller Mẫu kiến trúc Model – View Controller CNTT Công nghệ thông tin Công nghệ Thơng tin LINQ Languege Integrated Query Ngơn ngữ tích hợp truy vấn HTML HyperText Markup Language Ngôn ngữ đánh dấu siêu văn CSS Cascading Style Sheets Ngôn ngữ quy định cách trình bày thẻ html trang web CSDL Cơ sở liệu Cơ sở liệu CMS Content Management System Hệ quản trị nội dung 10 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà 10 created_date datetime Ngày tạo 11 active_flag int Trạng thái 12 group_id varchar(20) Nhóm quyền 3.6.12 Bảng UserGroup Lưu thơng tin nhóm tài khoản Bảng 3-12: Bảng UserGroup ST T Tên trường Kiểu liệu id varchar(20) full_name nvarchar(150) Ràng buộc Khóa Mơ tả Mã nhóm tài khoản Tên nhóm tài khoản 3.6.13 Bảng Credential Lưu thơng tin nhóm tài khoản Bảng 3-13: Bảng UserGroup ST T Tên trường Kiểu liệu Ràng buộc Mơ tả user_group_id varchar(20) Khóa ngoại Mã nhóm tài khoản role_id nvarchar(150) Khóa ngoại Mã phân quyền 3.6.14 Bảng Video Lưu thông tin video Bảng 3-14: Bảng Video ST Tên trường Kiểu liệu Ràng buộc video_id uniqueidentifier Khóa Mơ tả T Mã video 83 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà video_title_l nvarchar(250) Tiêu đề tiếng Việt video_description_l nvarchar(500) Mô tả tiếng Việt video_title_e nvarchar(250) Tiêu đề tiếng Anh video_description_e nvarchar(500) Mô tả tiếng Anh video_thumbnail nvarchar(500) Đường dẫn đến video video_link nvarchar(500) Link video created_date datetime Ngày tạo created_by_user uniqueidentifier Khóa ngoại Mã người tạo 10 ord int Vị trí xếp 11 status int Trạng thái 12 site_id uniqueidentifier Khóa ngoại Mã bệnh viện 84 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà 3.7 Thiết kế đặc tả giao diện 3.7.1 Một số giao diện hệ thống Hình 3-34: Giao diện trang chủ website - Giao diện trang chủ người dùng bao gồm địa chỉ, số điện thoại cấp cứu, đường dây nóng, facebook, logo bệnh viện, menu chính, slide quảng bá hình ảnh cho bệnh viện; ba box hình chữ nhật dịch vụ bảo hiểm, tra cứu kết hình ảnh, thời gian làm việc; box chức tìm kiếm, tra cứu dịch vụ, box lý chọn chúng tôi; sở vật chất; video; đội ngũ bác sĩ; dịch vụ bật; tin tức bật; đăng ký dịch vụ 85 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Hình 3-35: Giao diện sở vật chất, video, đội ngũ bác sĩ 86 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà - Giao diện đội ngũ bác sỹ gồm hai tab Bác sĩ nội viện Bác sĩ ngoại viện Mỗi tab box hình ảnh thơng tin tên bác sĩ, chun khoa bác sĩ làm việc Muốn xem chi tiết thơng tin bác sĩ click vào hình ảnh Hình 3-36: Giao diện thơng tin chi tiết bác sĩ - Giao diện chi tiết bác sỹ gồm tên, chức danh, chuyên khoa, học vẫn, hoạt động chuyên ngành đề tài nghiên cứu bác sĩ 87 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Hình 3-37: Giao diện chi tiết tin tức - Giao diện chi tiết đăng tin tức bao gồm: tiêu đề, ngày đăng, số lượt xem, nội dung tin tức, bình luận người đọc, tin tức 88 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Hình 3-38: Giao diện trang liên hệ chân trang - Giao diện trang liên hệ bao gồm đồ; họ tên, số điện thoại, email, nội dung phản hồi khách hàng Chân trang bao gồm logo, tên bệnh viện, địa chỉ, số điện thoại, số fax, email, facebook, youtobe bệnh viện, đồ đường đến bệnh viện 89 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà 3.6.2 Một số giao diện CMS Hình 3-39: Giao diện đăng nhập tài khoản Website - Giao diện trang đăng nhập, cung cấp chức đăng nhập cho người dùng, bao gồm trường: tên đăng nhập, mật khẩu.Yêu cầu người dùng nhập tên nhập mật mà người tổng quan trị cung cấp qua email Khi người dùng click vào nút “Đăng nhập” Website hiển thị thông báo đăng nhập thành công chuyển đến CMS Website 90 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Hình 3-40: Giao diện trang chủ CMS - Giao diện trang chủ CMS thực chức năng: Quản lý danh mục tin tức, Quản lý tin tức, Quản lý hình ảnh, Quản lý video, Quản lý văn bản, Các danh mục khác (Quản lý bệnh viện, chuyên khoa, bác sỹ, bình luận), Cấu hình hệ thống (Nhật ký hệ thống, Quản lý tài khoản, Phân quyền) Hình 3-41: Giao diện trang hiển thị danh mục tin tức Website 91 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà - Giao diện trang chi tiết Danh mục tin tức bao gồm chức năng: hiển thị danh sách danh mục tin tức, thêm, sửa, xóa danh mục tin tức, ẩn/ hiện, ẩn/hiển trang chủ Khi người dùng click vào “Xóa” Website hiển thị thơng báo “Bạn chắn muốn xóa danh mục tin tức khơng?” Nếu chọn “Xóa”, mục tin tức xóa khỏi CMS trang chủ; chọn “Hủy” để hủy hành động xóa mục tin tức Khi danh mục tin tức chế độ “Ẩn” viết “Quản lý tin tức kế thừa được” ngược lại chọn “Hiện” Khi chọn “Ẩn trang chủ”thì danh mục khơng hiển thị trang chủ ngược lại chọn “Hiển thị trang chủ” Hình 3-42: Giao diện danh sách tin đăng - Giao diện quản lý tin tức bao gồm: tin đăng, tin chờ duyệt, tin không duyệt tin xóa.Có chức như: thêm, sửa, xóa, tìm kiếm tin tức, ẩn/ tin tức trang chủ Khi chọn “Xóa” hiển thị thơng báo “Bạn chắn muốn 92 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà xóa tin tức khơng?”,chọn “Hủy” để hủy hành động xóa, chọn xóa tin tức thành tin chờ duyệt Nếu xóa tin tức phần “Tin chờ duyệt” tin tức chuyển đến phần“Tin xóa”, xóa tin tức phần khơng thể khơi phục Trong phần “Tin xóa” có chức “Khơi phục” tin xóa xóa vĩnh viễn tin tức Hình 3-43: Giao diện thêm tin tức - Giao diện Thêm tin tức: Người viết cần chọn tin tức thuộc “Danh mục tin tức nào”, chọn Bệnh viện (nếu khơng chọn tin tức có tất 93 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà site bệnh viện), chọn Chuyên khoa (nếu chọn tin tức hiển thị chun khoa đó), thẻ từ khóa, thẻ mơ tả phục vụ cho việc SEO website Hình 3-44: Giao diện trang chỉnh sửa tin tức - Giao diện chỉnh sửa tin tức: Click button “Cập nhật” tin tức load lại nội dung lên trang cho tổng quản trị thay đổi Khi tổng quản trị click vào “Cập nhật” nội dung viết lưu lại 94 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Hình 3-45: Giao diện trang Nhật ký hệ thống - Giao diện trang nhật ký hệ thống bao gồm hành động User, chi tiết hành động User ngày giời thực hành động 95 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà CHƯƠNG 4: 4.1 KẾT LUẬN Kết đạt đề tài - Tìm hiểu, nắm bắt công cụ thiết kế web - Biết cách thiết kế web động cách tổ chức liệu - Giao diện web đẹp, thân thiện với người dùng - Các dịch vụ internet đặc biệt web - Cho phép người dùng tìm kiếm thông tin bác sỹ, dịch vụ bệnh viện, viết 4.2 Cập viết mới, thông tin Hạn chế đề tài Hệ thống dừng lại chức bản, chưa có nhiều chế bảo mật API 4.3 Hướng phát triển đề tài Trong thời gian nghiên cứu thực đề tài, tác giả vạch hướng phát triển đề tài sau:  Bổ sung bảo mật API để nâng cao bảo mật ứng dụng tránh bị công lấy liệu  Tối ưu hóa giao diện hiệu nhằm tăng tốc độ ứng dụng  Hỗ trợ tảng android 96 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà TÀI LIỆU THAM KHẢO x [1] Adam Freeman, Pro ASP.NET MVC American: Apress, 2013 [2] Nguyễn Văn Quyết, Giáo trình Cơng nghệ Web ứng dụng Hưng n, Việt Nam: Khoa Công nghệ Thông tin - UTEHY, 2010 x 97 .. .Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN LƯU THỊ THU HÀ THIẾT KẾ VÀ XÂY DỰNG WEBSITE CHO BỆNH VIỆN ĐA KHOA HƯNG... 28 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà CHƯƠNG 3: 3.1 NỘI DUNG THỰC HIỆN Phát biểu toán Hệ thống website Bệnh viện Đa khoa Hưng Hà cung cấp chức như: Tìm kiếm dich vụ bệnh viện, ... lý bệnh viện 43 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà Tóm tắt o Người sử dụng: Quản trị viên o Chức năng:  Thêm bệnh viện  Sửa thông tin bệnh viện  Xóa danh mục bệnh viện