Python Code
Flash is a Flask function. It uses the user’s session to display messages.
Sessions in Flask are cryptographically signed, so we must provide a secret key for Flask to sign our messages with.
[app.py]:
from flask import flash
...
app.secret_key = 'esau8a!isjaCmapM0fja635a#skgOaqp'
...
@app.route('/save', )
def save():
flash("Your data has been saved succesfully!")
...
HTML Code
{% with messages = get_flashed_messages() %}
The with block is used to write python code where you can create a variable and assign a value to it .
[layout.html]:
<div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flashes">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
[app.py]:
import json
from flask import (Flask, render_template, redirect,
url_for, request, make_response,
flash)
from options import DEFAULTS
app = Flask(__name__)
app.secret_key = 'esauhouUOaush35Uouo52ouo4242'
def get_saved_data():
try:
data = json.loads(request.cookies.get('character'))
except TypeError:
data = {}
return data
@app.route('/')
def index():
return render_template('index.html', saves=get_saved_data())
@app.route('/builder')
def builder():
return render_template(
'builder.html',
saves=get_saved_data(),
options=DEFAULTS
)
@app.route('/save', methods=['POST'])
def save():
flash("Alright! That looks awesome!")
response = make_response(redirect(url_for('builder')))
data = get_saved_data()
data.update(dict(request.form.items()))
response.set_cookie('character', data)
return response
app.run(debug=True, host='0.0.0.0', port=8000)
[layout.html]:
<!DOCTYPE html>
<html>
<head>
<title>Character Generator</title>
<link rel="stylesheet" href="/static/css/normalize.min.css">
<link rel="stylesheet" href="/static/css/main.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap no-bottom messages bg-{{ saves.get('colors', 'yellow') }}">
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flashes">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
{% block content %}{% endblock %}
</body>
</html>
[builder.html]:
{% extends "layout.html" %}
{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
<div class="grid-100 row">
<div class="grid-30">
<div class="title">
<input type="text" name="name" value="{{ saves.get('name', '') }}">
</div>
</div>
<div class="grid-70">
<div class="colors">
{% for color in options['colors'] %}
<input type="radio" id="{{ color }}" name="colors" value="{{ color }}"
{% if saves.get('colors') == color %}checked{% endif %}>
<label for="{{ color }}"></label>
{% endfor %}
<button class="btn">Update</button>
</div>
</div>
<div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">
<div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
{% if saves.get('footwear') %}
<div class="footwear"><img src="/static/img/bear_items_footwear-{{saves['footwear']}}.svg"></div>
{% endif %}
{% if saves.get('pants') %}
<div class="pants"><img src="/static/img/bear_items_pants-{{ saves['pants'] }}.svg"></div>
{% endif %}
{% if saves.get('shirts') %}
<div class="shirt"><img src="/static/img/bear_items_shirts-{{ saves['shirts'] }}.svg"></div>
{% endif %}
<div class="head"><img src="/static/img/bear_face.svg" /></div>
{% if saves.get('glasses') %}
<div class="glasses"><img src="/static/img/bear_items_glasses-{{ saves['glasses'] }}.svg"></div>
{% endif %}
<div class="nose"><img src="/static/img/bear_nose.svg" /></div>
{% if saves.get('hat') %}
<div class="hat"><img src="/static/img/bear_items_hat-{{ saves['hat'] }}.svg"></div>
{% endif %}
</div>
<div class="items">
{% for category, choices in options.items() %}
{% if category != 'colors' %}
<div class="grid-100 row">
<div class="grid-20">
<p class="category-title">{{ category.title() }}</p>
</div>
<div class="grid-80">
<input type="radio" id="no_{{ category }}_icon" name="{{ category }}" value=''
{% if not saves.get(category) %}checked{% endif %}>
<label for="no_{{ category }}_icon"><img src="/static/img/no-selection.svg"></label>
{% for choice in choices %}
<input type="radio" id="{{ category }}-{{ choice }}_icon" name="{{ category }}"
value="{{ choice }}" {% if saves.get(category) == choice %}checked{% endif %}>
<label for="{{ category }}-{{ choice }}_icon">
<img src="/static/img/{{ category }}-{{ choice }}.svg"></label>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</form>
{% endblock %}