MySQL과 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 방법
- PHPz원래의
- 2023-09-21 16:24:30743검색
MySQL과 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 방법
현대 소셜 미디어 시대에 온라인 투표 기능은 많은 웹사이트와 플랫폼에서 중요한 기능이 되었습니다. 이 기사에서는 MySQL과 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
- 데이터베이스 테이블 생성
먼저, 투표 관련 데이터를 저장할 테이블을 MySQL에 생성해야 합니다. 최소한 다음 필드를 포함하는 vote라는 테이블을 생성할 수 있습니다.
- id: 자체 증가 정수 유형을 사용할 수 있는 투표의 고유 식별자입니다.
- title: 투표 제목은 VARCHAR 형식을 사용할 수 있습니다.
- options: JSON 문자열을 사용하여 저장할 수 있는 투표 옵션 목록입니다(예: ['option1', 'option2', 'option3']).
- votes: 각 옵션에 대한 투표수, 정수형을 사용할 수 있습니다.
다음은 MySQL에서 투표 테이블을 생성하는 샘플 코드입니다.
CREATE TABLE vote ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255), options TEXT, votes INT );
- 투표 데이터 삽입
다음으로 테이블에 투표 데이터를 삽입해야 합니다. 여기에서 투표 질문, 옵션 및 초기 투표 수를 테이블에 삽입하는 INSERT 문을 작성할 수 있습니다. 다음은 샘플 코드입니다.
INSERT INTO vote (title, options, votes) VALUES ( '最喜欢的食物', '["汉堡", "披萨", "寿司"]', 0 );
- 프런트 엔드 인터페이스 만들기
이제 HTML, CSS 및 JavaScript를 사용하여 투표 질문과 옵션을 표시하고 투표 로직을 처리하는 프런트 엔드 인터페이스 작성을 시작합니다. 다음은 간단한 HTML 인터페이스 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>在线投票</title>
<style>
/* 样式代码 */
</style>
</head>
<body>
<h1>最喜欢的食物</h1>
<ul id="options">
<li><input type="radio" name="option" value="0"> 汉堡</li>
<li><input type="radio" name="option" value="1"> 披萨</li>
<li><input type="radio" name="option" value="2"> 寿司</li>
</ul>
<button onclick="vote()">投票</button>
<p id="result"></p>
<script>
// JavaScript代码
</script>
</body>
</html>- 투표 논리 처리
JavaScript 코드에서는 백엔드와 상호 작용하는 논리를 작성해야 합니다. 첫째, Ajax 기술을 사용하여 서버 측에서 투표 데이터를 얻고 이를 프런트엔드 인터페이스에 표시할 수 있습니다. 샘플 코드는 다음과 같습니다.
function getVote() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var vote = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = "总共有 " + vote.votes + " 票";
}
};
xhr.open("GET", "get_vote.php", true);
xhr.send();
}
window.onload = getVote;다음으로 투표 로직도 작성해야 합니다. 사용자가 투표 버튼을 클릭하면 사용자가 선택한 옵션을 가져오고 Ajax를 사용하여 업데이트를 위해 투표 데이터를 서버 측으로 보냅니다. 샘플 코드는 다음과 같습니다.
function vote() {
var option = document.querySelector('input[name="option"]:checked').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var vote = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML = "总共有 " + vote.votes + " 票";
}
};
xhr.open("POST", "vote.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("option=" + option);
}- 투표 요청 처리
마지막으로 투표 요청을 처리하기 위한 서버측 스크립트를 작성해야 합니다. 여기서는 PHP를 사용하여 POST 요청을 처리하고 데이터베이스의 투표 데이터를 업데이트할 수 있습니다. 샘플 코드는 다음과 같습니다.
<?php $option = $_POST['option']; // 从数据库中获取投票数据 $vote = getVoteFromDatabase(); // 更新选项的投票数 $vote['votes'][$option]++; // 将更新后的投票数据存回数据库 saveVoteToDatabase($vote); // 将更新后的投票数据返回给前端 echo json_encode($vote); ?>
이 시점에서 MySQL 및 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 단계를 완료했습니다. 위의 코드 예시를 통해 투표 기능이 포함된 웹페이지를 생성하고, 사용자 투표 후 실시간으로 투표 결과를 업데이트할 수 있습니다. 물론, 실제 투표 기능은 위의 코드 예시 외에도 보안, 사용자 경험, 오류 처리 등 더 많은 문제를 고려해야 하지만, 이 기사가 시작 가이드를 제공할 수 있기를 바랍니다.
위 내용은 MySQL과 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!