Vnorenie súboru do webstránky

V poslednej kapitole sme si ukázali, ako použijeme externý súbor s dizajnom na našich stránkach, aby sme ho neopakovali. Možno ste si už skorej uvedomili, že kód pre naše kvázy menu (odkazy s preklikom na naše dve webstránky) je rovnaký v oboch prípadoch. To znamená, že používame ten istý kód na viacerých miestach a to by sme predsa nemali. Schválne sme sa však k tomu skorej nedostali, pretože na vyriešenie tohto problému je nutné použiť jazyk PHP.

 

Skúste sa zamyslieť, ako by ste tento problém vyriešili. Pravdepodobne vás napadlo niečo podobné, ako sme to spravili v predošlej kapitole v prípade kódu v jazyku CSS. Chcelo by to nejaký súbor, v ktorom by bol kód pre menu, čiže kód našich dvoch odkazov. Tento súbor by sme následne importli do našich stránok. Toto je zatiaľ správna úvaha. Menší problém, ktorý ešte ale musíme vyriešiť, je ten, že v prípade CSS sme ten súbor iba globálne importli a jeho kód sa aplikoval akoby na celú webstránku, na všetok jej kód. V tomto prípade je to však kus odlišné, my chceme vnoriť kód konkrétne na dané miesto. Nemôžeme nejako len importnúť súbor v hlavičke, pretože stránka by nevedela, kde má daný kód umiestniť, myslíme tým konkrétne na ktorý riadok a kde tele stránky (body). Stránka nemá skade vedieť, či to chceme na začiatok – hneď za tag body, alebo na koniec, pred uzatvorením body.

 

Práve preto je k dispozícii príkaz jazyka PHP, ktorý môžeme použiť na ľubovoľnom mieste v kóde. Pomocou tohto príkazu sa akokeby prilepí – vloží kód z cieľového súboru na dané miesto, akokeby tam bol rovno napísaný. Meno tohto príkazu je include (zahrňovať, obsahovať) a v jeho syntaxi za ním nasleduje v úvodzovkách URL adresa súboru. Poďme si to teda vyskúšať. Vytvorme si nový súbor v našom projekte a nazvyme ho menu.html. Vložme doňho kód našich dvoch odkazov a tento kód odstráňme z obidvoch súborov. Namiesto neho vložme v php (tagy pre vymedzenie jazyka php) príkaz include a do úvodzoviek vložme URL adresu nášho súboru, náš kód by mal vyzerať takto:

 

menu.html:

<a href="index.php" class="pretty">Domov</a>
<a href="page2.php" class="pretty">Stranka 2</a>

 

index.php:
 

<body>

    <h1>Vitajte na domovskej stranke!</h1>
    <?php include "menu.html";?>

</body>

 

 

Ak ste si kód vyskúšali, videli ste, že to vyzerá na pohľad rovnako, kód je však v tomto prípade optimálny. Ak ste tak už nespravili, je nutné zmeniť príponu súboru page2.html na page2.php, pretože sme v ňom použili kód jazyka php a ten musí byť v súbore s príponou php. Vzhľadom k tomu je ešte nutné v súbore menu.html zmeniť URL adresu druhého odkazu na novú príponu.

 

Použitie tohto príkazu má podobné výhody ako všetko, čo používame na to, aby sme nemali opakujúci sa kód. Čiže šetrí to miesto, je to prehľadné a ak chceme vykonať zmenu kódu, stačí ju zmeniť v jednom súbore a zmena sa prejaví na všetkých miestach. Pomocou tohto príkazu sa dá šikovne spraviť akási šablóna webového projektu, ktorú includujeme do každej podstránky celého projektu. Ako osobitné súbory je výhodne spraviť hlavičku, nejaké to bočné alebo horné menu, iné bočné panely a pätičku, jednoducho časti stránky, ktoré majú byť rovnake vo všetkých jej podstránkach. Všetky tieto časti môžu byť v osobitných súboroch, ktoré následne pomocou príkazu include vnárame do každej podstránky. V nej samotnej píšeme následne iba kód jadra – vnútra stránky (obsah – content), ktorý sa mení podľa toho, aká je to podstránka.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - global.css

.pretty{
color: black;
text-decoration: none;
border: 3px solid green;
background-color: white;
text-align: center;
padding: 10px 50px;
}

.pretty:hover{
background-color: green;
color: white;
border: 3px solid blue;
}

.pretty:active{
background-color: yellow;
color: blue;
border: 3px solid blue;
}

2 - index.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>

<h1>Vitajte na domovskej stranke!</h1>
<?php include "menu.html";?>

</body>
</html>

3 - menu.html

<a href="index.php" class="pretty">Domov</a>
<a href="page2.php" class="pretty">Stranka 2</a>

4 - page2.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>

<h1>Vitajte na stranke 2!</h1>
<?php include "menu.html";?>

</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

php includefunkcia includevnorenie suborunacitanie suboru do ineho suborunacitanie kodu z externeho suboru

IT ftip

- Viete, aký je rozdiel medzi mužom a počítačom? - Počítaču stačí všetko povedať iba raz.