Aplikacje internetowe 1 (AI1) – laboratorium nr 3

Dynamiczne generowanie treści strony,

silnik szablonów Twig

Początek laboratorium: • pobrać na pulpit archiwum Lab003_AI1_start.zip w którym umieszczone są pliki potrzebne do wykonania zadań oraz rozpakować to archiwum,

• przejść do rozpakowanego folderu oraz otworzyć folder lab3 w VSCode,

Zadania (PHP):

Zadanie 3.1:

W VSCode przejść do pliku zad1.php. Tablica fruits z kluczami numerycznymi zawiera nazwy kilku owoców. Wyświetlić je na konsoli z użyciem:

• pętli foreach w wersji z nawiasami klamrowymi,

• pętli foreach w wersji endforeach.

php zad1.php

Zadanie 3.2:

Poniżej przedstawiono przykłady generowania na stronie internetowej HTML-owej listy nieuporządkowanej prezentującej litery a – z. Rozważyć, który ze sposobów nie powinien być stosowany.

<?php
    echo "<ul>";
    for ($i = ord('a'); $i <= ord('z'); $i++) {
        echo "<li>" . chr($i) . "</li>";
    }
    echo "</ul>";
?>
<ul>
<?php for ($i = ord('a'); $i <= ord('z'); $i++){ ?>
    <li><?php print chr($i) ?></li>
<?php } ?>
</ul>
<ul>
<?php for ($i = ord('a'); $i <= ord('z'); $i++): ?>
    <li><?php print chr($i) ?></li>
<?php endfor; ?>
</ul>

Rozważyć także na przykładzie generowania tabeli: link

W pliku zad2.php oprócz tablicy owoców znajduje się Starter template Bootstrap’a. Wewnątrz <body> napisać generowanie HTML-owej listy uporządkowanej numerowanej prezentującej owoce z tablicy (na stronie internetowej).

Uruchomić serwer php dla folderu zawierającego pliki zadania.

php -S localhost:8008

W przeglądarce internetowej przejść pod adres: http://localhost:8008/zad3.php

Zadanie 3.4:

Klasa Trip (w pliku trip.php) pozwala na reprezentowanie wycieczek górskich. Obecne są 4 obiekty wycieczek z danymi odpowiadającymi tym, które wystąpiły na stronie utworzonej w poprzednim laboratorium. Końcowo dodane są do tablicy trips. Na początku pliku zad3.php następuje wykonanie pliku trip.php. Poniżej znajduje się statyczna strona internetowa z laboratorium nr 1.

Wykorzystać tablicę wycieczek jako źródło danych do dynamicznego wygenerowania kart oraz zawartości tabelki, poprzez zastąpienie „na sztywno” wstawionej treści, znacznikami php generującymi treść (na podstawie danych obiektów obecnych w tej liście). W przeglądarce internetowej przejść pod adres: http://localhost:8008/zad3.php

Zadania (Twig):

• zainstalować rozszerzenie do VSCode:

lab3

Zadanie 3.5:

Zapoznać się z silnikiem szablonów: twig link.

lab3

Następnie zainstalować (poprzez cmd, a nie powershella) go Composerem:

composer require "twig/twig:^3.0"

Uwaga: VSCode może nietrafnie podkreślać niektóre linijki.

Po wykonaniu powyższej komendy należy zamknąć i otworzyć ponownie VSCode.

Zadanie 3.6:

Zapoznać się z zawartością pliku zad6.php. Folder ./templates jest ustawiony jako folder zawierający szablony. Metoda render() ładuje szablon zad7.twig i renderuje go z przekazaną tablicą z obiektami wycieczek. Dzięki temu przekazaniu, można odwołać się do zawartości tej tablicy wewnątrz szablonu zad6.twig.

Zadanie 3.7:

Skopiować zawartość pliku zad3.php do pliku zad6.twig oraz wymienić wcześniej używane php’owe pętle foreach na twig’owe. Sprawdzić działanie mechanizmu renderowania szablonów (w trip.php zmieniać dane wycieczek, usunąć z tablicy jedną z wycieczek, dodać nową wycieczkę). Zmodyfikować szablon tak, żeby była obsługiwana sytuacja w przypadku braku wycieczek (pusta lista) – wyświetlenie stosownej informacji.

W przeglądarce internetowej przejść pod adres: http://localhost:8008/zad5.php

– zadania/podpunkty do samodzielnego dokończenia/wykonania,
– zadania/podpunkty dla zainteresowanych.

Po zakończonym laboratorium należy skasować wszystkie pobrane oraz utworzone przez siebie pliki z komputera w sali laboratoryjnej.

Wersja pliku: v1.0

Web-Applications

Tasks studies - laboratory