게시 기능 구현

＊이 기사는 기술이나 지식의 공유 목적이 아니고, 완전하게 자기 만족의 아웃풋용입니다.

<개발 환경>
1. 루비 2.6.3
2. Rails 5.1.6
3. AWS Cloud9
4. GitHub
5. Heroku(예정)
6. sqlite3(develop 환경)

이번에는 게시, 게시 편집, 게시 삭제의 기본 동작을 구현했습니다.

글

post 모델 만들기

rails g model Posts content:text user:reference image:string

post 테이블을 만들 때 reference를 사용하면 테이블에 user_id 열이 자동으로 생성됩니다.
또한 foreign_key: true를 기재하여 외래 키 제약을 적용할 수 있습니다.

모델 연관

게시물 편집, 삭제 기능을 만드는 사전 준비를 합니다.
Post 모델에belongs_to :userUser 모델에has_many :posts
이제 모델을 연결하고 Rails는 참조할 데이터를 가져오거나 삭제할 수 있는 메서드를 추가합니다.

마이그레이션

rails db:migrate

컨트롤러 작성

rails g controller posts new
라우팅으로resources :posts추가합니다.

class PostsController < ApplicationController
  before_action :ensure_correct_user, {only: [:edit, :update, :destroy]}

  def new
    @post = Post.new
  end

  def create
    @post = current_user.posts.new(post_params)

    @post.save
    flash[:notice] = "投稿に成功しました"
    redirect_to user_path(current_user.id)
  end


  def show
    @post = Post.find(id: params[:id])
  end

  def edit
    @post = Post.find_by(id: params[:id])
  end

  def update
    @post = Post.find_by(id: params[:id])
    @post.image = params[:image]
    @post.content = params[:content]
    @post.update(post_params)
    redirect_to user_path(current_user.id)
  end

  def destroy
    @post = Post.find_by(id: params[:id])
    @post.destroy(post_params)
    redirect_to user_path(current_user.id)
  end

  def ensure_correct_user
    @post = Post.find_by(id: params[:id])
    if current_user.id != @post.user_id
      flash[:notice] = "権限がありません"
      redirect_to user_path(current_user.id)
    end
  end

  private
  def post_params
    params.require(:post).permit(:image, :content)
  end

end

ensure_correct_user 메소드를 추가하여 로그인 중인 사용자 이외의 사용자가 자신의 게시물을 수정하거나 삭제하는 것을 방지합니다. (view의 설정만으로는 url로부터 직접 편집 페이지로 날아 버린다.)

이것으로 컨트롤러 설정이 완료됩니다.

보기 정돈하기

이번에는 Twiiter를 참고로 마이 페이지에 투고 화면, 투고 목록 화면을 올렸습니다.


show.html.erb

<div class="user-show-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-md-3 text-center">
        <section class="user_info">
          <h1>
            <%= @user.name %>
          </h1>
          <%= form_for @post do |f| %>
            <div class="field-image">
              <%= f.label :image, class: "white" %>
              <%= f.file_field :image%>
            </div>
            <div class="form-group">
              <%= f.label :content, class: "white" %>
              <%= f.text_area :content, class: 'form-control' %>
            </div>
            <%= f.submit '投稿', class: 'btn btn-black btn-block' %>
          <% end %>
        </section>
      </div>
      <div class="col-md-6">
        <div class="post-index-wrapper">
          <div class="container">
            <div class="col-md-6">
              <% @posts.each do |post| %>
                  <div class="post-index-single">
                    <h2 class="post-author">
                      <%= post.user.name %>
                    </h2>
                      <%= image_tag post.image.url if post.image? %>
                    <p class="post-text">
                      <%= post.content %>
                    </p>
                    <% if post.user_id == current_user.id && user_signed_in? %>
                      <%= link_to '編集', edit_post_path, class: 'btn btn-default' %>
                      <%= link_to '削除', post_path, method: :delete, class: 'btn btn-default' %>
                    <% end %>
                  </div>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

좌측의 투고 폼은 sticky를 이용하는 것으로 스크롤해도 그대로 고정되도록 하고 있습니다.

custom.css

.col-md-3{
position: -webkit-sticky;
position: sticky;
top: 60px;
}

이것으로 게시 기능은 완성입니다!