Rails add a search function controller and route best practice

1.Task description

I worked on a Ruby on Rails app, and one day I got a task to add this new feature:

Create a search page(So user can search items by category).

After hitting the “search” button, it takes the user to item list page.

 

For simplicity and to avoid dragging  myself away from the main topic I want to talk about:

The search page could simply look like this:

1

The item list page could just look like this:

1

 

2.My initial approach

2.1 Strategy:

Q: How to render the search page?

A: Create a search action.

Q: How to perform the search function?

A: Create a index action, which handles the search function. The search form should submit a post request to this action.

Q: How to render the item list page?

A: Let index action render item list page.

2.2 Implementation:

Route:

config/routes.rb:

get ‘items/search’, to: ‘items#search’
post ‘items/index’, to: ‘items#index’

1

Controller:

items_controller.rb:

class ItemsController < ApplicationController
def index
# perform search code goes here
render ‘index’
end

def search
render ‘search’
end
end

View:

/items/search.html.erb:

<%= form_tag items_index_path, method: ‘post’ do %>
<label>category:</label>
<input type=”text” name=”category”>
<button>search</button>
<% end %>

2.3 Implementation in action

1

after hitting the search button:

1

2.4 Problem

This works perfectly, until I manually refreshed the index page.

1

Since there’s no get route, it errors out! Of course I could add a get route, but in that way, I will have to store the form parameters in session. Is there another approach?

 

 

3. Second approach

3.1 Strategy:

Q: How to render the search page?

A: Create a search action.

Q: How to perform the search function?

A: Create a index action, which handles the search function. The search form should submit a get request to this action, so that the search parameters are in the URL, so that I don’t need to worry about storing them in session.

Q: How to render the item list page?

A: Let index action render item list page.

A note: 

In the future, there might be other tasks to add view item detail, edit item functions and on. So it’s better  use rails default resource: http://guides.rubyonrails.org/routing.html

3.2 Implementation:

Route:

config/routes.rb:

get ‘items/search’, to: ‘items#search’
resources :items, only: [:index] do
end

1

Controller:

The same as first approach.

 

View:

/items/search.html.erb:

<%= form_tag items_path, method: ‘get’ do %>
<label>category:</label>
<input type=”text” name=”category”>
<button>search</button>
<% end %>

3.3 Implementation in action

1

after hitting the search button:

1

 

3.4 Concern

We can see the parameters are passed in the URL, and I’m good even though I refresh.

This approach definitely works. The only concern is that it brought in a search action, which is not part of rails default resource; and the search page and item list page are on different URL.

I want to utilize rails default resource, and keep search and item list page on the same URL.

So here comes the third approach.

 

 

4. Third approach

4.1 Strategy:

Q: How to render the search page?

A: Use index action. Check if user is not performing a search, render search page. (Trick is add a hidden input in the form)

Q: How to perform the search function?

A: Perform it in index action.

Q: How to render the item list page?

A: Use index action. Check if user is performing a search, render index page.

 

 

4.2 Implementation:

Route:

config/routes.rb:

resources :items, only: [:index] do
end

Controller:

class ItemsController < ApplicationController
def index
if params[:search].blank?
render ‘search’
else
# perform search code goes here
render ‘index’
end
end
end

View:

/items/search.html.erb:

<%= form_tag items_path, method: ‘get’ do %>

<input type=”hidden” name=”search” value=”true”>
<label>category:</label>
<input type=”text” name=”category”>
<button>search</button>
<% end %>

3.3 Implementation in action

1

after hitting the search button:

1

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s