2024-01-31 AI 코딩 TIL

오늘은 영화 검색 사이트를 만들어 볼 것이다.

​

먼저 페이지를 하나 더 만들어 주어야 하기 때문에 app.py 에서 페이지를 생성

​

그다음 moive.html 을 만들어주어서 페이지 안에 들어갈 내용을 만들어 준다.

​

일단 화면이 잘 작동하는지 확인하기 위해서 기본적인 내용을 입력

터미널 창에 python app.py 입력을 해주면

​

기본 창이 뜨고 주소창에 추가로 /movie를 입력하면 내가 만들어준 html이 잘 나오고 있는 것을 확인할 수 있다.

​

​

이제 안에 내용을 꾸며 주어야하는데 내가 검색창에 내용을 입력하면 가져올 수 있도록

​

app.py 맨위에 줄에 request를 입력해주어야 한다.

​

그리고 코딩 moive 함수 안에 print(request.args.get('query')) 라고 입력을 해주면 html안에 적은 글자가 터미널 안에 입력이 됩니다.

html 코딩

app.py

검색창에 원하는 날짜를 검색 하면 내가 원하는 날짜의 영화를 볼 수 있다.

​

사이트내에서 페이지를 이동할 수 있는 버튼 만들기

​

# motto.html
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ url_for('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ url_for('music') }}">Music</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Album</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Movie</a>
</li>
</ul>
</div>

빨간색으로 색칠되어 있는 부분에 해당 주소로 이동하는 내용을 적어주면 된다.

​

​

VSCode 안에서 SQL 데이터 베이스를 만들 수 있는 방법으로

SQL Lite를 추가로 설치하여 만들어 줄 수 있다.

​

database.db 파일을 만들고 아래의 터미널에 명령어를 입력하면 database에 값이 입력 및 저장이 된다.

​

데이터를 꺼내는 방법도 있다.

​

필터링도 가능하다 (유저 네임이 '추천자'인 사람의 내용을 모두 가져와라)

​

 

<!-- 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 %} <!-- data 값을 melon 변수에 넣어준다. -->
<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">{{melon.rank}}위</p> <!-- 순위 -->
<p class="card-text">추천 by 박현준</p> <!-- 추천인 -->
</div>
</div>
</div>
{% endfor %}
</div>

​

from flask import Flask, render_template # 플라스크 사용을 위해 넣어주는것
from bs4 import BeautifulSoup # 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에 넣어준다.
data = requests.get(url, headers=headers)
# 데이터를 텍스트로 변환하고 넣어준다.
soup = BeautifulSoup(data.text, 'html.parser')

melon_data = [] # 멜론 딕셔너리에 넣기전에 빈칸으로 만들어준다.
trs = soup.select('table > tbody > tr') # 멜론 순위에 있는 부분에 table > tbody > tr의 리스트를 선택하여 준다.
for tr in trs: # 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')['src'] # 이미지 주소 꺼내기
melon_data.append({'rank': rank, 'artist': artist, 'title': title, 'image': image}) # 꺼낸것들 전부 멜론 딕셔너리에 (append)넣어준다.

return render_template('index.html', data=melon_data) # melon_data의 값을 data에 넣어서 리턴

if __name__ == '__main__':
app.run()

멜론 차트 가져오기