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

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.

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ángtạ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ữngkiế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ựngsả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ữngsai 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ànhcảm ơn!

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

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

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

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ệptrong cả nước đều có những website riêng cho mình Sự cần thiết của một websitetrong 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àycà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ếtnhu 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ộtdiễ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ôngtin 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 khoathuậ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ếpthu 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ếnthứ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

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ứcnă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

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

2.2.2 Biểu đồ DFD cấp 0

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

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

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

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

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áychủ để 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à doanhnghiệ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ựchiệ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 khaigiải pháp với chi phí thấp

− Đơ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ủabạn

− 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ệctrong 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ạnphá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ạytrong máy ảo

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ậptrì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ậptrung 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)

Ngôn ngữ truy vấn của Microsoft SQL Server là Transact–SQL(T–SQL) SQL là ngôn ngữ SQL mở rộng dựa trên tiêu chuẩn của ISO (InternationalOrganization for Standardization) và ANSI(American National Standards Institute)được sử dụng trong SQL Server.

T-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

3.1.1.3 Giới thiệu DevExpress

DevExpress là một component library hỗ trợ giao diện cho NET Frameworkcự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ệccho 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ợ

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áocá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ểuWYSIWYG (tay làm - mắt thấy) của CKSource Chương trình này có thể tích hợp vàocá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

− 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ụ cholớ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

− 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

− 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êncá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

Đối tượng SqlCommand cho phép bạn chỉ định các loại tương tác mà bạn muốnthự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ỉnhsử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àihọc thì tôi chỉ giới thiệu duy nhất đối tượng SqlCommand

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 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ôngphả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, đốitượ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

− Đặ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ườidùng click vào Menu

ASPxNavBar cho phép ta tạo ra những thông tin ngắn gọn, đặt trong các ô điềuhướng (Navigation bar), tạo nên một giao diện giống như của Microsoft Outlook

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ủaDevExpress 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ácitem 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ửacá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ùngnhấ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ứcnă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

 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ênhàng