Kullanıcı oylama dayalı div Taşı

3 Cevap php

Ben burada yeniyim, ama ben siteyi seviyorum. Ben diğer benzer sorular ile kontrol, ama ben aradığım görmedim.

Ben bir müzisyen değilim, ve ben her gün biraz şarkı yazmak bir süre için bir şey bir "gün şarkısı" yapıyorum. I <div> içime gibi şarkıları göndermek istediğiniz <li>. Divlere, ben sadece basit bir mp3 çalar ve "gibi" ya da "antipati" butonuna istiyorum. Kullanıcı oy ve şarkı yukarı veya aşağı <li> oy sayısına dayalı olacaktır.

Ben bu basit tutmak istiyorum matematik-sadece <li> dizisindeki seviyor hoşlanmadığı çıkarılarak ve en yüksekten en düşüğe onları sipariş.

Bu en azından bütün bir oturuşta bir sürü oylama birinin tutmak yerine basit bir tanımlama sistemi için iyi olurdu, ama ben bu konuda çok endişeli değilim.

I've been looking for a simple PHP or Javascript tutorial on this. Can anyone point me in the right directions? Thanks!

3 Cevap

De orada (başlık gibi, müzik dosyası yolu, vb) diğer şarkı bilgileri aracılığıyla yanı sıra bu şarkı bilgi ağırlıklı oy depolamak için merkezi bir konum ihtiyacımız olacak, ama olabilir. Aşağıdaki gibi basit bir MySQL tablo önermek

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

Ben şu HTML yapısını kullandı:

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

Ve CSS bir dokunuş

#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; }

İşte JavaScript jQuery kullanarak, bu

$(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);
    });
});

Ve bazı saplama 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;

Eğer içeri doldurmak için bir streç çok fazla olmamalı ben PHP bırakacağım. Herhangi bir sorunuz varsa bana bildirin.

Evet, bir MySQL tablo onları toplamak gibi oy korumak için, kritik görünüyor. Eğer sayfası oluşturarak gibi Sonra bir işlev, <li> 's sıralı düzende dönmek veya çıkış için. Justin daha geri gelmez, ben daha sonra ekleyeceğiz.

öf-Ben kod snips ile cevap çalışıyorum ama ben köprüleri kullanıyorum bana söylüyor (ben değilim ama ...)

Bu gerçekten harika görünüyor. Ben javascript yukarı ve aşağı şarkı başlıkları taşımak için alabilirsiniz, ama denemek ve vote.php dahil ettiğimizde sorun yaşıyorum

Ben de dahil olmak üzere mıyım? Ben bir baş bölümünde dahil olarak var, ve ben Geçersiz parametreler hatası alıyorum.

Ben db bağlıyorum.

Cheers, joel

etiketler