Dzień dobry wszystkim. Na początku zaznaczę, że nie zajmuję się programowaniem, próbuję coś zrobić samemu bazując na wiedzy z intenretu.
Zrobiłem bardzo prostą stronę internetową na potrzebę dość wąskiej grupy użytkowników. Wrzucam tam swoje filmy, a strona najczęściej jest oglądana przez przeglądarki ze smartfonów. Wszystko działa ok, pojawia się tabela z filmami, każdy film ma swoje kontrolki odtwarzania, domyślne, bo ja ich w żaden sposób nie programowałem. Wszystko działa, ale chciałbym dodać statystykę, które z filmów były oglądane plus kiedy były odtwarzane. Poniżej kod, który mam aktualnie, następnie zmodyfikowany i dodany nowy plik wgrany na serwer, niestety nic się nie zapisuje do pliku films.txt. Pojawia mi się dodatkowe pole "Odtwórz film 006" ale jest nieaktywne, a poza tym ja chciałbym, żeby nie było dodatkowych pól, tylko odtwarzanie było jak dotychczas, czyli poprzez domyślną kontrolkę. Nie chciałbym także, by strona w jakiś sposób musiała się przeładować. Zostawiłem komentarze, które znalazłem przy poradach jak to zrobić, wybrałem opcję Node,js, stąd dodatkowy plik wgrany na serwer. Będę bardzo wdzięczny za pomoc.

Pierwotny kod:
Kod
<!DOCTYPE html>
<html lang="pl">

<head>
<meta charset="utf-8">
<style type="text/css">
<!--

table.tabela {
   border: 2px solid white;
   border-collapse: collapse;
   margin: 0 auto;
}
table.tabela td {
   border: 2px solid white;
   border-bottom: 2px dotted white;
   border-top: 2px dotted white;
}
table.tabela td.inne {
   border-bottom: 2px solid white;
}

-->
</style>
</head>

<body style="background-image: url(tlo.png); background-repeat: repeat;">

<table class="tabela">

  <tr style="border-bottom: double black">
    <td colspan="2" class="inne" style="text-align: center; background-color: white"><span style="font-size: large; font-weight: bold; color: black">
    Napis tytułowy 1<br>
    </span></td>
  </tr>

  <tr>
    <td style="width: 50%"><video controls width="350" poster="006.jpg"><source src="006.mp4" type="video/mp4"></video></td>
    <td style="width: 50%"><video controls width="350" poster="005.jpg"><source src="005.mp4" type="video/mp4"></video></td>
  </tr>
  <tr>
    <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("006.mp4")); ?></span></td>
    <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("005.mp4")); ?></span></td>
  </tr>

</table>
</body>
</html>


Zmodyfikowany kod:
Kod
<!DOCTYPE html>
<html lang="pl">

<head>
<meta charset="utf-8">
<style type="text/css">
<!--

table.tabela {
   border: 2px solid white;
   border-collapse: collapse;
   margin: 0 auto;
}
table.tabela td {
   border: 2px solid white;
   border-bottom: 2px dotted white;
   border-top: 2px dotted white;
}
table.tabela td.inne {
   border-bottom: 2px solid white;
}

-->
</style>

<script>
  // Funkcja zapisująca informacje o odtwarzanych filmach
  function zapiszInformacjeOFilmie(nazwaFilmu) {
    const dzisiaj = new Date();
    const data = dzisiaj.toLocaleDateString();
    const godzina = dzisiaj.toLocaleTimeString();

    // Tworzenie tekstu do zapisania
    const informacje = `${nazwaFilmu} odtworzono dnia ${data} o godzinie ${godzina}\n`;

    // Zapis do pliku film.txt (możesz dostosować ścieżkę)
    // Tutaj używam fikcyjnej ścieżki "/sciezka/do/pliku/film.txt"
    // W rzeczywistości musisz dostosować to do swojej struktury plików
    const sciezkaDoPliku = "./films.txt";
    // Wykorzystanie odpowiedniej metody zapisu (np. AJAX, Fetch lub Node.js)
    // W tym przykładzie użyję console.log do symulacji zapisu
    console.log(informacje);
  }
</script>

</head>

<body style="background-image: url(tlo.png); background-repeat: repeat;">

<table class="tabela">

  <tr style="border-bottom: double black">
    <td colspan="2" class="inne" style="text-align: center; background-color: white"><span style="font-size: large; font-weight: bold; color: black">
    Napis tytułowy 1<br>
    </span></td>
  </tr>

  <tr>
    <td style="width: 50%"><video controls width="350" poster="006.jpg"><source src="006.mp4" type="video/mp4"></video><button onclick="zapiszInformacjeOFilmie('Film 006')">Odtwórz Film 006</button></td>
    <td style="width: 50%"><video controls width="350" poster="005.jpg"><source src="005.mp4" type="video/mp4"></video><button onclick="zapiszInformacjeOFilmie('Film 005')">Odtwórz Film 005</button></td>
  </tr>
  <tr>
    <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("006.mp4")); ?></span></td>
    <td class="inne" style="width: 50%; text-align: center"><span style="font-size: large; color: white"><? echo 'Klip dodany w dniu '.date('d.m.Y',filemtime("005.mp4")); ?></span></td>
  </tr>

</table>

</body>
</html>


Dodatkowy plik:
Kod
// server.js
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = 3000; // Wybierz dowolny port

app.use(bodyParser.json());

// Obsługa żądania POST
app.post('/save-film-data', (req, res) => {
  const { filmName, date, time } = req.body; // Dane przekazane z klienta

  // Tworzenie tekstu do zapisania
  const filmInfo = `${filmName} odtworzono dnia ${date} o godzinie ${time}\n`;

  // Zapis do pliku (np. film.txt)
  fs.appendFile('film.txt', filmInfo, (err) => {
    if (err) {
      console.error('Błąd podczas zapisu do pliku:', err);
      res.status(500).send('Błąd podczas zapisu');
    } else {
      console.log('Informacje o filmie zapisane!');
      res.status(200).send('Informacje zapisane');
    }
  });
});

app.listen(port, () => {
  console.log(`Serwer nasłuchuje na porcie ${port}`);
});