2/12 AI클럽 2기 파이썬 Flask 웹개발 조별 평일 5주차 모임후기

2020-02-122020-02-13 이경용

AI클럽(http://aiclub.kr) 5주차 보충 스터디를 2020년2월12일 수요일 저녁 7시부터 10시까지 3시간 모라에서 진행 하였습니다.
이번주는 먼저 가볍게 템플릿 개념을 다시한번 더 복습 하였습니다.

1. Flask에 Request 개념을 이해하기 위해 WordCloud와 Konlpy 자연어 처리를 이용해서 네이버의 뉴스 기사를 좀 더 정확하게 시각화 할 수 있도록 실습을 진행하였습니다.하지만, 이전에 잘 되었던 방식에 오류가 좀 생겨서 Konlpy는 포기를 했답니다. (시간 관계상 ㅜㅜ)뒤에 다시 도전 하기로…

테스트 : http://aiclub.pythonanywhere.com/wordcloud

/templates/base.html

<!DOCTYPE html>
<html>
    <head>
        <title>BootStrap</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- BootStrap CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        {% block header %}
        {% endblock %}
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>

2) /templates/wordcloud.html

{% extends "base.html" %}
{% block header %}
<style>
body { padding:50px; }
h1 { text-align:center; }
</style>
{% endblock %}
{% block content %}
<h1>Word Cloud</h1>
<form action="/wordcloud" method="post" name="frm">
<div class="form-group">
  <label for="comment">News Input :</label>
  <textarea class="form-control" rows="5" name="content">{{content}}</textarea>
</div>
<div class="form-group">
    <input type="submit" class="btn btn-primary btn-block btn-lg">
</div>
</form>
{% if content %}
<div>
    <img src="/static/wordcloud.png?v={{time}}">
</div>
{% endif %}
{% endblock %}

3) flask_app.py

from flask import Flask, render_template, request
import matplotlib.pyplot as plt
from wordcloud import WordCloud
import time
 
app = Flask(__name__)
 
@app.route('/wordcloud', methods=['GET','POST'])
def wordcloud():
    if request.method == 'GET':
        return render_template('wordcloud.html')
    elif request.method == 'POST':
        content = request.form['content']
        font_path = '/home/aiclub/mysite/static/NanumGothic.ttf'
        wordcloud = WordCloud(font_path=font_path, background_color="white", width=400, height=400)
        wordcloud = wordcloud.generate(content)
        fig = plt.figure(figsize=(6,6))
        plt.imshow(wordcloud)
        plt.axis('off')
        plt.show()
        fig.savefig('/home/aiclub/mysite/static/wordcloud.png')
        return render_template('wordcloud.html', content=content, time=time.time())

2. 게시판을 만들 때 파일 업로드 기능이 필요하기에 Flask의 File업로드 개념을 설명하고 직접 이미지 파일을 업로드하면 사진이 등록되도록 했습니다.

테스트 : http://aiclub.pythonanywhere.com/upload

1) /templates/upload.html

{% extends "base.html" %}
{% block header %}
<style>
body { padding:50px; }
h1 { text-align:center; }
</style>
{% endblock %}
{% block content %}
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="email">File :</label>
<input type="file" class="form-control" name="file">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block">
</div>
</form>
{% if file %}
<div class="form-group">
<img src="/static/upload/{{file}}" class="img-thumbnail" alt="Cinque Terre">
</div>
{% endif %}
{% endblock %}

2) flask_app.py

from flask import Flask, render_template, request
import matplotlib.pyplot as plt
from wordcloud import WordCloud
import time
from werkzeug import secure_filename
 
app = Flask(__name__)
 
@app.route('/upload', methods=['GET','POST'])
def upload():
    if request.method == 'GET':
        return render_template('upload.html')
    elif request.method == 'POST':
        f = request.files['file']
        f.save("/home/aiclub/mysite/static/upload/" + secure_filename(f.filename))
        return render_template('upload.html', file=secure_filename(f.filename), time=time.time())

3. 끝으로, 이번주에 진행할 관리페이지 로그인 기능을 구현하기 위해서 Session 이라는 개념을 스터디 했습니다.접속자의 아이디와 비번이 일치하면 특정 페이지를 열람할 수 있도록 로그인 정보를 유지 하도록 하였답니다.

테스트 : http://aiclub.pythonanywhere.com/login

1) /templates/login.html

{% extends "base.html" %}
{% block head %}
<style>
    body { padding:50px; }
</style>
{% endblock %}
{% block content %}
<p class="display-4 text-center">LOGIN</p>
<form action="/login" method="post">
    <div class="form-group">
        <label for="usr">ID :</label>
        <input type="text" class="form-control" name="userid">
    </div>
    <div class="form-group">
        <label for="usr">PW :</label>
        <input type="password" class="form-control" name="userpw">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">LOGIN</button>
    </div>
    {% if msg %}
    <div class="form-group">
        <div class="alert alert-danger">
            <strong>{{msg}}</strong>
        </div>
    </div>
    {% endif %}
</form>
{% endblock %}

2) /templates/main.html

{% extends "base.html" %}
{% block content %}
<h1 class="display-3 text-center">MAIN</h1>
<h3>로그인 성공</h3>
<a href="/logout" class="btn btn-primary btn-block">LGOOUT</a>
{% endblock %}

3) flask_app.py

from flask import Flask, render_template, request, redirect, session
import matplotlib.pyplot as plt
from wordcloud import WordCloud
import time
from werkzeug import secure_filename
 
app = Flask(__name__)
app.secret_key = "apptools"
session['ss_id'] = False
 
@app.route('/login', methods=['GET','POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    elif request.method == 'POST':
        userid = request.form['userid']
        userpw = request.form['userpw']
        if userid == "admin" and userpw == "1234":
            session['ss_id'] = userid
            return redirect('/main')
        else:
            return render_template('login.html', msg="login Fail")
 
@app.route('/main')
def main():
    if session['ss_id'] == False:
        return redirect('/logout')
    else:
        return render_template('main.html')
 
@app.route('/logout')
def logout():
    session['ss_id'] = False
    return redirect("/login")