Jak stworzyć stronę w której zmienia się tylko treść podstron

Struktura strony html zazwyczaj jest wszędzie taka sama. Składa się z nagłówka, treści i stopki. Tworząc podstrony de facto kopiujemy cały czas te same fragmenty do różnych plików. Pokażę Ci jak możesz uniknąć niepotrzebnego kopiowania.

Słowem wstepu.

Jednym z najmocniejszych argumentów przemawiającym za “wyciągnięciem” powtarzających się elementów do osobnych plików jest fakt, że jak zmodyfikujesz taki element w jednym pliku, musisz zmodyfikować też pozostałe pliki. Najczęściej wykorzystuje się taką możliwość do wyciągnięcia nagłówka i stopki “poza nawias”. Żeby lepiej zrozumieć o co chodzi przyjrzyjmy się podstawowej strukturze html.

<html>
 <head>
  <!--W tym miejscu są informacje typu tytuł strony, link do styli, słowa kluczowe, krótki opis strony, link do plików javascript. Są to treści których nie widzi użytkownik odwiedzający stronę, ale widzi je przeglądarka. -->
 </head>
 <body>
  <div><!--menu/nawigacja strony--></div>
  <div><!--W tym miejscu jest zawartość naszej podstrony, teksty, linki, obrazki--></div>
  <div><!--stopka strony-->
 </body>
</html>

Sekcja <head></head> jak i menu strony zazwyczaj są takie same dla każdej z podstron. W związku z tym poniższy kawałek kodu możemy wyciągnąć do osobnego pliku:

<html>
 <head>
  <!--W tym miejscu są informacje typu tytuł strony, link do styli, słowa kluczowe, krótki opis strony, link do plików javascript. Są to treści których nie widzi użytkownik odwiedzający stronę, ale widzi je przeglądarka. -->
 </head>
 <body>
  <div><!--menu/nawigacja strony--></div>

Kolejnym prawdopodobnie powtarzającym się fragmentem jest stopka i tagi zamykające stronę:

  <div><!--stopka strony-->
 </body>
</html></code></pre>
<p>Widzimy więc, że jedynym fragmentem który tak naprawdę zmienia się na każdej podstronie jest:</p>
<pre><code><div><!--W tym miejscu jest zawartość naszej podstrony, teksty, linki, obrazki--></div>

Wiemy już co się powtarza, a co się zmienia. Jak więc osiągnąć zamierzony cel? Z pomocą języka PHP.

Dawajcie PHP!

Nie musisz być specem od języka PHP, aby skorzystać z jego bardzo przydatnych funkcji. I na pewno nie należy się go obawiać. Aby można było z niego skorzystać, po pierwsze należy posiadać serwer z zainstalowanym PHP. W tej chwili przeważająca większość serwerów go posiada. Kolejną ważną zmianą jest zapisywanie plików strony z rozszerzeniem .php zamiast .html. I właściwie ostatnia informacja, o ile pliki html można otworzyć w przeglądarce od siebie z komputera w przeglądarce, o tyle pliki php muszą być najpierw wgrane na serwer. Spowodowane jest to tym, że są one “przetwarzane” przez serwer i dopiero po takim przetworzeniu wyświetlane w przeglądarce.

Funkcją, którą wykorzystamy będzie include(ścieżka do pliku);

Tak więc wracając do naszego przykładu:

  • pierwszy wyrzucony fragment zapisalibyśmy np do pliku naglowek.php (czyli początek struktury dokumentu html z menu)
  • drugi wyrzucony fragment zapisalibyśmy np do pliku stopka.php (czyli koniec struktury dokumnetu html ze stopką)

Tworzymy plik strony głównej.

Zaczynamy od dołączenia nagłówka poprzez zapisanie:

<?php include('naglowek.php'); ?>

Te dziwne znaki po obu stronach include <?php ?> to jest informacja dla serwera, że tutaj zaczyna się php i serwer powinien przetworzyć to co się pomiędzy tym znajduje. Jeśli utworzymy plik naglowek w jakimś folderze, wówczas należy zapisać

<?php include('nazwa_tego_katalogu/naglowek.php'); ?>

Następnie tworzymy normalnie treść którą chcemy zamieścić na stronie głównej. A na koniec dołączamy plik stopka analogicznie jak nagłówek i zapisujemy plik jako index.php. Struktura w nasym pliku powinna mniej więcej wyglądać tak:

<?php include('naglowek.php'); ?>
<div>
    Treść strony głównej
</div>
<?php include('stopka.php'); ?>

Tworzymy podstrony.

Tak naprawdę podstrony będą wyglądać tak samo jak plik index.php tylko będzie zmieniać się im treść. Każdy plik podstrony powinien zaczynać się od dołączenia nagłówka, utworzenia treści, a następnie dołączenia stopki. Chcemy dodać kolejną podstronę? Teraz to łatwe. Dodajemy kolejny link do menu w pliku naglowek.php i ten link pojawia się na każdej podstronie. Wcześniej należałoby osobno dodać link do menu na każdej podstronie.

Kod źródłowy przykładu z kilkoma podstronami możesz pobrać poniżej.

Pobierz za darmo