[글쓴이:] WizardOfCode

단가 계산기

쇼핑을 할 때 단가를 쉽게 계산할 수 있는 계산기를 만들어봤습니다.

단가 계산기 사이트로 이동하기

위의 링크로 들어가면 아래와 같은 화면이 보이는데요.

맨 윗줄에 보이는 곳은 계산기로 간단한 수식을 입력해 결과값을 쉽게 클립보드에 복사할 수 있답니다.

상품 이름과 단위는 여러 상품을 입력할 때 임시 메모용으로 만들어서 생략해도 무방합니다.

“상품 수량” 영역에 상품의 갯수나 무게 등을 입력하고 “상품 합계 금액”을 입력하면 자동으로 1개 혹은 1단위 기준의 단가가 “상품 단가” 영역에 계산되어 나옵니다.

특정 갯수 혹은 특정 단위의 계산값이 궁금할 경우 “비교 상품 수량”에 숫자를 입력해주면 “비교 상품 합계 상한금액”에 입력한 수량과 단가를 곱해서 표시해줍니다.

맨 위에 있는 계산기는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)와 같이 간단한 사칙연산을 할 수 있게 만들었는데요.

계산기 영역에 계산할 수식을 입력하고 엔터를 누르면 계산된 값이 클립보드에 저장이 되고, 입력할 위치에 붙여넣기로 계산한 값을 입력할 수 있답니다.

자세한 사용 예제는 아래의 링크를 통해 확인해주세요.

단가 계산기 활용 방법 보러가기

2024년 05월 11일

[그누보드5] 회원정보 여분 필드 추가 하는 방법

그누보드5에서 기본적으로 회원정보 테이블에 여분의 필드가 10개 제공되고 있습니다.

그런데 개발을 하다보면 여분 필드가 10개 이상 필요로 할 때가 있는데 이때 여분 필드를 추가하는 방법을 알려드리도록 하겠습니다.

DB 컬럼 추가

기존 g5_member 테이블의 여분 필드는 mb_1에서 mb_10까지입니다.

여분 필드를 11~20까지 추가하기 위해 회원정보 수정 페이지(/adm/member_form.php) 나 별도의 PHP 파일에 아래의 코드를 추가하여 실행해줍니다.

for ($i = 11; $i <= 20; $i++) {
    $columnName = 'mb_' . $i;
    $previousColumnName = 'mb_' . ($i - 1);

    $sql = "SHOW COLUMNS FROM `{$g5['member_table']}` LIKE '{$columnName}'";
    $res = sql_fetch($sql);

    if (strpos($res['Type'], 'varchar') === false) {
        $sql = "ALTER TABLE `{$g5['member_table']}` 
                ADD COLUMN `{$columnName}` VARCHAR(255) NOT NULL DEFAULT '' AFTER `{$previousColumnName}`;";
        sql_query($sql, false);
    }
}

“SHOW COLUMNS”를 통해 해당 컬럼이 없을 경우에만 새로 추가하는 코드를 만들었습니다.

쿼리가 자주 수행되는 것이 마음에 걸릴 경우 컬럼 생성 후 해당 코드를 제거하셔도 무방합니다.

관리자 회원정보 수정

회원정보 수정 페이지 수정

회원정보 입력/수정 페이지는 “/adm/member_form.php”입니다.

해당 파일 7줄을 보면 아래와 같은 코드가 있습니다.

$mb = array(
    /* 생략 */
    'mb_8' => null,
    'mb_9' => null,
    'mb_10' => null,
);

mb_10 컬럼 밑으로 mb_11에서 mb_20까지 추가하겠습니다.

$mb = array(
    /* 생략 */
    'mb_8' => null,
    'mb_9' => null,
    'mb_10' => null,
    'mb_11' => null,
    'mb_12' => null,
    'mb_13' => null,
    'mb_14' => null,
    'mb_15' => null,
    'mb_16' => null,
    'mb_17' => null,
    'mb_18' => null,
    'mb_19' => null,
    'mb_20' => null,
);

그리고 568번줄(위의 코드를 추가한 후에는 578번줄)을 보면 for문에 $i <= 10으로 되어있는 코드가 있는데 아래와 같이 $i <= 20으로 변경해주면 이 파일에서 수정해야할 사항은 끝입니다.

<?php for ($i = 1; $i <= 20; $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 } ?>

회원정보 저장 페이지 수정

회원정보를 입력하고 정보를 저장하는 페이지는 “/adm/member_form_update.php”입니다.

해당 파일 91줄을 보면 아래와 같은 코드가 있습니다.

$sql_common = "  mb_name = '{$posts['mb_name']}',
                 /* 생략 */
                 mb_9 = '{$posts['mb_9']}',
                 mb_10 = '{$posts['mb_10']}' ";

mb_10 부분 밑에 아래와 같이 mb_11부터 mb_20까지 추가해주면 됩니다.

$sql_common = "  mb_name = '{$posts['mb_name']}',
                 /* 생략 */
                 mb_9 = '{$posts['mb_9']}',
                 mb_10 = '{$posts['mb_10']}',
                 mb_11 = '{$posts['mb_11']}',
                 mb_12 = '{$posts['mb_12']}',
                 mb_13 = '{$posts['mb_13']}',
                 mb_14 = '{$posts['mb_14']}',
                 mb_15 = '{$posts['mb_15']}',
                 mb_16 = '{$posts['mb_16']}',
                 mb_17 = '{$posts['mb_17']}',
                 mb_18 = '{$posts['mb_18']}',
                 mb_19 = '{$posts['mb_19']}',
                 mb_20 = '{$posts['mb_20']}' ";

테스트

이제 회원정보 수정 페이지에서 여분 필드가 11~20까지 출력되는지 확인하고 데이터도 정상적으로 저장이 되는지 테스트 해보시면 된 답니다.

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

2024년 05월 08일

[그누보드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 개념 소개

2024년 05월 06일

랜덤 문단/단어 추출 – 통합편
여러 글을 작성해야할 때 여러 문단과 단어를 작성해두고 랜덤으로 문단과 단어를 추출해 글을 자동으로 작성해주는 기능을 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>
```
2024년 04월 30일
랜덤 문단 뽑기
이전 포스팅에서는 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. 인덱스 조정: 문자열 내에서 다음 매칭을 위해 현재 위치를 조정합니다. 이는 선택된 문장 길이에 따라 동적으로 변경됩니다.

랜덤 문단 추출기능

[[ 문단1 문단2 문단3 ]]

변환

랜덤 단어 뽑기 글 보러가기

랜덤 단어 뽑기
2024년 04월 24일
랜덤 단어 뽑기
텍스트에서 특정 구분자를 기준으로 랜덤한 단어를 추출하는 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>
```
위의 코드를 활용해서 아래에 직접 구현을 해봤습니다.

랜덤 단어 추출

변환

랜덤 문단 뽑기

랜덤 문단 뽑기
2024년 04월 17일
FTP 명령어 모음

ascii : 전송모드를 ASCII모드로 설정한다.(ascii또는 as)
binary : 전송모드를 BINARY모드로 설정한다.( binary또는 bi)
bell : 명령어 완료시에 벨소리를 나게한다.(bell)
bye : ftp접속을 종료하고 빠져나간다.(bye)
cd : remote시스템의 디렉토리를 변경한다.(cd 디렉토리명)
cdup : remote시스템에서 한단계 상위디렉토리로 이동한다.(cdup)
chmod : remote시스템의 파일퍼미션을 변경한다.(chmod 755 index.html)
close : ftp접속을 종료한다. (close)
delete : remote시스템의 파일을 삭제한다.(delete index.old)
dir : remote시스템의 디렉토리 내용을 디스플레이한다.(dir)
disconnect : ftp접속을 종료한다.(disconnect)
exit : ftp접속을 종료하고 빠져나간다.(exit)
get : 지정된 파일하나를 가져온다.(get index.html)
hash : 파일전송 도중에 “#”표시를 하여 전송중임을 나타낸다.(hash)
help : ftp명령어 도움말을 볼 수 있다.(help또는 help 명령어)
lcd : local시스템의 디렉토리를 변경한다.(lcd 디렉토리명)
ls : remote시스템의 디렉토리 내용을 디스플레이한다. (ls 또는 ls -l)
mdelete : 여러개의 파일을 한꺼번에 지울 때 사용한다.( mdelete *.old)
mget : 여러개의 파일을 한꺼번에 가져오려할 때 사용한다. ( mget *.gz)
mput : 한꺼번에 여러개의 파일을 remote시스템에 올린다.(mput *.html)
open : ftp접속을 시도한다.(open 168.126.72.51또는 open ftp.kornet.net)
prompt : 파일전송시에 확인과정을 거친다. on/off 토글 (prompt)
put : 하나의 파일을 remote시스템에 올린다.(put index.html)
pwd : remote시스템의 현재 작업디렉토리를 표시한다.(pwd)
quit : ftp접속을 종료하고 빠져나간다.(quit)
rstatus : remote시스템의 상황(version, 어디서, 접속ID등)을 표시한다.(rstatus)
rename : remote시스템의 파일명을 바꾼다.(remote 현재파일명 바꿀파일명)
rmdir : remote시스템의 디렉토리을 삭제한다.(rmdir 디렉토리명)
size :remote시스템에있는 파일의 크기를 byte단위로 표시한다.(size index.html)
status : 현재 연결된 ftp세션가지 모드에 대한 설정을 보여준다.(status)
type : 전송모드를 설정한다.(type 또는 type ascii 또는 type binary)

2024년 03월 22일

[글쓴이:] WizardOfCode

DB 컬럼 추가

관리자 회원정보 수정

회원정보 수정 페이지 수정

회원정보 저장 페이지 수정

테스트

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

2. HOOK으로 수정 방법

참고

랜덤 단어 양식

랜덤 문단 양식

랜덤 문단/단어 양식

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

랜덤 문단 추출 함수

랜덤 문단 추출기능

랜덤 단어 추출