Exercício – Criar modelos

6 minutos

Vamos criar dois modelos para exibir uma lista de abrigos e uma página de detalhes para cada abrigo. Também criaremos um modelo base para garantir a consistência no aplicativo.

Criar o modelo base

Um modelo base é comum a todos os projetos do Django. Vamos começar criando um.

No Visual Studio Code, crie uma pasta dentro dog_shelters chamada templates.
Crie um arquivo dentro de templates chamado base.html.

Adicione o seguinte HTML a base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Dog shelter site{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    <article class="container">
        <section class="jumbotron">
            <h3>Dog shelter application</h3>
        </section>
        {% block content %}
        {% endblock %}    
    </article>
</body>
</html>

Observação

Estamos usando o Bootstrap versão 4.6 no site. No entanto, não precisamos ter nenhum conhecimento sobre como usar o Bootstrap. Só estamos usando uma classe, jumbotron. Em outros casos, usamos um HTML básico.

Observe as duas instruções {% block %}: uma para o título e a outra para o conteúdo que será fornecido pelas páginas filho. Estamos fornecendo um valor padrão para title, o que garante que sempre teremos um título se uma página filho não o definir.

Criar o modelo de lista de abrigos

Agora, criaremos outro modelo para a listagem de todos os abrigos. Executaremos um loop na lista de abrigos e criaremos links para detalhes de todos eles.

Em dog_shelters/templates, crie um arquivo chamado shelter_list.html.

Adicione o seguinte código para criar o modelo para nossa lista de abrigos:

{% extends 'base.html' %}

{% block title %}
Shelter list
{% endblock %}

{% block content %}
<h2>Shelter list</h2>
<div>Here is the list of registered shelters</div>
    {% for shelter in shelters %}
        <div>
            <a href="{% url 'shelter_detail' shelter.id %}">
                {{shelter.name}}
            </a>
        </div>
    {% endfor %}
</div>
{% endblock %}

Usamos as marcas block para indicar o local em que queremos colocar as informações. Especificamos um valor de title igual a Shelter list, e os itens content serão a lista de todos os abrigos.

Também estamos usando uma nova marca, url. A marca url gera uma URL dinamicamente. Nossas URLs são registradas na URLconf, de modo que possam ser alteradas. Usando a marca url, podemos instruir o Django a recuperar a URL apropriada da URLconf em vez de embutir em código um caminho.

A marca url procura o nome do caminho, shelter_detail, em nosso caso, bem como a lista de todos os parâmetros esperados. shelter_detail tem um parâmetro, pk. Essa é a chave primária (ou a ID) do abrigo. Especificamos a ID usando shelter.id.

Criar o modelo de detalhes do abrigo

Com o modelo de lista criado, agora podemos criar o modelo de detalhes.

Em dog_shelters/templates, crie um arquivo chamado shelter_detail.html.

Adicione o seguinte código para criar o modelo:

{% extends 'base.html' %}

{% block title %}
Shelter list
{% endblock %}

{% block content %}
<h2>{{ shelter.name }}</h2>
<div>Located in {{ shelter.location }}</div>
{% if shelter.dog_set.all %}
    <div>Here is the list of available dogs</div>
    {% for dog in shelter.dog_set.all %}
        <div>
            <a href="">
                {{dog.name}}
            </a>
        </div>
    {% endfor %}
    </div>
{% else %}
    <div>This shelter has no dogs available for adoption</div>
{% endif %}
{% endblock %}

Observe que, no corpo, verificamos se algum cão está no abrigo usando if shelter.dog_set.all. Se houver cães, exibiremos a lista usando for para executar um loop em todos os cães. Caso contrário, exibiremos uma mensagem informando que não há nenhum cão disponível. Atualizaremos o link em uma unidade posterior.

Observação

Você pode observar que estamos fazendo duas chamadas a shelter.dog_set.all. Caso tenha experiência com bancos de dados e ORMs, talvez esteja preocupado com o fato de que estamos fazendo duas chamadas a ele. Duas chamadas normalmente causam um impacto no desempenho. O Django tem um cache interno, o que garantirá que apenas uma chamada ao banco de dados seja feita.

Testar o site

Com os modelos criados, podemos ver o site em ação.

Salve todos os arquivos.
Abra o navegador e vá até http://localhost:8000.
A lista de abrigos agora será exibida.
Selecione Contoso.
A lista de cães do abrigo Contoso agora será exibida.

Exercício – Criar modelos

Criar o modelo base

Criar o modelo de lista de abrigos

Criar o modelo de detalhes do abrigo

Testar o site

Comentários