Kurs PHP cz.2 -Ładowanie strony do DIVa

Gdy tworzenie stron było dla mnie czymś nowym szybko natknąłem się na pewien  problem. Oczywiście nauczyłem się dopiero co tworzyć eleganckie responsywne strony oparte na DIV-ach. Jednak gdy do mojej strony chciałem dołożyć podstronę, musiałem przepisać wcześniej cały kod strony głównej i zmienić tylko treść. Sprawa mia się jeszcze gorzej gdy chciałem dodać nową pozycję do menu, wtedy musiałem edytować również wszystkie podstrony. Wtedy właśnie uciążliwość tych czynności spowodowała, że zapragnąłem nauczyć się języka PHP, który znacząco ułatwia zadanie.
Pomysł opisanie na tej stronie, może nie jest w 100% elegancki i bezpieczny ale na początek jest w prost doskonały.
Bez dalszych wstępów przejdźmy do przykładu strony opartej na DIV:

<html>
<head>
        <title>Przykładowa strona</title>
        <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="top">
 <div id="NAGLOWEK">Nagłówek szablonu</div>
 <div id="MENU">
  <ul>
   <li><a href="index.html">Główna</a></li>
   <li><a href="page/podstrona1.html">Podstrona 1</a><li>
   <li><a href="page/podstrona2.html">Podstrona 2</a><li>
  </ul>
 </div>
 <div id="TRESC">Treść strony</div>
 <div id="STOPKA">Stopka serwisu</div>
</div>
</body>
</html>

Tak wygląda plik style.css:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Wyobraź teraz sobie, że każda podstrona wygląda tak samo, różni się tylko zawartością DIV-a o ID „Tresc”. Rozwiązanie jest bardzo proste, przyda nam się tutaj funkcja require() oraz include(). Pytasz dlaczego dwie? Obie funkcje robią dokładnie to samo, różnica polega w tym, że funkcja include() w razie niepowodzenia zwróci tylko komunikat o błędzie, natomiast funkcja require zwróci „Fatal Error” czyli strona nie zostanie do końca załadowana. Istnieją jeszcze dwa dodatkowe odpowiedniki tych funkcji mianowicie include_once() oraz require_once(). Jak nazwa w skazuje metody te wczytają plik tylko raz, niezależenie od ilości ich wystąpienia. Po prostu funkcja za drugą próbą w czytania tego samego pliku w jednym dokumencie zwróci wartość NULL czy nic. Sama funkcja nam jeszcze nic nie daje, ale chyba już domyślasz się do czego zmierzam. Skoro mogę w dowolnym miejscu strony wczytać dowolny plik html to zawartość mogę przechowywać w osobnych plikach. Tylko teraz jak stworzyć podstrony? W tym pomoże nam zmienna przekazywana metodą GET oraz instrukcja sterująca SWITCH. Dla niewtajemniczonych odsyłam do wujka Google ponieważ jak wcześniej pisałem, kurs ten nie ma na celu tłumaczenia wszystkich podstaw.

Instrukcja wczytująca zawartość podstrony będzie wyglądać tak:


<?php
$strona = $_GET['strona'];

switch($strona)
{

case 'podstrona1': require_once("page/podstrona1.html"); break;
case 'podstrona2': require_once("page/podstrona2.php"); break;
default: require_once("glowna.html"); break;

}

?>

Dobra, teraz szybki opis. pobieramy zmienną GET i przepisujemy ją w celu ułatwienia pracy do zmiennej $strona. Tworzymy instrukcje sterującą SWITCH i w zależności jaką wartość przyjmie zmienna $strona taki plik zostanie wczytany. Pewnie teraz masz wątpliwość co wprowadzić w menu… Wystarczy zmienić nim hiperłącza z np. takich: <a href=”page/podstrona.html” > na takie <a href=”index.php?strona=podstrona1″ >. Jeżeli bawiłeś się już bazą danych, to zamiast trzymać dane w osobnych plikach możesz pobierać je z bazy.

Gotowy kod strony będzie wyglądać tak:

Plik index.php

<?php $strona = $_GET['strona']; ?>
<html>
<head>
        <title>Przykładowa strona</title>
        <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="top">
 <div id="NAGLOWEK">Nagłówek szablonu</div>
 <div id="MENU">
  <ul>
   <li><a href="index.php">Główna</a></li>
   <li><a href="index.php?strona=podstrona1">Podstrona 1</a></li>
   <li><a href="index.php?strona=podstrona2">Podstrona 2</a></li>
  </ul>
 </div>
 <div id="TRESC">
<?php
   switch($strona)
   {
     case 'podstrona1': require_once("page/podstrona1.html"); break;
     case 'podstrona2': require_once("page/podstrona2.php"); break;
     default: require_once("glowna.html"); break;
    } ?></pre>
</div>
<div id="STOPKA">Stopka serwisu</div>
</div>
</body>
</html>

Pliki podstron będą wyglądać tak:


<h1>Podstrona 1</h1>

<p> Jakis tekst na podstronie </p>


<h1>Podstrona 2</h1>

<p>Tekst na stronie</p>

Plik arkusza stylów pozostaje bez zmian 😉

Myślę, że to rozwiązanie ułatwi Ci prace nad twoimi projektami, mimo tego że jest ono bardzo prymitywne. W następnym poradniku pokażę jak zrobić skrypt logowania do strony.

Share Button

Dodaj komentarz