. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Flash+PHP+MySQL

Vendégkönyv készítése (1. rész), TXT alapú vendégkönyv
  feltöltve: 2003.12.23 | szerző: Ducky | olvasva: 15040 alkalommal

   
 
A vendégkönyv lényege, hogy a látogatók megjegyzéseket írhatnak bele. A megjegyzéseket elmentjük valamilyen háttértárolóban (pl.: adatbázis vagy txt file), és a későbbiekben a többi látogató is betekintést nyer a meglévő tartalomba. Amikor hozzáfogtam a segédlethez, először csak adatbázis alapú leírást készítettem, de úgy gondolom, hogy elég sokan nem rendelkeznek adatbázissal. Azok számára készült ez a txt alapú segédlet.

A flash mozi elkészítésével kezdjük el, de előtte nézzük meg, mit is fog tudni a program. A bejegyzéseket és a hozzájuk tartozó adatokat (név, e-mail, dátum) eltárolja egy txt file-ba. A tárolt adatokat megjeleníti. Egyszerre mindig csak megadott számú üzenetet jelenít meg, és egy lapozó rendszerrel lehet navigálni az üzenetek között. Az üzenethez tartozó névre kattintva az alapértelmezett levelező programmal e-mailt küldhetünk a bejegyzés írójának. Nemkívánatos karakterek (pl html kód stb..) kiszűrése. Mindez úgy gondolom, alapkövetelmény egy egyszerű vendégkönyv elkészítésénél. A végeredmény ezután már könnyedén továbbfejleszthető.

Flash rész:

Készítsünk egy új mozit. A paraméterek lehetnek tetszőlegesek, de a segédlet alatt használjátok az általam megadottakat, így biztosan nem lesznek félreértések. A mozi alapparaméterei a következők legyenek:

Első lépésben készítsük elő a layereket. Öt rétegre lesz szükségünk, a lenti képen látható módon. Értelemszerűen minden rétegre a neki megfelelő összetevők kerülnek.

Rajzoljuk meg a kereteket. Ez természetesen ízlés szerint lehet bármilyen. Én egy egyszerű keretrendszert alkalmaztam. Minden szövegmező körül van egy keret, plusz a fő keret. Természetesen az összes keret a keret layerre kerül. Az alábbi képen látható a teljes elrendezés, természetesen ezt mindenki tetszése szerint variálhatja.

Nézzük a text layert. Az összes text mező azon található. Szükség van egy címre, ami legfelül található és alcímekre, mint pl.: a nick név, e-mail cím, hozzászólás. Ezek a text-tek lehetnek static vagy dynamic text-mezők egyaránt.

Kell három input text, amik az új bejegyzéseket fogják elküldeni a php-nak. Ezek a mezők a mozi felső részében találhatóak, a fenti képen látható módon elrendezve. Nézzük meg fentről lefelé mind a hármat.

  • Az első a nick név, var neve: nev
  • Második az e-mail cím, var neve: mail
  • Harmadik a hozzászólás. Itt instance nevet is adunk,
        a scroll miatt. Instance név: mess , var neve: bgs

A hozzászólás mezőhöz kell egy scroll, amit a flash beépített komponensei közül veszünk. Nyissuk meg a Window/Components panelt és a ScrollBar-t egyszerűen húzzuk át a panelről a text-mezőre.

Ezt követően készíteni kell még két dynamic text-mezőt, amik a megjelenítésért lesznek felelősek. A felső mező a meglévő bejegyzések számát fogja kiírni, az alsó pedig megjeleníti a hozzászólásokat.

  • Felső dynamic text, var neve: osszmsg
  • Alsó dynamic text, instance neve: tartalom, var név nem kell.

A fent már említett módon, ehhez a szövegmezőhöz is rendeljünk egy ScrollBar-t. Természetesen aki nem szereti a beépített összetevőket, az használhatja a saját scroll megoldásait is tetszőlegesen.

A gombok elkészítése következik a gombok layeren. A fenti képen látható módon elhelyezve, készítsünk el hat gombot. Fentről lefelé megyünk sorban, nézzük meg az instance neveket.

  • Törlés gomb, instance neve: torol_btn
  • Mehet gomb, instance neve: mehet_btn
  • E-mail gomb (@), instance neve: kukac_btn
  • Előző gomb (lapozás), instance neve: eloz_btn
  • Következő gomb (lapozás), instance neve: kov_btn
  • Frissít gomb, instance neve: frissit_btn

A loader layeren található még két töltésjelző, amik a frissítés, lapozás, vagy adatbevitel esetén jelzik a folyamatot. Ez két különálló movie clip (mc). A neveik fentről lefelé sorban a következőek:

  • Felső kijelző: akkor működik, ha éppen adatbevitel folyik. Instance neve: loader1_mc
  • Also kijelző: akkor működik, ha a tartalom megjelenítését frissítjük, lapozunk stb..
        Instance neve: loader2_mc

Következik az action layer. Minden script, amit a program használ, ide kerül, beleértve a gombokat vezérlő utasításokat is. A scriptet sorban nézzük végig, folytatólagosan írjuk, és közben hozzáfűzöm a magyarázatokat. Jelöljük ki az action layer frame-jét és nyissuk meg az action palettát.

//ebbe a változóba kerülnek az adatok a php-ból
fogad = "";
fresh = 1;
//adatok lekérdezése
function phpload() {
tartalom.htmlText = "";
loader2_mc._visible = 1;
loader2_mc.play();
_root.loadVariables("tart.php", "POST");
}
//meghívjuk a php file-t
phpload();

Létrehozzuk a fogadó változót, majd a fresh azonosítónak értéket adunk. Ez a php átnézése után válik majd teljesen érthetővé, a php ez alapján azonosítja majd, hogy éppen frissítés történik. Ezután létrehozzuk a phpload() függvényt. Ez a függvény fogja a vendégkönyv tartalmát beolvasni.

//adatok bevitele és lekérdezése
function phpsend() {
loader1_mc._visible = 1;
loader1_mc.play();
_root.loadVariables("beir.php", "POST");
}

A php send függvény küldi el az új hozzászólást a bejegyzéshez. Elpost-olja az input text-ek tartalmát, ami a beir.php-ban kerül feldolgozásra.

//ha megérkezik az adat a php-ból
_root.onData = function() {
loader2_mc._visible = 0;
loader2_mc.stop();
loader1_mc._visible = 0;
loader1_mc.stop();
tartalom.htmlText = fogad;
//csak akkor töröljük a mezők tartalmát
//ha adatbevitel is történt.
if (mehet == 1) {
del();
}
mehet = 1;
if (beirok == "ok") {
step = "0";
fresh = "1";
phpload();
beirok = "";
}
//lapozó gombok megjelenítése
if (elozo == "nincs") {
eloz_btn._visible = 0;
} else {
eloz_btn._visible = 1;
}
if (kovet == "nincs") {
kov_btn._visible = 0;
} else {
kov_btn._visible = 1;
}
};

Az onData() akkor fut le, amikor a flash adatot kap a php-tól. Az eseményjelzőket leállítja, majd a tartalom text-nek átadja a fogadó változó értékét, azaz kiíratja a megjelenítendő szöveget. Ha történt adatbevitel, azaz a mehet egyenlő eggyel, akkor az input text-ek tartalmát töröljük a del() függvénnyel, ez kicsit lejjebb lesz. Ugyanekkor a 'beirok' változó a php-tól kap értéket ('ok') és lefrissíti a megjelenített tartalmat. Így már az új bejegyzés is azonnal megjelenik. Ezt követi a lapozó gombok megjelenítése. A php-ból kapja az értéket.

//szövegmezők ürítése
function del() {
nev = "";
mail = "";
bgs = "";
}
//hibaüzenet az ellenőrzéshez
function hiba(msg) {
tartalom.htmlText = "<font color='#ff0000'><b>"+msg;
}

A del függvény, amit már fentebb említettünk, törli az input text-ek tartalmát. A hiba függvény kiírja a megfelelő hibaüzenetet, ha üresen marad egy mező. Ezt a függvényt a mehet gombbal hívjuk meg, lásd lejjebb.

//hibaüzenet esetén kis szünettel
//újratültjük a tartalmat (csak esztétika)
function timer() {
mehet = 0;
k = 0;
_root.onEnterFrame = function() {
k++;
if (k == 25) {
step = "0";
fresh = "1";
phpload();
delete _root.onEnterFrame;
}
};
}

A timer() függvény, egy esztétikai összetevő. Akkor lép működésbe, amikor valamelyik beviteli mező üresen marad és ebből következően hibaüzenet jelenik meg a tartalom text-ben. Ekkor a timer függvény kivár egy kicsit, majd újratölti a tartalom text-et.

//mehet gomb action
mehet_btn.onRelease = function() {
if (!nev.length) {
hiba("A név mező üresen maradt!!");
timer();
} else if (!mail.length) {
hiba("Az e-mail mező üresen maradt");
timer();
} else if (!bgs.length) {
hiba("Az üzenet mező üresen maradt");
timer();
} else {
phpsend();
}
};

A mehet gomb kódjához érkeztünk. Mint látható, három egyszerű feltétel van benne. Megvizsgálja, hogy mind a három beviteli text-nek van-e tartalma. Ha hibát talál, akkor meghívja a hiba() függvényt és kiírja a hibaüzenetet, ezután elindítja az előbb látott timer() függvényt, ami majd visszatölti a tartalmat. Ha mindent rendben talál, akkor meghívja a phpsend() függvényt, ami elküldi az adatokat.

//töröl gomb action
torol_btn.onRelease = function() {
del();
};
//frissít gomb action
frissit_btn.onRelease = function() {
fresh = "1";
step = "0";
phpload();
};
//@ karakter beírása gombnyomásra
kukac_btn.onRelease = function() {
mail += "@";
};

A töröl gomb a del() függvényt használja, amit már ismerünk, törli a beviteli mezők tartalmát. A frissít gomb megadja a fresh azonosítónak az egyes értéket, a lapoz azonosítónak pedig a nullát. Ebből fogja tudni a php, hogy éppen nem lapozást történik, hanem frissítés. A frissítés ugyanis mindig visszaugrik a kezdő, legfrissebb bejegyzésekhez. Az e-mail gomb (@) pedig egy apró orvosság az MX-es problémára, így gombnyomásra bekerülhet a karakter az e-mail mezőbe.

//lapozó gombok action
eloz_btn.onRelease = function() {
fresh = "0";
step = "1";
phpload();
};
kov_btn.onRelease = function() {
fresh = "0";
step = "2";
phpload();
};
stop();

A lapozó gombok megjelenése, már a php-ban eldől, az éppen aktuális üzenetek számától függően. Pl. ha a legfrissebb 10 üzenet jelenik meg, akkor visszafelé nincs értelme lapozni, csak tovább, így az 'előző' gomb meg sem jelenik. Ugyanez érvényes akkor is, ha már a lista végén járunk, és nincs tovább lapozás, akkor a 'következő' gomb nem jelenik meg. Itt a két gomb akciója, tehát csak akkor nyer értelmet, ha megjelennek. A fresh változó értékét 0-ra állítja, míg a step változót a gombnak megfelelő paraméterrel látja el. A php ebből fogja tudni, hogy éppen lapozás történik, és azt is, hogy előre, vagy hátra.

A flash rész ezzel kész is van. Akinek elsőre nem volt teljesen tiszta, az olvassa át még egyszer, és a letölthető forrást átnézve biztosan megérti. Nézzük most a két php file-t.

 
   
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .