Người Quản Trị (Administrator)

- In hóa đơn bán hàng:

1.2.3.2.Người Quản Trị (Administrator)

Người quản trị là người sẽ có những thao tác trực tiếp với cơ sở dữ liệu của hệ thống. Vì vậy nên việc phân quyền để bảo mật CSDL là sự sống còn của trang web.

Để dễ dàng quản lý ta thêm một trường trong bảng thành viên là trường quyền hạn. Ở mỗi phiên làm việc thì ngay khi bắt đầu ta sẽ gán những biến phiên SESSION này bằng rỗng.

Sau khi người dùng truy nhập vào qua đăng nhập thì tùy vào tên đăng nhập ta sẽ gán các biến SESSION cho phù hợp với họ.

Sau khi đăng xuất thì biến SESSION sẽ được gán lại bằng rỗng.

Những biến Session này ta sẽ đặt trong file Global.asax. File này sẽ thực thi ngay khi bắt đầu truy nhập tới WebSite.

Ở trang quản trị ta sẽ bắt người sử dụng có có quyền hạn không phải là quản trị (Admin) quay về trang chủ bán sản phẩm thông qua trang LayoutAdmin được sử dụng cho tất cả các trang thuộc phần quản trị.

Nếu vẫn tiếp tục cố gắng truy nhập bằng tài khoản không đủ quyền hạn thị ta sẽ đẩy họ lại trang chủ mua bán sản phẩm cho tới khi nào họ đăng nhập với tài khoản quản trị thì thôi.

Nếu tài khoản đăng nhập đủ quyền hạn thì họ sẽ được vào trang chủ quản trị. Vì thế ta bắt buộc phải có một tài khoản có quyền hạn là người quản trị mới có thể truy nhập vào được. Ta sẽ sử dụng tài khoản quản trị của hệ thống là

Ở đây chúng ta một lần nữa nhắc đến khả năng tùy biến cho người dùng khi họ muốn (Responsive Ability). Ở đây ta tham khảo mẫu trang quản trị của GeBo kết hợp với Bootstrap là một mẫu trang (Web Tempalte) có khả năng tùy biến rất cao trong sự thể hiện:

Trước tiên là sự tùy biến của giao diện tổng quan:

Khả năng tùy biến được thể hiện rất rõ khi ta có thể điều chỉ được mầu sắc của menu, hình nền của trang quản trị, kiểu trình bày là toàn màn hình hay có khung bao xung quanh, vị trí thanh menu là bên trái hay bên phải, hiển thị menu bằng click hay di chuột vào. Tất cả sẽ được làm thông qua nút điều chỉnh tận cùng bên tay phải ở dưới menu luôn ở trên cùng (Fixed Top Menu).

+ Giả sử ta muốn menu luôn ở bên trái (Fixed Left Menu) giờ sang bên phải ta chọn trên bảng điều khiển ở mục: Vị trí menu bên hông: Right

+ Hoặc ta có thể xem kiểu trình bày trang giờ là có khung bao xung quanh chứ không hiển thị hết toàn bộ màn hình ta chỉnh trong: Chọn kiểu trình bày: Fixed là được:

Giờ thì đã có khung bao xung quanh trang web của chúng ta rồi:

Hoặc ta có thể chỉnh menu không phải là Click thì hiển thị nữa mà chỉ cần Hover sẽ hiển thị ra menu con chẳng hạn:

+ Nếu muốn ta cũng có thể ẩn cả menu bên hông đi bằng cách bấm vào icon menu ở trên cùng dưới menu top:

Để gọi lại nó ta click vào icon menu bên hông lần nữa là được.

+ Sự tùy biến của trang web ngay cả khi di bấm vào một chức năng như xem tin nhắn chẳng hạn nó sẽ tự động đưa ra một hộp thoại mà không cần ta xử lý gì cả:

Và ta muốn thôi hiển thị chỉ cần bấm nút X là được.

Sự tùy biến trong việc thể hiện nội dung của các bảng, các hình ảnh, các biểu đồ, thống kê...

+ Khi cần vẽ biểu đồ ta chỉ cần truyền các giá trị vào thì nó sẽ tự động vẽ cho chúng ta:

Hoặc biểu đồ dạng khác:

+ Thể hiện dạng bảng một cách tự động:

Với bảng đơn hàng được sắp xếp theo ngày đặt hàng này ta có thể tùy biến thể hiện bằng cách lựa chọn vào button Column nó sẽ cho chúng ta thêm bớt các cột muốn hiển thị mà không cần phải load lại trang:

Giả sử ta thêm cột tổng tiền và biến mất cột thực thi, ngày đặt hàng đi chẳng hạn:

Hoặc giả sử với một bảng thống kê thành viên dưới đây:

Việc phân trang là hoàn toàn tự động khi số lượng vượt quá 10 nó sẽ tự động phân trang cho chúng ta:

Tuy nhiên điều hay nhất là chúng ta không phải load lại trang 1 lần nữa. Điều này vô cùng tiện lợi cho người dùng khi sử dụng website. Với bảng này việc sắp xếp, hiển thị, tìm kiếm cũng hoàn toàn tự động:

Ví dụ khi sắp xếp theo tiêu chí nào đó:

Ví dụ hiển thị theo trạng thái Online/ Offline:

Và ngay cả việc tìm kiếm trên bảng cũng khá tốt, chúng hoàn toàn tự động và không hệ nạp lại dữ liệu của trang. Chúng cũng tự động Auto Complete. (adsbygoogle = window.adsbygoogle || []).push({});

Sau đây là các chức năng chính của người quản trị:

- Quản lý sản phẩm:

Với chức năng quản lý sản phẩm cũng như tất cả các chức năng quản lý khác tiếp theo ta đều phải thực hiện 5 nhiệm vụ chính: Tìm kiếm theo tiêu chí nào đó,xem chi tiết, thêm mới, sửa, và xóa:

Để truy cập tới trang quản trị sản phẩm ta có thể truy cập thông qua menu trên cùng, thanh menu bên trái hoặc thanh menu ở ngay bên dưới menu trên cùng:

Với thanh menu trên cùng ta cũng có thể lọc theo một số tiêu chí ngay ở trên menu luôn. và menu tìm sản phẩm theo dòng sản phẩm, theo nhà cung cấp đều được sinh ra tự động theo 2 bảng dữ liệu tương ứng.

Khi nhìn vào trang quản trị sản phẩm trên ta sẽ thấy một thanh menu gọi là Menu Steps ở trên cùng:

Thực ra đây chỉ là đánh dấu xem ta đang ở trạng thái nào và thuận tiện khi ta không cần sử dụng những nút quay lại chẳng hạn. Khi ta ở bảng sản phẩm thì phần bảng sản phẩm sẽ có mầu đậm hơn so với các trạng thái khác. Nếu di chuyển sang trang khác thì Menu Steps sẽ đổi theo:

 Tìm kiếm sản phẩm:

Ngay bên dưới thanh Menu Steps là các đối tượng để lọc dữ liệu theo các tiêu chí:

Đối với mã sản phẩm và tên sản phẩm thì ta sẽ sử dụng AutoComplete cho chúng để tiện cho người sử dụng tìm kiếm:

Với lọc sản phẩm theo khoảng thời gian nhập hàng về ta sử dụng Date Pickder để chọn. Với DatePicker ta có thể liệt kê theo tháng, quý, hay năm đều rất dễ dàng:

Và một số tiêu chí khác như trong khoảng giá tiền, nhà cung cấp, dòng sản phẩm gì, trạng thái còn kinh doanh mặt hàng này nữa hay không? Tất cả chúng đều là thẻ Select của HTML nên không cần nhập nội dung mà chỉ chọn thôi.

Ở đây chúng ta sẽ sử dụng JavaScript để thao tác với bảng dữ liệu khi liệt kê các bản ghi từ cơ sở dữ liệu ra. Với thư việc JQuery được cung cấp miễn phí trên mạng chúng ta hoàn toàn có thể thao tác với bảng dữ liệu một cách đơn giản nhất:

Với DataTable được cung cấp bởi Jquery ta chỉ việc đọc dữ liệu ra và định dạng sắp xếp cho bảng là bảng dữ liệu của chúng ta sẽ được tạo ra một cách

tự động nhưng vẫn đầy đủ các tính năng như Auto Sort (Tự động sắp xếp), Auto Paging (Tự động phân trang), tìm kiếm trên toàn bộ bảng hay hiển thị tùy biến chẳng hạn:

Chỉ với một đoạn code định dạng đó ta sẽ có một bảng hiển thị dữ liệu tuyệt vời:

 Tính năng tự động sắp xếp:

Khi ta click vào tiêu đề của bảng. Ví dụ ta thử sắp xếp lại sản phẩm theo giá tiền. Lần đầu tiên khi ta click sẽ sắp xếp theo chiều tăng dần của giá tiền:

Lần thứ 2 khi ta lại Click vào giá tiền thì chiều sắp xếp sẽ ngược lại là theo chiều giảm dần:

Tương tự ta có thể sắp xếp theo các cột có trong bảng.  Tính năng phân trang tự động:

Ngay khi load bảng lên thì mặc định là mỗi một bảng sẽ hiển thị 10 bản ghi và các bản ghi còn lại sẽ được hiển thị khi ta lựa chọn số trang ở dưới cùng của bảng:

Nó sẽ tự động phân trang với nút số trang, nút về trước, nút tiếp theo và hiển thị số lượng bản ghi có trong bảng, hay là đang ở bản ghi thứ mấy. Và điều hay nhất là chúng ta sẽ không phải Load lại trang.

 Tính năng Hiển thì thị tùy biến:

Tính năng này rất tuyệt vời cho việc ta muốn quy định việc hiển thị sản phẩm khi quản trị. Đơn cử như mỗi bảng chỉ hiển thị được 10 bản ghi một trang thì giờ với 68 bản ghi ta chỉ muốn hiển thị trên cùng một trang ở một bảng mà không phải load lại trang chẳng hạn. Ta chỉ việc bấm vào hộp thoại Select ở trên cùng của bảng:

Ta chọn hiển thị 100 bản ghi trên 1 trang:

Và như thế chỉ với 1 lựa chọn ta đã có thể hiện thị những gì mà chúng ta muốn.

Tính năng tìm kiếm toàn bộ trên bảng: Chức năng này cũng khá hay với điểm tối ưu về không phải load lại trang, tìm kiếm tất cả các trường cùng một lúc. Để tìm kiếm ta nhập thông tin vào thẻ Input Text trên cùng bên phải của

 Thêm mới một sản phẩm:

Ngay ở trang quản lý sản phẩm ta có thể truy cập tới chức năng này thông qua Menu Steps hoặc ở thông báo dưới Menu Steps:

Sau khi bấm vào thêm sản phẩm ta sẽ được điều hướng sang một trang thêm sản phẩm. Việc xử lý với sản phẩm tương đối là khó, nhất là đối với sản phẩm có nhiều nội dung, hình ảnh, hay các định dạng đặc biệt như căn lề, kẻ bảng, mầu sắc ... (adsbygoogle = window.adsbygoogle || []).push({});

Với những control thông thường như TextBox hay TexArea thực sự là rất khó. Việc sử dụng đối tượng bổ xung lúc này là cần thiết vì trang web chúng ta làm ra để cho ai cũng có thể dùng được. Chúng ta sẽ sử dụng 2 đối tượng miễn phí trên mạng là:

+ CkEditor. + CkFinder.

Nếu Như CkEditor chuyên về nhập dữ liệu với nhiều định dạng dễ dành như Word trong bộ Office

Thì CkFinder lại là đối tượng dụng chúng ta quản lý những hình ảnh mà chúng ta cần up từ phía Client lên Server

Như vậy là chúng ta đã giải quyết được phần thêm nội dung chi tiết cho tin mỗi sản phẩm.

Chúng ta sử dụng Validation Control để kiểm soát một số lỗi mà không cần xử lý trong code. Tuy nhiên cũng có khá nhiều hạn chế với kiểm soát lỗi dạng này và ta cũng buộc phải kiểm soát một số lỗi như không nhập khóa chính hoặc nhập bị trùng khóa chính,

Hoặc nhập dữ liệu không đúng dịnh dạng kiểu số, ngày tháng,...

Lưu ý với các trường dữ liệu tham chiếu từ các bảng khác. Để người dùng tránh lỗi khi thêm mà không nhớ được các mã tham chiếu dài dòng. Ta sẽ

sử dụng thẻ Select để người dùng chỉ cần chọn mà không cần nhập thông tin cho các trường này. Như thế là ta đã hạn chế rất nhiều lỗi có thể xảy ra:

Nếu không phát sinh những lỗi này thì sản phẩm mới sẽ được thêm vào bảng Sản phẩm.

Với ngày đặt hàng là ngày giờ hiện tại khi ta click vào DatePicker Kết quả là:

 Xem thông tin đầy đủ của một sản phẩm:

Với mỗi sản phẩm khi liệt kê ra bảng thì đều có một cột thao tác ở tận cùng bên phải của mỗi dòng. Ở đây bao gồm 3 chức năng là xem chi tiết sản phẩm, sửa nội dung sản phẩm, xóa sản phẩm:

Ở trang xem chi tiết sản phẩm ta sẽ hiển thị đầy đủ hơn về các trường so với khi liệt kê ra bảng

 Sửa thông tin của một sản phẩm:

Việc sửa thông tin sản phẩm không khác gì so với thêm mới. Ngoài tự động hiển thị các giá trị có sẵn để khi ta sửa chỉ sửa những gì ta muốn mà thôi thì ta còn phải thêm một tính năng là sửa thông số kỹ thuật cho sản phẩm. Như đã nói ở phần trước thì ngay khi sản phẩm được thêm mới thì nếu không nhập thông số kỹ thuật thì thông số kỹ thuật sẽ được lưu một cách tự động để khi sửa cho dễ dàng vì được lưu trữ theo nguyên tắc ta đặt ra trước:

Để sửa chi tiết ta bấm vào liên kết để chuyển sang chuyên biệt cho việc sửa thông số kỹ thuật. Ở trang này khi sửa ta có thể xem luôn phần hiển thị bên dưới để tiện cho việc sửa đổi chính xác.

 Xóa một sản phẩm khỏi CSDL:

Ở trang xóa sản phẩm. Một lần nữa khi ta bấm vào nút xóa ở bảng sản phẩm hoặc trên thanh Menu Steps sau khi đã chọn một sản phẩm thì ta sẽ được xem lại một lần nữa thông tin cơ bản về sản phẩm đó. Nếu muốn xóa thì ta bấm nút xóa đi là được

Sau khi bấm nút xóa thì ta sẽ được điều hướng trở lại trang quản lý sản phẩm và số lượng sản phẩm giờ đã trở lại như trước khi ta thêm vào:

- Quản lý dòng sản phẩm:

Việc quản lý dòng sản phẩm so với sản phẩm có phần nhẹ nhàng hơn vì nó ít trường và nội dung các trường đều chỉ là text mà thôi.

- Quản lý nhà cung cấp:

Ta cũng xử lý tương tự như quản lý nhà cung cấp:

- Quản lý tin tức:

Việc quản lý tin tức cũng khá phức tạp như quản lý sản phẩm nhưng vì phần quản lý sản phẩm ta đã làm trước nên việc xử lý cũng đã trở nên dễ hơn.

Ta cũng xử lý việc thêm và sửa với các đối tượng hỗ trợ như DatePicker, CkEditor và CkFinder.

Tuy nhiên với bảng tin tức khóa chính là trường tự động sinh mã nên ta bớt đi công đoạn kiểm soát khóa chính. Ta với bảng dữ liệu được hỗ trợ bởi Jquery ta sẽ tận đụng được các tính năng như lọc tự động, tự động phân trang, tìm kiếm cả bảng, tùy biến hiển thị... Ngoài ra với trường hình ảnh ta cũng cho phép xem hình ảnh ở cửa sổ to hơn bằng tool hỗ trợ xem ảnh Fancy Box như phần xử lý thông tin chi tiết ở phần người dùng đã nói.

- Quản lý thành viên:

Chức năng quản lý thành viên cũng khá quan trọng tới việc quản lý trang web nên ta cũng phải làm chi tiết hơn nhất là phần quyền hạn và mật khẩu ta phải kiểm soát được một số trường hợp có thể sinh lỗi như là tên đăng nhập đã tồn tại, nhập mật khẩu mới không chính xác, không trùng với nhập lại mật khẩu mới. (adsbygoogle = window.adsbygoogle || []).push({});

Vì là người quản trị hệ thống nên chúng ta không chỉ được sửa mỗi mật khẩu, thông tin thành viên bất kỳ và cả quyền hạn cho thành viên đó nữa. Mặc đinh bất cứ tài khoản nào khi tạo mới, thêm mới đều là Người Dùng (User):

- Quản lý đơn hàng:

Việc quản lý đơn hàng như đã nêu ý tưởng ở phần quản lý đơn hàng của mỗi thành viên lúc trước ta đã xem qua.

Chính vì thế khi thêm mới một đơn hàng sẽ kéo theo ta phải thêm mới chúng cả ở phần quản trị đơn hàng chi tiết nữa.

 Sửa Đơn Hàng:

Việc sửa một đơn hàng không có gì khác so với việc chúng ta làm nãy giờ mà điều chúng ta cần phải xử lý thêm nữa là: Trong trường hợp ta sửa một đơn hàng với trường trạng thái thay đổi từ False (Chưa Thanh Toán) Sang True (Đã Thanh Toán) rồi thì cần phải làm những gì.

Ta sẽ thử với mã đơn hàng 131 mà ta vừa thêm ở phần người dùng lúc trước:

Trạng thái giờ là chưa thanh toán. Ta bấm vào nút sửa ở cột thao tác:

Ta sẽ chỉ quan tâm tới một trường là đối tượng CheckBox ở trên form sửa thông tin của đơn hàng:

Khi ta check vào CheckBox thì trạng thái đơn hàng sẽ là True (Đã Thanh Toán) thì ta phải thêm tất cả các sản phẩm trong đơn hàng đó vào bảng Mua Bán Sản Phẩm với trạng thái = Bán sản phẩm. Giả Sử Với Đơn hàng mã 131 mà chúng ta vừa đặt hàng bằng một tài khoản thành viên Admin ở phần trước giờ đã