[테마제작기(25記)] 관리자 선택 삭제/복사/이동 기능 개발 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

[테마제작기(25記)] 관리자 선택 삭제/복사/이동 기능 개발 정보

기타 [테마제작기(25記)] 관리자 선택 삭제/복사/이동 기능 개발

본문

원문(출처) : 그누보드 테마 제작 25 - 관리자 선택 삭제/복사/이동 기능 개발

 

오늘은 게시판 관련 작업에서 
남은 두 가지 작업 중
선택 삭제, 선택 복사, 선택 이동 페이지를 작업합니다.

 

기본 그누 테마의 화면과 현재 작업중인 테마의 화면을 비교하려고 하는데
현재 테마에서 선택 삭제/복사/이동 버튼이 전혀 동작을 안하고 있네요...
오늘은 금방 끝날 줄 알았는데,
처음부터 발목을 잡혔네요.

 

기존 코드는 button 태그에 type에 submit을 적용하여
클릭시 바로 form.submit()을 수행하도록 되어 있는데,
제작 중인 테마는 bootstrap의 dropdown을 이용하여 화면을 만들었더니
submit()을 타지 못하고 있네요.
뭐 스크립트 함수 하나 만들어서
강제로 script를 타게 하면 될거라고 생각됩니다.


// === 그누 기본 테마의 코딩
// === 클릭하면 바로 form문의 submit을 수행하도록 코딩이 되어 있다.
<li>
    <button type="button" class="btn_more_opt is_list_btn btn_b01 btn" title="게시판 리스트 옵션"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">게시판 리스트 옵션</span></button>
    <?php if ($is_checkbox) { ?>    
    <ul class="more_opt is_list_btn">  
        <li><button type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value"><i class="fa fa-trash-o" aria-hidden="true"></i> 선택삭제</button></li>
        <li><button type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value"><i class="fa fa-files-o" aria-hidden="true"></i> 선택복사</button></li>
        <li><button type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value"><i class="fa fa-arrows" aria-hidden="true"></i> 선택이동</button></li>
    </ul>
    <?php } ?>
</li>
<?php }  ?>
// === 현재 제작중인 테마의 코딩
// === A tag로 되어 있어 바로 submit을 태울 수 없다.
<ul class="navi navi-hover py-1">
    <li class="navi-item">
        <a href="javascript:document.pressed=this.value;" class="navi-link">
            <span class="navi-icon">
                <i class="fa fa-trash-o"></i>
            </span>
            <span class="navi-text">선택 삭제</span>
        </a>
    </li>
    <li class="navi-item">
        <a href="javascript:document.pressed=this.value;" class="navi-link">
            <span class="navi-icon">
                <i class="fa fa-files-o"></i>
            </span>
            <span class="navi-text">선택 복사</span>
        </a>
    </li>
    <li class="navi-item">
        <a href="javascript:document.pressed=this.value;" class="navi-link">
            <span class="navi-icon">
                <i class="fa fa-arrows"></i>
            </span>
            <span class="navi-text">선택 이동</span>
        </a>
    </li>
</ul>

 

함수를 만들기전에 기존 테마의 분석을 해봅니다.
분석이라고 해봤자 별거 있겠습니까? 걍 주석 막 찍어보는거죠~ ㅎ


<button type="submit" name="btn_submit" value="선택복사"
      onclick="document.pressed=this.value; alert(this.value+' / '+ document.pressed);">
      <i class="fa fa-files-o" aria-hidden="true"></i> 선택복사</button>

function fboardlist_submit(f) {             alert("START fboardlist_submit()!");
    var chk_count = 0;
    for (var i=0; i<f.length; i++) {
        if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
            chk_count++;
    }                                       alert("chk_count : "+ chk_count);
    if (!chk_count) {
        alert(document.pressed + "할 게시물을 하나 이상 선택하세요.");
        return false;
    }
                                            alert("document.pressed : "+ document.pressed);
    if(document.pressed == "선택복사") {
        select_copy("copy");
        return;
    }
    if(document.pressed == "선택이동") {
        select_copy("move");
        return;
    }
    if(document.pressed == "선택삭제") {
        if (!confirm("선택한 게시물을 정말 삭제하시겠습니까?\n\n한번 삭제한 자료는 복구할 수 없습니다\n\n답변글이 있는 게시글을 선택하신 경우\n답변글도 선택하셔야 게시글이 삭제됩니다."))
            return false;
        f.removeAttribute("target");
        f.action = g5_bbs_url+"/board_list_update.php";
    }
    return true;
}

2949618301_1594783263.4364.png

 

선택 복사를 누르게 되면, 
1. document.pressd 변수에 "선택복사"라는 문자열을 할당
2. form의 submit()을 호출하게 됨으로 form문에 정의된 onsubmit을 먼저 호출하게 됨.
3. fboardlist_submit(this)에서 document.pressd 변수의 값을 체크함.
4. document.pressd 변수에 "선택복사"가 들어 있으면 선택복사를 위한 팝업을 띄움.

 

분석은 끝났고, 자동 submit을 대신해서 위 동작을 수행해줄 함수를 개발해야 겠네요.
제작 중인 테마에는 button 태그가 아닌 a 태그가 적용이 되어 있어
자동으로 onsubmit을 호출할 수 없습니다.
그래서 대신 수행해줄 함수를 만들 것입니다.

 

길게 적었지만
실제 코딩 내용은 아주 심플합니다.

 

앗... 이게 뭐래... 
"올바른 방법으로 이용해 주세요"라는 얼럿이...

쩝... 예상대로 되지 않았네요...

2949618301_1594783308.7464.png

 

음... 뭘까요???
쩝.. 또 오타네요... press가 아니라 pressd였네요. ㅠㅠ

이제 정상적으로 팝업이 나타납니다.

2949618301_1594783341.4693.png

 

아.. 그래도...
선택복사와 선택이동은 팝업이 잘 뜨는데
선택삭제시 같은 에러가 나타납니다.
/bbs/board_list_update.php 를 보면
btn_submit 을 $_POST 변수로 받아오게 되어있습니다.
아.. 오늘 처음 알았네요.
button 태그도 input이나 select처럼 값을 넘긴다는것을요!
그럼... Hidden Input에 btn_submit 을 하나 만들고, 거기에 값을 넘겨주어야 하겠습니다.

 

이제 삭제가 정상적으로 수행됨을 확인하였습니다.
아래는 위 문제를 해결하기 위해 작성한 코드입니다.

소스는 원문에서 확인하실 수 있습니다.

에휴... 고생했다. 고생했어!

 

또 고민이네요...
모달로 할 것인가? 걍 팝업으로 할 것인가?
아무리 생각해도 전 모달 팝업이 맞는 것 같네요.
기존에 작업한 스크랩이나, 쪽지도 전부 모달로 바꿔야 할 것 같네요.
(언제 하게 될런지...)

 

Modal 창으로 진행하겠습니다.
/bbs/move.php를 열어 테마의 스킨 파일을 확인합니다.
오옷... 이 녀석은 관리자만 쓰는 화면이라 그런지 스킨 파일 자체가 존재하지 않는군요.
그렇죠. 관리자... 사용자가 쓰는 파일이 아닌... 
굳이 이쁘게 만드는건 개발자의 욕심이겠군요.
관련 CSS를 이전에 만들어놓은 gnuboard.css로 옮겨 
화면이 깨지지 않도록 조치하는 것으로 마무리해야겠습니다.

 

우선 현재화면과 이전화면을 비교해볼게요.

2949618301_1594783466.1881.png

기본 테마와 제작중인 테마의 선택 복사/이동 팝업 화면 비교

 

그러기 위해서는 기본 테마로 설정을 바꾸어놓고, 

추천
0

댓글 5개

만약 광고글로 최종 인정이 되면!!! 더 이상 안올려도 되니까 좋구요 ^^ (나와의 약속을 어겨도 되는 아주 좋은 핑계거리 ㅋㅋ)

여기서 더 궁금한건~
"광고글로 판단되어 시스템에서 자동으로 블라인드"
광고글로 판단하는 기준은 무엇일까? 에 대한 호기심입니다.

깊이 생각은 안한거지만...
1. 특정 단어 또는 특정 링크의 반복? <-- 아마 이게 제일 유력하지 않을까...
2. 특정 상품을 홍보하는 내용? <-- 이걸 시스템이 판단할 수 있을까요?
3. 특정 링크가 상품이 판매되는 사이트(쇼핑몰이라던가... 상업적인 블로그라던가...) <-- 근데 이건 제가 아니라서...
4. 위 모든 기준은 현 게시글은 당연하고 이전 게시글까지 포함할까?

사이트를 운영하면서(전 운영 경험이 없어서...)
광고성 글들을 자동으로 걸러내야 하는 로직을 만들 일이 생긴다면
어떻게 하지 라는 생각이 들어서 끄적여보았어요 ^^
(경험이 있으신 분들이 팁 좀 주시면 좋겠어요 ㅎㅎ)

암튼 결과가 궁금합니다.
삭제든... 업로드 금지든... 회원 강제 탈퇴만 아니면 되요 (ㄷㄷㄷ)
너무 이상하고 궁금해서 만수킴님 블로그를 다녀왔습니다.
어떠한 문구에서도 문제될만한 내용이 없었던 터라 아마도 SIR 사이트에서의 오류로 인한 피해가 아닌가 싶습니다.
리자님께 건의해서 하루빨리 구제받으시기 바랍니다.
전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT