Exercício – Implementar exibições genéricas para exibir dados

2 minutos

Queremos criar uma página de detalhes para os cães. Vamos usar a exibição genérica DetailView para simplificar a quantidade de código que precisamos criar.

Importante

Este exercício pressupõe que você tenha concluído as etapas de instalação anteriores deste módulo.

Criar a exibição DogDetail

Começamos criando a classe de exibição de detalhes.

No Visual Studio Code, abra dog_shelters/views.py.
Abaixo da linha que indica # TODO: Import generic views, adicione o código a seguir para importar o módulo de exibições genéricas.
```
# TODO: Import generic views
from django.views import generic
```
Adicione o código a seguir ao final de views.py para criar a exibição genérica para DogDetail e definir os modelos e o objeto de contexto.
```
class DogDetailView(generic.DetailView):
    model = models.Dog
    template_name = 'dog_detail.html'
    context_object_name = 'dog'
```

Registrar a exibição de detalhes

Com a exibição criada, podemos registrar o caminho.

Abra dog_shelters/urls.py.
Abaixo da linha que indica # TODO: Register detail view, adicione o código a seguir para registrar o caminho do DogDetailView.
```
# TODO: Register detail view
path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
```
Importante

Lembre-se da vírgula à direita no final da linha.

Criar o modelo HTML

Agora, você criará o modelo HTML para ver os detalhes do cachorro. O nome do objeto será dog, como definimos quando criamos o formulário.

No Visual Studio Code, crie um arquivo dentro de dog_shelters/templates chamado dog_detail.html.

Adicione o código a seguir a dog_detail.html para criar o modelo que exibirá os detalhes do cachorro.

{% extends 'base.html' %}

{% block title %}
{{ dog.name }}
{% endblock %}

{% block content %}
<h2>{{ dog.name }}</h2>
<div>About {{ dog.name }} - {{ dog.description }}</div>
{% endblock %}

Atualizar a página de detalhes do abrigo para incluir o link

Com o caminho registrado e o modelo criado, podemos atualizar o modelo de detalhes do abrigo para incluir links para a página de detalhes do cão.

Abra dog_shelters/templates/shelter_detail.html.
Abaixo da linha que indica {# TODO: Add link to dogs #}, adicione o código a seguir para criar um link para cada cão na exibição de detalhes.
```
{# TODO: Add link to dogs #}
<a href="{% url 'dog_detail' dog.id %}">
    {{dog.name}}
</a>
```

Testar sua página

Com tudo criado, vamos ver nossa página em ação.

Salve todos os arquivos selecionando Arquivo>Salvar Tudo.
No navegador, acesse http://localhost:8000.
Na lista de abrigos, selecione Contoso.
Na lista de cachorros, selecione Roscoe.

A página de detalhes é exibida.