2.3 Creating an app

Describe the routing.

routes.rb

Rails.application.routes.draw do
  root to: 'products#index'
  resources :products, only: [:index, :new, :create,:edit ,:update, :destroy]
end

Create a controller.

Terminal

$ rails g controller products

Add the following to the products controller.

class ProductsController < ApplicationController
  
  def index
    @products = Product.all
  end

  def new
    @product = Product.new
  end

  def create
    product.create(product_params)
    redirect_to root_path
  end

  def destroy
    product = Product.find(params[:id])
    product.destroy
  end

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

  def update
    product = Product.find(params[:id])
    product.update(product_params)
  end

  private
  def product_params
    params.require(:product).permit(:name, :youtube_url)
  end
end

Create a model.

Terminal

$ rails g model product

Add the following to the migration file

db/migrate/xxxxxxxxxxxxxx_create_products.rb

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :products do |t|
      t.text :name #add to
      t.string :youtube_url #add to
      t.timestamps
    end
  end
end

Let's do rails: db: migrate.

Terminal

$ rails db:migrate

** Preparation is complete ** ** This is the most important process! !! ** **

Create a view file for the top screen. Please enter the following command.

Terminal

$ touch app/views/products/index.html.haml
$ touch app/views/products/new.html.haml
$ touch app/views/products/edit.html.haml
* Please type in order from the top

Create a view file for the top screen. Add the following code to ʻindex.html.haml`.

ruby:index.html.haml

.contents
  - @products.each do |product|
    .content_post
      = product.name
    .content_post
      %iframe{src: "https://www.youtube.com/embed/#{product.youtube_url[32..42]}",allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", allowfullscreen: "", frameborder: "0", height: "315", width: "560"}
    

The code below is the base code for the embed code. https://www.youtube.com/embed/ By adding # {post.youtube_url [32..42]} to the end of this code, even URLs generated in an irregular state can be played normally.

Supplementary explanation

 %iframe{src: "https://www.youtube.com/embed/#{product.youtube_url[32..42]}", Omitted below}
#Add the code below
"#{product.youtube_url[32..42]}"
#Obtained an 11-digit character string that identifies the video

Next, create a view of the post screen and edit screen. Add the following code to new.html.haml and ʻedit.html.haml (It is okay to use a partial template in this process)

ruby:new.html.haml&edit.html.haml

.new-contents
  .new-contents__content

      = form_with(model: @product, local: true) do |form|
      contents-group
        = form.label :name, "name"
        = form.text_field :name, placeholder: 'name'

      contents-group
        = form.label :youtube_url, "YouTube URL"
        = form.text_field :youtube_url, placeholder: 'youtube_url'
      = f.submit 'Post'

** This is the end !! ** By adding a little description to the embed code, you can embed the video correctly in any URL (limited to youtube) and you can play the video.

Reference article

• https://qiita.com/Kairi_Yasunnde/items/8e931a4670549ba8237e
• https://qiita.com/yuichisan65/items/9356a2822fb37e51b3b4

Finally

This concludes the explanation of "How to embed and display youtube videos in Rails". I would appreciate it if you could point out any mistakes.

Thank you for watching until the end.