Baixar para ler offline
Workshop Django Framework - 30/10/2018
- 2. ALISSON JHONATTAN JACKSON EDUARDO JEAN RAFAEL LUCIANA LEONARDO THEODÓSIO CAIO 22 Nós somos aEPiC! Escola Piloto de Computação Universidade Federal de São Carlos
- 3. Pré-requisitos e ferramentas ▰1. Conhecimento básico na linguagem Python ▰ 2. Conhecimento básico em HTML ▰ 3. Conhecimento básico em padrões de projeto MVC ▰ 4. Python 3.6+ ▰ 5. IDE PyCharm ou algum editor de texto (sublime, atom...) ▰ 6. Terminal ou CMD 33
- 4. Overview ▰ 1. Oque é MVC? ▰ 2. O que é Desenvolvimento Web ? ▰ 3. Ambientes Virtuais ▰ 4. Estrutura de projetos Django ▰ 5. Executando 44 ▰ 6. Rotas e URLs ▰ 7. Views ▰ 8. Templates ▰ 9. Models ▰ 10. Template Tags
- 5. Bônus ▰ 1. Herançade HTMLs ▰ 2. URLs dinâmicas ▰ 3. Arquivos estáticos (img, css, js) 55
- 6. O que éMVC? MVC e outros padrões de projeto 6 1
- 7. Padrões de projeto ▰Organização de projetos maiores, com muitos arquivos ▰ Organizar de acordo com o papel daquele arquivo ▰ MVC, MVP, MVVM, MVW... ▰ Qual é o “melhor”? ▰ Django implementa (e cobra) corretamente o MVC 77
- 8. Padrão MVC 88 Model ❏ Modelosde dados ❏ Banco de dados View ❏ Parte visual ❏ Interfaces para o usuário Controller ❏ Parte lógica ❏ Processamento ❏ Comunicação com BD
- 9. O que édesenvolvimento Web? Back-end, Front-end, Frameworks, e outros termos esquisitos 9 2
- 10. Desenvolvimento Web 1010 Front-end ❏ Parteda “frente” ❏ Parte visual ❏ UI/UX Back-end ❏ Parte de “trás” ❏ Parte lógica ❏ UI/UX
- 11. Ambientes virtuais Por quenão no python? 11 3
- 12. Ambientes virtuais ▰ Temporário ▰Interessante apenas ao projeto ▰ Compartilhável 1212
- 13. 1313 $ mkdir projeto_django $cd projeto_django $ python –m venv myvenv (Windows | Linux?) $ pip install virtualenv (Linux) $ virtualenv -p python3 myvenv $ myvenvScriptsactivate (Windows) $ source myvenvbinactivate (Linux) (myvenv) $ pip install django (myvenv) $ pip freeze (myvenv) $ dir Por fim: (myvenv) $ pip freeze > requirements.txt Preparando o local Cria a pasta do projeto Entra na pasta do projeto Cria um ambiente virtual (windows) Cria um ambiente virtual (linux) Ativa o ambiente virtual Instala o django Verifica o que foi instalado Lista tudo da pasta atual Imprime tudo que foi instalado e já salva em um arquivo
- 14. Estruturas de projetos Django “Bemcomeçado, metade feito” - Aristóteles 14 4
- 15. 1515 $ django-admin startprojectprojeto $ dir $ cd projeto Preparando o projeto Cria um projeto Django Lista tudo da pasta atual Entra na pasta do projeto
- 16.
- 17. 1717 $ django-admin startprojectprojeto $ dir $ cd projeto Executando o projeto $ python manage.py migrate $ python manage.py runserver <porta> ANTES: AGORA: “Cria” o banco Executa no servidor
- 18. 1818 Criando uma aplicação $python manage.py startapp sistema ▰ Aplicações são módulos do projeto ▰ Dividir o contexto de cada parte do projeto Adicionar a aplicação em INSTALLED_APPS no arquivo “projeto/projeto/settings.py” Cria uma nova aplicação
- 19. Rotas e URLs Criaçãode novas páginas 19 6
- 20. Rotas e URLs ▰URL = “Rota do navegador” ▰ Rota = “URL do projeto” 2020 ▰ Definir novas páginas ▰ Definir links entre páginas ▰ Organizar o projeto de acordo com suas funcionalidades ▰ Separar as URLs dentro do contexto correto
- 21. 2121 Criando uma novaRota Criar arquivo “projeto/sistema/urls.py” dentro da nova aplicação Direcionar as rotas para o arquivo urls.py correto
- 22. 2222 Criando uma novaRota Definir a nova rota no arquivo “projeto/sistema/urls.py” Definir a nova view no arquivo “projeto/sistema/views.py” Criar o novo template na pasta templates Etapas da criação de uma nova tela:
- 23. 2323 Criando uma novaRota Django e a confusão com MVC: MVC Função Arquivo correspondente Model Representação dos dados models.py View Parte visual nome_da_tela.html Controller Parte lógica views.py ▰ “models.py” possui as classes (tabelas) do banco ▰ “views.py” possui as funções e lógica da aplicação ▰ A pasta “templates” possui arquivos html, um para cada página, cada arquivo html desempenha o papel de view
- 24.
- 25. 2525 Criando uma novaview Criar o novo template na pasta templates Etapas da criação de uma nova tela: Definir a nova rota no arquivo “projeto/sistema/urls.py” Definir a nova view no arquivo “projeto/sistema/views.py”
- 26. Templates Hora de veros resultados 26 8
- 27. 2727 Criando um novotemplate Criar o novo template na pasta templates Etapas da criação de uma nova tela: Criar a pasta “projeto/sistema/templates” Baixar o arquivo do template >> https://goo.gl/MxXbNb Colocar dentro da pasta templates $ python manage.py runserver Definir a nova rota no arquivo “projeto/sistema/urls.py” Definir a nova view no arquivo “projeto/sistema/views.py”
- 28. 2828 Criando um novotemplate Head:
- 29. 2929 Criando um novotemplate Body:
- 30. 3030 Criando um novotemplate
- 31. Models Integrando o bancode dados 31 9
- 32. Models ▰ Modelos representamnossos dados ▰ No Django uma classe equivale a uma tabela ▰ Não se usa SQL diretamente ▰ Usaremos SQLite como o banco de dados ▰ Trabalharemos com migrações 3232
- 33. Models 3333 Criar o novomodelo em “projeto/sistema/models.py” Adicionar o novo modelo em “projeto/sistema/admin.py”
- 34. Models ▰ Acabamos dealterar o estado do banco de dados ▰ Precisamos dizer pro Django que uma nova versão do banco está disponível 3434 $ python manage.py makemigrations sistema $ python manage.py migrate Cria uma nova migração Implanta essa migração
- 35. Django Admin 3535 $ pythonmanage.py createsuperuser - Nome: nome qualquer - Email: email qualquer - Senha: senha qualquer
- 36. Django Admin 3636 $ pythonmanage.py runserver No fim da URL digite “/admin” Faça o login com os seus dados
- 37.
- 38. Template Tags Representando suasvariáveis no template 38 10
- 39. Template Tags ▰ ComunicaçãoPython <-> HTML ▰ Existem diversas funcionalidades para template tags ▰ Lógica no HTML (if-else, for, while...) ▰ Acessar parâmetros passados ▰ Acessar arquivos estáticos (img, css, js) ▰ Acessar URLs 3939
- 40. 4040 Trabalhando com templatetags Primeiro vamos alterar a nossa view e fazer ela acessar o banco de alunos A variável alunos agora possui todos os alunos da tabela Alunos A função render agora devolve os alunos como um parâmetro OBS: o terceiro parâmetro é um dicionário, funciona como um vetor de pares ‘chave’:valor
- 41. 4141 Trabalhando com templatetags Agora vamos criar uma tabela no nosso template para representar os alunos OBS: insira o código dentro da div da main, logo após o </p> Atualize a página para testar
- 42. 4242 Trabalhando com templatetags Agora queremos acessar estes alunos diretamente no HTML e, para cada aluno criar uma linha dinamicamente com seus dados
- 43. 4343 Trabalhando com templatetags Por fim, queremos criar linhas nessa tabela acessando diretamente os campos de cada aluno
- 44. 4444 Trabalhando com templatetags Atualizando a página:
- 45. Herança de HTMLs Projeteuma vez, e reutilize 45 1 Bônus
- 46. 4646 Herdando HTMLs ▰ Djangoutiliza blocos de HTML ▰ Blocos podem ser substituídos por outros blocos de mesmo nome ▰ Basta dizermos que em determinada página o “bloco X” corresponde a um novo conteúdo ▰ Assim reutilizamos aquilo que for interessante, apenas mudando trechos
- 47. 4747 Herdando HTMLs Primeiro vamostransformar nossa main em um bloco usando template tags Em seguida vamos criar uma nova página, repetindo todo aquele procedimento ▰ Criar rota ▰ Criar view ▰ Criar template
- 48. 4848 Herdando HTMLs urls.py views.py Agora vamosimaginar nosso novo template HTML. Precisamos digitar todo o código do zero?
- 49. 4949 Herdando HTMLs Não! Precisamos apenasindicar que estamos herdando (estendendo) um html existente. Apenas substituindo um bloco existente por um novo com o mesmo nome adicionar.html Baixar o arquivo da tela de adicionar >> https://goo.gl/MxXbNb
- 50. 5050 Herdando HTMLs Ao recarregara página:
- 51. 5151 Herdando HTMLs Um últimodetalhe, alterando o arquivo home.html Vamos adicionar um link para a nova página usando as template tags Assim não precisaremos ficar digitando urls toda hora
- 52. URLs Dinâmicas One templateto rule them all 52 2 Bônus
- 53. 5353 URLs Dinâmicas ▰ Imagineque você adicionou 100 alunos ▰ Como fazer uma página para editar/apagar alunos? ▰ Uma página para cada? ▰ E se o usuário criar mais alunos?
- 54. 5454 URLs Dinâmicas Queremos poderutilizar algo do tipo: http://localhost:8000/aluno/1/delete http://localhost:8000/aluno/2/delete http://localhost:8000/aluno/3/delete http://localhost:8000/aluno/4/delete . . . http://localhost:8000/aluno/(ID)/delete Da mesma maneira, queremos um template inteligente o bastante para saber lidar com diversas requisições
- 55. 5555 URLs Dinâmicas Começaremos pelaURL inteligente Aqui queremos dizer que “id” será dinâmico, e será do tipo inteiro r
- 56. 5656 URLs Dinâmicas Agora precisamosacessar esse parâmetro e apagar o aluno do banco Neste caso não precisaremos de um template, já que estamos redirecionando automaticamente Agora precisamos apenas achar um jeito de criar um jeito de ligar cada aluno com um caminho para removê-lo
- 57. 5757 URLs Dinâmicas Podemos usara própria lógica da tabela dinâmica. Que já passava aluno por aluno E apenas criar links <a> para acessar a URL de remoção Adicionar um novo <th>
- 58.
- 59. 5959 Exercício Implemente um mecanismopara indicar que um aluno trancou
- 60. 6060 Exercício Implemente um mecanismopara editar um aluno existente
- 61. 6161 Exercício Implemente um mecanismopara editar um aluno existente
- 62.
- 63. 6363 Respostas urls.py home.html Baixar o arquivodo da tela de editar >> https://goo.gl/MxXbNb
- 64. Arquivos estáticos Trabalhando comCSS, JS, imagens localmente 64 3 Bônus
- 65. 6565 Trabalhando com arquivosestáticos Primeiro vamos criar as devidas pastas e arquivos Dentro da pasta da nossa aplicação, criaremos a pasta “projeto/sistema/static”. Dentro da pasta static criaremos pastas para separar melhor nossos arquivos Dentro da pasta css criaremos o arquivo “style.css”, para conseguirmos enxergar mudanças
- 66. 6666 Trabalhando com arquivosestáticos Agora vamos importar nosso novo arquivo no template Primeiro vamos dizer ao Django que queremos usar arquivos estáticos dentro deste HTML Depois vamos importar nosso próprio CSS. Lembre-se de importar após importar o Bootstrap Por fim, no arquivo settings.py, criar os seguintes campos
- 67. 6767 Trabalhando com arquivosestáticos Ao recarregar a página:
- 68. 6868 Escola Piloto deComputação OBRIGADO! epic- ufscar.org epic.ufscar@gmail.com fb.com/epicufscar
- 69. Referências 6969 ▰ Documentação Django:https://docs.djangoproject.com/pt-br/2.1/ ▰ Projeto no Github: https://github.com/epicufscar/workshop-django ▰ Documentação Bootstrap: https://getbootstrap.com/ Outras Referências & Cursos online: ▰ Tutorial Djangogirls https://tutorial.djangogirls.org/pt/django/ ▰ Curso Alura Django https://cursos.alura.com.br/course/introducao-ao-django ▰ Curso Udemy Django http://bit.do/django-udemy ▰