그누보드테마33 그누보드 테마 제작 22 - 게시글 리스트 페이지 개발 게시판 관련 마지막 작업이네요. 바로 게시글 리스트 작업입니다. 그누의 기본 테마를 살펴보고, 이전에 준비해둔 제작할 테마의 모양을 보겠습니다. 지금까지 게시글에 적용하는 UI는 사실 Metronic Admin에서 제공하는 Mail UI 였습니다. 여러가지로 비슷해보여서 작업을 하고 있습니다만, 고쳐야 할 부분이 너무 많아서 시간이 많이 걸리고 있네요. (사실 그만 할까 라는 생각도 굴뚝같습니다. 그러나 나와의 약속이니 어떻게든 마무리하려 합니다.) Metronic Admin UI를 개발 중인 테마 화면에 붙여봅니다. 오늘은 순서를 정해보고 하겠습니다. 1. 카테고리 영역 2. 게시글 상단 영역 3. 게시글 리스트 영역 4. 페이징 영역 5. 검색 영역 이 정도 업무로 나뉘는것으로 보여집니다. 이제 달려.. 2020. 7. 9. 그누보드 테마 제작 21 - 게시글 보기 및 댓글 페이지 개발 지난 포스팅에서 정말이지 우여곡절 끝에 게시글 작성 및 수정 페이지를 완료했었습니다. 그 느낌이 부여잡고 보기 페이지를 완료시키려 합니다. 기본 그누 테마의 보기 페이지를 확인하고, 현재 개발 중인 테마의 깨지고 있는 모습을 확인합니다. 어째 두개 다 깨져보이는 이유는 뭘까요? 흠... 어떻게 해야 할지 좀 감이 안잡히네요. 이건 뭐 둘 다 깨져보이니... 정확히 말하면 제가 제일 못하는 화면 구성을 어떻게 해야 할지가 고민됩니다. 하는 수 없이 Metronic Admin 템플릿을 뒤져봐야겠죠... 오... 템플릿 중 메일 폼이 있는데, 이게 그나마 제일 비슷한 것 같네요. 맘에 듭니다. https://keenthemes.com/metronic/preview/demo1/custom/apps/inbox.h.. 2020. 7. 8. 그누보드 테마 제작 20 - 게시글 작성 및 수정 페이지 개발 오늘은 드디어 대망의 게시판 작업이 진행됩니다. 그 중에서도 오늘은 게시물 작성(쓰기) 및 수정 페이지를 먼저 만들려고 합니다. 게시판도 회원가입만큼 많은 옵션을 가지고 있습니다. 회원가입은 모두 사용으로 설정하고 작업하니 큰 문제가 없었는데요. 게시판은 사용함과 안함의 차이가 있는 것들이 일부 있을 것으로 보여집니다. (예: 위지윅에디터 사용 여부 등) 이런 이유로 일단은 모두 사용으로 정의해놓은 상태에서 작업을 진행하고, 하나씩 풀어가면서 확인 및 디버깅 작업을 하려고 합니다. 게시판 설정을 위하여 어드민 사이트로 이동합니다. 먼저 스킨을 테마의 basic과 테마의 gallery로 변경합니다. 공지사항을 먼저 작업을 할 계획입니다. 공지사항의 쓰기 페이지가 완료되면, 자유게시판, 갤러리, QA를 순서.. 2020. 7. 7. 그누보드 테마 제작 19 - 게시판 그룹 페이지 개발 드디어 게시판 작업에 진입하였네요. 짝짝짝~ (자축의 박수~) 게시판, 그 중에서도 오늘은 게시판 그룹 페이지를 만들어봅니다. 먼저 그누 기본 테마 화면을 살펴보고, 현재 제작중인 테마의 모습을 살펴볼게요. 아주 심플하고 간결한 UI네요~ 그리고 현재 작업 전이라 이상한 모습의 저의 게시판 그룹 페이지! 저 망가진 화면을 예쁜 화면으로 바꾸는게 오늘의 일인거죠~ 웹에서 호출되는 페이지인 "/bbs/group.php" 분석부터 들어가봅니다. 제작중인 테마 페이지의 group.php를 다시 살펴보러 갑니다. 페이지의 소스는 아주 심플합니다. 그냥 그룹에 속한 게시판을 모두 검색하여, latest 함수를 호출하여 화면에 출력하는 구조입니다. 메인 페이지 작업과 거의 유사한 구조에요. 즉 한 번 해본 일이라는거.. 2020. 7. 6. 그누보드 테마 제작 18 - 쪽지 내역 및 전송 기능 개발 오늘은 쪽지 관련 기능을 개발합니다. 받은쪽지, 보낸쪽지, 쪽지쓰기의 총 3페이지로 되어 있군요. 제가 만들고 있는 테마에서는 어떻게 보일런지 궁금하네요. 관련 파일은, memo.php와 memo_form.php 그리고 memo_view.php 네요. 당연히 bbs 폴더 안에 있는 것들일거고... 제가 작업해야 할 파일은 /theme/제작중인테마/skin/member/basic 폴더에 있는 memo.skin.php와 memo_form.skin.php, memo_view.skin.php가 되겠네요. (그동안 작업 좀 했다고, 술술 나오네요 ㅎㅎ) Metronic Admin Templat에서 어떤 화면을 이용해야 할지 살펴볼게 꽤 있네요. 테이블로 하면 편할 것 같긴 한데, 지양해야 하는 것 같기도 하고.... 2020. 7. 3. 그누보드 테마 제작 17 - 스크랩 내역 페이지 개발 오늘은 스크랩 내역 페이지를 개발하려고 합니다. 그누기본 테마와 현재 개발 전 제작 중인 테마의 모습을 한 번 확인하고 진행합니다. Modal창으로 할까 역시 생각했지만, 지난 번 마음 먹은대로 당장은 기본 모양 그대로 만들고 나중에 별도의 스킨을 만들도록 하겠습니다. 소스도 심플한 편이네요. 근데 삭제 스크립트가 다른곳에 있나보군요... 지금까지 하면서 보면 대부분 내부에 있던데 말이죠. 창닫기 // ========================================================== // del 함수의 위치 및 내용 // 파일 위치 : common.js 133라인. // ========================================================== // .. 2020. 7. 2. 그누보드 테마 제작 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. 그누보드 테마 제작 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. 그누보드 테마 제작 12 - 소셜 로그인 및 회원가입 페이지 개발 오늘은 로그인과 회원가입 화면에 소셜 로그인이 빠져 있어 해당 부분을 메우는 작업을 진행하려 합니다. 로그인 스킨은 /theme/basic/skin/member/login.skin.php 네요. 이 안에서... 아래놈을 쏙 복사하여... 새로운 테마의 login.skin.php(/theme/basic/skin/member/login.skin.php)에 쏙~~ Sign in with Google 너무 가로가 길어 예쁘지 않네요. 두 줄로 나누어주는게 이쁠 것 같아요... 위에서 include 했던, /theme/basic/skin/member/social_login.skin.php 을 다시 수정하러 갑니다. Sign in with Google get_social_skin_path()의 경로를 알아내야 sk.. 2020. 6. 27. 그누보드 테마 제작 11 - 메뉴 기능 개발 2 지난 번 메뉴 리스트를 완료 못하고 멈췄었네요. ㅠㅠ 바로 이 문제 들!!! 1. 공지사항 페이지로 이동하면, 대메뉴가 열리고, 해당 메뉴가 열렸다는 표시가 있어야 하는데 안나와요. (이건 그누보드 기본 테마가 그런거라서... 에고... 어카지...) 2. 적용중인 템플릿은 첫번째 대메뉴는 링크가 안걸리네요. ㅠㅠ 링크가 걸리면 하위 메뉴가 안보여지는 문제가 발생했어요. (에고... 걍 끝나는게 없네요...) 먼저 첫번째 문제 해결해보자구요. 1. 공지사항 페이지로 이동하면, 대메뉴가 열리고, 해당 메뉴가 열렸다는 표시가 있어야 하는데 안나와요. (이건 그누보드 기본 테마가 그런거라서... 에고... 어카지...) 일단 javascript로 해결해볼까 하다가... 실패했네요. 역시 css와 js가 약한 .. 2020. 6. 27. 그누보드 테마 제작 10 - 메뉴 기능 개발 1 메뉴를 테마 템플릿에 맞게 수정해보았어요. (전에도 몇번 메뉴 쪽을 보았지만 상당히 복잡하다는 기억을 가지고 있어서 두려운 마음으로 작업을 시작합니다.) 먼저 메뉴는 어드민에서 정해줘야 하니까... (그런걸로 기억하니까...) 이제 작업 준비는 끝났고~ 본격적인 작업으로 들어가봅니다. 메뉴를 뿌려주는 소스는 어느 놈일지 먼저 검색... 전체 소스에서 "메인메뉴"를 검색해보니, head.php에 메뉴 소스가 있네요. 역시 복잡스럽... 여기서 궁금한게 동일한 foreach를 두 번 돌린다는 거에요. 이유가 뭔지 몹시 궁금합니다. (고수님들 알려주세요~~) 그리고 $menu_datas 변수는 어떤 구조인지 출력도 해보았습니다. 템플릿의 메뉴 구조는 SVG icon 때문인지 엄청 복잡하네요. ㅠㅠ 암튼 여차 .. 2020. 6. 27. 이전 1 2 3 다음
