Beruflich Dokumente
Kultur Dokumente
of Contents
Introduo 0
Como funciona a internet? 1
Introduo linha de comando 2
Instalao do Python 3
Editor de Cdigo 4
Introduo ao Python 5
O que Django? 6
Instalao do Django 7
Criando um projeto 8
Modelos do Django 9
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
Tutorial Django Girls
Translation
This tutorial has been translated from English to Portuguese by a group of awesome
volunteers.
Adailton do Nascimento Adam Victor Nazareth Brandizzi Antonio Luis Annanda Sousa
Adjamilton Junior Bernardo Fontes Camilla Achutti Carla Suarez Cleiton Lima clemente.jnr
danieltex Eric Hideki Flavio Barros Fabio C. Barrionuevo da Luz ffabiorj Gabriela Cavalcante
da Silva Leandro Silva Araujo Lucas Magnum 1pedro Joao Luiz Lorencetti
Katyanna Moura Kleber C Pinheiro Leandro Barbosa Leonardo Alves dos Santos Marcel
Ribeiro Dantas joepreludian Rafael Biagioni de Fazio Pablo Palacios Paulo Alem Raony
Guimares Correo do Carmo Lisboa Cardenas Vivian Macedo Willie Lawrence 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.
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!
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.
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.
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 :).
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.
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
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:
>
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 Olas-
MacBook Air: ~ ola$ antes do sinal do prompt isto estar 100% correto. Neste tutorial
$ whoami
ou
> whoami
$ 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
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
> 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.
$ 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
...
Entrar em outra pasta
Talvez a gente queira entrar na nossa pasta Desktop?
$ cd Desktop
Windows:
> cd Desktop
$ pwd
/Users/olasitarska/Desktop
Windows:
> cd
C:\Users\olasitarska\Desktop
Aqui est!
$ mkdir djangogirls
Windows:
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.
$ cd ..
Windows:
> cd ..
Fazendo cd para .. ns mudaremos do diretrio atual para o diretrio pai (que significa
o diretrio que contm o diretrio atual).
$ pwd
/Users/olasitarska/Desktop
Windows:
> cd
C:\Users\olasitarska\Desktop
$ rm -r djangogirls
Windows:
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?:)
$ exit
Windows:
> exit
Legal, n?:)
Sumrio
Aqui vai uma lista de alguns comandos teis:
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!
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
(https://github.com/ggcarrots/django-carrots)
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!
$ 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:
Fedora
Use o seguinte comando no terminal:
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:
$ 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.
Editor de Cdigo
Voc est prestes a escrever sua primeira linha de cdigo, ento hora de baixar um editor
de cdigo!
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
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. :)
Introduo ao Python
Parte deste captulo baseado nos Tutoriais de Geek Girls Carrots
(https://github.com/ggcarrots/django-carrots).
Interpretador Python
Para comear a brincar com Python ns precisamos abrir uma linha de comando no seu
computador. Voc j deve saber como fazer isso -- voc aprendeu isso no captulo
Introduo Linha de Comando. 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.
>>>
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
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.
>>> "Ola" * 3
'OlaOlaOla'
Se voc precisa colocar uma apstrofe dentro de sua string, existem duas maneiras de
fazer.
Legal, hein? Para ver seu nome em letras maisculas, basta digitar:
>>> "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:
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:
>>> 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.
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.
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:
>>> nome
'Ola'
Yippee! Sua primeira varivel! :) Voc sempre pode mudar o seu valor:
>>> nome = "Sonja"
>>> nome
'Sonja'
>>> len(nome)
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!
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:
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 :)
>>> []
[]
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:
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(loteria)
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:
>>> loteria.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:
>>> print(loteria)
[3, 12, 19, 30, 42, 59]
Como voc pode ver, os nmeros na nossa lista esto ordenados do menor para o maior.
Parabns!
>>> loteria.reverse()
>>> print(loteria)
[59, 42, 30, 19, 12, 3]
Moleza n? Se voc quiser adicionar alguma coisa sua lista, voc pode fazer isto
digitando o seguinte comando:
>>> loteria.append(199)
>>> print(loteria)
[59, 42, 30, 19, 12, 3, 199]
Se voc quiser mostrar apenas o primeiro nmero voc pode usar ndices. 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(loteria[0])
59
>>> print(loteria[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 :
>>> {}
{}
Agora, tente escrever o seguinte comando (tente substituir com as suas prprias
informaes tambm):
>>> participante = {'nome': 'Ola', 'pais': 'Polonia', 'numeros_favoritos': [7, 42, 92]
}
Com esse comando, voc acabou de criar uma varivel chamada participant com trs
pares de chave-valor:
e numeros_favoritos apontam para [7, 42, 92] (uma list com trs nmeros nela).
>>> print(participante['nome'])
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!
>>> participante['idade']
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
KeyError: 'idade'
Olha, outro erro! Esse um KeyError. Python bastante prestativo e te diz que a chave
'idade' no existe 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.
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(participante)
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 'numeros_favoritos' , basta digitar o seguinte
comando:
Alm disso voc pode mudar o valor associado com uma chave j criada no dicionrio.
Digite:
Como voc pode ver, o valor da chave 'pais' foi alterado de 'Polonia' para
'Alemanha' . :) 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
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
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.
>>> 6 >= 12 / 2
True
>>> 3 <= 2
False
> e < so fceis, mas o que >= e <= significam? Leia eles da seguinte forma:
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
Aqui vemos que assim como na expresso, Python no capaz de comparar um nmero
( int ) e uma string ( str ). 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.
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.)
>>> a = 2 > 5
>>> a
False
True or 1 == 1
1 != 2
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:
Para sair do interpretador Python que estamos usando, simplesmente digite o ~ exit() ~
funo:
>>> exit()
$
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 :)
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.
cd /Users/<your_name>/Desktop
No Linux, ser assim (a palavra "Desktop" pode ser traduzido para seu idioma):
cd /home/<your_name>/Desktop
cd C:\Users\<your_name>\Desktop
Tudo bem! Voc acabou de seu primeiro programa em python que foi salvo em um arquivo.
Se sente tima?
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.
if 3 > 2:
$ python3 python_intro.py
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!')
Voc percebeu que identamos a prxima linha com 4 espaos? Precisamos fazer isso para
que o Python saiba qual cdigo ser executado se o resultado for True. Voc pode fazer
com 1 espao, mas quase todos os programadores Python fazem com 4 para deixar as
coisas arrumadas. Um nico tab tambm vai contar como 4 espaos.
$ python3 python_intro.py
It works!
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 realmente maior que 2')
else:
print('5 no maior que 2')
$ python3 python_intro.py
5 realmente 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:
$ python3 python_intro.py
Hey Sonja!
Sumrio
Nos ltimos trs exerccios voc aprendeu:
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()
Voc pode se perguntar por que escrevemos o nome da funo na parte inferior do arquivo.
Isto porque Python l o arquivo e executa de cima para baixo. Ento, para usar a nossa
funo, temos re-escrev-lo na parte inferior.
$ python3 python_intro.py
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:
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
$ python3 python_intro.py
Traceback (most recent call last):
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:
$ python3 python_intro.py
Hi Ola!
E se mudarmos o nome?
hi("Sonja")
e execut-lo:
$ python3 python_intro.py
Hi Sonja!
Agora, o que acha que vai acontecer se voc escrever outro nome l? (Sem ser 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,
ou em portugus, no se repita) 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")
$ python3 python_intro.py
Hi Rachel!
Laos
J a ltima parte. Foi rpido, no? :)
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:
def hi(name):
print('Hi ' + name + '!')
e quando execut-lo:
$ python3 python_intro.py
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 .
1
2
3
4
5
range uma funo que cria uma lista de nmeros que se seguem um aps o outro
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 orgulhosa de
si mesma. Estamos definitivamente orgulhosas 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. :)
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.
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.
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.
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
Para este tutorial usaremos um novo diretrio djangogirls do seu diretrio home:
mkdir djangogirls
cd djangogirls
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:
C:\Usurio\Nome\djangogirls> C:\Python34\python -m venv myvenv
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:
myvenv o nome da sua virtualenv . Voc pode usar qualquer outro nome, mas
C:\Usurio\Nome\djangogirls> myvenv\Scripts\activate
no Windows, ou:
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$
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: == ).
no Windows
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
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!
Seu primeiro projeto Django!
Parte deste captulo baseado nos tutoriais do Geek Girls Carrots
(https://github.com/ggcarrots/django-carrots).
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.
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?):
no Windows:
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.
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. America/Sao_Paulo )
Em settings.py, localize a linha que contm TIME_ZONE e modifique para escolher seu
prprio fuso horrio:
TIME_ZONE = 'America/Sao_Paulo'
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:
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 :
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
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?
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.
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
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?
Modelo do Django
Sabendo o que um objeto , ns criaremos um modelo no Django para a postagem do blog.
Voc pode pensar em um modelo de banco de dados como uma planilha com colunas
(campos) e linhas (dados).
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',
)
Vamos abrir blog/models.py , remova tudo dele e escreva o cdigo como este:
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
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 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
um nmero? Uma data? Uma relao com outro objeto, por exemplo, um usurio?).
caracteres.
models.TextField - este para textos longos sem um limite. Ser ideal para um
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!
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:
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!
Administrao
Para adicionar, editar e remover postagens que ns criamos usaremos o Django admin.
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
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
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):
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.
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!
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.
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
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:
$ 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:
*.pyc
__pycache__
myvenv
db.sqlite3
.DS_Store
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)
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:
Agora precisamos ligar o repositrio Git no seu computador com o no GitHub.
Digite seu GitHub username e senha, e voc deve ver algo como isto:
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 :)
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.
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
Vamos descobrir um pouco mais sobre arquivos estticos mais tarde no tutorial, quando
vamos editar o CSS para o nosso site.
/home/edith/my-first-blog/static
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...
opying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/admi
n/static/admin/js/actions.min.js'
Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/adm
in/static/admin/js/inlines.min.js'
[...]
Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/adm
in/static/admin/css/changelists.css'
Copying '/home/edith/.virtualenvs/mvenv/lib/python3.4/site-packages/django/contrib/adm
in/static/admin/css/base.css'
62 static files copied to '/home/edith/my-first-blog/static'.
Ento ns vamos inicializar o banco de dados no servidor tal como fizemos no seu prprio
computador, com migrate e createsuperuser :
Definindo o virtualenv
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.
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:
import os
import sys
os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'
Nota no se esquea de substituir em seu prprio nome de usurio onde diz <your-
username>
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".
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
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!
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.
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
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.
As linhas que comeam com # so comentrios - isso significa que essas linhas no
sero executadas pelo Python. Muito til, no?
url(r'^admin/', include(admin.site.urls)),
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:
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 /
$ indica o final da URL significando que apenas sequncias terminando com o / iro
corresponder a esse padro
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 ( '' ).
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('blog.urls')),
]
blog.urls
Crie um novo arquivo vazio blog/urls.py . Tudo bem! Adicione estas duas primeiras linhas:
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 /'.
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/
Views - hora de criar!
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.
blog/views.py
OK, vamos abrir o arquivo e ver o que tem nele:
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 .
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.
blog
templates
blog
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.
<html>
<p>Hi there!</p>
<p>It works!</p>
</html>
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
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
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>
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
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> .
<br /> pula para a prxima linha (voc no pode colocar nada dentro de br)
essa!
<div></div> define uma seo da pgina
<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 vest
ibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur
sus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</
p>
</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 vest
ibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cur
sus commodo, tortor mauris condimentum nibh, ut f.</p>
</div>
</body>
</html>
O que ns realmente queremos fazer exibir postagens reais que foram adicionadas no
Django admin - e isso o que faremos em seguida.
$ git status
Verifique se voc est no diretrio djangogirls e vamos dizer ao git para incluir todas as
mudanas dentro deste diretrio:
$ 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.
Note 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
$ 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.
Sua atualizao deve estar live! V em frente e atualize seu site no navegador. As
alteraes devem ser visveis :)
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.
O Shell do Django
Abra o terminal e digite:
(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()
Traceback (most recent call last):
File "<console>", line 1, in <module>
NameError: name 'Post' is not defined
Oops! Um erro apareceu. Ele nos diz que no existe algo chamado Post. verdade -- ns
esquecemos de import-lo primeiro!
>>> Post.objects.all()
[<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:
Mas aqui temos um ingrediente que faltava: me . Precisamos passar uma instncia de
User modelo como autor. Como fazer 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.
>>> Post.objects.all()
[<Post: Sample title>]
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
>>> Post.objects.filter(author=me)
[<Post: Sample title>, <Post: Post number 2>, <Post: My 3rd post!>, <Post: 4th title o
f 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>]
Voc tambm pode obter uma lista de todos os posts publicados. Fazemos isso filtrando
todos os posts com published_date definido no passado:
>>> 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 o
f post>]
>>> 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()
$
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.
Precisamos abrir o nosso blog/views.py . At agora a view post_list se parece com isso:
def post_list(request):
return render(request, 'blog/post_list.html', {})
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
E o que vem agora? Para pegar os posts reais do model Post ns precisamos de uma
coisa chamada QuerySet .
QuerySet
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')
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('publishe
d_date')
return render(request, 'blog/post_list.html', {})
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).
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('publishe
d_date')
return render(request, 'blog/post_list.html', {'posts': posts})
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!
Para exibir uma varivel no Django template, ns usamos colchetes duplos com o nome da
varivel dentro, exemplo:
{{ posts }}
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:
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>
Tudo que voc pe enrte {% for %} e {% endfor %} ser repetido para cada objeto na
lista. Atualize sua pgina:
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.
$ git status
$ git add --all .
$ 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
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.
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.
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 ):
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!
J parecendo melhor!
Fazemos isso atravs da criao de uma pasta chamada static dentro do aplicativo do
blog:
djangogirls
blog
migrations
static
mysite
djangogirls
blog
static
css
blog.css
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 .
h1 a {
color: #FCA205;
}
h1 a um seletor de CSS. Isso significa que ns estamos aplicando nossos estilos para
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 :
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_p
age">
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:
{% load staticfiles %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boo
tstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boo
tstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
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" type="text/css">
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">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
E agora, adicione uma classe post em sua div que contm um post de blog.
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</div>
.content {
margin-left: 40px;
}
.date {
float: right;
color: #828282;
}
.save {
float: right;
}
.post {
margin-bottom: 70px;
}
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.
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!
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:
{% load staticfiles %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boo
tstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/boo
tstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
Ento em base.html , substitua todo seu <body> (tudo entre <body> e </body> ) com
isso:
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
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.
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
{% endblock content %}
Hora de praticar!
A primeira que precisamos no nosso blog , obviamente, uma pgina para mostrar uma
postagem, certo?
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaks }}</p>
</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:
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:
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:
urlpatterns = [
url(r'^$', views.post_list),
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/
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 (lembre-
se: minsculo e _ ao invs de espaos em branco!). Por exemplo em vez de (?P<pk>[0-
9]+) podemos ter uma varivel post_id , ento esta parte ficaria como: (?P<post_id>[0-
9]+) .
Razovel! Vamos atualizar a pgina: http://127.0.0.1:8000 / Boom! Ainda outro erro! Como
esperado!
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!
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.
Ah no! Outro erro! Mas ns j sabemos como lidar com isso, n? Precisamos adicionar um
template!
{% block content %}
<div class="post">
{% if post.published_date %}
<div class="date">
{{ post.published_date }}
</div>
{% endif %}
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaks }}</p>
</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
Ok, podemos atualizar nossa pgina e ver se Page not found j se foi.
Yay! Funciona!
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 --all .
$ git status
$ git commit -m "Added views to create/edit blog post inside the site."
$ git push
$ cd my-first-blog
$ git pull
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.
Assim como toda parte importante do Django, forms tem seu prprio arquivo: forms.py .
blog
forms.py
class PostForm(forms.ModelForm):
class Meta:
model = Post
fields = ('title', 'text',)
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 ).
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 mostr-
lo em um template.
Ento, mais uma vez, ns iremos criar: um link para a pgina, uma URL, uma view e um
template.
URL
Vamos abrir o arquivo blog/urls.py e escrever:
urlpatterns = [
url(r'^$', views.post_list),
url(r'^post/(?P<pk>[0-9]+)/$', views.post_detail),
url(r'^post/new/$', views.post_new, name='post_new'),
]
post_new view
Hora de abrir o arquivo blog/views.py e adicionar as linhas seguintes com o resto das
linhas from :
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>
{% extends 'blog/base.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 %}
Nada! Estamos novamente na mesma pgina e nosso texto sumiu... E nenhum post foi
adicionado. Ento o que deu errado?
Salvando o formulrio
Abra blog/views.py mais uma vez. Atualmente tudo que temos na viso post_new :
def post_new(request):
form = PostForm()
return render(request, 'blog/post_edit.html', {'form': form})
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
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()
form = PostForm(request.POST)
if form.is_valid():
post = form.save(commit=False)
post.author = request.user
post.published_date = timezone.now()
post.save()
Adicione-o logo no incio do seu arquivo. E agora podemos dizer: v para a pgina
post_detail para um recm-criado post.
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?
def post_new(request):
if request.method == "POST":
form = PostForm(request.POST)
if form.is_valid():
post = form.save(commit=False)
post.author = request.user
post.published_date = timezone.now()
post.save()
return redirect('blog.views.post_detail', pk=post.pk)
else:
form = PostForm()
return render(request, 'blog/post_edit.html', {'form': form})
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,
Django est tomando conta de validar se todos os campos de nosso formulrio esto
corretos. No incrvel?
{% extends 'blog/base.html' %}
{% block content %}
<div class="date">
{% if post.published_date %}
{{ post.published_date }}
{% endif %}
<a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="gl
yphicon glyphicon-pencil"></span></a>
</div>
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaks }}</p>
{% endblock %}
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:
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:
Quando voc clicar nele voc ver o formulrio com a nossa postagem:
$ git status
$ git add --all .
$ git status
$ git commit -m "Added views to create/edit blog post inside the site."
$ git push
$ cd my-first-blog
$ git pull
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!
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 .
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!
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, 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:
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.
O que vem depois?
Parabns! Voc demais. Estamos orgulhosos! <3
Depois disso:
Depois voc pode tentar as fontes listadas abaixo. Todas elas so recomendadas!