Đang tải... (xem toàn văn)
ĐẠI HỌC CÔNG NGHỆ GTVT KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO PHÂN TÍCH VÀ THIẾT KẾ XÂY DỰNG WEBSITE TIN TỨC CÔNG NGHỆ ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành Hệ thống thông tin HÀ NỘI 2022 ĐẠI HỌC.
ĐẠI HỌC CÔNG NGHỆ GTVT KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO PHÂN TÍCH VÀ THIẾT KẾ XÂY DỰNG WEBSITE TIN TỨC CÔNG NGHỆ ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Hệ thớng thơng tin HÀ NỘI - 2022 ĐẠI HỌC CÔNG NGHỆ GTVT KHOA CÔNG NGHỆ THƠNG TIN Tên_Sinh_Viên BÁO CÁO PHÂN TÍCH VÀ THIẾT KẾ XÂY DỰNG WEBSITE TIN TỨC CÔNG NGHđaiỆ ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Hệ thớng thơng tin Cán hướng dẫn: Th.S Tên_Giảng_Viên (ký tên) HÀ NỘI -2022 LỜI CAM ĐOAN Em xin cam đoan đồ án cơng trình riêng em, kết có tính độc lập riêng, khơng chép tài liệu chưa công bố nội dung đâu Các tài liệu đồ án sử dụng trung thực, nguồn trích dẫn có thích rõ ràng, minh bạch, có tính kế thừa, phát triển từ tài liệu, website Em xin hoàn toàn chịu trách nhiệm lời cam đoan danh dự em Hà Nội, ngày 20 tháng 05 năm 2022 Sinh viên thực Tên Họ_Tên MỤC LỤC LỜI CAM ĐOAN DANH MỤC HÌNH Hình 2.1 Tác dụng CSS với trang web HTML Hình 2.2 Mơ hình MVC Hình 3.1 Các tác nhân hệ thống Hình 3.2 Usecase tổng quát hệ thống Hình 3.3 Usecase tác nhân MEMBER Hình 3.4 Usecase Quản lý danh mục Hình 3.5 UseCase Quản lý viết Hình 3.6 UseCase Quản lý người dùng Hình 3.7 UseCase Quản lý phân quyền Hình 3.8 Biểu đồ hoạt động Usecase Đăng ký Hình 3.9 Biểu đồ hoạt động Usecase Đăng nhập Hình 3.10 Biểu đồ hoạt động Usecase Đăng xuất Hình 3.11 Biểu đồ hoạt động Usecase Xem danh sách danh mục Hình 3.12 Biểu đồ hoạt động Usecase Xem danh sách viết Hình 3.14 Biểu đồ hoạt động Usecase Tìm kiếm viết theo danh mục Hình 3.15 Biểu đồ hoạt động Usecase Tìm kiếm viết theo tên Hình 3.16 Biểu đồ hoạt động Usecase Tìm kiếm viết theo trạng thái Hình 3.17 Biểu đồ hoạt động Usecase Xem danh sách liệu trang quản lý Hình 3.18 Biểu đồ hoạt động Usecase Thêm liệu trang quản lý Hình 3.19 Biểu đồ hoạt động Usecase Cập nhật liệu trang quản lý Hình 3.20 Biểu đồ hoạt động Usecase Xóa liệu trang quản lý Hình 3.21 Biểu đồ hoạt động Usecase Tìm kiếm liệu trang quản lý Hình 3.22 Biểu đồ Đăng nhập Hình 3.23 Biểu đồ Đăng ký Hình 3.24 Biểu đồ Tìm kiếm liệu Hình 3.25 Biểu đồ Thêm liệu Hình 3.26 Biểu đồ Cập nhật liệu Hình 3.27 Biểu đồ Xóa liệu Hình 3.28 Biểu đồ trạng thái Đăng nhập Hình 3.29 Biểu đồ trạng thái Thêm liệu Hình 3.30 Biểu đồ trạng thái Cập nhật liệu Hình 3.31 Biểu đồ trạng thái Xóa liệu Hình 3.32 Biểu đồ trạng thái Tìm kiếm liệu Hình 3.28 Sơ đồ quan hệ thực thể CSDL Hình 3.29 Bảng categories(danh mục) Hình 3.30 Bảng news(tin tức) Hình 3.31 Bảng user(người dùng) Hình 3.32 Bảng group_permission(nhóm quyền) Hình 3.34 Bảng roles(quyền vai trị) Hình 3.35 Bảng permission_role(quyền_quyền vai trị) Hình 3.36 Bảng role_user(quyền vai trị_người dùng) Hình 3.37 Bảng password_reset(đặt lại mật khẩu) Hình 4.1 Giao diện đăng ký Hình 4.2 Giao diện đăng nhập Hình 4.3 Giao diện trang chủ Hình 4.5 Giao diện chi tiết viết Hình 4.6 Giao diện quản lý danh mục Hình 4.7 Giao diện quản lý viết Hình 4.8 Giao diện quản lý người dùng Hình 4.9 Giao diện quản lý nhóm quyền Hình 4.10 Giao diện quản lý quyền Hình 4.11 Giao diện quản lý vai trò CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Lý chọn đề tài: Sự bùng nổ thông tin Internet, vai trị trang thơng tin điện tử trực tuyến ngày trở nên quan trọng Khác với báo chí truyền thơng có giới hạn thời gian cập nhật tin tức, tờ báo trực tuyến cung cấp tiện lợi việc cập nhật phát hành thơng tin Về phía người dùng, họ xem thơng tin lúc nơi Về phía người cung cấp thơng tin, nhà báo họ dễ dàng cập nhật tin tức Do việc sử dụng trang thông tin trực tuyến điều cần thiết nhằm đáp ứng nhu cầu cập nhật thông tin người Đó phương diện đăng tải, cập nhật tin tức với người dùng cấp thơng tin Cịn việc tạo trang web giới thiệu cơng nghệ quốc tế nói chung giúp cập nhật nhanh thơng tin cơng nghệ Hay cụ thể với tin tức công nghệ nước, website giúp cập nhật, đăng tải nhanh thông tin, tin tức thành bật công nghệ nước Việc quảng bá vậy, giúp nâng cao dân trí, người dân nắm bắt nhanh thông tin công nghệ mới, tiếp cận rộng tới người dùng mạng 1.2 Khảo sát hiện trạng: Thế giới bước vào thời kì cơng nghiệp hóa đại hóa, hàng loạt sản phẩm công nghệ cho mắt phát triển Để biết thông tin công nghệ giới có nhiều cách từ truyền thơng báo đài tivi hay tờ báo giấy Tuy nhiên phát hành báo giấy làm chậm trễ việc truyền đạt thơng tin tới tay khách hàng Có thể tưởng tượng thông tin công nghệ công bố chúng phải đợi nhà báo thu tin tức, viết tay in ấn tạo sản phẩm sau phát hành Việc ảnh hưởng tới việc nắm bắt xu hướng cơng nghệ giới Để bắt kịp sóng tin tức việc tạo website phù hợp với người với chức dễ hiểu, dễ sử dụng đặc biệt phải nắm bắt tin tức cách nhanh chóng điều thiết yếu Để nâng cao chất lượng, Website đăng tải tất thông tin, tin tức liên quan đến thông tin công nghệ không nước mà cịn nước ngồi Website thống kê báo cáo cho người sử dụng thông tin như: Các tin tức cập nhật trở thành tin tức bật, cịn tin tức có lượt xem nhiều lên đầu cho người dùng theo dõi Xây dựng website cần có người quản trị để quản lý website, tránh thông tin không kiểm duyệt, thông tin sai lệch cập nhật tất thông tin, tin tức cách nhanh chóng, rõ ràng, xác với mốc thời gian thực tế Tin tức công nghệ phân thành nhiều loại khác loại cộng nghệ nước, công nghệ quốc tế phân chia theo lĩnh vực quy thành danh mục Mỗi danh mục quản lý nhiều viết tin tức cập nhật liên tục Để ghi nhớ thông tin xem hay chưa đọc, người dùng tạo tài khoản đăng nhập hệ thống Sau xem viết, hệ thống đánh dấu viết xem, viết Ngoài ra, để giúp việc lọc tin tức dễ dàng, website cịn tạo chức tìm kiếm theo nhiều tiêu chí theo danh mục, theo tên,… giúp người dùng khơng cần tìm viết, hay lỡ làm viết đọc tìm kiếm dễ dàng 1.3 u cầu đề tài: • Yêu cầu chức năng: - Phân quyền người dùng(admin – quản trị có quyền cao nhất) - Quản lý danh mục, viết, người dùng phân quyền với chức thêm, sửa, xóa tìm kiếm Hiển thị danh mục, thông tin viết Hiển thị theo viết mới, bật, xem… • Yêu cầu giao diện: - Giao diện hài hòa, thân thiện - Màu sắc không đối lập - Thông tin cập nhật thường xun - Hình thức thơng tin đa dạng, sinh động(kèm hình ảnh…) - Bảo mật, an tồn liệu Giới hạn và phạm vi đề tài: • Xây dựng chương trình dựa vào ngơn ngữ lập trình PHP sở liệu - 1.4 1.5 MySQL • Chương trình tập trung chức nghiệp vụ từ khảo sát thực tế Kết dự kiến đạt được: • Tìm hiểu nhu cầu, nghiệp vụ tin tức liên quan đến cơng nghệ nước quốc tế • Hiểu ngơn ngữ lập trình php áp dụng cho xây dựng website • Hồn thành website tin tức cơng nghệ với quyền: - Admin: thực chức quản lý danh mục, quản lý viết, quản lý người dùng quản lý phân quyền 1.6 Người dùng: thực chức đăng ký, đăng nhập, xem danh mục viết, tìm kiếm viết theo nhiều tiêu chí Bớ cục đồ án: Đồ án gồm chương với nội dung: • Chương I: Giới thiệu đề tài: Giới thiệu đề tài tìm hiểu gồm nội dung lý chọn đề tài, khảo sát thực tế, từ đưa yêu cầu đề tài, giới hạn phạm vi kết dự kiến đạt • Chương II: Kiến thức tảng: Nếu sở lý thuyết áp dụng cho trang web xây dựng ngôn ngữ HTML, CSS, ngôn ngữ lập trình PHP, Javascript… Và số cơng cụ hỗ trợ sử dụng với ngôn ngữ Jquery, Laravel… • Chương III: Phân tích và thiết kế hệ thống: Từ khảo sát trên, tiến hành sử dụng mơ hình UML biểu diễn, phân tích hệ thống triển khai Thiết kế sở liệu cần có website • Chương IV: Giao diện phần mềm: Áp dụng kiến thức học, phân tích thiết kế trên, triển khai giao diện trang web • Chương V: Tổng kết: Rút kết luận hướng phát triển cho trang web xây dựng • Chương VI: Tài liệu tham khảo: Nếu tài liệu, đầu sách tham khảo trình làm đồ án CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 2.1 Ngôn ngữ HTML và CSS: 2.1.1 Giới thiệu ngôn ngữ HTML: HTML(viết tắt từ Hypertext Markup Language “Ngôn ngữ đánh dấu siêu văn bản”) ngôn ngữ đánh dấu thiết kế để tạo nên trang web World Wide Web.[1] Hiện nay, HTML có phiên HTML5 có nhiều cải tiến ưu điểm bật so với HTML, phát hành vào năm 2014 2.1.2 Lợi ích HTML5: HTML5 có lợi ích lớn là: - Tương thích với trang web tồn tại: HTML5 không làm trang web trước ngừng hoạt động Nó giúp website hiệu tăng hiệu Không yêu cầu thay đổi tức gặp lỗi tả, cú pháp Các wevsite cũ hoạt động bình thường tương thích với tiêu chuẩn HTML5 Ngồi ra, HTML5 cịn hỗ trợ phiên cũ theo nhiều cách: • Hỗ trợ người lập trình tránh lỗi loại bỏ phiên Cho phép kiểm tra đoạn mã có tuân theo tiêu chuẩn HTML5 hay khơng • Hỗ trợ hãng phát triển duyệt khả tương thích ngược với nội dung tồn trước Nhờ vậy, nội dung tạo từ phiên cũ - xây dựng lại giúp tương thích với trình duyệt Tăng khả phục vụ đa phương tiện: HTML5 tăng khả phục vụ đa phương tiện mà không cần nhờ hỗ trợ từ bên thứ ba Hỗ trợ thiết bị di động, người dùng hướng đến việc truy cập website lúc nơi Giúp việc lập trình sử dụng web, ứng dụng trở nên dễ dàng, thuận tiện - Chuẩn hóa kĩ thuật khơng thức: HTML5 chuẩn hóa kỹ thuật khơng thức Nhưng HTML5 sử dụng rộng rãi tiện lợi dễ sử dụng 2.1.3 Giới thiệu ngôn ngữ CSS: Cascading Style Sheets(CSS) – dùng để miêu tả cách trình bày tài liệu viết ngôn ngữ HTML XHTML[2] CSS hiểu cách đơn giản cách mà chúng thêm kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho tài liệu Web 2.1.4 Tác dụng CSS: CSS có tác dụng là: - Hạn chế tối thiểu việc làm rối HTML trang Web thẻ quy định kiểu dáng(chữ đậm, in nghiêng, ), giúp mã nguồn trang Web trở nên gọn gàng - Tách biệt nội dung trang Web định dạng hiển thị, dễ dàng cho việc thay đổi Tạo kiểu dáng áp dụng cho nhiều trang Web, tránh lặp lại việc định dạng cho trang Web giống Hình 2.1 Tác dụng CSS với trang web HTML 2.2 Ngôn ngữ JavaScript và thư viện Jquery: 2.2.1 Giới thiệu ngôn ngữ JavaScript: JavaScript(JS) ngơn ngữ lập trình thơng dịch(được dịch lúc chạy) JavaScript ngày ứng dụng rộng rãi nhiều mơi trường khác nhau, tạo ứng dụng chạy phía Server (như NodeJS), ứng dụng di động (như React)… JavaScript sử dụng phổ biến để tích hợp vào trang web, chạy trình duyệt phía client.[3] 2.2.2 Lợi ích dùng JavaScript: Là ngơn ngữ lập trình phổ biến sử dụng nhiều tảng website, Javascript thể vai trò quan trọng JavaScript có số lợi ích sau: - Viết mã phía máy chủ: Các lập trình viên viết mã phía máy chủ - JavaScript Triển khai tập lệnh phía máy khách: Các lập trình viên dễ dàng viết lệnh phía máy khách với JavaScript, tích hợp tập lệnh liền mạch với HTML Cho phép website tương tác, phản hồi tạo giao diện hiển thị phong - phú Đơn giản hóa việc phát triển web: Cho phép nhà phát triển đơn giản hóa thành phần ứng dụng, qua đơn giản hóa việc phát triển ứng dụng - web phức tạp Thiết kế website bao gồm responsive: JavaScript cho phép thiết kế web responsive – tối ưu máy tính thiết bị di động với mã 10 Hình 3.34 Bảng roles(quyền vai trị) • Bảng permission_role(quyền_ quyền vai trị): Hình 3.35 Bảng permission_role(quyền_quyền vai trị) • Bảng role_user(quyền vai trị_người dùng): • Hình 3.36 Bảng role_user(quyền vai trị_người dùng) Bảng password_reset(đặt lại mật khẩu): Hình 3.37 Bảng password_reset(đặt lại mật khẩu) CHƯƠNG 4: GIAO DIỆN PHẦN MỀM 4.1 Giao diện Đăng ký: 53 Hình 4.1 Giao diện đăng ký 4.2 Giao diện Đăng nhập: Hình 4.2 Giao diện đăng nhập 4.3 Giao diện Trang chủ: 54 Hình 4.3 Giao diện trang chủ 4.4 Giao diện Danh mục: 55 Hình 4.4 Giao diện danh mục 4.5 Giao diện Chi tiết bài viết: 56 Hình 4.5 Giao diện chi tiết viết 4.6 Giao diện Quản lý danh mục: 57 4.7 Hình 4.6 Giao diện quản lý danh mục Giao diện Quản lý bài viết: Hình 4.7 Giao diện quản lý viết 4.8 Giao diện Quản lý người dùng: 58 4.9 Hình 4.8 Giao diện quản lý người dùng Giao diện Quản lý nhóm quyền: Hình 4.9 Giao diện quản lý nhóm quyền 4.10 Giao diện Quản lý quyền: 59 4.11 Hình 4.10 Giao diện quản lý quyền Giao diện quản lý vai trị: Hình 4.11 Giao diện quản lý vai trò 60 CHƯƠNG 5: TỔNG KẾT 5.1 Kết luận: Qua q trình nghiên cứu đề tài “Phân tích thiết kế xây dựng website tin tức công nghệ”, hướng dẫn tận tình thầy giúp đỡ nhiệt tình bạn, em có thêm nhiều kinh nghiệm hoàn thành đề tài Trong trình thực em cố gắng thực hiện, thời gian có hạn nên chưa giải toàn vấn đề Dưới số kết đạt hạn chế tồn tại: • Kết đạt được: - Nâng cao khả trình bày vấn đề - Vận dụng kiến thức học giải toán - Thiết kế giao diện người dùng giao diện quản lý - Người dùng xem viết, danh mục tìm kiếm theo nhiều tiêu chí - Quản lý thông tin người dùng, danh mục, viết quyền • Hạn chế tồn tại: - Khả áp dụng vào thực hạn chế trình khảo sát thực tế 5.2 cịn chưa có kinh nghiệm - Thời gian nên số vấn đề chưa giải tối ưu - Một số chức cịn hạn chế Hướng phát triển: Có thể phát triển thêm cho trang web: - Tăng tính bảo mật cho trang web - Bổ sung thêm chức nghiệp vụ quan trọng khác - Tạo sinh động, hấp dẫn để nâng cao trải nghiệm người dùng CHƯƠNG 6: TÀI LIỆU THAM KHẢO Tiếng việt – nguồn: Internet: [1]: https://vi.wikipedia.org/wiki/HTML [2]: https://vi.wikipedia.org/wiki/CSS [3]:https://xuanthulab.net/gioi-thieu-ve-javascript-va-doan-ma-javascript-dau-tien.html [4]: https://vi.wikipedia.org/wiki/JQuery [5]: https://vi.wikipedia.org/wiki/MVC [6]: https://vi.wikipedia.org/wiki/PHP [7]: https://en.wikipedia.org/wiki/Laravel 61 [8]:https://vi.wikipedia.org/wiki/C%C6%A1_s%E1%BB%9F_d%E1%BB%AF_li %E1%BB%87u 62 ... thông tin như: Các tin tức cập nhật trở thành tin tức bật, cịn tin tức có lượt xem nhiều lên đầu cho người dùng theo dõi Xây dựng website cần có người quản trị để quản lý website, tránh thông tin. .. biệt phải nắm bắt tin tức cách nhanh chóng điều thiết yếu Để nâng cao chất lượng, Website đăng tải tất thông tin, tin tức liên quan đến thông tin cơng nghệ khơng nước mà cịn nước Website thống kê... cập nhật phát hành thơng tin Về phía người dùng, họ xem thơng tin lúc nơi Về phía người cung cấp thơng tin, nhà báo họ dễ dàng cập nhật tin tức Do việc sử dụng trang thơng tin trực tuyến điều cần