5

私はここに来たばかりですが、このサイトが大好きです。他の同様の質問を確認しましたが、探しているものがわかりませんでした。

私はミュージシャンで、毎日ちょっとした曲を書く「今日の歌」という活動をしばらく続けています。<div>の中に曲を投稿したい<li>。div では、単純な mp3 プレーヤーと、「好き」または「嫌い」ボタンが欲しいだけです。ユーザーは投票することができ、投票<li>数に基づいて曲が上または下に移動します。

私はこれを数学で単純に保ちたいと思ってい<li>ます.配列内の好きなものから嫌いなものを差し引いて、それらを最高のものから最低のものに並べるだけです.

少なくとも誰かが一度にたくさん投票するのを防ぐために、単純な Cookie システムを設置するのは良いことですが、私はそれについてあまり心配していません.

これに関する簡単なPHPまたはJavascriptのチュートリアルを探していました。誰かが私を正しい方向に向けることができますか? ありがとう！

4

2 に答える 2

4

この曲の情報、主に投票を保存するための中央の場所が必要になりますが、そこに他の曲の情報 (タイトル、音楽ファイルへのパスなど) を保存することもできます。次のような単純な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; }

jQuery を使用した JavaScript は次のとおりです。

$(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 は、あなたが記入するために残しておきます。ご不明な点がございましたら、お知らせください。

于 2010-01-01T04:50:03.797 に答える
0

ええ、MySQL テーブルは、投票を収集しながら維持するために重要なようです。<li>次に、ページを作成しているときに、ソートされた順序でを返すか出力する関数。ジャスティンがもっと戻ってこない場合は、後で追加します.

于 2010-01-01T21:20:31.407 に答える