Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)

Parte 2
Fluxo BásicoComo desenvolver
uma aplicação Web com
django 2.2.13

Roteiro
 Customizando uma Aplicação
Django
02

Customizando o Projeto
 Na Parte 1 iniciamos um projeto de exemplo simplemooc.
 Acrescentamos um "app" core que é a entrada principal da aplicação
e por enquanto tem apenas uma página home;
 Acrescentamos um "app" courses, nele acrescentamos um
model Course e o configuramos no "administrador de entidades"
Admin que já vem com o Django;
 Customizamos o Admin do model Course;
03

Consultando Cursos
 A aplicação possui uma página core/home que é pública (não
necessita de autenticação com login/senha);
 Vamos acrescentar outra página pública para listagem dos cursos
existentes;
 O design inicial desta página será o HTML do arquivo courses.html
(design-contact.zip disponível para download na aula 28 do curso
Python 3 na web com django – Gileno Filho - Udemy);
04

Consultando Cursos
05
Criaremos uma pasta templates
dentro do "app" courses. Dentro
desta pasta criaremos outra pasta
courses e dentro desta última um
arquivo chamado index.html.
Descompacte o
arquivo simplemooc-design-
contact.zip baixado da aula 28.
Copie todo o conteúdo do arquivo
design/courses.html para dentro
do arquivo de template index.html

Consultando Cursos
06
• Abra o arquivo courses/templates/courses/index.html e faça as
alterações:
a) Inclua uma linha logo abaixo do <!doctype html>
<!doctype html>
{% load static %}
b) Substitua o trecho abaixo
<link rel="stylesheet" href="css/styles.css" />
Por
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />

Entendendo o Projeto
07
• De forma simplificada podemos dizer então:
a. O Django vai buscar os arquivos de templates nas pastas "templates" existentes nos
vários "apps". Sendo assim, caso se queira identificar que aquele template é um
específico do "app" fazemos a criação de uma pasta "courses" dentro da pasta
"templates" do "app" courses. Então conseguimos referenciar o arquivo
específico courses/index.html;
b. O Django faz o mesmo com arquivos estáticos, indo buscar os arquivos nas pastas
"static" existentes em vários "apps". No nosso caso vamos utilizar o mesmo arquivo css
incluído no "app" core, então por enquanto não precisamos criar uma pasta "static"
dentro do "app" courses.

Consultando Cursos
08
• Abra o arquivo courses/views.py e faça as alterações para ficar com
este conteúdo abaixo:
from django.shortcuts import render
def index(request):
return render(request, 'courses/index.html')

Mudando os Endereços
09
• Crie um novo arquivo urls.py da pasta simplemooc/core e coloque o
conteúdo abaixo:
from django.urls import path
from . import views
app_name = 'core'
urlpatterns = [
path('', views.home, name='home'),
]

10
• Crie um novo arquivo urls.py da pasta simplemooc/courses e coloque
o conteúdo abaixo:
from . import views
app_name = 'courses'
urlpatterns = [
path('', views.index, name='index'),
]

11
• Abra o arquivo urls.py da pasta simplemooc/simplemooc e faça as
alterações para ficar como está abaixo:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('simplemooc.core.urls', namespace='core')),
path('cursos/', include('simplemooc.courses.urls', namespace='courses')),
path('admin/', admin.site.urls),
]

Entendendo os Endereços
12
• De forma simplificada podemos dizer então:
• Quando utilizar o endereço http://localhost:8000/ a nossa aplicação vai ser direcionada
para a definição abaixo existente no arquivo simplemooc/urls.py:
path('', include('simplemooc.core.urls', namespace='core')),
• Esta definição repassa para as definições existentes no arquivo simplemooc/core/urls.py
e vai "resolver o endereço" da seguinte forma:
path('', views.home, name='home'),
• Executando o método home existente no arquivo core/views.py

13
• Quando utilizar o endereço http://localhost:8000/cursos/ a nossa aplicação vai ser
direcionada para a definição abaixo existente no arquivo simplemooc/urls.py:
path('cursos/', include('simplemooc.courses.urls', namespace='courses')),
• Esta definição repassa para as definições existentes no arquivo
simplemooc/courses/urls.py e vai "resolver o endereço" da seguinte forma:
• Executando o método index existente no arquivo courses/views.py
• Para acessar, inicie a aplicação e abra no browser o endereço:
http://localhost:8000/cursos

Consulta de Cursos
15
• Para finalizar, abra o arquivo simplemooc/core/templates/home.html e
substitua o trecho:
<li><a href="#">Cursos</a></li>
Por
<li><a href="{% url 'courses:index' %}">Cursos</a></li>
• Para testar, inicie a aplicação e abra no browser o endereço:
http://localhost:8000/

Funciona!!
16
Ao clicar no item de menu é
redirecionadopara outra
view. Veja como ficou a url na
barra de endereços.

Detalhe de um Curso
 Vamos acrescentar outra página pública para consultar detalhes de
um curso específico;
 O design inicial desta página será o HTML do arquivo course.html
(design-contact.zip disponível para download na aula 28 do curso
Python 3 na web com django – Gileno Filho - Udemy);
 Vamos também atualizar o arquivo
simplemooc/core/static/css/styles.css com o conteúdo do arquivo
styles.css disponível neste design-contact.zip;
 E utilizar a imagem design/img/course-image.png disponível neste
design-contact.zip.
17

Detalhe de um Curso
18
 Dentro da pasta courses/templates/courses criaremos um arquivo chamado
detail.html. Copie todo o conteúdo do arquivo design/course.html para dentro do arquivo
de template detail.html e faça as alterações:
• Inclua uma linha logo abaixo do <!doctype html>
<!doctype html>
{% load static %}
• Substitua o trecho abaixo
<link rel="stylesheet" href="css/styles.css" />
Por
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />

Detalhe de um Curso
19
 Ainda no arquivo de template detail.html e faça as alterações:
• substitua o trecho:
<li><a href="#">Cursos</a></li>
Por
<li><a href="{% url 'courses:index' %}">Cursos</a></li>
• substitua o trecho:
<img src="img/course-image.png" alt="" />
Por
<img src="{% static 'img/course-image.png' %}" alt="" />
 Dentro da pasta simplemooc/core/static vamos criar uma pasta chamada img e colocar o
arquivo course-image.png disponível neste design-contact.zip (aula 28).

Detalhe de um Curso
20
• Altere o arquivo urls.py da pasta simplemooc/courses para ficar com
o conteúdo abaixo:
from . import views
app_name = 'courses'
urlpatterns = [
path('<slug:slug>/', views.details, name='details'),
]

Detalhe de um Curso
21
• Altere o arquivo views.py da pasta simplemooc/courses para ficar
conforme o conteúdo abaixo:
from django.shortcuts import render
def index(request):
return render(request, 'courses/index.html')
def details(request, slug):
return render(request, 'courses/detail.html')

Detalhe de um Curso
22
 Abra o arquivo courses/templates/courses/index.html e faça a
alteração:
• Substitua os dois trechos:
<a href=""><img src="http://placehold.it/400x250"
• Por
<a href="{% url 'courses:details' 1 %}"><img src="http://placehold.it/400x250"
• Substitua os dois trechos
<a href="" title="">
• Por
<a href="{% url 'courses:details' 1 %}" title="">

Funciona!!
23
Ao clicar no no título ou na
imagem é redirecionadopara
outra view.Veja como ficou a
url na barra deendereços.

24
• O endereço que aparece é http://localhost:8000/cursos/1/
• Verificando o arquivo simplemooc/courses/urls.py:
urlpatterns = [
path('<slug:slug>/', views.details, name='details'),
]
• A última expressão representa um parâmetro nomeado “slug” que será
passado para a view:
def details(request, slug):
return render(request, 'courses/detail.html')

25
• Até o momento os arquivos estão definidos com os endereços (urls) mas
apenas apresentam textos estáticos;
• Vamos modificá-los para apresentar dados vindos do banco de dados
(alguns cadastrados usando o Admin na parte 1);

Consultando Cursos
26
• Abra o arquivo courses/views.py e faça as alterações no método index
para ficar com este conteúdo abaixo:
from . import models
def index(request):
courses = models.Course.objects.all()
template_name = 'courses/index.html'
context = {
'courses': courses
}
return render(request, template_name, context)

Consultando Cursos
27
• Abra o arquivo courses/templates/courses/index.html e remova as
<div> que existem dados estáticos de dois cursos e substituir por:
{% for course in courses %}
<div class="pure-g-r content-ribbon">
<div class="pure-u-1-3">
<div class="l-box">
<a href="{% url 'courses:details' course.slug %}"><img
src="http://placehold.it/400x250" alt="{{ course.name }}" /></a>
</div>
</div>
<div class="pure-u-2-3">
<div class="l-box">
<h4 class="content-subhead"><a href="{% url
'courses:details' course.slug %}" title="">{{ course.name }}</a></h4>
{{ course.description|linebreaks }}
</div>
</div>
</div>
{% endfor %}

28
• A view é reponsável, além de outras coisas, por obter e mandar os
dados iniciais para a renderização do template;
• Poderiam ser enviados diversos dados e não só a lista de cursos;
• Os dados obtidos poderiam ser tratados, filtrados ou até criados novos
dados antes de serem enviados ao template;
• O template poderia fazer testes e tratar os dados antes da exibição.
• Como veremos em outras oportinidades.

Este Lab foi produzido para ser um estudo prático
introdutório para as tecnologias envolvidas com
desenvolvimento Python/Django. Sendo assim não
tem intenção de ser um curso ou fonte de
referências.
Obrigado

Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)

Mais conteúdo relacionado

Semelhante a Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2) (20)

Mais de Pedro Fernandes Vieira (6)

Último (19)

Como desenvolver uma aplicação Web com django 2.2.13 (Parte 2 de 2)