4주차 끝 숙제
별점을 추가하기.
프론트엔드는 같이 하고 백엔드를 숙제로 한다.
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
위 코드를 영화url과 코멘트 사이에 넣어준다.
그리고 브라우저에 가서 새로고침후 확인해보면 아래 사진과 같이 별점란이 나온다.
그리고 app.py에 가서 우린 일단 무조건 별이 5개 나오게 해서 확인해보겠다.
그리고 다시 index.html로 돌아와서 star 변수를 만들어주는데, 우리가 받아오는것은 숫자이기 때문에 이미지로 변경해주기 위해 아래 사진처럼 작성해준다.
그리고 별이 있던 자리에 아래 사진처럼 변경해주고 저장한다.
저장후 브라우저에서 새로운 영화를 기록하고 보면
아래 사진과 같이 나온다.
아까넣었던 다른 영화들의 별점들은 사라졌다. 그이유는 그전엔 star값을 넣지 않았기 때문에 없어서 사라진거다.
이제 숙제는 이 별점을 읽어들이는 거다.
먼저 app.py는 아래 사진처럼 추가해주고.
그리고 index.html로 가서 posting 부분에 아래 사진처럼 작성해준다.
저장후 브라우저에 가서 새로고침 후 새로운 영화에 대해 작성 후 확인해보면 아래와 같이 잘 나온것을 확인할수있다.
