Criando uma página de cadastro de tarefas no Django

E aí pessoal tudo tranquilo nesse vídeo você aprenderá como enviar dados da camada de template para camada de View além de aprender como trabalhar com asclés bens de views para isso vamos continuar com o desenvolvimento das telas da nossa aplicação de gerenciamento de tarefas e agora vamos desenvolver a tela de cadastro de tarefas [Música] plano que esse vídeo faz parte de uma playlist sobre introdução ao Jungle e o link para essa playlist com todos os vídeos publicados até o momento está na descrição do vídeo assim como o link para o repositório com o código fonte

Então bora programar Primeiro vamos trabalhar com esse conceito que são as classes bens de views no momento se a gente for vir aqui na nossa camada de views dentro da nossa rapidez nós temos um avião ela é responsável por ao receber a requisição buscar as tarefas cadastradas no banco e renderizar uma template com essas tarefas né passado ali dentro do contexto e essa viu ela é uma função Então ela é uma fbv uma funchambi a gente tem além das baseadas em função às vezes baseadas em classes as classes bens de viu ou CBV o recomendado

digamos assim a abordagem mais moderna é utilizada a cbvs quais bens de views Então nós vamos parar de utilizar fbvs para passar a utilizar cbvs E por que que a gente vai fazer isso primeiro porque um recurso mais recente do Jungle digamos assim não é tão recente assim mas em comparação as fbvs ele é mais recente ele é o recomendado ser utilizado hoje principalmente porque ao utilizar classes a gente consegue ter um código mais organizado e também ter vantagens em relação a própria orientação objeto como o conceito de heranças isso permite que a gente tenha

código reutilizável e que consiga automatizar certas tarefas que são comuns se a gente parar para pensar tarefas de crude criar ler atualizar e deletar são coisas comuns que a gente faz no dia a dia dentro das aplicações então o diabo ele proveu uma série de classes para serem utilizadas como dentro da camada de viu que já fazem isso de maneira automática e a gente pode utilizar isso para não ter que escrever esse código manualmente tá então o seguinte a gente Primeiro vai importar uma classe dessa camada de View então from Opa pronto Django views.deneric né

que são as classes genéricas Import e aqui a gente vai ter um monte né aqui a gente quer é a list viu que ela vai é uma viu que vai fazer uma listagem de alguma coisa então por enquanto eu vou deixar aqui essa função e nós vamos criar uma classe chamada judô list viu ela vai herdar de Leste viu e basicamente que a gente tem que definir aqui é o seguinte Model igual tudo eu tô informando para essa lei civil Qual o modelo com qual ela tem que trabalhar que é o modelo de dor e

é isso basicamente é isso né Essa função aqui ela é traduzida nessa classe utilizando classes beleza apaguei vou lá no meu arquivo de URL então setup URL Spotify isso aqui não existe mais nessa função Outdoor que existe é o to you last View e aqui em vez de eu passar viu e não esqueça de abrir fechar o parênteses tá é isso vamos ver se isso aqui vai funcionar então Python server vou lá no meu navegador Vou atualizar página e teve um probleminha né que tá dizendo que não tá não tem tarefas cadastradas a única modificação

que a gente vai ter que fazer em relação ao código atual é que quando a gente utiliza ele passa como contexto da template um nome diferente né a gente passou como contexto o nome chamado tio Duos a gente tem que chamar de tudo underline tá então vou pegar esse sítio do underline e também vou substituir aqui no fórum salvei voltei aqui no navegador atualize a página já apareceu Clayson como é que ele sabe qual é o meu template porque eu já fui esperto e utilizei o padrão tá por padrão a lista vai procurar uma template

que vai ter o mesmo nome da apples e que tem o nome do no meu modelo judô underline então eu já utilizei a padronização por isso que ele conseguiu encontrar tranquilo e pronto a gente já mudou aqui para classes vezes viu não preciso fazer mais nada veja que é bem bem legal né bem rápido de conseguir implementar as coisas com o as quais bases Então posta parar inclusive importação aqui do Handel a gente não vai mais utilizar e Beleza agora eu quero trabalhar na nova página que a página de cadastro de tarefas a gente também

vai utilizar as classes meses de uso então aqui além de importar aulas te viu eu vou importar a creates viu então vou criar uma nova classe classe e vou passar aqui a minha Create viu o que a gente sabe fazer um Model igual eu te dou né O que a gente sabe que tem que passar aqui então beleza por enquanto vou deixar só isso vamos lá para o nosso arquivo de URL vou criar aqui um novo teste que vai ser a rota vou fazer o seguinte eu vou colocar Creed né só que Create e também

tenho que importar aqui o meu judô Create View então eu passo para ele aqui viu Hazel então criei mais uma rota dentro da minha aplicação e vamos ver o que que acontece né então vou voltar aqui no navegador a aplicação já tá executando vou tentar acessar aqui o localhost 2.8000 e deu um erro né ele deu um erro aqui de configuração imprópria Ele tá dizendo aqui que ele tá utilizando um Model formix dentro da minha classe to the kreat view que não tem Fields né o atributo Field então quando a gente utiliza o Create viu

eu preciso além do modelo informar esse campo filtros Quais são os campos que eu quero permitir que o usuário informe no cadastro se a gente for ver ele no nosso modelo que que a gente tem gente tentar dessas aqui qual que o usuário tem que manualmente colocar o title e a deadline o createst vai ser criado automaticamente e o finish só vai ser preenchido quando ele marcar aquela tarefa como concluída então aqui em Fields eu vou colocar uma lista informando esses campos tá então e deadline salvei aqui o código Vamos ver que que vai acontecer

né vou voltar aqui atualizar a página aí ele deu um outro erro que é o template dos note xi a gente não criou o template que vai exibir né quando essa viu foi executada Ele tá dizendo que ele tá procurando por um template chamado underline Então vamos criar esse template vamos e o Fire tudo underline forme ponto html e vamos só colocar aqui um vai fazer o seguinte vou vir aqui vou copiar todo o código vou colar aqui e vou só substituir o que tem dentro do meio tá então aqui dentro do meio eu vou

substituir por Nova tarefa e aqui no header também né do title então aqui vai ser nova tarefa vamos ver o que que vai acontecer né se vai dar certo atualizei fome não eu botei tudo do ponto opa pera aí vamos calma judô underline Agora sim a página beleza tá aqui Nova tarefa Então já tá exibindo só que beleza meu formulário como é que a gente vai fazer a gente vai ter que criar esse formulário na mão acontece que não quando eu vou aqui utilizando a Create View eu passo esse campo Fields ele cria uma classe

de formulário para gente que ele envia para dentro da template através do contexto E esse tem esse formulário ele tá ele é chamado de fome tá então posso colocar aqui ó tudo pela Chaves fome Salve vamos ver que que vai aparecer atualize a página olha só tá então deadline Bem feinho mas tá aqui né então isso aqui tem os campos Então a gente vai ter que utilizar um pouco de html eu vou criar aqui um formulário então forma Action vai ser um Action post né não perdão vai ser igual a post e vou passar aqui

o meu fome salvei atualizei vai ficar igual Mas agora tá dentro de uma tag forma e eu preciso de um botão para submeter o formulário então eu vou criar aqui um botão esse botão vai ter um Type que vai ser o Type summith para submeter o formulário eu vou colocar aqui no valor salvar então voltei aqui atualizei beleza vamos testar cadastrar ver que que vai acontecer então tá então teste qual vai ser a deadline Vou colocar aqui dia 10/10/2014 salvar ele deu um erro aqui 403 proibido verificação csrf falhou pedido cancelado o que que é

isso isso aqui é uma das mecânicas de segurança que o Jungle planeta chamada de csrf tá csrf é um tipo de ataque que é crossfire basicamente é quando um outro site através de algum tipo de script tenta realizar uma requisição para outro site que tá aberto no mesmo navegador então É como se eu tivesse por exemplo uma outra aba aqui aberta e essa outra aba utiliza um script java script ali para conseguir submeter um formulário E aí o que o Junco faz para evitar esse tipo de ataque é criar um input né uma um outro

Campo ali que fica escondido com uma chave que só o Jango sabe então ele garante dessa maneira que a requisição foi feita pelo próprio site não pelo site externo eu vou deixar na descrição do vídeo um link para um artigo lá no nosso blog que fala mais detalhes sobre o tipo de ataque csrf e como é que é feita as formas de evitá-lo tá E aqui no Jango basicamente Toda vez que você criar um formulário que faz uma requisição post você tem que colocar essa tag aqui ó essa template tag que é csrf underline token

Inclusive tem até um Sniper né se você colocar aqui a csrf aquela extensão já tem aqui a opção para colocar isso para você feito isso olha só voltei aqui no navegador Vou acessar novamente aqui o Barra Create não mudou nada mas olha só vou clicar com o botão direito vem aqui ó fonte da página de execução ele vai mostrar o código HTML e olha só que dentro do meu formulário cadê Aqui tá aqui aqui ó dentro do meu formulário tem um input Olha só escondido com o name csrf Middle token e um valor Mega aleatório

que ele cria que só o Diogo sabe então dessa maneira ele garante que a requisição foi feita pelo próprio pelo próprio site do Django tá pelo próprio aplicação e não para aplicação externa Beleza agora vamos lá tentar de novo teste 10 do 10 do 10 de 2024 salvar beleza ele deu aqui um erro também de configuração imprópria ética Ele tá dizendo olha no URL ou definir um get Absolut URL matford and que acontece quando a gente usa o cliente viu ele tem que saber quando o cadastro é feito com sucesso para onde é que ele

tem que redirecionar o usuário O que que tem que ser exibido com a página que tem que ser mostrada a gente precisa configurar isso também e a gente configura isso aqui através do success [Música] URL eu preciso nomear as minhas URL Então deixa eu fechar aqui todo mundo vou lá em setup o rls.pay tá vendo que eu tenho aqui a minha URL padrão né aquela listagem e a URL de cadastro a única coisa que não é definida é qual é a rota e qual a Vivo a ser executada Além disso eu posso definir um name

igual a string para nomear as minhas rotas então eu vou dizer que essa rota aqui de listagem eu vou chamar ela de todu e essa outra aqui eu vou chamar de a partir disso eu posso fazer referências através desse name e lá no meu arquivo de views eu vou importar então from Django URL Import e ele vai me retornar essa rota completa né a rota real que eu quero utilizar então aqui no meu sucks URL eu coloco meu reverse laser com o nome da minha rota underline então depois do cadastro eu quero redirecionar para rota

de listagem Então vamos ver se isso aqui vai funcionar agora vou novamente aqui para o Create vamos lá novamente teste 10/10/2014 salvar Olha só voltou para listagem tá aqui cadastrado inclusive aquele primeiro que tinha dado erro na URL ele foi cadastrado Ele só não conseguiu redirecionar então cadastro já tá funcionando né só que tá Bem feinho né então Primeira coisa eu quero colocar um botão aqui que vai Me direcionar para aquela página de cadastro aqui na lista Então vamos lá Tio Deus templates depois aqui olha só desse meu and if eu vou colocar uma tag

a que vai ter uma HF aquela rota de cadastro e aí como é que eu faço para fazer a mesma ideia de através do nome da Rota eu ter a rota completa só que no meu template eu utilizo uma template tag do Jungle que a template tag URL E aí depois vai ele coloca as aspas e digo qual o nome da Rota judô underline tarefa e também vou colocar aqui algumas classes VTN btn Prime salve Vou atualizar aqui a página tá aqui Nova tarefa clique em Nova tarefa para página de cadastro Então vamos trabalhar agora

aqui nessa estilização né se tem se formar aqui tá Bem feinho a gente precisa dar uma boa melhorada nele aqui para utilizar as coisas do boot Trap para ficar um formulário bem bonitinho Tá então vamos lá então o seguinte aqui para estilização a gente vai utilizar uma outra biblioteca para o Django tá porque é o seguinte se a gente chegar aqui no nosso código no momento o nosso formulário ele é renderizado somente utilizando aqui o fone né e eu não quero ter que fazer a renderização de Campo por campo para adicionar as classes do Bootstrap

então para facilitar nossa vida nós vamos utilizar uma biblioteca chamada Django crispy forms tá essa biblioteca ela vai adicionar aqui uma funcionalidade do Jungle que é conseguir renderizar o formulário já aplicando estilizações de certos templates tá o chrispy forms ele é uma biblioteca mais genérica E aí ele tem algumas sub bibliotecas Deixa eu ver se eu consigo encontrar aqui a parte que fala sobre isso aqui os templatex então ele tem template Packs 5 que é o que a gente quer utilizar Então olha só vou clicar aqui e ele vai vir para a página do gichub

do Príncipe 5 ele fala que a gente vai instalar basta utilizar aqui o PIP digital de crispy Bootstrap 5 Então vamos lá vs code terminar vou parar aqui a aplicação ele vai baixar tudo aqui para gente e fazer a instalação dentro do nosso projeto feito isso vamos dar uma olhada no que mais que ele fala aqui na documentação olha uso ele fala que lá em stoler apps eu preciso adicionar esses dois carinhas aqui ó Christopher e crispy vou lá para o meu pai Então deixa eu fechar aqui todo mundo setup settings eu vou colocar o

chrispy forms e o chrispy 5 outra coisa que eu gosto de fazer para organização desses eu gosto de separar tá então vou criar aqui uma constante chamada Jungle apps que vai ser igual a uma lista vazia outra chamada parte apps também uma lista vazia e my apps com a lista vazio dentro de jango é eu vou colocar as Apps do Django Então até aqui ó vou dar um control x e vou colocar aqui nessa lista Então as apps que vieram de aplicações externas que é o Chris e o crips eu vou colocar as minhas apps

que no caso é app de luz eu vou fazer só uma concatenação né uma soma digamos assim desses três dessas três listas pronto aqui eu acho que fica mais organizado tá eu gosto de fazer dessa forma Além disso ele pede para a gente colocar essas duas configurações Booth 5 Então vou copiar a gente pode colocar em qualquer lugar tá eu gosto de colocar essas configurações extras aqui no final mas não é obrigatório e é isso feito isso o krispy já tá configurado aqui no nosso projeto E aí como é que a gente utiliza vamos ver

aqui na documentação Olha só no Diego forms ele tem aqui Um tá aqui ó tag wait forms então o que que ele fala vamos procurar aqui a parte do template Ele tá dizendo que a gente precisa carregar aqui um load chrispy form tags então é utilizar esse chrispy forms vai funcionar se é assim mesmo né então vou copiar aqui ao load vamos lá no nosso template template tudo lá no comecinho do nosso arquivo Vamos colocar esse load craceform tags e depois a gente vai chamar esse príncipe forma Então vou voltar aqui Ele carrega tudo então

não precisa nem desse botão de submet e nem do CCR vai dar certo mesmo né salvei coloquei tudo que eu precisava vamos lá então [Música] atualizar beleza olha só ele já carregou o botão eu preciso colocar mesmo eu pensei que ele já colocava automático mas não então vamos colocar aqui o botão e só se houver uma coisa se ele ficar colocar tag forma eu pensei que ele colocava mais é ele colocou tá aqui até que forma mas foi post colocou tudo mas ele não colocou o botão né Então espera aí tenho uma coisa que a

gente tem que fazer aqui para colocar o botão cadê cadê cadê cadê cadê tá tem uma coisa estranha aqui era para ele já trazer o botão ele não trouxe por algum motivo deixa eu ver o que foi que houve então eu parei aqui o vídeo rapidinho e vou para dar uma olhada aqui que aconteceu e acontece que para a gente conseguir exibir o botão tem que fazer uma configuração que é um pouquinho mais chata tá E aí para a gente não perder muito tempo com isso vou fazer o seguinte em vez de utilizar essa forma

a gente vai utilizar na forma diferente que é a gente vai criar tag forma manualmente né com o método post Então deixa eu botar aqui post aqui dentro do formulário a gente vai colocar manualmente o csrf e o nosso botão então vai ter um type a igual a submit summith salvar vou colocar também Opa aqui veio um cara que tá errado a classe que vai ser o btn btn Prime e aqui dentro em vez de utilizar aquela forma eu vou fazer através de um filtro tá então forme coloco aqui o filtro dessa maneira então tá

aqui o longe né a gente colocou CCR colocou forma colocou o botão e aí utilizou através de um filtro tá bom a aplicação ela já está executando se eu voltar aqui no na aplicação salvar atualizar né já apareceu Então vamos só testar aqui nova novo teste data do 10 de 2024 salvar beleza funcionou Tá bom então com isso nosso template aqui já da página de cadastro ele tá funcionando e carregando formulário de maneira automatizada e já estilizado só um ponto né Tá vendo que ele tá com o Tyler ele tá parecendo os termos em inglês

isso porque ele vai pegar através do modelo Então se a gente for ver aqui ó ele vai pegar exatamente o nome aqui ó tá então e deadline então para não ficar em inglês a gente pode passar uma configuração a mais aqui chamada de não precisa ser no começo tá mas eu gosto de colocar no começo Então esse name é o nome digamos humanizado né que eu quero mostrar para o usuário e aqui eu vou colocar string título e a mesma coisa que no deadline então overboard data de entrega beleza salvei aqui o código vamos lá

atualizar página tá aqui título data de entrega tudo certinho né veja que ele até coloca aqui os asteriscos porque são Campos obrigatórios e olha só se eu tentar salvar o formulário sem preencher nada ele vai dar um erro que dizendo que eu tenho que preencher esse campo Mas essa é uma validação do HTML5 se eu pressionar q f12 clicar aqui nesse botão né selecionar um elemento clicar em cima do meu input eu posso vir aqui olha só e meio que hackear digamos assim o Frontier e eu posso tirar esse Recorde daqui tirei o recorde desse

formulário né Desse boot e também vou tirar o recorde desse outro input aqui da data né então vamos lá apaguei dessa maneira eu vou conseguir submeter o formulário sem preencher porque eu desabilitei digamos assim a validação do HTML5 se eu clicar em salvar olha só tem a validação do próprio Django então ele vai verificar esse campo aqui ele é obrigatório Você não enviou e ele já vai mostrar informação ele este campo é obrigatório e vai colocar o inputzinho vermelho dizendo que ele tem um erro tá é bem bacana Então é isso né nossa página de

cadastro já tá pronta né então é bem da hora fazer isso no Django porque a gente consegue aí juntar as coisas de views para acelerar o processo de cadastro de criação dessa página e utilizar aqui o chrispy Ford para gerar esses formulários de maneira já estilizada para a gente o último ponto aqui dessa desse vídeo né dessa aula é reaproveitamento de código se a gente olhar o template do list Ele tem muita coisa que é igual ao template Em ambos tem a nave bar e tem aqui a importação do script e a finalização do conteúdo

né só o que muda é o que tá aqui dentro da mente então para a gente não ter essa repetição de código a gente pode utilizar a herança de templates com a mesma Herança da orientação objeto só que para templates do Jungle E aí como é que a gente faz isso aqui em templates eu vou criar um arquivo chamado base ponto HTML veja que eu criei na pasta template senão na pasta do Dudu tá eu creio ele aqui fora dentro de base ponto htm eu vou colocar tudo aquilo que é comum entre todos os templates

então para agilizar vou vir aqui no tio do fome vou copiar tudo e vou colar aqui dentro eu só vou tirar esse load daqui que ele não vai ser necessário no template base e vou apagar tudo que dentro do MEN tá bom e aí o que que eu vou fazer eu vou criar blocos que são locais onde eu posso injetar código a partir dos templates filhos Então dentro do container eu vou criar aqui um blog então utiliza template tag Block end Block Eu Vou Chamar esse bloco de contente o meu conteúdo e aqui também nesse

Tyto eu tenho essa partezinha aqui também que vai mudar né então também vou criar um blog chamado de page underline Tiger então criei dois blocos de conteúdo que vai ser o título da página e o conteúdo da página certo agora em show do Liste por exemplo vou fazer aqui primeiro tudo aquilo que repetir eu não preciso mais colocar E aí como é que eu digo que esse template ele vai é dado template base eu utilizo a template tag extende eu coloco base ponto html tudo aquilo que já tem no bem da HTML eu posso tirar

então posso tirar isso aqui tudo até o meio e tudo isso aqui também vai ficar só o H1 e a minha tabela né junto com meu botão e todo esse conteúdo eu vou colocar dentro de um bloco Então coloca aqui ó contente eu utilizo o mesmo nome que eu utilizei lá no template de base e jogo todo esse código para dentro dele então vou tirar daqui e vou jogar para cá tá aqui pronto aí joguei aqui dentro do content e eu também jáquele outro bloco bloco que era o peixe né então Black veja underline tyton

e dentro dele eu vou colocar justamente o título da página que a lista de tarefas salvei vou fazer a mesma coisa com o tio do fome então aqui olha só Vou estender então base ponto HTML vou pagar html vou criar aqui o meu blog aqui vai ser nova tarefa e vou tirar tudo aquilo que se repete né Então até aqui e do bem para baixo também vai ficar só o formulário e o H1 então Recordar isso aqui criar um novo bloco que é meu bloco contente jogo esse formulário aqui dentro pronto salvei o código e

vamos ver o que que isso aqui vai fazer né se vai dar certo a aplicação já tá rodando se eu voltar aqui para minha página olha só acessar aqui a minha barra tá aí ó tudo funcionando com o layout que já existia se eu for aqui para o cliente também já tá funcionando então tá tudo certinho e aí eu não tenho mais essa repetição de código dos meus templates né Eu tenho um único local com todo template base tudo aquilo que se repete em todo mundo e eu utilizo os blocos e herança de template para

injetar o conteúdo que altera em cada um dos templates filhos tá o único ajuste que eu acho interessante fazer é colocar um link aqui nesse two que ele não tá indo para lugar nenhum né Então olha só nessa nave aqui lá nosso bem esse ponto HTML aqui no HF vou utilizar também uma URL e ela vai apontar para o judô underline atualizei aqui a página se eu clicar ele vem para cá então é isso Então nesse vídeo aqui a gente já criou nossa página de cadastro de tarefas utilizando já as classes bens de views utilizando

também o Django chrispy para gerar esses formulários aqui de maneira automatizada e utilizamos herança de templates para conseguir reaproveitar o código do template e evitar que a repetição Beleza o que vimos nesse vídeo é só o começo se você quer se especializar ainda mais desenvolvimento da Candy é lugar ideal para você somos uma escola especializada em formato desenvolvedores possuem mais de 15 anos de experiência no mercado Já falamos mais de 200 mil alunos na nossa plataforma você encontra informações sobre as principais linguagens e tecnologias e falando de uma maneira muito mais completa sobre todos os

assuntos que você acabou de ver nesse vídeo então clique no link da descrição e faça já a sua matrícula bom pessoal se você gostou do vídeo Não esqueça de curtir e compartilhar com todo mundo que você conhece que quer aprender sobre programação caso tenha ficado alguma dúvida ou queira dar uma sugestão coloque nos comentários que iremos responder a todos bem vou ficando por aqui e até a próxima