2020.11.30 search jQuery, 기능 보안

2020.11.30 search jQuery, 기능 보안_정리노트

 

저번에는 search 기능만 구현해봤다면, 오늘은 search + paging 기능과 짜잘한 css , jQuery 정리 노트!! 

 

 

 

 

최종 결과물

 

뭐가 달라졌냐면, 검색결과 또한 10개의 게시물이 넘어간다면, 페이징을 해주고 input 창에는 클릭한 채가 되면, placehoder 에 있는 글자를 없애주었다. 

 

 

 

마지막 !! 검색어는 두 글자 이상 입력해달라는 경고창 띄우기!!!

 

하나하나 정리 ㄱㄱ

 

 

search.views

 

저번 포스팅과 달라진 점이 있다면, 검색할 때 필터로 제목과 | 을 써서 내용을 같이 필터링 해주는 or 연산자 사용!-!

or 과 | 차이는 비트연산자 ( | ) 와 논리 연산자 ( or ) 라는 차이인데, 비트 연산자는 비트 계산으로 숫자에 관한 것의 내용을 다루고, 논리는 boolean 값, 즉 true, false 로 값을 판단하게 된다. 비트 연산 관련에 논리 연산자를 사용하게 되면, 의도치 않은 결과가 나올 수 있다... 

오옹 어렵다.. 둘 다 써보니 기능에 차이는 없었지만, 일단 나는 | 사용! 혹시 다르다면 꾸지람을 주십시오...

또한 우리는 페이징을 해야하기 때문에 저번에 썼던 포스팅처럼 page_obj 넘겨주기!

 

 

 

korinkorin.tistory.com/33

2020.10.07_django 검색 기능 구현하기

 

korinkorin.tistory.com/32

2020.10.05_django paging

 

각각 검색 기능, 페이징 기능은 이미 포스팅 했으니 넘어가기 !

 

search.html

 

또한 html에도 똑같이 적어주고 !! 이제 밑에다가 페이징 기능을 붙이기만 하면 되는데 차이점!!!!

 

 

이렇게 똑같이 붙여주면, 어떤 결과가 발생하느냐,

 

 

 

 

일단 첫번째 페이지는 잘뜬다. 두번째 페이지로 가볼까나

 

 

 

오.... 잘못되었다 뭐가 단단히... 원인은 url을 한번 보면

 

 

 

첫번째 페이지를 보면 우리가 검색했던 값들을 잘 들고 오는 것을 볼 수 있따.

 

 

검색 인풋창 form

 

우리가 지금 폼으로 데이터 전송을 하는 name 인 result 가 잘 넘어가고 있거든!! 근데 2페이지로 가게 되면,

 

 

result 값이 안넘어가고 있다..! 그래서 해당 키워드가 없기 때문에 

 

 

이 if 문에 부합하기 때문에 이 페이지가 뜨게 되고, 가져온 search_keyword 가 없기 때문에 "" 빈 문자열을 리턴해서 이 페이지가 뜨게 되는 것이다!

 

 

 

 

우리는 그래서 page 값과 함께 똑같이 search_keyword 값도 붙여서 들고와주어야 한다.

 

 

어떻게 적어주느냐 ?뒤에값을 붙여줄건데, &page 값과 함께 search_keyword  라고 함께 붙여서 가져와 준다. ?는 url 뒤에 붙여줄 파라미터 값을 의미하고, & 을 이용해 여러개를 가져올 수 있다. 

 

그러면!!

 

 

 

 

 

짝짝 잘 넘어가는 것을 볼 수가 있다!!!!

 

 

---

 

이제는 부가적인 css, jqeury !!

 

 

 

input 창에 커서를 대면 placeholder 를 없애고

 

 

다시 포커스가 되지 않으면 placeholder 를 나타나게하는 것은 css 로 구현했다.

 

 

 

 

사라지는 것 자체는 css 단계에서 구현이 안된다. js나 jqeury를 사용하는 방법도 있겠지만, 클릭 이벤트로 하게 되면 ,새로 고침을 하기전에는 아예 속성이 사라지거나 조금 더 복잡하게 구현해야해서, 간단하게 트릭을 이용해서 css 로 구현했다.

input::placeholder 선택자와 focus 를 합쳐서 포커스가 되면 배경색과 같은 하얀색을 이용해서 마치 없어지는 효과가 나타나도록 했다! 이렇게 하게 되면 보통의 브라우저에는 잘 나타나게 되지만, 조금 더 디테일을 이용한다면, 

 

 

이렇게 input::-webkit-input-placeholder 을 통해 크롬의 구버전에서도 동작하게 할 수 있다.

 

그 외에도

input:-ms-input-placeholder >> IE

input:-mos-input-placeholder >> Firefox

 

을 통해 다른 구버전 브라우저, IE 에서도 동작하게 디테일을 조금 더 추가해줄 수 있따!

 

 

마지막으로 경고창 Jqeury!

 

 

if문과 input.val() 를 통해 인풋창에 입력되는 벨류값을 가져올 수 있다. 만약 그 길이가 2 이하이면,

preventDefault 함수를 통해 이벤트 발생을 잠시 멈출 수 있다. 그래서 잠시 멈춘 뒤, 경고창을 띄우는 함수를 다시 선언해주고, 실행시킨다.

 

그러면, 

 

 

 

한글자를 입력했을때는 경고창을 띄워주게 된다!!! 굿굿

 

 

 

---

 

오늘은 간단하지만 나름 또 오래걸렸던 작업 잠시 포스팅..끝끝!!!! 다음에는 js 도 문법적으로 더욱 공부를 해서... 써봐야겠따 간단한 포스팅 끝끝