원글(출처) : 그누보드 테마 제작 13 - 회원정보 찾기 페이지 개발 1

오늘은 회원정보 찾기를 만들어보려 합니다.
회원 관련 페이지들도 깨알같이 많네요...
그래도 꾸준히 달려봅니다.

먼저 기본테마의 화면을 살펴봅니다.

기본 테마의 회원정보찾기 화면 (팝업)

음... 팝업으로 나타나는군요.
팝업이라... 레이어로 하는게 맞을 듯 한데,,,
아...
bootstrap의 modal 창을 이용하는게 좋을 것 같습니다.

그럼으로
Metronic Admin Template의 Modal 창을 찾아봐야겠군요.
많은 샘플들을 제공합니다만,
전 Modaless가 아닌 것과 화면 정 중앙에 표시하는 두 가지를 섞을 예정입니다.

Metronic Admin에서 제공하는 많은 Modal 예제 중 기본 사이즈를 이용하기로 했다.

화면 정중앙에 위치하고 기본 크기의 모달 샘플

Modal 창 바깥을 클릭해도 자동으로 창이 닫히지 않는 Modal 샘플

2시간 삽질을 했네요 ㅠㅠ
Metronic Admin 템플릿의 코드가 오류일거라고는 상상도 못했습니다.

암튼 여차 저차 모달 화면을 준비했습니다.

모바일에서는 캡차코드에 오디어플레이어가 나타난다는걸 첨 보았다는...

이제,
Bootstrap의 modal 모습으로 코드를 변경합니다.

modal 화면으로 변경한 코드

완성된 모습

그누의 기본은 일반 팝업창을 띄우면 되었지만,
모달창으로 하다보니 그게 불가능하죠.
어쩔 수 없이 "회원정보찾기"가 필요한 화면마다
include를 하도록 수정해야 하겠습니다.

jquery 관련 에러가 발생하여 화면이 깨진 모습

이번에는 일부 자바스크립트가 로그인 화면에서
호출이 안되는 문제가 발생하여 삽질을 하고 있습니다.
add_javascripte 함수가 로그인 화면에서만 동작하지 않네요.

로그인 화면에서만 출력되지 않는 이유를 찾고 있다.

여기서 진짜 시간이 오래 걸리고 있네요.
아 뭘까요... 아... 미치겠구먼...

로그인 화면에서만 스크립트가 노출이 안되는 현상으로 삽질 중...

틀림없이 호출은 되고 있습니다.

로그를 찍어보면, 호출은 틀림없이 호출 하고 있다.

아... 드디어 원인을 찾았습니다.
역시 허무하네요. 이런 실수를 왜 자꾸 하는지...
중간에 캡차함수를 호출하는 부분에서 에러가 나고 있었네요.

화면이 깨지고, 중간에 에러가 나니 $html_process->run() 함수가 실행이 안되는게 당연하지... 에휴...

위 화면으로 알 수 있는 것은...
kcaptcha.lib.php를 정상적으로 include를 못하고 있다는 거네요.
다시 찾아 떠나봅니다... (이런거 AI가 못해주나...)
에러의 원인은 Modal 창으로 바꾸니,
로그인 화면에 캡차 호출 함수가 들어가게 된 것이고,
로그인화면에서는 캡차 라이브러리를 호출하지 않아 발생한 거였습니다. ㅠㅠ
로그인 화면에 include하면 모든게 해결되겠네요.

정상적으로 나타난 스크립트들...

정상적으로 로그인 화면이 보여지는 걸 드디어 확인했다! 감격의 눈물이...

자꾸 이사님이 술먹으러 나가자고 재촉하네요.
30분만 기달려달라고 했습니다. ㅠㅠ
(아놔 다이어트 중이구만...)

이제, 아이디와 비번 찾기 버튼을 누르면,
Modal 창이 뜨도록 코딩을 시작합니다.

버튼을 누르면, 회원정보 찾기 모달창이 뜨도록 스크립트 코딩 작업한 모습

아이고... 여기까지 오는게 왜 이리 힘들었던가!!! ㅠㅠ

정상적으로 회원정보 찾기 화면이 나타난 모습! 정말 감격입니다!!!

정상적으로 회원정보 찾기 화면이 나타난 모습! 정말 감격입니다!!!

오늘은 여기까지 마무리해야겠네요.
괜히 Modal창으로 만들려다가 일만 잔뜩 꼬인 느낌입니다. ㅎㅎ
회원정보 확인하는 로직 파일인
/bbs/password_lost2.php 파일도 그대로 사용할 수 없게 되었어요.

form의 submit에 의한 페이지 이동이 아닌,
ajax로 호출하여 결과를 json으로 받아오도록 변경해야 하는 상황이네요.
또, 제작중인 테마폴더안에 password_lost2.php 파일을 만들어야 하고요.

이 부분은 다음 회차에 진행해야 할 것 같네요. ㅠㅠ