Xây dựng website hỗ trợ luyện thi TOEIC

Model: Là các thành phần hỗ trợ ánh xạ dữ liệu vật lý lên bộ nhớ, lưu trữ dữ liệu tạm thời trên bộ nhớ, hỗ trợ các cách thức xử lý dữ liệu, hỗ trợ khả năng giao tiếp và trao đổi dữ liệu

Trang 1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM

KHOA TIN - -

NGUYỄN VĂN VƯỢNG

XÂY DỰNG WEBSITE HỖ TRỢ LUYỆN

THI TOEIC

KHÓA LUẬN TỐT NGHIỆP

Và tôi xin được gởi lời tri ân đến cha mẹ, anh chị, những người đã luôn ở bên động viên tinh thần để tôi có thể an tâm học tập trong suốt thời gian qua

Với bạn bè, tôi xin được nói lời cảm ơn đến các bạn, các bạn đã luôn ở bên giúp

đỡ, động viên tôi, làm cho tôi cảm thấy thỏa mái, giúp tôi có đủ nghị lực vượt qua những lúc khó khăn nhất

Một lần nữa, tôi xin cảm ơn tất cả mọi người!

Đà Nẵng, ngày 12 tháng 05 năm 2012

Sinh viên thực hiện

Nguyễn Văn Vượng

Trang 3

LỜI CAM ĐOAN

Tôi xin cam đoan:

1 Những nội dung trong luận văn này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của thầy Lê Văn Mỹ

2 Mọi tham khảo dùng trong luận văn này đều được trích dẫn rõ ràng tên nguồn tham khảo

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo hay gian trá, chúng tôi xin chịu hoàn toàn trách nhiệm

Sinh viên Nguyễn Văn Vượng

Trang 4

MỤC LỤC

MỤC LỤC 3

DANH MỤC HÌNH ẢNH 6

DANH MỤC BẢNG BIỂU 8

MỞ ĐẦU 9

1 Lý do chọn đề tài 9

2 Mục đích nghiên cứu 9

2.1 Về mặt lý thuyết 9

2.2 Về mặt thực tiễn 10

3 Đối tượng và phạm vi nghiên cứu 10

3.1 Đối tượng nghiên cứu 10

3.2 Phạm vi nghiên cứu 11

4 Phương pháp nghiên cứu 11

5 Ý nghĩa khoa học và thực tiển của đề tài 11

6 Bố cục của luận văn 12

CHƯƠNG 1: TÌM HIỂU CÔNG NGHỆ 13

1.1 Mô hình MVC 13

1.1.1 Khái niệm 13

1.1.2 Các thành phần trong mô hình MVC 13

1.1.2.1 Model 13

1.1.2.2 View 14

1.1.2.3 Controller 14

Trang 5

1.1.3 Mô hình MVC 1 14

1.1.4 Mô hình MVC 2 15

1.1.4.1 Khái niệm 15

1.1.4.2 Cơ chế thực hiện 16

1.2 Công nghệ Jsp/servlet 16

1.2.1 JSP 16

1.2.1.1 Khái niệm 17

1.2.1.2 Chu kì sống của JSP 17

1.2.2 Servlet 19

1.2.2.1 Khái niệm 19

1.2.2.2 Cơ chế hoạt động 19

1.2.2.3 Chu kỳ sống hay tồn tại của servlet trong server hay container 20

1.3 Tìm hiểu về AJAX 21

CHƯƠNG 2: CHƯƠNG TRÌNH THI TOEIC 23

2.1 Giới thiệu chương trình thi toeic 23

2.1.1 Đối với người dự thi 23

2.1.2 Đối với người quản lý 23

2.2 Hình thức thi TOEIC của trang web 23

2.3 Cách thức ra đề thi 24

2.3.1 Phần thi nghe 24

2.3.2 Phần thi đọc 25

2.4 Cách thức tính điểm 26

Trang 6

CHƯƠNG I: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 27

3.1 Danh mục các Actor 27

3.2 Danh mục các Usecase 27

3.3 Quan hệ giữa Usecase và Actor 29

3.4 Mô hình Usecase 31

3.5 Thiết kế cơ sở dữ liệu 34

3.5.1 Cấu trúc các bảng 34

3.5.2 Biểu đồ quan hệ 37

CHƯƠNG 4: CÀI ĐẶT VÀ DEMO CHƯƠNG TRÌNH 38

KẾT LUẬN 53

1 Kết luận 53

1.1 Về mặt kiến thức 53

1.2 Về mặt thực nghiệm 53

2 Hướng phát triển 54

TÀI LIỆU THAM KHẢO 55

Trang 7

DANH MỤC HÌNH ẢNH

Hình 1.1: Mô hình MVC 1 15

Hình 1.2: Mô hình MVC 2 16

Hình 1.3: Chu kỳ hoạt động của JSP 18

Hình 1.4: Cơ chế hoạt động Servlet 19

Hình 1.5: Chu kỳ hoạt động của servlet trong server 20

Hình 2.1: Cấu trúc đề thi toeic 24

Hình 2.1: Cách tính điểm 26

Hình 3.1: Sơ đồ usercase cho người thi 31

Hình 3.2: Sơ đồ usercase cho admin 32

Hình 3.3: Sơ đồ usercase cho người quản lý 33

Hình 3.4: Bảng danh mục câu hỏi 34

Hình 3.5: Bảng câu hỏi 34

Hình 3.6: Bảng Câu hỏi đóng góp 35

Hình 3.7: Bảng User 35

Hình 3.8: Bảng Thông báo 36

Hình 3.9: Bảng Thành tích 36

Hình 3.10: Bảng Tài nguyên 37

Hình 3.11: Mối quan hệ giữa các bảng trong hệ thống 37

Hình 4.1: Trang đăng nhập hệ thống 38

Hình 4.2: Trang chính 38

Hình 4.3: Trang thông tin cá nhân User 39

Hình 4.4: Trang lịch sử thi 40

Hình 4.5: Trang thi phần nghe 41

Hình 4.6: Trang thi phần đọc 42

Trang 8

Hình 4.7: Trang kết quả thi 43

Hình 4.8: Trang Thông tin cá nhân admin 44

Hình 4.9: Trang quản lý User 45

Hình 4.10: Trang quản lý Admin 46

Hình 4.11: Trang quản lý câu hỏi 47

Hình 4.12: Trang thêm câu hỏi trả lời theo ảnh 48

Hình 4.13: Trang thêm câu hỏi hỏi-đáp 48

Hình 4.14: Trang thêm câu hỏi hội thoại ngắn 49

Hình 4.15: Trang thêm câu hỏi phát biểu ngắn 50

Hình 4.16: Trang thêm câu hỏi hoàn thành câu 51

Hình 4.17: Trang thêm câu hỏi hoàn điền từ 51

Hình 4.18: Trang quản lý câu hỏi đóng góp 52

Trang 9

DANH MỤC BẢNG BIỂU

Bảng 3.1: Danh mục các Actor 27 Bảng 3.2: Danh mục các Usecase 27 Bảng 3.3: Quan hệ Usecase-Actor 29

do đó việc học tiếng anh và thi lấy chứng chỉ tiếng anh là nhu cầu lớn của nhiều bạn trẻ hôm nay

Cùng với đó là sự phát tiển mạnh mẽ của công nghệ thông tin, đặt biệt là mạng Internet Nó là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn cầu.Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người

Ứng dụng công nghệ thông tin vào thực tiễn đời sống xã hội giảm thiểu được sức lao động của con người, tăng hiệu học tập của con người

Nhận thấy được nhu cầu và những điều kiện thuận lợi ấy, tôi đã quyết định chọn

đề tài “xây dựng website hỗ trợ luyện thi TOEIC” để làm luận văn tốt nghiệp cho mình nhằm mục đích giúp cho mọi người giảm bớt được thời gian, chi phí trong vấn đề luyện thi toeic, cũng như làm quen với cách thức thi và nâng cao thêm trình

độ tiếng anh của bản thân

2 Mục đích nghiên cứu:

2.1 Về mặt lý thuyết:

- Tìm hiểu thêm về ngôn ngữ Ajax, Javascript , JSP/servlet, JAVA

- Tìm hiểu mô hình MVC trong lập trình web

Trang 11

- Biết cách sử dụng hệ quản trị cơ sở dữ liệu bằng SQL Server 2005

- Nâng cao khả năng phân tích thiết kế hệ thống của 1 trang web

2.2 Về mặt thực tiễn:

- Xây dựng website luyện thi TOEIC đáp ứng được các yêu cầu sau:

 Giao diện thân thiện và dễ sử dụng

 Chương trình có khả năng giúp cho người sử dụng thi TOEIC giống như cách thức thi TOEIC thực tế

 Chương trình có thể giúp cho người admin quản lý được số thành viên tham gia, tạo nguồn câu hỏi phong phú đáp ứng được các nhu cầu ngày càng tăng

 Hệ thống website phải đảm bảo được tính bảo mật thông tin của các thanh viên tham gia Có khả năng đáp ứng với lượng user ngày càng tăng

- Nâng cao thêm vốn kiến thức tiếng anh, cách thức luyện thi toeic, cũng như cách chấm điểm trong thi toeic.

3 Đối tượng và phạm vi nghiên cứu:

3.1 Đối tượng nghiên cứu:

- Tìm hiểu, nghiên cứu ngôn ngữ lập trình java, jsp,CSS, Javascript,

- Phân tích và thiết kế hệ thống của một website

- Tìm hiểu các thao tác xử lý dữ liệu trên Webservice

- Tìm hiểu hình thức thi TOEIC (Format của các bài test)

- Tìm hiểu các công cụ xây dựng chương trình: sử dụng công cụ NetBean IDE 7.0.1, GlassFish server 3, và SQL Server 2005 để thiết kế cơ sở dữ liệu cho hệ thống

Trang 12

3.2 Phạm vi nghiên cứu:

Vì khoảng thời gian có hạn, em chỉ tập trung vào nghiên cứu bài toán luyện thi trắc nghiệm TOEIC, tìm hiểu cấu trúc và cách thức chấm điểm của bài thi TOEIC

4 Phương pháp nghiên cứu:

Do đây là một sản phẩm web ứng dụng, nên em đã áp dụng phương pháp nghiên cứu sau:

- Khảo sát nhu cầu thực tế từ các bạn sinh viên (sự quan trọng khi có một website luyện thi toiec)

- Tham khảo hình thức tính điểm của bài thi TOEIC

- Tham khảo tài liệu về mô hình MVC, ngôn ngữ lập trình JSP, java, javascript, và thiết kế lập trình website trên NetBean IDE 7.0 và hoàn thiện chương trình

5 Ý nghĩa khoa học và thực tiễn:

5.1 Ý nghĩa khoa học:

- Giải quyết các vấn đề của việc ra đề TOEIC thi một cách nhanh chóng

- Đưa ra phương pháp châm bài thi TOEIC chính xác

- Nâng cao khả năng quản lý người tham gia luyện thi

5.2 Ý nghĩa thực tiễn:

- Giảm chi phí và thời gian cho việc luyện thi TOEIC

- Nâng cao khả năng tiếng anh cho người sử dụng

- Tạo cho người luyện thi toeic có được môi trường thuận lợi để luyện tập trước khi bước vào kì thi chính thức

Trang 13

6 Bố cục luận văn:

- Chương 1: Tìm hiểu công nghệ

- Chương 2: Chương trình thi TOEIC

- Chương 3: Phân tích thiết kế hệ thống thông

- Chương 4: Cài đặt và demo chương trình

Trang 14

CHƯƠNG 1: TÌM HIỂU CÔNG NGHỆ 1.1 Mô hình MVC:

1.1.1 Khái niệm:

MVC là viết tắt của cụm từ Model – View – Controller

MVC lần đầu được sử dụng vào năm 1979 trong ứng dụng SmallTalk Nó được phát triển bởi Trygve Reenskaug

Ngày nay với sự phát triển của công nghệ,một ứng dụng có thể được tách thành nhiều phần (layer) và chúng được chạy ở trên nhiều máy tính khác nhau,chẳng hạn như: tầng giao diện (The presentation/User Interface) ,tầng nghiệp vụ (Business logic/Controller), tầng truy xuất dữ liệu (data access model) Mô hình MVC ra đời

để đáp ứng cho những yêu cầu trên,và nó được chọn làm kiến trúc triển khai trên các ứng dụng web application

1.1.2 Các thành phần trong mô hình MVC:

1.1.2.1 Model:

Là các thành phần hỗ trợ ánh xạ dữ liệu vật lý lên bộ nhớ, lưu trữ dữ liệu tạm thời trên bộ nhớ, hỗ trợ các cách thức xử lý dữ liệu, hỗ trợ khả năng giao tiếp và trao đổi dữ liệu giữa các đối tượng khác trong bộ nhớ và cơ sở dữ liệu

Cụ thể là một đối tượng Object trong khái niệm của lập trình hướng đối tượng OOP và mang đầy đủ khái niệm và tính chất của một Object

Trong ứng dụng Web của Java, Model sẽ là JavaBean hay Enterprise JavaBean hay Web Service

Trong mô hình ứng dụng Web thì html, servlet, jsp … là những thành phần đại diện cho View

1.1.2.3 Controller:

Là các thành phần hỗ trợ kết nối người dùng server, đón nhập yêu cầu người dùng, thực hiện chuyển xử lý, lựa chọn và cập nhật model và view tương ứng để trình bày về phía người dùng

Hỗ trợ kết nối giữa người model và view, giúp model xác định được view trình bày

Trong mô hình ứng dụng Web thì Servlet đóng vai trò của Controller

1.1.3 Mô hình MVC 1

Là mô hình tương tự như html nhưng các trang web ở dạng động có thể đón nhận

và trình bày dữ liệu từ server nhưng tất cả các trang liên kết đều là các đường dẫn tĩnh và các cách thức xử lý đều thực hiện trực tiếp trên trang Ngoài ra, các trang thực hiện gọi trực tiếp lẫn nhau

Trang 16

Hình 1.1: Mô hình MVC 1

Mô hình này chỉ phù hợp với ứng dụng nhỏ vì các đưởng dẫn rất khó để tìm kiếm

và sửa đổi, đặc biệt trên trang đang trộn lẫn giữa code html, javascript, xml, javacode …

Trang 17

Hình 1.2: Mô hình MVC 2 1.1.4.2 Cơ chế thực hiện:

Web Browser gửi request đến server thông qua các control trên form HTML hay JSP, hay query string url hay qua cookies

Servlet – Controller đón nhận request và xác định Model tương ứng để tạo ra instance của JavaBean để đón nhận các giá trị nhập từ request để lưu trữ và xử lý Model thực hiện xử lý, kết nối dữ liệu vật lý dưới DBMS (nếu có) và trả kết quả trả về cho Controller

Kết quả xử lý được chuyển vào Servlet – Controller, Servlet Controller thực hiện tạo hay lựa chọn View để từ đó đưa kết quả xử lý hay dữ liệu lấy từ Model để cập nhật lại trang kết quả View

Controller gửi View qua response cho người dùng để browser có thể trình bày dữ liệu trong Web Browser

1.2 Công nghệ Jsp/servlet:

1.2.1 JSP:

Trang 18

1.2.1.1 Khái niệm:

Là viết tắt của Java Server Page

Đây là ngôn ngữ scripting được dùng ở server để hỗ trợ ứng dụng trong việc trình bày trang web động – cập nhật dữ liệu

JSP tích hợp bao gồm HTML, XML, Java Code, và kể cả Servlet nghĩa là

Nó tạo thuận lợi cho người dùng trong việc xây dựng giao diện – khắc phục nhược điểm của servlet về giao diện

Ngoài ra, nó cho người dùng mở rộng khả năng sử dụng JSP qua việc định nghĩa các tag mới như XML – khắc phục nhược điểm của HTML

Đặc biệt cho phép người dùng sử dụng nhúng trưc tiếp code Java vào trong JSP thông qua Declaration – khai báo biến và hàm, Scriptlets – chứa code trực tiếp của Java và Expression – tính toán biểu thức và in kết quả ra màn hình Những điều này tạo điều kiện cho người lập trình Java không cần học các ngôn ngữ script mới khi lập trình

Bản chất của JSP là Servlet, do vậy các thành phần của Servlet sẽ có tồn tại hết trên JSP

Ngoài ra, JSP không cần phải biên dịch mà nó được biên dịch khi có request lần đầu tiên yêu cầu đến server, do vậy JSP khắc phục nhược điểm chỉnh sửa phải cần có source code và biên dịch lại khi deploy sau khi chỉnh sửa của Servlet JSP cung cấp các thành phần implicit Object để người dùng có thể sử dụng các thành phần tương tác trên server mà không cần khai báo và khởi tạo

Kết xuất của JSP thực chất là HTML File JSP có phần mở rộng là jsp

1.2.1.2 Chu kỳ sống của JSP :

Trang 19

Hình 1.3: Chu kỳ hoạt động của JSP

Khi có một yêu cầu từ client đến server, container xác định trang jsp được yêu cầu

Trang JSP được đưa qua JSP Engine để xử lý JSP Engine thực hiện các bước sau:

Đọc cấu trúc file của JSP File từ trên xuống dưới, từ trái qua phải để chuyên đổi (Parsing) sang Java code tương ứng

Phát sinh Servlet từ nội dung parsing ở bước trên để cấu tạo thành servlet

Thực hiện biên dịch code Servlet

Sau khi biên dịch thành công thì quá trình hoạt động sẽ thực hiện đúng theo chu

kỳ sống của Servlet như đã nêu trong các phần trên

Tương tự 03 phương thức init, services, destroy của Servlet thì JSP sẽ có 03 phương thức tương ứng là jspInit, jspService và jspDestroy

JSP định nghĩa ra 4 tầm vực thao tác đó là page – tồn tại trong page, request – tồn tại từ lúc bắt đầu gửi request cho đến khi response thành cồng, session, application (từ khi deploy đến khi kết thúc ứng dụng) – ServletContext

Servlet được load sẵn ở Web Server duy nhất lần đầu tiên khi ứng dụng được deploy và đáp ứng tức thời yêu cầu của người dùng thông qua Web Container Người dùng không lo lắng đến chuyện khởi tạo servlet (như cách chúng ta phải dùng lệnh new đối với việc tạo ra một instance mới cho một object)

Servlet được server hỗ trợ cơ chế multithread giúp giảm tài nguyên và quá tải trong việc xử lý của server hay container

1.2.2.2 Cơ chế hoạt động :

Hình 1.4: Cơ chế hoạt động Servlet

Khi có request từ client gửi đến Server hay Web Container

Trang 21

Container sẽ lựa chọn một instance Servlet tương ứng để đáp ứng request đó (người dùng sẽ không bao giờ biết instance nào được lựa chọn, nó lựa chọn khi nào, servlet xử lý khi nào)

Servlet lựa chọn sẽ thực hiện xử lý và kết nối DB nếu cần

Sau khi servlet thực hiện xong, sẽ gửi kết quả ra container để gửi response về cho người dùng

Browser đón nhận kết quả và trình bày ra màn hình dữ liệu

1.2.2.3 Chu kỳ sống hay tồn tại của servlet trong server hay container

Hình 1.5: Chu kỳ hoạt động của servlet trong server

Khi một ứng dụng chưa được deploy vào trong server thì servlet chưa được khởi tạo (uninstantiated)

Khi ứng dụng được deploy vào server thì container sẽ thực hiện khởi tạo instance cho servlet, trong lúc khới tạo kích hoạt hàm init Lưu ý, hàm init chỉ được kích hoạt lần duy nhất khi deploy

Khi có một request đến servlet của người dùng, container đón nhận request và chọn instance bean bất kỳ tương ứng với yêu cầu để đáp ứng

Sau khi chọn được bean, container sẽ kích hoạt hàm service tương ứng Lưu ý ở đây, ở lần yêu cầu thứ 2 thì container cũng sẽ chọn bean và kích hoạt hàm service tương ứng, do vậy, hàm service sẽ được gọi rất nhiều lần

Trang 22

Khi servlet được cập nhật mới hay server bị crash hay undeploy ứng dụng ra khỏi server – container, thì hàm destroy của servlet được kích hoạt Nghĩa là servlet chỉ kích hoạt phương thức destroy lần cuối cùng duy nhất

Lưu ý: các giá trị chỉ số ‘ trong hình trên thể hiện khi lỗi xảy ra thì server sẽ báo lỗi

1.3 Tìm hiểu về AJAX:

AJAX (Asynchronous JavaScript and XML) không phải là một công nghệ mới hay một ngôn ngữ lập trình mới, đó là một kỹ thuật cho phép tạo các ứng dụng website tốt hơn, nhanh hơn và có tính tương tác hơn AJAX bắt đầu được phổ biến trong năm 2005

mà công đầu thuộc về Google

Với AJAX, JavaScript có thể giao tiếp trực tiếp với Server, bằng cách sử dụng đối tượng XMLHttpRequest Với Object này, JavaScript có thể trao đổi dữ liệu với Web Server, mà không phải reload lại trang web

AJAX sử dụng kiểu truyền dữ liệu bất đồng bộ (HTTP requests) giữa trình duyệt web

và web server, cho phép trang web có thể request một phần thông tin từ Server thay vì

Trang 23

Các nền tảng trên đều được hỗ trợ tốt trên nhiều trình duyệt Web khác nhau, nhiều

hệ thống khác nhau do đó AJAX cũng không lệ thuộc vào trình duyệt web hay hệ thống nào

Với cách code JavaScript truyền thống, nếu bạn muốn lấy bất kì thông tin nào từ database hoặc từ một file trên server, hoặc muốn gửi thông tin người dùng đến Server, bạn sẽ phải tạo một form HTML và gửi dữ liệu đến Server bằng phương thức GET hoặc POST Người dùng sẽ phải nhấp chuột vào nút submit để gửi/nhận thông tin, đợi phản hồi của server và sau đó đợi trang web load lại với các kết quả được trả về

Bởi vì server sẽ trả về một trang web mới mỗi khi người dùng submit input nên ứng dụng web truyền thống có thể chạy rất chậm và có xu hướng kém thân thiện với người dùng

Với AJAX, JavaScript giao tiếp trực tiếp với server, thông qua đối tượng JavaScript XMLHttpRequest Với HTTP Request, một trang web có thể gửi request và nhận response từ web server mà không phải reloading lại trang Người dùng vẫn ở tại trang hiện tại, và họ sẽ không nhận thấy mọi việc đang diễn ra phía sau đó (Request hoặc send data đến server đều diễn ra trong background)

2.1.1 Đối với người dự thi:

- Tham gia làm bài thi TOEIC

- Xem và cập nhật thông tin

- Xem lịch sử thi

- Đóng góp câu hỏi

- Xem thông báo

2.1.2 Đối với người quản lý:

- Xem và cập nhật thông tin cá nhân

- Xem và cập nhật thông tin các admin

- Xem thông tin các thành viên tham gia dự thi

- Thêm mới câu hỏi cho cơ sở dữ liệu của đề thi

2.2 Hình thức thi TOEIC của trang web:

Thi TOEIC diễn ra trong hai giờ, gồm có 200 câu hỏi, được chia làm hai phần như hình sau:

Trang 27

 10 câu độ khó 3

2.4 Cách thức tính điểm:

Về cách thức tính điểm tham khảo bảng sau:

Hình 2.2: Cách tính điểm thi TOEIC

UC1 Ðăng nhập Cho phép actor đãng nhập vào hệ thống

UC2 Ðăng xuất Cho phép actor đãng xuất khỏi hệ thống

UC3 Ðổi mật khẩu Cho phép actor đổi mật khẩu mới cho tài khoản của

mình

UC4 Sửa thông tin Cho phép actor sửa thông tin của mình

UC5 Đăng kí Cho phép actor đăng kí thành viên vào CSDL

UC6 Làm bài thi Cho phép actor làm bài thi toeic trên web

UC7 Xem kết quả thi Cho phép actor xem kết quả thi của mình

UC8 Xem lịch sử thi Cho phép actor kết quả thi của những lần thi trước

UC9 Xem thông tin cá