미소를뿌리는감자의 코딩

[항해99 웹개발종합반] 3주차 HW 본문

강의수강/HW

[항해99 웹개발종합반] 3주차 HW

미뿌감 2024. 1. 10. 22:06
728x90

이번 HW은 다음과 같이,

날짜에 따른 박스 오피스 순위를 나타내는 것이다.

 

날짜 검색에 따라 해당 날짜에 따른 순위를 보여준다.

 

[접근 방법]

이번 과제가 movie.html에서 만든 것과 유사하다고 생각이 들어 해당 부분을 복사-붙여넣기 해서 기본 골격을 만들었다.

추후에, 기본 골격이 주어졌었다는 것을 알게되었지만, 오히려 이것저것 해볼 수 있던 좋은 기회였다.

 

먼저, API 를 살펴보며 어떤 구성을 가지고 있는지 확인했다. 

 

API 골격

이런 골격을 가지고 있음을 확인하게 되었고, 

answer_list = rjson["boxOfficeResult"]["weeklyBoxOfficeList"]

이런식으로 접근하면 되겠다 라고 생각하였다.

 

또한, 받아온 data의 경우 table 태그를 이용해서

골격을 만들어주면 되겠다고 생각하였다.

 

[적용]

1) Flask file

Flask 파일

여기서, 

 query = request.args.get('query', '20230601')

requests.args.get의 두 번째 인자로 '20230601'을 넣어주었다.

이렇게 두 번째 인자로 넣어주게 되면, 이를 default value로 여기어 준다.

 

2) answer.html

 

table 구성

table의 구성을 위와 같이 하였다.

여기서 

<table style="width:100%">

 

style 을 넣기 전에는 table이 가로로 짧게 끝났었다. 

width:100%를 설정해줌으로 window의 양끝까지 table이 길게 늘어질 수 있도록 하였다. 

 

다음으로 style은 다음과 같이 구성하였다. 

 

style 구성

border-collapse는 겹치는 줄에 대해서 2개의 줄을 나타내지 않고 한 줄로 나타낼 수 있도록 하는 것이다.

이후 줄을 그어주었다.

 

[결과]

 

2023년 3월 29일의 박스 오피스 순위이다.

 

20240101의 값을 입력해 보겠다.

 

짱구는 못말려.. 보고 싶다... ~날아라 수제김밥~ 아무래도 영화관에서 보는 건 글렀다.

 

[전체 코드]

1) Flask file

더보기
from flask import Flask, render_template, request
import random
import requests

 

app = Flask(__name__)



@app.route('/')
def home():
name = '미뿌감'
lotto = [16, 18, 22, 43, 32, 11]

 

def generate_lotto_numbers():
# Generate a set of unique random numbers for the lottery
numbers = set()
while len(numbers) < 6:
numbers.add(random.randint(1, 45))

 

# Convert to a sorted list
return sorted(numbers)

 

# Generate and display a set of lottery numbers
random_lotto = generate_lotto_numbers()

 

def count_common_elements(list1, list2):
# Convert lists to sets for efficient comparison
set1 = set(list1)
set2 = set(list2)

 

# Find the common elements
common_elements = set1.intersection(set2)

 

# Return the number of common elements
return len(common_elements)

 

common_count = count_common_elements(lotto, random_lotto)

 

context = {
"name": name,
"lotto": lotto,
"random_lotto": random_lotto,
"common_count": common_count,
}
return render_template('index.html', data=context)



@app.route('/mypage')
def mypage():
return 'This is mypage!'



@app.route('/movie')
def movie():
query = request.args.get('query')
res = requests.get(
)
rjson = res.json()
movie_list = rjson["movieListResult"]["movieList"]
return render_template('movie.html', data=movie_list)



@app.route('/answer')
def answer():
query = request.args.get('query', '20230601')
res = requests.get(
)
rjson = res.json()
answer_list = rjson["boxOfficeResult"]["weeklyBoxOfficeList"]

 

# print(answer_list)
return render_template('answer.html', data=answer_list)



if __name__ == '__main__':
app.run(debug=True)
 

 

2) answer.html

 

더보기
<!DOCTYPE html>
<html lang="en">

 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}

 

td,
tfoot th,
thead {
border-bottom: 1px solid gray;
}
</style>
</head>

 

<body>
<h1>박스 오피스 검색</h1>
<p>20230329 형식으로 검색하세요.</p>
<form action="{{url_for('answer')}}">
<input type="text" name="query">
<button type="submit">검색</button>
</form>

 

<table style="width:100%">
<thead>
<tr>
<th>랭킹</th>
<th>영화명</th>
<th>영화개봉일</th>
<th>누적관객수</th>
</tr>
</thead>

 

<tbody>
{% for answer in data %}
<tr>
<td>{{answer.rank}}</td>
<td>{{answer.movieNm}}</td>
<td>{{answer.openDt}}</td>
<td>{{answer.audiAcc}}</td>
</tr>
</tbody>
{% endfor %}

 

</table>
</body>

 

</html>

 

[후기]

강의 수강과 HW 부분에서 시간을 많이 소요했던 주차였다.

새로운 부분을 많이 배운 것 같아 뿌듯하기도 하다.

더불어서 trouble shooting을 잘 해낸 것 같아 다행이다.

소듕..

728x90

'강의수강 > HW' 카테고리의 다른 글

[항해99 웹개발종합반] 5주차 HW  (0) 2024.01.12
[항해99 웹개발종합반] 4주차 HW  (1) 2024.01.11
[항해99 웹개발종합반] 2주차 HW  (0) 2024.01.09
[항해99 웹개발종합반] 1주차 HW  (2) 2024.01.09
'강의수강/HW' Related Articles more