Como Criar Uma Aplicação Blog Com Django

Django é um framework full-stack que permite aos desenvolvedores criar novas aplicações rapidamente usando seus padrões MVT/MVC.

Portanto, este post irá exemplificar como você pode criar uma aplicação de blog utilizando Django e todas as suas funcionalidades, permitindo entender como model, view e controller funcionam em conjunto com templates.

O que voce ira aprender nesta postagem:

Como criar um ambiente virtual python.
Instalação do Django no ambiente virtual.
Inicio de um projeto Django.
Criação de um Model.
Views para exibir os dados.
URLs, templates e muito mais…

Você precisara das seguintes ferramentas instaladas no seu computador para seguir este tutorial:

Python3 e Pip3
Um IDE como o VSCode

Iniciando o projeto com django

Para iniciar este projeto Django você precisará abrir seu IDE e adicionar uma pasta vazia a ele. Chamei essa pasta de blog-project, mas você pode nomeá-la como desejar.

Depois de adicionar o projeto ao seu IDE, certifique-se de que o terminal esteja no diretório correto para iniciar o projeto. Já que precisamos adicionar o código dentro dele pelo terminal usando pip.

1 – Preparando o ambiente virtual do projeto django

$ python3 -m venv venv

Bash

Assim que este comando criar a pasta venv você precisara adicionar novamente o seguinte comando para ativar o ambiente virtual (venv).

Unix OS: Linux ou MacOS:

$ source venv/bin/activate

Bash

Windows OS:

venv\Script\activate

PowerShell

Se você executou a abordagem e seguiu corretamente, seu diretório de caminho terá o nome do ambiente virtual no início dele. Por exemplo, se o diretório do caminho for nome do caminho-para-projeto/blog-project $, ele será alterado para (venv) nome-do-computador/projeto-blog $.

2 – Instalando o framework Django no ambiente virtual

Agora que você tem o ambiente pronto, você precisa instalar o framework Django nele. Em seu terminal adicione o seguinte comando:

$ pip install django

Bash

Feito isso, o django será instalado, e você só precisa criar o blog-project dentro do diretório raiz.

3 – Criando projeto principal no Django

Agora que toda a configuração inicial está feita, vamos iniciar o projeto. Você precisará adicionar o seguinte comando para criar o projeto no diretório principal:

$ django-admin startproject blog_project

Bash

Assim que você adicionar o seguinte comando ao seu terminal, uma pasta chamada blog_project será adicionada ao seu diretório com outra pasta blog_project como o controlador do Django e o arquivo manage.py.

Portanto, se você seguiu todos os passos explicados até agora, seu diretório deverá ficar assim:

blog-project/ 
 |
 |__blog_project/
 |   |
 |   |__blog_project/
 |   |     |___ __init__.py
 |   |     |____settings.py
 |   |     |____urls.py
 |   |     |____wsgy.py
 |   | 
 |   |__manage.py   
 |
 |__venv/

Bash

4 – Iniciando seu projeto

Agora que todas as configurações principais já foram feitas, você pode iniciar seu projeto. Vá para a pasta blog_project/root com o comando:

$ cd blog_project

Bash

Apenas um ponto aqui: Para quem é iniciante, certifique-se de ter três pastas diferentes: a pasta raiz chamada blog-project/, a pasta raiz do projeto django chamada também de blog_project/ e a pasta controllers dentro da pasta raiz django que também é chamada blog_project/. O comando acima irá direcioná-lo para a próxima pasta, a raiz do django blog_project/.

Portanto, uma vez dentro da pasta raiz do projeto Django, (a mesma que contém o arquivo manager.py), você pode executar o comando para iniciar seu projeto Django com o seguinte comando:

$ python manage.py runserver

Bash

Com o seguinte comando seu projeto será iniciado e no terminal ele irá rodar e mostrar qual porta o projeto está rodando:

(venv) computer-name/blog_project $ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly 
until you apply the migrations for app(s): admin, auth, contenttypes, 
sessions.
Run 'python manage.py migrate' to apply them.
February 07, 2021 - 17:52:22
Django version 3.1.6, using settings 'blog_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Bash

No meu caso o endereço é https://127.0.0.1:8000. Clique nele ou copie e cole em seu navegador para ver o resultado:

Se tudo correr bem você poderá ver a imagem acima no endereço fornecido pelo terminal.

5 – Criando um novo app para o seu projeto django

Agora é hora de criar seu primeiro aplicativo para o seu projeto Django. Mas antes de adicionar o comando para criar o aplicativo, você precisa abrir um novo terminal para executar o projeto, já que o último terminal está sendo usado para executar o aplicativo.

Portanto, abra um novo terminal no IDE, ative novamente o ambiente virtual no diretório raiz e mude o diretório para a raiz do Django, que é uma pasta à frente.

Então, após ativar seu ambiente virtual e alterar o diretório novamente em seu segundo terminal, adicione o seguinte comando para criar o app:

$ python manage.py startapp blog

Bash

Agora que você criou o diretorio/pasta chamada blog o seu diretório deve parecer desta maneira:

blog-project/ # <---------- primeiro diretorio criado manualmente
 |   
 |___blog_project/ # <----- diretorio criado pelo comando django-admin startapp ...
 |   | 
 |   |__blog_project/ # <----- diretorio criado pelo comando django-admin startapp ...
 |   |    |__ __init__.py
 |   |    |__settings.py
 |   |    |__urls.py
 |   |    |__wsgy.py
 |   |
 |   |
 |   |___blog/ # <------ diretorio criado agóra
 |   |   |
 |   |   |__migrations/
 |   |   |___ __init__.py
 |   |   |___admin.py
 |   |   |___apps.py
 |   |   |___models.py
 |   |   |___views.py
 |   |
 |   |__manage.py
 |
 |__venv/

Bash

Agora, você precisa adicionar o aplicativo blog criado recentemente nas configurações do projeto. Portanto, em blog_project/settings.py adicione o blog na configuração INSTALLED_APP:

INSTALLED_APPS = [
  'django.contrib.admin',
  'Django.contrib.auth',
  'django.contrib.contenttypes', 
  'django.contrib.sessions', 
  'Django.contrib.messages',
  'Django.contrib.staticfiles',
  'blog', # <------ Novo
 ]

Python

Adicionando o app blog no INSTALLED_APPS o django irá reconhecer o aplicativo que iremos trabalhar.

6 – Migrando as tabelas padrão do django

Antes de entrarmos no código, precisamos criar um superusuário para o projeto.

O superusuário tem a capacidade de gerenciar modelos na parte administrativa do site.

Muito bem, vamos criá-lo, no seu terminal adicione o seguinte comando:

$ python manage.py createsuperuser

Bash

Porém ao rodar este comando você receberá uma menssagem de error:

You have 18 unapplied migration(s). Your project may not work properly 
until you apply the migrations for app(s): admin, auth, contenttypes, 
sessions.

Run 'python manage.py migrate' to apply them.

Bash

Que traduzido diz:

Você tem 18 migrações não aplicadas. O seu projeto talvez não ira funcionar perfeitamente ate você aplicar as migrações para os apps: admin, auth, contenttypes, session.

Rode o comando python manage.py migrate para aplica-as.

Então vamos la, vamos fazer isso. Se você ler a mensagem, ela diz para executar um comando, que é:

$ python manage.py migrate

Bash

Deixei essa questão acima para você entender como é desenvolver uma aplicação.

Às vezes será normal receber alguns erros como esse para dizer o que não está certo. Portanto, fique sempre de olho no terminal para ver o que o Django e o python dirão se houver algo errado.

Ok, vamos voltar à criação do superusuário.

Então, após corrigir o problema de migração, adicione novamente o comando de criação de superusuário em seu terminal, logo em seguida adicione um nome para ele, eu usei o nome admin mas você pode escolher o que quiser. Você tambem terá que adicionar o seu e-mail e senha duas vezes.

NOTA: Se for a primeira vez que você cria um projeto Django, entenda que a senha não aparecerá no terminal. Basta adicioná-lo e pressionar Enter. <—————–

Agora que você já criou o superusuário, acesse o site /admin para fazer o login. Portanto, você só precisa adicionar /admin na frente da url do projeto e ele o redirecionará para a página de login.

http://127.0.0.1:8000/admin/

Depois de ser redirecionado, você verá a página de login:

Em seguida, faça login usando o nome de usuário e senha que você criou anteriormente e você será redirecionado para o site de administração.

Muito bem, agora você tem acesso a pagina de administrador como superusuário e pode fazer futuras edições em seus futuros modelos.

7 – Enviando nossa primeira mensagem para o frontend

Ótimo, agora você verá parte da funcionalidade do que o Django é capaz. Enviaremos uma mensagem de “hello world” para o frontend. Então, assim você terá uma ideia de como o Django funciona com a arquitetura MVC (model, view, controller).

No seu aplicativo blog, acesse o arquivo views.py e adicione o seguinte código:

blog/views.py

from django.shortcuts import render 
from django.http import HttpResponse 

# Create your views here. 
def index(request): #<------ Novo
    return HttpResponse('hello world')

Python

A área destacada é o novo código que você deve adicionar ao arquivo views.py. Agora que você adicionou este código em seu blog/views.py, você deve dizer ao Django onde esta resposta deve aparecer. Portanto, vá para blog_project/urls.py e adicione o caminho da visualização que você criou em blog/views.py.

blog_project/urls.py:

from django.contrib import admin
from django.urls import path 
from blog.views import index #<------ Novo

urlpatterns = [ 
  path('', index, name='index'), #<------ Novo
  path('admin/', admin.site.urls)
]

Python

Nesta seção, você precisará importar a função index que criou em blog/views.py e adicioná-la ao caminho como o nome index. Você também pode ver que há uma string vazia no início do caminho. Isso significa que a função e a página serão executadas como o URL principal.

Agora, depois de configurar views.py e urls.py, vá para a url principal: http://127.0.0.1:8000/ e atualize a página. Se você fez tudo certo, deverá ver um texto “hello world” no canto superior direito da tela.

NOTA: Se você encontrou algum erro, verifique o código acima e tente encontrar algum erro de ortografia, caso tenha esquecido de importar a função index para o urls.py. Além disso, verifique a última mensagem na parte inferior da mensagem de erro em seu terminal. Lá você verá o que há de errado. Se não houver erro, vamos para a próxima parte.

8 – Criando o seu primeiro model no seu projeto django

Agora é hora de você criar seu primeiro model para esta aplicação. No aplicativo blog, acesse models.py e adicione o seguinte código.

blog/modelos.py:

from django.db import models 

# Create your models here.
class Article(models.Model): 
    title = models.CharField(max_length=100) 
    body = models.TextField() 
    date = models.DateTimeField(auto_now_add=True) 
    thumb = models.ImageField(blank=True)
  
    def __str__(self): 
        return self.title

Python

O código acima é um comando para criar uma tabela chamada Article (Artigo) no django sqlite, com title (título), body (corpo), date (data), thub (imagem) e a função __str__ para exibir o título do blog na página de administração. Olhando atentamente para esta classe, você verá que cada um desses campos possui métodos diferentes.

Por exemplo:

Para o title (título) você verá um método Charfield() com comprimento de 100 caracteres. Este método permitirá adicionar caracteres simples (string), como títulos, nomes ou frases.
O body (corpo) possui um método diferente chamado TextField(). Como o próprio nome já diz, ele serve para armazenar maiores quantidades de caracteres, como textos.
A variável de date (data) é atribuída ao método DateTimeField(). Este método armazena a data e hora em que um novo objeto é criado.
Para o thumb (imagem), o método utilizado é ImageField(). Este campo é criado para armazenar uma imagem do objeto.

NOTA: Para o método ImageField(), você precisará instalar o Pillow para manipular as imagens adicionadas ao criar o objeto.

8.1 – Instalando o pacote Pillow para gerenciar imagens no django

Ao salvar o arquivo models.py com o qual você criou o modelo Article, você receberá um erro (caso a aplicação esteja rodando):

Terminal:

ERRORS: 
blog.Article.thumb: (fields.E210) Cannot use ImageField because Pillow is not 
installed.
HINT: Get Pillow at https://pypi.org/project/Pillow/ or run 
command "python -m pip install Pillow".

Bash

Portanto, seguindo a dica da mensagem acima, você precisará instalar o Pillow para poder adicionar imagens aos seus artigos. Adicione o seguinte código em seu terminal:

$ pip install Pillow

Bash

Depois de instalá-lo, você precisará configurar o settings.py para apontar (programar o caminho no django) onde as imagens serão colocadas quando você adicioná-lo no formulário do artigo.

8.2 – Configurando o caminho das imagens

No arquivo settings.py adicione o código a seguir:

blog_project/settings.py:

# No topo do arquivo.
Import os

...

# No final do arquivo.

# caminho onde devera inserir os arquivos de imagem.
MEDIA_URL = '/media/' 

# especificando o arquivo.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Python

Após essa configuração ser feita, você precisa registrar o artigo modelo em sua página de administração.

8.3 – Registrando o modelo no site de administrador

Vá até a pasta do seu blog e no arquivo admin.py adicione o seguinte código para cadastrar o modelo Article:

blog/admin.py

from django.contrib import admin
from .models import Article #<------ Nova linha

# Register your models here. 
admin.site.register(Article) #<------ Nova linha

Python

Você precisará importar o modelo Article do arquivo .models e registrá-lo na página de administração.

8.4 – Criando o seu primeiro artigo na aplicação blog

Agora que você já criou o modelo Article, cadastra-lo na página de administração, vá para a página de administração e verá uma nova seção adicionada à página de administração chamada Articles:

Clique no link Articles e na próxima página, no canto superior direito clique no botão ADD ARTICLE + para adicionar uma nova postagem no blog:

Adicione um título, um corpo de texto, uma imagem e salve. Você verá que o artigo com o nome Hello World foi adicionado ao seu banco de dados e uma nova pasta chamada media foi adicionada ao seu diretório blog_project/ como blog_project/media com a imagem que você escolheu para o seu artigo.

Como você adicionou uma nova pasta, seu diretório deve ficar assim:

blog-project/ 
 |   
 |___blog_project/
 |   | 
 |   |__blog_project/
 |   |    |__ __init__.py
 |   |    |__settings.py
 |   |    |__urls.py
 |   |    |__wsgy.py
 |   |
 |   |
 |   |___blog/
 |   |   |
 |   |   |__migrations/
 |   |   |___ __init__.py
 |   |   |___admin.py
 |   |   |___apps.py
 |   |   |___models.py
 |   |   |___views.py
 |   |
 |   |___media/ #<------- new
 |   |     |__imgexp.png
 |   |
 |   |__manage.py
 |__venv/

Bash

9- Adicionando templates e pastas estáticas para criar o frontend

Neste ponto estamos prontos para iniciar nossa parte de frontend. Crie uma nova pasta chamada templates em seu diretório raiz. Vá para /blog-project/blog_project/ e adicione o seguinte comando:

$ mkdir templates

Bash

Assim a pasta de templates será criada, agora você precisa informar ao Django onde a pasta de templates está localizada.

Vá para settings.py e adicione o nome ‘templates’ no código do array TEMPLATES:

blog_project/settings.py

TEMPLATES = [
    {
        "DIRS": ["templates"],
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "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"
            ],
        },
    },
]

Python

Você também precisará criar uma pasta estática para adicionar arquivos estáticos, como css, javascript e imagens estáticas. Você precisará seguir quase a mesma abordagem que fez para criar a pasta de modelos. Além disso, a pasta estática será colocada no mesmo local que a dos modelos. Portanto, em seu terminal adicione o seguinte comando:

$ mkdir static

Bash

Assim, sua pasta estática (static) será criada no diretório raiz do projeto. O mesmo que os modelos. Então, agora, assim como na pasta de templates você precisará dizer ao Django que você tem uma pasta estática:

Vá para settings.py e na parte inferior do arquivo adicione o seguinte código:

blog_project/settings.py:

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

Python

Agora que você criou a pasta estática e a configurou seguindo o código acima você está pronto para ir para a próxima etapa, que é adicionar o frontend deste projeto.

NOTA: Ótimo, você está pronto para iniciar a parte frontend deste tutorial. Se tudo estiver funcionando corretamente, perfeito. Agora é a etapa em que você precisa criar os arquivos HTML e CSS onde o código será adicionado. Então, desta parte até o final vou pedir toda a atenção de você. Porque, se você perder um pequeno passo ou detalhe, poderá enfrentar alguns erros.

10- Adicionando arquivos HTML e CSS nos templates e pastas estáticas

Nesta parte você exibirá o frontend deste projeto. A partir da próxima parte começaremos a buscar dados do modelo Article que você criou na parte 8 deste tutorial e exibiremos no frontend.

10.1 – Adicionando o HTML com tags de template integradas ao Django

Os modelos e pastas estáticas que você adicionou agora serão usados para ter o arquivo base.html. O arquivo no qual será usado para armazenar todas as outras páginas que serão criadas.

Dentro da pasta de templates crie um novo arquivo chamado base.html.
Adicione o seguinte código dentro do base.html:

modelos/base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Blog Project</title>
  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <!-- Custom styles from static folder -->
  <link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar fixed-top navbar-expand-lg navbar-default fixed-top shadow shadow-inset">
    <div class="container">
      <a class="navbar-brand" href="">Blog Project</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  <header>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url('https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_1280.jpg')">
          <div class="carousel-caption d-none d-md-block">
            <h3>Title</h3>
            <p>This is a description for your blog.</p>
          </div>
        </div>
  </header>
  <!-- Page Content -->
  <div class="container">
    {% block content %}

  {% endblock content %}
    </div>
  <!-- /.container -->
  <!-- Footer -->
  <footer class="py-5 shadow-xs shadow-inset">
    <div class="container">
      <p class="m-0 text-center ">Copyright © Your Website 2021</p>
    </div>
    <!-- /.container -->
  </footer>
  <!-- Bootstrap core JavaScript -->
  <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

HTML

Agora que você adicionou o código em base.html salve-o e vamos nos preparar para exibir esta página no frontend.
Para adicionar o código css, crie uma nova pasta chamada css dentro da pasta static e dentro da pasta css crie um arquivo css chamado style.css. O caminho para este arquivo deve ser assim:

static/css/style.css

Agora que você adicionou style.css, adicione o seguinte estilo neste arquivo:

body {
    padding-top: 56px;
  }
  
.carousel-item {
    height: 65vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
.portfolio-item {
    margin-bottom: 30px;
  }

CSS

After the creation the templates and css folders as well as the style.css file, your working directory should look like this:

blog-project/ 
 |  
 |   
 |___blog_project/
 |   | 
 |   |__blog_project/
 |   |    |__ __init__.py
 |   |    |__settings.py
 |   |    |__urls.py
 |   |    |__wsgy.py
 |   |
 |   |
 |   |___blog/
 |   |   |
 |   |   |__migrations/
 |   |   |___ __init__.py
 |   |   |___admin.py
 |   |   |___apps.py
 |   |   |___models.py
 |   |   |___views.py
 |   |
 |   |___media/
 |   |     |__imgexp.png
 |   |
 |   |___static/ #<------ NEW
 |   |     |__css/
 |   |         |__style.css
 |   |
 |   |___templates/  #<------ NEW
 |   |     |__base.html
 |   |
 |   |__manage.py
 |
 |__venv/

Bash

Note: make sure you have added the files within the right folders.

10.2 Explaining template tags

Antes de prosseguirmos, você deve ter visto algumas tags incomuns no arquivo base.html. Eles são usados para finalidades diferentes. Por exemplo, a tag de modelo {% load static %}.

Trata-se simplesmente de carregar os arquivos que são colocados em uma pasta estática (static). No código HTML acima, em você pode localizar um href=”{% static ‘css/style.css’ %} dentro de um link. Sem a tag de modelo {% load static %} na parte superior, seus arquivos estaticos não serão carregados.

Outras tags de modelo colocadas no meio do arquivo base.html são {% block content %} {% endblock content %}. Essas duas tags de template, como o nome diz, servem para estender outros templates dentro deste bloco html. Abordaremos mais sobre eles antecipadamente neste tutorial.

Se você é novo no Django, você deve estar se perguntando: o que essas tags de template fazem? A resposta é: eles são usados para trazer diferentes funcionalidades aos templates html. Como loops, condicionais, funcionalidades personalizadas de carregamento, inclusão de outras partes de HTML, como barras de navegação ou rodapés e etc.

Você pode ver mais sobre tags de modelo Django aqui.

11. Showing the template on frontend.

Agora que você já adicionou o template base.html nos templates e criou a pasta css e o arquivo style.css, é hora de mostrar o resultado no frontend.

No seu views.py você precisa alterar a função de índice para o seguinte código:

blog/views.py:

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'base.html')

Python

O atalho render() solicitará o template base.html e retornará a resposta ao navegador com base na URL. Portanto, se você se lembra da parte 7, adicionamos a função de índice ao caminho raiz. Em outras palavras, você só precisará salvar o views.py e recarregar a página na url http://127.0.0.1:8000/ para ver o resultado do template no frontend.

Então, se você fez tudo certo, o resultado deve ser assim:

12. Mostrando postagens do blog no frontend

Fantástico, que bom que ficou até aqui. Esta é uma das partes mais difíceis do tutorial. Portanto, para as próximas partes, recomendo que você preste atenção redobrada aos pequenos detalhes para não enfrentar nenhum erro.

12–1. Crie uma nova pasta de modelos no aplicativo de blog

Vá para o aplicativo blog e crie uma nova pasta chamada templates e adicione um modelo chamado posts.html. Por enquanto estará vazio.

12–2. Atualize a função de index() para reconhecer o modelo de postagens e adicionar os artigos lá

Na sua função index() você pode ver que ela está renderizando o modelo base.html. Mude para posts.html. Depois disso, você precisa importar o modelo Article para o seu views.py e atribuí-lo como articles. Além disso, você precisa criar um dicionário com o nome articles para que o modelo de postagens reconheça as postagens que são adicionadas a este modelo.

blog/views.py:

from django.shortcuts import render
# import Article model 
from .models import Article #<------ NOVO

# Create your views here.

def index(request): 
# adicionar artigos
articles = Article.objects.all() #<------ NOVO
return render(request, 'posts.html', {'articles':articles}) #<------ CODIGO NOVO

Python

12–3. Exibindo as postagens no frontend

Agora é a hora de você encontrar os primeiros posts aparecendo no frontend do seu projeto. Então, se você já adicionou um artigo no formulário Artigos da página de administração, vá até lá e adicione alguns com imagens. Caso contrário, eles não serão exibidos quando esta etapa for implementada.

Sendo assim, adicione este código ao modelo posts.html que você criou na etapa 12–1:

blog/templates/posts.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}

<br><br>
<h2>Portfolio Heading</h2>

<div class="row">
  {% for article in articles %}
   <div class="col-lg-4 col-sm-6 portfolio-item">
     <div class="card h-100">
       <a href="#"><img class="card-img-top" src="{{article.thumb.url}}" alt=""></a>
       <div class="card-body">
         <h4 class="card-title">
           <a href="#">{{article.title}}</a>
         </h4>
         <p class="card-text">{{article.body|slice:50}}</p>
       </div>
     </div>
   </div>
  <br><br>
  {% endfor %}
</div>
{% endblock content %}

HTML

Você percebeu que não há nenhuma função executando o modelo base.html, mas ele está sendo executado mesmo assim? Na verdade, ele está sendo renderizado porque o modelo posts.html o está estendendo. Portanto, ele pode ser usado para carregar todos os outros modelos, se desejar.

Você também percebeu que neste momento o código HTML está dentro das tags {% block content %} {% endblock content %}, e não como no base.html? Agora você pode entender como esses modelos funcionam. Um é usado para estender enquanto o modelo base será usado para exibir os outros modelos.

12–4. Explicando o loop “for” na template

O loop for exibirá todas as postagens do artigo adicionadas a ele no template usando a tag django loop. Você se lembrou da variável articles e do dicionário que você adicionou na função index? A variável articles será adicionada ao dicionário em views.py e o dicionário será carregado no modelo posts.html como artigos. Portanto, se você já possui um bom conhecimento de HTML poderá entender que todos os campos do template de artigos foram exibidos nos lugares ou elementos certos.

O article.body no elemento <p>, article.title no elemento <a>(sem href por enquanto) e o article.thum.url dentro do <img src=””>. No entanto, você pode perceber que a imagem não apareceu embora esteja implementada.

NOTA: O |slice:50 dentro do article.body não deve exibir todo o conteúdo do blog em um cartão. Apenas para mostrar parte do corpo nele. Esteja ciente também de que o href será adicionado posteriormente para vincular à funcionalidade de detalhes da postagem e ao URL.

12–5. Corrigindo a imagem que não aparece na template posts.html

Para corrigir esse problema, você precisará adicionar o seguinte código ao seu urls.py.

blog_projects/url.py:

from django.contrib import admin 
from django.urls import path 
from blog.views import index 

# import for display image
from django.conf import settings #<------ NOVO
from django.conf.urls.static import static #<------ NOVO

urlpatterns = [ 
    path('admin/', admin.site.urls),
    path('', index, name='index'),
]

if settings.DEBUG: #<------ NOVO
    urlpatterns += static(settings.STATIC_URL, 
    document_root=settings.STATIC_URL) 
    urlpatterns += static(settings.MEDIA_URL, 
    document_root=settings.MEDIA_ROOT)

Python

Você precisará importar configurações e estática de conf.url e iterar os urlpatterns com STATIC_URL, MEDIA_URL e MEDIA_ROOT das configurações. Se você tiver alguma dúvida você pode conferir a documentação do Django aqui para saber mais sobre essas configurações.

Após isso, atualize a página do seu navegador onde o aplicativo é exibido e verifique se as postagens aparecem. Se sim, você verá a tela assim:

13. Criando a página de detalhes do post

Esta é a última parte do nosso tutorial. Nesta seção você aprenderá como exibir a página de detalhes de cada postagem do blog individualmente clicando em um dos cartões que representam cada postagem.

13–1. crie a função post_detail

Em blog/views.py você precisará criar uma função chamada post_detail() e criar uma variável chamada detalhes atribuída a um método chamado get_object_or_404(ModelName, id=id).

A funcionalidade deste método funciona de forma que por exemplo quando você clica em um cartão ele irá até o ModelName que está atribuído e buscará o id do item e retornando o objeto. Se você quiser entender mais como funciona o método get_object_or_404 você pode dar uma olhada na documentação aqui.

Então, a função post_detail() ficará assim:

blog/views.py

from django.shortcuts import render, get_object_or_404 #<------ NOVO IMPORT
# import Article model
from .models import Article

# Create your views here.
def index(request):
    # add article.
    articles = Article.objects.all()
    return render(request, 'posts.html', {'articles':articles})

def post_detail(request, id): #<------ NOVO
    # mostrar a pagina de detalhe.
    details = get_object_or_404(Article, id=id)
    return render(request, 'details.html', {'details':details})

Python

NOTA: Para a função post_detail, você também precisará adicionar id como parâmetro para que a função retorne o resultado que é criar uma página de detalhes para cada postagem do blog. Além disso, você precisará adicionar um novo modelo html chamadodetails.html que será criado posteriormente e exibirá a variável de detalhes em um dicionário para ser reconhecida no modelo. Se ficou um pouco complicado para você, dê uma boa olhada nesta função e siga cada passo para você entender. :)

13–2. adicione o URL post-details e importe a função post_detail()

Nesta parte você precisará criar um novo caminho de URL. Em seguida, acesse blog_project/urls.py e adicione o seguinte código destacado:

blog_project/urls.py:

from django.contrib import admin
from django.urls import path
from blog.views import index, post_detail #<------ NOVO IMPORT

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name='index'),
    path('post-detail/<int:id>/', post_detail, name='postDetail') #<------ NOVO
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, 
    document_root=settings.STATIC_URL) 
    urlpatterns += static(settings.MEDIA_URL, 
    document_root=settings.MEDIA_ROOT)

Python

Nesta parte você precisará importar a função post_detail() que você criou em blog/views.py pois ela precisará de uma funcionalidade para ser usada na nova url que você irá criar. Agora, crie este novo caminho de URL chamado post-detail e adicione ao novo padrão de URL, pois int é o formato do id (inteiro).

13–3. Adicionando o href para acionar a função post_detail() e explicação

Antes de ir para a explicação de como url e post_detail() funcionam juntos, vá para posts.html e adicione o seguinte código em cada href:

href="{% url 'postDetail' id=article.id %}"

HTML

Este código permitirá que o Django acione a função post_detail quando você clicar em um dos cartões do modelo posts.html. Enviando você para a páginadetails.html.

Aqui você pode ver o que acontece quando você clica em um cartão postal:

O detalhe da postagem visto acima vai para a url e verifica qual é o padrão da url e também qual função o trata;
Então, depois de ver que post_detail é a função que trata a url, ela obtém o id do objeto no banco de dados e o retorna no template.
Você recebe a resposta no navegador com a postagem exata em que clicou.

13–4. crie o modelodetails.html

Vá para o modelo details.html vazio e adicione o código a seguir. Se você ainda não o criou, acesse blog/templates e adicione o seguinte código dentro dele.

blog/modelos/

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Page Heading/Breadcrumbs -->
<div class="row">
    <div class="col-lg-8 mx-auto">
       <h1 class="mt-4 mb-3">{{details.title}}</h1>
         <ol class="breadcrumb">
           <li class="breadcrumb-item active">Post Detail</li>
         </ol>
    </div>
</div>
 <div class="row">
   <!-- Post Content Column -->
   <div class="col-lg-8 mx-auto">
     <!-- Preview Image -->
     <img class="img-fluid rounded" src="{{details.thumb.url}}" alt="">
     <hr>
     <p>Posted on {{details.date}}</p>
     <hr>
     <p class="lead">{{details.body}}</p>
     </div>
  </div>
  {% endblock content %}

HTML

A ideia do código acima é semelhante à do modelo posts.html. No entanto, neste modelo você não tem o loop for. Em vez disso, na função post_detail() você obterá título, thumb, corpo e data.

Portanto, se você adicionou o código corretamente, ao clicar em um dos cartões do modelo posts.html no navegador você obterá esta página:

Muito bem, você terminou este tutorial usando Django. Você pode usar este código para implementar mais recursos como autenticação de usuário, adicionar categorias diferentes ou até mesmo criar um cms. Use sua imaginação e o que você aprendeu neste tutorial para fazer outras aplicações com Django. Obrigado por ficar até aqui e se você tiver algum comentário deixe um comentário abaixo e eu responderei sua pergunta.

Caso você queira aprender um pouco mais sobre os beneficios deste framework da uma olhada neste artigo.

django

Tipos de Dados no Python | Postagem 2

Fundamentos Do Python | Postagem 1

Como Criar Um App Todo Com Django

Recolocação Profissional: Voltando ao Mercado de Trabalho

django

Como Criar Uma Aplicação Blog Com Django

O que voce ira aprender nesta postagem:

Você precisara das seguintes ferramentas instaladas no seu computador para seguir este tutorial:

Iniciando o projeto com django

1 – Preparando o ambiente virtual do projeto django

2 – Instalando o framework Django no ambiente virtual

3 – Criando projeto principal no Django

4 – Iniciando seu projeto

5 – Criando um novo app para o seu projeto django

6 – Migrando as tabelas padrão do django

7 – Enviando nossa primeira mensagem para o frontend

8 – Criando o seu primeiro model no seu projeto django

8.1 – Instalando o pacote Pillow para gerenciar imagens no django

8.2 – Configurando o caminho das imagens

8.3 – Registrando o modelo no site de administrador

8.4 – Criando o seu primeiro artigo na aplicação blog

9- Adicionando templates e pastas estáticas para criar o frontend

10- Adicionando arquivos HTML e CSS nos templates e pastas estáticas

10.1 – Adicionando o HTML com tags de template integradas ao Django

10.2 Explaining template tags

11. Showing the template on frontend.

12. Mostrando postagens do blog no frontend

12–1. Crie uma nova pasta de modelos no aplicativo de blog

12–2. Atualize a função de index() para reconhecer o modelo de postagens e adicionar os artigos lá

12–3. Exibindo as postagens no frontend

12–4. Explicando o loop “for” na template

12–5. Corrigindo a imagem que não aparece na template posts.html

13. Criando a página de detalhes do post

13–1. crie a função post_detail

13–2. adicione o URL post-details e importe a função post_detail()

13–3. Adicionando o href para acionar a função post_detail() e explicação

13–4. crie o modelodetails.html