코딩 스쿨 PHP

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ PHP AJAX
PHP AJAX Intro
PHP AJAX PHP
PHP AJAX Database
PHP AJAX XML
PHP AJAX Live Search
PHP AJAX Poll

PHP AJAX Live Search

PHP AJAX Live Search : 실시간 검색 기능 구현

PHP와 AJAX를 사용하면 웹 페이지에서 실시간 검색 기능을 구현할 수 있습니다. AJAX Live Search는 사용자가 검색창에 문자를 입력할 때마다 서버로 비동기 요청을 보내고, 즉시 검색 결과를 화면에 표시하는 방식입니다. 페이지를 새로 고침하지 않고 실시간으로 검색 결과를 보여줄 수 있어 **사용자 경험(UX)**을 크게 향상시킬 수 있습니다.

이 가이드에서는 PHP와 AJAX를 사용하여 실시간 검색 기능을 구현하는 방법을 설명하고, 예제 코드를 제공합니다.

1. AJAX 실시간 검색의 기본 흐름

  1. 사용자가 검색창에 입력할 때마다 AJAX 요청을 서버로 보냅니다.
  2. 서버에서는 PHP와 데이터베이스를 사용하여 입력된 검색어에 해당하는 데이터를 조회합니다.
  3. 조회된 데이터를 클라이언트로 AJAX 응답을 통해 반환합니다.
  4. JavaScript는 서버에서 받은 데이터를 즉시 화면에 표시합니다.

2. 데이터베이스 예시

먼저, 실시간 검색에 사용할 MySQL 데이터베이스의 예시 테이블을 만들어보겠습니다.

MySQL 사용자 테이블 (users)

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL
);

예시 데이터 삽입

INSERT INTO users (name, email) VALUES
('John Doe', 'john@example.com'),
('Jane Doe', 'jane@example.com'),
('Sam Smith', 'sam@example.com'),
('Sara Connor', 'sara@example.com');

이 테이블에는 사용자의 이름과 이메일이 저장되어 있으며, 이름을 기준으로 실시간 검색 기능을 구현하겠습니다.

3. HTML + JavaScript (AJAX 실시간 검색 구현)

HTML과 JavaScript 코드를 작성하여 AJAX 요청을 생성하고, 사용자가 입력할 때마다 서버에 요청을 보냅니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX 실시간 검색</title>
    <script>
        function liveSearch(str) {
            if (str.length == 0) {
                document.getElementById("searchResult").innerHTML = "";
                return;
            }

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("searchResult").innerHTML = this.responseText;
                }
            };
            // 서버에 GET 요청 전송
            xhttp.open("GET", "search.php?q=" + str, true);
            xhttp.send();
        }
    </script>
</head>
<body>

<h2>PHP AJAX 실시간 검색</h2>

<!-- 실시간 검색 입력창 -->
<input type="text" onkeyup="liveSearch(this.value)" placeholder="이름을 입력하세요">

<!-- 검색 결과 표시 -->
<div id="searchResult"></div>

</body>
</html>

설명:

  • onkeyup 이벤트를 사용하여 사용자가 검색창에 입력할 때마다 AJAX 요청을 보내도록 합니다.
  • liveSearch() 함수는 입력된 검색어를 가져와 서버에 AJAX GET 요청을 전송합니다.
  • 서버에서 반환된 검색 결과는 **#searchResult*에 즉시 표시됩니다.

4. PHP (검색 처리)

이제 PHP 코드를 작성하여 AJAX 요청을 처리하고, 검색어에 맞는 결과를 데이터베이스에서 조회한 후 반환합니다.

PHP (search.php)

<?php
// 데이터베이스 연결 설정
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "my_database";

// 데이터베이스 연결
$conn = new mysqli($servername, $username, $password, $dbname);

// 연결 확인
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 검색어를 GET 요청에서 받기
$q = $_GET['q'];

// 검색어가 입력된 경우에만 실행
if (strlen($q) > 0) {
    $sql = "SELECT name, email FROM users WHERE name LIKE '%$q%'";
    $result = $conn->query($sql);

    // 검색 결과 출력
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "이름: " . $row["name"] . " - 이메일: " . $row["email"] . "<br>";
        }
    } else {
        echo "검색 결과가 없습니다.";
    }
}

// 데이터베이스 연결 종료
$conn->close();
?>

설명:

  • PHP는 GET 요청을 통해 전달된 검색어를 받습니다.
  • LIKE 연산자를 사용하여 검색어가 포함된 사용자를 데이터베이스에서 조회합니다.
  • 조회된 결과를 HTML 형식으로 반환하여, 클라이언트 측에서 AJAX 응답으로 처리할 수 있도록 합니다.

5. 전체 코드 요약

HTML + JavaScript (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX 실시간 검색</title>
    <script>
        function liveSearch(str) {
            if (str.length == 0) {
                document.getElementById("searchResult").innerHTML = "";
                return;
            }

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("searchResult").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "search.php?q=" + str, true);
            xhttp.send();
        }
    </script>
</head>
<body>

<h2>PHP AJAX 실시간 검색</h2>

<!-- 검색창 -->
<input type="text" onkeyup="liveSearch(this.value)" placeholder="이름을 입력하세요">

<!-- 실시간 검색 결과 -->
<div id="searchResult"></div>

</body>
</html>

PHP (search.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "my_database";

// 데이터베이스 연결
$conn = new mysqli($servername, $username, $password, $dbname);

// 연결 확인
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$q = $_GET['q'];

if (strlen($q) > 0) {
    $sql = "SELECT name, email FROM users WHERE name LIKE '%$q%'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "이름: " . $row["name"] . " - 이메일: " . $row["email"] . "<br>";
        }
    } else {
        echo "검색 결과가 없습니다.";
    }
}

$conn->close();
?>

6. 보안 고려 사항

6.1 SQL 인젝션 방지

SQL 인젝션 공격을 방지하기 위해 **준비된 쿼리(Prepared Statements)**를 사용하는 것이 좋습니다. PHP의 MySQLi 또는 PDO를 사용하여 파라미터화된 쿼리를 작성할 수 있습니다.

6.2 입력 값 검증

서버로 전송되는 검색어를 처리하기 전에 입력 값의 유효성을 검사해야 합니다. 예를 들어, 검색어의 길이나 형식을 제한하는 등의 처리가 필요할 수 있습니다.

6.3 출력 데이터 인코딩

서버에서 반환되는 검색 결과는 HTML로 직접 삽입되므로, XSS (크로스 사이트 스크립팅) 공격을 방지하기 위해 HTML 인코딩을 사용하는 것이 좋습니다.

7. 추가 기능

7.1 페이징 처리

검색 결과가 많을 경우, AJAX를 통해 페이징 기능을 추가하여 검색 결과를 여러 페이지로 나누어 보여줄 수 있습니다.

7.2 검색 필터 추가

단순히 이름만 검색하는 대신, 이메일 또는 다른 필드로도 검색할 수 있는 필터 기능을 추가할 수 있습니다.

요약

PHP와 AJAX를 사용한 실시간 검색 기능은 웹 페이지에서 사용자 경험(UX)을 크게 개선할 수 있는 중요한 기능입니다. 이 기능을 통해 사용자는 페이지를 새로 고침하지 않고도 실시간으로 검색 결과를 확인할 수 있으며, 빠르고 동적인 웹 애플리케이션을 만들 수 있습니다. SQL 인젝션과 같은 보안 이슈를 방지하기 위해 준비된 쿼리를 사용하는 등 보안 고려 사항을 지키면서 구현해야 합니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com