2. PHP – pierwszy skrypt, echo, komentarze.

 w aplikacje / dla ucznia / PHP  Tagi aplikacje internetowe / echo / komentarze / php / składnia przez (zaktualizowany 3 dni temu)

Na zakończenie ostatniego tematu poprosiłam Cię o stworzenie „zeszytu elektronicznego”. W panelu lewym Twojego „zeszytu” dodaj link o treści: „PHP – pierwszy skrypt, echo, komentarze.”, który przeniesie Cię do podstrony o nazwie: „data_dziesiejszych_zajec.php” (oczywiście wpisz datę zajęć np. 280918.php).

Pliki projektu zapisuj w katalogu serwera WWW, np. C:\xampp\htdocs\NAZWA_PROJEKTU\ (Windows + XAMPP). Dzięki temu nie mieszasz plików z innymi ćwiczeniami i łatwo przenosisz projekt.

Uwaga: skrypty php muszą być zapisane w pliku z rozszerzeniem .php, NIE .html.

Uruchom XAMPP Control Panel i wystartuj Apache. MySQL uruchamiaj tylko wtedy, gdy dana lekcja faktycznie korzysta z bazy danych. Uruchom przeglądarkę internetową wpisując w pasku adresu: localhost.

Jesteś gotowy do pracy.

Składnia PHP

O składni języka PHP mówiliśmy na poprzedniej lekcji, ale w celu przypomnienia, aby skrypt PHP został prawidłowo zinterpretowany musi znajdować się pomiędzy standardowymi znacznikami:

<?php 
    // kod PHP

Zamykanie ?> na końcu pliku PHP jest opcjonalne i często się go nie stosuje (zmniejsza ryzyko przypadkowego wysłania białych znaków i problemów z nagłówkami).

Komentarze

Pamiętasz jak wygląda komentarz w HTML?

<!-- komentarz -->

Komentarze w języku PHP występują w 3 postaciach:

<?php
// komentarz liniowy
# działa jak komentarz liniowy, ale w praktyce w PHP najczęściej spotkasz //
/* komentarza blokowy
kolejna linia
i kolejna
i kolejna
aż do zamknięcia komentarza */
?>

Uwaga: nie wolno zagnieżdżać w sobie komentarzy blokowych!

Komentarze są bardzo przydatnym narzędziem i nie bój się z nich korzystać.

Mamy jeszcze komentarz dokumentacyjny, który musi zaczynać się od /** (otwarcie) i kończyć na */ (zamknięcie). Każda linia wewnątrz bloku powinna zaczynać się od gwiazdki (*).

<?php
/**
 * Krótki opis (podsumowanie) funkcji.
 *
 * Dłuższy opis funkcji, który może zawierać szczegóły
 * dotyczące implementacji lub działania.
 *
 * @param string $param1 Opis parametru pierwszego.
 * @param int    $param2 Opis parametru drugiego.
 * @return array         Opis zwracanej wartości.
 */
function przykladowaFunkcja($param1, $param2) {
    // ... kod
}
?>
Tagi pozwalają ustrukturyzować informacje o kodzie. Najpopularniejsze z nich to:
  • @param <typ> <zmienna> <opis>: Opisuje parametry funkcji/metody.
  • @return <typ> <opis>: Opisuje zwracaną wartość.
  • @var <typ>: Używany do definiowania typu zmiennych (np. właściwości klasy).
  • @author: Autor kodu.
  • @since: Wersja, od której element jest dostępny.
  • @throws <typ> <opis>: Opisuje wyjątki, które mogą zostać wyrzucone.

Wyświetlanie tekstu w przeglądarce

Aby wyświetlić tekst w przeglądarce posługujemy się instrukcją echo

echo "Hello World!"; // wyświetli napis: Hello World!

Alternatywnie możesz posłużyć się funkcją print

print "Hello World!"; // wyświetli napis: Hello World!

Hmm… czy są identyczne?

echo i print służą do wypisywania tekstu.
– echo to **konstrukcja językowa** i nie zwraca wartości.
– print zachowuje się jak **wyrażenie** i zwraca `1`, więc teoretycznie można go użyć w wyrażeniach.
W praktyce w nowoczesnym PHP (7/8) różnice wydajności są pomijalne — używaj tego, co jest czytelniejsze (najczęściej `echo`).

ale co i jak jeszcze można wyświetlać:

echo "<br>"; //w ten sposób dodajemy wyświetlanie nowej linii w HTML
echo "Linia 1\nLinia 2"; //w samym tekście (np. do pliku, do konsoli, do logów) używa się znaku nowej linii \n

//wyświetlanie wielu linii
echo "Ten zapis obejmuje wiele linii, ale zostaną one wyświetlone w jednej linii, ponieważ sama instrukcja echo nie widzi w tym przypadku znaków nowej linii"; 

echo "<br>";
echo "<br>Ten zapis również obejmuje wiele linii.<br>
Będą one wyświetlane, w wielu liniach,<br>
przez dodanie znacznika nowego wiersza.";  

echo "<br>";
//alternatywna metoda wyświetlania. PHP umożliwia tworzenie wielowierszowych ciągów znaków za pomocą operatora <<<, czyli tzw. składni heredoc (here-document) umożliwiającej dosłowne wstawianie bloków tekstowych z zachowaniem miejsc łamania wierszy i innych białych znaków (w tym wcięć).Działa pod warunkiem, iż łańcuch rozpocznie się i zakończy tym samym słowem, w tym wypadku END. 
Heredoc jest użyteczny, gdy chcesz wstawić większy blok tekstu bez uciekania cudzysłowów.  
Uwaga: jeżeli wypisujesz tekst do przeglądarki, sam znak nowej linii w tekście nie zrobi „nowej linii” w HTML — do tego potrzebujesz np. `<br>` albo CSS (`white-space`).
echo <<<_END
Ten tekst może być wieloliniowy w edytorze.
Sprawdź czy zostanie tak wyświetlony w przeglądarce.
_END;

W PHP 8 masz też **nowdoc** (gdy nie chcesz interpretacji zmiennych):  
```php
$txt = <<<'END'
Tekst z $zmienna – tutaj NIE zostanie podstawiona.
END;
```

echo "<br>";

//wyświetlanie znaków specjalnych tj. "" musimy poprzedzić backslash'em
echo "Jeżeli chcemy wyświetlić cudzysłów \"Przykład\".";
/*
W łańcuchach w cudzysłowie `"` musisz uciekać znak `"` oraz możesz w nich używać sekwencji specjalnych (np. `\n`, `\t`).  
W apostrofach `'` nie ma interpretacji `\n` (poza `\'` i `\\`) i nie ma podstawiania zmiennych.
*/ 

echo "<br>"; 
 
echo "Znak dolara \$";
echo "<br>";
echo "\"Tekst ujęty w znaki cudzysłowia\"";
echo "<br>";

// Wyświetlanie zawartości zmiennych 
$zmienna1 = "wartość zmiennej 1"; 
$zmienna2 = "wartość zmiennej 2"; 
echo "zmienna1 = $zmienna1, a zmienna2 = $zmienna2"; // wyświetli: zmienna1 = wartość zmiennej 1, a zmienna2 = wartość zmiennej 2

echo "<br>"; 

// używając apostrofu wyświetlamy dokładnie to co znajduje się pomiędzy apostrofami (nie pobiera zawartości zmiennej)
echo 'wartość zmiennej 1 znajduje się w $zmienna1'; // wyświetli: wartość zmiennej 1 znajduje się w $zmienna1 

echo "<br>"; 

// jeżeli wyświetlamy samą zmienną nie musimy używać cudzysłowów, ani apostrofów 
echo $zmienna1; // wartość zmiennej 1

echo "<br>"; 

echo "Wartością zmiennej \$zmienna1 jest $zmienna1 <br>"; 

echo "<br>"; 
//łączenie wielu elementów do wyświetlenia
echo $zmienna1.$zmienna2."<br>"; // za pomocą kropki dołączamy kolejne zmienne 
echo $zmienna1,$zmienna2,"<br>"; // przecinek działa podobnie, tylko ma inne zachowanie (m.in. nie działa jak konkatenacja i ma inny priorytet) - stosujemy kropkę

// łączenie wielu elemetów - tekstu i zmiennych  
echo 'Można '.'łączyć '.'wiele '.'elementów '.' oraz dodawać zmienne '.$zmienna1.'<br>';

// wyświetlanie tablicowe
$tablica = ["indeks" => "wartość"];
echo "wartość dla indeksu = {$tablica['indeks']} !"; 
// wyświetli: wartość dla indeksu = wartość !

echo "<br>";

// wyświetlanie z warunkiem jeżeli (warunek) ? 'wartość gdy prawda' : 'wartość gdy fałsz'
$wiek = 18;
echo ($wiek >= 18) ? 'pełnoletni' : 'niepełnoletni';

Integracja PHP z HTML

Skrypty PHP możesz umieszczać w dowolnym miejscu kodu HTML, zarówno przed i za znacznikami jak i wewnątrz nich:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <section id="<?php dowolny skrypt ?>">
         <a href="<?php echo 'https://kamakaczmarek.net'; ?>">Materiały do nauki</a>
      </section>    
   </body>
</html>

Istnieją 2 szkoły integrowania PHP z HTML: pierwsza mówi o wyświetlaniu HTML za pomocą instrukcji echo, druga o rozdzieleniu HTML i PHP i umieszczaniu w kodzie HTML wielu skryptów objętych znacznikami <?php ?>. Ty decydujesz jakiej użyjesz. Ja jestem zwolenniczką 2 szkoły, ponieważ nie tracimy kolorowania składni HTML, a poza tym w testach jest odrobinę wydajniejsza ;P

<?php
   //wyświetlanie HTML w PHP  
   echo "<p>użycie HTML w PHP".$zmienna1."</p>";  
?>
<p>użycie PHP w HTML <?php echo $zmienna1; ?></p>
<p>użycie PHP w HTML w skróconej formie <?=$zmienna1;?></p>

Wszystkie kody zaprezentowane w tej lekcji powinny zostać zapisane w Twoim zeszycie, przetestuj ich działanie i za pomocą CSS „upiększ” ich wyświetlanie.

Zasady pisania kodu (dobre praktyki)

Dobrze napisany kod to taki, który jest czytelny, spójny, łatwy do rozbudowy i bezpieczny. Poniższe zasady warto stosować od pierwszych ćwiczeń.

1) Czytelne nazewnictwo (zmienne, funkcje, pliki)

  • Używaj nazw, które mówią co przechowują / co robią, np. $cenaNetto, $liczbaPunktow, obliczSume().
  • Unikaj skrótów typu $a, $x, $tmp (chyba że w bardzo krótkim fragmencie i ma to sens).
  • Stosuj jeden styl zapisu, np. camelCase w PHP:
    • zmienne i funkcje: $nazwaUcznia, policzSrednia()
    • klasy: NazwaKlasy
  • Nazwy nie powinny być za długie, ale muszą być jednoznaczne.

2) Jeden język w kodzie

  • Trzymaj się konsekwentnie jednego języka nazw w projekcie.
  • Najczęściej spotkasz angielski (np. $userName, $totalPrice), ale jeśli w klasie/zeszycie ustalacie polski — używaj polskiego wszędzie.
  • Nie mieszaj: np. nie rób $userImie albo $cenaTotal.

3) Wcięcia, spacje i estetyka

  • Stosuj wcięcia (indentację) w blokach { } — kod ma „wyglądać jak drzewko”.
  • Daj spacje po przecinkach i wokół operatorów:
    • dobrze: $a = $b + 2;
    • źle: $a=$b+2;
  • Jedna instrukcja na linię — unikaj „ściany kodu”.
  • Zostaw puste linie między logicznymi częściami programu (np. deklaracje zmiennych, obliczenia, wyświetlanie wyniku).

4) Komentarze – po co i jak

  • Komentarze mają tłumaczyć dlaczego coś robisz, a nie przepisywać oczywistości.
  • Dobre komentarze opisują zamiar, np. „Walidacja danych z formularza”, „Zabezpieczenie przed pustym parametrem”.

5) Unikaj powtórzeń (DRY)

  • Jeśli ten sam fragment kodu powtarza się 3+ razy, to znak, że warto zrobić:
    • funkcję, np. formatujDate()
    • lub osobny plik/klasę (w większym projekcie)

6) Prosta struktura i podział na elementy

  • Mieszanie wszystkiego w jednym miejscu utrudnia pracę.
  • Staraj się rozdzielać:
    • pobieranie danych (np. z formularza)
    • przetwarzanie (logika)
    • wyświetlanie (HTML)

7) Przewidywalność i bezpieczeństwo danych

  • Nie ufaj danym z zewnątrz (formularze, URL) — sprawdzaj je (walidacja).
  • Przy wyświetlaniu tekstu w HTML stosuj escapowanie (ochrona przed XSS), np. htmlspecialchars(...).
  • Ustal, co ma się stać w przypadku błędu (np. brak danych, zły format) i obsłuż to w kodzie.

8) Stała konsekwencja

Najważniejsza zasada: konsekwencja. Jeśli w projekcie ustalisz:

  • styl nazw,
  • wcięcia,
  • sposób formatowania, to trzymaj się tego w całym kodzie. Dzięki temu kod jest czytelny nie tylko dla Ciebie, ale też dla innych.

TaskQuest — Twój projekt na cały semestr


O czym jest ten projekt


Przez cały kurs będziesz budować **jedną, konkretną aplikację internetową** — nie osobne, niepowiązane ćwiczenia, tylko jeden projekt, do którego co lekcję dokładasz nową „cegiełkę”. Na koniec będziesz miał(a) działającą, kompletną aplikację webową, którą naprawdę możesz pokazać innym (np. w portfolio) i naprawdę używać.

Jak działa TaskQuest


TaskQuest to aplikacja do zarządzania zadaniami i nauką, w której — tak jak w grze — zdobywasz doświadczenie za wykonaną pracę.

– Zakładasz konto i się logujesz.
– Dodajesz zadania (np. „Nauczyć się pętli w PHP”, „Zrobić zadanie z matematyki”) z terminem wykonania.
– Gdy oznaczysz zadanie jako wykonane, dostajesz **punkty doświadczenia (XP)**.
– Zebranie odpowiedniej liczby XP daje **awans na wyższy poziom** (Nowicjusz → Wojownik → Mistrz…).
– Za konsekwentne wykonywanie zadań każdego dnia rośnie Twoja **passa (streak)**.
– Za różne osiągnięcia (np. 10 wykonanych zadań, 7-dniowy streak) odblokowujesz **odznaki**.
– Widzisz **ranking** — jak wypadasz na tle innych uczniów w klasie.

Jak będzie wyglądać finalna aplikacja


Na koniec kursu Twoja aplikacja będzie mieć:

1. Ekran logowania/rejestracji — formularz z nazwą użytkownika i hasłem (hasła bezpiecznie zaszyfrowane).
2. Dashboard (panel główny) — Twoje imię, aktualny poziom, pasek XP pokazujący postęp do następnego poziomu, aktualny streak.
3. Listę zadań — zadania do zrobienia i zadania ukończone, z terminami, możliwością dodania nowego zadania, oznaczenia jako zrobione i usunięcia.
4. Panel odznak — zdobyte i niezdobyte odznaki.
5. Ranking klasy — tabela z uczniami posortowana wg zdobytego XP.
6. Dynamiczny pasek XP i ranking, które odświeżają się bez przeładowania całej strony (dzięki technologii AJAX/JSON w ostatniej lekcji).

Wszystko to zbudujesz krok po kroku — od pojedynczego `echo` w lekcji 2, aż po pełne API w lekcji 24. Każda lekcja ma swoje polecenia, podpowiedzi kodu i checklistę, żebyś mógł/mogła pracować samodzielnie i sam(a) sprawdzić, czy wszystko działa.

Zasada projektu: wszystkie pliki trzymaj w jednym folderze projektu, np. `taskquest/`. Nie kasuj tego, co zrobiłeś/aś na poprzednich lekcjach — kolejne lekcje rozbudowują istniejące pliki.

Karta pracy

Projekt: TaskQuest — grywalizowana aplikacja do zarządzania zadaniami. Użytkownik loguje się, dodaje zadania, za ich wykonanie zdobywa punkty XP, awansuje na poziomy, zdobywa odznaki i widzi swoją pozycję w rankingu klasy. Każda lekcja rozbudowuje tę samą aplikację o nową funkcję.

Projektowanie aplikacji — zanim napiszesz pierwszą linijkę kodu

Cel lekcji

Zrozumieć, czym będzie Twoja aplikacja, zanim zaczniesz pisać kod.

Co dziś budujesz

Jeszcze nic w kodzie — dziś projektujesz aplikację na papierze/w edytorze tekstu.

Kroki do wykonania

  1. Przeczytaj sekcję „Jak działa TaskQuest” i „Jak będzie wyglądać finalna aplikacja” powyżej.
  2. Wypisz w punktach wszystkie funkcje aplikacji, jakie widzisz (np. logowanie, dodawanie zadania, system XP…).
  3. Narysuj prosty schemat blokowy (na kartce lub w dowolnym narzędziu) pokazujący: użytkownik dodaje zadanie → oznacza jako wykonane → system dolicza XP → system sprawdza, czy to wystarcza na awans → jeśli tak, poziom rośnie.
  4. Zapisz pseudokodem (zwykłym językiem, nie PHP) regułę: „jeśli suma XP jest większa lub równa progowi poziomu, to…”.
  5. Utwórz na dysku folder projektu, np. taskquest/.

Do samodzielnego sprawdzenia

☐ Mam listę min. 8 funkcji, które będzie mieć aplikacja.

☐ Mam narysowany schemat blokowy logiki awansu na poziom.

☐ Mam zapisaną regułę awansu w pseudokodzie.

☐ Mam utworzony folder projektu.

Pytania kontrolne

  1. Czym różni się algorytm od programu?
  2. Dlaczego warto zaprojektować aplikację, zanim zacznie się pisać kod?