커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
숙제 진행 후 python app.py 진행 오류
[왕초보] ChatGPT로 웹개발 완전정복 v0
4주차
북마크
이*민
댓글
10
・
추천
0
・
조회수
20
조회수
20
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


멜론 차트 스크래핑 하는데 결과창이 제대로 나타나지 않습니다.

직접 코드 작성해보고 진행되지 않아서 학습자료에 나와있는 코드 그대로 작성도 해봤는데 결과창이 제대로 나타나지 않습니다.

스파르타 즉문즉답스파르타 즉문즉답




#app.py

#멜론 스크래핑
from flask import Flask, render_template
from bs4 import BeautifulSoup
import requests


app = Flask(__name__)


@app.route('/')
def index():
    url = "https://www.melon.com/chart/"
    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, headers=headers)
    soup = BeautifulSoup(data.text, 'html.parser')


    melon_data = []
    trs = soup.select('table > tbody > tr')
    for tr in trs:
        rank = tr.select_one('.rank').text
        title = tr.select_one('.rank01 > span > a').text
        artist = tr.select_one('.rank02 > a').text
        image = tr.select_one('img')['scr']
        melon_data.append({'rank':rank,"artist":artist,"title":title,"image":image})


    return render_template('index.html',data = melon_data)


if __name__ == '__main__':



#index.html

<!Doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <style>
        @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");


        .background-banner {
            background-image: linear-gradient(45deg,
                    rgb(51 43 43 / 75%),
                    rgb(20 19 20 / 61%)), url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/music_festival.jpg");
            max-height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>


<body data-bs-theme="dark">
    <div class="background-banner">
        <nav class="navbar border-bottom border-bottom-dark d-flex justify-content-space-between" data-bs-theme="dark">
            <div class="ms-3">
                <img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
                    alt="">
            </div>
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-white" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" href="#">Music</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white" href="#">Album</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-white">Movie</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </nav>


        <div class="px-4 py-5 my-5 text-center">
            <h1 class="display-5 fw-bold text-body-emphasis">멜로디 쉐어</h1>
            <div class="col-lg-6 mx-auto">
                <p class="lead mb-4">
                    <br>
                    노래를 들으면 생각나는 누군가가 있으신가요?
                    <br><br>
                    당신의 감성이 담긴 인생곡 플레이리스트
                    <br>
                    멜로디쉐어에서 소중한 사람과 함께 공유하세요.
                </p>
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        음악 추가
                    </button>
                </div>
            </div>
        </div>



        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">최애 음악</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">유저</label>
                                <input type="text" class="form-control" id="exampleInputEmail1"
                                    aria-describedby="emailHelp">
                                <div id="emailHelp" class="form-text">사용자(추천인)의 이름을 넣어주세요.</div>
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">노래 제목</label>
                                <input type="text" class="form-control" id="exampleInputPassword1">
                                <div id="emailHelp" class="form-text">좋아하는 노래 제목을 넣어주세요.</div>
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">가수</label>
                                <input type="text" class="form-control" id="exampleInputPassword1">
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">앨범 커버URL</label>
                                <input type="text" class="form-control" id="exampleInputPassword1">
                            </div>
                            <button type="submit" class="btn btn-danger">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>



        <!-- Cards -->
        <div class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">
            {% for melon in data %}
            <div class="col">
                <div class="card h-100">
                    <img src="{{melon.image}}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{melon.title}}</h5>
                        <p class="card-text">{{melon.artist}}</p>
                        <p class="card-text">추천 by 최지웅</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>



        <div class="container">
            <footer>
                <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
                    <p>© 2023 Company, Inc. All rights reserved.</p>
                    <ul class="list-unstyled d-flex">
                        <li class="ms-3"><a class="link-body-emphasis"
                                href="https://www.youtube.com/@SpartaCodingClub"><i class="bi bi-youtube"></i></a></li>
                        <li class="ms-3"><a class="link-body-emphasis"
                                href="https://www.instagram.com/spartacodingclub/"><i class="bi bi-instagram"></i></a>
                        </li>
                        <li class="ms-3"><a class="link-body-emphasis" href="https://spartacodingclub.kr/blog"><i
                                    class="bi bi-postcard"></i></a></li>
                    </ul>
                </div>
            </footer>
        </div>


        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous"></script>
</body>


</html>



취소
 공유
취소
댓글 0
댓글 알림
나의얼굴