Báo cáo website quản lý trung tâm ngoại ngữ

ĐẠ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

Đà Nẵng, tháng 9 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 9 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ý và ghi rõ họ tên)

NHẬN XÉT CỦA HỘI ĐỒNG

MỞ ĐẦU

Trong thời đại hiện nay, công nghệ thông tin đang ngày càng phát triển và trởthành ngành mũi nhọn của các nước Đã có rất nhiều hệ thống, ứng dụng ra đời nhằmđáp ứng các yêu cầu của người dùng với các mục đích khác nhau Trong đó các hệthống đặt lịch hẹn và khám online đang được phát triển mạnh nhằm mục đích phục vụcác yêu cầu trong thời đại dịch bệnh phức tạp như hiện nay Có không ít phòng khám,bệnh viện đang cố gắng thực hiện hệ thống này

Trong thời gian thực tập tốt nghiệp tại Công ty cổ phần đầu tư và công nghệBAP, được biết rằng Công ty cũng đang có 1 dự án liên quan đến hệ thống này Đồngthời được sự đồng ý của người hướng dẫn thực tập và phân công nên em đã thực hiện

đề tài: “Xây dựng website trung tâm ngoại ngữ”

Trong quá trình thực hiện đồ án thực tập, với khoảng thời gian dịch bệnhkhông thể đến công ty thực tập trực tiếp, thời gian hạn hẹp và lượng kiến thức có hạnnên đồ án chắc chắn sẽ còn nhiều thiếu sót Mong nhận được ý kiến nhận xét và góp ýcủa cô Lý Quỳnh Trân cũng như các thầy cô trong nhà trường để chúng em có thểhoàn thiện đề tài lần này tốt hơn

Để có thể hoà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 trong suốt quá 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ư và công nghệBAP đã cho phép và tạo điều kiện cho thuận lợi cho em được thực tập tại Công ty Emxin gửi lời cảm ơn đến anh Nguyễn Tuấn Anh là người đã trực tiếp hướng dẫn và giúp

đỡ em trong quá trình thực tập

Cuối cùng, em kính chúc quý Thầy, Cô dồi dào sức khỏe và thành công trong

sự nghiệp cao quý Đồng kính chúc các cô, chú, anh, chị trong Công ty cổ phần đầu tư

và công nghệ BAP luôn dồi dào sức khỏe, đạt nhiều thành công trong công việc

Do trong thời gian dịch bệnh, không thể trực tiếp thực tập tập tại công ty, thờigian 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ắc chắnkhông thể tránh khỏi những thiếu sót Chúng em rất mong nhận được ý kiến đóng gópcủa các thầy cô trong nhà trường và bạn bè để có thêm kinh nghiệm và tiếp tục hoànthiện đồ án của mình

Chúng em xin chân thành cảm ơn!

Đà Nẵng, ngày 26 tháng 8 năm 2022

MỤC LỤC

Chương 1 Giới thiệu về đơn vị thực tập 1

Chương 2 Chương trình thực tập 22.1 Thực tế dự án công nghệ thông tin tại đơn vị thực tập 2

3.4 Ngôn ngữ lập trình VueJS: 73.5 Nuxt Framework: 8Chương 4 Phân tích và thiết kế hệ thống 104.1 Xác định và đặc tả Actor : 104.2 Biểu đồ Usecase : 10

4.4 Biểu đồ hoạt động : 134.5 Biểu đồ Entity Relationship Diagram (ERD): 15Chương 5 Xây dựng chương trình 16

6.2 Hướng phát triển: 20

DANH MỤC HÌNH

Hình 1 Ngôn ngữ PHP 4

Hình 2 Sơ đồ hoạt động PHP 5

Hình 3 Laravel Framework 5

Hình 4 Mô hình MVC 6

Hình 5 Laravel áp dụng mô hình MVC 6

Hình 6 Vue JS 8

Hình 7 Nuxt JS 8

Hình 8 Biều dồ Usecase học viên 10

Hình 9 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 các 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 khoá biểu 19

Chương 1 Giới thiệu về đơn vị thực tập

1.1 Tổng quan

CÔNG TY CỔ PHẦN ĐẦU TƯ VÀ CÔNG NGHỆ BAP

Địa chỉ trụ sở chính: 81 Quang Trung, Thạch Thang, Hải Châu, Đà Nẵng

Điện thoại: 0236 6565 115

Email: bap-cb@bap.jp

Công ty được thành lập vào năm 2016 và là nơi có những con người luôn làmviệc cần mẫn, và luôn cháy bỏng khi được nhận những công việc có tính thách thứccao

Chức năng dịch vụ kinh doanh của công ty:

- Phát triển Website/Smartphone App

- Phát triển Business Application

- Phát triển và tư vấn SAP,ERP

- Phát triển trò chơi

- Phát triển ứng dụng dùng công nghệ Blockchain

- Phát triển ứng dụng dùng công nghệ AI

- Phát triển ứng dụng dùng công nghệ BigData

Trong đó, lĩnh vực kinh doanh chủ yếu của công ty là sản xuất các phần mềm

và cung cấp các giải pháp công nghệ thông tin cho các cá nhân, doanh nghiệp

Hiện nay BAP đã và đang khẳng định sức mạnh của mình trên các phươngdiện:

 Triển khai và phát triển các sản phẩm phần mềm

 Tư vấn xây dựng hệ thống thông tin quản lý

 Hỗ trợ khách hàng trong suốt quá trình sử dụng phần mềm

 Bảo hành và bảo trì sản phẩm đã cung cấp cho khách hàng

Với kiến thức công nghệ cùng kinh nghiệm thực tiễn dồi dào, chúng tôi mangđến dịch vụ Offshore cho nhiều loại hình sản phẩm đa dạng, mang hàm lượng côngnghệ cao

1

Chương 2 Chương trình thực tập

2.1 Thực tế dự án công nghệ thông tin tại đơn vị thực tập

Hiện nay, công ty có nhiều dự án trong nhiều lĩnh vực như thiết kế và tạowebsite, lập trình ứng dụng trí tuệ nhân tạo, ứng dụng di động …

Công nghệ:

- Ngôn ngữ lập trình: Python, PHP, Java, Net …

- Cơ sở dữ liệu: MySQL, Firebase, Oracle, MogoDB…

- Hệ điều hành: Window, Linux, Mac OS, Anroid …

2.2 Giới thiệu:

Khóa: PHP Intership

Tên công ty: Công ty Cổ phần đầu tư và Công nghệ BAP

Vị trí tại công ty: Sinh viên thực tập

Thời gian: 13/6/2022 – 13/9/2022

2.3 Công việc được giao:

Hiện nay, học ngoại ngữ đã và đang trở thành một xu hướng của bất kì mộtngười trẻ nào Đơn giản vì nếu chỉ với tiếng mẹ đẻ, có thể bạn sẽ mất đi cơ hội làmviệc trong những công ty đa quốc gia và giảm đi năng lực cạnh tranh trực tiếp vớinhững ứng viên thông thạo thêm ngoại ngữ khác Một số trung tâm ngoại ngữ đã sửdụng hệ thống này để dễ dàng tiếp cận đến với các học viên hơn

Trong thời gian thực tập tốt nghiệp tại Công ty Cổ phần đầu tư và Công nghệBAP, được biết rằng Công ty cũng đang có 1 dự án liên quan đến hệ thống này Đồngthời được sự đồng ý của người hướng dẫn thực tập và phân công nên em đã thực hiện

đề tài: “Xây dựng website trung tâm ngoại ngữ”

2.4 Mục tiêu:

Mục tiêu của kỳ thực tập tốt nghiệp :

- Hoàn thành báo cáo thực tập tốt nghiệp

- Tiếp cận được cách làm việc thực tế của một lập trình viên

- Trao dồi và nâng cao về kỹ năng lập trình PHP,Vuejs

- Học hỏi, tiếp thu kinh nghiệm từ anh chị trong công ty

2

2.5 Nội dung nghiên cứu:

Nội dung nghiên cứu của đề tài bao gồm các công nghệ chính như là:

- Củng cố và tiềm hiểu thêm kiến thức về PHP, Vuejs, Vuex, Vue3js và cácframework như Laravel, Nuxt

- Phân tích và thiết kế hệ thống

- Xây dựng giao diện đăng ký các khóa học

- Xây dựng giao diện quản lý giáo viên, học viên và các khóa học

- Xây dựng giao diện quản lý tin tức và thời khóa biểu

3

Chương 3 Cơ sở lý thuyết

3.1 Ngôn ngữ lập trình PHP :

Hình 1 Ngôn ngữ PHP

PHP - viết tắt hồi quy của "Hypertext Preprocessor", là ngôn ngữ lập trình

kịch bản (scripting language) mã nguồn mở được dùng phổ biến để ra tạo các ứngdụng web chạy trên máy chủ Mã lệnh PHP có thể được nhúng vào trong trang HTMLnhờ sử dụng cặp thẻ PHP <? php ?>

PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quản trị

cơ sở dữ liệu nên PHP thường đi kèm với Apache, MySQL

- Apache là một phần mềm web server có nhiệm vụ tiếp nhận request từ trìnhduyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trìnhduyệt

- MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác (Postgress,Oracle, SQL server ) đóng vai trò là nơi lưu trữ và truy vấn dữ liệu

PHP hoạt động như thế nào?

Khi người sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine đểthông dịch dịch trang PHP và trả kết quả cho người dùng như hình bên dưới:

4

Những lý do khiến Laravel trở nên phổ biến:

- Cú pháp dễ hiểu – rõ ràng

- Hệ thống đóng gói modular và quản lý gói phụ thuộc

- Nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ

- Nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

3.3 Mô hình MVC :

Mô hình MVC là viết tắt của Model-View-Controller Trong đó, Model xử lý

dữ liệu Controller xử lý logic Còn View là phần hiển thị và tiếp nhận request từ phíauser (người dùng)

5

Hình 4 Mô hình MVC

Trong MVC, Controller đóng vai trò cầu nối giữa Model và View GiữaController-View và Controller-Model đều là tương tác 2 chiều Mỗi phần trong đó sẽbao gồm các đoạn code xử lý độc lập theo vai trò của mình Mục đích chính của môhình này nhằm chia nhỏ code để dễ phát triển và bảo trì

Khi có một action từ phía user, ví dụ như submit form, action đó sẽ đi qua mộtController chính Controller này gọi đến các Controller phụ và các Model cần thiết để

xử lý Sau đó, nó sẽ quyết định gọi đến phần View nào cần hiển thị và cập nhật lại.Đặc tính này cũng nâng cao tính tái sử dụng của code Trong đó, View và Modelkhông cần phải quan tâm mình được gọi như thế nào và ở đâu

Laravel áp dụng mô hình MVC nhưng ở một mức cao hơn, hình trên đây là một

mô hình MVC cơ bản, chúng ta sẽ đưa các thành phần đã được biết đến vào mô hìnhnày

Hình 5 Laravel áp dụng mô hình MVC

6

Laravel áp dụng mô hình MVC nhưng ở một mức cao hơn, hình trên đây là một

mô hình MVC cơ bản, chúng ta sẽ đưa các thành phần đã được biết đến vào mô hìnhnày

Các thành phần Laravel Model, View và Controller cũng có thể hiểu là cácthành phần trong MVC thông thường Tuy nhiên Laravel đã mở rộng hơn:

- Laravel Route: đấy chính là phần người dùng yêu cầu đến Controller

- Laravel Middleware: bạn sẽ được học khái niệm này sau, là thành phần nằmgiữa Route và Controller

- Giữa Controller và Model chúng ta có Mutator, Accessor

Tóm lại Laravel đã áp dụng kiến trúc MVC nhưng ở một cấp độ cao hơn, màtrong đó các thành phần trong MVC đó có thể là tổng hợp của một số thành phầntrong Laravel

hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp

ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-PageApplications) với độ phức tạp cao hơn nhiều

7

Hình 6 Vue JS

Vue.js được sử dụng để xây dựng giao diện người dùng giống như React (sửdụng bởi Facebook), Angular (được hậu thuẫn bởi Google), Ember… Tuy nhiên,Vue.js có tốc độ tạo trang (render) rất nhanh và chiếm khá ít bộ nhớ Chúng ta có thểxem bảng benchmark các framework Javascript nổi tiếng nhất hiện nay, Vue có mộtthứ hạng không tồi chút nào

Vue.js mới chỉ ra mắt năm 2015, nhưng Vue.js đã sớm khẳng định mình và sớmtrở thành người thay thế Angular và React, đây cũng chính là lý do Laravel giới thiệuVue.js trong thiết lập mặc định

3.5 Nuxt Framework:

Là một framework, Nuxt.js có rất nhiều tính năng giúp bạn phát triển giữa phíaclient và server như Dữ liệu bất đồng bộ (Asynchronous Data), Middleware, Layouts,v.v

Hình 7 Nuxt JS

8

Nuxt.js bao gồm các thư viện sau đây:

 Vue 2

 Vue-Router

 Vuex (được include chỉ khi bạn sử dụng store )

 Vue-Meta Tổng dung lượng của cả bọn là 28kb min + gzip (thêm vuex nữa thì tăng lên 31kb)

Các tính năng của Nuxt.js

 Tạo ra file vue (làm việc với vue)

 Automatic Code Splitting

 Quản lý các thẻ ở phần head (vue-meta)

 Hot reloading in Development

 Pre-processor: SASS, LESS, Stylus, etc

9

Chương 4 Phân tích và thiết kế hệ thống

4.1 Xác định và đặc tả Actor :

- Học viên: là người dùng website đăng ký, đăng nhập, chỉnh sửa thông tin cá

nhân, đăng ký các khóa học, nhận lịch hẹn gặp tư vấn của trung tâm và xem lịch học

- Admin: là 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 các khóa học và 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 độ của lớp học, đăng ký

phòng dạy học, đăng ký thời khóa biểu

Hình 9 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

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 5 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 và mật khẩu đã đăng ký để đăng nhập

- Email phải được 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

16

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 khoá biểu

19

Chương 6 Kết luận và hướng phát triển

6.1 Kết luận:

Những phần đã đạt được trong kỳ Intern PHP tại 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 và Nuxtjs

- Học được những kiến thức mới từ môi trường làm việc

- Bổ sung kiến thức về Laravel và NuxtJS

- Học được cách làm việc nhóm và phân chia công việc trong dự án

- Ưu, nhược điểm đang có của 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 và nắm bắt

⮚ Nhược điểm:

+ Giao diện vẫn còn đơn giản

+ Hệ thống còn nhiều chức năng chưa được hoàn thiện

- Qua quá trình thực hiện đồ án, em đã học được rất nhiều kiến thức mới:

+ Tiếp xúc cách làm việc thực tế tại doanh nghiệp

+ Cách tạo ra những chức năng dựa trên yêu cầu và mục đích của ngườidùng

+ Hiểu được cách dựng một website cho người dùng

6.2 Hướng phát triển:

Trong thời gian sắp tới, em nghĩ hệ thống sẽ cần phát triển, nâng cấp thêm một

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 một số chức năng, tính năng khác cho hệ thống

- Phát triển mô hình đa nền tảng, chạy được trên cả app moblie

- Phát triển các hệ thống bảo mật cho website

- Sử dụng những kỹ thuật mới áp dụng vào website

20

DANH MỤC TÀI LIỆU THAM KHẢO

1 Laravel docs: https://laravel.com/docs/8.x

2 Php docs: https://www.php.net/docs.php

3 Vuejs docs: https://vuejs.org/guide/introduction.html

4 Nuxtjs docs: https://nuxtjs.org/docs

21