Material didático com as configurações iniciais para criar um site Django, com integração com banco de dados MySQL, e configurações de arquivos estáticos e dinâmicos, onde iremos mostrar na homepage imagens estáticas e imagens enviadas pelo usuário.
- Descrição
- Objetivo
- Autor
- Configurações iniciais do django
- Criando nosso APP
- Configurando MySQL
- Criando o super user
- Configurações básicas finais
- Configurando arquivos estáticos
- Configurando arquivos dinâmicos
- Criando nossa HomePage
Este tutorial tem objetivo de criarmos nosso primeiro site com Django, passando por todas configurações iniciais e utilizando o banco de dados Mysql para cadastro de arquivos dinâmicos, ao fim deste tutorial teremos construído um site com uma homepage mostrando imagem estática e imagens cadastradas no banco de dados pelos usuários.
 Daniel de Souza Amorim |
|---|
Graduado em Engenharia de computação em 2010 pela Universidade Potiguar do RN;
Pós-graduado em Petróleo e gás;
Desenvolvedor de dispositivos embarcados, microcontrolados, automação de sistemas;
Desenvolvedor de placas de CI, prototipagem e desenvolvimento;
Amante de tecnologias e desenvolvimento Python.
pip install django
django-admin startproject (nomedoprojeto) .
- Em nomeprojeto de um nome ao seu projeto e coloque o "." no final para criar a pasta na raiz (fica mais organizado).
- vai criar a pasta do seu projeto e o arquivo manage.py. O manage.py é quem gerencia a estrutura do projeto e dentro dele vai criar o arquivo wsgi.py é quem gerencia a parte de servidor, o urls gerencia os links do site, o settings.py onde configuramos os templates, o app e a pasta static.
App é a funcionalidade do nosso site, onde ficarão nossas templates, as urls para as paginas, as views etc.
django-admin startapp (nomedoAPP)
- APP dentro de um projeto é o que queremos criar em termos de página HTTP e banco de dados para uma determinada funcionalidade.
- Na criação do APP será criada o arquivo models.py onde iremos definir as tabelas do nosso banco de dados.
python manage.py runserver
- Vai criar o link, com congratulations. Link criado no localhost com endereço (http://127.0.0.1:8000)
- Pronto, a estrutura principal do DJANGO foi criada.
Por padrão o django cria o banco de dados sqlite3, para usar o banco de dados como Mysql modifique as configurações no arquivo setings.py e em DATABASES, mude as configuações do Django para as configuações do seu banco, como no exemplo abaixo.
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql', # default
'NAME': 'sqlmusic', # nome do seu banco de dados
'USER': 'xxxxxxxxxxxx', # usuario admin
'PASSWORD': 'yyyyyyy', # senha admin
'HOST':'localhost', # endereco do db (Encrontra-se no workbench)
'PORT':'3306', # porta do db (Encrontra-se no workbench)
}
}
pip install mysqlclient
- OBS: O django ja gerencia por si a página admin do site e a criação de novos usuários em (http://127.0.0.1:8000/admin)
-
Dentro de models.py importe
from django.db import models -
Criando as classes para nossas tabelas (essa será nossa tabela no mysql)
LISTA_CATEGORIA= (
("forro", "Forró"),
("rock", "Rock"),
)
class Musica(models.Model):
artista = models.CharField(max_length=500)
album = models.CharField(max_length=500)
thumb = models.ImageField(upload_to='music_images/')
#album=models.ForeignKey('Album',on_delete=models.SET_NULL,null=True,blank=True)
categoria = models.CharField(max_length=15, choices=LISTA_CATEGORIA,null=True,blank=True)
# mudar o modo de exibição da string da classe para titulo do curso no admin
def __str__(self):
return (self.artista + " (" + self.album + ")")
O django não cria o banco Mysql automaticamente como acontece com sqlite padrão do django, pra isso temos que criar manualmente usando o PROMPT do windows ou no Workbench. Abra o CMD e digite:
mysql -u root -p
Vai pedir a senha do seu banco de dados.
show database
Mostra os bancos que tem criados no MySql.
create database [nome do banco]
Cria o banco com o mesmo nome dado nas configurações do Mysql em DATABASE -> NAME (sqlmusic). Para confirmar rode -show database.
- Dúvidas veja o Link de configuracos mais detalhadas:
https://www.codigofluente.com.br/configurando-o-django-com-mysql-windows/
No terminal rode o migrate e o makemigrations, que cria nossas tabelas com base no arquivo models.py.
python manage.py makemigrations
python manage.py migrate
- Se tudo deu certo, agora suas tabelas foram criadas em seu database.
- OBS: Caso dê erro instale a biblioteca pillow (tópico mais abaixo).
Nossa tabela ainda nao aparece no admin, vamos adicionar dentro da pasta de (funcionalidades) em admin.py:
from .models import Musica
admin.site.register(Musica)
- Onde 'Musica' é o nome da tabela criada dentro de models.py.
Super user é o administrador do site, aquele com todasas permissões.
python manage.py createsuperuser
- Crie seu usuario e senha.
- Agora pode ver sua tabela feita no adm do seu site em (http://127.0.0.1:8000/admin)
Em settings -> installed apps -> crie uma linha com o nome do seu app (nomedafuncinalidade)
Exemplo:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'nomedafuncinalidade',
]
No projeto temos a pasta urls.py, ela quem comanda todos os links criados dentro do projeto (inclusive urls para as imagens e arquivos do projeto), e para cada funcionalidade podemos criar tbm um novo arquivo urls.py com os links desta funcionalidade mas para isso precisamos apontar dentro da urls.py do projeto para as outras urls (sim, urls apontanto para outras urls).
Vamos ver o que há na pasta urls.py do projeto:
urlpatterns = [
path('admin/', admin.site.urls),
]
- Temos o caminho 'admin/' para a url de admin do nosso site.
Vamos criar a urls.py para nossa funcionalidade (musica), pra isso entre na pasta da sua funcionalidade e crie o arquivo urls.py, não faremos nada ainda, apenas vamos apontar o projeto para essa url, pra isso,dentro de urls.py do projeto importe:
from django.urls import include
Agora vamos apontar para a url da funcionalidade acrescentando a linha abaixo:
urlpatterns = [
path('admin/', admin.site.urls),
path('/', include('nomefuncionalidade.urls')) #leia obs
]
Pronto, agora está feito o link do projeto para os links das suas funcionalidades, e la dentro poderá criar as urls das suas páginas. Vamos configurar agora os arquivos estáticos e mais a frente faremos nossa primeira página funcional.
Antes de criar nossa primeira página em si, vamos configurar os arquivos estáticos e dinâmicos, os arquivos estaticos são aqueles que não mudam no nosso site, são fixos, como as imagens de fundo por exemplo, já arquivos dinâmicos são arquivos que podem mudar constantemente em nosso site como por exemplo a foto de um perfil de um usuário.
Vamos configurar tudo no arquivo settings.py:
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / 'static'
]
Obs: Onde BASE_DIR é o local do seu projeto (ou seja a pasta de suas imagens vai está na mesma pasta do seu projeto), então crie na raiz do seu projeto essa pasta chamada 'static' (pode ser qualquer nome mas por default chamamos de static), sua pasta deve aparecer como na imagem abaixo:
Como dito anteriormente, a pasta static é onde ficam os arquivos css, arquivos javascript e as imagens, entao crie dentro dessa pasta static, outras pastas chamadas css, js e image (não é obrigatorio mas por organização)
Agora dentro da pasta do seu projeto, em urls.py (aquele que comanda todas as urls do site lembram?) adicione a linha
urlpatterns+=static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
e importe la dentro:
from django.conf import settings
from django.conf.urls.static import static
Agora vamos configurar os arquivos dinâmicos, como ja explicado anteriomente:
Vamos definir em settings essas variaveis:
MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'
Agora em urls.py do seu projeto adicione a linha:
urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
Pronto, agora vc pode entrar no seu admin e baixar os arquivos de media para seu projeto.
Pillow faz parte da biblioteca PIL de Imagens do Python, é um pacote que expõe muitas funções para manipular imagens a partir de um script Python. Atenção, no momento da migração do database, caso essa biblioteca não esteja instalada pode dar erro.
pip install pillow
Lembra dele? o arquivo que comanda todas as urls do nosso projeto? ele deve estar assim:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
#path('/', include('musicas.urls')) #inclui a funcionalidade musicas com url vazia
]
urlpatterns+=static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
Agora nos temos os links para as urls das funcionalidades, para o admin e para as pastas estaticas e de media!
A home page é a página inicial do nosso site, com ela podemos fazer encaminhamento para outros links (outras páginas dentro do seu projeto), pra isso precisamos entender sobre 3 arquivos que o próprio django criou pra ente dentro da pasta defuncionalidades, são eles:
- URLS.PY: Aqui definimos as urls (links) para nossas páginas.
- VIEWS.PY: A view é quem vai dizer o que acontece (funções) antes de abrir a nossa template.
- TEMPLATES.HTML: è a parte visual do site que contém marcações HTML, CSS, scripts java etc. Dito isso, lembre-se, sempre que criamos uma página, temos que configurar esses 3 arquivos acima, vamos começar editando a url.py.
Edite seu arquivo urls.py cpnforma abaixo:
from django.urls import path
from .views import homepage
urlpatterns = [
path('', homepage)
]
- Note que importamos dentro de .views (do arquivo views) a nossa função 'homepage' e criamos em urlpatterns o link pra ela, então agora vamos criar essa função la em views?
Vamos definir nossa função homepage dentro da view, pra issoedite seu arquivo views.py conforme abaixo:
from django.shortcuts import render
def homepage(request):
return render (request, 'homepage.html')
- Assim definimos a função homepage que recebe parametros request (são requisições que acontecem em nosso site, POST ou GET), feito isso a função retorna 2 coisas, o próprio request e a pagina HTML que chamamos de homepage.html. Então vamos criar nossa página html (template)?
Antes de criar nosso template temos que criar uma pasta onde ficarão armazenadas as nossas páginas, pra isso vamos criar dentro da raiz da pasta de nossa funcionalidade uma pasta chamada templates (escrito por padrão desta forma, pois assim o django vai reconhecer). Veja figura abaixo:
Agora dentro dessa pasta templates crie o arquivo homepage.html e dentro dele vamos definir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meu site</title>
</head>
<body>
<h1>Meu primeiro site Django com arquivos estáticos e de media</h1>
</body>
</html>
- Pronto, agora va no navegador e veja sua homepage no ar (http://127.0.0.1:8000/)
- Está feita nossa página inicial, para encerrar vamos fazer com que os arquivos estáticos e de media sejam exibitos na homepage.
Agora chegou a hora de mostrar na nossa página os arquivos estáticos e os de media, vamos começar com o estático, pra isso baixe a imagem abaixo e coloque dentro da sua parta 'static', com o nome python.png:
<img src="static/images/python.png">
Vai ficar assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meu site</title>
</head>
<body>
<h1>Meu primeiro site Django com arquivos estáticos e de media</h1>
<br>
<img src="static/images/python.png">
</body>
</html>
Pronto! sua imagem estática ja será mostrada na sua página HTML.
Arquivos de media é um pouco mais complicado, pois são arquivos no qual salvamos no nosso banco de dados o caminho para elas, esse caminho pode ser uma pasta do seu computador, um servidor na nuvem e etc. Porém temos que pegar esse caminho no banco de dados através de uma busca (Query) e depois exibir o que queremos em nosso HTML.
Como disse, temos que buscar o arquivo no banco de dados (no caso as fotos de perfil), então vamos criar um arquivo na pasta da nossa funcionalidade chamado context.py, dentro dele vamos fazer a nossa busca e disponibilizar para nosso HTML um dicionário (lista ou tupla), contendo as informações que queremos. Abra o arquivo context.py criado e vamos edita-lo:
from .models import Musica
def lista_imagens(request):
lista_image = []
for urlimagem in Musica.objects.values_list('thumb'):
lista_image.append(urlimagem[0])
print(urlimagem[0])
return {"lista_image": lista_image}
-
Primeiro importamos nosso database Musica
-
Definimos uma função chamada "lista_imagens" e dentro dela criamos uma busca (query) no nosso banco:
Musica.objects.values_list('thumb')
-
Esse query praticamente vai no banco MUSICA, pega todos OBJETOS e filtra pelos valores chamados 'thumb', ou seja thumb sao os caminhos para nossas fotos!
-
agora a função retorna essa lista contendo os caminhos das imagens
Abra o arquivo homepage.html e vamos adicionar as linhas:
{% for image in lista_image %}
<img src="media/{{ image }}">
{% endfor %}
- Acima, criamos um for onde pegaremos cada imagem dentro da nossa lista e exibiremos no html.
- Note que para criar um for em python dentro de um arquivo HTML temos que delimitar o comando dentro de "{% comando %}" e encerrar com "{% endcomando %}".
Vamos explicar como essas imagens serão mostradas dinâmicamente no HTML, veja na linha:
<img src="media/{{ image }}">
- Básicamente o codigo HTML acima esté exibindo uma umagem que está no caminho src= MEDIA/ (onde media é a pasta do arquivo)
- e {{ image }} é a variável que pegamos de dentro da nossa lista com os caminhos das imagens no database.
- Obs: Quando queremos mostrar no HTML uma variável temos que delimita-la em chaves duplas. EXEMPLO: {{ Nome_variavel }}.
Abra o admin do site em (http://127.0.0.1:8000/admin) cadastre fotos que quiser e seu site irá mostrar todas as fotos cadastradas
O seu arquivo html deve ficar assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meu site</title>
</head>
<body>
<h1>Meu primeiro site Django com arquivos estaticos e de media</h1>
<hr>
<h3>Meu arquivo estático:</h3>
<br>
<img src="static/images/python.png">
<hr>
<h3>Meus arquivos dinâmicos (media):</h3>
<br>
{% for image in lista_image %}
<img src="media/{{ image }}">
{% endfor %}
</body>
</html>
O site desta forma:
