[멋사7기] 4주차 - 6. portfolio (media)

static : 외부와 통신 x

media : 외부와 통신 o

장고와 외부의 통신망 : url

media파일 사용위해 url, 디렉토리를 설정해줘야함 두 개 다!!

- settings.py에서 설정해줄 것들

static	media
static 파일이 어디있고 STATICFILE_DIRS=[..]	메디아 파일이 어느 URL을 타고 MEDIA_URL
어디로 모을지 STATIC_ROOT	어디로 모을 것인지 MEDIA_ROOT

1) settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

2) urls.py

from django.conf import settings

from django.conf.urls.static import static

urlpatterns = [

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

혹은

urlpatterns += static~

3) 이제 url을 타고 들어온 이 파일이 db에 저장되어야 하겠지

portfolio app 안에 있는 models.py

class Portfolio(models.Model):

title = models.CharField(max_length = 255)

image = models.ImageField(upload_to='images/') # images라는 dir에 업로드할거다

description = models.CharField(max_length = 500)

def __str__(self):

return self.title

4) 이제 db에게 이 사실을 알려야하는데 그 전에 이미지를 db에 넣고싶을때  이 명령어를 쳐줘야함

pip install pillow

이미지를 효율적으로 사용하기 위해~

5) 이제~

python manage.py makemigrations

python manage.py migrate

(항상 가상환경 실행하고 폴더 안으로 한번더 들어와서 하는거 잊지말기!)

6) 이제 admin한테 알려줘야지

admin.py

from .models import Portfolio

admin.site.register(Portfolio)

7) views.py의 portfolio 함수 바꿔볼거야

from .models import Portfolio

# Create your views here.

def portfolio(request):

portfolios = Portfolio.objects

return render(request, 'portfolio.html', {'portfolios': portfolios})

8) portfolio.html 에 적용하기!

<div class="album py-5 bg-light">

<div class="container">

<div class="row">

{%for portfolio in portfolios.all %}

<div class="col-md-4">

<div class="card mb-4 shadow-sm">

<img src="{{portfolio.image.url}}" height=300>

<div class="card-body">

<p class="card-text">{{portfolio.description}}</p>

<div class="d-flex justify-content-between align-items-center">

<div class="btn-group">

<button type="button" class="btn btn-sm btn-outline-secondary">View</button>

<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>

</div>

<small class="text-muted">9 mins</small>

</div>

</div>

</div>

</div>

{%endfor%}

</div>

</div>

</div>