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

: TS. Lý Quỳnh Trân

Đơn vị thực tập

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

Người hướng dẫn

: Nguyễn Tuấn Anh


Đà 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. Đồng

thờ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ệnh khô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ạn nê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.


LỜI CẢM ƠN
Với vốn kiến thức tích lũy được trong thời gian học tập, dưới sự giảng dạy của
thầy cô cùng với những kiến thức thực tế thu được trong q trình thực tập tại Cơng ty
cổ phần đầu tư và 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ữ”.
Để có thể 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 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. Em
xin 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 q 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 q. Đồ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ờ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ắc chắn
khô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óp
củ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 hồn
thiệ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
1.1

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

Tổng quan

Chương 2

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

1
1
2

2.1

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

2

2.2

Giới thiệu:

2

2.3

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

2

2.4

Mục tiêu:

2

2.5

Nội dung nghiên cứu:

3

Chương 3

Cơ sở lý thuyết

4

3.1

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

4

3.2

Laravel Framework :

5

3.3

Mơ hình MVC :

5

3.4

Ngơn ngữ lập trình VueJS:

7

3.5

Nuxt Framework:

8

Chương 4

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

10

4.1

Xác định và đặ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 5

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 6

Kết luận và 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 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 khố 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:
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àm
việ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ức
cao.
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ương
diệ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ông
nghệ 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ạo
website, 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ột
ngườ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àm
việ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ới
nhữ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. Đồng
thờ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ác
framework 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 ứng
dụng web chạy trên máy chủ. Mã lệnh PHP có thể được nhúng vào trong trang HTML
nhờ 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ình
duyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình
duyệ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


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

3.2 Laravel Framework :

Hình 3 Laravel Framework
Laravel là một trong những PHP Framework phổ biến nhất trên thế giới được
xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC.
Laravel là sự lựa chọn của nhiều lập trình viên PHP chun nghiệp vì hiệu suất, tính
năng và khả năng mở rộng của nó.
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ía
user (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ữa
Controller-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ột
Controller 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à Model
khơ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ình
nà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ình
này.
Các thành phần Laravel Model, View và Controller cũng có thể hiểu là các
thà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ằm
giữ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ần
trong Laravel.

3.4 Ngôn ngữ lập trình VueJS:
Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là
một framework linh động (nguyên bả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 các framework nguyên

khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích
việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer),
người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích
hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật
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-Page
Applications) 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ột
thứ 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ớm
trở thành người thay thế Angular và React, đây cũng chính là lý do Laravel giới thiệu
Vue.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ía
client 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



Server-Side Rendering



Hệ thống router và dữ liệu bất đồng bộ



Static File Serving



Hỗ trợ ES6/ES7



Đóng gói và nén js, css



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

4.2 Biểu đồ Usecase :
❖ Học viên

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

10


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


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