Я новичок здесь, но мне нравится сайт. Я проверил другие подобные вопросы, но я не видел, что я ищу.
Я музыкант, и я занимаюсь «песней дня», пока я пишу небольшую песню каждый день. Я хочу опубликовать песни как <div> s внутри <li> . В divs мне просто нужен простой mp3-плеер и кнопка «нравится» или «не нравится». Пользователь может проголосовать, и песня будет перемещаться вверх или вниз по <li> зависимости от количества голосов.
Я хочу сохранить это просто с помощью математики, просто вычитая неприязни от подобных в массиве <li> и упорядочивая их с самого высокого на самый низкий.
Было бы неплохо иметь простую систему печенья, чтобы хотя бы заставлять кого-то голосовать за все это за один присест, но я не слишком беспокоюсь об этом.
Я искал простой учебник по PHP или Javascript. Может ли кто-нибудь указать мне правильные направления? Благодаря!
Вам понадобится центральное место для хранения этой информации о песнях, в основном голоса, но вы также можете найти другую информацию о песне (например, название, путь к музыкальному файлу и т. Д.). Я предлагаю простую таблицу 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 для заполнения. Не должно быть слишком много. Дайте знать, если у вас появятся вопросы.
Да, таблица MySQL кажется критической, чтобы сохранить голоса, когда вы их собираете. Затем функция возвращает или выводит <li> в отсортированном порядке, когда вы создаете страницу. Если Джастин больше не вернется, я добавлю позже.