Web applications

Tasks studies - laboratory

Project maintained by dawidolko Hosted on GitHub Pages — Theme by dawidolko

Web Applications 1 (AI1) – Lab 3

Dynamic generation of page content,

Twig template engine

Lab start:

• download the Lab003_AI1_start.zip archive to your desktop, which contains the files needed to complete the tasks, and unpack this archive,

• go to the unpacked folder and open the lab3 folder in VSCode,

Tasks (PHP):

Task 3.1:

In VSCode, go to the zad1.php file. The fruits array with numeric keys contains the names of several fruits. Display them on the console using:

• a foreach loop in the curly braces version,

• a foreach loop in the endforeach version.

php zad1.php

Task 3.2:

Below are examples of generating an HTML web page with an unordered list presenting the letters a - z. Consider which of the methods should not be used.

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

Consider also the example of generating a table: link

Task 3.3:

In the file zad2.php, in addition to the table of fruits, there is the Bootstrap Starter template.

Inside <body> write generating an HTML ordered numbered list presenting the fruits from the table (on the website).

Start the php server for the folder containing the task files.

php -S localhost:8008

In your web browser, go to: http://localhost:8008/zad3.php

Task 3.4:

The Trip class (in the trip.php file) allows you to represent mountain trips. There are 4 trip objects with data corresponding to those that appeared on the page created in the previous lab. Finally, they are added to the trips table. At the beginning of the zad3.php file, the trip.php file is executed. Below is a static web page from lab no. 1.

Use the tour table as a data source to dynamically generate cards and table content, by replacing the “hard” inserted content with php tags that generate content (based on the data of objects present in this list).

In your web browser, go to: http://localhost:8008/zad3.php

Tasks (Twig):

• install the VSCode extension:


lab3

Task 3.5:

Get to know the template engine: twig link.


lab3

Then install it (via cmd, not powershell) with Composer:

composer require "twig/twig:^3.0"

Note: VSCode may incorrectly underline some lines.

After executing the above command, close and reopen VSCode.

Task 3.6:

Read the contents of the zad6.php file. The ./templates folder is set as the folder containing templates. The render() method loads the zad7.twig template and renders it with the passed array of tour objects. Thanks to this transfer, you can refer to the contents of this table inside the zad6.twig template.

Task 3.7:

Copy the contents of the zad3.php file to the zad6.twig file and replace the previously used PHP foreach loops with Twig ones.

Check the template rendering mechanism (change the data of the trips in the trip.php, remove one of the trips from the table, add a new trip).

Modify the template so that the situation in which there are no trips (empty list) is handled – displaying the appropriate information.

In your web browser, go to: http://localhost:8008/zad5.php

After completing the lab, delete all downloaded and self-created files from the computer in the lab room.

File version: v1.0