[엘리스 AI 트랙] 10주차 - 3
- 페이지네이션 구현
- 별점 표시 수정
- UI 정리 (글꼴, 가로 세로 정렬, 색 정돈 등)
- 줄바꿈 단어 단위로 하게 수정
- TIL
- 페이지네이션
-
방법 고민 1. "왼쪽 버튼 1 2 3 4 5 오른쪽 버튼" 이런 식으로 만들까? 생각하니 전체 책 데이터가 5페이지를 넘지 않아서 가능하지 않다.
-
그러면 "왼쪽 버튼 1 2 3 오른쪽 버튼"으로 만들까? → 이 경우엔 "1 2 3" 이 부분을 동적으로 바꿔주는 것도 생각해야 한다. 현재 페이지가 가장 가운데로 오도록 할까? 아니면 그냥 그 자리에서 표시만 크게 또는 굵게 해줄까? "1 2 3" 자리에 몇 페이지부터 몇 페이지를 집어 넣을지는 어떻게 정할까? → 생각할 시간이 좀 더 필요한 방식. 현재 프로젝트 기간이 얼마 남지 않았으므로 다른 방식으로 먼저 구현하자.
-
"왼쪽 버튼 1 오른쪽 버튼" 형식으로 구현하자. → 1 자리엔 현재 페이지 넘버가 표시된다.
<div id="pagenation"> {% if page > 0 %} <a href="{{ url_for('.home', page=page-1) }}" id="left-btn">◀</a> {% endif %} <p id="this-page" style="display: inline; padding: 5px;"><b>{{page+1}}</b></p> {% if page|int() != last_page|int() %} <a href="{{ url_for('.home', page=page+1) }}" id="right-btn">▶</a> {% endif %} </div> -
코드 짜기까지 고민 : 1페이지에서는 왼쪽 버튼을 보여주지 않고, 마지막 페이지에서는 오른쪽 버튼을 보여주지 말자 → page 변수 값에 따라 변경. + last_page로 마지막 페이지인지 백엔드 코드에서 넘겨주었음.
페이지네이션 참고 : https://pythonq.com/so/python/119132
@board.route('/', defaults={'page': 0}) @board.route("/<int:page>") def home(page): if session.get('login') is None: return redirect("/login") else: page_size = 8 books = db.session.query(Books) last_page = math.ceil(len(books.all()) / page_size) - 1 if page_size: books = books.limit(page_size) if page: books = books.offset(page*page_size).all() return render_template("index.html", books = books, page=page, last_page=last_page) -
route가 "/"뒤에 페이지 넘버가 붙기도 하고 안 붙기도 하는 문제 → 같은 함수를 두개의 라우팅 주소로 연결하는 것으로 해결. default로 page를 0으로 주어 "/"를 요청한 경우에 1페이지를 바로 보여줄 수 있게 했음.
route 참고 : https://stackoverflow.com/questions/13678397/python-flask-default-route-possible
-
sqlalchemy에서 페이지를 나누어 가져오기 위해 limit 함수와 offset 함수를 이용하여 해당 페이지의 데이터를 뽑아 전달해주었다.
-
- 별점 표시 수정
-
아예 평점이 없어도 빈 별로 별점을 표시해주도록 기능을 수정했다. 간단한 파이썬 문법을 통해 구현할 수 있다. 추후에는 클릭으로 별점을 수정하는 기능을 넣으면 좋을 것 같다.
<p class="stock">{{"★"*book.rating_avg + "☆"*(5-book.rating_avg)}}</p>
-
- 줄바꿈 단어 단위로 하게 수정(css) 참고 : https://www.codingfactory.net/10658
word-break: keep-all;- 원래는 jinja를 이용해서 아래처럼 글자가 15자 이상이면 여러줄로 바꿀까 생각 → 2줄이면 깔끔하지만 더 많이 줄바꿈이 일어나야 할 경우도 생긴다 → 그냥 위 방식으로 수정.
<a href="{{ url_for('.bookInfo', book_id = book._id) }}"> {% if book.book_name|length > 15 %} {% set split_len = book.book_name.split()|length %} {% set name1 = book.book_name.split()[:split_len//2] %} {% set name2 = book.book_name.split()[split_len//2:] %} {{ name1|join(" ") }} <br /> {{ name2|join(" ") }} {% else %} {{ book.book_name }} {% endif %} </a>-
jinja2에서도 join을 쓸 수 있다.
참고 : https://stackoverflow.com/questions/2061439/string-concatenation-in-jinja
-
- 원래는 jinja를 이용해서 아래처럼 글자가 15자 이상이면 여러줄로 바꿀까 생각 → 2줄이면 깔끔하지만 더 많이 줄바꿈이 일어나야 할 경우도 생긴다 → 그냥 위 방식으로 수정.
- 페이지네이션
- 결과 화면
