최종적으로 위처럼 작동하는 웹페이지를 만들 것이다.
사용할 라이브러리
- 서버 Flask / / Flask_WTForms / request
- 웹 Bootstrap
- 데이터베이스 SQLAlchemy
사용한 API
https://api.artic.edu/docs/#quick-start
Documentation | Art Institute of Chicago API
Introduction The Art Institute of Chicago 's API provides JSON-formatted data as a REST-style service that allows developers to explore and integrate the museum’s public data into their projects. This API is the same tool that powers our website , our mo
api.artic.edu
1 단계 메인 홈페이지와 서버를 만든다.
main.py
from flask import Flask, render_template, redirect, url_for, request
from flask_bootstrap import Bootstrap
from flask_sqlalchemy import SQLAlchemy
from flask_wtf import FlaskForm
from sqlalchemy import all_
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired
import requests
app = Flask(__name__)
app.config['SECRET_KEY'] = "it'sasecret"
Bootstrap(app)
@app.route("/")
def home():
return render_template("index.html")
if __name__ == '__main__' :
app.runt(debut=True)
index.html
이때 진자를 이용하여 template을 불러와 아래코드를 보다 간편하게 사용할 수 있다.
<!DOCTYPE html>
<head></head>
<style></style>
<body></body>을 간단하게
{% extends "bootstrap/base.html" %}
{% block title %}타이틀{% endblock %}
{% block style%}
<link href='' rel=''>
{% endblock %}
{% block content %}
<h1>내용</h1>
{% endblock %}{% block content %}
{% endblock %}
2. DB 만들기
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///Arts4.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Arts(db.Model) :
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(250), unique=True, nullable=False)
year = db.Column(db.String, nullable=False)
creat = db.Column(db.String(250), nullable=False)
description = db.Column(db.String(500), nullable=False)
rating = db.Column(db.Float, nullable=True)
ranking = db.Column(db.Integer, nullable=True)
img_url = db.Column(db.String(250), nullable=False)
review = db.Column(db.String(300), unique=True)
db.create_all()title , ranking , img_url 같은 항목들을 테이블의 열로 만들어 두었다.
3. 데이터 추가하기
index.html 안에 있는 "add" button을 누르고 자료를 검색할 키워드를 form 양식으로 받아서 api에서 나의 DB에 있는 Arts4.db에 있는 '열' 항목들의 값을 찾아서 저장하고 다시 그 데이터를 메인페이지에 나타낸다.
- FlaskForm 을 이용해서 문자로 입력받을 'title'과 제출버튼으로 입력받을 'submit'을 만드는 함수 FindArtsForm(FlaskForm)을 만들고 그걸 'form' 객체에 할당했다.
- wtf을 이용해서 내용이 아래 함수에 있는 객체'form'으로 사용할 폼을 불러와서 페이지에 나타낸다.
add.html
{% block content %}
<div class="content">
<h1 class="heading">Add Art More </h1>
{{ wtf.quick_form(form, novalidate=True) }}
</div>
{% endblock %}
add 함수
class FindArtsForm(FlaskForm):
title = StringField("Arts Title", validators=[DataRequired()])
submit = SubmitField("Add Arts")
@app.route("/add", methods=["GET", "POST"])
def add_arts():
form = FindArtsForm()
if form.validate_on_submit():
arts_title = form.title.data
response = requests.get(ARTS_DB_SHEARCH_URL,params={"q": arts_title,"query[term][is_public_domain] ": "true"})
data = response.json()["data"]
return render_template("select.html",options=data)
return render_template("add.html", form =form)
- 3)사용자에게 폼을 통해 입력 받은 데이터 값을 API를 이용해서 자료를 찾는다.
- 4)찾은 다양한 자료중에 원하는 자료를 고를 다른 서버함수와 페이지(select.html)를 만든다.
- 5)json형식의 자료를 select.html에 쓸 변수 options에 할당한다.
select.html
{% block content %}
<div class="container">
<h1 class="heading">Select Arts</h1>
{% for arts in options %}
<p>
<a href="{{ url_for('find_arts', id=arts.id) }} ">{{ arts.title }} - {{arts.timestamp}}</a>
</p>
{% endfor %}
</div>
{% endblock %}사용한 API
https://api.artic.edu/docs/#quick-start
Documentation | Art Institute of Chicago API
Introduction The Art Institute of Chicago 's API provides JSON-formatted data as a REST-style service that allows developers to explore and integrate the museum’s public data into their projects. This API is the same tool that powers our website , our mo
api.artic.edu
저 리스트에서 원하는 항목의 링크에 사용할 변수 id는 위의 json()파일에서 지정된 아트id 번호인 "id"의 값을 갖는다.
- 이 변수 id을 이용해서 이미지 주소까지 얻을 수 있는 주소가 다른 api를 사용한다.
선택한 자료 검색 find 함수
@app.route("/find")
def find_arts():
arts_api_id = request.args.get("id")
if arts_api_id:
arts_api_url = f"{ARTS_DB_INFO_URL}/{arts_api_id}"
response2 = requests.get(arts_api_url)
data2= response2.json()["data"]
data_image=data2["image_id"]
## -- 데이터베이스에 저장하기 -- ##
new_arts = Arts(
title=data2["title"],
year=data2["date_display"],
img_url=f"{ARTS_DB_IMAGE_URL}/{data_image}/full/843,/0/default.jpg",
description=data2["thumbnail"]["alt_text"],
creat = data2["artist_display"]
)
db.session.add(new_arts)
db.session.commit()
##-----------##
return redirect(url_for("home"))
검색된 자료의 값은 DB에 저장되었다.
이제 뒷면에 저장된 rating 값과 review값을 수정해보자
- Update 버튼을 누르면 수정할 페이지로 넘어가는 edit.html과 함수 edit와
- Delete 버튼을 누르면 데이터베이스에서 삭제하는 함수 delete을 만들자
index.html 안에서
<a href="{{ url_for('rate_arts', id=Art.id) }}" class="button">Update</a>
<a href="{{ url_for('delete_arts', id=Art.id) }}" class="button delete-button">Delete</a>
add함수 와 마찬가지로 FlaskForm을 이용한다.
class RateArtsForm(FlaskForm):
rating = StringField("10점 만점 중 몇 점?")
review = StringField("당신의 소감은?")
submit = SubmitField("Done")
@app.route("/edit", methods=["GET", "POST"])
def rate_arts():
form = RateArtsForm()
arts_id = request.args.get("id")
arts = Arts.query.get(arts_id)
if form.validate_on_submit():
arts.rating = float(form.rating.data)
arts.review= form.review.data
db.session.commit()
return redirect(url_for('home'))
return render_template("edit.html", arts=arts, form=form)edit.html
{% block content %}
<div class="content">
<h1 class="heading">Add Art More </h1>
{{ wtf.quick_form(form, novalidate=True) }}
</div>
{% endblock %}
삭제할 함수는 데이터베이스에서 삭제하고 다시 메인페이지로 돌아가면 삭제된 항목을 제외한 나머지들이 나타난다.
@app.route("/delete")
def delete_arts():
arts_id = request.args.get("id") # "id"의 값은 index.html에서 할당된 값이다.
arts = Arts.query.get(arts_id)
db.session.delete(arts)
db.session.commit()
return redirect(url_for("home"))
이렇게해서 데이터베이스를 활용해서 상호작용하는 웹페이지를 만들었다.
'TIL > Python' 카테고리의 다른 글
| [Python][Flask]form안에 에디터 CKEditor (0) | 2022.06.20 |
|---|---|
| [Python]Decorator @을 이용한 함수내 함수 (0) | 2022.06.20 |
| [Flask][Flask-WTF]간단한 사용 - 로그인 양식 (0) | 2022.05.31 |
| [Python][Flask] 플라스크 이용하기 - 4.Jinja 이용하기 (0) | 2022.05.18 |
| [Python][Flask] 플라스크 이용하기 - 3.렌더링 & 꾸미기 (0) | 2022.05.18 |
