드롭다운 사용(선택 상자) - 투고자 선택 -

대학생들이 모인 프로그래밍 커뮤니티
저는 Geek Salonhttps://bit.ly/2M64LXd 나고야의 멤버 요시다입니다.
• 선택 상자에 들어갈 항목을 선택하고 싶습니다!
・index뿐만 아니라 더 많은 페이지도 투고할 수 있도록 하고 싶습니다!
그런 사람을 위해 쓴 기사입니다.또 왔다
・ 투고 버튼을 누르면 바로 선택한 곳으로 이동하고 싶어요!
이런 제멋대로의 요구도 해결 방법을 [응용]으로 실었다.
부디 참고하시오

일단 선택지를 붙여보도록 하겠습니다.


form_with, form_이런 느낌의 컨테이너를 for로 담아보도록 하겠습니다.


여기 기사 참고해주세요.
https://qiita.com/kawakami_shotaro/items/11a677bf34136cb7686d

목표: 멀티 페이지 투고


이번에 우리는 사용자가'일식, 양식, 중화'세 가지 유형 중에서 투고 대상을 선택하는 기능을 실시할 것이다.


준비물

  • 트위터 테이블의genre열(자유명명)
  • view 페이지(이번에는 페이지 1, 페이지 2, 페이지 3)
  • 이거 두 개만 준비해 주세요.
    명령 알림을 열고 Twitters 테이블에genre열을 추가합니다.자신의 제품 수준에서 cd
    명령 프롬프트
    rails g migration AddGenreToTweets genre:integer
    rails db:migrate
    
    열 추가 = > 데이터베이스 수정 = > migrate.열의 준비가 이것으로 끝났습니다. (인덱스로 저장된 이유는 잠시 후)
    뷰 페이지는 VScode로 한 번에 3개씩 만들어주세요.이름은 적당히 페이지 1, 페이지 2, 페이지 3 (잊어버린 사람은 교재로 확인!)

    주제: index에서 투고할 수 있을 뿐만 아니라 여러 페이지에서도 투고할 수 있다


    그럼 실현된 코드를 쓰세요.투고 페이지의 하단 코드는 이런 느낌입니다.
    new.html.erb
    <%= stylesheet_link_tag 'new', :media => "all" %>
    
    <div class="post-container">
        <p class="title">投稿フォーム</p>
        <%= form_for(@tweet, :url => { controller:'tweets', action:'create'})do |f| %>
        <%= f.label :投稿内容 %>
        <br>
        <%= f.text_field :body,size: 140%>
    -----ここから変更-----
        <%= f.select :genre, [["和食", 1], ["洋食", 2], ["中華", 3]], include_blank: "選択して下さい" %>
    -----ここまで------
        <div class="field">
          <%= f.label :画像選択 %>
          <%= f.file_field :image %>
        </div>
        <br>
        <%= f.submit "送信" %>
        <br>
        <% end %>
    </div>
    
    화식
    이제 컨트롤러 변경할게요.
    tweets_controller.rb
    *省略*
        def page1
        @washokus = Tweet.where(genre: 1)
        end
        def page2
        @yoshokus = Tweet.where(genre: 2)
        end
        def page3
        @chukas = Tweet.where(genre: 3)
        end
    *省略*
        private
        def tweet_params
            params.require(:tweet).permit(:body,:image,:genre)
        end
    
    순서대로 봅시다.
    tweets_controller.rb
        def page1
        @washokus = Tweet.where(genre: 1)
        end
    
    이것은 "genre열에 1이 함유된 물질만 대입@washokus"입니다.
    이것@washokus은 페이지1의view에서 사용하면 반찬만 표시할 수 있습니다.
    tweets_controller.rb
        private
        def tweet_params
            params.require(:tweet).permit(:body,:image,:genre)
        end
    
    genre 표시줄에 있는 물건을 운반하기 위해 빨대 파라미터에genre를 추가합니다.이거 까먹기 쉬워요.
    이제 라우팅 할게요.
    routes.rb
      get 'tweets/page1' => 'tweets#page1'
      get 'tweets/page2' => 'tweets#page2'
      get 'tweets/page3' => 'tweets#page3'
    
    주제 밖의 말은 루트를 쓸 때 id를 처리하는 코드 위에 이 코드를 쓰십시오
    (예: get 'tweets/:id' => 'tweets#show', as: 'tweet'이것은 id에 URL 오류가 발생하는 것을 방지하기 위해서입니다
    마지막으로 뷰 페이지 만들어 드릴게요.
    page1.html.erb
    <%= stylesheet_link_tag 'index', :media => "all" %>
    <h1>和食</h1>
    <div class="tweets-container">
    <% @washokus.each do |t| %>
        <div class="tweet">
          <%= link_to t.user.name, user_path(t.user.id) %>
          (♡<%= t.liked_users.count %>)
          <% if t.image.present? %>
            <%= image_tag t.image_url, :size => "500x300" %>
          <% end %>
          <div class="main-box">
            <div class="left-container"><%= t.body %></div>
            <div class=right-container>
              <%= link_to "詳細", tweet_path(t.id) %>
              <% if current_user.id == t.user.id %>
                <%= link_to "編集", edit_tweet_path(t.id) %>
                <%= link_to "削除", tweet_path(t.id), method: :delete %>
              <% end %>
            </div>
          </div>
          <p class="time"><%= t.created_at %></p>
        </div>
      <% end %>
    </div>
    
    page2.html.erb
    <%= stylesheet_link_tag 'index', :media => "all" %>
    <h1>洋食</h1>
    <div class="tweets-container">
    <% @yoshokus.each do |t| %>
        <div class="tweet">
          <%= link_to t.user.name, user_path(t.user.id) %>
          (♡<%= t.liked_users.count %>)
          <% if t.image.present? %>
            <%= image_tag t.image_url, :size => "500x300" %>
          <% end %>
          <div class="main-box">
            <div class="left-container"><%= t.body %></div>
            <div class=right-container>
              <%= link_to "詳細", tweet_path(t.id) %>
              <% if current_user.id == t.user.id %>
                <%= link_to "編集", edit_tweet_path(t.id) %>
                <%= link_to "削除", tweet_path(t.id), method: :delete %>
              <% end %>
            </div>
          </div>
          <p class="time"><%= t.created_at %></p>
        </div>
      <% end %>
    </div>
    
    page3.html.erb
    <%= stylesheet_link_tag 'index', :media => "all" %>
    <h1>中華</h1>
    <div class="tweets-container">
    <% @chukas.each do |t| %>
        <div class="tweet">
          <%= link_to t.user.name, user_path(t.user.id) %>
          (♡<%= t.liked_users.count %>)
          <% if t.image.present? %>
            <%= image_tag t.image_url, :size => "500x300" %>
          <% end %>
          <div class="main-box">
            <div class="left-container"><%= t.body %></div>
            <div class=right-container>
              <%= link_to "詳細", tweet_path(t.id) %>
              <% if current_user.id == t.user.id %>
                <%= link_to "編集", edit_tweet_path(t.id) %>
                <%= link_to "削除", tweet_path(t.id), method: :delete %>
              <% end %>
            </div>
          </div>
          <p class="time"><%= t.created_at %></p>
        </div>
      <% end %>
    </div>
    
    그리고 이 페이지들을 날기 위해 index에 링크를 적당히 붙여주세요
    index.html.erb
    <%= link_to '和食', :controller => "tweets", :action => "page1" %>
    <%= link_to '洋食', :controller => "tweets", :action => "page2" %>
    <%= link_to '中華', :controller => "tweets", :action => "page3" %>
    
    이렇게 완성!수고하셨습니다!

    [적용] 투고 버튼을 누르면 바로 선택한 위치로 날아가는 기능


    현재 Twitters 컨트롤러는create 동작입니다.
    tweets_controller.rb
       if @tweet.save
          redirect_to :action => "index"
    
    따라서 투고 후 index로 날아간다.이것 괜찮아요?
    tweets_controller.rb
        def create
            @tweet = Tweet.new(tweet_params)
            @tweet.user_id = current_user.id
            if @tweet.save and @tweet.genre == 1
                redirect_to :action => "page1"
            elsif @tweet.save and @tweet.genre == 2
                redirect_to :action => "page2"
            elsif @tweet.save and @tweet.genre == 3
                redirect_to :action => "page3"
            else
                redirect_to :action => "index"
            end
        end
    
    AandB는 "A 및 B"의 조건입니다.즉'저장'@tweet과'genre열과 1이 일치한다'는 조건이 충족되면 페이지1 동작을 수행하고 결과는 페이지1로 바로 날아가는 것이다.
    선택 상자에서 아무것도 선택하지 않았습니다. 저장에 실패하면 index로 날아갑니다.

    좋은 웹페이지 즐겨찾기