Koniec wakacji (dla niektórych nieco później) to również powrót to bloga, więc przechodzimy do kolejnego etapu tworzenia sklepu, gdzie dodamy zmienny tytuł i ustawimy aktywną pozycję w menu. Wykorzystamy zmienne i instrukcję warunkową „if”.
Zmienne
Czym są zmienne? Zmienne to takie pojemniki, które przechowują jakąś wartość – prostą jak liczba lub tekst lub bardziej rozbudowaną jak tablica (zbiór zmiennych) lub obiekt (klasa). Zmienna składa się z identyfikatora (nazwy) i wartości. Identyfikator zaczyna się od znaku dolara ($) a następnie zawiera ciąg znaków mogący składać się z liter, cyfr i podkreślnika (_) przy czym nie może zaczynać się od cyfry.
Zmienne mogą wyglądać tak:
|
1 2 3 4 |
$zmienna1 = 'to jest zmienna1'; $zmienna_2 = 'a to zmienna2'; $_zmienna3 = 'kolejna zmienna'; $Zmienna1 = 1; |
Pierwsza i ostatnia zmienna różnią się tylko wielkością pierwszej litery i w PHP są traktowane jako osobne zmienne – PHP rozróżnia wielkość liter w zmiennych.
Po identyfikatorze mamy znak równości (=), który informuje, że do tej zmiennej przypisujemy jakąś wartość a ta wartość to wszystko co znajduje się na prawo od znaku równości (poza komentarzami). Np. pierwsza zmienna – przypisujemy tekst ‚to jest zmienna1’ do zmiennej $zmienna1 i za każdym razem odwołując się do zmiennej $zmienna1 będziemy operować na tym tekście.
Typy zmiennych
Zmienne mogą przechowywać różne typy danych:
- string – ciągi znaków np.: ‚To jest zmienna’
- integer – liczby naturalne np.: 1, 2, 3, 20, -15, -30
- float – liczby zmiennoprzecinkowe np.: 1.23, 4.5
- boolean – logiczna prawda (true) lub fałsz (false)
- array – tablice – zbiór zmiennych
- object – obiekty (klasy)
Tytuł sklepu/strony
Jak możemy wykorzystać zmienne? Nasz sklep ma ustawiony tytuł (<title>) na Moja księgarnia i o ile na stronie głównej może być do na stronie z koszykiem chcielibyśmy żeby był zmieniony np. na „Koszyk – Moja księgarnia„. Oczywiście moglibyśmy utworzyć drugi plik header.php, zmienić w nim <title> i podpiąć pod stronę z koszykiem ale wrócilibyśmy do powtarzania się, które wyeliminowaliśmy w pierwszej części.
Zaczniemy od tytułu dla strony głównej. W pliku index.php tworzymy zmienną $pageTitle przypisując odpowiedni tekst:
|
1 |
<?php $pageTitle = 'Moja księgarnia'; ?> |
Gdzie to umieścić? Musimy dodać to przed wczytaniem pliku header.php, w którym zmienna będzie wykorzystana, więc najlepiej dodać to na samym początku pliku index.php:
|
1 2 3 4 5 6 7 8 9 10 |
<?php $pageTitle = 'Moja księgarnia'; ?> <?php include 'views/header.php'; ?> <?php include 'views/menu.php'; ?> <div class="container"> Strona główna/książki </div> <?php include 'views/footer.php'; ?> |
Teraz musimy tą zmienną wyświetlić wewnątrz tagu <title>. Jak się wyświetla/wypisuje zmienną? Służy do tego kilka poleceń a najprostszym z nich jest echo.
|
1 |
<title><?php echo $pageTitle; ?></title> |
Uruchamiając stronę główną otrzymamy (tytuł strony widoczny jest jako tytuł zakładki):
Przechodząc na stronę koszyka zauważycie, że w tytule pojawił się dziwny tekst (całość można zobaczyć w podglądzie kodu strony – prawy przycisk -> wyświetl źródło strony):
<br />
<b>Notice</b>: Undefined variable: pageTitle in <b>/Users/rafal/Sites/sklep/views/header.php</b> on line <b>8</b><br />
Jest to błąd w kodzie PHP. Błąd? Ale jak to? Przed chwilą wszystko działało.
Zacznijmy od tego co to jest za błąd. Na początku mamy Notice, które informuje o tym jakiego rodzaju jest to błąd. Sporo osób uważa, że Notice to nie jest błąd a jedynie informacja dla programisty. O ile przy Notice strona dalej się wyświetla to jej działanie jest zaburzone a wynik może znacząco odbiegać od wyniku oczekiwanego.
Dalej mamy Undefined variable: pageTitle in /xxx/sklep/views/header.php on line 8 co oznacza, że mamy niezdefiniowaną (nieutworzoną) zmienną o nazwie pageTitle w pliku /xxx/sklep/views/header.php (xxx to ścieżka, którą usunąłem) w lini 8
Chodzi o dokładnie tą linię (w pliku header.php):
|
1 |
<title><?php echo $pageTitle; ?></title> |
Musimy utworzyć sobie tą zmienną w pliku cart.php tak samo jak zrobiliśmy to w pliku index.php:
|
1 |
<?php $pageTitle = 'Koszyk - Moja księgarnia'; ?> |
|
1 2 3 4 5 6 7 8 9 10 |
<?php $pageTitle = 'Koszyk - Moja księgarnia'; ?> <?php include 'views/header.php'; ?> <?php include 'views/menu.php'; ?> <div class="container"> Koszyk </div> <?php include 'views/footer.php'; ?> |
I już.
Aktywna pozycja w menu – instrukcja if
Jak pamiętacie z poprzedniej części (lub zauważyliście na dzisiejszych screenach) po przejściu na stronę Koszyk dalej w menu podświetlona jest pozycja Książki i tutaj z pomocą znowu przyjdą nam zmienne ale zrobimy to w nieco inny sposób.
Zaczniemy od utworzenia nowej zmiennej w pliku cart.php:
|
1 2 3 4 |
<?php $pageTitle = 'Koszyk - Moja księgarnia'; $menuActive = 'cart'; ?> |
Zmienna $menuActive będzie informowała kod, która pozycja w menu ma być „aktywna”. Plik index.php zostaje bez zmian – w nim nie dodamy tej zmiennej.
Zabieramy się za edycję naszego menu (plik menu.php), które w przed zmianami wygląda tak:
|
1 2 3 4 5 6 7 8 |
<ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="/">Książki</a> </li> <li class="nav-item"> <a class="nav-link" href="cart.php">Koszyk</a> </li> </ul> |
Zaczynamy od pozycji dla strony głównej (pierwszy tag <li>). Zmieniamy na:
|
1 2 3 |
<li class="nav-item <?php if ( ! isset($menuActive)) echo 'active'; ?>"> <a class="nav-link" href="/">Książki</a> </li> |
Najpierw została usunięta klasa active, w miejsce której został wstawiony kod PHP:
|
1 |
if ( ! isset($menuActive)) echo 'active'; |
Jest to tzw. instrukcja warunkowa, która ma budowę:
|
1 2 3 |
if (warunek) { // kod } |
warunek to jakiś warunek po którego spełnieniu wykona się kod wewnątrz klamer {}. Warunkiem może być (prawie) cokolwiek – np. 2 + 2 = 4: if (2 + 2 == 4). U nas kod który ma się wykonać po spełnieniu warunku to wyświetlenie/wypisanie active – klasy którą przed chwilą usunęliśmy. Chwilka, ale gdzie są klamry w naszym przykładzie? Jeśli if po spełnieniu warunku ma do wykonania tylko jedną linijkę kodu to klamry mogą zostać pominięte. Moglibyśmy też zapisać to tak:
|
1 2 3 |
<li class="nav-item <?php if ( ! isset($menuActive)) { echo 'active'; } ?>"> <a class="nav-link" href="/">Książki</a> </li> |
Przejdźmy do naszego warunku:
if ( ! isset($menuActive))
Zacznijmy od końca: isset($menuActive) – funkcja isset() sprawdza czy zmienna $menuActive istnieje – jeśli tak to zwraca true a jak nie istnieje to zwraca false. Natomiast wykrzyknik to negacja / „zaprzeczenie” – jeśli w warunku sprawdzamy czy zmienna istnieje to przy wykorzystaniu wykrzyknika sprawdzamy czy zmienna nie istnieje:
if ( ! isset($menuActive)) – jeśli (nie istnieje(zmienna $menuActive)
Jak to się ma do naszego kodu? Zmienną $menuActive utworzyliśmy tylko w pliku cart.php a w pliku index.php nie, więc uruchamiając stronę główną (index.php) zmienna nie jest tworzona, czyli nie istnieje – jeśli jej nie ma to dodajemy do klas klasę active. Natomiast przechodzą na stronę koszyka (cart.php) zmienna zostaje tworzona i warunek nie jest spełniony, więc klasa nie doda się do pozycji Książki.
Przejdźmy do pozycji dla koszyka, którą zmienimy na:
|
1 2 3 |
<li class="nav-item <?php if (isset($menuActive) && $menuActive == 'cart') echo 'active'; ?>"> <a class="nav-link" href="cart.php">Koszyk</a> </li> |
Mamy tu ten sam kod ale w instrukcji dopisaliśmy && $menuActive == ‚cart’.
$menuActive == ‚cart’ – sprawdzamy czy zmienna $menuActive zawiera tekst cart natomiast znaki && (można zapisać też jako AND) służą do łączenia warunków jak i – jeśli warunek 1 został spełniony i jeśli warunek drugi został spełniony to wtedy wykona się kod w instrukcji if. Natomiast jeśli jeden z tych dwóch warunków jest nieprawdziwy (zmienna $menuActive nie istnieje lub w tej zmiennej nie ma tekstu ‚cart’) to kod się nie wykona.
if (isset($menuActive) && $menuActive == ‚cart’) – jeśli ( istnieje(zmienna $menuActive) i zmienna $menuActive ma wartość ‚cart’).
Cały plik menu.php wygląda tak:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="/">Księgarnia</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item <?php if ( ! isset($menuActive)) echo 'active'; ?>"> <a class="nav-link" href="/">Książki</a> </li> <li class="nav-item <?php if (isset($menuActive) && $menuActive == 'cart') echo 'active'; ?>"> <a class="nav-link" href="cart.php">Koszyk</a> </li> </ul> </div> </nav> |
Tak, wiem, że mogliśmy dodać zmienną $menuActive do pliku index.php i w if’ie sprawdzać tylko wartość zmiennej ($menuActive == ‚index’ lub $menuActive == ‚cart’) ale chciałem pokazać przy okazji nieco więcej (isset, negacja) 😉
Git
Repozytorium: https://github.com/morawcik/sklep
Lista zmian: https://github.com/morawcik/sklep/commit/3ab2f69a4427696b131a7f4cce7afcf65bdff2ec
- SwP #1: Sklep w PHP – szkielet strony i pliki php
- SwP #2: Zmienny tytuł i aktywna pozycja w menu – zmienne, if
- SwP #3: Lista książek – tablice i pętle
- SwP #4: Więcej informacji o książkach – tablice wielowymiarowe i asocjacyjne
- SwP #5: Dodajemy koszyk