[카테고리:] WebProgram

This is Web Program

  • [그누보드5] 회원관리페이지 여분필드 HOOK 이용해 명칭 변경 방법

    그누보드5를 이용할 때 회원정보 여분필드를 사용하다가 추후에 사용용도를 잊어먹는 경우가 많는데 이럴 때 회원관리 관리자 페이지에서 여분필드의 명칭을 변경하는 방법을 알려드리겠습니다.

    2가지 방법이 있는데 내부코어를 수정하는 방법과 내부코어를 변경하지 않고 그누보드 5.4부터 지원하는 HOOK(훅)을 통해 필드명칭을 변경하는 방법이 있습니다.

    1. 관리자페이지 수정 방법

    “/adm/member_form.php”파일을 열어서 568번째 줄을 보면 아래와 같은 코드가 있습니다.

    <?php for ($i = 1; $i <= 10; $i++) { ?>
        <tr>
            <th scope="row"><label for="mb_<?php echo $i ?>">여분 필드 <?php echo $i ?></label></th>
            <td colspan="3"><input type="text" name="mb_<?php echo $i ?>" value="<?php echo $mb['mb_' . $i] ?>" id="mb_<?php echo $i ?>" class="frm_input" size="30" maxlength="255"></td>
        </tr>
    <?php } ?>

    for문을 이용해 총 10개의 여분 필드를 표시해주고 있는데 이 코드를 아래와 같이 고쳐주면 여분 필드의 이름을 수동으로 설정할 수 있습니다.

    <tr>
        <th scope="row"><label for="mb_1">사원번호</label></th>
        <td colspan="3"><input type="text" name="mb_1" value="<?php echo $mb['mb_1'] ?>" id="mb_1" class="frm_input" size="30" maxlength="255"></td>
    </tr>
    <tr>
        <th scope="row"><label for="mb_2">입사일</label></th>
        <td colspan="3"><input type="text" name="mb_2" value="<?php echo $mb['mb_2'] ?>" id="mb_2" class="frm_input" size="30" maxlength="255"></td>
    </tr>
    <tr>
        <th scope="row"><label for="mb_3">소속부서</label></th>
        <td colspan="3"><input type="text" name="mb_3" value="<?php echo $mb['mb_3'] ?>" id="mb_3" class="frm_input" size="30" maxlength="255"></td>
    </tr>
    <!-- 중간 생략 -->
    <tr>
        <th scope="row"><label for="mb_10">여분 필드 10</label></th>
        <td colspan="3"><input type="text" name="mb_10" value="<?php echo $mb['mb_10'] ?>" id="mb_10" class="frm_input" size="30" maxlength="255"></td>
    </tr>

    위와 같은 방법으로 여분 필드의 이름을 직접 수정할 수 있답니다.

    2. HOOK으로 수정 방법

    이번에는 adm 폴더의 member_form.php 파일을 직접 수정하지 않고 add_event(HOOK)을 이용해 여분 필드의 이름을 바꿔보는 방법을 알아보겠습니다.

    “/adm/member_form.php” 파일 맨 하단에 보면 아래와 같은 코드가 있습니다.

    <?php
    run_event('admin_member_form_after', $mb, $w);

    여기서 “run_event” 함수가 HOOK이며, “admin_member_form_after” 함수가 호출되는 지점입니다.

    “admin_member_form_after” 이 이벤트가 실행될 때 회원 정보 여분 필드를 출력할 “member_add_column” 함수를 연결 시켜줄 것입니다.

    add_event('admin_member_form_after', 'member_add_column', 10, 2);

    위와 같은 코드를 수행하면 “admin_member_form_after” 이벤트가 실행될 때 “member_add_column”함수를 실행하게 됩니다.

    숫자 10은 이벤트의 우선순위인데 기본값은 10입니다.

    숫자 2는 “member_add_column” 함수에 들어가는 매개변수의 갯수입니다. “$mb”와 “$w” 이렇게 2개가 전달되고 있어서 2라는 값을 넣어줬습니다.

    이제 “member_add_column”함수를 구현하면 됩니다.

    function member_add_column($mb, $w)
    {
        echo @"<script>
                 $('label[for=mb_1]').text('사원번호');
                 $('label[for=mb_2]').text('입사일');
                 $('label[for=mb_3]').text('소속부서');
                 $('label[for=mb_4]').text('직책');
                 $('label[for=mb_5]').text('직위');
                 $('label[for=mb_6]').text('여분6');
                 $('label[for=mb_7]').text('여분7');
                 $('label[for=mb_8]').text('여분8');
                 $('label[for=mb_9]').text('여분9');
                 $('label[for=mb_10]').text('여분10');
               </script>";
    }

    JQuery를 통해 각 레이블의 텍스트를 변경하는 방식으로 처리하였습니다.

    아래의 코드는 위의 HOOK 코드를 extend 폴더안에 넣어서 내부코드를 건드리지 않고 작동하도록 구현해봤습니다.

    <?php
    if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
    
    add_event('admin_member_form_after', 'member_add_column', 10, 2);
    
    function member_add_column($mb, $w)
    {
        echo @"<script>
                 $('label[for=mb_1]').text('사원번호');
                 $('label[for=mb_2]').text('입사일');
                 $('label[for=mb_3]').text('소속부서');
                 $('label[for=mb_4]').text('직책');
                 $('label[for=mb_5]').text('직위');
                 $('label[for=mb_6]').text('여분6');
                 $('label[for=mb_7]').text('여분7');
                 $('label[for=mb_8]').text('여분8');
                 $('label[for=mb_9]').text('여분9');
                 $('label[for=mb_10]').text('여분10');
               </script>";
    }
    ?>

    위의 내용을 “member.extend.php”라는 이름으로 저장하고(파일 이름은 마음대로 지정하셔도 됩니다.) “/extend” 폴더에 넣어두면 됩니다.

    참고

    (그누보드 공식 홈페이지) Hook 개념 소개

  • 랜덤 문단/단어 추출 – 통합편

    여러 글을 작성해야할 때 여러 문단과 단어를 작성해두고 랜덤으로 문단과 단어를 추출해 글을 자동으로 작성해주는 기능을 Javascript로 만들어보겠습니다.

    최근에 올렸던 랜덤 문단 추출 기능랜덤 단어 추출 기능을 합쳐볼 예정입니다.

    랜덤 단어 양식

    랜덤으로 “사과”, “배”, “바나나” 중 하나를 추출하는 것을 가정해보겠습니다.

    일반 문장에서 자주 사용되지 않을 문자인 파이퍼(|)로 구분을 지어보겠습니다.

    이것은 사과|배|바나나입니다.

    어느 영역이 랜덤 단어가 모여있는지 구별하기 위해 대괄호([ ~]})로 감싸보겠습니다.

    이것은 [사과|배|바나나]입니다.

    이 문장을 변환하면 대괄호 안에 있는 ‘사과’, ‘배’, ‘바나나’ 중 하나가 선택되어 아래와 같이 출력 된 답니다.

    이것은 배입니다.

    랜덤 문단 양식

    이번엔 여러 줄의 글을 작성하고 그 중 하나의 줄만 추출하는 것을 해보겠습니다.

    각 줄은 엔터로 구분이 되고 처음과 끝을 나타내는 구역을 ‘[[‘와 ‘]]’로 묶는 방식을 이용해보겠습니다.

    [[
    첫 번째 문단입니다.
    두 번째 문단입니다.
    세 번째 문단입니다.
    ]]

    위와 같이 입력하고 변환을 하면 세 개의 문단 중 임의 줄 하나가 선택되어 출력됩니다.

    세 번째 문단입니다.

    랜덤 문단/단어 양식

    이번에는 위의 두 가지 방법을 모두 사용해보겠습니다.

    아래와 같이 예제 문장을 만들어봤습니다.

    [[
    이것은 [사과|배|바나나]입니다.
    저것은 [사과|배|바나나]입니다.
    [이것|저것]은 [사과|배|바나나|과자][이다.|입니다.|네요.]
    ]]

    위와 같이 입력하고 변환을 하면 아래와 같이 임의의 문단과 단어가 선택되어 출력됩니다.

    저것은 바나나입니다.

    랜덤 문단/단어 사용해보기

    사용된 코드는 아래와 같습니다.

    <script>
    function extractRandomString() {
      const inputString = document.getElementById('inputString').value;
      const delimiter = '|'; // 구분자
      const extractPattern = /\[(.*?)\]/g; // 추출할 구역 패턴, 글로벌 플래그 추가
    
      if (inputString === '') {
        alert('텍스트를 입력하세요.');
        return;
      }
    
      // replace 함수 내에서 랜덤 선택 로직을 적용
      const resultString = inputString.replace(extractPattern, (match, group1) => {
        const choices = group1.split(delimiter);
        const randomChoice = choices[Math.floor(Math.random() * choices.length)];
        return randomChoice;
      });
    
      document.getElementById('result').textContent = RandomSentence (resultString); // 결과를 화면에 출력
    }
    
    function RandomSentence(str) {
      const regex = /\[\[([\s\S]*?)\]\]/g;
      let sentences = [];
      let match;
    
      while (match = regex.exec(str)) {
        sentences = match[1].split(/\r?\n/).filter(Boolean);
        const randomIndex = Math.floor(Math.random() * sentences.length);
        const selectedSentence = sentences[randomIndex].trim();
        str = str.replace(match[0], selectedSentence);
        regex.lastIndex -= match[0].length - selectedSentence.length;
      }
    
      return str;
    }  
    </script>
  • 랜덤 문단 뽑기

    이전 포스팅에서는 Javascript를 통해 특정 영역안에 단어를 임의로 추출하는 기능을 만들어봤는데요.

    이번에는 특정 영역안에 문단글을 넣어놓고 임의로 추출하는 기능을 만들어볼게요.

    랜덤 문단 추출 함수

    function RandomSentence(str) {
      const regex = /\[\[([\s\S]*?)\]\]/g;
      let sentences = [];
      let match;
    
      while (match = regex.exec(str)) {
        sentences = match[1].split(/\r?\n/).filter(Boolean);
        const randomIndex = Math.floor(Math.random() * sentences.length);
        const selectedSentence = sentences[randomIndex].trim();
        str = str.replace(match[0], selectedSentence);
        regex.lastIndex -= match[0].length - selectedSentence.length;
      }
    
      return str;
    }  

    1. 정규 표현식 활용: [[…]]로 둘러싸인 부분을 찾기 위해 정규 표현식을 사용합니다. 이는 대괄호 안에 포함된 모든 내용을 찾아낼 수 있게 해 줍니다.

    2. 문장 분리 및 선택: 찾아낸 텍스트에서 각 줄을 분리한 후, 비어 있지 않은 줄만을 골라내어 배열에 저장합니다. 이 배열에서 무작위로 한 문장을 선택합니다.

    3. 텍스트 교체: 원래 문자열에서 [[…]] 부분을 무작위로 선택된 문장으로 대체합니다.

    4. 인덱스 조정: 문자열 내에서 다음 매칭을 위해 현재 위치를 조정합니다. 이는 선택된 문장 길이에 따라 동적으로 변경됩니다.

    랜덤 문단 추출기능


    랜덤 단어 뽑기 글 보러가기

  • 랜덤 단어 뽑기

    텍스트에서 특정 구분자를 기준으로 랜덤한 단어를 추출하는 Javascript 코드를 만들어봤습니다.

    예를 들어, “이것은 [사과|바나나|포도] 입니다.”라는 문자열을 입력하면 [ ~ ] 사이에 있는 “사과”, “바나나”, “포도” 중 하나의 과일 이름이 랜덤하게 선택되어 출력되는 기능입니다.

    우선 문자열을 입력할 textarea를 만들어보겠습니다.

    <textarea id="inputString" placeholder="이것은 [문자1|문자2|문자3] 입니다."></textarea>

    그리고 텍스트에서 랜덤 문자열을 추출하는 스크립트를 만들어보겠습니다.

    <script>
    function extractRandomString() {
      const inputString = document.getElementById('inputString').value;
      const delimiter = '|'; // 구분자
      const extractPattern = /\[(.*?)\]/g; // 추출할 구역 패턴, 글로벌 플래그 추가
    
      if (inputString === '') {
        alert('텍스트를 입력하세요.');
        return;
      }
    
      // replace 함수 내에서 랜덤 선택 로직을 적용
      const resultString = inputString.replace(extractPattern, (match, group1) => {
        const choices = group1.split(delimiter);
        const randomChoice = choices[Math.floor(Math.random() * choices.length)];
        return randomChoice;
      });
    
      document.getElementById('result').textContent = resultString; // 결과를 화면에 출력
    }
    </script>

    위의 코드를 활용해서 아래에 직접 구현을 해봤습니다.

    랜덤 단어 추출


    랜덤 문단 뽑기