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 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.3 Giới hạn phạm vi đề tài 1.4 Nội dung thực 1.5 Phương pháp tiếp cận CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu mơ hình MVC 2.1.1 2.1.2 2.1.3 2.2 Mơ hình MVC ASP.NET 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.3 Tổng quan LINQ to SQL Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà 2.3.1LIN 2.3.2LIN 2.3.3Mô 2.3.4Lớ 2.3.5Sử CHƯƠNG 3: NỘI DUNG THỰC HIỆN 3.1 Phát biểu toán 3.2 Yêu cầu hệ thống 3.2.1Yê 3.2.2Yê 3.3 Biểu đồ UseCase 3.3.1Da 3.3.2Da 3.3.3Biể 3.3.4Đặ 3.4 Biểu đồ lớp 3.4.1Biể 3.4.2Da 3.4.3Mô 3.5 Biểu đồ 3.6 Thiết kế sở liệu hệ t 3.7 Thiết kế đặc tả giao diện 3.7.1Mộ 3.6.2Mộ 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 MVC CNTT LINQ HTML CSS CSDL CMS 10 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà video_title_l video_description_l video_title_e video_description_e video_thumbnail video_link created_date created_by_user 10 ord 11 status 12 site_id 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ị chuyên 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 - Cập viết mới, thông tin 4.2 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 Yê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... 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 MVC CNTT LINQ HTML CSS CSDL CMS 10 Thiết kế xây dựng website cho Bệnh viện Đa khoa Hưng Hà CHƯƠ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,