xây dựng một website thương mại điện tử sử dụng công nghệ asp net mvc 3

MỤC LỤC
1
CHƯƠNG III:ỨNG DỤNG ASP.NET MVC 3 PHÁT TRIỂN WEB
SITE
3.1. Phân tích tổng quan về hệ thống.
3.1.1. Nội dung bài toán
Nhằm xây dựng một trang web bán điện thoại di động trực tuyến với các
chức năng dành cho cả người dùng (khách hàng) và người quản trị trang web.
Đảm bảo đủ các tiêu chí cơ bản của một Website có chất lượng là:
Hình 3.1.1.1- Các tiêu chí đánh giá website
Thực hiện một cách đáng tin cậy các nhiệm vụ của Website như là:
- Đầy đủ chức năng người dùng.
- Đầy đủ chức năng người quản trị.
- Có cơ chế kiểm soát lỗi và bảo đảm hệ thống thực hiện tốt.
- Bảo mật thông tin và chức năng của hệ thống.
- Mang tính sáng tạo so với các sản phẩm hiện tại.
3.1.2. Đối tượng sử dụng
Những sản phẩm Công nghệ thông tin hiện đại đều hướng tới xây dựng
theo hướng đối tượng. Tức là tất cả nhiệm vụ, chức năng của hệ thống đều được
bắt đầu từ các đối tượng (thể hiện của các lớp).
Nhóm người sử dụng được chia làm 2 đối tượng chính là người dùng
(User) và người quản trị hệ thống (Admin):
2
Hình 3.1.2.1- Nhóm người sử dụng hệ thống
3.1.3. Yêu cầu đặt ra với hệ thống mới
Để một trang web có thể tiếp tục tồn tại và phát triển hay không thì sản
phẩm mới được xây dựng phải có tính sáng tạo và mới mẻ với người sử dụng.
Đa số các trang web bán hàng trực tuyến hiện nay đều đảm bảo được đầy
đủ tính năng cho việc bán hàng trực tuyến như: Xem các sản phẩm, xem thông
tin, cấu hình sản phẩm, tìm kiếm sản phẩm, so sánh sản phẩm, xem tin tức, lựa
chọn mặt hàng, đặt hàng, thanh toán,

Tuy nhiên đa số các trang web đều không để ý đến sự tùy biến trong thể
hiện mà người sử dụng muốn đó là khả năng tùy biến, đáp ứng lại người dùng
một cách trực tiếp trong khi sử dụng trang web. Đó là khả năng Responsive
Ability.
Chúng ta có thể ví dụ như khi dùng một trang web người dùng không
thích một Menu với mầu sắc đó mà muốn một mầu họ ưa thích thì ta sẽ cho họ
lựa chọn mầu hiển thị.
Trang Web
Người quản trị
hệ thống
(Admin)
Người sử dụng
(User)
Thành viên hệ
thống
(User)
3
Hoặc khi họ không muốn nhìn thấy thì ẩn nó đi chẳng hạn. Nếu thực hiện
tốt những chức năng này thì một trang web mới ra đời hoàn toàn có thể áp đảo
các trang web mới với sự sáng tạo trong thiết kế.
Không những chỉ có chức năng chính là bán hàng trực tuyến mà ngoài ra
chúng ta phải xây dựng trang web như một hệ thống quản lý thực. Có nghĩa là
ngoài việc thực hiện chức năng mua bán sản phẩm thì hệ thống phải hướng đối
tượng:
- Với người sử dụng (User): Tìm kiếm sản phẩm, xem thông tin sản
phẩm, xem cấu hình, chức năng sản phẩm, xem các tin tức, lựa chọn
sản phẩm để đặt mua, đặt hàng qua mạng, thanh toán, đăng ký thành
viên hệ thống, đăng nhập, đăng xuất Chủ yếu là những chức năng
xem thông tin từ hệ thống chứ không thể sửa đổi chúng.
- Với người quản trị (Admin): Ngoài tất cả những chức năng của

người sử dụng hệ thống thì người quản trị còn có thể thay đổi nội dung
các sản phẩm, thêm mới, sửa xóa đối với tin tức, thành viên, đơn hàng,
mua bán, thống kê khi cần thiết, cấu hình các nội dung hiển thị như
Menu, Banner, quảng cáo, Nói chung là người quản trị có toàn quyền
với hệ thống mà họ quản lý.
3.2.Cài đặt và kiểm thử nội dung Website.
3.2.1. Thiết kế cơ sở dữ liệu cho phần mềm:
3.2.1.1. Cơ sở dữ liệu cho quản lý Bán Hàng trực tuyến
4
- Bảng Thành viên:
- Bảng Nhóm Tin:
- Bảng Tin Tức:
5
- Bảng Dòng Sản Phẩm:
- Bảng Nhà Cung Cấp:
- Bảng Sản Phẩm:
6
- Bảng Phương Thức Thanh Toán:
- Bảng Đơn Hàng:
- Bảng Đơn Hàng Chi Tiết:
7
Sở dĩ bảng Đơn hàng chi tiết này không tham chiếu tới mã sản phẩm có
trong bảng Sản phẩm bởi vì nếu người quản trị khi xóa đi một sản phẩm thì khi
ta hiển thị lên thông tin sản phẩm lấy từ bảng sản phẩm sẽ không lấy được. Và vì
lí do tham chiếu nên nếu ta đặt các rằng buộc thì ngay cả việc xóa một sản phẩm
sẽ phải xóa toàn bộ các đơn hàng chi tiết có mã sản phẩm đó rồi mới xóa được
sản phẩm này khỏi cơ sở dữ liệu. Điều này sẽ không thể nào giúp ta quản lý tốt
việc xử lý đơn hàng vì sau này nếu cần đối chiếu lại các đơn hàng xưa cũ sẽ
không có gì để tìm kiếm lại cả.
- Bảng Mua Bán:

3.2.1.2. Cơ sở dữ liệu cho cấu hình trang web
8
- Bảng Cấu Hình Banner:
- Bảng Cấu Hình Hỗ Trợ Trực Tuyến:
- Bảng Cấu Hình Menu Top:
9
- Bảng Cấu Hình Quảng Cáo Hai Bên:
- Bảng Cấu Hình Slide Show Quảng Cáo:
10
3.2.2. Thiết Kế Giao Diện Hệ Thống:
11
Bao gồm:
-1 Banner: hiển thị nội dung của công ty sở hữu trang web. Baner này
được làm bằng Flash với định dạng Swf với hiệu ứng động:
- Ngay Bên dưới Banner ở trên cùng là một Menu đa cấp: Khi ta di
chuột đến menu con nào của nó thì nó sẽ tự động thêm một mũ tên chỉ lên mầu
xanh và có mầu đậm hơn các menu khác.
Với thanh menu này thì menu nào có menu con thì nó sẽ tự động xổ ra
ngay khi ta di chuột vào menu đó. Với sự thể hiện đa cấp này ta có thể phân
thành bao nhiêu cấp độ cũng được
Và nó hoàn toàn tự động thay đổi khi ta thêm vào bảng cấu hình menu
trong cơ sở dữ liệu:
12
Điều này rất quan trọng khi ta đưa website lên mạng( Publish ) .Với
những người sử dụng không biết về lập trình họ chỉ cần sửa trong cơ sở dữ liệu
là được chứ không phải sửa lại code trong trang. Tính chất này được áp dụng
cho tất cả phần thể hiện nội dung ở trang Layout của các trang dành cho người
dùng.
- Ngay dưới Menu là một khung quảng cáo sản phẩm hoặc thông báo
tin tức nổi bật:

Sử Dụng Jquery để hiển thị 5 hình ảnh một cách ngẫu nhiên lấy từ cơ sở
dữ liệu. 5 hình ảnh này với 5 liên kết để xem chi tiết nội dung nổi bật khi khách
hàng Click vào, Điều này rất tiện cho việc giới thiệu và quảng cáo. Cứ sau 10
giây thì một hình ảnh sẽ đổi sang hình ảnh khác. Người dùng có thể chuyển ảnh
khi di chuột vào hình bên dưới.
- 2 bên tận cùng trái và phải của trang: là 2 Quảng cáo bao gồm 2 hình
ảnh và 2 liên kết. Chúng sẽ tự động điều chỉnh kích thước khi ta cuộn trang web
lên xuống mà không có hiệu ứng nào gây nhức mắt cả:
13
Và chúng cũng được lấy ra từ cơ sở dữ liệu:
- Phần các box bên trái của trang là bên chứa các dòng sản phẩm, các nhà
cung cấp có trong cơ sở dữ liêu:
14
Chúng được lấy ra trừ trong cơ sở dữ liệu dựa vào 2 bảng Dòng sản phẩm
và bảng nhà cung cấp, và đó cũng là 1 trong số các mà chúng ta cần 2 bảng này
để tham chiếu cho bảng sản phẩm chứ không gộp lại làm 1 bảng:
Và ở bên trái sẽ có 2 box nữa là box sản phẩm ngẫu nhiên, sản phẩm bán
chạy nhất:
Với ý tưởng là sản phẩm ngẫu nhiên sử dụng hàm Guid.NewGuid()) của
Visual Studio 2010 để sinh một cách ngẫu nhiên từ tất cả các sản phẩm có trong
bảng sản phẩm. Cũng tương tự như hàm sinh ngẫu nhiên trong Sql Server là
ORDER BY NEWID():
15
Còn những sản phẩm bán chạy là những sản phẩm được lấy ra từ bảng
mua bán. Những sản phẩm có số lượng bán ra nhiều nhất dựa trên bảng MuaBan
với trường Muaban=True.
- Phần nội dung bên phải của trang: là các chức năng của thành viên,
tìm kiếm sản phẩm, tìm kiếm tin tức, hiển thị những tin tức mới nhất, hỗ trợ trực
tuyến:
 Box thành viên:

Nếu chưa đăng nhập thì mặc định sẽ là .
Sau khi đăng nhập thành công và chọn mua sản phẩm thì giá trị của box
này sẽ thay đổi tùy theo mỗi phiên làm việc:
 Box Tìm kiếm sản phẩm: Chức năng này là tìm kiếm sản phẩm
theo những tiêu chí như tên sản phẩm, dòng sản phẩm, nhà cung cấp, giá tiền
trong khoảng nào đó.
Đối với việc tìm kiếm thì mọi thứ chỉ nên là Tương Đối tức là tìm kiếm
theo gần đúng với thông số nhập vào, người dùng chỉ cần nhập một ít thông tin
thì đã có thể tìm được những kết quả gần tương tự. Đối với LINQ thì phương
thức .Contains đã giúp chúng ta tìm kiếm gần đúng như Like của Sql:
16
Và ta cũng sẽ sử dụng một tính năng hỗ trợ rất tốt cho công việc tìm kiếm
gần đúng là tính năng tự động hoàn thiện (Auto Complete). Với ý tưởng là khi
tìm kiếm tên sản phẩm ta sẽ tự động liệt kê những tên tương tự ở bên dưới
những từ khóa mà người dùng vừa gõ vào để người dùng không cần nhớ nhiều
mà vẫn tìm chính xác được:
Sử dụng JavaScript kết hợp với liệt kê dữ liệu kiểu Json được cung cấp
bởi MicroSoft:
Với dòng sản phẩm, nhà cung cấp, giá tiền ta chỉ việc chọn trong thẻ
Select Option là được mà không cần nhập vào.
17
 Chức năng tìm kiếm Tin Tức:
Ta cũng sẽ xử lý tương tự như trên với Auto Complete cho tiêu đề của tin
tức:
 Những tin tức mới nhất: Ý tưởng là dựa vào thuộc tính ngày đăng
tin của mỗi tin tức ta sẽ sắp xếp theo trường này và hiển thị ra là được:
 Chức năng hỗ trợ trực tuyến: Chức năng này thực chất chỉ là liệt
kê từ bảng hỗ trợ trực tuyến ra một số tài khoản Yahoo và trạng thái của tài
khoản Yahoo này:
18

- Phần Nội dung chân trang:
Đây là phần cuối của trang web để hiện thị bản quyền website và một số
tính năng giới thiệu cho người dùng
- Thanh Tab sản phẩm theo một số tiêu chí:
Ngay bên trên phần chân trang là một phần nội dung ở giữa trang web để
thống kê một số sản phẩm theo một số tiêu chí như là: Sản phẩm mới nhất, bán
chạy nhất, khuyến mại nhiều nhất, ngẫu nhiên:
Việc sử dụng tính năng Tabed thông qua thanh Tab sẽ tiết kiệm rất nhiều
không gian hiển thị cho trang web, khi load trang lên ta sẽ liệt kê hết nhưng
không hiển thị hết mà chỉ khi nào người dung bấm vào thanh tab thì nó mới thay
đổi hiển thị. Nói cách khác là 1 khu vực dùng chung cho nhiều chức năng:
19
Khi ta chọn thẻ tab nào thì nó sẽ được đổi mầu đỏ và hiển thị nội dung mà
không cần tải lại trang nữa:
3.2.3. Thiết Kế Chức Năng:
Trang web được thiết kế theo hướng đối tượng và ở đây ta sẽ chia làm
2 đối tượng chủ yếu là người dùng (User) và người quản trị (Admin).
Chúng ta sẽ phân chia trang web ra thành 2 thành phần chức năng chính là
phần dành cho người quản trị và phần dành cho người dùng.
20
Chức năng kiểm soát một số lỗi thông dụng:
Trước khi đi vào nội dung chính ta sẽ phải kiểm soát một số lỗi thông
dụng nhất trên trang web hay mắc phải. Những lỗi này sẽ dừng chương trình,
đưa ra những thông báo lỗi rất khó chịu khi người dùng có những hành động
không đúng:
+ Lỗi không tìm thấy một trang nào đó trong trang web (Error 404):
Đây là một lỗi thường thấy nhất khi trình duyệt không tìm được một trang nào
đó trên Hosting. Thường là do người dùng thay đổi địa chỉ trang, hoặc vì lí do
nào đó trang bị xóa đi mất:
Với Asp.Net thì việc có file Global.asax thì chúng ta thật may mắn khi để kiểm

soát những lỗi này một cách đơn giản thông qua Application_Error. Có nghĩa
là khi ứng dụng phát sinh lỗi ta sẽ xử lý trong này:
Khi phát sinh lỗi ta sẽ điều hướng người dùng sang một trang HTML khác
để người dùng tiếp tục sử dụng trang mà không bị dừng lại.
21
Việc bắt các lỗi khác ta cũng làm tương tự. Có thể hiển thị lỗi hoặc điều
hướng là tùy chúng ta.
Chức năng Viết lại đường dẫn trang web (Rewrite URL):
Với đường dẫn mặc định của MVC là theo cấu trúc: Controller/ Action/
ID rất dễ bị những người xấu nhận ra và tìm cách phá hoại hệ thống. Cách tốt
nhất là chúng ta mã hóa đường dẫn đi một cách tùy ý khiến cho người muốn phá
hoại hệ thống sẽ khó khăn hơn rất nhiều khi muốn phá hoại:
Như hình trên thì cấu trúc mặc định của trang Controller Home/ Action là
Index với Id tùy biến theo đường dẫn. Ta có thể thay đổi cấu trúc UR: bằng cách
thêm vào một Routes.MapRoute:
Giả sử ta thay đổi URL khi xem chi tiết một sản phẩm có mã (id) là sp001 từ
mặc định là: http://localhost:xxxx/SanPham/Details/sp001 giờ sẽ được đổi
thành: http://localhost:xxxx/Xem Chi Tiết/Thông Tin Của Sản Phẩm/sp001-Chi
Tiết.html
22
Và kết quả là như nhau. Tương tự ta có thể sửa tất cả các url lại theo cách
đó vị dụ như tìm theo dòng sản phẩm, nhà cung cấp:
23
3.2.3.1. Người Dùng (Users)
Ngay từ khi truy nhập vào trang chủ ta đã có thể liên kết tới tất cả các
chức năng dành cho người dùng thông qua menu trên cùng hoặc qua 2 bên trái
phải như phần giao diện ta đã nói sơ qua về chúng:
- Menu thông tin: là một số trang web giới thiệu về người thiết kế trang
web, người sử dụng, cách đặt mua hàng, các bước thanh toán
- Chức năng tin tức:

Ngay từ khi vào trang web người dùng đã có thể xem các tin tức ở trang
chủ hoặc phần nội dung bên phải của trang web:
24
Việc hiển thị với số lượng nội dung khá nhiều thì việc phân trang là rất
cần thiết cho trang web. Mỗi khi liệt kê tin tức và sản phẩm đều thiết kế chức
năng này để người dùng có thể xem toàn bộ tin tức hoặc sản phẩm có trong
CSDL.
Với mỗi tin tức khi hiển thị ra ta sẽ chỉ hiển thị một số nội dung chính nhu
tiêu đề, mô tả sơ lược, ngày đăng tin chứ không thể nào hiển thị ra tất cả. Nhất là
phần nội dung chi tiết, chúng sẽ chiếm rất nhiều kích thước của trang web nên ta
sẽ phải điều hướng khi người dùng muốn xem chi tiết thì mới liệt kê đầy đủ tất
cả các thông tin liên quan tới tin tức đó.
Với tin tức trên khi ta muốn xem tin tức thì bấm vào ảnh hoặc phần tiêu
đề tin tức ta sẽ điều hướng chúng tới một trang khác để xem đầy đủ nội dung tin
tức, chỉ cần kèm theo đường dẫn khóa chính của tin tức (ID) là được:
Tuy nhiên vì trang web được thiết kế với khá nhiều chức năng ở 2 bên trái
và phải nên việc xem tin tức cũng không dễ dàng vì phần ở giữa có kích thước
25