Aula 10 – Loja Online – Ecommerce – Django – Image field – File field

More videos
Views
   

Loja Virtual – Ecommerce – Django – Campo para upload de imagens ou arquivos

Na aula passada construimos a parte referente aos detalhes de cada produto.

Vamos continuar na parte dos detalhes de um produto com os image field e file field.

Agora os campos para upload de imagens ou arquivos referente a cada produto.

Campo para Imagem e para arquivo

Campo para Imagem e para arquivo

Campo para upload de imagens ou arquivos de um produto.

Em src/products/models.py acrescente:


from django.db import models

# Create your models here.
class Product(models.Model): #product_category
    title       = models.CharField(max_length=120)
    description = models.TextField()
    price       = models.DecimalField(decimal_places=2, max_digits=20, default=100.00)
    image       = models.FileField(upload_to = 'products/')
    
    #python 3
    def __str__(self):
        return self.title
    #python 2
    def __unicode__(self):
        return self.title

Static CDN(Content Delivery Network)

Vamos criar a pasta dentro da nossa pasta static_cdn, que tá simulando um cdn, a pasta media_root, que ainda não criamos, então crie: django_ecommerce/media_root/ no mesmo nível da static_root.

As imagens e arquivos vão ser carregadas nessa pasta como configurado no final do src/e_commerce/settings.py

Rode o comando:

python manage.py makemigrations

Veja a mensagem que o Django mostra: ele reclama que você tá tentando adicionar um campo que não pode ser nulo (null) ou em branco.

Para corrigir isso acrescente ao campo image no src/products/models.py o que tá em laranja.


from django.db import models

# Create your models here.
class Product(models.Model): #product_category
    title       = models.CharField(max_length=120)
    description = models.TextField()
    price       = models.DecimalField(decimal_places=2, max_digits=20, default=100.00)
    image       = models.FileField(upload_to = 'products/', null = True, blank = True)
    
    #python 3
    def __str__(self):
        return self.title
    #python 2
    def __unicode__(self):
        return self.title

Campo obrigatório

O null = True quer dizer que você pode ter esse campo em branco no banco de dados e o blank = True quer dizer que não é um campo obrigatório no Django.

Resumindo, os dois juntos diz ao Django que esse campo não é obrigatório está preenchido.

Rode novamente o comando:

python manage.py makemigrations

python manage.py migrate

python manage.py makemigrations: Cria as migrações (gera os comandos SQL).

python manage.py migrate: executa as migrações (executa os comandos SQL).

Veja que dessa vez não houve nenhum problema, o Django não reclamou de nada.

Testando

Levante o servidor se não tiver já rodando:

python manage.py runserver

Entre na página de administrador e faça o login:

127.0.0.1:8000/admin/

Clique em products, clique em algum produto, veja que agora tem o campo image, mas, ele tá meio cinza e não tá em negrito como os outros campos, troque o blank = True, para False, dê um refresh na página e veja que ele fica como os outros campos, mais preto e em negrito.

Campo não obrigatório

Como queremos que esse campo não seja obrigatório, então deixe do jeito que tava mesmo, com o blank = True.

Faça o upload de uma imagem para esse produto e veja que ela fica na url: 127.0.0.1:8000/media/products/imagem_produto.jpg

O /media/ vem do MEDIA_URL = ‘/media/’ no src/e_commerce/settings.py e products do image = models.FileField(upload_to = ‘products/’, null = True, blank = True) no src/products/models.py , depois é o nome do arquivo (imagem_produto.jpg)

Esse campo é para carregar apenas imagens, mas, se você tentar carregar outro tipo de arquivo, ele vai aceitar, por isso vamos modificar a linha: image = models.FileField(upload_to = ‘products/’, null = True, blank = True) em src/products/models.py.

Pillow

Vamos trocar models.FileField para models.ImageField, mas veja que vai dá um erro, o Django reclama que o Pillow não está instalado, então rode o comando abaixo para instalar o Pillow:

pip install pillow

É uma biblioteca python para imagens.

Rode agora:

python manage.py makemigrations

python manage.py migrate

Levante o servidor se já não estiver no ar.

python manage.py runserver

Tente fazer o upload de algo que não seja uma imagem e veja o erro que dá: Upload a valid image….

Faça o upload de uma imagem de tênis e insira no produto tênis (tenis.png), para testar.

Temos agora que renderizar a imagem referente ao produto na página de template do detail.

Em src/products/template/products/detail.html insira:


{{ object.title }} <br/>
{{ object.description }} <br/>
{{ object.image }}

Salve e veja o resultado no browser em 127.0.0.1:8000/products/2

Veja que não mostrou a imagem, apenas a url da imagem, mesmo assim, a url errada, se você copiar a url 127.0.0.1:8000/products/imagem_123454e3.png, e colar na barra de endereço do browser, a imagem não vai ser encontrada.

Por isso, vamos a mais uma alteração no template do detail, vamos inserir url em object.image

src/products/template/products/detail.html


{{ object.title }} <br/>
{{ object.description }} <br/>
{{ object.image.url }}

Agora sim, a url da imagem está correta: 127.0.0.1:8000/media/products/tenis_lnVQeVY.jpeg

A imagem ainda não aparece na página, só o caminho dela, então vamos modificar novamente o src/products/template/products/detail.html


{{ object.title }} <br/>
{{ object.description }} <br/>
<img src='{{ object.image.url }}' class='img-fluid' />

Colocamos a tag HTML img e também definimos a class como img-fluid, que é uma classe do bootstrap.

Veja o resultado no browser

127.0.0.1:8000/products/2

Na próxima aula, iremos brincar e entender um pouco mais sobre consultas queryset e ver como que recuperar as informações do banco.

Curta a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

Vou deixar meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro link é da one.com:

One.com

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/file_and_images_field

Obrigado, até a próxima e bons estudos. 😉

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>