Using Umbraco. Thinking in Umbraco's way!

“The friendliest CMS community on the planet” - đấy là người ta bảo thế. Ờ thì mình thấy cũng đúng thiệt. Mọi thứ của nó đều thân thiện và dễ sử dụng.

Umbraco là 1 CMS dành cho .NET Web development. Sử dụng mô hình MVC và cách cấu trúc cực kỳ linh động của mình, bạn có thể build 1 application vô cùng nhanh chóng và dễ dàng. Cùng với sự hỗ trợ mạnh mẽ của cộng đồng (forum / slack channel và hàng tá blog về Umbraco), đây rõ ràng là 1 sự lựa chọn hoàn hảo cho .NET dev.

1 vài so sánh giữa 2 CMS free tốt nhất của .NET

• Orchard vs Umbraco
• Orchard vs Umbraco

Chào mừng tới series Umbraco và bài viết đầu tiên về Umbraco của mình. Tất cả những bài viết sẽ được cập nhật trên blog cá nhân và group Umbraco Developer Viet Nam.

Setup

Bạn có thể xem cách cài đặt ở đây hoặc xem clip của mình tại đây

Back office và các khái niệm cơ bản.

Lý thuyết thôi. Bạn vào đây đọc 5 phút là xong. Giới thiệu cơ bản về back office (admin site), các khái niệm cơ bản và làm quen với giao diện làm việc của Umbraco.

Document Type. Dùng Umbraco, nghĩ theo Umbraco.

Bạn có thể sẽ hơi mơ hồ 1 chút về các khái niệm của Umbraco nếu bạn cứ tiếp tục đọc hết bài này tới bài khác. Cách nhanh nhất để hiểu nó là bắt tay vào tạo 1 document type.

Document type là 1 tập hợp của những giá trị (text / number / images / … ) bạn muốn hiển thị lên Front-end (FE).

Hãy tưởng tượng bạn có 1 page muốn hiển thị 2 giá trị là Title và Description:

Thông thường bạn sẽ làm gì? Tạo 1 class với 2 properties, sau đó cho user nhập 2 giá trị này vào, cuối cùng lấy nó lên và hiển thị lên FE? Nghe có vẻ hợp lý…nếu bạn đang muốn viết hoàn toàn từ đầu. Nên nhớ mình đang dùng Umbraco đấy.

Mở Settings section, R-click vào Document types và chọn Create

R-click = Right click = chuột phải. Phòng trường hợp bạn không biết từ viết tắt này.

1 menu mới mở ra, chọn Document Type without a template

Empty Document type được tạo ra

Có 3 phần bạn cần quan tâm được đánh số như trên hình.

1. Setting tên, icon, alias cho document type
2. Chuyển qua lại giữa các tab
3. Vùng thêm property

Trong đó cụ thể

Tab Design

1. Document type Icon
2. Document type Name
3. Document type Alias. Đây là phần quan trọng của 1 document type và bạn có thể sẽ cần dùng nó thường xuyên. Alias được generate từ Name, tuy nhiên bạn cũng có thể thay đổi nó bằng cách mở khóa bên cạnh.
4. Document type description. Mô tả cho doc type của bạn.

List view

Trong trường hợp node (là 1 doc type được thêm vào tree) có nhiều child node, bạn có thể chuyển đổi parent node thành List view để dễ quản lý hơn.

Permissions

Cho phép những loại doc type nào có thể được thêm vào child node của doc type hiện tại. Điều này có ý nghĩa với client của bạn, khi bạn cho phép họ quản lý trang web và chỉ muốn họ thêm mới 1 post doc type vào 1 danh mục chứ không muốn họ thêm doc type bất kỳ. Khi đó khi họ R-click vào menu thì chỉ tạo được post doc type mà thôi.

Template

Bạn có thể hiểu 1 doc type cũng gần giống với 1 page vậy (gần giống thôi nhé, có trường hợp document chỉ là 1 partial view), khi đó template sẽ là View cho cái page này. Và đây là nơi bạn thực hiện mối liên kết giữa doc type và Template.

Mình sẽ tạo template và quay lại phần này sau.

Bấm Save và bạn đã tạo 1 document type thành công.

Property

Là thành phần quan trọng nhất của 1 document type. Nào, hãy tưởng tượng tiếp.

Quay lại với việc cho phép người dùng quản lý Title của page, bạn phải có chỗ để user nhập title vào rồi mới lưu xuống database được. Thông thường thì nó sẽ là 1 textbox (input type="text"), với Umbraco, đó gọi là Property Editor - PE (editor cho property).

Hãy xem kết quả khi bạn tạo 1 PE trước, sau đó quay lại với cách làm sao để tạo được nó:

1. Property Alias. Tương tự với document alias, đây là thành phần quan trọng của 1 property. Bạn sẽ sử dụng nó cho việc lấy data sau này.

2. Property Name. Bạn muốn viết gì thì viết, Umbraco chỉ quan tâm tới Alias. Nên nhớ là by default Alias được generate từ Name, tuy nhiên bạn cũng có thể thay đổi thành bất cứ thứ gì bạn muốn.

3. Mô tả cho property. Cho dễ nhớ và khách hàng biết cần nhập gì vào chỗ này thôi.

4. Property Editor. là dạng control (textbox/textarea/radio/checkbox…) mà bạn cho phép client thêm dữ liệu vào.

Thấy cái nút Add property bự chảng phía dưới không? Bấm vào để tạo mới 1 property nhé.

Tiếp tục bấm vào Add editor để thêm editor cho property này

Chọn cái nào cho phù hợp? Bạn không phải là con nít nữa rồi, chẳng ai lại chọn cái True/False cho việc nhập Title cả. Textarea ư? Cũng là 1 ý kiến hay. Lựa chọn cái control nào để người ta nhập liệu tùy vào bạn đấy.

Sau tất cả, bấm Save và bạn đã đi được 50% chặng đường rồi :)

Tất cả những gì nãy giờ mình nói có thể gói gọn trong video này.

Template

Cách tạo template cũng giống với cách tạo document type.

Đừng thấy ghét mà xóa nội dung của cái template này nhé. Nhập tên sau đó bấm Save và bạn đã tạo ra được 1 template. Thấy cái @{} vàng vàng kia không, nó là cú pháp razor đấy, khá là quen với ASP.NET MVC nhỉ :))

Sau khi tạo template, quay lại document type và assign template này cho document type của bạn.

Với 1 template được tạo ra, 1 view tương ứng sẽ được tạo ra. Ví dụ ở đây là Home, thì sẽ có 1 file là Home.cshtml được tạo ra. Đây cũng là 1 điểm hay của Umbraco, bạn có thể làm việc hoàn toàn trên back office, hoặc cũng có thể sử dụng song song với Visual Studio để làm việc nhanh hơn.

Nhớ là VS không tự include file tạo bên ngoài, cho nên bạn phải mở chức năng hiển thị file ẩn và include nó vào nếu muốn làm việc trên VS.

Content

Là section cho phép quản lý nội dung từ những gì bạn đã tạo ra. Nãy giờ bạn chỉ mới thực hiện các khâu chuẩn bị. Content sẽ là nơi bạn thêm mới các node (là những document type) và nhập dữ liệu vào các property của doc type đó.

Việc tạo content node cũng giống hệt tạo document type và template trước đó. Bạn chọn Content section, R-click vào Content vào Add, 1 menu mới xuất hiện, chọn document type để thêm mới content.

Content được tạo ra thuộc Home document type, và bạn sẽ thấy các input để mình nhập data vào, đó chính là các property editor mà bạn đã định nghĩa trong document type này. (1) chính là cái tab tên Content của bạn, bạn cũng có thể tạo bao nhiêu tab tùy thích bên document type để dễ dàng phân chia cách thêm nội dung trên 1 trang cho hợp lý.

1 document type khi tạo ra ngoài những thông tin mà mình định nghĩa còn có các thông tin mặc định, những thông tin này nằm ở tab Info

1 số properties cần quan tâm ở tab info này:

1. Link, chính là url trỏ tới bài viết ở front end.
2. CreatedDate, CreatorName ngày tạo và người tạo content.
3. Status, user chỉ có thể thấy khi content này được publish. Để publish, bấm Save and publish

Với những gì bạn tạo cho tới lúc này, hiển nhiên bạn chỉ có 1 trang trống. Mở template ra (bạn có thể mở bằng VS - nếu có, hoặc trực tiếp trên back office) và thêm 1 dòng đơn giản vào

Kết quả sẽ là:

How to get real data

Để lấy dữ liệu mà bạn đã thêm ở back office, sử dụng extension của Umbraco

@Model.Content.GetPropertyValue("alias")

với alias chính là property alias. Lý do mà mình nói bạn đừng táy máy xóa default template là vì extension này chỉ sử dụng được khi bạn có directive @inherits Umbraco.Web.Mvc.UmbracoTemplatePage phía đầu trang.

Giờ thì có vẻ đơn giản hơn rồi, để lấy được Title với alias = title và Description alias = description thì bạn cứ việc

Và kết quả sẽ là:

Xem video tại đây

Done! Bạn đã biết cách sử dụng Umbraco rồi đấy.

Kết

Tuy là Umbraco dễ những cũng còn khá nhiều thứ mới lạ cần tìm hiểu. Hy vọng qua bài viết bạn đã có được 1 cái nhìn tổng quan về umbraco và cách thức sử dụng document type. Mình sẽ còn tiếp tục trong những bài viết sau, hy vọng mọi người đón đọc.

Xem toàn bộ playlist full-SD :v không che tại đây https://www.youtube.com/watch?v=kii_qA-U9uc&list=PLGQv5Xhv0tdpnP2tb9zEowleMmUCRKnBY