TheLazy.Dev
Portfolio GitHub

Blog

django |python

Django: setup básico com Bootstrap

thalesbruno

Thales Bruno

Posted on October 15, 2019

Django: setup básico com Bootstrap

Neste artigo a proposta é criar um setup básico de um projeto Django já integrado com o Bootstrap que vai ser aí a base para tudo o que é projeto. Então, vamos lá:

Criando o projeto Django

Primeiro vamos criar um diretório:

~: $ mkdir projeto
~: $ cd projeto/
Enter fullscreen mode Exit fullscreen mode

E então, preparar nosso ambiente Python:

~/projeto: $ python3 -m venv venv
~/projeto: $ source venv/bin/activate
(venv) ~/projeto: $ pip install Django
Enter fullscreen mode Exit fullscreen mode

Acabamos de criar um ambiente virtual Python chamado venv onde serão instaladas todas as dependências de nosso projeto. Em seguida o ativamos (nosso prompt ganha um prefixo (venv) que indica que o ambiente virtual está ativo) e instalamos o Django.

Com o Django instalado, vamos criar nosso projeto:

(venv) ~/projeto: $ mkdir src
(venv) ~/projeto: $ cd src/
(venv) ~/projeto/src: $ django-admin startproject core .
Enter fullscreen mode Exit fullscreen mode

Explicando a criação do projeto até aqui:

  1. Criamos um diretório para o projeto e dentro dele o ambiente virtual python, que gerou um diretório venv. Depois criamos outro diretório, o src;
  2. Nesse diretório src criamos o projeto Django usando o comando django-admin startproject seguido do nome do projeto, nesse caso core, e de um ponto, que indica o diretório atual como aquele onde será feita a instalação.

Agora, criaremos mais dois diretórios:

(venv) ~/projeto/src: $ mkdir static templates
Enter fullscreen mode Exit fullscreen mode

Em static colocaremos os arquivos do bootstrap e em templates nossos templates HTML.

Uma coisa que gosto de fazer também é já iniciar um repositório Git desde o início:

(venv) ~/projeto/src: $ git init
(venv) ~/projeto/src: $ touch .gitignore
Enter fullscreen mode Exit fullscreen mode

Aqui nesse link temos um .gitignore padrão para projetos Python, que vai nos atender perfeitamente. Assim não vamos enviar pro repositório git arquivos e diretórios desnecessários ou sensíveis.

Vamos também criar um arquivo com as dependências do nosso projeto, o requirements.txt (o "package.json" do Django, pra quem é do universo Javascript). Mas aqui faremos um pouco diferente, criaremos um diretório requirements e nele um arquivo local.txt.

(venv) ~/projeto/src: $ mkdir requirements
(venv) ~/projeto/src: $ touch requirements/local.txt
(venv) ~/projeto/src: $ pip freeze > requirements/local.txt
Enter fullscreen mode Exit fullscreen mode

Já executamos o pip freeze e redirecionamos a saída para o arquivo local.txt recém criado. Sempre que instalarmos novas dependências, devemos executar essa instrução novamente.

Feito tudo isso, a estrutura de nosso projeto está assim:

/projeto/
|-- src/
|   |-- core/
|   |   `-- __init__.py
|   |   `-- settings.py
|   |   `-- urls.py
|   |   `-- wsgi.py
|   |-- requirements/
|   |   `-- local.txt
|   |-- static/
|   |-- templates/
|   `-- manage.py
|-- venv/
Enter fullscreen mode Exit fullscreen mode

Até aqui fizemos o setup inicial do Django, então já podemos subir o serviço. Antes, aplicaremos as migrações (são as migrações das aplicações que já vem por padrão com o Django, como admin, auth, entre outras):

(venv) ~/projeto/src: $ python manage.py migrate
(venv) ~/projeto/src: $ python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Uma telinha padrão do Django deverá aparecer no seu navegador em http://127.0.0.1:8000, significa que tudo correu bem.

Integrando com Bootstrap e Font Awesome

Agora, vamos inserir o Bootstrap e o Font Awesome no nosso projeto.

Bootstrap

Na página de Downloads no site oficial getbootstrap.com, vamos escolher o "código compilado, pronto para uso", é a primeira opção na página.

Após descompactar o pacote zip veremos os diretórios css e js. Então, vamos movê-los para nosso diretório /projeto/src/static/. Perfeito. Já estamos quase prontos para usar as classes bootstrap em nossos HTMLs, mas vamos primeiro fazer uma limpeza nesses diretórios. O pacote que baixamos traz vários arquivos .css e .js, mas nós precisaremos apenas dos seguintes:

/static/
|-- css/
|   `-- bootstrap.min.css
|   `-- bootstrap.min.css.map
|-- js/
|   `-- bootstrap.min.js
|   `-- bootstrap.min.js.map
Enter fullscreen mode Exit fullscreen mode

Font Awesome

Com o Bootstrap em nosso projeto, já estamos prontos para desenvolver nossas aplicações e deixá-las com um visual decente (principalmente pra quem é mais de backend, como eu). Mas já que estamos aqui, vamos aproveitar e integrar também o Font Awesome, que aí não vai ter mais desculpa pra não fazer uma página bonitinha.

Na página oficial do projeto vamos fazer o download dos arquivos do plano gratuito deles, o que já nos dá uma base enorme e, acredito eu, suficiente de ícones.

Descompactado o pacote, vamos selecionar apenas o diretório webfonts e o css e movê-los para o diretório static, mas para não confundir com os arquivos do Bootstrap, criaremos um subdiretório antes, chamado fa (de font awesome). Ah, também não precisaremos de todos aqueles arquivos dentro de fa/css, basta deixar o all.min.css. Já do webfonts/ não removeremos nada.

O diretório static está assim agora:

/static/
|-- css/
|   `-- bootstrap.min.css
|   `-- bootstrap.min.css.map
|-- js/
|   `-- bootstrap.min.js
|   `-- bootstrap.min.js.map
|-- fa/
|   |-- css/
|   |   `-- all.min.css
|-- |-- webfonts/
|   |   `-- todos_os_arquivos_originais
Enter fullscreen mode Exit fullscreen mode

Lembrando aqui que essa estrutura de diretórios é a que eu gosto de usar, mas vocês podem optar por outra, podem nomear de forma diferente, desde que façam os apontamentos corretos nos arquivos abaixo, tudo funcionará!

Integrando ao Django

Agora que já estamos com todos os arquivos estáticos necessários em seus devidos diretórios, vamos fazer a integração de fato.

Editaremos o arquivo /projeto/src/core/settings.py, adicionando a referência para nosso diretório static.

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Enter fullscreen mode Exit fullscreen mode

Aproveitaremos pra editar outra linha do arquivo settings.py, indicando nosso diretório de templates, que vamos trabalhar em seguida:

# -- código acima --
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join((BASE_DIR), 'templates/')],
# -- código abaixo --
Enter fullscreen mode Exit fullscreen mode

Pronto, com os diretórios referenciados no arquivo settings.py, vamos agora criar nossos templates: arquivos HTML que intercalaremos com código Python, através da linguagem de templates Jinja.

Views e urls

Já estamos na reta final de nosso projeto, onde criaremos um template index.html já utilizando as classes Bootstrap e os ícones Font Awesome. Porém, antes vamos realizar um importante passo que é criar a lógica que fará tudo isso funcionar.

No Django, nós mapeamos todas as URLs que nosso sistema "oferece" no arquivo urls.py. Criaremos então uma URL na raiz que, ao ser acessada, chamará uma view, que é uma função dentro do arquivo views.py, que por sua vez tratará a requisição (ele é que faz a computação de fato: requisições ao banco de dados ou outros serviços, escrita em disco, etc) e renderizará uma resposta ao usuário. No nosso caso, a função index apenas renderizará o template index.html.

Arquivo urls.py:

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


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
]
Enter fullscreen mode Exit fullscreen mode

Criaremos o arquivo views.py:

from django.shortcuts import render


def index(request):
    return render(request, 'index.html', {})
Enter fullscreen mode Exit fullscreen mode

Pra tudo funcionar, só falta criar o template index.html

Templates

Reta final do projeto, vamos criar o template 'index.html', já utilizando a sintaxe do Jinja pra carregar os arquivos estáticos:

No início do arquivo carregaremos os arquivos estáticos:

{% load static %}
Enter fullscreen mode Exit fullscreen mode

Na seção head do nosso arquivo HTML, referenciaremos os arquivos correspondentes ao código css e js:

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
Enter fullscreen mode Exit fullscreen mode

Agora estamos prontos para escrever código HTML usando as classes do Bootstrap e do Font Awesome para criar o visual de nossa aplicação.

No repositório do projeto no GitHub (link no final do artigo) vocês podem pegar o index.html completo já com alguns componentes Bootstrap. A página deverá ficar assim:

Django + Bootstrap generic page

A estrutura de diretórios final ficou assim:

/projeto/
|-- src/
|   |-- core/
|   |   `-- __init__.py
|   |   `-- settings.py
|   |   `-- urls.py
|   |   `-- views.py
|   |   `-- wsgi.py
|   |-- requirements/
|   |   `-- local.txt
|   |-- static/
|   |   |-- css/
|   |   |   `-- bootstrap.min.css
|   |   |   `-- bootstrap.min.css.map
|   |   |-- js/
|   |   |   `-- bootstrap.min.js
|   |   |   `-- bootstrap.min.js.map
|   |   |-- fa/
|   |   |   |-- css/
|   |   |   |   `-- all.min.css
|   |   |-- |-- webfonts/
|   |   |   |   `-- todos_os_arquivos_originais
|   |-- templates/
|   |   `-- index.html
|   `-- manage.py
|-- venv/
Enter fullscreen mode Exit fullscreen mode

Repositório do projeto:

GitHub logo thalesbruno / django_bootstrap

A Django setup project with bootstrap and font-awesome integrated

Django project with Bootstrap and font-awesome

Usage

Create a project directory and install a python virtual environment inside it

mkdir project && cd project
python3 -m venv venv
source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Create a source dir and clone the repository

mkdir src && cd src
git clone https://github.com/thalesbruno/django_bootstrap .
Enter fullscreen mode Exit fullscreen mode

Install the dependencies

pip install -r requirements/local.txt
Enter fullscreen mode Exit fullscreen mode

Run the migrations and start the server!

python manage.py migrate
python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Yay! App running in http://127.0.0.1:8000 :)

View on GitHub

É isso! Até a próxima ;)

💖 💪 🙅 🚩
thalesbruno
Thales Bruno

Posted on October 15, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Custom Django Python Migration
django Custom Django Python Migration

November 28, 2024

PWA and Django #3: Online and offline resources in a PWA - Developing Progressive Web Applications with Django
django PWA and Django #3: Online and offline resources in a PWA - Developing Progressive Web Applications with Django

November 27, 2024

I built a Learning Management System with Django
webdev I built a Learning Management System with Django

November 26, 2024

Building a RESTful API from Scratch 🚀
undefined Building a RESTful API from Scratch 🚀

November 25, 2024

Django accounts management app (3), forgot password and account details
django Django accounts management app (3), forgot password and account details

November 25, 2024