Xây dựng trang web hỗ trợ quá trình dạy và học học phần tin học chuyên ngành sư phạm toán

1.1.1 Tình hình trong nước Nhiều đề tài ở các nội dung gần tương tự, nhưng chủ yếu dừng ở dạng cáckhóa học hoặc hỗ trợ việc học và dạy các nội dung ở bậc phổ thông như “Thiết kếtrang Web

TRƯỜNG ĐẠI HỌC AN GIANG

KHOA SƯ PHẠM

XÂY DỰNG TRANG WEB HỖ TRỢ QUÁ TRÌNH DẠY VÀ HỌC HỌC PHẦN TIN HỌC CHUYÊN NGÀNH SƯ PHẠM TOÁN

PHẠM VĂN BẢN

AN GIANG, 05 - 2017

TRƯỜNG ĐẠI HỌC AN GIANG

KHOA SƯ PHẠM

XÂY DỰNG TRANG WEB HỖ TRỢ QUÁ TRÌNH DẠY VÀ HỌC HỌC PHẦN TIN HỌC CHUYÊN NGÀNH

SƯ PHẠM TOÁN

PHẠM VĂN BẢN

AN GIANG, 05 - 2017

Đề tài nghiên cứu khoa học “Xây dựng trang web hỗ trợ quá trình dạy vàhọc học phần Tin học chuyên ngành Sư phạm Toán”, do tác giả Phạm Văn Bản,công tác tại Khoa Sư phạm thực hiện Tác giả đã báo cáo kết quả nghiên cứu vàđược Hội đồng Khoa học và Đào tạo Trường Đại học An Giang thông qua ngày11/04/2017.

Thư ký

Chủ tịch Hội đồng

Từ khóa: dạy và học, Sư phạm Toán học, Tin học chuyên ngành, website

Appling information and communication technologies in teaching and ing is bringing many utilities for teacher and learner The main purpose of thisresearch is researching and building a website that has many suitable features,support teaching and learning "Computer science for Mathematic" course Re-sults of this research suggest a method for using modern web designing tools

learn-as PHP, MySQL, HTML, JavaScript, to build a learning website It is hopedthat this research will be a useful document for lecturers who are teaching atuniversities

Key words: Computer science for Special Purposes, Mathematical Pedagogy,teaching and learning, website

LỜI CAM KẾT

Tôi xin cam đoan đây là công trình nghiên cứu của riêng tôi Các số liệu trongcông trình nghiên cứu có xuất xứ rõ ràng Những kết luận mới về khoa học củacông trình nghiên cứu này chưa được công bố trong bất kỳ công trình nào khác

Long Xuyên, ngày 11 tháng 05 năm 2017

Người thực hiện

Phạm Văn Bản

MỤC LỤC

Chương 1 Giới thiệu 1

1.1 Tính cần thiết của đề tài 1

1.1.1 Tình hình trong nước 1

1.1.2 Tình hình ngoài nước 1

1.2 Mục tiêu nghiên cứu 2

1.3 Đối tượng nghiên cứu 2

1.4 Nội dung nghiên cứu 2

1.5 Những đóng góp của đề tài 2

Chương 2 Xây dựng website 3

2.1 Những công cụ để thiết kế web 3

2.1.1 HTML và PHP 3

2.1.2 MySQL 5

2.1.3 CSS 5

2.1.4 JavaScript 7

2.2 Cấu trúc tập tin thư mục của website 7

2.2.1 Thư mục gốc 7

2.2.2 Thư mục admin 8

2.2.3 Thư mục assets 8

2.2.4 Thư mục includes 9

2.2.5 Thư mục modules 9

2.2.6 Thư mục themes 9

2.3 Sơ đồ cấu trúc chức năng 9

2.4 Sơ đồ Use-case 10

2.5 Cơ sở dữ liệu của website 10

2.5.1 Bảng events 10

2.5.2 Bảng tblconfigs 11

2.5.3 Bảng tblcontact 11

2.5.4 Bảng tblcourses 11

2.5.5 Bảng tblevents 11

2.5.6 Bảng tblmarks 12

2.5.7 Bảng tblnews 13

2.5.8 Bảng tblstdnote 13

2.5.9 Bảng tblusers 13

2.5.10 Bảng tblvideos 14

2.6 Cài đặt trang web 14

2.6.1 Hệ thống máy chủ 14

2.6.2 Máy khách 15

2.6.3 Các bước cài đặt 15

Chương 3 Giao diện và các tính năng dành cho người quản trị 16

3.1 Đăng nhập quản trị 16

3.2 Các thành phần trong giao diện quản trị 17

3.3 Thông tin 17

3.4 Module quản lý nội dung học phần 17

3.4.1 Nhập và sửa giới thiệu học phần 18

3.4.2 Nhập và sửa kế hoạch giảng dạy 18

3.4.3 Nhập và sửa chính sách học phần 19

3.4.4 Nhập và sửa cách kiểm tra đánh giá 19

3.4.5 Nhập và sửa danh mục tài liệu tham khảo 19

3.4.6 Nhập và sửa nội dung học phần 20

3.4.7 Nhập và sửa các bài tập thực hành và bài tập nhóm 20

3.5 Module quản lý thông báo 21

3.5.1 Xem các thông báo đã đăng 22

3.5.2 Sửa các thông báo đã đăng 22

3.5.3 Xóa các thông báo đã đăng 23

3.5.4 Thêm thông báo mới 23

3.6 Module quản lý người dùng 23

3.6.1 Xem danh sách người dùng 24

3.6.2 Chỉnh sửa thông tin người dùng 24

3.6.3 Đổi mật khẩu người dùng 24

3.6.4 Xóa người dùng 25

3.6.5 Thêm người dùng mới 25

3.7 Module quản lý video 26

3.7.1 Xem danh sách các video đã đăng 26

3.7.2 Chỉnh sửa các video đã đăng 26

3.7.3 Xóa video đã đăng 27

3.7.4 Thêm mới video 28

3.8 Module quản lý điểm 28

3.8.1 Bảng điểm chi tiết 28

3.8.2 Nhập điểm thảo luận trên lớp 29

3.8.3 Nhập điểm phiếu học tập 29

3.8.4 Nhập điểm bài thực hành ở nhà 29

3.8.5 Nhập điểm bài thực hành trên lớp 30

3.8.6 Nhập điểm bài tập nhóm 30

3.8.7 Nhập điểm bài kiểm tra cuối kỳ 30

3.9 Module quản lý phiếu học tập 31

3.10 Module quản lý các liên hệ 32

3.11 Module quản lý lịch làm việc 32

3.12 Module quản lý sự kiện 34

3.12.1 Xem danh sách các sự kiện 34

3.12.2 Chỉnh sửa các sự kiện 34

3.12.3 Xóa các sự kiện 34

3.12.4 Thêm mới sự kiện 34

Chương 4 Giao diện và các tính năng dành cho người dùng 36

4.1 Các thành phần trong giao diện người dùng 36

4.2 Tham gia lớp học 37

4.2.1 Thông báo học vụ 37

4.2.2 Thông tin học phần 38

4.2.3 Nội dung học phần 39

4.2.4 Các bài thực hành 39

4.2.5 Video hướng dẫn thực hành 41

4.3 Thử nghiệm các phần mềm 41

4.3.1 Vẽ hình trực tuyến 42

4.3.2 Biên dịch LATEX trực tuyến 42

4.4 Xem và sửa các thông tin cá nhân 42

4.4.1 Xem thông tin cá nhân 43

4.4.2 Đổi thông tin cá nhân 43

4.4.3 Đổi mật khẩu đăng nhập 43

4.4.4 Các tính năng liên quan 44

4.5 Gửi và xem phiếu học tập 45

4.5.1 Gửi phiếu học tập 46

4.5.2 Xem phiếu học tập đã gửi 47

4.6 Xem lịch làm việc 47

4.7 Gửi ý kiến 48

Kết luận 50

Tài liệu tham khảo 52

DANH SÁCH HÌNH VẼ

2.1 Sơ đồ yêu cầu và nhận thông tin với HTML 3

2.2 Sơ đồ yêu cầu và nhận thông tin với PHP 4

2.3 Sơ đồ cấu trúc các tập tin và thư mục 8

2.4 Sơ đồ cấu trúc chức năng của website 9

2.5 Sơ đồ Use Case của website 10

3.1 Giao diện đăng nhập quản trị 16

3.2 Sơ đồ quá trình đăng nhập 16

3.3 Giao diện trang quản trị 17

3.4 Các thông tin cơ bản của website 18

3.5 Nhập thông tin giới thiệu học phần 18

3.6 Nhập kế hoạch giảng dạy học phần 19

3.7 Nhập chính sách và quy định học phần 19

3.8 Nhập kế hoạch và phương thức kiểm tra, đánh giá 20

3.9 Nhập danh mục tài liệu tham khảo 20

3.10 Nhập các tập tin nội dung học phần 21

3.11 Nhập các tập tin bài thực hành tại nhà 21

3.12 Nhập các bài tập thực hành tại lớp 21

3.13 Nhập các bài tập nhóm và phân công nhóm 22

3.14 Danh sách các thông báo đã đăng 22

3.15 Giao diện chỉnh sửa thông báo 23

3.16 Xác nhận xóa thông báo 23

3.17 Giao diện chức năng thêm thông báo mới 24

3.18 Giao diện danh sách người dùng 24

3.19 Giao diện chỉnh sửa thông tin người dùng 25

3.20 Giao diện đổi mật khẩu người dùng 25

3.21 Giao diện xác nhận xóa người dùng 26

3.22 Giao diện thêm người dùng mới 26

3.23 Danh sách video đã đăng 27

3.24 Giao diện chỉnh sửa video đã đăng 27

3.25 Xác nhận xóa video 27

3.26 Giao diện thêm mới video 28

3.27 Bảng điểm chi tiết 28

3.28 Nhập điểm thảo luận trên lớp 29

3.29 Nhập điểm phiếu học tập 29

3.30 Nhập điểm bài thực hành ở nhà 30

3.31 Nhập điểm bài thực hành tại lớp 30

3.32 Nhập điểm bài tập nhóm 31

3.33 Nhập điểm bài kiểm tra cuối kỳ 31

3.34 Xem phiếu học tập theo tuần 31

3.35 Xem chi tiết phiếu học tập của sinh viên theo tuần 32

3.36 Xem phiếu học tập theo sinh viên 32

3.37 Danh sách các liên hệ đã gửi đến 33

3.38 Giao diện quản lý lịch làm việc 33

3.39 Thêm, bớt hoặc sửa một sự kiện 33

3.40 Danh sách các sự kiện 34

3.41 Giao diện chỉnh sửa sự kiện 35

3.42 Xác nhận xóa một sự kiện 35

3.43 Giao diện thêm mới một sự kiện 35

4.1 Giao diện người dùng 36

4.2 Khu vực thành viên sau khi đăng nhập 37

4.3 Khu vực thành viên khi chưa đăng nhập 37

4.4 Thông báo học vụ 38

4.5 Danh sách các thông báo đã đăng 38

4.6 Trang thông tin học phần 39

4.7 Nội dung của học phần 39

4.8 Bài tập thực hành ở nhà 40

4.9 Bài thực hành trên lớp 40

4.10 Bài thực hành nhóm 40

4.11 Danh sách video theo mỗi chương 41

4.12 Xem nội dung video 41

4.13 Tính năng vẽ hình hình học trực tuyến 42

4.14 Tính năng biên soạn và biên dịch LATEX trực tuyến 42

4.15 Trang thông tin cá nhân người dùng 43

4.16 Trang thay đổi thông tin người dùng 43

4.17 Trang đổi mật khẩu người dùng 44

4.18 Quy trình kiểm tra và cập nhật mật khẩu mới 44

4.19 Bảng điểm chi tiết của sinh viên 45

4.20 Liên kết đăng nhập quản trị 45

4.21 Trang nhập phiếu học tập 46

4.22 Kiểm tra và lưu thông tin phiếu học tập 46

4.23 Xem phiếu học tập đã gửi 47

4.24 Xem lịch làm việc theo tuần (mặc định) 47

4.25 Xem lịch làm việc theo tháng 48

4.26 Xem lịch làm việc theo danh sách 48

4.27 Xem lịch làm việc ở các thời điểm khác 49

4.28 Biểu mẫu liên hệ khi chưa đăng nhập 49

4.29 Biểu mẫu liên hệ khi đã đăng nhập 49

DANH SÁCH BẢNG

2.1 Ví dụ cách sử dụng XTemplate 5

2.2 Cấu trúc bảng events 10

2.3 Cấu trúc bảng tblconfigs 11

2.4 Cấu trúc bảng tblcontact 11

2.5 Cấu trúc bảng tblcourses 11

2.6 Cấu trúc bảng tblevents 12

2.7 Cấu trúc bảng tblmarks 12

2.8 Cấu trúc bảng tblnews 13

2.9 Cấu trúc bảng tblstdnote 13

2.10 Cấu trúc bảng tblusers 14

2.11 Cấu trúc bảng tblvideos 14

CHƯƠNG 1.

GIỚI THIỆU

1.1 TÍNH CẦN THIẾT CỦA ĐỀ TÀI

Trong học chế tín chỉ, việc tự học của sinh viên là rất quan trọng Do vậy,giảng viên cần tạo ra các công cụ phù hợp để hỗ trợ cho việc tự học của sinh viên

và có khả năng quản lý quá trình này để có những điều chỉnh cần thiết

Đối với học phần Tin học chuyên ngành - SP Toán, sinh viên khi học đòi hỏiphải nắm được nhiều kỹ năng quan trọng như sử dụng các phần mềm, vận dụngcác phần mềm vào các công việc cụ thể như vận dụng các phần mềm để hỗ trợtiếp thu các kiến thức Toán bậc Đại học, vận dụng các phần mềm vào việc giảngdạy Toán học ở bậc phổ thông, Nếu chỉ tìm hiểu được trong quá trình học tậpmột học phần thì người học sẽ không đủ kiến thức và kỹ năng cần thiết Do vậy,việc có một bộ công cụ phù hợp như một cẩm nang sẽ giúp sinh viên có thể truycập để tìm hiểu bất cứ lúc nào là điều cần thiết

1.1.1 Tình hình trong nước

Nhiều đề tài ở các nội dung gần tương tự, nhưng chủ yếu dừng ở dạng cáckhóa học hoặc hỗ trợ việc học và dạy các nội dung ở bậc phổ thông như “Thiết kếtrang Web sổ tay toán học hỗ trợ học tập cho học sinh lớp 10”, “Thiết kế website

hỗ trợ dạy học hai chương “từ trường” và “cảm ứng điện từ” lớp 11 (cơ bản) nhằmnâng cao tính tích cực, tự lực và sáng tạo cho học sinh”, “Thiết kế và sử dụngwebsite dạy học vật lý trung học phổ thông”,

Có một số đề tài nghiên cứu, luận văn, luận án trình bày phương pháp thiết

kế một website để dạy học các nội dung ở bậc Đại học Tuy nhiên, các websitenày hầu hết là cung cấp các kiến thức, thư viện học liệu để người học chủ độngtìm kiếm và học tập, mà thiếu đi các tính năng kiểm soát quá trình tự học đó.Trường có trang Lớp học ảo nhưng các tính năng quản lý còn thiếu như tổchức học trực tuyến, nộp các loại bài tập khác nhau, quản lý các hình thức đánhgiá, không đáp ứng yêu cầu giảng dạy cho nhiều học phần khác nhau

1.1.2 Tình hình ngoài nước

Có nhiều công cụ phục vụ cho việc quản lý các khóa học, được sử dụng ởtầm vĩ mô dành cho một khoa hoặc trường như Moodle, Edmodo, ConnectEDU,BlackBoard, Các hệ thống này khá đồ sộ, với nhiều tính năng khác nhau, việc

sử dụng không đơn giản cho những người mới bắt đầu nên không phù hợp để ápdụng cho lớp học phần

Với tình hình đó, việc xây dựng một website để hỗ trợ cho quá trình dạy vàhọc, đặc biệt là việc tự học học phần "Tin học chuyên ngành - Sư phạm Toán"

là một điều cần thiết, giúp nâng cao chất lượng học tập ở học phần này

1.2 MỤC TIÊU NGHIÊN CỨU

Xây dựng một website hỗ trợ cho quá trình dạy và học học phần Tin họcchuyên ngành - Sư phạm Toán trên nền tảng PHP, MySQL và CSS

1.3 ĐỐI TƯỢNG NGHIÊN CỨU

Một website trên cơ sở PHP, MySQL, CSS làm công cụ hỗ trợ việc dạy vàhọc học phần Tin học chuyên ngành - Sư phạm Toán của sinh viên và giúp sinhviên quản lý quá trình tự học đó

1.4 NỘI DUNG NGHIÊN CỨU

Xây dựng tài liệu giảng dạy học phần Tin học chuyên ngành - Sư phạm Toán,bao gồm 5 chương theo đề cương chi tiết học phần cùng các tài liệu khác đi cùngnhư: đề cương chi tiết, kế hoạch học tập, bộ câu hỏi hướng dẫn tự nghiên cứu, .Xây dựng các video hướng dẫn sử dụng các phần mềm và vận dụng các phầnmềm để giải quyết các yêu cầu cụ thể trong quá trình học tập và giảng dạy.Xây dựng website với các tính năng phù hợp để hướng dẫn, theo dõi, quản lýquá trình tự học của sinh viên

1.5 NHỮNG ĐÓNG GÓP CỦA ĐỀ TÀI

Sau khi hoàn thành, đề tài tạo ra một công cụ trực tuyến để hỗ trợ cho quátrình dạy và học của học phần Tin học chuyên ngành - Sư phạm Toán, giúp sinhviên có thể tự học và kiểm soát việc tự học tốt hơn

Đề tài cũng cung cấp một cách tiếp cận, sử dụng công nghệ thông tin vàtruyền thông vào xây dựng, thiết lập các công cụ để hỗ trợ cho việc giảng dạy vàhọc tập các học phần ở bậc Đại học, góp phần nâng cao hiệu quả của quá trìnhđào tạo

HTML không phải một ngôn ngữ lập trình, mà là một ngôn ngữ trình bày.Thông qua các thẻ (tag), HTML cho biết mỗi đối tượng trong văn bản có vai trò

ra sao Nói khác hơn, HTML tập trung mô tả cấu trúc của toàn bộ văn bản hơn

là mô tả dạng thể hiện của các đối tượng Khi các trình duyệt đọc một tập tinHTML, trình duyệt sẽ quyết định cách thức trình bày các đối tượng dựa trên vaitrò của nó

Ngoài ra, HTML cũng cung cấp một số thẻ liên quan đến cách thức trình bàynhư in đậm hay in nghiêng Các thuộc tính (attribute) của các thẻ cũng góp phầnquy định các thức trình bày của đối tượng do thẻ đó tác động

Quy trình hoạt động của máy chủ với trang web HTML: Người dùng gửi yêucầu về một tập tin HTML đến máy chủ, máy chủ sẽ gửi phản hồi là toàn bộ nộidung của tập tin HTML này đến máy khách, trình duyệt của máy khách sẽ xử

lý nội dung nhận được và hiển thị thành trang web (hình 2.1)

Hình 2.1: Sơ đồ yêu cầu và nhận thông tin với HTMLNhư vậy, với trang web HTML, máy chủ chỉ phản hồi thông tin là toàn bộtập tin HTML được yêu cầu, không xử lý thông tin trước đó Việc hiển thị sẽ dotrình duyệt ở máy khách thực hiện Do vậy, trang web HTML không cá nhân hóanội dung trình bày (cùng một trang web, nhưng người dùng khác nhau sẽ đọc

được các nội dung khác nhau) nên chỉ phù hợp với các trang web tĩnh, ít thayđổi như các trang giới thiệu.

Để trang web linh động hơn trong việc trình bày nội dung, người ta cần mộtkịch bản xử lý ở máy chủ trước khi gửi phản hồi về máy khách Có nhiều ngônngữ kịch bản này như Java, ASP, PHP,

2.1.1.2 PHP

PHP là tên viết tắt của "Personal Home Page" hay "PHP Hypertext cessor", là một kịch bản xử lý thông tin ở máy chủ trước khi gửi phản hồi về máykhách

Prepro-Hình 2.2: Sơ đồ yêu cầu và nhận thông tin với PHP

Quy trình hoạt động của máy chủ với trang web PHP: Người dùng gửi yêucầu một tập tin PHP (page.php), trình xử lý PHP trên máy chủ sẽ xử lý tập tinPHP này, chuyển thành tập tin HTML (page.html) và gửi về máy khách để hiểnthị (hình 2.2)

Bằng việc xử lý thông tin trước khi gửi về máy khách, PHP đã làm cho nộidung trên trang web phong phú hơn, phù hợp với từng đối tượng người dùngkhác nhau, nên rất phù hợp để xây dựng các trang web động

Với những thế mạnh của mình như: miễn phí, nguồn mở, bảo mật, kết nối cơ

sở dữ liệu dễ dàng, nhúng vào các tập tin HTML dễ dàng, PHP là một kịch bảnmáy chủ web phổ biến trên thế giới Rất nhiều hệ thống đồ sộ, phục vụ cho việcxuất bản thông tin lên web như Wordpress, Joomla, Drupal, phpBB, phpNuke,NukeViet, đều được xây dựng trên nền tảng PHP

2.1.1.3 Thư viện XTemplate

Với việc dễ dàng nhúng mã lệnh PHP vào trang web HTML, ta có thể đưa cảviệc xử lý và trình bày nội dung vào cùng một tập tin PHP

Tuy nhiên, với cách làm này, việc cập nhật, nâng cấp trang web như thay đổithuật toán xử lý nội dung, thay đổi cách thức hiển thị (giao diện trang web), sẽ

trở lên khó khăn hơn khi cả hai việc đó nằm xen kẽ nhau trong cùng một tập tin.Thư viện XTemplate là một trong những thư viện PHP cho phép tách rời việc

xử lý nội dung và trình bày nội dung thành những tập tin riêng biệt, giúp choviệc sửa chửa, cải tiến, nâng cấp một trong hai hoặc cả hai đều dễ dàng và thuậntiện hơn

Ví dụ mẫu về cách sử dụng XTemplate

Bảng 2.1: Ví dụ cách sử dụng XTemplate

Tập tin PHP: page.php Tập tin Template: page.tplrequire_once ’xtemplate.class.php’;

$xtpl = new XTemplate( ’page.tpl’, ’temp’ );

$string = ’Hello world!’;

$xtpl->assign( ’CONTENT’, $string );

Ngoài ra, PHP cũng cung cấp nhiều câu lệnh giúp cho việc kết nối, truy xuất

dữ liệu, cập nhật dữ liệu từ MySQL dễ dàng hơn

2.1.3 CSS

Để trình bày các tài liệu HTML, ngoài việc dùng các thẻ và thuộc tính thẻ,người ta thường dùng CSS để thực hiện việc này

2.1.3.1 CSS

CSS là viết tắt của Cascading Style Sheets (bảng kiểu xếp tầng), là một vănbản mô tả cách thức trình bày các tài liệu viết bằng HTML

Trong thiết kế web, CSS mang lại các tác dụng sau:

• Định nghĩa cách thức trình bày, hiển thị của các đối tượng trong văn bảnHTML mà không cần đưa các định dạng này vào mã HTML Điều này giúpcho mã HTML của một trang web gọn gàng và dễ theo dõi, chỉnh sửa hơn

• Áp dụng được trên nhiều trang web cùng lúc, giúp cho việc trình bày một

hệ thống web được thống nhất

Áp dụng CSS vào một trang web có nhiều cách:

Inline CSS Đưa các khai báo của CSS vào trực tiếp thẻ HTML thông qua thuộctính style

Ví dụ: <span style="font-weight: bold; text-decoration: underline; color:

#FF0000; "> Đoạn text cần in đậm, gạch chân, màu đỏ </span>

Tuy nhiên, nên hạn chế cách dùng này, vì nó sẽ làm cho việc định dạng trởnên chi tiết, khó kiểm soát và làm cho văn bản trình bày thiếu sự thốngnhất

Internal CSS Đưa các khai báo CSS vào phần mở đầu của trang web Khi đó,các đối tượng thỏa điều kiện quy định sẽ được định dạng theo khai báo CSSđó

Ví dụ: <style type="text/css"> body {font-family:verdana; color:#0000FF;}

2.1.3.2 Bootstrap Framework

Bootstrap Framework là một thư viện các khai báo CSS có sẵn (và được cậpnhật thường xuyên) để giúp các nhà phát triển web dễ dàng xây dựng ứng dụngweb cho mình

Đặc biệt, Bootstrap cung cấp một hệ thống lưới (grid) giúp cho việc bố cụctrang web được thuận tiện Ngoài ra, Bootstrap cũng thêm vào các định dạng

giúp cho trang web được hiển thị khác nhau trên các thiết bị có độ phân giảimàn hình khác nhau Điều này giúp cho việc trải nghiệm trang web được thuậntiện hơn.

Ưu điểm: Truy xuất được vào môi trường máy khách, nên có thể thực hiện cáchành vi dựa trên các thông tin thu nhận được đó Chẳng hạn JavaScript

có thể xác định vị trí của con trỏ chuột, kích thước cửa sổ, kích thước mànhình, để thực hiện các hiệu ứng hình ảnh Điều này PHP không thực hiệnđược

Hạn chế: Do không thực thi ở máy chủ nên không truy xuất được thông tin từmáy chủ như cơ sở dữ liệu, hệ thống tập tin, trong khi PHP lại có thểthực hiện được

Ngoài ra, do mã JavaScript được thực thi ở máy khách nên nếu người dùng

vô hiệu hóa tính năng chạy JavaScript hoặc trình duyệt không chạy đượcJavaScript thì những kịch bản được soạn sẽ không được thực thi

2.1.4.2 JQuery

JQuery là một thư viện các hàm JavaScript, giúp cho việc viết và xử lý trangweb bằng JavaScript trở nên dễ dàng và thuận tiện hơn Các hàm trong JQueryrất đa dạng, từ xử lý dữ liệu trên máy khách đến giao tiếp và nhận dữ liệu từ máychủ Các hàm này giúp cho việc hiển thị thông tin trên trang web uyển chuyểnhơn và tăng tốc độ xử lý thông tin của trang web

2.2 CẤU TRÚC TẬP TIN THƯ MỤC CỦA WEBSITE

Website có cấu trúc tập tin và thư mục như trong hình 2.3

2.2.1 Thư mục gốc

Chứa các tập tin PHP được thực thi khi người dùng bắt đầu truy cập vàtrang web và tất cả các thư mục thành phần Trong thư mục gốc có các tập tin

Hình 2.3: Sơ đồ cấu trúc các tập tin và thư mục

với chức năng như sau:

index.php Là tập tin khởi động hệ thống, gọi tất cả các tài nguyên mà trangweb cần sử dụng, xác định module, xác định giao diện chính, xác định quyềntruy cập các module,

favicon.ico Là tập tin icon (biểu tượng) của website

2.2.2 Thư mục admin

Chứa các tập tin PHP và thư mục modules, trong đó:

Tập tin index.php Khởi động khu vực quản trị website, xác định quyền truycập khu vực, gọi các tính năng quản trị các module của website

Các tập tin PHP khác Chứa các thông tin dùng chung cho khu vực quản trịnhư các biến dùng chung, các hàm dùng chung,

Thư mục modules Chứa các chức năng quản lý các module của website, cáctập tin PHP chức năng được xếp vào từng thư mục con theo module

2.2.3 Thư mục assets

Chứa các tập tin tài nguyên dùng chung cho trang web như hình ảnh, CSS,icon, JavaScript, JQuery, trình soạn thảo Trong thư mục assets có các thư mụccon sau:

ckeditor Chứa trình soạn thảo văn bản Ckeditor, một trình soạn thảo HTMLtheo kiểu trực quan

css Chứa các tập tin CSS cho website

fonts Chứa các tập tin font FontAwesome

images Chứa các hình ảnh cơ bản, dùng cho toàn bộ website

js Chứa các tập tin JavaScript và JQuery dùng cho toàn bộ website

pdfjs Chứa thư viện JavaScript dùng để hiển thị các tập tin PDF trên website.schedule Chứa các thư viện JavaScript để tạo và hiển thị lịch làm việc.

2.2.4 Thư mục includes

Chứa các tài nguyên dùng chung cho toàn bộ website như phần nhân của hệthống, các hàm, biến, hằng dùng chung, các dữ liệu ban đầu của website, Cácthư viện PHP của hệ thống được lưu ở đây

2.2.5 Thư mục modules

Chứa các tập tin PHP xử lý nội dung theo từng module của trang web Cáctập tin chức năng của mỗi module được sắp xếp trong một thư mục có tên là tênmodule, tên tập tin được đặt theo tên chức năng

2.2.6 Thư mục themes

Chứa các tập tin TPL xử lý giao diện của trang web Hiện tại có hai giao diệncho trang web là giao diện cho khu vực quản trị và giao diện cho khu vực ngườidùng

2.3 SƠ ĐỒ CẤU TRÚC CHỨC NĂNG

Sơ đồ cấu trúc chức năng của website (hình 2.4)

Hình 2.4: Sơ đồ cấu trúc chức năng của website

2.4 SƠ ĐỒ USE-CASE

Sơ đồ Use Case tổng thể của website (hình 2.5)

Hình 2.5: Sơ đồ Use Case của website

2.5 CƠ SỞ DỮ LIỆU CỦA WEBSITE

2.5.1 Bảng events

Chứa các thông tin về các sự kiện được xử lý bởi module Lịch làm việc

Bảng 2.2: Cấu trúc bảng events

STT Tên trường Kiểu dữ liệu Ghi chú

1 event_id int(6) Khóa chính

STT Tên trường Kiểu dữ liệu Ghi chú

1 ctid int(10) Khóa chính

STT Tên trường Kiểu dữ liệu Ghi chú

1 newsid int(10) Khóa chính

STT Tên trường Kiểu dữ liệu Ghi chú

1 snid int(10) Khóa chính

Bảng 2.10: Cấu trúc bảng tblusers

STT Tên trường Kiểu dữ liệu Ghi chú

1 iduser int(4) Khóa chính

STT Tên trường Kiểu dữ liệu Ghi chú

1 videoid int(5) Khóa chính

• Hệ điều hành: Linux hoặc Windows

• PHP: Phiên bản 5.3 trở lên, và phải hỗ trợ session

• MySQL: Phiên bản 5.3 trở lên

2.6.2 Máy khách

Sau khi xử lý nội dung, máy khách sẽ nhận được các trang web HTML vớiCSS và JavaScript, đây là các định dạng chuẩn mà đa số các trình duyệt đều hỗtrợ Nên để có thể sử dụng website một cách tốt nhất, máy cần cài phiên bảnmới nhất của một trong các trình duyệt như FireFox, Internet Explorer 9, GoogleChrome,

Ngoài ra, do các bài giảng được biên tập thành tập tin PDF nên máy kháchcần cài ít nhất một chương trình đọc tập tin PDF như Adobe Reader, FoxitReader,

2.6.3 Các bước cài đặt

Bước 1: Tạo một cơ sở dữ liệu trên máy chủ, sau đó nhập dữ liệu mẫu vào cơ

sở dữ liệu vừa tạo

Bước 2: Mở tập tin config.php trong thư mục includes, sửa lại các thông kết nối

cơ sở dữ liệu theo các thông tin từ máy chủ

Bước 3: Tải toàn bộ mã nguồn của website lên máy chủ

Bước 4: Truy cập và sử dụng

• Tài khoản quản trị: admin, mật khẩu: 123456

• Tài khoản người dùng là sinh viên: DTO151147, mật khẩu: dto151147

3.1 ĐĂNG NHẬP QUẢN TRỊ

Để quản lý các module của trang web, quản trị viên cần đăng nhập và khu vựcquản trị tại địa chỉ http://pvban.esy.es/admin (hình 3.1) Tại đây, người dùngcần nhập tên đăng nhập và mật khẩu dành cho quản trị viên

Hình 3.1: Giao diện đăng nhập quản trị

Thông tin nhập được kiểm tra với thông tin quản trị viên lưu trong cơ sở dữliệu Nếu nhập sai thì sẽ không đăng nhập được Nếu nhập đúng, các biến session

sẽ được tạo ra để lưu phiên đăng nhập và các thông tin của quản trị viên (hình3.2)

Hình 3.2: Sơ đồ quá trình đăng nhập

Hình 3.3: Giao diện trang quản trị

3.2 CÁC THÀNH PHẦN TRONG GIAO DIỆN QUẢN TRỊ

Các thành phần trong giao diện quản trị (hình 3.3):

1 Banner và menu trên Có các liên kết đến trang chính của website và cácliên kết để truy cập vào các thành phần quan trọng của hệ thống nhưmodule quản lý nội dung học phần, các tùy chọn cho hệ thống,

2 Thanh điều hướng Chứa các liên đến các module của website

3 Khu vực xử lý thông tin Là khu vực hiển thị và xử lý các thông tin từ cácmodule

3.3 THÔNG TIN

Là module cung cấp các số liệu cơ bản của website như tên và phiên bản củaphần mềm, các thông báo đã đăng, số lượng người dùng, giúp cho quản trị viênnhanh chóng nắm được các thông tin này (hình 3.4)

3.4 MODULE QUẢN LÝ NỘI DUNG HỌC PHẦN

Là module quản lý các nội dung liên quan đến học phần như giới thiệu họcphần, nội dung các chương, các bài tập thực hành, Các nội dung do modulenày quản lý được lưu trong bảng tblcourses và được truy xuất, cập nhật thôngqua các tính năng của module

Module này có các tính năng sau:

Hình 3.4: Các thông tin cơ bản của website

3.4.1 Nhập và sửa giới thiệu học phần

Quản trị viên nhập các thông tin giới thiệu học phần như các thông tin chung,mục tiêu, nội dung chính của học phần Sau đó bấm nút "Cập nhật" để lưu lạicác thông tin này Các thông tin này có thể định dạng bằng công cụ Ckeditor(hình 3.5)

Hình 3.5: Nhập thông tin giới thiệu học phần

3.4.2 Nhập và sửa kế hoạch giảng dạy

Quản trị viên nhập các thông tin về kế hoạch, trình tự giảng dạy các nội dungcủa học phần và bấm nút "Cập nhật" để lưu thông tin (hình 3.6)