[Python3][Flask1.1] Flask로 blog 웹개발 실습 - 9 : 하위 템플릿 사용, 프로필 추가 정보, 프로필 편집 기능 추가

 

 

1. 프로필 편집기 양식 - forms.py

# vim app/forms.py

# ...
from wtforms import StringField, TextAreaField
from wtforms.validators import Length

# ...

# 프로필 편집기 양식
class EditProfileForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    about_me = TextAreaField('About me', validators=[Length(min=0, max=140)])
    submit = SubmitField('Submit')

 

 

 

2. 프로필 편집기 양식 - edit_profile.html

<!-- vim app/templates/edit_profile.html >>

<!-- 프로필 편집기 양식 >>

{% extends "base.html" %}

{% block content %}
    <h1>Edit Profile</h1>
    <form action="" method="post">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.about_me.label }}<br>
            {{ form.about_me(cols=50, rows=4) }}<br>
            {% for error in form.about_me.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

 

 

 

3. 프로필 뷰 편집 기능

# vim app/routes.py

# ...
from app.forms import EditProfileForm

# ...

# 프로필 뷰 편집 기능
@app.route('/edit_profile', methods=['GET', 'POST'])
@login_required
def edit_profile():
    form = EditProfileForm()
    # submit으로 post 요청했을 경우
    if form.validate_on_submit():
        current_user.username = form.username.data
        current_user.about_me = form.about_me.data
        db.session.commit()
        flash('Your changes have been saved.')
        return redirect(url_for('edit_profile'))
    # 웹에 접속하여 GET 요청했을 경우
    elif request.method == 'GET':
        form.username.data = current_user.username
        form.about_me.data = current_user.about_me
    return render_template('edit_profile.html', title='Edit Profile',
                           form=form)

 

 

 

4. 프로필 링크 수정

현재 유저와 같을 경우 프로필 편집 버튼 활성화

# vim app/templates/edit_profile.html            
            
        <!-- ... -->
            
            <!-- 유저명에 + 유저 정보와 마지막 접속 시간 정보 출력 -->
            <td>
                <h1>User: {{ user.username }}</h1></td>
                {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}
                {% if user.last_seen %}<p>Last seen on : {{ user.last_seen }}</p>{% endif %}
                {% if user == current_user %}
                <p><a href="{{ url_for('edit_profile') }}">Edit your profile</a></p>
                {% endif %}
            </td>

        <!-- ... -->
            
            

 

 

 

5. 테스트

$ flask run --host 0.0.0.0 --port 5001

일부러 140자 이상 입력도 해봅니다.