간단한 html5 투표 시스템

얼마 전에 사용자가 5 가지 옵션 중 하나에 투표 할 수 있도록 5 개의 버튼이있는 간단한 Cocoa (OSX) 앱을 만들었습니다. 버튼을 클릭하면 앱이 어떤 버튼을 클릭했는지에 대한 피드백을 제공하고 투표자에게 감사 드리며 다음 상태로 돌아가 다음 투표자를 허용합니다. 투표는 모든 투표가시 행된 후 검색 될 간단한 텍스트 파일에 작성되었습니다. 아주 간단하지만 그 목적을 위해 OK (내 딸 학교에서 학급 대표를 투표하는 멋진 방법).간단한 html5 투표 시스템

이제 html5를 사용하는 웹 브라우저에 대해 동일한 시스템을 개발해야합니다. 학교는 두 대 이상의 컴퓨터에서 동시에 설정을 실행하려고합니다. 따라서 로컬 서버와 2 ~ 3 대의 컴퓨터가 연결됩니다. 투표 결과는 서버에 기록되어야합니다.

누가 이미이 작업을 수행하고있는 올바른 방향으로 나를 가리킬 수 있습니까? 일부 투표 시스템을 찾았지만 라디오 버튼이나 체크 박스로 모두 작업했습니다. 가능하면 애니메이션이있는 배경에 5 개의 큰 그래픽 (애니메이션 가능)이 필요합니다. 노련한 HTML5 편집기는 모두 매우 간단하다고 생각하지만 초보자입니다.

출처

2012-11-15 ArjenA

HTML만으로는이 작업을 수행 할 수 없습니다. PHP/Python/Ruby와 같이 득표를 기록하려면 서버 측 코드가 필요합니다. – DCoder

내가 생각했던 것보다 훨씬 더 초보자는 ...하지만 심지어 PHP 스크립트는 이처럼 복잡하지 않을 수 있습니까? 어떤 포인터? – ArjenA

가지고있는 질문은 너무 광범위합니다. 이 사이트는 자신의 상황에 덜 부합되는 작고 구체적인 유형의 질문에 더 적합합니다. 일부 자습서 나 책을 찾는 것이 가장 좋습니다. 코드 및 프레임 워크에 문제가있는 경우 다시 안내해 드리겠습니다. – Jeroen

그래, 당신은 '초보자'라고 말했지 만 (FYI, 나는 전문 개발자는 아니지만) 어떤 형식인지 그리고 어떻게 작동 하는지를 알고 있다고 가정합니다. 아래는 매우 간단합니다. AJAX도 사용하지 않을 것입니다. (설명에서의 설명)

코드는 하나의 파일에 있습니다. 당신은 PHP를 언급 했으므로 당신이 그것을 사용할 수 있다고 가정합니다. 아래에서 내가 사용하는 것입니다 :

<? 

if (isset($_POST['vote'])) { // Check if there is a vote POSTed to our page 
    // Store the vote. I don't know how you did it the previous time, I'm just going to write it to a text file 
    $file = fopen("votes.txt", "w"); 
    fwrite($file, $_POST['vote']); 
    fclose($file); 
} 

?> 

<!-- the voting page --> 

<HTML> 
    <HEAD> 
     <title>Vote</title> 
    </HEAD> 
    <BODY> 
     <!-- Create a form to be able to send the vote to the server in the simplest way, but don't display it --> 
     <form action="thispage.html" method="post" style="display:none;"> 
      <!-- I don't know what possible values there are. I'll just take 'foo' and 'bar'. Of course you can add more. --> 
      <input type="radio" name="vote" value="foo" /> 
      <input type="radio" name="vote" value="bar" /> 
     </form> 

     <!-- The images representing the (invisible) radio button --> 
     <!-- I use the data-value attribute to store to which radio button this image corresponds --> 
     <img src="path/to/foo/image" data-value="foo" />Vote FOO<br /> 
     <img src="path/to/bar/image" data-value="bar" />Vote BAR<br /> 

     <!-- Import jQuery for the sake of simplicity. --> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <!-- The trickiest part. The script. --> 
     <script> 
      $("img").click(function() { 
       var value = $(this).data('value');  // Get the value 
       $("input[value='" + value + "']").click();// Click the corresponding radio button 
       $("form").submit(); // Submit the form. 
      }); 
     </script> 
    </BODY> 
</HTML>

테스트하지 않았습니다.

출처

2013-05-02 16:31:21 11684

시간을내어 답변 해 주셔서 감사합니다. 저는이 질문을 반 년 전에 물었습니다. 그 이후로 많은 것을 배웠습니다. 나는 대답을 저장하기위한 MySQL 데이터베이스를 만들고 PHP 스크립트를 호출하여 데이터를 데이터베이스에 추가하는 jQuery 기반 버튼을 만들었다. 위의 코드와 비슷하지만 데이터를 저장하는 텍스트 파일 대신 데이터베이스를 사용했습니다. 이 경우에는 잔인하지만 내 학습 경험에는 매우 좋습니다. – ArjenA

이 질문은 어떤 이유로 든 (아마도 [커뮤니티 사용자] (http://stackoverflow.com/users/-1/community)로 인해) 날짜를 보지 않고 새로운 것으로 가정했기 때문입니다. 내가 나의 대답을 끝내 자마자, 나는 그 질문이 실제로 약 반세기 이전임을 발견했다. 그러나이 대답은 미래의 독자들에게 여전히 유용 할 수 있습니다. @ArjenA – 11684

사과하지 마십시오! 그것은 유용한 대답입니다, 나는 다른 사람들에게 도움이 될 것이라고 확신합니다. – ArjenA

간단한 html5 투표 시스템

답변

관련 문제