Externé zdroje kódu

Dátum pridania: 21.06.2016 Dátum poslednej aktualizácie: 21.06.2016

Všeobecný prehľad

V tomto momente už rozumieme, že webstránka je tvorená kódom HTML. Ak máme len stránku HTML uloženú lokálne, prehliadač si načíta obsah súboru a zobrazí ho ako webstránku. Ak máme stránku niekde na serveri, či už u nás lokálne alebo vzdialene (remote), po zadaní URL adresy dostaneme zo servera rovnako obsah súboru. V prípade jazyka PHP sa tento kód najskôr spracuje na serveri, vygeneruje kód HTML a následne nám je vrátený komplet HTML kód. Ak aj máme použitú napríklad funkciu include, dostaneme kompletný kód aj so všetkým, čo sme do stránky zakomponovali. Môžeme si to otestovať tým, že si zobrazíme zdrojový kód našej stránky a vidíme, že sa tam nachádza aj kód zo súboru menu.php a podobne. Jednoducho, všetko čo vidíme na našej stránke, vidíme momentálne v jej zdrojovom súbore a v súboroch k nemu prislúchajúcich (napr. global.css).

Predstavte si situáciu, že nejaká webstránka chce ponúkať širokej verejnosti (v tomto prípade majiteľom iných stránok) nejakú interaktívnu reklamu na svoju vlastnú stránku. Môžete si to predstaviť ako nejaký štvorček, v ktorom je reklamný banner (obrázok/animácia/video) aj s nejakým ovládacím prvkom. Ovládacím prvkom rozumejme nejaký element, pomocou ktorého môže používateľ vyvolať nejakú interakciu, napr. tlačítko alebo odkaz, ktorý ho niekam presmeruje alebo zapríčiní vykonanie nejakej akcie. Isto už ako začínajúci programátori viete, že takéto niečo je jednoducho nejaký kód v HTML, kde by to bol nejaký div s obrázkom (img) a pod ním nejaké tlačítko alebo odkaz (a). Otázka ale znie, ako si všetci tí prevádzkovatelia stránok implementujú (vložia) túto časť kódu do svojej stránky? Možno vás napadlo, že jednoducho stránka, ktorá ponúka svoju reklamu, zverejní jednotlivé riadky kódu (kompletný kód) a ostatní si ho iba vložia do svojich zdrojových súborov.

Áno, je to jedna z ciest, ale úplne neefektívna a nevýhodná. Predstavte si, že by takto malo ďalších sto stránok vložený tento kód a následne by sa firma rozhodla niečo na ňom zmeniť. Musela by potom všetkých externých odberateľov kontaktovať a riešiť zmenu kódu. Ako sa to teda rieši? No asi tušíte, že si to každý zo záujemcov iba nejako externe načítava do svojej stránky. Podobne, ako sme si predtým zobrazovali obrázky uložené externe na nejakom serveri, do atribútu src sme vkladali Url adresy na konkrétne obrázky. To isté by sme mohli použiť aj vo funkcii include, zadali by sme namiesto lokálnej nejakú externú URL adresu súboru, ktorý by sme chceli do našej stránky zakomponovať. Tým pádom by mala stránka, ktorá ponúka reklamu, niekde na svojom serveri uložený súbor, ktorý reklamu obsahuje a záujemcom by iba poskytla URL adresu na tento súbor, ktorý by si mohli do svojej stránky vložiť.

Použitie funkcie include je jedna z ciest, ale myslím, že sa skoro vôbec v praxi nevyužíva. Zvykne sa to robiť dvoma inými spôsobmi. Jeden už poznáte a je to použitie elementu iframe, ktorý nám zobrazí vo vnútri našej stránky akokeby inú samostatnú webstránku. Dosiahneme to zadaním správnej adresy do atribútu src tohto prvku. Stránka alebo niekto iný ponúkajúci niečo svoje interné na zobrazenie na iných stránkach (reklama, video, banner atď.) iba jednoducho zverejní tento element so správnymi hodnotami atribútov (rozmery, src). Webmastrovi, ktorý má záujem tento prvok do svojej stránky zakomponovať, stačí iba tento kód vložiť niekde na správne miesto do kódu a je hotovo, externý prvok sa bude na stránke zobrazovať a bude spĺňať funkcionalitu. Pri prezeraní zdrojového kódu sa však tento kód nevložil do stránky, ako to bolo v prípade funkcie include. V tomto prípade je iba viditeľný kód prvku iframe, obsah stránky (kód) zadanej v atribúte src sa však nezobrazuje. Ten je uložený v súbore, na ktorý odkazuje zadaná URL adresa ifrejmu.

Vo svete programovania existujú tzv. skriptovacie jazyky, pomocou ktorých, ako to vyplýva z názvu, je možné tvoriť skripty. Podrobnejšie si o tom budeme hovoriť v sekcii jazyka JavaScript, nateraz nám len stačí vedieť, že skript je akýsi program, ktorý je ľahko spustiteľný na strane klienta. Vo väčšine slúži na zautomatizovanie viacerých príkazov (alebo nejakej funkcionality), ktoré by mohol postupne po jednom spúšťať aj klient. Ale kľudne to môže byť aj komplexný program alebo nejaká špeciálna funkcionalita. Prečo si o tom hovoríme? Pretože takéto skripty je možné do webstránok vkladať alebo ich aj priamo v nich písať.

K písaniu skriptov sa dostaneme troška neskôr, podstata je v tom, že vloženie skriptu, resp. jeho načítanie z externého miesta je druhá možnosť, ako niečo pridať do stránky. V prípade prvku iframe vo väčšine importujeme niečo vizuálne – nejaké viditeľné prvky na stránke (bannery, reklamy, mini verzie iných stránok a pod.), v prípade kódu JavaScript je to vo väčšine nejaké funkcionálne vylepšenie stránky, nejaké pluginy, niečo špeciálne (vizuálne vylepšenia, vizuálne efekty a pod.).

O týchto veciach si hovoríme preto, pretože na jazyk JavaScript nemáme v bakalárskom stupni priestor, budeme si ho brať troška neskôr. Môže sa vám ale ešte predtým stať, že budete pracovať na nejakom projekte a niekto bude od vás chcieť, aby ste si vložili nejaký skript na stránku. Neviete síce ešte úplne čo to je a čo to obnáša, už ale viete, že niečo také existuje a na sa to zvykne používať. Aby sme si o tom iba teoreticky nerozprávali, vyskúšame si veľmi bežnú vec a to je vložiť na stránku interaktívnu mapku z Google Maps. Čo to je? Určite ste boli na nejakej stránke v sekcii kontakt, kde bolo dané miesto zobrazený na malom prvku z GoogleMaps a priamo na tej stránke ste mohli vykonávať interakciu s týmto prvkom. Na stránke GoogleMaps si zadajte ľubovoľný bod aký chcete, my použijeme Banskú Bystricu. Následne kliknite v ľavom paneli na odkaz Zdieľať (Share) a vyberte záložku vložiť mapu (Insert map). Následne sa vám zobrazí html kód tohto prvku – konkrétne iframe tag. Skopírujte tento kód a vložte ho do stránky kontakt.php. Obalíme si ho divom, ktorému priradíme triedu pre aplikovanie nejakého štýlu. Mohlo by to vyzerať nejako takto:

kontakt.php (len pridaný kód):

<div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84199.38373426767!2d19.06093170408453!3d48.73928892777478!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47153de36e8ad42f%3A0xf8223f8a0b8b9032!2sBansk%C3%A1+Bystrica!5e0!3m2!1ssk!2ssk!4v1465151393672" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

global.css (len pridaný kód):

.map{
    margin: 30px 0px;
    text-align: center;
    padding: 25px 0px;
    background-color: #FFFFFF;
}

Ak sa teraz prepnete na našu stránku kontakt, uvidíte na nej načítanú mapku, ktorú môžeme používať rovnako, akokeby sme boli priamo na stránke maps.google.com. Keďže však tento súbor nemáme uložený lokálne, ale načítavamé externý zdroj – z externej URL adresy, bez pripojenia do internetu sa nám samozrejme nič nezobrazí, všetko ide z externého zdroja. Takto podobne je možné do stránky vložiť čokoľvek, čo je potrebné a nutné, ako napríklad reklamné bannery, pluginy pre funkcionalitu a efekty na stránke, mini Facebook FunPage a podobe...

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 - footer.php<div class="footer">

</div>

2 - fotogaleria.php<!DOCTYPE html>

<html lang="sk">

    <head>

        <title>Vitajte na našej prvej skutočnej webstránke!</title>

        <meta charset=“UTF-8“>

        <meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">

        <meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

        <link rel="stylesheet" type="text/css" href="global.css">

    </head>

    <body>

        <?php $actual_page = "fotogaleria";?>

        <div class="main">

            <?php include "header.php";?>

            <div class="content">

                <?php include "menu.php";?>

                <div id="gallery-content" class="main-content right">

                    <h1>Fotogaléria</h1>

                    <div class="line"></div>

                    <?php

                        $pictures = array();

                        for($i = 0; $i < 30; $i++){

                            $pictures[] = 'images/placeholder.jpg';

                        }

                        //zadefinovanie maximalneho poctu pre jednu stranku a nacitanie parametra (urcenie aktualnej stranky)

                        $countPerPage = 12;

                        if($_GET['page']){

                            $page = $_GET['page'];

                        }else{

                            $page = 1;

                        }

                        //vypocet od ktorej po ktoru fotku zobrazujeme galeriu

                        $start = ($page-1)*$countPerPage;

                        $end = $page*$countPerPage;

                        echo '<ul id="gallery">';

                        for($i = $start; $i < $end; $i++){

                            if($pictures[$i]){

                                echo '<li>';

                                    echo '<a class="left';

                                    if(($i+1)%3){

                                        echo ' photo-margin';

                                    }

                                    echo '" target="_blank" href="'.$pictures[$i].'">';

                                        echo '<img src="'.$pictures[$i].'">';

                                    echo '</a>';

                                echo '</li>';

                            }

                        }

                        echo '</ul>';

                        //cyklus, ktory nam vypise dostatocny pocet odkazov pre jednotlive stranky

                        $pageLink = 1;

                        $photosCount = count($pictures);

                        echo '<ul class="pagination">';

                        while($photosCount > 0){

                            echo '<li><a ';

                            if($pageLink == $page){

                                echo ' class="active" ';

                            }

                            echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';

                            echo '</li>';

                            $photosCount = $photosCount - $countPerPage;

                            $pageLink++;

                        }

                        echo '</ul>';

                    ?>

                </div>

                <div class="clear"></div>

            </div>

            <?php include "footer.php";?>

        </div>

    </body>

</html>

3 - global.cssBODY{

    margin: 0;

    background-color: #dee8e7;

    font-family: Arial;

}

H1{

    color: #5b6b78;

    margin-bottom: 10px;

}

.line{

    height: 3px;

    border-top: 1px dotted #5b6b78;

    border-bottom: 1px dotted #5b6b78;

    margin-bottom: 25px;

}

.main{

    background-color: #f6f7f1;

    width: 900px;

    margin: auto;

    margin-top: 20px;

    margin-bottom: 20px;

}

.header{

    border-bottom: 1px solid #7d8079;

    height: 150px;

}

.header-inner1{

}

.header-inner2{

}

.content{

}

.footer{

    border-top: 1px solid #7d8079;

    height: 200px;

}

.half-width{

    width: 50%;

}

.full-height{

    height: 100%;

}

.left{

    float: left;

}

.right{

    float: right;

}

.clear{

    clear: both;

}

/**********MENU***********/

.sidebar{

    width: 200px;

    height: 400px;

}

.sidebar UL{

    list-style-type: none;

    padding: 0;

    margin: 0;

}

.sidebar UL LI{

}

.sidebar UL LI A{

    display: block;

    padding: 15px 0px 15px 35px;

    border-bottom: 1px solid #7d8079;

    color: #7d8079;

    font-family: Arial;

    text-decoration: none;

    text-transform: uppercase;

}

.sidebar UL LI A.active{

    color: #f5f7f4;

    background-color: #f96b81;

}

.sidebar UL LI:HOVER A{

    background-color: #5b6b78;

    color: #d6e3e9;

}

.main-content{

    width: calc(100% - 241px);

    min-height: 700px;

    border-left: 1px solid #7d8079;

    padding-left: 20px;

    padding-right: 20px;

}

/**********GALERIA***********/

#gallery{

    display: inline-block;

    width: 100%;

    list-style-type: none;

    margin: 0;

    padding: 0;

}

#gallery A{

    display: block;

    height: 133px;

    margin-bottom: 10px;

}

#gallery A:HOVER{

    outline: 2px solid #7d8079;

}

#gallery IMG, #gallery A{

    width: 213px;

}

.photo-margin{

    margin-right: 10px;

}

/**********PERSONS***********/

.persons{

    width: 100%;

    table-layout: fixed;

    font-family: Arial;

}

.persons, .persons TH, .persons TD{

    border: 1px solid #D9E4E6;

}

.persons TH, .persons TD{

    padding: 15px;

}

.persons TH{

    background-color: #167F92;

    color: #FFFFFF;

    font-weight: normal;

    text-transform: uppercase;

}

.persons TR:nth-child(odd){

    background-color: #D9E4E6;

}

.persons TR{

    color: #024457;

    background-color: #FFFFFF;

}

.persons TD{

    font-size: 14px;

}

.persons TR:HOVER{

    color: #f5f7f4;

    background-color: #f96b81;

    cursor: pointer;

}

/**********PERSONS***********/

.contact_form{

    padding: 20px;

    border: 1px solid #ebebeb;

    background-color: white;

    font-family: Arial;

    font-size: 14px;

    color: #455560;

    text-transform: uppercase;

    text-align: center;

}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{

    display: block;

    width: 100%;

}

.contact_form LABEL{

    margin-bottom: 5px;

    text-align: left;

}

.contact_form INPUT, .contact_form TEXTAREA{

    height: 30px;

    border: 1px solid #bababa;

    margin-bottom: 30px;

}

.contact_form TEXTAREA{

    min-height: 100px;

    min-width: 100%;

    max-width: 100%;

}

.contact_form INPUT[type="submit"]{

    display: inline;

    width: 200px;

    height: 40px;

    background-color: #7bc143;

    border: 1px solid #6fae3c;

    font-size: 16px;

    color: #FFFFFF;

    text-transform: uppercase;

}

.contact_form INPUT[type="submit"]:HOVER{

    cursor: pointer;

    background-color: #42aa44;

}

.success, .error{

    border: 1px solid;

    margin: 10px 0px;

    padding:15px 10px 15px 10px;

}

.success {

    color: #4F8A10;

    background-color: #DFF2BF;

}

.error {

    color: #D8000C;

    background-color: #FFBABA;

}

/**********PAGINATION***********/

#gallery-content{

    text-align: center;

}

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 10px 0px 20px 0px;

}

ul.pagination li {

    display: inline;

}

ul.pagination li a {

    color: black;

    padding: 8px 16px;

    text-decoration: none;

    border: 1px solid #ddd;

}

 ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

}

ul.pagination li a:hover{

    background-color: #ddd;

}

.map{

    margin: 30px 0px;

    text-align: center;

    padding: 25px 0px;

    background-color: #FFFFFF;

}

4 - header.php<div class="header">

    <div class="header-inner1 full-height half-width left"></div>

    <div class="header-inner2 full-height half-width left"></div>

</div>

5 - index.php<!DOCTYPE html>

<html lang="sk">

    <head>

        <title>Vitajte na našej prvej skutočnej webstránke!</title>

        <meta charset=“UTF-8“>

        <meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">

        <meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

        <link rel="stylesheet" type="text/css" href="global.css">

    </head>

    <body>

        <?php $actual_page = "index";?>

        <div class="main">

            <?php include "header.php";?>

            <div class="content">

                <?php include "menu.php";?>

                <div class="main-content right">

                    <h1>Domov</h1>

                    <div class="line"></div>

                </div>

                <div class="clear"></div>

            </div>

            <?php include "footer.php";?>

        </div>

    </body>

</html>

6 - kontakt.php<!DOCTYPE html>

<html lang="sk">

    <head>

        <title>Vitajte na našej prvej skutočnej webstránke!</title>

        <meta charset=“UTF-8“>

        <meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">

        <meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

        <link rel="stylesheet" type="text/css" href="global.css">

    </head>

    <body>

        <?php $actual_page = "kontakt";?>

        <div class="main">

            <?php include "header.php";?>

            <div class="content">

                <?php include "menu.php";?>

                <div class="main-content right">

                    <h1>Kontakt</h1>

                    <div class="line"></div>

                    <?php

                        if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){

                            if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){

                                echo '<p class="error">Zadajte prosim korektne udaje</p>';

                                //naplnenie formulara

                                $name = $_POST['name'];

                                $email = $_POST['email'];

                                $subject = $_POST['subject'];

                                $message = $_POST['message'];

                            }else{

                                //odoslanie emailu

                                echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

                                $name = '';

                                $email = '';

                                $subject = '';

                                $message = '';

                            }

                        }

                    ?>

                    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">

                        <label for="email">Meno a priezvisko</label>

                        <input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

                        <label for="email">Email</label>

                        <input type="text" name="email" id="email" value="<?php echo $email;?>"><br><br>

                        <label for="subject">Predmet</label>

                        <input type="text" name="subject" id="subject" value="<?php echo $subject;?>"><br><br>

                        <label for="message">Správa</label>

                        <textarea name="message" id="message" placeholder="Zadajte text spravy..."><?php echo $message;?></textarea><br><br>

                        <input type="submit" name="contact_form" value="Odoslat">

                    </form>

                    <div class="map">

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84199.38373426767!2d19.06093170408453!3d48.73928892777478!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47153de36e8ad42f%3A0xf8223f8a0b8b9032!2sBansk%C3%A1+Bystrica!5e0!3m2!1ssk!2ssk!4v1465151393672" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

                    </div>

                </div>

                <div class="clear"></div>

            </div>

            <?php include "footer.php";?>

        </div>

    </body>

</html>

7 - menu.php<div class="sidebar left">

    <ul>

        <li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>

        <li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>

        <li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>

        <li><a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a></li>

    </ul>

</div>

8 - o-nas.php<!DOCTYPE html>

<html lang="sk">

    <head>

        <title>Vitajte na našej prvej skutočnej webstránke!</title>

        <meta charset=“UTF-8“>

        <meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">

        <meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

        <link rel="stylesheet" type="text/css" href="global.css">

    </head>

    <body>

        <?php $actual_page = "o-nas";?>

        <div class="main">

            <?php include "header.php";?>

            <div class="content">

                <?php include "menu.php";?>

                <div class="main-content right">

                    <h1>O nás</h1>

                    <div class="line"></div>

                    <?php

                        $person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');

                        $person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');

                        $person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');

                        $person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');

                        $person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

                        $pole = array($person_1, $person_2, $person_3, $person_4, $person_5);

                        $pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');

                        echo '<table class="persons">';

                            echo '<tr>';

                                echo '<th>Meno</th>';

                                echo '<th>Priezvisko</th>';

                                echo '<th>Email</th>';

                                echo '<th>Telefónne číslo</th>';

                            echo '</tr>';

                            for($i=0; $i<count($pole); $i++){

                                echo '<tr>';

                                for($j=0; $j<count($pole[$i]); $j++){

                                    echo '<td>'.$pole[$i][$j].'</td>';

                                }

                                echo '</tr>';

                            }

                        echo '</table>';

                    ?>

                </div>

                <div class="clear"></div>

            </div>

            <?php include "footer.php";?>

        </div>

    </body>

</html>

Rýchla navigácia

Zobraziť zoznam súborov k prednáške

Zobraziť predchádzajúcu prednášku

Zobraziť nasledujúcu prednášku

Ť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

externy kodkod externeincludescriptgoogle mapsgoogle mapy do strankywebstranka mapa

IT ftip

Dievča vo FastFoode: Môžem si zaznačiť vašu objednávku? Ja: Číslo 6, BBQ, diétna cola, debetnou kartou. DvFF: Akú si želáte omáčku? Ja: BBQ, diétna cola, debetnou kartou. DvFF: Čo na pitie? Me: Diétna cola, debetnou kartou. DvFF: Môže byť Pepsi? Ja: Jasné. Platím debetnou kartou. DvFF: A ako budete platiť? Ja: [vzdychajúc] debetnou kartou.