2023.01.26 개발일지 - 스파르타피디아 proj (별점추가)

스파르타피디아에 별점 추가하기

이번에 할 내용은 만들어놨던 스파르타피디아 사이트에 별점 기능을 추가하는 것을 해 볼 예정

<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에는 별점이 추가된 것을 볼 수 있다.