ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT HÀN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEBSITE TRUNG TÂM NGOẠI NGỮ Sinh viên thực hiện Trần Minh Lớp 18IT3 Giảng viên hướng dẫn.
ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT- HÀN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE TRUNG TÂM NGOẠI NGỮ Sinh viên thực : Trần Minh Lớp : 18IT3 Giảng viên hướng dẫn : TS Lý Quỳnh Trân Đơn vị thực tập : Công ty cố phần đầu tư công nghệ BAP Người hướng dẫn : Nguyễn Tuấn Anh Đà Nẵng, tháng năm 2021 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT-HÀN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE TRUNG TÂM NGOẠI NGỮ Đà Nẵng, tháng năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Giảng viên hướng dẫn (Ký ghi rõ họ tên) NHẬN XÉT CỦA HỘI ĐỒNG MỞ ĐẦU Trong thời đại nay, công nghệ thông tin ngày phát triển trở thành ngành mũi nhọn nước Đã có nhiều hệ thống, ứng dụng đời nhằm đáp ứng yêu cầu người dùng với mục đích khác Trong hệ thống đặt lịch hẹn khám online phát triển mạnh nhằm mục đích phục vụ yêu cầu thời đại dịch bệnh phức tạp Có khơng phịng khám, bệnh viện cố gắng thực hệ thống Trong thời gian thực tập tốt nghiệp Công ty cổ phần đầu tư công nghệ BAP, biết Cơng ty có dự án liên quan đến hệ thống Đồng thời đồng ý người hướng dẫn thực tập phân công nên em thực đề tài: “Xây dựng website trung tâm ngoại ngữ” Trong trình thực đồ án thực tập, với khoảng thời gian dịch bệnh đến công ty thực tập trực tiếp, thời gian hạn hẹp lượng kiến thức có hạn nên đồ án chắn cịn nhiều thiếu sót Mong nhận ý kiến nhận xét góp ý cô Lý Quỳnh Trân thầy cô nhà trường để chúng em hồn thiện đề tài lần tốt LỜI CẢM ƠN Với vốn kiến thức tích lũy thời gian học tập, giảng dạy thầy cô với kiến thức thực tế thu trình thực tập Công ty cổ phần đầu tư cơng nghệ BAP, em hồn thành khóa thực tập tốt nghiệp với đề tài: “Xây dựng website trung tâm ngoại ngữ” Để hồn thành khóa thực tập này, em xin bày tỏ lòng biết ơn sâu sắc đến TS Lý Quỳnh Trân tận tình hướng dẫn em suốt trình viết báo cáo Em xin chân thành cảm ơn Ban lãnh đạo Công ty cổ phần đầu tư công nghệ BAP cho phép tạo điều kiện cho thuận lợi cho em thực tập Công ty Em xin gửi lời cảm ơn đến anh Nguyễn Tuấn Anh người trực tiếp hướng dẫn giúp đỡ em trình thực tập Cuối cùng, em kính chúc q Thầy, Cơ dồi sức khỏe thành công nghiệp cao q Đồng kính chúc cơ, chú, anh, chị Công ty cổ phần đầu tư công nghệ BAP dồi sức khỏe, đạt nhiều thành công công việc Do thời gian dịch bệnh, trực tiếp thực tập tập công ty, thời gian có hạn, kiến thức cịn nhiều hạn chế nên Đồ án thực tập tốt nghiệp chắn tránh khỏi thiếu sót Chúng em mong nhận ý kiến đóng góp thầy nhà trường bạn bè để có thêm kinh nghiệm tiếp tục hồn thiện đồ án Chúng em xin chân thành cảm ơn! Đà Nẵng, ngày 26 tháng năm 2022 MỤC LỤC Chương 1.1 Giới thiệu đơn vị thực tập Tổng quan Chương Chương trình thực tập 1 2.1 Thực tế dự án công nghệ thông tin đơn vị thực tập 2.2 Giới thiệu: 2.3 Công việc giao: 2.4 Mục tiêu: 2.5 Nội dung nghiên cứu: Chương Cơ sở lý thuyết 3.1 Ngơn ngữ lập trình PHP : 3.2 Laravel Framework : 3.3 Mơ hình MVC : 3.4 Ngơn ngữ lập trình VueJS: 3.5 Nuxt Framework: Chương Phân tích thiết kế hệ thống 10 4.1 Xác định đặc tả Actor : 10 4.2 Biểu đồ Usecase : 10 4.3 Biểu đồ lớp : 12 4.4 Biểu đồ hoạt động : 13 4.5 Biểu đồ Entity Relationship Diagram (ERD): 15 Chương Xây dựng chương trình 16 5.1 Đăng nhập: 16 5.2 Đăng ký: 16 5.3 Trang chủ: 17 5.4 Các khóa học: 17 5.5 Chi tiết khóa học: 18 5.6 Đăng ký khóa học: 18 5.7 Thời khóa biểu: 19 Chương Kết luận hướng phát triển 20 6.1 Kết luận: 20 6.2 Hướng phát triển: 20 DANH MỤC HÌNH Hình Ngơn ngữ PHP Hình Sơ đồ hoạt động PHP Hình Laravel Framework Hình Mơ hình MVC Hình Laravel áp dụng mơ hình MVC .6 Hình Vue JS .8 Hình Nuxt JS Hình Biều dồ Usecase học viên 10 Hình Biểu đồ Usecase admin 11 Hình 10 Biều đồ Usecase giáo viên 11 Hình 11 Biểu đồ lớp 12 Hình 12 Biểu đồ hoạt động đăng ký khóa học 13 Hình 13 Biểu đồ hoạt động xác nhận đăng ký 14 Hình 14 Biểu đồ ERD .15 Hình 15 Màn hình đăng nhập 16 Hình 16 Màn hình đăng ký 16 Hình 17 Màn hình trang chủ .17 Hình 18 Màn hình khóa học 17 Hình 19 Màn hình chi tiết kháo học 18 Hình 20 Màn hình đăng ký khóa học 18 Hình 21 Màn hình thời khố biểu 19 Laravel áp dụng mơ hình MVC mức cao hơn, hình mơ hình MVC bản, đưa thành phần biết đến vào mô hình Các thành phần Laravel Model, View Controller hiểu thành phần MVC thông thường Tuy nhiên Laravel mở rộng hơn: - Laravel Route: phần người dùng yêu cầu đến Controller - Laravel Middleware: bạn học khái niệm sau, thành phần nằm Route Controller - Giữa Controller Model có Mutator, Accessor Tóm lại Laravel áp dụng kiến trúc MVC cấp độ cao hơn, mà thành phần MVC tổng hợp số thành phần Laravel 3.4 Ngơn ngữ lập trình VueJS: Gọi tắt Vue (phát âm /vjuː/, giống view tiếng Anh), Vue.js framework linh động (nguyên tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces) Khác với framework nguyên khối (monolithic), Vue thiết kế từ đầu theo hướng cho phép khuyến khích việc phát triển ứng dụng theo bước Khi phát triển lớp giao diện (view layer), người dùng cần dùng thư viện lõi (core library) Vue, vốn dễ học tích hợp với thư viện dự án có sẵn Cùng lúc đó, kết hợp với kĩ thuật đại SFC (single file components) thư viện hỗ trợ, Vue đáp ứng dễ dàng nhu cầu xây dựng ứng dụng trang (SPA - Single-Page Applications) với độ phức tạp cao nhiều Hình Vue JS Vue.js sử dụng để xây dựng giao diện người dùng giống React (sử dụng Facebook), Angular (được hậu thuẫn Google), Ember… Tuy nhiên, Vue.js có tốc độ tạo trang (render) nhanh chiếm nhớ Chúng ta xem bảng benchmark framework Javascript tiếng nay, Vue có thứ hạng khơng tồi chút Vue.js mắt năm 2015, Vue.js sớm khẳng định sớm trở thành người thay Angular React, lý Laravel giới thiệu Vue.js thiết lập mặc định 3.5 Nuxt Framework: Là framework, Nuxt.js có nhiều tính giúp bạn phát triển phía client server Dữ liệu bất đồng (Asynchronous Data), Middleware, Layouts, v.v Hình Nuxt JS Nuxt.js bao gồm thư viện sau đây: Vue Vue-Router Vuex (được include bạn sử dụng store ) Vue-Meta Tổng dung lượng bọn 28kb + gzip (thêm vuex tăng lên 31kb) Các tính Nuxt.js Tạo file vue (làm việc với vue) Automatic Code Splitting Server-Side Rendering Hệ thống router liệu bất đồng Static File Serving Hỗ trợ ES6/ES7 Đóng gói nén js, css Quản lý thẻ phần head (vue-meta) Hot reloading in Development Pre-processor: SASS, LESS, Stylus, etc Chương Phân tích thiết kế hệ thống 4.1 Xác định đặc tả Actor : - Học viên: người dùng website đăng ký, đăng nhập, chỉnh sửa thông tin cá nhân, đăng ký khóa học, nhận lịch hẹn gặp tư vấn trung tâm xem lịch học - Admin: người quản lý thông tin giáo viên, thêm giáo viên, thêm học viên, quản lý thơng tin khóa học môn học, quản lý tin tức, quản lý thời khóa biểu - Giáo viên: Quản lý khóa học phụ trách, quản lý tiến độ lớp học, đăng ký phịng dạy học, đăng ký thời khóa biểu 4.2 Biểu đồ Usecase : ❖ Học viên Hình Biều dồ Usecase học viên ❖ Admin 10 Hình Biểu đồ Usecase admin ❖ Giáo viên Hình 10 Biều đồ Usecase giáo viên 11 4.3 Biểu đồ lớp : Hình 11 Biểu đồ lớp 12 4.4 Biểu đồ hoạt động : ❖ Đăng ký khóa học Hình 12 Biểu đồ hoạt động đăng ký khóa học ❖ Hồn tất đăng ký 13 Hình 13 Biểu đồ hoạt động xác nhận đăng ký 14 4.5 Biểu đồ Entity Relationship Diagram (ERD): Hình 14 Biểu đồ ERD 15 Chương Xây dựng chương trình 5.1 Đăng nhập: Hình 15 Màn hình đăng nhập - Sử dụng email mật đăng ký để đăng nhập Email phải xác thực 5.2 Đăng ký: Hình 16 Màn hình đăng ký - Điền đầy đủ thông tin vào form Sử dụng email thật để đăng ký 16 5.3 Trang chủ: Hình 17 Màn hình trang chủ 5.4 Các khóa học: Hình 18 Màn hình khóa học - Hiển thị khóa học 17 5.5 Chi tiết khóa học: Hình 19 Màn hình chi tiết kháo học 5.6 Đăng ký khóa học: Hình 20 Màn hình đăng ký khóa học 18 5.7 Thời khóa biểu: Hình 21 Màn hình thời khố biểu 19 Chương Kết luận hướng phát triển 6.1 Kết luận: Những phần đạt kỳ Intern PHP công ty: - Xây dựng trang web company trip cho công ty sử dụng Nuxtjs Xây dựng trang web trung tâm ngoại ngữ sử dụng Laravel Nuxtjs Học kiến thức từ môi trường làm việc Bổ sung kiến thức Laravel NuxtJS Học cách làm việc nhóm phân chia cơng việc dự án - Ưu, nhược điểm có hệ thống: ⮚ Ưu điểm: + Giao diện quản lí admin đơn giản, dễ hiểu, dễ sử dụng + Giao diện người dùng đơn giản, người dùng dễ dàng sử dụng nắm bắt ⮚ Nhược điểm: + Giao diện đơn giản + Hệ thống nhiều chức chưa hồn thiện - Qua q trình thực đồ án, em học nhiều kiến thức mới: + Tiếp xúc cách làm việc thực tế doanh nghiệp + Cách tạo chức dựa yêu cầu mục đích người dùng + Hiểu cách dựng website cho người dùng 6.2 Hướng phát triển: Trong thời gian tới, em nghĩ hệ thống cần phát triển, nâng cấp thêm số phần như: - Tiếp tục nâng cấp giao diện người dùng để có tính thân thiện, dễ dùng - Tối ưu hệ thống, thêm số chức năng, tính khác cho hệ thống - Phát triển mơ hình đa tảng, chạy app moblie - Phát triển hệ thống bảo mật cho website - Sử dụng kỹ thuật áp dụng vào website 20 DANH MỤC TÀI LIỆU THAM KHẢO Laravel docs: https://laravel.com/docs/8.x Php docs: https://www.php.net/docs.php Vuejs docs: https://vuejs.org/guide/introduction.html Nuxtjs docs: https://nuxtjs.org/docs 21