그누테마7 그누보드 테마 제작 27 - 새글 페이지 개발 게시판이 끝났음에도 남은 페이지가 은근히 많이 있습니다. 새글, 1:1문의, FAQ, Q&A, 접속자, 투표... 오늘은 전체검색과 UI가 비슷한 새글을 작업할게요. 기본 테마의 화면은 이렇게 생겼습니다. /bbs/new.php /theme/mt703/skin/new/new.skin.php 위 2가지 파일을 봐야겠네요. 항상 그랬듯이 현재 제작 중 테마의 화면을 보겠습니다. 사실 좀 정렬이 되어보이는 이유는 그누의 스타일시트가 적용되기때문이죠. 주석 처리하는 순간... 일순간에 망가집니다. 검색영역은 전체검색 페이지와 동일해서 금방 끝났네요. 리스트 영역 개발 들어갑니다. 게시판에서 사용했던 리스트로 해야겠습니다. (모바일 화면일때 영역이 어그러지는 버그가 발견되어서 향후 수정 진행 예정이었는데...) .. 2020. 7. 18. 그누보드 테마 제작 26 - 전체 검색 페이지 개발 오늘은 전체 검색 페이지 작업을 진행합니다. Metronic Admin Template은 전체 검색 UI를 따로 있습니다. 전 검색어 입력란 하단에, 인기검색어나 최근 검색어... 먼일일지도 모르지만, 자동완성 검색어까지도 넣을 수 있다면 좋을 것 같네요. 방향을 정했으니, 이제 그누의 기본 테마를 살펴보겠습니다. 오늘은 위 화면을 만들어야 하는군요. 그 전에 그누보드 기본 테마의 상단에 있는 검색창... 그걸 먼저 처리를 하겠습니다. (검색이 되어야 전체 화면을 만들 수 있으니까요) 항상 하던 순서대로, 그누 기본 테마의 소스를 살펴봅니다. (/theme/basic/head.php 부분에 있겠죠?) 사이트 내 전체검색 인기 검색어 2020. 7. 16. 그누보드 테마 제작 25 - 관리자 선택 삭제/복사/이동 기능 개발 오늘은 게시판 관련 작업에서 남은 두 가지 작업 중 선택 삭제, 선택 복사, 선택 이동 페이지를 작업합니다. 기본 그누 테마의 화면과 현재 작업중인 테마의 화면을 비교하려고 하는데 현재 테마에서 선택 삭제/복사/이동 버튼이 전혀 동작을 안하고 있네요... 오늘은 금방 끝날 줄 알았는데, 처음부터 발목을 잡혔네요. 기존 코드는 button 태그에 type에 submit을 적용하여 클릭시 바로 form.submit()을 수행하도록 되어 있는데, 제작 중인 테마는 bootstrap의 dropdown을 이용하여 화면을 만들었더니 submit()을 타지 못하고 있네요. 뭐 스크립트 함수 하나 만들어서 강제로 script를 타게 하면 될거라고 생각됩니다. // === 그누 기본 테마의 코딩 // === 클릭하면 바.. 2020. 7. 14. 그누보드 테마 제작 16 - 포인트 내역 페이지 개발 오늘은 포인트 내역 팝업 화면을 개발합니다. 전 어떻게 깨져 보일지 확인해봅니다. 생각보다 많이 이상하게 보이지는 않네요. 수정해야 하는 파일은 /theme/mt703/skin/member/basic/point.skin.php 로군요. 팝업이고, 단순리 리스트만 보여주기에 이번에도 Modal 창으로 도전합니다. 내역이 많으면 세로로 길게 나올수도 있기에 스크롤이 가능한 modal 창을 Metronic Admin Template에서 찾아봅니다. 지난 번 아래의 버튼을 이용, 카피하여 사용했다가 카피된 소스에 문제가 있어 고생을 했었습니다. 그래서 이젠 소스를 열고, 검색하여 가져오고 있습니다. 소스는 어떻게 생겼는지 살펴봅니다. Create a scrollable modal body by adding .m.. 2020. 7. 1. 그누보드 테마 제작 15 - 회원정보 수정 페이지 개발 오늘은 회원정보 수정 페이지를 진행할 계획인데요. 웬지 이번 작업은 만만치 않을 것 같네요. 이유는 그누 기본 테마는 상단 메뉴와 우측사이트 영역이 존재하지만, 전 그걸 빼고 만들었었거든요. 회원정보수정 화면은 상단, 좌측 메뉴가 보여지는게 맞을 것 같다고 판단했기때문입니다. (지난 번 Modal창도 그렇고, 걍 그누의 기본 형식을 따르는게 제일 편할 듯 하네요.) (그럴듯하게 바꾸는건 나중에 하는게 시간이 절약될 것 같아요.) 개발중인 테마에서는 현재화면부터 확인해볼게요. 상단 메뉴와 좌측 메뉴 외에도 회원가입페이지이 좌측 메뉴도 없애버려야 하네요... 이미 만들어놓은거 뒤집을 순 없고, 어케든 개발해야겠죠? (우리에겐 IF문이 있으니까요 ^^) 우선 순서대로 "회원 비밀번호 확인" 페이지부터 개발해야.. 2020. 6. 30. 그누보드 테마 제작 14 - 회원정보 찾기 페이지 개발 2 오늘은 회원정보 찾기의 로직 부분을 개발했습니다. 지난 회 마지막에 Ajax로 변경개발해야 한다고 생각했었는데요. 다시 생각해보니 로직을 처리할 iframe을 만들고, 그 iframe을 타겟으로 전송하면 많이 안고쳐도 되겠더라구요. (사실은 Ajax로 바꾸는게 좋을 것 같긴 하나... 시간이 또 오래 걸릴 듯 하여... ㅠㅠ) 방향을 잡았으니 본격적인 개발을 시작합니다. Action URL을 다시 BBS의 password_lost2.php로 변경하고, target을 잡아줍니다. 위에서 정한 target명으로 iframe을 만듭니다. 그리고 창이 자동으로 닫혀야 하기에, Submit 버튼이 눌러지면, 창이 닫히는 코드를 추가합니다. 정상적으로 수행되는것이 확인되었습니다. ^^; 아... 이런... Moda.. 2020. 6. 29. 그누보드 테마 제작 13 - 회원정보 찾기 페이지 개발 1 오늘은 회원정보 찾기를 만들어보려 합니다. 회원 관련 페이지들도 깨알같이 많네요... 그래도 꾸준히 달려봅니다. 먼저 기본테마의 화면을 살펴봅니다. 음... 팝업으로 나타나는군요. 팝업이라... 레이어로 하는게 맞을 듯 한데,,, 아... bootstrap의 modal 창을 이용하는게 좋을 것 같습니다. 그럼으로 Metronic Admin Template의 Modal 창을 찾아봐야겠군요. 많은 샘플들을 제공합니다만, 전 Modaless가 아닌 것과 화면 정 중앙에 표시하는 두 가지를 섞을 예정입니다. 2시간 삽질을 했네요 ㅠㅠ Metronic Admin 템플릿의 코드가 오류일거라고는 상상도 못했습니다. 암튼 여차 저차 모달 화면을 준비했습니다. 이제, Bootstrap의 modal 모습으로 코드를 변경합.. 2020. 6. 27. 이전 1 다음
