PHP와 AJAX 투표

AJAX 투표

이 AJAX 예제에서, 웹 페이지가 재로드되지 않고도 결과를 얻을 수 있는 투표 프로그램을 보여드리겠습니다.

현재까지 PHP와 AJAX를 좋아하십니까?

Yes:
No:

이 예제에는 네 가지 요소가 포함되어 있습니다：

  • HTML 양식
  • JavaScript
  • PHP 페이지
  • 결과를 저장하는 텍스트 파일

HTML 양식

이 HTML 페이지는 간단한 HTML 양식과 JavaScript 파일과의 연결을 포함하고 있습니다：

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>PHP와 AJAX를 지금까지 좋아하시나요?</h2>
<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

예시 설명 - HTML 양식

그렇게 보이듯이 위의 HTML 페이지에는 간단한 HTML 양식이 있으며, 두 개의 단일 선택 버튼을 가진 <div> 요소가 있습니다.

이렇게 작동합니다:

  • 사용자가 "yes" 또는 "no"를 선택할 때 이벤트가 발생합니다
  • 이벤트가 발생할 때 getVote() 함수를 실행합니다
  • 이 테이블 주위에는 "poll" 이름의 <div>가 있습니다. getVote() 함수에서 데이터가 반환될 때, 반환된 데이터는 이 테이블을 대체합니다.

텍스트 파일

텍스트 파일 (poll_result.txt)에 투표 프로그램에서 수집된 데이터가 저장됩니다.

그런 식으로 보입니다:

0||0

첫 번째 숫자는 "Yes" 투표를 의미하며, 두 번째 숫자는 "No" 투표를 의미합니다.

주석:기억해야 할 것은 웹 서버가 텍스트 파일을 편집할 수 있도록 해야 하며, 웹 서버 (PHP) 외에는 다른 사람이 접근할 수 없어야 합니다.

JavaScript

JavaScript 코드가 "poll.js"에 저장되어 HTML 문서와 연결됩니다：

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged()} 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

예시 설명:

stateChanged()와 GetXmlHttpObject 함수는 PHP와 AJAX 요청 이 절의 예제는 동일합니다

getVote() 함수

사용자가 HTML 형식에서 "yes" 또는 "no"를 선택할 때, 이 함수가 실행됩니다

  1. 서버로 보내는 URL을 정의합니다 (파일 이름)
  2. URL에 (vote) 파라미터를 추가하고, 입력 필드의 내용을 포함한 파라미터를 추가합니다
  3. 랜덤 수를 추가하여 서버가 파일 캐시를 사용하지 않도록 합니다
  4. GetXmlHttpObject 함수를 호출하여 XMLHTTP 객체를 생성하고, 객체가 변화가 발생할 때 stateChanged 함수를 실행하도록 알립니다
  5. 지정된 URL을 사용하여 XMLHTTP 객체를 엽니다
  6. 서버에 HTTP 요청을 보냅니다

PHP 페이지

JavaScript 코드가 호출하는 서버 페이지는 "poll_vote.php"라는 단순한 PHP 파일입니다.

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//투표를 txt 파일에 삽입
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>결과:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

예시 설명:

선택된 값이 JavaScript에서传来되면 다음이 발생합니다:

  1. "poll_result.txt" 파일의 내용을 가져옵니다
  2. 파일 내용을 변수에 넣고 선택된 변수에 1을 누적
  3. 결과를 "poll_result.txt" 파일에 기록
  4. 그래픽으로 표시된 투표 결과를 출력