I'll start by saying that I'm 16 and I don't have a huge amount of experience with PHP, XML, HTML and JavaScript. Having said this, I love learning! I'm very enthusiastic about programming and coding and that's why I'm here. Although this website is simple and in some ways "stupid" but this is my first website and project and I'd like to be able to complete it.
I have a small, simple site running on a Raspberry Pi 2 in my room. On the site, users vote yes or no. It's that simple. You can check it out at: http://ift.tt/1HEmsF2. My problem is, something isn't working.
The browser is not showing the correct values for the variables taken from the text file. When the yes or no button is pressed, PHP should add 1 to either the $yes variable or the $no variable depending on which button was clicked, obviously. This will be clearer when you see the code below. Sometimes however, the variable is not echoed correctly in the table at the bottom of the page. The variable in the text file is updated each time the button is pressed. This leads me to believe that it's to do with the echoing or the writing and reading speed. On refreshing the page, the table usually updates.
The code below is my HTML page. I think this is correct. Apologies if this shows my lack of experience; I'm open to all suggestions!
<!DOCTYPE HTML>
<!--start of html. sets background image-->
<html style="background-image: url(confectionary.png); color:black; padding:20px;">
<head>
<title>ischrisgay.co.uk | Vote</title>
<!--sets up js funtion for buttons to call and start running it-->
<script type="text/javascript" src="vote.js"></script>
<!--calls css to position yes and no buttons-->
<link rel="stylesheet" href="navbar.css">
</head>
<body>
<!--first header-->
<h1 align="center"><font size="7">Is Chris Gay?</h1>
<!--div with class="menu" allow css above to center the yes and no buttons-->
<div class="menu">
<ul>
<li name="vote" value="0" onclick="getVote(0)"><font size="6"><a href="yes.php">Yes</a></li>
<li name="vote" value="1" onclick="getVote(1)"><font size="6"><a href="no.php">No</a></li>
</ul>
</div>
<!--image of chris-->
<div style="text-align: center;"><img style="width: 800px; height: 600px;" alt="" src="Chris.jpg"></div>
</body>
</html>
Below is the "vote.js" file.
function getVote(int) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
Below is the "poll_vote.php" file.
<?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;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
Below is the code for the "yes.php" page. This is almost identical no the "no.php" page apart from some text.
<!DOCTYPE HTML>
<!--start of html. sets background image-->
<html style="background-image: url(confectionary.png); color:black; padding:20px;">
<head>
<title>Thank You For Voting</title>
<!--calls css to position yes and no buttons-->
<link rel="stylesheet" href="navbar.css">
</head>
<body>
<!--first header-->
<h1 align="center"><font size="6">Thank You For Voting</h1>
<div class="menu">
<ul>
<li><font size="6"><a href="index.html">Home</a></li>
</ul>
</div>
<hr>
<p align="center"><font size="5">You have voted that Chris is gay.</p>
<!--first part of php which declares variables for the table to use-->
<?php
$filename = "poll_result.txt";
$content = file($filename);
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
$total = $yes + $no;
?>
<!--table of results and graph-->
<h4>Result:</h4>
<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>
<tr>
<td>Total number of votes:</td>
<td><?php echo $total; ?></td>
</tr>
</table>
</body>
</html>
This is all the code behind the site apart form some CSS which I believe is irrelevant here.
My questions are:
1) Why does the $total variable not get shown properly in the table?
2) Are there any HTML improvements I can make?
3) How would I go about making one result page that loads different text based on which button was pressed?
To anyone who answers and contributes, thank you so much in advance! If anymore code, information or clarification is needed, I will happily comment.
Thank you!