1. Các màn hình chính của Website
a. Màn hình chính của Website:
Khi mở Website, màn hình này sẽ hiển thị và trên màn hình sẽ bao gồm những bài giảng mới nhất (Những bài giảng up lên Website gần nhất).
Các tab trên trang chủ này gồm:
- Home: Quay trở lại trang chính của website.
SVTH: Thân Hoàng Lộc Trang 120
Nguyễn Anh Việt Lưu Xuân Việt
- Thư viện: Đưa tới trang chứa nội dung các bài giảng có trên site.
- Xem: Mở ra một màn hình Viewplayer. Màn hình này trình bày nội dung một bài giảng, có thể là text, text + Video…và một comment dành riêng cho bài giảng này. - Thành viên: Mở đến trang chứa các control chỉ dành riêng cho thành viên (upload,
modify…)
- Đăng ký: Mở form đăng ký thành viên. - Đăng nhập: Mở form đăng nhập.
b. Màn hình thư viện (Màn hình chính sau khi đăng nhập):
SVTH: Thân Hoàng Lộc Trang 121
Nguyễn Anh Việt Lưu Xuân Việt
Ở màn hình này hiển thị thêm một Panelleft chứa đựng một Treeview các lớp và các môn học.
Khi click vào từng môn học, chúng sẽ trình bài các bài giảng liên quan tới môn học đó bên các Thumbnail bên phải.
Quan hệ giữa Treeview bên trái và Thumbnail bên phải là quan hệ Master - Detail c. Màn hình đăng ký
SVTH: Thân Hoàng Lộc Trang 122
Nguyễn Anh Việt Lưu Xuân Việt
Hiển thị Form đăng ký các thông tin cần thiết để trở thành thành viên của website. Các thông tin được đánh dấu là thông tin bắt buộc user phải nhập vào và có sự kiềm tra đối với thông tin tài khoản.
d. Màn hình đăng nhập
SVTH: Thân Hoàng Lộc Trang 123
Nguyễn Anh Việt Lưu Xuân Việt
Hiển thị Form đăng nhập cho user. Chỉ những user đã đăng ký thì mới có thể đăng nhập được. Thông tin cần để đăng nhập là thông tin mà user đã đăng ký và được lưu giữ trong cơ sở dữ liệu.
Ngoài ra, những user chưa đăng ký có thể nhấp vào nút “tham gia” để đang ký thông tin. Khi nhấp vào nút “tham gia” sẽ đưa user quay trở lại Form đăng ký.
e. Màn hình Upload
SVTH: Thân Hoàng Lộc Trang 124
Nguyễn Anh Việt Lưu Xuân Việt
SVTH: Thân Hoàng Lộc Trang 125 Nguyễn Anh Việt
Lưu Xuân Việt
Thành viên – Giảng viên có thể đưa (Upload) bài giảng lên Website sau khi đã dùng phần công cụ soạn thảo soạn trước các bài giảng (Xem phần soạn thảo bài giảng). (adsbygoogle = window.adsbygoogle || []).push({});
Khi đưa một bài giảng lên web, Giảng viên cần chọn Lớp, môn học (Chọn đường dẫn) chứa bài giảng và cuối cùng là chọn gói bài giảng đang chuẩn bị tải lên.
Quy trình tải một bài giảng lên trang web gồm:
- Sau khi giảng viên chọn file (bài giảng đã đóng gói file .zip). Click vào button “Tải lên” thì quá trình Upload file bắt đầu thông qua các hàm sau:
private void ButtonSubmitLoad_Click(object sender, RoutedEventArgs e) {
try {
if (uploadfile == null || hasfile == false) {
Log(msg2); return;
}
// lay' selectionboxitem cbLop cbMon
string idclass = cbLop.SelectionBoxItem as string; string idsubj = cbMon.SelectionBoxItem as string; if (idclass == null) { cbLop.Focus(); return; } if (idsubj == null) { cbMon.Focus(); return; } string iduser = ((PageMain)App.Current.RootVisual).Cookie.Getkey("CurUserid");
SVTH: Thân Hoàng Lộc Trang 126 Nguyễn Anh Việt
Lưu Xuân Việt
// up filename,class,mon
UploadFile(File1.Text, uploadfile, hashID(idclass), hashID(idsubj), iduser); File1.Text = msg1; Log(msg3); hasfile = false; } catch { } }
private void UploadFile(string fileName, Stream data, int valclass, int valsubject, string users)
{
UriBuilder ub = new UriBuilder(linksite);
ub.Query =
string.Format("filename={0}&class={1}&subject={2}&user={3}", fileName, valclass, valsubject, users);
WebClient c = new WebClient();
c.OpenWriteCompleted += (sender, e) => { PushData(data, e.Result); e.Result.Close(); data.Close(); }; c.OpenWriteAsync(ub.Uri); }
private void PushData(Stream input, Stream output) {
byte[] buffer = new byte[4096]; int bytesRead;
SVTH: Thân Hoàng Lộc Trang 127 Nguyễn Anh Việt
Lưu Xuân Việt
while ((bytesRead = input.Read(buffer, 0, buffer.Length)) != 0)
{
output.Write(buffer, 0, bytesRead); }
}
Dữ liệu được đẩy lên Website thông qua HTTP OutputStream và Query của HTTP Request. Phía máy chủ (Server) xử lý nhận dữ liêu thông qua UploadHandler.ash: (adsbygoogle = window.adsbygoogle || []).push({});
public class uploadhandler : IHttpHandler {
static int nfileloaded = 2; //bien quanly tong so file da up
//for debug string msgdebug;
public void ProcessRequest (HttpContext context) {
byte[] buffer = new byte[4096]; int bytesRead;
string filename = context.Request.QueryString["filename"].ToString(); string idclass = context.Request.QueryString["class"].ToString(); string idsubj = context.Request.QueryString["subject"].ToString(); string iduser = context.Request.QueryString["user"].ToString(); string realclasspath = hashID(int.Parse(idclass));
string realsubjectpath = hashID(int.Parse(idsubj));
string webpath = context.Server.MapPath("~/ClientBin/Data") + "/" + realclasspath +"/"+ realsubjectpath; //gia su da co cay cau truc luu tru string filepath = webpath + "/" +
filename.Remove(filename.LastIndexOf("."));
SVTH: Thân Hoàng Lộc Trang 128 Nguyễn Anh Việt
Lưu Xuân Việt
if (filename.Length == 0 || inputStream == null || idclass == null || idsubj == null || iduser == null) return; // bug kho' luong`
// luu package trong thu muc mang ten "package" try
{
// luu file vau up de danh cho download neu can string fullpath = filepath + "/" + filename; if (!Directory.Exists(filepath)) Directory.CreateDirectory(filepath); if (!File.Exists(fullpath)) { FileStream fzs = File.Create(fullpath);
while ((bytesRead = inputStream.Read(buffer, 0, buffer.Length)) != 0) { fzs.Write(buffer, 0, bytesRead); } fzs.Close(); }
// luu cau truc file trong package inputStream.Position = 0;
ZipInputStream zipStream = new ZipInputStream(inputStream); ZipEntry zippedFile = zipStream.GetNextEntry();
MemoryStream outputStream;
while (zippedFile != null) {
byte[] zbuffer = new byte[4094]; int zbytesRead;
if (zippedFile.IsDirectory) // neu entry la directory {
SVTH: Thân Hoàng Lộc Trang 129 Nguyễn Anh Việt
Lưu Xuân Việt if (!Directory.Exists(subdir)) Directory.CreateDirectory(subdir); } if (zippedFile.IsFile) // la file {
using (outputStream = new MemoryStream()) {
// doc zipstream ra memory
while ((zbytesRead = zipStream.Read(zbuffer, 0, zbuffer.Length)) != 0)
{
outputStream.Write(zbuffer, 0, zbytesRead); } (adsbygoogle = window.adsbygoogle || []).push({});
outputStream.Position = 0;
string fullfilepath = filepath + "/" + zippedFile.Name;
if (!File.Exists(fullfilepath)) {
// tao file tren web tu zipFile Entry FileStream fs = File.Create(fullfilepath); // ghi tu memmory ra file tren web
while ((bytesRead = outputStream.Read(buffer, 0, buffer.Length)) != 0) { fs.Write(buffer, 0, bytesRead); } fs.Close(); } } } // next entry zippedFile = zipStream.GetNextEntry(); } }catch(Exception e){ msgdebug = e.ToString();
}
nfileloaded++; }
2. Các màn hình chính của công cụ soạn thảo
a. Màn hình chính của công cụ soạn thảo
SVTH: Thân Hoàng Lộc Trang 130
Nguyễn Anh Việt Lưu Xuân Việt
b. Màn hình tạo mới một bài giảng
SVTH: Thân Hoàng Lộc Trang 131
Nguyễn Anh Việt Lưu Xuân Việt
c. Màn hình mở một bài giảng đã có để xem lại, chỉnh sửa…
SVTH: Thân Hoàng Lộc Trang 132
Nguyễn Anh Việt Lưu Xuân Việt
d. Màn hình xem lại một bài giảng
SVTH: Thân Hoàng Lộc Trang 133
Nguyễn Anh Việt Lưu Xuân Việt
e. Màn hình xem cấu trúc kịch bản của một bài giảng
SVTH: Thân Hoàng Lộc Trang 134
Nguyễn Anh Việt Lưu Xuân Việt
SVTH: Thân Hoàng Lộc Trang 135 Nguyễn Anh Việt
Lưu Xuân Việt
f. Quy trình lưu dữ liệu, đóng gói dữ liệu.
Sau đây là phần trình bày quy trình đóng gói các dữ liệu để hổ trợ upload bài học lên website. Đoạn code sau mô tả việc sử dụng thư viện SharpZipLib để nén các file media và file cấu trúc thành một gói dữ liệu thuận tiện cho việc upload.
private void BtnSave_Click(object sender, RoutedEventArgs e) { if (!HadOpen) return; if (CreatingLession) return; try { Stream mstr; string filename = "";
SaveFileDialog dlg = new SaveFileDialog();
dlg.Filter = "Xml File (*.xml)|*.xml|Package File (*.zip)|*.zip|All Files (*.*)|*.*"; (adsbygoogle = window.adsbygoogle || []).push({});
dlg.FilterIndex = 1;
dlg.Title = "Save EMedia Files";
dlg.InitialDirectory = wizard.getApplicationDirectory() + "Data";
//luu scriptlist if (dlg.ShowDialog() == true) { if ((mstr = dlg.OpenFile()) != null) { filename = dlg.SafeFileName; filename = filename.Remove(filename.IndexOf(".")) + ".xml"; StatusText1.Text = filename;
using (StreamWriter wr = new StreamWriter(mstr)) { wr.Write(this._curless); } mstr.Close(); } }
// yields, ngung` 1 lat
SetTabPage(0);
PropertiesText1.Text = thongbao3; for (int id = 0; id < 10; id++)
Thread.Sleep(10); //luu package
//get list
if (filename.Length > 0) {
SVTH: Thân Hoàng Lộc Trang 136 Nguyễn Anh Việt
Lưu Xuân Việt
List<string> tmp = new List<string>(); tmp.Add(filename);
foreach (Section item in _newLession.secArray) {
if (item.MediaType.Equals("video"))
for (int id = 0; id < item.NumMedia; id++) tmp.Add(item.VideoSection[id]);
else
for (int id = 0; id < item.NumMedia; id++)
tmp.Add(item.ImageSection[id]); }
//zip , muc do: default
string packagefilename = filename.Remove(filename.IndexOf(".")) + ".zip";
using (ZipOutputStream s = new ZipOutputStream(File.Create(packagefilename)))
{
byte[] buffer = new byte[4096]; foreach (string file in tmp)
{
ZipEntry entry = new ZipEntry(System.IO.Path.GetFileName(file));
entry.DateTime = DateTime.Now; s.PutNextEntry(entry);
using (FileStream fs = File.OpenRead(file)) { int sourceBytes; do { sourceBytes = fs.Read(buffer, 0, buffer.Length); s.Write(buffer, 0, sourceBytes); } while (sourceBytes > 0); } } s.Finish(); s.Close(); } RunShell("Data"); } } catch { } }
Sau khi thực hiện, chúng ta sẽ thu được kết quả là hai tập tin (file). Một file .zip để sử dụng upload nội dung đã soạn thảo (Nội dung bài giảng) lên website. File .xml là một file lưu lại cấu trúc soạn thảo mục đích cho giảng viên xem lại (Preview) nội dung bằng công cụ soạn thảo. (adsbygoogle = window.adsbygoogle || []).push({});
SVTH: Thân Hoàng Lộc Trang 137 Nguyễn Anh Việt
Lưu Xuân Việt
3. Vấn đề hạn chế và định hướng phát triển mở rông.
a. Vấn đề còn hạn chế.
Nhìn qua toàn bộ website chủ yếu tập trung phần thiết kế giao diện trên môi trường ngôn ngữ silverlight nên một số chức năng nâng cao cho ứng dụng của đề tài còn thiếu như: tìm kiếm dữ liệu theo khóa định sẵn (search tag), forum hổ trợ trao đổi thông tin giữa các đối tượng, một panel portal mở rộng…
Về công cụ hổ trợ soạn thảo: chưa hoàn thiện các chức năng xem và trình bày, chức năng đọc gói dữ liệu, hỗ trợ thanh công cụ thay đổi nội dung.
b. Hướng phát triển cho Ứng dụng. Định hướng cho phần mềm
- Xây dựng và hoàn thiện thêm môt số chứa năng: Search, quản lý thông tin bài giảng, … - Mở rộng chức năng của Website, thêm diễn đàn trao đổi (Forum)…để cho Website đa dạng và phong phú hơn.
SVTH: Thân Hoàng Lộc Trang 138 Nguyễn Anh Việt
Lưu Xuân Việt
Phụ lục A
Các công cụ hỗ trợ Silverlight (Silverlight Tool)
Nếu bạn chỉ muốn dùng Silverlight để xem những ứng dụng do người khác làm bạn có thể tải các phiên bản plug-in tại:
http://www.microsoft.com/silverlight/resources/install.aspx?v=2.0
Trong đó có phiên bản 1.0 và 2.0.
Ngoài ra, nếu muốn tạo ra các ứng dụng Silverlight, bạn cần có thêm:
http://silverlight.net/GetStarted/default.aspx
Để cài đặt bộ công cụ chúng ta cần tiến hành các bước sau:
Bước 1: Cài đặt Visual Studio 2008, sau đó update lên Microsoft Visual Studio 2008 Service Pack 1 (Installer)
Bước 2: Cài đặt Microsoft Expression Blend, sau đó update lên Microsoft Expression Blend™ 2 Service Pack 1
Bước 3: Cài đặt Silverlight Tools for Visual Studio 2008 SP1
Tài liệu tham khảo
- Ebook Apress.Silverlight Visual Essentials cuon 2.0
- Ebook OReilly.Essential.Silverlight.Sep.2007.pdf cuon 1.0 - MSDN
Một số link URL:
SVTH: Thân Hoàng Lộc Trang 139 Nguyễn Anh Việt
Lưu Xuân Việt
Phụ lục B
Hướng dẫn sử dụng Công cụ soạn thảo bài giảng.
• Công cụ soạn thảo bài giảng là một công cụ soạn thảo bài giảng điện tử hỗ trợ cho web BAIGIANGDIENTUONLINE. Với những tương tác trực quan cũng như cách diễn giải dễ hiểu sẽ giúp bạn thao tác tốt hơn. Công cụ soạn thảo bài giảng gồm có 3 chức năng chính : (adsbygoogle = window.adsbygoogle || []).push({});
- Tạo một bài giảng mới.
- Đọc một bài giảng và chỉnh sửa các mục, phần trong bài giảng. - Lưu và đóng gói bài giảng.
• Hướng dẫn chi tiết sử dụng các chức năng : 1. Tạo một bài giảng mới :
- Chọn mục “Tạo mới” trong menu “Chương trình” hoặc icon “Tạo mới” trên toolbar để tạo một bài giảng mới.
- Chương trình hỗ trợ các bước soạn thảo bài giảng theo dạng wizard rất tiện để bạn thao tác. Wizard bao gồm 3 bước chính :
Bước 1: Nhập tựa đề của bài giảng, mô tả bài giảng (sơ lược), số phần (section) trong bài giảng.
Bước 2: Nhập chi tiết các phần trong bài giảng bao gồm : tựa đề, mô tả chi tiết, video hoặc hình ảnh đi kèm (nếu có).
Bước 3: Hiện kết quả cây bài giảng, nếu bạn thấy chưa đúng có thể nhấn “Lùi” để quay trở về các bước trước để chỉnh sửa lại. Nhấn “Xong” để hoàn tất việc tạo bài giảng mới. - Lưu ý : Ở mỗi bước bạn nhấn “Hủy” để dừng việc soạn thảo lại. Khi soạn thảo xong một bài giảng mới phải lưu lại (chọn menu “Chương trình” → “Lưu” hoặc chọn icon “Lưu”). 2. Đọc một bài giảng và chỉnh sửa các mục, phần trong bài giảng.
SVTH: Thân Hoàng Lộc Trang 140 Nguyễn Anh Việt
Lưu Xuân Việt
Chọn mục “Mở” trong menu “Chương trình” hoặc icon “Mở” trên toolbar để mở một bài giảng của bạn. Đuôi file là .xml
Bạn có thể xem, chỉnh sửa nội dụng của bài giảng và lưu những thay đổi.
3. Sau khi hoàn tất việc soạn bài giảng, chương trình sẽ hiển thị kết quả cây bài giảng ở bên phần trái của chương trình. Khi lưu chương trình sẽ tạo 2 file .xml và .zip. Khi upload lên website, ta sử dụng file đóng gói .zip để tải lên. Website sẽ tự bung nén và lấy nội dung bên trong thể hiện lên website.
Chương trình còn một vài chức năng khác đang hoàn thiện như chức năng soạn text, chức năng, các phím tắt trên Menu...
Để xem phần hướng dẫn này trên công cụ soạn thảo. Bạn chọn Menu “hướng dẫn” trên thanh Menu.