Lista skrótów

Po każdym skrócie klikamy Tab

! – struktura witryny

Wstawianie css i skryptów

link:css – wstawianie linków

link:css[href=bla] – wstawianie linków i określanie ściezki dostępu

script:src – wstawianie skryptów

meta:vp – wstawianie metatagów

————————————————————————–

Ctrl+/ – komentarz dla całej linii nie ważne gdzie jesteśmy

Combinator selectors w CSS mają zastosowanie w działaniu emmeta

Klasy, ID, atrybuty, zawartość

Emmet wie jakie tagi umieszczać wewnątrz nadrzędnego tagu, np.

podajemy typ używając tag:

lorem ipsum

———————————————————————–

Artykuł EMMET – plugin usprawniający pisanie kodu pochodzi z serwisu Kama Kaczmarek.

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
}
?>

• @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.

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?

Artykuł 2. PHP – pierwszy skrypt, echo, komentarze. pochodzi z serwisu Kama Kaczmarek.

Programowanie, to rozwiązywanie istniejącego problemu i zapisywania tego rozwiązania w postaci zrozumiałej dla komputera. Schemat działań, jakie należy podjąć w celu rozwiązania problemu, to nic innego jak algorytm.

Programy komputerowe są wszędzie – samochody, pralki, lodówki, inteligentne domy… można wyliczać bez końca. Jak to działa? Wszystko co wprowadzamy do komputera, czy jest to tekst, czy obrazek musi zostać jakoś przez maszynę odczytane. Komputer nie „widzi” jak my – on przetwarza. Ale co? ciągi zer i jedynek – system binarny.

Za pomocą zer i jedynek można zapisać wszystko – zainteresowanych pogłębianiem tematu odsyłam do bardzo fajnego artykułu – KLIK

Programowanie jest cyklicznym procesem tworzenia kodu w następujących etapach:

1. edycji kodu źródłowego,
2. uruchamiania programu,
3. analizie działania i rejestrowania błędów,
4. powrocie do edycji kodu źródłowego (pkt 1) w celu poprawienia błędów lub dalszego poszerzania funkcjonalności.

Osobę zajmującą się programowaniem nazywa się programistą.

Pojęcie „aplikacja internetowa” nie zostało jednoznacznie określone, jest różnie rozumiane i bardzo ogólne.

ale jak wyrocznia Wiki mawia:

Aplikacja internetowa, (ang.) web application – zwana również aplikacją webową, to program komputerowy, który pracuje na serwerze i komunikuje się poprzez sieć komputerową z hostem użytkownika komputera z wykorzystaniem przeglądarki internetowej użytkownika, będącego w takim przypadku interaktywnym klientem aplikacji internetowej. W pracy aplikacji internetowej musi pośredniczyć serwer WWW. Do przygotowania samej aplikacji używa się różnych mechanizmów (np. CGI, JSP, ASP.NET) i języków (np. PHP, Java, C#), jak również serwerów aplikacji. Mechanizm prezentacji danych w przeglądarce określa się czasem mianem cienkiego klienta. Przykładem aplikacji internetowej jest mechanizm edycji treści encyklopedii Wikipedia. Inne witryny WWW należące do tej kategorii to np. serwis aukcyjny Allegro czy księgarnia internetowa Merlin.

Algorytmy

Algorytm to zestaw instrukcji, czynności, które należy wykonać, aby zrealizować pewne zadanie w skończonej liczbie kroków.

Sposób „naszego myślenia” możemy zapisywać za pomocą następujących bloków:

a prosty algorytm przedstawiający sposób myślenia jest taki:

Języki wysokiego poziomu

Na początku do porozumiewania się z komputerem używano języków niskiego poziomu, czyli krótkich kodów zrozumiałych dla procesora, ale nie koniecznie dla innych takie języki nazywamy assemblerami. W miarę rozwoju programowania, języki programowania zaczęły się stawać bardziej przyjazne dla programistów. Dzisiaj programujemy tak jak myślimy, wykonujemy kolejne kroki algorytmu ubierając je w odpowiednie instrukcje danego języka.

Podam wam teraz prosty przykład:

Jeżeli liczba jest większa od zera, to wypisz że jest dodatnia

aby zakodować to zdanie, nie trzeba się specjalnie głowić – wystarczy je dosłownie przetłumaczyć na język obcy – w naszym wypadku jest to język programowania. Języki te są uniwersalne (w większości brzmią jak angielski lub skróty angielskich wyrazów), dlatego w np. PHP należy zapisać powyższe zdanie następująco:

if($liczba>0) echo „jest dodatnia”;

if to jeżeli, a echo to wypisz i zamieniając te 2 słowa na polskie otrzymamy to samo zdanie co wyżej – o to właśnie chodzi w językach wysokiego poziomu – tak jak myślisz, tak piszesz.

Napisany przez nas kod musi zostać zrozumiany przez komputer, aby tak się stało, musi zostać przerobiony na zera i jedynki za pomocą kompilatora (tłumaczy kod na język niskiego poziomu) lub interpretera (analizuje kod źródłowy, a przeanalizowane fragmenty wykonuje).

instrukcje i bloki instrukcji

Programy komputerowe składają się z serii instrukcji np. if($liczba>0) echo „jest dodatnia”;

Pojedyncze instrukcje mogą być łączone w bloki np.

instrukcja_1; 
{ 
   instrukcja_2; 
   instrukcja_3; 
   { 
      instrukcja_4; 
      { 
         instrukcja_5; 
      ) 
   } 
}

Artykuł 1. Wprowadzenie do programowania. Języki wysokiego poziomu, instrukcje i bloki instrukcji, algorytmy, programowanie proceduralne i obiektowe, zmienne i stałe. pochodzi z serwisu Kama Kaczmarek.