view, controller, routing trong Ruby on rails

truongtuongtu bắt đầu chủ đề từ 4 năm trước

Ở trong Ruby on rails hiển thị page thì cần có 3 file : view, controller, routing. Chúng ta sẽ tìm hiểu chi tiết tứng cái một nhé.

View trong Ruby on rails

View Là Gì

Trong mô hình MVC thì Views là thành phần được dùng để xuất ra kết quả cuối cùng trước khi gửi về trình duyệt. Kết quả này có thể là trang HTML, trang XML hay thậm chí là văn bản đơn thuần.

Các tập tin View trong Ruby on Rails được đặt trong thư mục app/views. Ở trên, khi chạy lệnhrails generate controller home top thì đồng thời cũng đã tạo ra trong folderviews folder home và file top.html.erb.

Thay đổi view

Nội dung bên trong view (file HTML) là nội dung được hiển thị lên trên trình duyệt nên bạn có thể thay đổi nội dung hiển thị bằng việc edit file đó. Hãy thử thay đổi file top.html.erb rồi confirm nội dung thay đổi trên top page nhé.

Bước 1: Hãy mở file C:\Sites\app_demo\app\views\home\top.htmlrồi sửa nội dung thành như dưới:


  
    UPDATE VIEW
    Change contence in top.html file

Bước 2: Confirm nội dung thay đổi trên tình duyệt (http://localhost:3000/home/top)

view, controller, routing trong Ruby on rails image 41

Controller

Khi hiển thị page, ở trong Rails thì thông qua controller trả views về trên trình duyệt.

Tạo Controller

Trong phần trên mình đã nói, chúng ta có thể sử dụng câu lệnh rails generator để tạo ra controller

rails generate controller home top

Câu lệnh trên sẽ tạo ra một số tập tin home_controller.rb có nội dung như dưới trong thư mục app/controllers cùng một số tập tin liên quan khác.

class HomeController < ApplicationController
  def top
  end
end

Bạn có thể thấy tập tin controller trên định nghĩa một lớp HomeController và lớp này kế thừa lớp ApplicationController. Phương thức top ở đây gọi là acction.

Controller Action

Controller action giữ vai trò tìm view tương ứng trong folder views trả về trình duyệt. Cụ thể là action sẽ tìm trong folder view trùng tên với controller cái file HTML trùng tên với action rồi trả về cho trình duyệt. Các action trong route sẽ tương ứng với một phương thức của controller. Ví dụ một route sau:

  get 'home#index'

Thì action index ở trên sẽ được kết nối (hay map) với phương thức index trong HomeController. Mặc dù phương thức này đang tạm thời trống chúng ta sẽ thêm các đoạn mã cần thiết sau.

Routing

Routing Là Gì

Trong phát triển ứng dụng web thì routing giúp xác định luồng xử lý của ứng dụng. Routing bao gồm tập hợp các quy tắc giúp xác định với mỗi một địa chỉ URL được gửi tới máy chủ nó sẽ được xử lý ở đâu (hay như thế nào) trong ứng dụng. Các quy tắc này còn được gọi là các route.

Routing Trong Rails

Trong Rails thì thông qua controller trả views về browser nhưng giữ vai trò liên kết giữa browser và controller là routing. Thứ tự xử lý đến khi hiển thị là : routing → controller → view Trong Rails các tập luật route được đặt trong tập tin config/routes.rb. Khi mở tập tin này bạn sẽ thấy một route như sau:

Rails.application.routes.draw do
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  # root 'welcome#index'
  ...
end

Tập tin này bao gồm nhiều dòng lệnh dùng để định nghĩa các route khác nhau. Mỗi route sẽ giúp xác định một địa chỉ URL với định dạng cho trước khi gửi tới máy chủ sẽ được xử lý ở tập tin controller nào trong ứng dụng và cụ thể hơn ở phương thức (action) nào trong controller đó. VD: Trong config/routes.rb định nghĩa bằng phương pháp 「get "URL" => "controller_name#action_name"」

get "home/top" => "home#top"

Khi Browser gửi URL (localhost:3000/home/top) thì routing sẽ dựa vào URL và gọi ra action top của controller home tương ứng.

Route Cơ Bản

Cú pháp cơ bản để tạo một route như sau:

  http_method 'url_format' => 'controller#action'

Trong đó:

__http_method__: Quy định phương thức của request gửi tới HTTP sẽ được xử lý bởi route này
__url_format__: Quy định định dạng format của địa chỉ URL gửi tới máy chủ sẽ được xử lý bởi route này.
controller: Quy định tập tin controller sẽ được dùng để xử lý yêu cầu gửi tới.
action: Quy định phương thức (hay action) sẽ được dùng để xử lý yêu cầu gửi tới. Để hiểu rõ hơn chúng ta xem một route ví dụ như sau:

  get 'products/:id' => 'product#view'

Với route trên thì các yêu cầu gửi tới máy chủ với địa chỉ URL dưới dạng /products/:id (ví dụ /product/1 sẽ được xử lý ở controller product và trong action view.

Route Trang Chủ

Ở tập tin routes.rb bạn thấy có một dòng comment như sau ở dòng số 6:

  # root 'welcome#index'

Route trên được gọi là route trang chủ vì nó xác định yêu cầu gửi tới máy chủ cho trang chủ củ website sẽ được xử lý ở đâu. Bây giờ bạn xoá dấu comment # ở trên để kích hoạt một route đầu tiên:

  root 'welcome#index'

Với route trên thì các yêu cầu gửi tới máy chủ dưới địa chỉ URL http://localhost:3000/ sẽ được xử lý ở welcome controller và cụ thể hơn ở index action có trong controller này.

Add thêm 1 page

Bây giờ chúng ta sẽ thử add thêm 1 page giới thiệu về trang web của mình. Bạn ko thể tiếp tục sử dụng command rails generator để tạo thêm nữa. Vì thế, để add thêm page mới thì bạn phải tự mình chuẩn bị thêm vào routing, controller, view đã được tự động tạo ra bằng command.

Bước 1: Mở file routes.rb và add thêm định nghĩa route about

Rails.application.routes.draw do

  get 'home/top'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

  # Add thêm route about
  get "about" => "home#about"
end

Bước 2: Mở file controller.rb và add thêm định nghĩa action about

class HomeController < ApplicationController
  def top
  end
  # Add thêm action about
def about
  end

end

Bước 3: Tiếp theo trong thư mục app\views\home bạn tạo một tập tin about.html với nội dung như sau:

 
    
        ABOUT
        Add new page

Bước 4: Confirm thành phẩm trên trình duyệt nào (http://localhost:3000/about)

view, controller, routing trong Ruby on rails image 51

Điều chỉnh Layout

Apply CSS

File CSS thì được đưa vào trong folder app/assets/stylesheets. Khi chạy command rails generate controller home ... thì file CSS (home.scss)cũng được tạo ra. scss là đuôi mở rộng của CSS

Bước 1: Định nghĩa css

Bước 2: Sử dụng css trong view (html)


  
    TweetApp
  
  
    About Test App
  



  
    Header
    Content

Bước 3: Confirm trên trình duyệt

Hiển thị ảnh Ảnh thì được đặt ở folder「public」, chỉ cần chỉ định tên ảnh bằng 「<img src="/picture_name" >」hoặc「background-image: url("/picture_name");」 có thể dễ dàng hiển thị ảnh.

Ruby on Rails

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·