Loading:


Prosta ankieta AJAX i PHP przechowująca dane w pliku

Skrypt tworzy prostą ankietę z wykorzystaniem AJAX, wyniki ankiety przechowywane są w pliku tekstowym colors.txt

Aby skrypt działał należy w katalogu ze skryptem utworzyć plik colors.txt i jeśli to konieczne nadać prawa dostępu na 777.



Zobacz efekt




Napisz Artyku³

Listing


//index.html   #############################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<link href="ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ajaxcore.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="dataDiv" class="dataDiv">
<div style="text-align:center;width:50%;margin:2px auto;"> Wybierz kolor </div>
<form method="get" action="ankieta.php">
<table style="margin:0 auto;background-color: #E8E8E8;">
  <tr>
    <td>czerwony</td>
    <td>
      <input type="radio" name="vote" value="czerwony">
    </td>
  </tr>
  <tr>
    <td>zielony</td>
    <td>
      <input type="radio" name="vote" value="zielony">
    <td>
  </tr>
  <tr>
    <td>niebieski</td>
    <td>
      <input type="radio" name="vote" value="niebieski">
    <td>
  </tr>
  <tr>
    <td>fioletowy</td>
    <td>
      <input type="radio" name="vote" value="fioletowy">
    <td>
  </tr>
  <tr>
    <td>czarny</td>
    <td>
      <input type="radio" name="vote" value="czarny">
    <td>
  </tr>
  <tr>
    <td colspan="2">
    </td>
  </tr>
</table>
</form>
<div style="width:50%;margin:10px auto;text-align:center;">
  <input type="button" value="Głosuj" id="btnGlosuj"
         class="myButton" onclick="startRequest();">
</div>
</div>
</body>
</html>





//vote.php   #############################################

<?php
function vote()
{
  if(!isSet($_GET["vote"]) || $_GET["vote"] == ""){
    echo("Nie została zaznaczona żadna z opcji.");
    return false;
  }
  else{
    $color = $_GET["vote"];
  }

  if(file_exists("colors.txt")){
    if(($fp = fopen("colors.txt", "r+")) === false){
      echo("Błąd serwera. Głos nie został uwzględniony.");
      return false;
    }
  }
  else{
    if(($fp = fopen("colors.txt", "w+")) === false){
      echo("Błąd serwera. Głos nie został uwzględniony.");
      return false;
    }
  }

  $czerwony = intval(fgets($fp));
  $zielony = intval(fgets($fp));
  $niebieski = intval(fgets($fp));
  $fioletowy = intval(fgets($fp));
  $czarny = intval(fgets($fp));

  switch($color){
    case "czerwony":$czerwony++;break;
    case "zielony":$zielony++;break;
    case "niebieski":$niebieski++;break;
    case "fioletowy":$fioletowy++;break;
    case "czarny":$czarny++;break;
  }
  fseek($fp, 0);
  fputs($fp, $czerwony."\r\n");
  fputs($fp, $zielony."\r\n");
  fputs($fp, $niebieski."\r\n");
  fputs($fp, $fioletowy."\r\n");
  fputs($fp, $czarny."\r\n");
  fclose($fp);
  return true;
}

function show()
{
  if(file_exists("colors.txt")){
    if(($fp = fopen("colors.txt", "r")) === false){
      echo("Błąd serwera. Wyniki ankiety nie są dostępne.");
      return;
    }
  }
  else{
    if(($fp = fopen("colors.txt", "w+")) === false){
      echo("Błąd serwera. Wyniki ankiety nie są dostępne.");
      return;
    }
  }

  $czerwony = intval(fgets($fp));
  $zielony = intval(fgets($fp));
  $niebieski = intval(fgets($fp));
  $fioletowy = intval(fgets($fp));
  $czarny = intval(fgets($fp));

  $votes_no = $czerwony + $zielony + $niebieski + $fioletowy + $czarny;
  $votes_no == 0?$votes_no = 1:0;

  $czerwony_proc = sprintf("%.2f", $czerwony * 100 / $votes_no);
  $zielony_proc = sprintf("%.2f", $zielony * 100 / $votes_no);
  $niebieski_proc = sprintf("%.2f", $niebieski * 100 / $votes_no);
  $fioletowy_proc = sprintf("%.2f", $fioletowy * 100 / $votes_no);
  $czarny_proc = sprintf("%.2f", $czarny * 100 / $votes_no);
?>
<table border='0' cellpadding="0" cellspacing="0">
<tr style="background-color:#F0F0F0">
  <td>Nazwa koloru</td>
  <td>Liczba głosów</td>
  <td>Procent głosów</td>
</tr>
<tr>
  <td>czerwony</td><td> <?php echo $czerwony; ?> </td>
  <td><?php echo $czerwony_proc; ?></td>
</tr>

<tr>
  <td>zielony</td><td> <?php echo $zielony; ?> </td>
  <td><?php echo $zielony_proc; ?></td>
</tr>

<tr>
  <td>niebieski</td><td> <?php echo $niebieski; ?> </td>
  <td><?php echo $niebieski_proc; ?></td>
</tr>

<tr>
  <td>fioletowy</td><td> <?php echo $fioletowy; ?> </td>
  <td><?php echo $fioletowy_proc; ?></td>
</tr>

<tr>
  <td>czarny</td><td> <?php echo $czarny; ?> </td>
  <td><?php echo $czarny_proc; ?></td>
</tr>
</table>

<?php
}

if(vote()){
  show();
}
?>




//ajaxcss.css   #############################################

.mainDiv
{
  color: #333333;
  position: relative;
  background-color: #EFEFEF;
  border: 1px solid #000000;
  margin: 10px 10px 10px 10px;
  padding: 14px 14px 14px 14px;
  width: 350px;
  visibility: visible;
}

.dataDiv
{
  color: #333333;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #000000;
  margin: 10px 10px 10px 10px;
  padding: 14px 14px 14px 14px;
  width: 420px;
  visibility: visible;
}

.myButton
{
  font-family:helvetica,sans-serif;
  font-size:84%;
  font-weight:bold;
  border:1px solid;
  border-top-color:#696;
  border-left-color:#696;
  border-right-color:#363;
  border-bottom-color:#363;
  width:120px;
  margin:5px;
}

.myTextInput
{
  border:1px solid;
  background-color: #F8F8F8;
  border-top-color:#696;
  border-left-color:#696;
  border-right-color:#363;
  border-bottom-color:#363;
  width:70%;
}



//ajaxcore.js   #############################################

function getXMLHttpRequestObject()
{
  try{
    return new XMLHttpRequest();
  }
  catch(e){
    try{
      return new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e){
      return false;
    }
  }
}

function startGETRequest(url, onComplete, onEnd)
{
  var XMLHttpRequestObject = getXMLHttpRequestObject();
  if(XMLHttpRequestObject){
    XMLHttpRequestObject.open("GET", url);
    XMLHttpRequestObject.onreadystatechange = function()
    {
      if (XMLHttpRequestObject.readyState == 4){
        if(XMLHttpRequestObject.status == 200){
          var responseXML = XMLHttpRequestObject.responseXML;
          var responseText = XMLHttpRequestObject.responseText;
          onComplete(responseText, responseXML);
        }
        delete XMLHttpRequestObject;
        onEnd();
      }
    }
    XMLHttpRequestObject.send(null);
  }
}

function startPOSTRequest(url, params, onComplete, onEnd)
{
  var XMLHttpRequestObject = getXMLHttpRequestObject();
  if(XMLHttpRequestObject){
    XMLHttpRequestObject.open("POST", url);
    XMLHttpRequestObject.setRequestHeader(
      'Content-Type', 'application/x-www-form-urlencoded');
    XMLHttpRequestObject.onreadystatechange = function()
    {
      if (XMLHttpRequestObject.readyState == 4){
        if(XMLHttpRequestObject.status == 200){
          var responseXML = XMLHttpRequestObject.responseXML;
          var responseText = XMLHttpRequestObject.responseText;
          onComplete(responseText, responseXML);
        }
        delete XMLHttpRequestObject;
        onEnd();
      }
    }
    XMLHttpRequestObject.send(params);
  }
}


//ajax.js   #############################################

function startRequest(param)
{
  var btnGlosuj = document.getElementById("btnGlosuj");
  btnGlosuj.disabled = true;

  var radioGroup = document.forms[0].vote;
 
  for(i = 0; i < radioGroup.length; i++){
    if(radioGroup[i].checked == true){
      url = "vote.php?vote=";
      url += radioGroup[i].value;
      startGETRequest(url, onComplete, onEnd);
      return;
    }
  }
  alert("Proszę zaznaczyć jedną z opcji.");
}

function onComplete(text, xml)
{
  var dataDiv = document.getElementById("dataDiv");
  dataDiv.innerHTML = text;
}

function onEnd()
{
}
 




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2021 v.1.5 | design: diviXdesign & rainbowcolors