[Python #19] [Django #12] 검색 기능 UI 다듬기
hive-132971·@june0620·
0.000 HBD[Python #19] [Django #12] 검색 기능 UI 다듬기
pixabay
https://cdn.pixabay.com/photo/2019/03/12/20/27/kanban-4051777_1280.jpg
***
검색 기능 UI를 좀 더 다듬어 본다. HTML form을 그대로 사용했고 CSS 가 없다 보니 영 보기 안 좋다.
#### 구상
1. 큰 검색 박스 하나를 메인에 두고, 구현된 세 개 기능(태그 검색, 타이틀 검색, 내용 검색) 중 내용 검색만 노출
2. 복수 키워드를 받을 수 있어야 하므로, 여러 개를 받을 수 있는 기능 구현
3. [상세 검색] 버튼 하나 추가, 클릭 시 태그 검색, 타이틀 검색, 내용 검색 세 가지 노출
더 상세하게 만들고 싶지만 시간이 많이 들 것 같아 일단 이 정도로 구현한다. 게다가 CSS, JS는 초짜라 어떻게 내 힘으로 할 수가 없어 더 많은 기능은 욕심이다. 이 정도도 오픈소스의 힘을 빌려 본다.
###### 소스 탐색1
인터넷에서 검색 박스 마크업을 검색해 보니 역시 Bootstrap 예제가 많이 나온다.
https://colorlib.com/wp/free-css3-html5-search-form-examples/ 에서 가장 마음에 드는 v4를 사용하자. 복수 키워드 검색까지 구현돼 있어 1, 2번은 한 번에 해결될 것 같다. (#다운로드고고#오픈소스감사)
###### 소스 탐색2
3번은 w3schools에 예제가 있다. 필요한 코드만 가져가면 될 거 같다.
https://www.w3schools.com/howto/howto_js_collapsible.asp
그런데 한 가지 문제가 있다. 이 두 개 코드를 합치는 방법을 잘 모르겠다. 메인 검색 박스 우측에 작은 버튼 하나 만들고, 누르면 아래로 상세 메뉴가 노출되게 하는 게 목적인데... ㅎㅎㅎ 그건 차차 배우면서 하고 일단 순서대로 노출 시켜본다. 배경색 정도는 직접 추가하자. 내가 좋아하는 파랑, 초록, 노랑, 빨강 단색으로...
#### 구현
우선 프로젝트 root에 static 폴더 하나를 만들고 하위에 css, images, js 폴더를 만들어 위에서 다운로드 한 파일을 각각 위치에 맞게 넣는다.
다음은 장고에서 지원하는 방법으로 static 폴더를 읽어오도록 settings.py에서 static 파일 경로를 지정해 준다.
```
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
```
<p></p>
검색 기능은 메인에 노출해야 하므로 base.html에 코드를 추가하자. 주의할 점은 `{% load static %}`로 static 파일을 읽어야 한다. 또한 `<link href="{% static 'css/main.css' %}" rel="stylesheet" />`로 css 파일을 읽어온다.
```
{% load static %}
{% load post_extras %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,800" rel="stylesheet" />
<link href="{% static 'css/main.css' %}" rel="stylesheet" />
{% spaceless %}
{% endspaceless %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>D_Blog</title>
</head>
<body>
<header>
<nav>
<div class="s004">
<form action="/{{ request.path | get_account_form_url }}/search/" method="get">
<div class="inner-form">
<div class="input-field">
<input class="form-control" id="choices-text-preset-values" name="texts" type="text" placeholder="Type to search..." />
<button class="btn-search" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
</button>
</div>
</div>
</form>
</div>
<div class="collapsible-container">
<button class="collapsible">Advanced search</button>
<div class="content">
<form class="adv-form" action="/{{ request.path | get_account_form_url }}/search/" method="get">
<input id="tags" type="text" name="tags" value="" placeholder="tags">
<input id="titles" type="text" name="titles" value="" placeholder="titles">
<input id="texts" type="text" name="texts" value="" placeholder="texts">
<input type="submit" value="Search">
</form>
</div>
</div>
</nav>
</header>
<script src="{% static 'js/choices.js' %}"></script>
<script>
var textPresetVal = new Choices('#choices-text-preset-values', {
removeItemButton: true,
});
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
{% block content %}
{% endblock content %}
</body>
</html>
```
main.css의 내용은 첨부하지 않는다. 양이 너무 많고, 어차피 위 두 링크에서 확인 가능하다.
#### 결과
**검색어 복수 입력한 상태 & 상세 검색 접힌 상태**
**상세 검색 펼친 상태**
색상이 너무 강렬하다. 이건 차차 손 봐야겠다.
***
**[Cookie 😅]**
Python 3.7.4
Django 2.2.4
steem-python 1.0.1
goorm IDE 1.3👍 donekim, toni.pal, laissez-faire, nokodemion, roseofmylife, slowwalker, daath, moneytron, cpt-sparrow, hive-108278, itchyfeetdonica, kimzwarch, veronicalee, udabeu, mafia.wallet, meins0815, forecasteem, tokenindustry, cnbuddy, wisdomandjustice, magicmonk, tumutanzi, coldhair, techken, lindalex, andrewma, changxiu, cherryzz, wherein, tina3721, andyhsia, real3earch, minloulou, mmmmkkkk311, ctime, cnbuddy-reward, oldstone, mawit07, steemfriends, cnstm, oldstone.sct, logicforce, lianjingmedia, jsj1215, yasu, julialee66, smartvote, igrinov, newsposter, hongdangmu, new1, dmitriyyandreev, tronhill, sudoku, ogar4ik, gaffarov, dam4ik, yletavina, divachev, inurico, savonova, gaffra, konmila, dariyaya, adelinak, kamillaevd, krylovayar, rybakova, klavdiya, teterina, aliraz, subbotina, natalip, kidnapper7, posty, amber7, helly7, bruner, new3, splinerlandsru, balomyt, howlux, olddemon, tagal, maybug, godof, navymars, keyplex, zgil, corse, reedemy, delegat, bondiana, clast, nordsea, wearcly, vertor, groem, claster, randomaizer, falen, zelarin, veune, cleyn, nnax, zior, vasay, pirve, rgni, onlety, xyes, sunalent, tenya, bril, yarel, thamen, crimo, lucky2015, steem-agora, fengchao, shenchensucc, marina007, smolalit, suhunter, melaniewang, zerofive, da-dawn, payroll, june0620, starrouge, dudream, naha, newsnownorthwest, bluengel, realprince, jeehun, parkname, futurecurrency, khaiyoui, gghite, ace108, blogstats,