admin-multiBoard 에 게시판종류를 추가하면
일반 페이지 multiboard 옆쪽으로 버튼도 계속 추가되도록 만들어줄예정
아래그림처럼 추가를 위한 입력창을 만들어서
맨 오른쪽의 확인버튼을 누르면 추가되도록 만들자.
multiBoard.jsp 하단에 input창이 포함된 form태그를 추가해줬다.
이 값을 AdminController에서 map으로 받아서 잘 가져오는지 출력먼저 해본다.
이제 입력값을 db에 넣어보자
리턴값에 redirect 꼭 필요**
그런데 에러가 난다.
왜냐하면 db에 mb_cate가 유니크 키로 지정되어 있어 이 값도 필수로 들어가야 한다.
그래서 cateNum이라는 이름으로 mb_cate 변수를 입력하는 input창까지 추가해줬다.
아래처럼 입력창이 네개이다.
문제점은 '카테고리' 에 해당하는 cateNum 이 유니크 키여서 숫자가 겹치면 에러가 난다.
이미 b_no에 AUTO_INCREMENT가 적용되어 있어서 mb_cate에는 AUTO_INCREMENT가 중복으로 적용이 안된단다.
그런데 url은 어차피 cateNum를 잡아오면 되는거라 아래처럼 쿼리문을 수정해줬다.
CONCAT은 괄호안의 문자열을 연결해주는 역할을 한다. (쉼표단위로 문자열을 나열하면 알아서 연결해준다.)
CONCAT(str1, str2 ...);
input창에서 url은 필요없으니 지워준다.
결국 form을 제출했을때 multiboard로 날아가는 값은 cateNum, name, comment 세개의 값이다.
게시판번호, 게시판이름, 참고사항
아래처럼 입력값들 넣고 저장버튼 누르면
잘 들어간다.
여기에도 추가된다.
클라우드 타입 연결되는지 다시한번 도전해본다.
실패했다. 그만둔다.
일단 회원관리 페이지부터 해보자.
/member 요청이 오면 회원리스트를 띄우는 admin/member 페이지로 이동할거다.
타입은 ModelAndView 로 mv에 값들을 붙여서 jsp로 보낼거다.
mapper에서 쿼리문을 작성할건데
members 테이블에서 필요한 member정보들을 불러온다. (Map으로 가져올거다)
쿼리문 실행시켜 받아온 값을 list라는 이름으로 받아서 출력시켜봤더니 잘 나온다.
이제 jsp만들러가자
테이블로 정리해서 출력해주면
잘 나온다.
성별표현은 choose _ when, otherwise 를 사용해 기호로 표시해줬다.
등급에 대해서는 Select - option 을 사용해줄거다.
아래처럼 선택창으로 보여진다.
등급에 따른 이름을 지정해주고 등급번호는 option의 value 값으로 넣어줬다.
아래처럼 등급이름 선택창으로 나타난다.
다시 optgroup으로 옵션그룹 세개로 묶어줬다.
optgroup은 선택은 안되고 아래처럼 묶는것만 가능한 태그다.
option 태그 내부에 selected 를 추가해주면 이게 기본값으로 선택되어 있는 상태로 보여진다.
if문으로 각 등급일때 그 번호에 해당하는 이름이 선택되어 보여지도록 selected를 추가해주면
등급에 따른 이름들이 기본값으로 뜬다.
이제 0~4 등급일때 행의 색을 다르게 지정해보자.
스타일지정
select의 값이 변경되었을 때의 기능을 주기위해
onchange 로 gradeCh() 함수가 실행되도록 설정해줬다.
변경할때 팝업이 뜨도록 해주면
아래처럼 변경했을때
팝업이 뜬다.
다시 onchange 함수에서 매개변수로 mno를 넣어주고
내가 클릭한 선택창에 해당하는 mno를 잘 잡아오는지 팝업으로 띄워보자.
mno 잘 잡아온다.
m_name도 가져와서 팝업으로 띄워볼건데 이건 타입이 스트링이니까
아래에서 매개변수로 값을 넣어줄때 따옴표를 넣어야한다.
그러면 번호랑 이름까지 값을 잘 가져온다.
select에 id를 지정해주고
그걸 잡아와 선택된 인덱스의 값들(등급명, 등급번호)을 뽑아내 팝업으로 띄워보면
.getElementById (" id명 ")
select.options[select.selectedIndex] : 현재 선택된 옵션
현재 선택된 옵션에서 text & value 값을 뽑아서
각각 selectName & selectValue 라는 변수로 지정해주고 팝업으로 띄워본다.
내가 변경한 등급이름과 등급번호가 팝업으로 뜬다.
select 태그 내부에서
클릭한 옵션의 value값을 미리 잡아서 gradeCh() 의 매개변수로 넣어준다.
이값을 위로 가져와서 팝업으로 띄워보면
그러면 내가 옵션에서 선택한 등급명에 해당하는 등급번호가 팝업으로 뜬다.
이제 등급을 변경하면 확인창으 뜨도록 만들어주고
확인팝업이 뜨고, 확인을 누르면
변경하려는 계정의 번호와 등급번호를 가진 아래의 주소창으로 이동한다.
이제 컨트롤러에서 이 값을 잡아 db까지 가지고 가서 진짜 등급을 변경해주는 만들어보자.
우선 jsp의 mno와 grade 값을 map으로 잡아와서 콘솔창에 띄워본다.
mno랑 grade를 map으로 가져왔으니 gradeChange() 메서드를 실행시켜 db까지 보내본다.
mapper 에서 mno를 비교해 일치하는 계정의 mgrde를 업데이트 시킨다.
이제 admin-member 페이지에서 모든 회원의 등급을 변경할 수 있다.
https://www.data.go.kr/index.do
여기에 로그인 한다. (카카오 계정으로 했다.)
아래 두군데 신청한다.
https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15099842
질병관리청_코로나19 국내발생현황 조회
코로나바이러스감염증 19로 국내 발생한 사망, 재원 위중증, 신규입원, 확진 항목에 대해 각각 일일 및 인구10만명당 인원을 조회
www.data.go.kr
https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15073855
요렇게 신청해주고 승인을 기다린다.
세션은 쿠키에 서버는 하드디스크에 저장된다.
아이디 저장을 체크하면 세션에 저장해두고 있다가
다음번에 이 페이지에 들어오면 아이디값이 자동으로 들어가있도록 해줄예정 (관련정리는 맨아래에)
11번가같은곳에서 광고를 보면 쿠키에 저장되어 계속 광고가 따라다니는 거다.
아래처럼 아이디저장 체크박스를 만들자
쿠키관련해서는 아래의 코드를 참고하면서 해보자.
일단 일반게시판 로그인 페이지(login.jsp)에 아이디 저장 체크박스를 추가해준다
input 태그의 type을 checkbox로 넣어주고 label태그도 설정해준다.
그러면 로그인 입력창 하단에 아래처럼 아이디 저장 체크박스가 나온다.
아이디랑 패스워드 입력하고 로그인 버튼을 눌렀을 때 체크박스의 체크여부를 확인할거다.
로그인 버튼에 줬던 onclick기능(로그인기능)은 잠시 빼두고 주석처리 해준다.
로그인 버튼을 클릭했을때 팝업이 뜨게 해줬다.
잘된다.
:checked => 체크된 상태인 요소들을 선택
.is(":checked") => 체크된 요소들이 있는지 여부를 boolean으로 반환 (체크되어있다면 true / 아니라면 false 반환)
체크 안되어있을 때 확인팝업
체크되어있을때 확인팝업
일단 요렇게 세가지 진행할예정
//쿠키 값 가져오기
//쿠키 검사 -> 쿠키가 있다면 해당 쿠키에서 id값 가져와 id입력창에 붙여넣기
//아이디 패스워드 검사하기 (db로 보내서 일치여부 비교)
id & pw 검사먼저 해주자.
일단 변수로 id & pw 값을 잡아와주고
글자수 제한을 넣어준다.
이제 id & pw 검사를 해줬으니 이 값들을 아래의 방식으로 쿠키에넣어줄거다.
[ setCookie 함수 ]
setCookie("userID", 사용자가입력한ID, 7);
=> 만일 체크박스에 체크되어있으면 userID 에 입력ID를 7일동안 저장
setCookie() 함수를 만들고 매개변수로 (쿠키이름, 값, 만료일) 을 가지고 간다.
new Date() 로 현재날짜에 대한 객체생성 (exdate)
exdate.setDate ( exdate.getDate() + exdays ) => 현재날짜에 쿠키유효기한을 더해줌
쿠키에 저장되는 기한
현재날짜로부터 exdays 이후가 최종 만료일자가 된다.
이제 아이디 체크를 했을때 입력한 id값을 쿠키에 7일동안 저장하도록 해보자
setCookie 함수 마저 완성해준다.
let cookieValue = value + ( (exdays == null) ? "" : "; expires="+ exdate.toGMTString() );
exdays가 null이라면 (만료기한이 없다면 value값 그대로 쿠키로보냄 )
(참) => "" => value
exdays가 null이 아니라면 (만료기한이 있다면 value값에 만료기한을 붙여서 쿠키로 보냄)
(거짓) => "; expires="+ exdate.toGMTString() => value"; expires="+ exdate.toGMTString()
document.cookie 를 통해 쿠키설정
쿠키에 보내는 값의 최종 형태 (key = value 형태)
cookieName = cookieValue; expires = 2023-00-00 (만료기한이 있다면 같이 붙어서 보내짐 )
아이디랑 패스워드 입력 & 아이디저장 체크 => 로그인 버튼을 누르면
아래처럼 체크되었습니다 팝업이 뜬다. (잘 처리됨)
F12 - 응용프로그램 - 쿠키(로컬)에서 확인해보면
내가 설정해준 userID라는 이름의 value값이 입력한 아이디로 저장되어있다.
expire 날짜도 7일 이후로 잘 나온다.
.toGMTString() : Date 객체의 메서드, 날짜를 GMT(그리니치 표준시) 형식의 문자열로 변환
* GMT(그리니치 표준시) : 세계 표준 시간대를 나타내는 기준 시간대로, 모든 시간대는 GMT와의 차이로 표시
* UTC(협정 세계시) : GMT를 보다 정확하게 대체하기 위해 개발된 시간 표준
=> GMT와 UTC의 차이는 초의 소숫점 단위만큼으로 일상에서는 혼용되어 사용
대한민국의 시간대(Korea Standard Time, KST)는 UTC +9
toUTCString() 또는 toISOString() 사용을 권장한다고 한다.
암튼 expires 앞에 세미콜론을 뺐더니
아래처럼 만료기한이 id값으로 뒤에 바로 붙어 하나의 문자열로 들어간다.
세미콜론만 붙여주면 id값과 만료기한이 각각 알아서 제자리를 찾아 저장이 된다.
id값 & 만료기한을 쿠키에 저장할때
아래처럼 Y & 만료기한을 같이 저장해준다. 이유가뭐지?
한번 로그인 버튼을 누르면 요렇게 두가지가 쿠키에 저장된다.
[ deleteCookie 함수 ]
이제 쿠키에 저장된 것들을 삭제해보자 (체크박스 해제시)
매개변수로 cookieName(key값)을 가지는 deleteCookie 함수 생성
new Date() 로 현재날짜에 대한 객체생성 (expireDate)
expireDate.setDate ( expireDate.getDate() - 1 ) => 현재날짜에 -1을 해서 어제날짜로 바꿔준다.
즉, 쿠키의 만료일자를 어제로 바꿔준다.
document.cookie 를 통해 바꿔준 만료일자로 쿠키 재설정
쿠키에 저장된 값이 두개니 삭제할때도 두개를 삭제해줘야 한다. 한꺼번에 삭제는 못하나보다.
setCookie로 저장해준 값 두개를 deleteCookie로 각각 삭제
이렇게 해주면 현재 쿠키에는 poseidon이라는 아이디와 Y가 저장되어 있는데
아이디체크 박스가 해제된채로 다시 poseidon 아이디로 로그인 했을때
쿠키에 저장된 값 두개가 사라진다.
[ getCookie 함수 ]
이제 쿠키를 가져와서 필요한 값만 잘라내보자.
(로그인 시 id를 쿠키에 저장했었다면 재로그인 시에 이 id값을 자동으로 불러오기 위해서)
매개변수로 cookieName(key값)을 가지는 getCookie 함수 생성
document.cookie.split(";"); => 쿠키의 값을 가져와 ; (세미콜론)을 잘라낸다.
cookieName = cookieValue ;
남은 값인 val에서
val[i].substr(0, val[i].indexOf("=")) => substr() 메소드로 0번째부터 문자 "=" 이전까지의 값을 가져온다.
x = cookieName
val[i].substr(val[i].indexOf("=")+1) => substr() 메소드로 문자 "=" 이후부터 마지막까지의 값을 가져온다.
y = cookieValue
즉, x 와 y 는 각각 쿠키에 저장된 key와 value 값을 뽑아준거다.
if(x == cookieName) { => 쿠키에 저장된 x 와 매개변수로 가져온 cookieName () 이 같다면
return y; => y를 반환 (쿠키에 저장된 value값 = 저장된 id값)
}
공백제거용 추가해줬다.
x = x.replace(/^\s+|\s+$/g, '');
아니면 이렇게 해도 된다. trim()
위에서 getCookie 함수로 잘라낸 value 값들을 가져와서 아래 변수로 설정
let userID = getCookie("userID"); // 아이디
let setCookieY = getCookie("setCookie"); // Y
조건문 => 가져온 값이 만약 Y라면 (이전에 쿠키에 저장된 적 있는 id라면) 체크박스 체크하고 id를 입력창에 불러옴
아니라면 체크박스 해제
.prop () : HTML 요소의 속성을 조작하거나 가져오는 데 사용하는 메서드
$(selector).prop(propertyName, value)
$("#saveID").prop("checked", true); => 체크박스(#saveID)의 "checked" 속성을 true로 설정 (체크한다는 의미)
실행해보면 이전에 저장된 쿠키의 id값을 잘 가져와 입력창에 띄운다.
[ HTTP프로토콜 ]
클라이언트 ----요청(request) ---> 서버
클라이언트 <---응답(response) -- 서버
connectionless(비연결) : 요청에 대한 응답을 보내면 접속이 끊어진다.
stateless(무상) : 통신이 끝나면(연결이 끊어지면) 상태정보가 사라진.
=> 이러한 특성들을 보완하기 위해 쿠키와 세션을 사용한다.
[ 쿠키(Cookie) ] _ 사용자 정보를 브라우저(클라이언트 로컬)에 저장 (text)
key - value 형태
구성요소 : 이름(key), 값(value), 만료기한(유지시간), 도메인, 경로
클라이언트 ----요청(request) ---> 서버 (1. 클라이언트 정보를 담아 쿠키생성)
클라이언트 <---응답(response) -- 서버 (2. HTTP 헤더에 쿠키를 포함시켜 응답)
3. 클라이언트는 받은 쿠키를 쿠키저장소(로컬PC)에 저장
(4. 쿠키저장소 쿠키와 함께 요청)
클라이언트 ----요청(request) ---> 서버 (5. 쿠키에 담긴 정보로 클라이언트 식별)
클라이언트 <---응답(response) -- 서버 (6. 응답)
브라우저를 종료해도 만료기한동안 보관됨.
[ 세션 (Session) ] _ 사용자 정보를 서버에 저장 (Object)
클라이언트가 서버에 접속하면 고유한 세션ID를 발급 & 클라이언트는 이 세션ID에 대한 쿠키를 저장
클라이언트 ----요청(request) ---> 서버(1. 클라이언트 정보를 담아 세션생성, 세션ID를 담은 쿠키생성)
클라이언트 <---응답(response) -- 서버 (2. HTTP 헤더에 쿠키를 포함시켜 응답)
3. 클라이언트는 받은 쿠키를 쿠키저장소(로컬PC)에 저장
(4. 쿠키저장소의 쿠키와 함께 요청)
클라이언트 ----요청(request) ---> 서버 (쿠키에 담긴 세션ID로 클라이언트 식별)
클라이언트 <---응답(response) -- 서버 (정보를 바탕으로 요청을 처리 후 응답)
브라우저를 종료하면 세션도 종료됨.
보안성 우수, 서버자원을 소모, 용량제한없음, 쿠키에 비해 속도가 느림
'국비과정 > Spring' 카테고리의 다른 글
| 20230829 _[62일차]_01. 공공데이터 API 활용 & Thymeleaf 시작 (0) | 2023.08.29 |
|---|---|
| 20230828 _[61일차]_01. admin-게시글관리 페이지 (0) | 2023.08.28 |
| 20230824 _[59일차]_01. admin-multiboard 정리 & 보드 정리 (0) | 2023.08.24 |
| 20230823 _[58일차]_01. admin 메일보내기 & notice 글내용띄우기 (0) | 2023.08.23 |
| 20230822 _[55일차]_01. admin-notice 페이지 및 파일업로드 (0) | 2023.08.22 |
