본문 바로가기
재밌는 IT 개발/그누보드 테마 제작기(記)

그누보드 테마 제작 20 - 게시글 작성 및 수정 페이지 개발

by 만수킴 2020. 7. 7.

오늘은 드디어 대망의 게시판 작업이 진행됩니다.
그 중에서도 오늘은 게시물 작성(쓰기) 및 수정 페이지를 먼저 만들려고 합니다.

게시판도 회원가입만큼 많은 옵션을 가지고 있습니다.
회원가입은 모두 사용으로 설정하고 작업하니 큰 문제가 없었는데요.
게시판은 사용함과 안함의 차이가 있는 것들이 일부 있을 것으로 보여집니다.
(예: 위지윅에디터 사용 여부 등)
이런 이유로 일단은 모두 사용으로 정의해놓은 상태에서 작업을 진행하고,
하나씩 풀어가면서 확인 및 디버깅 작업을 하려고 합니다.

게시판 설정을 위하여 어드민 사이트로 이동합니다.
먼저 스킨을 테마의 basic과 테마의 gallery로 변경합니다.

어드민의 게시판 관리자에서 스킨을 테마용으로 변경한다.

공지사항을 먼저 작업을 할 계획입니다.
공지사항의 쓰기 페이지가 완료되면,
자유게시판, 갤러리, QA를 순서대로 확인 작업을 거치겠습니다.
공지사항의 선택 사항을 살펴봅니다.

설정해야 하는 항목들을 나열해보겠습니다.
정말 많네요. 아래 이미지에서 빨간 네모 친 부분은
완료 후 해제하여 다시 한 번 확인을 해야 하는 부분입니다.
또, DHTML 에디터의 경우 종류가 2가지 있으니 그것도 확인해야 합니다.
아 하나 더... 처음에는 Guest(비로그인 상태)로 테스트를 하셔야
Guest 글쓰기 관련 영역이 보여집니다.
그리고 나서 관리자로 로그인하셔서 한 번 더 해야 해요.
안그러면 공지여부 체크가 나타나지 않습니다.

게시판 글 작성 테마 제작을 위해 설정해야 하는 항목 정리

 

이제 제가 본격적으로 그누의 기본화면과 금일고쳐야 하는 화면을 살펴보겠습니다.

그누 기본 테마의 게시글 작성 페이지의 모습

정말 어지럽군요.... 흠... 달리자! 두드리면 열릴것이니!!!

개발 전 테마의 게시글 작성 페이지의 모습

 

Metronic Admin의 어느 템플릿을 이용할지도 결정해봅니다.
아래에서 "2 Columns Horizontal Form Layout"을 이용해야겠어요.
필요에 따라 다른 것들도 섞을 계획입니다.
https://keenthemes.com/metronic/preview/demo1/crud/forms/layouts/multi-column-forms.html

 

Metronic | Multi Column Forms

My Profile Account settings and more update

keenthemes.com

Metronic Admin에서 제공하는 2 Columns Horizontal Form Layout 샘플

위 이미지들의 URL인 /bbs/write.php 부터 살펴봐야겠네요.
우와... 너무 복잡하네요. 일단 패스. 
아... 우선 앞으로 $w 변수가 많이 나올텐데요.
정리해두고 가는게 좋을 것 같아요.
(앞으로 계속 나오게 될 것이고, 그누보드를 사용하려면 필수더라구요.)
게시판에서의 $w 변수의 값과 의미 정리
$w == "" : 새글 신규 작성
$w == "u" : 글 수정 
$w == "r" : 답글 작성 
$w == "c" : 코멘트 신규 작성
$w == "cu" : 코멘트 수정

 

뭐. 테마 작업이니까... 스킨이 더 중요합니다.
/theme/mt703/skin/board/basic/write.skin.php 를 열어서 보시죠.
(와 이것도 만만치 않게 복잡하네요~)

먼저 Metronic Admin의 빈 페이지를 만들어주고 시작하겠습니다.
(빈 페이지도 제공해주더라구요)
https://keenthemes.com/metronic/preview/demo1/layout/general/empty-page.html

 

Metronic | Empty Page

My Profile Account settings and more update

keenthemes.com

Metronic Admin에서 제공하는 빈 페이지의 코딩 모습
Metronic Admin의 빈 페이지를 제작 중인 테마에 적용한 모습

Metronic Admin 템플릿은 메인 영역 사이에 빈 공간이 있습니다만,
전 없애버렸습니다. ("Page content goes here"의 위치가 다르죠?)
향후 만들려는 사이트가 가로폭이 꽤나 중요하거든요~

"2 Columns Horizontal Form Layout"의 HTML 소스입니다.
이걸 메인 영역에 훅 넣어버리고 시작합니다.

<!--begin::Card-->
<div class="card card-custom gutter-b example example-compact">
    <div class="card-header">    <!-- 헤더는 필요 없으니 삭제할거구요 -->
        <h3 class="card-title">2 Columns Horizontal Form Layout</h3>
        <div class="card-toolbar">
            <div class="example-tools justify-content-center">
                <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                <span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
            </div>
        </div>
    </div>
    <!--begin::Form-->
    <form class="form">
        <div class="card-body">  <!-- 주로 작업은 여기서 이루어지겠네요. --> 
            <div class="form-group row">
                <label class="col-lg-2 col-form-label text-right">Full Name:</label>
                <div class="col-lg-3">
                    <input type="email" class="form-control" placeholder="Enter full name" />
                    <span class="form-text text-muted">Please enter your full name</span>
                </div>
                <label class="col-lg-2 col-form-label text-right">Contact Number:</label>
                <div class="col-lg-3">
                    <input type="email" class="form-control" placeholder="Enter contact number" />
                    <span class="form-text text-muted">Please enter your contact number</span>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-2 col-form-label text-right">Address:</label>
                <div class="col-lg-3">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your address" />
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-map-marker"></i>
                            </span>
                        </div>
                    </div>
                    <span class="form-text text-muted">Please enter your address</span>
                </div>
                <label class="col-lg-2 col-form-label text-right">Postcode:</label>
                <div class="col-lg-3">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your postcode" />
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-bookmark-o"></i>
                            </span>
                        </div>
                    </div>
                    <span class="form-text text-muted">Please enter your postcode</span>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-2 col-form-label text-right">Group:</label>
                <div class="col-lg-3">
                    <div class="radio-inline">
                        <label class="radio radio-solid">
                        <input type="radio" name="example_2" checked="checked" value="2" />Sales Person
                        <span></span></label>
                        <label class="radio radio-solid">
                        <input type="radio" name="example_2" value="2" />Customer
                        <span></span></label>
                    </div>
                    <span class="form-text text-muted">Please select user group</span>
                </div>
            </div>
            <!-- begin: Example Code-->
            <div class="example-code mt-10">
                <ul class="example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#example_code_html_2">HTML</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="example_code_html_2" role="tabpanel">
                        <div class="example-highlight">
                        </div>
                    </div>
                </div>
            </div>
            <!-- end: Example Code-->
        </div>
        <div class="card-footer">  <!-- footer안의 버튼은 다른걸로 대체할거에요 -->
            <div class="row">
                <div class="col-lg-2"></div>
                <div class="col-lg-10">
                    <button type="reset" class="btn btn-success mr-2">Submit</button>
                    <button type="reset" class="btn btn-secondary">Cancel</button>
                </div>
            </div>
        </div>
    </form>
    <!--end::Form-->
</div>
<!--end::Card-->

역시 전... 화면 만드는게 너무 싫어요 ㅠㅠ
(솔찮게 시간이 걸렸습니다.)

위지윅에디터를 제외하고 Metronic에 맞게 수정한 화면

화면 작업 끝났으니 진짜 작업 진행합니다.
"임시 저장된 글"의 UI를 바꾸고 싶어 시도하다가, 고생중이네요.

bootstrap의 data-toggle을 이용하여 저장 글을 불러오고자 함.

"임시 저장된 글" 버튼을 누르면, ajax로 임시저장된 글을 불러오게 되더군요.
내용은 /js/autosave.js의 51라인부터 있습니다.
그러나 이 파일을 고치면 다른 테마에 영향을 주게 됨으로
제작중인 테마 폴더 안에 같은 파일을 만들고, 불러오게 할 것입니다.

autosave.js 파일을 제작중인 파일안에 새로 만들었다.

 

음... 괜히 했어요... 여차 저차... 삽질을 해서 겨우 만들긴 했는데.
우측으로 밀려버렸는데, 이게 어케 안되네요.
(여기서도 한참 삽질하고 있습니다.)

우측으로 넘어가 버려 내용을 볼 수 없는 상황이 되었다.

 

여차 저차 임시 저장글을 완료했네요.
(역시 하면 됩니다. ^^)
data-toggle 영역에 강제로 min-width를 주었더니 해결되었어요~

완료된 임시 저장된 글 로직과 화면

 

화면만 되어을 뿐,
삭제 버튼이나 내용 불러오는 기능은 여전히 안됩니다.
(걍 그누테마 기본 쓸걸 그랬어요 ㅠㅠ 왜 항상 같은 후회를...)

아놔 저장글은 잘 불러와지는데,
그 담부턴 "임시 저장된 글"이 클릭이 안되는 버그가...
$("#autosave_pop").hide();
이 놈 때문이었네요. 주석처리!!!

임시 저장글 삭제는 쉽게 될까 했더니, 뭐 삭제는 됩니다. 
그런데 삭제 후에 화면이 회색으로 변해버리네요.
alert을 찍어봐도 그냥 함수 종료하는 시점에 회색이 되어버립니다.
하.. 이건 또 뭘까요? ㅠㅠ
$div.remove();  
이걸 주석 처리하니 정상적으로 수행됩니다.
삭제한 div 영역을 지우는 부분인데, 
주석처리를 해도 걍 지워집니다. (뭘까요?)
암튼 잘 되니까 그냥 넘어갑니다. ㅎㅎㅎ

에휴.. 저장글 불러오기 및 삭제까지 완료~~~ 쉬운일 한개도 없어~~

 

변경한 주요 소스는 아래와 같습니다.

/* ============= 임시저장글 HTML 코드 ============= */
<div class="form-group row">
    <div class="col-lg-12">
        <div class="input-group">
            <input type="text" name="wr_subject" value="<?php echo $subject ?>" id="wr_subject" required class="form-control" size="50" maxlength="255" aria-label="Text input with dropdown button" placeholder="제목을 입력하세요.">
            <?php if ($is_member) { // 임시 저장된 글 기능 ?>
            <script src="<?php echo G5_THEME_ASSETS_URL; ?>/js/pages/gnuboard/autosave.js"></script>
            <?php if($editor_content_js) echo $editor_content_js; ?>
            <div class="input-group-append">
                <button type="button" id="btn_autosave" class="btn btn-secondary dropdown-toggle bg-dark text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    임시 저장된 글 (<span id="autosave_count" class="text-blue"><?php echo $autosave_count; ?>) &nbsp;
                </button>
                <div id="autosave_pop" class="dropdown-menu text-right" style="min-width:480px;">
                </div>
            </div>
            <?php } ?>
        </div>
    </div>
</div>

/* ============= autosave.js ============= */
// 임시 저장하는 시간을 초단위로 설정한다.
var AUTOSAVE_INTERVAL = 60; // 초

// 글의 제목과 내용을 바뀐 부분이 있는지 비교하기 위하여 저장해 놓는 변수
var save_wr_subject = null;
var save_wr_content = null;

function autosave() {
    $("form#fwrite").each(function() {
        if(g5_editor != "") {
            if (g5_editor.indexOf("ckeditor4") != -1 && typeof(CKEDITOR.instances.wr_content)!="undefined") {
                this.wr_content.value = CKEDITOR.instances.wr_content.getData();
            } else if (g5_editor.indexOf("cheditor5") != -1 && typeof(ed_wr_content)!="undefined") {
                this.wr_content.value = ed_wr_content.outputBodyHTML();
            } else {
                if(typeof get_editor_wr_content == "function") {
                    this.wr_content.value = get_editor_wr_content();
                }
            }
        }

        // 변수에 저장해 놓은 값과 다를 경우에만 임시 저장함
        if (save_wr_subject != this.wr_subject.value || save_wr_content != this.wr_content.value) {
            $.ajax({
                url: g5_bbs_url+"/ajax.autosave.php",
                data: {
                    "uid" : this.uid.value,
                    "subject": this.wr_subject.value,
                    "content": this.wr_content.value
                },
                type: "POST",
                success: function(data){
                    if (data) {
                        $("#autosave_count").html(data);
                    }
                }
            });
            save_wr_subject = this.wr_subject.value;
            save_wr_content = this.wr_content.value;
        }
    });
}

$(function(){

    if (g5_is_member) {
        setInterval(autosave, AUTOSAVE_INTERVAL * 1000);
    }

    // 임시저장된 글목록을 가져옴
    $("#btn_autosave").click(function(){
        if ($("#autosave_pop").is(":hidden")) {
            $.get(g5_bbs_url+"/ajax.autosavelist.php", function(data){
                //alert(data);
                //console.log( "Data: " + data);
                $("#autosave_pop").empty();
                if ($(data).find("list").find("item").length > 0) {
                    $(data).find("list").find("item").each(function(i) {    console.log("i : "+ i);
                        var id = $(this).find("id").text();     console.log("id : "+ id);
                        var uid = $(this).find("uid").text();   console.log("uid : "+ uid);
                        var subject = $(this).find("subject").text();
                        var datetime = $(this).find("datetime").text();
                        var tmp = '<div class="dropdown-item">' +
                                        '<a href="#none" class="text-dark font-weight-bold text-hover-success mb-1 font-size-lg pt-2 mr-5 autosave_load">'+ subject +'</a>' +
                                        '<span class="text-muted font-size-sm">'+ datetime +' <button type="button" class="btn btn-secondary btn-sm ml-2 px-2 py-2 autosave_del"><i class="la la-trash icon-lg"></i></button></span>' +
                                    '</div>' +
                                    '<div role="separator" class="dropdown-divider"></div>';
                        $("#autosave_pop")
                            //.append('<li><a href="#none" class="autosave_load">'+subject+'</a><span>'+datetime+' <button type="button" class="autosave_del">삭제</button></span></li>')
                            .append(tmp)
                            .find("div:eq("+(i*2)+")")
                            .data({ as_id: id, uid: uid });
                    });
                }
            }, "xml");
            //$("#autosave_pop").show();
        } else {
            //$("#autosave_pop").hide();
        }
    });

    // 임시저장된 글 제목과 내용을 가져와서 제목과 내용 입력박스에 노출해 줌
    $(document).on( "click", ".autosave_load", function(){
        var $div = $(this).parents("div");  console.log("div : "+ $div.html());
        var as_id = $div.data("as_id");     console.log("as_id : "+ as_id);
        var as_uid = $div.data("uid");      console.log("as_uid : "+ as_uid);
        $("#fwrite input[name='uid']").val(as_uid);
        $.get(g5_bbs_url+"/ajax.autosaveload.php", {"as_id":as_id}, function(data){
            var subject = $(data).find("item").find("subject").text();
            var content = $(data).find("item").find("content").text();
            $("#wr_subject").val(subject);
            if(g5_editor != "") {
                if (g5_editor.indexOf("ckeditor4") != -1 && typeof(CKEDITOR.instances.wr_content)!="undefined") {
                    CKEDITOR.instances.wr_content.setData(content);
                } else if (g5_editor.indexOf("cheditor5") != -1 && typeof(ed_wr_content)!="undefined") {
                    ed_wr_content.putContents(content);
                } else {
                    if(typeof put_editor_wr_content == "function") {
                        put_editor_wr_content(content);
                    }
                }
            } else {
                $("#fwrite #wr_content").val(content);
            }
        }, "xml");
        //$("#autosave_pop").hide();
    });

    $(document).on( "click", ".autosave_del", function(){
        var $div = $(this).parents("div");  //console.log($div.html()); return false;
        var as_id = $div.data("as_id");
        $.get(g5_bbs_url+"/ajax.autosavedel.php", {"as_id":as_id}, function(data){ alert(1);
            if (data == -1) {
                alert("임시 저장된글을 삭제중에 오류가 발생하였습니다.");
            } else { alert(2);
                $("#autosave_count").html(data); alert(3);
                //$div.remove(); alert(4);
            } alert(5);
        });
    });

    //$(".autosave_close").click(function(){ $("#autosave_pop").hide(); });
});

 

이제 웹에디터를 손봐야 하네요.
아래 네모 부분만 손보면 될 듯 하네요.

위지윅 에디터 영역에서 수정해야 할 부분

 

우선 "웹 에디터 시작"과 "웹 에디터 끝"은 class이름이 "sound_only"입니다.
알아본 것은 아니지만, 장애인차별법에 대응하여 넣는 코드가 아닌가 합니다.
(시각 장애인이 사이트에 접속하였을때, TTS로 읽어들이는 코드일거로 생각됩니다.)
그 동안은 귀찮아서 그냥 지웠는데,
아무래도 해당 CSS를 새로 만드는 테마에 추가하는게 맞을 것 같아
그 잡업을 진행합니다.
그럼 당연히 안보여지겠죠~

gnuboad.css를 만들어서 sound_only 클래스를 일괄 처리함.
head.sub.php에 새로 만든 CSS를 추가함.

 

이제 "단축키 일람" 버튼을 수정해봅니다.
"단축키 일람" 버튼은 에디터에서 호출해주는 함수네요.
이건 뭐 테마 폴더로 옮겨오는건 무리이겠죠.
어쩔 수 없이 기존 클래스를 가져와서 넣어주어야 하겠습니다.
위에서 만든 gnuboard.css를 활용하면 쉽게 해결될 것 같네요.

그렇다면 해당 CSS의 정의가 어디에 있는지 찾아보니,
테마 디렉토리의 style.css와 default.css에 나뉘어져 있습니다.
아래는 gnuboard.css에 추가한 내용입니다.

.msg_sound_only, .sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}

/* 게시글 작성의 단축키 일람 버튼 및 숨은 레이어를 위하여 옮김. by tank. at 200630. */
.cke_sc {}
button.btn_cke_sc {}
.cke_sc_def {}
.cke_sc_def dl {}
.cke_sc_def dl:after {}
.cke_sc_def dt, .cke_sc_def dd {}
.cke_sc_def dt {}
.cke_sc_def dd {}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

 

이제 겨우 겨우 화면이 완료되었습니다.
거의 반나절이 걸린 작업이었어요.
(정말 테마를 2일만에 만들 수 있는건가요? ㅠㅠ)
아래는 완료된 화면!! 마음은 뿌듯하네요~

완료된 게시글 작성 화면

 

이제 글이 정말 저장이 되는지 테스트하는 것만 남았네요.
제발 한번에, 아니... 딱 3번만에 끝났으면 좋겠습니다.~

첫번째 테스트 : 작성 완료 버튼을 눌러도 아무런 반응이 없네요. ㅠㅠ
작성완료 버튼의 type이 reset이었네요. 뭐 이런 일이...

두번째 테스트 : 오... 정상 입력 되었네요 ^^

두번째 테스트만에 정상 입력되는 것을 확인하였다! 게시글 보기 페이지는 아직 미작업!

 

지금까지
관리자에서 가능한 모든 옵션을 사용상태로 만든 후에,
새로운 테마를 위한 UI를 만들었고 정상 입력이 되는 것을 확인하였습니다.

다음 에디터를 변경해도 정상동작하는지 확인합니다.

SmartEditor에서 cheditor로 변경하여 테스트 진행.

다행이 cheditor5로 변경해도 잘 되네요~~

cheditor로 변경하여 정상적으로 보여지는 모습
정상적으로 보기 페이지로 이동한 모습

 

이번엔 자유게시판에서 테스트를 진행합니다.

자유게시판에서도 정상 수행됨.

같은 방식으로 질문과 답변 게시판도 정상적으로 수행되네요.
큰  문제 없는 것 같습니다.
많이 기쁘네요.

갤러리 게시판은 보기와 리스트 페이지가 다를 뿐
글 작성 페이지는 동일한 것으로 보여지네요.
(파일 비교 프로그램으로 비교해보았어요~)
가벼운 마음으로 덮어씌우고 테스트를 진행합니다.

갤러리 게시판에서도 글쓰기 테스트 진행한 모습

 

이렇게 해서 게시글 작성을 모두 완료하였습니다.

이제 수정이 잘 되는지 확인을 해보겠습니다.
시간이 조금 지나서 아까 무슨 코딩을 했었는지 기억이 가물가물합니다.
그 느낌이 사라지기전에
(전 오늘 한 코딩의 내용을 잠자고 나면 깨끗이 잊는답니다.)
어제의 기억을 부여잡고, 수정을 완료시키려 합니다.

수정 화면, 거의 정상적으로 보여지고 있다.

웬지 금방 끝날지도 모른다는 느낌 아닌 느낌이 드네요...

파일 삭제도 체크하고, 새로운 파일도 첨부하고, 제목도, 내용도 바꾸고...
작성완료 버튼을 눌러봅니다.

정말 한 방에 수정이 된 화면의 모습

 

오... 정말 한방에 수정되었습니다.
기분이 날아갈 것 같아요~~

끝난 줄 알았죠???
아닙니다.
답변글의 입력도 테스트를 해보아야 합니다.

답변글의 입력을 테스트 해본다.
답변도 정상적으로 입력이 된 모습

 

write.skin.php 파일이 작업된 모습을 올려드릴게요~

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>
<?php include G5_THEME_PARTIALS_PATH ."/_subheader/subheader-v1.php"; ?>

<!-- 게시물 작성/수정 시작 { -->
<div class="d-flex flex-column-fluid">
    <!--begin::Container-->
    <div class="container">




<!--begin::Card-->
<div class="card card-custom gutter-b example example-compact mt-5">
    <!--begin::Form-->
    <form name="fwrite" id="fwrite" action="<?php echo $action_url ?>" onsubmit="return fwrite_submit(this);" method="post" enctype="multipart/form-data" autocomplete="off" style="width:<?php echo $width; ?>">
    <input type="hidden" name="uid" value="<?php echo get_uniqid(); ?>">
    <input type="hidden" name="w" value="<?php echo $w ?>">
    <input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
    <input type="hidden" name="wr_id" value="<?php echo $wr_id ?>">
    <input type="hidden" name="sca" value="<?php echo $sca ?>">
    <input type="hidden" name="sfl" value="<?php echo $sfl ?>">
    <input type="hidden" name="stx" value="<?php echo $stx ?>">
    <input type="hidden" name="spt" value="<?php echo $spt ?>">
    <input type="hidden" name="sst" value="<?php echo $sst ?>">
    <input type="hidden" name="sod" value="<?php echo $sod ?>">
    <input type="hidden" name="page" value="<?php echo $page ?>">
        <div class="card-body">
<?php
$option = '';
$option_hidden = '';
if ($is_notice || $is_html || $is_secret || $is_mail) {
    $option = '';
    if ($is_notice) {
        $option .= PHP_EOL.'<div class="col-lg-2 my-auto">'.PHP_EOL.'<div class="checkbox-single">'.PHP_EOL.'<label class="checkbox">'.PHP_EOL.'<input type="checkbox" id="notice" name="notice" value="1" '.$notice_checked.' /> 공지<span></span></label>'.PHP_EOL.'</div>'.PHP_EOL.'</div>';
    }
    if ($is_html) {
        if ($is_dhtml_editor) {
            $option_hidden .= '<input type="hidden" value="html1" name="html">';
        } else {
            $option .= PHP_EOL.'<div class="col-lg-2 my-auto">'.PHP_EOL.'<div class="checkbox-single">'.PHP_EOL.'<label class="checkbox">'.PHP_EOL.'<input type="checkbox" id="html" name="html" onclick="html_auto_br(this);" value="'.$html_value.'" '.$html_checked.' /> html<span></span></label>'.PHP_EOL.'</div>'.PHP_EOL.'</div>';
        }
    }
    if ($is_secret) {
        if ($is_admin || $is_secret==1) {
            $option .= PHP_EOL.'<div class="col-lg-2 my-auto">'.PHP_EOL.'<div class="checkbox-single">'.PHP_EOL.'<label class="checkbox">'.PHP_EOL.'<input type="checkbox" id="secret" name="secret" value="secret" '.$secret_checked.' /> 비밀글<span></span></label>'.PHP_EOL.'</div>'.PHP_EOL.'</div>';
        } else {
            $option_hidden .= '<input type="hidden" name="secret" value="secret">';
        }
    }
    if ($is_mail) {
        $option .= PHP_EOL.'<div class="col-lg-2 my-auto">'.PHP_EOL.'<div class="checkbox-single">'.PHP_EOL.'<label class="checkbox">'.PHP_EOL.'<input type="checkbox" id="mail" name="mail" value="mail" '.$recv_email_checked.' /> 답변메일받기<span></span></label>'.PHP_EOL.'</div>'.PHP_EOL.'</div>';
    }
}
echo $option_hidden;
?>
            <div class="form-group row">
                <?php if ($is_category) { ?>
                <div class="col-lg-4">
                    <select class="form-control" name="ca_name" id="ca_name" required>
                        <option value="">분류를 선택하세요.</option>
                        <?php echo $category_option ?>
                    </select>
                </div>
                <?php } ?>
                <?php if ($option) { ?>
                <div class="col-lg-2 my-auto">
                    &nbsp;
                </div>
                <?php echo $option ?>
                <?php } ?>
            </div>

            <?php if ($is_name || $is_password || $is_email || $is_homepage) { ?>
            <div class="form-group row">
                <?php if ($is_name) { ?>
                <div class="col-lg-3">
                   <input type="text" name="wr_name" value="<?php echo $name ?>" id="wr_name" required class="form-control" placeholder="이름">
                </div>
                <?php } ?>
                <?php if ($is_password) { ?>
                <div class="col-lg-3">
                   <input type="text" name="wr_password" id="wr_password" <?php echo $password_required ?> class="form-control" placeholder="비밀번호">
                </div>
                <?php } ?>
                <?php if ($is_email) { ?>
                <div class="col-lg-3">
                   <input type="text" name="wr_email" value="<?php echo $email ?>" id="wr_email" class="form-control" placeholder="이메일">
                </div>
                <?php } ?>
                <?php if ($is_homepage) { ?>
                <div class="col-lg-3">
                   <input type="text" name="wr_homepage" value="<?php echo $homepage ?>" id="wr_homepage" class="form-control" placeholder="홈페이지">
                </div>
                <?php } ?>
            </div>
            <?php } ?>

            <!-- div class="separator separator-dashed my-10"></div -->

            <div class="form-group row">
                <div class="col-lg-12">
                    <div class="input-group">
                        <input type="text" name="wr_subject" value="<?php echo $subject ?>" id="wr_subject" required class="form-control" size="50" maxlength="255" aria-label="Text input with dropdown button" placeholder="제목을 입력하세요.">
                        <?php if ($is_member) { // 임시 저장된 글 기능 ?>
                        <script src="<?php echo G5_THEME_ASSETS_URL; ?>/js/pages/gnuboard/autosave.js"></script>
                        <?php if($editor_content_js) echo $editor_content_js; ?>
                        <div class="input-group-append">
                            <button type="button" id="btn_autosave" class="btn btn-secondary dropdown-toggle bg-dark text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                임시 저장된 글 (<span id="autosave_count" class="text-blue"><?php echo $autosave_count; ?>) &nbsp;
                            </button>
                            <div id="autosave_pop" class="dropdown-menu text-right" style="min-width:480px;">
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-lg-12 <?php echo $is_dhtml_editor ? $config['cf_editor'] : ''; ?>">
                    <?php if($write_min || $write_max) { ?>
                    <!-- 최소/최대 글자 수 사용 시 -->
                    <p id="char_count_desc">이 게시판은 최소 <strong><?php echo $write_min; ?></strong>글자 이상, 최대 <strong><?php echo $write_max; ?></strong>글자 이하까지 글을 쓰실 수 있습니다.</p>
                    <?php } ?>
                    <?php echo $editor_html; // 에디터 사용시는 에디터로, 아니면 textarea 로 노출 ?>
                    <?php if($write_min || $write_max) { ?>
                    <!-- 최소/최대 글자 수 사용 시 -->
                    <div id="char_count_wrap"><span id="char_count"></span>글자</div>
                    <?php } ?>
                </div>
            </div>


            <?php for ($i=1; $is_link && $i<=G5_LINK_COUNT; $i++) { ?>
            <div class="form-group row <?php echo ($i<G5_LINK_COUNT) ? "mb-2" : ""; ?>">
                <div class="col-lg-12">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text"><i class="la la-link icon-lg"></i></span></div>
                        <input type="text" name="wr_link<?php echo $i ?>" value="<?php if($w=="u"){ echo $write['wr_link'.$i]; } ?>" id="wr_link<?php echo $i ?>" size="50" class="form-control" placeholder="Link">
                    </div>
                </div>
            </div>
            <?php } ?>

            <?php for ($i=0; $is_file && $i<$file_count; $i++) { ?>
            <div class="form-group row">
                <div class="col-lg-<?php echo ($w == 'u' && $file[$i]['file']) ? "9" : "12"; ?>">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text"><i class="la la-folder-open icon-lg"></i></span></div>
                        <div class="custom-file">
                            <input type="file" name="bf_file[]" id="bf_file_<?php echo $i+1 ?>" title="파일첨부 <?php echo $i+1 ?> : 용량 <?php echo $upload_max_filesize ?> 이하만 업로드 가능" class="custom-file-input">
                            <label class="custom-file-label" for="customFile">선택된 파일 없음</label>
                        </div>
                    </div>
                </div>
                <?php if ($w == 'u' && $file[$i]['file']) { ?>
                <div class="col-lg-3 my-auto" style="max-width:100%;">
                    <div class="checkbox-single">
                        <label class="checkbox">
                            <input type="checkbox" id="bf_file_del<?php echo $i ?>" name="bf_file_del[<?php echo $i;  ?>]" value="1" />
                            <?php echo $file[$i]['source'].'('.$file[$i]['size'].')';  ?> 파일 삭제<span></span>
                        </label>
                    </div>
                </div>
                <?php } ?>
                <?php if ($is_file_content) { ?>
                <div class="col-lg-12 pl-17 mt-2">
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text"><i class="la la-question icon-lg"></i></span></div>
                        <input type="text" name="bf_content[]" value="<?php echo ($w == 'u') ? $file[$i]['bf_content'] : ''; ?>" title="파일 설명을 입력해주세요." size="50" class="form-control" placeholder="파일 설명을 입력해주세요.">
                    </div>
                </div>
                <?php } ?>
            </div>
            <?php } ?>

            <?php if ($is_use_captcha) { //자동등록방지  ?>
            <div class="form-group row">
                <div class="col-lg-12">
                    <?php echo captcha_html_mt703(); ?>
                </div>
            </div>
            <?php } ?>


            <!-- end: Example Code-->
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-lg-6">
                    <button type="submit" id="btn_submit" accesskey="s" class="btn btn-primary mr-2">작성 완료</button>
                    <a href="<?php echo get_pretty_url($bo_table); ?>" class="btn btn-secondary">취소</a>
                </div>
                <!-- div class="col-lg-6 text-right">
                    <button type="reset" class="btn btn-danger">Delete</button>
                </div -->
            </div>
        </div>
    </form>
    <!--end::Form-->
</div>
<!--end::Card-->

<script>
<?php if($write_min || $write_max) { ?>
// 글자수 제한
var char_min = parseInt(<?php echo $write_min; ?>); // 최소
var char_max = parseInt(<?php echo $write_max; ?>); // 최대
check_byte("wr_content", "char_count");

$(function() {
    $("#wr_content").on("keyup", function() {
        check_byte("wr_content", "char_count");
    });
});

<?php } ?>
function html_auto_br(obj)
{
    if (obj.checked) {
        result = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
        if (result)
            obj.value = "html2";
        else
            obj.value = "html1";
    }
    else
        obj.value = "";
}

function fwrite_submit(f) {         //alert(1);
    <?php echo $editor_js; // 에디터 사용시 자바스크립트에서 내용을 폼필드로 넣어주며 내용이 입력되었는지 검사함   ?>

    var subject = "";
    var content = "";
    $.ajax({
        url: g5_bbs_url+"/ajax.filter.php",
        type: "POST",
        data: {
            "subject": f.wr_subject.value,
            "content": f.wr_content.value
        },
        dataType: "json",
        async: false,
        cache: false,
        success: function(data, textStatus) {
            subject = data.subject;
            content = data.content;
        }
    });

    if (subject) {
        alert("제목에 금지단어('"+subject+"')가 포함되어있습니다");
        f.wr_subject.focus();
        return false;
    }

    if (content) {
        alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
        if (typeof(ed_wr_content) != "undefined")
            ed_wr_content.returnFalse();
        else
            f.wr_content.focus();
        return false;
    }

    if (document.getElementById("char_count")) {
        if (char_min > 0 || char_max > 0) {
            var cnt = parseInt(check_byte("wr_content", "char_count"));
            if (char_min > 0 && char_min > cnt) {
                alert("내용은 "+char_min+"글자 이상 쓰셔야 합니다.");
                return false;
            }
            else if (char_max > 0 && char_max < cnt) {
                alert("내용은 "+char_max+"글자 이하로 쓰셔야 합니다.");
                return false;
            }
        }
    }

    <?php echo $captcha_js; // 캡챠 사용시 자바스크립트에서 입력된 캡챠를 검사함  ?>

    document.getElementById("btn_submit").disabled = "disabled";

    return true;
}
</script>


    </div>
    <!--end::Container-->
</div>
<!-- } 게시물 작성/수정 끝 -->

 

이 느낌 그대로 간직하고
내일은 보기 페이지를 개발해야겠습니다.

긴 글 읽어주셔서 감사해요~

저작자표시 비영리 동일조건

'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글

그누보드 테마 제작 22 - 게시글 리스트 페이지 개발  (4) 2020.07.09
그누보드 테마 제작 21 - 게시글 보기 및 댓글 페이지 개발  (2) 2020.07.08
그누보드 테마 제작 19 - 게시판 그룹 페이지 개발  (2) 2020.07.06
그누보드 테마 제작 18 - 쪽지 내역 및 전송 기능 개발  (2) 2020.07.03
그누보드 테마 제작 17 - 스크랩 내역 페이지 개발  (4) 2020.07.02

관련글

댓글

티스토리툴바