TRƯỜNG ĐẠI HỌC THỦY LỢI

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP NGÀNH CNTT

ĐỀ TÀI: XÂY DƯNG WEBSITE HỌC TIẾNG ANH

Sinh viên thực hiện: Nguyễn Kỳ Anh – Lớp 59TH3

Giảng viên hướng dẫn: TS Nguyễn Quang Trung

HÀ NỘI, NGÀY … THÁNG … NĂM 2022

 LỜI CAM ĐOAN

Lời đầu tiên em xin cam đoan đây là Đồ án tốt nghiệp của chính bản thân em. Các kết
quả trong Đồ án tốt nghiệp này là trung thực, và không sao chép từ bất kỳ một nguồn
nào và dưới bất kỳ hình thức nào. Việc tham khảo các nguồn tài liệu (nếu có) đã được
thực hiện trích dẫn và ghi nguồn tài liệu tham khảo đúng quy định.

Tác giả ĐANT

Chữ ký

Nguyễn Kỳ Anh

i
 LỜI CÁM ƠN

Báo cáo tốt nghiệp chuyên ngành CNTT với đề tài “Xây dựng website học tiếng anh”
là kết quả của quá trình cố gắng không ngừng của bản thân và được sự giúp đỡ, động
viên khích lệ của các thầy, bạn bè đồng nghiệp và người thân. Qua trang viết này tác
giả xin gửi lời cảm ơn tới những người đã giúp đỡ em trong thời gian học tập - nghiên
cứu khoa học vừa qua.

Em xin tỏ lòng kính trọng và biết ơn sâu sắc đối với thầy Nguyễn Quang Trung đã
trực tiếp tận tình hướng dẫn cũng như cung cấp tài liệu thông tin khoa học cần thiết để
em có thể hoàn thành ĐATN này.

Xin chân thành cảm ơn Lãnh đạo trường Đại học Thủy Lợi khoa CNTT đã tạo điều
kiện cho em hoàn thành tốt công việc nghiên cứu khoa học của mình.
Cuối cùng em xin chân thành cảm ơn các bạn học đã giúp đỡ em trong quá trình học
tập và thực hiện Báo cáo tốt nghiệp.

Em xin chân thành cảm ơn!

ii
 MỤC LỤC

DANH MỤC BẢNG BIỂU.........................................................................................viii

DANH MỤC CÁC TỪ VIẾT TẮT VÀ GIẢI THÍCH CÁC THUẬT NGỮ................ix
CHƯƠNG 1 GIỚI THIỆU..............................................................................................1
1.1 Tầm quan trọng của tiếng anh...............................................................................1
1.2 Lý do chọn đề tài nghiên cứu................................................................................1
1.3 Điểm khác biệt so với các Website khác...............................................................2
1.4 Mục tiêu đề tài.......................................................................................................3
1.5 Cấu trúc của đồ án tốt nghiệp................................................................................3
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT.................................................................................4
2.1 Học Tiếng Anh......................................................................................................4
2.2 Các phần chính trong một Website học tiếng anh.................................................5
2.2.1 Từ vựng..........................................................................................................5
2.2.2 Ngữ pháp........................................................................................................7
2.2.3 Luyện đọc.......................................................................................................8
2.2.4 Luyện nghe.....................................................................................................9
2.2.5 Luyện nói......................................................................................................11
2.2.6 Các bài kiểm tra............................................................................................13
CHƯƠNG 3 CÔNG CỤ LẬP TRÌNH..........................................................................15
3.1 DJANGO.............................................................................................................15
3.1.1 Tại sao nên sử dụng Django Framework......................................................15
3.1.2 Tìm hiểu về MVT Pattern của Django.........................................................16
3.1.3 Hướng dẫn cài đặt Django............................................................................17
3.1.4 Các thành phần cơ bản của ứng dụng Django..............................................17
3.1.5 Django làm cho Lập trình web dễ dàng hơn như thế nào?...........................18
3.1.6 Các công ty hàng đầu sử dụng Django Framework.....................................19
3.1.7 Chúng ta có thể làm gì với Django Framework...........................................20
3.1.8 Tại sao chúng ta nên sử dụng Django?.........................................................21
3.1.9 Vậy, có khi nào không nên sử dụng Django không?....................................21
3.1.10 Ưu điểm của Django Framework...............................................................21
3.1.11 Điều kiện tiên quyết để học Django...........................................................23

iii
 3.1.12 Framework này giúp gì trong sự nghiệp lập trình viên của bạn?...............23
3.1.13 Kết luận......................................................................................................24
3.2 Django REST Framework...................................................................................25
3.2.1 Tổng quan.....................................................................................................25
3.2.2 Chuẩn bị.......................................................................................................26
3.3 HTML là gì?........................................................................................................27
3.3.1 HTML được xử lý ra sao?............................................................................28
3.3.2 Cấu trúc một đoạn HTML............................................................................28
3.3.3 Dùng chương trình gì để tạo tập tin HTML?...............................................29
3.3.4 HTML đóng vai trò gì trong website?..........................................................30
3.4 CSS......................................................................................................................31
3.4.1 CSS là gì?.....................................................................................................31
3.4.2 Ưu điểm của CSS là gì.................................................................................32
3.4.3 CSS hoạt động như thế nào?........................................................................33
3.4.4 Internal, External và Inline CSS Styles........................................................34
3.5 JavaScript............................................................................................................35
3.5.1 Javascript là gì?............................................................................................35
3.5.2 Javascript Framework là gì?.........................................................................36
3.5.3 Ưu điểm và nhược điểm của Javascript.......................................................36
3.5.4 Cách viết chương trình javascript đầu tiên...................................................37
3.5.5 Các câu hỏi thường gặp khi học Javascript..................................................40
3.6 Bootstrap.............................................................................................................41
3.6.1 Bootstrap là gì?.............................................................................................41
3.6.2 Lịch sử của bootstrap...................................................................................41
3.6.3 3 File chính của bootstrap............................................................................42
3.6.4 Glyphicons...................................................................................................43
3.6.5 Tại sao nên dùng Bootstrap..........................................................................44
3.6.6 Cấu trúc và tính năng của Bootstrap là gì?...................................................45
3.6.7 Cách cài đặt Bootstrap..................................................................................45
3.6.8 Bootstrap 4 có gì mới?.................................................................................46
3.7 JQUERY..............................................................................................................46

iv
 3.7.1 JQUERY là gì?.............................................................................................46
3.7.2 Cách sử dụng Jquery....................................................................................47
3.7.3 Cài đặt cục bộ...............................................................................................48
3.7.4 Sử dụng CDN...............................................................................................49
3.7.5 Cách để gọi một hàm thư viện jQuery?........................................................50
3.7.6 Cách sử dụng Custom Script trong jQuery?.................................................51
3.7.7 Sử dụng nhiều thư viện trong Jquery...........................................................52
CHƯƠNG 4 XÂY DỰNG WEBSITE HỌC TIẾNG ANH..........................................53
4.1 Giới thiệu về hệ thống.........................................................................................53
4.1.1 Mô hình hệ thống.........................................................................................53
4.1.2 Mô tả hệ thống..............................................................................................53
4.1.3 Biểu đồ phân cấp chức năng.........................................................................54
4.1.4 Sơ đồ Usecase tổng quát..............................................................................54
4.1.5 Sơ đồ Usecase QTV.....................................................................................55
4.1.6 Sơ đồ Usecase User......................................................................................55
4.1.7 Sơ đồ Usecase non-User...............................................................................56
4.1.8 Sơ đồ lớp tổng quát......................................................................................56
4.2 Giới thiệu Website...............................................................................................57
4.2.1 Giao diện chính............................................................................................57
4.2.2 Chủ đề..........................................................................................................58
4.2.3 Từ vựng........................................................................................................58
4.2.4 Ngữ pháp......................................................................................................59
4.2.5 Luyện?..........................................................................................................60
4.2.6 Bài kiểm tra..................................................................................................62
4.3 Mã nguồn của chương trình................................................................................62
KẾT LUẬN...................................................................................................................63
TÀI LIỆU THAM KHẢO.............................................................................................65

v
 DANH MỤC BẢNG BIỂU

Hình 1 Mô hình MVT của Django................................................................................16

Hình 2 Bảng xếp hạng những ngôn ngữ phổ biến nhất thế giới năm 2019...................24
Hình 3 Demo qua về REST web service.......................................................................25
Hình 4 Sau khi run server..............................................................................................27
Hình 5 Ví dụ về HTML.................................................................................................28
Hình 6 HTML được soạn thảo bằng nodepad...............................................................29
Hình 7 Vai trò của từng ngôn ngữ trong Website.........................................................30
Hình 8 Một Website không có CSS..............................................................................32
Hình 9 Bootstrap.JS.......................................................................................................42
Hình 10 Sau khi run server............................................................................................54
Hình 11 Sơ đồ usecase tổng quát..................................................................................54
Hình 12 Sơ đồ usecase quản trị viên.............................................................................55
Hình 13 Sơ đồ usecase User..........................................................................................55
Hình 14 Sơ đồ usecase non-User..................................................................................56
Hình 15 Sơ đồ lớp tổng quát.........................................................................................56
Hình 16 Giao diện chính Website EngForLife..............................................................57
Hình 17 Giao diện chủ đề Website EngForLife............................................................58
Hình 18 Giao diện chủ đề Website EngForLife............................................................58
Hình 19 Giao diện ngữ pháp Website EngForLife........................................................59
Hình 20 Giao diện luyện nghe Website EngForLife.....................................................60
Hình 21 Giao diện luyện nghe Website EngForLife.....................................................61
Hình 22 Giao diện luyện nói Website EngForLife........................................................61

vi
 DANH MỤC CÁC TỪ VIẾT TẮT VÀ GIẢI THÍCH CÁC THUẬT NGỮ

(Xếp theo thứ tự A, B,C…..)

CNTT Công nghệ thông tin

ĐATN Đồ án tốt nghiệp

vii
CHƯƠNG 1 GIỚI THIỆU

1.1 Tầm quan trọng của tiếng anh

Học tiếng Anh đã trở thành một ngôn ngữ toàn cầu. Giữa hàng chục và hàng trăm
ngôn ngữ khác nhau, thế giới đã lựa chọn tiếng Anh như một phương tiện để mọi
người hiểu nhau hơn. Theo số liệu từ Wikipedia, 53 quốc gia sử dụng tiếng Anh như là
ngôn ngữ chính thức. các sự kiện quốc tế như Olympic, các tổ chức toàn cầu, các công
ty đa quốc gia … được coi tiếng Anh như là ngôn ngữ chung của truyền thông.

Nhà tuyển dụng sẽ muốn chọn một ứng viên có kỹ năng tiếng Anh tốt, chứ không
phải là một ứng cử viên không thể sử dụng hoặc sử dụng rất tệ ngoại ngữ này. Khi bạn
tốt nghiệp và mong muốn làm việc tại một công ty tốt, với một mức lương tốt đẹp và
một môi trường ổn định, nhà tuyển dụng sẽ hỏi gì ở bạn: yêu cầu chắc chắn không thể
bỏ qua: Biết tiếng Anh.

Thậm chí nếu bạn làm việc cho một công ty Nhật Bản, hoặc bất kỳ khác đa quốc gia,
nếu bạn biết tiếng Anh, và sử dụng tốt thành thạo, bạn vẫn sẽ là ưu tiên.

1.2 Lý do chọn đề tài nghiên cứu

Ngày nay mạng internet đã và đang là xu thế của thời đại. Mọi việc hầu như đều thông
qua internet. Vì thế các hoạt động học tập cũng trở nên dễ dàng hơn trong đó, học
tiếng anh trên mạng là một nhu cầu thiết thực cho tất cả sinh viên Việt Nam.

Nắm bắt được xu thế của đó nên em cũng đã lên ý tưởng để xây dựng một Website học
tiếng anh trực tuyến. Nhưng do hiện nay internet đang phát triển rất mạnh, kéo theo vô
vàn các Website học tập trực tuyến được xây dựng lên và Tiếng anh cũng không phải
ngoại lệ.

Ở Việt Nam hiện nay cũng có rất nhiều Website học tiếng anh được xây dựng cho
người Việt Nam học tập như https://tienganhmoingay.com/,
https://mshoagiaotiep.com/ ,…

1
Tuy nhiên để có một lộ trình học tập cụ thể và các bài giảng chất lượng từ các Website
trên người dùng phải đăng ký tài khoản và trả một khoản phí nhất định thì mới được
học. Chưa kể nói người dùng muốn học các kỹ năng mềm như luyện nói hay luyện
nghe cũng vô cùng khó khăn.

Nắm bắt được tình hình và cũng như là nhu cầu muốn học Tiếng Anh của mọi người
những lại không biết bắt đầu từ đâu em xin tiến hành thực hiện một Website học Tiếng
Anh trực tuyến.

1.3 Điểm khác biệt so với các Website khác

Những điểm khác biệt so với các Website học tiếng anh khác là:

 Hoàn toàn miễn phí

Hoàn toàn miễn phí ở đây có nghĩa là người dùng có thể không cần đăng nhập mà vẫn
có thể học được. Việc có tài khoản và đăng nhập vào hệ thống chỉ là để mở khóa thêm
một số chức năng khác của chương trình.

 Sử dụng trí tuệ nhận tạo

Điểm khác biệt lớn nhất so với các Website khác chính là hệ thống của em có sử dụng
trí tuệ nhận tạo để nhận diện giọng nói người dùng và chuyển giọng nói đó thành văn
bản.

Văn bản đó sẽ được so sánh với từ gốc để tính độ chính xác từ đó đưa ra nhận xét cho
người dùng là họ phát âm sai ở đâu, cần nhấn mạnh trong âm như thế nào …

Thường thì các để luyện nói ở các Website khác người dùng chỉ có thể giao tiếp với
người nước ngoài và phải trả một cái phí rất cao mà lại không thể chủ động về thời
gian được. Nhưng với Website của em mọi thứ đều do người dùng chủ động.

 Hệ thống tích điểm

Sau mỗi bài kiểm tra người dùng làm sẽ được lưu số câu đúng lại. Với số lượng câu
đúng nhất định thì người dùng sẽ có số sao tương ứng.

Top 10 người có số lượng sao cao nhất sẽ có tên ở bên bảng xếp hạng thành tích.

2
Tính năng này là đánh vào tính cạnh tranh của người dùng. Có cạnh tranh thì mới có
phát triển được, từ đó giúp người dùng có thêm động lực để học.

Tuy nhiên tính năng nay vẫn chưa được hoàn thiện trong chương trình vì thời gian làm
đồ án là có hạn mong thầy cô thông cảm.

1.4 Mục tiêu đề tài

Tìm hiểu về HTML CSS, JavaScript cơ bản

Tìm hiểu về Bootstrap4, Jquery

Tìm hiểu về Python Django và Django Rest Framework

Xử dụng những kiến thức tìm hiểu được xây dựng Website học tiếng anh

1.5 Cấu trúc của đồ án tốt nghiệp

Nội dung sẽ được trình bày trong 4 chương sau phần sau:

 Chương 1: Mở đầu

 Chương 2: Cơ sở lý thuyết

 Chương 3: Công cụ lập trình

 Chương 4: Xây dựng Website học tiếng anh

3
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2.1 Học Tiếng Anh

Học ngoại ngữ chính là quá trình biến “những âm thanh và con chữ vô nghĩa thành
những biểu tượng có nghĩa” đối với chính mình. Thế nhưng những âm thanh và con
chữ ấy lại quá phong phú với rất nhiều biến tấu tinh tế, hàm chứa cả một nền văn hóa
nên lẽ dĩ nhiên chẳng có một phương pháp nào có thể thông hiểu một ngôn ngữ trong
vòng 21 ngày. Điều này cũng nói lên rằng chỉ có ngữ cảnh và sự trải nghiệm qua một
thời gian dài mới có thể giúp chúng ta nắm vững được một ngoại ngữ.

Học tiếng Anh cũng vậy. Sau đây là một số lời khuyên chung chung có thể sẽ hữu ích
với những ai thích học tiếng Anh:

 Cần hiểu rất rõ tại sao bạn muốn học tiếng Anh. Bạn cần tiếng Anh để phục vụ cho
nghề nghiệp của mình hay để giúp bạn xin việc, hay để nói chuyện với những người
nói tiếng Anh, hay để giúp bạn trong việc học?

 Cần biết rõ bạn muốn tiếng Anh của mình giỏi tới mức độ nào. Bạn muốn giỏi tiếng
Anh tới mức nào về các kỹ năng nói, nghe, đọc và viết?

 Hãy thử hình dung và có khái niệm thật rõ về chính mình khi bạn đã đạt được trình
độ tiếng Anh ở mức thành thạo mà bạn muốn. Liệu bạn sẽ nhìn và nghe thấy gì và
bạn sẽ cảm thấy như thế nào?

 Nếu có thể hãy đăng ký theo học một khóa tiếng Anh. Nếu không thể làm được điều
đó thì hãy tự đặt mình trong bối cảnh mà bạn cần phải dùng tiếng Anh...

 Hãy tìm kiếm các cơ hội học và sử dụng tiếng Anh. Hãy nói tiếng Anh bất cứ khi
nào có thể. Hãy nghe đài và CD bằng tiếng Anh, đọc và viết bằng tiếng Anh. Nếu
bạn tìm những cơ hội như vậy thì nhất định bạn sẽ tìm thấy

 Hãy viết những từ ngữ mới vào một cuốn sổ ghi chép. Luôn mang cuốn sổ theo
người và như vậy bạn có thể giở sổ ra xem bất kỳ khi nào bạn có chút thời gian rảnh
rỗi.

4
 Luyện tập, luyện tập và luyện tập. Có một câu thành ngữ trong tiếng Anh. Nếu bạn
không muốn mất thì hãy sử dụng nó. Câu thành ngữ này rất đúng nhất là khi áp
dụng trong trường hợp học ngoại ngữ

 Hãy kiếm một người có thể giúp bạn học tiếng Anh, có thể là đồng nghiệp của bạn.
Tìm một người mà bạn có thể học tiếng Anh cùng. Hãy nói tiếng Anh với người đó
hay các bạn có thể gửi tin nhắn bằng tiếng Anh cho nhau.

 Học một ít một nhưng thường xuyên. Hãy tạo ra một thói quen học tiếng Anh mỗi
ngày chỉ cần 10 phút thôi. Như thế sẽ tốt hơn là học mỗi tuần chỉ có một lần dù với
thời gian dài hơn.

 Khi bắt đầu buổi học hãy tự hỏi mình: "Mình muốn học gì hôm nay?" và vào cuối
buổi học, tự hỏi mình: "Mình đã học được gì hôm nay?

2.2 Các phần chính trong một Website học tiếng anh

2.2.1 Từ vựng

Để học tiếng anh, trước hết chúng ta nên có vốn từ vựng nhất định. Và để học được,
chúng ta cần phải hiểu về chúng:

Có nhiều cách phân loại từ trong tiếng Anh và chưa có cách náo là hoàn hảo cả. Theo
truyền thống người ta thường phân loại từ theo 8 dạng sau:

 Danh từ (Noun): là tên gọi người, đồ vật, sự kiện hay nơi chốn.

 Đại từ (Pronouns): là từ dùng thay cho danh từ để danh từ đó không bị lặp lại
nhiều lần.

 Tính từ (Adjectives): là từ cung cấp tính chất cho danh từ, làm cho danh từ rõ
nghĩa hơn, chính xác và đầy đủ hơn.

 Động từ (Verb): là từ diễn tả một hành động, một tình trạng hay cảm xúc. Nó xác
định chủ từ làm hay chịu đựng một điều gì đó.

5
 Trạng từ (Adverb): là từ bổ nghĩa cho động từ, tính từ hay một trạng thái khác.
Tương tự như tính từ, nó làm cho các từ mà nó bổ nghĩa rõ ràng, đầy đủ và chính
xác hơn.

 Giới từ (Prepositions): là những từ dùng với danh từ và đại từ chỉ mối tương quan
giữa từ này với các từ khác, thường là nhằm mối tương quan về hoàn cảnh, thời
gian hay vị trí.

 Giới từ (Prepositions): là những từ dùng với danh từ và đại từ chỉ mối tương quan
giữa từ này với các từ khác, thường là nhằm mối tương quan về hoàn cảnh, thời
gian hay vị trí.

 Thán từ (Interjections): là từ diễn tả tình cảm, cảm xúc đột ngột không ngờ. Các
từ này không can thiệp vào ngữ pháp câu.

Có nhiều từ đảm nhiệm nhiều loại chức năng khác nhau và do đó có thể xếp vào nhiều
loại từ khác nhau.

Thông qua cách phân loại, người đọc có thể nắm bắt từ một cách dễ dàng hơn về cấu
trúc, ngữ nghĩa của từ. Qua đó giúp cho người đọc học từ một cách dễ dàng hơn.

Đặc trưng từ vựng trong tiếng anh chuyên ngành CNTT có lẽ là biến thể của các loại
từ:

 Ví dụ như:

Program(n): chương trình

Program(v): lập trình

Programmer(n): lập trình viên

Programmable(adj): có thể program hóa

Programmability(n): sự có thể program hóa

Programming(v): lập trình

Ngoài ra chúng ta nên chú ý đến các thuật ngữ cơ bản trong tiếng anh:

6
 Ví dụ như:

Clause = Mệnh đề : là tổ hợp có đủ chủ ngữ và vị ngữ nhưng phải đi kèm

một mệnh đề khác phù hợp về nghĩa để tạo thành một câu có ý nghĩa.

Bên cạnh đó phải kể đến sự hình thành cụm từ trong tiếng Anh(Phrase). Khi ghép các
từ trong tiếng anh sẽ tạo ra một từ mới gần giống nghĩa của các từ riêng biệt hoặc khác
nghĩa với các từ đó:

Desktop computer = Desktop + Computer = Cái bàn + Máy tính

->Desktop computer = máy tính để bàn.

Khi dịch cũng như đọc tài liệu tiếng Anh, không nên “word by word”, nên dịch và
hiểu theo ngữ cảnh, tìm trọng tâm của câu và ghi nhớ ý nghĩa của nó.

Một điểm đáng chú ý nữa là khi học tiếng Anh, người học không nên học tràn lan mọi
thứ cùng lúc mà hãy nên học theo từng chủ đề riêng biệt. Vì như thế người học có thể
nắm được mạch của chủ đề mình đang học cũng như các từ vựng liên quan đến chủ đề
đó.

2.2.2 Ngữ pháp

Học ngữ pháp thôi chắc chắn là không đủ để giúp bạn học giỏi tiếng anh. Nhưng lại là
nền tảng cho vốn kiến thức của bạn sau này.

Bạn hãy coi ngữ pháp là một bài tập sinh lý mà các cầu thủ hay vận động viên vẫn
làm: những bài tập đều đặn để chuận bị trước trận đấu quan trọng.

Trước nhất, để hiểu được tiếng Anh thông thường chúng ta nên nắm rõ các dạng ngữ
pháp cơ bản sau:

2.2.2.1 Các thì của động từ

 Hiện tại (Present)

-Hiện tại đơn giản (Simple Present).

-Hiện tại tiếp diễn (Present Progressive).

7
 -Hiện tại hoàn thành (Present Perfect ).

-Hiện thại hoàn thành tiếp diễn (Present Perfect Progressive).

 Quá khứ (Past)

-Quá khứ đơn giản (Past Simple).

-Quá khứ tiếp diễn (Past Progressive).

-Quá khứ hoàn thành (Past Perfect).

-Quá khứ hoàn thành tiếp diễn (Past Perfect progressive).

Tương lai (Future) -Tương lai đơn giản (Simple Future). -Tương lai tiếp diễn
(Future Progressive). -Tương lai hoàn thành (Future Perfect).

 Tương lai (Future)

-Tương lai đơn giản (Simple Future).

-Tương lai tiếp diễn (Future Progressive).

-Tương lai hoàn thành (Future Perfect).

2.2.3 Luyện đọc

Muốn thành thạo tiếng Anh, bạn cần cả một quá trình ôn luyện lâu dài để hoàn thiện
đồng thời 4 kỹ năng nghe, nói, đọc, viết. Trong đó, kỹ năng đọc giúp bạn tích lũy vốn
từ vựng và ngữ pháp nhanh nhất, làm cơ sở để phát triển các kỹ năng còn lại.

2.2.3.1 3 Yếu Tố Để Luyện Đọc Tiếng Anh Tốt

 Từ Vựng

Bạn sẽ không thể hiểu hết nội dung của một bài đọc nếu bạn gặp quá nhiều từ mới
trong bài đọc đó. Vì vậy, việc trau dồi từ vựng thường xuyên là cực kỳ quan trọng. Có
rất nhiều cách để làm giàu vốn từ vựng của mình.

8
Điều quan trọng là bạn phải tích lũy từ vựng tiếng Anh thường xuyên, liên tục và có
chọn lọc. Hãy hợp song song giữa luyện đọc và học từ mới đồng thời ôn tập đều đặn
để có được kết quả tốt nhất.

 Ngữ Pháp

Cũng giống như từ vựng, ngữ pháp chính là yếu tố quan trọng thứ 2 giúp bạn đọc và
hiểu nhanh. Mỗi cấu trúc ngữ pháp tiếng Anh có một ý nghĩa hoặc sắc thái biểu đạt
nhất định.

Những kiến thức về cấu trúc ngữ pháp sẽ giúp ích rất nhiều trong việc hiểu đúng, hiểu
sâu các lớp ý nghĩa của câu, đoạn văn có sử dụng nó. Trong rất nhiều trường hợp, chỉ
cần biết cấu trúc ngữ pháp, bạn đã có thể đoán được ý nghĩa của cả câu.

 Vốn hiểu biết

Đã bao giờ bạn gặp một bài đọc cực kỳ quen thuộc, mặc dù không biết nhiều từ mới
trong bài nhưng bạn vẫn có thể trả lời trơn tru các câu hỏi chưa? Đó chính là khi vốn
hiểu biết tự nhiên của bạn có cơ hội phát huy tác dụng.

Những am hiểu về các vấn đề trong cuộc sống sẽ giúp bạn không cảm thấy bỡ ngỡ khi
bắt gặp chúng trong các bài đọc tiếng Anh, bạn hoàn toàn có thể hoàn thành bài đọc
ngon ơ mặc dù có rất nhiều từ mới lạ hoắc bạn không hề biết.

Bài học rút ra là, luôn tích cực tìm hiểu mọi vấn đề, đặc biệt là những vấn đề thường
gặp trong các bài thi, thậm chí tập tìm hiểu chúng bằng tiếng Anh càng mang lại nhiều
lợi ích hơn nữa. [1]

2.2.4 Luyện nghe

Nghe là một trong những kĩ năng khó nhất của việc học tiếng Anh. Khi nghe, người
nghe thường gặp một số khó khăn sau:

 Không nắm được chủ đề của bài.

 Quá nhiều thông tin nên không thể nắm bắt được chủ đề bài nghe.

 Môi trường luyện tiếng Anh không có hay rất ít.

9
 Thời gian và công sức bỏ ra nhiều nên dễ gây nản lòng người học.

 Sự cản trở về mặt trí tuệ nên người nghe bị cuốn theo đoạn văn, từ đó dẫn tới không
nắm được những thông tin cần thiết.

 Không tự tin để giao tiếp do không quen hay do nhút nhát.

 Rào cản ngôn ngữ do phải dịch từ tiếng Việt sang Anh để nói hay ngược lại để hiểu.

 Phát âm không chuẩn nên nghe không được.

 Có những thông tin không hiểu làm ta phân vân nên không tập trung tư tưởng để
nghe.

 Không có hiểu biết về lĩnh vực đang nghe

->Yêu cầu đặt ra: Làm sao để những người học tiếng Anh có thể nghe hiểu tiếng Anh
thật tốt và rộng hơn nữa là giao tiếp (nghe và nói) bằng tiếng Anh thật tốt (vì kỹ năng
nghe luôn đi kèm với kỹ năng nói).

Tuy nhiên, viêc học đó sẽ không quá khó đối với những người chăm chỉ và có phương
pháp học đúng cách. Nhưng như thế nào là học đúng cách? Qua tổng kết và thu thập
kinh nghiêm thì có một số phương pháp sau:

 Giai đoạn 1: Sơ cấp - Trung cấp

Nghe cả đoạn: 3 lần để nắm nội dung chính.

Nghe từng câu một. Chú ý đến những điểm nhấn trọng âm, ngữ điệu. Nói lại theo
băng, đĩa đến khi nào thấy nhuyễn thì thôi.

Nghe lại cả đoạn. Nói lại bằng tiếng Anh nội dung chính của đoạn vừa nghe.

 Giai đoạn 2: Trung cấp (intermediate) trở lên.

Nghe và chép chính tả. Đồng thời nhắc lại theo đúng trọng âm, ngữ điệu, nhịp điệu.

Nghe và ghi lại nội dung chính của cả bài.

10
 Giai đoạn 3: Nghe và nói lại nội dung chính của cả đoạn, bài.

 Giai đoạn 4: Dành cho chuyên nghiệp.

Tập dịch cabin. Có nghĩa là băng, người nói tiếng Anh và mình dịch tiếng Việt và
ngược lại. Lúc đầu chậm và sau nhanh dần.

Ngoài ra, còn một số phương pháp khác tuy không theo trình tự bài bản nhưng cũng
giúp ích rất nhiêu trong việc luyện kỹ năng nghe:

 Tách bỏ đi những thông tin không cần thiết, chú tâm những thông tin quan trọng để
nắm bắt chủ ý bài viết, không cần phải nghe đầy đủ và hiểu nghĩa từng từ một.

 Chỉ nghe lướt qua những phần khó hiểu, tránh phân vân về nó, để tập trung tư tưởng
hiểu những phần trong khả năng cho phép.

 Sử dụng các phương tiện sẵn có: nghe bản tin tiếng Anh trên đài, trên tivi, xem
phim tiếng Anh có phụ đề, xem các kênh truyền hình cáp, nghe nhạc Anh, nghe
tiếng Anh online ở các website luyện nghe, hoặc download file âm thanh và
textscript để vừa nghe vừa kiểm tra, tham gia luyện nghe-nói tiếng Anh ở các diễn
đàn tiếng Anh, voice chat bằng tiếng Anh với bạn bè nước ngoài trên Internet,...

 Thường xuyên nghe tiếng Anh dù ở bất cứ đâu và bất cứ lúc nào (có thể không cần
hiều nội dung hoặc hiểu thì càng tốt) để những âm thanh ấy dần dần sẽ trở nên quen
thuộc với tai mình, tạo phản xạ nghe hiểu tự nhiên.

 Kết hợp nghe nhạc Anh trong lúc làm các việc khác, nếu hiểu nội dung thì càng tốt.

 Thường xuyên tham gia vào các câu lạc bộ nói tiếng Anh, nhà văn hóa thanh niên
dành cho những người muốn rèn luyện tiếng Anh để giao lưu học hỏi với nhiều
người, có nhiều đề tài sôi động, kích thích sự hứng thú.

 Thay đổi cường độ học cho phù hợp, nên học mỗi ngày một ít và thường xuyên hơn
là lâu lâu mới học một lần với lượng nhiều, tránh nôn nóng.

 Cần xác định được mục tiêu và quyết tâm thực hiện nó.

11
 Liên tưởng nội dung câu nói với ngữ cảnh cụ thể và cố nắm bắt ý nghĩa của nó.

 Kết hợp việc nghe hiểu từ ngữ tiếng Anh với việc hình dung hành động cụ thể trong
đầu mình.

 Nên thường xuyên nghe hiểu các tình huống tiếng Anh trong giao tiếp để tạo phản
xạ nghe nhanh khi gặp tình huống thực tế

Trên đây là một số phương pháp học nghe tiếng Anh. Các phương pháp trên sẽ giúp
ích rất nhiều cho người học trong quá trình học tiếng Anh nếu ứng dụng một cách linh
hoạt cùng với những công cụ hỗ trợ hữu ích. [2]

2.2.5 Luyện nói

Luyện phát âm Tiếng Anh là một trong những kỹ năng quan trọng nếu như bạn muốn
luyện nói Tiếng Anh như người bản ngữ. Tuy vậy không phải ai cũng biết cách để phát
âm sao cho đúng cách? Vậy học phát âm như thế nào mới đúng và hiệu quả?

Bạn có thể đọc, nghe, viết tiếng Anh khá thoải mái nhưng khi nói một câu nào đó với
người nước ngoài thì lại khá lúng túng. Bạn cho rằng mình không có bạn là người
nước ngoài hay sống ở nước ngoài thì không thể nói như người bản ngữ. Thực ra bạn
hoàn toàn có thể tự luyện nói để trở nên tiến bộ hơn. Dưới đây là 7 phương pháp giúp
bạn luyện nói Tiếng Anh như người bản ngữ:

2.2.5.1 Hãy lựa chọn chuẩn

Trên thế giới có rất nhiều vùng miền nói Tiếng Anh nên cũng có nhiều kiểu phát âm.
Nhưng có 2 chất giọng Tiếng Anh được coi là chuẩn đó là tiếng Anh-Mỹ và Anh-Anh.
Nếu như bạn muốn học phát âm Tiếng Anh thì việc đầu tiên bạn cần làm đó là quyết
định kiểu phát âm mình muốn nói đó là gì?

2.2.5.2 Nhận diện và phát âm toàn bộ các âm tiếng Anh

Tiếng Anh có rất nhiều âm và trong Tiếng Việt không có. Do đó mà khi bạn học phát
âm thì bạn phải học những âm’’mới’’ mà có thể bạn chưa từng nói bao giờ. Từ đó, bạn
mới có thể phát âm giống với cách phát âm của người bản ngữ hơn.

12
Chưa kể âm trong Tiếng Anh-Anh và Anh-Mỹ có nhiều điểm rất khác biệt. Nên nếu
học thì bạn chỉ nên chọn một âm chuẩn để theo tránh bị nhầm lẫn.

Vậy nhận diện âm có nghĩa là gì? Đó là khi bạn nghe một từ và biết được đó là âm gì
trong bảng IPA trong Tiếng Anh.

Ví dụ như khi bạn nghe từ ‘’wall’’thì bạn sẽ nói ngay được nguyên âm là/o/. Và việc
phát âm chính xác có nghĩa là sau khi bạn nghe một từ thì bạn có thể nói giống như
người bản xứ. Để làm được điều này thì bạn cần biết về bảng phiên âm tiếng Anh
(IPA).

2.2.5.3 Học cách nói có trọng âm

Trong Tiếng Anh có điểm khác biệt với Tiếng Việt đó là trọng âm từ. Và một từ tiếng
Anh thì có thể bao gồm nhiều âm tiết. Nhưng trọng âm chính thì chỉ rơi vào một âm
tiết nhất định. Và việc học trọng âm Tiếng Anh sẽ bao gồm 2 nội dung chính:

 Biết được trọng âm của từ nằm ở đâu

 Biết cách nhấn trọng âm của từ đó để phát âm cho đúng.

Ví dụ như từ massage trọng âm từ rơi vào âm tiết thứ 2 theo tiếng Anh-Mỹ và rơi vào
âm tiết thứ nhất trong tiếng Anh-Anh.

Do đó bạn cần lưu ý đối với cách đánh trọng âm để phát âm cho đúng và luyện nói
Tiếng Anh như người bản ngữ.

2.2.5.4 Học cách nói đúng ngữ điệu

Ngữ điệu sẽ giúp thể hiện cảm xúc và ẩn ý của người nói. Học cách nói đúng ngữ điệu
cũng là cách luyện nói Tiếng Anh như người bản ngữ. Mỗi ngôn ngữ thì có những
cách thể hiện ngữ điệu khác nhau.

Có thể là ngạc nhiên, buồn phiền, tức giận hay căm tức…Và những tất cả những trạng
thái tình cảm đều có thể được thể hiện bằng những ngôn ngữ nói thông qua ngữ điệu.

13
2.2.5.5 Luyện thói quen kiểm tra phát âm từ tiếng anh

Một điều lưu ý khi học cách phát âm thì nếu không biết chắc chắn về cách phát âm
một từ thì không nên đoán bữa. Bởi có khoảng 60% các từ tiếng Anh có cách nói và
cách viết khác nhau.

Nếu như bạn không kiểm tra từ điển thì bạn có thể sẽ phát âm sau. Hãy tập thói quen
biết rõ cách phát âm để tránh trường hợp phát âm sai về lâu về dài.

2.2.5.6 Luyện nghe và nhận diện

Cách tốt nhất để học phát âm Tiếng Anh đó là luyện nghe thường xuyên. Một số cách
luyện nghe hiệu quả là mở TV, show hay phim ảnh bằng Tiếng Anh và nghe hàng
ngày.

Trong quá trình nghe hãy chú ý vào cách phát âm của từng từ. Học luôn cả những lỗi
phát âm mà những người không phải bản xứ nói Tiếng Anh để tránh lặp lại những lỗi
sai.

2.2.5.7 Luyện tập nói tiếng Anh từng từ và theo cụm

Trong quá trình luyện phát âm thì bạn có thể luyện theo từng từ hoặc theo cụm. Bạn có
thể bắt đầu bằng việc luyện nói các từ quan trọng trong câu trước.

Ví dụ: Khi bạn muốn nói một câu đơn giản như “I want my friend to win”. Thì đầu
tiên bạn phải luyện phát âm thật chính xác từng từ mang nghĩa trong câu. Sau đó mới
thực hiện ghép các từ quan trọng này lại với nhau.

Và cuối cùng mới đọc cả cụm. Cũng đừng quá lo lắng nếu ban đầu bạn không thể phát
âm đúng từng từ hoặc cụm từ trong Tiếng Anh. Trước hết hãy tập trung tưởng tượng
xem mình nên phát âm từ này như thế nào. Có nghĩa là bạn cần biết cách phát âm từ
đó trong đó, sau đó phát ra tiếng từ đó. [3]

2.2.6 Các bài kiểm tra

Kiểm tra trong tiếng Anh là Checking. Kiểm tra là việc đo lường quá trình thực hiện
kế hoạch trên thực tế, qua đó phát hiện những sai lệch nhằm đưa ra biện pháp điều
chỉnh kịp thời để đảm bảo rằng tổ chức sẽ thực hiện được các mục tiêu kế hoạch đề ra.

14
 Hình thức kiểm tra

Kiểm tra có vai trò quan trọng, bao trùm toàn bộ quá trình quản lý bởi vậy thường
được triển khai trước quá trình (kiểm tra lường trước), trong quá trình (kiểm tra đồng
thời) và sau khi thực hiện kế hoạch (kiểm tra phản hồi).

15
 Sự cần thiết của chức năng kiểm tra

Chức năng kiểm tra bao gồm việc đo lường và điều chỉnh việc thực hiện kế hoạch
nhằm đảm bảo các mục tiêu của tổ chức đã được đặt ra trong kế hoạch được hoàn
thành.

Trong quá trình thực hiện kế hoạch thường xảy ra những vấn đề phát sinh ngoài dự
kiến khiến tổ chức đi chệch hướng khỏi kế hoạch hoặc hoàn thành kế hoạch không
đúng tiến độ.

Bởi vậy, nhà quản lí cần thực hiện chức năng kiểm tra để dự đoán và phát hiện những
trục trặc có thể nảy sinh và đưa ra biện pháp khắc phục đưa tổ chức hoàn thành mục
tiêu của kế hoạch đã đề ra.

 Vai trò của chức năng kiểm tra

Chức năng kiểm tra giúp các nhà quản lí đảm bảo cho kế hoạch được thực hiện với
hiệu quả cao thông qua việc xác định lại các nguồn lực của tổ chức (ở đâu, ai sử dụng,
sử dụng như thế nào) để từ đó sử dụng hiệu quả hơn những nguồn lực này.

Kiểm tra giúp các nhà quản lí đánh giá mức độ thực hiện kế hoạch, tìm kiếm nguyên
nhân và biện pháp khắc phục.

Kiểm tra giúp các nhà quản lí kịp thời ra các quyết định cần thiết để đảm bảo thực thi
quyền lực quản lí và hoàn thành các mục tiêu đã đề ra. Ngoài ra chức năng kiểm tra
còn giúp tổ chức theo sát và ứng phó với sự thay đổi của môi trường. [4]

16
CHƯƠNG 3 CÔNG CỤ LẬP TRÌNH

3.1 DJANGO

Django là gì? Nói một cách đơn giản, Django là một Framework lập trình Web bậc
cao, mã nguồn mở được viết bằng Ngôn ngữ lập trình Python.

Django là một Framework giúp bạn lập trình web nhanh hơn và tốt hơn so với các
framework như Flask mà lại dễ hơn nhiều.

Công việc lập trình web đòi hỏi rất nhiều phần được tích hợp và bạn cần phải xử lý xác
thực người dùng, đăng nhập, đăng ký, upload tập tin.. Đây là các công việc phổ biến,
nếu như tự viết sẽ tốn khá nhiều thời gian.

Thay vào đó, sử dụng Framework Django, bạn đã có sẵn một tập hợp thành phần để
thực hiện công việc phổ biến này. Tiết kiệm thời gian và sức lực cho bạn.

3.1.1 Tại sao nên sử dụng Django Framework

Nó nhanh và đơn giản, Django giúp bạn có thể lập trình web trong thời gian ngắn.

Hơn nữa, Django có tài liệu rất tốt và tuân theo nguyên tắc DRY (Đừng lặp lại chính
mình) trong khi những Framework khác không quan tâm nhiều về điều này. Django
cũng hỗ trợ ORM (Object Relistic Mapping).

Một cơ sở dữ liệu có thể được cập nhật thông qua command line chỉ bằng cách sử
dụng lệnh sau đây.

`python manage.py migrate`

Và migrations có thể được tạo ra bằng cách sử dụng:

`python manage.py makemigrations`

17
3.1.2 Tìm hiểu về MVT Pattern của Django

Hình 1 Mô hình MVT của Django

Django sử dụng mô hình MVT (Model-View-Template) thay vì sử dụng mô hình

MVC (Model-View-Controller).

Mô hình MVT được sử dụng trong khi tạo một ứng dụng với Tương tác người dùng.
Mô hình này thì bao gồm code HTML với Django Templage Language (DTL).

Controller là mã được viết để kiểm soát sự tương tác giữa Model và View và Django
dễ dàng chăm sóc nó.

Bất cứ khi nào người dùng người request, nó xử lý request của người dùng đó bằng
Model, View và Template.

Nó hoạt động như một Controller để kiểm tra xem nó có khả dụng hay không bằng
cách ánh xạ URL và nếu URL ánh xạ thành công thì View sẽ bắt đầu tương tác với
Model và gửi lại Template cho người dùng dưới dạng respone.

18
3.1.3 Hướng dẫn cài đặt Django

Cài đặt Django rất dễ dàng so với các framework khác nhưng nó sẽ khác với Hệ điều
hành khác nhau.

Chúng ta có thể tải xuống phiên bản mới nhất từ trang web chính thức của họ tại
đây: https://www.djangoproject.com/download/

Nó có thể đượ c cài đặ t trong Linux, hoặ c Mac OS bằ ng cách sử dụ ng package

manager hoặ c sử dụ ng pip installer.

Đối với Windows, nếu Python đã được cài vào máy tính của sau đó, nó sẽ được kiểm
tra, nếu Python Path đã được thiết lập system variable. Bạn chỉ cần giải nén và bấm cài
đặt.

Django cũng hỗ trợ nhiều kiểu CSDL và có thể được thiết lập theo yêu cầu. Nó cũng
tích hợp một server nhẹ để phát triển và thử nghiệm ứng dụng.

3.1.4 Các thành phần cơ bản của ứng dụng Django

Dự án Django tạo ra một tập hợp các cài đặt bao gồm cấu hình cơ sở dữ liệu và các tùy
chọn cụ thể cũng như các cài đặt cụ thể của ứng dụng mặc định trong dự án.

Nếu bạn nhìn vào thư mục của mình bạn sẽ thấy:

 mysite/

 manage.py

 mysite/

 __init__.py

 settings.py

 urls.py

19
 wsgi.py

20
Trong đó

 manage.py: Cho phép bạn tương tác với dự án Django theo các cách khác nhau

 __init__.py: Nói với trình thông dịch python là thư mục nên được coi là một python
package. Tập tin này chủ yếu là trống.

 settings.py: Tập tin cấu hình

 urls.py: Bao gồm tất cả khai báo URL cho dự án Django và mục lục của trang web
Django.

 wsgi.py: Đây là lối vào cho các máy chủ web tương thích WSGI để phục vụ các dự
án của bạn và deploy với WSGI.

Nếu bạn muốn kiểm tra, dự án của bạn có đang chạy không, bạn có thể kiểm tra nó
bằng lệnh sau:

$ python manage.py runserver

3.1.5 Django làm cho Lập trình web dễ dàng hơn như thế nào?

Python tuân theo một quy tắc "Đơn giản luôn tốt hơn Phức tạp". Các package python
quan trọng khác như Numpy, Scipy, Pillow ... đã được lưu trữ sẵn trong phần cài đặt
Python.

Đây là một cách đơn giản để xác minh nó đã được cài đặt chưa và đã sẵn sàng để
import vào dự án của bạn hay chưa:

>>> import django

>>> print(django.get_version())

Nó cung cấp cho bạn mọi thứ cần thiết để phát triển một ứng dụng hoàn chỉnh. Với các
Template được tích hợp sử dụng HTML, URL routing, ORM (Ánh xạ quan hệ đối
tượng), quản lý Session, v.v.

21
Django cũng cung cấp một số công cụ giúp cho SEO. Sử dụng SEO framework, các
lập trình viên có thể giảm thời gian tải trang bằng cache template và nén CSS,
JavaScript.

22
Ngoài ra Django còn có một công cụ là robot.txt.Django thậm chí vượt cả kỳ vọng của
các chuyên gia SEO.

3.1.6 Các công ty hàng đầu sử dụng Django Framework

 Instagram

Instagram là một mạng xã hội chia sẻ ảnh và video bằng python. Mỗi giây, Instagram
xử lý lượng dữ liệu khổng lồ và quản lý số lượng tương tác thậm chí còn lớn hơn giữa
nhiều người dùng.

Django đã giúp Instagram xử lý tất cả các công việc này bằng cách giữ cho nó đơn
giản đúng như tinh thần của Python.

 Spotyfi

Spotify đã đưa ngành công nghiệp âm nhạc lên một tầm cao mới bằng cách thay đổi
cách mọi người nghe nhạc và làm cho mọi người có thể truy cập trên bất kỳ thiết bị
nào.

Spotify sử dụng Python cho cả Back end Service và Machine Learning với Django
Framework.

 Youtube

YouTube là một trong những nền tảng chia sẻ video phổ biến nhất. Ban đầu, nó là một
dự án xây dựng trên PHP. Nhưng để cải thiện hiệu suất, YouTube chuyển sang
Django.

 Dropbox

Dropbox là một trong những dịch vụ lưu trữ đám mây nổi tiếng cho các tài liệu, video
và hình ảnh.

23
Nó được xây dựng dựa trên python cho cả phần mềm Desktop và Client Server.
Dropbox sử dụng Django Framework để cho phép lưu trữ, đồng bộ hóa và cung cấp
các tùy chọn để chia sẻ các loại tệp khác nhau

 Trình duyệt Mozilla

Chắc không cần giới thiệu về trình duyệt Mozilla Frifox đâu nhỉ?

Mặc dù các thành phần cũ của Mozilla không được viết bằng python nhưng các thành
phần mới được triển khai bằng Django.

Ví dụ: Các trang web hỗ trợ và add-ons được xây dựng bằng cách sử dụng Django. Họ
đã chuyển từ PHP (CakePHP) sang Python (Django Framework) giúp họ xử lý hàng
chục, hàng trăm và hàng triệu lượt dùng mỗi tháng và rất nhiều lưu lượng truy cập API
mỗi ngày.

 Disqus

Disqus là dự án lớn nhất được thực hiện bằng Django. Các nhà phát triển Disqus đã
xây dựng ứng dụng từ đầu bằng cách sử dụng Django để mở rộng quy mô để xử lý
hàng triệu người dùng mỗi ngày.

Họ cũng đã sử dụng Django trong một trong những dự án của họ có tên là Sentry, đây
là một tool report lỗi cũng nổi tiếng với các lập trình viên hiện nay.

3.1.7 Chúng ta có thể làm gì với Django Framework

Bạn có thể tạo các trang web bằng Framework Django.

Về cơ bản, các chức năng của website như yêu cầu kết nối với cơ sở dữ liệu, các hoạt
động CRUD (create, read, update và delete), bảo mật, quản lý người dùng và tạo
RestAPI...

Đều được Django hỗ trợ.

24
Django không phải PHP

Nó sử dụng ngôn ngữ lập trình Python vì nó làm cho mọi thứ dễ dàng hơn với bạn.

Vì python đơn giản nên tài liệu của nó cũng vô cùng đơn giản, dễ hiểu. Tóm lại là tốt
cho mọi lập trình viên.

Nó có hơn 3.000 package có sẵn cho người dùng và nó là một trong những framework
đầu tiên vá kịp thời các lỗ hổng bảo mật mới.

3.1.8 Tại sao chúng ta nên sử dụng Django?

Django được xây dựng để giúp phát triển nhanh chóng với thiết kế sạch sẽ và thiết
thực.

Khả năng dễ đọc của Python, đơn giản, đầy đủ của Django cho phép bạn tập trung vào
các vấn đề phức tạp, logic nghiệp vụ hơn là mất nhiều thời gian cho các rắc rối đã
được người khác giải quyết.

Quan điểm là "Không cần phát minh lại bánh xe"

Và Django có một mô hình xác thực người dùng rất tốt với khả năng cấu hình người
dùng. Điều này đã làm cho nó trở thành lựa chọn hàng đầu khi trang web, ứng dụng
cần ưu tiên về bảo mật.

Nó sử dụng một loạt các thành phần Python là các thực thể riêng biệt không phụ thuộc
vào nhau.

3.1.9 Vậy, có khi nào không nên sử dụng Django không?

Có. Django không phải là framework tốt nhất cho mọi trường hợp.

Mặc dù nó có một nền tảng tốt để thực hiện các dự án lớn nhưng nó thường quá mức
cần thiết đối với các dự án nhỏ.

Django không nên được sử dụng để xây dựng những trang web nhỏ. Vấn đề này đã
có Flask Framework giải quyết (Cũng là một Web Framework của Python)

25
3.1.10 Ưu điểm của Django Framework

 Nó là ngôn ngữ pyhon

Như đã đề cập, Django được viết bằng Python. Và nó mang đầy đủ các tính chất của
Python.

Tính đơn giản, dễ học và dễ thực hiện, code ngắn hơn, thư viện lớn hơn.

 Giải pháp tốt nhất cho lĩnh vực tài chính

Django và Python là giải pháp cốt lõi của các công ty Fintech ở Thung lũng Silicon, IT
giants, Blue chip và Internet of things.

 Giao diện quản trị đơn giản

Giao diện quản trị được cung cấp bởi Django có thể được tạo rất đơn giản và một
trong những lợi thế chính khi sử dụng framework.

Nó cung cấp cho bạn một giao diện quản trị đầy đủ tính năng. Ví dụ:

class Interface(models.Model):

interface_title = models.CharField(max_length=50)

some_other_text = models.CharField(max_length=100)

some_boolean_value = models.BooleanField()

admin.site.register(Interface)

 Thư viện hỗ trợ đầy đủ

Django cung cấp các thư viện bao gồm các thao tác với chuỗi, web services, giao diện
hệ điều hành và giao thức chuẩn.

 Khả năng mở rộng

26
Django được sử dụng để đáp ứng nhu cầu lưu lượng truy cập lớn và cực lớn (Youtube,
Instamgram là một ví dụ)

Nó cho phép bạn thực hiện các hành động khác nhau về mở rộng dự án, chẳng hạn như
chạy các máy chủ riêng biệt cho cơ sở dữ liệu và thậm chí sử dụng phân cụm hoặc cân
bằng tải để phân phối ứng dụng trên nhiều máy chủ.

Hạn chế của Django

Chỉ định URL với các biểu thức chính quy không phải là một nhiệm vụ dễ dàng để
thực hiện cho người mới bắt đầu học Python. Các lỗi Template ẩn có thể khiến bạn
lãng phí rất nhiều thời gian.

Django mang lại một cảm giác nguyên khối vì nó là một framework mạnh.

Nó không có khả năng quản lý các yêu cầu khác nhau cùng một lúc vì nó không trao
quyền cho các thủ tục riêng lẻ để xử lý nhiều yêu cầu cùng một lúc. Các lập trình viên
thường sẽ cân nhắc nếu họ cần xem xét các phương thức khác nhau để thực hiện một
quy trình kiểm soát các yêu cầu khác nhau cùng một lúc.

Hệ thống ORM (Object Relation Mapping) cho phép các lập trình viên làm việc trên
các cơ sở dữ liệu khác nhau cùng một lúc nhưng nó thiếu một số tính năng chủ yếu
được cung cấp bởi các hệ thống ORM khác. Nó được thiết kế theo cách mà không cho
phép các lập trình viên sử dụng SQLAlchemy hoàn toàn.

3.1.11 Điều kiện tiên quyết để học Django

Hiểu, biết cách sử dụng cú pháp cơ bản của Python. Cũng như cách Python sử dụng
thụt đầu dòng khác với ngôn ngữ khác.

 Nếu bạn đã có kinh nghiệm HỌC JAVA, hay HỌC PHP thì sẽ hiểu phần thụt đầu
dòng của Python tiện lợi thế nào.

Hiểu về cách sử dụng hàm Python, như cách truyền đối số trong hàm hoặc đặt giá trị
mặc định.

27
Khi lập trình web, bạn có thể yêu cần import các mô-đun khác nhau, vì vậy bạn cần
hiểu việc import các package bên ngoài vào trong code của mình.

Có một thực tế quan trọng là Biểu thức chính quy (regex) được sử dụng chủ yếu trong
khi ánh xạ URL. Nó cũng được sử dụng để xác nhận các chuỗi.

 Ví dụ: Nếu bạn đang yêu cầu người dùng nhập id, email hoặc mật khẩu của họ, bạn

cần xác thực chuỗi đã nhập bằng Regex.

Bạn cũng cần tìm hiểu về kiến thức về RestAPI và JSON khi bắt đầu học Django.

3.1.12 Framework này giúp gì trong sự nghiệp lập trình viên của bạn?

Đó là một framework hoàn hảo cho người mới bắt đầu làm việc và khám phá các cơ
hội trong công ty hiện tại. Lập trình viên biết Python và sử dụng được Django đang
được tìm kiếm rất nhiều trên các trang tuyển dụng.

Các công ty lớn đang sử dụng Django để phát triển dự án của họ, điều này có nghĩa là
bạn có thể ứng tuyển hoặc làm outsourcing cho các công ty hàng đầu thế giới.

Django cũng là một trong những web framework phổ biến nhất trên thế giới, điều này
có nghĩa là một lập trình viên có kinh nghiệm về Django có thể kiếm được việc làm ở
rất nhiều công ty, khách hàng cũng rất nhiều.

28
 Hình 2 Bảng xếp hạng những ngôn ngữ phổ biến nhất thế giới năm 2019

3.1.13 Kết luận

Django cho phép bạn giải quyết một số lượng lớn các nhiệm vụ rất nhanh chóng và dễ
dàng. Nó làm cho việc phát triển phần mềm bằng Python trở nên rẻ và đơn giản.

ORM có nhược điểm nhưng Framework Django REST biến nhược điểm của nó thành
lợi thế vì giao diện mà Django ORM cung cấp là tốt nhất cho REST.

Ưu điểm rất lớn của Framework Django REST là nó có các mô hình giao thoa hoàn
hảo nhưng nó cũng có thể hoạt động với việc triển khai các Data Mapper Pattern.

Sử dụng Django còn phụ thuộc rất nhiều vào team của bạn, mục tiêu bạn đặt ra với sự
trợ giúp của Django.

Và thời gian phát triển ngắn là thứ Django có thể giúp. Điều này đặc biệt cần thiết nếu
bạn đang gia công phần mềm, dự án trung bình của bạn sẽ không kéo dài hơn một
năm, ngân sách của dự án cũng thấp và thời hạn rất ngắn.

29
Nó cũng giúp dễ dàng tuần tự hóa dữ liệu và phân phát theo định dạng XML hoặc
JSON. Điều này rất hữu ích khi tạo web services hoặc một trang web hoàn toàn cung
cấp dữ liệu được sử dụng bởi các trang web hoặc ứng dụng khác.

Tóm lại, Django framework là một trong những web framework của Python tốt nhất
có sẵn trên thị trường miễn phí và đơn giản. [5]

3.2 Django REST Framework

3.2.1 Tổng quan

EST là viết tắt của REpresentational State Transfer (dịch nôn na là chuyển trạng thái
đại diện) là một kiểu kiến trúc lập trình, nó định nghĩa các quy tắc để thiết kết các web
service chú trọng vào tài nguyên hệ thống.

Trong kiến trúc REST mọi thứ đều được coi là tài nguyên, chúng có thể là: tệp văn
bản, ảnh, trang html, video, hoặc dữ liệu động… REST server cung cấp quyền truy cập
vào các tài nguyên, REST client truy cập và thay đổi các tài nguyên đó.

Ở đây các tài nguyên được định danh dựa vào URI, REST sử dụng một vài đại diện để
biểu diễn các tài nguyên như văn bản, JSON, XML.

Hình 3 Demo qua về REST web service

Sau đây mình xin giới thiệu với các bạn một thư viện hỗ trợ rất tốt việc tạo ra một
RESTful Web API cho ứng dụng Django(Python).

30
3.2.2 Chuẩn bị

3.2.2.1 Yêu cầu

Kiến thức python căn bản Python.org

Postman hoặc CURL

Python 3

3.2.2.2 Setup môi trường

 Đầu tiên ta tạo ra 1 virtualenv để làm việc

$ virtualenv3 ~/restEnv

$ source ~/restEnv/bin/activate

 Tiếp theo là install Django và django-rest

$ pip install django # pip install --pre django -> nếu muốn cài Django 2.0

$ pip install djangorestframework

$ pip install markdown # Markdown support for the browsable API.

$ pip install django-filter # Filtering support

 Tiếp theo ta tạo 1 Project Django

$ django-admin startproject djangorest -> tạo project

$ python manage.py startapp rest -> tạo một app tên là rest

$ python manage.py migrate -> khởi tạo dữ liệu ban đầu cho project

 Sau đó ta run server bằng lệnh

$ python manage.py runserver -> tạo một app tên là rest

31
 Hình 4 Sau khi run server

Bỏ qua ORM, Template cũng như URL của Django. Ta sẽ đến ngay phần làm thế nào
để tạo ra 1 REST API bởi vì nó gần như tách biệt với các phần khác của django.

Ta thêm app framework và rest vào settings.py.

INSTALLED_APPS = (

...

<rest_framework<,

<rest<

) [6]

3.3 HTML là gì?

HTML là chữ viết tắt của cụm từ HyperText Markup Language((Xem thêm
tại http://vi.wikipedia.org/wiki/HTML)) (dịch là Ngôn ngữ đánh dấu siêu văn bản)
được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và
mỗi trang được quy ra là một tài liệu HTML (thi thoảng mình sẽ ghi là một tập tin
HTML). Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World
Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra
các chuẩn trên môi trường Internet).

Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được
quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn

32
(ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ
đóng (ví <strong> dụ </strong> và ). Các văn bản muốn được đánh dấu bằng HTML
sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in đậm</strong>).
Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm
trong các thuộc tính (ví dụ như thẻ <img>).

Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng
là .html hoặc .htm.

3.3.1 HTML được xử lý ra sao?

Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web đảm
nhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên trong và sẽ
chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do các bot máy
tính hiểu).

Để kiểm tra, bạn có thể sử dụng khung nội dung bên dưới và chuyển qua lại giữa phần
HTML và Result để xem kết quả của một tập tin HTML sau khi được xử lý.

Hình 5 Ví dụ về HTML

3.3.2 Cấu trúc một đoạn HTML

Như mình đã nói ở trên, HTML sẽ được khai báo bằng các phần tử bởi các từ khóa.
Nội dung nằm bên trong cặp từ khóa sẽ là nội dung bạn cần định dạng với HTML. Ví
dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản.

33
[html]<p>Đây là một đoạn văn bản trong HTML.</p>[/html]

Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu,
mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng
(=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính-

[html]<form action="https://thachpham.com"> </form>[/html]

Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé.

3.3.3 Dùng chương trình gì để tạo tập tin HTML?

HTML là một tập tin siêu văn bản nên bạn có thể dùng các chương trình soạn thảo văn
bản không có chức năng định dạng văn bản để tạo ra một tập tin HTML.

Trong Windows, bạn có thể dùng Notepad để tạo ra một tập tin HTML, còn trên Mac
thì có thể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn
phải lưu tập tin thành đuôi .html và sử dụng trình duyệt website để đọc nó.

Hình 6 HTML được soạn thảo bằng nodepad

Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đích soạn thảo, nên từ các bài
sau chúng ta sẽ dùng một chương trình khác tương tự để soạn thảo HTML. Và mình
cũng không bao giờ khuyến khích bạn sửa một tập tin HTML bất kỳ bằng chương
trinh Notepad để tránh gặp các lỗi hiển thị ký tự tiếng Việt.

34
3.3.4 HTML đóng vai trò gì trong website?

Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò
xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số
(media) như hình ảnh, video, nhạc.

Hình 7 Vai trò của từng ngôn ngữ trong Website

Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ
đóng một vai trò hình thành trên website. Ví dụ một website như Thachpham.com sẽ
được hình thành bởi:

 HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.

 CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục
website, có màu sắc, ảnh nền,….

 Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp
vào ảnh trên nó sẽ có hiệu ứng phóng to).

 PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt
(ví dụ như các bài viết sẽ được lưu trong máy chủ).

 MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài
viết sẽ được lưu lại với dạng dữ liệu SQL).

35
Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn
hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của
cơ thể đó, nó như là một cái khung sườn vậy.

Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý
dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.

Nhân tiện đây mình cũng nói luôn, website có hai loại chính:

 Website tĩnh (static web) – Là một website không giao tiếp với máy chủ web để gửi
nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt
đọc.

 Website động (dynamic web) – Là một website sẽ giao tiếp với một máy chủ để gửi
nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và
trình duyệt sẽ hiển thị nó. Để một website có thể giao tiếp với máy chủ web thì sẽ
dùng một số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để
thực hiện. Ví dụ như một website làm bằng WordPress là website động. [7]

3.4 CSS

3.4.1 CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó
dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ
đánh dấu, như là HTML.

Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức
cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của
trang bằng cách điều khiển bố cục, màu sắc, và font chữ.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một
lý do đơn giản.

HTML không được thiết kế để gắn tag để giúp định dạng trang web. Bạn chỉ có thể
dùng nó để “đánh dấu” lên site.

36
Những tag như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiều rắc
rối cho lập trình viên. Vì website có nhiều font khác nhau, màu nền và phong cách
khác nhau. Để viết lại code cho trang web là cả một quá trình dài, cực nhọc. Vì vậy,
CSS được tạo bởi W3C là để giải quyết vấn đề này.

Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup (nền
tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện
website), chúng là không thể tách rời.

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang
chứa văn bản mà không có gì khác.

3.4.2 Ưu điểm của CSS là gì

Sự khác biệt giữa site có CSS và không có CSS rất dễ nhận biết.

Chắc bạn đã thấy rồi, khi website không load được đầy đủ và chỉ có nền trắng và chữ
thì chỉ có màu đen và xanh. Như sau:

Hình 8 Một Website không có CSS

37
Điều này có nghĩa là thành phần CSS của bạn không tải lên được hay nó không tồn tại.

Đó một website không có CSS, vậy bạn có muốn website của mình trông như thế
không? Hẵn là không rồi phải không.

Trước khi sử dụng CSS, tất cả những phong cách của CSS cần được đính kèm vào
trong HTML markup. Có nghĩa là bạn cần tách ra để xác định các thành phần như
background, font colors, canh hàng, vâng vâng.

CSS giúp bạn định kiểu mọi thứ trên một file khác, bạn có thể tạo phong cách trước rồi
sau đó tích hợp file CSS lên trên cùng của file HTML. Việc này giúp HTML markup
rõ ràng và dễ quản lý hơn nhiều.

Tóm lại,với CSS bạn không cần lặp lại các mô tả cho từng thanh phần. Nó tiết kiệm
thời gian, làm code ngắn lại để bạn có thể kiểm soát lỗi dễ dàng hơn.

CSS giúp bạn có nhiều styles trên một trang web HTML, vì vậy, khả năng điều chỉnh
trang gần như vô hạn?

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

CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc bạn có thể tận
dụng. Như đã nói ở trên, HTML không được dùng để tạo phong cách cho các yếu tố,
nó chỉ đánh dấu từng phần để biết được yếu tố đó là gì thôi.

 Ví dụ: <p>Đây là văn bản.</p>.

Còn làm thế nào để tạo ra phong cách cho văn bản đó? Syntax của CSS rất đơn giản.
Nó có phần block chọn và block khai báo. Bạn chọn một yếu tố và khai báo làm gì với
nó. Rất đơn giản phải không?

Tuy nhiên, cũng có nhiều quy tắc cần ghi nhớ.

Selector sẽ trỏ về yếu tố HTML bạn cần muốn tạo phong cách. Block khai báo sẽ bao
gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy,

38
Mỗi khai báo bao gồm một tên CSS và giá trị, cách nhấu bởi dấu 2 chấm. Khai báo
CSS luôn kết thúc bằng dấu chấm phẩn, và block khai báo được đặt trong dấu ngoặc
nhọn.

Hãy xem qua ví dụ:

Tất cả các thành phần trong element <p> sẽ dùng màu xanh và in đậm.

<style>

p{

color: blue;

text-weight: bold;

</style>

Ở ví dụ khác, tất cả các yếu tố trong <p> sẽ được canh giữa, rộng 16x và màu hồng.

<style>

p{

text-align: center;

font-size: 16px;

color: pink;

</style>

39
3.4.4 Internal, External và Inline CSS Styles

Style CSS Internal là style được tải lên mỗi khi trang web được refresh. Vì vậy nó tăng
thời gian tải trang. Ngoài ra, bạn sẽ không dùng một style CSS cho nhiều trang vì nó
chỉ áp dụng cho từng trang một.

Tuy nhiên, lợi ích của style CSS Internal là khi mọi thứ đã đặt trong một trang thì nó
dễ chia sẽ trang để xem trước hơn.

Phương pháp dùng Style External là thuận tiên nhất. Mọi thứ được lưu trong file .css.

Có nghĩa là bạn có thể tạo phong cách ở file khác áp dụng CSS vào trang bạn
muốn. External style sẽ cải thiện thời gian tải trang rất nhiều.

Cuối cùng, chúng ta sẽ nói về style CSS Inline. Inline hoạt động với một yếu tố nhất
định có tag <style>. Mỗi thành phần đều cần được tạo phong cách riêng, vì vậy đây
không hẵn là cách tốt nhất và dễ nhất để xử lý CSS.

Nhưng có thể khá tiện lợi, vì nếu bạn muốn thay đổi chỉ một yếu tố, nhanh chóng xem
trước thay đổi, bạn không cần truy cập trực tiếp vào file CSS để chỉnh sửa mà sử dụng
Inline CSS. [8]

3.5 JavaScript

3.5.1 Javascript là gì?

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc
tự định nghĩa.

Javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ
hầu như trên tất cả các trình duyệt như Firefox, Chrome, ... trên máy tính lẫn điện
thoại.

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó có thể
can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML
một cách dễ dàng.

40
Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client.
Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm
việc ở backend.

Bạn thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng
slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp.

Tất cả các chức năng này đều được xử lý bằng Javascript đấy các bạn ạ.

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code
backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như
Angular, jQuery, RactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript
Fullstack.

JS là một từ viết tắt của JavaScript, vì vây khi một ai đó nhắc tới JS thì bạn phải hiểu
rằng đó là Javascript nhé.

3.5.2 Javascript Framework là gì?

Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình
Javascript.

Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó.

Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý

backend, jQuery là một thư viện rất mạnh khi xử lý DOM HTML và CSS.

Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều
libraries và framework được viết bằng Javascript ra đời như:

 Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.

 NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng
realtime.

 Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.

 ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications).

41
 jQuery: Một thư viện rất mạnh về hiểu ứng.

 ReactJS: Một thư viện viết ứng dụng mobie.

 Và còn nhiều thư viện khác.

3.5.3 Ưu điểm và nhược điểm của Javascript

Tuy là một ngôn ngữ lập trình rất nổi tiếng, nhưng bản thân Javascript không thể hoàn
hảo được. Sau đây hãy cùng điểm qua một số ưu điểm và nhược điểm của nó nhé.

3.5.3.1 Ưu diểm của JavaScript là gì

Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client. Ví dụ
2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên xử lý
Javascript khác nhau, không ảnh hưởng lẫn nhau.

Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho
đến các hệ điều hành trên mobile.

Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài
đặt quá nhiều phần mềm

3.5.3.2 Nhược điểm của Javascript là gì?

Vì là một ngôn ngữ rất dễ dàng bị soi code nên dễ bị khai thác. Hacker có thể nhập
một đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu
rằng đoạn code đó là chính thống, nên hacker có thể gửi nhửng request lên server một
cách dễ dàng.

Có thể bạn đã thấy những tool về Facebook trên mạng, hoặc những đoạn code làm
thay đổi chức năng và giao diện của Facebook, chúng được viết từ Javascript đấy các
bạn ạ.

3.5.4 Cách viết chương trình javascript đầu tiên

Bước đầu tiên để học Javascript là bạn phải chuẩn bị một phần mềm để viết mã
Javascript, mình thì thích dùng Netbeans nhưng nếu bạn là người mới thì nên sử dụng
Notepad++ vì nó rất nhẹ và dễ cài đặt.

42
Qua khái niệm javascript là gì? thì bạn thấy tất cả các trình duyệt đều hỗ trợ nên ta
không cần phải download thư viện gì cả mà thông qua những đoạn mã script giúp
trình duyệt nhận diện được đó là Javascript.

3.5.4.1 Cặp thẻ mở và thẻ đóng

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ
đóng </script>, ví dụ:

<script language="javascript">

alert("Hello World!");

</script>

3.5.4.2 Đặt thẻ script ở đâu?

Chúng ta có ba cách đặt thường được sử dụng sau đây:

 Cách 1: Internal - viết trong file html hiện tại

Thông thường chúng ta sẽ viết những đoạn mã javascript trên phần head, tuy nhiên đó
không phải là điều kiện bắt buộc, nghĩa là bạn có thể đặt ở đâu tùy thích miễn là những
đoạn mã đó phải được bao lại bằng thẻ script.

Ví dụ đặt trong thẻ head

<html>

<head>

<title></title>

<script language="javascript">

alert("Hello World!");

</script>

</head>

<body>

43
 </body>

</html>

Ví dụ đặt trong thẻ body

<html>

<head>

<title></title>

</head>

<body>

<script language="javascript">

alert("Hello World!");

</script>

</body>

</html>

 Cách 2: External - viết ra một file js khác rồi import vào

Bạn có thể viết những đoạn mã javascript ở một file có phần mở rộng là .js, sau đó
dùng thẻ script để import vào (giống CSS vậy). Ví dụ file JS của mình có tên
là demo.js thì lúc này mình import vào như sau:

Code import JS
<script language="javascript" src="demo.js"></script>

Lúc này bên trong file demo.js bạn không đặt thẻ scirpt nữa nhé vì nó là file có phần
đuôi là .js rồi nên trình duyệt tự nhận diện đây là file chứa mã Javascript

44
 Cách 3: Inline - viết trực tiếp trong thẻ HTML

Inline nghĩa là bạn sẽ viết những đoạn mã Javascript trực tiếp trong thẻ HTML luôn.
Như ví dụ dưới đây là mình đang viết dạng inline vì đoạn mã alert(1) được đặt trong
sự kiện onclick của thẻ button.

<input type="button" onclick="alert(1)" value="Click Me"/>

3.5.5 Các câu hỏi thường gặp khi học Javascript

 Thẻ Script là gì?

Thẻ script dùng để khai báo cho trình duyệt biết nội dung bên trong sẽ là một đoạn mã
Javascript.

 Type = text/javascript là gì?

Khi bạn khai báo thẻ script thì sẽ có thuộc tính type="text/javascript". Đây là tham số
dùng để khai báo media type cho dữ liệu nằm bên trong của thẻ script.

Mặc định nếu bạn không khai báo thì nó sẽ hiểu là text/javascript.

 Javascript có làm được backend không?

Theo lý thuyết thì Javascript là ngôn ngữ client nên không thể thao tác trên phía server.

Tuy nhiên, khi server của bạn có cài đặt NodeJS thì ở server hoàn toàn có thể dùng
ngôn ngữ Javascript để code, bởi NodeJS sử dụng Javascript.

 Có nên học Javascript không?

Nếu bạn đi theo lĩnh vực lập trình web, app mobile thì nên học thêm Javascript đi nhé.
Mình đảm bảo bạn sẽ luôn có việc làm và lương cũng không tồi.

Đương nhiên không phải chỉ rành Javascript thôi, mà bạn phải học thêm những FW JS
khác. [9]

45
3.6 Bootstrap

3.6.1 Bootstrap là gì?

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để
phát triển website chuẩn responsive.

Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn
dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids,
navigation, image carousels

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra
một mẫu webiste hoàn chỉnh. Với các thuộc tính về giao diện được quy định sẵn như
kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm
mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá
trình thiết kế giao diện website.

3.6.2 Lịch sử của bootstrap

Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter. Nó được xuất
bản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub. Tên gọi ban đầu
là Twitter Blueprint.

Đến ngày 31/1/2012, Bootstrap phiên bản 2 đã được phát hành. Bootstrap 2 được bổ
sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích thước.
Tiếp nối sự thành công của phiên bản 2, Bootstrap 3 ra đời vào ngày 19/8/2013 với
giao diện tương thích với smartphone.

Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub. Vào
tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển. Phiên
bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015. Phiên bản mới
nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap 4.3.1. Cho đến
nay, Bootstrap vẫn là một trong những framework thiết kế website có lượng người
dùng “khủng” nhất.

46
3.6.3 3 File chính của bootstrap

Dưới đây là 3 File chính giúp quản lý các chức năng của Website và giao diện người
dùng:

 Bootstrap.CSS

 Bootstrap.JS

 Glyphicons

3.6.3.1 Bootstrap.CSS

Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của các trang
Web. HTML có nhiệm vụ quản lý cấu trúc và nội dung thì CSS sẽ xử lý bố cục của
Website. Vì vậy mà hai cấu trúc này phải tồn tại cùng nhau để thực hiện được hành
động cụ thể.

Giờ bạn sẽ không phải tốn thời gian để chỉnh sửa thủ công chỉ để thay đổi một thiết kế
nhỏ. Thay vào đó, bạn có thể dùng CSS để tạo giao diện thống nhất trên nhiều Website
mà không bị giới hạn.

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng như bảng, bố cục
hình. Bạn cần mất một ít thời gian để CSS ghi nhớ hết tất cả các khai báo và bộ chọn.

47
3.6.3.2 Bootstrap.JS

Hình 9 Bootstrap.JS

48
Đây là phần cốt lõi vì chứa các File JavaScript, nó chịu trách nhiệm cho việc tương
tác của Website. Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển
sẽ sử dụng jQuery. Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúp bạn
thêm nhiều chức năng vào trang Web.

Theo kinh nghiệm của em, jQuery sẽ thực hiện một số chức năng như:

 Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một
cách linh hoạt.

 Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript.

 jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS.

 Thêm một số tính năng động cho nội dung các trang Web của bạn.

Tuy Bootstrap với các thuộc tính Element HTML và CSS có thể hoạt động tốt, nhưng
vẫn cần jQuery để tạo thiết kế Responsive. Nếu thiếu đi phần này, bạn chỉ có thể dùng
các phần tĩnh của CSS mà thôi.

3.6.4 Glyphicons

Trong giao diện trang Web, phần không thể thiếu chính là Icons. Chúng thường được
liên kết với các dữ liệu nhất định và các hành động trong giao diện người dùng.

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở khóa bộ Halflings
Glyphicons để bạn sử dụng miễn phí. Tại bản miễn phí, tuy chỉ có giao diện chuẩn
nhưng phù hợp với các chức năng thiết yếu.

Nếu như bạn muốn có các Icon phong cách hơn thì có thể mua bộ bộ Icon Premium
khác nhau. Chắc chắn các Icon tại Glyphicons sẽ giúp cho trang Web của bạn trông
đẹp và nổi bật hơn.

49
3.6.5 Tại sao nên dùng Bootstrap

Giữa muôn vàn ứng dụng thiết kế website hiện nay, Bootstrap vẫn có khả năng cạnh
tranh cao là nhờ những đặc điểm nổi bật sau:

 Dễ dàng thao tác

 Tùy chỉnh dễ dàng

 Chất lượng sản phẩm đầu ra hoàn hảo

 Độ tương thích cao

3.6.5.1 Dễ dàng thao tác

Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã nguồn mở HTML, CSS và
Javascript. Người dùng cần trang bị kiến thức cơ bản 3 mã này mới có thể sử dụng
Bootstrap hiệu quả. Bên cạnh đó, các mã nguồn này cũng có thể dễ dàng thay đổi và
chỉnh sửa tùy ý.

3.6.5.2 Tùy chỉnh dễ dàng

Bootstrap được tạo ra từ các mã nguồn mở cho phép designer linh hoạt hơn. Giờ đây
có thể lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi. CDN
Boostrap còn giúp bạn tiết kiệm dung lượng vì không cần tải mã nguồn về máy.

3.6.5.3 Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới. Bootstrap đã được
nghiên cứu và thử nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào
sử dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản
phẩm với chất lượng tốt nhất.

3.6.5.4 Độ tương thích cao

Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trình duyệt và nền
tảng. Đây là một điều cực kì quan trọng và cần thiết trong trải nghiệm người dùng. Sử
dụng Grid System cùng với hai bộ tiền xử lý Less và Sass, Bootstrap mặc định hỗ
trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn. Bootstrap có khả

50
năng tự động điều chỉnh kích thước trang website theo khung browser. Mục đích để
phù hợp với màn hình của máy tính để bàn, tablet hay laptop.

3.6.6 Cấu trúc và tính năng của Bootstrap là gì?

Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch và nén lại.
Ngoài ra, Bootstrap được thiết kế dưới dạng các mô-đun. Do đó, dễ dàng tích hợp với
hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap
mang đến nhiều chức năng nổi bật.

 Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” các thành tố
dùng để tạo nên giao diện của một website hoàn chỉnh như font, typography, form,
table, grid…

 Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải xuống và
sử dụng nó tại trang web của khung.

 Tái sử dụng các thành phần lặp đi lặp lại trên trang web.

 Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính năng
trong quá trình lập trình web của bạn.

 Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu
tượng và tăng tốc độ tải trang.

3.6.7 Cách cài đặt Bootstrap

Biết về Bootstrap là gì vẫn chưa đủ. Bạn cần phải biết cách cài đặt và sử dụng
Bootstrap như thế nào? Có hai cách phổ biến để tải Bootstrap về web hosting của
bạn:

 Tải trực tiếp từ trang cung cấp Bootstrap

 Thông qua CDN Bootstrap

51
3.6.7.1 Tải về từ trang Bootstrap

Bạn có thể tải Bootstrap từ trang chủ https://getbootstrap.com/. Sau khi tải về, bạn sẽ
nhận được cấu trúc gồm hai thư mục JS và CSS. Bạn cần giải nén và cài đặt vào web
hosting thông qua giao thức FTP.

Chỉ với những bước đơn giản trên, người dùng đã có thể sử dụng Bootstrap cho việc
thiết kế ngay lập tức. Vì đây là phiên bản được biên dịch sẵn nên quá trình tải về và
nhúng Bootstrap vào website diễn ra vô cùng nhanh chóng

3.6.7.2 Bootstrap từ CDN là gì?

Bạn không muốn tải xuống và lưu trữ Bootstrap trên thiết bị? Bạn có thể
nhúng Bootstrap thông qua CDN (Content Delivery Network – mạng phân phối nội
dung). Đây là cách mà đa số lập trình viên sử dụng để nhúng Bootstrap vì tiết kiệm
băng thông cũng như tích hợp JavaScript, CSS, thư viện jQuerry mang đến nhiều tính
năng cho website và nâng cao trải nghiệm người dùng hơn.

3.6.8 Bootstrap 4 có gì mới?

Theo kinh nghiệm sau một thời gian sử dụng phần mềm này, em đã thấy một số đặc
điểm mới của Bootstrap 4 gồm:

 Dung lượng File Bootstrap.min.CSS giảm đi đáng kể, từ 121KB chỉ còn 88KB.

 Sử dụng Sass thay thế LESS để giúp bạn sử dụng đồng thời nhiều khả năng tùy biến
hơn.

 Không còn hỗ trợ IE8: Đa phần các nhà làm Web sẽ gặp hiển thị lỗi trên IE8. Vì
vậy mà phần mềm này đã đổi từ đơn vị px sang đơn vị EM hoặc REM. Nó sẽ giúp
cho các thành phần trong Website có thể đổi kích thước tương ứng mà không làm
ảnh hưởng đến cấu trúc.

52
 Hỗ trợ Flexbox: Giúp các nhà phát triển Web có thể sắp xếp các phần tử trên
Website một cách linh hoạt. Chỉ với vài dòng lệnh đơn giản là các phần tử của
Website đã được sắp xếp theo đúng ý đồ.

 Bổ sung các Class mới: Một điểm cộng nữa là so với các phiên bản cũ, nó đã được
bổ sung thêm các Class tiện ích. [10]

3.7 JQUERY

3.7.1 JQUERY là gì?

jQuery là một thư viện JavaScript đa tính năng, nhỏ gọn, nhanh, được tạo bởi John
Resig vào năm 2006 với một phương châm hết sức ý nghĩa: Write less, do more - Viết
ít hơn, làm nhiều hơn.

jQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt ảnh và tương tác
Ajax để phát triển web nhanh chóng. Các phân tích web đã chỉ ra rằng, jQuery là thư
viện JavaScript được triển khai rộng rãi nhất.

jQuery là một bộ công cụ JavaScript được thiết kế để đơn giản hóa các tác vụ khác
nhau bằng cách viết ít code hơn. Dưới đây liệt kê một số tính năng tối quan trọng được
hỗ trợ bởi jQuery:

 Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse
(duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi
sử dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.

 Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý các
sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler.

 Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và
phản hồi tốt bởi sử dụng công nghệ AJAX.

 Hiệu ứng động − jQuery đi kèm với rất nhiều hiệu ứng động đẹp mà bạn có thể sử
dụng cho các website của mình.

53
 Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB (gzipped).

 Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hết bởi
các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome
và Opera 9.0+.

 Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú
pháp XPath cơ bản.

3.7.2 Cách sử dụng Jquery

Có hai cách để sử dụng jQuery:

Cài đặt cục bộ − Bạn có thể tải jQuery Library trên máy của bạn và đưa nó vào trong
code HTML.

Sử dụng từ CDN (CDN Based Version) − Bạn có thể đưa thư viện jQuery vào trong
code HTML một cách trực tiếp từ Content Delivery Network (CDN).

3.7.3 Cài đặt cục bộ

Truy cập trang https://jquery.com/download/ để tải phiên bản jQuery mới nhất. Bây
giờ đặt file jquery-2.1.3.min.js vào trong một thư mục trong Website của bạn, ví
dụ /jquery.

Bây giờ bạn có thể đưa thư viện jquery vào trong HTML file của bạn như sau:

<html>

<head>

<title>The jQuery Example</title>

<script type="text/javascript" src="../jquery/jquery-2.1.3.min.js">

</script>

54
 <script type="text/javascript">

$(document).ready(function(){

document.write("Xin chào bạn!");

});

</script>

</head>

<body>

<h1>Xin chào</h1>

</body>

</html>

Nó sẽ cho kết quả:

Xin chào bạn!

3.7.4 Sử dụng CDN

Bạn có thể đưa thư viện jQuery vào trong HTML code một cách trực tiếp từ Content
Delivery Network (CDN). Google và Microsoft cung cấp phiên bản mới nhất.

Trong loạt bài này, chúng em sử dụng Google CDN.

Ví dụ

Bây giờ chúng ta viết lại ví dụ trên bằng cách sử dụng thư viện jQuery từ Google
CDN.

<html>

<head>

<title>The jQuery Example</title>

55
 script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script> <script type="text/javascript">

$(document).ready(function(){

document.write("Xin chào bạn!");

});

</script>

</head>

<body>

<h1>Xin chào</h1>

</body>

</html>

Nó sẽ cho kết quả:

Xin chào bạn!

3.7.5 Cách để gọi một hàm thư viện jQuery?

Cũng tương tự như JavaScript, trước khi chúng ta sử dụng các đoạn code của jQuery
để đọc hay chỉnh sửa các đối tượng DOM, chúng ta cần đảm bảo rằng chúng ta bắt đầu
thêm các sự kiện ngay sau khi DOM sẵn sàng.

Nếu bạn muốn một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong hàm
$(document).ready(). Mọi thứ bên trong sẽ tải ngay sau khi DOM được tải và trước khi
nội dung trang được tải.

Để làm điều này, chúng ta đăng ký một sự kiện đã sẵn sàng cho tài liệu như sau:

56
$(document).ready(function() {

// thực hiện khi DOM sẵn sàng

});

Để gọi bất kỳ hàm thư viện jQuery nào, sử dụng các thẻ HTML script như dưới đây:

<html>

<head>

<title>The jQuery Example</title>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

<script type="text/javascript" language="javascript">

$(document).ready(function() {

("div").click(function() {alert("Xin chào bạn!");});

});

</script>

</head>

<body>

<div id="mydiv"> Nhấp vào đây để xem hộp hội thoại. </div>

</body>

</html>

Nó sẽ cho kết quả sau:

Nhấp vào đây để xem hộp hội thoại.

57
3.7.6 Cách sử dụng Custom Script trong jQuery?

Tốt hơn là viết code tùy chỉnh trong tệp JavaScript tùy chỉnh, có tên custom.js, như
sau:

/* Filename: custom.js */

$(document).ready(function() {

$("div").click(function() {

alert("Xin chào bạn!");

});

});

Bây giờ chúng ta đưa custom.js này vào trong HTML file như sau:

<html>

<head>

<title>The jQuery Example</title>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>

<script type="text/javascript" src="../custom.js"></script>

</head>

<body>

<div id="mydiv">

Nhấp vào đây để xem hộp hội thoại.

</div>

</body>

58
</html>

Nó sẽ cho kết quả sau:

Nhấp vào đây để xem hộp hội thoại.

3.7.7 Sử dụng nhiều thư viện trong Jquery

Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xảy ra xung đột giữa chúng.
Ví dụ, bạn có thể sử dụng các thư viện jQuery và thư viện MooTool JavaScript cùng
với nhau. [11]

59
CHƯƠNG 4 XÂY DỰNG WEBSITE HỌC TIẾNG ANH

4.1 Giới thiệu về hệ thống

4.1.1 Mô hình hệ thống

Sử dụng mô hình hướng đối tượng, xác định các đối tượng tham gia các công việc của
hệ thống như sau:

 User: là người đăng ký tài khoản, người có nhu cầu học tập và muốn làm các bài
kiểm tra để kiểm tra trình độ tiếng anh của mình.

 Non-User: giống với User đây cũng là người có nhu cầu học tập nhưng không thể
làm được các bài kiểm tra, muốn làm được các bài kiểm tra thì non-User cần phải
đăng ký tài khoản để trở thành User

 QTV: Là người có nhiệm vụ quản lý hệ thống. Quản lý những người đang truy cập
vào hệ thống, là người quản lý toàn bộ Website.

4.1.2 Mô tả hệ thống

Hệ thống gồm các hoạt động chính của quản trị viên, User và non-User

User và non-User đều có thể xem chủ đề, từ vựng ,ngữ pháp và đều có thể luyện nghe,
luyên nói, luyện đọc

Khác biệt duy nhất giữa User và non-User là User có thể làm các bài kiểm tra và viết
cũng như trả lời bình luận của mọi người hoặc đánh giá cũng như đưa ra nhận xét về
Website.

Hệ thống sử dụng trí tuệ nhân tạo để giúp cho người dùng dễ dàng học tập hơn.

Hỗ trợ đăng nhập, tạo tải khoản, người đăng nhập dễ dàng chỉnh sửa thông tin cũng
như số điểm mình tích lũy đươc.

60
4.1.3 Biểu đồ phân cấp chức năng

Hình 100 Sau khi run server

4.1.4 Sơ đồ Usecase tổng quát

61
 Hình 111 Sơ đồ usecase tổng quát
4.1.5 Sơ đồ Usecase QTV

Hình 122 Sơ đồ usecase quản trị viên

4.1.6 Sơ đồ Usecase User

Hình 133 Sơ đồ usecase User

62
4.1.7 Sơ đồ Usecase non-User

Hình 144 Sơ đồ usecase non-User

 Quản trị viên: là người quản lý website

 User: là thành viên học tiếng anh ở Website

 Non-User: Người đăng kí tài khoản website

63
4.1.8 Sơ đồ lớp tổng quát

Hình 155 Sơ đồ lớp tổng quát

4.2 Giới thiệu Website

4.2.1 Giao diện chính

Thực tế cho thấy, đối với những ai muốn học tiếng anh trực tuyến thì một giao diện dễ
nhìn sẽ là tối ưu nhất.

Giao diện Website không cần nhất thiết phải đẹp, phải có quá nhiều màu sắc làm gì vì
thứ họ quan tâm chính là việc học tiếng anh. Vậy nên một Website được thiết kế đơn
giản sẽ là tốt nhất.

64
 Hình 166 Giao diện chính Website EngForLife

Như đã nói ở Chương 1, Website học tiếng anh EngForLife gồm 4 phần chính là:

 Chủ đề

 Từ vựng

 Luyện nghe, nói ,đọc

 Bài kiểm tra

Người dùng có thể chọn bất kỳ 1 trong 4 phần trên để luyện trình độ tiếng anh của
mình.

Bây giờ chúng ta sẽ đi vào giao diện của từng phần một.

65
4.2.2 Chủ đề

Hình 177 Giao diện chủ đề Website EngForLife

Khi người dùng bấm vào mục chủ đề trên thanh menu thì sẽ đi đến trang danh sách
chủ đề cho người dùng lựa chọn chủ đề muốn học.

Khi bấm vào 1 chủ để bất kỳ sẽ đi đến trang giới thiệu về chủ đề đó và các tự vựng chủ
yếu của chủ đề.

4.2.3 Từ vựng

Hình 188 Giao diện chủ đề Website EngForLife

66
Giao diện này hiện lên khi người dùng bấm vào “từ vựng” ở trên thanh menu. Từ vựng
bao gồm tất cả từ vựng của tất cả các chủ đề có trong Website EngForLife.

Ngoài ra ở đây còn có thanh công cụ tìm kiếm, giúp người dùng tìm kiếm từ mà họ
muốn tra cứu.

Khi người dùng bấm vào 1 từ vựng bất kỳ sẽ hiện ra chi tiết của từ vựng đó bao gồm
 Loại từ

 Phát âm

 Cách dùng

 ….

Ngoài ra giao diện này còn có thêm nút “Thêm từ mới” là để người dùng có thể thêm 1
từ mới mà không có ở trong Website học tiếng anh. Tất nhiên từ này sẽ phải được hệ
thống kiểm duyệt tính chính xác mới được đưa lên Website.

4.2.4 Ngữ pháp

Hình 199 Giao diện ngữ pháp Website EngForLife

Trong bất kỳ 1 Website học tiếng anh nào, thì không thể thiếu được là ngữ pháp.

67
Trang Website này được hiện lên khi người dùng bấm vào “ngữ pháp” ở trên thanh
menu.

Ở đây Website sẽ tổng hợp 6 thì cơ bản cho người học, ở mỗi một thì đều sẽ có các
câu hỏi khác nhau để giúp người học có thể nhớ rõ và hiểu sâu hơn về thì mà người
học đang học.

4.2.5 Luyện?

Luyện ở đây là bao gồm rèn cho người học 3 kỹ năng là:

 Luyện đọc

 Luyện nghe

 Luyện nói

4.2.5.1 Luyện đọc

Hình 200 Giao diện luyện nghe Website EngForLife

Ở đây người dùng sẽ chọn một trong các chủ đề mà hệ thống có để đọc. Mỗi chủ đề
người dùng chọn sẽ có các câu hỏi để kiểm tra xem mức độ đọc hiểu của người dùng
đến đâu.

68
4.2.5.2 Luyện nghe

Hình 211 Giao diện luyện nghe Website EngForLife

Người dùng sẽ bấm vào nút loa để nghe âm thanh được phát ra, âm thanh được lựa
chọn ngẫu nhiên từ các từ hoặc các cụm từ ở tất cả chủ đề. Người dùng có thể bấm nút
mũi tên để đổi từ khác

Sau khi nghe xong người dùng sẽ gõ từ mà họ nghe được vào ô textboxt.

Nút kiểm tra là để so sánh độ chính xác của từ gốc với từ mà người dùng nhập, Nút
hiển thị từ là để hiển thị từ gốc ra.

4.2.5.3 Luyện nói

69
 Hình 222 Giao diện luyện nói Website EngForLife

Giao diện luyện nói là để kiểm tra khả năng phát âm của người dùng. Để sử dụng được
chức năng này người dùng phải có kết nối microphone với Website.

Khi bấm vào nút mic, hệ thống sẽ đưa ra 1 từ hoặc 1 cụm từ ngẫu nhiên ở tất cả chủ đề
cho người dùng kèm phát âm của từ đó cho người dùng nghe.

Việc của người dùng lúc này là nghe kỹ từ được phát ra sau đó nói lại. Hệ thống AI sẽ
tự nhận diện giọng nói của người dùng và chuyển từ đó thành văn bản đưa lên màn
hình.

Người dùng có thể kiểm tra tính chính xác của từ mà người dùng phát âm so với từ gốc
của hệ thống. Người dùng có thể bấm nút next để đổi từ khác

4.2.6 Bài kiểm tra

Khi bấm vào nút “bài kiểm tra” trên thanh menu hệ thống sẽ đưa người dùng đến trang
bài khiểm tra.

Ở đây người dùng sẽ được đưa cho 1 bài test ngẫu nhiên tổng hợp của các chủ đề để
làm và có giới hạn thời gian.

Sau khi làm xong hệ thống sẽ chấm điểm và tính số câu đúng và thưởng cho người
dùng số sao tương ứng với số câu đúng.

Số sao này là dùng để đo thành tích của người dùng trên bảng xếp hang.

Tính năng này vẫn chưa được hoàn thiện do thời gian có hạn.

4.3 Mã nguồn của chương trình

Để tiết kiệm thời gian nên em xin gửi toàn bộ chương trình vào link driver sau:

https://drive.google.com/drive/u/0/folders/17DifWPeavWwBad9joJZbnZ54aRCWjshS

70
KẾT LUẬN

71
 TÀI LIỆU THAM KHẢO

[1] Ms Thủy, “Luyện đọc tiếng anh,” 2019. [Trực tuyến]. Available:
https://kissenglishcenter.com/luyen-doc-tieng-anh/.
[2] Tổ chức giao dục quốc tế LANGMASTER, [Online]. Available:
https://langmaster.edu.vn/cac-phuong-phap-luyen-nghe-tieng-anh-hieu-qua-cho-
nguoi-moi-bat-dau-a66i1460.html.
[3] "Academi English for international Education," [Online]. Available:
https://acet.edu.vn/luyen-noi-tieng-anh-nhu-nguoi-ban-ngu/.
[4] "Chức năng kiểm tra, Tổ hợp giao dục Topica," [Online]. Available:
https://vietnambiz.vn/kiem-tra-checking-la-gi-vai-tro-cua-chuc-nang-kiem-tra-
20190923143425946.htm.
[5] "Học viện đào tạo CNTT NIIT," 2020. [Online]. Available:
https://niithanoi.edu.vn/django-la-gi.html.
[6] "Viblo Learning," [Online]. Available: https://viblo.asia/p/gioi-thieu-django-rest-
framework-Eb85oJb2l2G. [Accessed 2020].
[7] T. Phạm, "Thach Pham Share The Best," [Online]. Available:
https://thachpham.com/web-development/html-css/html-la-gi-va-vi-sao-no-quan-
trong.html.
[8] H. G.. [Online]. Available: https://www.hostinger.vn/huong-dan/css-la-gi.
[9] C. Write, "FreeTuts," [Online]. Available: https://freetuts.net/javascript-la-gi-
viet-ung-dung-javascript-dau-tien-263.html.
[10] M. Bão. [Online]. Available: https://wiki.matbao.net/bootstrap-la-gi-cai-dat-
bootstrap-web-chuan-responsive/.
[11] "Quản trị mạng," [Online]. Available: https://quantrimang.com/jquery-la-gi-
155854.

72