(국비교육) 60 - 멀티보드 생성하기 + cloudetype + 회원관리탭 + 데이터활용(공공데이터 포탈) + 쿠키 설정

■ multiboard 생성 만들기

 

 

아래와 같이 게시판 생성 창을 만들어준다. 

 

 

multiBoard form 을 받아 해당 내용을 DB 에 저장한다.

return 타입 넣어줄 때 / 안넣어도 되지만 넣어주는 게 정석이다. 

 

 

form 을 통해 받은 4개의 값을 넣어준다. 

 

 

생성하면 다음과 같이 db와 화면에 값이 정상적으로 들어간 것을 확인할 수 있다. 

 

 

멀티보드에도 한 개의 게시판이 추가 생성되었다. 

 

 

number 로 받도록 설정해준다. 

 

 

concat() 는 () 것을 모두 문자열을 이어주는 함수이다.

문자열을 연결시킬 때는 + 가 안되고 , 로 연결 가능하다. 

 

※ ./와 ../ 차이

간단하게 말하면, './'은 현재 디렉터리를 나타내고 '../'은 상위 디렉터리를 나타낸다.

이 두 표기법을 사용하여 파일이나 디렉터리에 접근하고 경로를 구성할 수 있다.

 

■ cloudetype

 

 

■ 회원관리탭 만들기

 

 

화면에 받아올 값을 modelandview 에 jsp 적어준다.

비밀번호를 제외하고 모두 담아올 예정이며, 해당 이름을 memberList 로 저장한다. 

 

 

jsp 에 해당하는 내용을 적어준다. 

 

 

이제 성별이 0과 1로 뜨니 아이콘과 색깔로 표시하여 가독성을 높인다.

 

 

select 와 optgroup 을 사용하여 해당 드롭다운을 만들어준다. 

 

 

다음과 같이 생성 완료

 

 

selected="selected" 는 해당하는 값을 그대로 선택해서 보여준다. 

 

 

등급에 따라 배경값을 줘서 표시해준다. 

 

 

다음과 같이 알림창 뜬다. 

 

 

홀따옴표 사용하면 두 개 사용 가능하다. 

''으로 감싼 문자열 내에서 ${} 형식으로 변수나 표현식을 삽입할 수 있다. 

 

row.m_name의 값이 문자열이라면 이 문자열을 표현하기 위해 따옴표나 쌍따옴표로 감싸야 한다.

따라서 ${row.m_name} 앞뒤에 홑따옴표(')를 사용하여 JavaScript에게 그 값이 문자열임을 알려주는 것이다.

 

 

입력받은 row.m_no에 해당하는 id 값을 찾는다 

따라서 id="${row.m_no }" 때문에 mno 값이 동적으로 선택된다.

그리고 선택한 값의 text 를 selectName 변수로 할당하고,

그에 해당하는 값을 selectValue 로 할당한다. 

 

 

다음과 같이 바뀐 값으로 출력된다. 

 

 

this.value 로 넣어서 하는 방법도 있다. 

 

 

UPDATE 를 통해 URL 로 받아온 값(mno=, grade=)으로 파라미터 값을 넣어줘서

등급 변경 시 해당 내용을 DB에 반영해준다. 

 

■ 데이터 활용

 

 

활용하고자 하는 데이터 활용신청

 

 

마이페이지에서 활용 신청 현황 확인 가능

 

https://www.data.go.kr/

공공데이터 포털

 

 

■ 쿠키 이용하기

 

 

세션은 서버에 저장

쿠키는 하드디스크에 저장 

 

작업을 위해 밑에  check 박스를 만들어준다. 

 

 

 

정상적 실행 확인

 

 

:checked 는 체크 되어 있는지 여부를 검사하는 것이다. 

 

 

아이디 패스워드 먼저 검사한다.

먼저 밑에 id 로 설정한 값들을 각각 변수에 넣어준다.

 

 

아이디 비밀번호 각각 길이 설정해주고, 

적합하지 않을 경우 return false 를 통해 넘어가지 않도록 설정한다. 

 

 

 

적합하지 않을 경우 알림창 뜬다.

 

 

세션쿠키 메서드를 만들어준다. 

쿠키로 정할 이름 , 사용자가 입력한 ID, 세션만료일자로 설정한다.

 

new Date 를 통해 현재 날짜와 시간을 생성한다. 

현재 날짜에 만료일자를 더한값을 넣는다.

그리고 cookieValue 를 설정하는데 만약 만료일자가 null 이면 공백 그렇지 않을 경우 만료일자를 넣어준다.

 

 

아이디 저장 체크박스 누르고 로그인을 하고,

f12 키를 누르고 저장소 쿠키를 확인하면 다음과 같이 입력한 아이디와 날짜가 나온다. 

 

toGMTString은 GMT 형식에 맞춰서 각 나라 날짜에 맞춰서 시간이 나온다.(=지역화)

 

 

; 을 통해서 각각 나눠서 저장된다. 

 

 

; 를 붙이지 않을 경우 값에 모든 값이 붙여서 나온다. 

 

 

쿠키 삭제하기 서드도 만든다.

만료일자를 설정하고 하루 전으로 설정해서 어제로 돌린다.

 

 

삭제할 쿠키 이름을 넣으면 정상적으로 쿠키가 사라진다. 

 

 

함수를 통해 쿠키 이름(cookieName)에 해당하는 쿠키의 값을 가져온다.

쿠키는 문자열로 저장되어 있고, 각 쿠키는 이름과 값 사이에 = 기호를 사용하여 구분하고 있다. 

document.cookie는 현재 페이지의 모든 쿠키를 하나의 문자열로 가져오고,

문자열을 ;로 분리하여 배열에 저장한 뒤, 반복문을 통해 각 쿠키의 이름과 값을 추출하여 비교한다.

 

x 는 0부터 = 전까지를 나타내며 쿠키 이름이다. 

y 는 = + 1 로 = 이후부터 끝까지를 나타내며 쿠키값을 나타낸다. 

 

x.trim(): 쿠키 이름의 앞뒤 공백을 제거하여 정확한 비교를 수행한다.

x = x.replace(/^\s+|\s+$/g, ''); 도 마찬가지로 공백 제거 역할을 한다.  

둘 중 편한 것을 사용하면 된다. 

 

쿠키 이름(x)과 함수 인자로 받은 cookieName을 비교하여 일치하는 경우, 해당 쿠키의 값을 반환한다.

 

 

이제 getCookie를 통해 만약 Cookie 이름이 userID와 setCookie 가 있다면 그 값을 각 변수에 저장하고,

만약 setCookieY 값이 Y 일 경우 체크박스를 체크하고 ID칸에 저장한 쿠키로 가져온 값을 넣고,

PW 를 입력할 수 있도록 focus를 넣어준다.

 

그렇지 않을 경우 체크 박스를 해제시킨다.