Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

LỜI CẢM ƠN
Cảm ơn nhà trường đã tạo điều khiện cho chúng em tham gia một sân chơi sáng
tạo, vừa củng cố kiến thức đã học, vừa tham gia để kiểm tra năng lực của mình đến
đâu trước khi rời khỏi ghế nhà trường.
Chúng em xin được chân thành cảm ơn sự giúp đỡ nhiệt tình, truyền đạt những
kiến thức cũng như kinh nghiệm quý báu của thầy Võ Ngọc Đạt trong việc xây dựng
sản phẩm sự thi.
Tuy nhiên, mặc dù đã cố gắng rát nhiều nhưng vẫn không thể tránh khỏi những
sai sót, vì vậy em xin quý thầy cô thông cảm và bỏ qua cho chúng em. Xin chân thành
cảm ơn!

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

i


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

MỤC LỤC
LỜI CẢM ƠN................................................................................................................. i
MỤC LỤC..................................................................................................................... ii
DANH MỤC HÌNH ẢNH............................................................................................iv
CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI “XÂY DỰNG...............................................1
KHOA THƯƠNG MẠI ĐIỆN TỬ”...............................................................................1
1.1.Ý tưởng thực hiện................................................................................................1
1.2.Phương pháp nghiên cứu......................................................................................1
1.3.Ý nghĩa thực tiễn..................................................................................................2
CHƯƠNG II: PHÂN TÍCH HỆ THỐNG WEBSITE....................................................3
2.1.Biểu đồ phân rã chức năng (Bussiness Functional Diagram – BFD)...................3

2.2.Biểu đồ dòng dữ liệu (Data Flow Diagram-DFD)................................................3
2.2.1.Biểu đồ DFD mức ngữ cảnh..........................................................................3
2.2.2.Biểu đồ DFD cấp 0........................................................................................4
2.2.3.Biểu đồ DFD cấp 1........................................................................................5
2.3.Xây dựng mối quan hệ cơ sở dữ liệu....................................................................8
Chương III: XÂY DỰNG WEBSITE GIỚI THIỆU......................................................9
KHOA THƯƠNG MẠI ĐIỆN TỬ................................................................................9
3.1.Giới thiệu tổng quan về công cụ và kỹ thuật thao tác dữ liệu...............................9
3.1.1.Giới thiệu công cụ.........................................................................................9
3.1.1.1.Microsoft Visual Studio 2010.................................................................9
3.1.1.2.Microsoft SQL Server 2005..................................................................10
3.1.1.3.Giới thiệu DevExpress..........................................................................11
3.1.1.4.Giới thiệu CKEditor.............................................................................12
3.1.2.1.Viết theo mô hình 3 lớp........................................................................12
3.1.2.2.Viết trực tiếp lên file *.aspx.cs.............................................................13
3.1.2.3.Một số đối tượng khác.........................................................................13
3.2.Giao diện website...............................................................................................18
3.2.1.1.Trang chủ:............................................................................................18
3.2.1.2.Trang giới thiệu giảng viên..................................................................20
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

ii


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
3.2.1.3.Trang tin tức (tương tự cho các trang thông báo, trang sự kiện).........21
3.2.1.4.Giao diện trang liên hệ........................................................................22
3.2.2.1.Administrator.......................................................................................22
3.2.2.2.Trưởng khoa.........................................................................................25
3.2.2.3.Trưởng bộ môn.....................................................................................26

3.2.2.4.Giảng viên............................................................................................27
3.2.2.5.Sinh viên..............................................................................................27
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN....................................................................28

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

iii


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

DANH MỤC HÌNH ẢNH
Hình 1: Biểu đồ phân rã chức năng BFD.......................................................................3
Hình 2: Biểu đồ dòng dữ liệu DFD mức ngữ cảnh.........................................................3
Hình 3: Biểu đồ DFD mức 0..........................................................................................4
Hình 4: Biểu đồ DFD mức 1 - Quản lý tin tức...............................................................5
Hình 5: Biểu đồ DFD mức 1 - Quản lý sự kiện..............................................................5
Hình 6: Biểu đồ DFD mức 1 - Quản lý thông báo.........................................................6
Hình 7: Biểu đồ DFD mức 1 - Quản lý người dùng.......................................................6
Hình 8: Biểu đồ DFD mức 1 - Quản lý giảng viên.........................................................7
Hình 9: Biểu đồ DFD mức 1 - Quản lý thao tác nghiệp vụ giảng dạy............................7
Hình 10: Mối quan hệ giữa các bảng trong cơ sở dữ liệu...............................................8
Hình 11: Mô hình 3 tầng..............................................................................................12
Hình 12: Giao diện trang chủ.......................................................................................18
Hình 13: Giao diện trang giảng viên............................................................................20
Hình 15: Trang liên hệ.................................................................................................22
Hình 16: Trang liên hệ.................................................................................................23
Hình 17: Trang quản lý tài khoản người dùng..............................................................23
Hình 18: giao diện trang quản lý tin tức.......................................................................24
Hình 19: trang xem phản hồi từ người dùng................................................................24

Hình 21: Menu khi người dùng là trưởng khoa............................................................25
Hình 22: Menu khi người dùng là trưởng bộ môn........................................................26
Hình 23: trang thống kê công tác giảng dạy.................................................................26
Hình 24: Menu khi người dùng là giảng viên..............................................................27
Hình 25: Menu khi người dùng là sinh viên.................................................................27

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

iv


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI “XÂY DỰNG
KHOA THƯƠNG MẠI ĐIỆN TỬ”
1.1. Ý tưởng thực hiện
Hiện nay, hầu hết tất cả các trường Đại học, Cao đẳng, Trung cấp chuyên nghiệp
trong cả nước đều có những website riêng cho mình. Sự cần thiết của một website
trong việc đào tạo, tuyển sinh, cũng như công tác quản lý và các nghiệp vụ khác ngày
càng khẳng định.
Mặc dù trường đã có website riêng nhưng xét thấy chưa thể đáp ứng được hết
nhu cầu của giảng viên và sinh viên trong khoa. Sinh viên và giảng viên cần có một
diễn đàn để trao đổi học tập, hay người dùng muốn tìm kiếm thông tin về khoa, thông
tin về giảng viên thì phải làm thế nào? Vì vậy việc xây dựng một website về khoa là
thực sự cần thiết, nó giúp sự trao đổi thông tin giữa sinh viên và giảng viên diễn ra dễ
dàng, nhanh chóng. Ngoài ra, việc xây dựng website về khoa còn có thể trưởng khoa,
trưởng bộ môn quản lý và phân công công tác giảng dạy cho giảng viên trong khoa
thuận lợi, chính xác hơn.
Là một sinh viên năm cuối tại trường Cao đẳng CNTT Hữu Nghị Việt Hàn,
chuyên ngành Thương Mại Điện Tử, chúng tôi đã nhận được sự tận tình dạy dỗ, tiếp

thu những kiến thức vô cùng quý báu của các thầy cô trong khoa “Thương Mại Điện
Tử” cũng như thầy cô toàn trường. Khi Nhà trường tổ chức “Cuộc Thi Sản Phẩm
Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015”, chúng tôi muốn để lại
một cái gì đấy thật ý nghĩa với bản thân, đồng thời cũng muốn vận dụng những kiến
thức mà mình học được đóng góp cho khoa, cho trường.
Chính vì những lý do trên mà nhóm chúng tôi chọn đề tài “Xây Dựng Website
Giới Thiệu Khoa Thương Mại Điện Tử ” để làm sản phẩm phần mềm tham dự cuộc
thi.
1.2. Phương pháp nghiên cứu
− Tiến hành thu thập và phân tích các thông tin, tài liệu liên quan đến đề tài để
hình thành nên những ý tưởng tổng quan.
− Xây dựng chương trình theo những yêu cầu đã đặt ra.
− Phân tích thiết kế hệ thống cho website
− Tham khảo một số website có liên quan.
− Triển khai chương trình và đánh giá các kết quả đã đạt được.
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

1


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
1.3. Ý nghĩa thực tiễn
 Đối với người sử dụng hệ thống website
− Đối với quản trị hệ thống
Phân quyền quản trị cho người quản trị web, phân quyền cho từng đối tượng sử
dụng như Trưởng khoa, trưởng bộ môn, giảng viên và sinh viên trong khoa.
− Đối với người dùng
Với một hệ thống được thiết kế khoa học, đảm bảo tính thẩm mĩ và đầy đủ chức
năng, người dùng có thể dễ dàng truy cập và tìm kiếm thông tin về khoa Thương mại
điện tử cũng như về trường cao đẳng cntt hữu nghị việt – hàn.

 Đối với cá nhân người nghiên cứu
Tạo một website thân thiện, hiệu quả trong công tác quản lý thông tin, quản lý
giảng viên, sinh viên. Hoàn thành tốt sản phẩm, tham dự cuộc thi đúng quy định, qua
đó cũng cố kiến thức, nâng cao thêm những kĩ năng cần thiết.

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

2


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

CHƯƠNG II: PHÂN TÍCH HỆ THỐNG WEBSITE
2.1. Biểu đồ phân rã chức năng (Bussiness Functional Diagram – BFD)

Hình 1: Biểu đồ phân rã chức năng BFD
2.2. Biểu đồ dòng dữ liệu (Data Flow Diagram-DFD)
2.2.1. Biểu đồ DFD mức ngữ cảnh

Hình 2: Biểu đồ dòng dữ liệu DFD mức ngữ cảnh

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

3


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
2.2.2. Biểu đồ DFD cấp 0

Hình 3: Biểu đồ DFD mức 0

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

4


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
2.2.3. Biểu đồ DFD cấp 1
Quản lý tin tức:

Hình 4: Biểu đồ DFD mức 1 - Quản lý tin tức
Quản lý sự kiện:

Hình 5: Biểu đồ DFD mức 1 - Quản lý sự kiện
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

5


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
Quản lý thông báo:

Hình 6: Biểu đồ DFD mức 1 - Quản lý thông báo
Quản lý người dùng:

Hình 7: Biểu đồ DFD mức 1 - Quản lý người dùng

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

6

Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
Quản lý giảng viên:

Hình 8: Biểu đồ DFD mức 1 - Quản lý giảng viên
Quản lý thao tác nghiệp vụ:

Hình 9: Biểu đồ DFD mức 1 - Quản lý thao tác nghiệp vụ giảng dạy

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

7


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
2.3. Xây dựng mối quan hệ cơ sở dữ liệu

Hình 10: Mối quan hệ giữa các bảng trong cơ sở dữ liệu

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

8


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử

Chương III: XÂY DỰNG WEBSITE GIỚI THIỆU
KHOA THƯƠNG MẠI ĐIỆN TỬ
3.1. Giới thiệu tổng quan về công cụ và kỹ thuật thao tác dữ liệu
3.1.1. Giới thiệu công cụ

3.1.1.1. Microsoft Visual Studio 2010
Visual Studio 2010 bao gồm các công cụ tích hợp để phát triển và hạ tầng máy
chủ để quản trị mã nguồn, thông tin dự án phát triển phần mềm của doanh nghiệp, tổ
chức. Hệ thống này giúp đơn giản hóa toàn bộ quy trình phát triển ứng dụng. Ngoài ra,
người quản trị dự án có khả năng phân tích chi tiết để truy vấn, xác định các vấn đề kỹ
thuật xảy ra ở các khâu trong toàn bộ vòng đời của sản phẩm phần mềm mà doanh
nghiệp và tổ chức phát triển.
Visual Studio 2010 còn đem đến giải pháp khác như kiến trúc ứng dụng
(architecture) giúp cho phát triển ứng dụng trên các nền tảng công nghệ hiện đại như
hệ tính toán song song và điện toán đám mây. Một số tính năng về cộng tác khi thực
hiện dự án, các công cụ kiểm thử (testing) và gỡ lỗi (debugging) được cải tiến đáng kể
giúp tăng hiệu suất làm việc, nâng cao chất lượng sản phẩm phần mềm và triển khai
giải pháp với chi phí thấp.
Tính năng chính:
− Giải phóng ý tưởng
− Tạo nên bất kỳ ý tưởng nào của bạn, xây dựng trên những thế mạnh của nhóm,
và mở ra những khả năng mới.
− Công cụ thiết kế trực quan, tạo nguyên mẫu và mô hình cho phép bạn tạo nên
những ứng dụng sáng tạo cho Windows và Web.
− Tạo nền tảng chung cho sự sáng tạo với SketchFlow, Microsoft Expression
Studio, và Team Foundation Server.
− Tận dụng cơ hội và khả năng mới nhờ lập trình đa lõi và công cụ phát triển
điện toán đám mây.
− Đơn giản hóa quá trình.
− Tạo môi trường duy nhất giúp phát triển kỹ năng và phong cách làm việc của
bạn.

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

9

Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
− Hoàn thiện tất cả mã hóa, mô hình, kiểm tra, sửa lỗi, và triển khai công việc
trong môi trường Visual Studio 2010.
− Sử dụng các tiêu chuẩn và kỹ năng hiện có để nhằm mục tiêu tăng số lượng
ứng dụng bao gồm cả Microsoft SharePoint và Windows Azure.
− Hỗ trợ đa màn hình và trình soạn thảo mới.
− Đảm bảo kết quả có chất lượng cao.
− Công cụ thử nghiệm mạnh mẽ với tính năng chủ động quản lý dự án giúp bạn
phát triển ứng dụng theo đúng cách.
− Sử dụng trình sửa lỗi IntelliTrace để loại bỏ lỗi trong ứng dụng.
− Công cụ quản lý dự án bao gồm báo cáo, biểu đồ, và bảng tính dự trù.
− Công cụ kiểm tra tự động và thủ công cho biết ứng dụng bạn có được phát triển
đúng cách hay không.
Yêu cầu hệ thống:
− Máy tính có bộ vi xử lý 1,6 GHz hoặc nhanh hơn.
− RAM: 1 GB đối với x86, 2 GB RAM đối với x64; thêm 512 MB nếu chạy
trong máy ảo.
− Ổ cứng trống 3GB
− Ổ đĩa cứng: 5400 RPM
− Card video DirectX 9 với độ phân giải màn hình hiển thị 1024 x 768 hoặc cao
hơn
− Ổ DVD-ROM
3.1.1.2. Microsoft SQL Server 2005
Microsoft SQL Server là một hệ quản trị cơ sở dữ liệu (HQTCSDL) quan hệ
(Relational Database Management System – RDBMS) hoạt động theo mô hình khách
chủ cho phép đồng thời nhiều người dung cùng truy xuất dữ liệu, quản lý việc truy
nhập hợp lệ và các quyền từng người dùng trên mạng.
SQL Server 2005 là HQTCSDL được dùng phổ biến trên thế giới nói chung và

ở Việt Nam nói riêng. SQL Server 2005 nâng cao hiệu năng, độ tin cậy, khả năng lập
trình đơn giản và dễ sử dụng hơn so với các phiên bản trước đó. SQL Server 2005 tập
trung vào khả năng xử lý giao dịch trực tuyến trên di động, ứng dụng vào Thương mại
điện tử và kho dữ liệu ( Data warehousing).

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

10


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
Ngôn ngữ truy vấn của Microsoft SQL Server là Transact–SQL(T–SQL). TSQL là ngôn ngữ SQL mở rộng dựa trên tiêu chuẩn của ISO (International
Organization for Standardization) và ANSI(American National Standards Institute)
được sử dụng trong SQL Server.
SQL Server 2005 cách cung cấp thêm nhiều tiện ích thông dụng, kiểu dữ liệu,
hàm, mệnh đề và đối tượng mới,…giúp nhà phát triển phần mềm lưu trữ, tính toán,
thống kê, tìm kiếm và lập báo cáo cho mọi ứng dụng quản lý.
Chức năng
− Tạo lập và quản lý dữ liệu
− Lập báo cáo và tổng hợp dữ liệu
− Quản lý quyền hạn sử dụng
− Tương tác các hệ quản lý khác
Ưu điểm
− Cung cấp các lệnh cho việc truy vấn dữ liệu
− Chèn, cập nhật, xóa các hàng trong một quan hệ.
− Đảm bảo tính nhất quán và rang buộc CSDL
− Nâng cao quản lý dữ liệu doanh nghiệp, hiệu xuất người lập trình.
− Hỗ trợ tốt hệ thống phân tích, hỗ trợ ra ra quyết định
− Độ bảo mật cao.
− Thích hợp cho những dự án lớn.

Nhược điểm
− Chiếm dung lượng bộ nhớ lớn
− Khó cài đặt
3.1.1.3. Giới thiệu DevExpress
DevExpress là một component library hỗ trợ giao diện cho .NET Framework
cực mạnh. Hiện nay cũng có nhiều công ty lập trình sử dụng Devexpress để làm việc
cho khách hàng, cũng có nhiều bạn sinh viên dùng để làm đề án trên trường. Hỗ trợ
C#, VB, ASP.NET, WPF, Silver Light
Đặc biệt ở DevExpress chính là giao diện chính của nó, tựa tựa giao diện Word
2007, 2010, và các GridControl, TreeList ... của nó thì khỏi chê vào đâu được, hỗ trợ

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

11


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
tận răng cho các bạn từ tìm kiếm nâng cao, hiện hình ảnh ... Crystal Report hỗ trợ báo
cáo tốt hơn hẳn Report trong .NET hỗ trợ sẵn.
3.1.1.4. Giới thiệu CKEditor
CKEditor (còn gọi là FCKeditor) là một trình soạn thảo mã nguồn mở theo kiểu
WYSIWYG (tay làm - mắt thấy) của CKSource. Chương trình này có thể tích hợp vào
các web site mà không cần cài đặt.
CKEditor sử dụng JavaScript là nền tảng, riêng việc tương tác với server thì
CKEditor sử dụng các ngôn ngữ sau: Active-FoxPro, ASP, ASP.NET, ColdFusion,
Java, JavaScript, Lasso, Perl, PHP and Python…
3.1.2. Kỹ thuật thao tác dữ liệu
3.1.2.1. Viết theo mô hình 3 lớp

Hình 11: Mô hình 3 tầng

• Data Access Layer
− Lớp này thực hiện các nghiệp vụ liên quan đến lưu trữ và truy xuất dữ liệu
− Sử dụng các dịch vụ của các hệ quản trị CSDL như SQL Server, Oracle,…
− Thường thực hiện nhiệm vụ: Kết nối đến CSDL và sử dụng các câu truy vấn:
Select, update, Delete, Insert
− Nội dung được lưu dưới các File *.cs
• Businiess Logic Layer
− Lớp này thực hiện các nghiệp vụ chính của hệ thống.
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

12


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
− Sử dụng các dịch vụ do lớp Data Access cung cấp, và cung cấp các dịch vụ cho
lớp Presentation.
− Lớp này cũng có thể sử dụng các dịch vụ của các nhà cung cấp thứ 3 để thực
− Hiện công việc của mình(ví dụ như sử dụng dịch vụ của các cổng thanh tóan
− Trực tuyến như VeriSign, Paypal...).
− Nội dung được lưu dưới các File *.cs
• Presentation Layer
− Lớp này làm nhiệm vụ giao tiếp với người dùng cuối để thu thập dữ liệu và
− Hiển thị kết quả/dữ liệu thông qua các thành phần trong giao diện người sử
dụng.
− Nội dung được lưu dưới các File *.aspx và *.aspx.cs
− Lớp này sẽ sử dụng các dịch vụ do lớp Business Logic cung cấp.
•

Thành phần Common

− Chứa các thành phần dùng chung cho cả 3 lớp
− Chứa các thành phần truyền thông tin giữa các tầng5
− Nội dung được lưu dưới các File *.cs
• Thành phần Operational
− Chứa các thành phần hay sử dụng lặp đi lặp lại
− Nội dung được lưu dưới các File *.cs
3.1.2.2. Viết trực tiếp lên file *.aspx.cs
Ngoài việc viết code theo mô hình ba tầng, chúng tôi còn viết code trực tiếp trên
các file *aspx.cs thông qua cách định nghĩa thủ tục Stored Procedures và gọi lệnh SQL
để tiết kiệm thời gian và đa dạng thao tác sử dụng dữ liệu.
3.1.2.3. Một số đối tượng khác
• Sqlcommannd
Đối tượng SqlCommand cho phép bạn chỉ định các loại tương tác mà bạn muốn
thực hiện với một cơ sở dữ liệu. Ví dụ, bạn có thể dùng các câu lệnh chọn, thêm, chỉnh
sửa và xoá trên một dòng dữ liệu trong một bảng dữ liệu. Đối tượng SqlCommand có
thể được sử dụng để hỗ trợ việc quản lý dữ liệu bị ngắt kết nối, nhưng khía cạnh bài
học thì tôi chỉ giới thiệu duy nhất đối tượng SqlCommand.
• SqlDataSource
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

13


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
SqlDataSource là một thành phần được giới thiệu từ .NET Framework 2.0. Sử
dụng SqlDataSource để truy cập dữ liệu sẽ không cần phải viết mã lệnh lập trình, chỉ
cần khai báo đầy đủ các thuộc tính cần. SqlDataSource chỉ nên dùng khi không cần sử
dụng các truy vấn SQL quá phức tạp để thao tác với cơ sở dữ liệu.
• AJAX (Asynchronous JavaScript and XML)
AJAX là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu

và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không
phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó,
HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối
tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML
là định dạng chủ yếu cho dữ liệu truyền. Đây đều là công nghệ sẵn có nhưng Javacript
đã lắp ráp chúng lại để thực hiện những “sứ mệnh” đáng khâm phục.
• ASPxMenu
Bộ ASPxMenu gồm hai control đơn lẻ là ASPxMenu và ASPxPopupMenu, bổ trợ
cho việc tạo các Menu cố định và cả các Menu ngữ cảnh động.
− Đặc điểm Control:
 Có thể tạo menu từ Datasource bằng cách khai thác các cấu trúc tập
tin XML hay các bảng của Database.
 Có thể thiết lập một Menu thu hút một cách dễ dàng chỉ sau vài cái
click chuột.
 Có thể thay đổi thể hiện tuỳ thuộc vào từng trạng thái, thông qua
việc tuỳ chỉnh các thuộc tính hay chỉnh sửa các file CSS.
 Có thể chèn các hình ảnh cần thiết trước phần Text của từng Item
trong menu, có thể tuỳ chỉnh vị trí của Text so với hình ảnh. Có thể
tuỳ chỉnh việc xử lý sự kiện phía người dùng
− Đặc điểm phía người dùng:
 Người dùng có thể sử dụng những sự kiện phía người dùng để tuỳ
chỉnh một tác vụ cho việc ẩn hoặc hiện Sub-Menu và khi người
dùng click vào Menu.
• ASPxNavBar
ASPxNavBar cho phép ta tạo ra những thông tin ngắn gọn, đặt trong các ô điều
hướng (Navigation bar), tạo nên một giao diện giống như của Microsoft Outlook
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

14

Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
Sidebar hay Window Explorer. Control này cho phép ta thay đổi nhiều tuỳ chọn, và đặt
ở bất kỳ nơi nào mong muốn trong trang web. Giống như các Control khác của
DevExpress ASP.NET, nó hỗ trợ mạnh mẽ công nghệ AJAX và CSS.
− Đặc điểm của Control
 Có thể tạo ASPxNavBar từ Datasource để tạo nên các group và các
item bằng cách khai thác các cấu trúc tập tin XML.
 Ta có thể dễ dàng thay đổi giao diện thể hiện bằng việc chỉnh sửa
các lớp CSS.
 Để có hỗ trợ AJAX ta set thuộc tính EnableCallbacks thành True,
lúc này ASPxNavBar chỉ load nội dung của Group được mặc định
mở chứ không load hết toàn bộ nội
 dung của các Group khi hiển thị ở phía người dùng. Khingười dùng
nhấn chọn mở các Group, nội dung bên trong sẽ được load qua sự
kiện callbacks. Một khi nội dung một group đã được load lên rồi,
người dùng có thể mở hoặc đóng tới
 Group này mà không phải gọi sự kiện callbacks hay postback nữa.
 Hình ảnh có thể đi chung với các Items.
 Có thể tuỳ chỉnh vị trí người dùng click vào Item để thực thi chức
năng của Item đó.(Text, hình ảnh hay cả hai).
 Ta có thể tuỳ chỉnh vị trí của hình ảnh so với text của Item.(Trên,
dưới, trái, phải).
 Ta cũng có thể tô đậm, đánh dấu từng Item.
• ASPxGridView
ASPxGridView là một Control rất mạnh, hỗ trợ việc hiển thị dữ liệu dạng lưới,
cho phép ta tạo ra các trường hiển thị bằng tay hoặc thông qua Database.
− Đặc tính của công cụ:
 Hỗ trợ khai thác dữ liệu từ nhiều hệ quản trị csdl khácnhau:
Microsoft Access, SQL Server

 Cho phép hiển thị dữ liệu dạng Master-Detail với cấu trúc đa dạng.
 Có 2 chế độ chỉnh sửa: từ Form chỉnh sửa hay chỉnh ngay trên
hàng.

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

15


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
 Chức thực dòng dữ liệu và chỉ ra lỗi: ASPxGridView cho phép ta
xác thực bằng tay các dòng đã chỉnh sửa, và hiển thị thông báo lỗi
đối với trường không hợp lệ.
 Tự động gom nhóm dữ liệu: Cho phép người dùng gom nhóm dữ
liệu, không giới hạn số cột.
 Tóm tắt dữ liệu đầy đủ: Cho phép hiển thị thông tin thống kê như
MIN, MAX, AVG, SUM và COUNT trực tiếp trên lưới.
 Cho phép lọc dữ liệu và hiển thị Text: Với mỗi cột ta có thể chỉ
định cách dữ liệu được sắp xếp theo giá trị hiển thị của nó. Ngoài ra
ta có thể cho phép lọc dữ liệu bất kỳ bằng cách gõ vào giá trị muốn
lọc trực tiếp vào ô textbox.
 Cho phép lựa chọn nhiều dòng cùng một lúc.
• XtraReport
Phần report trên môi trường Web cũng sử dụng Component XtraReport như môi
trường Window. Nó chứa công cụ để tạo Report từ dữ liệu phức hợp, chế độ xem
trước, in và xuất report ra nhiều định dạng khác nhau.
XtraReport hoạt động được trong cả ứng dụng Winform và Webform. Ta có thể chỉ
cần tạo một Report và sử dụng ở 2 môi trường khác nhau.
− Đặc tính công cụ
 Tích hợp đầy đủ Visual Studio .Net: Report Designer tích hợp. Hỗ

trợ ch độ xem trước dạng HTML và dạng in, khi có thay đổi trong
thiết kế report, ta không cần biên dịch lại toàn bộ ứng dụng mà vẫn
có thể cập nhật được chế độ xem trước kịp thời.
 XtraReports làm việc với toàn bộ đối tượng dữ liệu được hỗ trợ bởi
Visual Studio .NET như : chuẩn .NET Data Objects, Ilist Interface,
XML Data Objects.
 Cho phép lọc dữ liệu dưới với nhiều cấp: Data adapter, Data set,
Data views. Cho phép gom nhóm dữ liệu: gom nhóm đa tầng và
lồng nhau.
 Hỗ trợ nhiều control chuẩn như: Label, Line, BarCode, CheckBox,
PageInfo, Panel, PictureBox, PageBreak, Table, ZipCode, etc.
 Hỗ trợ biểu đồ thông qua control XtraCharts 85
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

16


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
 SubReports: Ta có thể dùng lại các lớp của XtraReport vào ứng
dụng qua control Subreport. Chỉ cần thả vào control Subreport, set
thuộc tính nguồn Report, ta có 2 report từ một nguồn.
 Hỗ trợ tóm tắt: dễ dàng tạo tóm tắt cho một textbox hay một ô trong
bảng. Chỉ cần set 2 thuộc tính Summary posiotion(group hay
report) và Summary type(Avg, min, max, sum, count…)
 Hỗ trợ phong phú các định dạng xuất ra: PDF, HTML, MHT, RTF,
TXT, CSV và MS Exel. Có thể xuất report ra định dạng hình ảnh
như: BMP, EMF, GIF, JPEG, PNG, TIFF,WMF.
 + Importing: có thể nạp lại report cũ của mình tử MS Access,
Crystal Reports, Data Dynamics Active Reports vàoXtraReport.
 + Tìm kiếm ở chế độ xem trước: giúp cho người dùng có thể tìm

những đoạn text mong muốn.
 + Hỗ trợ thừa kế, Bookmark, Watermarks.
• ASPxComboBox
ASPxComboBox là một control chuẩn của Windows, cũng như trong .Net
FrameWork. Nó cho phép hiển thị danh sách theo dạng list, ở trạng thái bình thường
nó khá giống ComboBox khác, có mũi tên sổ xuống để chọn danh sách. Ưu điểm của
ASPxCombobox là người dùng có thể hiện thị được nội dung ở nhiều cột, thuộc các
mục khác nhau ví dụ như IDTin tức và tên danh mục tin tức.

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

17


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
3.2. Giao diện website
3.2.1. Phân hệ người dùng
3.2.1.1. Trang chủ:

Hình 12: Giao diện trang chủ
Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

18


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
Giao diện trang chủ với màu xanh chủ đạo, phù hợp với tông màu chủ đạo của
wbsite trường, từ trên xuống lần lượt sẽ trình bày những thông tin, nội dung mà khoa
muốn thể hiện cho người sử dụng biết.
STT

Thành phần
1
Logo E-Commerce

Chức năng
Tạo điểm nhấn trên website, phân biệt giữa khoa

2

Thương mại điện tử với các khoa khác trong trường.
Gồm các mục dẫn đến các trang khác nhau, cho người

Thanh Menu

dùng dễ dàng thực hiện thao tác tìm kiếm thông tin theo
3

4
5
6

Dòng tiêu đề và

ý muốn.
Giới thiệu tên khoa “Thương Mại Điện Tử”, thuộc

những mục giới thiệu

trường CĐ CNTT Hữu Nghị Việt – Hàn và những

chuyên ngành đào tạo chuyên ngành mà khoa đào tạo.
Thông báo
Hiển thị những thông báo quan trong của khoa, nhầm
Sider

kịp thời thông báo cho sinh viên được biết.
Sider thể hiện những hình ảnh tiêu biểu về những hoạt

Mục tin tuyển sinh

động của khoa.
Hiển thị thông tin tuyển sinh của trường, nhầm mục
đích góp phần quảng bá hình ảnh trường, giúp công tác

7
8
9
10

Mục tin tức mới

tuyển sinh tiếp cận với nhiều người dùng.
Thể hiện những tin tức mới nhất của khoa, giúp người

Mục sự kiện mới

dùng cập nhật tin tức về khoa một cách nhanh chóng.
Thể hiện những sự kiện mới diễn ra trong khoa, người

Tin nổi bật

Mục liên kết

dùng có thể nắm bắt những sự kiện nổi bật trong khoa.
Thể hiện top 5 tin tức nổi bật của khoa
Với các đường link dẫn đến các khoa khác trong
trường, giúp người dùng có thể chuyển sang khoa khác

11

Footer

để tìm hiểu thông tin.
Thể hiện số người online, thống kê truy cập, website tận
dụng mạng xã hội liên kết với page facbook của trường
để quảng bá hình ảnh trường, đồng thời kết hợp với bản
đồ, giúp người dùng dễ dàng tìm thấy địa chỉ trường.

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

19


Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
3.2.1.2. Trang giới thiệu giảng viên

Hình 13: Giao diện trang giảng viên

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

20

Xây dựng Website giới thiệu Khoa Thương Mại Điện Tử
Nếu trang chủ với tông màu xanh chủ đạo, thì trang giới thiệu giảng viên với
màu nền màu tráng xám cộng sự phối hợp giữa nhiều màu sắc nổi bật, để thể hiện
được sự thân thiện, trẻ trung của đội ngũ giảng viên trong khoa.
Nội dung trong trang gồm có những phần mục giới thiệu thông tin giảng viên
trong khoa theo từng chuyên ngành cụ thể. Thông tin giảng viên được phân theo cấp
bật trưởng khoa, trưởng bộ môn và giảng viên để người dùng dễ dàng thấy được thông
tin giảng viên cần tìm.
3.2.1.3. Trang tin tức (tương tự cho các trang thông báo, trang sự kiện)

Hình 14: Trang tin tức theo danh mục
Trang này thể hiện nội dung của tất cả tin tức trong cùng một danh mục, tạo
điều kiện thuận lợi cho người dùng đọc tin tức về khoa một cách nhanh chóng và phù
hợp với mối quan tâm của người dùng.
Các trang sự kiện, thông báo tương tự với giao diện của trang tin tức.

Cuộc Thi Sản Phẩm Sáng Tạo Công Nghệ Thông Tin Và Truyền Thông 2015

21