step-by-step registration form using gem Wicked

Tram Ho


Hi everyone, when working with us, we will meet the required spec such as creating a step-by-step registration form. Having to meet the deadlines as well as the requirements of the clear code, using Gem is also a solution that we want to work towards. In today’s article, I want to introduce about the wicked gem.

Describe the problem

When learning something, it’s best to set an output for that. And the result of this sharing I want is:

  • Build a form-step with 3 steps that can save data to the db.
  • Each step ensures data validation.
  • Make sure the code structure is organized clear and easy to use


initialize project:

Add the following line in Gemfile file and run bundle install

Initialize the db and run rails db:migrate

The idea of ​​the wicked gem

When entering the registration form, the first step is to create a new blank record (only the id is generated automatically). Then at each step thereafter simply update the form itself. All step logic will be written in only one controller.
As for the data validation I will use the context to save the status of each step to be able to validate, this I will present in the following. In the controller, only use 2 function show and update :

  • The function show is responsible for displaying the corresponding form function
  • The update function is responsible for updating the records into the db
  • Some helper’s wicked in controller

Some helper of the view:


Building controller

To build a complete form + clear code, I will build 2 controllers, 1 controller to create new records, 1 controller handling the form’s logic. Specifically: UsersController: create a new record and then navigate to the steps controller. StepsController: config form-step.

Controller structure

Proceed to build UserController.rb

Next is the StepController.rb which is the controller that handles the logic of the steps: First we need to include

Directory view structure

Declare how many steps will result in multiple file views in views / steps We still build the form view as usual, each form view will have attri corresponding to that step, but there will be some notes:

  • Add option method:: put (according to RESTful) to point to the update function.
  • Assign url: wizard_path (this is a wicked method to get the path of the current step).

Validate step by step

Create validate in form-step: The idea is that I will use the context (context) to perform validate step by step: You notice in the save step, I have passed the step name into the context so that the model can be validated correctly for each step. step okay

Post results

Thank you for following up on my article.

Share the news now

Source : Viblo