Witam chciałam dziś napisać jak zbudować prosty szablon strony w PHP. W kolejnych wpisach postaram się go nieco rozbudować. Na początek pokaże jak zbudować stronę z banerem, 1 kolumną boczną oraz miejscem na treść.
PHP + HTML + CSS – co trzeba wiedzieć
Mój szablon składać się będzie z 1 pliku index.php.
UWAGA: Pliki PHP nie są interpretowane przez przeglądarkę, tylko serwer. By skrypt zadziałaj pracuj na lokalnym serwerze (np. XAMPP, Wampp) lub zdalnym FTP (np. jupe.pl)
UWAGA: Stronę możemy napisać w zwykłym notatniku, jednak stosuje on inne kodowanie. Warto więc pobrać inny edytor np. Notepad++. Jest to dość istotne gdyż notatnik stosuje kodowanie (iso-8859-2) w którym wszystkie znaki polskie trzeba zastąpić specjalnymi znakami. Edytory stworzone pod pisanie stron WWW posiadają opcję zmiany kodowania w zależności od naszych potrzeb. Najkorzystniejszym kodowaniem dla języka polskiego jest UTF-8.
Struktura strony w HTML – szkielet
Na początek zacznę od stworzenia prostej struktury w HTML, dzięki czemu uzyskam prosty szkielet strony.
<html> <head> <title></title> </head> <body> </body> </html>
Teraz nieco zmodyfikuje ten kod by uzyskać miejsce na baner, kolumnę boczną i miejsce na tekst.
<html lang="pl-PL">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<header class="baner">
</header>
<div class="kolumna">
</div>
<div class="content">
<article>
</article>
</div>
</body>
</html>Funkcjonalności strony w PHP
Pora by stworzyć menu dzięki któremu będzie można poruszać się po stronie.
<a href="index.php">Strona główna</a>
<a href="index.php?abc=1">Podstrona 1</a>
<a href="index.php?abc=2">Podstrona 2</a>
<a href="index.php?abc=3">Podstrona 3</a>
<a href="index.php?abc=4">Podstrona 4</a>
<a href="index.php?abc=5">Podstrona 5</a>W następnym kroku w PHP napisze warunki sprawdzające zmienną $abc. Umieszczę to pomiędzy <article></article>
<?php
echo $abc;
if($abc==1)
{echo "aaa";}
if($abc==2)
{echo "bbb";}
if($abc==3)
{echo "ccc";}
if($abc==4)
{echo "dddd";}
if($abc==5)
{echo "eee";}
elseif($abc=='')
{echo "Wybierz coś";}
?>Szablon jeszcze nie działa. Jest tak dlatego że zmienna mimo że posiada swoją wartość to jej dalej nie przekazuje. Dlatego pod znacznikiem <body> umieszczam kod
<?php $abc = $_GET['abc']; ?>Teraz trzeba to tylko jakoś poprawić wizualnie. Można to zrobić dzięki stylom CSS np.
<style>
*{margin:0 auto;}
.baner{position: relative; width:800px; border:1px solid;}
#contener{position: relative; width:800px; border:1px solid;}
.kolumna{float:left; width:30%; border:1px solid;}
.content{float:right; width:65%; border:1px solid;}
</style>Mój szablon wygląda teraz tak:
<html lang="pl-PL">
<?php $abc = $_GET['abc']; ?>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{margin:0 auto;}
.baner{position: relative; width:800px; border:1px solid;}
#contener{position: relative; width:800px; border:1px solid;}
.kolumna{float:left; width:30%; border:1px solid;}
.content{float:right; width:65%; border:1px solid;}
</style>
</head>
<body>
<?php $abc = $_GET['abc']; ?>
<header class="baner">
<h2>Baner</h2>
</header>
<div id="contener">
<div class="kolumna">
<nav>
<ul>
<li><a href="index.php">Strona główna</a></li>
<li><a href="index.php?abc=1">Podstrona 1</a></li>
<li><a href="index.php?abc=2">Podstrona 2</a></li>
<li><a href="index.php?abc=3">Podstrona 3</a></li>
<li><a href="index.php?abc=4">Podstrona 4</a></li>
<li><a href="index.php?abc=5">Podstrona 5</a></li>
</ul>
</nav>
</div>
<div class="content">
<article>
<?php
echo $abc;
if($abc==1)
{echo "aaa";}
if($abc==2)
{echo "bbb";}
if($abc==3)
{echo "ccc";}
if($abc==4)
{echo "dddd";}
if($abc==5)
{echo "eee";}
elseif($abc=='')
{echo "Wybierz coś";}
?>
</article>
</div>
</div>
</body>
</html>Jak widać dodałam do niego jeszcze kilka znaczników HTML. A tak na dziś prezentuje się moja strona:
