pixabay
<p dir="auto">검색 기능에 UI를 추가한다. HTML의 form으로 우선 먼저 가볍게 구현해 보자. (깊게 구현할 능력도 안됨ㅎㅎ)
<h5>form 추가
<p dir="auto">먼저 django의 templates 폴더의 base.html 에 form 을 넣는다.
<ol>
<li>action은 일단 하드코딩으로 <code>/@june0620/search로 한다. 계정명은 변수로 처리하고 싶은데 안된다. ㅠ (#연구필요#장고초자)
<li>검색 기능이니 method는 post보다는 get이 나을 것 같다.
<li>input 태그 세 개를 만들고 각각 tags, titles, texts 레이블 추가한다.
<pre><code> <div>
<p></p>
<form action="/@june0620/search/" method="get">
<label >Tags: </label>
<input id="tags" type="text" name="tags" value="">
<label >Titles: </label>
<input id="titles" type="text" name="titles" value="">
<label >Texts: </label>
<input id="texts" type="text" name="texts" value="">
<input type="submit" value="Search">
</form>
</div>
<p dir="auto">
<p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmaWkKn9ESkTtmMEDJWkTn3uZQE1zQD8kcndFCooB2u5rY/image.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmaWkKn9ESkTtmMEDJWkTn3uZQE1zQD8kcndFCooB2u5rY/image.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmaWkKn9ESkTtmMEDJWkTn3uZQE1zQD8kcndFCooB2u5rY/image.png 2x" />
<p dir="auto">
<p dir="auto">대충 요런 화면인데 CSS가 없어서 이 모양이다. CSS 공부도 또 해야 하나? ㅠ 일단 기능에만 집중하자. 👇<br />
<img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmNY5tjh5TGr4Nn7zP7dWZ4JY3L34iNeJ6oBz4KJANHRcx/image.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmNY5tjh5TGr4Nn7zP7dWZ4JY3L34iNeJ6oBz4KJANHRcx/image.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmNY5tjh5TGr4Nn7zP7dWZ4JY3L34iNeJ6oBz4KJANHRcx/image.png 2x" />
<h5>URL 설정
<p dir="auto">form의 action으로 받은 url을 urls.py에 설정한다. 이 부분은 변수를 사용할 줄 아니 변수로 처리하자. ㅎㅎ<br />
url 패턴과 매칭 될 경우 views.py의 SearchPosts 클래스를 호출한다.
<pre><code> path('@<slug:account>/search/', SearchPosts.as_view(), name='search'),
<p dir="auto">
<p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmTFazmwMocShDKgQRAALGdC5ZhNkqJUckF89sp5EbvTsE/image.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmTFazmwMocShDKgQRAALGdC5ZhNkqJUckF89sp5EbvTsE/image.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmTFazmwMocShDKgQRAALGdC5ZhNkqJUckF89sp5EbvTsE/image.png 2x" />
<h5>form 파라미터 처리 및 검색
<p dir="auto">form 에서 전달받은 query string 을 리스트로 전환해야 하는데 split(',') 로 리스트화 및 query 딕셔너리에 추가한다.<br />
UI 단에서 동일 필드에 여러 개 검색어를 입력하고자 할 때 , 로 분리하면 더 많은 결과를 얻을 것이다.<br />
(일시적인 구현이고, 나중에 UI가 바뀌면 다시 구현 필요하다.)
<pre><code>class SearchPosts(ListView):
template_name = 'album.html'
context_object_name = 'all_posts'
def get(self, request, *args, **kwargs):
query = {
'tags': request.GET.get('tags').split(','),
'titles': request.GET.get('titles').split(','),
'texts': request.GET.get('texts').split(',')
}
se = Search(account=kwargs['account'], query=query)
self.queryset = se.search_posts()
return super().get(request, *args, **kwargs)
<p dir="auto">
<p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmXwXF9SubesEuRy2as37uPtcpywdzM7WxSyKrzhxm4pwe/image.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmXwXF9SubesEuRy2as37uPtcpywdzM7WxSyKrzhxm4pwe/image.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmXwXF9SubesEuRy2as37uPtcpywdzM7WxSyKrzhxm4pwe/image.png 2x" />
<h5>결과
<p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmTMzFKPuTSGT6oSybGQiyzKaMe7nzfctm1VvrJX37b1wg/image.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmTMzFKPuTSGT6oSybGQiyzKaMe7nzfctm1VvrJX37b1wg/image.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmTMzFKPuTSGT6oSybGQiyzKaMe7nzfctm1VvrJX37b1wg/image.png 2x" />
<p dir="auto">
<p dir="auto"><img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQKXV7ckRC6jg4LXYw14i5kJ7raK1VSGrJGF27Rp9Uhw4/image.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQKXV7ckRC6jg4LXYw14i5kJ7raK1VSGrJGF27Rp9Uhw4/image.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmQKXV7ckRC6jg4LXYw14i5kJ7raK1VSGrJGF27Rp9Uhw4/image.png 2x" />
<p dir="auto"><strong>[Cookie 😅]<br />
Python 3.7.4<br />
Django 2.2.4<br />
steem-python 1.0.1<br />
goorm IDE 1.3
<p><p><p><p><p>
Congratulations @june0620! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@june0620/upvotes.png?202009090039" /><td>You distributed more than 20000 upvotes. Your next target is to reach 21000 upvotes. <p dir="auto"><sub><em>You can view your badges on <a href="https://hivebuzz.me/@june0620" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">your board and compare yourself to others in the <a href="https://hivebuzz.me/ranking" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ranking<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto"><strong><span>Do not miss the last post from <a href="/@hivebuzz">@hivebuzz: <table><tr><td><a href="/hive-151781/@hivebuzz/meetup-uk"><img src="https://images.hive.blog/64x128/https://i.imgur.com/h6W1RRo.png" /><td><a href="/hive-151781/@hivebuzz/meetup-uk">HiveBuzz supports meetups of the Hive UK Community<tr><td><a href="/hivebuzz/@hivebuzz/feedback-from-the-september-1st-hive-power-up-day"><img src="https://images.hive.blog/64x128/https://i.imgur.com/zHjYI1k.jpg" /><td><a href="/hivebuzz/@hivebuzz/feedback-from-the-september-1st-hive-power-up-day">Feedback from the September 1st Hive Power Up Day