Lifestyle

Jak zbudować prosty szablon strony www wykorzystując PHP?

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ść.

Spis treści

Toggle

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:

Jak zbudować prosty szablon strony www wykorzystując PHP?

aurelia