[Back] 게시글 좋아요 기능 만들기 - 4. 초기화면 로그인 여부에 따라 다르게 구성하기

 

안녕하세요 주갬입니다!

 

벌써 네번째 글이네요! 잘 따라와주신 모든 분들께 감사합니다

 

 

2021.05.25 - [Laravel Blog] - [Front] 게시글 좋아요(Like / Dislike) 기능 만들기 - 1. 뷰 만들기

[Front] 게시글 좋아요(Like / Dislike) 기능 만들기 - 1. 뷰 만들기

2021.05.26 - [Laravel Blog] - [Back] 게시글 좋아요 기능 만들기 - 2. 데이터베이스 설계

[Back] 게시글 좋아요 기능 만들기 - 2. 데이터베이스 설계

2021.05.26 - [Laravel Blog] - [Back] 게시글 좋아요 기능 만들기 - 3. 모델과 마이그레이션

[Back] 게시글 좋아요 기능 만들기 - 3. 모델과 마이그레이션

 

---

1.  게시글 상세 페이지 불러올 때 저장되어 있는 feelings 테이블의 데이터 가져오기

 

우선 초기에 페이지를 불러올 때 1. 로그인된 이 사용자가 2. 이 게시글에 이미 좋아요 표시를 했는지를 확인해야 합니다.

 

 

저는 그 두 가지 정보를 확인해 사용자별로 나타나는 좋아요 / 싫어요 버튼의 상태를 다르게 보여주었습니다.  

 

• 로그인 하지 않은 사용자라면 총 좋아요 / 싫어요 수를 보여주자!

 

• 로그인 후에는 단순한 선택을 할 수 있도록 숫자를 포함하지 않은 버튼만 보여주자!

 

이때, 한번도 해당 게시글에 좋아요 / 싫어요 선택을 하지 않은 사용자는 디폴트 상태로,

기존에 선택을 했던 사용자라면 직전의 선택을 반영하여 버튼이 select된 상태로 보여지도록 구현하였습니다.

 

 

이 처럼 구현하기 위해 저는 상세페이지 view 컨트롤러를 만들 때 작성했던 함수에 다음의 코드를 추가했습니다.

 

// app/Http/Controllers/PostController.php

...
use App\Models\Feeling;
...

	//쓰여진 글 불러와서 상세 페이지 보여주는 함수
    public function view($id = null)
    {
        $login_id = Auth::id();
        if(empty($login_id)) {
          //login된 사용자가 없을 때는 값을 0으로 넣어준다.
          $login_id = 0;
        }
        $post_page = Post::where('id',$id) -> first();
        	
        //게시글의 번호를 where문에 넣고 조회해 해당하는 댓글 목록만 가져옴
        $reply_lists = DB::table('reply_tables')
    				-> join ('users', 'reply_tables.r_user_id', '=', 'users.id' )
    				-> select('reply_tables.*','users.name')
					-> where('reply_tables.post_id','=',$id)
    				-> get();

		$feeling = Feeling::where('board_no',$id)->where('user',$login_id) -> get();
		$like_sum = Feeling::where('board_no',$id)->where('like_no','1') -> count('like_no');		
		$dislike_sum = Feeling::where('board_no',$id)->where('dislike_no','1') ->count('dislike_no');		

        return view('test',['post_page' => $post_page, 'reply_lists' => $reply_lists, 'login_id' => $login_id, 'feeling' => $feeling,'like_sum' => $like_sum,'dislike_sum' => $dislike_sum,'id'=>$id]);
    }

  

use App\Models\Feeling;

맨 위에 Feeling 모델을 사용함을 알려줍니다.

 

이제 중요한 부분인데요 , 라라벨 엘로퀀트 쿼리를 통해 데이터베이스에서 원하는 값을 불러옵니다.

$feeling = Feeling::where('board_no',$id)->where('user',$login_id) -> get(); //1
	$like_sum = Feeling::where('board_no',$id)->where('like_no','1') -> count('like_no');	//2	
		$dislike_sum = Feeling::where('board_no',$id)->where('dislike_no','1') ->count('dislike_no');	 //3	

1. 게시글의 id값이 feelings테이블의 board_no와 일치하고, 2. 로그인된 사용자의 id가 feelings테이블의 user와 일치하는 row를 찾아서 가져옵니다. (로그인한 사용자에게 보여줄 화면에 사용)

2. 게시글의 id값이 feelings테이블의 board_no와 일치하면, 좋아요를 누를 때마다 각 row에 1씩 저장되는 like_no의 총 합을 count합니다. -> 해당 게시글의 총 좋아요 수를 계산하여 $like_sum에 저장합니다.

3. 게시글의 id값이 feelings테이블의 board_no와 일치하면, 싫어요를 누를 때마다 각 row에 1씩 저장되는 dislike_no의 총 합을 count합니다. -> 해당 게시글의 총 싫어요 수를 계산하여 $dislike_sum에 저장합니다. 

 

return view('test',['post_page' => $post_page, 'reply_lists' => $reply_lists, 'login_id' => $login_id, 'feeling' => $feeling,'like_sum' => $like_sum,'dislike_sum' => $dislike_sum,'id'=>$id]);

그리고 view에 $feeling, $like_sum, dislike_sum을 넘겨줍니다.

 

 

view에서는 받아온 데이터를 다음 코드를 이용해 보여줍니다.

<!-- like and dislike -->
		@auth
			<div class="feeling_div">
				<div class="button-container like-container">
				    <button class="feeling" id="feeling_like_btn">
				      <i class="fa fa-heart-o"> Like</i>    
				    </a>
				  </div>
				  <div class="button-container dislike-container">
				    <button class="feeling" id="feeling_dislike_btn">
				      <i class="fa fa-heart"> Dislike</i>
				    </a>
				</div>
			</div>
		@else
			<div class="feeling_div">
				<div class="button-container  like-container">
				    <button class="feeling" onclick="Alert_evt();">
				      <i class="fa fa-heart-o"> {{ $like_sum }} Like</i>    
				    </a>
				  </div>
				  <div class="button-container">
				    <button class="feeling">
				      <i class="fa fa-heart"> {{ $dislike_sum }} Dislike</i>
				    </a>
				</div>
			</div>
		@endauth

@auth, @else, @endauth를 이용해 로그인된 사용자와 로그인 되지 않은 사용자의 화면을 다르게 구성하였습니다.

---

 

 

다음 시간에는 로그인 후에 좋아요 / 싫어요를 선택한 값을 ajax로 통신하여 POST하는 방법에 대해 알아보겠습니다.

 

감사합니다.