"ART_Cinema Project" ⑬200524_TIL

[오늘의 영화] '버드 박스, 수사네 비르'

오늘 한 일(To Do List)

▶ 좋아요 Top 10위 뽑기
▶ 코멘트 Top 10위 뽑기
▶ 검색수 Top 10위 뽑기
▶ temp.html 에 어떤 형식의 html 로 띄울지 구상
▶ temp.html 전체적인 색감 변경

(좋아요 Top 10위 뽑기)

// flask_server
@app.route('/sort/like', methods=['POST'])
def sort_like():
    find_db = list(db.ART_movie_list.find({},{'_id':0}))
    print(find_db)
    sort_db = sorted(find_db,key=(lambda x: x['liked_cnt']),reverse=True)
    print('sort test!')
    print(sort_db)
    return jsonify({'result':'success', 'sort_like':sort_db})
    
// html function
function sort_like_db(){
      console.log('test')
      $.ajax({
        type:"POST",
        url:"/sort/like",
        data:{},
        success: function(response){
          if(response['result'] == 'success'){
            sort_liked_db = response['sort_like']
            like_menu_bar= '실시간 좋아요 순위'
            console.log(sort_liked_db)
            like_rank_1 = '1위 ' + sort_liked_db[0]['title']
            like_rank_2 = '2위 ' + sort_liked_db[1]['title']
            like_rank_3 = '3위 ' + sort_liked_db[2]['title']
            like_rank_4 = '4위 ' + sort_liked_db[3]['title']
            like_rank_5 = '5위 ' + sort_liked_db[4]['title']
            like_rank_6 = '6위 ' + sort_liked_db[5]['title']
            like_rank_7 = '7위 ' + sort_liked_db[6]['title']
            like_rank_8 = '8위 ' + sort_liked_db[7]['title']
            like_rank_9 = '9위 ' + sort_liked_db[8]['title']
            like_rank_10 = '10위 ' + sort_liked_db[9]['title']


            bring_rank_html(like_menu_bar,like_rank_1,like_rank_2,like_rank_3,like_rank_4,like_rank_5,like_rank_6,like_rank_7,like_rank_8,like_rank_9,like_rank_10)
            
          }
        }
      })
    }

(코멘트 Top 10위 뽑기)

// flask_server
@app.route('/sort/comment',methods=['POST'])
def sort_comment():
    find_db = list(db.ART_movie_list.find({},{'_id':0}))
    print(find_db)
    sort_db = sorted(find_db,key=(lambda x: x['commented_cnt']),reverse=True)
    print('sort test!')
    print(sort_db)
    return jsonify({'result':'success', 'sort_comment':sort_db})
    
//html function
function sort_comment_db(){
      console.log('test')
      $.ajax({
        type:"POST",
        url:"/sort/comment",
        data:{},
        success: function(response){
          if(response['result'] == 'success'){
            sort_commented_db = response['sort_comment']
            comment_menu_bar= '실시간 코멘트 순위'
            console.log(sort_commented_db)
            comment_rank_1 = '1위 ' + sort_commented_db[0]['title']
            comment_rank_2 = '2위 ' + sort_commented_db[1]['title']
            comment_rank_3 = '3위 ' + sort_commented_db[2]['title']
            comment_rank_4 = '4위 ' + sort_commented_db[3]['title']
            comment_rank_5 = '5위 ' + sort_commented_db[4]['title']
            comment_rank_6 = '6위 ' + sort_commented_db[5]['title']
            comment_rank_7 = '7위 ' + sort_commented_db[6]['title']
            comment_rank_8 = '8위 ' + sort_commented_db[7]['title']
            comment_rank_9 = '9위 ' + sort_commented_db[8]['title']
            comment_rank_10 = '10위 ' + sort_commented_db[9]['title']


            bring_rank_html(comment_menu_bar,comment_rank_1,comment_rank_2,comment_rank_3,comment_rank_4,comment_rank_5,comment_rank_6,comment_rank_7,comment_rank_8,comment_rank_9,comment_rank_10)
            
          }
        }
      })
    }

(검색수 Top 10위 뽑기)

// flask_server
@app.route('/sort/search', methods=['POST'])
def sort_search():
    find_db = list(db.ART_movie_list.find({},{'_id':0}))
    print(find_db)
    sort_db = sorted(find_db,key=(lambda x: x['searched_cnt']),reverse=True)
    print('sort test!')
    print(sort_db)
    return jsonify({'result':'success', 'sort_search':sort_db})
    
//html function
function sort_search_db(){
      $.ajax({
        type:"POST",
        url:"/sort/search",
        data:{},
        success: function(response){
          if(response['result'] == 'success'){
            sort_searched_db = response['sort_search']
            console.log(sort_searched_db)
            search_menu_bar= '실시간 검색 순위'
            search_rank_1 = '1위 ' + sort_searched_db[0]['title']
            search_rank_2 = '2위 ' + sort_searched_db[1]['title']
            search_rank_3 = '3위 ' + sort_searched_db[2]['title']
            search_rank_4 = '4위 ' + sort_searched_db[3]['title']
            search_rank_5 = '5위 ' + sort_searched_db[4]['title']
            search_rank_6 = '6위 ' + sort_searched_db[5]['title']
            search_rank_7 = '7위 ' + sort_searched_db[6]['title']
            search_rank_8 = '8위 ' + sort_searched_db[7]['title']
            search_rank_9 = '9위 ' + sort_searched_db[8]['title']
            search_rank_10 = '10위 ' + sort_searched_db[9]['title']                        

            bring_rank_html(search_menu_bar,search_rank_1,search_rank_2,search_rank_3,search_rank_4,search_rank_5,search_rank_6,search_rank_7,search_rank_8,search_rank_9,search_rank_10)
            
          }
        }
      })
    }

(화면에 어떻게 띄울지 구상 + temp.html 전체적인 색감 변경)

[변경 전]

[변경 후]

원래 기존의 색깔은 무채색 계열을 선호했지만, 아트씨네마. 특히, 독립/예술 영화를 소개해주는 채널이기 때문에, 유명한 독립영화 포스터의 색깔을 가져와서 사용해봤다.

temp.html 만 변경했지만, page3.html (선호도 조사 후, 나오는)/ page5.html(검색했을 때 나오는) / mypage.html 모두 색감 변경을 진행해야할듯 하다.

색감을 참고한 포스터는, '가버나움'의 포스터이다.

해당 포스터에 색깔을 RGB로 추출하여 사용했다.

다음에 할 일

▶ 쿼리스트링 구현하기 (검색을 위한)
▶ page3.html (선호도 조사 후 페이지) 색깔 조정
▶ page5.html (검색 후 페이지) 색깔 조정
▶ 쿼리스트링으로 검색을 구현했다면, temp/mypage에도 추가하기

(html 정리)

'/' → 제일처음 화면

'/temp' → 메인 화면

'/page2' → 선호도 조사 화면

'/page3' → 선호도 조사 결과 화면

'/page5' → 검색 화면

- '/page5?q=가버나움' → 가버나움을 검색시 만들어질 URL

'/mypage' → 마이 페이지 화면