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

Bài đăng

Umbraco: Hiểu Content Tree trong Umbraco 13 qua website bán sách lịch sử và triết học - Day 2

Khi bắt đầu làm việc với Umbraco, một trong những câu hỏi đầu tiên là: tại sao phải tạo Document Type trước khi tạo nội dung? Content Type khác gì Document Type? Media Type có liên quan gì đến ảnh bìa sách? Và nếu tạo thêm một node trong Backoffice thì giao diện website có tự thay đổi không? Trong bài viết này, chúng ta sẽ tìm hiểu các khái niệm đó bằng cách xây dựng một ví dụ nhỏ: website bán sách chuyên về lịch sử và triết học. Thay vì học lý thuyết một cách riêng lẻ, chúng ta sẽ thực hành trực tiếp trên Umbraco 13, tạo Document Type, xây dựng Content Tree, thêm sách, upload ảnh bìa và quan sát sự thay đổi ở frontend. Bài viết sử dụng các khái niệm trong Umbraco 13 và có hai hướng triển khai: Traditional Umbraco: Umbraco sử dụng Razor Template để render HTML. Headless Umbraco: Umbraco quản lý nội dung, API cung cấp dữ liệu và Next.js render giao diện. Hai hướng này có nhiều khái niệm CMS giống nhau, nhưng cách hiển thị frontend khác nhau. 1. Content Tree là gì? Con...
Các bài đăng gần đây

Umbraco: Hướng dẫn cài đặt Umbraco 13 với .NET 8 và SQL Server Express - Day 1

Umbraco là một hệ thống quản trị nội dung (Content Management System – CMS) mã nguồn mở được xây dựng trên nền tảng .NET. Umbraco cho phép developer xây dựng website, quản lý nội dung và phát triển các giải pháp CMS tùy chỉnh bằng hệ sinh thái ASP.NET Core. Trong bài viết này, chúng ta sẽ tạo một project Umbraco 13 bằng .NET CLI, cấu hình SQL Server Express sử dụng Windows Authentication, chạy ứng dụng và hoàn tất quá trình cài đặt Backoffice. 1. Chuẩn bị môi trường Trước khi bắt đầu, hãy đảm bảo máy tính đã cài đặt các công cụ sau: .NET 8 SDK. Visual Studio 2022 hoặc Visual Studio Code. SQL Server Express. SQL Server Management Studio (SSMS). PowerShell hoặc Windows Terminal. Trong bài hướng dẫn này, chúng ta sử dụng cấu hình: Thành phần Giá trị Umbraco CMS 13.8.1 .NET .NET 8 SQL Server instance .\SQLEXPRESS Authentication Windows Authentication Database MyUmbracoSite Project name MyUmbracoSite Umbraco 13 hỗ trợ .NET 8 và có thể sử ...

Day 2 — Kết nối Next.js 16 với ASP.NET Core Web API: Routing, Parameters và Data Fetching

Ở Day 1, mình đã làm quen với Next.js 16, App Router, cấu trúc thư mục và cách tạo các trang giao diện. Tuy nhiên, một ứng dụng thực tế không thể chỉ hiển thị nội dung viết sẵn trong code. Nó thường cần lấy dữ liệu từ backend, xử lý dữ liệu và hiển thị cho người dùng. Trong bài này, mình sẽ xây dựng một ví dụ nhỏ gồm hai phần: Frontend: Next.js 16 sử dụng App Router và TypeScript. Backend: ASP.NET Core Web API cung cấp dữ liệu bài viết. Mục tiêu là hiểu được toàn bộ luồng dữ liệu từ lúc Next.js gửi request, ASP.NET Core xử lý request, trả về JSON cho đến khi dữ liệu xuất hiện trên giao diện. 1. Mục tiêu học tập Sau khi hoàn thành bài viết, mình muốn có thể: Hiểu request, response, HTTP method và status code. Phân biệt routing của Next.js với routing của ASP.NET Core API. Phân biệt route parameter và query parameter. Tạo API GET để lấy danh sách và chi tiết bài viết. Hiểu cách ASP.NET Core trả về JSON. Sử dụng fetch() và async/await trong Next.j...

Day 1 — Làm quen với Next.js 16 và App Router

1. Mục tiêu bài học Trong ngày đầu tiên, chúng ta sẽ tìm hiểu những khái niệm nền tảng của Next.js 16 và xây dựng một website blog nhỏ để thực hành. Sau bài học này, bạn có thể: Hiểu Next.js là gì và khác React như thế nào. Khởi tạo project Next.js 16 bằng create-next-app . Hiểu cấu trúc thư mục src/app . Tạo trang bằng page.tsx và layout dùng chung bằng layout.tsx . Phân biệt Server Components và Client Components. Tạo dynamic route với URL dạng /posts/[slug] . Hiểu cách sử dụng params trong Next.js 16. Kiểm tra build và xử lý cảnh báo bảo mật từ npm audit . Hiểu nền tảng để kết nối Next.js với một backend API. 2. Next.js là gì? Next.js là framework được xây dựng dựa trên React, giúp phát triển ứng dụng web hoàn chỉnh. React cung cấp cơ chế xây dựng giao diện bằng component, còn Next.js bổ sung các quy ước về routing, rendering, lấy dữ liệu và tổ chức ứng dụng. Tính năng Ý nghĩa App Router T...