Scroll to top
Tạo URL đẹp trong Ruby on Rails với gem friendly_id

Tạo URL đẹp trong Ruby on Rails với gem friendly_id

ByYuto 13/10/2024 19:36
2min read

Thông thường, Rails sẽ mặc định tạo url cho các record theo dạng id. Trong bài viết này mình sẽ cùng tìm hiểu về cách tạo một url dễ đọc, dễ nhớ bằng gem friendly_id.

Mở đầu

Thông thường, Rails sẽ mặc định tạo url cho các record theo dạng id, cụ thể là /articles/1, /articles/1/edit. Trong bài viết này mình sẽ cùng tìm hiểu về cách tạo một url dễ đọc, dễ nhớ, ví dụ như là /articles/bai-viet-so-1, /users/yuto-yasunaga.

Thêm gem cần thiết

Chúng ta sẽ bắt đầu bằng việc thêm gem friendly_id vào Gemfile

Gemfile
Copy
1
gem 'friendly_id'

Thêm column tên là slug vào model

Ví dụ ở đây mình có model tên là Article để chứa các bài viết, mình muốn URL của các bài viết hiển thị ở dạng /article/bai-viet-1, /article/huong-dan-ruby-on-rails. Lúc này mình cần phải thêm column slug vào table articles

bash
Copy
1
rails g migration add_slug_to_articles slug

Chạy lệnh migrate

bash
Copy
1
rake db:migrate

Thiết lập friendly_id

Chúng ta sẽ dùng friendly_id để lấy tiêu đề bài viết làm url, ví dụ bài viết có tiêu đề là Hello world thì slug được tạo ra sẽ là hello-world

app/models/article.rb
Copy
1
2
extend FriendlyId
friendly_id :title, use: :slugged

Trong trường hợp bạn muốn url phải thay đổi khi chúng ta update tiêu đề (title) của một bài viết:

app/models/article.rb
Copy
1
2
3
4
5
private

def should_generate_new_friendly_id?
  slug.blank? || title_changed?
end

Cách sử dụng

Để truy xuất dữ liệu từ slug, chúng ta dùng câu lệnh như sau:

ruby
Copy
1
@article = Article.friendly.find(params[:id])

params[:id] ở đây chính là giá trị của slug, ví dụ như huong-dan-ruby-on-rails

Nếu trước đó table articles đã tồn tại dữ liệu

Nếu trước đó bạn đã có dữ liệu trong model Article rồi thì làm thêm bước sau:

Truy cập vào console của project

bash
Copy
1
rails c

Chạy dòng lệnh sau để toàn bộ article sẽ được update và tạo slug

ruby
Copy
1
Article.find_each(&:save)

Lưu ý: url sẽ không được như ý muốn nếu ngôn ngữ viết là tiếng Việt, tiếng Nhật..v.v..

Đánh giá bài viết: 5/5 (15 đánh giá)
Bạn chưa đánh giá

Bình luận

Author
hoclaptrinh.io author
Tác giả:Yuto Yasunaga

Mình là một full stack developer, tốt nghiệp và làm việc tại Nhật Bản. Trang web này là nơi mình tổng hợp, đúc kết và lưu trữ lại những kiến thức trong quá trình học và làm việc liên quan đến IT.
Hy vọng những bài viết ở website này sẽ có ích cho bạn.