Utilizando Django Bootstrap Form

Hoje vamos melhorar nossos formulários com essa extensão que aplica os estilos do Bootstrap aos formulários do Django, assim podemos utilizar diretamente da classe de form sem nos preocuparmos muito com o visual

Projeto em andamento

Antes de iniciar é bom entender que este é um projeto em andamento, você pode fazer comigo do zero começando por aqui:

• Instalando Django 2 e criando um projeto;

O código de todo o conteúdo está disponível no GitHub, neste link!

Instalando a extensão

O primeiro passo é instalar a extensão Django Bootstrap Form com o pip

Digite o seguinte comando no terminal:

pip install django-bootstrap-form

Agora você já está apto a implementar o recurso no seu projeto

Porém como ele funciona como um novo app precisamos configurá-lo no projeto

Então vamos lá!

Adicionando o aplicativo

Como falei anteriorimente precisamos registrar o app em settings.py para o Django ficar ciente que temos um novo aplicativo

Deixe a constante INSTALLED_APPS da seguinte maneira:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'account',
    'bootstrapform',
]

Perceba que a única mudança é na última linha da constante

Inserindo filtro do Bootstrap Forms nos formulários

Então agora que o Django Bootstrap Forms está instalado e registrado, devemos inseri-lo nos templates que queremos usufruir do recurso

Aqui escolhi o arquivo add_post.html para isso, onde adicionamos os posts novos

Deixe o arquivo deste jeito:

{% extends 'blog/base.html' %}
{% load bootstrap %}
{% block title %}Adicionar um post{% endblock %}

{% block content %}
    <div class="container">
        <h1>Adicionar um post</h1>
        <div>
            <form action="." method="POST">
                {% csrf_token %}
                {{ form|bootstrap }}
                <input type="submit" class="btn btn-default" value="Criar">
            </form>
            
        </div>
    </div>
{% endblock %}

Temos aqui dois detalhes que ainda não vimos:

•  {% load bootstrap %}: vai carregar as dependências necessárias para utilizarmos o recurso;
• form|bootstrap: com esse filtro chamado bootstrap é que habilitamos o Bootstrap Forms no projeto

Pronto, estamos com o recurso funcionando!

Se restou alguma dúvida sobre templates, veja meu artigo completo aqui.

Visualizando os forms com o Django Bootstrap Forms

Bom, agora vamos fazer um antes e depois para ver a diferença brutal

Deixe seu servidor rodando com o comando:

python manage.py runserver

E acesseo a URL onde você adicionou o post

Veja como era antes:

E agora depois da extensão adicionada:

Bom vemos que agora o layout está nos padrões Bootstrap

Provavelmente você não vai utilizar assim numa aplicação, mas com mais alguns ajustes estará pronto!

Além disso é infinitamente melhor que o padrão do Django

Um toque de CSS e estará perfeito 😀

Falando em CSS, caso queira entender como inserir arquivos estáticos no Django, veja aqui.

Faça nos outros formulários

Agora vou te dar uma missão, aplique nos outros formulários do projeto para fixar o conhecimento

É bem simples, só carregar o bootstrap com o load e por fim adicionar o filtro form|bootstrap no form

Conclusão

Inicialmente instalamos com o pip a lib que é chamada de Django Bootstrap Forms

Então adicionamos o app no projeto em settings.py para o Django entender que temos um novo aplicativo

O último passo foi adicionar os dados no template para que o form pudesse ser exibido

Confira também o nosso canal do Youtube com muito conteúdo sobre programação, clicando aqui.

Pessoal, agradeço a todos por lerem até o fim, se possível compartilhem com os amigos interessados em Django e se inscrevam na nossa lista de e-mail para não perder as novidades.

Caso haja alguma dúvida ou crítica, comentem abaixo que responderei assim que possível, obrigado!