Move div based on user vote

Question

I'm new here, but I like the site. I checked other similar questions, but I did not see what I was looking for.

I am a musician and I do the song of the day while I write a little song every day. I want to publish songs as <div>inside <li>. In divs, I just need a simple mp3 player and a like or dislike button. The user can vote and the song will move up or down based <li>on the number of votes.

I want this to be simple with math, simply subtracting the dislikes from the likes in the array <li>and ordering them from the highest to the lowest.

It would be nice to have a simple cookie system to at least keep someone voting for one meeting, but I'm not too concerned about that.

I was looking for a simple PHP or Javascript tutorial. Can someone point me in the right directions? Thanks!

Answer 1

You will need a central place to store this song information, mainly voices, but you can also find other information about the song (for example, name, path to the music file, etc.). I suggest a simple MySQL table as follows

CREATE TABLE daily_song (
    daily_song_id SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
    vote          INT          NOT NULL DEFAULT 0,
    title         VARCHAR(255) NOT NULL DEFAULT "" COMMENT "Name of the song",
    path          VARCHAR(255) NOT NULL DEFAULT "" COMMENT "Path to the song on the server",
    ctime         DATETIME     NOT NULL            COMMENT "Datetime the song was added",
    PRIMARY KEY(daily_song_id)
);

I used the following HTML structure:

<ul id="daily-songs">
    <li id="song-id-1">
        <h3>Song 1</h3>
        <div class="voting-controls">
            <a href="#" class="vote-up">Up</a>
            <div class="votes">8</div>
            <a href="#" class="vote-down">Down</a>
        </div>
        <div class="player"></div>
    </li>
    <li id="song-id-2">
        <h3>Song 2</h3>
        <div class="player"></div>
        <div class="voting-controls">
            <a href="#" class="vote-up">Up</a>
            <div class="votes">5</div>
            <a href="#" class="vote-down">Down</a>
        </div>
    </li>
    <li id="song-id-3">
        <h3>Song 3</h3>
        <div class="player"></div>
        <div class="voting-controls">
            <a href="#" class="vote-up">Up</a>
            <div class="votes">4</div>
            <a href="#" class="vote-down">Down</a>
        </div>
    </li>
</ul>

And a touch of CSS

#daily-songs li { clear: both; list-style: none; }
#daily-songs h3 { margin: 0 10px 0 0; float: left; }
#daily-songs .voting-controls { height: 1em; }
#daily-songs .voting-controls * { float: left; }
#daily-songs .voting-controls .votes { padding: 0 10px; }

JavaScript here using jQuery

$(function() {
    var listContainer = $("#daily-songs"),
        songs         = [];
    var songSort = function(a, b) {
        return +b.vote.text() - +a.vote.text();
    };

    var submitVote = function(song, delta) {
        $.post("vote.php", 
            {
                id:    song.node.attr("id").match(/\d+$/)[0],
                delta: delta,
                votes: song.vote.text() // temporary
            }, 
            function(data) {
                if ( isNaN(data) ) { return; }
                song.vote.text(data);

                // Re-order the song list
                $.each(songs.sort(songSort), function() {
                    listContainer.append(this.node);
                });
            }
        );
    };

    listContainer.find("li").each(function() {
        var $this = $(this); 
        var song  = {
            node: $this,
            vote: $this.find(".votes")
        };
        $this.find(".vote-up").click(function() {
            submitVote(song, 1);
        });
        $this.find(".vote-down").click(function() {
            submitVote(song, -1);
        });

        songs.push(song);
    });
});

And some PHP stubs for vote.php:

<?php

$songId = !empty($_POST['id'])    ? (int)$_POST['id']    : 0;
$delta  = !empty($_POST['delta']) ? (int)$_POST['delta'] : 0;

if ( !$songId || !$delta ) {
    die("Invalid parameters");
}

// Make sure the voting value is within the valid rang
$delta = $delta > 0 ? 1 : -1;

// Check to see if user has already voted for this song,

// If they haven't voted yet, connect to the database

// If the database connection is succesful, update song entry
// UPDATE daily_song SET votes=votes+$delta WHERE daily_song_id=$songId

// If the UPDATE is successful, SELECT the new vote value
// SELECT vote FROM daily_song WHERE daily_song_id=$songId

// Output the new vote value

// But for now, just accept the current vote and apply the delta
echo $_POST['votes'] + $delta;

PHP . . , .

Answer 2

, MySQL , , . <li> , . , .