Tartalomjegyzék

< PHP

PHP TPL fájlok

Bevezetés

A TPL fájlok egyszerű .tpl kiterjesztésű állományok. A HTML kódot szokás beleírni. Ezeknek az állományoknak a kiterjesztése, lehetne akár .html is, de logikátlan, mert nem teljes értékű HTML kódok, csak részletek.

A TPL fájlok használatának előnye, hogy segítségével szétválaszthatjuk a PHP és HTML kódokat. A .php kiterjesztésű állományokba szigorúan csak PHP kódot írunk, a .tpl kiterjesztésű fájlokba pedig csak HTML kódot. Ez jól jön a szintaktikai színezés során, a szerkesztők, általában ismerik a TPL fájlokat is, és HTML szintaxisnak megfelelően színezik.

Helló Világ

Könyvtárszerkezet: 

projekt/
   |--templates
   |     |--foot.tpl
   |     `--head.tpl
   |
   `--index.php
foot.tpl
</body>
</html>
head.tpl
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
</head>
<body>
index.php
echo file_get_contents('templates/head.tpl');
 
echo "Helló Világ!";
 
echo file_get_contents('templates/foot.tpl');

Behelyettesítés a TPL fájlba

Ebben a részben a „Helló Világ!” szöveget szeretnénk h1 elemek között megjeleníteni. Az index.php számára készítünk egy index.tpl állományt. Ebbe kerül a <h1> elem. A „Helló Világ!” szöveget nem írjuk az index.tpl fájlba, azt majd az index.php fogja behelyettesíteni.

Könyvtárszerkezet: 

projekt/
   |--templates
   |     |--foot.tpl
   |     |--head.tpl
   |     `--index.tpl
   |
   `--index.php
foot.tpl
</body>
</html>
head.tpl
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
</head>
<body>
index.tpl
<h1>{{ szoveg }}</h1>
index.php
<?php
 
echo file_get_contents('templates/head.tpl');
 
$page = file_get_contents('templates/index.tpl');
$page = str_replace('{{ szoveg }}', "Helló Világ!", $page);
echo $page;
 
echo file_get_contents('templates/foot.tpl');

Bekéréses feladat

A példában egy három alapját és magasságát kérjük be, amiből kiszámoljuk annak területét.

A feladat kezdeti megoldása

A célunk, a kód kisebb önálló részekbe szervezése, hogy növeljük az átláthatóságot. 

projekt/
   |--templates/
   |     |--foot.tpl
   |     |--head.tpl
   |     |--index.tpl
   |     `--terulet.tpl
   |
   |--index.php
   `--terulet.php
foot.tpl
</body>
</html>
head.tpl
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
</head>
<body>
index.tpl
<form action="terulet.php" method="get">
 
<label>Alap</label>
<input type="text" name="alap">
<br>
 
<label>Magasság</label>
<input type="text" name="magassag">
<br>
 
<button type="submit">Számít</button>
 
</form>
terulet.tpl
<p>Eredmény: {{ terulet }}</p>
index.php
<?php
 
echo file_get_contents('templates/head.tpl');
 
echo file_get_contents('templates/index.tpl');
 
echo file_get_contents('templates/foot.tpl');
terulet.php
<?php
 
$alap = $_GET['alap'];
$magassag = $_GET['magassag'];
$terulet = ($alap*$magassag)/2;
 
echo file_get_contents('templates/head.tpl');
 
$page = file_get_contents('templates/terulet.tpl');
$page = str_replace('{{ terulet }}', $terulet, $page);
echo $page;
 
echo file_get_contents('templates/foot.tpl');

A feladat továbbfejlesztve

Ebben részben CSS-t rendelünk a weboldalainkhoz, és a területszámítást külön függvénybe és külön fájlba tesszük. 

projekt/
   |--css/
   |   `--style.css
   |--includes/
   |     `--haromszog.php
   |--templates/
   |     |--foot.tpl
   |     |--head.tpl
   |     |--index.tpl
   |     `--terulet.tpl
   |--index.php
   `--terulet.php
css/style.css
#content {
    background-color: orange;
    margin: 5%;
    padding: 20px;
}
 
label {
    display: inline-block;
    width: 70px;
}
 
#about {
    margin-top: 20px;
}
includes/haromszog.php
<?php
 
function szamitTerulet($alap, $magassag) {
    return ($alap*$magassag)/2;
}
foot.tpl
<div id="about">Nagy János, 2020-05-06</div>
 
</div>
 
</body>
</html>
head.tpl
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
 
<div id="content">
index.tpl
<form action="terulet.php" method="get">
 
<label>Alap</label>
<input type="text" name="alap">
<br>
 
<label>Magasság</label>
<input type="text" name="magassag">
<br>
 
<button type="submit">Számít</button>
 
</form>
terulet.tpl
<p>Eredmény: {{ terulet }}</p>
index.php
<?php
 
echo file_get_contents('templates/head.tpl');
 
echo file_get_contents('templates/index.tpl');
 
echo file_get_contents('templates/foot.tpl');
terulet.php
<?php
 
include 'includes/haromszog.php';
 
$alap = $_GET['alap'];
$magassag = $_GET['magassag'];
 
$terulet = szamitTerulet($alap, $magassag);
 
echo file_get_contents('templates/head.tpl');
 
$page = file_get_contents('templates/terulet.tpl');
$page = str_replace('{{ terulet }}', $terulet, $page);
echo $page;
 
echo file_get_contents('templates/foot.tpl');