아직 인트로라는 점..
참 즐겁다!
1. 사진 목록 화면
사진 게시물을 볼 수 있는 메인 목록 화면이다. 디자인 안할거다
1.1 템플릿
<html>
<head>
<title>Photo App</title>
</head>
<body>
<h1><a href="">사진 목록 페이지</a></h1>
<section>
<div>
<h2>
<a href=""></a>
</h2>
<img src="https://pbs.twimg.com/media/FJYrqvaaAAAW0Rj.jpg"
alt="힘들어하는짤"
width="300"/>
<p> 세상이 거칠다,,, 1000원</p>
</div>
<div>
<h2>
<a href=""></a>
</h2>
<img src="https://1.gall-img.com/hygall/files/attach/images/82/334/215/143/f2ce602cdd83215778b2b6b34909f8c5.jpg"
alt="힘들어하는짤2"
width="300"/>
<p> 세상이 거칠다2,,, 1000원</p>
</div>
</section>
</body>
</html>1.2 뷰
뷰는 DB의 데이터를 템플릿으로 전달하는 역할 외에도 템플릿을 렌더링하는 작업을 수행한다.
photo/views.py
from django.shortcuts import render
# Create your views here.
def photo_list(request):
return render(request, 'photo/photo_list.html', {})render의 마지막 인자 {}는 데이터 전달 시 사용한다.
1.2.1 url
urls.py 파일은 기본 프로젝트 폴더 내부에 있는데 이는 프로젝트 전체의 URL을 관리하는 파일이다.
photo 앱에 대한 URL을 작성하기 위해서 photo 앱 폴더 내부에 새로운 파일을 생성하여 URL을 관리해준다
- photo/urls.py 파일 생성
from django.urls import path
from . import views
urlpatterns = [
path('', views.photo_list, name="photo_list")
]
path()'': 루트 주소, 즉https://127.0.0.1:8000을 의미한다.- views.py 파일의
photo_list함수를 두번째 매개변수로 불러온다.photo_list를 불러왔기 때문에 photo/photo_list.html 파일이 렌더링된다.
- 프로젝트의 urls.py에 새로 만든 url파일을 등록해준다.
from django.contrib import admin
from django.urls import path, include #include 추가
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('photo.urls')) # 추가
]runserver 해주고 확인한다
근데 이 화면은 그냥 html이고 데이터를 받아서 렌더링한건 아니묘
크흡 아직 할일이 남았다는 뜻
레츠기릿
1.3 템플릿 수정
뷰에게서 템플릿으로 데이터를 전달하기 위해서 템플릿 태그({})를 사용한다.
<html>
<head>
<title>Photo App</title>
</head>
<body>
<h1><a href="">사진 목록 페이지</a></h1>
<section>
{% for photo in photos %}
<div>
<h2>
<a href="">{{ photo.title }}</a>
</h2>
<img src="{{ photo.image }}"
alt="{{ photo.title }}"
width="300"/>
<p> {{ photo.alt }}, {{ photo.price }}</p>
</div>
{% endfor %}
</section>
</body>
</html>기존의 html 파일의 데이터를 변수 형태로 변경해줬음
이제 뷰에서 템플릿으로 데이터를 넘겨주면 된다.
1.4 뷰 수정
{} 안에 템플릿으로 전달할 데이터를 데이터의 이름과 함께 넣어준다.
데이터를 보내주기 위해서는 데이터를 DB에서 꺼내와야하고, 이를 위해서 모델에서 데이터를 꺼내와야한다.
이 때 장고의 ORM 기능을 활용한다
from django.shortcuts import render
from .models import Photo
# Create your views here.
def photo_list(request):
photos = Photo.objects.all()
return render(request, 'photo/photo_list.html', {'photos': photos})admin 페이지에서 사진 추가해주고 확인해보면 아래와 같이 모델에서 데이터를 받아서 출력됨
귣~!
2. 게시물 보기 화면
사진의 제목 클릭 시 세부 정보를 출력하는 화면을 구현한다.
2.1 템플릿
photo/templates/photo 폴더 안에 photo_detail.html 파일을 생성한다.
photo_list.html과 동일한 내용인데 description 부분만 <p> 태그로 추가함
2.2 뷰
views.py에 함수를 추가한다.
from django.shortcuts import render, get_object_or_404
def photo_detail(request, pk):
photo = get_object_or_404(Photo, pk=pk)
return render(request, 'photo/photo_detail.html', {'photo' : photo})
pk는 기본키를 의미한다잉
2.2.1 url
photo/urls.py 파일에 코드를 작성한다.
from django.urls import path
from . import views
urlpatterns = [
path('', views.photo_list, name="photo_list"),
path('photo/<int:pk>/', views.photo_detail, name='photo_detail')
]<int:pk>: 정수형 변수가 들어감을 의미한다.
그리고 사진 목록 html에서 <a> 태그의 href 속성을 수정해주면 된다.
<a href="{% url 'photo_detail' pk=photo.pk %}">{{ photo.title }}</a>
