[Web] 숙제 별점 반영하기 - ( week 4 )

만들어둔 스파르타 피디아 페이지에서 빠진 부분을 구현한다.

별점을 넣어주기 위해서 우선 클라이언트에서 값을 입력할 수 있는 부분을 만들어준다.

 

        <div class="form-floating mb-3">

            <input id="url" type="email" class="form-control" placeholder="name@example.com">

            <label>영화URL</label>

        </div>

        <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>

        <div class="form-floating">

            <textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>

            <label for="floatingTextarea2">코멘트</label>

        </div>

 

서버

일단 서버에서 저장할 값을 추가해 준다.

@app.route("/movie", methods=["POST"])

def movie_post():

    url_receive = request.form['url_give']

    comment_receive = request.form['comment_give']

    star_receive = request.form['star_give']

   

    headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}

    data = requests.get(url_receive,headers=headers)

   

    soup = BeautifulSoup(data.text, 'html.parser')

    ogtitle = soup.select_one('meta[property="og:title"]')['content']

    ogdesc = soup.select_one('meta[property="og:description"]')['content']

    ogimage = soup.select_one('meta[property="og:image"]')['content']

    doc = {

        'title':ogtitle,

        'desc':ogdesc,

        'image':ogimage,

        #'url':url_receive,

        'comment':comment_receive,

        'star': star_receive,

    }

    db.movies.insert_one(doc)

star 값을 가져와서 db에 저장할 값의 추가로 해준다.

 

클라이언트

별점을 저장하는 것부터 구현한다.

해당 별점을 value로 가지고 있는 요소의 id를 가지고 온다.

그리고 그 값을 api에 같이 실어서 보내면 서버는 받은 정보를 DB에 저장하게 된다.

        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()

            })

        }

 

이제 페이지가 만들어질 때 별점도 추가해 주도록 한다.

 

        function listing() {

            fetch('/movie').then((res) => res.json()).then((data) => {

                let rows = data['result']

                $('#cards-box').empty()

                rows.forEach((a)=>{

                    let comment = a['comment']

                    let title = a['title']

                    let desc = a['desc']

                    let image = a['image']

                    let star= a['star']

                    let star_repeat = '⭐'.repeat(star)

                    let temp_html = `<div class="col">

                                        <div class="card h-100">

                                            <img src="${image}"

                                                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="mycomment">${comment}</p>

                                            </div>

                                        </div>

                                    </div>`

                    $('#cards-box').append(temp_html)

                })

            })

        }

 

서버로부터 받은 값 중에서 star의 값만큼 별을 그려주고 해당 태그에 값으로 넣어주면 된다.

 

결과를 확인해 본다.

 

앞서 입력한 값들은 별점에 대한 정보를 추가하기 전이기 때문에 보이지 않지만 이후에 기록된 영화들은 별점이 입력한 대로 잘 반영되는 것을 확인할 수 있다.