spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 4.12.2012
Hodnoť článok:
10 1

T&T: Rýchla pomoc pri tvorbe galérie

Poznáte ten pocit, keď ste dlho pracovali na tvorbe HTML a nechcelo sa Vám vytvárať žiadne zložité administrácie a tak ste si sem-tam upravili len kúsok HTML kódu? Čo v prípade, že ste nemali veľa času a takáto úprava Vám teraz zabije rovnaký čas ako napríklad naprogramovanie jednoduchej galérie?


Predstavte si, že ste si dlho odkladali napríklad Vaše fotografie a nechcelo sa Vám po každom fotení aktualizovať Váš web. Áno, existuje množstvo nástrojov vrámci rôznych editorov fotografií, ktoré dokážu pomôcť pri exportovaní obsahu na web (napríklad vytvoria html a nahrajú ho na FTP), ale to nie je to, čo by sme ako "programátori" skutočne chceli, no nie? Nevešajme ale hlavu, veď sa to dá veľmi elegantne či už s databázou, alebo aj bez nej. Dôležité je len vedieť, ako "na to" a čo potrebujeme.


V prvom rade si poďme povedať, že toto budeme riešiť pomocou PHP a neskôr si k tomu budeme "pribalovať" nové funkcie. Základom je, aby sme si vytvorili nejaký ten "prehliadač" na obrázky, ktorý nám bude generovať "one-page" galériu.

Čo teda na úvod?

Najskôr si spravíme jednoduchý súbor, ktorý bude obsahovať úplne bežné HTML so základnými vecami ako hlavička, pätička a obsah. Netreba to asi nejako zvlášť obkecávať (myslím) a tak poďme na ten kúsok kódu.

<html>
	<head>
	<title>Zajtra.sk | T&amp;T | GalĂŠria</title>

	<!-- Meta Tags -->
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="robots" content="index, follow" />

       <style>
	.thumb {
		float: left;
		margin: 5px;
		padding: 5px;
		border: 1px solid #c7c7c7;
		background: #fafafa;
	}
	</style>
</head>

<body>

	<div id="container">

		<div id="navigation"></div><!-- navigation -->					
		<div id="content"></div><!-- primaryContent -->
		<div id="footer"></div><!-- footer -->

	</div><!-- container -->

</body>
</html>

Nebudem v tomto kóde ani deme zatiaľ riešiť žiadne navigácie, stránkovanie ani nejké rozšírenia, to by sme si mohli nechať na neskôr. Dôležité je sa rozhodnúť, ako oživiť obsah.

Hello "glob", alebo aj poďme listovať

Ak používate php dlhodobo, poznáte rôzne funkcie, ktoré dokážu pracovať so súbormi a adresármi a tak podobne. Jednou z užitočných (a asi azda najužitočnejších) je funkcia glob, ktorú použijeme na vylistovanie konkrétneho adresára, v ktorom sa nachádzajú naše obrázky.

Dajme tomu, že máme každú galériu ako samostatný adresár plný obrázkov rôznych typov, niečo ako:

ROOT_DIR
    > index.php
    > obrazky
         > galeria_1
              > obrazok_1.jpg
              > th_obrazok_1.jpg
              > obrazok_2.jpg
              > th_obrazok_2.jpg
              > obrazok_3.jpg
              > th_obrazok_3.jpg
              > ...
              > obrazok_N.jpg
              > th_obrazok_N.jpg
         > galeria_2
              > obrazok_1.jpg
              > th_obrazok_1.jpg
              > obrazok_2.jpg
              > th_obrazok_2.jpg
              > obrazok_3.jpg
              > th_obrazok_3.jpg
              > ...
              > obrazok_N.jpg
              > th_obrazok_N.jpg
         > galeria_3

Mali by sme sa teda rozhodnúť, či chceme aby nám celú galériu riadil jeden súbor, ktorý bude v ROOT-e, alebo súbor, ktorý bude priamo v adresári s obrázkami. Voľba č. 2 je síce najjednoduhšia, ale asi tak prezradíme štruktúru, ktorú máme použitú na našom webe. Ale tým sa teraz tiež netreba zaoberať. Momentálne je nám to jedno.

index.php a listovanie adresárov

Aby sme si to pomaly aj oživili, poďme si povedať, krok za krokom, čo do kódu pridáme.

1) budeme pridávať do sekcie

<div id="content">

...
2) budeme to robiť ako "hulváti" natvrdo, špinavo, bez templatov
3) poďme na to...

// V prvom rade si určíme, ktorá galéria je pre nás
// tá hlavná, ktorá sa načíta ako defaultná.
$mainGallery = 'galeria-1';

// následne si vytvoríme zoznam galérií (adresárov)
// ktoré povolíme "volať" pomocou parametru GET
// to jest v url pribudne niečo ako galeria/?gallery=nazov-adresara

foreach (glob('obrazky/*',GLOB_ONLYDIR) as $dir) {
   $allowed[] = str_replace('obrazky/','',$dir);
}

// zistíme, či sa odosiela parameter $_GET['gallery'] a ak áno,
// či obsahuje niečo, čo skutočne v našom filesystéme existuje
if($_GET['gallery'] != '' && in_array($_GET['gallery'],$allowed)) {

   // daný dir existuje, je povolený, tak ho nastavíme
   $dir = $_GET['gallery'];

} else if($_GET['gallery'] != '') {

   // daný dir nie je medzi povolenými, resp. nie je v našom filesystéme
   echo '<h2>Neexistujúca galéria</h2>';

   // nastavíme preto default
   $dir = $mainGallery;
} else {
   // neposiela sa parameter pre galériu, preto dáme default
   $dir = $mainGallery;
		}

// prejdeme si zvolený adresár ($dir) a vylistujeme
// obrázky (gif, png, jpg a jpeg)
// všimnite si, že hľadáme th_ a teda prefix pre
// thumbnailové verzie obrázkov
foreach(glob('obrazky/'.$dir.'/th_*.{jpg,jpeg,gif,png}',GLOB_BRACE) as $image) {
// keď to vyechujeme, nahrádzame th_ za prázdny
// znak, teda sa automaticky zruší a bude sa hľadať obrázok bez prefixu
echo '<div class="thumb"><a href="'.str_replace('th_','',$image).'" class="lightbox"><img src="'.$image.'" alt="" /></a></div>';
}

Výsledkom bez hlavičky a všetkého by malo byť niečo takéto:

Isto ste si v kóde všimli, že pri odkliku som použil triedu class="lightbox", ktorá by nám pri pridaní pár drobností mala otvárať veľký obrázok do tzv. modálneho okna. Celkovo sa tento základný kúsok kódu dá rozširovať na rôzne smery, no to už asi opäť po nejakom čase. Zatiaľ veľa zdaru pri tomto jednoduchom kóde a jeho upravovaní podľa vlastnej chuti.

Záverom?

Asi len toľko, že tento kód si môžete upraviť tak, aby ste si vedeli vytvoriť:

  • navigáciu z adresárov, ktoré existujú
  • doťahovanie titulkov a popisov k obrázkom
  • automatizovanú tvorbu náhľadových obrázkov
  • a veľa iného...
František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
10 1

72 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 František Čaník 10.12.2012 17:37:26
@Erik Márföldi súhlas {ThUP}
3 0 Erik Márföldi 10.12.2012 13:28:53
Neviem prečo to tu prerástlo urážok. Neprispievam často, skôr čítam, ale nedá mi.
To fakt, sa neviem rozprávať kultivovane a na urážlivý komentár reagovať stále slušne?

Ale vráťme sa k článku. Z mojich skúsenosti by som ho asi písal inak. Myslím, si že začiatočníkovi tento článok nepomôže. Ten čo sa chce dostať do tajov PHP, musí tomu najprv chápať. A popravde, nehovorím, že je zle písať o tvorbe galérie, alebo niečo také, ale očakával by som komplexný článok o tejto problematike, aby začínajúci programátor pochopil o čo ide.

Chýba mi tu príklad na stiahnutie, aby som si to mohol celé vyskúšať, aby som pochopil ako veci fungujú, aby štruktúra a kód bol pre mňa inšpiráciou. Pripadá mi to také nedokončené. Áno čítal, som že je to jednoduchý kód s možným pokračovaním. Ale myslím, si že kóder ocení skôr komplexnejší tutorial.

Veľmi dobre viem, že kvalitné články sa píšu dlho, treba obetovať veľa času. A toho veľa krát nemáme dosť.

Dúfam, že môj podnet budete brať konštruktívne a neprerastie to do osobných útokov.
0 0 viťo 7.12.2012 20:12:47
@kaktus troubo.. vidim, ale nerobim, resp. nerobil som s tym, s CMS urcite nie :))
nie som najsamlepsi webdesigner.. ako kazde dieta vie, webdesign sa rozdeluje asi na dalsich 8 veci..
0 0 kaktus 7.12.2012 18:39:49
@Viktor Čech je smutne, ze ako webdizajner najsamlepsi na svete nevidis suvislost webdizajnu a typografie a to tej neznamej skratke CMS uz ani nehovorim. Slza mi vyhrkla :-). sila..
0 1 viťo 7.12.2012 09:14:18
@kaktus ti hovorim, netipuj.. :) tu typografiu a cms si kde nabral? sila..
1 0 Kypo 7.12.2012 07:59:20
Jak som pisal, podla mna to netreba riesit vobec. Naco. Mazat prispevky? To aby admin cely den striehol kto co kam napise a mazal? Kto ho bude zato platit? Zbytocna robota. Vsade je to tak a vzdy bude ak sa daju pisat pod clanky komentare. Aj ludia ako shaggy musia existovat a mne nejak vobec nevadi, nech si pise co chce, nechajme podobnych zit. Pokial tam nejsu nejake vulgarizmy tak si myslim ze netreba robit nic. Kazdy aspon polointeligentny clovek co si nekadi po dome si musi byt schopny utvorit svoj nazor sam. Jedine riesenie - podobne prispevky ignorovat a nereagovat.
2 0 tester 7.12.2012 07:45:44
riesenie je jednoduche, nastavit pravidla: 1) zakazane OT 2) zakazane invektivy

kto porusi, zmaze sa comment. ak sa to opakuje casto, feelingovo admin da ban. nikde to nie je idealne, vsade to treba riadit - to je zivot. ak tu chyba moderator, dajte prava par ludom alebo jednemu co sem chodi pravidelne a bude to cistit. neviem .. moznosti je vela, treba hladat riesenia ak si prevadzkovatel mysli ze portal ma zmysel.
0 0 Cra Zy Sheep 7.12.2012 00:11:23
Neviem co z toho robite dramu Na kazdom komunitnom webe kde je viac nez 50 aktivnych uzivatelovsa nieco taketo stane vzdy je to len otazka casu, root.cz ma svojich exotov, vsetky herne portaly maju svojich exotov aj vlastne zabomysie vojny na azete na smecku proste vsade to funguje Nerobte z toho dramu lebo vas nastruham :)
1 0 kaktus 6.12.2012 22:53:31
@viťo jasne, ty si vytvaral html a css standardy a zaklady typografie uz v stadiu embria a uz ako fetus si mal rozbehane prve CMS.
0 0 viťo 6.12.2012 21:56:22
..nikdy nic nepisem na nahodu..
ked raz napisem, ze deti a studenti a zacinajuci webdizajneri NEVEDIA nic.. tak to proste plati..
0 0 Michal Obeda 6.12.2012 20:56:23
Zacina to tu byt uplne neznesitelne, vypinam server, nema to zmysel takyto portal prevadzkovat...
0 0 Jan Ranostaj 6.12.2012 20:49:09
Pozeram ze par ludi si tu neustale potrebuje riesit evoje ego. Z tohoto portalu sa stava len dalsia reality show (Zajtra.sk -bude to huste ). Rusim svoje konto, majte sa tu dobre!
1 0 Michal Obeda 6.12.2012 20:46:02
@Peter Sjekel do obrazu som sa dostal par clankami od konca, mozes to docitat za mna ked sa ti nieco nepozdava ...
0 0 kaktus 6.12.2012 20:45:10
@František Čaník nic by sa tymi IPckami nedosiahlo. Kto chce, moze poslat kazdy jeden svoj prispevok z inej IPcky, aj ked ide cez jedneho providera...
0 0 kaktus 6.12.2012 20:37:04
@Michal Obeda tyyy koksooo konecne nieco konstruktivne. Ten serial o Nette 2 by bodol. Vzhladom na mizernu zakladnu tutorialov by sa za nim isli pokakat slovenski aj ceski kolegovia, ktori zufalo hladaju veci na nette.org
0 0 kaktus 6.12.2012 20:22:13
ej bistu, rozkecavate sa tu ako stare baby na trhovisku, 40 komentarov za 1 den, kto to ma citat?
0 0 František Čaník 6.12.2012 20:10:04
@Michal Obeda + možno by bolo fajn keby sa za každým používateľom (dátumom a časom príspevku) zobrazovala aj úvodná a záverečná časť jeho IP adresy, aby som nebol obviňovaný z toho, že si registrujem xy nickov a obhajujem sám seba (čo som možno robil keď som mal 13 a ešte k tomu na azete (či vtedy ešte forum.sk? )) :D
0 1 František Čaník 6.12.2012 20:07:54
@Peter Sjekel verím, že to malo svoje opodstatnenie a zároveň som si viac ako istý (rovnako ako Michal), že shag sa tu isto "objaví" ako iný používateľ, prípadne (tým že je expert) nájde spôsob, ako ten "ban" obísť. Faktom je, že vôbec netuším, čo ten "ban" znamená a ako je riešený. Podľa mňa len nemá prístup ku komentom, inak môže všetko plnohodnotne využívať ďalej.

@Michal Obeda jo, tiež s tým počítam. Budeme musieť popremýšlať nad tým, ako riešiť obdobné veci. Návrhov tu padlo hneď niekoľko, ak chceš, môžem ti z toho spraviť sumár.
1 2 Peter Sjekel 6.12.2012 19:59:42
Tak toto je fakt vrchol. Napíšete, že sa nestíhate dostať do obrazu, ale napriek tomu dáte BAN jednej strane "sporu".

Jednanie na úrovni.
2 1 Michal Obeda 6.12.2012 19:24:44
nestiham citat co sa to tu deje, takze som to vyriesil BAN shaggymu, ocakavam ze si to neneha a ja budem mat dalsiu zabavku postarane ...
Frano pusti to z hlavy, mal som zareagovat skor, ale nebolo kedy srry. Este stale mozem odmazat vsetky commenty ...
Zajtra.sk > Programovanie > Seriály > T&amp;T: Rýchla pomoc pri tvorbe galérie


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama