[Ruby] I want to implement a product information editing function ~part1~

4 minute read

Assumption

  • Use ruby on rails 6.0.0.
  • User functions are assumed to be introduced by devise.
  • All view files are in haml format.
  • By the way, I use MacBook Air (Retina, 13-inch, 2020).

Introduction

We are making a copy site of a certain flea site for learning programming. I implemented a product information editing function, but I struggled with posting multiple images, so I decided to write it as a reference. It’s not a big amount, but it’s divided into parts so that you can get a sense of accomplishment later. please forgive me. (I wrote a lot!) I don’t think there will be any particular problems in part1, but since it will be the basis for part2 and beyond, I will write about warming up.

Specification

  • You can change the information registered for each item one by one.
  • Only the user who registered the product can edit the product information.
  • You can replace the images one by one.
  • Information such as product names and images that has already been registered is displayed in advance on the edit screen.
  • Perform error handling.
(I will post a reference image when the markup is completed)

procedure

1, Creating a base controller and model. 2, post image by linking image table.

  1. Introduce jQuery to implement posting of multiple images. 4, Adjustment on the edit screen. 5, Preview the image.

We will implement these 5 procedures by dividing them into parts.

Well then

Now to implementation

First, we will solidify the basic parts. First from the terminal.

$ rails g contoroller products $ rails g model product $ rails db:migrate

That’s the usual flow. Details such as database creation and migration file description are omitted.

Now let’s start from the root file.

app/config/routes.rb


Rails.application.routes.draw do
  root "products#index"
  resources :products
  devise_for :users, controllers: {
    registrations:'users/registrations'
  }
end

The devise part is the part related to the user function that is already implemented, so don’t worry about it. Again, no detailed explanation is necessary. Create a basic action with resources and specify the index action in the root path. (This time, I don’t use destroy and show, so it’s okay to use except)

Next is the description of the controller.

app/controllers/products_controller.rb


class ProductsController <ApplicationController
  before_action :ensure_current_user, only[:edit, :update]
  before_action :set_product, only[:new, :create, :edit, :update]

  def index
    @products = Product.all
  end

  def new
    @prodcut = Product.new
  end
  def create
    @product = Product.new(product_params)
    if @product.save
      redirect_to products_path
    else
      render :new
    end
  end

  def edit
  end
  def update
    if @product.update(product_params)
      redirect_to products_path
    else
      render :edit
    end
  end

  private
  def product_params
    params.require(:product).permit(:name).merge(user_id: current_user.id)
  end
  def ensure_current_user
    product = Product.find(params[:id])
    if product.user_id != current_user.id
      redirect_to action: :index
    end
  end
  def set_product
    @product = Product.find(params[:id])
  end
end

Is this a place for the time being? I will explain step by step.

First of all, about basic actions.

@products = Product.all

There is no problem with index, we are fetching all records registered in the product table.

@prodcut = Product.new

Products are registered in new and create. Create a new object in the model .new and assign the form value to it.

def product_params Params.require(:product).permit(:name).merge(user_id: current_user.id) end

The data sent in this way is received by the product_params method. Everyone loves strong parameters. Column is only name because it only implements the minimum functionality.

if @product.save Redirect_to products_path else Render :new end

The following if statement is the one called error handling. If the process is successful, the index is displayed. If it fails, new is displayed again. Although the concept has some complicated parts, I think that the function is already familiar.

@product = Product.find(params[:id])

Next is the edit, update action, but what we are doing is the same as before. The difference from create is that you don’t need to create a new object because the data already exists, and you have the product selected by the find method.

def ensure_current_user Product = Product.find(params[:id]) If product.user_id != current_user.id Redirect_to action: :index End end

Finally there is the ensure_current_user method. It looks difficult at first glance, but the process is very easy. The point is that if the user information of the selected product and the logged-in user information are different, you cannot edit them.

Now that the description of the controller is over, it’s time to write the view file.

haml:app/view/products/index.html.haml


- if user_signed_in?
  [email protected] do |product|
    -if product.user_id == current_user.id
      = link_to edit_product_path(product.id) do
    #{product.name}
  = link_to("sell", new_product_path)

  %h2 logged in
  = link_to'logout', destroy_user_session_path, method: :delete

- else
  %h2 not logged in
  = link_to'new registration', new_user_registration_path
  = link_to'login', new_user_session_path

First from the index, but only the first 6 lines should be noted. Is the user logged in? Is the product registered by the user? Under these two conditions, the path of edit and new is displayed.

haml:app/views/products/_form.html.haml


= form_with model: @product, local: true do |f|
  = f.text_field :name, placeholder:'name'
  = f.submit'SEND'

I don’t think there is anything special about this either. It’s about sending data to the product model using the form_with method. All you have to do now is render this new.html.haml and edit.html.haml as a partial template.

Finally

Up to this point, we have been able to implement the functionality of creating product data and editing it. (Columns are just names, but…)

In the specification,

  • You can change the information registered for each item one by one.
  • Only the user who registered the product can edit the product information.
  • Perform error handling.

You have completed these three. In the next part, we will be able to add images (image table), so please associate if you like.

I want to implement a product information editing function ~part2~