Jak zrobić możliwośc edycji z poziomu przeglądarki w jednym tagu?

pytanie zadane 16 grudnia 2021 w HTML i CSS przez gatka84 Bywalec (2,150 p.)

Witajcie chwiałabym mieć możliwość edycji jednego tagu na stronie z poziomu przeglądarki, do tej pory zmiana w pliku i wgranie z powrotem na serwer. Czy jest możliwość zrobić to jakoś prosto czy to już wyższa szkoła i przeniesienie całej strony na cms.

<div class="gallery-item kolonia-mala">
   
  <a href="">
    <div class="card">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p>16-12-2021</p>
      </div>
    </div>
  </a>
  <a href="">
    <div class="card">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p>15-12-2021</p>
      </div>
    </div>
  </a>  
  <a href="">
    <div class="card">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p>17-12-2021</p>
      </div>
    </div>
  </a> 
   
</div>

zmiana jest tylko daty w tagach jak np <p>17-12-2021</p> w każdym inna data.

ew propozycje czego mam szukać?

2 odpowiedzi

odpowiedź 16 grudnia 2021 przez Chess Szeryf (76,710 p.)

Napisz swój autorski CMS mini.

Pomysł.

Zapisz w notatniku .txt kilka dat rozdzielonych hash tagiem.

12-09-2021#18-12-2018#30-01-2022

Znak # rozdziela jak przecinek.

Pod nazwą, np. calendar.txt.

Później.

$calendar = file_get_contents('calendar.txt');

$calendar = explode('#', $calendar);

Będzie, np.

[0] => "12-09-2021"

[1] => "18-12-2018"

[2] => "30-01-2022"

Teraz na stronie będziesz miała <form...

I teraz $calendar[0] = "17-09-2021";

Następnie jakiś implode, czy join z # i gotowe.

Do pliku zapisujesz jako

17-09-2021#18-12-2018#30-01-2022

file_put_contents('calendar.txt', $calendar);

Oczywiście, dane do wyświetlenia pobierasz z tego pliku i modyfikujesz również do tego samego, calendar.txt.

komentarz 17 grudnia 2021 przez gatka84 Bywalec (2,150 p.)

Super, że jest możliwość ale jeszcze tego nie do końca ogarniam. Rozumiem, że jest to za pośrednictwem jquery jeśli jest znak $ i w tagu <p> czy id= mam dać [1].

Jeśli to nie problem to prosiła bym o dokładniejsze wytłumaczenie bo jestem dopiero na początku i próbuje to jakoś pomału ogarnąć :) jak to za implodować żeby program wiedział którą date chce zmienić na jaką?

komentarz 17 grudnia 2021 przez VBService Ekspert (253,100 p.)

To bardziej wygląda na php (file_get_contents, explode)

komentarz 17 grudnia 2021 przez Chess Szeryf (76,710 p.)

@gatka84, to bardziej język backendowy bez JavaScript i JQuery.

PHP, tam dolar $ oznacza zmienną.

<form method="get" action="">
  <input type="text" name="datex[]"/>
  <input type="text" name="datex[]"/>
  <input type="submit"/>
</form>

Date:
<p>d1</p>
<p>d2</p>

W pierwszym polu, wpisujesz datę, 22-02-2022. Pole niżej numer daty do zmienienia.

Numer 1, to data1, a 2, to data2.

odpowiedź 17 grudnia 2021 przez VBService Ekspert (253,100 p.)
edycja 17 grudnia 2021 przez VBService

Proponuję użycie <template> i tablicy asocjacyjnej. Wtedy edytujesz dołączany plik (w tym przykładzie: gallery-item.js) i wysyłasz na serwer.

przykład

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />

    <style>
      .gallery-item a:link { 
        text-decoration: none; 
      }
      .gallery-item .card {
        width: 500px;
        height: 150px;
        margin: 0.5em;
        background-position: center center;
        background-repeat: no-repeat;  
      }
      .gallery-item .card .info {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.35);
      }
      .gallery-item .card p {
        padding: 0.5em 1em;
        margin: 0.25em;
      }
      .gallery-item .card p:first-child {
        font: 900 1.5em tahoma;
        color: yellow;  
      }
      .gallery-item .card p:not(:first-child, :last-child) {
        font: 500 1.05em arial;
        color: white;
      }
      .gallery-item .card p:last-child {
        font: 700 1em monospace;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="gallery-item kolonia-mala"></div>
    
    <template id="gallery-item-tmpl">
      <a href="{{href}}">
        <div class="card" style="background-image: url({{background_image}})">
          <div class="info">
            <p>{{title}}</p>
            <p>{{description}}</p>
            <p>{{date}}</p>
          </div>
        </div>
      </a>
    </template>

    <script src="gallery-item.js?v=1.0"></script>
    <script>
      let template, gallery;   
      window.addEventListener('DOMContentLoaded', load);

      function load() {
        template = document.querySelector('#gallery-item-tmpl');
        gallery = document.querySelector('.gallery-item');

        let html_cards = '';
        for (item of gallery_item) {
          let html_card = template.innerHTML.replace('{{background_image}}', item.background_image);
          html_card = html_card.replace('{{title}}', item.title);
          html_card = html_card.replace('{{href}}', item.href);   
          html_card = html_card.replace('{{description}}', item.description);
          html_card = html_card.replace('{{date}}', item.date);    

          html_cards += html_card;
        }

        gallery.innerHTML = html_cards;
      }
    </script>
  </body>
</html>

gallery-item.js

const gallery_item = [
  {
    'background_image':'https://picsum.photos/500/150/?random=1',
    'href':'https://forum.pasja-informatyki.pl/user/gatka84',
    'title':'Tytuł 1',
    'description':'Opis 1',
    'date':'16-12-2021'
  },
  {
    'background_image':'https://picsum.photos/500/150/?random=2',
    'href':'https://forum.pasja-informatyki.pl/user/gatka84',
    'title':'Tytuł 2',
    'description':'Opis 2',
    'date':'15-12-2021'
  },
  {
    'background_image':'https://picsum.photos/500/150/?random=3',
    'href':'https://forum.pasja-informatyki.pl/user/gatka84',
    'title':'Tytuł 3',
    'description':'Opis 3',
    'date':'17-12-2021'
  }
]

P.S. Dlaczego taki zapis?