Xây dựng ứng dụng quản lý với Radzen Blazor

0

Trong bài học này chúng ta sẽ cùng xây dựng một ứng dụng quản lý CRUD dữ liệu đơn giản sử dụng Radzen Blazor. Qua ví dụ này bạn sẽ thấy sự tiện lợi của Radzen Blazor khi xây dựng ứng dụng quản lý trên web sử dụng Blazor framework.

Đây là một ứng dụng nhỏ giúp quản lý công việc trong công ty. Ứng dụng này giúp bạn quản lý thông tin cơ bản của nhân viên, quản lý nhóm công việc, quản lý các công việc cụ thể trong nhóm, quản lý phân công công việc cho nhân viên.

Tạo cơ sở dữ liệu

Với bài toán quản lý công việc, cấu trúc cơ sở dữ liệu như sau:

Để đơn giản, chúng ta sẽ sử dụng hệ quản trị cơ sở dữ liệu MySql cài đặt sẵn trong gói phần mềm XAMPP. Bạn cũng có thể sử dụng bất kỳ cơ sở dữ liệu nào được Radzen hỗ trợ (như SQL Server, Oracle, PostgreSQL).

Bạn có thể sử dụng đoạn script sau để tạo cơ sở dữ liệu:

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for employee
-- ----------------------------
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee`  (
  `Id` int UNSIGNED NOT NULL AUTO_INCREMENT,
  `FullName` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Email` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Phone` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Facebook` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Address` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`Id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for taskgroup
-- ----------------------------
DROP TABLE IF EXISTS `taskgroup`;
CREATE TABLE `taskgroup`  (
  `Id` int UNSIGNED NOT NULL AUTO_INCREMENT,
  `Name` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Description` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`Id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

-- ----------------------------
-- Table structure for task
-- ----------------------------
DROP TABLE IF EXISTS `task`;
CREATE TABLE `task`  (
  `Id` int UNSIGNED NOT NULL AUTO_INCREMENT,
  `Name` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `StartTime` datetime NULL DEFAULT NULL,
  `DueTime` datetime NULL DEFAULT NULL,
  `Description` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `GroupId` int UNSIGNED NOT NULL,
  PRIMARY KEY (`Id`) USING BTREE,
  INDEX `GroupId`(`GroupId`) USING BTREE,
  CONSTRAINT `task_ibfk_1` FOREIGN KEY (`GroupId`) REFERENCES `taskgroup` (`Id`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for taskassignment
-- ----------------------------
DROP TABLE IF EXISTS `taskassignment`;
CREATE TABLE `taskassignment`  (
  `Id` int UNSIGNED NOT NULL AUTO_INCREMENT,
  `Description` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `TaskId` int UNSIGNED NOT NULL,
  `EmployeeId` int UNSIGNED NOT NULL,
  PRIMARY KEY (`Id`) USING BTREE,
  INDEX `TaskId`(`TaskId`) USING BTREE,
  INDEX `EmployeeId`(`EmployeeId`) USING BTREE,
  CONSTRAINT `taskassignment_ibfk_1` FOREIGN KEY (`TaskId`) REFERENCES `task` (`Id`) ON DELETE RESTRICT ON UPDATE RESTRICT,
  CONSTRAINT `taskassignment_ibfk_2` FOREIGN KEY (`EmployeeId`) REFERENCES `employee` (`Id`) ON DELETE RESTRICT ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

Bạn có thể sử dụng PHP MyAdmin (đi kèm với bộ XAMPP) hoặc một chương trình desktop chuyên dụng như Navicat để chạy đoạn script trên.

Đặt tên cho dữ liệu là test.

Tạo ứng dụng mới trong Radzen

Mở Radzen và tạo mới một ứng dụng (click vào nút New Application). Nếu chưa từng tạo ứng dụng nào, Radzen sẽ mở thẳng giao diện tạo ứng dụng mới.

Hãy chọn như sau:

Mục Framework chọn Blazor (chúng ta không xem xét dự án Angular trong loạt bài học này).

Tiếp theo chọn mô hình Blazor. Hiện nay Blazor có hai mô hình: Blazor server (còn gọi là Server-side Blazor), Blazor WebAssembly. Bạn có thể chọn mô hình nào cũng được. Trong đó mô hình server-side đơn giản hơn trong cấu trúc và cách thức hoạt động. Mô hình này rất phù hợp với các ứng dụng quản lý nội bộ.

Tiếp theo bạn chọn loại framework. Hiện nay Blazor hoạt động trên .NET Core và .NET 5. Bạn nên chọn .NET 5 mới nhất.

Mục tiếp theo là chọn theme cho ứng dụng. Radzen hỗ trợ một số theme miễn phí (Default, Dark, Software, Humanistic) và một số theme premium (Material, MaterialDark, Fluent). Các theme premium chỉ sử dụng được trong bản Pro và Enterprise.

Phần Name là tên ứng dụng, và Directory là thư mục sẽ chứa mã nguồn. Lưu ý, mã nguồn do Radzen sinh ra là một solution bình thường mà bạn có thể mở trong Visul Studio / VS Code, cũng như trực tiếp chạy ứng dụng từ các IDE này.

Ấn nút Create để tạo ứng dụng.

Khi ứng dụng tạo ra xong, Radzen sẽ chuyển vào giao diện (trống trơn) như sau:

Tạo nguồn dữ liệu

Công việc đầu tiên bạn cần làm là tạo nguồn dữ liệu (DataSource).

Tạo nguồn dữ liệu có nghĩa là bạn cung cấp các thông tin về cơ sở dữ liệu để Radzen kết nối tới. Sau đó Radzen sẽ đọc cấu trúc cơ sở dữ liệu rồi giúp bạn tự động sinh ra các code cần thiết để tạo ra ứng dụng.

Click vào nút data trên thanh công cụ, sau đó ấn nút new.

Trong cửa sổ Edit Data Source bạn điền thông tin cần thiết như sau:

1 – Chọn hệ quản trị là MySQL (như đã nói từ đầu)

2 – Tên của DataSource. Bạn cần đặt tên theo đúng quy tắc đặt định danh của C#.

3 – Tên server, ở đây sử dụng server cục bộ localhost

4 – Tên cơ sở dữ liệu (test – như đã nói từ đầu)

5,6 – User name và mật khẩu của MySQL.

Ấn nút Infer Schema để Radzen bắt đầu kết nối và đọc cấu trúc CSDL.

Lưu ý: Nút chọn Generate pages for CRUD operations chỉ sử dụng được trong bản Pro / Enterprise. Nút chọn này yêu cầu Radzen tự động scaffold tất cả các entity phát hiện được. Với bản Community, bạn không dùng được tính năng này. Chúng ta sẽ hướng dẫn cách làm trên bản Community.

Sau khi hoàn thành, bạn lại có thể tiếp tục tạo thêm nguồn dữ liệu mới. Radzen hỗ trợ cùng lúc làm việc với nhiều nguồn dữ liệu khác nhau.

Đóng cửa sổ để quay trở về giao diện chính của Radzen.

Tạo page

Page là phần giao diện của ứng dụng mà người dùng trực tiếp sử dụng. Thông thường với mỗi domain class chúng ta phải tạo một nhóm page để thực hiện nhóm chức năng CRUD (Create – Retrieve – Update – Delete). Ví dụ, một page dành cho danh sách dữ liệu, một page cho nhập mới, một page cho cập nhật dữ liệu.

Radzen giúp tự động sinh ra các page như vậy.

Click vào nút New page (số 1), và chọn CRUD Pages (số 2):

Ở ô Page Schema (số 1) mở danh sách ra và chọn Employee. Ô Page Name (số 2) nhập Employee hoặc bất kỳ tên gì. Ô số 3 đã đánh dấu chọn sẵn.

Ấn Next để chuyển sang cửa sổ tiếp theo:

Giữ nguyên các lựa chọn mặc định. Nếu muốn, bạn có thể tăng giá trị ở ô Page size (số dòng sẽ hiển thị trong bảng dữ liệu). Ấn Next để chuyển sang cửa sổ tiếp theo.

Trong cửa sổ này bạn sẽ chọn những cột nào sẽ xuất hiện trong bảng dữ liệu. Thường là cột Id sẽ không nên xuất hiện. Hãy bỏ dấu tích ở đây.

Ấn nút Save sẽ đưa bạn trở về giao diện chính. Khi này bạn sẽ thấy đã có 3 page mới được tạo ra.

Đến đây bạn đã tạo xong nhóm page để thực hiện tính năng CRUD với dữ liệu Employee.

Chạy chương trình

Các thao tác bên trên đã tạo ra một chương trình Blazor server đầy đủ. Ấn F5 để chạy chương trình. Bạn sẽ thu được một ứng dụng như dưới đây:

Ấn nút Add để mở cửa sổ tạo dữ liệu mới:

Nhập một số dữ liệu vào bảng:

Click vào một dòng bất kỳ sẽ mở ra giao diện cập nhật dữ liệu. Nút x ở cuối mỗi dòng sẽ kích hoạt chức năng xóa dữ liệu.

Như vậy, bạn có thể thấy chúng ta đã rất nhanh chóng thu được một ứng dụng Blazor hoàn chỉnh với chức năng quản lý dữ liệu Employee mà không cần viết một dòng code nào.

Tương tự như vậy bạn có thể tiếp tục tạo ra các page dành cho các domain entity khác.

Subscribe
Notify of
guest
0 Thảo luận
Inline Feedbacks
View all comments