Đang tải... (xem toàn văn)
ĐẠI HỌC CÔNG NGHỆ GTVT KHOA CÔNG NGHỆ THÔNG TIN PHÂN TÍCH THIẾT KẾ VÀ XÂY DỰNG WEBSITE HỌC TIẾNG ANH ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành xxx (Chú ý Ghi đúng tên ngành đào tạo) HÀ NỘI 2022 HÀ NỘI 20< hai số cuối của năm bảo vệ ĐATN> (chữ hoa, 12pt, đậm, căn giữa) TRƯỜNG ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC PHÂN TÍCH THIẾT KẾ VÀ XÂY DỰNG WEBSITE HỌC TIẾNG ANH Giảng viên hướng dẫn ThS Xxx xxx ĐẠI HỌC CÔNG NGHỆ GTVT KHOA.
ĐẠI HỌC CÔNG NGHỆ GTVT KHOA CÔNG NGHỆ THÔNG TIN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI KHOA CÔNG NGHỆ THÔNG TIN PHÂN TÍCH THIẾT KẾ VÀ XÂY DỰNG WEBSITE HỌC TIẾNG ANH ĐỒ ÁN TỐT ĐẠI HỌCĐẠI HỆ HỌC CHÍNH QUY ĐỒ NGHIỆP ÁN TỐT NGHIỆP Ngành: xxx (Chú ý: Ghi tên ngành đào tạo) PHÂN TÍCH THIẾT KẾ VÀ XÂY DỰNG WEBSITE HỌC TIẾNG ANH Giảng viên hướng dẫn: ThS Xxx xxx HÀ NỘI - 2022 ĐẠI HỌC CÔNG NGHỆ GTVT KHOA CÔNG NGHỆ THÔNG TIN PHÂN TÍCH THIẾT KẾ VÀ XÂY DỰNG WEBSITE HỌC TIẾNG ANH ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: xxx (Chú ý: Ghi tên ngành đào tạo) Cán hướng dẫn: (ký tên) Cán đồng hướng dẫn: (ký tên) HÀ NỘI - 2022 MỤC LỤC Phần 1: Phần mở đầu 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 Kết dự kiến đạt Phần 2: Phần nội dung Chương 1: Cơ sở lý thuyết .2 1.1 Phân tích thiết kế hướng đối tượng: 1.1.1 Định nghĩa: 1.1.2 Phần mềm hỗ trợ thiết kế Draw.io trực tuyến: .2 1.2 UML phân tích thiết kế hướng đối tượng: 1.2.1 Định nghĩa UML: 1.2.2 Phân tích thiết kế hướng đối tượng sử dụng UML: 1.3 Ngôn ngữ thiết kế web HTML CSS: 1.3.1 HTML: .3 1.3.2 CSS: 1.4 Ngôn ngữ kịch JavaScript: 1.4.1 Khái niệm: 1.4.2 Kết hợp HTML, CSS JavaScript: 1.4.3 Thư viện JQuery: 1.5 Các ngôn ngữ lập trình PHP: 1.5.1 Các khái niệm: 1.5.2 Framework Laravel: 1.5.3 Mơ hình MVC: 1.6 Hệ quản trị sở liệu MySQL: 1.6.1 Các khái niệm: 1.6.3 MySQL: .7 Chương 2: Phân tích thiết kế hệ thống 2.1 Khảo sát hệ thống: 2.1.1 Mô tả hệ thống: 2.1.2 Yêu cầu với hệ thống triển khai: 2.2 Biểu đồ Use Case hệ thống: 2.2.1 Các tác nhân hệ thống: 2.2.2 Use Case tổng quát: .9 2.2.3 Use Case hệ thống: .10 2.2.4 Use Case tác nhân USER(người dùng): .11 2.2.5 Use Case quản lý loại chứng chỉ: 15 2.2.6 Use Case quản lý cấp học: 16 2.2.7 Use Case quản lý câu hỏi: .17 2.2.8 Use Case quản lý người dùng: 18 2.2.9 Use Case quản lý giáo viên: 19 2.2.10 Use Case quản lý bình luận: 20 2.2.11 Use Case quản lý silde: 21 2.2.12 Use Case quản lý tìm kiếm: 22 2.2.13 Use Case báo cáo thống kê: 23 2.3 Biểu đồ hoạt động hệ thống: .24 2.4 Biểu đồ hệ thống: 30 2.5 Thiết kế sở liệu: 37 Chương 3: Thiết kế hệ thống .37 Kết luận 37 Tài liệu tham khảo 38 DANH MỤC HÌNH Hình 2.1 Các tác nhân hệ thống Hình 2.2 Use Case tổng quát Hình 2.3 Use Case hệ thống Hình 2.4 Use Case tác nhân USER(người dùng) Hình 2.6 Use Case quản lý loại chứng Hình 2.11 Use Case quản lý cấp học Hình 2.7 Use Case quản lý câu hỏi Hình 2.5 Use Case quản lý người dùng Hình 2.12 Use Case quản lý giảng viên Hình 2.9 Use Case quản lý bình luận Hình 2.10 Use Case quản lý slide Hình 2.13 Use Case quản lý tìm kiếm Hình 2.14 Use Case báo cáo thống kê Hình 2.12 Biểu đồ hoạt động tìm kiếm câu hỏi Hình 2.13 Biểu độ hoạt động đăng ký Hình 2.14 Biểu đồ hoạt động đăng nhập Hình 2.15 Biểu đồ hoạt động thêm câu hỏi Hình 2.16 Biểu đồ hoạt động cập nhật thơng tin cá nhân Hình 2.17 Biểu đồ hoạt động bình luận Hình 2.18 Biểu đồ đăng ký Hình 2.19 Biểu đồ đăng nhập Hình 2.20 Biểu đồ xem câu hỏi Hình 2.21 Biểu đồ thêm câu hỏi Hình 2.22 Biểu đồ cập nhật câu hỏi Hình 2.23 Biểu đồ xóa câu hỏi Hình 2.24 Biểu đồ tìm kiếm câu hỏi Hình 2.25 Biểu đồ bình luận Phần 1: Phần mở đầu 1.1 Lý chọn đề tài Tiếng anh ngôn ngữ phổ biến dùng lĩnh vực sống Việc học luyện từ vựng tiếng anh cần thiết Việc thành thạo ngôn ngữ giúp tìm kiếm nguồn tài liệu phục vụ việc học tập tốt hơn, người giỏi tiếng anh có nhiều hội tìm kiếm cơng việc Việc tự học tiếng anh ln đề tài nóng giới trẻ, có nhiều cách tự học tiếng anh khác Trong thời điểm dịch bệnh nay, người dùng ngày có xu hướng tìm hiểu học tập qua mạng Internet Tuy nhiên, nhiều phần mềm học tiếng anh thiết bị di động chưa có nhiều, chưa thật đáp ứng nhu cầu học người dùng Nên việc xây dựng website học tiếng anh với cấp độ, chủ đề đa dạng cần thiết Với mục đích giúp người dùng tiếp cận nhiều với học tiếng anh đa dạng chủ đề giao lưu với người học khác, em định chọn đề tài “Phân tích thiết kế xây dựng website học tiếng anh” Việc xây dựng website đáp ứng nhu cầu học tập tiếng anh người 1.2 Mục tiêu đề tài - Trình bày vấn đề liên quan đến ngơn ngữ PHP, sở liệu Mysql, mơ hình MVC - Khảo sát thực trạng chương trình học tiếng anh nhu cầu học tập người dùng - Phân tích hệ thống chương trình bao gồm giao diện, activity nhằm đáp ứng nhu cầu người dùng - Triển khai cài đặt chương trình 1.3 Giới hạn 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 với Framework Laravel sở liệu Mysql - Chương trình tập chung chức nghiệp vụ từ khảo sát thực trạng 1.4 Kết dự kiến đạt - Tìm hiểu nhu cầu, nghiệp vụ tìm kiếm chương trình học tiếng anh người dùng - Hiểu ngơn ngữ lập trình PHP áp dụng cho xây dựng website - Hoàn thành website học tiếng anh với tính như: o Admin: thực chức quản trị hệ thống, quản lý chứng chỉ, quản lý câu hỏi, quản lý slide, quản lý người dùng, quản lý bình luận, quản lý giáo viên, quản lý cấp học, xem thống kê o Người dùng: thực chức cập nhật thông tin cá nhân, bình luận, đăng ký, đăng nhập tài khoản hệ thống, học thử theo cấp độ, đăng ký khóa học, test thi thử Phần 2: Phần nội dung Chương 1: Cơ sở lý thuyết 1.1 Phân tích thiết kế hướng đối tượng: 1.1.1 Định nghĩa: - Phân tích thiết kế hướng đối tượng(OOAD) giai đọan phát triển mơ hình xác súc tích vấn đề, có thành phần đối tượng khái niệm đời thực, dễ hiểu người sử dụng - Năm nguyên tắc thiết kế hướng đối tượng: Một lớp nên có lý để thay đổi, tức lớp nên xử lý chức đơn lẻ, Nếu đặt nhiều chức vào lớp dẫn đến phụ thuộc chức với sau thay đổi chức phá vỡ chức lại Các lớp, module, chức nên dễ dàng Mở(Open) cho việc thêm chức mới, Đóng(Close) cho việc thay đổi Lớp dẫn xuất phải có khả thay lớp cha Chương trình khơng nên buộc phải cài đặt Interface mà khơng sử dụng đến Các module cấp cao không nên phụ thuộc vào module cấp thấp Cả hai nên phụ thuộc thông qua lớp trừu tượng Lớp trừu tượng không nên phụ thuộc vào chi tiết Chi tiết nên phụ thuộc vào trừu tượng 1.1.2 Phần mềm hỗ trợ thiết kế Draw.io trực tuyến: - Draw.io ứng dụng vẽ biểu đồ miễn phí cho phép người dùng tạo chia sẻ sơ đồ trình duyệt web Cơng cụ trực tuyến hoạt động với G Suite / Google Drive Dropbox Cũng làm việc sơ đồ ngoại tuyến lưu trữ cục - Draw.io cung cấp giao diện trực quan với tính kéo thả, mẫu sơ đồ tùy chỉnh thư viện hình khối mở rộng Người dùng tạo chỉnh sửa loạt sơ đồ, biểu đồ bao gồm biểu đồ luồng, biểu đồ quy trình, sơ đồ tổ chức, sơ đồ ER, UML, sơ đồ mạng, - Hệ thống chức phong phú draw.io cho phép người dùng theo dõi khôi phục thay đổi, nhập xuất định dạng khác nhau, đồng thời tự động xuất chia sẻ cơng việc 1.2 UML phân tích thiết kế hướng đối tượng: 1.2.1 Định nghĩa UML: - UML ngôn ngữ mơ hình hố hợp dùng để đặc tả, trực quan hóa tư liệu hóa phần mềm hướng đối tượng, có phần bao gồm ký hiệu hình học, phương pháp hướng đối tượng sử dụng để thể miêu tả thiết kế hệ thống 1.2.2 Phân tích thiết kế hướng đối tượng sử dụng UML: - Phân tích thiết kế hướng đối tượng cần vẽ để mô tả hệ thống thiết kế, cịn UML ngơn ngữ mô tả vẽ nên cần nội dung thể Do vậy, phân tích thiết kế theo hướng đối tượng sử dụng UML để hiểu diễn thiết kế nên chúng thường đơi với OOAD sử dụng UML với phương thức sau: View(góc nhìn): Mỗi góc nhìn thể khía cạnh Trong phần mềm OOAD sử dụng UML có góc nhìn: Về ca sử dụng, cấu trúc, triển khai hệ thống, thành phần hệ thống Diagram(bản vẽ): Các vẽ dùng để thể góc nhìn hệ thống Bản vẽ mô tả ca sử dụng, mô tả cấu trúc hệ thống, mô tả tương tác đối tượng hệ thống Notations(các ký hiệu): Các kí hiệu để vẽ, từ vựng ngôn ngữ tự nhiên Mechanisms(các quy tắc): Mỗi vẽ có quy tắc riêng cần nắm quy tắc để tạo nên thiết kế quán 1.3 Ngôn ngữ thiết kế web HTML CSS: 1.3.1 HTML: - HTML(Hypertext Markup Language) mã dùng để xây dựng nên cấu trúc nội dung trang web Ví dụ, nội dung cấu thành loạt đoạn văn, danh sách liệt kê, sử dụng hình ảnh bảng biểu Hiện nay, phiên HTML HTML5 1.3.2 CSS: - CSS(viết tắt Cascading Style Sheets) dùng để miêu tả cách trình bày tài liệu viết ngôn ngữ HTML XHTML CSS hiểu đơn giản cách mà thêm kiểu hiển thị (font chữ, màu sắc, kích thước ) cho tài liệu web - Tác dụng CSS: 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 1.4 Ngôn ngữ kịch JavaScript: 1.4.1 Khái niệm: - Javascript ngơn ngữ lập trình HTML ứng dụng Web Nó nhẹ sử dụng phổ biến nhất, phần trang web Chúng cho phép client-server script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng - Một số ưu điểm JavaScript: Tiêt kiệm băng thông máy chủ: Javascript sử dụng thiết kế website giúp tiết kiệm băng thông máy máy chủ vô tốt chúng chạy trực tiếp máy người dùng Các dịng Script thực thi trình duyệt người dùng để gia tăng hiệu suất, kéo dài tuổi thọ máy chủ tiết kiệm diện tích băng thơng Linh hoạt vận hành, tương thích tốt: Để thực thi, trình duyệt web cần tải file JavaScript máy chủ từ tên miền riêng biệt nhúng thẳng vào file HTML chạy mà không cần tải thêm Javascript chạy hầu hết trình duyệt phổ biến Cốc Cốc, Chrome, Firefox, Safari Khơng thế, hầu hết trình duyệt web có tích hợp sẵn trình thơng dịch ngơn ngữ JavaScript, đảm bảo người dùng sử dụng mà khơng cơng tải trình duyệt, giảm tỷ lệ thực thi chức JavaScript Điều vô tiện lợi cho người dùng mạng Dễ dàng kiểm tra, xử lý vấn đề: Với lợi có nhiều trình duyệt hỗ trợ nên việc kiểm tra xử lý vấn đề dễ dàng Đa số trình duyệt web có cài sẵn cơng cụ xử lý lỗi Javascript bảng điều khiển trình duyệt Javascript sở hữu cấu trúc dễ đọc với cácnguyên tắc rõ ràng nên việc xác định gỡ lỗi trở nên đơn giản nhiều Nâng cao trải nghiệm người dùng: Website sử dụng ngơn ngữ lập trình giúp thu hút người dùng tính hay ho, hình ảnh sinh động hấp dẫn, chức lướt tương tác nhanh nhạy Nhờ tính đó, người dùng cảm thấy thoải mái, thích thú tin dùng trang web 1.4.2 Kết hợp HTML, CSS JavaScript: - Một website thường có phần gồm HTML, CSS Javascript Trong đó, HTML định nội dung cấu trúc trang web; CSS định màu sắc, hình dáng, kiểu chữ,… Hầu hết thay đổi HTML CSS thể dạng tĩnh, thực hành động với chuyển Biểu đồ hoạt động thêm câu hỏi 35 Hình 2.15 Biểu đồ hoạt động thêm câu hỏi 36 Biểu đồ hoạt động cập nhật thông tin cá nhân Hình 2.16 Biểu đồ hoạt động cập nhật thơng tin cá nhân 37 Biểu đồ hoạt động bình luận 38 Hình 2.17 Biểu đồ hoạt động bình luận 39 2.4 Biểu đồ hệ thống: Biểu đồ đăng ký Hình 2.18 Biểu đồ đăng ký 40 Biểu đồ đăng nhập 41 Hình 2.19 Biểu đồ đăng nhập Biểu đồ xem câu hỏi Hình 2.20 Biểu đồ xem câu hỏi Biểu đồ thêm câu hỏi 42 Hình 2.21 Biểu đồ thêm câu hỏi 43 Biểu đồ cập nhật câu hỏi Hình 2.22 Biểu đồ cập nhật câu hỏi 44 Biểu đồ xóa câu hỏi 45 Hình 2.23 Biểu đồ xóa câu hỏi Biểu đồ tìm kiếm câu hỏi 46 Hình 2.24 Biểu đồ tìm kiếm câu hỏi 47 Biểu đồ bình luận Hình 2.25 Biểu đồ bình luận 2.5 Thiết kế sở liệu: - Biểu đồ lớp - Xác định bảng thực thể 48 Chương 3: Thiết kế hệ thống - Thiết kế giao diện - Cài đặt ứng dụng kiểm thử - Triển khai Kết luận - Tóm tắt kết đạt - Hạn chế hướng phát triển Tài liệu tham khảo [1] Thạc Bình Cường, 2002, Phân tích thiết kế hệ thống thông tin, nhà xuất Khoa học Kỹ thuật [2] Phạm Hữu Khang, Hoàng Đức Hải, 2005, Giáo trình nhập mơn PHP MySQL – Xây dựng ứng dụng web (tủ sách dễ học), nhà xuất Phương Đông [3] https://en.wikipedia.org/wiki/PHP [4] https://en.wikipedia.org/wiki/Laravel [5] https://en.wikipedia.org/wiki/MySQL [6] https://vi.wikipedia.org/wiki/CSS [7] https://vi.wikipedia.org/wiki/HTML [8]https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm 49
