Jednostavno kreiranje liste prijatelja u PHP-u — Blagonic.com – Svijet gledan očima dizajnera

Za početak kreirajte PHP array

Pretpostavljam da već imate svoju listu prijatelja, pa vam neću sugerirati koga da stavite (iako, ako nemate ideju, slobodno pogledajte našu listu :) ). Za početak ćemo kreirati PHP array u koji ćemo spremiti sve podatke o prijateljima.

$friendslist = array (
 'Nikola Plejić' => array ('link' => 'http://nikola.plejic.com/', 'id' => 'nikolaplejic'),
 'Ivan Brezak Brkan' => array ('link' => 'http://ivanbrezakbrkan.com/', 'id' => 'ivanbrezakbrkan'),
 'Maja Benčić' => array ('link' => 'http://blog.fritula.hr/', 'id' => 'majabencic'),
 'Senko Rašić' => array ('link' => 'http://www.senko.net/', 'id' => 'senkorasic'),
 'Bojan Janjanin' => array ('link' => 'http://www.yesterdayishere.com/', 'id' => 'bojanjanjanin'),
);

Neću vam sada objašnjavati osnove PHP-a, ali vjerujte mi kada kažem da su ovo stvarno osnove i ako ja kao dizajner mogu ovo napisati (doh!) možete i vi. Uglavnom, kreirali smo novi PHP array gdje smo definirali:

• Ime i prezime prijatelja (odnosno naziv, ako se ne radi o osobi)
• Za svakog prijatelja smo kreirali array gdje smo definirali link i id. Ovo nije potrebno ako ne želite prikazati posebnu ikonu za svakog prijatelja, no u našem slučaju moramo imati i ID.

Sljedeće na redu – funkcija za prikaz prijatelja

Cilj kreiranja funkcije za prikaz liste prijatelja bio je da kôd zadržimo na jednom mjestu. Kao kôd koristiti ćemo prilično standardnu unordered list, a svakog ćemo prijatelja prikazati kao jedan list item.

<ul class="friendslist">
 <li id="nikolaplejic"><a href="http://nikola.plejic.com/" title="Nikola Plejić">Nikola Plejić</a></li>
</ul>

Za postizanje ovog koda napravili smo PHP funkciju koja učitava $friendslist array te kreira pripadajući kôd za svakog prijatelja.

function friendslist($friendsarray, $class) {
 echo "<ul class=\"friendslist ".$class."\">\n";
 foreach ($friendsarray as $friendname => $friendinfo) { echo "<li id=\"".$friendinfo[id]."\"><a href=\"".$friendinfo[link]."\" title=\"".$friendname."\">".$friendname."</a></li>\n"; }
 echo "</ul>\n";
}

Idemo redom objasniti funkciju:

1. definiramo naziv funkcije te parametre
   1. prvi parametar je PHP array u kojem se nalaze podaci o našim prijateljima
   2. drugi parametar je naziv klase koju ćemo dodati na našu predefiniranu klasu friendslist. Ako se pitate zašto je ovo potrebno, jedan od primjera je kada listu koristite na različitim mjestima stranica. Npr. ukoliko listu želite prikazati tekstualno u sidebaru, možete definirati klasu textlist te je CSS-om stilizirati na način da ne prikazuje ikone.
2. definiramo početak liste (UL) te predefiniranu klasu i naziv dodatne klase (ili klasa)
3. Najbitniji dio funkcije koji kreira podatke za svakog prijatelja na listi
   1. ID koji mora biti različit
   2. Link za svakog prijatelja
   3. Ime prijatelja
4. kraj liste
5. kraj funkcije

Stiliziranje liste prijatelja

Ako ste sve napravili kako treba, dobili ste listu kao na sljedećem primjeru

<ul>
 <li id="nikolaplejic"><a href="http://nikola.plejic.com/" title="Nikola Plejić">Nikola Plejić</a></li>
 <li id="ivanbrezakbrkan"><a href="http://ivanbrezakbrkan.com/" title="Ivan Brezak Brkan">Ivan Brezak Brkan</a></li>
 <li id="majabencic"><a href="http://blog.fritula.hr/" title="Maja Benčić">Maja Benčić</a></li>
 <li id="senkorasic"><a href="http://www.senko.net/" title="Senko Rašić">Senko Rašić</a></li>
 <li id="bojanjanjanin"><a href="http://www.yesterdayishere.com/" title="Bojan Janjanin">Bojan Janjanin</a></li>
</ul>

Za stiliziranje liste, neće vam trebati puno vremena vladate li osnovama CSS-a. No da se ne morate previše mučiti, evo i CSS kôda koji smo upotrijebili za prikaz liste prijatelja.

.friendslist {
 float:left;
 display:inline;
}
.friendslist li {
 float:left;
 text-indent:-8000px;
 margin:0 0 4px 4px;
}
.friendslist a {
 display:block;
 width:20px;
 height:20px;
 background-image:url(img/art/friendslist.jpg);
 background-repeat:no-repeat;
 background-position:0 0;
}

Za početak smo definirali prikaz liste i prikaz svakog prijatelja, a u posljednoj definiciji smo kreirali sam link, širinu i visinu te background-image, background-repeat i background-position. Naravno, nismo trebali definirati ova 3 parametra, ali na ovaj smo način riješili problem za slučaj da nemamo definiranu ikonu za prijatelja.

Moram napomenuti kako ćemo za prikaz liste prijatelja učitati samo jednu sliku  friendslist.jpg u kojoj ćemo na svakih 20px razmaka staviti ikonu za jednog prijatelja te kasnije sa tehnikom pozicioniranja pozivati točno određenu ikonu. Kako izgleda ta slika?

Primjer CSS sprite slike sa ikonama za prikaz liste prijatelja

CSS Sprites je inače jako popularna tehnika koju možete koristiti za učitavanje jedne slike umjesto njih nekoliko, te određeni dijelovi slike služe za prikaz određenih elemenata stranica.

I za kraj, ostali smo vam dužni CSS kôd za prikaz svakog prijatelja. Here you go:

#nikolaplejic a { background-position:-160px -40px }
#ivanbrezakbrkan a { background-position:-20px 0 }
#majabencic a { background-position:-40px -20px }
#senkorasic a { background-position:-40px 0 }
#bojanjanjanin a { background-position:-100px -20px }

Imate li pitanja, prijedloga, komentara?