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

- 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àn

MỤC LỤC

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):

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)

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

- Bảng Thành viên:

- Bảng Nhóm Tin:

- Bảng Tin Tức:

- Bảng Dòng Sản Phẩm:

- Bảng Nhà Cung Cấp:

- Bảng Sản Phẩm:

- Bảng Phương Thức Thanh Toán:

- Bảng Đơn Hàng:

- Bảng Đơn Hàng Chi Tiết:

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

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

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

3.2.2 Thiết Kế Giao Diện Hệ Thống:

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:

Đ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ả:

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:

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():

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:

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

 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:

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

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.

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

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

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:

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:

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

không rộng rãi Ta sẽ sử dụng một công cụ được cung cấp miễn phí trên mạng

để trình diễn ảnh, trình diễn nội dung thông qua một cửa sổ khác đó là FancyBox Thay vì trình diễn ảnh trên một cửa sổ lớn ta sẽ trình diễn phần nội dung chi tiết của tin tức trên cửa sổ lớn này bằng cách nháy đúp chuột vào phần nội dung chi tiết mà ta muốn xem:

Một cửa sổ lớn hiện ra sẽ hiển thị hết toàn bộ màn hình của người dùng

và ta sẽ xem được chi tiết dễ dàng Để thoát ra khỏi ta chỉ cần nháy vào dấu nháy đóng cửa sổ hoặc bấm phím Esc

Để tìm kiếm tin tức được phân loại theo nhóm tin như là: Thông Báo Chính, Tin Khuyến Mại, Đánh Giá Sản Phẩm, ta tìm kiếm thông qua menu trên cùng hoặc thông qua khung tìm kiếm bên phải trang web:

- Chức năng Sản Phẩm:

Ngay từ đầu khi vào trang web như ta đã nói từ trước thì những sản phẩm nổi bật theo một số tiêu chí đã được thống kê lại và người dùng có thể xem qua menu trên cùng, phần nội dung bên trái, thông qua thanh tab ở giữa, khung tìm kiếm sản phẩm bên phải nữa:

Và việc hiển thị của sản phẩm ta cũng làm như hiển thị tin tức Ta sẽ chỉ hiển thị một số thông tin cần thiết nhất mà thôi

Mỗi sản phẩm sẽ hiển thị như hình trên Với những sản phẩm mới nhất sẽ

có một Icon thông báo New ở bên trên trái, với những sản phẩm có khuyến mại thì sẽ hiển thị Icon hình giỏ quà ở bên trên phải Để việc xem thông tin sản phẩm tiện lợi hơn khi người dùng xem nhanh một sản phẩm ta sẽ cung cấp thêm tính năng Auto ToolTip tức là khi người dùng di chuyển chuột vào phạm vi hiển thị một sản phẩm nào thì một cửa sổ nhỏ sẽ tự động hiện lên để xem nhanh một số tính năng cần thiết hơn

Để xem giữ nguyên trạng thái xem thông số của sản phẩm này ta bấm phím “S” để có thể xem, di chuyển chuột trên tooltip, copy thông mà không bị mất cửa sổ Nếu muốn thoát trạng thái giữ nguyên xem nhanh này ta chỉ cần di chuột ra khỏi tooltip và nháy chuột trái một lần nữa là được.

Ngoài Xem nhanh ta cũng có thể xem chi tiết nhất như xem tin tức bằng cách vô cùng đơn giản là khi bấm chuột vào sản phẩm muốn xem là được

Điều đặc biệt với mỗi sản phẩm là chúng cũng được bổ xung thanh Tab

để xem một số tính năng khác so với thông tin chi tiết như thông số kỹ thuật, so sánh sản phẩm, thông tin khuyến mại:

 Thông số kỹ thuật:

Là một điều không thể thiếu với mỗi sản phẩm hiện đại Việc lưu trữ sẽ tốn rất nhiều nếu ta không có thuật toán xử lý tối ưu nhất Và có 2 phương án được đề ra là:

+ Phương án 1: Xây dựng một bảng thông số kỹ thuật rồi với mỗi sản phẩm khi ta thêm vào sẽ lưu các thông số

+ Phương án 2: Xây dựng một trường thông số kỹ thuật để lưu các thông

số kỹ thuật vào rồi sử dụng các hàm xử lý xâu ký tự để đọc dữ liệu ra

Khi so sánh 2 phương án trên ta thấy phương án rất tiện và dễ dàng cho quá trình lưu trữ và xử lý về sau nhưng lại tốn quá nhiều bảng cho nó Phương

án 2 tuy khó xử lý và lưu trữ nhưng lại tỏ ra vượt trội về dung lượng so với phương án 1 Vì thế ta sẽ lựa chọn phương án 1 Vì thế ta sẽ thêm vào bảng SanPham 1 trường mới là trường thông số kỹ thuật:

Tuy nhiên với phương án này ta buộc phải lưu thông số kỹ thuật theo nguyên tắc đặt ra Visual Studio cung cấp cho ta 2 hàm để phân chia dữ liệu kiểu chuỗi là Regex và Split 2 hàm này sẽ đọc và tách dữ liệu ra theo một ký tự đặc biệt nào đó hoặc theo một nguyên tắc ta đặt ra ví dụ như ký tự đặc biệt: @,$,

%,#, hoặc nguyên tắc là một loạt số [0 9], hoặc 1 loạt ký tự [a- Z] để ngăn cách Chúng ta cùng xem xét đoạn quy tắc đặt ra dưới đây với trường thông số

Ngôn ngữ :& Tiếng Việt, Tiếng Anh@

Kiểu điện thoại :& Thanh (thẳng)@

Với mỗi một thông số con thuộc chi tiết ta phân cách ra bởi dấu @ ta sẽ lọc ra được các thông số và cả giá trị của thông số đó Ta cần phải phân thêm một lần nữa để tách được giữa thông số và giá trị của nó Ta sử dụng dấu & để chia ra một lần nữa giữa thông số và giá trị của thông số đó là được

Và đây là kết quả sau khi ta tách đoạn thông số kỹ thuật trên:

Tuy có khó khăn về mặt xử lý, lưu trữ nhưng chúng ta đã hoàn thành được chức năng xem thông số kỹ thuật của 1 sản phẩm Chúng ta sẽ dùng chức năng này cho việc tiếp theo

 So Sánh Sản Phẩm:

Sau khi đã làm được phần thông số sản phẩm ta có thể dựa vào chức năng

đó để so sánh thông số giữa các sản phẩm với nhau để người dùng có thể so sánh tính năng giữa mỗi sản phẩm để chọn mua sản phẩm nào ưu việt hơn Ý tưởng cho chức năng này là truyền vào một trang so sánh các mã sản phẩm, từ mã sản phẩm đó ta đọc các thông số theo thứ tự và sắp xếp ngang hàng với nhau thì ta sẽ

dễ dành đối chiếu các thông số giữa các sản phẩm với nhau

Sau khi bấm thẻ Tab sang tab So Sánh Sản Phẩm ta sẽ liệt kê ra các sản phẩm để so sánh

Tuy nhiên những sản phẩm này phải cùng loại thì mới so sánh được vì nếu không cùng loại thì thông số kỹ thuật không thể nào giống nhau để so sánh được Ví dụ như khi ta xem một phụ kiện khác thì khi bấm vào so sánh thì những thứ có thể so sánh được với phụ kiện khác thì cũng phải là phụ kiện khác thì mới hợp lý.

Để so sánh ta chỉ cần chọn một sản phẩm cùng loại trong danh sách đã liệt kê sẵn ở tab So Sánh Sản Phẩm này chúng ta sẽ được điều hướng sang trang

so sánh sản phẩm:

 Chức năng Đưa Sản Phẩm Vào Danh Sách (Giỏ Hàng):

Đây là một chức năng vô cùng quan trọng với trang web bán hàng trực tuyến Và để đưa một sản phẩm vào những mặt hàng bạn chọn để đặt hàng thì

mỗi sản phẩm sẽ có giá tiền và 1 icon giỏ hàng Ta chỉ cần bấm vào thì một hộp thông báo sẽ hiện lên báo cho ta biết sản phẩm với tên và giá tiền ta vừa chọn đã được thêm vào danh sách những sản phẩm người dùng lựa chọn:

Ta sẽ nói kỹ hơn về chức năng này ở phần sau.

- Chức năng dành cho thành viên hệ thống:

 Đăng ký thành viên

Với mỗi người dùng khi muốn tham gia làm thành viên của hệ thống, chức năng này cũng dành cho người quản trị khi đăng nhập vào hệ thống Mục tiêu chủ yếu của thành viên là phân ra thứ bậc các quyền hạn để người dùng có những chức năng dành riêng cho mình

Trước khi muốn đăng nhập vào trang web ta phải có một tài khoản trước Và để có tài khoản đó ta phải đăng ký thành viên:

Ta có thể đăng ký thành viên thông qua menu Thành Viên ở trên cùng hoặc liên kết Đăng ký ở khung thành viên bên phải trang:

Yêu cầu ở đây là với mỗi thành viên thì phải có những thông tin tối thiểu là tên đăng nhập, mật khẩu, địa chỉ Email và các thông tin khác… Và không thể có hai tên truy nhập giống nhau vì đây là điều kiện tối thiểu để phân biệt các thành viên với nhau Sau khi bấm vào đăng ký thành viên:

Khi người dùng bấm vào nút đăng ký mà chưa nhập đầy đủ các thông tin cần thiết thì sẽ thông báo lỗi Sử dụng Html.ValidationMessageFor Là một đối tượng chuyên kiểm soát các lỗi do người dùng nhập vào.

Nếu nhập mật mã và mật mã nhập lại không giống nhau cũng sẽ báo lỗi

Còn một trường hợp là tên đăng nhập này đã có người đăng ký rồi thì không thể có một tên đăng nhập nữa như thế vì đây là khóa chính Ta cũng sẽ nhận được thông báo lỗi:

Với trường dữ liệu kiểu ngày tháng ta sẽ cho người dùng có thể chọn giá trị thông qua Control Date Picker hoặc có thể nhập tùy ý:

Và nếu thành viên này nhập ngày tháng năm sinh là ngày tháng năm hiện tại hoặc thành viên này quá ít tuổi cũng sẽ không được đăng ký:

Nếu không vi phạm những lỗi này thì tài khoản sẽ được thông báo là tạo thành công

 Đăng nhập thành viên:

Ngay sau khi đăng ký thành công một tài khoản mới Ta sẽ sử dụng luôn tài khoản này để đăng nhập vào hệ thống bằng cách click vào liên kết đăng nhập

ở bên phải trang

Ở form đăng nhập này ta cũng phải xử lý 2 trường hợp là:

- Nhập không đủ thông tin cần thiết:

- Tài khoản này chưa có hoặc mật khẩu không đúng:

Nếu không rơi vào 2 trường hợp này thì Thành Viên sẽ được đăng nhập vào hệ thống Và khi đăng nhập thành công thì hệ thống sẽ hiển thị tên thành viên lên trên cùng bên phải của trang web

Và lúc này liên kết đăng ký và liên kết đăng nhập sẽ biến mất trên thanh menu trên cùng và thay vào đó là liên kết đăng xuất khỏi trạng thái đăng nhập, liên kết để đổi mật khẩu và liên kết tới trang để xem những đơn hàng của thành viên này.

Và nếu không rơi vào 2 trường hợp này thì thay đổi thành công:

 Đăng xuất thành viên::

Chức năng này là khi thành viên không muốn truy nhập vào trang web nữa Ta sẽ phải xóa hết các biến phiên Session và hiển thị lại nội dung như lúc chưa đăng nhập

Để thực hiện chức năng này ta bấm vào liên kết Đăng xuất trên menu thành viên hoặc khung thành viên ở bên phải trang:

Sau khi bấm vào liên kết Đăng Xuất:

- Chức năng giỏ hàng:

Với mỗi phiên làm việc- tức là khi người dùng bắt đầu truy nhập vào

Website thì ta sẽ cho họ một giỏ hàng để khi gặp một sản phẩm nào mà khách hàng thích họ sẽ lựa chọn sản phẩm đó

Ở đây chúng ta sẽ tạo một lớp GioHang.Cs

Với Một Số Biến Toàn Cục Dạng Bảng (DataTable)

Lớp Giỏ hàng này sẽ được tạo mới ở mỗi phiên bắt đầu làm việc, và hủy

bỏ khi hết phiên làm việc thông qua các biến Session trong file Global.asax

Ở Mỗi phiên bắt đầu làm việc thì hàm tạo sẽ được gọi là một bảng lưu trữ các thông tin về những sản phẩm của khách hàng đã chọn sẽ được lưu vào trong biến này Chúng sẽ được xóa khi kết thúc phiên làm

Để thuật tiện việc chọn mua ta sẽ thêm vào mỗi thông tin sản phẩm một nút là nút Mua, và mỗi khi người dùng bấm vào đó thì sản phẩm họ lựa chọn sẽ được đưa vào giỏ hàng của riêng họ và hiện lên thông báo.

Ta sẽ lấy mã sản phẩm, tên sản phẩm, giá tiền Với số lượng mặc định là 1 sản phẩm Còn nếu muốn thay đổi số lượng tăng thêm hoặc giảm đi ta sẽ sửa ở trang giỏ hàng Để truy nhập vào trang giỏ hàng ta truy nhập thông qua menu

ở bên dưới Banner trang web hoặc ở khung thành viên có một liên kết hiển thị số lượng sản phẩm đã có trong giỏ hàng Ta sẽ bấm vào liên kết

đó để xem giỏ hàng của mỗi phiên:

Ở trang giỏ hàng: