MySQL과 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 방법-MySQL 튜토리얼-php.cn

MySQL과 JavaScript를 사용하여 간단한 온라인 투표 기능을 구현하는 방법

PHPz

풀어 주다： 2023-09-21 16:24:30

원래의

750명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!