XÂY DỰNG HỆ THỐNG WEBSITE GIẢNG DẠY MÔN HỌC HDJ DỰA TRÊN ASP.NET VÀ HTML5

MỤC LỤC PHẦN I : MỞ ĐẦU 2 1. Lý do chọn đề tài 2 2. Đối tượng nghiên cứu 2 3. Đối tượng khảo sát 2 4. Giới hạn và phạm vi nghiên cứu 2 5. Mục tiêu nghiên cứu 2 6. Nhiệm vụ nghiên cứu 2 7. Phương pháp nghiên cứu 2 8. Ý nghĩa lý luận và thực tiễn của đề tài 2 PHẦN II : NỘI DUNG 2 CHƯƠNG 1 : GIỚI THIỆU VỀ MÔN HỌC HDJ 2 1.1.Giới thiệu về HTML 2 1.1.1. Khái quát HTML, HTML5 2 1.1.2. Thành phần của HTML 2 1.2.Khái quát về CSS 2 1.2.1. Khái niệm 2 1.2.2. Cơ bản về cú pháp CSS 2 1.2.3. Xây dựng CSS 2 1.2.4. Nhúng CSS vào trong HTML 2 1.3.Khái quát về Javascript 2 1.3.1. Giới thiệu 2 1.3.2. Ưu điểm 2 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2 2.1.Phân tích, xác định yêu cầu của hệ thống 2 2.1.1. Yêu cầu về chức năng 2 2.1.2. Yêu cầu phi chức năng 2 2.2.Đặc tả yêu cầu 2 2.2.1. Các tác nhân 2 2.2.2. Biểu đồ UseCase 2 2.2.3. Biểu đồ tuần tự 2 2.2.4. Biểu đồ lớp 2 2.3.Thiết kế cơ sở dữ liệu, xây dựng mô hình 2 2.3.1.Thu thập thông tin 2 2.3.2. Mô hình CSDL 2 2.3.3. Danh sách các bảng CSDL 2 CHƯƠNG 3: THIẾT KẾ CHƯƠNG TRÌNH 2 3.1. Đặc tả một số điều khiển được sử dụng 2 3.2. Thiết kế chương trình 2 3.2.1. Trang chủ hiển thị 2 3.2.2. Trang đăng nhập hệ thống 2 3.2.3. Trang chi tiết bài giảng 2 3.2.4. Trang bài tập trắc nghiệm 2 3.2.5. Trang Code Demo bài giảng 2 3.2.6. Trang chủ quản trị 2 3.2.7. Trang quản lý thông tin bài giảng 2 3.2.8. Trang quản lý phản hồi 2 3.2.9. Trang quản lý thành viên 2 3.3. Cài đặt thử nghiệm về hệ thống 2 3.3.1. Yêu cầu phần cứng 2 3.3.2. Yêu cầu phần mềm 2 PHẦN III : ĐÁNH GIÁ KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI 2 3.1. Kết quả đạt được 2 3.2. Ưu, nhược điểm của đề tài 2 3.2.1. Ưu điểm 2 3.2.2. Nhược điểm 2 3.3. Hướng phát triển của đề tài 2 PHẦN IV : TÀI LIỆU THAM KHẢO 2 DANH MỤC TỪ VIẾT TẮT STT Tên từ Ý nghĩa 01 CNTT Công nghệ thông tin 02 CSDL Cơ sở dữ liệu 03 CSS Cascading Style Sheet 04 HTML Document Object Model 05 DOM Document Object Model 06 HDJ HTML DHTML Javascript DANH MỤC HÌNH VẼ Hình 2.1: Biểu đồ Usecase tổng quát 2 Hình 2.2: Biểu đồ UseCase quản lý bài giảng 2 Hình 2.3: Biểu đồ tuần tự cho chức năng đăng nhập 2 Hình 2.4: Biểu đồ tuần tự cho chức năng thêm bài giảng 2 Hình 2.5: Biểu đồ tuần tự cho chức năng sửa bài giảng 2 Hình 2.6: Biểu đồ tuần tự cho chức năng xóa bài giảng 2 Hình 2.7: Biểu đồ tuần tự cho chức năng tìm kiếm 2 Hình 2.8: Biểu đồ lớp. 2 Hình 2.9: Mô hình CSDL 2 Hình 3.1 : Giao diện trang chủ 2 Hình 3.2 : Giao diện trang đăng nhập 2 Hình 3.3 : Giao diện trang chi tiết bài giảng 2 Hình 3.4 : Giao diện trang bài tập trắc nghiệm 2 Hình 3.5 : Giao diện trang Code Demo bài giảng 2 Hình 3.6 : Giao diện trang chủ quản trị 2 Hình 3.7 : Giao diện trang quản lý thông tin bài giảng 2 Hình 3.8 : Giao diện trang quản lý phản hồi 2 Hình 3.9 : Giao diện trang quản lý thành viên 2 DANH MỤC CÁC BẢNG Bảng 2.1. Các tác nhân 2 Bảng 2.2. Bảng đặc tả usercase tổng quát 2 Bảng 2.3. Kịch bản usecase quản lý thêm bài giảng 2 Bảng 2.4. Kịch bản usecase quản lý sửa bài giảng 2 Bảng 2.5. Kịch bản usecase quản lý xóa bài giảng 2 Bảng 2.6. Kịch bản usecase tìm kiếm 2 Bảng 2.7. Hệ thống lưu trữ thông tin 2 Bảng 2.8. Bảng Lecture 2 Bảng 2.9. Bảng CodeLecture 2 Bảng 2.10. Bảng Excercises 2 Bảng 2.11. Bảng FeedBack 2 Bảng 2.12. Bảng Answer 2 Bảng 2.13. Bảng Question 2 Bảng 2.14. Bảng Results 2 Bảng 2.15. Bảng Account 2 Bảng 2.16. Bảng Menu 2 Bảng 2.17. Bảng Advertise 2 Bảng 2.18. Bảng Slide 2 Bảng 2.19. Bảng Video 2

MỤC LỤ

PHẦN I : MỞ ĐẦU 3

1 Lý do chọn đề tài 3

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

3 Đối tượng khảo sát 3

4 Giới hạn và phạm vi nghiên cứu 3

5 Mục tiêu nghiên cứu 3

6 Nhiệm vụ nghiên cứu 3

7 Phương pháp nghiên cứu 3

8 Ý nghĩa lý luận và thực tiễn của đề tài 3

PHẦN II : NỘI DUNG 3

CHƯƠNG 1 : GIỚI THIỆU VỀ MÔN HỌC HDJ 3

1.1.Giới thiệu về HTML 3

1.1.1 Khái quát HTML, HTML5 3

1.1.2 Thành phần của HTML 3

1.2.Khái quát về CSS 3

1.2.1 Khái niệm 3

1.2.2 Cơ bản về cú pháp CSS 3

1.2.3 Xây dựng CSS 3

1.2.4 Nhúng CSS vào trong HTML 3

1.3.Khái quát về Javascript 3

1.3.1 Giới thiệu 3

1.3.2 Ưu điểm 3

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3

2.1.Phân tích, xác định yêu cầu của hệ thống 3

2.1.1 Yêu cầu về chức năng 3

2.1.2 Yêu cầu phi chức năng 3

2.2.Đặc tả yêu cầu 3

2.2.1 Các tác nhân 3

2.2.2 Biểu đồ UseCase 3

2.2.3 Biểu đồ tuần tự 3

2.2.4 Biểu đồ lớp 3

2.3.Thiết kế cơ sở dữ liệu, xây dựng mô hình 3

2.3.1.Thu thập thông tin 3

2.3.2 Mô hình CSDL 3

2.3.3 Danh sách các bảng CSDL 3

CHƯƠNG 3: THIẾT KẾ CHƯƠNG TRÌNH 3

3.1 Đặc tả một số điều khiển được sử dụng 3

3.2 Thiết kế chương trình 3

3.2.1 Trang chủ hiển thị 3

3.2.2 Trang đăng nhập hệ thống 3

3.2.3 Trang chi tiết bài giảng 3

3.2.4 Trang bài tập trắc nghiệm 3

3.2.5 Trang Code Demo bài giảng 3

3.2.6 Trang chủ quản trị 3

3.2.7 Trang quản lý thông tin bài giảng 3

3.2.8 Trang quản lý phản hồi 3

3.2.9 Trang quản lý thành viên 3

3.3 Cài đặt thử nghiệm về hệ thống 3

3.3.1 Yêu cầu phần cứng 3

3.3.2 Yêu cầu phần mềm 3

PHẦN III : ĐÁNH GIÁ KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI 3

3.1 Kết quả đạt được 3

3.2 Ưu, nhược điểm của đề tài 3

3.2.1 Ưu điểm 3

3.2.2 Nhược điểm 3

3.3 Hướng phát triển của đề tài 3

PHẦN IV : TÀI LIỆU THAM KHẢO 3

DANH MỤC TỪ VIẾT TẮT ST

01 CNTT Công nghệ thông tin

02 CSDL Cơ sở dữ liệu

03 CSS Cascading Style Sheet

04 HTML Document Object Model

05 DOM Document Object Model

06 HDJ HTML DHTML Javascript

DANH MỤC HÌNH V

Hình 2.1: Biểu đồ Use-case tổng quát 3

Hình 2.2: Biểu đồ UseCase quản lý bài giảng 3

Hình 2.3: Biểu đồ tuần tự cho chức năng đăng nhập 3

Hình 2.4: Biểu đồ tuần tự cho chức năng thêm bài giảng 3

Hình 2.5: Biểu đồ tuần tự cho chức năng sửa bài giảng 3

Hình 2.6: Biểu đồ tuần tự cho chức năng xóa bài giảng 3

Hình 2.7: Biểu đồ tuần tự cho chức năng tìm kiếm 3

Hình 2.8: Biểu đồ lớp 3

Hình 2.9: Mô hình CSDL 3

Hình 3.1 : Giao diện trang chủ 3

Hình 3.2 : Giao diện trang đăng nhập 3

Hình 3.3 : Giao diện trang chi tiết bài giảng 3

Hình 3.4 : Giao diện trang bài tập trắc nghiệm 3

Hình 3.5 : Giao diện trang Code Demo bài giảng 3

Hình 3.6 : Giao diện trang chủ quản trị 3

Hình 3.7 : Giao diện trang quản lý thông tin bài giảng 3

Hình 3.8 : Giao diện trang quản lý phản hồi 3

Hình 3.9 : Giao diện trang quản lý thành viên 3

DANH MỤC CÁC B

Y

Bảng 2.1 Các tác nhân 3

Bảng 2.2 Bảng đặc tả usercase tổng quát 3

Bảng 2.3 Kịch bản use-case quản lý thêm bài giảng 3

Bảng 2.4 Kịch bản use-case quản lý sửa bài giảng 3

Bảng 2.5 Kịch bản use-case quản lý xóa bài giảng 3

Bảng 2.6 Kịch bản use-case tìm kiếm 3

Bảng 2.7 Hệ thống lưu trữ thông tin 3

Bảng 2.8 Bảng Lecture 3

Bảng 2.9 Bảng CodeLecture 3

Bảng 2.10 Bảng Excercises 3

Bảng 2.11 Bảng FeedBack 3

Bảng 2.12 Bảng Answer 3

Bảng 2.13 Bảng Question 3

Bảng 2.14 Bảng Results 3

Bảng 2.15 Bảng Account 3

Bảng 2.16 Bảng Menu 3

Bảng 2.17 Bảng Advertise 3

Bảng 2.18 Bảng Slide 3

Bảng 2.19 Bảng Video 3

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cả chiềurộng và chiều sâu Máy tính điện tử đang dần trở thành một công cụ làm việc, học tập vàgiải trí thông dụng của con người, không chỉ ở công sở mà còn ngay cả trong gia đình

Mạng Internet cũng là một trong những sản phẩm có giá trị hết sức lớn lao và ngàycàng trở nên một công cụ không thể thiếu, đó cũng là nền tảng chính cho sự truyền tải,trao đổi thông tin trên toàn cầu

Trên đó các hoạt động diễn ra trong cuộc sống hàng ngày được thực hiện nhanhhơn, hiệu quả hơn, tiết kiệm nhiều chi phí Hơn thế nữa, Internet cũng đóng một phầnquan trọng trong lĩnh vực giáo dục Các hệ đào tạo từ xa, học trực tuyến qua mạng, thậmchí là học các chương trình đào tạo của nước ngoài thông qua Internet đã không còn mới

mẻ ở nước ta hiện nay Người học có thể học bất cứ lúc nào khi thời gian rảnh và trao đổitrực tiếp với giáo viên trên Internet, kiểm tra kiến thức,chia sẻ, download tài liệu, trao đổikinh nghiệm

Để hỗ trợ người học với công việc tìm hiểu và nghiên cứu thuận lợi và dễ dàng hơnnhóm đã lựa chọn đề tài “XÂY DỰNG HỆ THỐNG WEBSITE GIẢNG DẠY MÔNHỌC HDJ DỰA TRÊN ASP.NET VÀ HTML5”.Việc xây dựng website cung cấp cáckiến thức môn học HDJ cũng như kiến thức về HTML5 là rất cần thiết cho người học,người thiết kế websitetrở nên dễ dàng và thuận lợi hơn, đáp ứng nhu cầu làm việc mọi lúcmọi nơi, đồng thời thỏa mãn nhu cầu người người học thực nghiệm trực tiếp trên website,kiểm tra trắc nghiệm kiến thức

LỜI CẢM ƠN

Sau một thời gian làm việc với sự cố gắng nỗ lực cùng với tinh thần làm việcnghiêm túc của các thành viên trong nhóm, nhóm hoàn thành đề tài tốt nghiệp: “XÂYDỰNG HỆ THỐNG WEBSITE GIẢNG DẠY MÔN HỌC HDJ DỰA TRÊN ASP.NET

VÀ HTML5”

Nhóm đề tài xin bày tỏ lòng biết ơn sâu sắc nhất đến các thầy cô trong KhoaCNTTcùng các bạn sinh viên đã nhiệt tình động viên, giúp đỡ nhóm trong suốt thời gianqua

Do thời gian, kinh nghiệm và kiến thức còn hạn chế nhóm đề tài không tránh khỏinhững thiếu sót Vì vậy rất mong nhận được sự chỉ bảo, nhận xét của các thầy cô và cácbạn để đề tài của nhóm được hoàn thiện hơn

Nhóm đề tài xin chân thành cảm ơn!

Hưng Yên, ngày 05 tháng 08 năm 2013

Nhóm đề tài

PHẦN I : MỞ ĐẦU

1 Lý do chọn đề tài

Cùng với sự phát triển không ngừng về kỹ thuật máy tính cũng như về mạnginternet, công nghệ thông tin đang lần lượt chinh phục hết đỉnh cao này đến đỉnh caokhác Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càngtrở nên một công cụ không thể thiếu, đó cũng là nền tảng chính cho sự truyền tải, trao đổithông tin trên toàn cầu

Trên đó các hoạt động diễn ra trong cuộc sống hàng ngày được thực hiện nhanhhơn, hiệu quả hơn, tiết kiệm nhiều chi phí Hơn thế nữa, Internet đã đóng một phần quantrọng trong lĩnh vực giáo dục Các hệ đào tạo từ xa, học trực tuyến qua mạng, thậm chí làhọc các chương trình đào tạo của nước ngoài thông qua Internet đã không còn mới mẻ ởnước ta hiện nay Học viên có thể học bất cứ lúc nào khi thời gian rảnh và trao đổi trựctiếp với giáo viên trên Internet, vừa tiết kiệm chi phí vừa tiết kiệm thời gian Vì vậy,phương thức đào tạo này mang tính giáo dục tạo điều kiện cho người làm việc theo ca, người thường xuyên đi công tác, người sống xa các trường học, người khó khăn về tâm

lý hoặc thể trạng sức khỏe Trước đây muốn tìm hiểu một vấn đề nào đó chúng ta phảidùng các phương thức tuyền thống như đọc sách, báo, nghe đài, tivi còn ngày nay chúngxuất hiện một kênh thông tin mới trên internet Nhận thấy việc xây dựng website cung cấpcác kiến thức môn học HDJ là rất cần thiết cho người muốn tìm hiểu và thực nghiệm ngaytrên đó đặc biệt cách thức chia sẻ kinh nghiệm học tập Vì vậy, nhóm đã lựa chọn đề tài

“XÂY DỰNG HỆ THỐNG WEBSITE GIẢNG DẠY MÔN HỌC HDJ DỰA TRÊN

ASP.NET VÀ HTML5” Nội dung của đề tài là xây dựng website chia sẻ kỹ thuật cũng

như kinh nghiệm học, với nhiều tính năng mạnh mẽ đáp ứng trên nhiều nền tảng khácnhau, đáp ứng thêm đó là nhu cầu học tập, tìm kiếm thông tin, trắc nghiệm thực tế Từ đógóp phần đẩy mạnh phong trào học tập trực tuyến và cũng như việc cung cấp các kiếnthức HTML5 để thực nghiệm ngay trên đó

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

- Kiến thức về HTML5 và các kiến thức liên quan CSS, Jquery…

- Kiến thức về ASP.NET, ngôn ngữ lập trình C#, Net Framework 3.5

3 Đối tượng khảo sát

- Sinh viên khoa công nghệ thông tin trường Đại học SPKT Hưng Yên

- Trang webhttp://www.w3schools.com/.

- Trang web Error! Hyperlink reference not valid.

- Trang web http://www.hochtml5.com/.

- Trang web Error! Hyperlink reference not valid.

4 Giới hạn và phạm vi nghiên cứu

- Nghiên cứu trang web http://www.hochtml5.com/, http://www.w3schools.com/, http://

www.cione.com.vn/,http://www.hocwebchuan.com/

- Xây dựng hệ thống website dựa trên ASP.NET áp dụng cho các bài giảng HTML5.

- Nghiên cứu UML để phân tích và thiết kế hệ thống.

5 Mục tiêu nghiên cứu

- Xây dựng môi trường thực nghiệm kiến thức về môn học HDJ dựa trên ASP.NET.

- Xây dựng hệ thống kiểm tra kiến thức thông qua hình thức làm bài tập trắcnghiệm.

- Hoàn thiện module quản lý bài giảng với chức năng cho phép nhúng trực tiếp bàigiảng từ file Word / PDF có sẵn lên website

- Xây dựng chức năng nhớ trạng thái cho thành viên website

- Xây dựng hệ thống quản lý các bài viết về HTML5, các bài giảng lý thuyết và

thực hành

- Tăng cường kỹ năng làm việc độc lập và kỹ năng làm việc nhóm.

6 Nhiệm vụ nghiên cứu

- Tìm hiểu kiến thức về HTML, HTML5, CSS3, DOM, Javascript

- Xây dựng hệ thống website giảng dạy môn học HDJ dựa trên ASP.NET vàHTML5

- Tìm hiểu về mô hình 3 lớp

- Cấu trúc bài giảng thực hành

- Cấu trúc bài giảng lý thuyết

7 Phương pháp nghiên cứu

- Phương pháp làm việc theo nhóm.

- Phương pháp phân tích, tổng hợp lý thuyết

- Phương pháp lịch sử, phương pháp thực nghiệm

8 Ý nghĩa lý luận và thực tiễn của đề tài

- Là nguồn tài liệu tham khảo cho các nhóm nghiên cứu, học tập và phát triển ứngdụng các sinh viên yêu thích phần mềm, lập trình website

- Tăng cường nhận thức, tư duy và nâng cao kiến thức cho các thành viên trong

- Sản phầm phần mềm “Xây dựng hệ thống Website giảng dạy môn học HDJ dựa

trên ASP.NET và HTML5”, đề tài thân thiện và hữu ích đối với tất cả mọi người –những người quan tâm đến công nghệ cũng như kiến thức về HTML5 Đây cũng

là môi trường trao đổi kiến thức, tìm kiếm tham khảo đến vấn đề học cũng nhưnghiên cứu HTML5

PHẦN II : NỘI DUNG CHƯƠNG 1 : GIỚI THIỆU VỀ MÔN HỌC HDJ

1.1 Giới thiệu về HTML

1.1.1 Khái quát HTML, HTML5

HTML (HyperText Markup Language)[5] – Ý nghĩa là ngôn ngữ đánh dấu siêu vănbản được sử dụng để tạo các tài liệu có thể truy cập trên mạng Tài liệu HTML được tạonhờ dùng các thẻ và các phần tử của HTML File được lưu trên máy chủ dịch vụ web vớiphần mở rộng “.htm” hoặc “.html” Ngày nay sự phát triển của công nghệ web việc ứngdụng các công cụ HTML càng trở nên quan trọng trong sự phát triển của ngành công nghệweb hiện nay

HTML cho phép sử dụng các thẻ để trình bày nội dung văn bản dưới dạng giaodiện ứng dụng bao gồm: văn bản, hình ảnh, âm thanh, video và các ứng dụng khác Cácphiên bản HTML bao gồm : 1.0, 1.1, 2.0, 3.0, 4.0 và mới nhất là 5.0 Ứng dụng web đượcbiết đến như là một trong các ứng dụng phổ biến nhất trên nền Internet cho phép ngườidùng truy cập và trao đổi các thông tin trực tuyến theo các lĩnh vực khác nhau, từ khoahọc giáo dục đến mua bán, vui chơi giải trí và các dịch vụ cộng đồng khác

Internet là một hệ thống thông tin toàn cầu cho phép các ứng dụng phần mềm chạytrên nó và mọi người có thể truy cập từ bất cứ đâu, chủ yếu chứa ứng dụng web và dịch

vụ web[6]

Trình duyệt là chương trình hỗ trợ người dùng duyệt ứng dụng web trên nềninternet Trình duyệt làm nhiệm vụ tải trang HTML dựa trên một địa chỉ web xácđịnh(URL) về máy người dùng sau đó tiến hành phân tích tài liệu HTML (HTML +javascript+ CSS) để hiển thị giao diện phía người dùng Cho phép người dùng tương tácvới giao diện ứng dụng web

So với các phiên bản HTML trước, HTML5 được tạo ra với rất nhiều tính năngmạnh mẽ

- Độc lập nền tảng: cho phép hiển thị trên các trình duyệt khác nhau một cách thốngnhất, trên các thiết bị khác nhau (PC, Laptop, Tablet, mobile …)

- Hỗ trợ đa phương tiện: trình duyệt không cần cài plug in cho trình duyệt

- Hỗ trợ Rick Internet Application

- Thêm nhiều thẻ có tính năng mới: Email, phone, date time

- Cải thiện tốc độ xử lý trang web

Có thể nói HTML5 như một chuẩn chung cho việc phân tích và hiển thị websitetrên các trình duyệt bất kỳ Tài liệu HTML được hiển thị trên phía các trình duyệt(IE, FF,Chrome, safari, opera …)[5]

1.1.2 Thành phần của HTML

- Tài liệu HTML

 HTML: thẻ tài liệu html, toàn bộ thẻ HTML Là thẻ duy nhất trong file HTML

 Thẻ title: tiêu đề trang web, chỉ có một và hiển thị trên thanh tiêu đề của trangweb

 Thẻ head xác định thành phần của HTML bao gồm các thẻ title,script, style

 Thẻ body: nội dung tài liệu, chỉ chứa duy nhất và chứa các thẻ HTML, thể hiệngiao diện web

- Thẻ trong HTML

 Cú pháp thẻ : <ten thuoctinh =’giatri’ onclick=”ham();”> Nội dung </ten>

<ten thuoctinh=’giatri’ onclick=”ham();” />

 Thẻ nằm trong cặp: “<” và “>”

 Thẻ mở: <tên thẻ …>, thẻ đóng”</tên thẻ>”

 Thẻ mở: <tên thẻ … , thẻ đóng “/”

 Nội dung thể hiện được phần hiển thị

 Thuộc tính quy định việc hiển thị nội dung

 Màu nền, hình nền, hiệu ứng văn bản

 Kích thước, căn lề, vị trí, font chữ

 Sự kiện : sự tương tác của người dùng.

 Sử dụng thẻ:

 Chỉ ra tên thẻ, các thuộc tính, nội dung của thẻ

 Thẻ mở phải có thẻ đóng

 Thẻ có thể bao nhau và không được mắc xích vào nhau

 Thẻ nên viết bằng các ký tự thường (HTML5)

- Một số thẻ cơ bản

 Head : phần đầu của tài liệu

 Title : thể hiện tiêu đề cho trang web

 Meta thể hiện các quy định đặc biệt của trang web

 Thuộc tính codepage : quy định mã chứa tài liệu HTML

 UTE-FE, 65500…

 HTML : quy định nội dung tài liệu HTML

 Body : thân tài liệu HTML

 Thẻ chú thích : <!—Nội dung chú thích >, không hiển thị trên trình duyệt, mô

tả cho đoạn mã HTML trong tài liệu

 Div : phân chia tài liệu HTML thành từng phần khác nhau

 Span : thể hiện nội dung dạng nhỏ, làm nhã cho thẻ input

 Hr : chỉ ra dòng kẻ với độ rộng quy định bởi size

1.2 Khái quát về CSS

1.2.1 Khái niệm

CSS (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giớithiệu vào năm 1996[5] CSS là một ngôn ngữ cho giao diện để định nghĩa tính chất cácthành phần trong HTML layout Một ví dụ, với CSS ta có thể tạo kiểu fonts, chỉnh màusắc, canh lề, kẻ bảng, định chiều cao, chiều dọc, hình nền và xác định vị trí cho đối tượngcùng nhiều thứ khác

 TênCSS : thể hiện phần được sử dụng trong thẻ HTML.

 Nội dung : nằm trong cặp “{“ và “}” cài đặt các thuộc tính

 Cài đặt giá trị cho một thuộc tính : tên thuộc tính: giá trị;

Ví dụ : color: red; font-size: 13pt;

- Xây dựng CSS

 Tên CSS trùng thẻ HTML : áp dụng CSS cho thẻ HTML

 Tên chỉ có*: toàn bộ thẻ HTML

 Ten01 Ten02{/* Nội dung */}: cài đặt CSS Ten02 trong tên 01

 Ten01,Ten02{/* Nội dung */}: cả hai CSS có cùng nội dung

 Ten: TenSuKien{/* Nội dung */}: CSS cho sự kiện của thẻ

1.2.3 Xây dựng CSS

- Bước 1 : tạo file.css để chứa các kiểu CSS Tạo thư mục chứa các file CSS.

- Bước 2 : Xây dựng nội dung CSS trong file CSS

 Xây dựng tên: trùng tên thẻ, cho thuộc tính ID, Class

 Xây dựng nội dung cho CSS: thuộc tính: giá trị;

- Bước 3 : nhúng file CSS vào trang HTML: thẻ link.

- Bước 4 : sử dụng id, class để áp dụng các CSS được tạo ra.

1.2.4 Nhúng CSS vào trong HTML

Có ba cách :

- Thuộc tính style : tạo CSS ngay trên thẻ

Ví dụ : <h2 style=” font-size:13pt;”> Khái quát về CSS </h2>

- Thẻ style : cho phép tạo các CSS trong trang HTML.

<style>

h2{ color: green;}

</style>

<h2> Khái quát về CSS </h2>

- Thẻ link : cho phép đính file.CSS vào trong trang HTML.

1.3 Khái quát về Javascript

1.3.1 Giới thiệu

- Ngôn ngữ kịch bản chạy trên trình duyệt

- Javascript cho phép tương tác (đọc/ghi) với tài liệu HTML

- Hỗ trợ tương tác với người dùng qua giao diện

- Ngôn ngữ thông dịch (mã nguồn => thành chương trình)

- Cú pháp tương tự C, C++, java

1.3.2 Ưu điểm

- Hỗ trợ tốt việc xử lý các vấn đề thường gặp (DOM, Ajax,…)

- Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết

- Hạn chế xung khắc với các thư viện Javascript

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Phân tích, xác định yêu cầu của hệ thống

2.1.1 Yêu cầu về chức năng

ST

1 Quản trị hệ

thống

- Quản lý bài giảng: thêm bài giảng, sửa bài giảng, xóa bài giảng,

nhúng file doc, pdf lên website

- Quản lý thành viên: thêm thành viên, sửa thành viên, xóa thành

viên, lưu trữ trạng thái, kết quả bài trắc nghiệm của các thànhviên

- Quản lý code demo cho bài giảng: thêm code demo, sửa code

demo, xóa code demo

- Quản lý bài tập trắc nghiệm: thêm bài học trắc nghiệm, sửa bài

học trắc nghiệm, xóa bài học trắc nghiệm

- Quản lý ý kiến phản hồi: cho phép hiển thị ý kiến phản hồi, sửa

ý kiến phản hồi, xóa ý kiến phản hồi

- Quản lý câu hỏi - trả lời: thêm câu hỏi - trả lời, sửa câu hỏi - trả

lời, xóa câu hỏi - trả lời

- Quản lý kết quả bài trắc nghiệm: thêm bài giảng, sửa kết quả

bài trắc nghiệm, xóa kết quả bài trắc nghiệm

- Quản lý video bài giảng: thêm video, sửa video, xóa video.

- Quản lý menu: gồm thêm menu, sửa menu, xóa menu.

2 Thành viên

- Quản lý thông tin tài khoản:Cho phép thành viên kiểm tra thông

tin tài khoản của mình và thay đổi mật khẩu tài khoản củamình

- Thực nghiệm trực tiếp trên trang web: áp dụng lý thuyết bài

giảng thành viên có thể thực hiện bài học trực tiếp ngay trêntrang web

- Trắc nghiệm bài giảng: thành viên có thể làm các bài tập trắc

nghiệm có sẵn

- Tìm kiếm, tra cứu, chia sẻ, download tài liệu.

2.1.2 Yêu cầu phi chức năng

- Tốc độ xử lý nhanh, hiệu quả và chính xác

- Yêu cầu về an toàn và bảo mật

+ Các chức năng nhập, sửa, xóa thông tin chỉ có người quản trị được sử dụng.+ Đảm bảo máy chủ luôn hoạt động và kết nối với mạng Internet, cập nhật và đưacác thông tin lên mạng một cách nhanh nhất

- Giao diện thân thiện dễ sử dụng

+ Giao diên kích thích sự hứng thú và tò mò của bất kì khách viếng thăm nào khi

đã mở trang ra xem một lần

+ Nội dung hiển thị trên trang web phải phong phú, chính xác, cập nhật thườngxuyên những thông tin về việc làm mới nhất để thu hút người xem Tránhnhững trang web chết.

- Các yêu cầu về phần cứng

Phần mềm có thể chạy trên máy có cấu hình bình thường, không yêu cầu quá cao

về mặt tốc độ xử lý Ram tối thiểu là 256MB

- Yêu cầu thiết kế CSDL

+ Mỗi dòng trong bảng phải là duy nhất Trong bảng không có dòng nào giốnghệt nhau Điều kiện duy nhất của các dòng dữ liệu tương đương với điều kiện làbảng có khóa chính khác trống

+ Thứ tự các cột trong bảng là không quan trọng Cột được xác định thông quatên chứ không phải dựa vào vị trí của chúng

+ Thứ tự các dòng là không quan trọng Cũng như các cột, các dòng có thể đổichỗ cho nhau, có thể xem dữ liệu trong bảng với các thứ tự khác nhau của cácdòng, tùy theo yêu cầu

+ Quan hệ có lượng dư thừa dữ liệu ít nhất và cho phép người sử dụng thêm, sửađổi hay xóa các dòng dữ liệu mà không gây ra lỗi hoặc sự không nhất quantrong bảng Các thuộc tính có thể được gom nhóm một cách tùy ý thành cáclược đồ quan hệ

+ Tên bảng ở đây viết bằng tiếng việt không dấu và viết hoa các chữ cái đầu tiên.+ Tên trường là từ viết tắt hoặc tiếng việt không dấu của các thuộc tính tươngứng,các chữ cái đầu mỗi từ là phải viết hoa (ví dụ: LectureID)

- Yêu cầu về tốc độ xử lý

Tốc độ xử lý nhanh và chính xác các trang có giao diện thống nhất.

- Yêu cầu về giao diện màn hình

+ Giao diện dễ nhìn, độ rộng phải vừa với màn hình (độ rộng 100%)

+ Các trang phải có giao diện thống nhất, không nhập nhằng, trình bày khoa học.+ Các điều khiển trên form phải theo chuẩn nhất định

- Quản lý tài khoản: thêm, xóa tài khoản.Ngoài ra, Actor Admin

kế thừa vai trò của Actor Visitor và Acount

2 - Xem, tìm kiếm thông tin, like, chia sẻ, download bài giảng.

- Đăng ký tài khoản Gửi ý kiến phản hồi

3

- Thay đổi thông tin cá nhân

- Gửi ý kiến phản hồi

- Xem, tìm kiếm thông tin, like, chia sẻ, download bài giảng.Làmbài tập trắc nghiệm

2.2.2 Biểu đồ UseCase

- Biểu đồ UseCase tổng quát

Hình 2.1 : Biểu đồ Use-case tổng quát

Mô tả : Qua quá trình khảo sát Usecase gồm các tác nhân : admin, visitor, account.Các chức năng tương ứng : người quản lý ( admin) quản lý bài giảng, quản lý code demobài giảng, quản lý tài khoản, quản lý menu, quản lý bài tập trắc nghiệm, quản lý kết quả,quản lý phản hổi, quản lý video Người sử dụng (khách hàng) tìm kiếm, đăng ký, bìnhluận demo bài giảng, làm các bài trắc nghiệm

Bảng 2.2 Bảng đặc tả usercase tổng quát

Chức năng Mô tả một cách tổng quát các chức năng mà các tác nhân có thểsử dụng trong hệ thống website.

Điều kiện cần Với quản trị, thành viên phải đăng nhập mới có thể thực hiện được các chức năng của mình và thay đổi trên website.

- Biểu đồ UseCase quản lýbài giảng

Hình 2.2 : Biểu đồ UseCase quản lý bài giảng

Bảng 2.3 Kịch bản use-case quản lý thêm bài giảng

Tên Usecase Them_BG

Tác nhân chính Admin

Tiền điều kiện Admin đăng nhập vào hệ thống thành công

Đảm bảo tối thiểu Hệ thống loại bỏ các thông tin đã thêm và quay lui lại bước

trước

Đảm bảo thành

công Thông tin về bài giảng mới được bổ sung vào CSDL

Kích hoạt Admin chọn chức năng “Thêm bài giảng”

Chuỗi sự kiện chính:

1 Admin yêu cầu chức năng thêm bài giảng

2 Hệ thống hiển thị giao diện nhập bài giảng cho Admin, hệ thống lấy về các

danh mục menu bài giảng, hệ thống tự động hiển thị mã bài giảng

3 Admin nhập đầy đủ thông tin sản phẩm bao gồm: tiêu đề bài giảng, nội dung, ảnh hiển thị

4 Hệ thống kiểm tra tính hợp lệ thông tin sản phẩm nhập vào

5 Admin tiến hành thêm bài giảng vào CSDL

6 Nếu Admin có nhu cầu nhập tiếp sản phẩm quay trở lại bước nhập thêm bài

giảng

Ngoại lệ:

4.a Hệ thống thông báo bài giảng đã có trong CSDL

4.a.1 Hệ thống yêu cầu người quản trị nhập lại thông tin

4.a.2 Admin nhập lại thông tin bài giảng

4.b Hệ thống thông báo thông tin bài giảngkhông hợp lệ

4.b.1 Hệ thống yêu cầu Admin nhập lại thông tin bài giảng

4.b.2 Admin nhập lại thông tin bài giảng

Bảng 2.4 Kịch bản use-case quản lý sửa bài giảng

Tên Usecase Sua_BG

Tác nhân chính Admin

Tiền điều kiện Admin đăng nhập vào hệ thống thành công

Đảm bảo tối thiểu Hệ thống loại bỏ các thông tin đã thêm và quay lui lại bước

trước

Đảm bảo thành

công Thông tin về bài giảng mới được cập nhật vào CSDL

Kích hoạt Admin chọn chức năng “Sửa bài giảng”

Chuỗi sự kiện chính:

1 Admin yêu cầu chức năng thêm bài giảng

2 Hệ thống hiển thị giao diện sửa bài giảngcho Admin

3 Admin nhập thông tin về bài giảngcần thay đổi và nhấn “Lưu”

4 Hệ thống kiểm tra thông tin bài giảngvà xác nhận thông tin hợp lệ

5 Hệ thống nhập thông tin bài giảngmới vào CSDL

6 Hệ thống thông báo đã cập nhật thành công

7 Nếu Admin có nhu cầu sửa sản phẩm quay trở lại bước Sửa bài giảng

Ngoại lệ:

4.a Hệ thống thông báo bài giảngđã có trong CSDL

4.a.1 Hệ thống yêu cầu Admin nhập lại thông tin.

4.a.2 Admin nhập lại thông tin bài giảng

4.b Hệ thống thông báo thông tin bài giảngkhông hợp lệ

4.b.1 Hệ thống yêu cầu Admin nhập lại thông tin

4.b.2 Admin nhập lại thông tin bài giảng

Bảng 2.5 Kịch bản use-case quản lý xóa bài giảng

Tên Usecase Xoa_BG

Tác nhân chính Admin

Tiền điều kiện Admin đăng nhập vào hệ thống thành công

Đảm bảo tối thiểu Hệ thống loại bỏ các thông tin đã thêm và quay lui lại bước

trước

Đảm bảo thành

công Thông tin về Sản phẩm mới được cập nhật vào CSDL.

Kích hoạt Người quản trị chọn chức năng “Xóa bài giảng”

Chuỗi sự kiện chính:

1 Admin yêu cầu chức năng xóa bài giảng

2 Hệ thống đưa ra thông báo yêu cầu Admin xác nhận xóa bài giảng

3 Admin nhấn vào nút “Yes” Hệ thống loại bỏ thông tin bài giảngđã chọn xóa khỏi CSDL

4 Hệ thống thông báo xóa thành công

Ngoại lệ:

3.a Người quản trị nhấn vào nút “No”

3.a.1 Hệ thống tiếp tục phiên làm việc hiện tại

nhiệm Admin, Visitor, Account.

Tiền điều kiện Adminđang trong phiên làm việc, Admin ở trang Quản lý

bài giảng hoặc khách hàng đang ở giao diện người dùng

Đảm bảo tối thiểu Hệ thống loại bỏ thông tin tìm kiếm và quay lui lại bước

Chuỗi sự kiện chính:

1 Admin nhập từ khóa tìm kiếm và nhấn vào nút“Tìm kiếm”

2 Hệ thống thực hiện truy vấn tìm kiếm trong CSDL những thông tin phù hợp với

từ khóa truyền vào

3 Hệ thống hiển thị kết quả bài giảng được tìm thấy ra form kết quả tìm kiếm

Ngoại lệ:

3.a Hệ thống không tìm thấy kết quả nào phù hợp

3.a.1 Hệ thống đưa ra thông báo “Tìm kiếm thất bại”

3.a.2 Hệ thống đưa ra các gợi ý các từ khóa được tìm kiếm nhiều nhất

2.2.3 Biểu đồ tuần tự

- Biểu đồ tuần tự cho chức năng đăng nhập

Admin muốn thực hiện đăng nhập vào hệ thống quản trị thì cần phải mở giaodiện đăng nhập Sau đó, sẽ thực hiện nhập tài khoản và mật khẩu yêu cầu hệ thốngkiểm tra Hệ thống sẽ kết nối đến bảng Account trong CSDL nếu đúng tài khoản vàmật khẩu thì sẽ chuyển đến trang chủ hiển thị nếu sai thì sẽ gửi thông báo tài khoảnhoặc mật khẩu không đúng và yêu cầu thực hiện đăng nhập lại

Hình 2.3 : Biểu đồ tuần tự cho chức năng đăng nhập

- Biểu đồ tuần tự cho chức năng thêm bài giảng

Admin (người quản trị) muốn thực hiện chức năng Quản lý thêm bài giảng thìphải thực hiện đăng nhập Sau khi đăng nhập thành công thì chuyển đến giao diệntrang Quản lý bài giảng Tại đây Admin thực hiện các yêu cầu Insert và gửi đến hệthống xử lý Nếu thao tác không có lỗi thì sẽ thực hiện yêu cầu và thay đổi trongCSDL Nếu phát sinh lỗi sẽ gửi thông báo lại cho Admin yêu cầu thực hiện lại

Hình 2.4 : Biểu đồ tuần tự cho chức năng thêm bài giảng