SW사관학교 정글7기 개발일지 (08/08)

c4fiber·2023년 8월 9일
0

SW사관학교 정글7기

목록 보기
1/49

Jinja2 block 활용

base.html

{% block title %}
<h1> base </h1>
{% endblock %}

child.html

{% extends "base.html" %}
{% block title %}
<h1> child <h1>
{% endblock %}

해당 페이지를 렌더링 하면

<h1> child </h1>

block의 이름은 script, style, header 등 여러가지 이름을 사용할 수 있다.

Jinja2 템플릿 변수 사용

app.py

@app.route('/')
def home():
    # arg로 전달된 페이징을 확인, 없으면 1
    page = int(request.args.get('page', "1"))
    all_events = get_all_events()
    return render_template('index.html', template_events= all_events, pageNo=page)

index.html

<!-- Page Event List -->
  {% for event in template_events[pageNo-1] %}
    <div class="rounded-md border p-3 relative">
      <h5 class="card-title">{{ event['title']}}</h5>
      <small class="block text-gray-500"
        >{{ event['beginDt'] }}~{{event['endDt']}}</small
      >
      <small class="block text-gray-500">{{event['placeName']}}</small>
      <div
        class="absolute bottom-2 right-2 flex justify-center items-center gap-2"
      >
        <a data-id="{{event["_id"]}}" data-stat="0" class="like cursor-pointer">
          <span class="material-icons text-md text-rose-500">favorite</span>
        </a>
        <small>{{event['fav_count']}}</small>
      </div>
    </div>
  {% endfor %}

app.py: render_template( <렌더링할 페이지>, key=value, key=value, ...)

~.html: {{ key }}

{{ key }}

Jinja2 template filter

{{ key | filter }} 형태로 사용한다

  • safe: 이스케이프를 무시하고 렌더링
  • capitalize: 첫번째 문자를 대문자로 변경, 나머지는 소문자로 변경
  • lower, upper: 모두 소문자로, 모두 대문자로
  • title: 각 단어의 첫글자를 대문자로 변경
  • trim: 앞, 뒤의 공백 제거
  • striptags: 렌더링 전에 html태그 제거

HTML5 Form validation

  • required: 값이 반드시 입력되어야 함
  • pattern: 정규표현식을 입력함. 해당조건이 만족해야함
  • min, max: 최소값, 최대값
  • minLength, maxLength: 최소 길이, 최대 길이

주의할 점은 minLength, maxLength를 지원하지 않는 브라우저가 꽤 많다.

따라서 pattern을 활용해 정규표현식으로 사용하거나, js를 활용해야 한다.

Flask, flash

app.secret_key = os.urandom(4) # 특정 값을 입력해도 상관없다 ex) 'jungle7'

flash 함수를 사용하기 위해서는 secret_key를 반드시 설정해야 한다.

간단한 예제

app.py

from flask import Flask, flash, redirect, render_template, \
     request, url_for

app = Flask(__name__)
app.secret_key = 'some_secret'

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or \
                request.form['password'] != 'secret':
            error = 'Invalid credentials'
        else:
            flash('You were successfully logged in')
            return redirect(url_for('index'))
    return render_template('login.html', error=error)

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

layout.html

<!doctype html>
<title>My Application</title>
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}
{% block body %}{% endblock %}

index.html

{% extends "layout.html" %}
{% block body %}
  <h1>Overview</h1>
  <p>Do you want to <a href="{{ url_for('login') }}">log in?</a>
{% endblock %}

login.html

{% extends "layout.html" %}
{% block body %}
  <h1>Login</h1>
  {% if error %}
    <p class=error><strong>Error:</strong> {{ error }}
  {% endif %}
  <form action="" method=post>
    <dl>
      <dt>Username:
      <dd><input type=text name=username value="{{
          request.form.username }}">
      <dt>Password:
      <dd><input type=password name=password>
    </dl>
    <p><input type=submit value=Login>
  </form>
{% endblock %}

참고 [https://flask-docs-kr.readthedocs.io/ko/latest/patterns/flashing.html#message-flashing-pattern]

카테고리 변경

flash(u’Invalid password provided’, ‘error’)

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <ul class=flashes>
    {% for category, message in messages %}
      <li class="{{ category }}">{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

flask-bcrypt

# hash 생성
pwd_hash = bcrypt.generate_password_hash(pwd).decode('utf-8')

# hash 대조
if not bcrypt.check_password_hash(result['password'], pwd_hash):

url encoding 대표적인 몇가지

hexcharacter
%26&
%2F/
%3A:
%3F?
profile
amazing idiot

2개의 댓글

comment-user-thumbnail
2023년 8월 9일

좋은 글 감사합니다.

1개의 답글