원문(출처) : 그누보드 테마 제작 16 - 포인트 내역 페이지 개발

이번에는 포인트 내역 페이지를 개발하였습니다.

그누 기본 테마의 포인트 내역 팝업 화면

개발 중인 테마는 당연히 깨져보이겠죠? 얼마나 깨져있을런지...

개발 전 포인트 내역 페이지의 모습

생각보다 많이 이상하게 보이지는 않네요.
수정해야 하는 파일은 /theme/mt703/skin/member/basic/point.skin.php 로군요.
팝업이고, 단순리 리스트만 보여주기에 이번에도 Modal 창으로 도전합니다.

내역이 많으면 세로로 길게 나올수도 있기에
스크롤이 가능한 modal 창을 Metronic Admin Template에서 찾아봅니다.

Metronic Admin Template의 Scroll이 가능한 Modal창 예제

지난 번 아래의 버튼을 이용, 카피하여 사용했다가 카피된 소스에 문제가 있어 고생을 했었습니다. 그래서 이제는 직접 소스를 열고, 검색하여 가져오고 있습니다.

Metronic Admin Template는 소스를 바로 카피할 수 있는 기능을 제공한다. (그런데 잘못된 소스를 ㅠㅠ)

위 화면의 소스는 원문에서 보실 수 있습니다.

(냑에서 저의 글이 모두 저장이 안되는 이유가 소스를 첨부하기 때문이더라구요. 양이 어마어마...)

point.skin.php 파일에 필요한 내용을 복붙합니다.

point.skin.php 파일에 모달창을 띄울 수 있도록 코드를 복사한 결과.

이젠 실제 리스트를 모달창안에 복사하여 붙여넣습니다.

point.skin.php 파일의 modal body 영역에 포인트 내역을 넣은 화면.

현재까지의 point.skin.php 파일의 내용은 원글에서 보실 수 있습니다.

이제 화면을 Bootstrap답게 바꾸는 작업을 합니다.
Metronic Admin Template에서 괜찮은 화면을 하나 찾았네요.
이걸로 하면 예쁠 것 같습니다.

Metronic Admin Template에서 제공하는 List Widget 적용한 모습

위 화면의 소스는 원글에서 보실 수 있습니다.

이제,
그누의 소스를 제작중인 테마에 옮기는 작업을 진행합니다.
(UI를 바꾸자니 확실히 시간이 오래 걸리네요 ㅠㅠ)

변경된 포인트 내역의 Modal 창 (목록수를 5개로 하여 테스트 진행)

포인트 내역리스트는 Action이 없어서 
Modal 창으로 해도 아무 문제가 없을 줄 알았는데...
페이지 목록이 존재하고 있었네요. ㅠㅠ
하...
어쩔 수 없이 "더 보기" 버튼으로 변경 작업을 해야 하게 되었네요 ㅠㅠ
(역시 그냥 할걸... 앞으론 절대 안바꿉니다. ㅠㅠ)

먼저 php 파일을 수정하고, Ajax 호출할 스크립트를 만듭니다.
지금까지의 point.skin.php 소스는 원문에서 보실 수 있습니다.

다음으로, 데이터를 돌려주는 PHP 파일을 만듭니다.
더보기용으로 만든 point_more.php 파일의 소스는 원문에서 보실 수 있습니다.

이제 정상적으로 다음 페이지까지 불러오게 되었습니다.

더보기 버튼을 활용하여 완성된 포인트 내역 화면

이제, 
버튼을 숨김처리하고,
point.skin.php를 include하고,
숨겨둔 버튼을 클릭해주는 것으로 변경하면 끝나겠군요.

애써 만든 포인트 내역 모달 창을 띄우기 위한 코딩 작업

완성된 화면입니다.
아 뿌듯하군요~

완성된 포인트 내역 리스트 모달 창

생각해보니,
기본 테마의 틀대로 만드는게 제일 우선이고,
Modal이든, Ajax든 하고 싶을땐
별도의 skin을 만드는게 답인것 같네요.

괜히 고생했어... 괜히 ㅠㅠ

다음 작업은 스크랩을 같은 방식으로 빠르게 끝내고,
쪽지로 넘어갈지 아니면 게시판으로 넘어갈지
생각해봐야겠습니다. 

긴글 읽어주셔서 감사드립니다.

본문에서 생략된 소스나 일부 내용등은 하기 원글에서 모두 확인할 수 있습니다.

원문(출처) : 그누보드 테마 제작 16 - 포인트 내역 페이지 개발