Chương 3. HIỆN THỰC HỆ THỐNG
3.1. Tổng quan hệ thống mua sắm thông minh
3.1.7. Quản lý dữ liệu website
a. Giới thiệu
Đây là tool chỉ cho admin thao tác và nó tách biệt hoàn toàn so với web hiển thị sản phẩm, nơi sẽ quản lý các dữ liệu rút trích từ trên web về từ tool 1, nó sẽ lấy dữ liệu từ SQL Server lên và hiển thị lên một trang để tiện cho các admin quản lý có thể thêm, xóa, sửa các dữ liệu đã rút trích về một cách dễ dàng, minh bạch và nhanh chóng. Trong tool này nhóm xử dụng công nghệ DevExpress trên nên tảng ASP.NET. Trong công nghệ này đã giúp xây dựng giao diện, các chức năng cơ bản như thêm xóa sửa tìm kiếm, sắp xếp theo một điều kiện nào đó nên khi sử dụng sẽ không phải mất thời gian xây dựng lại giao diện cũng như một số chức năng đó nên sẽ tiết kiệm một lượng thời gian tương đối nhiều, ngoài ra nhóm đã tích hợp thêm một Framework eXpand và chung với DevExpresss, thực chất eXpand là một Framework cung cấp thêm cho DevExpress nhiều chức năng hơn nhưng nhóm tích hợp eXpand vào để sử dụng chức năng import dữ liệu bằng file Excel.
Ngoài ra còn có xử lý chuyển đường link ảnh thành một chuỗi Byte rồi show lên trang hiện thị điều mà SQL Server không thể làm được như vậy các admin sẽ dễ dàng nhận biết dữ liệu đó là gì và sẽ dễ dàng hơn trong việc quản lý. Ngoài ra admin có thể quản lý được các tài khoản đã đăng kí và sử dụng web một cách hiệu quả, có thể khóa tài khoản nếu khách hàng có hành vi tiêu cực cũng như sẽ lưu lại những
57
ý kiến đánh giá của khách hàng về sản phẩm. b. Cấu trúc
Cấu trúc của tool này được xây dựng trên công nghệ DevExpress theo ngôn ngữ ASP.NET, DevExpress được chia thành 3 phần là: .Module, .Module.Web và .Web.Module: Đây là nơi sẽ xử lý dữ liệu từ SQL lên cũng như thiết lập giao diện khi lên web. Phần Business Objects: Đây sẽ là nơi chúng ta sẽ lấy cơ sở dữ liệu từ SQL Server lên, ở đây nhóm sẽ dùng XPO của DevExpress để xây dựng cấu trúc dữ liệu.
Và đây sẽ là giao diện của XPO để chúng ta thực hiện thao tác tạo cơ sở dữ liệu.
Chúng ta thấy trong SQL Server đã tự động tạo ra cơ sở dữ liệu như chúng ta đã tạo ở XPO. Ngoài các bảng đã tạo thì DevExpress cũng tự động tạo các bảng liên quan đến chức năng của nó cũng như những chức năng của eXpand Framework hỗ trợ. Vậy chúng ta đã hoàn thành các bước tạo cơ sở dữ liệu cho project và có thể thấy DevExpress đã hỗ trợ rất nhiều trong việc tạo cơ sở dữ liệu một cách nhanh chóng và chính xác, tiết kiệm thời gian.
• Chuyển đổi đường link thành ảnh
protected override void OnSaving(){
byte[] myDataBuffer = null;
string remoteUri = ImageURL;
WebClient myWebClient = new WebClient();
if (remoteUri != null) {
myDataBuffer = myWebClient.DownloadData(remoteUri);
string download = Encoding.ASCII.GetString(myDataBuffer);
ProductImage = byteArrayToImage(myDataBuffer);
base.OnSaving();
}
public Image byteArrayToImage(byte[] byteArrayIn) { MemoryStream ms = new MemoryStream(byteArrayIn);
Image returnImage = Image.FromStream(ms);
return returnImage;
}
Đoạn code trên được để trong class Product để trong hàm onSaving() để khi nhấn vào nút Save sẽ chuyển đường link ảnh thì một chuỗi ở Field Image. Ở đây Field nhận đường link Image sau khi người dùng nhấn nút Save sẽ bắt vào sự kiện onSaving(), khi
thực hiện sự kiện sẽ chuyển đổi đường link đó thành Image và được lưu trữ ở Field ProductImage. Vì Field ProductImage là loại byteArray nên chúng ta cần một Hàm để chuyển từ byteArray sang Image. Tại đây nhóm dùng một phương thức byteArrayToImage để chuyển đổi. Sau khi thực hiện xong sự kiện onSaving() trong Field ProductImage sẽ được lưu trữ. Khi hiển thị lên trên web sẽ như sau:
Hình 3.8: Ảnh được chuyển từ link ảnh
Làm như vậy sẽ thuận tiện hơn cho admin khi quản lý dữ liệu vì khi lưu vào SQL sẽ không lưu được hình nên khi dùng cách này sẽ download được hình và sẽ hiển thị lên web làm cho admin dễ dàng hơn trong việc quản lý vì có hình ảnh cụ thể của từng dòng dữ liệu. Chúng ta làm tương tự Manufacturer, hãng, store như Product để hiển thị hình ảnh một cách dễ dàng cho admin.
o View
Hình 3.9: Danh sách các View
Là View của các bảng trong cơ sở dữ liệu, ngoài các bảng mà chúng ta tạo ra còn có các bảng của DevExpress cũng như eXpand tự tạo ra để phục vụ cho các chức năng
59
mà nó cung cấp. View của một bảng có 2 phần đó là Detail View và ListView:
Hình 3.10: Cấu trúc một View của một bảng
ListView để hiện thị một list các giá trị được lưu trong trường đó. Thường thiết lập các View trong Model.xafm thường là Listview.
Hình 3.11: ListView của bảng Account Detail View để hiển thị chi tiết 1 dữ liệu trong bảng đó:
Hình 3.12: Detail View của bảng Account
• Chức năng Import Data bằng file Excel
Đây là một chức năng của eXpand Framework, khi muốn sử dụng Framework này chúng ta cần cài đặt eXpand. Khi chúng ta gọi chức năng này lên sử dụng thì nó giống như gọi 1 View lên hiển thị.
Hình 3.13: Thiết lập hiển thị Excel Import Sau đó chỉ cần chạy chương trình lên và sử dụng.
Hình 3.14: Giao diện Import Excel Nhấn New để tạo mới một lần thêm dữ liệu bằng file Excel.
Hình 3.15: Detail View của Import Excel
• Chức năng đăng nhập.
Hình 3.16: Layout đăng nhập
DevExpress cung cấp cho chức năng đăng nhập đã được xây dựng sẵn nên không cần tốn thời gian để build một chức năng login. Các tài khoản: username và password được lưu trữ ở bảng PermissionPolicyUser ở cơ sở dữ liệu.
61
• Chức năng Export
Hình 3.17: Các chứng năng loại chức năng import.
DevExpress xây dựng sẵn chức năng export dữ liệu với nhiều loại file export khác nhau, DevExpress cung cấp các loại file như CSV, HTML, Image, MHT, Text, PDF, RTF, XLS, XLSX, DOCX.
• Chức năng thêm xóa sửa:
Hình 3.18: Chức năng thêm xóa sửa
Đây là các chức năng được DevExpress cung cấp giúp cho người lập trình không mất thời gian để phải code lại.
• Tìm kiếm:
DevExpress cung cấp rất nhiều loại tìm kiếm.
Hình 3.19: Tìm kiếm trên nhiều bảng Dùng để tìm kiếm trên tất cả các cột trong bảng.
Hình 3.20: Tìm kiếm theo 1 bảng
Dùng để tìm kiếm dữ liệu trực tiếp trên cột mà mình muốn tìm kiếm.
Hình 3.21: Tìm kiếm theo điều kiện Tìm kiếm dựa trên nhiều điều kiện.
• Sắp xếp
Hình 3.22: Sắp xếp theo một bảng
Chuột phải vào cột muốn sắp xếp và chọn loại xếp là tăng dần hay giảm dần.
Chọn cột hiển thị:
- Có thể chọn những cột nào muốn hiển thị cột nào không muốn hiển thị.
- Nhấn chuột phải vào bảng, chọn Column muốn hiển thị kéo ra cũng như kéo vô column những cột không muốn hiển thị lên.
Hình 3.23: Hướng dẫn hiển thị nhưng cột ẩn
63
• Gom nhóm:
Chúng ta có thể gom nhóm dựa vào một cột trong bảng bằng cách chọn cột muốn dữ liệu muốn gom theo sau đó bấm chuột phải chọn Group By This Column.
Hình 3.24: Các nhóm được Group theo điều kiện Như vậy dữ liệu đã được gom theo nhóm.
Kết luận: Có thể thấy DevExpress là một công nghệ hỗ trợ cho người lập trình viên rất nhiều trong việc lập trình khi mọi chức năng cơ bản đều đã có cũng như giao diện user cũng như cơ sở dữ liệu đã được xây dựng người lập trình chỉ cần code những chức năng mới mà project yêu cầu không cần phải tốn thời gian để xây dựng những chức năng kia.
• Tạo biểu đồ:
Chỉ với vài thao tác đơn giản người dùng có thể tạo ra các biểu đồ dựa trên cơ sở dữ liệu để biểu diễn các số liệu dùng để so sánh nhận ra sự khác biệt cụ thể tỉ lệ của từng cái so với tổng thể.
Hình 3.25: Tạo một biểu đồ đơn giản