MATURITKA

← IT

Design webu, redakční systémy a e-shop

Doplněný obsah — není z archivu podkladů, napsáno podle ŠVP. Vhodné ověřit u vyučujícího.

Návrh designu webových stránek

Responzivní web

Webové aplikace a no-code/low-code nástroje

Redakční systémy (CMS)

Ukázka – šablona jednoduchého PHP-based CMS

I jednoduchý redakční systém lze postavit vlastními silami v PHP. Základní princip: existuje jeden soubor se společnou HTML kostrou (šablonou) stránky (hlavička, menu, patička), do které se pomocí include() vkládá proměnný obsah podle toho, jaká stránka se má zobrazit. Díky tomu se hlavička a patička nemusí opisovat na každé stránce zvlášť.

<?php
// index.php - hlavní vstupní bod, podle parametru v URL vybere obsah k zobrazení

// např. index.php?stranka=kontakt zobrazí soubor stranky/kontakt.php
$stranka = isset($_GET["stranka"]) ? $_GET["stranka"] : "uvod";

// jednoduché ošetření, aby nešlo zadáním jiné hodnoty načíst libovolný soubor ze serveru
$povolene = ["uvod", "o-nas", "kontakt"];
if (!in_array($stranka, $povolene)) {
    $stranka = "uvod";
}
?>
<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <title>Můj web</title>
</head>
<body>

  <?php include "sablona/hlavicka.php"; ?>

  <main>
    <?php include "stranky/" . $stranka . ".php"; ?>
  </main>

  <?php include "sablona/paticka.php"; ?>

</body>
</html>
<?php
// sablona/hlavicka.php - společná hlavička pro všechny stránky webu
?>
<header>
  <h1>Můj web</h1>
  <nav>
    <a href="index.php?stranka=uvod">Úvod</a>
    <a href="index.php?stranka=o-nas">O nás</a>
    <a href="index.php?stranka=kontakt">Kontakt</a>
  </nav>
</header>
<?php
// stranky/kontakt.php - dynamický obsah vložený do šablony
?>
<h2>Kontakt</h2>
<p>Napište nám na e-mail info@mujweb.cz.</p>

E-shop