szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:programozás:php|< PHP]]

====== PHP TPL fájlok ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2020
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== 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:

<code>
projekt/
   |--templates
   |     |--foot.tpl
   |     `--head.tpl
   |
   `--index.php
</code>


<code html foot.tpl>

</body>
</html>
</code>

<code html head.tpl>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
</head>
<body>

</code>

<code php index.php>
echo file_get_contents('templates/head.tpl');

echo "Helló Világ!";

echo file_get_contents('templates/foot.tpl');

</code>


===== 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:

<code>
projekt/
   |--templates
   |     |--foot.tpl
   |     |--head.tpl
   |     `--index.tpl
   |
   `--index.php
</code>


<code html foot.tpl>

</body>
</html>
</code>

<code html head.tpl>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
</head>
<body>

</code>


<code html index.tpl>
<h1>{{ szoveg }}</h1>
</code>


<code php 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');

</code>


===== 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.

<code>
projekt/
   |--templates/
   |     |--foot.tpl
   |     |--head.tpl
   |     |--index.tpl
   |     `--terulet.tpl
   |
   |--index.php
   `--terulet.php
</code>


<code html foot.tpl>

</body>
</html>
</code>

<code html head.tpl>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>Kiírás</title>
</head>
<body>

</code>


<code html 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>
</code>


<code html terulet.tpl>
<p>Eredmény: {{ terulet }}</p>
</code>


<code php index.php>
<?php

echo file_get_contents('templates/head.tpl');

echo file_get_contents('templates/index.tpl');

echo file_get_contents('templates/foot.tpl');

</code>

<code php 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');

</code>

==== 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.

<code>
projekt/
   |--css/
   |   `--style.css
   |--includes/
   |     `--haromszog.php
   |--templates/
   |     |--foot.tpl
   |     |--head.tpl
   |     |--index.tpl
   |     `--terulet.tpl
   |--index.php
   `--terulet.php
</code>

<code css css/style.css>
#content {
    background-color: orange;
    margin: 5%;
    padding: 20px;
}

label {
    display: inline-block;
    width: 70px;
}

#about {
    margin-top: 20px;
}
</code>


<code php includes/haromszog.php>
<?php

function szamitTerulet($alap, $magassag) {
    return ($alap*$magassag)/2;
}

</code>


<code html foot.tpl>
<div id="about">Nagy János, 2020-05-06</div>

</div>

</body>
</html>

</code>

<code 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">
</code>


<code html 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>
</code>


<code html terulet.tpl>
<p>Eredmény: {{ terulet }}</p>
</code>


<code php index.php>
<?php

echo file_get_contents('templates/head.tpl');

echo file_get_contents('templates/index.tpl');

echo file_get_contents('templates/foot.tpl');

</code>

<code php 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');

</code>