Django Girls Tutorial

Django
Girls Tutorial
Tabela de contedos
Introduo
Como funciona a internet?
Introduo linha de comando
Instalao do Python
Editor de Cdigo
Introduo ao Python
O que Django?
Instalao do Django
Criando um projeto
Modelos do Django
Administrao
10
Implantao!
11
Urls
12
Views - hora de criar!
13
Introduo a HTML
14
Django ORM (Querysets)
15
Dados dinmicos nos templates
16
Templates
17
CSS - Deixe mais bonito
18
Estendendo os templates
19
Amplie sua aplicao
20
Formulrios
21
Domnio
22
O que vem depois?
23
Django Girls Tutorial
Tutorial Django Girls

Este trabalho licenciado sob a licena Creative Commons Attribution-ShareAlike 4.0.
Para ver uma cpia desta licena, visite http://creativecommons.org/licenses/by-sa/4.0/
Translation
This tutorial has been translated from English to Portuguese by a group of awesome
volunteers. Special thanks for help goes out to Willie Lawrence, Vivian Macedo, Cleiton
Lima, danieltex, Leandro Silva Araujo, Adailton do Nascimento, Pablo Palacios, Paulo Alem,
Eric Hideki, Joao Luiz Lorencetti, clemente.jnr, Leonardo Alves dos Santos, joepreludian,
Gabriela Cavalcante da Silve, Rafael Biagioni de Fazio, Fabio C. Barrionuevo da Luz,
ffabiorj, Lucas Magnum, 1pedro, Adjamilton Junior, Leandro Barbosa, Kleber C Pinheiro,
Katyanna Moura, Annanda Sousa, Flavio Barros, Marcel Ribeiro Dantas, Adam Victor
Nazareth Brandizzi, Bernardo Fontes, Antonio Luis, Raony Guimares Correo do Carmo
Lisboa Cardenas, Camilla Achutti and Carla Suarez. Wow! <3 <3
Introduo
Voc j sentiu como se o mundo fosse cada vez mais sobre tecnologia e que de alguma
forma voc tenha ficado pra trs? Voc j imaginou como seria criar um website mas nunca
teve motivao suficiente para comear? Voc j pensou que o mundo do software
complicado demais at para tentar fazer alguma coisa sozinho?
Bem, ns temos boas notcias para voc! Programao no to difcil quanto parece e
ns queremos te mostrar o quo divertido pode ser.
Este tutorial no ir te transformar magicamente em um programador. Se voc quer ser
bom nisso precisa de meses ou at mesmo anos de treino e prtica. Mas ns queremos te
mostrar que a programao ou criao de websites no to complicada quanto parece.
Ns tentaremos explicar os diferentes pedaos to bem quanto pudermos, tal que voc no
se sinta intimidado pela tecnologia.
Ns esperamos conseguir fazer voc amar a tecnologia tanto quanto ns amamos!
O que voc ir aprender durante o tutorial?

Introduo
Quando voc tiver terminado o tutorial voc ter uma aplicao web simples e funcional:
seu prprio blog. Ns vamos mostrar como coloc-lo online, para que outros vejam seu
trabalho!
Ele se parecer (mais ou menos) com isso:
Se voc seguir o tutorial por conta prpria e no tiver um treinador para ajudar em caso
de qualquer problema, ns temos um chat para voc:
1. Ns
pedimos aos nossos treinadores e participantes anteriores para acessarem l de

tempos em tempos e ajudarem outros com o tutorial! No tenha medo de fazer sua
pergunta l!
OK, vamos pelo comeo...
Sobre o tutorial e contribuies

Este tutorial mantido por DjangoGirls. Se voc encontrar quaisquer erros ou quiser
atualizar o tutorial, por favor siga as orientaes de contribuio.
Introduo
Gostaria de nos ajudar a traduzir o tutorial para

outros idiomas?
no momento, as tradues esto sendo mantidas na plataforma crowdin.com em:
https://crowdin.com/project/django-girls-tutorial
Se o seu idioma no est listado no crowdin, por favor open a new issue informando o
idioma para que possamos adicion-lo.
Introduo
Como funciona a internet

Este captulo inspirado na palestra "Como a Internet funciona" de Jessica McKellar
(http://web.mit.edu/jesstess/www/).
Apostamos que voc usa a Internet todos os dias. Mas voc sabe realmente o que
acontece quando voc digita um endereo como http://djangogirls.org em seu navegador e
pressiona 'Enter'?
A primeira coisa que voc precisa entender que um site s um monte de arquivos salvos
em um disco rgido. Assim como seus filmes, msicas ou fotos. No entanto, h uma parte
que exclusiva para sites: essa parte inclui cdigos de computador chamado HTML.
Se voc no estiver familiarizada com a programao, pode ser difcil compreender o HTML
no comeo, mas seus navegadores da web (como o Chrome, Safari, Firefox, etc) amam ele.
Navegadores da Web so projetados para entender esse cdigo, seguir suas instrues e
apresentar todos esses arquivos de que seu site feito exatamente do jeito que voc quer
que eles sejam apresentados.
Igual todos os arquivos, os arquivos HTML precisam ser armazenados num disco rgido.
Pra internet ns usamos poderosos computadores especiais chamados servidores. Eles
no tm uma tela, o mouse ou o teclado, porque sua finalidade principal para armazenar
dados e servi-los. por isso que eles so chamados de servidores..--porque eles servem a
voc, dados.
OK, mas voc quer saber com o qu a internet se parece, certo?
Fizemos um desenho pra voc! Veja:
Que baguna n? Na verdade uma rede de mquinas conectadas (os servidores

mencionados acima). Centenas de milhares de mquinas! Muitos, muitos quilmetros de
cabos em todo o mundo! Para ver quo complicada a internet voc pode visitar um site
(http://submarinecablemap.com/) que mostra um mapa com os cabos submarinos. Aqui est
um screenshot do site:
Fascinante, no? Mas, obviamente, no possvel ter um fio conectado a toda mquina
ligada na internet. Logo, para chegar em uma mquina (por exemplo aquela onde
http://djangogirls.org est salva) ns precisamos passar uma requisio por muitas
mquinas diferentes.
Se parece com isso:
Imagine que quando voc digita http://djangogirls.org voc envia uma carta que diz:
"Querido Django Girls, eu desejo ver o site djangogirls.org. Envie ele pra mim, por favor!"
Sua carta vai para a agncia dos correios mais prxima de voc. Depois vai para outra que
um pouco mais perto do seu destinatrio, depois para outra e outra at que seja entregue
ao seu destino. O nico diferencial que se voc enviar cartas (pacotes de dados) com
freqncia para o mesmo lugar, cada carta pode passar por diferentes agncias de correios
(roteadores), dependendo de como elas so distribudas em cada agncia.
Sim, simples assim. Voc envia mensagens e espera alguma resposta. Claro, ao invs de
papel e caneta voc usa bytes de dados, mas a ideia a mesma!
Ao invs de endereos com o nome da rua, cidade, cdigo postal e nome do pas, ns
usamos endereos IP. Primeiro seu computador pergunta pelo DNS (Domain Name System
- Sistema de Nome de Domnio) para traduzir djangogirls.org para um endereo IP. O
funcionamento dele se parece um pouco com as antigas listas telefnicas onde voc pode
olhar para o nome da pessoa que quer entrar em contato e achar o seu nmero de telefone
e endereo.
Quando voc envia uma carta, ela precisa ter certas caractersticas para ser entregue
corretamente: um endereo, selo, etc. Voc tambm usa uma linguagem que o receptador
compreende, certo? O mesmo acontece com pacotes de dados que voc envia para ver um
site: voc usa um protocolo chamado HTTP (Hypertext Transfer Protocol - Protocolo de
Transferncia de Hipertexto).
Ento, basicamente, quando voc tem um site voc precisa ter um servidor (mquina) onde
ele fica hospedado. O servidor est espera de quaisquer requisies recebidas (cartas
que solicitam ao servidor o envio do seu site) e ele envia de volta seu site (em outra carta).
Como este um tutorial de Django voc vai perguntar o que o Django faz. Quando envia
uma resposta nem sempre voc quer enviar a mesma coisa para todo mundo. muito
melhor se suas cartas so personalizadas, especialmente para a pessoa que acabou de
escrever para voc, certo? O Django ajuda voc a criar essas personalizadas e
interessantes cartas :).
Chega de falar, hora de criar!
10

emocionante, no?! Voc vai escrever sua primeira linha de cdigo em poucos minutos :)
Deixe-nos apresent-lo ao seu primeiro novo amigo: a linha de comando!
As etapas a seguir mostraro a voc como usar a janela preta que todos os hackers usam.
Pode parecer um pouco assustador no comeo, mas realmente apenas um prompt
esperando por comandos de voc.
Qual a linha de comando?

A janela, que normalmente chamada de linha de comando ou interface de linha de
comando, um aplicativo baseado em texto para visualizao, manipulao e manuseio de
arquivos em seu computador (como por exemplo, o Windows Explorer ou o Finder no Mac,
mas sem interface grfica). Outros nomes para a linha de comando so: cmd, CLI, prompt,
console ou terminal.
Abra a interface de linha de comando

Para comear alguns experimentos, precisamos abrir a nossa interface de linha de
comando primeiro.
Windows
V em Iniciar Todos os Programas Acessrios Prompt de comando.
Mac OS X
Applications Utilities Terminal.
Linux
Provavelmente voc vai achar em Applications Accessories Terminal, mas isso
depende do seu sistema operacional. Qualquer coisa s procurar no Google :)
Prompt
11
Agora voc deve ver uma janela branca ou preta que est espera de seus comandos.
Se voc estiver em Mac ou num Linux, voc provavelmente ver um `` $, como este:
$
No Windows, um sinal de > , como este:

>
Cada comando ser antecedido por este sinal e um espao, mas voc no precisa digit-lo.
Seu computador far isso por voc :)
Apenas uma pequena nota: no seu caso, talvez h algo como C:\Users\ola> ou OlasMacBook Air: ~ ola$ antes do sinal do prompt isto estar 100% correto. Neste tutorial
ns apenas simplificaremos ele para o mnimo.
Seu primeiro comando (YAY!)

Vamos comear com algo simples. Digite o seguinte comando:
$ whoami
ou
> whoami
Depois tecla Enter. Essa nossa sada:

$ whoami
olasitarska
Como voc pode ver, o computador s apresentou seu nome de usurio. Elegante, n?:)
Tente digitar cada comando, no copiar e colar. Voc vai se lembrar mais dessa forma!
O Bsico
12
Cada sistema operacional tem o seu prprio conjunto de instrues para a linha de
comando, ento se certifique que voc est seguindo as instrues do seu sistema
operacional. Vamos tentar, certo?
Pasta atual
Seria legal saber em que pasta estamos agora, certo? Vamos ver. Digite o seguinte
comando seguido de um enter:
$ pwd
/Users/olasitarska
Se voc estiver no Windows:

> cd
C:\Users\olasitarska
Provavelmente voc vai ver algo parecido na sua mquina. Um vez que voc abre a linha
de comando voc j comea na pasta Home.
Nota: 'pwd' significa 'print working directory'.
Listando arquivos e pastas

Ento o que tem nele? Seria legal descobrir. Vamos ver:
$ ls
Applications
Desktop
Downloads
Music
...
Windows:
> dir
Directory of C:\Users\olasitarska
05/08/2014 07:28 PM <DIR> Applications
05/08/2014 07:28 PM <DIR> Desktop
05/08/2014 07:28 PM <DIR> Downloads
05/08/2014 07:28 PM <DIR> Music
...
13
Entrar em outra pasta

Talvez a gente queira entrar na nossa pasta Desktop?
$ cd Desktop
Windows:
> cd Desktop
Veja se realmente entramos na pasta:

$ pwd
/Users/olasitarska/Desktop
Windows:
> cd
C:\Users\olasitarska\Desktop
Aqui est!
Dica de profissional: se voc digitar cd D e apertar a tecla tab no seu teclado, a
linha de comando ir preencher automaticamente o resto do nome para que voc
possa navegar rapidamente. Se houver mais de uma pasta que comece com "D",
aperte a tecla tab duas vezes para obter uma lista de opes.
Criando uma pasta

Que tal criar um diretrio Django Girls na sua rea de trabalho? Voc pode fazer assim:
$ mkdir djangogirls
Windows:
> mkdir djangogirls
14
Este comando vai criar uma pasta com o nome djangogirls no nosso desktop. Voc pode
verificar se ele est l, s de olhar na sua rea de trabalho ou executando um comando
ls / dir ! Experimente :)
Dica de profissional: Se voc no quiser digitar o mesmo comando vrias vezes, tente
pressionar seta para cima e seta para baixo no teclado para percorrer comandos
usados recentemente.
Exercite-se!
Um pequeno desafio para voc: na sua mais nova pasta criada djangogirls crie uma outra
pasta chamada teste . Use os comandos cd e mkdir .
Soluo:
$ cd djangogirls
$ mkdir teste
$ ls
teste
Windows:
> cd djangogirls
> mkdir teste
> dir
05/08/2014 07:28 PM <DIR> teste
Parabns! :)
Limpando
No queremos deixar uma baguna, ento vamos remover tudo o que fizemos at agora.
Primeiro precisamos voltar para a pasta Desktop:
$ cd ..
Windows:
15
> cd ..
Fazendo cd para .. ns mudaremos do diretrio atual para o diretrio pai (que significa
o diretrio que contm o diretrio atual).
Veja onde voc est:
$ pwd
/Users/olasitarska/Desktop
Windows:
> cd
C:\Users\olasitarska\Desktop
Agora hora de excluir o diretrio djangogirls .

Ateno: A excluso de arquivos usando del , rmdir ou rm irrecupervel,
significando Arquivos excludos vo embora para sempre! Ento, tenha cuidado com
este comando.
$ rm -r djangogirls
Windows:
> rmdir /S djangogirls
djangogirls, Tem certeza <S/N>? S
Pronto! Para ter certeza que a pasta foi excluda, vamos checar:
$ ls
Windows:
> dir
Saindo
Por enquanto isso! Agora voc fechar a linha de comando com segurana. Vamos fazer
do jeito hacker, certo?:)
16
$ exit
Windows:
> exit
Legal, n?:)
Sumrio
Aqui vai uma lista de alguns comandos teis:
Comando
(Windows)
Comando (Mac
OS / Linux)
Descrio
Exemplo
exit
exit
Fecha a janela
exit
cd
cd
Muda a pasta
cd test
dir
ls
Lista as pastas e
os arquivos
dir
copy
cp
Copia um arquivo
copy c:\test\test.txt
c:\windows\test.txt
move
mv
Move um arquivo
move c:\test\test.txt
c:\windows\test.txt
mkdir
mkdir
Cria uma pasta
mkdir testdirectory
del
rm
Deleta uma pasta

e/ou arquivo
del c:\test\test.txt
Estes so apenas alguns dos poucos comandos que voc pode executar em sua linha de
comando, mas voc no vai usar mais nada do que isto hoje.
Se voc estiver curioso, ss64.com contm uma referncia completa de comandos para
todos os sistemas operacionais.
Pronto?
Vamos mergulhar no Python!
17
Vamos comear com Python

Finalmente chegamos aqui!
Mas primeiro, vamos falar um pouco sobre o que o Python . Python uma linguagem de
programao muito popular que pode ser usada para criar sites, jogos, softwares cientficos,
grficos e muito, muito mais.
O Python originrio da dcada de 1980 e seu principal objetivo ser legvel por seres
humanos (no apenas mquinas!), por isso ele parece muito mais simples do que outras
linguagens de programao. Isso faz ele mais fcil de aprender, mas no se engane,
Python tambm muito poderoso!
Instalao do Python
Este subcaptulo baseado em um tutorial criado por Geek Girls Carrots
(http://django.carrots.pl/)
Django escrito em Python. N precisamos dele para fazer qualquer coisa em Django.
Vamos comear com sua instalao! Ns queremos que voc instale o Python 3.4, ento se
voc tem qualquer verso anterior, voc vai precisar atualiz-la.
Windows
Voc pode baixar o Python para Windows no website
https://www.python.org/downloads/release/python-343/. Depois de fazer o download do
arquivo *.msi, voc precisa execut-lo (dando um duplo-clique nele) e seguir as instrues.
importante lembrar o caminho (a pasta) onde voc instalou o Python. Ela ser til depois!
Cuidado com uma coisa: na segunda tela do assistente de instalao, marcado
"Customize", certifique-se voc rolar para baixo e escolha a opo "Adicionar python.exe
para o caminho", como em
Instalao do Python
18
Linux
muito provvel que voc j tenha o Python instalado e configurado. Para ter certeza se
ele est instalado (e qual a sua verso), abra um terminal e digite o seguinte comando:
$ python3 --version
Python 3.4.2
Se voc no tem o Python instalado ou quer uma verso diferente, voc pode instal-lo da
seguinte maneira:
Ubuntu
Digite o seguinte comando no terminal:
sudo apt-get install python3.4
Fedora
Use o seguinte comando no terminal:
Instalao do Python
19
sudo yum install python3.4
OS X
Voc precisa acessar o site https://www.python.org/downloads/release/python-342/ e baixar
o instalador do Python:
download do instalador Mac OS X 64-bit/32-bit DMG,
D um duplo-clique para abri-lo,
D um duplo-clique no Python.mpkg para executar o instalador.
Verifique se a instalao foi bem sucedida abrindo o Terminal e digitando o comando
python3 :
$ python3 --version
Python 3.4.2
Se voc tiver qualquer dvida ou se alguma coisa deu errado e voc no sabe o que fazer por favor pergunte ao seu instrutor! s vezes, as coisas no esto indo bem e melhor
pedir ajuda a algum com mais experincia.
Instalao do Python
20
Editor de Cdigo
Voc est prestes a escrever sua primeira linha de cdigo, ento hora de baixar um editor
de cdigo!
Existem muitos editores diferentes e em grande parte se resume a preferncia pessoal. A
maioria dos programadores Python usa as complexas, mas extremamente poderosas IDEs
(Integrated Development Environments, ou em portugus, Ambiente de desenvolvimento
Integrado), tais como PyCharm. Para um iniciante, entretanto, estas IDE's so menos
convenientes; nossas recomendaes so bem mais simples, porm, igualmente
poderosas.
Nossas sugestes esto abaixo, mas sinta-se livre para perguntar ao seu coach quais so
as suas preferncias - assim vai ser mais fcil obter a ajuda deles.
Gedit
Gedit um editor open-source, gratuito, disponvel para todos os sistemas operacionais.
Baixe aqui
Sublime Text 2
Sublime Text 2 um editor muito popular com um perodo de avaliao gratuita. fcil de
instalar e usar, e est disponvel para todos os sistemas operacionais.
Baixe aqui
Atom
Atom um novo editor de cdigo criado pelo GitHub. Ele gratuito, open-source, fcil de
instalar e fcil de usar. Est disponvel para Windows, OSX e Linux.
Baixe aqui
Por que estamos instalando um editor de

cdigo?
Editor de Cdigo
21
Voc deve estar se perguntando porque estamos instalando esse software editor de cdigo
especial ao invs de usar algo como Word ou Bloco de Notas.
Primeiro que cdigo precisa ser texto sem formatao , e o problema com programas
como Word e Textedit que eles na verdade no produzem texto sem formatao, eles
fazem "rich text" (com fontes e formatao), usando formatos personalizados como RTF.
A segunda razo que editores de cdigo so especializados em editar cdigo, ento eles
podem oferecer recursos teis, como realce de cdigo com cores de acordo com o seu
significado, ou automaticamente fechar citaes para voc.
Ns vamos ver isso em ao depois. Em breve voc ter seu editor de cdigo como uma
das suas ferramentas favoritas. :)
Editor de Cdigo
22
Introduo ao Python
Parte deste captulo baseado nos Tutoriais de Geek Girls Carrots
(http://django.carrots.pl/).
Vamos escrever um pouco de cdigo!
Interpretador Python
Para comear a brincar com Python ns precisamos abrir uma linha de comando no seu
computador. Voc j sabe dever como fazer isso -- voc aprendeu isso no captulo
Introduo Linha de Comando.</p> Assim que estiver pronto, siga as instrues abaixo.
Ns queremos abrir o Python num terminal, ento digite python3 e tecle Enter.
$ python3
Python 3.4.2 (...)
Type "copyright", "credits" or "license" for more information.
>>>
Seu primeiro comando Python!

Depois de executar o comando Python, o prompt mudou para >>> . Para ns, isso significa
que por enquanto s utilizaremos comandos na linguagem Python. Voc no precisa digitar
>>> - O Python far isso por voc.
Se voc deseja sair do console do Python, apenas digite exit() ou use o atalho Ctrl + Z
no Windows e Ctrl + D no Mac/Linux. Ento voc no vai ver mais o >>> .
Mas agora no queremos sair da linha de comando do Python. Queremos aprender mais
sobre ele. Vamos, ento, fazer algo muito simples. Por exemplo, tente digitar alguma
operao matemtica, como 2 + 3 e aperte Enter.
>>> 2 + 3
5
Incrvel! V como a resposta simplesmente aparece? O Python conhece matemtica! Voc

pode tentar outros comandos como: - 4 * 5 - 5 - 1 - 40 / 2
Divirta-se com isso por um tempo e depois volte aqui :).
Introduo ao Python
23
Como voc pode ver, o Python uma tima calculadora. Se voc est se perguntando o
que mais voc pode fazer...
Strings
Que tal o seu nome? Digite seu primeiro nome entre aspas, desse jeito:
>>> "Ola"
'Ola'
Voc acabou de criar sua primeira string! String um sequncia de caracteres que podem
ser processada pelo computador. A string sempre precisa iniciar e terminar com o mesmo
caractere. Este pode ser aspas duplas( ' ) ou simples( " ) - elas dizem ao Python que o
que est dentro delas uma string.
Strings podem ser juntadas. Tente isto:
>>> "Oi " + "Ola"
'Oi Ola'
Voc tambm pode multiplicar strings por um nmero:

>>> "Ola" * 3
'OlaOlaOla'
Se voc precisa colocar uma apstrofe dentro de sua string, existem duas maneiras de
fazer.
Usando aspas duplas:
>>> "Correndo' ladeira abaixo"
"Correndo' ladeira abaixo"
ou escapando apstrofo com uma barra invertida (``):

>>> "Correndo\' ladeira abaixo"
"Correndo' ladeira abaixo"
Legal, hein? Para ver seu nome em letras maisculas, basta digitar:
Introduo ao Python
24
>>> "Ola".upper()
'OLA'
Voc acabou de usar a funo upper na sua string! Uma funo (como upper() ) um
conjunto de instrues que o Python realiza em um determinado objeto ( "Ola" ), sempre
que voc chamar por ele.
Se voc quer saber o nmero de letras do seu nome, existe uma funo para isso tambm!
>>> len("Ola")
3
Se perguntando porque algumas vezes voc chama funes com um . no fim de uma
string (como "Ola".upper() ) e algumas vezes voc primeiro chama a funo colocando a
string nos parnteses? Bem, em alguns casos, funes pertencem a objetos, como
upper() , que s pode ser utilizada em strings. Nesse caso, ns chamamos a funo de
mtodo. Outras vezes, funes no pertencem a nada especfico e podem ser usadas em
diferentes tipos de objetos, assim como len() . por isso que ns estamos fornecendo
"Ola" como um parmetro para a funo len .
Sumrio
OK, chega de strings. At agora voc aprendeu sobre:
o prompt - digitar comandos (cdigos) no interpretador Python resulta em respostas
em Python
nmeros e strings - no Python, nmeros so usados para matemtica e strings para
objetos de texto
operadores - como + e *, combinam valores para produzir um novo valor
funes - como upper() e len(), executam aes nos objetos.
Isso o bsico sobre todas as linguagens de programao que voc aprende. Pronto para
algo mais difcil? Apostamos que sim!
Erros
Vamos tentar algo novo. Podemos obter o tamanho de um nmero da mesma forma que
podemos encontrar o tamanho do nosso nome? Digite len(304023) e pressione Enter:
Introduo ao Python
25
>>> len(304023)
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
TypeError: object of type 'int' has no len()
Temos nosso primeiro erro! Ele diz que objetos do tipo "int" (inteiros, apenas nmeros) no
tm nenhum comprimento. Ento o que podemos fazer agora? Talvez possamos escrever
nosso nmero como uma string? Strings tm um comprimento, certo?
>>> len(str(304023))
6
Funcionou! Usamos a funo str dentro da funo len . str () converte tudo para
strings.
A funo str converte as coisas em strings
A funo int converte as coisas em nmeros inteiros
Importante: podemos converter nmeros em texto, mas ns no podemos,
necessariamente, converter texto em nmeros - o que int('hello') quer dizer?
Variveis
Um conceito importante na programao o conceito de variveis. Uma varivel no
nada mais do que um nome para alguma coisa, de tal forma que voc possa us-la mais
tarde. Os programadores usam essas variveis para guardar dados, para fazer seus
cdigos mais legveis e para no ter que se lembrar sempre o que algumas coisas
significam.
Digamos que queremos criar uma nova varivel chamada nome :
>>> name = "Ola"
V? fcil! s fazer: nome igual a Ola.

Como voc percebeu, seu programa no retornou nada como fez anteriormente. Ento
como sabemos que a varivel realmente existe? Simplesmente digite nome e tecle Enter:
>>> name
'Ola'
Yippee! Sua primeira varivel:)! Voc sempre pode mudar o seu valor:
Introduo ao Python
26
>>> name = "Sonja"

>>> name
'Sonja'
Voc pode us-la tambm em funes:

>>> len(name)
5
Incrvel no? Claro, variveis podem ser qualquer coisa, ento podem ser nmeros
tambm! Tente isso:
>>> a = 4
>>> b = 6
>>> a * b
24
Mas, e se digitarmos o nome errado? Voc consegue adivinhar o que aconteceria? Vamos
tentar!
>>> city = "Tokyo"
>>> ctiy
NameError: name 'ctiy' is not defined
Um erro! Como voc pode ver, Python tem diferentes tipos de erros e este chamado
NameError. Python dar este erro se voc tentar usar uma varivel que no foi definida
ainda. Se voc encontrar esse erro depois, veja se no seu cdigo se voc no digitou o
nome de uma varivel errado.
Brinque com isso por um tempo e veja o que voc consegue fazer!
A funo print
Tente isso:
>>> name = 'Maria'
>>> name
'Maria'
>>> print(name)
Maria
Introduo ao Python
27
Quando voc apenas digita name , o interpretador Python responde com a representao
como string da varivel 'name', que so as letras M-a-r-i-a, entre aspas simples. Quando
voc diz print(name) , Python vai "imprimir" o contedo da varivel na tela, sem as aspas,
o que mais puro.
Como veremos mais tarde, print() tambm til quando queremos imprimir algo dentro
de funes, ou quando queremos imprimir algo em vrias linhas.
Listas
Alm de strings e inteiros, o Python tem todos os tipos diferentes de objetos. Vamos
apresentar um chamado lista. Listas so exatamente o que voc acha que elas so: elas
so objetos que so listas de outros objetos :)
V em frente e crie uma lista:
>>> []
[]
Sim, esta uma lista vazia. No muito, no ? Vamos criar uma lista dos nmeros da
loteria. Como no queremos ficar repetindo o cdigo todo o tempo vamos criar uma varivel
para ela:
>>> lottery = [3, 42, 12, 19, 30, 59]
Tudo certo, ns temos uma lista! O que podemos fazer com isso? Vamos ver quantos
nmeros de loteria existem nesta lista. Voc tem ideia de qual funo deve usar para isso?
Voc j sabe disso!
>>> len(lottery)
6
Sim! len() pode te dar o nmero de objetos que fazem parte de uma lista. Uma mo na
roda, no? Vamos organizar isso agora:
>>> lottery.sort()
Isso no retorna nada, apenas troca a ordem em que os nmeros aparecem na lista. Vamos
imprimir isso outra vez e ver o que acontece:
Introduo ao Python
28
>>> print(lottery)
[3, 12, 19, 30, 42, 59]
Como voc pode ver, os nmeros na nossa lista esto ordenados do menor para o maior.
Parabns!
Talvez a gente queira inverter essa ordem? Vamos fazer isso!
>>> lottery.reverse()
>>> print(lottery)
[59, 42, 30, 19, 12, 3]
Moleza n? Se voc quiser adicionar alguma coisa sua lista, voc pode fazer isto
digitando o seguinte comando:
>>> lottery.append(199)
>>> print(lottery)
[59, 42, 30, 19, 12, 3, 199]
Se voc quiser mostrar apenas o primeiro nmero voc pode usar indices. Um ndice um
nmero que diz onde um item da lista est. Os computadores gostam de iniciar a contagem
por 0, ento o primeiro objeto tem ndice 0, o prximo tem ndice 1 e por a vai. Tente isso:
>>> print(lottery[0])
59
>>> print(lottery[1])
42
Como voc pode ver, voc pode acessar diferentes objetos na sua lista usando o nome da
lista e o ndice do objeto dentro dos colchetes.
Por diverso extra, tente alguns outros ndices: 6, 7, 1000, -1, -6 ou -1000. Veja se voc
consegue prever o resultado antes de tentar o comando. Os resultados fazem sentido?
Voc pode encontrar uma lista de todos os mtodos disponveis neste captulo na
documentao do Python: https://docs.python.org/3/tutorial/datastructures.html
Dicionrios
Um dicionrio semelhante a uma lista, mas voc pode acessar valores atravs de uma
chave ao invs de um ndice. Uma chave pode ser qualquer string ou nmero. A sintaxe
para definir um dicionrio vazio :
Introduo ao Python
29
>>> {}
{}
Isso mostra que voc acabou de criar um dicionrio vazio. Hurra!

Agora, tente escrever o seguinte comando (tente substituir com as suas prprias
informaes tambm):
>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]}
Com esse comando, voc acabou de criar uma varivel chamada participant com trs
pares de chave-valor:
A chave nome aponta para o valor 'Ola' (um objeto string ),
pais aponta para 'Polonia' (outra string ),
e numeros_favoritos apontam para [7, 42, 92] (uma list com trs nmeros nela).
Voc pode checar o contedo de chaves individuais com a sintaxe:
>>> print(participant['name'])
Ola
Veja, similar a uma lista. Mas voc no precisa lembrar o ndice - apenas o nome.
O que acontece se pedirmos ao Python o valor de uma chave que no existe? Voc
consegue adivinhar? Vamos tentar e descobrir!
>>> participant['age']
KeyError: 'age'
Olha, outro erro! Esse um KeyError. Python bastante prestativo e te diz que a chave
'age' no existe no nesse dicionrio.
Quando usar um dicionario ou uma lista? Bem, um bom ponto para refletir. Pense em uma
soluo antes de olhar a resposta na prxima linha.
Voc precisa de uma sequncia ordenada de itens? Use uma list.
Voc precisa associar valores com chaves, assim voc pode procur-los eficientemente
(pela chave) mais tarde? Use um dictionary.
Introduo ao Python
30
Dicionrios, como listas, so mutveis, ou seja, que podem ser mudados depois que so
criados. Voc pode adicionar novos pares de chave/valor para o dicionrio aps sua
criao, como:
>>> participant['favorite_language'] = 'Python'
Como as lists, usar o mtodo len() em dicionrios retorna o nmero de pares chave-valor
no dicionario. V em frente e digite o comando:
>>> len(participant)
4
Espero que agora faa sentido at agora. :) Pronta para mais diverso com dicionrios?
Pule na prxima linha para coisas incrveis.
Voc pode usar o comando del para deletar um item no dicionario. Digamos, se voc quer
excluir a entrada correspondente a chave 'favorite_numbers' , basta digitar o seguinte
comando:
>>> del participant['favorite_numbers']
>>> participant
{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'}
Como voc pode ver no retorno, o par chave-valor correspondente chave

'favorite_numbers' foi excludo.
Alm disso voc pode mudar o valor associado com uma chave j criada no dicionrio.
Digite:
>>> participant['country'] = 'Germany'
>>> participant
{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'}
Como voc pode ver, o valor da chave 'country' foi alterado de 'Poland' para
'Germany' . :) Emocionante? Hurra! Voc acabou de aprender outra coisa incrvel.
Sumrio
Incrvel! Agora voc sabe muito sobre programao. Nesta ltima parte voc aprendeu
sobre:
erros - agora voc sabe como ler e entender erros que aparecem se o Python no
Introduo ao Python
31
entender um comando que voc deu

variveis - nomes para objetos que permitem voc programar facilmente e deixar seu
cdigo mais legvel
listas - listas de objetos armazenados em uma ordem especfica
dicionrios - objetos armazenados como pares chave-valor
Empolgado(a) para o prximo passo? :)
Compare coisas
Grande parte da programao consiste em comparar coisas. O que mais fcil de
comparar? Nmeros, claro. Vamos ver como isso funciona:
>>> 5 > 2
True
>>> 3 < 1
False
>>> 5 > 2 * 2
True
>>> 1 == 1
True
>>> 5 != 2
True
Demos ao Python alguns nmeros para comparar. Como voc pode ver, Python pode
comparar no s nmeros mas tambm resultados de mtodos. Legal, hein?
Voc est se perguntando por que colocamos dois sinais de igual == lado a lado para
comparar se os nmeros so iguais? Ns usamos um nico = para atribuir valores a
variveis. Voc sempre, sempre precisa colocar dois == se quiser verificar se as coisas
so iguais. Tambm possvel afirmar que as coisas so desiguais entre si. Para isso,
usamos o smbolo ! = , conforme mostrado no exemplo acima.
D ao Python mais duas tarefas:
>>> 6 >= 12 / 2
True
>>> 3 <= 2
False
> e < so fceis, mas o que >= e <= significam? Leia eles da seguinte forma:
x > y significa: x maior que y

x < y significa: x menor que y
Introduo ao Python
32
x < = y significa: x menor ou igual a y

x >= y significa: x maior ou igual a y
Fantstico! Quer mais? Tente isto:
>>> 6 > 2 and 2 < 3
True
>>> 3 > 2 and 2 < 1
False
>>> 3 > 2 or 2 < 1
True
Voc pode dar ao Python quantos nmeros para comparar quanto voc quiser, e ele vai te
dar uma resposta! Espertinho, certo?
and - se voc usar o operador and , ambas as comparaes tero que ser verdadeiras
para que todo o comando seja verdadeiro
or - se voc usar o operador or , apenas uma das comparaes precisa ser
verdadeira para que o comando todo seja verdadeiro
J ouviu a expresso "comparar mas com laranjas"? Vamos tentar o equivalente em
Python:
>>> 1 > 'django'
TypeError: unorderable types: int() > str()
Aqui vemos que assim como na expresso, Python no capaz de comparar um nmero
( int ) e uma string (`str</0)>. Em vez disso, ele mostrou um TypeError e nos disse que os
dois tipos no podem ser comparados juntos.</p>
Booleano
Acidentalmente, voc aprendeu sobre um novo tipo de objeto em Python. chamado de
booleano -- e provavelmente o tipo mais fcil que existe.
Existem apenas dois objetos booleanos: - True (verdadeiro) - False (falso)
Mas para o Python entender isso, voc precisa sempre escrever True (primeira letra
maiscula, com o resto das letras em minsculo). true, TRUE, tRUE no vai funcionar -s True correto. (O mesmo se aplica ao False, claro.)
Booleanos podem ser variveis tambm! Veja:
Introduo ao Python
33
>>> a = True
>>> a
True
Voc tambm pode fazer desse jeito:

>>> a = 2 > 5
>>> a
False
Pratique e divirta-se com os valores booleanos, tentando executar os seguintes comandos:

True and True
False and True
True or 1 == 1
1 != 2
Parabns! Booleanos so um dos recursos mais interessantes na programao, e voc

acabou de aprender como us-los!
Salv-lo!
At agora ns escrevemos todo nosso cdigo em um interpretador python, que nos limita a
uma linha de cdigo em um momento. Programas normais so salvos em arquivos e
executados pelo nosso interpretador de linguagem de programao ou compilador. At
agora j corremos nossos programas de uma linha de cada vez no interpretador Python.
Ns vamos precisar de mais de uma linha de cdigo para as prximas tarefas, ento
precisaremos rapidamente:
Sada do interpretador Python
Abra seu editor de cdigo de sua escolha
Salvar algum cdigo em um novo arquivo de python
Execut-lo!
Para sair do interpretador Python que estamos usando, simplesmente digite o ~ exit() ~
funo:
>>> exit()
$
Isso vai coloc-lo no prompt de comando.
Introduo ao Python
34
Anteriormente, ns escolhemos um editor de cdigo da seo do editor de cdigo. Ns

precisamos abrir o editor agora e escrever algum cdigo em um novo arquivo:</p>
print('Hello, Django girls!')
Nota Voc deve observar que uma das coisas mais legais sobre editores de cdigo:
cores! No console do Python, tudo era da mesma cor, mas agora voc deve ver que a
funo de Imprimir uma cor diferente da sequncia de caracteres no seu interior.
Isso chamado de "realce de sintaxe", e uma ajuda muito til quando est
programando. Perceba a cor das coisas e voc vai obter uma dica para quando voc
esquecer de fechar uma seqncia de caracteres, ou fazer um erro de digitao em
um nome de palavra-chave (como def em uma funo, que veremos abaixo). Esta
uma das razes pelas quais que ns usamos um editor de cdigo :)
Obviamente, voc um desenvolvedor python bastante experiente agora, ento sinta-se
livre para escrever um cdigo que voc aprendeu hoje.
Agora temos de salvar o arquivo e d um nome descritivo. Vamos chamar o arquivo
python_intro.py e salve-o em seu desktop. Podemos nomear o arquivo tudo o que
quisermos, o importante aqui ter certeza que o arquivo termina no py, isto diz nosso
computador, que um arquivo executvel de python e Python pode execut-lo.
Com o arquivo salvo, hora de execut-lo! Usando as habilidades que voc aprendeu na
seo de linha de comando, use o terminal altere os diretrios para o desktop.
Em um Mac, o comando ser parecido com isto:
cd /Users/<your_name>/Desktop
No Linux, ser assim (a palavra "Desktop" pode ser traduzido para seu idioma):
cd /home/<your_name>/Desktop
E no windows, vai ser assim:

cd C:\Users\<your_name>\Desktop
Se voc ficar preso, s pedir ajuda.

e, em seguida, usar o Python para executar o cdigo no arquivo assim:
Introduo ao Python
35
$ python3 python_intro.py
Hello, Django girls!
Tudo bem! Voc acabou de seu primeiro programa em python que foi salvo em um arquivo.
Me sinto timo?
Voc pode agora passar para uma ferramenta essencial na programao:
if...elif...else
Muitas coisas no cdigo s podem ser executadas se determinadas condies forem
atendidas. por isso que o Python tem alguma coisa chamada declarao if.
Substitua o cdigo no arquivo python_intro.py para isto:
if 3 > 2:
Se salvou este e ele foi executado, ns veramos um erro como este:

File "python_intro.py", line 2
^
SyntaxError: unexpected EOF while parsing
Python espera que fornecemos mais instrues que sero supostamente executadas caso
a condio 3 > 2 venha a ser verdadeira (ou True nesse caso). Vamos tentar fazer o
Python imprimir "It works!". Altere o seu cdigo no seu arquivo python_intro.py para isto:
if 3 > 2:
print('It works!')
Observe como podemos ter recuado a prxima linha de cdigo por 4 espaos? Precisamos
fazer isso para que Python sabe que cdigo a ser executado se o cdigo resulta em true.
Voc pode fazer um espao, mas quase todos os programadores Python fazem com 4 para
tornar as coisas um olhar puro. Um nico tab tambm vai contar como 4 espaos.
Salv-lo e execute novamente:
It works!
Introduo ao Python
36
E se no?
Nos exemplos anteriores, o cdigo foi executado somente quando as condies eram
verdade. Mas o Python tambm tem instrues elif e else :
if 5 > 2:
print('5 is indeed greater than 2')
else:
print('5 is not greater than 2')
Quando for executado ir imprimir:

5 e maior que 2
Se 2 for um nmero maior do que 5, ento o segundo comando ser executado. Fcil, n?
Vamos ver como funciona o elif :
name = 'Sonja'
if name == 'Ola':
print('Hey Ola!')
elif name == 'Sonja':
print('Hey Sonja!')
else:
print('Hey anonymous!')
e executado:
Hey Sonja!
Viu o que aconteceu?
Sumrio
Nos ltimos trs exerccios voc aprendeu:
comparar as coisas - em Python, voc pode comparar as coisas usando os
operadores > , >= , == , <= , < e o and , or
Booleano - um tipo de objeto que s tem um dos dois valores: True ou False
Salvando arquivos - armazenamento de cdigo em arquivos assim voc pode
executar programas maiores.
if... elif... else-instrues que permitem que voc execute o cdigo somente se
Introduo ao Python
37
determinadas condies forem atendidas.

hora da ltima parte deste captulo!
Suas prprias funes!

Se lembra de funes como len() que voc pode executar no Python? Bem, boas
notcias, agora voc vai aprender a escrever suas prprias funes!
Uma funo um sequncia de instrues que o Python deve executar. Cada funo em
Python comea com a palavra-chave def , seguido de um nome para a funo e
opcionalmente uma lista de parmetros. Vamos comear com uma funo simples.
Substitua o cdigo no python_intro.py com o seguinte:
def hi():
print('Hi there!')
print('How are you?')
hi()
Ok, nossa primeira funo est pronta!

Voc pode se perguntar por que escrevemos o nome da funo na parte inferior do arquivo.
Isto porque Python l o arquivo e executa-lo de cima para baixo. Ento, para usar a nossa
funo, temos re-escrev-lo na parte inferior.
Vamos executa-lo agora e ver o que acontece:
Hi there!
How are you?
Isso foi fcil! Vamos construir nossa primeira funo com parmetros. Usaremos o exemplo
anterior - uma funo que diz 'hi' para quem o executa - com um name:
def hi(name):
Como voc pode ver, agora demos um parmetro chamado name para nossa funo:
Introduo ao Python
38
def hi(name):
if name == 'Ola':
print('Hi Ola!')
elif name == 'Sonja':
print('Hi Sonja!')
else:
print('Hi anonymous!')
hi()
Como voc pode ver, ns precisamos colocar dois espaos antes da funo print , porque
if precisa saber o que deve acontecer quando a condio for atendida. Vamos ver como
isso funciona agora:

File "python_intro.py", line 10, in <module>
hi()
TypeError: hi() missing 1 required positional argument: 'name'
Oops, um erro. Felizmente, Python nos fornece uma mensagem de erro bastante til. Ela
diz que a funo hi() (aquela que declaramos) tem um argumento obrigatrio (chamado
name ) e que ns esquecemos de pass-lo ao chamar a funo. Vamos corrigi-lo na parte
inferior do arquivo:
hi("Ola")
e execute novamente:
Hi Ola!
E se mudarmos o nome?
hi("Sonja")
e execut-lo:
Hi Sonja!
Introduo ao Python
39
Agora, o que acha que vai acontecer se voc escrever outro nome l? (No Ola ou Sonja)
Experiment-lo e ver se voc est certo. Ele deve imprimir isto:
Hi anonymous!
Isto incrvel, no? Dessa maneira voc no precisa se repetir (DRY - don't repeat yourself)
cada vez que for mudar o nome da pessoa que a funo pretende cumprimentar. E
exatamente por isso que precisamos de funes - voc nunca quer repetir seu cdigo!
Vamos fazer algo mais inteligente..--existem mais que dois nomes, e escrever uma
condio para cada um seria difcil, certo?
def hi(name):
print('Hi ' + name + '!')
hi("Rachel")
Vamos chamar o cdigo agora:

Hi Rachel!
Parabns! Voc acabou de aprender a criar funes :)!
Laos
J a ltima parte. Foi rpido, no? :)
Como mencionamos, os programadores so preguiosos, no gostam de repetir as
mesmas coisas. Programao fala sobre como automatizar as coisas, ento no queremos
cumprimentar cada pessoa pelo seu nome manualmente, certo? a onde os laos vem a
calhar.
Ainda se lembra das listas? Vamos fazer uma lista de garotas:
girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You']
Queremos cumprimentar todas elas pelos seus nomes. Temos a funo hi para fazer
isso, ento vamos us-la em um loop:
for name in girls:
Introduo ao Python
40
O ~ for ~ declarao se comporta da mesma forma para o ~ if ~ declarao, cdigo abaixo

esses dois precisam ser recuados quatro espaos.
Aqui est o cdigo completo que ser salvo no arquivo:
def hi(name):
print('Hi ' + name + '!')
girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You']
for name in girls:
hi(name)
print('Next girl')
e quando execut-lo:
Hi Rachel!
Next girl
Hi Monica!
Next girl
Hi Phoebe!
Next girl
Hi Ola!
Next girl
Hi You!
Next girl
Como voc pode ver, tudo o que voc vai colocar dentro de uma instruo for com
espao ser repetido para cada elemento da lista girls .
Voc tambm pode usar o for em nmeros usando a funo range :
for i in range(1, 6):
print(i)
Que iria imprimir:

1
2
3
4
5
range uma funo que cria uma lista de nmeros que se seguem um aps o outro
(esses nmeros so dados por voc como parmetros).
Introduo ao Python
41
Note que o segundo desses dois nmeros no est includo na lista que o Python mostrou
(em range(1, 6) , conta de 1 a 5, mas o 6 no includo).
Sumrio
isso. Voc totalmente demais! No to fcil, ento voc deve se sentir orgulhoso de
si mesmo. Estamos definitivamente orgulhosos de voc por ter chegado at aqui!
Talvez voc queira brevemente fazer algo mais - espreguiar, andar um pouco, descansar
os olhos - antes de ir para o prximo captulo. :)
Introduo ao Python
42
O que Django?
Django um framework gratuito e de cdigo aberto para a criao de aplicaes web,
escrito em Python. um framework web, ou seja, um conjunto de componentes que ajuda
a desenvolver sites de forma mais rpida e mais fcil.
Veja, quando voc est construindo um site, voc sempre precisa um conjunto similar de
componentes: uma maneira de lidar com a autenticao do usurio (inscrever-se, realizar
login, realizar logout), painel de gerenciamento para o seu site, formulrios, upload de
arquivos, etc.
Felizmente para voc, h muito tempo, outras pessoas notaram varias semelhanas nos
problemas enfrentados pelos desenvolvedores web quando esto criando um novo site,
ento eles uniram-se e criaram os frameworks (Django um deles) que lhe do
componentes prontos, que voc pode usar.
Frameworks existem para salv-lo de ter que reinventar a roda e ajudam a aliviar a
sobrecarga quando voc est construindo um novo site.
Por que voc precisa de um framework?

Para entender o que Django na verdade, precisamos olhar mais de perto os servidores. A
primeira coisa que o servidor precisa saber que voc quer para servi-lo uma pgina da
Web.
Imagine uma caixa de correio (porta) que monitorada por cartas recebidas (requisio).
Isso feito por um servidor web. O servidor web l a carta e envia uma resposta com uma
pgina web. Mas, quando voc quer enviar alguma coisa voc precisa ter um contedo. E o
Django aquilo que vai lhe ajudar a criar esse contedo.
O que acontece quando algum solicita um

site do seu servidor?
Quando chega uma requisio para o servidor web ela passada para o Django que tenta
descobrir do que ela se trata. Primeiro ele pega um endereo web e tenta descobrir o que
fazer. Essa parte feita pelo urlresolver do Django. (Note que o endereo de um site se
chama URL - Uniform Resource Locator, em portugus Localizador de Recursos Uniforme,
dessa forma o nome urlresolver, ou resolvedor de urls, faz sentido). Isso no muito
O que Django?
43
inteligente - leva uma lista de padres e tenta corresponder a URL. O Django verifica
padres de cima para baixo e se algo correspondido, passa a solicitao para a funo
associada (que chamada view).
Imagine um carteiro com uma carta. Ela est andando pela rua e verifica cada nmero de
casa com a que est na carta. Se ele corresponder, ela coloca a carta l. assim que
funciona o urlresolver!
Todas as coisas interessantes so feitas dentro da view: podemos dar uma olhada no banco
de dados para procurar algumas informaes. Talvez o usurio queira mudar algo nos
dados? Como uma carta dizendo: "Por favor mude a descrio do meu emprego." - a view
checa se voc tem permisso para fazer isso e ento atualiza a descrio do emprego pra
voc, enviando em seguida uma mensagem: "Feito!". Ento a view gera uma resposta e o
Django pode envi-la para o navegador do cliente.
Claro, a descrio acima muito simplificada, mas voc no precisa saber detalhes
tcnicos ainda. Ter uma ideia geral j suficiente.
Ento em vez de mergulhar em muitos detalhes, ns simplesmente vamos comear criando
algo com o Django e aprenderemos toda as partes importantes ao longo do caminho!
O que Django?
44
Instalao do Django
Parte deste captulo baseado nos tutoriais do Geek Girls Carrots
Parte deste captulo baseado no django-marcador tutorial licenciado sobre Creative
Commons Attribution-ShareAlike 4.0 International License. O tutorial do djangomarcador protegido por direitos autorais por Markus Zapke-Grndemann et al.
Ambiente virtual
Antes de instalarmos o Django, ns iremos instalar uma ferramenta extremamente til que
ir ajudar a manter seu ambiente de desenvolvimento arrumado em seu computador.
possvel ignorar este passo, mas altamente recomendado no comear com a melhor
configurao, evitando problemas adiante!
Ento, vamos criar um ambiente virtual(tambm chamado um virtualenv). Isso isolar sua
configurao Python/Django em uma base por projeto, significa que quaisquer mudanas
que fizer em um website no afetar quaisquer outras aplicaes que estiver
desenvolvendo a parte. Arrumado, certo?
Tudo o que voc precisa fazer encontrar um diretrio no qual voc deseja criar o
virtualenv ; Seu diretrio Home, por exemplo. No Windows pode parecer como
C:\Usurio\Nome (onde Nome o nome do seu login).
Para este tutorial usaremos um novo diretrio djangogirls do seu diretrio home:
mkdir djangogirls
cd djangogirls
Ns vamos fazer um virtualenv chamado meuenv . O formato geral desse comando :

python3 -m venv myvenv
Windows
Para criar um novo virtualenv , voc precisa abrir o console(Ns falamos sobre isso
alguns captulos atrs, lembra-se?) e executar C:\Python34\python -m venv myvenv . Ser
algo parecido com isto:
Instalao do Django
45
C:\Usurio\Nome\djangogirls> C:\Python34\python -m venv myvenv
onde C:\Python34\python o diretrio em que voc previamente instalou Python e myvenv

o nome da sua virtualenv . Voc pode usar qualquer outro nome, mas sempre use
minsculas e sem espaos, acentos ou caracteres especiais. Tambm uma boa ideia
manter o nome curto - voc ir referenciar muito a ele!
Linux e OS X
Criar um virtualenv tanto no Linux como OS X simples como executar python3 -m venv
myvenv . Ser algo parecido com isto:
~/djangogirls$ python3 -m venv myvenv
myvenv o nome da sua virtualenv . Voc pode usar qualquer outro nome, mas
permanea em caixa baixa(minsculas) e no use espaos entre os nomes. Tambm uma

boa ideia manter o nome curto - voc ir referenciar muito a ele!
NOTA:Iniciar o ambiente virtual no Ubuntu 14.04 assim retornar o seguinte erro:
Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--defa
Para contornar esse problema, use o comando virtualenv .

~/djangogirls$ sudo apt-get install python-virtualenv
~/djangogirls$ virtualenv --python=python3.4 myvenv
Trabalhando com o virtualenv

O comando acima criar um diretrio chamado myvenv (ou seja o nome que voc
escolheu) que contm o nosso ambiente virtual(basicamente um conjunto de diretrios e
arquivos). Tudo o que queremos por enquanto inici-lo executando:
C:\Usurio\Nome\djangogirls> myvenv\Scripts\activate
no Windows, ou:
~/djangogirls$ source myvenv/bin/activate
Instalao do Django
46
no OS X e no Linux.
Lembre-se de substituir myvenv com seu nome escolhido do virtualenv !
NOTE: s vezes source(fonte) pode no estar disponvel. Nesses casos, tente fazer
isso em vez disso:
~/djangogirls$ . myvenv/bin/activate
Voc vai saber que tem um virtualenv funcionando quando ver o prompt no seu console
se parecer com:
(myvenv) C:\Usurio\Nome\djangogirls>
ou:
(myvenv) ~/djangogirls$
Perceba que o prefixo (myvenv) aparece!

Ao trabalhar dentro de um ambiente virtual, python ir automaticamente se referir a verso
correta para que possa utilizar python em vez de python3 .
Ok, ns temos todas as dependncias importantes no lugar. Finalmente podemos instalar o
Django!
Instalando o Django
Agora que voc tem a sua virtualenv iniciado, voc pode instalar Django usando pip .
No console, execute pip install django==1.8.5 (Perceba que usamos um duplo sinal de
igual: == ).
(myvenv) ~$ pip install django==1.8.5
Downloading/unpacking django==1.8.5
Installing collected packages: django
Successfully installed django
Cleaning up...
no Windows
Instalao do Django
47
Se voc receber um erro ao chamar o pip na plataforma Windows por favor, verifique
se o caminho do projeto contm espaos, acentos ou caracteres especiais (exemplo,
C:\Users\User Name\djangogirls ). Se sim por favor mova para outro lugar sem
espaos, acentos ou caracteres especiais (sugesto : C:\djangogirls ). Aps a

mudana, por favor tente novamente o comando acima.
No Linux
Se voc receber um erro ao chamar pip no Ubuntu 12.04 por favor execute python -m
pip install -U --force-reinstall pip para corrigir a instalao do pip no virtualenv.
isso! Agora voc est (finalmente) pronto para criar uma aplicao Django!
Instalao do Django
48
Seu primeiro projeto Django!

Parte deste captulo baseado nos tutoriais do Geek Girls Carrots
Parte deste captulo baseado no django-marcador tutorial licenciado sobre Creative
Commons Attribution-ShareAlike 4.0 International License. O tutorial do djangomarcador protegido por direitos autorais por Markus Zapke-Grndemann et al.
Ns vamos criar um blog simples!
O primeiro passo para cri-lo comear um novo projeto de Django. Basicamente, isto
significa que vamos executar alguns scripts fornecidos pelo Django que ir criar o esqueleto
de um projeto Django para ns: um bando de diretrios e arquivos que usaremos mais
tarde.
Os nomes de alguns arquivos e diretrios so muito importantes para o Django. No
renomeie os arquivos que estamos prestes a criar. Mover para um lugar diferente tambm
no uma boa idia. Django precisa manter uma determinada estrutura para ser capaz de
encontrar coisas importantes.
Lembre-se que tudo no virtualenv. Se voc no v um prefixo (myvenv) em seu
console, voc precisa ativar o virtualenv. Ns explicamos como fazer isso no captulo
instalao do Django na parte trabalhando com virtualenv. Voc pode fazer isso
digitando o seguinte comando: myvenv\Scripts\activate no Windows ou
myvenv/bin/activate no Mac OS / Linux.
Nota Verifique que voc incluiu o ponto ( . ) no final do comando, importante porque
diz o script para instalar o Django em seu diretrio atual.
No console, voc deve executar (Lembre-se de que voc no pode digitar ~/djangogirls$
(myvenv) , OK?):
(myvenv) ~/djangogirls$ django-admin startproject mysite .
no Windows:
(myvenv) C:\Users\Name\djangogirls> python myvenv\Scripts\django-admin.py startproject mysite .
Django-admin um script que ir criar os diretrios e arquivos para voc. Agora, voc deve
ter um diretrio estrutura que se parece com isso:

Criando um projeto
49
djangogirls
manage.py
mysite
settings.py
urls.py
wsgi.py
__init__.py
manage.py um script que ajuda com a gesto do site. Com isso seremos capazes de
iniciar um servidor de web no nosso computador sem instalar nada, entre outras coisas.
O arquivo settings.py contm a configurao do seu site.
Lembra quando falamos sobre um carteiro verificando onde entregar uma carta? arquivo
urls.py contm uma lista dos padres usados por urlresolver .
Vamos ignorar os outros arquivos por agora - ns no vamos mud-los. A nica coisa a
lembrar no exclu-los por acidente!
Configurando
Vamos fazer algumas alteraes no mysite/settings.py . Abra o arquivo usando o editor de
cdigo que voc instalou anteriormente.
Seria bom ter a hora correta no nosso site. V para a <wikipedia timezones list e copie seu
fuso horrio. (por exemplo. Europa/Berlim )
Em settings.py, localize a linha que contm TIME_ZONE e modifique para escolher seu
prprio fuso horrio:
TIME_ZONE = 'Europe/Berlin'
Modifique "Europa/Berlim", conforme o caso

Ns tambm precisaramos adicionar um caminho para arquivos estticos (ns vamos
descobrir tudo sobre arquivos estticos e CSS mais tarde no tutorial). Desa at o final do
arquivo e logo abaixo da entrada STATIC_URL , adicione um novo um chamado
STATIC_ROOT :
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Criando um projeto
50
Instalao de um banco de dados

H um monte de software de banco de dados diferente que pode armazenar dados para o
seu site. Ns vamos usar o padro, sqlite3 .
Isto j est configurado nesta parte do seu arquivo mysite/settings.py :
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
Para criar um banco de dados para o nosso blog, vamos fazer o seguinte no console.
Digite: python manage.py migrate (precisamos estar no diretrio que contm o arquivo
manage.py djangogirls ). Se isso der certo, voc deve ver algo como isto:
(myvenv) ~/djangogirls$ python manage.py migrate

Operations to perform:
Apply all migrations: admin, contenttypes, auth, sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying sessions.0001_initial... OK
E est pronto! Hora de iniciar o servidor web e ver se nosso site est funcionando!
Voc precisa estar no diretrio que contm o arquivo manage.py (o diretrio djangogirls ).
No console, ns podemos iniciar o servidor web executando o python manage.py runserver :
(myvenv) ~/djangogirls$ python manage.py runserver
Agora tudo que voc precisa fazer verificar se seu site est sendo executado - abra seu
navegador (Firefox, Chrome, Safari, Internet Explorer ou o que voc usa) e digite o
endereo:
http://127.0.0.1:8000/
O servidor web vai assumir seu prompt de comando at voc par-lo: para digitar mais
comandos ou abrir uma nova janela do terminal (e no se esquea de ativar seu virtualenv
nele tambm), ou parar o servidor de web, alternando de volta para a janela na qual est
Criando um projeto
51
executando e pressionando CTRL + C - botes de controle e C juntos (no Windows, voc

pode ter que pressionar Ctrl + Break).
Parabns! Voc criou seu primeiro site e o executou usando um servidor de web! No
impressionante?
Pronto para o prximo passo? Est na hora de criar algum contedo!
Criando um projeto
52
Modelos do Django
Agora o que ns queremos criar algo que armazene todos os posts no nosso blog. Mas
para fazer isso precisamos aprender um pouco mais sobre coisas chamadas objetos .
Objetos
Existe um conceito na programao chamado Programao Orientada Objetos (POO) . A
ideia que ao invs de escrever tudo como uma chata sequncia de instrues de
programao podemos modelar as coisas e definir como elas interagem umas com as
outras.
Ento o que um objeto? uma coleo de propriedades e aes. Isto pode parecer
estranho, mas vamos lhe dar um exemplo.
Se queremos modelar um gato ns criaremos um objeto Gato que possui algumas
propriedades, por exemplo cor , idade , humor (bom, mau, sonolento ;)), dono (que
um objeto da classe Pessoa ou, caso seja um gato de rua, essa propriedade vazia).
E ento o Gato tem algumas aes: ronronar , arranhar ou comer (no qual vamos dar
ao gato alguma ComidaDeGato , que poderia ser um objeto separado com propriedades,
como sabor ).
Gato
-------cor
idade
humor
dono
ronronar()
arranhar()
comer(comida_de_gato)
ComidaDeGato
-------sabor
Ento, basicamente, a ideia descrever coisas reais no cdigo com

propriedades(chamadas de propriedades do objeto ) e aes (chamadas de mtodos ).
Modelos do Django
53
Como ns iremos modelar as postagens do blog ento? Queremos construir um blog,

certo?
Precisamos responder pergunta: o que uma postagem de blog? Que propriedades deve
ter?
Bem, com certeza nosso blog precisa de alguma postagem com o seu contedo e um ttulo,
certo? Tambm seria bom saber quem a escreveu - ento precisamos de um autor.
Finalmente, queremos saber quando a postagem foi criada e publicada.
Post
-------title
text
author
created_date
published_date
Que tipo de coisa pode ser feita com uma postagem? Seria legal ter algum mtodo que
publique a postagem, no mesmo?
Ento precisamos de um mtodo chamado publicar .
Como j sabemos o que queremos alcanar, podemos comear a modelagem em Django!
Modelo do Django
Sabendo o que um objeto , ns criaremos um modelo no Django para a postagem do blog.
Um modelo no Django um tipo especial de objeto - ele salvo em um banco de dados .
Um banco de dados uma coleo de dados. O banco de dados um local em que voc
vai salvar dados sobre usurios, suas postagens, etc. Usaremos um banco de dados
chamado SQLite para armazenar as nossas informaes. Este o adaptador de banco de
dados padro Django -- ele vai ser o suficiente para ns neste momento.
Voc pode pensar em um modelo de banco de dados como uma planilha com colunas
(campos) e linhas (dados).
Criando uma aplicao

Para manter tudo arrumado vamos criar um aplicativo separado dentro do nosso projeto.
muito bom ter tudo organizado desde o incio. Para criar um aplicativo precisamos executar
o seguinte comando no console (a partir do diretrio djangogirls onde est o arquivo
manage.py ):
Modelos do Django
54
(myvenv) ~/djangogirls$ python manage.py startapp blog
Voc vai notar que um novo diretrio blog criado e que ele agora contm um nmero de
arquivos. Nossos diretrios e arquivos no nosso projeto devem se parecer com este:
djangogirls
mysite
| __init__.py
| settings.py
| urls.py
| wsgi.py
manage.py
blog
migrations
| __init__.py
__init__.py
admin.py
models.py
tests.py
views.py
Depois de criar um aplicativo tambm precisamos dizer ao Django que deve us-lo.
Fazemos isso no arquivo mysite/settings.py . Precisamos encontrar o INSTALLED_APPS e
adicionar uma linha com 'blog', logo acima do ) . assim que o produto final deve ficar
assim:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
)
Criando o modelo Post do nosso blog

No arquivo blog/models.py definimos todos os objetos chamados Modelos - este um
lugar em que vamos definir nossa postagem do blog.
Vamos abrir blog/models.py , remova tudo dele e escreva o cdigo como este:
Modelos do Django
55
from django.db import models

from django.utils import timezone
class Post(models.Model):
author = models.ForeignKey('auth.User')
title = models.CharField(max_length=200)
text = models.TextField()
created_date = models.DateTimeField(
default=timezone.now)
published_date = models.DateTimeField(
blank=True, null=True)
def publish(self):
self.published_date = timezone.now()
self.save()
def __str__(self):
return self.title
Certifique-se de ter usado dois caracteres ( _ ) em cada lado do str . Aqueles

caracteres so usados freqentemente em Python e s vezes os chamamos de
"dunder" (abreviao de "double-underscore" ou "duplo sublinhado").
assustador, no? Mas no se preocupe, vamos explicar o que estas linhas significam!
Todas as linhas comeando com from ou import so linhas que adicionam alguns
pedaos de outros arquivos. Ento ao invs de copiar e colar as mesmas coisas em cada
arquivo, podemos incluir algumas partes com from... import ... .
class Post(models.Model): - esta linha define o nosso modelo ( um objeto ).
class uma palavra-chave especial que indica que estamos definindo um objeto.
Post o nome do nosso modelo, podemos lhe dar um nome diferente (mas preciso
evitar os espaos em branco e caracteres especiais). Sempre comece um nome de

classe com uma letra maiscula.
models.Model significa que o Post um modelo de Django, ento o Django sabe ele
que deve ser salvo no banco de dados.

Agora podemos definir as propriedades que discutimos: titulo , texto , data_criacao ,
data_publicacao e autor . Para isso precisamos definir um tipo de campo ( um texto?
um nmero? Uma data? Uma relao com outro objeto, por exemplo, um usurio?).
models.CharField - assim como voc define um texto com um nmero limitado de
caracteres.
models.TextField - este para textos longos sem um limite. Ser ideal para um
contedo de post de blog, certo?

models.DateTimeField - este uma data e hora.
Modelos do Django
56
models.ForeignKey - este um link para outro modelo.
Ns no vamos explicar cada pedao de cdigo aqui, pois isso levaria muito tempo. Voc
deve olhar a documentao do DJango se voc quiser saber mais sobre campos do Model
e como definir coisas alm destas descritas acima
(https://docs.djangoproject.com/en/1.8/ref/models/fields/#field-types).
Que tal def publish(self): ? exatamente o nosso mtodo de publish que falvamos
antes. def , significa que se trata de um funo/mtodo. publish o nome do mtodo.
Voc pode alterar, se quiser. A regra que usamos letras minsculas e sublinhados em vez
de espaos em branco (ou seja, se voc quer ter um mtodo que calcula o preo mdio,
voc poderia cham-lo calculate_average_price ).
Mtodos muitas vezes return algo. H um exemplo de que, no mtodo __str__ . Nesse
cenrio, quando chamamos __str__() teremos um texto (string), com um ttulo do Post.
Se algo ainda no est claro sobre modelos, sinta-se livre para pedir o seu treinador!
Sabemos que muito complicado, especialmente quando voc aprender o que so objetos
e funes ao mesmo tempo. Mas espero que ele se parece um pouco menos mgica para
voc agora!
Criando tabelas para nossos modelos no banco de dados

O ltimo passo adicionar nosso novo modelo para nosso banco de dados. Primeiro temos
que fazer o Django saber que ns temos algumas mudanas em nosso modelo (s criamos
isso), digite python manage.py makemigrations blog . Ser algo parecido com isto:
(myvenv) ~/djangogirls$ python manage.py makemigrations blog
Migrations for 'blog':
0001_initial.py:
- Create model Post
Django prepara um arquivo de migrao que temos de aplicar agora para nosso banco de
dados, tipo python manage.py migrate blog , a sada deve ser:
(myvenv) ~/djangogirls$ python manage.py migrate blog
Apply all migrations: blog
Running migrations:
Applying blog.0001_initial... OK
Viva! Nosso modelo de Post est agora em nosso banco de dados, seria um prazer v-lo,
certo? Saltar para o prximo captulo para ver o aspecto do seu Post!
Modelos do Django
57
Administrao
Para adicionar, editar e remover postagens que ns criamos usaremos o Django admin.
Vamos abrir o arquivo blog/admin.py e substituir seu contedo por:
from django.contrib import admin
from .models import Post
admin.site.register(Post)
Como voc pode ver, ns importamos (inclumos) o modelo Post definido no captulo
anterior. Para tornar nosso modelo visvel na pgina de administrao, ns precisamos
registr-lo com: admin.site.register(Post) .
OK, hora de olhar para o nosso modelo de Post. Lembre-se de executar python manage.py
runserver no console para executar o servidor web. V para o navegador e digite o
endereo http://127.0.0.1:8000/admin/ Voc ver uma pgina de login assim:
Para fazer login voc precisa criar um superuser - um usurio que possui controle sobre
tudo do site. Volte para o terminal e digite python manage.py createsuperuser , pressione
enter e digite seu nome de usurio (caixa baixa, sem espao), endereo de e-mail e
Administrao
58
password quando eles forem requisitados. No se preocupe que voc no pode ver a senha
que voc est digitando - assim que deve ser. S digit-la e pressione 'Enter' para
continuar. A sada deve parecer com essa (onde Username e Email devem ser os seus):
(myvenv) ~/djangogirls$ python manage.py createsuperuser
Username: admin
Email address: admin@admin.com
Password:
Password (again):
Superuser created successfully.
Volte para a o navegador e faa login com as credenciais de superuser que voc escolheu,
voc deve visualizar o painel de controle do Django admin.
V para as postagens e experimente um pouco com elas. Adicione cinco ou seis postagens.
No se preocupe com o contedo - voc pode copiar e colar algum texto deste tutorial para
o contedo para economizar tempo :).
Certifique-se que pelo menos duas ou trs postagens (mas no todas) tm a data de
publicao definida. Isso ser til depois.
Administrao
59
Se voc quiser saber mais sobre o Django admin, voc deve conferir a documentao do
Django: https://docs.djangoproject.com/en/1.8/ref/contrib/admin/
Este provavelmente um bom momento para tomar um caf (ou chocolate) ou algo para
comer para repora as energias. Voc criou seu primeiro modelo de Django - voc merece
um pouco de descanso!
Administrao
60
Implantao!
Nota O captulo seguinte pode ser s vezes um pouco difcil de passar. Persista e
termine-o; Implantao uma parte importante do processo de desenvolvimento de
website. Este captulo est localizado no meio do tutorial para que seu tutor possa lhe
ajudar com o processo ligeiramente complexo de colocar seu site online. Isto significa
que voc ainda pode terminar o tutorial por conta prpria se voc continuar em outro
momento.
At agora nosso site s estava disponvel no seu computador, agora voc vai aprender
como publicar ele na internet! A implantao o processo de publicao do seu aplicativo
na Internet de tal forma que as pessoas possam, finalmente, ver seu aplicativo :).
Como voc aprendeu, um website precisa estar localizado num servidor. Existem muitos
provedores, mas iremos utilizar o que tem um processo de deploy relativamente simples:
PythonAnywhere. PythonAnywhere gratuito para aplicaes pequenas que no possuem
muitos visitantes, ento ser suficiente para voc por enquanto.
O outro servio externo que usaremos GitHub, que um servio de hospedagem de
cdigo. Existem outros, mas quase todos os programadores possuem uma conta no GitHub
atualmente e agora voc tambm!
Usaremos o GitHub como um trampolim para transportar nosso cdigo para o
PythinAnywhere.
Git
Git "sistema de controle de verso" usado por muitos programadores - um software que
controla mudanas nos arquivos ao longo do tempo para que voc possa recuperar verses
especficas depois. Um pouco como "controlar mudanas" no Microsoft Word, mas muito
mais poderoso.
Instalando o Git
Windows
Implantao!
61
Voc pode baixar Git em git-scm.com. Voc pode apertar "next next next" em todos os
passos exceto um; no quinto passo chamado "Adjusting your PATH environment", escolha
"Run Git and associated Unix tools from the Windows command-line" (a opo de baixo).
Alm disso, o padro est timo. Checkout estilo Windows, commit Unix-style linhas de
confirmao est bom.
MacOS
Baixar Git git-scm.com e siga as instrues.
Linux
Se ele j no estiver instalado, Git deve estar disponvel atravs de seu gerenciador de
pacotes, ento tente:
sudo apt-get install git
# or
sudo yum install git
Comeando nosso repositrio no Git

Git controla as alteraes para um determinado conjunto de arquivos no que chamamos de
repositrio de cdigo (ou "repo"). Vamos comear um para nosso projeto. Abra o console e
execute esses comandos, no diretrio djangogirls :
Nota: Verifique o seu diretrio de trabalho atual com um pwd (OSX/Linux) ou o
comando cd (Windows) antes de inicializar o repositrio. Voc deve estar na pasta
djangogirls .
$ git init
Initialized empty Git repository in ~/djangogirls/.git/
$ git config user.name "Your Name"
$ git config user.email you@example.com
Inicializar o repositrio git algo que s precisamos fazer uma vez por projeto (e voc no
ter que re-introduzir o nome de usurio e e-mail nunca mais)
Git ir controlar as alteraes para todos os arquivos e pastas neste diretrio, mas existem
alguns arquivos que queremos ignorar. Fazemos isso atravs da criao de um arquivo
chamado .gitignore no diretrio base. Abra seu editor e crie um novo arquivo com o
seguinte contedo:
Implantao!
62
*.pyc
__pycache__
myvenv
db.sqlite3
.DS_Store
E salve como .gitignore na pasta de nvel superior "djangogirls".

Nota: O ponto no incio do nome do arquivo importante! Se voc est tendo alguma
dificuldade em cri-la (Macs no gostam de criar arquivos que comeam com um ponto
atravs do Finder, por exemplo), use o recurso "Save As" no seu editor que sempre
funciona.
uma boa idia para usar um comando de git status antes de gitt add ou sempre que
voc no tiver certeza de que ser feito, para evitar surpresas (por exemplo, sero
adicionados arquivos errados ou commitados). O comando git status retorna
informaes sobre todos os arquivos controlado/modificado/encenado, status de ramo e
muito mais. O output deve ser semelhante a:
$ git status
On branch master
Initial commit
Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitignore
blog/
manage.py
mysite/
nothing added to commit but untracked files present (use "git add" to track)
E finalmente ns salvamos nossas alteraes, V para o seu console e execute estes

comandos:
$ git add -A .
$ git commit -m "My Django Girls app, first commit"
[...]
13 files changed, 200 insertions(+)
create mode 100644 .gitignore
[...]
create mode 100644 mysite/wsgi.py
Implantao!
63
Empurrando o nosso cdigo para GitHub

V para GitHub.com e cadastre uma nova e gratuita conta de usurio. Em seguida, crie um
novo repositrio, e d o nome "my-first-blog". Deixe o "initialise with a README"
desmarcado, deixe a opo .gitignore em branco (j fizemos isso manualmente) e a licena
como None.
Nota O nome my-first-blog importante --voc poderia escolher outra coisa, mas
vamos us-lo muitas vezes nas instrues abaixo e voc teria que substitu-lo cada
vez. provavelmente mais fcil ficar com o nome my-first-blog .
Na tela seguinte, voc ser mostrada a clone URL do seu repo. Escolha a verso
"HTTPS",copie, e vamos col-lo no terminal em breve:
Implantao!
64
Agora precisamos ligar o repositrio Git no seu computador com o no GitHub.

$ git remote add origin https://github.com/<your-github-username>/my-first-blog.git
$ git push -u origin master
Digite seu GitHub username e senha, e voc deve ver algo como isto:
Username for 'https://github.com': hjwp
Password for 'https://hjwp@github.com':
Counting objects: 6, done.
Writing objects: 100% (6/6), 200 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/hjwp/my-first-blog.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.
Seu cdigo agora est no GitHub. V e confira! Voc saber que est em boa companhia Django, o Django Girls Tutorial e muitos outros grandes projetos de software de fonte aberta
tambm hospedam seu cdigo no GitHub :)
Criao de nosso blog em

PythonAnywhere
Em seguida, hora de se inscrever para uma conta gratuita de "Beginner" na
PythonAnywhere.
Implantao!
65
www.pythonanywhere.com
Nota: ao escolher seu nome de utilizador aqui, tenha em mente que a URL do seu blog
ter o formulrio yourusername.pythonanywhere.com , ento escolha seu nickname ou o
nome do que o blog.
Pulling our code down on PythonAnywhere

Quando voc se inscreve para PythonAnywhere, voc levado ao seu painel de controle ou
pgina "Consoles". Escolha a opo iniciar o console "Bash"--que a verso
PythonAnywhere de um console, como aquela no seu PC
Nota: PythonAnywhere baseado em Linux, assim se voc estiver no Windows o
console vai parecer um pouco diferente do que est no seu computador.
Vamos puxar nosso cdigo de GitHub em PythonAnywhere atravs da criao de um
"clone" do repo. Digite o seguinte para o console na PythonAnywhere:
$ git clone https://github.com/<your-github-username>/my-first-blog.git
Isto puxar uma cpia do seu cdigo para PythonAnywhere. Confira digitando:
$ tree my-first-blog
my-first-blog/
blog
__init__.py
admin.py
migrations
0001_initial.py
__init__.py
models.py
tests.py
views.py
manage.py
mysite
__init__.py
settings.py
urls.py
wsgi.py
Criando um virtualenv na PythonAnywhere

Assim como fez em seu prprio computador, voc pode criar um virtualenv na
PythonAnywhere. No console Bash, digite:
Implantao!
66
20:20 ~ $ cd my-first-blog
20:20 ~ $ virtualenv --python=python3.4 myvenv
Running virtualenv with interpreter /usr/bin/python3.4
[...]
Installing setuptools, pip...done.
20:20 ~ $ source myvenv/bin/activate
(mvenv)20:20 ~ $ pip install django whitenoise
Collecting django
[...]
Successfully installed django-1.8.5 whitenoise-2.0
Coleta de arquivos estticos.

Voc estava imaginando o que "whitenoise"? uma ferramenta para servir os chamados
"arquivos estticos". Arquivos estticos funcionam de forma diferente nos servidores em
comparao com nosso prprio computador, e precisamos de uma ferramenta como o
"whitenoise" para atend-los.
Vamos descobrir um pouco mais sobre arquivos estticos mais tarde no tutorial, quando
vamos editar o CSS para o nosso site.
Por enaunto s precisamos executar um comando extra chamado "collectstatic" no servidor.
Isso diz pro Django reunir todos os arquivos estticos que ele precisa no servidor. Em sua
maioria, estes so os arquivos estticos que fazem o site do admin bonito no momento.
20:20 ~ $ python manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings:
/home/edith/my-first-blog/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
Digite "Sim" e vai embora! Voc no adora fazer computadores imprimir pginas e pginas
de texto? Sempre fao pequenos rudos para acompanh-lo. Brp, brp brp...
Implantao!
67
opying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin/
Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admin/static/admin
[...]
62 static files copied to '/home/edith/my-first-blog/static'.
Criando o banco de dados em PythonAnywhere

Aqui est outra coisa que diferente entre seu computador e o servidor -- ele usa um banco
de dados diferente. Ento as contas de usurio e mensagens podem ser diferentes no
servidor e no seu computador.
Ento ns vamos inicializar o banco de dados no servidor tal como fizemos no seu prprio
computador, com migrate e createsuperuser :
(mvenv)20:20 ~ $ python manage.py migrate
[...]
Applying sessions.0001_initial... OK
(mvenv)20:20 ~ $ python manage.py createsuperuser
Publicao do nosso blog como um aplicativo

web
Agora nosso cdigo est na PythonAnywhere, nossa virtualenv est pronta, os arquivos
estticos esto recolhidos e o banco de dados est inicializado, estamos prontos para
public-lo como um aplicativo da web.
Clique em voltar para o PythonAnywhere dashboard clicando no seu logotipo e clique na
guia Web e v em Add a new web app.
Na caixa de dilogo, aps a confirmao de seu nome de domnio, escolha manual
configuration (NB no a opo "Django"). Em seguida, escolha Python 3.4 e clique em
Next para concluir o assistente.
Nota certifique-se voc escolheu a opo "Manual configuration", no a "Django". Ns
somos demais para o padro de configurao Django da PythonAnywhere ;-)
Definindo o virtualenv
Implantao!
68
Voc ser levado para a tela de configurao de PythonAnywhere para seu webapp que
onde voc precisar de ir quando quiser fazer alteraes para o aplicativo no servidor.
Na seo "Virtualenv", clique no texto vermelho que diz "Enter the path to a virtualenv" e
digite: /home//my-first-blog/myvenv/
Nota: substitua seu prprio nome de usurio conforme apropriado. Se voc cometer
um erro, PythonAnywhere ir mostrar um pequeno aviso.
Configurando o arquivo WSGI

Django funciona usando o WSGI protocol, um padro para servir sites usando Python, que
oferece suporte a PythonAnywhere. A maneira que configuramos PythonAnywhere para
reconhecer nosso blog Django editando um arquivo de configurao do WSGI.
Clique no link "AWSGI configuration file" (na seo "Code" perto do topo da pgina - -ele vai
ser nomeado algo como /var/www/<your-username>_pythonanywhere_com_wsgi.py ), e voc ser
levado para um editor.
Exclua todo o contedo atual e substitua com algo parecido com isto:
Implantao!
69
import os
import sys
path = '/home/<your-username>/my-first-blog' # use your own username here
if path not in sys.path:
sys.path.append(path)
os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'
from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise
application = DjangoWhiteNoise(get_wsgi_application())
Nota no se esquea de substituir em seu prprio nome de usurio onde diz <yourusername>
O que esse arquivo faz dizer PythonAnywhere onde mora a nossa aplicao web e qual o
nome do arquivo de configuraes Django. Ele tambm define a ferramenta de arquivos
estticos "whitenoise".
Aperte Save e ento volte para a guia Web.
J terminamos! Aperte o boto grande verde de Reloade voc ser capaz de ir ver os seu
aplicativo. Voc encontrar um link para ele no topo da pgina.
Dicas de debugging
Se voc vir um erro quando voc tenta visitar o seu site, o primeiro lugar para procurar
alguma informao de debugging no seu error log -- voc encontrar um link para isso na
guia web PythonAnywhere. Ver se h mensagens de erro l. As mais recentes esto na
parte inferior. Problemas comuns incluem
esquecer um dos passos que fizemos no console: criando o virtualenv, ativ-lo,
instalando o Django, collectstatic, inicializando o banco de dados
cometer um erro no caminho do virtualenv na guia web -- haver geralmente uma
pequena mensagem de erro vermelho l, se h um problema
cometer um erro no arquivo de configurao WSGI..--voc usou o caminho para a
pasta do my-first-blog certinho?
O treinador est aqui para ajudar!
Voc est live!
Implantao!
70
A pgina padro para seu site deve dizer "Bem-vindo ao Django", como acontece no seu
PC local. Tente adicionar /admin/ para o final da URL, e voc ser levado ao site admin.
Fazer login com o nome de usurio e senha, e voc ver que voc pode adicionar novas
mensagens no servidor.
D em voc mesma um enorme tapinha nas costas - implantaes de servidor so uma das
partes mais difceis do desenvolvimento web, e muitas vezes leva as pessoas vrios dias
antes de fazer funcionar. Mas voc tem seu site publicado, na internet, assim!
Implantao!
71
Urls
Estamos prestes a construir nossa primeira Web page - uma pgina inicial para o seu blog!
Mas primeiro, vamos aprender um pouco mais sobre Django urls.
O que uma URL?

Uma URL simplesmente um endereo da web, voc pode ver uma URL toda vez que voc
visita qualquer site - visvel na barra de endereos do seu navegador (Sim!
127.0.0.1:8000 uma URL! E http://djangogirls.com tambm uma URL):
Cada pgina na Internet precisa de sua prpria URL. Desta forma seu aplicativo sabe o que
deve mostrar a um usurio que abre uma URL. Em Django, ns usamos algo chamado
URLconf (configurao de URL), que um conjunto de padres que Django vai tentar
coincidir com a URL recebida para encontrar a viso correta.
Como funcionam as URLs em Django?

Vamos abrir o arquivo mysite/urls.py e ver com que ele se parece:
from django.conf.urls import include, url
urlpatterns = [
# Examples:
# url(r'^$', 'mysite.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^admin/', include(admin.site.urls)),
]
Como voc pode ver, o Django j colocou alguma coisa l pra ns.
Urls
72
As linhas que comeam com # so comentrios - isso significa que essas linhas no
sero executadas pelo Python. Muito til, no?
A URL do admin, que voc visitou no captulo anterior j est aqui:
Isso significa que para cada URL que comea com admin / o Django ir encontrar um
correspondente modo de exibio. Neste caso ns estamos incluindo um monte de admin
URLs para que isso no fique tudo embalado neste pequeno arquivo..-- mais legvel e
mais limpo.
Regex
Voc quer saber como o Django coincide com URLs para views? Bem, esta parte
complicada. o Django usa o regex -- expresses regulares. Regex tem muito (muito!) de
normas que formam um padro de pesquisa. Como regexes so um tpico avanado, ns
veremos em detalhes como elas funcionam.
Se voc ainda quiser entender como criamos os padres, aqui est um exemplo do
processo - s precisamos um subconjunto limitado de regras para expressar o padro que
procuramos, ou seja:
^ para o incio do texto
$ para o final do texto
\d para um dgito
+ para indicar que o item anterior deve ser repetido pelo menos uma vez
() para capturar parte do padro
Qualquer outra coisa na definio de url ser levada literalmente.

Agora imagine que voc tem um site com o endereo assim:
http://www.mysite.com/post/12345/ , onde 12345 o nmero do seu post.
Escrever views separadas para todos os nmeros de post seria muito chato. Com
expresses regulares podemos criar um padro que ir coincidir com a url e extrair o
nmero para ns: ^ post/(\d+) / $ . Vamos aos poucos ver o que estamos fazendo aqui:
^ post / est dizendo ao Django para pegar tudo que tenha post / no incio da url
(logo aps o ^ )
(\d+) significa que haver um nmero (um ou mais dgitos) e que queremos o nmero
capturado e extrado
/ diz para o Django que deve seguir outro /
Urls
73
$ indica o final da URL significando que apenas sequncias terminando com o / iro
corresponder a esse padro
Sua primeira url Django!

hora de criar nossa primeira URL! Queremos http://127.0.0.1:8000 / para ser uma pgina
inicial do nosso blog e exibir uma lista de posts.
Tambm queremos manter o arquivo de mysite/urls.py limpo, a ns importaremosurls da
nossa aplicao blog para o arquivo principal mysite/urls.py .
V em frente, apague as linhas comentadas (as linhas que comeam com # ) e adicione
uma linha que vai importar blog.urls para a url principal ( '' ).
O seu arquivo mysite/urls.py deve agora se parecer com isto:
urlpatterns = [
url(r'', include('blog.urls')),
]
O Django agora ir redirecionar tudo o que entra em 'http://127.0.0.1:8000 /'para blog.urls

e procurar por novas instrues l.
Ao escrever as expresses regulares em Python sempre feito com r na frente da
sequncia - isso s uma dica til para Python que a seqncia pode conter caracteres
especiais que no so destinadas para Python em si, mas em vez disso so parte da
expresso regular.
blog.urls
Crie um novo arquivo vazio blog/urls.py . Tudo bem! Adicione estas duas primeiras linhas:
from . import views
Aqui ns estamos apenas importando mtodos do Django e todos os nossos views do

aplicativo blog (ainda no temos nenhuma, mas teremos em um minuto!)
Depois disso ns podemos adicionar nosso primeira URL padro:
Urls
74
urlpatterns = [
url(r'^$', views.post_list),
]
Como voc pode ver, estamos agora atribuindo uma view chamada post_list para ^ $
URL. Essa expresso regular corresponder a ^ (um comeo) seguido por $ (fim) ento somente uma seqncia vazia ir corresponder. E isso correto, porque em
resolvedores de Django url, ' http://127.0.0.1:8000 /' no uma parte da URL. Este padro
ir mostrar o Django que views.post_list o lugar certo para ir, se algum entra em seu
site no endereo 'http://127.0.0.1:8000 /'.
Tudo certo? Abra http://127.0.0.1:8000 no seu navegador pra ver o resultado.
No tem mais "It Works!' mais ein? No se preocupe, s uma pgina de erro, nada a
temer! Elas so na verdade muito teis:
Voc pode ler que no h no attribute 'post_list'. O post_list te lembra alguma coisa? Isto
como chamamos o nosso view! Isso significa que est tudo no lugar, s no criamos
nossa view ainda. No se preocupe, ns chegaremos l.
Se voc quer saber mais sobre Django URLconfs, veja a documentao oficial:
https://docs.djangoproject.com/en/1.8/topics/http/urls/
Urls
75

hora de resolver o bug que criamos no captulo anterior :)
Uma view colocada onde ns colocamos a "lgica" da nossa aplicao. Ele ir solicitar
informaes a partir do model que voc criou antes e pass-lo para um template que
voc vai criar no prximo captulo. Views, no fundo, no passam de mtodos escritos em
Python que so um pouco mais complicados do que aquilo que fizemos no captulo
Introduo ao Python.
As views so postas no arquivo views.py . Ns vamos adicionar nossas views no arquivo
blog/views.py .
blog/views.py
OK, vamos abrir o arquivo e ver o que tem nele:
from django.shortcuts import render
# Create your views here.
No tem muita coisa. A view mais bsica se parece com isto.

def post_list(request):
return render(request, 'blog/post_list.html', {})
Como voc pode ver, ns criamos um mtodo ( def ) chamado post_list que aceita o
pedido e retornar um mtodo render ser processado (para montar) nosso modelo
blog/post_list.html .
Salve o arquivo, v para http://127.0.0.1:8000 / e veja o que temos agora.

Outro erro! Leia o que est acontecendo agora:
76
Esta fcil: TemplateDoesNotExist. Vamos corrigir este bug e criar um modelo no prximo
captulo!
Aprenda mais sobre as views do Django lendo a documentao oficial:
https://docs.djangoproject.com/en/1.8/topics/http/views/
77
Introduo a HTML
Voc pode se perguntar: e o que um template?
Um template um arquivo que ns podemos reutilizar para apresentar diferentes
informaes de uma forma consistente. Por exemplo, voc poderia usar um template para
te ajudar a escrever uma carta, pois, embora cada carta possua uma mensagem e um
destino diferente, todas tero sempre o mesmo formato.
O formato do template do Django descrito em uma linguagem chamada HTML (esse o
mesm HTML que mencionamos no primeiro captulo Como a Internet funciona).
O que HTML?
HTML um simples cdigo que interpretado pelo seu navegador web - como o Chrome, o
Firefox ou o Safari - para exibir uma pgina da web para o usurio.
HTML significa "HyperText Markup Language". HiperText significa que um tipo de texto
que suporta hiperlinks entre pginas. Marcao nada mais que marcar um documento
com cdigos que dizem para algum (nesse caso, o navegador web) como a pgina dever
ser interpretada. Cdigo em HTML feito com tags, cada uma comeando com < e
terminando com > . Essas tags marcam os elementos.
Seu primeiro template!

Criar um template significa criar um arquivo de template. Tudo um arquivo, certo?
Provavelmente voc j deve ter notado isso.
Os templates so salvos no diretrio blog/templates . Logo, crie um diretrio chamado
templates dentro do diretrio do seu blog. Em seguida, crie outro diretrio chamado blog
dentro da diretrio templates:

blog
templates
blog
(Voc deve estar se perguntando porque ns precisamos de dois diretrios chamados

blog - como voc descobrir mais para frente, essa uma simples e til conveno que
facilita a vida quando as coisas comearem a ficar mais complicadas.)
Introduo a HTML
78
E agora ns criamos o arquivo post_list.html (deixe-o em branco por agora) dentro do

diretrio blog/templates/blog .
Veja como o nosso site est se parecendo agora: http://127.0.0.1:8000/
Se ocorrer um erro de TemplateDoesNotExists tente reiniciar o seu servidor. Entre na
linha de comando, pare o servidor pressionando Ctrl+C (Control seguido da tecla C,
juntas) e reinicie-o rodando python manage.py runserver .
Acabaram-se os erros! Parabns :) Entretanto, nosso site no mostra nada a no ser uma
pgina em branco. Isso porque o nosso template est vazio. Ento precisamos consertar
isso.
Adicione a seguinte linha dentro do template:
<html>
<p>Hi there!</p>
<p>It works!</p>
</html>
Como nosso site se parece agora? Clique para descobrir: http://127.0.0.1:8000/
Funcionou! Bom trabalho :)

A tag mais bsica, <html> , estar sempre no comeo de qualquer pgina da web,
assim como, </html> sempre estar no fim. Como voc pode ver, todo o contedo de
Introduo a HTML
79
um website se encontra entre a tag de incio <html> e entre a tag de fim </html>
<p> a tag que denomina pargrafos; </p> determina o fim de cada pargrafo
Head & body

Cada pgina HTML tambm dividida em dois elementos: head (cabea) e body (corpo).
head um elemento que contm informaes sobre o documento que no so
mostradas na tela.
body um elemento que contm tudo o que exibido como parte de uma pgina de
um site.
Ns usamos a tag <head> para dizer ao navegador sobre as configuraes da pgina. Por
sua vez, a tag <body> diz ao navegador o que h de verdade na pgina.
Por exemplo, voc pode por o elemento ttulo de uma pgina web dentro da tag <head> .
Veja:
<html>
<head>
<title>Ola's blog</title>
</head>
<body>
<p>Hi there!</p>
<p>It works!</p>
</body>
</html>
Salve o arquivo e atualize sua pgina.
Viu como o navegador entendeu que "Ola's blog" o ttulo da pgina? Ele interpretou
<title>Ola's blog</title> e colocou o texto na barra de ttulo do seu navegador (e
tambm ser usado para os favoritos e outras coisas mais).
Introduo a HTML
80
Provavelmente voc j deve ter notado que cada tag de abertura casa com uma tag de
fechamento, com uma / , e que os elementos esto aninhados (ex.: voc no pode fechar
um tag em particular antes que todas as outras tags que estiverem dentro dela j estejam
fechadas).
como colocar coisas dentro de caixas. Voc tem uma grande caixa, <html></html> ;
dentro dela h <body></body> , sendo que esta ainda contm caixas menors: <p></p> .
Voc precisa seguir essas regras de fechamento de tags, e de aninhamento de elementos se voc no fizer isso, o navegador poder no estar apto para interpretar seu cdigo de
maneira correta e sua pgina ser exibida de maneira incorreta.
Customize seu template

Agora voc pode se divertir um pouco tentando customizar o seu template! Aqui esto
algumas tags teis para isso:
<h1>Um ttulo</h1> - para o ttulo mais importante
<h2>Um sub-ttulo</h2> para um ttulo um nvel abaixo
<h3>Um sub-sub-ttulo</h3> ... e por a vai, at <h6>
<em>texto</em> enfatiza seu texto
<strong>text</strong> enfatiza fortemente seu texto
<br /> pula para a prxima linha (voc no pode colocar nada dentro de br)
<a href="http://djangogirls.org">link</a> cria um link
<ul><li>primeiro item</li><li>segundo item</li></ul> cria uma lista, exatamente como
essa!
<div></div> define uma seo da pgina
Aqui est um exemplo de um template completo:
Introduo a HTML
81
<html>
<head>
<title>Django Girls blog</title>
</head>
<body>
<div>
<h1><a href="">Django Girls Blog</a></h1>
</div>
<div>
<p>published: 14.06.2014, 12:14</p>
<h2><a href="">My first post</a></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec i
</div>
<div>
<p>published: 14.06.2014, 12:14</p>
<h2><a href="">My second post</a></h2>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec i
</div>
</body>
</html>
Ns criamos trs sees div aqui.

O primeiro elemento div possui o ttulo do nosso blog - um ttulo e um link
Os outros dois elementos div possuem nossas postagens com a data de publicao,
h2 com o ttulo da postagem que clicvel e dois p s (pargrafos) de texto, um para
a data e outro para o texto da postagem.

Isso nos d o seguinte efeito:
Introduo a HTML
82
Yaaay! Mas, at agora, nosso template mostra exatamante sempre a mesma informao sendo que, anteriormente, ns falvamos sobre templates como uma maneira para exibir
informaes diferentes em um mesmo formato.
O que ns realmente queremos fazer exibir postagens reais que foram adicionadas no
Django admin - e isso o que faremos em seguida.
Mais uma coisa: deploy!

Seria bom ver tudo isto na Internet, certo? Vamos fazer outro deploy PythonAnywhere:
Commit, e ponha seu cdigo no GitHub

Primeiro de tudo, vejamos quais arquivos foram alterados desde a ltima implantao:
$ git status
Verifique se voc est no diretrio djangogirls e vamos dizer ao git para incluir todas as
mudanas dentro deste diretrio:
$ git add -A .
Introduo a HTML
83
Nota -A (abreviao de "all", tudo em ingls) significa que o git tambm

reconhecer se voc deletou algum arquivo (por padro, o git apenas reconhece
arquivos criados/modificados). Lembre-se tambm (do captulo 3) que . significa o
diretrio atual.
Antes de ns fazermos o upload de todos os aqruivos, chequemos o que o git enviar
(todos os arquivos que o git for enviar dever aparece em verde):
$ git status
Estamos quase l! Agora hora de dizer a ele para salvar essa modificao em seu
histrico. Ns daremos a ele uma "mensagem de commit" onde ns descrevemos as
modificaes que fizemos. Voc pode escrever o que voc quiser agora, mas ser mais til
se voc escrever alguma coisa mais descritiva, algo para voc poder se lembrar das coisas
que voc fez futuramente.
$ git commit -m "Changed the HTML for the site."
Certifique-se que voc usou aspas duplas para delimitar a mensagem do commit.
Quando fizermos isso, ns fazemos upload (envio) das nossas mudanas para o
PythonAnywhere:
git push
Bote deu novo cdigo no PythonAnywhere e recarregue o

seu aplicativo da web
Abra a pgina de consoles de PythonAnywhere e v para o seu console Bash (ou
comear um novo). Em seguida, execute:
$ cd ~/my-first-blog
$ source myvenv/bin/activate
(myvenv)$ git pull
[...]
(myvenv)$ python manage.py collectstatic
[...]
Eveja seu cdigo sendo baixado. Se voc deseja verificar se j chegou, pode ir para a Files
tab e ver seu cdigo no PythonAnywhere.
Finalmente, pule para a Web tab e aperte Reload em seu aplicativo web.
Introduo a HTML
84
Sua atualizao deve estar live! V em frente e atualize seu site no navegador. As
alteraes devem ser visveis :)
Introduo a HTML
85
QuerySets e ORM do Django

Neste captulo voc vai aprender como Django se conecta ao banco de dados e como ele
armazena dados. Vamos nessa!
O que um QuerySet?
Um QuerySet (conjunto de pesquisa), no fundo, uma lista de objetos de um dado modelo.
Um QuerySet permite que voc leia os dados do banco, filtre e ordene o mesmo.
mais fcil aprender por exemplos. Vamos tentar?
O Shell do Django
Abra o terminal e digite:
(myvenv) ~/djangogirls$ python manage.py shell
O resultado deve ser:

(InteractiveConsole)
>>>
Agora voc est no console interativo do Django. Ele como o prompt do Python s que
com umas mgicas a mais :). Voc pode usar todos os comandos do Python aqui tambm,
claro.
Todos os objetos
Antes, vamos tentar mostrar todas as nossas postagens. Podemos fazer isso com o
seguinte comando:
>>> Post.objects.all()
File "<console>", line 1, in <module>
NameError: name 'Post' is not defined
86
Oops! Um erro apareceu. Ele nos diz que no existe algo chamado Post. verdade -- ns
esquecemos de import-lo primeiro!
>>> from blog.models import Post
Isso simples: importamos o modelo Post de dentro do blog.models . Vamos tentar

mostrar todas as postagens novamente:
[<Post: my post title>, <Post: another post title>]
uma lista dos posts que criamos anteriormente! Criamos esses posts usando a interface
de administrao do Django. No entanto, agora queremos criar novas mensagens utilizando
o python, ento como que fazemos isso?
Criando um objeto
assim que voc cria um objeto Post no banco de dados:
>>> Post.objects.create(author=me, title='Sample title', text='Test')
Mas aqui temos um ingrediente que faltava: me . Precisamos passar uma instncia de
User modelo como autor. Como fazer isso?
Primeiro vamos importar o modelo User:

>>> from django.contrib.auth.models import User
Quais usurios temos no nosso banco de dados? Experimente isso:

>>> User.objects.all()
[<User: ola>]
o superusurio que criamos anteriormente! Vamos obter uma instncia de usurio agora:
me = User.objects.get(username='ola')
Como voc pode ver, ns agora usamos um get a User with a username igual a 'ola'.
Claro, voc tem que adaptar a seu nome de usurio.
Agora finalmente podemos criar nossa primeira postagem:
87
>>> Post.objects.create(author=me, title='Sample title', text='Test')
Viva! Quer ver se funcionou?

[<Post: Sample title>]
Adicione mais postagens

Agora, voc pode se divertir um pouco e adicionar mais postagens para ver como funciona.
Adicione mais 2-3 e siga para a prxima parte.
Filtrar objetos
Uma grande parte de QuerySets a habilidade de filtr-los. Digamos que queremos
encontrar todos as postagens escritas pelo usurio ola. Ns usaremos o filter em vez de
all em Post.objects.all() . Entre parnteses indicamos que as condies precisam ser
atendidas por um postagem de blog para acabar em nosso queryset. Em nosso caso
author que igual a me . A maneira de escrever isso no Django : author=me . Agora o
nosso trecho de cdigo parece com este:

>>> Post.objects.filter(author=me)
[<Post: Sample title>, <Post: Post number 2>, <Post: My 3rd post!>, <Post: 4th title of post>]
Ou talvez ns queremos ver todos os posts que contenham a palavra 'title' no campo de
title ?
>>> Post.objects.filter(title__contains='title')
[<Post: Sample title>, <Post: 4th title of post>]
Nota Existem dois caracteres de sublinhado ( _ ) entre o title e contains . Django

ORM usa esta sintaxe para separar nomes de campo ("title") e operaes ou filtros
("contains"). Se voc usar apenas um sublinhado, voc obter um erro como
"FieldError: Cannot resolve keyword title_contains".
Voc tambm pode obter uma lista de todos os posts publicados. Fazemos isso filtrando
todos os posts com published_date definido no passado:
Post.objects.filter(published_date__lte=timezone.now()) []
88
Infelizmente, nenhum dos nossos posts esto publicados ainda. Ns podemos mudar isso!
Primeiro obtenha uma instncia de um post que queremos publicar:
>>> post = Post.objects.get(id=1)
E ento public-lo com o nosso mtodo de publish !

>>> post.publish()
Agora tente obter a lista de posts publicados novamente (pressione a seta para cima boto
3 vezes e tecle Enter):
>>> Post.objects.filter(published_date__lte=timezone.now())
[<Post: Sample title>]
Ordenando objetos
Um QuerySet tambm nos permite ordenar a lista de objetos. Vamos tentar ordenar as
postagens pelo campo created_date :
>>> Post.objects.order_by('created_date')
[<Post: Sample title>, <Post: Post number 2>, <Post: My 3rd post!>, <Post: 4th title of post>]
Voc tambm pode inverter a ordem adicionando - no incio:

>>> Post.objects.order_by('-created_date')
[<Post: 4th title of post>, <Post: My 3rd post!>, <Post: Post number 2>, <Post: Sample title>]
Legal! Voc j est pronto para a prxima parte! Para fechar o terminal digite:
>>> exit()
$
89
Django Querysets
Ns temos diferentes peas aqui: o model Post est definido em models.py , ns temos
post_list no views.py e o template adicionado. Mas como ns faremos de fato para
fazer com que as nossas postagens apaream no nosso template em HTML? Porque isso
que ns queremos: pegar algum contedo (models salvos no banco de dados) e exibi-lo de
uma maneira bacana no nosso template, certo?
E isso exatamente o que as views devem fazer: conectar models e templates. Na nossa
view post_list view ns vamos precisar pegar os models que queremos exibir e pass-los
para o template. Ento, basicamente, em uma view ns decidimos o que (um model) ser
exibido no template.
Certo, e como ns faremos isso?
Precisamos abrir o nosso blog/views.py . At agora a view post_list se parece com isso:
Lembra quando falamos sobre a incluso de cdigo escrito em arquivos diferentes? Agora
o momento em que temos de incluir o model que temos escrito em models.py . Vamos
adicionar esta linha from .models import Post como este:
O ponto depois de from significa o diretrio atual ou o aplicativo atual. Como views.py e
models.py esto no mesmo diretrio podemos simplesmente usar . e o nome do arquivo
(sem .py ). Ento ns importamos o nome do modelo ( Post ).

E o que vem agora? Para pegar os posts reais do model Post ns precisamos de uma
coisa chamada QuerySet .
QuerySet
90
Voc j deve estar familiarizado com o modo que os QuerySets funcionam. Ns

conversamos sobre isso no captulo ORM do Django (QuerySets).</p> Agora ns estamos
interessados em uma lista de posts que so publicados e classificados por published_date ,
certo? Ns j fizemos isso no captulo QuerySets!
Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
Agora ns colocamos este pedao de cdigo dentro do arquivo blog/views.py

adicionando-o funo def post_list(request) :
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date'
Note que criamos uma varivel para nosso o QuerySet: posts . Trate isto como o nome do
nosso QuerySet. De agora em diante ns podemos nos referir a ele por este nome.
A ltima parte que falta passar o QuerySet posts para o template (veremos como exibi-lo
em um prximo captulo).
Na funo render j temos o parmetro request (tudo o que recebemos do usurio
atravs da Internet) e um arquivo de template 'blog/post_list.html' . O ltimo parmetro,
que se parece com isso: {} um lugar em que podemos acrescentar algumas coisas para
que o template use. Precisamos nome-los (ficaremos com 'posts' por enquanto :)). Deve
ficar assim: {'posts': posts} . Observe que a parte antes de : est entre aspas '' .
Ento finalmente nosso arquivo blog/views.py deve se parecer com isto:
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date'
return render(request, 'blog/post_list.html', {'posts': posts})
Feito! Hora de voltar para o nosso template e exibir essa QuerySet!
91
Se quiser ler mais sobre QuerySets no Django voc deve dar uma olhada aqui:
https://docs.djangoproject.com/en/1.8/ref/models/querysets/
92
Templates
Hora de exibir algum dado! Django nos d tags de templates embutidas bastante teis
para isso.
O que so tags de template?

Como pode ver, voc no pode colocar cdigo Python no HTML, porque os navegadores
no iro entender. Eles apenas conhecem HTML. Ns sabemos que HTML bastante
esttico, enquanto Python muito mais dinmico.
Tags de template Django nos permite transformar objetos Python em cdigo HTML, para
que voc possa construir sites dinmicos mais rpido e mais fcil. Uhuu!
Modelo de lista de post de exibio

No capitulo anterior, ns fornecemos ao nosso template uma lista de postagens e a varivel
posts. Agora vamos exibir em nosso HTML.
Para exibir uma varivel no Django template, ns usamos colchetes duplos com o nome da
varivel dentro, exemplo:
{{ posts }}
Tentar fazer isso no seu template blog/templates/blog/post_list.html (substituia o

segundo e o terceiro par de tags < div >< / div > pela linha {{ posts }} ), salve o
arquivo e atualize a pgina para ver os resultados:
Voc pode ver, tudo que temos :
Templates
93
[<Post: My second post>, <Post: My first post>]
Isto significa que o Django a entende como uma lista de objetos. Lembre-se de introduo
ao Python como podemos exibir listas? Sim, com os loops! Em um template Django,
fazemos isso da seguinte maneira:
{% for post in posts %}
{{ post }}
{% endfor %}
Tente fazer isso no seu template.
Funciona! Mas ns queremos que eles sejam exibidos como os posts estticos, como os
que criamos anteriormente no captulo de Introduo a HTML. Ns podemos misturar
HTML com tags de template. O contedo da tag body ficar assim:
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div>
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
Tudo que voc pe enrte {% for %} e {% endfor %} ser repetido para cada objeto na
lista. Atualize sua pgina:
Templates
94
Voc notou que dessa vez ns usamos uma notao um pouco diferente {{ post.title }}
ou {{ post.text }} ? Ns estamos acessando os dados em cada um dos campos que
definimos no model do Post . Alm disso, |linebreaks est passando o texto do post por
um filtro, convertendo quebras de linha em pargrafos.
Mais uma coisa

Seria bom ver se seu site ainda estar funcionando na internet, certo? Vamos tentar
implantar a PythonAnywhere novamente. Aqui est um resumo dos passos...
Primeiro, envie seu cdigo para o Github
$ git status
$ git add -A .
$ git status
$ git commit -m "Added views to create/edit blog post inside the site."
$ git push
Em seguida, faa login em PythonAnywhere e v para seu Bash console (ou comece
um novo) e execute:
` $ cd my-first-blog $ git pull
Templates
95
Finalmente, pule para a Web tab e aperte Reload em seu aplicativo web. Sua
atualizao deve estar live!
Parabns! Agora v em frente e tente adicionar um novo post em seu Django admin
(Lembre-se de adicionar published_date!), em seguida, atualize a pgina para ver se o post
aparece por l.
Funciona como mgica? Estamos orgulhosos! Afaste-se do seu computador um pouco,
voc ganhou uma pausa. :)
Templates
96
CSS - Deixe mais bonito!

Nosso blog ainda parece feio, certo? Est na hora de deixar ele melhor! Para isso ns
usaremos o CSS.
O que CSS?
Do ingls "Cascading Style Sheets", CSS uma linguagem usada para descrever o aspecto
e a formatao de um website escrito numa linguagem de marcao (como HTML). Imagine
ele como sendo um tipo de "maquiagem" para nosso site ;).
Mas ns no queremos iniciar do zero de novo, certo? Ns tentaremos, mais uma vez, usar
algo que foi feito e disponibilizado de graa por programadores na internet. Voc sabe,
reinventar a roda no nada divertido.
Vamos usar o Bootstrap!

Bootstrap um dos mais famosos e populares frameworks de HTML e CSS para
desenvolver sites bonitos: http://getbootstrap.com/
Foi escrito por programadores que trabalharam no Twitter e agora desenvolvido por
voluntrios de todo o mundo.
Instalar Bootstrap
Para instalar o Bootstrap, voc precisa adicionar ao seu cabealho (na tag <head> dentro
do seu arquivo .html )( blog/templates/blog/post_list.html ):
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"
Isso no adiciona nenhum arquivo ao seu projeto. O cdigo apenas aponta para arquivos
que existem na internet. Apenas siga em frente, abra seu site e atualize a pgina. Aqui ele
est!
97
J parecendo melhor!
Arquivos estticos no Django

Finalmente ns teremos um olhar mais atento nessas coisas que chamamos arquivos
estticos. Arquivos estticos so todas as suas imagens e arquivos CSS -- arquivos que
no so dinmicos, ento seu contedo no depende do contexto da requisio e ser o
mesmo para todos os usurios.
Onde colocar os arquivos estticos para Django

Como voc viu quando rodamos collectstatic no servidor, Django j sabe onde encontrar
os arquivos estticos para o built-in "admin" app. Agora s precisamos adicionar alguns
arquivos estticos para nosso prprio app, blog .
Fazemos isso atravs da criao de uma pasta chamada static dentro do aplicativo do
blog:
djangogirls
blog
migrations
static
mysite
Django encontrar automaticamente todas as pastas chamadas "static" dentro de qualquer

uma das pastas dos seus apps, e ser capaz de usar seu contedo como arquivos
estticos.
98
Seu primeiro arquivo CSS!

Vamos criar um arquivo CSS agora, para adicionar seu prprio estilo para sua pgina da
web. Crie um novo diretrio chamado css dentro de seu diretrio static . Em seguida,
crie um novo arquivo chamado blog.css dentro do diretrio css . Pronto?
djangogirls
blog
static
css
blog.css
Hora de escrever CSS! Abra o arquivo static/css/blog.css no seu editor de cdigo.

No vamos nos aprofundar muito em customizar e aprender sobre CSS aqui, porque bem
fcil e voc pode aprender no seu prprio aps este workshop. Recomendamos fortemente
fazer este Codeacademy HTML & CSS couse para aprender tudo o que voc precisa saber
sobre como tornar seus sites mais bonitos com CSS.
Mas vamos fazer pelo menos um pouco. Talvez possamos mudar a cor do nosso
cabealho? Para entender as cores, computadores usam cdigos especiais. Eles comeam
com # e so seguidos por 6 letras (A-F) e nmeros (0-9). Voc pode encontrar exemplos
de cdigos de cores aqui: http://www.colorpicker.com/. Voc pode tambm usar cores
predefinidas, como red e green .
Em seu arquivo static/css/blog.css voc deve adicionar o seguinte cdigo:
h1 a {
color: #FCA205;
}
h1 a um seletor de CSS. Isso significa que ns estamos aplicando nossos estilos para
qualquer elemento a dentro de um elemento h1 (i.e. quando tivermos no cdigo algo

como: <h1><a href="">link</a></h1> ). Neste caso ns estamos dizendo para mudar a cor
para #FCA205 , que laranja. Claro, voc pode colocar a cor que voc quiser aqui!
Em um arquivo CSS podemos determinar estilos para elementos no arquivo HTML. Os
elementos so identificados pelo nome do elemento (ou seja, a , h1 , body ), o atributo de
class ou o atributo id . Classe e id so nomes que voc mesmo d ao elemento. Classes
definem grupos de elementos, e ids apontam para elementos especficos. Por exemplo, a
seguinte tag pode ser identificada por CSS usando a tag de nome a , a classe
link_externo ou a identificao de link_para_a_pagina_wiki :
99
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page"
Leia sobre Seletores CSS em w3schools.

Ento, precisamos tambm contar o nosso template HTML que ns adicionamos CSS. Abra
o arquivo blog/templates/blog/post_list.html e adicione essa linha no incio do mesmo:
{% load staticfiles %}
Estamos apenas carregando arquivos estticos aqui :). Depois, entre o <head> e/</head> ,
depois dos links para os arquivos de CSS do Bootstrap (o navegador l os arquivos na
ordem que eles so dados, ento o cdigo em nosso arquivo pode substituir o cdigo em
arquivos de inicializao), adicione esta linha:
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
S dissemos que nosso modelo onde se encontra nosso arquivo CSS.

Agora, seu arquivo deve ficar assim:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.mi

</head>
<body>
<div>
</div>
<div>
</div>
{% endfor %}
</body>
</html>
OK, salve o arquivo e atualize o site!
100
Bom trabalho! Talvez a gente tambm queira dar um pouco de ar ao nosso site e aumentar
a margem do lado esquerdo? Vamos tentar!
body {
padding-left: 15px;
}
Adicione isto ao seu arquivo CSS, salve e veja como ele funciona!
Talvez a gente possa customizar a fonte no nosso cabealho? Cole na seo <head> do
arquivo blog/templates/blog/post_list.html o seguinte:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet"
101
Essa linha ir importar uma fonte chamada Lobster do Google Fonts

(https://www.google.com/fonts).
Agora adicione a linha font-family: 'Lobster'; no CSS do arquivo static/css/blog.css
dentro do bloco de declarao h1 a (o cdigo entre as chaves { e } ) e atualize a
pgina:
h1 a {
color: #FCA205;
font-family: 'Lobster';
}
Incrvel!
Como mencionado acima, CSS usa o conceito de classes, que basicamente permite que
voc nomeie parte do cdigo HTML e aplique estilos apenas esta parte, sem afetar as
outras. super til se voc tiver duas divs, mas eles esto fazendo algo muito diferente
(como o seu cabealho e seu post), ento voc no quer que eles fiquem parecidos.
V em frente e o nomeie algumas partes do cdigo HTML. Adicione uma classe chamada
de page-header para o div que contm o cabealho, assim:
<div class="page-header">
</div>
E agora, adicione uma classe post em sua div que contm um post de blog.
102
<div class="post">
</div>
Agora adicionaremos blocos de declarao de seletores diferentes. Seletores comeando

com . se referem s classes. Existem muitos tutoriais e explicaes sobre CSS na Web
para ajudar voc a entender o cdigo a seguir. Por enquanto, basta copiar e col-lo em seu
arquivo mysite/static/css/blog.css :
103
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
}
.date {
float: right;
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h1 a, .post h1 a:visited {
color: #000000;
}
Ento envolva o cdigo HTML que exibe as mensagens com declaraes de classes.
Substitua isto:
104

<div class="post">
</div>
{% endfor %}
no arquivo blog/templates/blog/post_list.html por isto:

<div class="content container">
<div class="row">
<div class="col-md-8">
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Salve esses arquivos e atualize seu site.
Uhuu! Ficou incrvel, n? O cdigo que ns acabamos de colar no to difcil de entender

e voc deve ser capaz de entender a maior parte apenas lendo.
No tenha medo de mexer um pouco com esse CSS e tentar mudar algumas coisas. Se
voc quebrar alguma coisa, no se preocupe, voc sempre pode desfaz-lo!
105
De qualquer forma, recomendamos que faa esse curso on-line Codeacademy HTML &
CSS Course como dever de casa ps-workshop para aprender tudo o que voc precisa
saber sobre como tornar seus sites mais bonitos com CSS.
Pronto para o prximo captulo?! :)
106
Outra coisa boa que o Django tem pra voc o template extending. O que isso significa?
Isso significa que voc pode usar as mesmas partes do seu HTML em diferentes pginas
do seu site.
Dessa forma voc no precisa ficar se repetindo em cada arquivo quando quiser usar a
mesma informao/layout. E se voc quiser mudar alguma coisa no precisa fazer isso em
todo template, s uma vez!
Criar template base

Um template base o template mais bsico que voc estender em cada pgina do seu
site.
Vamos criar um arquivo base.html na pasta blog/templates/blog/ :
blog
templates
blog
base.html
post_list.html
Abra-o e copie tudo que est no arquivo post_list.html para base.html , desse jeito:
107
<html>
<head>

<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel
</head>
<body>
</div>
<div class="row">
<div class="post">
<div class="date">
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
Ento em base.html , substitua todo seu <body> (tudo entre <body> e </body> ) com
isso:
<body>
</div>
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
108
Basicamente ns substituimos tudo entre {% for post in posts %}{% endfor %} por:
{% block content %}
{% endblock %}
O que isso significa? Voc acabou de criar um block (bloco), que uma tag de template
que te permite inserir HTML neste bloco em outros templates que estendem base.html .
Ns vamos te mostrar como fazer isso j j.
Salve e abra o arquivo blog/templates/blog/post_list.html novamente. Apague
exatamente tudo que no estiver dentro da tag body e apague tambm <div class="pageheader"></div> , de forma que o arquivo fique da seguinte maneira:

<div class="post">
<div class="date">
</div>
</div>
{% endfor %}
Agora adicione esta linha ao incio do arquivo:

{% extends 'blog/base.html' %}
Isso significa que, agora, ns estamos estendendo o template base.html em

post_list.html . Uma ltima coisa: colocar tudo (exceto pela linha que acabamos de
adicionar) entre {% block content %} e {% endblock content %} . Como a seguir:

{% block content %}
<div class="post">
<div class="date">
</div>
</div>
{% endfor %}
{% endblock content %}
109
isso! Veja se o seu site ainda est funcionando direito :)

Se ocorrer um erro de TemplateDoesNotExists , que diz que no existe nenhum arquivo
chamado blog/base.html e se voc tiver o runserver executando no terminal, tenta
interromp-lo (precionando Ctrl+C - o boto Control mais o boto C juntos) e reinicie
ele rodando o comando python manage.py runserver .
110
Amplie sua aplicao

J conclumos todos os passos necessrios para a criao do nosso site: sabemos como
criar um modelo, uma url, uma view e um template. Tambm sabemos como melhorar a
aparncia do nosso website.
Hora de praticar!
A primeira que precisamos no nosso blog , obviamente, uma pgina para mostrar uma
postagem, certo?
J temos um modelo de Post , ento no precisamos adicionar nada ao models.py .
Criar um link no template

Vamos comear com a adio de um link dentro do arquivo
blog/templates/blog/post_list.html . Neste momento ele deve se parecer com:
{% block content %}
<div class="post">
<div class="date">
</div>
</div>
{% endfor %}
{% endblock content %}
Queremos ter um link para uma pgina de detalhe no ttulo do post. Vamos transformar <
h1 >< href = "" >{{ post.title }} < /a >< / h1 > em um link:
<h1><a href="{% url 'blog.views.post_detail' pk=post.pk %}">{{ post.title }}</a></h1>
Tempo para explicar o misterioso {% url 'blog.views.post_detail' pk=post.pk %} . Como

voc pode suspeitar, a notao de {% %} significa que estamos usando as tags de
template do Django. Desta vez vamos usar uma que vai criar uma URL para ns!
Amplie sua aplicao
111
blog.views.post_detail um caminho para um post_detail Vista que queremos criar.
Preste ateno: blog o nome da sua aplicao (o diretrio blog ), views vem do nome
do arquivo views.py e, a ltima parte - post_detail - o nome da view.
Agora quando formos para: http://127.0.0.1:8000/ teremos um erro (como esperado, j que
no temos uma URL ou uma view para post_detail ). Vai se parecer com isso:
Vamos criar a URL em urls.py para a nossa post_detail view!
URL: http://127.0.0.1:8000/post/1/
Queremos criar uma URL para guiar o Django para a view chamada post_detail , que ir
mostrar um post completo do blog. Adicione a linha url(r'^post/(?P<pk>[0-9]+)/$',
views.post_detail), ao arquivo blog/urls.py . Deve ficar assim:

from . import views
urlpatterns = [
url(r'^post/(?P<pk>[0-9]+)/$', views.post_detail),
]
Parece assustador, mas no se preocupe - vamos explicar ele para voc: - comea com ^
de novo... "o incio" - post / significa apenas que aps o comeo, da URL deve ter a
palavra post e /. At aqui, tudo bem. - (?P<pk>[0-9]+) - essa parte mais complicada. Isso
significa que o Django vai levar tudo que voc colocar aqui e transferir para uma view como
uma varivel chamada pk . [0-9] tambm nos diz que s pode ser um nmero, no uma
letra (tudo entre 0 e 9). + significa que precisa existir um ou mais dgitos. Ento algo como
http://127.0.0.1:8000/post// no vlido, mas http://127.0.0.1:8000/post/1234567890/
perfeitamente ok! - / - ento precisamos de / outra vez - $ - "o fim"!
Amplie sua aplicao
112
Isso significa que se voc digitar http://127.0.0.1:8000/post/5/ em seu navegador, Django

vai entender que voc est procurando uma view chamada post_detail e transferir a
informao de que pk igual a 5 para aquela view.
pk uma abreviao para primary key (chave primria). Esse nome geralmente usado
nos projetos feitos em Django. Mas voc pode dar o nome que quiser s variveis (lembrese: minsculo e _ ao invs de espaos em branco!). Por exemplo em vez de (?P<pk>[09]+) podemos ter uma varivel post_id , ento esta parte ficaria como: (?P<post_id>[09]+) .
Razovel! Vamos atualizar a pgina: http://127.0.0.1:8000 / Boom! Ainda outro erro! Como
esperado!
Voc se lembra qual o prximo passo? Claro: adicionando uma view!
post_detail view
Desta vez a nossa view recebe um parmetro extra pk . Nossa view precisa peg-la,
certo? Ento vamos definir nossa funo como def post_detail (request, pk): . Observe
que precisamos usar exatamente o mesmo nome que especificamos em urls ( pk ). Omitir
essa varivel errado e resultar em um erro!
Agora queremos receber apenas um post do blog. Para isso podemos usar querysets como
este:
Post.objects.get(pk=pk)
Mas este cdigo tem um problema. Se no houver nenhum Post com a chave primria
( pk ) fornecida teremos um erro horroroso!
Amplie sua aplicao
113
No queremos isso! Mas, claro, o Django vem com algo que vai lidar com isso para ns:
get_object_or_404 . Caso no haja nenhum Post com o dado pk exibir uma pgina
muito mais agradvel (chamada Page Not Found 404 - pgina no encontrada).
A boa notcia que voc realmente pode criar sua prpria pgina de Page not found e
torn-lo to bonita quanto voc quiser. Mas isso no super importante agora, ento ns
vamos ignor-la.
Ok, hora de adicionar uma view ao nosso arquivo views.py !
Devemos abrir blog/views.py e adicionar o seguinte cdigo:
from django.shortcuts import render, get_object_or_404
Perto de outras linhas from . E no final do arquivo, adicionaremos a nossa view:

def post_detail(request, pk):
post = get_object_or_404(Post, pk=pk)
return render(request, 'blog/post_detail.html', {'post': post})
Sim. Est na hora de atualizar a pgina: http://127.0.0.1:8000 /
Amplie sua aplicao
114
Funcionou! Mas o que acontece quando voc clica em um link no ttulo do post do blog?
Ah no! Outro erro! Mas ns j sabemos como lidar com isso, n? Precisamos adicionar um
template!
Vamos criar um arquivo em blog/templates/blog chamado post_detail.html .
Ser algo parecido com isto:
Amplie sua aplicao
115
{% block content %}
<div class="post">
{% if post.published_date %}
<div class="date">
</div>
{% endif %}
<h1>{{ post.title }}</h1>
</div>
{% endblock %}
Mais uma vez estamos estendendo base.html . No bloco de content queremos exibir o
published_date (data de publicao) do post (se houver), ttulo e texto. Mas devemos
discutir algumas coisas importantes, certo?
{% if ... %} ... {% endif %} uma tag de template que podemos usar quando queremos
verificar algo (Lembre-se if ... else... do captulo introduo ao Python?). Neste

cenrio, queremos verificar se published_date de um post no est vazia.
Ok, podemos atualizar nossa pgina e ver se Page not found j se foi.
Yay! Funciona!
Amplie sua aplicao
116
Mais uma coisa: hora de implantar!

Seria bom ver se seu site ainda estar trabalhando em PythonAnywhere, certo? Vamos
tentar fazer deploy novamente.
$ git status
$ git add -A .
$ git status
$ git push
Ento, em um console PythonAnywhere Bash:

$ cd my-first-blog
$ git pull
Finalmente, pule para a Web tab e aperte Reload.

E deve ser isso! Parabns :)
Amplie sua aplicao
117
Formulrios
Por ltimo queremos uma forma legal de adicionar e editar as postagens do nosso blog. A
ferramenta de administrao do Django legal, mas ela um pouco difcil de customizar e
de deixar mais bonita. Se usarmos formulrios teremos controle absoluto sobre nossa
interface - podemos fazer qualquer coisa que imaginarmos!
Uma coisa legal do Django que ns podemos tanto criar um formulrio do zero como
podemos criar um ModelForm que salva o resultado do formulrio para um determinado
modelo.
Isso exatamente o que ns queremos fazer: criaremos um formulrio para o nosso
modelo Post .
Assim como toda parte importante do Django, forms tem seu prprio arquivo: forms.py .
Precisamos criar um arquivo com este nome dentro da pasta blog .
blog
forms.py
Ok, vamos abri-lo e escrever nele o seguinte:

from django import forms
class PostForm(forms.ModelForm):
class Meta:
model = Post
fields = ('title', 'text',)
Primeiro precisamos importar o mdulo de formulrios do Django ( from django import

forms ) e, obviamente, nosso modelo Post ( from .models import Post ).
PostForm , como voc j deve suspeitar, o nome do nosso formulrio. Precisamos dizer
ao Django que este formulrio um ModelForm (assim o Django pode fazer a mgica pra
gente) - o forms.ModelForm o responsvel por isso.
Segundo, ns temos a classe Meta onde dizemos ao Django qual modelo deveria ser
usado para criar este formulrio ( model = Post ).
Formulrios
118
Finalmente, ns podemos dizer qual(is) campo(s) deveriam entrar em nosso formulrio.

Nesse cenrio ns queremos apenas o title e text para ser exposto - author deveria
ser a pessoa que est logada no sistema (nesse caso, voc!) e created_date deveria ser
setado automaticamente quando ns criamos um post (no cdigo), correto?
E isso a! Tudo o que precisamos fazer agora usar o formulrio em uma view e mostrlo em um template.
Ento, mais uma vez, ns iremos criar: um link para a pgina, uma URL, uma view e um
template.
Link para a pgina com o formulrio

hora de abrir blog/templates/blog/base.html . Ns iremos adicionar um link em div
nomeado page-header :
<a href="{% url 'blog.views.post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"
Note que ns queremos chamar nossa nova viso post_new .

Depois de adicionar a linha, seu html deve se parecer com isso:
Formulrios
119
<html>
<head>

<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel
</head>
<body>
<a href="{% url 'blog.views.post_new' %}" class="top-menu"><span class="glyphicon glyphic

</div>
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
Depois de salvar e recarregar a pgina http://127.0.0.1:8000 voc ver, obviamente, um

erro familiar NoReverseMatch certo?
URL
Vamos abrir o arquivo blog/urls.py e escrever:
url(r'^post/new/$', views.post_new, name='post_new'),
O cdigo final deve se parecer com isso:

from . mport views
urlpatterns = [
url(r'^post/(?P<pk>[0-9]+)/$', views.post_detail),
url(r'^post/new/$', views.post_new, name='post_new'),
]
Formulrios
120
Aps recarregar o site, ns veremos um AttributeError , desde que ns no temos a viso

post_new implementada. Vamos adicion-la agora.
post_new view
Hora de abrir o arquivo blog/views.py e adicionar as linhas seguintes com o resto das
linhas from :
from .forms import PostForm
e nossa view:
def post_new(request):
form = PostForm()
return render(request, 'blog/post_edit.html', {'form': form})
Para criar um novo formulario Post , ns devemos chamar PostForm() e pass-lo para o
template. Ns iremos voltar para esta view, mas por agora vamos criar rapidamente um
template para o formulrio.
Template(modelos)
Precisamos criar um arquivo post_edit.html na pasta blog/templates/blog . Pra fazer o
formulrio funcionar precisamos de muitas coisas:
Temos que exibir o formulrio. Podemos fazer isso simplesmente com um ``.
A linha acima precisa estar dentro de uma tag HTML form: <form method="POST">...
</form>
Precisamos de um boto Salvar . Fazemos isso com um boto HTML: <button

type="submit">Save</button>
E finalmente, depois de abrir a tag <form ...> precisamos adicionar um {% csrf_token

%} . Isso muito importante, pois isso que faz o nosso formulrio ficar seguro! O
DJango vai reclamar se voc esquecer de adicionar isso e simplesmente salvar o

formulrio:
Formulrios
121
Beleza, ento vamos ver como ficou o HTML post_edit.html :

{% block content %}
<h1>New post</h1>
<form method="POST" class="post-form">{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="save btn btn-default">Guardar</button>
</form>
{% endblock %}
Hora de atualizar! H! Seu formulrio apareceu!
Formulrios
122
Mas, espere um minuto! Quando voc digita alguma coisa nos campos title e text e
tenta salvar o que acontece?
Nada! Estamos novamente na mesma pgina e nosso texto sumiu... E nenhum post foi
adicionado. Ento o que deu errado?
A resposta : nada. Precisamos trabalhar um pouco mais na nossa view.
Salvando o formulrio
Abra blog/views.py mais uma vez. Atualmente tudo que temos na viso post_new :
form = PostForm()
Quando ns enviamos o formulrio, somos trazidos de volta para a mesma viso, mas
desta vez temos mais alguns dados no request , mais especificamente em request.POST
(o nome no tem nada com "post" de blog , tem a ver com o fato de que estamos
"postando" dados). Voc se lembra que no arquivo HTML nossa definio de <form> tem a
Formulrios
123
varivel method="POST" ? Todos os campos vindos do "form" estaro disponveis agora em

request.POST . Voc no deveria renomear POST para nada diferente disso (o nico outro
valor vlido para method GET , mas ns no temos tempo para explicar qual a
diferena).
Ento na nossa view ns temos duas situaes separadas para lidar. A primeira quanto
acessamos a pgina pela primeira vez e queremos um formulrio em branco. E a segunda,
quando ns temos que voltar para a view com todos os dados do formulrio que ns
digitamos. Desse modo, precisamos adicionar uma condio (usaremos if para isso).
if request.method == "POST":
[...]
else:
form = PostForm()
Est na hora de preencher os pontos [...] . Se method POST ento ns queremos

construir o PostForm com os dados que veem do formulrio, certo? Ns iremos fazer
assim:
form = PostForm(request.POST)
Fcil! Prxima coisa verificar se o formulrio est correto(todos os campos requeridos so

definidos e valores incorretos no sero salvos). Fazemos isso com form.is_valid() .
Verificamos se o formulrio vlido e se estiver tudo certo, podemos salv-lo!
if form.is_valid():
post = form.save(commit=False)
post.author = request.user
post.save()
Basicamente, temos duas coisas aqui: Salvamos o formulrio com form.save e

adicionados um autor(desde que no haja o campo author em PostForm , e este campo
obrigatrio!). commit=False significa que no queremos salvar o modelo Post ainda queremos adicionar autor primeiro. Na maioria das vezes voc ir usar form.save() , sem
commit=False , mas neste caso, precisamos fazer isso. post.save() ir preservar as
alteraes(adicionando autor) e criado um novo post no blog!

Finalmente, no seria fantstico se ns pudssemos imediatamente ir pgina de
post_detail para o recm-criado blog post, certo? Para fazer isso ns precisaremos de
mais uma importao:
Formulrios
124
from django.shortcuts import redirect
Adicione-o logo no incio do seu arquivo. E agora podemos dizer: v para a pgina
post_detail para um recm-criado post.
return redirect('blog.views.post_detail', pk=post.pk)
blog.views.post_detail o nome da view que queremos ir. Lembre-se que essa view
exige uma varivel pk ? Para passar isso nas views usamos pk=post.pk , onde post o
recm-criado blog post.
Ok, ns falamos muito, mas provavelmente queremos ver o que toda a view ir parecer
agora, certo?
form = PostForm(request.POST)
if form.is_valid():
post.save()
else:
form = PostForm()
Vamos ver se funciona. V para o pgina http://127.0.0.1:8000/post/novo /, adicione um

title e o text , salve... e voil! O novo blog post adicionado e ns somos
redirecionados para a pgina de post_detail !

Voc provavelmente notou que ns no estamos definindo a data de publicao em tudo.
Vamos introduzir um boto de publicao em Django Girls Tutorial: Extenses.
Isso incrvel!
Validao de formulrios
Agora, ns lhe mostraremos como os frmularios so legais. O post do blog precisa ter os
campos title e text . Em nosso modelo Post no dissemos (em oposio a
published_date ) que esses campos no so necessrios, ento Django, por padro,
espera-os a ser definido.

Tente salvar o formulrio sem title e text . Adivinhe o que vai acontecer!
Formulrios
125
Django est tomando conta de validar se todos os campos de nosso formulrio esto
corretos. No incrvel?
Como recentemente usamos a interface de administrao do Django o sistema
entende que estamos logados. Existem algumas situaes que poderiam levar a
sermos deslogados do sistema (fechar o navegador, reiniciar banco de dados etc.). Se
voc perceber que erros esto aparecendo ao criar um post que referencia um usurio
que no est logado, v para a pgina admin http://127.0.0.1:8000 e logue novamente.
Isso vai resolver o problema temporariamente. H um ajuste permanente esperando
por voc em lio de casa: adicionar segurana no seu site!, captulo aps o tutorial
principal.
Formulrios
126
Editando o formulrio
Agora sabemos como adicionar um novo formulrio. Mas e se quisermos editar um j
existente? muito semelhante ao que fizemos. Vamos criar algumas coisas importantes
rapidamente (se voc no entender alguma coisa - voc deve perguntar a seu professor ou
veja os captulos anteriores, j cobrimos todas essas etapas anteriormente).
Abra blog/templates/blog/post_detail.html e adicione a linha:
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-p
Agora o modelo estar parecido com:

{% block content %}
<div class="date">
{% if post.published_date %}
{% endif %}
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphic
</div>
<h1>{{ post.title }}</h1>
{% endblock %}
Em blog/urls.py adicionamos esta linha:

url(r'^post/(?P<pk>[0-9]+)/edit/$', views.post_edit, name='post_edit'),
Ns reutilizaremos o modelo blog/templates/blog/post_edit.html , ento a ltima coisa que

falta uma view.
Vamos abrir blog/views.py e adicionar no final do arquivo:
Formulrios
127
def post_edit(request, pk):

post = get_object_or_404(Post, pk=pk)
form = PostForm(request.POST, instance=post)
if form.is_valid():
post.save()
else:
form = PostForm(instance=post)
Isso quase exatamente igual a nossa view de post_new , certo? Mas no totalmente.
Primeira coisa: passamos um parmetro extra da url pk . Em seguida: pegamos o modelo
Post que queremos editar com get_object_or_404 (Post, pk=pk) e ento, quando criamos
um formulrio passamos este post como uma instncia , tanto quando salvamos o
formulrio:
form = PostForm(request.POST, instance=post)
como quando ns apenas abrimos um formulrio com este post para editar:
form = PostForm(instance=post)
Ok, vamos testar se funciona! Vamos para a pgina post_detail . Deve haver um boto
editar no canto superior direito:
Formulrios
128
Quando voc clicar nele voc ver o formulrio com a nossa postagem:
Sinta-se livre para mudar o ttulo ou o texto e salvar as mudanas!

Parabns! Sua aplicao est ficando cada vez mais completa!
Formulrios
129
Se voc precisar de mais informaes sobre formulrios do Django voc deve ler a
documentao: https://docs.djangoproject.com/en/1.8/topics/forms/
Mais uma coisa: hora de implantar!

Vamos ver se tudo isso funciona na PythonAnywhere. Tempo para outro deploy!
Primeiro, commit o seu novo cdigo e coloque no Github
$ git status
$ git add -A .
$ git status
$ git push
Ento, em um console PythonAnywhere Bash:

$ cd my-first-blog
$ git pull
Finalmente, pule para a Web tab e aperte Reload.

E deve ser isso! Parabns :)
Formulrios
130
Domnio
PythonAnywhere te deu um domnio gratuito, mas talvez voc no queira ter ".
pythonanywhere.com" no final da URL do seu blog. Talvez voc queira seu blog apenas
"www.infinite-kitten-pictures.org" ou "www.3d-printed-steam-engine-parts.com" ou
"www.antique-buttons.com" ou "www.mutant-unicornz.net", ou seja o que vai ser.
Aqui vamos falar um pouco sobre onde obter um domnio e como lig-lo a seu aplicativo da
web em PythonAnywhere. No entanto, voc deve saber que a maioria dos domnios custam
dinheiro e PythonAnywere tambm cobra uma taxa mensal para usar seu prprio nome de
domnio -- no muito dinheiro, no total, mas isso provavelmente algo que voc s quer
fazer se voc est realmente comprometido!
Onde registrar um domnio?

Um domnio normal custa mais ou menos 15 dlares por ano. Existem domnios mais caros
e mais baratos dependendo do provedor. Existem uma srie de empresas das quais voc
pode comprar um domnio: uma simples pesquisa no google pode listar uma srie delas.
O nosso favorito o I want my name (eu quero meu nome). Eles anunciam seu servio
como "gesto de domnio indolor", e ele, realmente, indolor.
Voc tambm pode obter domnios gratuitamente. dot.tk um lugar para pegar um, mas
voc deve estar ciente de que domnios grtis s vezes parecem muito baratos -- se seu
site vai ser para um profissional de negcios, voc deve pensar em pagar por um domnio
"correto" que termina em .com .
Como apontar seu domnio no

PythonAnywhere
Se voc passou por iwantmyname.com, clique em domnios no menu e escolha seu
domnio recm-adquirido. Em seguida, localize e clique no link manage DNS records :
Agora voc precisa localizar este formulrio:
Domnio
131
E preencher com os seguintes detalhes:-Hostname: www - tipo: CNAME - valor: seu

domnio de PythonAnywhere (por exemplo djangogirls.pythonanywhere.com) - TTL: 60
Clique no boto Adicionar e salve as mudanas na parte de baixo.

Nota Se voc usou um provedor de domnio diferente, o UI exata para encontrar o seu
DNS / configuraes de CNAME ser diferente, mas seu objetivo o mesmo: para
configurar um CNAME que aponta seu novo domnio no
yourusername.pythonanywhere.com .
Pode levar alguns minutos para o seu domnio comear a trabalhar, ento seja paciente!
Configure o domnio atravs de um web app na

PythonAnywhere.
Voc tambm precisa dizer PythonAnywhere que voc deseja usar o seu domnio
personalizado.
V para a pgina PythonAnywhere contas e upgrade sua conta. A opo mais barata (um
plano de "Hacker") bom para comear, voc pode sempre atualiz-lo mais tarde quando
voc ficar super famoso e tiver milhes de acessos.
Em seguida,v na Web tab e anote algumas coisas:
Copie o caminho para seu virtualenv e coloque em um lugar seguro
Clique para seu arquivo de configurao do wsgi, copie o contedo e cole em um
lugar seguro.
Em seguida, exclua seu antigo web app. No se preocupe, isso no vai excluir nada do seu
cdigo, ele apenas ir se desligar do domnio yourusername.pythonanywhere.com. Em
seguida, crie um novo aplicativo web e siga estes passos:
Digite seu nome de domnio novo
Escolha "manual configuration"
Escolha Python 3.4
E isso!
Domnio
132
Quando voc tiver voltado para a web tab.

Colar o caminho virtualenv que voc salvou antes
Clicar no arquivo de configurao wsgi e colar o contedo do seu arquivo de
configurao antigo
Clique em reload web app e voc deve encontrar seu site live no novo domnio!
Se voc tiver qualquer problema, clique no link "Enviar feedback" no site PythonAnywhere,
e um dos seus administradores amigveis vai estar l para ajud-lo.
Domnio
133
O que vem depois?

Parabns! Voc demais. Estamos orgulhosos! <3
O que fazer agora?

Faa uma pausa e relaxe. Voc acabou de fazer algo realmente grande.
Depois disso:
Siga Django girls no Facebook ou Twitter para ficar atualizada
Voc pode recomendar outras fontes?

Sim! Primeiro, v em frente e tente nosso outro livro, chamado Django Girls Tutorial:
Extensions.
Depois voc pode tentar as fontes listadas abaixo. Todas elas so recomendadas!
Django's official tutorial
New Coder tutorials
Code Academy Python course
Code Academy HTML & CSS course
Django Carrots tutorial
Learn Python The Hard Way book
Getting Started With Django video lessons
Two Scoops of Django: Best Practices for Django book
O que vem depois?
134

Django Girls Tutorial - Aprenda a criar seu primeiro site

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Django Girls Tutorial - Aprenda a criar seu primeiro site

Uploaded by

Copyright:

Available Formats

Django

Como funciona a internet?

Introduo linha de comando

Views - hora de criar!

Django ORM (Querysets)

Dados dinmicos nos templates

CSS - Deixe mais bonito

Amplie sua aplicao

O que vem depois?

Tutorial Django Girls

O que voc ir aprender durante o tutorial?