jQuery를 사용하여 PHP 및 MySQL의 Ajax 검색 데이터

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/php/ajax-search-data-in-php-mysql-using-jquery

이 게시물에서는 jQuery를 사용하여 PHP 및 MySQL에서 ajax 검색 데이터를 코딩하는 방법을 보여줍니다. 레코드 추가 후 가장 중요한 기능입니다. 데이터를 검색하려면 키워드로 특정 레코드를 검색해야 합니다. Simple Employee Management에 대한 이전 코드를 사용하고 있으며 이 기능을 추가할 것입니다. 이 함수의 결과를 먼저 보여드리겠습니다.





이제 이 함수를 코딩하기 시작하겠습니다. 단계별로 따라해 보세요. 아래에 샘플 소스 코드를 제공하므로 걱정하지 마세요.

1. 데이터베이스 생성

먼저 원하는 이름으로 데이터베이스를 만들어야 합니다. 명령 프롬프트를 열고 MySQL 명령을 사용하여 프로세스를 수행하면 로컬 호스트에 이미 PHPMyAdmin을 설치한 경우 PHPMyAdmin을 쉽게 사용할 수 있습니다.

2. 테이블 생성

그런 다음 "employees"테이블이라는 SQL을 실행합니다.

CREATE TABLE `employees` (
  `id` int(10) NOT NULL,
  `email` varchar(100) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `address` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `employees`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `employees`
  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
COMMIT;

3. 데이터베이스 연결 설정

아래 코드는 여기에서 데이터베이스 자격 증명을 정의하는 사용 가능한 다운로드 소스 코드의 파일config.php입니다.

<?php
    //set the servername
    define("SERVER_NAME", "localhost");
    //set the server username
    define("SERVER_UNAME", "root");
    // set the server password (you must put password here if your using live server)
    define("SERVER_UPASS", "");
    // set the database name
    define("SERVER_DB", "demos");

    // Include functions file
    require_once 'functions.php';

    // Set a variable $db and store db connection
    $db = connectDB();
?>

4. 자바스크립트 기능 설정

이제 우리는 all() 함수라는 이전 자바스크립트 함수를 사용하고 있습니다. 이 함수는 모든 직원의 기록을 서버에 요청하는 ajax이기 때문입니다. 따라서 여기에서 프로세스를 이해하기 위해 원래 코드를 확인하십시오.

이전 all() 함수 코드

function all() 
{
    // Ajax config
    $.ajax({
        type: "GET", //we are using GET method to get all record from the server
        url: 'all.php', // get the route value
        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
            ajaxLoader("#employees-list", "show");
        },
        success: function (response) {//once the request successfully process to the server side it will return result here

            // Parse the json result
            response = JSON.parse(response);

            var html = "";
            // Check if there is available records
            if(response.length) {
                html += '<div class="list-group">';
                // Loop the parsed JSON
                $.each(response, function(key,value) {
                    // Our employee list template
                    html += '<a href="#" class="list-group-item list-group-item-action">';
                    html += "<p>" + value.first_name +' '+ value.last_name + " <span class='list-email'>(" + value.email + ")</span>" + "</p>";
                    html += "<p class='list-address'>" + value.address + "</p>";
                    html += "<button class='btn btn-sm btn-primary mt-2' data-toggle='modal' data-target='#edit-employee-modal' data-id='"+value.id+"'>Edit</button>";
                    html += "<button class='btn btn-sm btn-danger mt-2 ml-2 btn-delete-employee' data-id='"+value.id+"' typle='button'>Delete</button>";
                    html += '</a>';
                });
                html += '</div>';
            } else {
                html += '<div class="alert alert-warning">';
                  html += 'No records found!';
                html += '</div>';
            }

            // Insert the HTML Template and display all employee records
            $("#employees-list").html(html);
        },
        complete: function() {
            ajaxLoader("#employees-list", "hide");
        }
    });
}

이제 위의 코드를 수정하여 검색 기능을 지원하도록 하겠습니다. 아래 업데이트된 함수 코드를 참조하십시오.

/**
 * Get all employees with search keyword
 *
 * @param {string} keyword - The form selector
 * @return {any}
 */
function all(keyword) 
{   
    // Ajax config
    $.ajax({
        type: "GET", //we are using GET method to get all record from the server
        url: 'all.php', // get the route value
        data: {keyword : keyword},
        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
            ajaxLoader("#employees-list", "show");

            // prevent multiple click for search button
            if(keyword != "" && keyword !== undefined) {
                $("#btnSearchEmployees").attr('disabled', true).html("Processing...");
            }
        },
        success: function (response) {//once the request successfully process to the server side it will return result here

            // Parse the json result
            response = JSON.parse(response);

            var html = "";
            // Check if there is available records
            if(response.length) {
                html += '<div class="list-group">';
                // Loop the parsed JSON
                $.each(response, function(key,value) {
                    // Our employee list template
                    html += '<a href="javascript:void(0)" class="list-group-item list-group-item-action">';
                    html += "<p><input type='checkbox' value='"+value.id+"' class='multi-options-action'>&nbsp;" + value.first_name +' '+ value.last_name + " <span class='list-email'>(" + value.email + ")</span>" + "</p>";
                    html += "<p class='list-address'>" + value.address + "</p>";
                    html += "<button class='btn btn-sm btn-primary mt-2' data-toggle='modal' data-target='#edit-employee-modal' data-id='"+value.id+"'>Edit</button>";
                    html += "<button class='btn btn-sm btn-danger mt-2 ml-2 btn-delete-employee' data-id='"+value.id+"' typle='button'>Delete</button>";
                    html += '</a>';
                });
                html += '</div>';
            } else {
                html += '<div class="alert alert-warning">';
                  html += 'No records found!';
                html += '</div>';
            }

            // Insert the HTML Template and display all employee records
            $("#employees-list").html(html);
        },
        complete: function() {
            ajaxLoader("#employees-list", "hide");

            // prevent multiple click for search button
            if(keyword != "" && keyword !== undefined) {
                $("#btnSearchEmployees").attr('disabled', false).html("Search");
            }
        }
    });
}

보시다시피 키워드라는 매개변수를 추가하여 서버에 전달하고 검색 기능을 트리거하고 쿼리한 내용을 표시하는 데 사용할 것입니다. 다음으로 {keyword: keyword}라는 코드 데이터 줄을 추가하여 검색 기능과 함께 제출하면 키워드나 쿼리도 ajax를 통해 제출되도록 했습니다. 그런 다음 검색 버튼을 여러 번 클릭하는 것을 방지하기 위해 아래에 다음 코드를 추가했습니다.

// prevent multiple click for search button
if(keyword != "" && keyword !== undefined) {
   $("#btnSearchEmployees").attr('disabled', true).html("Processing...");
}

ajax의 beforeSend() 함수에서 확인할 수 있습니다. 또한 complete() 함수에서 검색 버튼 비활성화 속성을 제거하는 코드를 한 줄 더 추가했습니다.

// prevent multiple click for search button
if(keyword != "" && keyword !== undefined) {
   $("#btnSearchEmployees").attr('disabled', false).html("Search");
}

이제 내가 all() **함수에서 무엇을 변경하는지 이미 이해했습니다. 그런 다음 계속해서 **search()라는 또 다른 함수를 만들어 보겠습니다.

function search() {
    $("#btnSearchEmployees").on("click", function() {
        var keyword = $("#search-keyword").val();

        all(keyword);

    });
}

그런 다음 jQuery에 search() 함수를 호출하고 로드합니다.

$(document).ready(function() {
    .
    .
    .
    // Search employee
    search();
    .
    .
    .
});

이제 우리의 all.php 파일도 이전에는 모든 직원의 레코드만 호출하는 함수로 수정해 보겠습니다. 이제 쿼리가 있으면 검색할 다른 기능을 추가하겠습니다.

이전 코드는 다음과 같습니다.

<?php
    // include config file
    require_once 'config.php';

    // SQL Statement
    $sql = "SELECT * FROM employees";

    // Process the query
    $results = $db->query($sql);

    // Fetch Associative array
    $row = $results->fetch_all(MYSQLI_ASSOC);

    // Free result set
    $results->free_result();

    // Close the connection after using it
    $db->close();

    // Encode array into json format
    echo json_encode($row);
?>

이제 검색어를 지원하도록 수정해 보겠습니다. 아래의 수정된 코드를 참조하십시오.

<?php
    // include config file
    require_once 'config.php';

    // Check if keyword is existing
    if(isset($_GET['keyword']) && $_GET['keyword'] != ""):

        // Sanitize data
        $request = sanitize($_GET);

        // SQL Statement
        $sql = "SELECT * FROM employees WHERE first_name LIKE '%".$request['keyword']."%' OR last_name LIKE '%".$request['keyword']."%'";
    else:
        // SQL Statement
        $sql = "SELECT * FROM employees";
    endif;


    // Process the query
    $results = $db->query($sql);

    // Fetch Associative array
    $row = $results->fetch_all(MYSQLI_ASSOC);

    // Free result set
    $results->free_result();

    // Close the connection after using it
    $db->close();

    // Encode array into json format
    echo json_encode($row);
?>

위에서 볼 수 있듯이 다음 코드 줄을 추가했습니다.

// Check if keyword is existing
    if(isset($_GET['keyword']) && $_GET['keyword'] != ""):

        // Sanitize data
        $request = sanitize($_GET);

        // SQL Statement
        $sql = "SELECT * FROM employees WHERE first_name LIKE '%".$request['keyword']."%' OR last_name LIKE '%".$request['keyword']."%'";
    else:
        // SQL Statement
        $sql = "SELECT * FROM employees";
    endif;

이 조건은 요청에 $_GET Super Global 변수의 쿼리 또는 키워드 키가 있는지 확인하고 기존의 경우 먼저 데이터를 삭제한 다음 쿼리 문을 수행하여 레코드를 검색하므로 와일드카드 '%와 함께 MySQL LIKE 조건을 사용합니다. ' 키워드의 시작과 끝에서 모든 키워드 쿼리가 일치하도록 합니다.

SQL LIKE 조건에 대한 자세한 내용은 (https://www.w3schools.com/sql/sql_like.asp)을 참조하십시오.

이제 우리는 PHP에서 Ajax 검색 데이터를 작업할 수 있는 모든 기능을 갖추고 있습니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/ajax-search-data-in-php-mysql-using-jquery를 방문하십시오.

행복한 코딩 :)