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.
bardzo ładnie napisane i szablon bardzo estetyczny
Witam. Właśnie robiłem stronę, a nie wiedziałem, jak zrobić, żeby nie trzeba było kopiować i wklejać aż tyle. W mojej wcześniejszej stronie było tak, że zrobiłem kilka plików podstron, i w każdym cała zawartość strony, i tylko zmieniona treść podstrony. W pewnym momencie zapomniałem czegoś dodać, więc musiałem to dodawać we wszystkich 5 plikach HTML. Teraz już nie będę miał takich problemów.
Witam.
Artykuł fajnie opisany, po zastosowaniu się do wskazówek wszystko poszło dość gładko – jak na pierwszy raz.
Pojawił się jednak mały problem, bo miałem menu z użyciem superfish, i gdy była jakaś strona wybrana to miała przypisaną klasę, dzięki czemu pozycja w menu miała inny kolor od reszty. Jak teraz mogę osiągnąć ten sam efekt, skoro jest tylko jeden plik z menu?
Pozdrawiam
Hej Jan,
Musisz dodać tam warunek który sprawdzi aktualną stronę. Na przykład tak jak jest opisane w tym komentarzu http://blog.83msite.pl/jak-stworzyc-strone-w-ktorej-zmienia-sie-tylko-tresc-podstron/comment-page-3/#comment-30
oj dla mnie kodowanie było zbyt skomplikowane, tworzę w webwave cms, nic nie muszę kodować, wrzucam co chce i gdzie chce i zaoszczędzam przy tym masę czasu. No ale może jest to kwestia zaawansowania w obsłudze html
krezus,
Chodzi Ci o paginację? Taki podział na strony? Jeśli tak, to w zależności od ilości i akutalizacji, to lepiej już chyba rozejrzeć się za jakimś CMSem
Witam szukam strony lub innego rozwiązania , a mianowicie chodzi mi o przechodzenie na następna stronę za pomocą jednego przycisku ” dalej” np jak ma google
Dziękuję za wszelką pomoc i cierpliwość “kokers”. Zadziałało! :) Biorę się za czytanie manuala do PHP. Przenoszenie wszystkich stron do innego katalogu zostawiam na potem jak już będę więcej umiała. Nie będę wtedy zadawać pytań pewnie banalnych. Pozdrawiam serdecznie.
Być może czeski błąd. Popraw class=”light”‘ na class=”hlight”‘ bo być może ktoś zjadł przy kopiowaniu
Niestety nie zmienia się w menu kolor aktywnej podstrony. Brakuje mi pomysłów co jest nie tak.
Dziękuję za pomoc. Zaraz poprawię kod i dam znać jak mi poszło. Pozdrawiam.
Musiałabyś dodać do każdej pozycji menu sprawdzenie:
<li<?php echo (strpos($_SERVER[‘REQUEST_URI’],’/about.php’)!==FALSE ? ‘ class=”light”‘ : ”) ;?>><a href=”about.php”>about</a></li>
i analogicznie dla każdego.
W przypadku pozycji do strony głównej możesz dać:
<li<?php echo (empty($_SERVER[‘REQUEST_URI’]) || strpos($_SERVER[‘REQUEST_URI’],’/index.php’)!==FALSE ? ‘ class=”light”‘ : ”) ;?>><a href=”index.php”>home</a></li>
aby wyłapać wywołania http://www.dtprint.pl jak i http://www.dtprint.pl/index.php
$_SERVER[‘REQUEST_URI’] wyciąga po prostu obecny adres url, a stropos (http://php.net/manual/en/function.strpos.php) sprawdza czy ciąg znaków zawiera się w tym wywołaniu. Jeśli coś nie działa na którejś podstronie, zrób po prostu <?php echo $_SERVER[‘REQUEST_URI’]; ?> żeby sprawdzić co powinno znaleźć się w warunku.
w nawiązaniu do poprzedniego wpisu. Nie zmienia mi się podświetlenie po kliknięciu na menu. cały czas jako aktywny link jest widoczny home.
Jeśli chcesz przenieść wszystkie strony do katalogu pages, to żeby to działało, ścieżki musisz uaktualnić odpowiednio pages/about.php, pages/design.php itd. To jest trochę jak poruszanie się po drzewie katalogów. Jeśli chcesz koniecznie mieć to w osobnym katalogu, mogłabyś nawet polepszyć linki, ale to by wymagało większej ilości plików i katalogów. Czyli. includes/ -> tam trzymasz stopke i nagłówek pages/ -> tam trzymasz wszystkie pliki stron a następnie tworzysz katalogi dla poszczególnych podstron czyli: about/ design/ itd. I w każdym z nich umieszczasz plik index.php w którym dołączasz odpowiedni plik. Czyli dla about/index.php byłoby <?php include(../pages/about.php); ?> (musisz przejść poziom wyżej stąd… Czytaj więcej »
nagłówek.php http://pastebin.com/N0Q7dBM0
stopka.php http://pastebin.com/PhNFJu0L
about.php http://pastebin.com/BVfkaLMM
Wszystko działa gdy plik about.php jest w katalogu głównym. Co zrobić by to działało gdy plik about.php przeniosę do folderu pages?
DTprint, umieść proszę kod źródłowy tutaj http://pastebin.com/ i podaj link :o)
Mam takie pytanie. Chcę w głównym katalogu pozostawić plik index.php. Resztę plików np. omnie.php, grafika.php, portfolio.php itd. chcę przenieść do katalogu pages. I tu pojawia się problem. Mimo ustawienia ścieżki w naglowek.php nie dziala mi menu. Uprzedzam, że znam jedynie podstawy php i html. Uczę się przerabiając jedną stronę przewijaną w całości na stronę z podstronami.
Poniżej zawartość pliku naglowek.php
[[removed]]
Ups, chyba zapomnieliśmy wgrać poprawiony kod źródłowy. Dzięki za cynk! Już przykład powinien być ok.
Po wielu poszukiwaniach w końcu znalazłam prosty opis z przykładem, który zrozumiałam od razu. Mała uwaga… w pliku index.php błędy. Zamiast header powinno być naglowek i zamiast footer stopka. Dzięki za pomoc.
Tiaaa w pliku index błąd zamiast hearder powinno być naglowek …. dixi
Nie rozumiem, jak zapisuje np strone:
index.html to zmieniam na php? i jak dodaje nowa1.html to też zmieniam na .php? ; /
Dzięki, dla mnie bardzo przydatne, szczególnie przy częstych modyfikacjach menu
Zaczalem pisac nowa stronke.. zostawilem index na pozniej zrobilem narazie “top.php” w ktorym umiescilem menu i slidera. i teraz pytanie, czy w pliku “top.php” ma znajdowac sie tez sekcja head, czy moge ja pominac (czy wystarczy tylko raz w indexie). Jezeli nie musi to w top.php zaczynam po prostu od diva z menu itd? (czy musze tez wszystko zamknac w body i wczesniej tez miec sekcje hed?). Pisze w DW i na bierzaco mam podglad, w momencie kiedy uruchomilem index z komenda php wyswietla sie tylko bg bez slidera i menu (powinienem wrucic wszystko na testowy serwer aby dzialalo?). Pozdrawiam
Art, która część postu nie została do końca jasno napisana? Którą część mam lepiej wyjaśnić? :o)
Jako laik słabo załapałem
Wielkie dzięki za artykuł. Bardzo się przydał.
Wojtek,
nie zgadzam się z Tobą. Nie jest to sztuka dla sztuki. Wspólne elementy dla wszystkich podstron wyciąga się choćby po to, aby w łatwy sposób można było zmienić coś w danym fragmencie. Dzięki temu zamiast w 10 plikach zmieniasz tylko w jednym. Artykuł jest właśnie o tym, a nie o ładowaniu fragmentów podstron ajaxem. Jest to korzyść dla Ciebie jako osoby tworzącej stronę, a nie dla odbiorcy strony.
Niestety studium przypadku pokazane w artykule nie wnosi żadnych korzyści do budowanej strony www. Wprowadzenie PHP w ten sposób to nic innego jak sztuka dla sztuki. Nie przyspiesza to działania strony, gdyż z każdym kliknięciem i tak ładowana jest cała strona, od nagłówka do stopki, a przecież nie o to chodzi.
kokers, zmieniłem tylko .html na .php i wszystko śmiga rewelacyjne.
Dzięki.
panbosman,
to jest w pewnym sensie html, php wykorzystuje się tutaj tylko do dołączania pliku nagłówka i stopki, i zapisuje się jako plik .php. Jednak nadal zawartość to nic innego jak html :o)
Czy da się to zrobić w html’u?
Macio,
Jest to możliwe. Wystarczy, że wykorzystasz tablicę globalną $_GET i switch do ustalenia, która “podstrona” ma się wyświetlić. Wówczas adresy strony będą w formie mojastrona.pl/index.php?strona=uslugi a w switchu sprawdzasz co zawiera $_GET[‘strona’] i wyświetlasz odpowiednią treść.
Czy da się zrobić te wszystkie podstrony w jednym php?
Przydatne