[PHP] 유용한 실무팁 7 - 토글 (toggle) 작업하기

실무에서 자주 사용되는  toggle 은 CSS class 나 jQuery 등의 함수를 이용해서 다양하게 작업할  수 있다.

필자가 나름대로 실무에서 사용한 방식을 잠깐 소개한다.

 

 

전체는 기본사항이며, 회화를 한번 클릭하고, 다시 클릭하면 해제가 되어야한다.

 

<?
$cate1         = ($_GET[cate1])? $_GET[cate1] : $_POST[cate1];
 
$bun_in  = "";
 
if ($cate1) {
    $cate1Arr = explode("|",$cate1);
    for ($i=0;$i<sizeof($cate1Arr);$i++) {
        if ($bun_in=="") {
            $bun_in = " bun like '%".$cate1Arr[$i]."%'";
        } else {
            $bun_in .= " or bun like '%" .$cate1Arr[$i]."%'";
        }
    }
    $bun_in = " and (".$bun_in.") ";
}
 
$show_page  = 20;
$block_page = 10;
 
$keyGap = " where 1=1 ";
if ($cate1) {
    $keyGap .= $bun_in;
}
 
if ($keyword) {
    $keyGap .= " and ( name like '%".$keyword."%' or bun like '%". $keyword ."%') ";
}
 
$tQ = "select count(*) from 테이블 $keyGap";
$tresult = mysqli_query($conn,$tQ) or die("Selection Error!");
$trow     = mysqli_fetch_row($tresult);
$total     = $trow[0];
 
if(!$page) $page = 1;
$start = ($page-1)*$show_page;
$total_page = (int)(($total-1)/$show_page)+1;
 
$query = "select * from 테이블 $keyGap  order by no DESC limit $start,$show_page";
$res   = mysqli_query($conn,$query) or die("정보 얻기 실패");
?>
 
 
<form name="fsearch">
<input type="hidden" id="cate1" name="cate1" value="<?=$cate1?>">
    <div class="select">
 
        <ul>
            <li onclick="cateChk('')"          <?if ($cate1=="") echo "class='on'";?>>=전체=</li>
            <li onclick="cateChk('한국화')"      <?if (strpos($cate1, '한국화') !== false) echo "class='on'";?>>한국화</li>
            <li onclick="cateChk('회화')"      <?if (strpos($cate1, '회화') !== false) echo "class='on'";?>>회화</li>
            <li onclick="cateChk('드로잉·판화')" <?if (strpos($cate1, '드로잉·판화') !== false) echo "class='on'";?>>드로잉·판화</li>
            <li onclick="cateChk('조각')"      <?if (strpos($cate1, '조각') !== false) echo "class='on'";?>>조각</li>
            <li onclick="cateChk('뉴 미디어')"   <?if (strpos($cate1, '뉴 미디어') !== false) echo "class='on'";?>>뉴 미디어</li>
        </ul>
        <ul>
            <li onclick="cateChk('공예')"      <?if (strpos($cate1, '공예') !== false) echo "class='on'";?>>공예</li>
            <li onclick="cateChk('사진')"      <?if (strpos($cate1, '사진') !== false) echo "class='on'";?>>사진</li>
            <li onclick="cateChk('서예')"      <?if (strpos($cate1, '서예') !== false) echo "class='on'";?>>서예</li>
            <li onclick="cateChk('디자인')"      <?if (strpos($cate1, '디자인') !== false) echo "class='on'";?>>디자인</li>
            <li onclick="cateChk('건축')"      <?if (strpos($cate1, '건축') !== false) echo "class='on'";?>>건축</li>
        </ul>
        <div class="input">
            <div class="link"><a href="javascript:;"><img src="/image/link_icon.png" alt=""></a></div>
            <input type="text" placeholder="아티스트명, 분야 검색하기" id="search" name="keyword" value="<?=$keyword?>">
            <label for="search"><img src="/image/search.png" alt="" onclick="searchChk();"></label>
        </div>
    </div>
</form>
 
 
<script>
function cateChk(language) {
    var input = document.forms['fsearch']['cate1'];
    var languages = new Set(input.value ? input.value.split('|') : []);
/*    
    if (language) {
        languages.add(language);
        input.value = Array.from(languages).join('|');
    } else {
        input.value = ''; 
    }
*/
    if (language) {        
        if (languages.has(language)) {
            languages.delete(language); // 문자열이 이미 있다면 삭제
        } else {
            languages.add(language); // 문자열이 없다면 추가
        }
        input.value = Array.from(languages).join('|');
    } else {                            // 전체를 클릭한다면
        input.value = ''; 
    }    
 
 
    document.fsearch.action = "?";
    document.fsearch.submit();
}
 
 
function searchChk() {
    var form = document.fsearch;
    var gap = form.keyword.value;
    form.action = "?keyword=" + gap + "&cate1=<?=$cate1?>";
    form.submit();
}
</script>

 

 

위의 소스에서 hidden 으로 쌓이는 문자열은 각각 선택한 카테고리 문자열이 '공예|사진|서예' 이런식으로 쌓이는데, 

다시 한번 동일한 공예를 클릭하면 '사진|서예' 이런식으로 cate1 의 문자열을 만들어가는 방식으로 구현하였다.