Grafické efekty pomocou CSS3

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

CSS

Dakedy dávno, ešte na prvých prednáškach tohto projektu sme spomenuli, že všetko v oblasti IT (a v podstate ako aj v iných oblastiach) sa neustále vyvíja. Každý jeden jazyk alebo technológia, o ktorej sme sa rozprávali, sa neustále vylepšuje a vychádzajú zaradom novšie a novšie verzie, či je to PHP, HTML, MAMP, phpMyAdmin...jednoducho všetko. Tá novšia verzia spravidla obsahuje opravy chýb alebo nedostatkov, ktoré niesla predošlá verzia a samozrejme, obsahuje aj niečo nové – atraktívne – lepšie navyše. Inak to nie je ani v prípade jazyka CSS.

Ako vieme, kaskádové štýly vznikli na to, aby sme mohli nastaviť nejaký dizajn, resp. grafický vzhľad jednotlivých elementov na stránke, ich usporiadanie a v podstate aj celú štruktúru stránky. Dosť dlho bolo možné pomocou jazyka CSS nastaviť iba taký základný – štandardný dizajn. Stránky mali spočiatku informačnú funkciu, neskôr slúžili na vykonávanie nejakej činnosti (správu) a postupne s ďalším vývojom už aj v konečnom dôsledku vyzerali pekne a reprezentatívne. S rýchlym vývojom sa začali objavovať požiadavky z praxe na ešte niečo krajšie.

Celá počítačová grafika napredovala a tak sa na stránkach začali objavovať dynamickejšie elementy ako niečo lietajúce, hýbajúce sa, krajšie efekty, vysúvacie okná, niečo čo sa zobrazilo z bublinky a podobné krasotinky. Všetko toto sa spočiatku nedalo robiť pomocou jazyka CSS, ale využíval sa na to skôr jazyk JavaScript. Takto to bolo dosť dlho, až kým si ľudia zodpovedný za CSS nepovedali, prečo by sme nevymysleli aj my nejaké také veci v CSS, pomocou ktorých by sa to dalo. A tak vznikla posledná verzia jazyka CSS3, v ktorej sa jednotlivé časti (moduly – vymoženosti) týkajú najmä takéhoto obohatenia webovej stránky.

Vymožeností, ktoré je možné spraviť pomocou funkcií po verzii CSS3 je strašne veľa a samozrejme nejdeme sa im všetkým venovať. Je ale dobré, že sme si obzrejmili, že niečo také existuje a ukážeme si len zopár funkcií, aby ste pochopili, o čom asi je reč a čo myslíme tými dynamickejšími prvkami a krasotinkami:) Pri zadívaní vlastností a hodnôt sa nič nemení, všetko je tak ako predtým. Ešte len spomeniem, že keďže je to posledná a v podstate dosť nová verzia jazyka CSS, tak niektoré staršie prehliadače ju nepodporujú. Patria medzi ne napríklad staršie verzie Internet Explorera, ale k tomu sa nejdem zbytočne vyjadrovať ;-) Normálne prehliadače ako Firefox alebo Chrome s tým problém nemajú...

Poďme si už ale ukázať nejaké tie fintičky a troška si skrášlime našu stránku. Pomerne často používané grafické vylepšenie elementov – blokov, je že sa im zahnú rohu, resp. sa im určia zaoblené rohy, nie hranaté, ako to máme všade doteraz. Je to možné pomocou vlastnosti s názvom border-radius (radius – zaoblenie), ktorej hodnota je jedna alebo viacero číselných hodnôt v pixeloch.

Štandardne, pri zadanej jednej hodnote sa nastaví zaoblenie rovnako na všetky 4 rohy, pri zadaní 4 hodnôt dookola od ľavého horného rohu, pri zadaní troch hodnôt ide prvá vľavo hore druhá vpravo hore a vľavo dole a posledná vpravo dole. Pri zadaní 2 hodnôt to ide oproti od ľavého horného rohu, takže ľavý horný a pravý dolný má prvé číslo a pravý horný a ľavý dolný má druhé číslo. Dané číslo znamená veľkosť polomeru kruhu, ktorý sa akokeby aplikuje na roh elementu (polomer je vzdialenosť od stredu kruhu k jeho okraju). Na ukážky si to aplikujeme na blok celej našej stránky a potom napríklad na formulár pre filtrovanie. Mohlo by to vyzerať asi takto:

view.php:

…
<h2>Zoznam používateľov</h2>

<!-- Formular na filtrovanie usera -->
<form class="contact_form filter_box" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="get">
...

global.css:

.main{
    background-color: #f6f7f1;
    width: 900px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
...
 text-align: center;
}

.filter_box{
    border-radius: 40px 10px;
}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
    display: block;
    width: 100%;
}
…

Ako vidíte na ukážke, najprv sme pridali rovnaké zaoblenie rohov pre hlavný blok našej stránky (main). Potom sme pridali pre formulár na filtrovanie novú triedu (filter_box), ktorej sme nastavili zaoblenie cez dve hodnoty, takže rohy ležiace oproti sebe majú rovnaké zaoblenie, ako vidno na ukážke. Túto vlastnosť je samozrejme možné záťadva aj po jednom, resp. individuálne pre jednotlivé rohy vymenovaním pozície medzi slovo border a radius, takže napr. border-top-left-radius, border-bottom-right-radius a podobne...

Ďalšie efekty si budeme ukazovať v časti fotoageléria, aby sme už domovskú stránku nemali preplnenú. Asi najčastejšie využívaný efekt je tieň, ktorý tvoria elementy. Pozánte ho ako niečo tak ľahko priesvitné a strácajúce sa smerom od stredu elementu do vonka, najčastejšie je dookola celého elementu. Tento efekt je možné nastaviť aj na písmo, ako aj na elementy (priestorové – tvaru obdĺžnika– nie text).

Pre text sa tento efekt zadáva pomocou vlastnosti text-shadow (tieň textu), ktorá môže obsahovať viacero variant ako hodnotu. Pri zadaní iba dvoch čísiel (číslo v pixeloch) zadávame vzdialenosť tieňa, ktorý bude tvorený tým istým textom (hrúbka, farba, veľkosť, priehľadnosť), kde prvé číslo značí horizontálnu vzdialenosť (vľavo vpravo) a druhé vertikálnu (hore dole). K číselným vyjadreniam sa zvykne zadať aj farba tieňa, vo väčšine iná ako samotný text, aby to nesplívalo a slabšia – menej výrazná.

Pri zadaní dvoch čísel a farby dostaneme teda ostrý jasný tieň, akokeby normálny text (plnej priehľadnosti – žiadne miznutie do priestora) posunutý o istú časť – vo väčšine smerom doprava a dole. Toto nie je to najlepšie použitie, ak sa nezadá oveľa menej výrazná farba ako samotné písmo, tak to dosť splýva a tieň je dosť výrazný. Úplne najkrajšie je to ale samozrejme so spomenutým efektom miznutia do priestoru, ktorý sa zvykne nazývať blur (škvrna, machuľa). Ten docielime zadaním tretieho čísla za spomenuté dva a pred zadaním farby, taktiež v pixeloch. Táto hodnota v tomto prípade značí akokeby mieru zamachulenia (aké pekné slovo) alebo skôr akú veľkú plochu bude zaberať výsledná machuľa – rozmazanie. Ukážeme si to na praktickej ukážke a následne si skúste cez webové nástroje tieto hodnoty meniť, aby ste videli ich význam.

fotogaleria.php:

…
        $pageLink++;
    }
    echo '</ul>';

    ?>

    <h2 style="text-shadow: 4px 4px 5px #5b6b78;">Na tento text sme si aplikovali shadooooooow!</h2>
</div>
...

Ako vidíte, skutočne sa akokeby v pozadí nášho textu nachádza tieň, ktorý je rozmazaný. Ako sme povedali, pohrajte sa s týmito hodnotami, aby ste videli, ako to funguje, najmä s tou treťou. Takýto tieň sa v IT brandži zvykne veľmi často nazývať drop shadow (drop – spadnúť, dopadnúť), pretože je tvorený akokeby dopadajúcim svetlom na daný objekt z daného smeru. Aby sme sa rozumeli, keďže teraz máme tieň pod textom smerom doprava, tak ho vytvára akokeby svetlo, ktoré svieti zhora a zľava na náš objekt v priestore.

Podobne sa zadáva tieň aj pre priestorové elementy vlastnosťou box-shadow (tieň rámca alebo čo :-D ). Túto vlastnosť môžeme aplikovať ako sme povedali na priestorové (najčastejšie blokové) elementy a tieň sa tým pádom vytvorí okolo akokeb hrán – rozmerov daného elementu. Tieto pravidlá sa dajú medzi sebou aj kombinovať, to znamená, že si v jednom riadku vieme zadať napríklad tieň, ktorý bude vpravo dole a za čiarkou a zadaním ďalšieho pravidla zadať tieň vľavo a hore a tým získame tieň okolo celého elemetnu. Poďme si toto aplikovať na náš hlavný div:

global.css:

…
.main{
    background-color: #f6f7f1;
    width: 900px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #CCCCCC, -5px -5px 5px #CCCCCC;
}

.header{
…

Ako vidíte vo výsledku, okolo nášho main boxu sa vytvoril slabý pekný tieň. Všimnite si, že smer doľava a hore sme zadali negatívnymi hodnotami v pixeloch. Podobne ako pri iných vlastnostiach sa smery určujú od stredu elementu, kde negatívna je vľavo a hore a pozitívna vpravo a dole. Pekné však?

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 - controller.php<?php 

    //vnorene subory

    include "helper.php";

    include "model.php";

    $actual_page = "index";

    $helper = new Helper();

    $user_name = '';

    $user_surname = '';

    $age = '';

    $role = '';

    $message = '';

    //TRIEDA USERLIST (zoznam pouzivatelov)

    class UserList{

        public $users = array();

        public $search_keyword = '';

        public $sort_by = 'id';

        public $sort_type = 'ASC';

        public $helper = null;

        function __construct($helper){

            $this->helper = $helper;

        }

        function loadData(){

            $result = toLoadAllUsers($this->search_keyword, $this->sort_by, $this->sort_type);

            if (mysqli_num_rows($result) > 0) {

                $data = mysqli_fetch_all($result, MYSQLI_ASSOC);

                //TRANSFORMACIA DAT NA POLE OBJEKTOV

                foreach($data as $key => $value){

                    if($value['role'] == 'owner'){

                        $this->users[$key] = new UserOwner($value['id'], $value['user_name'], $value['user_surname'], $value['age'], $value['role'], $value['phone_number'], $value['phone_number_2'], $value['COUNT(*)']);

                    }else{

                        $this->users[$key] = new User($value['id'], $value['user_name'], $value['user_surname'], $value['age'], $value['role'], $value['phone_number'], $value['phone_number_2'], $value['COUNT(*)']);

                    }

                }

                //$this->helper->printArray($this->users);

            }

        }

        function deleteUserById($id_user){

            $actual_user = null;

            $actual_user_key = null;

            foreach($this->users as $key => $value){

                if($value->id == $id_user){

                    $actual_user = $value;

                    $actual_user_key = $key;

                }

            }

            if($actual_user && $actual_user->deleteUser()){

                array_splice($this->users, $actual_user_key, 1);

                return true;

            }else{

                return false;

            }

        }

    }

    //TRIEDA USER (pouzivatel v tabulke users)

    class User{

        public $id = 0;

        public $user_name = '';

        public $user_surname = '';

        public $age = 0;

        public $role = '';

        public $main_phone_number = '';

        public $all_phone_numbers = array();

        function __construct($id, $user_name, $user_surname, $age, $role, $main_phone_number, $phone_number, $count_phone_number){

            $this->id = $id;

            $this->user_name = $user_name;

            $this->user_surname = $user_surname;

            $this->age = $age;

            $this->role = $role;

            $this->main_phone_number = $main_phone_number;

            //test ci treba nacitat viac cisiel

            if($phone_number && $count_phone_number > 1){

                //musime nacitat cisla

                $this->loadPhoneNumbers();

            }else{

                //ma iba ajedno alebo ziadne cislo

                if($phone_number){

                    $this->all_phone_numbers[] = $phone_number;

                }

            }

        }

        function loadPhoneNumbers(){

            $result = toLoadAllNumbersByIdUser($this->id);

            $data = mysqli_fetch_all($result, MYSQLI_ASSOC);

            foreach($data as $key => $value){

                $this->all_phone_numbers[] = $value['phone_number'];

            }

        }

        function deleteUser(){

            return toDeleteUserByIdUser($this->id);

        }

        function insertToDb(){

            return toInsertNewUser($this->user_name, $this->user_surname, $this->age, $this->role);

        }

    }

    class UserOwner extends User{

        function remindOwnerByMail(){

            //kod pre vykonanie funkcie

            print_r('Zavolala sa metoda remindOwnerByMail()');

        }

    }

    //ZACHYTENIE PARAMETROV PRE VLOZENIE NOVEHO USERA

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

        $user_name = $_POST['user_name'];

        $user_surname = $_POST['user_surname'];

        $age = $_POST['age'];

        $role = $_POST['role'];

        if(preg_match('#^.{0,50}$#', $user_name) &&

           preg_match('#^.{1,50}$#', $user_surname) &&

           preg_match('#^.{0,20}$#', $role) &&

           preg_match('#^[0-9]{0,3}$#', $age)){

            //KOREKTNE DATA

            $new_user = new User(null, $user_name, $user_surname, $age, $role);

            if($new_user->insertToDb()){

                $message = '<p class="success">Položka bola úspešne uložená.</p>';

            }else{

                $message = '<p class="error">Pri ukladaní dát do databzy sa vyskytla chyba.</p>';

            }

            //vycistenie poloziek

            $user_name = '';

            $user_surname = '';

            $age = '';

            $role = '';

        }else{

            //CHYBNE DATA

            $message = '<p class="error">Nová položka nebola uložená - nesprávne vyplnené dáta vo formulári. </p>';

        }

    }

    $user_list = new UserList($helper);

    //SPRACOVANIE FILTROVANIA

    if($_SERVER['REQUEST_METHOD'] == 'GET' && $_GET['search_form']){

        $user_list->search_keyword = $_GET['search_keyword'];

    }

    //ZACHYTENIE PARAMETRA PRE TRIEDENIE DAT V TABULKE

    $user_list->sort_by = $_GET['sort_by'];

    $user_list->sort_type = $_GET['sort_type'];

    $user_list->loadData();

    //MAZANIE POLOZKY

    $id_user = $_GET['id_user'];

    if($id_user){

        $result = $user_list->deleteUserById($id_user);

        if($result){

            $message = '<p class="success">Položka bola úspešne zmazaná.</p>';

        }else{

            $message = '<p class="error">Pri mazaní položky sa vyskytla chyba.</p>';

        }

    }

?>

2 - footer.php<div class="footer">

</div>

3 - 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 class="left';

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

                                        echo ' photo-margin';

                                    }

                                    echo '">';

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

                                        echo '<a target="_blank" href="'.$pictures[$i].'" class="over_div">';

                                            echo '<span>Kliknite pre zväčšenie!</span>';

                                        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>';

                    ?>

                    <h2 style="text-shadow: 4px 4px 5px #5b6b78;">Na tento text sme si aplikovali shadooooooow!</h2>

                </div>

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

            </div>

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

        </div>

    </body>

</html>

4 - 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;

    border-radius: 10px;

    box-shadow: 5px 5px 5px #CCCCCC, -5px -5px 5px #CCCCCC;

}

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

    position: relative;

}

.sidebar UL LI A, .sidebar UL LI:HOVER .submenu A{

    display: block;

    padding: 15px 0px 15px 35px;

    border-bottom: 1px solid #7d8079;

    color: #7d8079;

    text-decoration: none;

    text-transform: uppercase;

}

.sidebar UL LI A.active{

    color: #f5f7f4;

    background-color: #f96b81;

}

.sidebar UL LI:HOVER A, .sidebar UL LI .submenu 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;

}

.submenu{

    display: none;

    border: 2px solid #7d8079;

    position: absolute;

    top: -1px;

    left: 201px;

    width: 200px;

    background-color: #FFFFFF;

}

.sidebar UL LI:HOVER .submenu{

    display: block;

}

.sidebar UL LI:HOVER .submenu A{

    background-color: #FFFFFF;

}

.main-content{

    width: calc(100% - 241px);

    min-height: 700px;

    border-left: 1px solid #7d8079;

    padding-left: 20px;

    padding-right: 20px;

}

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

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

#gallery{

    display: inline-block;

    width: 100%;

    list-style-type: none;

    margin: 0;

    padding: 0;

}

#gallery LI{

    position: relative;

    height: 133px;

    margin-bottom: 10px;

}

#gallery LI IMG{

    width: 213px;

    height: 133px;

}

.photo-margin{

    margin-right: 10px;

}

#gallery A{

    display: none;

}

#gallery LI:HOVER A{

    display: block;

}

#gallery LI:HOVER{

    outline: 2px solid #7d8079;

}

#gallery A{

    text-decoration: none;

    position: absolute;

    background-color: grey;

    opacity: 0.4;

    height: 100%;

    width: 100%;

    top: 0px;

}

#gallery A SPAN{

    position: relative;

    top: 100px;

    color: #FFFFFF;

    font-weight: bold;

}

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

.persons{

    width: 100%;

    font-family: Arial;

}

.persons, .persons TH, .persons TD{

    border: 1px solid #D9E4E6;

}

.persons TH, .persons TD{

    padding: 10px;

}

.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 TH A.sortable{

    color: #FFFFFF;

}

.persons TH A.sortable:HOVER{

    color: #D9E4E6;

}

.persons TH A.sortable.asc:before{

    content: '⇡ ';

}

.persons TH A.sortable.desc:before{

    content:  '⇣ ';

}

/**********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;

}

.filter_box{

    border-radius: 40px 10px;

}

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

}

5 - 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>

6 - helper.php<?php

class Helper{

    function printArray($array){

        echo '<br><br>Obsah pola vypisany metodou PrintArray :<br><pre>';

        print_r($array);

        echo '</pre><br><br>';

    }

}

?>

7 - index.php<?php

include "controller.php";

include "view.php";

?>

8 - 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>

9 - 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>

            <ul class="submenu">

                <li><a href="kontakt.php">Kontakt</a></li>

                <li><a href="kontakt.php">Kontakt</a></li>

            </ul>

        </li>

    </ul>

</div>

10 - model.php<?php

//TRIEDA DATABAZA (pripojenie)

class Database{

    public $server_name = '';

    public $login_name = '';

    public $login_password = '';

    public $db_name = '';

    public $connection = null;

    function __construct($server_name, $login_name, $login_password, $db_name){

        $this->server_name = $server_name;

        $this->login_name = $login_name;

        $this->login_password = $login_password;

        $this->db_name = $db_name;

    }

    function connectToDb(){

        $this->connection = mysqli_connect($this->server_name, $this->login_name, $this->login_password, $this->db_name);

        if (!$this->connection) {

            echo 'Spojenie s databázou sa nepodarilo nadviazať.';

        }else{

            // echo 'Spojenie s databázou sa podarilo úspešne nadviazať.';

        }

    }

}

//PRIPOJENIE DO DB

$db = new Database('localhost', 'root', 'root', 'zapr_db_1');

$db->connectToDb();

//------FUNKCIE PRE TABULKU users

//vytiahnutie vsetkych dat z tabulky spolu s primarnym cislom pre tabulkovy zoznam na domovskej stranke

function toLoadAllUsers($search_keyword, $sort_by, $sort_type){

    $sql_query = "SELECT users.id,users.user_name,users.user_surname,users.age,users.role,user_phone_numbers.phone_number,upn.phone_number AS phone_number_2,COUNT(*) FROM users LEFT JOIN user_phone_numbers ON users.main_phone_number_id=user_phone_numbers.id LEFT JOIN user_phone_numbers AS upn ON users.id=upn.id_user";

    if($search_keyword){

        $sql_query .= " WHERE users.user_name LIKE '%".$search_keyword."%' OR users.user_surname LIKE '%".$search_keyword."%'";

    }

    $sql_query .= " GROUP BY users.id";

    if($sort_by){

        $sql_query .= " ORDER BY ".$sort_by;

        if($sort_type){

            $sql_query .= " ".$sort_type;

        }else{

            $sql_query .= " ASC";

        }

    }

    return mysqli_query($GLOBALS['db']->connection, $sql_query);

}

//zmazanie pouzivatela podla jeho id

function toDeleteUserByIdUser($id_user){

    $sql_query = "DELETE FROM users WHERE id=".$id_user;

    return mysqli_query($GLOBALS['db']->connection, $sql_query);

}

//pridanie noveho pouzivatela z formulara na domovskej stranke

function toInsertNewUser($user_name, $user_surname, $age, $role){

    $sql_query = "INSERT INTO users (user_name, user_surname, age, role) VALUES (";

    //otestovanie ci prisli parametre, inak vkladame NULL

    if($user_name){

        $sql_query .= "'".$user_name."',";

    }else{

        $sql_query .= "NULL,";

    }

    $sql_query .= "'".$user_surname."',";

    if($age){

        $sql_query .= $age.",";

    }else{

        $sql_query .= "NULL,";

    }

    if($role){

        $sql_query .= "'".$role."')";

    }else{

        $sql_query .= "NULL)";

    }

    return mysqli_query($GLOBALS['db']->connection, $sql_query);

}

//------FUNKCIE PRE TABULKU user_phone_numbers

//nacitanie vsetkych telefonnych cisiel jedneho usera podla jeho id z tabulky user

function toLoadAllNumbersByIdUser($id_user){

    $sql_query = "SELECT * from user_phone_numbers WHERE id_user=".$id_user;

    return mysqli_query($GLOBALS['db']->connection, $sql_query);

}

?>

11 - 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>

12 - uprava-zaznamu.php<!DOCTYPE html>

<html lang="sk">

    <head>

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

    </head>

    <body>

        <div class="main">

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

            <div class="content">

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

                <div class="main-content right">

                    <h1>Editácia používateľa</h1>

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

                    <?php 

                        $id_user = $_GET['id_user'];

                        //PRIPOJENIE DO DB

                        $server_name = "localhost";

                        $db_user_name = "root";

                        $password = "root";

                        $dbname = "zapr_db_1";

                        $connection = mysqli_connect($server_name, $db_user_name, $password, $dbname);

                        if (!$connection) {

                            echo '<p class="error">Spojenie s databázou sa nepodarilo nadviazať.</p>';

                        }

                        //SPRACOVANIE ODOSLANIA FORMULARA

                        if($_SERVER['REQUEST_METHOD'] == 'GET' && $_GET['edit_user_form']){

                            $user_name = $_GET['user_name'];

                            $user_surname = $_GET['user_surname'];

                            $age = $_GET['age'];

                            $role = $_GET['role'];

                            if(preg_match('#^.{0,50}$#', $user_name) &&

                               preg_match('#^.{1,50}$#', $user_surname) &&

                               preg_match('#^.{0,20}$#', $role) &&

                               preg_match('#^[0-9]{0,3}$#', $age)){

                                //KOREKTNE DATA

                                //ulozenie do DB

                                $sql_query = "UPDATE users SET user_name=";

                                //otestovanie ci prisli parametre, inak vkladame NULL

                                if($user_name){

                                    $sql_query .= "'".$user_name."',";

                                }else{

                                    $sql_query .= "NULL,";

                                }

                                $sql_query .= "user_surname='".$user_surname."',age=";

                                if($age){

                                    $sql_query .= $age.",";

                                }else{

                                    $sql_query .= "NULL,";

                                }

                                $sql_query .= "role=";

                                if($role){

                                    $sql_query .= "'".$role."'";

                                }else{

                                    $sql_query .= "NULL";

                                }

                                $sql_query .= " WHERE id=".$id_user.";";

                                $result = mysqli_query($connection, $sql_query);

                                if($result){

                                    echo '<p class="success">Položka bola úspešne uložená.</p>';

                                    ?>

                                    <script>

                                    window.location.href = "/MyProject Coding/5-Projekt2/index.php";

                                    </script>

                                    <?php

                                }else{

                                    echo '<p class="error">Pri ukladaní dát do databázy sa vyskytla chyba.</p>';

                                }

                            }else{

                                //CHYBNE DATA

                                echo '<p class="error">Položka nebola uložená - nesprávne vyplnené dáta vo formulári. </p>';

                            }

                        }

                        //NACITANIE DAT O USEROVI

                        if($id_user){

                            $sql_query = "SELECT * FROM users WHERE id=".$id_user.";";

                            $result = mysqli_query($connection, $sql_query);

                            if (mysqli_num_rows($result) > 0) {

                                $data = mysqli_fetch_all($result, MYSQLI_ASSOC);

                                $user_name = $data[0]['user_name'];

                                $user_surname = $data[0]['user_surname'];

                                $age = $data[0]['age'];

                                $role = $data[0]['role'];

                            ?>

                            <!-- Formular pre editovanie usera -->

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

                                <label for="user_name">Meno</label>

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

                                <label for="user_surname">Priezvisko</label>

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

                                <label for="age">Vek</label>

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

                                <label for="role">Rola</label>

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

                                <input type="hidden" name="id_user" value="<?php echo $id_user;?>">

                                <input type="submit" name="edit_user_form" value="Odoslať">

                            </form>

                            <?php

                            }else{

                                echo '<p class="error">Nepodarilo sa načítať dáta pre editovanie.</p>';

                            }

                        }else{

                            echo '<p class="error">Parameter používateľa pre editáciu sa nepodarilo načítať.</p>';

                        }

                    ?>

                </div>

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

            </div>

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

        </div>

    </body>

</html>

13 - view.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>

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

                    <?php 

                    if($message){

                        echo $message;

                    }

                    ?>

                    <h2>Pridanie nového používateľa</h2>

                    <!-- Formular pre vlozenie noveho usera -->

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

                        <label for="user_name">Meno</label>

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

                        <label for="user_surname">Priezvisko</label>

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

                        <label for="age">Vek</label>

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

                        <label for="role">Rola</label>

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

                        <input type="submit" name="user_form" value="Odoslať">

                    </form>

                    <h2>Zoznam používateľov</h2>

                    <!-- Formular na filtrovanie usera -->

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

                        <label for="search_keyword">Meno</label>

                        <input type="text" name="search_keyword" id="search_keyword" value="<?php echo $user_list->search_keyword;?>">

                        <input type="hidden" name="sort_by" value="<?php echo $user_list->sort_by;?>">

                        <input type="hidden" name="sort_type" value="<?php echo $user_list->sort_type;?>">

                        <input type="submit" name="search_form" value="Filtruj">

                    </form>

                    <br>

                    <?php

                        //VYPIS POUZIVATELOV DO TABULKY

                        if($user_list->users){

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

                                echo '<tr>';

                                    echo '<th>ID</th>';

                                    echo '<th><a class="sortable';

                                    if($user_list->sort_by == 'user_name'){

                                        if($user_list->sort_type == 'ASC'){

                                            echo ' asc';

                                        }else{

                                            echo ' desc';

                                        }

                                    }

                                    echo '" href="index.php?sort_by=user_name';

                                    if($user_list->sort_by == 'user_name'){

                                        if($user_list->sort_type == 'ASC'){

                                            echo '&sort_type=DESC';

                                        }else{

                                            echo '&sort_type=ASC';

                                        }

                                    }else{

                                        echo '&sort_type=ASC';

                                    }

                                    if($user_list->search_keyword){

                                        echo '&search_keyword='.$user_list->search_keyword.'&search_form=Filtruj';

                                    }

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

                                    echo '<th><a class="sortable';

                                    if($user_list->sort_by == 'user_surname'){

                                        if($user_list->sort_type == 'ASC'){

                                            echo ' asc';

                                        }else{

                                            echo ' desc';

                                        }

                                    }

                                    echo '" href="index.php?sort_by=user_surname';

                                    if($user_list->sort_by == 'user_surname'){

                                        if($user_list->sort_type == 'ASC'){

                                            echo '&sort_type=DESC';

                                        }else{

                                            echo '&sort_type=ASC';

                                        }

                                    }else{

                                        echo '&sort_type=ASC';

                                    }

                                    if($user_list->search_keyword){

                                        echo '&search_keyword='.$user_list->search_keyword.'&search_form=Filtruj';

                                    }

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

                                    echo '<th>Vek</th>';

                                    echo '<th>Rola</th>';

                                    echo '<th>Telefón</th>';

                                    echo '<th>Akcie</th>';

                                echo '</tr>';

                                for($i=0; $i<count($user_list->users); $i++){

                                    echo '<tr>';

                                        echo '<td>'.$user_list->users[$i]->id.'</td>';

                                        echo '<td>'.$user_list->users[$i]->user_name.'</td>';

                                        echo '<td>'.$user_list->users[$i]->user_surname.'</td>';

                                        echo '<td>'.$user_list->users[$i]->age.'</td>';

                                        echo '<td>'.$user_list->users[$i]->role.'</td>';

                                        echo '<td style="white-space: nowrap;">';

                                            echo '<span><b>'.$user_list->users[$i]->main_phone_number.'</b></span><br><br>';

                                            if(count($user_list->users[$i]->all_phone_numbers)){

                                                echo '<div id="numbers_'.$user_list->users[$i]->id.'" style="display:none;">';

                                                    foreach($user_list->users[$i]->all_phone_numbers as $index => $value){

                                                        echo '<span>'.$value.'</span><br>';

                                                    }

                                                echo '</div>';

                                                echo '<a href="javascript:void(0)" onClick="showNumbers('.$user_list->users[$i]->id.')">Zobraziť čísla</a>';

                                            }

                                        echo '</td>';

                                        echo '<td>';

                                            echo '<a href="uprava-zaznamu.php?id_user='.$user_list->users[$i]->id.'">Upraviť záznam</a><br><br>';

                                            echo '<a href="index.php?id_user='.$user_list->users[$i]->id.'" onclick="return showConfirm()">Vymazať záznam</a>';

                                        echo '</td>';

                                    echo '</tr>';

                                }

                            echo '</table>';

                        } else {

                            echo "0 results were selected.";

                        }

                        echo '<br><br>';

                    ?>

                </div>

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

            </div>

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

        </div>

        <script>

        function showNumbers(id){

                // alert(id);

            document.getElementById('numbers_'+id).style.display ='block';

        }

        function showConfirm(){

            var answer = confirm("Naozaj chcete vymazať daný záznam?");

            if(answer){

                //vykonanie, ak pouzivatel potvrdi confirm okno - odkaz sa vykona

                return true;

            }else{

                //vykonanie, ak pouzivatel zruzi confirm okno - odkaz sa nevykona

                return false;

            }

        }

        </script>

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

css3css 3border radiustext shadowdrop shadow csscss shadowcss radiusbox shadowcss tienovaniecss tiencss zaoblene rohy

IT ftip

"Moja babka má dnes 64 rokov." "Že gratulujem! Také okrúhle výročie!"