A Camada Template Do Django (Python)

Que tal um curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?
QUERO CONHECER
JORNADA PYTHON
( /JORNADA-PYTHON/ )
DESENVOLVIMENTO WEB COM PYTHON E

DJANGO: TEMPLATE
Olá sr. Pythonista!
Finalmente chegamos ao nosso último post sobre Django (pelo menos dessa série -
com certeza ainda teremos muito conteúdo sobre Django, ok?!)
Primeiramente, quero garantir que você está no ponto certo.
Você já leu os outros posts da série, certo!? Se não, então já se liga:
Django: Introdução ao framework

Gostou do conteúdo? Compartilha aí!
(https://pythonacademy.com.br/blog/desenvolvimento-web-com-python-e-django-
introducao)
 

web-com-
python-e-
template)
django-

text=https://pythonacademy.com.br/blog/d
(https://api.whatsapp.com/send?

template&ui=2&tf=1)
view=cm&fs=1&su=A
(https://mail.google.c
web-com-
python-e-
django-
Django: A Camada Model (https://pythonacademy.com.br/blog/desenvolvimento-
web-com-python-e-django-model)
QUERO CONHECER
JORNADA PYTHON
Django: A Camada View (https://pythonacademy.com.br/blog/desenvolvimento-
web-com-python-e-django-view)
E antes de mais nada… Você já está inscrito na nossa exclusiva lista de

pythonistas?! Não, então já aproveita a oportunidade!
OLÁ ESTÁ GOSTANDO DO ARTIGO?
Então cadastre o seu email para receber gratuitamente mais conteúdos como
este!
Nome Email QUERO!
Agora sim estamos prontos para começar!
Nesse post, vamos tratar da camada que dá a “cara” à nossa aplicação: a Camada
Template!
É nela que se encontra o código Python, responsável por renderizar nossas páginas
web, e os arquivos HTML, CSS e Javascript que darão vida à nossa aplicação!
Vamos tratar das configurações necessárias para fazer essa camada funcionar
corretamente, das ferramentas built-ins do Django para construção de templates, da
Django Template Language: sua sintaxe, tags, filters, e muito mais!
Está curioso?
Então VAMOS NESSA!!!
Vá Direto ao Assunto…
Onde estamos…
 

web-com-
python-e-
template)
django-


template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Definição de Template
Configuração
QUERO CONHECER
JORNADA PYTHON
Django Template Language
Tags e Filtros customizados
Built-in Filters
Onde estamos…
Primeiro, vamos relembrar onde estamos no fluxo requisição/resposta do nosso
servidor Django:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
QUERO CONHECER
JORNADA PYTHON
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Ou seja, estamos na camada que faz a interface do nosso código Python/Django com
o usuário, interagindo, trocando informações, captando dados de input e gerando
QUERO CONHECER
JORNADA PYTHON
dados de output.
Caso você não tenha o código que estamos desenvolvendo nessa séries de posts (o
conhecido Hello World), baixe-o aqui (/assets/posts/django-template/helloworld.zip)!
SPOILER ALERT: Nesse post vamos concentrar nossos esforços em entender a

camada de templates para construção de páginas. Nesse momento, não vamos focar
na implementação da lógica por trás da Engine de templates, pois acredito que é algo
que dificilmente você se verá fazendo, ok?! Se você, mesmo assim, sentir necessidade de
uma explicação ou tirar uma dúvida sobre a API de Templates do Django, use o box de
comentários ali embaixo para eu saber como te ajudar!
Para relembrar, estamos desenvolvendo um Sistema de Gerenciamento dos

Funcionários da sua empresa.
Queremos que, ao final do post, tenhamos páginas customizadas para “mostrar ao

seu chefe” seu exímio trabalho!
Vamos começar pelo começo: o que é um Template?
Definição de Template
Basicamente, um template é um arquivo de texto que pode ser transformado em
outro arquivo (um arquivo HTML, um CSS, um CSV, etc…).
Um template contém:
Variáveis que podem ser substituídas por valores, a partir do processamento

por uma Engine de Templates (núcleo, core, “motor” de templates).
Tags que controlam a lógica do template .
Filtros que adicionam funcionalidades ao template.
Por exemplo, abaixo está representado um template mínimo que demonstra alguns
conceitos básicos:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal{#
Que umbase.html contém
curso que reúneo Programação
template que usaremos
Python,como esqueleto
Projetos #}
Reais e Dicas de Carreira?

2
{% extends "base.html" %}
3
QUERO CONHECER
JORNADA PYTHON
4
{% block conteudo %}
5
<h1>{{ section.title }}</h1>
7
{% for funcionario in funcionarios %}
8
<h2>
9
<a href="{% url 'website:funcionario_detalhe' pk=funcionario.id %}">
10
{{ funcionario.nome|upper }}
11
</a>
12
</h2>
13
{% endfor %}
14
{% endblock %}
Alguns pontos importantes:
Linha 1: Utilizamos comentário com a tag {# comentário #} .

Linha 2: Utilizamos {% extends "base.html" %} para estender de outro
template, ou seja, utilizá-lo como base, passando o caminho para ele.
Linha 4: Podemos facilitar a organização do template, criando blocos com {%
block <nome_do_bloco> %}{% endblock %} .
Linha 5: Podemos interpolar código vindo do servidor com o conteúdo do

nosso template com {{ secao.titulo }} - dessa forma, estamos acessando o
atributo titulo do objeto secao (que deve estar no Contexto da requisição).
Linha 7: É possível iterar sobre objetos de uma lista através da tag {% for
objeto in lista %}{% endfor %} .
Linha 10: Podemos utilizar filtros para aplicar alguma função à algum
conteúdo. Nesse exemplo, estamos aplicando o filtro upper , que transforma
todos os caracteres da string em maísculos, no conteúdo de funcionario.nome .
Também é possível encadear filtros, por exemplo: {{
funcionario.nome|upper|cut:" " }}
Django criou uma linguagem que contém todos esses elementos.
Chamaram-na de DTL - Django Template Language! Veremos mais dela ali embaixo!
Para utilizar os templates do Django, é necessário primeiro configurar sua

utilização.
E é isso que veremos agora!
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Configuração
QUERO CONHECER
JORNADA PYTHON
Se você já deu uma espiada no nosso arquivo de configurações, o settings.py , você
já deve ter visto a seguinte configuração:
1
TEMPLATES = [
2
{
3
'BACKEND': 'django.template.backends.django.DjangoTemplates',
4
'DIRS': [],
5
'APP_DIRS': True,
6
'OPTIONS': {},
7
},
8
]
Mas você já se perguntou o que essa configuração quer dizer?
Nela:
BACKEND é o caminho para uma classe que implementa a API de templates do
Django.
DIRS define uma lista de diretórios onde o Django deve procurar por
templates. A ordem da lista define a ordem de busca.

APP_DIRS define se o Django deve procurar por templates dentro dos diretórios
dos apps instalados em INSTALLED_APPS .

OPTIONS contém configurações específicas do BACKEND escolhido, ou seja,
dependendo do backend de templates que você escolher, você poderá

configurá-lo utilizando o OPTIONS .
Por ora, vamos utilizar as configurações padrão “de fábrica” pois elas já nos
atendem!
Agora, vamos ver sobre a tal Django Template Language!
Django Template Language

A DTL é a linguagem padrão de templates do Django. Ela é simples, porém poderosa.
Dando uma olhada na sua documentação

(https://docs.djangoproject.com/en/2.0/ref/templates/language/), podemos ver a
filosofia da DTL (traduzido):
 

web-com-
python-e-
template)
django-


template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Se você tem alguma experiência em programação, ou se você está acostumado
com linguagens que misturam código de programação diretamente no HTML,
QUERO CONHECER
JORNADA PYTHON
você deve ter em mente que o sistema de templates do Django não é simplesmente
código Python embutido no HTML. Isto é: o sistema de templates foi desenhado
para ser a apresentação, e não para conter lógica!
Se você vem de outra linguagem de programação deve ter tido contato com o
seguinte tipo de construção: código de programação adicionado diretamente no
código HTML (como PHP).
Isto é o terror dos designers!
Ponha-se no lugar de um designer que não sabe nada sobre programação. Agora
imagina você tendo que dar manutenção nos estilos de uma página LOTADA de
código de programação?!
Complicado, hein?!
Agora, nada melhor para aprender sobre a DTL do que botando a mão na massa e
melhorando as páginas da nossa aplicação, né?!
Primeiro, vamos começar fazendo algumas alterações na estrutura do nosso projeto!
Observação: nesse post eu vou utilizar o Bootstrap 4 (https://getbootstrap.com/) para

dar um “tapa no visual”. Se surgir alguma dúvida, não se esqueça do box de
comentário ao final do post, ok?!
Alterações no projeto
Para dar continuidade no nosso projeto, vamos fazer as seguintes alterações:
Crie a pasta _layouts dentro de website/templates/website a fim de separar

os templates-base (layouts) da nossa aplicação.
Crie o arquivo base.html dentro de /layouts .
Crie a pasta static dentro de website para guardar os arquivos estáticos que
vamos utilizar (arquivos de estilo CSS, arquivos Javascript, imagens, fontes,
etc…). Crie também a pasta website dentro dela.
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Dentro dessa pasta ( /static/website/ ), crie as pastas css , img e js (arquivos
.css, imagens e Javascript).
QUERO CONHECER
JORNADA PYTHON
Adicione o parâmetro name='' às URLs no arquivo website/urls.py , da
seguinte forma:
1
urlpatterns = [
2
# '/'
3
path('',
4
IndexTemplateView.as_view(),
5
name="index" # <<< Adicionar
6
),
8
# '/funcionario/cadastrar'
9
path('funcionario/cadastrar',
10
FuncionarioCreateView.as_view(),
11
name="cadastra_funcionario" # <<< Adicionar
12
),
13
14
# '/funcionarios'
15
path('funcionarios/',
16
FuncionarioListView.as_view(),
17
name="lista_funcionarios" # <<< Adicionar
18
),
19
20
# '/funcionario/{pk}'
21
path('funcionario/<pk>',
22
FuncionarioUpdateView.as_view(),
23
name="atualiza_funcionario" # <<< Adicionar
24
),
25
26
# '/funcionarios/excluir/{pk}'
27
path('funcionario/excluir/<pk>',
28
FuncionarioDeleteView.as_view(),
29
name="deleta_funcionario" # <<< Adicionar
30
),
31
]
Observação: Nós criamos uma pasta com o nome do app ( website , no caso) dentro
das pastas static e templates para que o Django crie o namespace do app. Dessa
forma, o Django entende onde buscar os recursos quando você precisar!
Dessa forma, devemos estar com a estrutura da seguinte forma:
Estrutura do projeto
Com a estrutura acima, vamos começar

Gostou pelo template-base
do conteúdo? Compartilha aí! do app website!
Template-base
 

web-com-
python-e-
template)
django-


template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Nosso template que servirá de esqueleto deve conter o código HTML que irá se
repetir em todas as páginas.
QUERO CONHECER
JORNADA PYTHON
Devemos colocar nele os trechos de código mais comuns das páginas HTML.
Por exemplo, toda página HTML:
Deve ter as tags: <html></html> , <head></head> e <body></body> .

Deve ter os links para os arquivos estáticos: <link></link> e <script>
</script> .
Quaisquer outros trechos de código que se repitam em nossas páginas.
Você pode fazer o download dos arquivos necessários para o nosso projeto aqui
(Bootstrap) (https://getbootstrap.com/docs/4.1/getting-started/download/) e aqui
(jQuery) (https://jquery.com/download/), que é uma dependência do Bootstrap, ou
utilizar os arquivos que eu já baixei e estão na pasta website/static/ .
Faça isso para todos as bibliotecas externas que queira utilizar (ou utilize um CDN -
Content Delivery Network
(https://pt.wikipedia.org/wiki/Rede_de_fornecimento_de_conte%C3%BAdo)).
Ok! Agora, com os arquivos devidamente colocados na pasta /static/ , podemos

começar com:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
Que tal<!DOCTYPE
um cursohtml>
que reúne Programação Python, Projetos Reais e Dicas de Carreira?

2
<html>
3
{% load CONHECER
static %}
QUERO JORNADA PYTHON

4
<head>
5

6
<title>
7
{% block title %}Sistema de Gerenciamento de Funcionários{% endblock %}
8
</title>
10

11
<link rel="shortcut icon" href="{% static 'website/img/favicon.png' %}" type=
12
13

14
<link rel="stylesheet" href="{% static 'website/css/bootstrap.min.css' %}">
15
<link rel="stylesheet" href="{% static 'website/css/master.css' %}">
16
17

18
{% block styles %}{% endblock %}
19
</head>
20
21
<body>
22

23
<nav class="navbar navbar-expand-lg navbar-light bg-light">
24
<a class="navbar-brand" href="{% url 'website:index' %}">
25
<img src="{% static 'website/img/favicon.png' %}" height='45px'>
26
</a>
27
<button class="navbar-toggler" type="button"
28
data-toggle="collapse" data-target="#conteudo-navbar"
29
aria-controls="conteudo-navbar" aria-expanded="false"
30
aria-label="Ativar navegação">
31
<span class="navbar-toggler-icon"></span>
32
</button>
33
34
<div class="collapse navbar-collapse" id="conteudo-navbar">
35
<ul class="navbar-nav mr-auto">
36
<li class="nav-item active">
37
<a class="nav-link" href="{% url 'website:index' %}">
38
Página Inicial
39
</a>
40
</li>
41
<li class="nav-item">
42
<a class="nav-link" href="{% url 'website:lista_funcionario'
43
Funcionários
44
</a>
45
</li>
46
</ul>
47
</div>
48
</nav>
49

50

51
{% block conteudo %}{% endblock %}
52
53

54
55

<script src="{%

<script src="{% static 'website/js/jquery.min.js' %}"></script>

template)
django-
static 'website/js/bootstrap.min.js'

web-com-
python-e-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
%}"></script>
56
57
Que
58
tal um
Python, Projetos Reais e Dicas de Carreira?
59
{% block scripts %}{% endblock %}
60
QUERO CONHECER
JORNADA PYTHON
61

62
<script src="{% static 'website/js/scripts.js' %}"></script>
63
</body>
</html>
E vamos as explicações:
<!DOCTYPE html> serve para informar ao browser do usuário que se trata de
uma página HTML5.

Para que o Django possa carregar dinamicamente os arquivos estáticos do site,
utilizamos a tag static . Ela vai fazer a busca do arquivo que você quer e
fazer a conversão dos links corretamente. Para utilizá-la, é necessário
primeiro carregá-la. Fazemos isso com {% load <modulo> %} . Após seu
carregamento, utilizamos a tag {% static 'caminho/para/arquivo' %} ,
passando como parâmetro a localização relativa à pasta /static/ .
Podemos definir quaisquer blocos no nosso template com a tag {% block
nome_do_bloco %}{% endblock %} . Fazemos isso para organizar melhor as
páginas que irão estender desse template. Podemos passar um valor padrão
dentro do bloco (igual está sendo utilizado na linha 6) - dessa forma caso não
seja definido nenhum valor no template filho - é aplicado o valor padrão.
Colocamos nesse template os arquivos necessários para o funcionamento do
Bootstrap, isto é: o jQuery, o CSS e Javascript do Bootstrap.
O link para outras páginas da nossa aplicação é feito utilizando-se a tag {% url
'nome_da_view' parametros... %} . Dessa forma, deixamos que o Django cuide
da conversão para URLs válidas!

O conjunto de tags <nav></nav> definem a barra superior de navegação com
os links para as páginas da aplicação. Esse também é um trecho de código
presente em todas as páginas, por isso, adicionamos ao template.
(Documentação da Navbar - Bootstrap)
(https://getbootstrap.com/docs/4.0/components/navbar/)
E pronto! Temos um template base!

Antes de continuar… Está gostando do conteúdo mas ainda não faz parte da nossa

exclusiva lista de pythonistas

viciados em

conteúdo

de qualidade?
web-com-
python-e-
template)
django-


template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Não? Então já aproveita!!!
QUERO CONHECER
JORNADA PYTHON
Agora, vamos customizar a tela principal da nossa aplicação: a index.html!
Página Inicial
Template: website/index.html
Nossa tela inicial tem o objetivo de apenas mostrar as opções disponíveis ao usuário,
que são:
Link para a página de cadastro de novos Funcionários.

Link para a página de listagem de Funcionários.
Primeiramente, precisamos dizer ao Django que queremos utilizar o template que

definimos acima como base.
Para isso, utilizamos a tag {% extends "caminho/para/template" %} , que serve para

que um template estenda de outro.
Com isso, podemos fazer:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal
Programação
2
{% extends "website/_layouts/base.html" %}
3
QUERO CONHECER
JORNADA PYTHON
4

5
{% block title %}Página Inicial{% endblock %}
7

8
9
<div class="container">
10
<div class="row">
11
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
12
<div class="card">
13
<div class="card-body">
14
<h5 class="card-title">Cadastrar Funcionário</h5>
15
<p class="card-text">
16
Cadastre aqui um novo <code>Funcionário</code>.
17
</p>
18
<a href="{% url 'website:cadastra_funcionario' %}"
19
class="btn btn-primary">
20
Novo Funcionário
21
</a>
22
</div>
23
</div>
24
</div>
25
26
<div class="card">
27
28
<h5 class="card-title">Lista de Funcionários</h5>
29
30
Veja aqui a lista de <code>Funcionários</code> cadastrados.
31
</p>
32
<a href="{% url 'website:lista_funcionarios' %}"
33
34
Vá para Lista
35
</a>
36
</div>
37
</div>
38
</div>
39
</div>
40
</div>
41
{% endblock %}
Nesse template:
A classe container do Bootstrap

(https://getbootstrap.com/docs/4.1/layout/overview/#containers) (linha 9) serve
para definir a área útil da nossa página (para que nossa página fique
centralizada e não fique ocupando todo o comprimento da página).
As classes row e col-* fazem parte do sistema Grid do Bootstrap
(https://getbootstrap.com/docs/4.1/layout/grid/) e servem para tornar nossa
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
página responsiva (que se adapta aos diversos tipos e tamanhos de tela:
celular, tablet, desktop etc…).
QUERO CONHECER
JORNADA PYTHON
As classes card* fazem parte do component Card do Bootstrap
(https://getbootstrap.com/docs/4.0/components/card/).
As classes btn e btn-primary (documentação
(https://getbootstrap.com/docs/4.0/components/buttons/)) são usados para dar
o visual de botão à algum elemento.
Com isso, nossa Página Inicial - ou nossa Homepage - deve ficar assim:
Página Inicial
Top, hein?!
Agora vamos para a página de cadastro de Funcionários: a cria.html
Está aprendendo Django mas ainda não sabe criar páginas web INCRÍVEIS
com HTML5, CSS3 e Bootstrap 4? Aprenda AGORA com esse curso COMPLETO!
Clique aqui e confira nosso curso parceiro da Python Academy!

(https://go.hotmart.com/L54201537M)
Template de Cadastro de Funcionários

Template: website/cria.html
Nesse template, mostramos o formulário para cadastro de novos funcionários.
Se lembra que definimos o formulário InsereFuncionarioForm no post passado

view#forms)?
Pois então… Dessa forma, nossa View FuncionarioCreateView expõe um objeto form
no nosso template para que possamos utilizá-lo.
Mas antes de seguir, vamos Gostou do uma

instalar conteúdo? Compartilha
biblioteca queaí!nos ajuda e muito a
renderizar os campos de input do nosso formulário: a Widget Tweaks
  

template)
django-
(https://github.com/jazzband/django-widget-tweaks)!

web-com-
python-e-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Com ela, nós temos maior liberdade para customizar os campos de input do nosso
formulário (adicionando classes CSS e/ou atributos, por exemplo).
QUERO CONHECER
JORNADA PYTHON
Para isso, primeiro nós a instalamos com:
1
pip install django-widget-tweaks
Depois a adicionamos a lista de apps instalados, no arquivo helloworld/settings.py :
1
INSTALLED_APPS = [
2
...
3
'widget_tweaks',
4
...
5
]
E, no template onde formos utilizá-lo, carregamos ela com {% load widget_tweaks

%} !
E pronto, podemos utilizar a tag {% render_field nome_do_campo parâmetros %}

passando parâmetros, configurando a forma como o input será renderizado!
Assim, nós podemos construir nosso template da seguinte forma:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
Que tal{%
umextends "website/_layouts/base.html"
curso que reúne Programação Python,%}
Projetos Reais e Dicas de Carreira?
2
3
{% load widget_tweaks
QUERO CONHECER
%}
JORNADA PYTHON
4
5
{% block title %}Cadastro de Funcionários{% endblock %}
7
8
9
<div class="row">
10
11
<div class="card">
12
13
<h5 class="card-title">Cadastro de Funcionário</h5>
14
15
Complete o formulário abaixo para cadastrar
16
um novo <code>Funcionário</code>.
17
</p>
18
<form method="post">
19

20
{% csrf_token %}
21
22

23
<div class="input-group mb-3">
24
<div class="input-group-prepend">
25
<span class="input-group-text">Nome</span>
26
</div>
27
{% render_field form.nome class+="form-control" %}
28
</div>
29
30

31
32
33
<span class="input-group-text">Sobrenome</span>
34
</div>
35
{% render_field form.sobrenome class+="form-control" %}
36
</div>
37
38

39
40
41
<span class="input-group-text">CPF</span>
42
</div>
43
{% render_field form.cpf class+="form-control" %}
44
</div>
45
46

47
48
49
<span class="input-group-text">Tempo de Serviço</span>
50
</div>
51
{% render_field form.tempo_de_servico class+="form-control" %}
52
</div>
53
54
55


<div 
class="input-group mb-3">


python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
56
57
Que
58
tal um curso que reúne
<span Programação Python, Projetos Reais e Dicas de Carreira?
class="input-group-text">Remuneração</span>
59
</div>
60
QUERO CONHECER
JORNADA
{% render_field
( /JORNADA-PYTHON/
PYTHONclass+="form-control"
form.remuneracao %}
)
61
</div>
62
63
<button class="btn btn-primary">Enviar</button>
64
</form>
65
</div>
66
</div>
67
</div>
68
</div>
69
</div>
{% endblock %}
Aqui:
Utilizamos, novamente as classes container , row , col-* e card* do

Bootstrap.
Conforme mencionei no post passado, devemos adicionar a tag {% csrf_token
%} para evitar ataques de Cross Site Request Forgery.
As classes Input Group do Bootstrap

(https://getbootstrap.com/docs/4.1/components/input-group/) input-group ,
input-group-prepend e input-group-text servem para customizar o estilo do
<input ... /> .
Utilizamos o {% render_field form.campo class+='form-control' %} para

aplicar a classe form-control do Bootstrap ao input do formulário.
Observação: É possível adicionar a classe CSS form-control diretamente no nosso

InsereFuncionarioForm , da seguinte forma:
1
class InsereFuncionarioForm(forms.ModelForm):
2
...
3
nome = forms.CharField(
4
max_length=255,
5
widget=forms.TextInput(
6
attrs={
7
'class': "form-control"
8
}
9
)
10
)
11
...
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Mas eu não aconselho fazer isso, pois deixa nosso código extremamente acoplado.
Veja que para mudar a classe CSS (atributo da interface) teremos que mudar código
QUERO CONHECER
JORNADA PYTHON
Python (backend). Por isso, aconselho a utilização de ferramentas para tal, como o
Widget Tweaks, pois alteramos código apenas no template!
Com isso, nosso formulário deve ficar assim:
Página de Cadastro de Funcionários
Agora, vamos desenvolver o template de listagem de Funcionários.
Template de Listagem de Funcionários

Template: website/lista.html
Nessa página, nós queremos mostrar o conjunto de Funcionários cadastrado no

banco de dados e as ações que o usuário pode tomar: atualizar o Funcionário ou
excluí-lo.
Se lembra da view FuncionarioListView ?
Ela é responsável por buscar a lista de Funcionários e expor um objeto chamado

funcionarios para iteração no template.
Podemos construir nosso template da seguinte forma:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
Que tal{%
2
3
{% block title %}Lista de Funcionários{% endblock %}
QUERO CONHECER
JORNADA PYTHON
4
5
6
7
<div class="row">
8
9
<div class="card">
10
11
<h5 class="card-title">Lista de Funcionário</h5>
12
13
{% if funcionarios|length > 0 %}
14
15
Aqui está a lista de <code>Funcionários</code> cadastrados.
16
</p>
17
18
<table class="table">
19
<thead class="thead-dark">
20
<tr>
21
<th>ID</th>
22
<th>Nome</th>
23
<th>Sobrenome</th>
24
<th>Tempo de Serviço</th>
25
<th>Remuneração</th>
26
<th>Ações</th>
27
</tr>
28
</thead>
29
30
<tbody>
31
32
<tr>
33
<td>{{ funcionario.id }}</td>
34
<td>{{ funcionario.nome }}</td>
35
<td>{{ funcionario.sobrenome }}</td>
36
<td>{{ funcionario.tempo_de_servico }}</td>
37
<td>{{ funcionario.remuneracao }}</td>
38
<td>
39
<a href="{% url 'website:atualiza_funcionario' pk=funcionario
40
class="btn btn-info">
41
Atualizar
42
</a>
43
<a href="{% url 'website:deleta_funcionario' pk=funcionario.i
44
class="btn btn-outline-danger">
45
Excluir
46
</a>
47
</td>
48
</tr>
49
{% endfor %}
50
</tbody>
51
</table>
52
{% else %}
53
<div class="text-center mt-5 mb-5 jumbotron">
54
55

</div>

python-e-
template)
django-

<h5>Nenhum <code>Funcionário</code> cadastrado ainda.</h5>

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
56
57
{% endif %}
Que
58
tal um curso<hr
que/>
reúne Programação Python, Projetos Reais e Dicas de Carreira?

59
<div class="text-right">
60
QUERO CONHECER
<a href="{% urlJORNADA PYTHON

( /JORNADA-PYTHON/
'website:cadastra_funcionario' %}" class="btn ) btn-pri
61
Cadastrar Funcionário
62
</a>
63
</div>
64
</div>
65
</div>
66
</div>
67
</div>
68
</div>
{% endblock %}
Nesse template:
Utilizamos classes do Bootstrap para estilizar as tabelas

(https://getbootstrap.com/docs/4.0/content/tables/). São elas: table para
estilizar o cabeçalho e as linhas e thead-dark para escurecer o cabeçalho.
Na linha 13, utilizamos o filtro length para verificar se a lista de funcionários
está vazia. Se ela tiver dados, é mostrada a tabela. Se estiver vazia, é mostrado
o componente Jumbotron do Bootstrap (https://v4-
alpha.getbootstrap.com/components/jumbotron/) com o texto “Nenhum
Funcionário cadastrado ainda”.
Na linha 30 utilizamos a tag {% for funcionario in funcionarios %} para
iterar sobre a lista funcionarios .
Nas linhas 39 e 46 fazemos o link para as páginas de atualização e exclusão do
usuário.
O resultado, sem Funcionários cadastrados, deve ser esse:
Página de Listagem de Funcionários - sem cadastros
E com um Funcionário cadastrado:
Página de Listagem de Funcionários - com cadastros
Quando o usuário clicar em “Excluir”, ele será levado para a página exclui.html e
quando clicar em “Atualizar”, ele será levado para a página atualiza.html .

Vamos começar construindo a página de Atualização de Funcionários!
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Template de Atualização de Funcionários
QUERO
Template: CONHECER
JORNADA PYTHON
website/atualiza.html
Nessa página, queremos que o usuário possa ver os dados atuais do Funcionário e
possa atualizá-los, conforme sua vontade.
Para isso utilizamos a view FuncionarioUpdateView implementada no post passado

view).
Ela expõe um formulário com os dados do modelo previamente preenchidos para

que o usuário possa alterar.
Vamos utilizar novamente a biblioteca Widget Tweaks para facilitar a renderização

dos campos de input.
Abaixo, como podemos fazer nosso template:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
Que tal{%
2
3
{% load widget_tweaks
QUERO CONHECER
%}
JORNADA PYTHON
4
5
{% block title %}Atualização de Dados do Funcionários{% endblock %}
7
8
9
<div class="row">
10
11
<div class="card">
12
13
<h5 class="card-title">Atualização de Dados do Funcionário</h5>
14
15

16
{% csrf_token %}
17
18

19
20
21
<span class="input-group-text">Nome</span>
22
</div>
23
{% render_field form.nome class+="form-control" %}
24
</div>
25
26

27
28
29
<span class="input-group-text">Sobrenome</span>
30
</div>
31
{% render_field form.sobrenome class+="form-control" %}
32
</div>
33
34

35
36
37
<span class="input-group-text">CPF</span>
38
</div>
39
{% render_field form.cpf class+="form-control" %}
40
</div>
41
42

43
44
45
<span class="input-group-text">Tempo de Serviço</span>
46
</div>
47
{% render_field form.tempo_de_servico class+="form-control" %}
48
</div>
49
50

51
52
53
<span class="input-group-text">Remuneração</span>
54
55

</div>

{% render_field form.remuneracao


python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
class+="form-control"django-
%}
56
57
</div>
Que
58
tal um curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?
59
<button class="btn btn-primary">Enviar</button>
60
QUERO CONHECER
</form>
JORNADA PYTHON
61
</div>
62
</div>
63
</div>
64
</div>
65
</div>
{% endblock %}
Nesse template, não temos nada de novo. Perceba que seu código é similar ao
template de adição de Funcionários.
Sua interface fica bem similar também:
Página de Atualização de Funcionários
E por último, temos o template de exclusão de Funcionários.
Template de Exclusão de Funcionários

Template: website/exclui.html
A função dessa página é mostrar uma página de confirmação para o usuário antes
da exclusão de um Funcionário.
A view que fizemos, a FuncionarioDeleteView , facilita bastante nossa vida. Com ela,
basta dispararmos uma requisição POST para a URL de exclusão!
Dessa forma, nosso objetivo se resume à:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal
Programação
2
{% extends "website/_layouts/base.html" %}
3
QUERO CONHECER
JORNADA PYTHON
4

5
{% block title %}Página Inicial{% endblock %}
7

8
9
<div class="container mt-5">
10
<div class="card">
11
12
<h5 class="card-title">Exclusão de Funcionário</h5>
13
14
15
Você tem certeza que quer excluir o funcionário
16
<b>{{ funcionario.nome }}</b>?
17
</p>
18
19
20
{% csrf_token %}
21
22
<hr />
23
<div class="text-right">
24
<a href="{% url 'website:lista_funcionarios' %}"
25
class="btn btn-outline-danger">
26
Cancelar
27
</a>
28
<button class="btn btn-danger">Excluir</button>
29
</div>
30
</form>
31
</div>
32
</div>
33
</div>
34
{% endblock %}
Aqui, nada de novo também.
Apenas mostramos o formulário onde o usuário pode decidir excluir ou não o

Funcionário, que deve ficar assim:
Página de Exclusão de Funcionários
Pronto!
Com isso, temos todas as telas do nosso projeto!
Agora vamos ver como construir tags e filtros customizados!

Tagse Filtros

customizados
 
python-e-
template)
django-


web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Sabemos, agora, que o Django possui uma grande variedade de filtros e tags pré-
configurados.
QUERO CONHECER
JORNADA PYTHON
Contudo, é possível que, em alguma situação específica, o Django não te ofereça o
filtro ou tag necessário.
Para isso, ele previu a possibilidade de você construir seus próprios filtros e tags!
E é exatamente isso que veremos agora!
Vamos construir uma tag que irá nos dizer o tempo atual formatado e um filtro que
irá retornar a primeira letra da string passada.
Para isso, vamos começar com a configuração necessária!
Configuração
Para utilizar tags e filtros customizados, precisamos criar uma pasta chamada
/templatetags na raíz do app.
Crie a pasta website/templatetags/ e dentro dela, adicione:
Um script __init__.py em branco

O script tempo_atual.py referente à nossa tag
O script primeira_letra.py referente ao nosso filtro.
Nossa estrutura deve ficar:
1
website/
2
...
3
templatetags/
4
__init__.py
5
tempo_atual.py
6
primeira_letra.py
7
...
Para que o Django enxergue nossas tags e filtros é necessário que o app onde eles
estão instalada esteja configurada na lista INSTALLED_APPD do settings.py (no nosso
caso, website já está lá, portanto, nada a fazer aqui).

Também é necessário carregá-los com o {% load filtro/tag %} .

Vamos começar com o filtro. 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Vamos chamá-lo de primeira_letra e iremos utilizá-lo da seguinte maneira:
1
QUERO
<p>{{ CONHECER
valor|primeira_letra JORNADA PYTHON

}}</p>
Filtro primeira_letra
Filtros customizados são apenas funções que recebem um ou dois argumentos. São
eles:
O valor do input.
O valor do argumento - que pode ter um valor padrão ou não receber nenhum
valor.
No nosso filtro {{ valor|primeira_letra }} :
valor é o input value .
Nosso filtro não receberá argumentos, portanto não foi passado nada como tal.
Para ser um filtro válido, é necessário que o código dele contenha uma variável
chamada register que seja uma instância de template.Library (onde todos os tags
e filtros são registrado).
Isso define um filtro.
Outra questão são as Exceções.
Como a engine de templates do Django não provê tratamento de exceção à execução

do filtro, qualquer exceção no filtro será exposta como uma exceção do próprio
servidor.
Por isso, nosso filtro deve evitar lançar exceções e, ao invés disso, deve retornar um
valor padrão.
Vamos ver um exemplo de filtro do Django.
Abra o arquivo django/template/defaultfilter.py . Lá temos o exemplo do filtro

lower :
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal
Que @register.filter(is_safe=True)
um curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?

2
@stringfilter
3
def lower(value):
QUERO CONHECER
JORNADA PYTHON
4
"""Convert a string into all lowercase."""
5
return value.lower()
Nele:
@register.filter(is_safe=True) é utilizado para registrar sua função *como
um filtro para o Django. Só assim o framework vai enxergar seu código.

@stringfilter é um decorator utilizado para dizer ao Django que seu filtro
espera uma string como argumento (saiba mais sobre decorators no nosso post
Domine Decorators em Python (https://pythonacademy.com.br/blog/domine-
decorators-em-python)).
Com essas informações, vamos agora codificar e registrar nosso próprio filtro!
Uma forma de pegarmos a primeira letra de uma string é transformá-la em lista e

pegar o elemento de índice 0, da seguinte forma:
1
from django import template
2
from django.template.defaultfilters import stringfilter
4
register = template.Library()
6
@register.filter
7
@stringfilter
8
def primeira_letra(value):
9
return list(value)[0]
Nesse código:
O código register = template.Library() é necessário para registrarmos nosso

filtro no catálogo de filtros do Django.
@register.filter e @stringfilter são os decorators que citei aqui em cima.
E agora vamos fazer o teste em algum template nosso.
Vamos alterar nossa tabela no template website/lista.html para incluir nosso filtro
da seguinte forma:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal<table
Que class="table">
um curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?

2
<thead class="thead-dark">
3
<tr> CONHECER
QUERO
JORNADA PYTHON
4
<th></th>
5
<th>Nome</th>
6
<th>Sobrenome</th>
7
<th>Tempo de Serviço</th>
8
<th>Remuneração</th>
9
<th class="text-center">Ações</th>
10
</tr>
11
</thead>
12
<tbody>
13
14
<tr>
15

16
<td>{{ funcionario.nome|primeira_letra }}</td>
17
<td>{{ funcionario.nome }}</td>
18
<td>{{ funcionario.sobrenome }}</td>
19
<td>{{ funcionario.tempo_de_servico }}</td>
20
<td>{{ funcionario.remuneracao }}</td>
21
<td class="text-center">
22
<a href="{% url 'website:atualiza_funcionario' pk=funcionario.id %}"
23
24
Atualizar
25
</a>
26
<a href="{% url 'website:deleta_funcionario' pk=funcionario.id %}"
27
class="btn btn-danger">
28
Excluir
29
</a>
30
</td>
31
</tr>
32
{% endfor %}
33
</tbody>
34
</table>
O que resulta em:
_Template_ alterado com a inclusão do nosso filtro customizado
E com isso, fizemos nosso primeiro filtro!
Agora vamos fazer nossa tag customizada: a tempo_atual !
Tag tempo_atual
De acordo com a documentação do Django, “tags são mais complexas que filtros pois
podem fazer qualquer coisa“.
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Desenvolver uma tag pode ser algo bem trabalhoso, dependendo do que você deseja
fazer. Mas também pode ser simples.
QUERO CONHECER
JORNADA PYTHON
Como nossa tag vai apenas mostrar o tempo atual, sua implementação não deve ser
complexa.
Para isso, utilizaremos um “atalho” do Django: a simple_tag !
A simple_tag é uma ferramenta para construção de tags simples (assim como o

próprio nome já diz).
Com ela, a criação de tags fica similar à criação de filtros, que vimos na seção
passada.
Precisamos incluir uma instância de template.Library , utilizar o decorator

@register e definir nossa função.
Dessa forma, podemos definí-la como:
1
import datetime
2
from django import template
4
register = template.Library()
6
@register.simple_tag
7
def tempo_atual():
8
return datetime.datetime.now().strftime('%H:%M:%S')
E para utilizá-la, fazemos o carregamento com {% load tempo_atual %} e utilizamos

em nosso template com {% tempo_atual %} .
No nosso caso, vamos alterar o arquivo website/_layouts/base.html para utilizar

nossa tag.
Vamos adicionar um novo item à barra de navegação (do lado direito), da seguinte
forma:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal<body>
Que um curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?
2

3
<nav class="navbar
QUERO CONHECER
navbar-expand-lg navbar-light bg-light">
JORNADA PYTHON
4
...
5
<div class="collapse navbar-collapse" id="navbarSupportedContent">
6
<ul class="navbar-nav mr-auto">
7
<li class="nav-item active">
8
<a class="nav-link"
9
href="{% url 'website:index' %}">
10
Página Inicial
11
</a>
12
</li>
13
14
<a class="nav-link"
15
href="{% url 'website:lista_funcionarios' %}">
16
Funcionários
17
</a>
18
</li>
19
</ul>
20

21
<ul class="navbar-nav float-right">
22
23

24
<a class="nav-link" href="#">
25
<b>Hora: </b>{% tempo_atual %}
26
</a>
27
</li>
28
</ul>
29
</div>
30
</nav>
31
...
O resultado deve ser:
_Tag_ customizada em ação
Com isso, temos nosso filtro e tag customizados!
Agora vamos dar uma olhada no filtros que estão presentes no próprio Django: os
Built-in Filters!
Built-in Filters
É possível fazer muita coisa com os filtros que já veem instalados no próprio Django!
Muitas vezes, é melhor vocêGostou

fazer do
algumas operações
conteúdo? no
Compartilha aí!template do que fazê-las no
backend. Sempre verifique a viabilidade de um ou de outro para facilitar sua vida!
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Como a lista de built-in filters do Django é bem extensa (veja a lista completa aqui
(https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#built-in-filter-
QUERO CONHECER
JORNADA PYTHON
reference)), vou listar aqui os que eu considero mais úteis!
Use essa página como referência!
Favorite-a se quiser para ter acesso rápido à esse conteúdo!
Sem mais delongas, aí vai o primeiro: o capfirst !!!
Filtro capfirst
O que faz: Torna o primeiro caracter do valor para maiúsculo.
Exemplo:
Entrada: valor = 'esse é um texto' .
Utilização:
1
{{ valor|capfirst }}
Saída:
Esse é um texto
Resultado
Filtro cut
O que faz: Remove todas as ocorrências do parâmetro no valor passado.
Exemplo:
Entrada: valor = 'Esse É Um Texto De Testes'
Utilização:

1
{{ valor|cut:" " }}
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Saída:
EsseÉUmTextoDeTestes
QUERO CONHECER
JORNADA PYTHON
Resultado
Filtro date
O que faz: Utilizado para formatar datas. Possui uma grande variedade de
configurações (veja aqui
(https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#date)).
Exemplo:
Entrada: Objeto datetime .
Utilização:
1
{{ data|date:'d/m/Y' }}
Saída:
01/07/2018
Resultado
Filtro default
O que faz: Caso o valor seja False , utiliza o valor default .
Exemplo:
Entrada: valor = False
Utilização:
1
{{ valor|default:'Nenhum valor' }}
Saída: Gostou do conteúdo? Compartilha aí!
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Que tal um
Nenhum curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?
valor
QUERO CONHECER
JORNADA PYTHON
Resultado
Filtro default_if_none
O que faz: Similar ao filtro default , caso o valor seja None , utiliza o valor
configurado em default_if_none .
Exemplo:
Entrada: valor = None
Utilização:
1
{{ valor|default:'Nenhum valor' }}
Saída:
Nenhum valor
Resultado
Filtro divisibleby
O que faz: Retorna True se o valor for divisível pelo argumento.
Exemplo:
Entrada: valor = 14 e divisibleby:'2'
Utilização:
1
{{ valor|divisibleby:'2' }}
Saída:
True
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Resultado
QUERO CONHECER
JORNADA PYTHON
Filtro filesizeformat
O que faz: Transforma tamanhos de arquivos em valores legíveis por humanos.
Exemplo:
Entrada: valor = 123456789
Utilização:
1
{{ valor|filesizeformat }}
Saída:
117.7 MB
Resultado
Filtro first
O que faz: Retorna o primeiro item em uma lista
Exemplo:
Entrada: valor = ["Marcos", "João", "Luiz"]
Utilização:
1
{{ valor|first }}
Saída:
Marcos
Resultado
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Filtro last
QUERO
O que faz: CONHECER
Retorna JORNADA
o último item PYTHON
em uma lista
Exemplo:
Utilização:
1
{{ valor|last }}
Saída:
Luiz
Resultado
Filtro floatformat
O que faz: Arredonda números com ponto flutuante com o número de casas
decimais passado por argumento.
Exemplo:
Entrada: valor = 14.25145
Utilização:
1
{{ valor|floatformat:"2" }}
Saída:
14.25
Resultado
Filtro join
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
O que faz: Junta uma lista utilizando a string passada como argumento como
separador.
QUERO CONHECER
JORNADA PYTHON
Exemplo:
Utilização:
1
{{ valor|join:" - " }}
Saída:
Marcos - João - Luiz
Resultado
Filtro length
O que faz: Retorna o comprimento de uma lista ou string. É muito utilizado para
saber se existem valores na lista.
Exemplo:
Entrada: valor = ['Marcos', 'João']
Utilização:
1
{% if valor|length > 0 %}
2
<p>Lista contém valores</p>
3
{% else %}
4
<p>Lista vazia</p>
5
{% endif %}
Saída:
<p>Lista contém valores</p>
Resultado Gostou do conteúdo? Compartilha aí!
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Filtro lower
QUERO
O que faz: CONHECER
Transforma todos os JORNADA PYTHON

caracteres de
( /JORNADA-PYTHON/
uma string em minúsculas. )
Exemplo:
Entrada: valor = PaRaLeLePíPeDo
Utilização:
1
{{ valor|lower }}
Saída:
paralelepípedo
Resultado
Filtro pluralize
O que faz: Retorna um sufixo plural caso o número seja maior que 1.
Exemplo:
Entrada: valor = 12
Utilização:
1
Sua empresa tem {{ valor }} Funcionário{{ valor|pluralize:"s" }}
Saída:
Sua empresa tem 12 Funcionários
Resultado
Filtro random Gostou do conteúdo? Compartilha aí!
O que faz: Retorna um item aleatório de uma lista

 

web-com-
python-e-
template)
django-


template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Exemplo:
Entrada: valor CONHECER
QUERO = [1, 2, 3, 4, 5, 6, 7, 9] PYTHON

JORNADA
Utilização:
1
{{ valor|random }}
Sua saída será um valor da lista escolhido randomicamente.
Filtro title
O que faz: Transforma em maísculo o primeiro caracter de todas as palavras do
texto.
Exemplo:
Entrada: valor = 'Esse é o primeiro post do blog'
Utilização:
1
{{ valor|title }}
Saída:
Esse é O Primeiro Post Do Blog
Resultado
Filtro upper
O que faz: Transforma em maísculo todos caracteres da string.
Exemplo:
Entrada: valor = texto de testes

Utilização:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
1
tal
Que {{um
valor|upper
curso que}}
reúne Programação Python, Projetos Reais e Dicas de Carreira?
QUERO CONHECER
JORNADA PYTHON
Saída:
TEXTO DE TESTES
Resultado
Filtro wordcount
O que faz: Retorna o número de palavras da string.
Exemplo:
Entrada: valor = Django é o melhor framework web
Utilização:
1
{{ valor|wordcount }}
Saída:
Resultado
Bom…
Eu acho que está bom de filtros por aqui!
Código
O código completo desenvolvido nesse projeto está disponível no Github da Python
Academy. Clique aqui para acessá-lo e baixá-lo
(https://github.com/pythonacademybr/HelloWorldDjango)!
Para rodar o projeto, execute em seu terminal:

pip install -r 
requirements.txt para

instalar
web-com-
python-e-
template)
django-

as dependências. 

template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
python manage.py makemigrations para criar as Migrações.
python manage.py migrate para efetivar as Migrações no banco de dados.
QUERO CONHECER
JORNADA PYTHON
python manage.py runserver para executar o servidor de testes do Django.
Acessar o seu navegador na página http://localhost:8000 (por padrão).
E pronto… Servidor rodando!
Conclusão
Ufa… Por hoje é só!
Nesse post vimos como configurar, customizar e estender templates, como utilizar os
filtros e tags do Django, como criar tags e filtros customizados e um pouquinho de
Bootstrap, pra deixar as páginas bonitonas!
E com isso, senhores Pythonistas, terminamos nossa sequência de posts baseados

em Django!
Espero que tenham gostado do conteúdo… Tentei abordar a maior quantidade de

conhecimento aqui para que você possa iniciar sua jornada no Django com o pé
direito!
Creio que o conhecimento abordado aqui é suficiente para vocês iniciarem o

desenvolvimento de projetos pessoais e até profissionais utilizando Django!
Claro que ainda há muito para aprender, mas vimos bastante coisa por aqui…
E você… Como se saiu?!
Que tal customizar, modificar e deixar esse projeto um brinco?!
Faça e poste o resultado aqui embaixo no box de comentários!
Quero ver como você se saiu no seu primeiro projeto Django!
Ah, quer levar essa série completa de posts para onde for com nosso ebook GRÁTIS?
Então aproveita essa chance

 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
QUERO CONHECER
JORNADA PYTHON
É isso pessoal!
Até a próxima!
Autor
Por Vinícius Ramos

em 04/07/2018
"Porque o Senhor dá a sabedoria, e da sua boca vem a inteligência e o entendimento. -

Provérbios 2:6 "

Minhas redes:
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
Que  (https://www.linkedin.com/in/vinicius-aramos)
tal um

curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?
(mailto:vinicius.ramos@pythonacademy.com.br)
QUERO CONHECER
JORNADA PYTHON
( /JORNADA-PYTHON/
) 
(https://github.com/viniciusramos91)

(https://stackoverflow.com/users/6775679/viniciusramos91)
Continue aprendendo!
Estuturas Condicionais no Python
(/blog/estruturas-condicionais-no-python)
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
QUERO CONHECER
JORNADA PYTHON
List Comprehensions no Python
(/blog/list-comprehensions-no-python)
Como Instalar o Python no Windows
(/blog/como-instalar-python-no-windows)
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
QUERO CONHECER
JORNADA PYTHON
Listas no Python ← Retornar ao Blog

(/blog/index.html)
(/blog/listas-no-python)
Mais
Início (/)
Zen of Python (/zen-of-python)
Blog (/blog/)
Sliders (/sliders/)
Sobre (/sobre)
Loja
(/loja/)
Ebooks
Desenvolvimento Web com Python e Django (/ebooks/desenvolvimento-web-com-python-

  python-e-
template)
django-



web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-
e-django/)
Listas no Python (/ebooks/listas-no-python/)
QUERO CONHECER
JORNADA PYTHON
© 2021 Python Academy
"Porque o Senhor dá a sabedoria, e da sua boca vem a inteligência e o entendimento" Pv 2:6
 

python-e-
template)
django-

web-com-
template&ui=2&tf=1)
view=cm&fs=1&su=A
web-com-
python-e-
django-

A Camada Template Do Django (Python)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

A Camada Template Do Django (Python)

Enviado por

Direitos autorais:

Formatos disponíveis

Que tal um curso que reúne Programação Python, Projetos Reais e Dicas de Carreira?

DESENVOLVIMENTO WEB COM PYTHON E

Olá sr. Pythonista!

Primeiramente, quero garantir que você está no ponto certo.

Você já leu os outros posts da série, certo!? Se não, então já se liga:

Django: Introdução ao framework

E antes de mais nada… Você já está inscrito na nossa exclusiva lista de

OLÁ ESTÁ GOSTANDO DO ARTIGO?

Nome Email QUERO!

Agora sim estamos prontos para começar!

Então VAMOS NESSA!!!

Gostou do conteúdo? Compartilha aí!

Gostou do conteúdo? Compartilha aí!

SPOILER ALERT: Nesse post vamos concentrar nossos esforços em entender a

Para relembrar, estamos desenvolvendo um Sistema de Gerenciamento dos

Queremos que, ao final do post, tenhamos páginas customizadas para “mostrar ao

Vamos começar pelo começo: o que é um Template?

Variáveis que podem ser substituídas por valores, a partir do processamento

Reais e Dicas de Carreira?

Alguns pontos importantes:

Linha 1: Utilizamos comentário com a tag {# comentário #} .

Linha 5: Podemos interpolar código vindo do servidor com o conteúdo do

Django criou uma linguagem que contém todos esses elementos.

Para utilizar os templates do Django, é necessário primeiro configurar sua

Mas você já se perguntou o que essa configuração quer dizer?

BACKEND é o caminho para uma classe que implementa a API de templates do

templates. A ordem da lista define a ordem de busca.

dos apps instalados em INSTALLED_APPS .

dependendo do backend de templates que você escolher, você poderá

Agora, vamos ver sobre a tal Django Template Language!

Django Template Language

Dando uma olhada na sua documentação

Isto é o terror dos designers!

Primeiro, vamos começar fazendo algumas alterações na estrutura do nosso projeto!

Observação: nesse post eu vou utilizar o Bootstrap 4 (https://getbootstrap.com/) para

Crie a pasta _layouts dentro de website/templates/website a fim de separar

Dessa forma, devemos estar com a estrutura da seguinte forma:

Com a estrutura acima, vamos começar

Por exemplo, toda página HTML:

Deve ter as tags: <html></html> , <head></head> e <body></body> .

Quaisquer outros trechos de código que se repitam em nossas páginas.

Ok! Agora, com os arquivos devidamente colocados na pasta /static/ , podemos

Gostou do conteúdo? Compartilha aí!

que reúne Programação Python, Projetos Reais e Dicas de Carreira?

QUERO JORNADA PYTHON

<!DOCTYPE html> serve para informar ao browser do usuário que se trata de

uma página HTML5.

da conversão para URLs válidas!

E pronto! Temos um template base!

Agora, vamos customizar a tela principal da nossa aplicação: a index.html!

Link para a página de cadastro de novos Funcionários.

Primeiramente, precisamos dizer ao Django que queremos utilizar o template que

Para isso, utilizamos a tag {% extends "caminho/para/template" %} , que serve para

Com isso, podemos fazer:

Gostou do conteúdo? Compartilha aí!

A classe container do Bootstrap

Agora vamos para a página de cadastro de Funcionários: a cria.html

Clique aqui e confira nosso curso parceiro da Python Academy!

Template de Cadastro de Funcionários

Nesse template, mostramos o formulário para cadastro de novos funcionários.

Se lembra que definimos o formulário InsereFuncionarioForm no post passado

Mas antes de seguir, vamos Gostou do uma

Depois a adicionamos a lista de apps instalados, no arquivo helloworld/settings.py :

E, no template onde formos utilizá-lo, carregamos ela com {% load widget_tweaks

Um script init.py em branco