Prosty skrypt HTML/JS do sortowania na telefonie playlisty, listy zadań, utworów do zagrania itp.

Jest to prosty skrypt za którego pomocą można ustawić kolejność piosenek, które będzie grał zespół np. na koncercie albo innym występie.

Może też służyć do dowolnego sortowania elementów w danej kolejności. Mogą to być zaplanowane zadania albo etapy prac nad danym projektem. Listę taką możemy wysłać znajomym albo podesłać im link do zmienienia przez nich. Skrypt nie wymaga logowania i jest odporny na włamanie po ograniczna sie jedynie do edycji pliku tekstowego.

» demo jak to działa.

Lista jest automatycznie zapisywana po każdej zmianie.

Pliki umieszczamy na dowolnym serwerze gdzie mamy dostęp. Nie jest konieczna żadna baza danych. Po kolei omówmy kluczowe elementy.

Skrypt składa się z 3 plików:

piosenki.txt – lista piosenek w formie pliku tekstowego – każda piosenka osobny wiersz
lista.php – kluczowy/wykonujący plik PHP
zapisz.php – plik pomocniczy do zapisywania nowych utworów na liście

Pliki wgrywamy do dowolnego folderu na serwerze i po prostu włączamy:

www.strona-zespolu.pl/folder/lista.php

Omówmy po kolei pliki

Czyli zawartość pliku piosenki.txt będzie to (dla przykładu piosenki albumu AC/DC „Back in Black”):

Hell's Bells
Shoot To Thrill
What Do You Do For Money Honey
Given The Dog A Bone
Let Me Put My Love Into You
Back In Black
You Shook Me All Night Long
Have A Drink On Me
Shake A Leg
Rock And Roll Ain't Noise Pollution

Hell's Bells

Shoot To Thrill

What Do You Do For Money Honey

Given The Dog A Bone

Let Me Put My Love Into You

Back In Black

You Shook Me All Night Long

Have A Drink On Me

Shake A Leg

Rock And Roll Ain't Noise Pollution

Czyli każdy wiersz – osobna piosenka/utwór.

Uwaga! Będzie można dodawać/uswać takze piosenki w tym skrypcie. Ale o tym w dalszej części artykułu.

Następnie przedstawmy elementy kluczowe pliku wykonującego PHP:

Początek piku to kod PHP:

<?php
$plik = 'piosenki.txt';

$ostatnia_modyfikacja = file_exists($plik)
? date('Y-m-d H:i:s', filemtime($plik))
: 'brak danych';

// Dodawanie nowego utworu
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['nowy_utwor'])) {
    $nowy = trim($_POST['nowy_utwor']);
    if ($nowy !== '') {
        $plik_zawartosc = file_exists($plik) ? file($plik, FILE_IGNORE_NEW_LINES) : [];
        $plik_zawartosc[] = $nowy;
        file_put_contents($plik, implode(PHP_EOL, $plik_zawartosc) . PHP_EOL, LOCK_EX);
        header("Location: " . $_SERVER['PHP_SELF']);
        exit;
    }
}

// Usuwanie utworu
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['usun_utwor'])) {
    $usun = trim($_POST['usun_utwor']);
    if ($usun !== '') {
        $linie = file($plik, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        $linie = array_filter($linie, fn($l) => $l !== $usun);
        file_put_contents($plik, implode(PHP_EOL, $linie) . PHP_EOL, LOCK_EX);
        header("Location: " . $_SERVER['PHP_SELF']);
        exit;
    }
}

// Wczytanie listy
$linie = [];
if (file_exists($plik)) {
    $linie = file($plik, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
}
?>

<?php

$plik = 'piosenki.txt';

$ostatnia_modyfikacja = file_exists($plik)

? date('Y-m-d H:i:s', filemtime($plik))

: 'brak danych';

// Dodawanie nowego utworu

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['nowy_utwor'])) {

$nowy = trim($_POST['nowy_utwor']);

if ($nowy !== '') {

$plik_zawartosc = file_exists($plik) ? file($plik, FILE_IGNORE_NEW_LINES) : [];

$plik_zawartosc[] = $nowy;

file_put_contents($plik, implode(PHP_EOL, $plik_zawartosc) . PHP_EOL, LOCK_EX);

header("Location: " . $_SERVER['PHP_SELF']);

exit;

}

// Usuwanie utworu

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['usun_utwor'])) {

$usun = trim($_POST['usun_utwor']);

if ($usun !== '') {

$linie = file($plik, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

$linie = array_filter($linie, fn($l) => $l !== $usun);

file_put_contents($plik, implode(PHP_EOL, $linie) . PHP_EOL, LOCK_EX);

header("Location: " . $_SERVER['PHP_SELF']);

exit;

}

// Wczytanie listy

$linie = [];

if (file_exists($plik)) {

$linie = file($plik, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

}

Realizuje on pobranie ost. daty edycji pliku z piosenkami; dodaje nowy utwór do listy; usuwa stary utwór z listy.

Następnie mamy nagłowek HTML pliku wraz z dyrektywami CSS które go nieco upiększają 😉 Pobieramy też bibliotekę do sortowania utworów przez proste przesunięcie elementów palcem:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setlista</title>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>

<style>
body {
    background: #111;
    color: #fff;
    font-family: Arial, sans-serif;
    padding: 20px;
}

h2 {
    text-align: center;
}

#playlist {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    counter-reset: song-counter;
}

li {
    background: #222;
    margin: 10px 0;
    padding: 20px 20px 20px 50px;
    border-radius: 10px;
    font-size: 18px;
    cursor: grab;
    width: 60%;
    max-width: 600px;
    position: relative;
    counter-increment: song-counter;
}

li:before {
    content: counter(song-counter) ".";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: bold;
}

li:active {
    background: #333;
}

/* formularze */
form {
    margin-top: 20px;
    text-align: center;
}

input[type="text"], select {
    width: 60%;
    max-width: 400px;
    padding: 10px;
    border-radius: 6px;
    border: none;
    margin-right: 10px;
}

input[type="submit"] {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    background: #28a745;
    color: #fff;
    cursor: pointer;
}

input[type="submit"]:hover {
    background: #218838;
}

hr {
    border: 1px solid #444;
    margin-top: 30px;
}
a.refresh {
    color: white;
    text-align: center;
    display: block;
    font-size: 11px;
}
#toast {
    position: fixed;
    top: 15px;
    right: 15px;
    background: #28a745;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
    z-index: 9999;
}

#toast.show {
    opacity: 1;
    transform: translateY(0);
}

</style>
</head>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<head>

<title>Setlista</title>

<style>

body {

background: #111;

color: #fff;

font-family: Arial, sans-serif;

padding: 20px;

}

h2 {

text-align: center;

}

#playlist {

list-style: none;

padding: 0;

display: flex;

flex-direction: column;

align-items: center;

counter-reset: song-counter;

}

li {

background: #222;

margin: 10px 0;

padding: 20px 20px 20px 50px;

border-radius: 10px;

font-size: 18px;

cursor: grab;

width: 60%;

max-width: 600px;

position: relative;

counter-increment: song-counter;

}

li:before {

content: counter(song-counter) ".";

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: #fff;

font-weight: bold;

}

li:active {

background: #333;

}

/* formularze */

form {

margin-top: 20px;

text-align: center;

}

input[type="text"], select {

width: 60%;

max-width: 400px;

padding: 10px;

border-radius: 6px;

border: none;

margin-right: 10px;

}

input[type="submit"] {

padding: 10px 20px;

border-radius: 6px;

border: none;

background: #28a745;

color: #fff;

cursor: pointer;

}

input[type="submit"]:hover {

background: #218838;

}

hr {

border: 1px solid #444;

margin-top: 30px;

}

a.refresh {

color: white;

text-align: center;

display: block;

font-size: 11px;

}

#toast {

position: fixed;

top: 15px;

right: 15px;

background: #28a745;

color: #fff;

padding: 10px 16px;

border-radius: 6px;

font-size: 14px;

opacity: 0;

pointer-events: none;

transition: opacity 0.3s ease, transform 0.3s ease;

transform: translateY(-10px);

z-index: 9999;

}

#toast.show {

opacity: 1;

transform: translateY(0);

}

</style>

</head>

Dalej mamy „ciało” pliku. Czyli wyświetlanie zawartości pliku z piosenkami; formularze HTML do dodawania/usuwania utworów; kontener HTML gdzie jest komunikat o zmianie kolejności:

<body>
<div id="toast">Zapisane</div>
<h2>🎵 Setlista :</h2>
<h3><a class="refresh" href="setlista.php">(odśwież)</a></h3>

<ul id="playlist">
<?php
foreach ($linie as $linia) {
    echo '<li>' . htmlspecialchars($linia) . '</li>';
}
?>
</ul>

<hr>

<!-- Formularz dodawania nowego utworu -->
<form method="POST">
    <input type="text" name="nowy_utwor" placeholder="Nowy utwór" required>
    <input type="submit" value="Dodaj">
</form>

<!-- Formularz usuwania utworu -->
<form method="POST">
    <select name="usun_utwor" required>
        <option value="" disabled selected>Wybierz utwór do usunięcia</option>
        <?php
        foreach ($linie as $linia) {
            echo '<option value="' . htmlspecialchars($linia) . '">' . htmlspecialchars($linia) . '</option>';
        }
        ?>
    </select>
    <input type="submit" onclick="return confirm('Czy napewno?')" value="Usuń">
</form>

<hr>

<!-- Przycisk kopiowania listy -->
<div style="text-align:center; margin-top:20px;">
    <button id="kopiujListę" style="padding:10px 20px; border:none; border-radius:6px; background:#007bff; color:#fff; cursor:pointer;">Kopiuj listę</button>
</div>

<body>

<div id="toast">Zapisane</div>

<h2>🎵 Setlista :</h2>

<h3><a class="refresh" href="setlista.php">(odśwież)</a></h3>

<?php

foreach ($linie as $linia) {

echo '<li>' . htmlspecialchars($linia) . '</li>';

}

</ul>

<hr>

</form>

<option value="" disabled selected>Wybierz utwór do usunięcia</option>

<?php

foreach ($linie as $linia) {

echo '<option value="' . htmlspecialchars($linia) . '">' . htmlspecialchars($linia) . '</option>';

}

</select>

</form>

<hr>

<button id="kopiujListę" style="padding:10px 20px; border:none; border-radius:6px; background:#007bff; color:#fff; cursor:pointer;">Kopiuj listę</button>

</div>

Następne elementy to skrypty Javascript. Realizują one sortowanie i przesuwanie elementów palcem. Dodatkowo umożliwiają skopiowanie bieżącego układu do schowka. Listę można przez to np. przesłać SMSem; skrypty też opowiadają za komunikaty potwierdzające zmiany kolejności przez użytkownika.

<script>
const list = document.getElementById('playlist');

new Sortable(list, {
    animation: 180,
    easing: "cubic-bezier(0.25, 1, 0.5, 1)",
    onEnd: () => {
        const songs = [...list.children].map(li => li.textContent);

        fetch('zapisz.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(songs)
        })
        .then(resp => {
            if (resp.ok) pokazToast();
        });
    }
});

document.getElementById('kopiujListę').addEventListener('click', () => {
    const lista = [...document.querySelectorAll('#playlist li')]
        .map((li, index) => (index + 1) + ". " + li.textContent)  // dodajemy numer
        .join("\n");

    // kopiowanie do schowka
    navigator.clipboard.writeText(lista).then(() => {
        alert('Lista skopiowana do schowka!');
    }).catch(err => {
        console.error('Błąd kopiowania:', err);
    });
});

function pokazToast() {
    const toast = document.getElementById('toast');
    toast.classList.add('show');

    setTimeout(() => {
        toast.classList.remove('show');
    }, 1500);
}

</script>

const list = document.getElementById('playlist');

new Sortable(list, {

animation: 180,

easing: "cubic-bezier(0.25, 1, 0.5, 1)",

onEnd: () => {

const songs = [...list.children].map(li => li.textContent);

fetch('zapisz.php', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify(songs)

})

.then(resp => {

if (resp.ok) pokazToast();

});

}

});

document.getElementById('kopiujListę').addEventListener('click', () => {

const lista = [...document.querySelectorAll('#playlist li')]

.map((li, index) => (index + 1) + ". " + li.textContent) // dodajemy numer

.join("\n");

// kopiowanie do schowka

navigator.clipboard.writeText(lista).then(() => {

alert('Lista skopiowana do schowka!');

}).catch(err => {

console.error('Błąd kopiowania:', err);

});

function pokazToast() {

const toast = document.getElementById('toast');

toast.classList.add('show');

setTimeout(() => {

toast.classList.remove('show');

}, 1500);

}

</script>

Ostatni element tego pliku PHP to informacja kiedy był ostatnio zmieniony układ listy:

<p style="text-align:center; font-size:12px; color:#ccc; margin-top:40px;">
    Ostatnia modyfikacja: <?= $ostatnia_modyfikacja ?>
</p>

</body>
</html>