이전에 스크래핑한 데이터를 csv로 저장하는 작업과 임시로 표시해 뒀던 부분에 수집한 데이터를 바탕으로 실제 공모전의 제목과 날짜가 표시되도록 하였다. 이번에는 세부 페이지 html 파일을 작성하고, 메인 페이지에서 검색을 진행하면 해당 데이터를 받도록 작성해 볼 것이다.
[개인 프로젝트] 공모전 크롤링 (8) - 메인 페이지(공모전 표시), 데이터 csv 저장
이전에 메인 페이지 html/css 작업까지 완료하였다. 이번에는 스크래핑한 데이터를 csv로 저장하는 작업과 임시로 표시해 뒀던 부분에 실제 공모전의 제목과 날짜가 표시되도록 할 것이다. [개인
sanseo.tistory.com
변경사항
세부 페이지 - 더보기
원래 각 플랫폼의 더보기 링크를 누르면, 다음과 같이 공모전을 나열해주려고 하였다. 그러나 공부가 목적인 프로젝트이며, 페이지를 만들고 연결하는 작업은 이미 진행해 보았기에작업 시간을 고려하여 세부 페이지는 검색 페이지만 만들려고 한다. 대신 더보기 링크는 해당 플랫폼의 공모전 페이지로 이동하도록 링크를 설정한다.
수정 사항
moremore > urls.py
로컬 페이지로 접속했을 때, "~/main/"으로 리다이렉션 되도록 urls를 수정해 주었다.
from django.contrib import admin
from django.urls import path, include
from django.views.generic import RedirectView
urlpatterns = [
path('admin/', admin.site.urls),
path('main/', include('mainpage.urls')),
path('', RedirectView.as_view(url='/main/', permanent=True)),
]search-style.css / index-style.css
이전에 하나만 작성했던 style.css를 각 페이지에 맞게 search-style.css, index-style.css로 분리하여 작성하였다.
검색 페이지
mainpage > urls.py
검색 페이지의 url을 "~main/search/?q=검색어" 형태로 설정하였다.
from django.urls import path
from mainpage import views
app_name = 'mainpage'
urlpatterns = [
path('', views.index),
path('search/', views.search),
]mainpage > views.py
일단 간단하게 검색어를 받아와 context로 랜더링해서 웹에 값을 넘기도록 작성하였다.
def search(request):
keyword = request.GET.get('q')
context = {
'keyword': keyword,
}
return render(request, 'mainpage/search.html', context)mainpage > index.html
form의 action 속성을 설정하였고, 샘플로 적어뒀던 추천 검색어를 제대로 작성해 주었다.
<div id='search'>
<div id='input'>
<form action="/main/search" method="GET">
<input type="text" name="q" placeholder="검색어를 입력하세요">
<button type="submit">검색</button>
</form>
</div>
<div id="recommended-searches">
<ul id="recommended-words">
<li><a href="/main/search?q=데이터">데이터</a></li>
<li><a href="/main/search?q=AI">AI</a></li>
<li><a href="/main/search?q=인공지능">인공지능</a></li>
<li><a href="/main/search?q=해커톤">해커톤</a></li>
<li><a href="/main/search?q=아이디어">아이디어</a></li>
</ul>
</div>
</div>mainpage > search.html
index.html과 크게 달라진 것은 없다. 검색 시 검색 부분까지는 동일하며, 아래 공모전 정보만 검색어에 맞게 탐색 후 사용자에게 제공한다.
<!DOCTYPE html>
{% load static %}
<html lang="ko">
<head>
<meta charset="utf-8">
<title>moremore</title>
<link rel="stylesheet" href="{% static 'css/search-style.css' %}">
</head>
<body>
<div id='container'>
<div id='header'>
<a href="/main">
<img id='header-title' src="{% static 'images/title.PNG' %}">
</a>
</div>
<div id='search'>
<div id='input'>
<form action="/main/search" method="GET">
<input type="text" name="q" placeholder="검색어를 입력하세요">
<button type="submit">검색</button>
</form>
</div>
<div id="recommended-searches">
<ul id="recommended-words">
<li><a href="/main/search?q=데이터">데이터</a></li>
<li><a href="/main/search?q=AI">AI</a></li>
<li><a href="/main/search?q=인공지능">인공지능</a></li>
<li><a href="/main/search?q=해커톤">해커톤</a></li>
<li><a href="/main/search?q=아이디어">아이디어</a></li>
</ul>
</div>
</div>
<div id='competition-info'>
<h5>"{{ keyword }}" - 검색 결과</h5>
<div id='info'>
<ul class='competition-list'>
{% for i in "0123456789" %}
<li>
<a href="">
<h5 class='title'>title</h5>
<span class='application-start'>0000-00-00</span>
<span> ~ </span>
<span class='application-end'>0000-00-00</span>
<br><span>platform</span>
</a>
</li>
{% endfor %}
</ul>
<ul class='competition-list'>
{% for i in "0123456789" %}
<li>
<a href="">
<h5 class='title'>title</h5>
<span class='application-start'>0000-00-00</span>
<span> ~ </span>
<span class='application-end'>0000-00-00</span>
<br><span>platform</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</body>
</html>결과
git push
git add .
git commit -m "feat, fix: add detail(search) page and redirection path to mainpage, fix css file name"
git push origin main다음은 지금까지의 진행 상황과 어떤 기능이 남았는지 명확히 확인할 수 있도록 중간 점검을 진행하려고 한다.
[개인 프로젝트] 공모전 크롤링 - 중간점검
반복적으로 적었지만, "장고(웹) / 크롤링 / 깃"을 공부하기 위한 목적으로 진행하는 프로젝트이기 때문에 반복적으로 시간이 오래 걸리는 반복 작업은 최대한 제거하려고 하였고 프론트 부분은
sanseo.tistory.com
'프로젝트 단위 공부 > [개인 프로젝트] 공모전 크롤링' 카테고리의 다른 글
| [개인 프로젝트] 공모전 크롤링 (10) - 세부 페이지(검색 기능, 페이지네이션) (0) | 2024.05.11 |
|---|---|
| [개인 프로젝트] 공모전 크롤링 - 중간점검 (0) | 2024.05.08 |
| [개인 프로젝트] 공모전 크롤링 (8) - 메인 페이지(공모전 표시), 데이터 csv 저장 (2) | 2024.05.03 |
| [개인 프로젝트] 공모전 크롤링 (7) - 메인 페이지 (프론트) (2) | 2024.05.02 |
| [개인 프로젝트] 공모전 크롤링 (6) - 데이터 수집 (스크래핑) - 씽굿 (2) | 2024.05.01 |
