IV. Xây dựng website môn học
3.Lựa chọn module
Dựa trên những tính năng của môn học thì em đă lựa chọn những module có sẵn của DotNetNuKe và xây dựng module về trắc nghiệm khách quan.
3.1. Sử dụng module Text/HTML: Nó cung cấp một trình soạn thảo WYSIWYG để tạo ra một nội dung của chính chúng ta bằng HTML hoặc là văn bản thuần túy. Giao diện module tương tự như một trình biên tập document phổ biến và rất dễ làm.
Bảng 1: Cơ sở dữ liệu của module Text/HTML: thứ
tự tên trường kiểu
độ
dài bytes default nulls PK FK UQ comment
1
ModuleID int 10 4 no yes [dbo].[Modules]. ModuleID
2 DesktopSummary ntext (n/a) (n/a) yes 3 DesktopHtml ntext (n/a) (n/a) no 4 CreatedDate datetime 23 16 yes 5 CreatedByUser int 10 4 yes
Khi chúng ta thêm module Text/HTML vào trang thì chúng ta nhìn thấy giao diện của nó :
Hình 111Giao diện Module Text/HTMLP1
Các bước để soạn thảo văn bản(đơn giản): Module ban đầu chúng ta tạo ra không có nội dung. Nó chỉ hiển thị một Container trống, với Title và Action Buttons.
SVTH:Vũ Tất Thắng Lớp 48pm2 44
Hình 12PGiao diện Module Text/HTMLP2
Trên trang Edit Text/HTML chúng ta sẽ thấy rằng chúng ta (mặc định) đang sử dụng “Rich Text Editor” trong mẫu thiết kế. Nó sẽ cung cấp cho chúng ta một ý kiến tốt nhất để khi mà chúng ta hoàn thành thì nội dung sẽ như thế này.(WYSIWYG = “ What you see is what you get”).
Hình 131 Giao diện Module Text/HTMLP3
3.2. Sử dụng module liên kết: Module liên kết hiển thị danh sách của những đường siêu liên kết để đến được bất cứ trang nào, hình ảnh hoặc tập tin trên website chúng ta; hoặc là một tập tin, hình ảnh hoặc một trang nào đó ở website khác.
SVTH:Vũ Tất Thắng Lớp 48pm2 45
Bảng 2: Cơ sở dữ liệu của module links: thứ
tự Tên trường Kiểu
Độ
dài bytes default nulls PK FK UQ comment
1
ItemID int identity
10 4 no yes
2
ModuleID int 10 4 no [dbo].[Modules]. ModuleID
3 CreatedDate datetime 23 16 yes 4 Title nvarchar 100 200 yes 5 Url nvarchar 250 500 yes 6 ViewOrder int 10 4 yes 7 Description nvarchar 2000 4000 yes 8 CreatedByUser int 10 4 no
Khi chúng ta thêm module links vào trang thì chúng ta sẽ nhìn thấy giao diện của nó: (adsbygoogle = window.adsbygoogle || []).push({});
Hình 141 Giao diện Module LinksP1
Các bước để thêm một đường liên kết mới: Module của chúng ta tạo ra lúc ban đầu thì không có nội dung. Chỉ hiển thị một Container trống với Title và Action Buttons.
SVTH:Vũ Tất Thắng Lớp 48pm2 46
Hình 151 Giao diện Module LinksP2
Trên trang Edit Links chúng ta sẽ thấy vài vùng mà chúng ta cần phải điền vào như kiểm soát Link Type và hộp lựa chọn trên các module khác.
Hình 161 Giao diện Module LinksP3
Đặt con trỏ chuột vào vùng Title và nhập vào đó một nhóm từ ngắn cho đoạn văn bản liên kết của chúng ta. Giá trị của nó là sẽ hiện ra những đường liên kết thực.
Hình 171 Giao diện Module LinksP4
Chọn Link Type cho đường liên kết của chúng ta và hoàn thành những thông tin thích hợp. Chúng ta có thể chỉ định rõ đường liên kết đến website, trang nào đó hoặc là một tập tin ở trên website chúng ta (như là hình ảnh và tài liệu PDF).
Hình 181 Giao diện Module LinksP5 Chọn từ những lựa chọn sẳn có cho đường liên kết.
SVTH:Vũ Tất Thắng Lớp 48pm2 47
Hình 191 Giao diện Module LinksP6
Nếu như chúng ta chọn Tracking, chúng ta sẽ kiểm tra được đường liên kết đó được click vào bao nhiêu lần. Nếu như chúng ta chọn Logging chúng ta có thể đoán được ai là người click vào đuờng liên kết đó (nếu như người truy cập có đăng nhập vào). Và chúng ta chọn New Window, đường link của chúng ta sẽ làm cho một cửa sổ trình duyệt được mở ra cho đường link đó.
Chỉ rõ phần mô tả cho đường liên kết của chúng ta. Phần mô tả sẽ
Hình 201 Giao diện Module LinksP7
Bao gồm cả phần View Order cho phần sắp xếp các đường liên kết của chúng ta. Theo mặc định, chúng sẽ được sắp xếp như lúc mà chúng ta tạo ra chúng.
Hình 211 Giao diện Module LinksP8
Khi chúng ta đã làm xong, phải chắc rằng là chúng ta đã nhấp vào Update ở giữa trang để lưu lại những thay đổi của chúng ta. Chúng ta phải update module như thế nào để người truy cập vào website chúng ta sẽ nhìn thấy.
Hình 221 Giao diện Module LinksP9
Nhưng đó chỉ là mặc định ở bên ngoài cho module liên kết… thật ra nó chỉ là một đường siêu liên kết trên tiêu đề văn bản. Đó sẽ có vài hộp lựa chọn sẵn có.
SVTH:Vũ Tất Thắng Lớp 48pm2 48
Các bước để hiển thị hộp lựa chọn: Module liên kết có một vài Display Option là cái mà chúng ta có thể thay đổi vẻ ngoài của nó. Để minh họa rõ hơn thì những thiết lập sẽ thay đổi module của chúng ta sẽ xuất hiện, đây là ví dụ dùng một module đã được thêm vào một vài đường liên kết phụ.
Nhấp vào nút Settings (hoặc chọn Settings từ Module Action Menu).
Hoặc
Hình 231 Giao diện Module LinksP10
Trên trang Module Settings, di chuyển xuống Links Settings và nhấp vào nút để mở rông đoạn đó ra. Nó sẽ chị chúng ta những hộp lựa chọn sẵn có của module liên kết (những lựa chọn trong những phần khác của trang là những lựa chọn của module thông thường).
SVTH:Vũ Tất Thắng Lớp 48pm2 49
Hình 251 Giao diện Module LinksP12
Chọn Dropdown như là Control Type và sau đó nhấp vào Update ở giữa trang. Đây là thay đổi đường liên kết của chúng ta từ qua việc lựa chọn từ hộp rơi xuống và nút go (như minh họa bên dưới).
Hình 261 Giao diện Module LinksP13 (adsbygoogle = window.adsbygoogle || []).push({});
Chọn Horizontal như là List Display Format ( đây chỉ là một hiệu ứng cho module của chúng ta khi Control Type là List vì thế nó cũng thay đổi) và sau đó nhấp vào Update ở giữa trang. Đây là sự thay đổi đường liên kết để cho nó hiển thị ngang (như minh họa bên dưới).
Hình 271 Giao diện Module LinksP14
Chọn Yes cho phần Display Info Link và sau đó nhấp vào Update ở giữa trang. Đây là sự thay đổi cách hiển thị của phần mô tả của chúng ta. Phần mô tả bình thường hiển thị như là một “chú giải công cụ”. Một chú giải công cụ được hiển thi khi con chuột trỏ vào đường liên kết.
SVTH:Vũ Tất Thắng Lớp 48pm2 50
Hình 281 Giao diện Module LinksP15
Sự mô tả được hiển thị như là một sự lựa chọn với nhiều đường liên kết… là cái mà (khi nhấp vào) thì nó hiển thị sự mô tả ở trên trang.
[Display Link Info = Yes]
Hình 291 Giao diện Module LinksP16
3.3. Sử dụng module thông báo(Announcement): Module thông báo đưa ra một danh sách các đoạn thông báo đơn giản bao gồm tiêu đề và những hướng dẫn ngắn gọn. Nó rất thuận tiện để những người truy cập website nhận biết được các mục quan tâm khi có liên kết những thông tin thêm vào.
SVTH:Vũ Tất Thắng Lớp 48pm2 51
Bảng 3: Cơ sở dữ liệu của module Announcement là: thứ
tự tên trường kiểu
độ
dài nulls
1 ItemID int 4 no
2 ModuleID int 4 no
3 CreatedDate datetime 8 yes 4 Title nvarchar 150 yes 5 URL nvarchar 250 yes 6 ExpireDate datetime 8 yes 7 Description ntext 16 yes 8 ViewOrder int 4 yes 9 CreatedByUser int 4 no 10 PublishDate datetime 8 yes 11 ImageSource nvarchar 250 yes
Khi chúng ta thêm module Announcement vào trang thì giao diện của nó là:
Hình 301 Giao diện Module AnnouncementsP1
Các bước để thêm module Announcement: Module của chúng ta được tạo ra lúc ban đầu thì không có nội dung. Nó chỉ hiển thị một Container trống, với Title và Action Buttons.
Nhấp vào Add New Announcement (hoặc chọn Add New Announcement từ Module Actions Menu).
SVTH:Vũ Tất Thắng Lớp 48pm2 52
Trên trang Edit Announcements chúng ta sẽ thấy rằng có một vài vùng chúng ta cần phải điền vào trình văn bản WYSIWYG như lúc sử dụng cho module Text/HTML (và cái khác).
Hình 321 Giao diện Module AnnouncementsP3
Đặt con trỏ chuột vào vùng Title và nhập vào đó một câu lệnh ngắn gọn để tóm tắt thông báo của chúng ta. Tùy chọn, đánh vào hộp Add Date để nối dữ liệu vào ngày hiện hành tiêu đề thông báo của chúng ta.
Hình 331 Giao diện Module AnnouncementsP4
Đặt con trỏ chuột vào phần mô tả và dùng những tính năng của trình văn bản WYSIWYG để tạo ra phần nội dung cho thông báo của chúng ta.
Hình 341 Giao diện Module AnnouncementsP5 (adsbygoogle = window.adsbygoogle || []).push({});
Chọn dạng liên kết cho thông báo của chúng ta và hoàn thành những thông tin thích hợp. chúng ta có thể chỉ rõ đường liên kết cho website, trên trang website của chúng ta hoặc đến một tập tin trên website (như là hinh ảnh hoặc tài liệu PDF).
SVTH:Vũ Tất Thắng Lớp 48pm2 53
Hình 351 Giao diện Module AnnouncementsP6 Chọn đường liên kết từ những hộp tùy chọn có sẵn.
Hình 361 Giao diện Module AnnouncementsP7
Nếu như chọn Tracking, chúng ta sẽ có thể kiểm tra đường liên kết này được click vào bao nhiều lần. Nếu chúng ta chọn Logging, chúng ta có thể đoán được ai đã click vào đuờng liên kết này ( Nếu người sử dụng đăng nhập vào hệ thống). Và nếu như chúng ta chọn New Window, đường link của chúng ta sẽ làm cho một cửa sổ trình duyệt được mở ra cho đường link đó.
Chỉ rõ ngày mà thông báo của chúng ta ngừng không hiển thị nữa. Chúng ta có thể nhấp vào Calendar để bật lên lịch biểu là nơi mà chúng ta có thể chọn cái ngày đó.
Hình 371 Giao diện Module AnnouncementsP8
Bao gồm View Order để sắp xếp lại thông báo của chúng ta. Theo mặc định, chúng sẽ được sắp xếp như lúc mà chúng ta đã tạo ra chúng.
Hình 381 Giao diện Module AnnouncementsP9
Khi chúng ta đã làm xong, phải bảo đảm rằng chúng ta đã nhấp vào Update ở giữa trang để lưu lại những thay đổi của chúng ta. Chúng ta phải update như thế nào để người truy cập website có thể nhìn thấy.
SVTH:Vũ Tất Thắng Lớp 48pm2 54
Hình 391 Giao diện Module AnnouncementsP10
Tương tự các module khác cũng sử dụng và thực hiện đơn giản như đã trình bày ở trên.