SwP #3: Lista książek – tablice i pętle

Co to za sklep bez produktów? Żaden i dlatego dziś dodamy kilka książek.

 

Każdy blok (kontener) z książką będzie zawierał obrazek okładki, tytuł, autora, krótki opis i cenę. Blok każdej książki będzie posiadał ten sam kod HTML, więc nie ma sensu dodawać każdą książkę z osobna – nie lubimy powtórzeń szczególnie, że jak będziemy chcieli coś zmienić to będzie trzeba zmienić w wielu miejscach. Do wyświetlenia wszystkich książek posłużymy się pętlą dzięki której będziemy mieli tylko jeden fragment kodu HTML (i PHP). Zanim do tego przejdziemy potrzebujemy się „przygotować”.

 

Tablica

Jak (krótko) wspomniałem w poprzedniej części tablica to zbiór innych zmiennych – pudełko do którego wkładamy zmienne. Tablicę (pustą – bez żadnych wartości) możemy zdeklarować:

 

Jeśli chcielibyśmy do tablicy dodać zmienne (np. tytuły książek) to wystarczy umieścić kilka zmiennych wewnątrz tablicy:

W każdej linii mamy osobny element tablicy w postaci tekstu (oczywiście można wszystkie elementy zapisać w jednej linii ale tak jest czytelniej).

Aby wyświetlić dany element z tablicy (pod warunkiem, że to jest zmienna w postaci np. tekstu lub liczby a nie kolejnej tablicy lub obiektu) wystarczy się odwołać do odpowiedniego indeksu w tej tablicy. Np. chcąc wyświetlić drugi element (‚Czysty kod. Podręcznik dobrego programisty’) wystarczy wywołać:

 

Domyślnie każda tablica ma indeksy zaczynające się od 0 (zero) do ilości elementów w tej tablicy -1 (minus jeden). U nas jest od 0 (zero) do 5. Tablicę tą można też zapisać tak:

 

Nic nie stoi na przeszkodzie aby tablica miała inne indeksy:

Wtedy chcąc wyświetlić np. pierwszy element (‚HTML i CSS. Zaprojektuj i zbuduj witrynę WWW’) odwołujemy się do indeksu 47:

 

Przejdźmy do naszej księgarni i wrzućmy tablicę z tytułami do pliku index.php:

 

Pętla foreach

Zacznijmy od wyglądu bloku dla każdej książki. Skorzystamy z Bootstrapowe Card:

 

Musimy dodać to do pliku index.php:

Umieściłem też tytuł (nagłówek) strony w h1 wraz z klasą mb-4 żeby dodać odstęp między tytułem a książkami.

 

Jeśli chcemy aby każda z naszych sześciu książek znalazła się w osobnej „karcie” musielibyśmy skopiować ten kod jeszcze pięć razy:

 

Dużo kodu prawda? A co jeśli książek będzie więcej? Jasne można dalej kopiować ten kod ale co w przypadku jak będziemy chcieli zmienić card na coś innego albo tylko zmienić klasę? Musielibyśmy zmienić każdy blok z osobna co zmarnowałoby nam sporo czasu.

Na szczęście z pomocą przychodzą pętle. Pętle służą nam do wykonania pewnej czynności określoną ilość razy – np. wyświetlenie kilku „takich samych” książek. My posłużymy się pętlą foreach, która wygląda tak:

 

$tablica to dowolna tablica jak np. nasza tablica z książkami a $element to kolejny element z tej tablicy (tytuł książki). W drugiej wersji mamy jeszcze $index, który w naszym przypadku będzie zawierał kolejno liczny od 0 do 5.

forach wykonuje się tak długo aż nie dojdzie do końca tablicy lub jeśli sami wcześniej nie zakończymy jej działania za pomocą instrukcji break:

Po pierwszych wyświetleniu $elementu pętla zakończy swoje działanie i kolejny element już się nie wyświetli.

 

Wracając do naszych książek – card możemy umieścić w takiej pętli:

 

Po pierwsze mamy tutaj nieco inną konstrukcję pętli:

zamiast:

Jest to przydatne szczególnie przy używaniu pętli w kodzie HTML – łatwiej zauważyć endforeach, które zamyka pętlę foreach zamiast klamry zamykającej }. Poza samą konstrukcją niczym się te pętle nie różnią.

Następnie zmieniliśmy h4 wyświetlając zmienną $book, która przechowuje kolejne tytuły książek. A na koniec dodałem mały margines dolny za pomocą klasy mb-3. Otrzymaliśmy:

 

Git

Repozytorium: https://github.com/morawcik/sklep

Lista zmian: https://github.com/morawcik/sklep/commit/ae065b89de105a877052fd40e788f51664ea3c99


Post 3 z 4 z serii Sklep w PHP
  • luk

    Super. Jak rozumiem w późniejszych etapach będziemy te książki wyciągać z bazy danych mysql, tak?
    ps. Ja osobiście nigdy nie mogłem się przekonać do zapisu w postaci : end, jakoś klasyczna klamra jest dla mnie paradoksalnie bardziej czytelna

    • Tak, później będzie mysql.
      To już jest kwestia osobistych preferencji (tak jak wiele innych rzeczy), więc każdy powinien wybrać to co mu odpowiada (chyba, że szef narzuci wymagania 😀 )

  • „tablica to zbiór innych zmiennych” szczerze mówiąc nie do końca się z tym zgodzę… w pamięci tablica jest jedną zmienną, która może mieć różne wartości, ale alokacja pamięci dokonywana jest dla tablicy jako zmiennej, a nie dla wielu różnych zmiennych.

    Oddzielną kwestią jest fakt, czy w tablicy mogą znajdować się dane jednego konkretnego typu czy różnego typu (jak np. PHP).

    A tak na marginesie to z jakich korzystasz szablonów PHP, jeśli oczywiście nie robisz całego frontu np. w React? Pytam z ciekawości, bo od pewnego czasu przerzuciłem się na node+React, a moja zabawa z PHP zakończyła się na Smarty 3 🙂

    • Tak było mi najlepiej opisać tablice (dla początkujących) a zajmowanie się pamięcią na samym początku nie jest najlepszym pomysłem.

      Zajmujemy się PHP a w nim tablice mogą przechowywać wartości różnego typu.

      Trochę Smarty, trochę bez ale najczęściej Blade (wraz z Laravelem)