Up next in 10
Nesta primeira aula, você aprenderá o que é Django, como configurar seu ambiente de desenvolvimento e criar seu primeiro projeto. Ao final, você terá um servidor rodando e verá a página padrão do Django no navegador.
Website para baixar otemplate usado: https://startbootstrap.com/theme/clean-blog
Objetivos da aula:
- Entender o padrão MTV (Model-Template-View)
- Criar views básicas
- Criar templates HTML
- Configurar URLs
- Adicionar arquivos estáticos (CSS)
Pré-requisitos:
- Python instalado (versão 3.8 ou superior)
- Editor de código (recomendamos VS Code)
- Conhecimento básico de linha de comando
💡 Apoie o Canal | Faça um Pix ❤️
[email protected]
✅ 📙 Matérias de Estudo – Acesse gratuitamente todos os materiais de estudo diretamente no site.
🔗 Acesse aqui https://www.usandopy.com/pdfs/
✅ 📗 Ebook Práticos em Python – fortaleça seus conhecimentos!
🔗 Acesse aqui https: https://www.usandopy.com/livros/
Apoie este canal para obter acesso aos seguintes benefícios:
https://www.youtube.com/channel/UCMqGy4xIIGs01ZVcBv0B8Cw/join
Show More Show Less View Video Transcript
0:00
Olá pessoal, se bem-vindo ao canal João
0:01
aqui falando. Vamos dar sequência ao
0:03
nosso curso de Python Jungle, OK?
0:06
web criando apps. Então, da vez passada
0:10
ficamos aqui onde nós tivemos esse erro
0:11
de template template does not exist. Ok?
0:15
Então, como eu disse ou menos e como
0:16
havíamos dito aqui, o este tipo de
0:20
response ele retorna um texto puro, OK?
0:22
Para o nosso template. Agora já o
0:25
render, ele nos retorna um template, OK?
0:28
retorno algumas informações, alguns
0:30
objetos para um template. Agora nós
0:32
obtemos esse zero aqui porque nós
0:35
tentamos acessar algo que não existe,
0:37
OK? melhor, tentamos enviar informação
0:39
em algo que não existe. Pois esse
0:41
template aqui sobre ponto html, ele
0:43
simplesmente não existe do nosso
0:45
diretor. Como nós podemos ver aqui, no
0:47
nosso diretor, temos apenas isto aqui.
0:50
Veja, para que nós possamos superar esse
0:51
mesmo erro aqui que nós obtevemos, nós
0:54
devemos criar esse template. Então, em
0:57
jungle, para que nós possamos usar
0:58
sistema de template, é o seguinte, veja,
1:00
primeiramente nós teremos que criar esse
1:04
mesmo template, OK? melhor, melhor
1:06
dizer, nós viremos aqui no nosso
1:07
projeto, vamos criar uma página, não é
1:10
bem página, uma página chamada
1:11
templates, OK? Então, veremos aqui
1:12
dentro do nosso projeto, vamos criar uma
1:14
pasta chamada templates dessa forma
1:16
aqui. Tens que escrever do jeito que
1:18
vamos escrever aqui, o quê? Templates,
1:19
termina com s, ok? Templates, OK? Dá só
1:24
um enter. Agora, dentro do nosso
1:26
templates, vamos criar o nosso documento
1:29
chamado sobre. Então nós vamos ter,
1:32
vamos ter primeiramente algo assim do
1:34
gênero, OK? base ponto eh html.
1:39
OK? Depois disso, vamos criar mais um
1:41
outro template, um outro OK template
1:44
chamado home, que é a nossa página
1:47
inicial, OK? Pon html.
1:50
Ok? E apóis isso, vamos criar o último
1:53
que é o nosso sobre, o qu? sobre
1:57
p html dessa forma aqui.
2:02
Onde é que ele foi? Opa, acho que acabei
2:04
por não criar. OK. Então, vai ser o
2:06
nosso sobre
2:08
p html.
2:10
Perfeito. Então, já criamos os nossos
2:13
três templates. Deixa-me só fechar aqui,
2:15
pois ele abriu muita coisa. É, o que é
2:17
isso? You want to save change, blá blá
2:20
blá. Não, I want to save. que close this
2:24
one. Perfeito, já criamos a nossa pasta
2:26
template. Agora para que o sistema de
2:27
templates possa funcionar, é necessário
2:29
também que nós configuremos ele. Então,
2:31
para que nós possamos configurar é o
2:32
seguinte, devemos aqui no nosso
2:34
setting.p, vamos descer um pouquinho.
2:37
Tem aqui essa parte que templates, veja,
2:39
de vez em quando não é necessário nós
2:40
fazermos isso, pois aquilo funciona
2:42
mais. É sempre aconselhável fazermos.
2:44
Não devemos ver aqui onde tem essa fta
2:46
aqui di que significa diretor tipo uma
2:48
abreviação aqui dentro vamos passar algo
2:51
entre parênteses dessa forma aqui ok
2:55
sai daí dessa forma aqui algo entre
2:58
parentes vamos passar o nosso templates
3:02
dessa forma aqui templates para que ele
3:03
possa reconhecer
3:08
vamos agora salvar vamos salvar isto.
3:10
Salvei vamos lá ver que no servidor se
3:13
houve algum erro ou não. Ele tá
3:14
processando
3:16
um. OK. Nada não, algum erro que tá
3:19
vamos agora depois de nós salvamos isso,
3:21
vamos regressar aqui. Vamos tentar dar
3:24
um refresh para ver se vai funcionar ou
3:25
não. Se eu de um refresh,
3:28
pum, ele contin dizer template e does
3:31
not exist. Ok, deixa-me só dar mais um.
3:34
Perfeito. Ok.
3:36
Agora viremos aqui, vamos voltar aqui no
3:38
nosso website que já temos o nosso
3:40
templates.
3:42
Eh, vamos vir aqui salvar também aqui
3:46
temos o sobre. HTML, onde é que está o
3:50
sobre
3:52
html? Perfeito. Após de nós salvarmos,
3:55
viremos de novo aqui, vamos rodar de
3:57
novo isto, OK? Então, como já salvamos,
3:59
então aqui, vamos voltar aqui no
4:01
templates, OK? Vamos usar essa vírula
4:04
alta aqui, OK? Lembora que essa aí
4:05
também funciona, mas já vamos usar essa
4:06
aqui, pessoal, para evitar conflitos,
4:08
futuros conflitos, vamos assim dizer.
4:10
Vem esse, esse sai é o meu teclado está
4:12
em inglês, eu não faço a mínima ideia
4:14
onde que isto é essa eh vi apost ou
4:18
aposto ou vías altas simples, onde é que
4:20
ele está. OK, vamos salvar.
4:24
Após salvar, vamos verificar aqui. Tá
4:26
tudo bom? E agora vamos ver aqui de
4:29
novo, tentar contar para ver o que vai
4:30
acontecer. Tá mesmo? Então, deixa-me só
4:32
ver onde é que
4:35
Então, nós contamos. Deixa-me tentar
4:37
fazer a leitura aqui. Ele disse Python
4:39
blá blá linha 11 sobre o que que ele nos
4:42
diz? Render request vírgula sobre HTML.
4:45
Hum. OK. Ele está aqui dos views na
4:47
linha 11 a 1. Viremos aqui. Views. OK.
4:53
Ah, estamos aqui. Página sobre ele
4:55
continua a dar erro. Estamos dizer que o
4:57
erro está aqui, mas está tudo pronto.
4:59
Aqui está sobre ponto html. Sobre ponto
5:03
html. Então esses zeros, como eu disse,
5:05
de vez em quando acontece sempre é por
5:07
isso que vai em views, vai nos settings
5:10
e vai também nos URL, tenta salvar de
5:12
novo ou de vez em quando desligar mesmo
5:14
o servidor e rodar de novo o servidor.
5:17
Então salvei isso. Vamos lá ver. Ele
5:19
está processando. Perfeito.
5:22
Vamos girar um pouquinho. E ele continua
5:25
a dar o mesmo erro. Então, deixa-me
5:26
tentar desligar o servidor e depois
5:28
ligar de novo para tal. Só control C vir
5:30
aqui. Desliguei. Vamos limpar tudo isto
5:33
aqui. Clear. E vamos rodar de novo para
5:36
ver.
5:40
Perfeito. Então, já rodou. Iremos aqui.
5:43
Vamos testar de novo para ver se vai nos
5:44
dar erro. E bum, ele continua nos daro.
5:47
Então, um uma forma boa de nós
5:49
superarmos. Veja, eu não vou cortar essa
5:51
parte de OK? Vamos tentar superar junto,
5:52
pois acredito que também terá muita
5:54
gente que vai obter zero. Eu não consigo
5:56
encontrar onde é que eu cometi erro,
5:57
embora que tá tudo certo.
6:00
Essa é a parte mais divertida da
6:01
programação. OK, vamos tentar superar
6:03
esse erro juntos. Perfeito. Eu virei
6:05
aqui. Vamos tentar agora fazer a
6:06
leitura. E o que é que a gente disse? E
6:08
raise a template chance. OK. Template
6:10
exception templates does not sobre ponta
6:13
html. Mas eu já criei aqui templates.
6:17
Perfeito. Vamos lá ver se nós estamos
6:19
aqui. Hum. Hum. OK. Ah, aqui tá tudo
6:24
pronto. Se eu vier aqui também tá tudo
6:27
pronto. Veja. Mas a única ideia que pode
6:30
me vir na cabeça aqui desse hero é o
6:32
seguinte. Veja, normalmente nós não
6:35
criamos templates dentro dessa página
6:37
aqui do que está escrito o meu projeto,
6:38
ok? Pois esse aqui é o projeto raiz.
6:41
Normalmente não se cria template aqui
6:42
dentro. OK. Então eu só estou criando o
6:43
template e mesmo também as views aqui
6:45
dentro.
6:47
Eh, como estamos numa fase inicial, OK?
6:49
razão pela qual que eu estou criando
6:50
tudo aqui de uma forma juntas, mas
6:52
depois um pouquinho mais à frente eu vou
6:55
separando as coisas quando vamos
6:56
aprender sobre como criar apps no
6:58
jungle, ok? Tipo apps separado que é um
7:00
outro conceito também. Então o que vem
7:03
está me vir na cabeça é o seguinte, eu
7:04
terei que remover essa pasta aqui
7:06
template e colocar aqui. Pois eu
7:08
acredito que esse diretor aqui ele
7:10
apenas está pegando tudo que estiver
7:12
aqui. Acho que não tá a pegar que está
7:14
estiver dentro do meu projeto. Então
7:16
para tal, acho que vou tentar remover
7:18
esse senhor aqui. Até não vou remover,
7:20
vou fazer só copy paste. É mais simples.
7:21
Então eu virei aqui no meu projeto,
7:24
eu vou manter esse senhor aqui, então,
7:26
mas apenas virei aqui, vou copiar e
7:28
regresso aqui no meu que e vou colocar
7:30
aqui nesse senhor, OK? Aqui nesse
7:32
diretor é uma cópia, não delitei o que
7:35
já existe. Após isto eu virei aqui.
7:39
Vamos tentar fazer um refresh para ver
7:40
se deu tudo certo ou não. Se eu dar um
7:42
refresh. Bom, funcionou exatamente. Ts a
7:46
ver? É mesmo isso que eu estava
7:48
pensando. Então, normalmente não se cria
7:50
o templates aqui. Eu fiz isso, como eu
7:52
disse, como é no início, estou tentando,
7:54
tipo, criar tudo junto só para explicar
7:56
os conceitos. Ainda não estamos a criar
7:58
propriamente um app, apenas só estamos a
8:00
aprender os conceitos de um diálogo. OK?
8:02
Então esse aqui ele não aqui dentro ele
8:05
não tá funcionando. Então eu vou vou
8:07
deleter esse senhor aqui, pois não
8:08
necessitamos dele. E vamos manter aqui.
8:10
Veja, normalmente o template principal
8:12
do projeto raiz cria-se aqui na no mesmo
8:15
diretor onde está o projeto raiz. Ok?
8:17
Então esse aqui é onde fica todos os
8:18
templates principais, tipo raiz do
8:21
projeto.
8:23
Colocando aqui vimos que funcionou.
8:25
Então como deu refresh, um ele
8:26
funcionou. Mas aqui no sobre não tem
8:28
nada. Ok. Então dessa forma já superamos
8:31
o nosso R. Veja, esse é a forma que tu
8:33
superas erros em jungle, pois vamos
8:36
obter bastante erros em jungle. É por
8:39
isso que eu estou a criar dessa forma,
8:40
tu de uma forma amigável, porque é tipo
8:42
como se tivéssemos a conversar para que
8:43
vocês possam entender como superar
8:45
certos zeros, principalmente as pessoas
8:47
que são do vibe coder, ok? Esses
8:49
pequenos zeros vão sempre acontecer.
8:50
Então aprenda como superar esses mesmos
8:53
zeros. Perfeito. Então já criamos os
8:55
nossos templates, OK? Agora para aqui
8:57
nós não possamos escrever alguns
8:58
códigos. Veja, os templates normalmente
9:00
eles funcionam da seguinte maneira.
9:01
Deixa-me só fechar isso. Vamos manter
9:03
aqui agora a nossa concentração
9:05
principal será aqui nos templates. OK?
9:08
Veja agora que já temos tudo funcional,
9:10
OK? Aqui que entra o verdadeiro poder de
9:12
templates, OK? O templates ele permite
9:15
com que nós possamos organizar tipo os
9:16
nossos códigos HTML de uma forma mais
9:18
organizada, OK? Por por app. Eu sei que
9:20
ainda não falamos sobre o que que são
9:22
apps em Jo, OK? Mas vamos só colocar
9:26
isso assim. O template permite com que
9:27
nós possamos organizar os códigos, tipo,
9:29
de uma forma separada. Tipo, se eu
9:31
gostaria de mexer o código que tem a ver
9:32
com a página inicial, eu apenas vou p do
9:35
meu home. Se eu gostar de mexer com ces
9:37
que tinha a ver com sobre, vou apenas lá
9:38
e c a ver com tipo a base principal,
9:41
tipo base, praticamente é um cor que
9:43
estará presente em todos os sítios, OK?
9:45
Então esse é o poder de templates. Para
9:47
que nós possamos entender isso melhor,
9:49
vamos ver na prática. Veja, nós vamos
9:51
reutilizar um template já existente,
9:54
HTML. tem um tem um blog, então que é o
9:58
seguinte, tu virás aqui, não se preocup
10:01
deixar esse link na descrição do vídeo.
10:04
Vamos
10:06
reutilizar esse templet aqui de web e
10:08
desse code vamos utilizar esse templete
10:11
aqui de um code HTML, OK? De bootsrap
10:15
que é o clean code. Ok, então viremos
10:17
aqui nesse virá aqui é só clicar aqui no
10:20
free download, ok? Vai clicar no free
10:22
download e ele vai fazer o download
10:23
desse mesmo template. OK. Acho que já
10:26
baixou. Se está baixando.
10:30
Ele tá me mostrando se baixou ou não.
10:31
Ah, tá aqui. Tá minha pergunta. Está
10:34
pedindo que eu escolher algum local.
10:35
Perfeito. Então eu vou já escolhendo o
10:37
nosso local mesmo. Vem aqui. Estamos
10:41
aqui em que página mesmo? Até
10:44
trabalhando usando Python
10:48
cursos
10:49
triangle. Ya, vamos colocar aqui mesmo.
10:51
Perfeito.
10:54
Ele está baixando o template.
10:57
Ou tá ali já baixa. Sim, já baixou o
10:59
template. Agora veremos aqui.
11:01
Eu creio que coloquei aqui. Não,
11:04
tutorial.
11:06
Sim, tá aqui o template. OK. Eu virei
11:08
aqui. Vamos agora desfazer isso aqui.
11:10
Strat itself.
11:14
Sim. Tá aqui. Vamos reutilizar esse
11:16
template boot. OK. É, vem para cá. a
11:20
mesma coisa.
11:23
OK. Aqui tá tudo que nós vamos
11:25
necessitar, OK? Tipo, aqui tem os
11:27
assets, OK? Os que iniciais, tipo
11:29
imagem, alguma assim do gênero, os corks
11:31
CSS
11:33
e java, os corpos JavaScript. E por fim
11:36
temos também os templatos, o about, o
11:39
contrato o index e também o post. OK?
11:43
Então nós vamos utilizar esses senhores
11:45
aqui. Então vamos só mudar aqui. Eh,
11:47
vamos dar tipo quê?
11:49
Vamos dar de nome para
11:54
template, OK? Vamos dar na template,
11:56
não. Vamos dar o nome para blog, OK?
11:59
Blog template. Blog_template.
12:02
Isso não é importante. OK? Tu pode dar
12:03
qualquer nome que vees. Então vamos
12:05
reutilizar esses senhores aqui. Então eu
12:07
vou levá-lo aqui dentro do nosso blog
12:09
onde estamos a fazer para evitar sempre
12:10
vir aqui toda hora. E acho que aqui para
12:12
já dá para acessar. Será onde é que ele
12:15
está mesmo? Hum. Se eu fizesse meu
12:18
template, não, ainda não me dá para
12:19
acessar. Ele deve estar aqui dentro do
12:21
meu projeto. Ok, então acho que aqui já
12:24
dá para seção onde é que ele está.
12:26
Perfecto. Blog template. Ok. Vamos
12:29
utilizar aqui então para que nósíamos
12:32
que, por exemplo, se nós vios aqui no
12:34
nosso website, eu já posso isso aqui.
12:36
Vou deixar esse link na descrição do
12:37
vídeo, não se preocupem que vocês também
12:38
possam fazer o download. Vamos fechar
12:40
então. Vamos voltar no nosso que é
12:42
principal do aplicativo na nossa página
12:44
inicial. Essa é a nossa página inicial
12:46
na nossa página inicial
12:49
vamos fazer o seguinte, OK? Veremos
12:51
primeiramente aqui na nossa views. Já
12:53
não vamos mais retornar um HP response,
12:55
OK? Vamos retornar esse senhor aqui. Tá
12:58
bem? Eu vou copiar isso, virei aqui e
13:01
vamos fazer isto, OK? Então vou remover
13:03
isso aqui. Já não preciso dele. E vamos
13:06
salvar. Agora aqui eu vou chamar-te
13:09
homem que temos aqui no nosso homem, OK?
13:10
Vamos chamar-te homem ponh salvamos.
13:15
Perfeito. Então esse é tudo que nós
13:16
vamosar. Temos a nossa página home, que
13:17
é a nossa página inicial e temos o
13:19
sobre. O nosso servidor está aí. Se nós
13:23
rodarmos aqui, OK, não está apresentar
13:25
nada. Então, para que nós possamos fazer
13:29
reutilizar esse template que já existe,
13:30
vamos fazer o seguinte. Eh, por enquanto
13:33
vem aqui no nosso base. Onde é que está
13:35
o base? Você fica aqui. Ah, esse aqui
13:39
pode sair. Então, estamos aqui no nosso
13:40
código base. Então, nós vamos aqui no
13:42
nosso bloco template HTML.
13:45
Esse vamosizar. Vem aqui. Então, veremos
13:48
aqui no nosso e aqui esse index que tem
13:51
todo o código principal desse template,
13:53
vamos reutilizá-lo, OK? Ele está
13:57
em inglês, OK? Nós podemos pedir a o
14:01
chatpt para transformar todo esse coro
14:03
aqui em português. Então, vamos abrir o
14:04
chat PT. que chat GPT, tá aí ele.
14:11
OK. Vamos lá abrir qualquer um já serve.
14:14
Não vamos não vamos fazer login. Acho
14:16
que vocês já têm já o vosso. Então eu
14:19
vou passar aquilo para português. Tudo
14:21
isso para português, só para melhor
14:22
compreensão. Eh, onde é que estamos?
14:24
Sim, estamos aqui. Passa para português.
14:28
Passa para ó. Ah, n passa. Vamos dizer,
14:31
quero uma versão em português.
14:34
Ainda está a processar. Quero uma versão
14:39
em português.
14:42
Quero uma versão em português. Vamos
14:43
colar aqui. E bom, ele vai me dar uma
14:46
versão em português.
14:49
Já está. Eh, vamos copiar isso aqui
14:54
e vamos colar aqui.
14:57
Então, aquilo que já fizemos, não vamos
14:58
colar aqui. Veremos aqui no nosso home e
15:01
vamos colar. OK. Salvemos. Perfeito.
15:05
Agora se eu vier aqui, já temos tudo
15:07
aqui em português. Agora caso eu vier
15:10
aqui e rodar isso aqui de novo. Estás a
15:14
ver? Já temos aqui blog limpo, tema
15:16
completo, mas ele ainda está me
15:17
apresentar dessa forma aqui,
15:19
certo? Mas se nós verificamos aqui esse
15:24
blog, esse mesmo bloco de templates,
15:26
onde é que ele tá?
15:28
Se eu pegar esse index, vem para cá,
15:31
tá? Ele é suposto apresentar dessa forma
15:33
aqui, bem organizado, mas para nós ele
15:35
está nos apresentar dessa forma aqui,
15:36
OK? Não se preocupa com isso. Então
15:38
vamos fazer a mesma coisa também.
15:41
Eh, já temos o nosso homem.
15:44
Agora vamos pegar também o nosso about.
15:47
Eu vou pegar o about, copiar tudo isso
15:49
aqui
15:52
e vamos pedir que nos apresenta também
15:53
em português. Vamos dizer quer uma
15:55
versão em português ou vamos dizer faça
15:58
o mesmo. Faça o mesmo. Olá aqui
16:04
e vamos dar o enter. OK, já terminou.
16:07
Vamos copiar.
16:12
Vem para cá onde está o nosso sobre e
16:15
bom, vamos colar aqui.
16:17
Perfeito, já está. Agora se nós virmos
16:20
aqui,
16:22
estamos aqui, né? Se nós mudamos para
16:25
barra sobre,
16:28
ele deve apresentar o que que sobre meu
16:30
blog, tá? Aqui, conheça um pouco a minha
16:32
história, blá blá blá blá. Ok, perfeito.
16:35
A mesma coisa aqui também ele tenha que
16:37
nos apresentar se não algo do gênero,
16:38
OK? Tipo, algo assim dessa forma. Mas
16:40
não se preocupa, isso tem a ver com
16:42
HCSS.
16:44
É porque ele ainda não está a fazer, não
16:46
está conseguir fazer leitura dos coros
16:47
CSS, apenas só está nos apresentar os
16:49
coros da HTML. Perfeito. Já temos tudo
16:52
que nós necessitamos. OK? Então eu vou
16:53
minimizar esse senhor aqui por enquanto
16:55
necessito dele aqui também. Vamos qu
16:59
Vamos vamos minimizar isso agora aqui no
17:02
homem.
17:03
OK, nós devemos remover tudo que está
17:06
aqui. Eu vou remover tudo que está aqui
17:08
e vou passar aqui no base. Como nós
17:10
dissemos, base é o código e é o código
17:14
tipo que está presente em todas as
17:15
páginas. Está presente em todas as
17:17
páginas. Então nós não queremos repetir
17:18
em todas as páginas mesmo o código, OK?
17:20
Nós queremos apenas não, esse código,
17:23
por exemplo, aqui o footer e também o a
17:26
parte de cima, OK? tipo a parte esse a a
17:29
parte dove bar, nós não queremos repetir
17:31
esse corpo. A única coisa que nos que
17:33
poderá ser repetitivo, única coisas que
17:35
únicas coisas que serão repetitivo serão
17:37
isto aqui, OK? Então é por isso que
17:41
vamos usar os templates para que nós
17:43
possamos organizar melhor esse conão.
17:44
Muito bem. Aqui no home ele vai estar
17:47
assim vazio.
17:49
URL não te preciso por enquanto. Então
17:52
aqui agora vamos trabalhar um pouquinho
17:54
com templates em jungle. Vamos lá ver
17:56
como é que os templates funcionam
17:57
realmente.
Jobs & Education