Question

I’m looking for any direction on a really quick and dirty webpage. I’m going to have two static items, say person A and person B. I would like to click a (+) or (-) button next to each of them which then increments or decrements an integer that’s displayed relative to each person.

Anyone having a quick tut or anything would be useful.

Aside from this, how hard would it be to keep a viewable log of each time the value was altered either incremented or decremented, would it be easy to add in date/time to that?

Edit

Alright, concerning mysql. I have a db already setup from a previous wordpress installation. I’m going to create a new tables named ‘points’, should this have 2 fields? One for a person A and one for a person B?

Answer 1

Since you want it to remember the value between sessions (ie- if I incremented the counter, left the website, and came back, I expect it to still be incremented) you need to store the value server-side. Databases are the best recommendation for this.

If you’re planning to use PHP (which I assume from the tags), then MySQL is one of the easiest databases to implement. If you already have a MySQL database set up at your host, then this will be easy. If not, how to set up a MySQL database will be another question you need to ask.

Since you want quick and dirty the best method would be a form. Either POST or GET (preferably GET if you want people to send a “vote up this image” link, preferably POST if you don’t want such links to be possible). This is easy, but it also requires reloading the page which is why modern voting systems use AJAX calls (javascript).

Your HTML form would look something like this:

<!-- Person A goes here -->
This person has a score of <!-- We'll do this soon -->.

<form method="get" <!-- or post --> action="vote.php">
<input type="submit" name="submit_button" value="Vote Up!" />
<input type="submit" name="submit_button" value="Vote Down =(" />
<input type="hidden" name="person" value="A" />
</form>

<!-- Similar for person B -->

Note that <!-- --> is the syntax for an HTML comment (these will be removed in the final website)

In vote.php you would need to first see if the form was submitted, then see WHICH submit button was pressed (vote up or down), then see which person it applies to. Then we do our database entry.

<?php
    if(isset($_GET['submit_button'])){
        // They submit the form

        $add = ($_GET['submit_button'] == 'Vote Up!') ? 1 : -1;

        $person = $_GET['person'];

        $link = mysql_connect('localhost', 'user', 'password');
        mysql_select_db('database', $link);
        mysql_query("UPDATE table SET value=value+$add WHERE person=$person");
    } else {
        die("You didn't submit the form =(");
    }
?>

Mind you this is a REALLY dirty method (there is no parsing of the query and no checks made. This is very susceptible to an SQL injection. Do NOT use this in a database with important information. In fact- probably don’t use this at all without a few changes =) )

Now then, this basically takes the table table, finds the entry where person equals whatever person was selected (chosen by which form was used to submit), then adds either +1 or -1 to value. You can change any of these variable names in your own table. The next step: reading the value to display on the previous page. Remember that before I just had the comment <!-- we'll do this soon -->. We’ll get to that now.

In the beginning of your first page you want to read the database. This means your first page must also be PHP.

<?php
    $link = mysql_connect('localhost', 'user', 'password');
    mysql_select_db('database', $link);
    $result = mysql_query("SELECT value FROM table WHERE person=A");
    ...

Now you have a MySQL resource, but you need the value out of it.

    ...
    $row = mysql_fetch_row($result);
    ...

And now we display it with the information.

<!-- Person A goes here -->
This person has a score of <?php echo $row[0]; ?>.

<form method="get" <!-- or post --> action="vote.php">
<input type="submit" name="submit_button" value="Vote Up!" />
<input type="submit" name="submit_button" value="Vote Down =(" />
<input type="hidden" name="person" value="A" />
</form>

Then you repeat for person B. This is really the dirtiest method since it involves one call to the database per person. Ideally you’d grab all values you want in a single call and then iterate over the returned resource and determine who was who. Or, if you really wanted to be fancy, you could already know who was who by using SORT ASC =)

Like I said, though, this is the quickest, easiest, and dirtiest method to do what you want using PHP and MySQL.