[개인 프로젝트] 공모전 크롤링 (10) - 세부 페이지(검색 기능, 페이지네이션)

이전에 세부 페이지 html 파일을 작성하고, 메인 페이지에서 검색을 진행하면 해당 데이터를 받을 수 있도록 작성하였다. 이번에는 검색어가 포함된 제목을 가진 공모전을 찾아 페이지네이션 형태로 제공하도록 기능을 추가할 것이다.

[개인 프로젝트] 공모전 크롤링 (9) - 세부 페이지(검색, 더보기)

검색 기능 & 페이지네이션

검색 기능과 페이지네이션을 구현하면서 같은 부분을 수정하였기 때문에 함께 설명하려고 한다.

mainpage > views.py

페이지네이션 적용을 위한 라이브러리가 있어 활용하였다. 페이지 당 10개의 결과를 볼 수 있도록 설정하였고, 에러가 발생할 경우를 위한 try-except 구문을 추가해 주었다. 또한 searched_competitons 변수를 통해 사용자가 입력한 문자열이 포함된 title을 가진 object를 추출하여 context로 넘겨주었다. 참고로 icontains는 대소문자를 구분하지 않고 검색을 진행한다.

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def search(request):
    keyword = request.GET.get('q')
    searched_competitions = Competition.objects.filter(title__icontains=keyword)

    paginator = Paginator(searched_competitions, 10)  # 페이지 당 10개의 결과를 보여줌
    page_number = request.GET.get('page')

    try:
        searched_competitions = paginator.page(page_number)
    except PageNotAnInteger:
        searched_competitions = paginator.page(1)
    except EmptyPage:
        searched_competitions = paginator.page(paginator.num_pages)
    
    context = {
        'keyword': keyword,
        'competitions': searched_competitions
    }
    return render(request, 'mainpage/search.html', context)

mainpage > templates > mainpage > search.html

<div id='competition-info'>
  <h5>"{{ keyword }}" - 검색 결과</h5>
  <div id='info'>
    <ul class='competition-list'>
      {% for competition in competitions %}
      <li align="center">
        <a href="{{ competition.url }}">
          <h5 class='title'>{{ competition.title }}</h5>
          <span class='application-start'>{{ competition.application_start|date:"Y-m-d" }}</span>
          <span> ~ </span>
          <span class='application-end'>{{ competition.application_end|date:"Y-m-d" }}</span>
          <br><span>{{ competition.platform }}</span>
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% if competitions.has_other_pages %}
<div align='center'>
  <div>
    {% if competitions.has_previous %}
    <a href="?q={{ keyword }}&page=1">&laquo; 처음</a>
    <a href="?q={{ keyword }}&page={{ competitions.previous_page_number }}">이전</a>
    {% endif %}

    <span>{{ competitions.number }} / {{ competitions.paginator.num_pages }}</span>

    {% if competitions.has_next %}
    <a href="?q={{ keyword }}&page={{ competitions.next_page_number }}">다음</a>
    <a href="?q={{ keyword }}&page={{ competitions.paginator.num_pages }}">마지막 &raquo;</a>
    {% endif %}
  </div>
</div>
{% endif %}

결과

결과 (1) - 검색어 "AI"

결과 (1) - 검색어 "AI"

결과 (2) - 검색어 " "

git push

git add .
git commit -m "feat: add pagenatition for detail page and done search function"
git push origin main

다음에는 공모전 데이터가 오류 없이 모두 스크래핑되는지 확인하고, 웹페이지 디자인을 마무리한다.

[개인 프로젝트] 공모전 크롤링 (11) - 데이터 스크래핑, 디자인 마무리