코딩스쿨

▶ PHP AJAX

PHP AJAX Database

PHP AJAX Database : PHP와 AJAX로 데이터베이스 연동하기

PHP와 AJAX를 사용하면 비동기적으로 서버와 데이터베이스 간의 통신을 처리할 수 있습니다. 이 기술을 사용하여 사용자가 전체 페이지를 새로 고침하지 않고 서버에 데이터를 전송하거나, 데이터베이스에서 데이터를 가져와 동적으로 업데이트할 수 있습니다. AJAX는 클라이언트 측에서 JavaScript로 요청을 보내고, PHP는 서버 측에서 요청을 처리한 후, MySQL 같은 데이터베이스와 상호작용하여 필요한 데이터를 제공하거나 저장합니다.

이 가이드에서는 PHP, AJAX, MySQL을 함께 사용하여 비동기적인 데이터베이스 작업을 처리하는 방법을 설명하고, 실용적인 예제를 제공합니다.

1. AJAX와 데이터베이스 연동 흐름

HTML과 JavaScript에서 AJAX 요청을 생성.
PHP에서 AJAX 요청을 처리하고, MySQL 데이터베이스와 상호작용.
JavaScript에서 서버의 응답을 받아 웹 페이지를 동적으로 업데이트.

2. 사용자 입력을 데이터베이스에 저장하기 (AJAX POST 요청)

HTML + JavaScript (POST 요청으로 데이터 전송)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX 데이터베이스 저장 예제</title>
    <script>
        function saveUser() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response").innerHTML = this.responseText;
                }
            };
            // 서버에 POST 요청 전송
            xhttp.open("POST", "save_user.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            xhttp.send("name=" + name + "&email=" + email);
        }
    </script>
</head>
<body>

<h2>PHP AJAX 데이터베이스 저장 예제</h2>

<!-- 사용자 입력 폼 -->
이름: <input type="text" id="name"><br>
이메일: <input type="text" id="email"><br>
<button type="button" onclick="saveUser()">사용자 저장</button>

<!-- 서버 응답 결과 표시 -->
<div id="response"></div>

</body>
</html>

설명:

HTML에서 사용자로부터 이름과 이메일을 입력받아 JavaScript를 통해 AJAX POST 요청을 보냅니다.
XMLHttpRequest 객체를 사용하여 입력된 데이터를 서버로 전송합니다.

PHP (save_user.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);
}

// POST로 받은 데이터 저장
$name = $_POST['name'];
$email = $_POST['email'];

// 데이터베이스에 사용자 정보 저장
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
    echo "사용자 정보가 성공적으로 저장되었습니다.";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

// 연결 종료
$conn->close();
?>

설명:

PHP는 $_POST를 사용하여 클라이언트로부터 전송된 데이터를 수신합니다.
전송된 데이터를 데이터베이스에 **삽입(INSERT)**하는 SQL 쿼리를 실행합니다.
저장이 성공하면 성공 메시지를, 실패하면 에러 메시지를 반환합니다.

3. 데이터베이스에서 데이터를 조회하기 (AJAX GET 요청)

이 예제에서는 AJAX 요청을 통해 서버에서 데이터를 가져와 클라이언트 측에서 동적으로 표시합니다.

HTML + JavaScript (GET 요청으로 데이터 가져오기)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX 데이터 조회 예제</title>
    <script>
        function loadUsers() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("userList").innerHTML = this.responseText;
                }
            };
            // 서버에 GET 요청 전송
            xhttp.open("GET", "get_users.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>

<h2>PHP AJAX 데이터 조회 예제</h2>

<!-- 버튼 클릭 시 서버에서 사용자 목록을 가져옴 -->
<button type="button" onclick="loadUsers()">사용자 목록 가져오기</button>

<!-- 서버에서 가져온 사용자 목록 표시 -->
<div id="userList"></div>

</body>
</html>

설명:

버튼 클릭 시 AJAX GET 요청을 통해 서버에서 데이터를 가져옵니다.
서버 응답을 받아 HTML 페이지의 특정 영역(예: #userList)에 데이터를 표시합니다.

PHP (get_users.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);
}

// 데이터베이스에서 사용자 정보 조회
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);

// 사용자 목록 출력
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "ID: " . $row["id"] . " - 이름: " . $row["name"] . " - 이메일: " . $row["email"] . "<br>";
    }
} else {
    echo "사용자가 없습니다.";
}

// 연결 종료
$conn->close();
?>

설명:

PHP는 데이터베이스에서 사용자 목록을 SELECT 쿼리로 조회합니다.
결과를 HTML 형식으로 출력하여, 클라이언트가 AJAX 요청을 통해 조회된 데이터를 동적으로 표시할 수 있게 합니다.

4. AJAX와 JSON을 사용해 데이터 주고받기

JSON은 데이터를 구조화된 형식으로 주고받기 위한 가장 널리 사용되는 방식 중 하나입니다. PHP는 데이터를 JSON 형식으로 인코딩하여 응답할 수 있으며, JavaScript는 이를 객체로 변환하여 사용할 수 있습니다.

HTML + JavaScript (JSON 데이터 가져오기)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX JSON 예제</title>
    <script>
        function loadJsonData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse(this.responseText);
                    var output = "";
                    for (var i = 0; i < response.length; i++) {
                        output += "ID: " + response[i].id + " - 이름: " + response[i].name + " - 이메일: " + response[i].email + "<br>";
                    }
                    document.getElementById("jsonResult").innerHTML = output;
                }
            };
            // 서버에 GET 요청 전송
            xhttp.open("GET", "get_users_json.php", true);
            xhttp.send();
        }
    </script>
</head>
<body>

<h2>PHP AJAX JSON 데이터 예제</h2>

<!-- 버튼 클릭 시 JSON 데이터 가져오기 -->
<button type="button" onclick="loadJsonData()">JSON 데이터 가져오기</button>

<!-- JSON으로 가져온 사용자 목록 표시 -->
<div id="jsonResult"></div>

</body>
</html>

PHP (get_users_json.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);
}

// 사용자 정보 조회
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);

$users = array();

// 결과를 배열로 저장
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $users[] = $row;
    }
}

// JSON 형식으로 반환
echo json_encode($users);

// 연결 종료

$conn->close();
?>

설명:

PHP에서 데이터베이스에서 조회된 데이터를 JSON 형식으로 인코딩하여 클라이언트로 응답합니다.
JavaScript는 **JSON.parse()**를 사용해 서버에서 받은 JSON 데이터를 객체로 변환하여 동적으로 처리합니다.

5. 보안 고려 사항

5.1 입력 데이터 검증

AJAX 요청으로 전송되는 데이터는 서버 측에서 반드시 검증해야 합니다. SQL 인젝션 공격을 방지하기 위해 **준비된 쿼리(Prepared Statements)**를 사용하는 것이 좋습니다.

5.2 CSRF 방지

AJAX 요청은 CSRF (Cross-Site Request Forgery) 공격에 취약할 수 있습니다. 서버 측에서 CSRF 토큰을 사용하여 요청의 신뢰성을 검증하는 것이 중요합니다.

5.3 XSS 방지

JavaScript에서 서버 응답을 HTML에 직접 삽입하는 경우, XSS (Cross-Site Scripting) 공격을 방지하기 위해 출력 데이터를 HTML 인코딩하여 처리해야 합니다.

요약

PHP와 AJAX를 사용하면 비동기적으로 데이터베이스와 상호작용할 수 있습니다. AJAX 요청을 통해 클라이언트와 서버 간 데이터를 주고받으며, MySQL 같은 데이터베이스와의 연동도 간편하게 처리할 수 있습니다. POST 요청을 통해 사용자 데이터를 서버에 저장하거나, GET 요청을 통해 서버에서 데이터를 조회하고, 그 결과를 웹 페이지에 동적으로 표시할 수 있습니다. JSON 형식을 사용하면 구조화된 데이터를 쉽게 처리할 수 있으며, 이러한 작업 중 보안을 고려하여 데이터를 검증하고 보호하는 것이 중요합니다.

코딩 스쿨 PHP

PHP AJAX Database

PHP AJAX Database : PHP와 AJAX로 데이터베이스 연동하기

1. AJAX와 데이터베이스 연동 흐름

2. 사용자 입력을 데이터베이스에 저장하기 (AJAX POST 요청)

HTML + JavaScript (POST 요청으로 데이터 전송)

PHP (save_user.php)

3. 데이터베이스에서 데이터를 조회하기 (AJAX GET 요청)

HTML + JavaScript (GET 요청으로 데이터 가져오기)

PHP (get_users.php)

4. AJAX와 JSON을 사용해 데이터 주고받기

HTML + JavaScript (JSON 데이터 가져오기)

PHP (get_users_json.php)

5. 보안 고려 사항

5.1 입력 데이터 검증

5.2 CSRF 방지

5.3 XSS 방지

요약