[스파르타] ChatGPT로 웹개발 완전정복 5주차 - Flask & DB

스파르타코딩클럽
[GPT] 웹개발 종합반 : 최지웅
https://spartacodingclub.kr/online/web_chatgpt

스파르타코딩클럽 | [GPT] 웹개발 종합반

 

빼꼼

 

Flask 프로젝트에 DB 연결하기

앞서 만들던 멜로디쉐어 프로젝트에 SQLite를 연결해 사용해본다.

만들고 싶은 기능은 form으로 부터 받은 데이터(최애 음악)를 DB에 저장하는 것이다.

최애 음악 fom

# app.py 상단

from flask import Flask, render_template, request
app = Flask(__name__)

# DB 기본 코드
import os
from flask_sqlalchemy import SQLAlchemy

basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] =\
        'sqlite:///' + os.path.join(basedir, 'database.db')

db = SQLAlchemy(app)

class Song(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(100), nullable=False)
    artist = db.Column(db.String(100), nullable=False)
    title = db.Column(db.String(100), nullable=False)
    image_url = db.Column(db.String(10000), nullable=False)

    def __repr__(self):
        return f'{self.username} {self.title} 추천 by {self.username}'

with app.app_context():
    db.create_all()

> SQLAlchemy를 이용해  Song 이라는 DB를 사용할 준비 완료

> Song은 id, username, artist, title, image_url 이라는 다섯가지 컬럼을 가진다.

<!-- music.html 일부 -->

<form action="{{ url_for('music_create') }}" method="GET">
  <div>
    <label for="111">유저</label>
    <input name="username" type="text" id="111" />
  </div>
  <div>
    <label for="222">노래 제목</label>
    <input name="title" type="text" id="222" />
  </div>
  <div>
    <label for="333">가수</label>
    <input name="artist" type="text" id="333"/>
  </div>
  <div>
    <label for="444">앨범 커버URL</label>
    <input name="image_url" type="text" id="444"/>
  </div>
  <button type="submit">Submit</button>
</form>

> form 에는 method="GET" 을 붙여 button 클릭 시 action으로 데이터를 제출하도록 한다.
> 즉, 데이터는 app.py의 music_create() 로 전달된다.

> form 의 각 input은 고유한 name을 가진다. 이 name은 music_create()에 보내지는 데이터에도 전달된다.

# app.py 하단

@app.route("/music/create/")
def music_create():
    # form에서 보낸 데이터 받아오기
    username_receive = request.args.get("username")
    title_receive = request.args.get("title")
    artist_receive = request.args.get("artist")
    image_receive = request.args.get("image_url")

    # 데이터를 DB에 저장하기
    song = Song(username=username_receive, title=title_receive, artist=artist_receive, image_url=image_receive)
    db.session.add(song)
    db.session.commit()
    return render_template('music.html')

> music_create() 에서 form에서 보낸 데이터를 받아 변수로 저장한다.

> DB Song의 각 컬럼에 맞게 데이터를 전달해준다.

 

이렇게 작업 해준 후 form에 데이터를 입력한 뒤 전송하면

해당 데이터를 갖고 있는 database.db 를 새롭게 확인할 수 있다.

database.db

 

이제 이 DB를 화면에 렌더링해주자

# app.py

@app.route("/music/")
def music():
    song_list = Song.query.all()
    return render_template('music.html', data=song_list)

> music() 에서는 Song DB의 내용을 song_list 라는 변수로 받아온 뒤 data로 music.html 에 넘겨준다.

<!-- music.html -->

{% for song in data %}
<div class="col">
  <div>
    <img src="{{ song.image_url }}" alt="{{ song.title }} 앨범커버"/>
    <div>
      <h5>{{ song.title }}</h5>
      <p>{{ song.artist }}</p>
      <p>추천 by {{ song.username }}</p>
    </div>
  </div>
</div>
{% endfor %}

> for문을 활용해 넘겨진 data의 길이만큼 반복해서 정보를 렌더링해준다.

form에서 입력했던 내용이 화면에 렌더링된다.

 

여기에서 추천인 기준으로 페이지를 보여주는 기능을 추가해보자.

아래와 같이 여섯곡이 등록되어 있는 상태에서 추천인이 "이령" 인 노래들만 골라내보자.

전체 추천 음악

# app.py

@app.route("/music/<username>")
def render_music_filter(username):
    filter_list = Song.query.filter_by(username=username).all()
    return render_template('music.html', data=filter_list)

> url에 적힌 username을 인식

> Song DB 내에서 username 컬럼의 값이 url에 적힌 값과 동일한 노래들만 렌더링하도록 한다.

# app.py

from flask import Flask, render_template, request, redirect, url_for # redirect, url_for 추가
# ...
def music_create():
    # ....
    # 추천인 기준의 추천 페이지로 이동
    return redirect(url_for("render_music_filter", username=username_receive))

> 덧붙여 form 입력하고나서 해당 추천인의 추천 노래만 보여주는 페이지로 이동하도록 수정해준다.

이제 /music/이령 으로 페이지를 접속하면 아래와 같이 이령이 추천한 노래들만이 보여진다.

 

 

---

GitHub - sryung1225/hh_s