Thiết kế ứng dụng DoanEcom

Một phần của tài liệu Tìm hiểu thương mại điện tử & cài đặt ứng dụng thử nghiệm. (Trang 34 - 43)

Với yêu cầu phân tích như trên, ứng dụng DoanEcom của ta sẽ hoạt động theo lược đồ tổng quát thể hiện như hình dưới, ứng dụng mà ta xây dựng có cấu trúc thư mục chứa các trang asp và tài nguyên như sau :

Thư mục Mục đích

DoanEcom Thư mục gốc chứa các trang chính của ứng dụng Images Thư mục chứa ảnh các mục hàng và của ứng dụng Pagelets Thư mục chứa các mẫu trang thường xuyên sử dụng Admin Thư mục chứa các trang phụ vụ cho đơn thể Admin

Database Thư mục chứa file lưu các thông tin kết nối đến cơ sở dữ liệu

Trang chủ mà người dùng sẽ tiếp xúc lần đầu tiên khi ghé thăm Website của ta là default.asp. Ta hãy tạo thư mục ảo mang tên DoanEcom trong IIS trỏ đến thư mục vật lý bất kỳ trên đĩa với cấu trúc thư mục nếu ở phần trên.

Product List Product Details Orders List AddToCart Orders Sign In/Register Category Shopping Cart Your Account

Admin Module

DoanEcom HomePage HomePage

Lược đồ quan hệ của các đơn thể trong toàn bộ ứng dụng DoanEcom

• Phần Header: chứa tiêu đề như biểu tượng hay Logo của công ty và các mục chọn chính phục vụ cho toàn ứng dụng.

• Phần trang Footer: chứa các thông tin quản cáo. quản cáo là một cách thức đem lại lợi nhuận cho các Website của ta. Ta dùng một phần diện tích cho nó.

• Phần danh mục mặt hàng (catalogue) được thể hiện dọc bên trái trang. Phần này luôn hiển thị để khách hàng lựa chọn.

• Phần nội dung trang (Body): trong phần này chúng ta thể hiện những tuỳ biến tuỳ theo tương tác của người dùng. Ví dụ nếu khách hàng chọn một chủng loại hàng thì danh sách các mẫu hàng sẽ hiển thị. Nếu người dùng chọn đăng ký (register) thì biểu mẫu Form sẽ thế chỗ để khách hàng điền thông tin cần thiết…

5.2. Cài đặt

5.2.1. Các trang cơ bản

Các phần tiêu đề trang (header) chân trang (footer) và danh mục hàng (catalogue) có thể xây dựng tách biệt thành những mẫu trang (pagelete) sau đó nhúng vào trang chính bằng chỉ thị <!--#include-->.

Trong trang chủ default.asp chúng ta xây dựng thêm mẫu trang special.asp cho phép hiển thị mặt hàng đang trong đợt khuyến mãi, giảm giá hoặc mặt hàng mới cần thu hút sự chú ý của khách hàng. Trang default.asp có nội dụng sau :

• Trang default.asp

Header.asp Categories.asp Body.asp

Trang chủ của ứng dụng DoanEcom

• Trang categories.asp liệt kê danh mục các mặt hàng

danh mục của các mặt hàng sẽ được đặt bên trái của trang để người dùng có thể chọn bất kỳ lúc nào, nội dụng file như sau :

Trang categories.asp

• Trang header.asp

Phần tiêu đề mỗi trang thể hiện thông qua header.asp. Chúng ta bố trí tiêu đề trang gồm ba phần: Một ảnh logo lớn mang biểu tượng E_Shopping. Đối với biểu tượng của công ty E_Shopping, chúng ta đặt Hyperlink trỏ về trang Default.asp. Điều này giúp người dùng có thể kích chuột vào biểu tượng để quay về trang chủ bất kỳ lúc nào. Mục Sign In/Register, chúng ta tuỳ biến theo trạng thái đặng nhập của người dùng thông qua biến Session(“login”). Nếu người dùng đã đăng nhập trước đó, biến Session(“login”) mang giá trị true, nội dung chuỗi hiển thị sẽ là Sign Out(username) cho phép thoát khỏi user hiện hành. Nếu người dùng chưa đăng nhập, chuỗi hiển thị sẽ là Sign In/Register chứa

Hyperlink trỏ đến trang login.asp hiển thị Form đăng nhập. Nội dung trang Header.asp như sau :

Trang header.asp

• Trang Footer.asp

Phần trang Footer chứa các thông tin quảng cáo. thường quảng cáo được đặt là các hình ảnh thay đổi ngẫu nhiên (banner) mỗi khi người dùng xem nội dung trang. Đối tượng AdRotator sẽ giúp ta thay đỗi ngẫu nhiên các ảnh quảng cáo.

Ta quảng cáo cho ba công ty ta đặt các ảnh quảng cáo trong thư mục /images của ứng dụng, tạo file văn bản ad.txt như sau :

REDIRECT /adredir.asp WIDTH 440 HEIGHT 60 BORDER 1 * /DoanEcom/images/AD_1.GIF http://www.bytecomp.com/ (adsbygoogle = window.adsbygoogle || []).push({});

Check out the ByteComp Technology Center 20

/DoanEcom/images/AD_2.GIF http://www.bytecomp.com/

Check out the ByteComp Technology Center 20

/DoanEcom/images/AD_3.GIF http://www.bytecomp.com/

Check out the ByteComp Technology Center 20

Vậy nội dung trang Footer.asp đơn giản như sau:

Phương thức GetAdvertisement sẽ trả về nội dung ảnh cần hiển thị. Mỗi lần refresh lại trang ta sẽ thầy ảnh quảng cáo phía chân trang tự động thay đỗi hình-

Trang Footer.asp

• Trang Special.asp

Trang special hiển thị mặt hàng đặc biệt mà nhà cung cấp muốn khách hàng lưu tâm đến

Special.asp

• Trang Register.asp

Trước khi mua hàng khách hàng cần cung cấp thông tin để liên lạc. Thông tin này có thể được lưu một lần duy nhất thông qua bước đăng ký (register). ở đây ta chỉ cần lưu lại địa chỉ khách hàng cùng với tên username và mật khẫu password để chứng thức và xác định định danh ngưòi dùng trong các lần giao dịch sẽ diễn ra trong tương lai.

Man hình đăng ký thông tin về khách hàng

• Trang login.asp

Trang login kiểm tra mật khẫu và lưu lại trạng thái đăng nhập của người dùng (khách hàng) trong suốt phiên làm việc (session). Việc kiểm tra login nếu thành công (so khớp username và password) biến session(“login”) sẽ bật cờ true. Trang này cũng cung cấp thêm Hyperlink cho phép khách hàng đăng ký mới nếu họ chưa có tài khoản đăng nhập. Lien kết Click here to register new account trỏ đến trang register.asp. Trang sẽ hiển thị như sau :

• Trang catalogue.asp

Để khách hàng duyệt xem danh mục hàng hoá chi tiết, chúng ta xây dựng trang catalogue.asp. Trang này được gọi tương ứng với Hyperlink trong mục hàng bên trái hiển thị bởi catalogories.asp trứơc đó. Khi catalogue được gọi, tham số truyền trên URL cho trang là tên danh mục ProductType.

Liêt kê chủng loại mặt hàng

• Trang Details.asp

Trang Details.asp cung cấp tham số Productcode trên địa chỉ URL cho biết mã số sản phẩm cần xem chi tiết. ở đây ta chỉ hiển thị thêm thông tin về ngày xuất xưởng của sản phẩm.

Details.asp 5.2.2. Thẻ hàng Shopping Cart

Khi người dùng chọn mua một mặt hàng nào đó, họ có thể thêm bớt số lượng cần mua, thực hiện tiếp việc chọn lựa các mặt hàng khác, xoá các mặt hàng đã chọn trước đó. Tất cả những thao tác này có thể thực hiện thông qua khái niệm thẻ hàng Shopping cart. Thẻ hàng cho phép lưu giữ những thông tin tạm về mục hàng cần mua trước khi người dùng ra quyết định thanh toán. Ta cài đặt như sau:

Chức năng của thẻ hàng tương tự bảng dữ liệu tạm. thẻ hàng phải có khả năng thêm vào một hoặc nhiều mẫu tin liên quan đến mục hàng. Xoá những mẫu tin trước đó. Mẫu tin mà ta chứa trong thẻ hàng cần lưu trữ 2 thông tin chính đó là mã số mặt hàng được chọn và số lượng cần mua. Do tính chất tạm thời của thẻ hàng ta có thể dùng chính biến session để lưu giữ thông tin. Thẻ hàng gồm các thủ tục như sau:

AddItem Thêm một mặt hàng mới vào thẻ hàng

RemoveItem Xoá hoặc giảm số lượng của mặt hàng trong thẻ hàng ClearAllItem Xoá tất cả các mặt hàng hiện có trong thẻ hàng GetQuantity Trả về số lượng của một mặt hàng

GetItemCount Đếm số mặt hàng có trong thẻ hàng

• Xem nội dung thẻ hàng với trang ShoppingCart.asp

Trang Shoppingcart.asp là trang được kích hoạt mỗi khi người dùng chọn Hyperlink Add to cart để đặt mua sản phẩm. Sản phẩm được chọn sẽ được đưa vào thẻ hàng, đồng thời ShoppingCart.asp cũng hiển thị danh sách các mặt hàng để người dùng biết được những mục mà mình đã chọn, khách hàng có thể thêm vào hoặc thay đổi số lượng của các mặt hàng hiện hành.

Nội dung Shopping Cart chứa các mặt hàng do người dùng 5.2.3. Đơn đặt hàng (CheckOut) (adsbygoogle = window.adsbygoogle || []).push({});

Khi khách hàng đã quyết định mua hàng thì ta cần lưu thông tin từ thẻ hàng vào đơn đặt hàng. Công việc này do trang checkout.asp lo liệu.

Trang checkout.asp thực thi khi khách hàng Chọn Hyperlink CheckOut từ trang ShoppingCart.asp. Nó sẽ thực hiện hai nhiệm vụ. Thứ nhất kiểm tra xem người dùng đã đăng nhập trước đó hay chưa. Nếu chưa hướng người dùng đến trang login.asp. Thứ hai nếu đã đăng nhập thì sử dụng thông tin của người dùng tạo đơn đặt hàng, lưu nội dung thẻ hàng vào các bảng trong cơ sở dữ liệu.

Thông báo về đơn đặt hàng

• Trang YourAccount.asp

Sau quá trình đặt hàng là khâu theo dõi tiến độ đơn hàng. Khi người dùng đăng nhập họ có thể biết được những thông tin này bằng cách chọn Hyperlink Your Account từ phần tiêu đề trang.

Một phần của tài liệu Tìm hiểu thương mại điện tử & cài đặt ứng dụng thử nghiệm. (Trang 34 - 43)