프로젝트 추천 genre 페이지

오늘은 크롤링에 이어서 크롤링한 데이터를 가져와 나의 html에 띄워주는 작업을 했다.

내가 만든 페이지는 main 페이지와 genre 페이지인데 오늘은 genre페이지만 작업했다.

html 파일은 주말에 미리 만들어 두어서 백엔드 작업만했다.

하나하나씩 어떤 일들을 했는지 살펴보자!

genre 페이지 구성

우선 데이터 베이스에 데이터를 넣어주고 데이터가 잘 들어왔는지 확인했다

잘들어 왔으니 url을 작성해보자.

url을 작성했고 이름은 'genre'로 만들었다

각각의 장르 페이지마다 url을 쓰고 싶지는 않아서 url에 <str:name>을 사용해

url= genre/로맨스, url= genre/현판, url= genre/무협,,,,, 한번에 이런 방식으로 url에 접속 할 수 있도록 했다

urlpatterns = [
    path('genre/<str:name>', views.genre_view, name='genre'),
    ]

다음으로 views.py를 작성해보자

books라는 변수 안에, 우리가 만든 모델의 장르 이름별로 데이터를 가져오게 했다

장르별로 필터링 해서 objects을 가져왔고,

objects 데이터를 'books'라는 변수로, 딕셔너리 형태로

genre.html에 보내주었다.

def genre_view(request, name):
    books = BookModel.objects.filter(genre=name)
    return render(request, 'main_genre/genre.html', {'books': books})

가장 상단에는 지금 몇개의 책들이 있는지 보여주기 위해 {{ books | length }} 책의 갯수를 넣어주었고

각각의 책이 보여야 하는 부분에는 바로 위에서 해설한 books의 objects안에서

타이틀, 이미지, 스토리들을 탬플릿 문법으로 가져와 주었다

구현 이미지

구현한 이미지의 상단바는 다른 팀원분이 만들어주셔서 html을 이어 붙여주었다.

# htnl 이어붙이기
{% extends 'base.html' %}

이제 마지막으로 상단바의 장르를 클릭하면 각각의 장르 페이지로 이동하도록 해보자

상단바는 태그 안에 url의 name을 작성해주어 각각의 장르 페이지로 이동할 수 있도록 했다.

href="{% url 'url의 name' '장르 이름' %}"

url의 name이란 아까 url을 만들어 주었을때 name='genre'라고 작성한 부분이다.

urlpatterns = [
    path('genre/<str:name>', views.genre_view, name='genre'),
    ]

여기까지 끝이 났는데 오늘 한 일을 다시 정리하면?

꾸준함