PHP로 Radio 버튼과 검색 필드를 연동하여 동적 검색 구현하기

웹 애플리케이션을 개발할 때, 유저가 데이터를 검색하는 방식은 굉장히 중요합니다. 특히 여러 조건을 조합해 데이터를 검색해야 하는 경우라면, 적절한 UI와 서버 로직을 설계하는 것이 핵심입니다. 오늘은 PHP를 활용해 Radio 버튼 선택과 검색 필드를 연동하여 유저가 보다 직관적으로 데이터를 필터링할 수 있는 방법을 알아보겠습니다.

---

동적 검색이란 무엇인가요?

동적 검색이란 사용자의 입력값이나 선택 조건에 따라 데이터베이스에서 필요한 데이터를 실시간으로 가져오는 것을 의미합니다. 예를 들어, 쇼핑몰에서 유저가 특정 카테고리를 선택하고 검색어를 입력했을 때, 그 조건에 맞는 상품만 검색 결과로 보여주는 기능을 떠올리면 됩니다.

이번 글에서는 Radio 버튼으로 검색 범위를 지정하고, 검색 필드에 입력된 키워드를 기준으로 데이터베이스에서 데이터를 조회하는 PHP 코드를 단계별로 작성해 보겠습니다.

---

필요한 조건

1. PHP와 MySQL 환경
   • 데이터베이스에서 데이터를 조회하고 출력하기 위해 PHP와 MySQL이 필요합니다.
2. UI 구성
   • Radio 버튼과 검색 필드를 제공하는 간단한 HTML 폼이 필요합니다.
3. 조건별 데이터 필터링
   • Radio 버튼의 선택값에 따라 검색 범위를 다르게 설정해야 합니다.

---

기본 폼 구성

먼저, 간단한 HTML 폼을 만들어 보겠습니다. 유저가 검색 범위를 선택할 수 있도록 Radio 버튼과 검색어를 입력할 검색 필드를 제공합니다.

<form id="searchForm" method="POST" action="search.php">
    <label><input type="radio" name="radioarray[]" value="option1" checked> Reply</label>
    <label><input type="radio" name="radioarray[]" value="option2"> Title</label>
    <label><input type="radio" name="radioarray[]" value="all"> All</label>
    <input type="text" name="search" placeholder="검색어를 입력하세요">
    <button type="submit">검색</button>
</form>

이 폼은 search.php로 데이터를 전송하며, PHP에서 radioarray 값과 search 값에 따라 검색 조건을 처리합니다.

---

PHP에서 검색 조건 처리

폼 데이터를 기반으로 데이터베이스에서 조건부 검색을 수행하려면, 다음 로직을 구현해야 합니다.

1. radioarray와 컬럼 매핑
   Radio 버튼에서 선택한 값에 따라 검색할 컬럼을 다르게 설정합니다. 이를 위해 PHP 배열로 매핑을 정의합니다.
2. $radioColumnMap = [ 'option1' => 'reply', // 'Reply' 선택 시 reply 컬럼 검색 'option2' => 'title', // 'Title' 선택 시 title 컬럼 검색 ];
3. 동적 검색 쿼리 생성
   유저가 선택한 Radio 버튼과 입력한 검색어를 조합해 검색 조건을 추가합니다.
4. if (!empty($search)) { $searchConditions = []; // 기본 검색 컬럼 $columns = ['reply', 'title']; // radioarray 값을 기준으로 검색 컬럼 제한 if (!empty($radioarray)) { foreach ($radioarray as $radioValue) { if (isset($radioColumnMap[$radioValue])) { $columns = [$radioColumnMap[$radioValue]]; break; // 첫 번째 매핑된 값만 사용 } } } // 검색 조건 추가 foreach ($columns as $column) { $placeholder = ":search_" . $column; $searchConditions[] = "$column LIKE $placeholder"; $bindings[$placeholder] = "%" . $search . "%"; } if (!empty($searchConditions)) { $query .= " AND (" . implode(" OR ", $searchConditions) . ")"; } }
5. SQL 실행
   준비된 SQL 쿼리를 PDO로 실행해 데이터를 조회합니다.
6. $stmh = $pdo->prepare($query); foreach ($bindings as $key => $value) { $stmh->bindValue($key, $value, is_int($value) ? PDO::PARAM_INT : PDO::PARAM_STR); } $stmh->execute(); while ($row = $stmh->fetch(PDO::FETCH_ASSOC)) { array_push($todosMain_data, $row); }

---

완성된 검색 로직

위의 코드를 조합해 완성된 PHP 코드는 다음과 같습니다.

require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
require_once($_SERVER['DOCUMENT_ROOT'] . "/lib/mydb.php");

$pdo = db_connect();

$search = $_POST['search'] ?? null;
$radioarray = $_POST['radioarray'] ?? [];

$radioColumnMap = [
    'option1' => 'reply',
    'option2' => 'title',
];

$query = "SELECT * FROM todosMain WHERE is_deleted IS NULL";
$bindings = [];

// 검색 조건 추가
if (!empty($search)) {
    $searchConditions = [];
    $columns = ['reply', 'title'];

    if (!empty($radioarray)) {
        foreach ($radioarray as $radioValue) {
            if (isset($radioColumnMap[$radioValue])) {
                $columns = [$radioColumnMap[$radioValue]];
                break;
            }
        }
    }

    foreach ($columns as $column) {
        $placeholder = ":search_" . $column;
        $searchConditions[] = "$column LIKE $placeholder";
        $bindings[$placeholder] = "%" . $search . "%";
    }

    if (!empty($searchConditions)) {
        $query .= " AND (" . implode(" OR ", $searchConditions) . ")";
    }
}

$stmh = $pdo->prepare($query);

foreach ($bindings as $key => $value) {
    $stmh->bindValue($key, $value, is_int($value) ? PDO::PARAM_INT : PDO::PARAM_STR);
}

$stmh->execute();
$todosMain_data = $stmh->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($todosMain_data, JSON_UNESCAPED_UNICODE);

---

결과 확인

이제 Radio 버튼을 선택하고 검색어를 입력한 뒤 검색을 실행하면, 선택한 조건과 키워드에 맞는 데이터만 결과로 반환됩니다. 예를 들어, Reply를 선택하고 특정 키워드를 입력하면 해당 키워드가 포함된 reply 컬럼의 데이터만 조회됩니다.

이처럼 동적 검색 로직을 구현하면 유저가 더 직관적으로 데이터를 탐색할 수 있어, 웹 애플리케이션의 사용자 경험이 한층 향상됩니다.