Fotogalerie v PHP - 1. díl
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Fotogalerie v PHP - 1. dílFotogalerie v PHP - 1. díl

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

Fotogalerie v PHP - 1. díl

Google       Google       1. 10. 2008       56 535×

Jistě jste se dostali již do situace, kdy potřebujete na svých stránkách umožnit návštěvníkovi prohlédnout si vaše fotky, ale dávat je do jednotlivých stránek ručně je buď nepraktické, nebo příliš náročné. Hodit by se mohla automaticky generovaná fotogalerie.

Reklama
Reklama

V prvním díle vytvoříme stránku, která dokáže zobrazit obsah složky. Protože se chceme ve svém kódu vyznat, budeme používat téměř na vše funkce. První bude pro zobrazení obsahu složky.

Tato funkce vám vypíše vše, co se ve složce nachází. Nejdříve si tedy předveďme ten nejjednodušší kód a pak si ho upravíme, aby dělal přesně to, co potřebujeme.

<?php
function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		print $soubor.'<br>';
	}
	return True;
}
?>

Opravdu jednoduchá funkce, která vám pouze vypíše obsah složky. Funkci můžeme jednoduše zavolat příkazem:

ObsahSlozky('cesta/ke/slozce/s/fotografiemi/');

Druhý řádek s funkcí scandir nám do proměnné vloží pole se všemi soubory a složkami, toto pole pak příkazem foreach procházíme a vypisujeme všechny soubory.

Dalším krokem je rozlišit složky od souborů a soubory s obrázky od jiných souborů. Také je zbytečné vypisovat tečku, dvojitá se bude hodit pro přechod do vyšší složky. Po ošetření bude funkce vypadat takto:

<?php
function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		if($soubor != "."){
			if(is_dir($slozka."/".$soubor)) {
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				if(@getimagesize($cesta."/".$soubor)) {
					ZobrazNahled($soubor, $slozka, "obrazek");
				} else {
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	return True;
}
?>

Nejdříve jsme do funkce přidali rozpoznání složky od souboru pomocí funkce is_dir. Samozřejmě by šlo systém obrátit – zjistit, zda je položka v poli soubor pomocí funkce is_file. Další úpravou bylo vložení podmínky se zavoláním funkce getimagesize. Pokud je soubor obrázkem, vrátí nenulovou hodnotu s polem o jeho rozměrech, v opačném případě vrátí nulovou hodnotu.

Dalším naším úkolem je dodat naší funkci formu. Abychom však udrželi v kódu přehlednost, nebudeme vše sumírovat do jedné funkce a vytvoříme další funkci na přehledné vykreslení všech souborů. Zde trochu sáhneme i do CSS. Připravíme si dva obrázky o velikosti 100×75 px (poměr 4:3, stejný jako u většiny fotografií), první pro zobrazení složky, druhý pro soubor, který není obrázkem.

function ZobrazNahled($soubor, $cesta, $typ) {
	echo "<div style='border: 1px solid black; margin: 10px; float: left; text-align: center;'>";
	echo "<div style='width: 100px; height: 75px; padding: 5px;'>";
	
	if($typ == "slozka") {
		echo "<img src='slozka.png' alt='' title=''>";
	} else if($typ == "soubor") {
		echo "<img src='soubor.png' alt='' title=''>";
	} else {
		echo "<img src='".$_SESSION["slozka"]."/".$soubor."' alt='' title='' width=100>";
	}
	
	echo "</div>";
	echo "<div style='width:110px; background: #000; color: #FFF; text-align: center;' title='".$soubor."'>".substr($soubor, 0, 10)."</div>";
	echo "</div>";
}

Funkce, která v podstatě jenom zařídí, aby se vykreslil náhled obrázku, obrázek složky nebo souboru. Tato funkce však nebude fungovat stoprocentně. Pokud bude obrázek širší nežli vyšší, bude vše fungovat správně, v opačném případě ale rozhodí rozvržení stránky. Vytvoříme tedy funkci, která zajistí, aby byla vždy výška menší než 75 px a šířka menší než 100 px, přičemž poměr musí zůstat zachován. Protože se nám ale tato funkce bude ještě hodit, nestanovíme maximální výšku a šířku napevno, ale vždy si je vyžádáme.

function Zmensi($vyska, $sirka, $x, $y) {
	if($vyska > $x) {
		$zmenseno = $x / $vyska;
		$vyska = $x;
		$sirka = $sirka*$zmenseno;
	}

	if($sirka > $y) {
		$zmenseno = $y / $sirka;
		$sirka = $y;
		$vyska = $vyska*$zmenseno;
	}

	$ret = array($vyska, $sirka);
	return $ret;
}

Touto matematickou funkcí úspěšně zjistíme nové rozměry obrázku, které nyní stačí aplikovat do předchozí funkce (kód o kus níže). Není to úplně přesně vytváření náhledu, spíše zmenšeniny původního obrázku. O tom, jak vytvořit plnohodnotné náhledy (se zmenšením velikosti), si povíme v dalším díle. Zobrazení popisku je zkráceno funkcí substr, druhé číslo udává počet zobrazených znaků. Pokud by nebyla nastavena maximální délka, mohl by se design při dlouhém názvu rozhodit. To je první část vašeho domácího úkolu – vytvořit funkci, která by kontrolovala délku názvů a příliš dlouhé názvy by zkracovala co nejchytřeji. Za zkrácený název může přidat třeba tři tečky.

Teď už stačí začlenit použití této funkce do funkce ObsahSlozky().

function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		if($soubor != "."){
			if(is_dir($slozka."/".$soubor)) {
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				if(@getimagesize($cesta."/".$soubor)) {
					ZobrazNahled($soubor, $slozka, "obrazek");
				} else {
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	echo "<hr style='display:none; clear: both;'>";
	return True;
}

Tím je náš první skript na zobrazení obsahu složky hotov. V příštím díle přidáme možnost procházení podsložkami.

Ukázka celého okomentovaného kódu pro kontrolu:

<?php
function ObsahSlozky($slozka) {
	#
	# funkce pro vypsani obsahu slozky
	# a nasledne zavolani prilehlych funkci
	#

	// nacteni obsahu slozky do pole
	$obsah = scandir($slozka);
	// prochazeni polem obsah
	foreach($obsah as $soubor) {
		// pokud soubor neni .
		if($soubor != "."){
			// pokud je soubor slozkou
			if(is_dir($slozka."/".$soubor)) {
				// zavolani funkce pro ikonku slozky
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				// pokud je soubor obrazkem
				if(@getimagesize($slozka."/".$soubor)) {
					// zavolani funkce pro zobrazeni zmenseniny obrazku
					ZobrazNahled($soubor, $slozka, "obrazek");
				// pokud soubor neni obrazkem
				} else {
					// zavolani funkce pro zobrazeni ikonky neznameho souboru
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	// vypsani cistice
	echo "<hr style='visibility: hidden; clear: both;'>";
	// vraceni informace o uspesnem provedeni funkce
	return True;
}

function Zmensi($vyska, $sirka, $x, $y) {
	#
	# funkce, ktera zmensuje rozmery tak aby byl mezi sirkou a vyskou
	# zachovan pomer.
	#

	if($vyska > $x) {
		$zmenseno = $x / $vyska;
		$vyska = $x;
		$sirka = $sirka*$zmenseno;
	}

	if($sirka > $y) {
		$zmenseno = $y / $sirka;
		$sirka = $y;
		$vyska = $vyska*$zmenseno;
	}

	$ret = array($vyska, $sirka);
	return $ret;
}

function ZobrazNahled($soubor, $cesta, $typ) {
	#
	# funkce, ktera zobrazi zmenseninu obrazku, slozky nebo souboru
	#

	echo "<div style='border: 1px solid black; margin: 10px; float: left; text-align: center;'>";
	echo "<div style='width: 100px; height: 75px; padding: 5px;'>";

	// pokud chceme zobrazit ikonku slozky
	if($typ == "slozka") {
		// zobrazeni obrazku
		echo "<img src='slozka.png' alt='' title=''>";
	// pokud chceme zobrazit ikonku souboru, ktery neni obrazkem
	} else if($typ == "soubor") {
		// zobrazeni ikonky a odkazu
		echo "<img src='soubor.png' alt='' title=''>";

	// pokud chceme zobrazit nahled obrazku
	} else {
		// zjisteni rozmeru obrazku
		$rozmery = getimagesize($cesta."/".$soubor);

		$vyska = $rozmery[1];
		$sirka = $rozmery[0];

		// zavolani funkce pro zmenseni rozmeru
		$rozmery = Zmensi($vyska, $sirka, 75, 100);

		// nastaveni novych rozmeru
		$vyska = $rozmery[0];
		$sirka = $rozmery[1];

		// vykresleni nahledu
		echo "<img src='".$_SESSION["slozka"]."/".$soubor."' alt='' title='' style='border:0;' width=".$sirka." height=".$vyska.">";
	}

	echo "</div>";

	// zobrazeni popisku
	echo "<div style='width:110px; background: #000; color: #FFF; text-align: center;' title='".$soubor."'>".substr($soubor, 0, 10)."</div>";

	echo "</div>";
}

session_start();
ObsahSlozky(".");
?>

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Juda KaletaAutor programuje v PHP a Pythonu, má velmi rád Linux a svobodný software. Také občas vyrazí do terénu s fotoaparátem. Většinu takto získaného materiálu publikuje na svém blogu.
Web     Facebook     LinkedIn    

Nové články

Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý