Giao diện trang web

CHƯƠNG 3 XÂY DỰNG WEBSITE HỖ TRỢ DẠY HỌC MẦM NON . 41

3.1.1 Giao diện trang web

Tạo dao diện trang web với:

 Hình nền đẹp, màu sắc tươi trẻ

 Sử dụng PageMaster tạo những phần chung nhất để việc load trang được nhanh hơn

 Tạo table với nhiều hàng, cột để phân bố các biểu tượng ảnh, màu sắc được hợp lý

 Các nút nhấn có link liên kết được làm bằng flash, tạo chuyển động và âm thanh khi rê chuột vào, click …

 Sử dụng cookie kiểm tra và hiển thị tài khoản đăng nhập thích hợp Sau đây là ảnh minh hoạ

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình

Hình 3.1 : Giao diện trang web

Xây dựng website hỗ trợ học tập cho các trường mầm non 3.1.2 Các chức năng

 Đăng kí thành viên

 Vào giao diện trang đăng kí thành viên

 Kiểm tra xem các thông tin đã được điền đầy đủ chưa? Đúng chưa?

 Chưa đủ / không đúng : hiển thị thông báo lỗi, yêu cầu nhập lại

 Ngược lại : đưa các thông tin đăng kí vào Database

 Chuyển đến trang yêu cầu đăng nhập Hình ảnh minh hoạ

Hình 3.2 : Trang đăng kí thành viên

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình

 Đăng nhập

 Vào giao diện trang đăng nhập hệ thống

 Kiểm tra các thông tin đăng nhập (User, Password)

 Load từ database các thông tin User và Password để đối chiếu

 Trùng nhau :

 Lưu các thông tin vừa đăng nhập vào hệ thống cookie

 Load quyền hạn của User đăng nhập tương ứng

 Dựa và quyền hạn của User để chuyển đến trang tương ứng

 Không trùng nhau:

 Hiển thị thông báo đăng nhập sai

 Yêu cầu đăng nhập lại Hình ảnh minh hoạ

Hình 3.3 : Đăng nhập

Xây dựng website hỗ trợ học tập cho các trường mầm non

 Đăng xuất

 Click vào nút thoát trong phần hiển thị thông tin tài khoản đang đăng nhập

 Loại bỏ các thông tin tài khoản đang đăng nhập ra khỏi cookie

 Chuyển về trang chủ Hình ảnh minh hoạ

Hình 3.4 : Đăng xuất 1

Hình 3.5 : Đăng xuất 2

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình

 Điều chỉnh thông tin

 Vào giao diện trang web điều chỉnh thông tin

 Click nút “xem thông tin” để hiển thị các thông tin của tài khoản

 Load các thông tin của tài khoản từ database

 Gán cho các textbox … tương ứng

 Sẽ có các thông tin cố định không chỉnh sửa được và các thông tin bình thường cho phép chỉnh sửa

 Click nút “Hoàn thành” để tiến hành cập nhật thông tin cho tài khoản

 Kiểm tra các thông tin được phép chỉnh sửa

 Không đúng : hiển thị thông báo lỗi và yêu cầu nhập lại

 Đúng : làm tiếp bước tiếp theo

 Sử dụng câu lệnh UPDATE để tiến hành cập nhật các thông tin cho tài khoản vào database

Hình ảnh minh hoạ

Xây dựng website hỗ trợ học tập cho các trường mầm non Hình 3.6 : Điều chỉnh thông tin

 Quản lý tài khoản

 Chỉ có User có quyền hạn quản trị mới vào được trang này

 Sử dụng listbox để hiển trị các tài khoản

 Load các tên tài khoản từ database lưu vào một DataTable

 Duyệt DataTable từ Rows[0]  Rows[MAX]

 Mỗi lần duyệt Add một Item mang giá trị lấy từ Rows[i]

tương ứng

 Chọn tên tài khoản trong listbox – click vào nút “Xem thông tin” để hiển thị thông tin của tài khoản có tên tương ứng

 Load các thông tin của tài khoản từ database

 Hiển thị các thông tin này lên các textbox … tương ứng

 Sẽ có một số thông tin không cho phép chỉnh sửa

 Click vào nút “Sửa” để tiến hành cập nhật thông tin cho tài khoản có tên được lựa chọn

 Kiểm tra các thông tin có thể chỉnh sửa

 Đúng : tiến hành các thao tác sau

 Sai : hiển thị thông báo lỗi, yêu cầu nhập lại

 Sử dụng câu lệnh UPDATE để tiến hành cập nhật các thông tin cho tài khoản

 Click vào nút “Xoá” để tiến hành xoá tài khoản có tên được lựa chọn

 Sử dụng câu lệnh DELETE để xoá Row có tên tài khoản tương ứng có trong database

 Click vào nút “Thoát” để thoát khỏi giao diện quản lý tài khoản

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình Hình ảnh minh hoạ

Hình 3.7 : Quản lý tài khoản

 Quản lý các câu hỏi trắc nghiệm

 Vào giao diện trang quản lý câu hỏi trắc nghiệm

 Click vào nút “Thêm” để tiến hành tạo thêm câu hỏi trắc nghiệm

 Kiểm tra các thông tin điền vào

 Sai : hiển thị thông báo lỗi và yêu cầu nhập lại

 Đúng : thực hiện tiếp các thao tác sau

 Kiểm tra xem câu hỏi đã có trong database chưa

 Có rồi : hiển thị thông báo đã có câu hỏi này, yêu cầu nhập câu hỏi khác

 Chưa có : thực hiện tiếp các thao tác sau

 Sử dụng câu lệnh INSERT để đưa các thông tin của câu hỏi trắc nghiệm vào database

Xây dựng website hỗ trợ học tập cho các trường mầm non

 Click vào nút “Sửa” để tiến hành sửa câu hỏi trắc nghiệm

 Kiểm tra các thông tin điền vào

 Sai : hiển thị thông báo lỗi và yêu cầu nhập lại

 Đúng : thực hiện tiếp các thao tác sau

 Kiểm tra xem câu hỏi đã có trong database chưa

 Có rồi : hiển thị thông báo đã có câu hỏi này, yêu cầu nhập câu hỏi khác

 Chưa có : thực hiện tiếp các thao tác sau

 Sử dụng câu lệnh UPDATE để cập nhật các thông tin tương ứng nhập vào cho câu hỏi được lựa chọn

 Click vào nút “Xoá” để xoá câu hỏi trắc nghiệm

 Sử dụng câu lệnh DELETE để xoá Row chứa câu hỏi tương ứng có trong database

Hình ảnh minh hoạ

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình Hình 3.8 : Quản lý câu hỏi trắc nghiệm

 Chuyên mục bài học

 Click vào Button Flash “Góc Học Tập” để vào giao diện bài học

 Trang này load một file Flash khác chứa các Button để vào các trang chức năng khác của website

 Button “Học toán” : đưa ta vào giao diện học tập môn toán

 Button “Học văn” : đưa ta vào giao diện học tập môn văn

 Button “Thi toán” : đưa ta vào giao diện thi trắc nghiệm môn toán

 Button “Thi văn” : đưa ta vào giao diện thi trắc nghiệm môn văn Hình ảnh minh hoạ

Hình 3.9 : Bài học

Xây dựng website hỗ trợ học tập cho các trường mầm non

 Chuyên mục các bài học văn

 Một trang load file Flash chứa các nội dung liên quan đến bài học văn

 Vì là trang web hỗ trợ dạy học cho các bé tuổi mầm non nên nội dung các bài học văn chủ yếu là luyện cách đọc, cách phát âm cho bé

 File Flash : gồm các file dạy cách đánh vần bảng chữ cái, dạy các dấu thanh, các từ ghép và cách ghép chữ.

 Trên giao diện file Flash chứa nội dung bài dạy (từ, chữ, câu, dấu, hình ảnh .. )

 Tạo hiệu ứng khi đưa chuột lên các nội dung (rollOver)

 Có âm thanh phát ra khi click chuột vào nội dung bài học (relsease)

 Âm thanh : thu âm cách phát âm, cách đọc … Hình ảnh minh hoạ

Hình 3.10 : Bài học văn

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình

 Chuyên mục các bài học toán

 Một trang load file Flash chứa các nội dung liên quan đến bài học toán

 Vì là trang web hỗ trợ dạy học cho các bé tuổi mầm non nên nội dung các bài học văn chủ yếu là luyện cách đếm, cách phân biệt hình dạng các hình, cách làm một số tính đơn giản (cộng, trừ)

 File Flash : gồm các file dạy cách đếm số, phân biệt các hình, tập làm toán cộng trừ

 Trên giao diện file Flash chứa nội dung bài dạy (các số, các phép toán, hình ảnh .. )

 Tạo hiệu ứng khi đưa chuột lên các nội dung(rollOver)

 Có âm thanh phát ra khi click chuột vào nội dung bài học(relsease)

 Âm thanh : thu âm cách đọc, cách làm toán Hình ảnh minh hoạ

Hình 3.11 : Bài học toán

Xây dựng website hỗ trợ học tập cho các trường mầm non

 Chuyên mục thi trắc nghiệm

 Vào giao diện trang thi trắc nghiệm

 Sử dụng các RadioButton hiển thị số câu hỏi cần làm để trẻ lựa chọn

 Các biến chứa giá trị quan trong cho khai báo static

 Kiểm tra xem số lượng câu trắc nghiệm trẻ đã làm đủ chưa

 Đủ rồi : tính toán điểm, thống kê số câu làm đúng, thực hiện tiếp các chức năng sau

 Chưa đủ : load các câu hỏi trắc nghiệm khác có trong database

 Sử dụng câu lệnh SELECT TOP 1 colum FROM table ORDER BY newID() để lựa chọn ra một câu trắc nghiệm ngẫu nhiên có trong database

 Kiểm tra mã câu trắc nghiệm để tránh trường hợp các câu trắc nghiệm được lấy ra giống nhau

 Kiểm tra xem mã bài trắc nghiệm đã có trong database của tài khoản chưa

 Có rồi : nếu điểm số đạt được cao hơn điểm số cũ  sử dụng câu lệnh UPDATE để cập nhật điểm mới cho tài khoản với mã bài trắc nghiệm tương ứng

 Chưa có : Sử dụng câu lệnh INSERT để thêm vào database

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình Hình ảnh minh hoạ

Hình 3.12 : Trắc nghiệm 1

Hình 3.13 : Trắc nghiệm 2

Xây dựng website hỗ trợ học tập cho các trường mầm non

 Chuyên mục nghe nhạc

 Một file Flash trình diễn nhạc

 Sử dụng file XML để lưu danh sách các bài nhạc

 File XML

 Có trường chứa đường link liên kết đến bài nhạc

 Có trường chứa tựa đề bài nhạc tương ứng với đường link

 File Flash gồm 3 phần

 Phần đầu : một đoạn movie tween cho chạy lặp liên tục hiển thị như là các cột song nhảy múa theo âm nhạc

 Phần thân : chứa các công cụ play, stop, next, preview, sound là các công cụ chính để diều khiển chạy nhạc

 Phần cuối : chứa list các bài hát load từ file XML Hình ảnh minh hoạ

Hình 3.14 : Bé nghe nhạc

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình

 Chuyên mục chơi game

 Một trang load file Flash chứa các Button link đến các trang trò chơi

 Trang trò chơi : load file trò chơi làm bằng Flash

 Các file game Flash có thể tìm kiếm trên mạng Hình ảnh minh hoạ

Hình 3.15 : Trò chơi bầy cừu

Xây dựng website hỗ trợ học tập cho các trường mầm non

 Chuyên mục kho truyện

 Một trang load file Flash chứa các Button link đến các trang truyện đọc

 Trang truyện đọc : chứa file Flash (lật trang) có chức năng load các mẫu truyện tranh

 Một file XML chứa link các file ảnh truyện tranh

 File Flash (lật trang) đọc dữ liệu từ file XML rồi load hết các file ảnh tương ứng

 Các file ảnh được duyệt trên khung của file Flash (lật trang) Hình ảnh minh hoạ

Hình 3.16 : Truyện đọc

Báo cáo đồ án tốt nghiệp GVHD : Th.s Đoàn Duy Bình 3.2 Phát triển hệ thống