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.