Asociatívne pole

Spomeňte si na kapitolu jazyka PHP, v ktorej sme si predstavili dátový typ pole (array). Ako už vieme, je to typ premennej, ktorý môže obsahovať ľubovoľný počet iných premenných. Tieto premenné sú uložené v premennej typu array zaradom, kde každá z nich má nejaký svoj index – poradové číslo a pomocou tohto indexu vieme k danej premennej pristupovať. Aj preto sa volá tento typ poľa indexované pole (indexed array), pretože sú jeho prvky reprezentované svojim indexom ($pole[$index]).

 

Typ array si využíva vo veľa smeroch, najčastejšie však pri práci s tabuľkou formou. Tabuľka má v podstate dva rozmery – riadky a stĺpce a táto forma sa dá reprezentovať úplne presne dvojrozmerným poľom, kde prvý rozmer určuje napríklad stĺpce a druhý jednotlivé položka (hodnoty v riadkoch). Pri tejto reprezentácii sú však jednotlivé stĺpce reprezentované indexom – číslom. V praxi však majú stĺpce vo väčšine nejaký svoj názov – tvoria hlavičku tabuľky, tak isto ako to máme aj v databázach.

 

Aj pre toto existuje v jazyku PHP ešte druhý typ polí a práve s týmto typom sa budeme častejšie stretávať najmä pri práci s databázou. Pri asociatívnom poli totižto prvok nie je uložený pod číselným indexom (číslo od 0), ale pod stringovým (slovo). Pole tohto typu sa nazýva asociatívne pole, kde asociatívny sa myslí pridružený/priradený, pretože daný prvok je priradený v poli pod daným slovom. Aby sme lepšie pochopili, o čom sa tu bavíme, pozrime si túto ukážku kódu, ktorú si odskúšajte stále v súbore index.php za pripojenie do databázy:

 


index.php (za spojenie s DB):

//polia
$indexed_array[] = "Janko Mrkvicka";
$indexed_array[] = "Charlie Harper";
$indexed_array[] = "Alf";

echo "<br><br>Prvok 1 z pola indexed_array: ".$indexed_array[0]."<br>";
echo "Prvok 2 z pola indexed_array: ".$indexed_array[1]."<br>";
echo "Prvok 3 z pola indexed_array: ".$indexed_array[2]."<br>";

echo '<pre>';
    print_r($indexed_array);
echo '</pre>';

//asociativne pole
$associative_array['Meno_1'] = "Janko Mrkvicka";
$associative_array['Meno_2'] = "Charlie Harper";
$associative_array['Meno_3'] = "Alf";

echo "<br><br>Prvok 1 z pola associative_array: ".$associative_array[Meno_1]."<br>";
echo "Prvok 2 z pola associative_array: ".$associative_array[Meno_2]."<br>";
echo "Prvok 3 z pola associative_array: ".$associative_array[Meno_3]."<br>";

echo '<pre>';
    print_r($associative_array);
echo '</pre>';

 


Ako vidíte na ukážke, v prvej časti si vkladáme do indexovaného poľa postupne tri hodnoty bez zadania indexu, ktaže sa nám hodnoty automaticky vkladajú od indexu 0. Následne si vypisujeme jednotlivé hodnoty v troch riadkoch, kde pre výpis (a celkovo prístup) zadáme do hranatých zátvoriek iba číslo indexu a tým sa dostaneme k danému prvku. Následne sme obsah poľa dali vypísať aj pomocou príkazu print_r, ktorý sme obalili do prvku html PRE, aby sme lepšie videli reprezentáciu poľa v počítači. Je vidieť, že prvky (hodnoty) sú uložené v poli zaradom pod číselným indexom.

 

V druhej časti si vkladáme prvky do asociatívneho poľa. Ako vidíte, vkladanie (priraďovanie) sa vykonáva tým, že do hranatých zátvoriek vkladáme rovno stringové indexy pre dané prvky a rovnakým spôsobom aj k prvkom následne vo výpise pristupujeme. Pro asociatívnom poli nie je možné vkladať prvky ako v prvom prípade ($pole[]=...), keďže chceme, aby prvky boli uložené pod stringovým indexom, počítač ho musí vedieť, čiže ho muísme zadať. Následne vo výpise cez príkaz print_r je jasne vidieť, že prvky sú v tomto poli uložené pod danými stringovými indexami.

 

Na čo je ale takéto pole dobré? Ak si spomeniete na to, ako sme vypisovali všetky prvky poľa, tak sme to robili najčastejšie pomocou cyklu s pevne daným počtom opakovaní (FOR), kde sa index cyklu zvyšoval o jedna a tým pádom sme postupne prešli všetky prvky poľa až po jeho dĺžku (length), pretože index poradového kroku cyklu bol v podsate aj index prvkov v poli. V tomto prípade by nám to však nepomohlo, pretože by sme potrebovali presne vedieť, pod akými indexami sú prvky v poli uložené.

 

K výpisu takéhoto poľa sa dostaneme o chvíľu, ešte si povieme jeden dôvod, prečo sme si to prebrali práve teraz. Možno tušíte, že to bude súvisieť s databázami a máte pravdu. Totižto pri zavolaní SELECTu na databázu dostávame v odpovedi dáta presne v tejto dátovej štruktúre – v asociatívnom poli. Prečo je to tak? Odpoveď je jednoduchá. Prvé indexy takého poľa sú práve názvy stĺpcov tabuľky, ktoré sa vo väčšine vypisujú v hlavičke tabuľky (th) a následne pod každým z týchto indexov (stĺpcov tabuľky v DB) je uložené indexované pole, kde sú prvky v poli uložené pod číselným indexom, kde daný index reprezentuje práve poradové číslo riadka v tabuľke. Takto jednoducho, pomocou indexovaného poľa v asociatívnom poli vieme dostať, resp. sformulovať celý obsah (dáta) tabuľky v databáze. V nasledujúcej prednáške si to už aj vyskúšame.

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%;
table-layout: fixed;
font-family: Arial;
}

.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}

.persons TH, .persons TD{
padding: 15px;
}

.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}

.persons TR:nth-child(odd){
background-color: #D9E4E6;
}

.persons TR{
color: #024457;
background-color: #FFFFFF;
}

.persons TD{
font-size: 14px;
}

.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}

/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
text-align: center;
}

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

.contact_form LABEL{
margin-bottom: 5px;
text-align: left;
}

.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}

.contact_form TEXTAREA{
min-height: 100px;
min-width: 100%;
max-width: 100%;
}

.contact_form INPUT[type="submit"]{
display: inline;
width: 200px;
height: 40px;
background-color: #7bc143;
border: 1px solid #6fae3c;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}

.contact_form INPUT[type="submit"]:HOVER{
cursor: pointer;
background-color: #42aa44;
}

.success, .error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}
/**********PAGINATION***********/
#gallery-content{
text-align: center;
}

ul.pagination {
display: inline-block;
padding: 0;
margin: 10px 0px 20px 0px;
}

ul.pagination li {
display: inline;
}

ul.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover{
background-color: #ddd;
}

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

4 - header.php

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

5 - index.php

<!DOCTYPE html>

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

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

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

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

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

<div class="content">

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

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

<?php

$server_name = "localhost";
$user_name = "root";
$password = "root";

$connection = mysqli_connect($server_name, $user_name, $password);

if (!$connection) {
echo 'Spojenie s databázou sa nepodarilo nadviazať.';
}else{
echo 'Spojenie s databázou sa podarilo úspešne nadviazať.';
}

//polia
$indexed_array[] = "Janko Mrkvicka";
$indexed_array[] = "Charlie Harper";
$indexed_array[] = "Alf";

echo "<br><br>Prvok 1 z pola indexed_array: ".$indexed_array[0]."<br>";
echo "Prvok 2 z pola indexed_array: ".$indexed_array[1]."<br>";
echo "Prvok 3 z pola indexed_array: ".$indexed_array[2]."<br>";

echo '<pre>';
print_r($indexed_array);
echo '</pre>';

//asociativne pole
$associative_array['Meno_1'] = "Janko Mrkvicka";
$associative_array['Meno_2'] = "Charlie Harper";
$associative_array['Meno_3'] = "Alf";

echo "<br><br>Prvok 1 z pola associative_array: ".$associative_array[Meno_1]."<br>";
echo "Prvok 2 z pola associative_array: ".$associative_array[Meno_2]."<br>";
echo "Prvok 3 z pola associative_array: ".$associative_array[Meno_3]."<br>";

echo '<pre>';
print_r($associative_array);
echo '</pre>';

?>
</div>

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

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

6 - kontakt.php

<!DOCTYPE html>

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

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

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

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

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

<div class="content">

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

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

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){
if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
echo '<p class="error">Zadajte prosim korektne udaje</p>';

//naplnenie formulara
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}else{
//odoslanie emailu
echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

$name = '';
$email = '';
$subject = '';
$message = '';
}

}

?>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">
<label for="email">Meno a priezvisko</label>
<input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

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

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

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

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

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

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

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

7 - menu.php

<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li>
<a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a>

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

</li>
</ul>
</div>

8 - o-nas.php

<!DOCTYPE html>

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

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

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

<body>
<?php $actual_page = "o-nas";?>
<div class="main">

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

<div class="content">

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

<div class="main-content right">
<h1>O nás</h1>
<div class="line"></div>

<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

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

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

echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';

for($i=0; $i<count($pole); $i++){
echo '<tr>';

for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}

echo '</tr>';
}

echo '</table>';

?>
</div>

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

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

Ť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

polepoliaasociativne poleasociativne poliapolia v phppole so slovnym indexomindex polaslovne poliastring prvok pole

IT ftip

Hovorí programátor programátorovi v nočnom v bare: - Ty počúvaj, pozri na tie slečny. Nejdeme si spojiť "software"? - Nie! Včera som zisťoval ich properties. Všetky sú read only!