zoltanhosszu.com | blog » PHP http://blog.zoltanhosszu.com Zoltan Hosszu's blog about xHTML, CSS, JavaScript, PHP Wed, 07 Apr 2010 20:07:53 +0000 en hourly 1 http://wordpress.org/?v=3.0 Ajax-szerű fájlfeltöltés PHP-val http://blog.zoltanhosszu.com/2009/05/ajax-szeru-fajlfeltoltes-php-val/ http://blog.zoltanhosszu.com/2009/05/ajax-szeru-fajlfeltoltes-php-val/#comments Tue, 12 May 2009 20:02:19 +0000 Zoltan http://blog.zoltanhosszu.com/?p=46 Ma elég huzamos ideig törtem a fejem és bújtam a fórumokat mire sikerült találnom egy olyan megoldást, amivel fel tudok tölteni egy fájlt anélkül, hogy frissülne az oldal. Hogy ez miért is kellett? A Kajdócsi Építész Stúdió adminisztrációs felületén dolgoztam és – bár később szántam-bántam, de – azt találtam ki, hogy amikor egy bizonyos bejegyzést – esetünkben munkát – szerkeszt az ember, lehessen “on-the-go” fájlokat feltölteni. Nem akarjuk ugyanis egy külön elküldött form miatt az összes módosítást elveszteni, ugye?

Szóval nekiálltam, hogy akkor megtanulom a jQuery Ajax metódusait, de szerencsére ráakadtam egy nagyon hasznos kis kerülőre. Ezt fogom most megosztani veletek.

Az első és legfontosabb dolog, hogy megértsük a <form> működését. A form – magyarul űrlap – egy olyan HTML tag, amivel egyszerű kitölthető mezőket tolhatunk a felhasználó arcába, ezzel rákényszerítve, hogy regisztrációkor megadja nekünk a haja színét és a kedvenc parfümének illatát. Ezek közé a mezők közé tartozik a fájl mező is. Az űrlap működése nagyon egyszerű, beillesztésekor megadjuk, hogy milyen módon (method), és hova (action) küldje az információkat, amiket a mezőkben megadtak a felhasználók.

A milyen módon rész POST vagy GET lehet, attól függően, hogy mennyire titkosan akarjuk küldeni az infokat. Elég másként lehet feldolgozni az adatokat, a GET ugyanis a címsorban küldi az adatokat (pl regisztracio.php?felhasznalo=jozsi&jelszo=123456), míg a POST titkosan küldi tovább, de ezért ha használni akarunk egy-két adatot további oldalakhoz, akkor azokat tovább kell vinni valahogy (PHP-nál nagyjából úgy mint ahogy a GET metódus teszi).

Az űrlap hova része a feldolgozó fájl (esetünkben egy PHP lesz), ami kezeli a megkapott adatokat és tárolja vagy továbbküldi.

A formokban betöltött fájlokkal az a baki összesen, hogy azokat PHP-ban nem $_POST és nem is $_GET, hanem $_FILES előtaggal kell feldolgoznunk, hogy jussunk valahova. Ahhoz, hogy megkapjuk a kiválasztott fájlokat, az űrlapnak meg kell adnunk még egy attribútumot, ez pedig az enctype. Az enctype igazából az elküldött adatok titkosításának módja (nem ugyanaz mint a POST/GET), a fájlok feltöltéséhez szükséges értéke pedig enctype=”multipart/form-data”.

Nézzük is akkor hogy mire lesz szükségünk. Lesz egy form, ahol kiválasztjuk a fájlt; lesz egy PHP ami feldolgozza a fájlt; és egy JavaScript ami a vizualizációért felelős. Az űrlap nem lesz túl bonyolult, lássuk csak:

  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Upload" />
  </form>

Igazából néhány extra mezőre szükségünk lesz, hogy a JS is jól működjön:

<body>
  <p id="f1_upload_process">Feltöltés folyamatban...</p>
  <p id="result"></p>
  <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
    Fájl: <input name="myfile" type="file" />
    <input type="submit" name="submitBtn" value="Feltöltés" />
  </form>
  <iframe id="upload_target" name="upload_target" src="#" style="width:0px; height:0px; border:0px;"></iframe>
</body>

Mint látjátok bekerült két <p> bekezdés és egy <iframe> belső frame, de ez utóbbi el van rejtve (width: 0px, height: 0px;). A keretre azért van szükségünk, mert ha megnézitek, az űrlapunk megkapta target attribútumnak az <iframe> nevét; magyarán oda fog betöltődni az action=”upload.php”. Ezzel le is lőttem a legnagyobb poént, amivel a fájlfeltöltés AJAX-szerűvé válik.  Egy finom kis CSS-t ráhúzunk az oldalra:

#f1_upload_process{
  z-index: 100;
  position: absolute;
  visibility: hidden;
}

Ezzel biztosítottuk, hogy a #f1_upload_process egyelőre láthatatlan legyen, mert majd a JavaScript teszi láthatóvá, a fájlfeltöltés elindításakor. Sok szó esett már a JavaScript részről, nézzük is meg, hogy mit tud. Egyelőre csak a startUpload() függvényt hívtuk meg az űrlap elküldésével. Ez a függvény igazából csak annyit tesz, hogy a már említett #f1_upload_process részt megmutatja nekünk és engedélyezi a form elküldését:

function startUpload(){
  document.getElementById('f1_upload_process').style.visibility = 'visible';
  return true;
}

A hangsúly nem is ezen a függvényen van, hanem a stopUpload()-on, ami a feltöltés eredményét fogja nekünk kiírni. Ezt a függvényt a PHP fájlból fogjuk meghívni majd.

function stopUpload(success) {
  if (success == 1){
    document.getElementById('result').innerHTML = '<span class="msg">Sikeres volt a fájlfeltöltés!</span>>';
  } else {
    document.getElementById('result').innerHTML = '<span class="emsg">Hiba történt a feltöltés során!</span>';
  }
  document.getElementById('f1_upload_process').style.visibility = 'hidden';
  return true;
}

A függvényt egy success paraméterrel együtt hívhatjuk meg, ami az eredménynek megfelelő üzenetet dob ki a <p id=”result”> bekezdésünkbe. A vizualizációval meg is volnánk, nézzük meg, hogy mi is történik a háttérben. A PHP az űrlapból megkapott fájlt egyszerűen felmásolja a gyökérkönyvtárjába, majd 1 másodperces pihenő után (hogy a nagyon kicsi fájloknál is látszódjon, hogy történik valami :P ) meghívja a stopUpload() JS függvényt.

<?php
  $destination_path = getcwd().DIRECTORY_SEPARATOR;
  $result = 0;
  $target_path = $destination_path . basename( $_FILES['myfile']['name']);
  if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
    $result = 1;
  }
  sleep(1);

  echo('<script language="javascript" type="text/javascript">
    window.top.window.stopUpload(' . $result . ');
  </script> ');

?>

Ezzel tulajdonképpen meg is volnánk. A dolog működik szépen, én is használom, használjátok ti is egészséggel! Ha bármilyen kérdés vagy észrevétel van, jöhet fórumba!

Forrás: ajaxf1.com

]]> http://blog.zoltanhosszu.com/2009/05/ajax-szeru-fajlfeltoltes-php-val/feed/ 1 PHP lapozás http://blog.zoltanhosszu.com/2009/05/php-lapozas/ http://blog.zoltanhosszu.com/2009/05/php-lapozas/#comments Mon, 04 May 2009 16:00:34 +0000 Zoltan http://blog.zoltanhosszu.com/?p=8 Ebben a cikkben egy adatbázist fogunk lapozható formára bontani. Nagyon hasznos ez a funkció, főleg egy nagyobb MySQL adatbázisnál, amikor az embernek többszáz recordja van egy táblában és ezeket szeretné a felhasználóknak valami átlátható formában megjeleníteni. Igazság szerint az alább leírt lapokra bontás talán a legegyszerűbb megoldása ennek a funkciónak, de remélem, hasznos lesz számotokra. Az alább összefoglalt függvényt az AlbérletPlusz.hu oldalhoz készítettem, ahol jelenleg is ez a PHP szkript felelős az oldalakra bontásért. Kezdjünk is hozzá.

Először is vegyük gyorsan sorra, hogy mire van szüksége az embernek egy lapozhatóan megjelenő tartalomhoz: honnan kezdődjön a lekérdezés a MySQL táblából és meddig tartson. Igazából a legnehezebb dolog itt nem a táblából való lekérdezés, hiszen azt egy sima “SELECT * FROM tabla LIMIT x, y” paranccsal megoldhatjuk, ahol x az eltolás mértéke (tehát, hogy honnan kezdjük az adatok lekérdezését), y pedig a megjelenítendő elemek száma (hmm, milyen érdekes, pont ezekre van szükségünk egy jól működő lapozás funkcióhoz, micsoda szerencse); a bonyolult funkció a lapok számának dinamikus kiírása, mondjuk egy ilyesmi formában:

lapozas

Ezt fogjuk most megírni.

Létrehozunk egy új függvényt mondjuk lapozas néven, és paramétereknek megadjuk az eltolás mértékét és a megjelenítendő elemek számát. A paramétereknek megadunk egy alap értéket, hogy ha a meghíváskor nem kap a függvény értékeket, akkor is tudjon szépen dolgozni.

Szükségünk lesz néhány változóra is: előző oldal, aktuális oldal, következő oldal, az oldalak száma, az oldalakon megjelenítendő összes elem száma, valamint egy olyan változóra ami az aktuális oldalszámtól jobbra és balra kiszámítja, hogy hány oldalt mutassunk: egy intervallumhatárra. Ez utóbbi változót így leírva lehet kicsit nehéz megérteni, de ahogy haladunk látni fogjátok a funkcióját.

function lapozas($offset = 0, $show = 12) { //Lapozás függvény - $offset az eltolás értéke, $show a megjelenítendő elemek száma

	global $osszes; //Itt megkapjuk az összes elem számát a táblából, ezt a lekérdezéskor kell kiszámolnunk.

	$elozo = $offset - $show; //Előző oldal kiszámítása
	$kovetkezo = $offset + $show; //Következő oldal kiszámítása
	$aktoldal = (int)($offset / $show) + 1; //Aktuális oldal
	$oldalszam = $osszes / $show; //Oldalak számának kiszámítása

	if ($oldalszam > (int)($osszes / $show)) $oldalszam = (int)($osszes / $show) + 1; //Oldalszám kerekítése

A változóknak kiszámoljuk a kezdeti értékeit és ezzel meg is van az egyik lényeges adat: a kezdeti értékek. Ezekre nagy szükségünk lesz a következő lépéseknél, hiszen elég sokat fogunk számolni velük. Létrehozunk egy rendezetlen listát (<ul>), az oldalszámokat pedig ebbe fogjuk pakolgatni, majd betesszük első elemnek az “előző oldal” kiírást és linket.

	if ($oldalszam > 1) { //Ha van elég oldal, hogy megjelenítsük

		print('<ul class="scroll">'); //Rendezetlen lista létrehozása, ebben tároljuk az oldalszámokat

		if ($elozo >= 0) print('<li><a href="oldal.php?&offset=' . $elozo .'">« elõzõ oldal</a></li>'); //Előző oldal kiírása, ha nem az első oldalon vagyunk

Innentől két részre bontottam a függvényt, először is azért, mert szerintem 10 oldal alatt nem érdemes a …-os részt belerakni, mert 10-12 link még bőven kifér és átlátható; 10 felett viszont már a $range értékkel is számolgatunk majd.

Szóval 10 oldal alatt egy sima for ciklussal bedobáljuk az oldalszámokat a megfelelő linkekkel a listába. Egy kis finomság: az aktuális oldalt vastaggal fogjuk írni.

		if ($oldalszam < 10) { //Oldalszámozás, ... nélkül

			for ($i = 0; $i < $oldalszam; $i++) {
				$off = ($i * $show) + ($offset % $show); //Offset számítása
				$oldal = $i + 1; //Kiirandó oldalszám megadása

				if ($off == $offset) $oldal = "" . $oldal . ""; //Aktuális oldal vastagon írva

				print ('<li><a href="oldal.php?&offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

		}

Ezzel meg is volnánk, most jön az érdekes rész, a …-ozás ha sok oldal van. Itt már szükségünk lesz a $range értékre, ami a már fent említett intervallumhatár értéket fogja tárolni. Ezt én 2-re állítottam, mert szerintem elég egy ötös (2 balra + aktuális oldal + 2 jobbra) intervallumot látni, de ezt nyugodtan megváltoztathatjátok. Itt be fogunk hozni 2 új változót, egy $start és egy $end változót, amik az aktuális oldaltól számolják a $range értékkel csökkentett ill. növelt értékeket. Ez azért kell, hogy ha az utolsó előtti oldalon vagyunk, ne írjunk ki utolsó+1 oldalt, a második oldalon meg -1-t. :) Lássuk akkor a kódot részletekben.

		 else { //Oldalszámozás ...-tal

			$range = 2; //Intervallum két szélének távolsága aktuális oldaltól

			if ($aktoldal >= ($range *2)) { //Ha messzebb vagyunk az első oldaltól mint $range * 2, kiírjuk az első oldal linkjét
				print ('<li><a href="oldal.php?offset=0">1</a></li>');
			}

			if ($aktoldal > ($range *2)) { //Ha már a második oldal száma nem látszik, kipontozzuk
				print('<li>...</li>');
			}

			$start = $aktoldal - $range; //$start és $end kezdeti értékek
			$end = $aktoldal + $range;

			// /!\ Kritikus rész /!\ a $start és $end pontos kiszámítása			

			if ($start < 1) { //Nem megyünk negatívaba, ha közel vagyunk az oldalak elejéhez
				$start = 1;
				$end = ($range * 2) + 1;
			} elseif ($end > $oldalszam) { //Nem megyünk túl a maximális oldalakon, ha a végén vagyunk
				$start = ($oldalszam - ($range * 2) + 1);
				$end = $oldalszam;
			}

Innentől igazából a nehezén túl is vagyunk, most egy sima for-ral ki kell iratnunk az oldalakat, majdnem úgy mint a kipontozós résznél, annyi eltéréssel, hogy most $start-tól $end-ig tesszük ezt meg.

			for ($i = $start; $i <= $end; $i++) { //Oldalak kiírása $start-tól $end-ig

				$off = ($i - 1) * $show;
				$oldal = $i;

				if ($off == $offset) $oldal = "<b>" . $oldal . "</b>";

				print ('<li><a href="oldal.php?offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

Már majdnem készen is vagyunk, egy nagyon apró dolog van csak hátra, az utolsó ill. a következő oldal linkjének kiírása, majd a lista és a függvény lezárása.

			if ($aktoldal < ($oldalszam - ($range * 2) + 1)) {
				print('<li>...</li>');
			}
			if ($aktoldal <= ($oldalszam - ($range * 2) + 1)) {
				$utolso = $osszes - ($osszes % $show);
				print ('<li><a href="oldal.php?offset=' . $utolso . '">' . $oldalszam . '</a></li>'); //Utolsó oldal kiiratása
			}
		}

		if ($kovetkezo <= $osszes ) print('<li style="border: 0px"><a href="' . $klink . '&offset=' . $kovetkezo . '">következő oldal »</a></li>');

		print ("</ul>");
	}

}

Ezzel kész is! Nézzük meg egyben gyorsan:

function lapozas($offset = 0, $show = 12) { //Lapozás függvény - $offset az eltolás értéke, $show a megjelenítendő elemek száma

	global $osszes; //Itt megkapjuk az összes elem számát a táblából, ezt a lekérdezéskor kell kiszámolnunk.

	$elozo = $offset - $show; //Előző oldal kiszámítása
	$kovetkezo = $offset + $show; //Következő oldal kiszámítása
	$aktoldal = (int)($offset / $show) + 1; //Aktuális oldal
	$oldalszam = $osszes / $show; //Oldalak számának kiszámítása

	if ($oldalszam > (int)($osszes / $show)) $oldalszam = (int)($osszes / $show) + 1; //Oldalszám kerekítése

	if ($oldalszam > 1) { //Ha van elég oldal, hogy megjelenítsük

		print('<ul class="scroll">'); //Rendezetlen lista létrehozása, ebben tároljuk az oldalszámokat

		if ($elozo >= 0) print('<li><a href="oldal.php?&offset=' . $elozo .'">« előző oldal</a></li>'); //Előző oldal kiírása, ha nem az első oldalon vagyunk

		if ($oldalszam < 10) { //Oldalszámozás, ... nélkül

			for ($i = 0; $i < $oldalszam; $i++) {
				$off = ($i * $show) + ($offset % $show); //Offset számítása
				$oldal = $i + 1; //Kiirandó oldalszám megadása

				if ($off == $offset) $oldal = "<b>" . $oldal . "</b>"; //Aktuális oldal vastagon írva

				print ('<li><a href="oldal.php?&offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

		} else { //Oldalszámozás ...-tal

			$range = 2; //Intervallum két szélének távolsága aktuális oldaltól

			if ($aktoldal >= ($range *2)) { //Ha messzebb vagyunk az első oldaltól mint $range * 2, kiírjuk az első oldal linkjét
				print ('<li><a href="oldal.php?offset=0">1</a></li>');
			}

			if ($aktoldal > ($range *2)) { //Ha már a második oldal száma nem látszik, kipontozzuk
				print('<li>...</li>');
			}

			$start = $aktoldal - $range; //$start és $end kezdeti értékek
			$end = $aktoldal + $range;

			// /!\ Kritikus rész /!\ a $start és $end pontos kiszámítása			

			if ($start < 1) { //Nem megyünk negatívaba, ha közel vagyunk az oldalak elejéhez
				$start = 1;
				$end = ($range * 2) + 1;
			} elseif ($end > $oldalszam) { //Nem megyünk túl a maximális oldalakon, ha a végén vagyunk
				$start = ($oldalszam - ($range * 2) + 1);
				$end = $oldalszam;
			}

			for ($i = $start; $i <= $end; $i++) { //Oldalak kiírása $start-tól $end-ig

				$off = ($i - 1) * $show;
				$oldal = $i;

				if ($off == $offset) $oldal = "<b>" . $oldal . "</b>";

				print ('<li><a href="oldal.php?offset=' . $off . '">' . $oldal . '</a></li>'); //Kiiratás
			}

			if ($aktoldal < ($oldalszam - ($range * 2) + 1)) {
				print('<li>...</li>');
			}
			if ($aktoldal <= ($oldalszam - ($range * 2) + 1)) {
				$utolso = $osszes - ($osszes % $show);
				print ('<li><a href="' . $klink . '&offset=' . $utolso . '">' . $oldalszam . '</a></li>'); //Utolsó oldal kiiratása
			}
		}

		if ($kovetkezo <= $osszes ) print('<li style="border: 0px"><a href="' . $klink . '&offset=' . $kovetkezo . '">következő oldal »</a></li>');

		print ("</ul>");
	}

}

Remélem megértettétek, hogyan is működik ez a függvény, ha nem, bátran kérdezzetek a hozzászólásoknál!

]]> http://blog.zoltanhosszu.com/2009/05/php-lapozas/feed/ 17