Переместить div на основе голосования пользователя

Question

Я новичок здесь, но я люблю сайт. Я проверил другие подобные вопросы, но я не увидел, что я ищу.

Я музыкант, и какое-то время я делал "песню дня", где каждый день пишу небольшую песню. Я хочу опубликовать песни как <div>внутри <li>, В div'ах я просто хочу простой mp3-плеер и кнопку "нравится" или "не нравится". Пользователь может голосовать, и песня будет двигаться вверх или вниз <li> на основе количества голосов.

Я хочу, чтобы все было просто с математикой - просто вычитая неприязни из лайков в <li> массив и упорядочение их от высшего к низшему.

Было бы хорошо иметь простую систему cookie, чтобы хотя бы удержать кого-то от большого количества голосов за один раз, но я не слишком обеспокоен этим.

Я искал простое руководство по PHP или Javascript по этому вопросу. Кто-нибудь может указать мне правильные направления? Спасибо!

Answer 1

Вам понадобится центральное место для хранения этой информации о песне, в основном голосов, но вы также можете найти и другую информацию о песне (например, название, путь к музыкальному файлу и т. Д.). Я предлагаю простую таблицу MySQL следующим образом

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)
);

Я использовал следующую структуру HTML:

<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>

И немного 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, используя 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);
    });
});

И немного заглушки PHP для 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>в отсортированном порядке, как вы строите страницу. Если Джастин не вернется с больше, я добавлю больше позже.