1. Phân tích
2.2Sơ đồ dòng dữ liệu mức thiết kế
2.2.1 Quản lý bài học
Figure 2.3 DFD thiết kế quản lý bài học – ô xử lý 1.1
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.4 DFD thiết kế quản lý bài học – ô xử lý 1.2
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
2.2.2 Quản lý câu hỏi
Figure 2.5 DFD thiết kế quản lý câu hỏi – ô xử lý 2.1
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.6 DFD thiết kế quản lý câu hỏi – ô xử lý 2.2
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.7 DFD thiết kế quản lý câu hỏi – ô xử lý 2.3
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
2.2.3 Quản lý diễn đàn
+ Ô xử lý 3.1 Quản lý bài viết chủđề
Figure 2.8 DFD thiết kế quản lý diễn đàn – ô xử lý 3.1
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
+ Ô xử lý 3.2 Quản lý bài viết trả lời
Figure 2.9 DFD thiết kế quản lý diễn đàn – ô xử lý 3.2
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.10 DFD thiết kế quản lý diễn đàn – ô xử lý 3.3
Figure 2.11 DFD thiết kế quản lý diễn đàn – ô xử lý 3.4
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.12 DFD thiết kế quản lý diễn đàn – ô xử lý 3.5
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
2.3 Thiết kế giao diện
2.3.1 Sơ đồ màn hình
Figure 2.13: Sơđồ các màn hình
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
2.3.2 Danh sách các màn hình
STT Tên màn hình Chức năng (adsbygoogle = window.adsbygoogle || []).push({});
1 Màn hình chính - Trang
chủ
Giới thiệu về trang web các chức năng chính
2 Màn hình đăng nhập Màn hình cho phép đăng nhập vào hệ thống
của trang web học và thi TOEFL
3 Màn hình Đăng kí Màn hình đăng kí để trở thành thành viên
chính thức của hệ thống.
4 Màn hình đăng xuất Màn hình xóa cookies của thành viên sau khi
đăng nhập muốn thoát khỏi hệ thống.
5 Màn hình điều chỉnh
thông tin cá nhân.
Để thành viên trong hệ thống có thể chỉnh sửa thông tin cá nhân của mình.
6 Màn hình danh sách thành
viên.
Xem danh sách các thành viên hiện có trong
hệ thông trang web
7 Màn hình quản lí câu hỏi Màn hình để quản trị có thể thêm, xóa sửa danh sách các câu hỏi có trong cơ sở dữ liệu theo 3 section
8 Màn hình học bài Màn hình dùng để cho các thành viên trong
trang web có thể theo dõi các bài học có sẵn.
9 Màn hình chỉnh sửa và
soạn bài học .
Màn hình để cho quản trị viên có thể thay đổi nội dung bài học nếu muốn.
10 Màn hình lựa chọn 1 Để cho thành viên khi muốn luyện tập lựa
chọn số câu và phần muốn luyện tập của Section 1
11 Màn hình lựa chọn 2 Để cho thành viên khi muốn luyện tập lựa
chọn Part muốn luyện tập và số câu câu hỏi cho mỗi Part của Section 2
12 Màn hình lựa chọn 3 Để cho thành viên khi muốn luyện tập lựa
chọn sốđoạn văn muốn luyện tập của Section
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
3 (adsbygoogle = window.adsbygoogle || []).push({});
13 Màn hình luyện tập Dùng cho thành viên khi luyện tập, hiển thị
câu hỏi cho người dùng trả lời sau đó sẽđánh giá kết quả cho từng câu hỏi đó
14 Màn hình thi Màn hình tổ chức thi cho người dùng có nhu
cầu cần thi TOEFL lần lượt theo từng Section và Part của mỗi Section.
15 Màn hình Thay đổi Tham
số hệ thống
Thay đổi các tham số dùng cho sự hoạt động của hệ thống.
16 Màn hình quản lí thành
viên
Chỉnh sửa quyền hạn của thành viên hay xóa thành viên ra khỏi hệ thống.
17 Màn hình diễn đàn Hiển thị các vấn đề đang được thảo luận trong diễn đàn.
18 Màn hình chuyên mục Các chuyên mục của một diễn đàn con.
19 Màn hình chủđề diễn đàn Các chủ đề do thành viên trong trang web gửi trong một chuyên mục nhất định nào đó.
20 Màn hình bài viết Các bài viết của thành viên trong diễn đàn
thảo luận về một chủđề có sẵn.
2.3.4 Mô tả màn hình
Cấu trúc màn hình sử dụng trong trang web có 4 phần chính:
- Logo, banner quảng cáo và Topmenu ở trên cùng
+ Top Menu bao gồm các thành phần: đăng kí, diễn đàn, thành viên, ngôn ngữ sử dụng trong trang web.
- Phần bên trái là menu chính với các menu thành phần như: Trang chủ, bài học, thi thử, luyện tập, game…
- Phần bên phải là các menu thống kê, đăng nhập, hay liên kết
- Phần chính giữa là phần hiển thị những module có trong trang web.
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Tùy vào từng màn hình hay ngôn ngữ hiển thị mà các menu trên, trái, phải có thể
thay đổi theo nội dung của của màn hình.
Figure 2.14 Cấu trúc màn hình chương trình
¾ Màn hình chính giới thiệu về trang web.
Màn hình chính là màn hình mà các người dùng nhìn thấy khi truy cập trang
web học và luyện thi Toefl.
Màn hình chính là màn hình giới thiệu về trang web, lợi ích của học tiếng Anh và thông tin về nhóm thực hiện. (adsbygoogle = window.adsbygoogle || []).push({});
¾ Màn hình đăng nhập
Màn hình đăng nhập là màn hình dùng để truy cập vào hệ thống theo các quyền hạn khác nhau.
Nếu thành công, người dùng sẽđăng nhập và làm việc với hệ thống dưới quyền hạn đã được phân công
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
+ Mô tả hoạt động
Người dùng nhập tên đăng nhập và mật khẩu. Sau đó chọn “Đăng nhập” hoặc “Đăng kí”
+ Các thành phần của màn hình
Nhóm Loại Ý nghĩa
1 TextBox Hai textbox thuộc nhóm này dùng để nhập tên và mật khẩu
đăng nhập
2 Button Hai button đăng nhập và đăng kí
Lưu ý: Các nhóm được minh hoạ bằng các sốđược đánh trên màn hình.
1
2
Figure 2.15 Thiết kế màn hình đăng nhập
¾ Màn hình đăng kí
+ Cấu trúc:
Màn hình chỉ có TopMenu mà không có menu phải hay menu trái.
+ Mô tả hoạt động
Khi người dùng muốn trở thành thành viên của trang web, người dùng nhấn vào button “Đăng kí” trên top menu . Nếu đăng kí thành công người dùng sẽ trở là thành viên chính thức của trang web.
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
+ Các thành phần của màn hình
Nhóm Loại Ý nghĩa
1 TextBox1 Nhập các thông tin cá nhân
2 Validate Sumary Thông báo lỗi khi nhập các thông tin
không đúng định dạng hay yêu cầu
3 ComboBox Ngày tháng năm sinh
4 TextBox2 Quy định bắt buộc của trang web.
5 Button Hai button đồng ý hay không đồng ý
Lưu ý: Các nhóm được minh hoạ bằng các sốđược đánh trên màn hình. (adsbygoogle = window.adsbygoogle || []).push({});
Figure 2.16 Nội dung màn hình đăng kí
¾ Màn hình chỉnh sửa thông tin người dùng
+ Cấu trúc giống như màn hình đăng kí. + Mô tả hoạt động:
Người dùng sau một thời gian sử dụng có thay đổi một số thông tin riêng tư như
mật khẩu, địa chỉ mail, hay một số thông tin khác. Họ có thể chỉnh sửa các thông tin
đó.
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
+ Các thành phần của màn hình
Nhóm Loại Ý nghĩa
1 TextBox1 Nhập các thông tin cá nhân
2 Validate Sumary Thông báo lỗi khi nhập các thông tin
không đúng định dạng hay yêu cầu
3 ComboBox Ngày tháng năm sinh
4 Button Hai button lưu hay hủy bỏ việc thay
đổi
¾ Màn hình học ôn tiếng Anh
+ Cấu trúc gồm có các phần trên trái giống như các màn hình khác nhưng phần bên phải là danh sách các bài học.
+ Mô tả hoạt động
Nếu người dùng không có quyền vào trang bài học thì sẽđược thông báo. Khi người dùng có quyền được truy cập thì menu phải sẽ hiện thị danh sách các bài học
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
có sẵn được liệt kê từ những bài đã học đến bài đã học của từng thành viên đang truy cập diễn đàn.
+ Các thành phần của màn hình
Nhóm Loại Ý nghĩa
1 Label Nội dung bài học
2 Data Grid Danh sách các bài học trong trang
web
Figure 2.17 Nội dung màn hình Học ôn
¾ Nhóm màn hình liên quan đến việc luyện tập
+ Cấu trúc:
Với mỗi phần luyện tập: Section1, Section2, Section3 sẽ có 2 màn hình: Màn hình lựa chọn hình thức ,số câu hỏi và màn hình luyện tập (adsbygoogle = window.adsbygoogle || []).push({});
+ Mô tả hoạt động:
Trước khi bắt đầu luyện tập thì người dùng sẽ được yêu cầu lựa chọn phần và số
câu hỏi của mỗi phần . Sau đó thì thành viên đó có thể luyện tập theo phần mà mình
đã lựa chọn. Người dùng có thể xem lại kết quả luyện tập của mình nếu muốn. + Thành phần của màn hình chuẩn bị luyện tâp
Nhóm Loại Ý nghĩa
1 Label Giới thiệu cách thức luyện tập
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
2 Combobox Chọn lựa phần hay số lượng câu hỏi
muốn luyện.
3 Button Nút bắt đầu luyện tập
Figure 2.18 Nội dung màn hình chuẩn bị luyện tập
** Màn hình luyện tập
Nhóm Loại Ý nghĩa
1 UserControl Hiển thị câu hỏi
2 Button Chọn lựa thứ tự câu hỏi để luyện tập
3 Button Xem kết quả hay kết thúc luyện tập
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.19 Nội dung màn hình luyện tập 1
Figure 2.20 Nội dung màn hình luyện tập 2 – xem kết quả
¾ Nhóm màn hình thực hiện việc thi thử.
+ Cấu trúc:
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Giống như màn hình luyện tập nhưng mỗi lần chỉ hiển thị một câu hỏi. + Mô tả hoạt động
Đối với Section1: Sau khi đoạn nghe được đọc lên người dùng sẽ có một khoảng thời gian để chọn lựa câu trả lời. Sau đó trang web sẽ tựđộng hiển thị câu hỏi tiếp theo.
Đối với Section 2 và 3: Thời gian làm bài sẽ được hiển thị . Sau khi thời gian kết thúc thì trang web sẽ tựđộng chuyển sang section khác hay kết thúc bài thi.
+ Các thành phần của màn hình
Nhóm Loại Ý nghĩa
1 ImageButton Nút chọn câu tiếp theo hay kết thúc bài làm
2 Timer Hiển thị thời gian làm bài
3 UserControl Hiển thị câu hỏi (adsbygoogle = window.adsbygoogle || []).push({});
Figure 2.21 Nội dung màn hình thi
¾ Màn hình soạn bài học và chỉnh sửa bài học
Cấu trúc màn hình:
Sử dụng công cụFreeTextBox.dll – John Dyer 2003
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Màn hình chỉ dùng cho quản trị viên chỉnh sửa thêm hay soạn bài học mới
Nhóm Loại Ý nghĩa
1 FreeTextBox Chứa dữ liệu bài học
2 Button Lưu hoặc Hủy
¾ Màn hình thay đổi tham số của hệ thống
+ Cấu trúc:
Màn hình bao gồm danh sách các tham số mặc định của hệ thống như: quyền đăng nhập, thời gian làm bài thi, số câu hỏi cho mỗi đề thi, thời gian để làm một câu hỏi…..
+ Mô tả hoạt động
Khi Quản trị viên thấy phương pháp hoạt động hiện tại của hệ thống không còn phù hợp và hệ thống cần có sự thay đổi về các tham số. Quản trị sẽ thay đổi chúng nếu cần thiết và lưu lại.
+ Các thành phần của màn hình
Nhóm Loại Ý nghĩa
1 TextBox Các tham số mặc định của hệ thống.
2 Button Button đồng ý hay hủy bỏ việc thay đổi.
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên
Figure 2.22 Nội dung màn hình soạn bài
¾ Nhóm các màn hình Quản lý
Đây là nhóm các màn hình chịu sự quản lý của quản trị viên. Các thành viên bình thường và khách không thể truy cập đến trang này.
Màn hình này gồm Top menu và menu Admin.
1. Quản lý bài học
2. Quản lý thành viên
3. Quản lý diễn đàn
Website hỗ trợ học và thi TOEFL - GVHD: Nguyễn Thị Diễm Tiên