Chuyển đến nội dung chính

Bài đăng

NGINX: Giới thiệu về NGINX

Trong bài viết này, mình sẽ giới thiệu về NGINX và sử dụng NGINX như Proxy Server để kết nối vào ứng dụng .NET NGINX là gì? NGINX được phát triển bởi kỹ sư người Nga Igor Sysoev vào năm 2002 và ra mắt công chúng năm 2004, nhằm giải quyết bài toán C10k - xử lý 10.000 kết nối đồng thời. Với kiến trúc hướng sự kiện (event-driven) đơn luồng, NGINX nhanh chóng phổ biến nhờ hiệu suất cao, ít tốn tài nguyên và khả năng làm reverse proxy, load balancer. Kestrel là gì? Kestrel là một máy chủ web được tích hợp trong .NET và ASP.NET Core, đóng vai trò là một máy chủ HTTP nhanh chóng, hiệu quả, và có khả năng chịu tải cao cho các ứng dụng .NET. Được giới thiệu lần đầu tiên cùng với .NET Core, nó nhanh chóng trở thành lựa chọn phổ biến nhờ vào hiệu năng vượt trội, cấu trúc gọn nhẹ và tính năng bảo mật. Phân biệt: Kestrel: Được gọi là Internal Web Server hoặc Application Server. Đây là máy chủ web mặc định được tích hợp sẵn vào ứng dụng ASP.NET Core. Nhiệm vụ chính của nó là xử lý các logic lập trìn...
Các bài đăng gần đây

Cài đặt Docker trên WSL2 và Hướng dẫn sử dụng Docker Buildx

Buildx là gì? Docker Buildx là plugin CLI mạnh mẽ của Docker, được xây dựng trên BuildKit . Nó cho phép bạn xây dựng Docker image với nhiều tính năng hiện đại: Build multi-platform (amd64, arm64, nhiều kiến trúc cùng lúc) Cache build thông minh, nhanh hơn rất nhiều Hỗ trợ nhiều build driver Build song song và tối ưu hiệu suất 1. Cài đặt WSL2 wsl --install wsl --install -d Ubuntu Sau khi vào Ubuntu, chạy: sudo apt update && sudo apt upgrade -y 2. Cài đặt Docker Engine + Buildx trên WSL2 sudo apt-get install -y ca-certificates curl gnupg lsb-release sudo mkdir -p /etc/apt/keyrings curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null sudo apt-get update sudo apt-get inst...

Blazor: Quản lý State trong Blazor Server với Fluxor - Part 5

Trong bài trước, chúng ta đã tìm hiểu cách Fluxor hoạt động trong môi trường Console. Tuy nhiên, sức mạnh thực sự của mô hình Flux (Redux) chỉ tỏa sáng rực rỡ khi đối mặt với sự phức tạp của UI. Hôm nay, mình sẽ hướng dẫn các bạn tích hợp Fluxor vào Blazor Server để giải quyết bài toán truyền dữ liệu giữa các Component mà không cần dùng đến "chuỗi sự kiện" (Event Callback) rắc rối. Trước khi đi vào chi tiết, mình sẽ nói sơ về ví dụ. Hãy tưởng tượng bạn đang xây dựng một tính năng nhỏ cho phép người dùng quản lý danh sách sách cần đọc. Các thao tác cơ bản bao gồm: Thêm sách: Nhập tên sách và nhấn nút, hệ thống giả lập lưu vào Database (mất khoảng 1 giây) rồi hiển thị lên danh sách. Xóa sách: Nhấn nút xóa bên cạnh mỗi đầu sách để loại bỏ khỏi danh sách. 1. Cài đặt Cài đặt Fluxor dotnet add package Fluxor.Blazor.Web Đăng ký dịch vụ trong Program.cs Thay vì đăng ký thủ công từng thành phần, Fluxor cung cấp khả năng tự động quét (Scan) toàn bộ dự án: builder.Services.A...

Hướng dẫn DataTable cơ bản: State Saving - Part 3

Hãy tưởng tượng người dùng đang lọc danh sách sản phẩm đến trang số 10, click vào xem chi tiết, sau đó nhấn Back quay lại mà bảng lại reset về trang 1 và mất sạch bộ lọc. Cảm giác đó thật sự "tệ". State Saving sinh ra để giải quyết vấn đề này bằng cách ghi nhớ trạng thái bảng vào trình duyệt. 1. Cách kích hoạt cơ bản Chỉ cần thêm thuộc tính stateSave: true vào cấu hình khởi tạo. Mặc định, DataTables sẽ sử dụng localStorage để lưu trữ vĩnh viễn cho đến khi xóa cache. $('#ajaxDataTable').DataTable({ stateSave: true, stateDuration: 60 * 60 * 2 // Lưu trong 2 giờ (tính bằng giây) }); 2. Xử lý logic cho Individual Column Filter (Popup Dropdown) Một vấn đề phát sinh: DataTable nhớ giá trị lọc, nhưng các thẻ UI tự chế (như icon filter tam giác) sẽ bị mất màu báo hiệu. Chúng ta cần dùng hàm state.loaded() để "nhắc" giao diện hiển thị đúng. initComplete: function () { var api = th...

Hướng dẫn DataTable cơ bản: Individual Column Searching - Part 2

Trong các bài trước, chúng ta đã làm quen với ô Search tổng quát. Tuy nhiên, khi dữ liệu trở nên phức tạp, người dùng thường có nhu cầu lọc chính xác theo từng trường thông tin (ví dụ: chỉ xem sản phẩm "Hết hàng" hoặc thuộc loại "Điện tử"). Hôm nay, mình sẽ hướng dẫn các bạn cách tạo bộ lọc dạng Popup Dropdown ngay trên Header của DataTable Chúng ta sẽ sử dụng Icon tam giác và Popup Menu của Bootstrap graph LR subgraph "Thẻ TH (Table Header Cell)" Title[Text: Category] --- Icon[Icon: bi-caret-down-fill] end Icon -.-> Menu[Dropdown Menu - Absolute Position] subgraph "Dropdown Menu Items" Option1[Tất cả] Option2[Giá trị 1] Option3[Giá trị 2] end Menu --- Option1 Menu --- Option2 Menu --- Option3 Cài đặt giao diện CSS Tham khảo: https://getbootstrap.com/docs/4.0/components/dropdowns/ Cấu Trúc HTML Dropdown <div class="dropdown d-inline-block filter-container ms-2"> <!...

Hướng dẫn DataTable cơ bản

Nếu bạn đang xây dựng các hệ thống quản trị hoặc các ứng dụng quản lý kho, tài chính, việc hiển thị hàng nghìn dòng dữ liệu lên trình duyệt là một thách thức. jQuery DataTables chính là "cứu cánh" giúp biến các bảng HTML thô sơ thành những bảng dữ liệu thông minh. Trong bài viết này, chúng ta sẽ bắt đầu với những bước thiết lập nền móng đầu tiên. DataTable là gì DataTables là một plug-in mã nguồn mở cho thư viện jQuery giúp nâng cao khả năng tương tác cho các bảng HTML thông thường. Nó cung cấp các tính năng nâng cao như phân trang, tìm kiếm tức thì và sắp xếp dữ liệu chỉ với một dòng mã JavaScript Chuẩn bị môi trường Để sử dụng DataTables, bạn cần tích hợp thư viện vào project. Bạn có thể sử dụng CDN để nhanh chóng bắt đầu. Thêm vào file _Layout.cshtml hoặc trực tiếp vào View: <link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"...

Blazor: Fluxor là gì? - Part 4

Fluxor là một thư viện giúp quản lý trạng thái (State Management) một cách chặt chẽ và dễ dự đoán. Để hiểu cách nó hoạt động, chúng ta hãy nhìn vào luồng dữ liệu sau: 1. Luồng hoạt động graph LR A[UI / View] -- Dispatch --> B(Action) B --> C{Dispatcher} C --> D[Reducer] E[(Current State)] --> D D -- Create New --> F[(New State)] F --> A Hiểu đơn giản: State (Trạng thái): Là dữ liệu duy nhất và không thể thay đổi (immutable) đại diện cho một phần của ứng dụng. Action (Hành động): Một thông điệp gửi đi để yêu cầu thay đổi trạng thái. Nó không chứa logic, chỉ chứa dữ liệu cần thiết. Reducer (Bộ chuyển đổi): Một hàm thuần túy (pure function) nhận vào State cũ + Action và trả về một State mới. Dispatcher (Bộ điều phối): Công cụ dùng để gửi Action vào hệ thống. State State trong Blazor là dữ liệu hiện tại của ứng dụng tại một thời điểm cụ thể (ví dụ: giỏ hàng, thông tin đăng nhập, biến Lưu ý: Không ai được sửa State trực tiếp. Tại sao St...