Tagging in rails from scratch

2018-11-23


One feature I wanted to include in the creation of my database was tagging. After getting lost in a few articles, and wrestling between different rails gems.


I decided that it would probably be best for me to just make everything myself from scratch. Here's how I started it.


Instead of making a seperate model for tags, I decided to keep it simple by adding a new attribute to my contacts table.

rails g migration AddTagToContacts tag:string


My tags for a contact will be stored into an empty array. So before you migrate this new record lets set the default as empty array and set array as true.

t.text "tags", default: [], array: true


After this step I made my way to the Contacts controller where I added my new attribute to contacts strong params.


For front-end, I sided with this neat javascript tagging library called tags-input. You can find that here: https://github.com/developit/tags-input. The creators readme states: "I said <input type="tags"> should be a thing." Sounds about right.


Implementation's a cakewalk. After adding the js and css files to the correct folders in assets and requiring them in application.js and application.css. One simple line of js is all you'll need to call for it to start working.

<script>
tagsInput(document.querySelector('input[type="tags"]'));
</script>


I'm building my form with rails form helpers. In order for tags-input to work, make sure you specify the type as tags. I also added a value: which takes the objects in the array and joins them together in a string. So instead of ["foodieprogrammershanghai"], i'll be returned ["foodie,programmer,shanghai"]. Here's what it looked like.

<%= form.text_field :tags, id: "tags", type: "tags", placeholder: "Add tag...", class: '', value: @contact.tags.join(",") %>


Back in the controller, in my contacts strong params is where I'll split the one string in an array, into many strings in an array. With this conditional, I'll now be returned ["foodie", "programmer", "shanghai"] for tags.

def contact_params
  par =  params.require(:contact).permit(:first_name, :last_name, :nickname, :birthday, :country, :city, :home_addr, :phone_number, :personal_website, :occupation, :company_name, :company_website, :fun, :tags, :avatar, :relationship, :slug, :personal_message, :primary, :mailing)
  if par[:tags].present?
    par[:tags] = par[:tags].split(",")
  end
  par
end


Here's what my tags look like now:

my image

Back to articles