사이트 활용팁

2024.11.04 22:04

해시태그 입력 및 검색 기능 추가하기

게시판 태그 기능 추가 및 개선 업데이트

게시판에 태그(Tag) 기능이 새롭게 추가되고 기존 기능이 개선되었습니다. 이제 게시물에 태그를 추가하여 더욱 효율적인 검색과 분류가 가능하며, 사용자 경험도 향상됩니다.

태그 스타일 적용: style.css 파일에 .wr_tag 스타일이 추가되어 태그가 깔끔하고 시각적으로 돋보이게 표시됩니다. 반응형 웹에서도 최적화된 형태로 보여집니다.
태그 검색 기능: list_skin.php 파일에 wr_tag 검색 옵션이 추가되어, 사용자가 특정 태그로 게시물을 쉽게 검색할 수 있습니다. 검색 결과 화면에서는 #태그명 형태로 현재 검색 중인 태그를 명확히 보여줍니다.
게시물에 태그 표시: view.skin.php 파일 수정으로 게시물 본문에 해당 게시물에 포함된 태그가 자동으로 표시되어 관련 콘텐츠를 쉽게 파악할 수 있습니다.
태그 입력 및 관리 기능 (Tagify.js 연동):
write.skin.php에서 Tagify.js 라이브러리가 연동되어 직관적인 태그 입력 필드가 제공됩니다. 사용자는 태그를 입력하고 엔터를 눌러 쉽게 추가할 수 있습니다.
새로운 태그를 저장하는 rb_tag 테이블과 게시판 테이블에 wr_tag 컬럼이 자동 생성됩니다.
write_update.skin.php를 통해 사용자가 입력한 태그가 rb_tag 테이블과 게시판 wr_tag 컬럼에 안전하게 저장되고 관리됩니다.

태그 자동 완성 및 제어: Tagify.js를 통해 기존 태그 목록을 활용한 자동 완성 기능을 옵션으로 제공하며, 태그 입력 방식에 대한 세부 제어가 가능합니다.

01. style.css 파일 수정

687번째 반응형 처리 주석 부분을 찾은 후

/* 반응형 처리 { */
@media all and (max-width:1024px) {
    .board_pc {display: none;}
    .rb_bbs_wrap .rb_bbs_for_info {float:none; width: auto; position: absolute; top:39px; right:-5px; padding-right: 0px; z-index: 97;}
    .rb_bbs_for_info1_num {display: none;}

 

바로 위에 아래 코드 삽입

.wr_tag {display: flex; gap:5px; margin-top: 5px; margin-bottom: 10px;}
.wr_tag a {font-size: 13px; color:#999; border:1px solid #ddd; padding: 4px 8px; border-radius: 25px;}
.wr_tag span {font-size: 13px; color:#999; border:1px solid #ddd; padding: 4px 8px; border-radius: 25px;}
.wr_tag a:hover {border-color:#25282B; color:#25282B;}

 

02. list_skin.php

첫 번째 3번쨰 줄 찾은 후

<?php
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);

아래 소스코드 삽입

function get_board_sfl_select_options2($sfl){
    global $is_admin;
    $str = '';

    $str .= '<option value="wr_subject" '.get_selected($sfl, 'wr_subject').'>제목</option>';
    $str .= '<option value="wr_content" '.get_selected($sfl, 'wr_content', true).'>내용</option>';
    $str .= '<option value="wr_subject||wr_content" '.get_selected($sfl, 'wr_subject||wr_content').'>제목+내용</option>';
    $str .= '<option value="wr_tag" '.get_selected($sfl, 'wr_tag', true).'>태그</option>';
    
    return run_replace('get_board_sfl_select_options2', $str, $sfl);
}

 

두 번째 아래 div 부분을 찾은 후

<div class="rb_bbs_wrap" id="scroll_container" style="width:<?php echo $width; ?>">

아래 소스코드 삽입

<?php if($sfl == "wr_tag" && $stx) { ?>
<div class="wr_tag">
    <span>태그검색 #<?php echo $stx; ?></span>
</div>
<?php } ?>

 

03. view.skin.php

59번째에서 62번째 사이

<h2><?php echo get_text($view['wr_subject']);?></h2>

아래 소스코드 삽입

    <?php if(isset($view['wr_tag']) && $view['wr_tag']) { ?>
    <div class="wr_tag">
        <?php echo view_tags($view['wr_tag'], $bo_table); ?>
    </div>
    <?php } ?>

 

04. write.skin.php

첫번째 5번째 줄 아래의 소스코드를 찾은 후

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

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

아래 소스코드로 대체

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

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

// tag 테이블 추가
if(!sql_query(" DESCRIBE rb_tag ", false)) {
    sql_query(" CREATE TABLE IF NOT EXISTS `rb_tag` (
                  `bo_table` VARCHAR(20) NOT NULL DEFAULT '',
                  `wr_id` INT(11) NOT NULL DEFAULT '0',
                  `tag` VARCHAR(100) NOT NULL DEFAULT '',
				  `created_at` TIMESTAMP NULL DEFAULT NULL,
                  PRIMARY KEY (`bo_table`, `wr_id`, `tag`)
                ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ", true);

}

$columns_to_add = [
    'wr_tag' => 'varchar(255) NOT NULL DEFAULT '''
];

foreach ($columns_to_add as $column => $attributes) {
    // 컬럼이 있는지 확인
    $column_check = sql_query("SHOW COLUMNS FROM {$write_table} LIKE '{$column}'", false);
    if (!sql_num_rows($column_check)) {
        // 컬럼 추가
        sql_query("ALTER TABLE {$write_table} ADD {$column} {$attributes}", true);
    }
}


$tags = get_tags($bo_table);
$js_array = json_encode($tags, JSON_UNESCAPED_UNICODE);
?>

<script src="<?php echo $board_skin_url ?>/tag/tag.js"></script>
<link href="<?php echo $board_skin_url ?>/tag/tag.css" rel="stylesheet" type="text/css" />

 

두번쨰, 아래 소스코드를 찾은 후

    <?php
        $option = '';
        $option_hidden = '';

바로 위에, 아래 소스코드 추가

    <!-- 태그 { -->
    <style>
        .tag_inp_wrap .tagify {border-radius: 10px; font-size: 13px; padding: 5px;}
        .tag_inp_wrap .tagify--focus {border-color: #25282B !important;}
        .tagify__tag>div>[contenteditable] {margin: 0px;padding: 2px;}
        .tagify__tag>div>* {transition: .0s ease,.0s color}
        .tagify {--placeholder-color-focus: rgba(0, 0, 0, .5);}
    </style>
    <div class="rb_inp_wrap tag_inp_wrap">
        <input type="text" name="wr_tag" value="<?php echo isset($write['wr_tag']) ? $write['wr_tag'] : ''; ?>" id="wr_tag" class="" placeholder="태그 입력후 엔터">
    </div>
    <!-- } -->

 

세번째, 맨 아래 </script>를 찾아 그 밑에 아래 소스코드 추가

	<script>
	$(function() {
			// JSON 형식으로 변환하여 JavaScript로 전달
			const all_tags = <?php echo $js_array; ?>;


			// all_tags가 배열인지 확인
			const tags = Array.isArray(all_tags) ? all_tags.map((a) => a.tag) : [];


			const input = document.querySelector('input[name=wr_tag]');
			const tagify = new Tagify(input, {
				/*
				whitelist: tags,
				
				dropdown: {
					position: "input",
					enabled: 0
				},
				*/
			});
		});
	</script>

 

05. write_update.skin.php

아래 소스코드를 찾은 후

 @include_once(G5_PATH.'/rb/rb.lib/ajax.upload_write_update.php'); //

아래 소스코드 추가

    $sql = "delete from rb_tag where bo_table = '$bo_table' and wr_id = '$wr_id' ";
    sql_query($sql);

    // 입력된 태그를 배열로 변환
    $tags = tagify_json_to_array($_POST['wr_tag']);
    $tag_arr = [];

    foreach ($tags as $tag) {
        // 태그 값을 안전하게 처리
        $tag_safe = addslashes($tag);
        $sql = "INSERT INTO rb_tag (bo_table, wr_id, tag, created_at)
                VALUES ('$bo_table', '$wr_id', '$tag_safe', '" . G5_TIME_YMDHIS . "')";
        sql_query($sql);
        $tag_arr[] = $tag_safe;
    }

    // wr_tag 필드 업데이트
    $wr_tag_value = implode(',', $tag_arr);
    $wr_tag_value_safe = addslashes($wr_tag_value);
    $sql = "UPDATE {$write_table}
            SET wr_tag = '$wr_tag_value_safe'
            WHERE wr_id = '$wr_id'";
    sql_query($sql);

 

게시판 스킨으로 접근하면 rb_tag 테이블과 게시판 테이블에 wr_tag컬럼이 생성 됩니다.

rb_tag 테이블은 태그를 사용하는 게시판 스킨에서 입력되는 모든 태그를 저장 합니다. tagify.js 가 포함되어있으며, write_skin.php 파일의 하단부 에서 tagify.js 의 옵션을 사용할 수 있습니다.

#태그 #태그검색 #링크검색 #태그게시판
    0 0
    공유 더보기
    페이스북으로 공유 트위터로 공유 카카오톡으로 공유 공유링크 공유
    더보기
소개 공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기


또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기
저작권 저작권 저작권 주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기


또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.


본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기
  • 이전글뱃지 및 강조할 내용 추가2024.11.05
  • 다음글포인트 랭킹 위젯에 "레벨 아이콘, 회원프로필" 등 추가2024.11.04

    • 댓글목록

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　오래 전 2024-11-04 22:05

    이 튜토리얼을 공유해 주셔서 감사합니다! 해시태그 기능을 게시판에 추가하는 데 도움이 될 것 같습니다. 특히 태그 입력을 쉽게 만드는 태그 자동완성...

    이 튜토리얼을 공유해 주셔서 감사합니다! 해시태그 기능을 게시판에 추가하는 데 도움이 될 것 같습니다. 특히 태그 입력을 쉽게 만드는 태그 자동완성 기능이 마음에 들었습니다. 게시판 사용자들이 게시물을 더욱 효과적으로 분류하고 검색할 수 있을 것 같네요.

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　오래 전 2024-11-04 22:05

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　오래 전 2024-11-04 22:05

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　오래 전 2024-11-04 22:05

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　오래 전 2024-11-04 22:05

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    여기에 답글