Film samouczek

Znaczniki HTML i znaki sterujące w PHP

Zrealizujmy w praktyce czytelne formatowanie generowanego w skryptach kodu źródłowego HTML. Z filmu samouczka dowiemy się, jak zamykać surowe wartości wyjęte z bazy danych, wewnątrz odpowiednich znaczników HTML oraz jak stosować tzw. znaki sterujące (formatujące wyjście) w PHP:

RzNA8gCHAKqRi1

Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

RfXT2VEFbRmxz1

Przycisk do pobrania kodu źródłowego zamieszczonego w filmie.

Plik TXT o rozmiarze 793.00 B w języku polskim

Polecenie 1

Stwórz w HTML raport z bazy danych wykorzystujący w strukturze HTML tabelę, czyli znacznik <table>. W raporcie wypisz z bazy danych wszystkie dane (poza id) dotyczące aktorek urodzonych po roku $1980$ .

W ramach podpowiedzi do realizacji zadania przedstawiono przykładową, wynikową strukturę uzyskanej tabeli:

Linia 1. otwórz nawias ostrokątny table zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny thead zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny th zamknij nawias ostrokątny imie otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny th zamknij nawias ostrokątny nazwisko otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny th zamknij nawias ostrokątny plec otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny th zamknij nawias ostrokątny kraj podkreślnik ur otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny th zamknij nawias ostrokątny data podkreślnik ur otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny prawy ukośnik thead zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny tbody zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny td zamknij nawias ostrokątny Jennifer otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny td zamknij nawias ostrokątny Lawrence otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny td zamknij nawias ostrokątny k otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny td zamknij nawias ostrokątny USA otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1990‑08‑15 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny td zamknij nawias ostrokątny Natalie otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny td zamknij nawias ostrokątny Portman otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny td zamknij nawias ostrokątny k otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny td zamknij nawias ostrokątny USA otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1981‑06‑09 otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny prawy ukośnik tbody zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny.

<table>
  <thead>
    <tr>
      <th>imie</th>
      <th>nazwisko</th>
      <th>plec</th>
      <th>kraj_ur</th>
      <th>data_ur</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jennifer</td>
      <td>Lawrence</td>
      <td>k</td>
      <td>USA</td>
      <td>1990‑08‑15</td>
    </tr>
    <tr>
      <td>Natalie</td>
      <td>Portman</td>
      <td>k</td>
      <td>USA</td>
      <td>1981‑06‑09</td>
    </tr>
   </tbody>
</table>

Tabela ta w przeglądarce prezentuje się następująco:

imie	nazwisko	plec	kraj_ur	data_ur
Jennifer	Lawrence	k	USA	1990‑08‑15
Natalie	Portman	k	USA	1981‑06‑09

Zapytanie SQL, realizujące zadanie, ma następującą postać:

SELECT imie, nazwisko, plec, kraj_ur, data_ur FROM aktorzy WHERE plec='k' AND data_ur>'1980‑12‑31'

W przedstawionej na filmie wersji skryptu, informację o liczbie aktorów zamknięto w paragrafie <p></p>, zaś wypisanie aktorów zrealizowano z użyciem listy nienumerowanej <ul></ul>.

echo "<p>Liczba aktorów amerykańskich w bazie: ".$ile."</p>";
echo "\r\n<ul>\r\n";
  
while ($row = mysqli_fetch_assoc($result)) {
	echo "\t<li>".$row['imie']." ".$row['nazwisko']." (".$row['plec'].")</li>\r\n";
}

echo "</ul>\r\n";

Ciekawostka

Otwarcie listy <ul> zostało wstawione przed pętlą, ponieważ umieszczenie rozpoczęcia listy wewnątrz instrukcji iteracyjnej stworzyłoby efektywnie aż pięć list zamiast jednej. To właśnie elementów listy <li></li> ma być pięć. Zgodnie z tą logiką, również zamknięcie </ul> całej listy zostało zaimplementowane już po zakończeniu ciała pętli while.

Dodatkowo, w zaprezentowanym fragmencie pojawiły się specjalne znaki sterujące PHP, określające sposób formatowania generowanego źródła HTML przez przeglądarkę:

\r\n – zrealizowanie przejścia do nowej linii,
\t – wstawienie tabulacji (odstępu poziomego).

Przeczytaj

Sprawdź się

Znaczniki HTML i znaki sterujące w PHP