Leniwe dociąganie większej ilości postów

0

Witam

Wyciągam z bazy danych np. pięć wpisów o wydarzeniach.
Chciałbym, żeby pod spodem był link lub button, po kliknięciu którego, skrypt pobierze (bez przechodzenia na inną stronę) i pokaże pod spodem kolejnych np. 10 wpisów.
Ktoś podpowie jak się do tego zabrać ?

Z góry dziękuję
Lukasz

1

Oczekujesz magicznego sposobu? Nie ma takiego, trzeba napisać.

Prawda, ze udzieliłem maksymalnie szczegółowej odpowiedzi? Takiej jak twoje pytanie.
Używasz jakiegoś frameworka / goły PHP?
Jakiś framework Javascriptowy ?

Dociaganie danych bez przeładowania strony nazywa sie AJAX (nie mówię o przydakach użycia frameworka JS)
Sądzę, że kompleksowe zaimplementowanie ajax-a będzie bardziej skomplikowane niż wyświetlenie pierwszych pięciu

0

Magicznego sposobu raczej nie oczekuję.
Napisałeś mi że AJAX i to już podanie kierunku.
Co do sposobu pracy to: czysty PHP.
Pytam o to, z myślą że może ktoś zna jakieś linki na ten temat.
W każdym razie Dziękuję :)

1
  1. Po stronie frontu - przycisk, który wysyła zapytanie do serwera o dodatkowe dane
  2. Jak wspomniał powyżej @ZrobieDobrze - obczaj technologię AJAX - https://www.w3schools.com/php/php_ajax_php.asp
  3. Ewentualnie, zamiast AJAX, możesz się zainteresować Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
  4. Nie ma tak, że jedno jest lepsze, a drugie gorsze. Obie technologie są podobne, wcale "nowsza" nie powoduje, że AJAX jest zły
  5. Po stronie serwera - musisz mieć jakiś skrypt, który w odpowiedzi na otrzymane zapytanie prześle dane
  6. Musisz mieć jakiś format tych danych. Widzę 3 opcje:
    • własny
    • JSON
    • przesłać już gotowego HTML'a, którego sobie dokleisz na stronę
  7. Po stronie frontu - musisz odebrać te dane
  8. Po ich odebraniu, musisz jakoś je przetworzyć (np. sparsować JSON'a)
  9. Na stronie wyświetlasz/doklejasz pobraną treść do tego, co już masz
  10. Uśmiech zadowolenia i poczucie spełnienia ;)
0

@lukasz_prog: Tutaj już odnośnie technologii powiedziano wszystko. Jeżeli zaś chodzi o sam sposób działania to ja zrobiłbym to w następujący sposób (coś jak paginacja wyników). Po załadowaniu strony wyświetlasz sobie rekordy od 1 do 5 i trzymasz sobie tą informację, że ostatnim rekordem był rekord ID = 5. Następnie po kliknięciu buttona pobierasz z bazy kolejne 10 (w SQL to chyba tak idzie LIMIT 5, 10). No i ostatnia rzecz... kiedy pobierzesz ostatni rekord - "blokujesz" przycisk załaduj więcej.

0

@lukasz_prog:

JEŚLI z niezamieszczenia kodu, i bycia początkujacym wywnioskuję, że to to jest kod jakiejś niskiej jakości, dużo przez tobą.

Np: jak nie masz to jakoś ustrukturyzowane, pierwsze 5 elementów tworzy zupełnie inny kod, niż uzupełnienie ... brrrr.
Zarys tego co podaje słusznie @cerrato to nawet 10x wiecej kodu niż bazowe wyświetlenie pierwszych pieciu
Wcześnie czy póżniej wynajdziesz "własne koło" (własny niskiej jakosci framework) potem będą pytania, żeby było trochę bardziej okrągłe itd ...

Możesz mnie kodem przekonać, że się mylę.
Ale przypuszczalnie zdobyłeś wiedzę dokąd sie da dojśc "ręcznym" kodem, wiedza jest cenna, porzucić, uczyć się czego bardziej perspektywicznego

0

Dzięki za każdą radę !
Pozdrawiam

1

@lukasz_prog: Napisałem Ci taki przykładowy program: https://github.com/T-Regx/lazy-loading

Jakbyś miał jakieś pytania to pisz.

Krótki opis:

  • Plik index.php renderuje widok HTML, z pierwszą stroną postów (na razie ustawiłem 3 posty na stronę). Renderuje cały <body> wraz <head> oraz ładuje script.js, w którym jest front do asynchronicznego doczytywania postów.
    • W widoku który index.php renderuje jest też dataset data-current-page która prezentuje "aktualną stronę".
    • index.php renderuje też <button> do którego podpina się JS i nasłuchuje na kliknięcie
  • Po kliknięciu w <button>, JS sczytuje dataset data-current-page żeby sprawdzić jaka jest aktualnie pokazana strona, zwiększa o +1, i wczytuje kolejną stronę robiąc fetch("index.php?page=1").
  • Kiedy się zawoła index.php z query param ?page=, to wtedy on bierze numer tej aktualnej strony, i zwraca w JSON'ie posty w strukturze [{title,content}].
  • JS odbiera posty, rozparsowuje JSON'a, buduje na froncie DOM (używając document.createElement()), i dokłada go do listy wszystkich postów.
  • Zwiększam aktualną stronę o jeden i zapisuje do data-current-page, tak że jak klikniesz drugi raz, to zostanie wczytana następna strona.

To co możnaby jeszcze dodać, to to że jak przyjdzie pusta odpowiedź, to możnaby schować przycisk do doładowania większej ilości postów.

Rzeczy na które warto zwrócić uwage:

  • Użyłem .innerText, zamiast .innerHTML żeby poprawnie dodawać wartości do widoku
  • Użyłem htmlEntities() renderują widok w PHP, z tego samego powodu
  • Aktualna strona mogłaby być trzymana jako zmienna globalna, cookies, tag albo data set w widoku. Ja wybrałem data set w widoku, bo to i tak widok trzyma stan.
  • Strona jest zwiększana nie po kliknięciu przycisku, tylko dopiero po tym jak się uda wczytać dane, na wypadek gdyby był błąd wczytywania, wtedy ta sama strona się wczyta ponownie.
  • Posty są brane z jednego miejsca, zarówno te renderowane na początku, jak i te później.
  • Jak wyślesz ujemną stronę, to index.php zwróci status 400

1 użytkowników online, w tym zalogowanych: 0, gości: 1