PHP - AJAX Search: A Beginner's Guide

안녕하세요, 미래의 PHP 마법사 여러분! PHP를 사용한 AJAX 기반 검색 기능의 흥미로운 여정에 함께 가이드를 맡게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저는 이 지식을 여러분과 공유하고 싶어 마음이 뛰네요. 그麼, 손을 비벼서 바로 시작해보죠!

PHP - AJAX Search

AJAX Search는 무엇인가요?

코딩을 시작하기 전에 AJAX 검색이 무엇인지 이해해보겠습니다. 거대한 도서관에서 책을 찾고 있는 상상해보세요. 각 책장을 돌아다니며 책을 확인하는 대신, 책의 이름을 타이پ하고 즉시 결과가 나타나는 것이 얼마나 좋을까요? AJAX 검색이 웹사이트에서 하는 일입니다!

AJAX는 비동기 JavaScript와 XML을 의미합니다. 이것이 복잡하게 들리지 않아도 걱정 마세요. 이 튜토리얼이 끝나면 프로처럼 사용할 수 있을 것입니다!

Step 1: 프로젝트 설정

프로젝트를 위한 파일을 생성해보겠습니다. 필요한 파일 세 가지가 있습니다:

index.html (검색 상자가 있는 메인 페이지)
search.php (검색을 처리할 PHP 스크립트)
script.js (AJAX 요청을 보내는 JavaScript 파일)

index.html 생성

먼저, 간단한 검색 상자가 있는 HTML 파일을 생성해보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Search Example</title>
</head>
<body>
<h1>AJAX Search</h1>
<input type="text" id="searchBox" placeholder="Search...">
<div id="results"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

이 파일에서 우리는 간단한 검색 상자와 결과를 표시할 div를 생성했습니다. 또한, AJAX 호출을 쉽게 하기 위해 jQuery를 포함시키고 script.js 파일을 연결했습니다.

Step 2: PHP 검색 스크립트 생성

이제 search.php 파일을 생성해보겠습니다. 이 파일이 우리 검색 기능의 백엔드가 될 것입니다:

<?php
// 데이터베이스를 시뮬레이션하는 배열
$fruits = array("Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape");

// AJAX 요청에서 검색어 가져오기
$searchTerm = $_GET['term'];

// 검색어에 기반하여 과일 배열 필터링
$results = array_filter($fruits, function($fruit) use ($searchTerm) {
return stripos($fruit, $searchTerm) !== false;
});

// 결과를 JSON으로 반환
echo json_encode(array_values($results));

이를 나누어 설명하겠습니다:

간단한 과일 배열을 데이터베이스로 시뮬레이션합니다.
GET 요청에서 검색어를 가져옵니다.
array_filter를 사용하여 검색어에 매칭되는 과일을 찾습니다.
마지막으로 결과를 JSON으로 반환합니다.

Step 3: JavaScript 파일 생성

이제 흥미로운 부분입니다. script.js 파일을 생성하여 AJAX 마법을 일으키겠습니다!

$(document).ready(function() {
$('#searchBox').on('keyup', function() {
var searchTerm = $(this).val();
if(searchTerm.length > 1) {
$.ajax({
url: 'search.php',
type: 'GET',
data: {term: searchTerm},
dataType: 'json',
success: function(data) {
var results = '';
$.each(data, function(index, value) {
results += '<p>' + value + '</p>';
});
$('#results').html(results);
}
});
} else {
$('#results').html('');
}
});
});

이를 단계별로 설명하겠습니다:

문서가 준비되면 이벤트 리스너를 설정합니다.
검색 상자에서 'keyup' 이벤트를侦听합니다.
검색어가 두 글자 이상이면 AJAX 요청을 보냅니다.
PHP 스크립트에 검색어를 전송합니다.
결과를 받아서 HTML로 포맷ting하고 표시합니다.

그렇게 하면! 세 가지 파일로 완전 기능을 갖춘 AJAX 검색 시스템이 완성됩니다.

모든 것을 함께 이루는 것

이제 모든 조각을 가지고 있으므로, 그들이 어떻게 작동하는지 보겠습니다:

검색 상자에 타이프를 입력하면 JavaScript가 'keyup' 이벤트를 감지합니다.
두 글자 이상이 입력되면 AJAX 요청을 search.php로 보냅니다.
search.php는 검색어를 받아서 매칭되는 과일을 찾아 JSON으로 반환합니다.
JavaScript는 이 JSON을 받아서 HTML로 포맷ting하고 페이지에 표시합니다.

이 모든 과정이 즉시 일어나며, 페이지를 새로 고침할 필요가 없습니다. 멋지죠?

결론

축하합니다! 첫 AJAX 검색 시스템을 완성했습니다. 이것이 시작에 불과합니다. 실제 데이터베이스를 검색하거나 더 복잡한 필터링을 추가하거나 자동 완성 기능을 구현할 수 있습니다.

기억하시라, 프로그래밍을 마스터하는 열쇠는 연습입니다. 이 코드를 수정해보거나 자신의 기능을 추가하고, 가장 중요한 것은 즐기는 것입니다!

이 튜토리얼에서 사용한 방법을 요약한 표입니다:

방법	설명
$.ajax()	jQuery 방법으로 AJAX 요청 수행
array_filter()	PHP 함수로 배열 요소를 필터링
json_encode()	PHP 함수로 PHP 배열을 JSON 문자열로 변환
$.each()	jQuery 방법으로 배열 또는 객체를 반복

계속 코딩하고, 학습하고, 얼마 지나지 않아 놀라운 웹 애플리케이션을 만들 수 있을 것입니다. 다음 번에 만납시다, 행복하게 코딩하세요!

Credits: Image by storyset