Exercício - Criar modelos
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 em todo o nosso aplicativo.
Criar o modelo base
Um modelo base é comum para todos os projetos Django. Começaremos por criar um.
No Visual Studio Code, crie uma nova pasta dentro de dog_shelters modelos nomeados.
Crie um novo arquivo dentro de modelos chamado base.html.
Adicione o seguinte HTML ao 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>Nota
Estamos usando o Bootstrap versão 4.6 para o nosso site. No entanto, não precisamos de conhecimento do Bootstrap aqui. Estamos usando apenas uma classe, jumbotron. Caso contrário, estamos usando o HTML principal.
Observe as duas {% block %} instruções, uma para o título e outra para o conteúdo que as páginas secundárias fornecerão. Estamos fornecendo um valor padrão para title, o que garante que sempre teremos um título se uma página secundária não o definir.
Criar o modelo de lista de abrigos
Agora vamos criar outro modelo para listar todos os abrigos. Vamos percorrer a lista de abrigos e criar links para detalhes de todos os abrigos.
Em dog_shelters/templates, crie um novo arquivo chamado shelter_list.html.
Adicione o seguinte código para criar o modelo para a 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 block tags para indicar onde queremos que nossas informações sejam colocadas. Especificamos um title valor de Shelter list, e os content itens serão a lista de todos os abrigos.
Também estamos usando uma nova tag, url. A url tag gera um URL dinamicamente. Os nossos URLs estão registados no nosso URLconf, pelo que podem ser alterados. Usando a url tag , podemos dizer ao Django para recuperar a URL apropriada do URLconf em vez de codificar em um caminho.
A url tag procura o nome do caminho, shelter_detail no nosso caso, e, em seguida, a lista de quaisquer parâmetros esperados. shelter_detail tem um parâmetro, pk. Essa é a chave primária, ou ID, do abrigo. Especificamos o ID usando shelter.id.
Criar o modelo de detalhes do abrigo
Com o nosso modelo de lista criado, agora podemos criar o modelo de detalhes.
Em dog_shelters/templates, crie um novo 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á dentro do abrigo usando if shelter.dog_set.all. Se houver cães, exibimos a lista usando for para percorrer todos os cães. Caso contrário, exibimos uma mensagem que diz que não há cães disponíveis. Atualizaremos o link em uma unidade posterior.
Nota
Você pode notar que estamos fazendo duas chamadas para shelter.dog_set.allo . Se você tem experiência com bancos de dados e ORMs, pode estar preocupado com o fato de estarmos fazendo duas chamadas para o banco de dados. Duas chamadas seriam normalmente um sucesso de desempenho. O Django tem cache integrado, o que garantirá que apenas uma chamada para o banco de dados seja feita.
Testar o site
Com os nossos templates criados, podemos ver o nosso site em ação!
Salve todos os arquivos.
Abra o seu browser e vá para http://localhost:8000.
A lista de abrigos deve agora aparecer.
Selecione Contoso.
A lista de cães para o abrigo da Contoso agora é exibida.
