Ruby on Rails đã thay đổi cách chúng ta xây dựng ứng dụng web. Ban đầu, framework đi kèm với những tính năng tuyệt vời giúp bạn bắt đầu và xây dựng các ứng dụng mạnh mẽ.
Tuy nhiên, việc xây dựng và xử lý form vẫn có thể khá棘手. Simple Form là một lựa chọn tuyệt vời. Hãy cùng tìm hiểu Simple Form là gì, tại sao chúng ta cần nó và một số trường hợp sử dụng thực tế.
Form và Ruby on Rails
Ruby on Rails thực sự đơn giản hóa việc xây dựng ứng dụng. Tuy nhiên, nó cũng đòi hỏi sự chú ý liên tục để giữ cho codebase được gọn gàng và súc tích. Một chiến lược là tránh viết code bằng cách sử dụng các abstraction, ví dụ. Code không nằm trong ứng dụng thực tế của bạn là code bạn không phải quản lý. Đó là lý do chúng ta thích abstraction đúng không? Simple Form chính là một abstraction như vậy, giúp đơn giản hóa việc xây dựng form cho trang web.
Form nói chung phức tạp khi xây dựng, ngay cả khi dùng Ruby on Rails. Mỗi trường đều cần chú ý để định nghĩa đúng loại và gắn với attribute chính xác. Simple Form giảm bớt nỗi đau đó, vì bạn không cần tìm loại chính xác cho từng trường.
Hãy lấy một form lấy thông tin người dùng, với các trường name, username, và email. Giả sử chúng ta có model User với các attribute liên quan tương tự. Với Simple Form, form điền các attribute trông như sau:
Lưu ý rằng chúng ta không chỉ định loại cho từng trường. Simple Form sẽ tự chọn loại input phù hợp cho từng trường dựa trên kiểu cột.
Điều này giúp tiết kiệm thời gian và giữ cho code dễ đọc, dễ bảo trì hơn.
Cài đặt Simple Form
Để cài đặt Simple Form trong dự án, thêm gem simple_form vào Gemfile. Sau khi chạy bundle install, bạn có thể dùng generator đi kèm để thiết lập đúng cho ứng dụng của mình.
Lưu ý về Bootstrap và Zurb Foundation: Cả Bootstrap và Zurb Foundation 5 đều được hỗ trợ trong Simple Form. Vì vậy, nếu bạn đang dùng một trong hai, bạn có thể dùng tham số --bootstrap hoặc --foundation với generator để thêm các cấu hình bổ sung trong quá trình cài đặt. Trong trường hợp Bootstrap, sẽ trông như sau:
Sử dụng cơ bản Simple Form
Như đã chỉ ra trước đó, Simple Form sẽ tạo form hoàn chỉnh chủ yếu dựa trên dữ liệu liên quan đến object của bạn. Tuy nhiên, cũng quan trọng để hiểu rằng Simple Form không chỉ tạo input phù hợp cho từng attribute mà còn cung cấp label và hiển thị gợi ý lỗi ngay trên các trường input!
Hãy xem xét một ứng dụng Ruby on Rails 7.x hoàn toàn mới. Chúng ta sẽ generate model User và xây dựng form cho nó bằng Simple Form.
Bây giờ chúng ta có thể generate controller với các action new, create, và index. Mục tiêu là có thứ gì đó để thao tác với form.
Các action này cần các view liên quan. Đây là form xử lý việc đăng ký hoặc thêm người dùng:
Trong trường hợp này, chúng ta chỉ định label tùy chỉnh và lỗi cho input username. Nếu không có tùy chỉnh như vậy, nó sẽ cố gắng đoán label cần thiết dựa trên tên attribute.
Chúng ta đã đặt gợi ý tùy chỉnh cho trường password và placeholder tùy chỉnh cho trường email. Chú ý cũng khả năng chỉ định "inline label" thay vì label nằm trên trường (mặc định thường thấy trong form).
Cũng có thể vô hiệu hóa label, hint, và error bằng cách truyền giá trị false cho các attribute đó: <%= f.input :password_confirmation, label: false %>.
Chúng ta cần thêm một view nữa để làm cho nó có thể sử dụng được.
Sau đó bạn có thể khởi động ứng dụng bằng rails s. Truy cập localhost:3000/users/new để xem và sử dụng form. Hãy tập trung vào cách form khác biệt so với form Ruby on Rails cổ điển.
Lưu ý về validations: Simple Form có thể hoạt động với các trường bắt buộc ngay lập tức. Ví dụ, nếu chúng ta thêm validation presence sau vào model User:
Điều này sẽ được Simple Form dùng để thêm một dấu '*' nhỏ bên cạnh trường username, chỉ định rằng nó là bắt buộc. Điều này không tự động quản lý lỗi, vì vậy bạn vẫn phải xử lý trong action controller. Quay lại trường có lỗi và xử lý chúng.
Về Column Types và Form Fields
Như đã đề cập trước đó, chúng ta chưa chỉ định loại cho từng trường. README của Simple Form có danh sách đầy đủ tất cả các loại input khả dụng và mặc định cho từng loại cột. Dưới đây là những loại thường dùng nhất:
Booleans
Như chúng ta thấy trong bảng trên, các attribute boolean sẽ được biểu diễn, mặc định, dưới dạng checkbox. Trong nhiều trường hợp, đó chính là những gì chúng ta muốn. Nhưng nếu không, có cách để tùy chỉnh trong Simple Form với attribute as, cho phép bạn chỉ định hiển thị radio buttons hoặc dropdown thay thế.
Đây là cách chỉ định radio buttons:
Điều này sẽ tạo ra HTML sau:
Thật ấn tượng rằng một đoạn code Ruby nhỏ như vậy lại cho bạn một đoạn HTML hoàn chỉnh như vậy!
HTML
Từ ví dụ trước, chúng ta thấy Simple Form tạo ra nhiều HTML cho từng trường. Đó bao gồm HTML cho input field và một wrapper div bao quanh label và input field. Chúng ta có thể tùy chỉnh những thứ đó bằng cách chỉ định custom class và id sử dụng attribute input_html và wrapper_html. Đây là một ví dụ.
Đó cũng là cách để đặt attribute cho HTML liên quan, như maxlength hoặc value. Hãy lấy trường password từ form user của chúng ta. Chúng ta có thể giới hạn kích thước và độ dài của trường với attribute maxlength.
Custom Inputs và Additional Options
Simple Form là một thư viện Ruby chuẩn bị các node HTML cho bạn. Nó đi kèm với một bộ field hoàn chỉnh, nhưng bạn cũng có thể thêm của riêng mình. Để làm vậy, bạn có thể tạo class kế thừa từ các class của Simple Form. Hãy xem xét việc định nghĩa một custom input field mạng xã hội với tiền tố '@' nhỏ phía trước trường thực tế.
Bây giờ chúng ta có thể dùng nó như sau:
Lưu ý rằng, nếu model User của bạn không có attribute network_handle, bạn phải thêm nó thông qua migration hoặc "cheat" với attr_accessor trong model.
Hỗ trợ i18n
Như chúng ta đã nhắc, xây dựng form thường là điểm đau. Nhưng mọi thứ càng đau hơn khi nói đến website và ứng dụng hỗ trợ nhiều ngôn ngữ. Simple Form, may mắn là, tuân theo tiêu chuẩn Ruby on Rails. Bạn có thể dùng key simple_form trong file locale để định nghĩa bản dịch cho tất cả label, hint, placeholder, prompt, v.v.
Đây là một ví dụ nhỏ:
Value Objects
Đôi khi, chúng ta có thể dùng các class non-ActiveRecord tùy chỉnh để khởi tạo object chính mà form dựa vào. Điều này có thể làm để.compose dữ liệu từ nhiều model thành một object tổng hợp cho lý do business logic hoặc gom nhiều attribute vào một object đơn lẻ.
Dù lý do gì, bạn vẫn có thể dựa vào Simple Form để xây dựng form cho loại object đó. Để làm vậy, class object cần implement, trong trường hợp tốt nhất, ba phương thức: to_model, to_key, và persisted?.
Phương thức to_model sẽ trỏ đến chính object đó:
Phương thức to_key cho phép chúng ta trỏ đến attribute identifier cho object — thường là attribute id được đặt tên:
Cuối cùng, phương thức persisted? ở đó để báo cho Simple Form biết object có được persist trực tiếp hay không.
Nếu phương thức đó không có, helper f.submit sẽ không thể dùng.
Tuy nhiên có cách nhanh hơn — include module ActiveModel::Model vào class:
Và hãy dùng nó thông qua model User.
Chúng ta có thể thêm trường cho tên công ty trong form user:
Tất nhiên, attribute này sẽ không được lưu vào bảng. Tuy nhiên, cùng khái niệm có thể áp dụng để compose một value object với các attribute kéo từ nhiều model.
Kết thúc
Trong bài viết này, chúng ta đã thấy Simple Form dễ dàng cài đặt và tích hợp vào ứng dụng Ruby on Rails của bạn. Simple Form không chỉ lo chi tiết cho từng trường trong form của bạn, mà còn tạo ra HTML phức tạp và hoàn chỉnh để form của bạn có thể được style và định hình dễ dàng.
Tôi khuyến khích bạn đi sâu vào tài liệu Simple Form để thấy nó mạnh mẽ đến đâu.
Happy coding!
P.S. Nếu bạn muốn đọc các bài Ruby Magic ngay khi chúng ra mắt, hãy subscribe newsletter Ruby Magic của chúng tôi và không bao giờ bỏ lỡ bất kỳ bài viết nào!
Thomas Riboulet
Tác giả khách Thomas là Consultant Backend và Cloud Infrastructure Engineer tại Pháp. Trên 13 năm, anh đã làm việc với startup và công ty để scale team, product, và infrastructure. Anh cũng đã xuất bản nhiều lần trên tạp chí GNU/Linux Magazine của Pháp và trên blog cá nhân.
Tất cả bài viết của Thomas Riboulet