Modelos Django – 03

Resumo : neste tutorial, você aprenderá como criar modelos Django, passar dados de funções de visualização para modelos e exibir os dados nos modelos.

Este tutorial começa onde  a criação de um aplicativo Django  parou.

Introdução aos templates do Django

No tutorial anterior , você aprendeu como retornar a HttpResponsecom uma h1tag de uma view. Para retornar uma página HTML completa, você precisará usar um modelo.

Observe que é possível retornar uma página HTML completa misturando o HTML com o código Python. No entanto, não é prático e não se adapta bem.

Um modelo é um arquivo que contém as partes estáticas e dinâmicas de uma página da web. Para gerar as partes dinâmicas da página da web, o Django usa sua linguagem de modelo específica chamada linguagem de modelo Django ou DTL.

O mecanismo de template do Django renderiza templates que contêm variáveis, construções, tags e filtros.

Variáveis

Uma variável é cercada por {{e }}. Por exemplo:

Hi {{name}}, welcome back!

Neste modelo, the nameé uma variável. Se o valor da namevariável for John, o mecanismo de template do Django renderizará o template acima no seguinte texto:

Hi John, welcome back!

Se uma variável for um dicionário , você poderá acessar os itens do dicionário usando a notação de ponto ( dict_name.key).

Suponha que você tenha um persondicionário com duas chaves namee email:

person = {'name': 'John', 'email': '[email protected]'}Linguagem de código:  JavaScript  ( javascript )

… você pode acessar os valores das chaves namee emaildo persondicionário no modelo assim:

{{ person.name }}
{{ person.email }}

Tag

As tags são responsáveis ​​por gerar conteúdo, servir uma estrutura de controle if-else, for-loop e obter dados de um banco de dados.

As tags são cercadas por {%e %}. Por exemplo:

{% csrf_token %}

Neste exemplo, a csrf_tokentag gera um token para prevenir ataques CSRF.

Algumas tags gostam if-elsee for-loopexigem tags de início e fim. Por exemplo:

{% if user.is_authenticated %}
Hi {{user.username}} 
{% endif %}Linguagem de código:  PHP  ( php )

Filtros

Os filtros transformam o conteúdo das variáveis ​​e dos argumentos das tags. Por exemplo, para colocar cada palavra de uma string em maiúscula, você usa o titlefiltro assim:

{{ name | title }}

Se o valor da namevariável for john doe, o titlefiltro irá transformá-la no seguinte:

John Doe

Alguns filtros aceitam um argumento. Por exemplo, para formatar uma data da joined_datevariável no Y-m-dformato, você utiliza o seguinte filtro:

{{ joined_date | date: "Y-m-d" }}Linguagem de código:  JavaScript  ( javascript )

Aqui estão as tags e filtros de modelo integrados completos .

Comentários

Os comentários ficarão assim:

{# This is a comment in the template #}Linguagem de código:  PHP  ( php )

O mecanismo de template do Django não renderizará texto dentro dos blocos de comentários.

Exemplos de modelos Django

Primeiro, crie um novo diretório chamado templatesdentro do blogdiretório:

mkdir templates

Segundo, crie um blogdiretório dentro do templatesdiretório:

cd templates
mkdir blog

Observe que o diretório dentro do templatesdiretório deve ter o mesmo nome do nome do aplicativo. Neste exemplo, o blogdiretório tem o mesmo nome do blogapp do projeto Django.

Terceiro, dentro do templates/blogdiretório crie dois arquivos de modelo home.htmle about.htmlcom o seguinte conteúdo.

O home.htmlarquivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Home</h1>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

O about.htmlarquivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <h1>About</h1>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

É importante observar que você deve adicionar o blogaplicativo à INSTALLED_APPSlista do settings.pyarquivo para que os modelos funcionem. Normalmente, você faz isso imediatamente após criar o novo aplicativo Django .

INSTALLED_APPS = [
    # ...
    'blog.apps.BlogConfig',
]Linguagem de código:  Python  ( python )

Quarto, abra o views.pyarquivo e altere as funções home()de about()visualização para o seguinte:

from django.shortcuts import render


def home(request):
    return render(request, 'blog/home.html')


def about(request):
    return render(request, 'blog/about.html')
Linguagem de código:  Python  ( python )

Neste views.pyarquivo, importamos a render()função do arquivo django.shortcuts.

A render()função aceita um HttpRequestobjeto e um caminho para um modelo. Ele renderiza o modelo e retorna um HttpResponseobjeto.

Quinto, execute o servidor de desenvolvimento Django:

python manage.py runserverLinguagem de código:  CSS  ( css )

Por fim, abra o URL http://127.0.0.1:8000/e o URL http://127.0.0.1:8000/about/, você verá páginas HTML completas provenientes dos modelos home.htmle .about.html

Passando variáveis ​​para um modelo

Criaremos dados fictícios de postagem no blog e os passaremos para o home.htmlmodelo. Posteriormente, você aprenderá como obter os dados de postagem do banco de dados.

Ficará views.pyassim:

from django.shortcuts import render

posts = [
    {
        'title': 'Beautiful is better than ugly',
        'author': 'John Doe',
        'content': 'Beautiful is better than ugly',
        'published_at': 'October 1, 2022'
    },
    {
        'title': 'Explicit is better than implicit',
        'author': 'Jane Doe',
        'content': 'Explicit is better than implicit',
        'published_at': 'October 1, 2022'
    }
]


def home(request):
    context = {
        'posts': posts
    }
    return render(request, 'blog/home.html', context)


def about(request):
    return render(request, 'blog/about.html')
Linguagem de código:  Python  ( python )

Como funciona.

  • Primeiro, crie uma nova lista ( posts) que armazene os dados fictícios da postagem.
  • Segundo, defina um novo dicionário contextdentro da home()função com a chave postse passe-o para a render()função como terceiro argumento.

Dentro home.htmldo template, você pode acessar os dados do post através da postsvariável.

O seguinte home.htmlmodelo que exibe as postagens:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Blog</title>
</head>
<body>  
	{% for post in posts %}
		<h2>{{ post.title }}</h2>
		<small>Published on {{ post.published_at }} by {{ post.author}}</small>
		<p>{{ post.content }}</p>
	{% endfor %}
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Como funciona.

  • Primeiro, use um forloop para iterar sobre a postsvariável. O forloop termina com endfor. Ambos for e endforestão cercados por {%e %}.
  • Segundo, coloque o valor de cada item no dicionário usando a notação de ponto ( .).

Se você salvar home.htmle abrir o URL http://127.0.0.1:8000/, verá os dados da postagem exibidos na página.

Além do forloop, você pode usar outra instrução condicional como if-else. Por exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>{% if title %} {{title}} {% else %} Blog {% endif %}</title>
</head>
<body>
	{% for post in posts %}
		<h2>{{ post.title }}</h2>
		<small>Published on {{ post.published_at }} by {{ post.author}}</small>
		<p>{{ post.content }}</p>
	{% endfor %}
</body>
</html>
Linguagem de código:  HTML, XML  ( xml )

Este exemplo usa uma if-elseinstrução para mostrar a titlevariável se ela está disponível ou Blognão.

Para passar a titlevariável para o home.htmlmodelo, você adiciona uma nova entrada ao contextdicionário com a chave titlena home()função como esta:

def home(request):
    context = {
        'posts': posts,
        'title': 'Zen of Python'
    }
    return render(request, 'blog/home.html', context)
Linguagem de código:  Python  ( python )

Se você atualizar o URL inicial http://127.0.0.1:8000/, verá o novo título.

Normalmente, um site tem algumas seções comuns, como cabeçalho, rodapé e barra lateral. Para evitar repeti-los em todos os modelos, você pode usar um modelo base.

Criando um modelo base

Primeiro, crie um novo templatesdiretório no diretório do projeto (não no blogaplicativo):

├── blog
├── db.sqlite3
├── django_project
├── manage.py
├── templates
└── users
Linguagem de código:  texto simples  ( texto simples )

A seguir, adicione o diretório do template à TEMPLATESopção no settings.pyarquivo do projeto:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates' ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
Linguagem de código:  Python  ( python )

Observe que BASE_DIRé um Pathobjeto que vem do pathlibmódulo integrado. A barra /é um operador que concatena o BASE_DIRobjeto com a 'templates'string. Esse recurso é chamado de sobrecarga de operador em Python.

Em seguida, crie base.htmlno templatesdiretório com o seguinte código:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{% if title %} {{title}} {% else %} Blog {% endif %}</title>
    </head>
    <body>
        {% block content %}
        {% endblock %}
    </body>
</html>
Linguagem de código:  HTML, XML  ( xml )

O base.htmlé servido como modelo base para outros modelos. O nome do modelo base pode ser qualquer coisa como main.html.

Depois disso, altere o home.htmltemplate dentro do templates/blogdiretório da seguinte forma:

{% extends 'base.html' %}

{% block content %}
        <h1>My Posts</h1>
	{% for post in posts%}
	<h2>{{ post.title }}</h2>
	<small>Published on {{ post.published_at }} by {{ post.author}}</small>
	<p>{{ post.content }}</p>
	{% endfor%}
{% endblock %}Linguagem de código:  HTML, XML  ( xml )

Estende home.htmlo base.htmlmodelo usando a extendstag. O home.htmltemplate possui sua seção para o contentbloco.

Além disso, altere o about.htmlmodelo que estende o base.htmlmodelo:

{% extends 'base.html' %}

{% block content %}
<h1>About</h1>
{% endblock content %}Linguagem de código:  HTML, XML  ( xml )

Finalmente, reinicie o servidor de desenvolvimento Django e abra URL http://127.0.0.1:8000/e você verá as mudanças.

Configurar arquivos estáticos

Os arquivos estáticos são arquivos CSS, JavaScript e de imagem que você usa nos modelos. Para usar os arquivos estáticos nos modelos, siga estas etapas:

Primeiro, crie um staticdiretório dentro do diretório do projeto:

mkdir staticLinguagem de código:  JavaScript  ( javascript )

O diretório do projeto ficará assim:

├── blog
├── db.sqlite3
├── manage.py
├── mysite
├── static
└── templatesLinguagem de código:  CSS  ( css )

Segundo, defina o STATICFILES_DIRSapós settings.pyo STATIC_URLarquivo para que o Django possa encontrar os arquivos estáticos no diretório estático:

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']Linguagem de código:  Python  ( python )

Terceiro, crie três diretórios js, csse imagesdiretório dentro do staticdiretório:

├── static
|  ├── css
|  ├── images
|  └── jsLinguagem de código:  texto simples  ( texto simples )

Quarto, crie style.cssdentro do diretório CSS com o seguinte conteúdo.

h1{
	color:#0052EA
}

form {
	max-width: 400px;
}
label, input, textarea, select{
	display:block;
	width:100%;
}

input[type="submit"]{
	display:inline-block;
	width:auto;
}

.errorlist {
	padding:0;
	margin:0;
}
.errorlist li{
	color:red;
	list-style:none;
}

.alert{
	padding:0.5rem;	
}

.alert-success{
	background-color: #dfd
}
.alert-error{
	background-color:#ba2121;
	color:#fff;
}Linguagem de código:  CSS  ( css )

Observe que usamos apenas algumas regras CSS simples para facilitar o acompanhamento dos tutoriais. Nosso foco principal é Django, não CSS ou JavaScript.

Quinto, crie o app.jsinterior do jsdiretório com o seguinte código:

setTimeout(() => {
  alert('Welcome to my site!');
}, 3000);
Linguagem de código:  JavaScript  ( javascript )

Este código mostra um alerta após o carregamento da página por 3 segundos .

Sexto, edite o base.htmlmodelo para carregar os arquivos style.csse app.js:

{%load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <script src="{% static 'js/app.js' %}" defer></script>
    <title>My Site</title>
  </head>
  <body>
    {%block content%} 
    {%endblock content%}
  </body>
</html>
Linguagem de código:  HTML, XML  ( xml )

Sétimo, reinicie o servidor de desenvolvimento Django, abra a URL http://127.0.0.1:8000/e você verá que a cor do título muda de acordo com a regra CSS.

Além disso, você verá um alerta após cerca de 3 segundos porque o JavaScriptcódigo é app.jsexecutado:

Django iniciar projeto - js

Como não estamos focando na parte JavaScript, você pode remover o código do app.jsarquivo para continuar no próximo tutorial.

Baixe o código fonte do Projeto Django

Resumo

  • Um modelo Django contém partes estáticas e dinâmicas de uma página web.
  • Django usa Django Template Language (DTL) por padrão para criar modelos.
  • Use {{ variable_name }}para exibir o valor de variable_nameem um modelo.
  • Use {% control_tag %}para incluir uma tag de controle em um modelo.
  • Use a statictag para carregar os arquivos estáticos, incluindo CSS, JavaScript e imagens.
Django Criar Aplicativo
Anterior
Django Criar Aplicativo

Próximo
Modelos Django

Modelos Django

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *