edit_user GET /users/:id/edit(.:format) users#editresources :users, only: […, :edit] tells Rails to map requests to http://localhost:3000/users/:id/edit to the user controller's edit action.Add link edit profile to Edit Profile button in user profile page:<a class="edit-profile" href="<%= edit_user_path(current_user) %>"> <button>Edit Profile</button></a>current_user is a helper of devise, it’s current user signed in.Step 2: Layout Edit profile pageWe layout Edit profile page with 2 columns: The left column is actions and the right column is corresponding details.The layout of Edit profile page.HTML code:<div class="user-edit-page"> <div class="actions"> <!– Left column –> </div> <div class="details"> <!– Right column –> </div></div>CSS code: I’m using flex technique to layout.user-edit-page{ display: flex; margin-top: 60px; min-height: 500px; .actions{ width: 220px; border: 1px solid #dbdbdb; } .details{ flex: 1; border: 1px solid #dbdbdb; border-left:none; }}Step 3: Add navigation to the left of the pageWe use navs components of Bootstrap 4 with vertical pills for this section..See HTML code in below:CSS for actions section:.actions{ width: 220px; border: 1px solid #dbdbdb;.nav-link{ font-size: 14px; background-color: white; color: black; border-radius: 0; padding: 12px 0 12px 30px; &:hover{ cursor: pointer; } } .nav-pills .nav-link.active{ border-left: 2px solid; font-weight: 600; }}Now UI look like:The Left of Edit profile pageStep 4: Add Form edit user to right of the pageAdd a line code to find current user to edit action in articles_controller.rbdef edit @user = User.find(params[:id])endIn the right column, add a form to update the current user..We use form_with helper of Rails to generate a form.Form edit user as below:Form Edit UserCSS of Form:.form-edit-user{ padding: 30px 100px 10px 50px;.form-group, input{ font-size: 14px; color: black; } input, textarea{ border: 1px solid #efefef; } .col-form-label{ text-align: right; font-weight: 600; }.avatar{ height: 38px; width: 38px; border-radius: 50%; } .username{ font-size: 20px; line-height: 22px; margin-bottom: 0; } .change-photo{ color: #3897f0; text-decoration: none; font-size: 13px; } input[type='submit']{ color: white; }}UI of form will look like:When you fill information into the form and click submit button to process update user, you will see the error no routes match:Error occur because we aren’t define update route to user yet..Now, we need to add update user routes to routes.rbresources :users, only: [:show, :edit, :update]Fill out the form and submit again, you should see a family error:The action update could not be found, so we need to create update action in UserController like that:def update current_user.update(params[:user]) redirect_to current_userendIn update action, we update the current user based on params which filled from form edit..current_user is current signed-in user.Try again, oop!.you’ll get an error like this:Forbidden Attributes ErrorRails support some feature that helps we write secure applications..This one is called strong parameters, which require us to define which parameters are allowed into our controller actions..We have to whitelist our parameters to prevent wrongful mass assignment.So now, to fix ForbiddenAttributesError we have to use strong parameters before updating the user.To use strong parameters in our case, we use require and permit methods like that:params.require(:user).permit(:username, :name, :website, :bio, :email, :phone, :gender)That means we allow username, name, website, bio, email, phone and gender parameters for the valid params..Now, theupdate action looks like:def update current_user.update(user_params) redirect_to current_userendprivatedef user_params params.require(:user).permit(:username, :name, :website, :bio, :email, :phone, :gender)endNow, go back to form edit and submit update again..It work!.After update user successful, it’ll redirect to user profile page.To easily see the change after updating user info, we should go back to user profile page (users/show.html.erb) to replace some fake data by real data of user.Update HTML code like that:<div class="col-md-8 basic-info"> <div class="user-wrapper"> <h2 class="username"><%= current_user.username %></h2> ….</div> …. More details