Schovávanie elementov pomocou JavaScriptu

V minulej prednáške sa nám podarilo vytvoriť príkaz na vytiahnutie dát, ako ich potrebujeme. Teraz musíme skompletizovať naše dáta tak, aby sme mali o každom userovi všetky telefónne čísla, ktoré potrebujeme. Ako sme si povedali už dávnejšie, jednoducho pri prechádzaní dát z databázy sa spýtame, u ktorého musíme načítať viac čísiel podľa toho, aká je hodnota stĺpca COUNT a phone_number_2 (ak NULL, tak nemá čísla, ak číslo a COUNT 1 tak má iba 1 a ak číslo a COUNT väčší ako 1, musíme načítať). Tieto čísla si budeme ukľadať do poľa, čo bude nová property objektu user.

 

Ak nebude nutné načítať ostatné čísla pre usera, tak si do tejto property vložíme jednoducho tú, ktorá nám prišla z group by, číže v stĺpci phone_number_2, pretože to je jediné číslo, čo sa našlo. Toto by nemal byť problém, malo by to vyzerať asi takto:

 


index.php:


//(pridané do konštruktora pripojenie na databázu a posledné dva argumenty – nové stĺpce z druhého joinu)
//TRANSFORMACIA DAT NA POLE OBJEKTOV
foreach($data as $key => $value){
    if($value['role'] == 'owner'){
        $this->users[$key] = new UserOwner($db_connection, $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($db_connection, $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);

//(pridana nova property)
public $all_phone_numbers = array();

(zmeneny konstruktor a pridana funkcia na nacitanie vsetkych cisiel)
function __construct($db_connection, $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($db_connection);
    }else{
        //ma iba ajedno alebo ziadne cislo
        if($phone_number){
            $this->all_phone_numbers[] = $phone_number;
        }
    }
}

function loadPhoneNumbers($db_connection){
    $sql_query = "SELECT * from user_phone_numbers WHERE id_user=".$this->id;
    $result = mysqli_query($db_connection, $sql_query);
    $data = mysqli_fetch_all($result, MYSQLI_ASSOC);

    foreach($data as $key => $value){
        $this->all_phone_numbers[] = $value['phone_number'];
    }
}

 


Schválne sme si pomocou helpra nechali vypísať zoznam objektov, aby ste videli, že dáta skutočne vyzerajú tak, ako to chceme. Keďže už máme všetky dáta, ktoré potrebujeme, musíme si zmeniť kód, kde vypisujeme obsah buniek v tabuľke. Pribudol nám prvok v objekte, ktorý si prechádzame cyklom a automaticky vypisujeme obsah prvku (echo '<td>'.$value.'</td>') a tento prvok je array, takže pomocou echo príkazu sa nám jeho obsah nevypíše. Musíme si v tomto prípade zmeniť vypisovanie buniek na manuálne – ručne vypíšeme všetky td s obsahom.

 

Stĺpec s číslami si spravíme tak, že hlavné číslo si zobrazíme na začiatku tučným do elementu span. Následne sa pozrieme, či je nejaký obsah v property all_phone_numbers a ak áno, vypíšeme si do divu postupne pod seba všetky čísla. Mohlo by to vyzerať takto:

 


index.php (výpis obsahu tabuľky):

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>';
                    foreach($user_list->users[$i]->all_phone_numbers as $index => $value){
                        echo '<span>'.$value.'</span><br>';
                    }
                echo '</div>';
            }

        echo '</td>';
...

 


Ako vidíte, zrušili sme cyklus foreach, ktorý sme mali predtým a obsah buniek sme zadali manuálne, pretože bunka s číslami, resp. hodnota property je pole, takže by sa nám nevypísala. Celej bunke sme pridali vlastnosť white-space: nowrap (wrap – zalomiť), aby nám číslo nerozdelilo na viac riadkov. Teraz sa nám na stránke zobrazuje aj hlavné číslo a aj všetky ostatné. To je dosť zbytočné, prioritne sme chceli zobrazovať iba hlavné číslo.

 

Pekným riešením by bolo, aby sa zobrazovalo iba hlavné číslo, pod ktorým by bol odkaz pre zobrazenie všetkých čísiel. Takže defaultne sa zobrazí hlavné, ale ak má návštevník vidieť všetky čísla (z nejakého dôvodu), klikne si na odkaz a zobrazia sa mu aj ostatné. Ako to ale spravíme? Presne na fukcionalitu tohto typu (zmeny s elementami – už existujúcim kódom HTML na strane klienta – po načítaní stránky a bez refreshu) slúži jazyk JavaScript. Čo teda budeme na to potrebovať?

 

Pomocou jazyka JavaScript vieme pristupovať ku ktorémukoľvek elementu na stránke, najľahšie vtedy, ak má tento element jednoznačné (unikátne) id alebo triedu. Čiže ak by mal náš element id napríklad 123, tak by sme pomocou jedného príkazu vedeli k nemu pristúpiť a zmeniť mu nejakú vlastnosť CSS alebo jeho hodnotu. My teda potrebujeme po kliknutí k elementu (div s číslami) pristúpiť a zmeniť mu triedu alebo CSS vlastnosť tak, aby sa zobrazil (defaultne bude skrytý). Našou prvou úlohou teda je, aby divy s číslami mali unikátne id, aby sme k nim vedeli pristúpiť.

 

Ak by sme natvrdo dali id hodnotu napríklad numbers, nebolo by to unikátne, pretože každý div (v každom riadku kde je) by mal to isté id. Ako by sme vedeli, na ktorý riadok sme klikli a práve ktorý div chceme zobraziť? Ako vieme, user a v tom prípade aj riadok je jednoznačne identifikovateľný idčkom, takže si id vytvoríme pomocou tohto idčka a problém vyriešený – každý div bude mať iné id podľa svojho id usera. Potom teda chceme po kliknutí na odkaz zavolať funkciu, ktorej budeme musieť preposlať toto id, aby sme vedeli, na čo sme klikli, resp. v akom riadku sme klikli. Kód pre unikátne id, so skrytými číslami a zavolaním funkcie by mohol vyzerať takto:

 


index.php:

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

 <script>
function showNumbers(id){
    alert(id);
}
...

 


Všimnite si, že sme elementu div pridali štýl (rovno do riadku, nie cez CSS súbor, aby sme sa nezdržiavali), aby bol skrytý, resp. nezobrazený. Za ním sme pridali odkaz, ktorý na metóde onClick volá funkciu JavaScriptu, ktorej preposielame parameter – id používateľa. Všimnite si hlavne, čo sme vyplnili ako hodnotu atribútu href. Jednoducho by sa vám dalo vysvetliť, že sme tým stringom dali najavo, že sa nechceme nikde prekliknúť (lebo href), ale že chceme ostať na tejto stránke a iba volať cez onClick funkciu javascriptu. Ten odkaz akokeby zavolal prvotne prázdnu funkciu JavaScriptu. Takto to budeme používať, keď sa nebudeme chcieť prekliknúť, ale iba vyvolať nejaký kód v JS. Následne sme len zadefinovali funkciu, ktorá po zavolaní pomocou príkazu alert (upozornenie) zobrazí vyskakovacie informačné okno v prehliadači s textom, ktorý sme použili ako parameter. Čiže ak sme to spravili správne, zobrazí nám číslo, na ktorého usera sme klikli.

 

Ak si to vyskúšate, tak uvidíte, že to naozaj funguje. Aby sme dokončili dielo, už nám stačí iba nastaviť, aby sa po zavolaní funkcii nezobrazila iba hláška, ale aby nášmu elementu zmenilo hodnotu vlastnosti display na block (čiže aby sa zobrazil div). K elementom cez idčko pristupujeme pomocou príkazu getElementById, čo je metódou objektu (teraz už viete, čo to znamená) document, kde ako parameter zadávme požadované idčko elementu v HTML. Následne vieme na tomto elementu volať viacero funkcií, ktoré súvisia s prvkami stránky. V našom prípade chceme nastaviť vlastnosť css s názvom display, ktorá je zase metódou objektu style (štýl), ktorý sa nachádza v elemente. Aby sme sa nezapletli, na objekte dokument zavoláme funkciu na nájdenie elementu, na ktorom zavoláme jeho metódu style (property) cez ktorú sa dostaneme k vlastnosti display. Tej pomocou rován sa nastavíme hodnotu na akú chceme. Kód vyzerá takto:

 


index.php:

function showNumbers(id){
        // alert(id);
    document.getElementById('numbers_'+id).style.display = 'block';
}

 


Pomocou prvej polovici príkazu (document.getelementbyid) sa dostaneme k danému elementu. Následne cez bodku sa v JS pristupuje k property/metóde (oproti PHP ->), v našom prípade k property style (css štýl elementu), čo je tiež objekt a obsahuje property display, ktorá reprezentuje vlastnosť CSS s názvom display. Toto už nie je objekt, ale iba property, takže klasicky nastavíme hodnotu na string aký chceme. Všimnite si ešte, ako sme zadali idčko ako parameter funkcie getElementById. V jazyku JavaScript sa stringy nelepia cez bodku ako v PHP, ale cez znamienko plus (+).

 

Keď sme si predtým volali metódu a property objektov document, tak ste ešte nevedeli, čo je OOP. Teraz by ste to už ale mali chápať viac. Jednoducho document je objekt, ktorý reprezentuje celú webstránku. Ten sa skladá z viacerých properties a methods, my sme mu zavolali metódu getElementById, ktorá ako return vracia objekt, ktorý reprezentuje konkrétny HTML objekt (v našom prípade div). Ten je tiež objektom so svojimi metódami a atribútmi (vlastnosťami – properties). My sme pristúpili k property style, čo je tiež objekt, ktorý reprezentuje dizajn elementu a tiež má svoje properties. Na konci sme pristúpili k property display, ktorej sme už rovno nastavili hodnotu. Samozrejme, nemáte skade vedieť, aké metódy je možné volať na jednotlivých objektoch a takisto aké properties sa tam nachádzajú. Toto bol len jeden príklad, postupne sa naučíme nejaké tie najpoužívanejšie.

 

Ak si kód vyskúšate, uvidíte, že skutočne funguje, po kliknutí na odkaz sa nám zobrazia čísla. Dalo by sa to ešte dokončiť, že by sa tým pádom schovalo hlavné číslo a aby sa po opätovnom kliknutí čísla skryli, ale už si to nejdeme komplikovať. Celá táto funkcionalita s načítaním a uložením čísiel v db by sa možno dala aj jednoduchšie a menej komplikovane, schválne sme ale použili tento systém, aby ste si vyskúšali prácu s dátami a načítavanie dát na viackrát a v cykle, pretože sa to v praxi často vyskytuje. To by na tento semester stačilo, v poslednom semestri inžinierskeho štúdia si prejdeme ešte nejaké štandardy programovania a tiež si porozprávame troška teórie všeobecného prehľadu, aby sme toho zase vedeli trocha viac.

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

?>
</div>

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

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
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{
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;
}

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

?>

6 - 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";
include "helper.php";
$helper = new Helper();

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

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

<?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ť.';
}
}
}

//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($db_connection, $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($db_connection);
}else{
//ma iba ajedno alebo ziadne cislo
if($phone_number){
$this->all_phone_numbers[] = $phone_number;
}
}
}

function loadPhoneNumbers($db_connection){
$sql_query = "SELECT * from user_phone_numbers WHERE id_user=".$this->id;
$result = mysqli_query($db_connection, $sql_query);
$data = mysqli_fetch_all($result, MYSQLI_ASSOC);

foreach($data as $key => $value){
$this->all_phone_numbers[] = $value['phone_number'];
}
}

function deleteUser($db_connection){
$sql_query = "DELETE FROM users WHERE id=".$this->id;
return mysqli_query($db_connection, $sql_query);
}

function insertToDb($db_connection){

$sql_query = "INSERT INTO users (user_name, user_surname, age, role) VALUES (";
//otestovanie ci prisli parametre, inak vkladame NULL
if($this->user_name){
$sql_query .= "'".$this->user_name."',";
}else{
$sql_query .= "NULL,";
}

$sql_query .= "'".$this->user_surname."',";

if($this->age){
$sql_query .= $this->age.",";
}else{
$sql_query .= "NULL,";
}

if($this->role){
$sql_query .= "'".$this->role."')";
}else{
$sql_query .= "NULL)";
}

return mysqli_query($db_connection, $sql_query);
}
}

class UserOwner extends User{

function remindOwnerByMail(){
//kod pre vykonanie funkcie
print_r('Zavolala sa metoda remindOwnerByMail()');
}
}

//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($db_connection){
$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($this->search_keyword){
$sql_query .= " WHERE users.user_name LIKE '%".$this->search_keyword."%' OR users.user_surname LIKE '%".$this->search_keyword."%'";
}

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

if($this->sort_by){
$sql_query .= " ORDER BY ".$this->sort_by;

if($this->sort_type){
$sql_query .= " ".$this->sort_type;
}else{
$sql_query .= " ASC";
}
}

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

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($db_connection, $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($db_connection, $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, $db_connection){
$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->deleteUser($db_connection)){
array_splice($this->users, $actual_user_key, 1);

return true;
}else{
return false;
}
}
}

//PRIPOJENIE DO DB
$db = new Database('localhost', 'root', 'root', 'zapr_db_1');
$db->connectToDb();

//ZACHYTENIE PARAMETROV

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($db->connection)){
echo '<p class="success">Položka bola úspešne uložená.</p>';
}else{
echo '<p class="error">Pri ukladaní dát do databzy sa vyskytla chyba.</p>';
}

//vycistenie poloziek
$user_name = '';
$user_surname = '';
$age = '';
$role = '';

}else{
//CHYBNE DATA

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

}
?>

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

<?php

$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($db->connection);

//MAZANIE POLOZKY
$id_user = $_GET['id_user'];
if($id_user){

$result = $user_list->deleteUserById($id_user, $db->connection);

if($result){
echo '<p class="success">Položka bola úspešne zmazaná.</p>';
}else{
echo '<p class="error">Pri mazaní položky sa vyskytla chyba.</p>';
}
}

echo '<h2>Zoznam používateľov</h2>';

?>

<!-- Formular na filtrovanie usera -->
<form class="contact_form" 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>';

mysqli_close($db->connection);
?>
</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>

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

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

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

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

Ť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

java scriptdocument getelementbyidget element by id javascriptstyle.displaydisplay nonedisplay blockjavascript hiddenjs skrytie elementujs najedenie elementu

IT ftip

Otvorím Total Commander, pozriem vľavo – disk C, pozriem vpravo – tiež disk C. Načo sú mi dva disky C? Tak jeden zmažem.