Viacrozmerné polia

Po úspešne spravenej a nadizajnovanej galérii na našej stránke máme pred sebou ďalší veľmi používaný prvok a tým je tabuľka. Niečo sme si už o tabuľke povedali, nie však všetko a práve v nasledujúcej kapitole si umiestnime na našu stránku zopár tabuliek s rôznym dizajnom, aby sme sa naučili dizajnovať tabuľky. Ešte predtým, ako sa do toho pustíme, si však musíme ešte niečo vysvetliť z jazyka PHP a reprezentácie tabuľkových dát pomocou premenných.

 

Dávnejšie sme sa naučili používať premennú pole. Definovali sme si ju ako typ premennej, ktorý môže v sebe obsahovať viacero prvkov – premenných. Prirovnávali sme je k ornému polu, kde každá priehradka niečo obsahovala alebo k vlaku, ktorého každý vagón niečo niesol a každý vagón mal svoje poradové číslo. Tieto vagóny sme mohli pridávať na koniec alebo hociktorý prvok odoberať. Vytvorili sme si tak polia (akokeby zoznamy), kde pod číselným indexom sme mali vždy uloženú nejakú hodnotu. Pri vysvetľovaní sme si napríklad naplnili takúto premennú zoznamom mien a následne sme ich vypísali do tabuľky, kde každý riadok predstavoval jednu položku z poľa. V tabuľke sme mali dva stĺpce, kde prvý stĺpec bol poradové číslo položky (index v cykle, ktorým sme vypisovali pole) a druhý stĺpec obsahoval hodnotu prvku – meno.

 

My ale budeme mať úlohu, kde máme vypísať povedzme zoznam zamestnancov. Chceme však, aby v našej tabuľke bolo viacero stĺpcov, napríklad meno, priezvisko, email, telefón. Ako to urobíme, keď jeden prvok môže obsahovať iba jednu premennú? Predtým sme tam mali uložené iba meno, ako spraviť, aby sme tam mali viacej hodnôt pod jedným prvkom? Práve časť viacej hodnôt pod jedným prvkom nám musí napovedať, že to je vlastne definícia premennej typu array. Takže všetky údaje o jednom človeku (meno, priezvisko...) si uložíme do jedného poľa. Pre všetkých ľudí si takto vytvoríme jedno pole.

 

Ako ale istý počet týchto polí (podľa toho koľko máme ľudí – zamestnancov) vypíšeme šikovne do tabuľky? Jedno pole už vieme prechádzať cyklom for a postupne vypisovať. Ak ale budeme mať týchto zamestnancov 6, budeme to robiť šesťkrát po sebe? Nedalo by sa to spojiť do nejakej jednej premennej a tú by sme si nejakým spôsobom tiež prechádzali cyklom?

 

Pozrite sa na definíciu poľa - je to premenná, ktorá môže obsahovať viacero premenných. Keďže je aj pole typ premennej, môže pole obsahovať pole? Odpoveď je áno! Môže! A presne takto to spravíme, každé toto jedno pole si uložíme ako jeden prvok ďalšieho pola. Tým pádom dosiahneme pole, ktorého každý prvok bude iné pole. Tento typ premennej sa nazýva v tomto prípade dvojrozmerné – 2D pole, pretože má dva rozmery. Pomocou prvého rozmeru – indexu - sa dostaneme na konkrétny prvok hlavného poľa a zadaním druhého rozmeru – indexu - sa dostaneme na konkrétny prvok druhého - vnoreného poľa – čiže konkrétne k našej hodnote.

 

Možno ste pochopili, že každé to druhé pole (vnorené) môže takisto obsahovať pole, to by bol už tretí rozmer a takto dookola môžeme vytvárať viacerozmerné polia, nateraz si to ale nejdeme úplne komplikovať, najčastejšie sa používajú práve dvojrozmerné, ktoré v podstate reprezentujú tabuľku. Tabuľka má riadky a stĺpce, čiže má niekoľko riadkov a niekoľko stĺpcov. Hlavné pole – prvý rozmer, bude v podstate reprezentovať jeden riadok a druhý rozmer bude reprezentovať jednotlivé stĺpce v riadku.

 

Môžete si to predstaviť, že hlavné pole je vlak, ktorý má vagóny. Prvým rozmerom (indexom) sa dostaneme ku konkrétnemu vagónu, ak zadáme index 5 dostaneme sa na šiesty vagón. Každý z týchto vagónov má však v sebe tiež pole – ďalší vlak s vagónmi. Tieto jeho vagóny však už obsahujú konkrétne hodnotu. Ak sa k nim chceme dostať, musíme zadať ďalší index. Môžete si to tiež predstaviť ako tabuľku v exceli, kde každá hodnota má isté akokeby súradnice, napríklad nejaká hodnota bude v šiestom riadku a treťom stĺpci. Ku konkrétnej hodnote budeme potom pristupovať napríklad $pole[5][2]. Aby sme iba nekecali, poďme si to názorne ukázať, aby ste vedeli, o čom je reč, skúste to nejako spraviť sami, ak nejde, tak si vložte tento kód do stránky page1.php:

 

page1.php

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

print_r($person_1);
echo '<br><br>';

echo '<pre>';
    print_r($person_1);
echo '</pre>';
echo '<br><br>';

echo '<pre>';
    print_r($pole);
echo '</pre>';
echo '<br><br>';

?>

 

Výsledku sa zatiaľ nebojte, pozrite sa na kód, ktorý sme použili. Na začiatku sme si nadefinovali päť rôznych polí. Následne sme tieto polia vložili ako parametre (prvky pola) do novej premennej typu array s názvom pole. Týmto krokom sme vytvorili dvojrozmerné pole, pretože ako hodnotu jeho parametrov (prvkov) sme vložili ďalšie polia. Následne sme do šiesteho prvku tohto dvojrozmerného pola (s indexom 5) vložili ďalšie pole, vytvorené funkciou array. To, že prvých 5 položiek pola sú polia nič neznamená, stále je to len obyčajné pole, kľudne sme do tohto šiesteho prvku mohli vložiť iba číslo alebo text, je to proste len premenná, ktorá má obsahovať iné premenné a je jedno aké.

 

Všimnite si teraz nasledujúce tri riadky, najmä ten stredný, prvý a druhý je len pomocný, aby sme vedeli, čo vypisujeme a aby sme mali nové riadky vo výstupe (výsledku). Zadali sme príkaz print_r a ako parameter sme použili naše prvé pole (pole1). Všimnite si vo výsledku, čo spraví táto funkcia. Táto funkcia slúži na výpis obsahu premennej. Celý obsah tejto premennej vypíše podrobne, aby tomu používateľ porozumel. Vidíme typ premennej (array) a v zátvorke obsah jednotlivých prvkov s indexami. Takto ľahko počas programovania si môžeme len na testovacie účely, ak si chceme niečo overiť, čo máme uložené v premennej a či je to tam tak, ako si to želáme. Táto funkcia je veľmi praktická a pomocná.

 

Ak ale zoberieme možnosť, že pole má povedzme 100 prvkov, tak to, že to je v riadku a že to ide zaradom, je kus neprehľadné. Preto sme si to o kúsok nižšie vypísali takmer rovnako, ale obalili sme to do elementu pre, ktorý sme si dávnejšie ukázali (text so zachovaným formátovaním). Vo výsledku je teraz pekne vidieť obsah našej premennej, jednotlivé prvky sú správne odsadené zľava a sú aj pod sebou zaradom vypísané. Hneď zatým sme si vypísali naše dvojrozmerné pole, aby ste videli, aká je štruktúra nášho poľa. Takýto výpis (print_r v pre elemente) je pre vás veľmi nápomocný, keď to vidíte vizuálne, ľahšie pochopíte, ako sú tam tie dáta uložené. V druhom výpise je teda vidieť, ako prvý prvok poľa s indexom 0 obsahuje tiež pole (array), ktorého prvky už obsahujú konkrétne hodnoty. Keď budeme chcieť k hodnotám pristupovať, pôjdeme presne tak, ako to vidíme – zhora a zľava. Čiže ak chceme hodnotu napríklad Tribbiani, máme je uloženú pod „súradnicami“ 2 a 1, takže $pole[2][1]. Pomocné 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 - 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 class="main-content right">
<h1>Fotogaléria</h1>

<?php

$pictures = array();

for($i = 0; $i < 7; $i++){
$pictures[] = 'images/placeholder.jpg';
}

echo '<ul id="gallery">';
for($i = 0; $i < 7; $i++){
echo '<li>';

echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';

echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
echo '</ul>';

?>
</div>

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

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

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}

.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar UL LI{
}

.sidebar UL LI A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
font-family: Arial;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

.sidebar UL LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
#gallery{
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery A{
display: block;
height: 133px;
margin-bottom: 10px;
}

#gallery IMG, #gallery A{
width: 213px;
}

.photo-margin{
margin-right: 10px;
}

4 - header.php

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

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

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

<body>
<?php $actual_page = "index";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Domov</h1>
</div>

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

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

6 - 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 == "page1"){echo 'active';}?>" href="page1.php">page1</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 == "page3"){echo 'active';}?>" href="page3.php">page3</a></li>
</ul>
</div>

7 - page1.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 = "page1";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Page1</h1>

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

print_r($person_1);
echo '<br><br>';

echo '<pre>';
print_r($person_1);
echo '</pre>';
echo '<br><br>';

echo '<pre>';
print_r($pole);
echo '</pre>';
echo '<br><br>';

?>
</div>

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

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

8 - page3.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 = "page3";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>Page3</h1>
</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

arrayviacrozmerne arrayviacrozmerne poliadvojrozmerne polephp poliatrojrozmerne pole2D pole2D array php

IT ftip

Tatranky.rar – energia zbalená na cesty!