Render Web Template (Python Flask)

Montagem do Modelo Preparação Interpretação Arquivos Estáticos Favicon Execução

Entregar páginas Web intepretando como se fossem estáticas, reduz a carga de processamento pelo cliente, executando pelo servidor onde pode estar a base de dados e outros recursos, podendo ser disponiveis somente neste ambiente

Montagem do Modelo

Fazendo uso do Jinja, um modelo de sintaxe e semantica, montamos um documento HTML, fazendo uso de delimitadores para expressões {{ e }} e controles de fluxo {% e %}
Inserir um valor direto no corpo do arquivo

<!doctype html>
	<h1>Hello {{ nome }}</h1>

Com o uso de if mudamos o fluxo de treços de código

<!doctype html>
	{% if nome %}
	  <h1>Hello {{ nome }}!</h1>
	{% else %}
	  <h1>Hello, World!</h1>
	{% endif %}

ou por uso de if ternário, seguindo o padrão do Python

<!doctype html>
	<h1>Hello, {{ nome if nome else 'World'}}!</h1>

Através da iteração de uma lista de objetos, salvando na pasta de template com o nome de lista.html

<!doctype html>
  <ul id="navigation">
  {% for item in navigation %}
      <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
  {% endfor %}
  </ul>

Com o uso um modelo padrão, salvando na pasta de template com o nome de base.html

<!doctype html>
  <h1>{% block titulo %}{% endblock %}</h1>

  <div class="wrapper">
    {% block corpo %}{% endblock %}
  </div>

As definições de bloco {% block titulo %} e {% block corpo %} podem ser preenchidas por qualquer página ao estender o documento de base, vamos fazer isso no lista.html

{% extends 'base.html' %}

{% block titulo %}
Página Teste 
{% endblock %}

{% block corpo %}
  <ul id="navigation">
  {% for item in navigation %}
      <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
  {% endfor %}
  </ul>	
{% endblock %}

A estrutura de arquivos deve ficar assim:

/app.py
/templates
	/hello.html
	/lista.html
	/base.html

Preparação

Instalar o pelo gerenciador de pacotes, recomendo o uso de Ambiente Virtual

pip install flask

Iniciando o arquivo app.py com a declaração do flask

from flask import Flask
app = Flask(__name__)

Interpretação

Adicionando no arquivo app.py a opção de rotas para ouvir o caminho /hello/ com e sem parametros

from flask import render_template

@app.route('/hello/')
@app.route('/hello/<param>')
def hello(param=None):
    return render_template('hello.html', nome=param)

Também adicionando no arquivo app.py a /lista/ passando a listagem em navigation como fixa para ilustração

from flask import render_template

@app.route('/lista/')
def lista():
    list = [
        {"href":"#1", "caption":"primeiro"},
        {"href":"#2", "caption":"segundo"}
    ]
    return render_template('lista.html', navigation=list)

Arquivos Estáticos

Folhas de estilo não costumam sofre variação na execução do sistema, não sendo necessária a intepreção da mesma Para entregar devemos adicionar na pasta static na raiz do projeto

/app.py
/templates
/static
    /style.css

E adiciona o trecho na página HTML

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

ou direto no intepretador, e informando o caminho /static/style.css, mas desta maneira é necessário definir um contexto como no exemplo abaixo

from flask import url_for
app.config['SERVER_NAME'] = "127.0.0.1:5000"

with app.app_context():
	url_for('static', filename='style.css')

Favicon

Para adicionar o favicon.ico na página basta colocar o arquivo na pasta static e adicionar o trecho no texto do HTML

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

Execução

Se o pacote do flask estiver instalado e arquivo nomeado como app.py, basta executar o comando abaixo ou rodar python <nome do arquivo> para outro nome de arquivo

flask run

Uma mensagem no shell apresenta que o site está disponível no localhost:5000, acesse os endereços para visualizar os resultados

Referências

Flask - Quickstart
Flask - Templates
Flask - Static Files
Jinja - Template Designer Documentation