코딩 스쿨 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 Poll

PHP AJAX Poll : PHP와 AJAX로 투표 시스템 구현하기

PHP와 AJAX를 사용하면 웹 페이지에서 **실시간 투표 시스템(Poll)**을 구현할 수 있습니다. AJAX는 페이지를 새로 고침하지 않고 사용자로부터 비동기적으로 투표를 수집하고, 즉시 투표 결과를 반영할 수 있습니다. 이 방식은 사용자 경험을 향상시키고, 더 동적인 웹 애플리케이션을 만들 수 있도록 도와줍니다.

이 가이드에서는 PHP와 AJAX를 사용하여 **투표 시스템(Poll)**을 구현하는 방법을 설명하고, 실용적인 예제를 제공합니다.

1. 투표 시스템의 기본 흐름

  1. 사용자가 투표 옵션을 선택하고 AJAX 요청을 서버로 전송합니다.
  2. PHP는 요청을 받아 투표 결과를 데이터베이스에 저장하거나 업데이트합니다.
  3. PHP는 최신 투표 결과를 계산하여 AJAX 응답으로 클라이언트에 반환합니다.
  4. JavaScript는 응답받은 결과를 실시간으로 페이지에 표시합니다.

2. 데이터베이스 설정

먼저 투표 결과를 저장할 MySQL 데이터베이스 테이블을 만들어보겠습니다. 이 테이블에는 각 투표 옵션의 투표 수가 저장됩니다.

MySQL 테이블 (poll_options)

CREATE TABLE poll_options (
    id INT AUTO_INCREMENT PRIMARY KEY,
    option_text VARCHAR(255) NOT NULL,
    votes INT DEFAULT 0
);

예시 데이터 삽입

INSERT INTO poll_options (option_text) VALUES
('Option 1'),
('Option 2'),
('Option 3');

이 테이블은 투표 옵션과 각 옵션에 대한 투표 수를 저장합니다.

3. HTML + JavaScript (AJAX 투표 시스템)

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX 투표 시스템</title>
    <script>
        function vote(optionId) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    // 서버 응답을 받아 결과 표시
                    document.getElementById("pollResult").innerHTML = this.responseText;
                }
            };
            // 서버에 POST 요청으로 투표 데이터 전송
            xhttp.open("POST", "vote.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("option=" + optionId);
        }
    </script>
</head>
<body>

<h2>PHP AJAX 투표 시스템</h2>

<!-- 투표 옵션 -->
<p>어떤 옵션을 선택하시겠습니까?</p>
<button type="button" onclick="vote(1)">Option 1</button>
<button type="button" onclick="vote(2)">Option 2</button>
<button type="button" onclick="vote(3)">Option 3</button>

<!-- 투표 결과 표시 -->
<div id="pollResult"></div>

</body>
</html>

설명:

  • 사용자가 투표 버튼을 클릭하면 vote() 함수가 호출되고, AJAX 요청을 통해 서버에 투표 데이터가 전송됩니다.
  • *xhttp.send()*를 사용하여 선택된 옵션의 ID를 서버로 보냅니다.
  • 서버에서 응답받은 최신 투표 결과는 **#pollResult*에 즉시 표시됩니다.

4. PHP (투표 처리 및 결과 반환)

이제 PHP 코드를 작성하여 AJAX 요청을 처리하고, 선택된 투표 옵션에 대한 투표 수를 업데이트한 후, 최신 투표 결과를 반환합니다.

PHP (vote.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로 받은 선택된 옵션 ID
$optionId = $_POST['option'];

// 투표 수 증가
$sql = "UPDATE poll_options SET votes = votes + 1 WHERE id = $optionId";
$conn->query($sql);

// 최신 투표 결과 조회
$sql = "SELECT option_text, votes FROM poll_options";
$result = $conn->query($sql);

// 투표 결과 출력
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo "옵션: " . $row['option_text'] . " - 투표 수: " . $row['votes'] . "<br>";
    }
}

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

설명:

  • PHP는 POST 요청으로 전달된 투표 옵션 ID를 받아 해당 옵션의 투표 수를 업데이트합니다.
  • 투표 수가 업데이트된 후 최신 투표 결과를 조회하여 클라이언트에 반환합니다.
  • 클라이언트는 이 데이터를 받아 화면에 실시간으로 투표 결과를 표시합니다.

5. 전체 코드 요약

HTML + JavaScript (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>PHP AJAX 투표 시스템</title>
    <script>
        function vote(optionId) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("pollResult").innerHTML = this.responseText;
                }
            };
            xhttp.open("POST", "vote.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("option=" + optionId);
        }
    </script>
</head>
<body>

<h2>PHP AJAX 투표 시스템</h2>

<p>어떤 옵션을 선택하시겠습니까?</p>
<button type="button" onclick="vote(1)">Option 1</button>
<button type="button" onclick="vote(2)">Option 2</button>
<button type="button" onclick="vote(3)">Option 3</button>

<div id="pollResult"></div>

</body>
</html>

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

$optionId = $_POST['option'];

// 선택된 옵션의 투표 수 증가
$sql = "UPDATE poll_options SET votes = votes + 1 WHERE id = $optionId";
$conn->query($sql);

// 최신 투표 결과 조회
$sql = "SELECT option_text, votes FROM poll_options";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo "옵션: " . $row['option_text'] . " - 투표 수: " . $row['votes'] . "<br>";
    }
}

$conn->close();
?>

6. 보안 고려 사항

6.1 SQL 인젝션 방지

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

6.2 투표 중복 방지

투표 시스템에서 중복 투표를 방지하기 위해, 사용자의 IP 주소나 세션을 기반으로 하나의 사용자당 하나의 투표만 허용하도록 구현할 수 있습니다.

6.3 XSS 방지

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

7. 추가 기능

7.1 실시간 그래프 추가

투표 결과를 막대 그래프나 파이 차트와 같은 시각적 요소로 표시하면, 투표 결과를 더욱 직관적으로 보여줄 수 있습니다. Chart.js와 같은 JavaScript 라이브러리를 사용할 수 있습니다.

7.2 다양한 투표 방식 지원

단순한 옵션 선택 외에도 다중 선택 투표나 랭킹 투표와 같은 다양한 투표 방식을 구현할 수 있습니다.

요약

PHP와 AJAX를 사용한 **실시간 투표 시스템(Poll)**은 사용자에게 **

즉각적인 피드백**을 제공할 수 있는 중요한 기능입니다. AJAX 요청을 통해 투표 데이터를 서버에 보내고, 페이지를 새로 고침하지 않고도 실시간으로 투표 결과를 반영할 수 있습니다. 이 기능을 구현할 때는 SQL 인젝션 방지와 같은 보안 고려 사항을 지켜야 하며, 중복 투표 방지와 같은 추가 기능도 고려할 수 있습니다.

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