"ART_Cinema Project" ⑭200531_TIL (5월 정리)

오늘의 영화 :  '플로리다 프로젝트, 숀 베이커'

'플로리다 프로젝트' 포스터

 

---

오늘 한 일 (To Do List)

▶ temp.html (+) (-) 기능 추가
▶ temp.html 실시간 순위를 누르면, 해당 영화검색 Page5로 이동
▶ 좋아요 누르면, liked_cnt 가 1씩 증가하고, 검색을 하면, searched_cnt 가 1씩 증가한다.
▶ 코멘트 수정할 때, 기존에 작성한 코멘트 내용 textarea에 보여주기
▶ 쿼리스트링으로 검색엔진 구현

 

---

(temp.html (+) (-) 기능 추가)

(+)를 누르면, 해당 영화가 있는 db(ART_movie_list)에 liked_cnt +1 추가
(-)를 누르면, serverside_dislikeDB 에 들어가도록 한다.

(+)를 누르고 또 (+)를 누르면, "좋아요 를 누른 영화라는 alert을 띄워주기"
(+)를 누르고 이후에 (-) 를 누르면, 좋아요에서 싫어요 컬렉션으로 이동
반대도 역시 가능하도록 구현.

 

(temp.html _ javascript part)

// 좋아요 버튼 + 싫어요 버튼
function like_movie(){
  $.ajax({
   type: "POST",
   url: "/like_movie",
   data: {
    title:title,
    poster:poster
  },
  success: function(response){
    if (response['result'] == 'success')
      alert('성공적으로 영화가 담겼습니다')
    else if (response['result'] == 'fail2')
      alert('이미 좋아한다고 누름')
    else if (response['result'] == 'fail1'){
      DL(title, poster)
    }
  }
})
}

function dislike_movie(){
  $.ajax({
   type: "POST",
   url: "/dislike_movie",
   data: {
    title:title,
    poster:poster
  },
  success: function(response){
    if (response['result'] == 'success')
      alert('성공적으로 영화가 담겼습니다')
    else if (response['result'] == 'fail1')
      alert('이미 안좋아한다고 누름')
    else if (response['result'] == 'fail2'){
      LD(title, poster)
    }
  }
})
}

function DL(title,poster){
 jbResult = confirm("싫어요에 담겨있는 영화입니다. 좋아하는 영화에 담을까요 ?");
 if (jbResult == true){
  $.ajax({
   type: "POST",
   url: "/DLupdate_movie",
   data: {title:title, poster:poster},
   success: function(response){
     if (response['result'] == 'success')
      alert('싫어요 -> 좋아요에 성공적으로 영화가 담겼습니다')
  }
})
}
}

function LD(title,poster){
 jbResult = confirm("좋아요에 담겨있는 영화입니다. 싫어하는 영화에 담을까요 ?");
 if (jbResult == true){
  $.ajax({
   type: "POST",
   url: "/LDupdate_movie",
   data: {title:title, poster:poster},
   success: function(response){
     if (response['result'] == 'success')
      alert('좋아요 -> 싫어요에 성공적으로 영화가 담겼습니다')
  }
})
}
}

 

(temp.html _ html/css part)

<div class="prefer_button">
	<button id="like_movie" onclick="like_movie()"> <img src="static/add_button.png" style="width:50px; height:50px;"></button>
	<button id="dislike_movie" onclick="dislike_movie()"> <img src="static/remove_button.png" style="width:50px; height:50px"></button>
</div>

 

---

(temp.html 실시간 순위를 누르면, 해당 영화 정보 페이지로 이동하는 기능)

★ 실시간 순위를 통해서 유입되는 경우는, cnt 되지 않도록 구현

 

temp.html 실시간 순위 메뉴

(temp.html _ javascript part)

function bring_rank_html(rank_bar,rank_1,rank_2,rank_3,rank_4,rank_5,rank_6,rank_7,rank_8,rank_9,rank_10){
      $('#rank_menu_contents').remove()
      console.log(rank_1)
      rank_box_html = '<ul id="rank_menu_contents">\
      <p><a id="rank_bar" style="font-weight:bold;font-size:20pt;">'+'<'+rank_bar+'>'+'</a></p><br>\
      <p><a href="/page5?movie_title='+rank_1+'" id="rank_first">'+'1위 '+rank_1+'</a></p>\
      <p><a href="/page5?movie_title='+rank_2+'" id="rank_second">'+'2위 '+rank_2+'</a></p>\
      <p><a href="/page5?movie_title='+rank_3+'" id="rank_third">'+'3위 '+rank_3+'</a></p>\
      <p><a href="/page5?movie_title='+rank_4+'" id="rank_fourth">'+'4위 '+rank_4+'</a></p>\
      <p><a href="/page5?movie_title='+rank_5+'" id="rank_fifth">'+'5위 '+rank_5+'</a></p>\
      <p><a href="/page5?movie_title='+rank_6+'" id="rank_fifth">'+'6위 '+rank_6+'</a></p>\
      <p><a href="/page5?movie_title='+rank_7+'" id="rank_fifth">'+'7위 '+rank_7+'</a></p>\
      <p><a href="/page5?movie_title='+rank_8+'" id="rank_fifth">'+'8위 '+rank_8+'</a></p>\
      <p><a href="/page5?movie_title='+rank_9+'" id="rank_fifth">'+'9위 '+rank_9+'</a></p>\
      <p><a href="/page5?movie_title='+rank_10+'" id="rank_fifth">'+'10위 '+rank_10+'</a></p>\
      </ul>'

      $('#rank_box').append(rank_box_html);

    }

 

a 태그를 활용해서, href 값으로, "/page5?movie_title='+rank_1+'" 의 형식의 주소로 이동하도록 구현.

"3위 엽문"을 눌렀을 때, 해당 페이지로 이동한다.

 

Page 5

해당 페이지의 디자인적인 요소는, 기능 구현이 완료되면 수정할 계획.

 

(cnt 되는 부분 정리)

 

liked_cnt -> 좋아요 버튼을 눌렀을 때, 카운트
searced_cnt -> 검색창을 통해서 해당 영화를 검색했을 때, 카운트
commented_cnt -> Page5 에서 코멘트를 작성했을 때, 카운트

 

---

(좋아요 누르면, liked_cnt 가 1씩 증가하고, 검색을 하면, searched_cnt 가 1씩 증가한다.)

 

(기본 ART_movie_list 의 형식)

 

{
"_id" : ObjectId("5e86e25810fb60357d3f3e47"),
"title" : "아웃사이더 ",
"poster" : "http://www.kobis.or.kr//common/mast/movie/2020/03/thumb_x192/thn_56b2779f6e76405ba437ee5d03d747f8.jpg",
"director" : "\n가한진,후닝 유안\n",
"summary" : "‘아치’, ‘샨’과 친형제처럼 자란 ‘유하오’. 앙숙인 ‘파오’의 패거리에게 괴롭힘을 당하던 ‘아치’를 구해려주려다 쫓겨도망친 작은 골목에서 우연히 ‘페이유엔’과 마주친다.같은 학교 교복을 입고 자신에게 손수건을 건넨 ‘페이유옌'에게‘유하오’는 첫눈에 반하고 ‘페이유엔’ 역시 그를 좋아하게 된다. 본격적인 첫사랑이 시작되기도 전, 어른들은 삶의 배경이 다른 두 사람을 떼어놓으려 하고‘파오’와의 악연은 ‘유하오’를 둘러싼 사람들을 위험에 빠뜨리는데…사랑을 지키고 우정을 맹세했던 그 시절, 모든 것을 걸었던 청춘들의 뜨거운 사투가 시작된다!",
"genre_1" : "기타",
"genre_2" : "NONE",
"commented_cnt" : 0,
"liked_cnt" : 0,
"searched_cnt" : 0
}

 

해당 형식에서, 아웃사이더를 검색하면, searched_cnt 가 +1 증가한다.

좋아요 버튼을 역시 누르면, 해당 db 의 값이 변경된다.

 

{
"_id" : ObjectId("5e86e25810fb60357d3f3e47"),
"title" : "아웃사이더 ",
"poster" : "http://www.kobis.or.kr//common/mast/movie/2020/03/thumb_x192/thn_56b2779f6e76405ba437ee5d03d747f8.jpg",
"director" : "\n가한진,후닝 유안\n",
"summary" : "‘아치’, ‘샨’과 친형제처럼 자란 ‘유하오’. 앙숙인 ‘파오’의 패거리에게 괴롭힘을 당하던 ‘아치’를 구해려주려다 쫓겨도망친 작은 골목에서 우연히 ‘페이유엔’과 마주친다.같은 학교 교복을 입고 자신에게 손수건을 건넨 ‘페이유옌'에게‘유하오’는 첫눈에 반하고 ‘페이유엔’ 역시 그를 좋아하게 된다. 본격적인 첫사랑이 시작되기도 전, 어른들은 삶의 배경이 다른 두 사람을 떼어놓으려 하고‘파오’와의 악연은 ‘유하오’를 둘러싼 사람들을 위험에 빠뜨리는데…사랑을 지키고 우정을 맹세했던 그 시절, 모든 것을 걸었던 청춘들의 뜨거운 사투가 시작된다!",
"genre_1" : "기타",
"genre_2" : "NONE",
"commented_cnt" : 0,
"liked_cnt" : 1,
"searched_cnt" : 1
}

 

---

(코멘트를 수정할 때, 기존에 있는 코멘트의 내용을 textarea에 띄워주기)

 

Page5 코멘트 작성

 

코멘트가 존재했을 때, 나오는 div 이다.
해당 페이지에서 '수정' 버튼으로 수정하려고 할 때,

 

코멘트 수정시, 이전 텍스트 내용이 나온다.

 

해당 텍스트에 작성한 comment 가 나타나도록 구현했다.

사용자가 커멘트를 작성하는데, 전에 작성한 내용을 참고할 수 있도록 구현했다.

 

---

(쿼리스트링으로 검색엔진 구현)

이 부분이 제일 문제였다... 일주일 내내 논리 상 맞는 로직인데, 계속 구현이 되지 않는 것을 보고서 굉장한 스트레스를 받았었다..ㅠㅠ

팀원들과 함께 이야기를 해본 끝에 구현한 부분이였다. 역시...혼자 머리를 굴리는 것보다는 다른 사람들과 같이 생각해보는 것이 낫다는 것을 뼈저리게 느꼈다 :D

 

(temp.html _ javascript part)

// 입력한 검색어 확인 함수
function search_listing(){
  let search_data = $('#movie_input').val();
  if( search_data != ""){
    alert(search_data+'에 대한 정보입니다.');
    go_page5(search_data)
  }
  else{
    alert('검색어를 입력해주세요.');
  }
}

// 검색 페이지(page5)로 가는 함수
function go_page5(data){
  location.href="/page5?movie_title="+data
}

 

(temp.html _ html/css part)

<input class="keyword" id="movie_input" type="text" name="movie_info_give" maxlength=255 value=""
autocomplete="off" placeholder="제목, 감독, 배우를 입력해주세요." onKeypress="javascript:if(event.keyCode==13) {search_listing()}">

 

(server part)

@app.route('/page5')
def page5():
    para = request.args.get("movie_title")
    print(para)
    print('제발....')
    if 'email' in session:
        email1 = session['email']
        print('tempLogged in as ' + email1)
        print(session)
        return render_template('page5.html', sessionemail=email1, para_data=para)
    else:
        return render_template('page5.html')

 

페이지5 로 접속하는 라우터에서 request.args.get 으로 URL 에 있는 키 값을 받아서 사용하는 과정이다.

para 라는 변수를 return 하는 부분에 같이 넣어서 page5.html 로 보냈다.

 

(page5.html _ javascript part)

// 파라미터를 받는 함수
function get_parameter(){
      console.log("{{para_data}}")
      if("{{para_data}}" == ""){
        console.log("파라미터가 없습니다.")
      }else{
        console.log("파라미터가 있습니다.")
        search_result = "{{para_data}}"
        console.log("검색 결과 : "+search_result)
        bring_DB(search_result)
      }
    }
    
// 페이지 5 로 들어오면 바로 실행되는 함수
$(document).ready(function(){
    search_movie = $('#movie_input').val();

    get_session();
    get_parameter();

    $('#movie_temp_html').html('');
    $('#search_movie_title').text('');
    $('#comment_movie_title').text('');

  });

 

페이지 5로 넘어오면, 바로 파라미터를 받아오는 함수를 실행하고, URL 을 통해서 받아온 입력한 영화 제목의 값으로 페이지 5 내에 있는 bring_DB 함수를 이용해서 띄우는 형식이다.

마이 페이지에서도 검색하면 넘어올 수 있도록 구현했다.

 

---

다음에 할 일

▶ page5.html 에서 검색될 때, 되는 경우를 생각한다. 띄어쓰기가 되어있는 영화정보의 db라면, cnt 가 안되는 경우가 있음.
▶ temp.html 에서 랜덤으로 나오는 영화 코멘트가 있다면, 띄워주기 (없으면 빈 상태)
▶ page3.html (선호도 조사 후 페이지) 색깔 조정
▶ page5.html (검색 후 페이지) 색깔 조정

 

 

---

이후에 추가할 기능 (큰 그림)

(temp.html)

• 팔로우한 유저가 커멘트를 남겼을 때, 메신져 느낌으로 실시간으로 알림을 주는 div (화면상 왼쪽 구역에 배열)

(page5.html)

• 영화에 대한 다른 사람의 코멘트를 보여주기 (코멘트 마다 좋아요를 누를 수 있도록 구현. 좋아요 순대로 코멘트를 나열하기. 해당 계정을 누르면 계정의 mypage로 이동할 수 있도록.)

왓챠 코멘트 파트

 

최근 검색어 오른쪽에 구현하기 (갑자기 든 생각은, 검색창을 눌렀을 때, 나오도록 하는 것은 어떨까?)

 

왓챠 최근 검색어 파트

 

(mypage.html)

• 메신저

인스타 DM

 

• 다이어리 느낌으로, 오늘 볼 영화 다이어리에 표시. 봤다면, 체크해주는 다이어리 기능

무비 다이어리

 

• 팔로우/팔로워 기능 + 버튼 + 자기소개 글 + 자기 프로필 사진

팔로우 / 팔로워

• 회원 등급 (커멘트 갯수에 따른 차등적인 회원등급 적용)

회원등급 제도