How to Apply Cocoon Gems in Rails 6?

There exist countless kinds of gems in the ROR structure. The cocoon is such a pearl. If you don’t know enough regarding this Gem, don’t agonize! In this walkthrough, we will perform the Cocoon Gem model and study deeper regarding this. Ready to write code and embed cocoon-shaped gems!

This tutorial will teach how you can produce complicated Rails by utilizing cocoon jewelry in Ruby on rails. For example, suppose you want to build a structure for users to enter the names of their associates. You don't know headway how many associates your users will have. Now you need to find out how to supplement a particular quantity of areas in the design?

We will see how to use the cocoon treasure to add or delete inserted entrants nonparallel without creating a unique query. We will form a demo where users can add associates. Then embed the name of the friend. User name attribute.

A step-by-step process on how to build Cocoon Gem in Rails 6:

1. Build a brand-new rail active application

rails new cocoon-gem-example

2. Instantly, attach jquery to the design applying the following code:

yarn add jquery

3. Renew the webpack folder with the resulting cryptogram

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend('Provide',

new webpack.ProvidePlugin({

$: 'jquery/src/jquery',

jQuery: 'jquery/src/jquery'

})

)

module.exports = environment

4. Connect the epitome to the folder:

# Unobtrusive nested forms handling, using jQuery. Use this & discover cocoon-heaven.

gem 'cocoon'

5. Attaching and establishing cocoon-shaped gems utilizing this package will not wholly fix the cocoon-shaped gems of the application. For this, we additionally require to affix a cocoon bag with yarn:

yarn add github:nathanvda/cocoon#c24ba53

6. Append the following couple of words in the javascript.js file.

require('jquery')

import "cocoon";

7. Pour this code to establish cocoon gem

bundle install

8. Instantly, create a User prototype

rails g model User

9. Create a Companion pattern with the guidance of the subsequent code:

rails g model Friend

10. Now, select the immigration data created using the first pair of commands. The file names are 20210427114709_create_users.RB and 20210427114810_create_friends.RB, located in the db/migrate directory:

db/migrate/20210427114709_create_users.rb

class CreateUsers < ActiveRecord::Migration[6.1]

def change

create_table :users do |t|

t.string :name, null: false

t.timestamps

end

end

End

db/migrate/20210427114810_create_friends.rb

class CreateFriends < ActiveRecord::Migration[6.1]

def change

create_table :friends do |t|

t.references :user, null: false, foreign_key: true

t.string :friend_name, null: false

t.timestamps

end

end

end

11. It is now time to transfer to flash the previous modifications to the app architecture:

$ rails db:migrate

12. Renovate the prototype document of user.rb

class User < ApplicationRecord

has_many :friends, dependent: :destroy

accepts_nested_attributes_for :friends

End

13. As mentioned before, we necessitate changing the friend's model data, namely friend.rb.

class Friend < ApplicationRecord

belongs_to :user

End

14. Create User regulator

rails g controller users

15. Inaugurate app/controller and compose the following cipher. As you can view here, we have attached the _destroy virtual attribute to the user's allowed options. Shortcut).

class UsersController < ApplicationController

def new

@user = User.new

@friends = @user.friends.build

end

def create

@user = User.new(user_params)

if @user.save

redirect_to user_path(@user)

else

render action: :new

end

end

def show

@user = User.find(params[:id])

@friends = @user.friends

end

private

def user_params

params.require(:user).permit(:name, friends_attributes: [:id, :friend_name, :_destroy])

end

end

16. Enter the user interface section. Create a new file-new.html.erb in the users' register and attach the subsequent language:

<%= form_for(@user) do |f| %>

<br>

<br>

<div>

<div>

<%= f.label :name %>

<%= f.text_field :name %>

</div>

<div>

<%= f.simple_fields_for :friends do |t| %>

<%= render "friend_fields", :f => t %>

<% end %>

<div>

<br>

<%= link_to_add_association "Add Friend", f, :friends %> <!-- (*) -->

</div>

</div>

<div>

<br>

<%= f.submit %>

</div>

</div>

<% end %>

Conclusion:

To conclude, I hope with the help of this tutorial, you are able to understand about Cocoon Gem Example In Rails 6. If you are a ROR fan and desire to discover deeper regarding Ruby on Rails, please hit the ROR tutorial and get started. You need to find dedicated developers from a top-notch development company to create such unique applications.