이번에 할 내용은 만들어놨던 스파르타피디아 사이트에
별점
기능을 추가하는 것을 해 볼 예정
<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>
일단 위 코드를 body
태그 내에 영화URL과 comments 사이에 붙여넣어 준다. 이 상태로 저장하면
위 사진처럼 별점 기능이 추가된 것을 확인할 수 있다. 일단 백엔드 말고 프론트부터 수정해보자.
function listing() {
fetch("/movie")
.then((res) => res.json())
.then((data) => {
let rows = data["result"];
rows.forEach((film) => {
let comment = film["comment"];
let img = film["img"];
let desc = film["desc"];
let title = film["title"];
let star = film['star']; //추가
let star_repeat = "⭐".repeat(star)//추가
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${img}" class="card-img-top"/>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${desc}</p>
<p>${star_repeat}</p>
<p class="quote">${comment}</p>
</div>
</div>
</div>`;
$("#cards-box").append(temp_html);
});
});
}
listing 함수에서 star 변수를 생성해줬고, 이 별이 몇번 반복되어서 ⭐을 찍을건지를 결정해줄 star_repeat 변수도 만들어줬다. 아래 temp_html
에 ${star_repeat}
로 코드 체인지.
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
star_receive = request.form['star_give']
일단 star 값도 받아와야 하기 때문에 comment_receive
아래에 star_give
를 request해서 값을 받아올 star_receive
변수 만들어 주기.
doc = {
'title' : og_title,
'desc' : og_description,
'img' : og_image,
'comment' : comment_receive,
'star' : star_receive
}
디비에 값을 보내줄 doc
안에도 'star' : star_receive
코드 작성. 아까 html
파일에 붙여넣었던 div
태그를 보면 id="star"
, id 를 star 로 지정한 부분에서 사용자가 준 별점을 받아오면 되기 때문에
function posting() {
let url = $("#url").val();
let comment = $("#comment").val();
let star = $('#star').val();
let formData = new FormData();
formData.append("url_give", url);
formData.append("comment_give", comment);
formData.append("star_give", star);
fetch("/movie", { method: "POST", body: formData })
.then((res) => res.json())
.then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
posting() 함수에 star #star
id가 star인 곳의 val() 값을 가져와서 star에 넣어주는 변수를 만들고, 이걸 아래 formData에서 append 한다는 코드를 작성하면 완료 !
보면 저번에 저장했던 영화 data에는 별점이 없지만 별점 코드를 추가하고 작성한 data에는 별점이 추가된 것을 볼 수 있다.