Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원/8월

22.08.02 - [ WAS ] 부트스트랩 - 모달창활용해서 비밀번호 변경하기

giggs 2022. 8. 10. 10:03

 

-- Index --

 

1. 부트스트랩 연결 2. 모달창 적용하기 3. 비밀번호 수정 모달창으로 4. 비밀번호 수정 요청 처리
CDN방식으로 복-붙 모달코드 복-붙 모달 body 부분 수정 C-S-D 작업 진행

 

 

 

 


 

 

 

모달창 활용해서 비밀번호 변경 요청해보기 

부트스트랩 활용해서 모달창 세팅하기 

 

 

 

 

1. 부트스트랩 연결하기 - CDN 방식으로 연결

 

 

w3schools.com 사이트 접속

 


B5 선택

 


BS5 Get Started 에서 MaxCDN 복사

 


header.jsp 파일 <head>태그 안쪽에 붙여넣기

 


 

이제 부트스트랩 사용가능하다!

 

 

 

 

 


 

 

2. 모달창 적용해보기

 

 

이런 창이 모달 창


부트스트랩 사이트에서 Modal - Example 코드 복사


모달창 적용할 화면 - jsp파일에 붙여넣기


잘 적용되었나 확인하기

 

 

 

 


 

 

 

3. 비밀번호 변경 모달창으로 수정 작업해주기

 

 

 

3-1. 비밀번호 변경 버튼 눌렀을 때 모달창 나오게 해 주기 

  • 이 부분 때문에 모달창이 열리는 듯 - 비밀번호 변경 버튼에도 추가해주자

 

 

 


 

3-2. 모달 id랑 target 의미에 맞게 이름 변경해서 연결해주자.

 


 

3-3. <!-- Modal body --> 부분에 필요한 내용 작성하면 끝!

 

 

0. 회원 ID는 type='hidden'으로 데이터 전해주기 ( 화면에 표시 X)

1. 기존 비밀번호로 확인

2. 신규 비밀번호

3. 신규 비밀번호 확인 하기

4. 제출 버튼 ( 요청 보낼 url 입력 )

 

 

 

 

 

 

 


 

 

 

 

 

4. 비밀번호 변경 요청 처리하기

  • 요청 처리할 servlet(컨트롤러) 만들어서 Controller - Service - DAO 작업 진행! ( UPDATE )
  • 컨트롤러에서

 

 

4-1. 컨트롤러 작업 

 

 


 

 

4-2. 서비스 레이어 작업

 


 

 

4-2. DAO 레이어 작업

  • catch로 잡아서 다시 던지는 이유는?
  • 지금은 안 해도 오류 안 난다. - 최종 코드를 위한 구조 맞추기 -
  • 나중에 실무에서는 내가 만든 예외 타입과 방식으로 처리할 것이에요.