Dynamiczny charakter dokumentu HTML z kodem PHP

Wyjaśnijmy na początku, co rozumiemy pod pojęciem dynamiczny. Jest to przeciwieństwo statyczny, a taki właśnie charakter mają strony WWW tworzone tylko w oparciu o HTML. Mówiąc krótko, kod HTML wyświetli zawsze dokładnie to samo. Zastosowanie PHP umożliwia pokazywanie strony rożnie wyglądającej, w zależności od bieżących okoliczności.

Ćwiczenie 1_7_0_1. Pokazywanie aktualnej daty i godziny

Npisz skrypt PHP, który będzie pokazywał aktualną datę i czas.

<body>
  <form action="" method="post">
    <input type="submit" name="pokaz_date_i_czas" value="Pokaż aktualną datę i czas" />
    <?php
      $dzis=getdate();//funkcja getdate() daje nam aktualną datę i czas
      $dzien=$dzis['mday'];
      $miesiac=$dzis['mon'];
      $rok=$dzis['year'];
      $godz=$dzis['hours'];
      $min=$dzis['minutes'];
      $sek=$dzis['seconds'];
      
      if (isset($_POST['pokaz_date_i_czas'])) 
      echo 'Dzisiaj jest '. $dzien.'.'.$miesiac.'.'.$rok.' godzina '.$godz.':'.$min.':'.$sek;
      /*if (isset($zmienna)) - jeżeli istnieje zmienna
      if (isset($_POST['pokaz_date_i_czas'])) - jeżeli wysłano formularz submitem
      pokaz_date_i_czas*/
    ?> 
  </form>
</body>

Tutaj znajduje się plik z poprawnie napisanym skryptem. Zwróć uwagę, że w tym samym pliku jest umieszczony formularz składający się tylko z submitu oraz skrypt PHP. Wartość atrybutu action="" formularza jest pusta, co spowoduje odświeżenie strony. Po każdym kliknięciu Pokaż aktualną datę i czas zostanie pokazana inna - aktualna wartość.

Ćwiczenie 1_7_0_2. Pokazywanie inaczej wyglądającej strony, w zależności od danych wysłanych przez formularz

Napisz skrypt PHP, który będzie pokazywał zielony kwadrat o boku 300 pikseli, lub kwadrat czerwony o boku 600 pikseli, w zależności od wybranej opcji. To ćwiczenie będzie wymagało utworzenia trzech plików: pliku z formularzem, pliku ze skryptem PHP oraz zewnętrznego arkusza stylów. Jeżeli masz problem z umieszczeniem pól opcji w formularzu to tutaj przypomnisz sobie potrzebne wiadomości. Zwróć uwagę na link do zewnętrznego arkusza stylów. Kody HTML, CSS oraz PHP pokazane są tym razem w całości zawartości pliku.

Kod HTML:

<!doctype html>
<html>
  <head>
    <title>Testowanie skryptów PHP</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form action="wyniki.php" method="post">
      <fieldset>
        <legend>Pokazać stronę z kwadratem zielonym czy czerwonym?</legend>
        <p>
          <label>
            <input type="radio" name="opcja" value="zielony" />
            Z zielonym 300 x 300 pikseli
          </label>
        </p>
        <p>
          <label>
            <input type="radio" name="opcja" value="czerwony" />
            Z czewonym 600 x 600 pikseli
          </label>
        </p>
        <p>
          <input type="submit" name="pokaz_strone" value="Pokaż stronę" />
        </p>
      </fieldset>
    </form> 
  </body>
</html>

Kod CSS:

.zielony
{
  width:300px;
  height:300px;
  background-color: green;
}

.czerwony
{
  width:600px;
  height:600px;
  background-color: red;
}

Kod PHP osadzony w HTML:

<!doctype html>
<html>
  <head>
    <title>Testowanie skryptów PHP</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <?php
      //odbieramy dane formularza
      if (!isset($_POST['opcja']))//jeżeli nie istnieje zmienna $_POST['opcja'] to...
      echo 'Brak zaznaczonej opcji!';
      else //w przeciwnym razie wykonaj blok instrukcji
      {
        $zielony=$_POST['opcja']==='zielony';//$zielony będzie true lub false
        if ($zielony) $styl='zielony';//if ($zielony) - jeżeli zielony jest true 
        else $styl='czerwony';
        
        //generujemy kod HTML
        echo '<div class="'.$styl.'">';
        echo '</div>'; 
      }
      echo "\n"; //wymuszamy nowy wiersz w kodzie HTML
    ?>
  </body>
</html>

Tutaj znajduje się plik z poprawnie napisanym formularzem. Zwróć uwagę, że kod PHP generuje różny kod HTML, w zależności od opcji wybranej przez użytkownika.

Praca domowa

Wyjaśnij w zeszycie, dlaczego strony WWW wykonane podczas zajęć, mają charakter dynamiczny.

Jeżeli zapomniałeś jak przygotować i gdzie zapisywać pliki testowe: