Bevezető:

Az oktatóanyag fő célja, hogy megismertesse a Flash MX és MX 2004, Php4, Mysql alkalmazások dinamikus együttműködését. Példaprogramokat fogunk készíteni és részletes leírásokat adunk a megoldások folyamatáról, azok elkészítéséről. A leckék során próbálom minél jobban kerülni a száraz szakkifejezéseket, azok kedvéért, akik még kezdőbbek ebben a témában. Inkább minden fogalmat hétköznapi módon körülírok.

A leckéhez tartozó források letölthetőek INNEN.

Áttekintés:

Aki kicsit is komolyabban szeretne foglalkozni webes alkalmazások programozásával, annak elengedhetetlen, szinte kötelező ez a téma. A flash széles körben elterjedt és egyre népszerűbb program, és ha ezt adatbázis-kezeléssel akarjuk kombinálni, akkor máris témánál vagyunk. A megrendelők növekvő száma és még jobban növekvő igénye elengedhetetlenné teszi a programozó számára azt, hogy mindenhez értsen. Hiszen a laikus ügyfél csak azt mondja: láttam ezt az oldalt ... címen és nagyon tetszik, én is egy ehhez hasonlót akarok a saját elképzeléseim szerint, és az az oldal éppen flash alapú adatbázis-kezelő site.

Mire ennek az oktatásnak a végére érünk, ez az ügyfél már nem okozhat gondot a kérésével. A flash, mint kliens oldali program (a felhasználó gépén fut), az adatbevitel, adatküldés php részének külső köpenyeként fog szerepelni. Három külön-külön is használható program házasítása nem mindig egyszerű feladat.

Jó, ha még az elején megbarátkozunk a gondolattal: nem külön-külön fogunk ezekkel a programokkal foglalkozni, hanem párhuzamosan. A mysql lesz az adatbázisunk, amiben a felhasználók által közölt bejegyzett, vagy az általunk begyűjtött adatokat tároljuk. A mysql-lel közvetlenül a php fog kommunikálni. Ez a két program a szerveren fut, tehát a felhasználó konkrét kapcsolatba nem kerül velük. Nem kell bonyolult script nyelveket tudnia ahhoz, hogy írjon a fórumba.

A flash lesz az egész bonyolult alkalmazás külső borítása. Vektoros grafikákkal, animációkkal és effectekkel díszíthetjük az alkalmazást - korlátok nélkül. Ennyi lenne az áttekintés. Mindenki, aki foglalkozik webes programozással, már valamilyen szinten találkozott mind a három programmal. Át fogjuk tekinteni a php és mysql alapokat és a flash action scriptbe is kapunk némi betekintést, de a flash kezelőfelületre nem térünk ki. Ezeket a flash alapokat a beépített súgóból és az editorhoz tartozó leckékből mindenki el tudja sajátítani.

Kedvcsinálónak bemutatunk néhány példaprogramot, amit az oktatás végére mindenki el tud majd készíteni önállóan.

Fórum:	[ Megnézem ]
Képtár:	[ Megnézem ]
Honlap:	[ Megnézem ]

Lehetőségek:

Ez a bekezdés az, amit csak nagyon nagy vonalakban tárgyalunk... mivel a lehetőségek majdnem végtelenek. Ebban a témakörben a lehetőségeknek csak a programozó tudása szabhat határt és nem a programok. Kedvünkre és saját design elképzeléseinkre készíthetünk bármilyen programot. Pl.: Mysql-Admin, Chat, Fórum, Vendégkönyv, Űrlapok, Regisztrációs oldalak, Képtárak, Komplett interface-ek, Számlázó és nyilvántartó programok, On-line rendelések, Webáruházak, és még sorolhatnánk naphosszat.

Minden, ami megvalósítható html-php-mysql-lel, és még sokkal több. Felépíthetünk egy chat programot, vagy egy fórumot csupán dynamic és input textek használatával. Vagy szeretne az ügyfelünk valamit árulni a honlapján: mi elkészítjük neki a szükséges interaktív megrendelő lapot és máris használhatja. Persze ezek így elmondva roppant egyszerűnek tűnnek, de nem készülnek el maguktól. Neked kell megcsinálnod.

Ma már lépten-nyomon az internetes piac, vásárlás, rendelés fogalmába ütközünk, tehát az ilyen jellegű munkák megszaporodtak. A flash-php-mysql segítségével egy igényes, gyors megoldást készíthetünk, ami minden szempontból kielégíti a XXI. századi igényeket.

Php-ról röviden:

A php (rekurzív rövidítéssel "PHP: Hypertext Preprocessor") széles körben használt általános célú szkriptnyelv, amely kifejezetten alkalmas - akár html-be ágyazott - webalkalmazások fejlesztésére. Az különbözteti meg a php-t a kliens oldali nyelvektől - pl. JavaScript -, hogy a kód a kiszolgálón fut. A php rendelkezik kész, előre definiált függvényekkel, amelyek segítségével gyorsan, hatékonyan és célirányosan kezelhetünk különböző adatbázisokat.

A legjobb dolog a php használatában, hogy különösen egyszerű egy kezdő számára, de számos fejlett szolgáltatást nyújt professzionális programozó számára is. Ne ijesszen el a php hosszú szolgáltatáslistája. Gyors léptekkel lehet haladni a php használatában, és pár órán belül már egyszerű szkriptek írására is képes lehetsz. A php rogramozáshoz és a mysql használatához szükséges alapfogalmakra a későbbi leckékben részletesen kitérünk.

Természetesen a php futtatásához telepíteni kell a szerveren egy php értelmezőt. Szükséges még ezen kívül maga a szerver, jelen esetünkben egy Apache web szerver. Az általunk alkalmazott adatbázis a mysql lesz. Így már összeáll a teljes kép. A flash kommunikál a php-val, a php pedig az adatbázissal. A következő bekezdésben erről lesz szó. A webszerver és a php értelmező telepítéséhez megtalálható minden segítség az oktatáshoz mellékelt cd-n.

A webszerver-php-mysql telepítésének két lehetséges módja is van. A melléklet cd-ről minden programot egyenként feltelepítünk és konfigurálunk a cd-n leírtak alapján. A másik az, hogy kész programcsomagot töltünk le és azt telepítjük. Ilyen csomag található az alábbi linken:

http://www.apachefriends.org/xampp-windows-en.html

Kommunikáció:

Hogyan is hozhatnánk össze ezeket a programokat úgy, hogy egy gyors és megbízható kapcsolatot kapjunk végeredménynek? Mivel - mint tudjuk - a mysql és a php a szerveren futnak, az swf file-okat pedig a felhasználó a böngészőben letölti és úgy futtatja, ezért első nekifutásra a kérdés nehéznek tűnhet. Mindenkit megnyugtatok, hogy elmondani és megérteni nem olyan nehéz. A gyakorlati alkalmazások folyamán persze rengeteg kis buktatóval találkozunk majd... de megoldjuk. Az alapelv a következő: adatok küldése a flash-ből, azaz a felhasználótól az adatbázis felé, több módon történhet. Az adatok a php-hoz futnak be, ami elvégzi az esetleg még kért műveleteket, majd az egészet rendszerezve és a megfelelő csoportokra (php változókban) osztva küldi tovább az adatbázis felé. Hogy miért kellhet esetleg még a php-nak a küldésen kívül bármit is csinálni? Egyszerű. Rengeteg olyan művelet létezik, amiket a flash nem tud elvégezni, a php viszont igen.

De nézzünk egy gyakorlati példát: adott egy fórum, ahol a hozzászólások mellett ott szerepel a hozzászólás időpontja is. 15 Felhasználó éppen 10 különböző időzónából, esetleg kontinensről használja a fórumot. Ha az időt+dátumot a flash-sel kérdeztetjük le, annak eredménye a kliens gép beállításait adja vissza. Kialakul a teljes káosz, ugyanis nem a szerver szerinti reális időparaméterek kerülnek bejegyzésre, hanem az éppen abban az időzónában aktuális adatok. Ekkor lép be a php egyik függvénye a sok közül: date(), vagy a mysql now(), ami a szervergépen található időparamétereket jegyzi majd be az adatbázisba... így teljes lesz a rend.

Ezután következik a visszaigazolás, vagy a flash kérés végrehajtása az adatbázis felől. Az adatbázisból a php nyeri ki az adatokat, ezeket php vagy sql tömbökben tároljuk, majd átadjuk a flash-nek, ami vizuálisan is megjeleníti. Így alakul ki az a harmonikus körforgás, aminek az elérése a célunk. Persze rengeteg feleslegesnek tűnő kontrollsort kell majd megírnunk, ami csak ellenőriz és mást nem is csinál, de ez szükséges.

Ha például a felhasználó beírja a mi kis flash keresőnkbe a keresendő adatot, és az az adat nem található, vagy nincs kapcsolat a szerverrel, vagy nem fut a mysql vagy...vagy...vagy... Ezeket mindet kontrollálnunk kell, és szükség esetén azonnal tudatni üzenetek formájában a felhasználóval, hogy éppen mi történik.

Gyakorlatban:

A következőkben egy egyszerű gyakorlati példát fogunk bemutatni. A példa nem azt a célt szolgálja, hogy egyből mindenki megértse a működést, tehát ha nem tiszta a folyamat, az sem baj. A további leckékben az lesz a cél, hogy ezeket a műveleteket részletesen átvizsgáljuk és példákon keresztül megértsük. Ez a példa leginkább arra szolgál, hogy bemutassa a folyamat egyszerűségét. Nézzük meg a programot működés közben is. Lehetőségat ad arra, hogy új sorokat jegyezzünk be és a meglévő sorokat kilistázza.

A példában lesz egy alap mysql táblázat. A táblázatot sql utasításokkal hozzuk létre. Nem baj, ha nem érted még ezeket az utasításokat, lesz mysql alapozás a következő leckékben. A táblázatnak négy oszlopa lesz, tehát négy adatot viszünk be az adatbázisba. Hozzuk létre tehát a táblázatot.

Ha ez megvan, akkor az adattáblánk készen áll az adatok fogadására. Lehetőségünk van arra, hogy új sorokat (rekord) hozzunk létre és a meglévő sorokat tetszőleges hierarchia alapján kilistázzuk, módosítsuk, töröljük. Ezeket a műveleteket majd a php fogja elvégezni.

Most a php fájlt mutatom be, ami elvégzi az új adat bejegyzését és a meglévő adatok listázását. A php-t majd a flash kezeli, azt a php után nézzük meg. A php kód nem hosszú és nem is bonyolult, de egy kis magyarázatot megérdemel, tehát szakaszonként mutatom be.

A kód első részében felépítjük a mysql kapcsolatot, ami lehetővé teszi a php számára, hogy kezelje az adatbázist. A kapcsolathoz meg kell adni a használt hostot, a mysql felhasználói nevet és jelszót. Változókban adunk meg minden adatot a kapcsolathoz. Megadjuk még az adatbázis és az adattábla nevét is.

Az adatok megadása után létrehozzuk a kapcsolatot a mysql-el, majd a használt adatbázissal. A kapcsolatokat egy feltétellel ellenőrizzük, és ha hiba történik akkor azt kiíratjuk.

Mivel a bejegyzés és a kiíratás műveletét egy fájlban végezzük el, így a bejegyzés műveletét kontrollálnunk kell: csak akkor fusson le, ha érkezik adat a flashből. Ha érkezik, akkor a bevitel és a listázás is megtörténik; ha nem érkezik, akkor csak a listázás fut le. Ezért az adatbevitelt egy feltételbe tesszük, ami ellenőrzi, hogy érkezik-e adat a flash moziból.

A következő kódrészlet kérdezi le a már meglévő adatokat. A visszakapott eredményből egy változóban tároljuk azt, hogy hány sor szerepel az adattáblában. Erre szükségünk lesz az adatok kilistázásánál.

A kód utolsó része végzi el a visszakapott eredmény összesítését. Html kódok segítségével rendezzük sorba a kiírásra szánt sorokat. A flash program majd értelmezi ezeket a html kódokat és ennek megfelelően jeleníti meg az eredményt. A feltételben ellenőrizzük, hogy az eredményben van-e adat, erre használjuk az előző részben létrehozott változót.

A php kód elkészült. Ki is próbálhatjuk, mert magában is működni fog. Ha szerepel adat az adattáblában, akkor azt kilistázza. A bevitelhez azonban szükségünk van egy űrlapra, vagy jelen esetünkben egy flash mozira. Most ezt a flash mozit mutatom be.

A flash mozi felépítése is nagyon egyszerű. Egyetlen frame (képkocka) oszlop van és azon négy layer (réteg). Az első layeren lesz az action script, ami a programot vezérli. A második layeren a text mezők találhatóak, a harmadik layeren lesznek a gombok és a negyedik layerre tesszük a keretet. A lenti képen látható az elrendezés.

A keret layeren létrehozunk egy egyszerű keretszerkezetet, ami elválasztja egymástól az egyes részeket és kiemeli a szövegmezőket. A keret lehet összetettebb is, de ebben a példában csak vonalakat használtunk.

Ezután a gombokat helyeztük el, amelyeknek instance neveket adtunk. A gombokhoz tartozó eseményeket az as layeren fogjuk létrehozni. A lenti képen látható a gombok elhelyezkedése és az instance nevek.

A text layerre tesszük azt a három textmezőt, ami az adatok beviteléhez és kiíratásához szükséges. A szövegmezőket az előre elkészített keretrészekbe helyezzük és mindháromnak instance nevet adunk a properties (tulajdonságok) panelen. A lenti képeken látható az elhelyezés és az instance nevek.

Ezzel el is készült az összes összetevő, ami a mozi működéséhez szükséges. Az as layerre kell még megírni a vezérlő scripteket, amelyek elvégzik a műveleteket. Nézzük át a scriptet a php-hoz hasonlóan szakaszonként, némi magyarázattal.

Az adatok küldésére és fogadására a LoadVars objektumot fogjuk használni. Ennek az objektumnak több különböző methodusa létezik, ezeket és magát az objektumot a későbbi leckékben részletesen megismerjük. A kód első részében létrehozzuk azt a LoadVars objektumot, ami az adatok fogadásáért felelős.

Ezt követően elkészítünk egy függvényt, ami akkor fog lefutni, ha a php fájlt meghívjuk és visszatér az eredmény. Ezt a LoadVars objektum onLoad eseményével ellenőrizzük. A függvény kontroll változója (loadok) true (igaz) értéket kap, ha a php futtatása sikeres és false (hamis) értéket kap akkor, ha a php futtatása sikertelen (nem létezik, nincs kapcsolat, stb..). Ezt az értéket a függvényen belüli fő feltétellel ellenőrizzük.

Az alfeltételekben a php-ból érkező kontroll változókat ellenőrizzük. Ha a folyamatok közben bármilyen hiba lép fel, arról a php üzenetet ír ki és a flash a kapott üzeneteket feldolgozza. Ha minden rendben van, akkor a függvény kiüríti a beviteli mezőket, a kiíratásért felelős mezőbe pedig bejegyzi a kapott adatokat. Emlékezzünk vissza, hogy a php-ból html tag-ekkel megformázva készen kapjuk az adatcsoportot, csak ki kell íratnunk.

Ahhoz, hogy adatokat tudjunk küldeni, létre kell hozni egy újabb LoadVars objektumot, ami az adatküldést végzi el. Itt a kezdetnél tehát létrehozzuk az objektumot, majd kiíratást végző mezőben elhelyezünk egy üzenetet, ami értesíti a felhasználót, hogy az adatok feldolgozása folyamatban van. A küldést végző objektum beData változójának értéke nulla lesz, ebből azonosítja be a php, hogy nem bejegyzésről van szó, csak kiolvasásról. A fentebb elkészített php fájlban láthatjuk, hogyan kontrolláljuk a post változó alapján a műveletet. Végül az objektum sendAndLoad alkalmazását használva lefuttatjuk a php fájlt. A sendAndLoad célobjektumának megadjuk a fogadást végző LoadVars objektumot.

A frissítés gomb eseménye lesz a következő. Az eseményben lezajló folyamat ugyanaz, mint az előzőben bemutatott kódrész, tehát erre nem térünk ki. A lényege annyi, hogy újból lefuttatja a php fájlt és frissíti a tartalmat.

A bevitel gomb már valamivel hosszabb. A feltétel teszi lehetővé, hogy a művelet csak akkor fusson le, ha a beviteli mezőkben van adat. Ezután a küldő objektum beData változója megkapja az 'ok' értéket. A php ebből fogja tudni, hogy ebben a folyamatban adatbevitel is szerepel. Az ezután következő objektumváltozók megkapják a beviteli mezők értékeit és lefut a php.

A mezőtörlés gomb mindössze ennyit csinál, hogy a beviteli mezők tartalmát kitörli, arra az esetre, ha a felhasználó valamit elrontott és törölni akarja a beírt tartalmat. Ez a gomb csak a flash mozira van kihatással.

A kód utolsó részében kiürítjük a beviteli mezőket, majd egy stop utasítással leállítjuk a mozit. A mozi leállítása ebben az esetben nem kötelező, mivel a mozi egyetlen frame oszlopból áll.

Ezzel el is készült az alkalmazás. Remélhetőleg sikerült megfelelően szemléltetni, hogy alapjaiban mennyire egyszerű a folyamat. A lenti ábrán áttekinthető a folyamat grafikus formában is, hogy a flash, php és mysql hogyan kapcsolódnak egymáshoz.

A következő leckékben részletesebben fogunk megismerkedni mindazzal amit itt láttunk, és komplex alkalmazásokon keresztül gyakoroljuk a folyamatokat. A következő leckében a php alapokat fogjuk áttekinteni, majd a flash-php kommunikációval foglalkozunk.

    Feladatok:

1. Miért szeretnél flash-php-mysql-t tanulni?
2. A felhasznált programokból melyiket használtad/használod és milyen szinten?
3. Írd meg, hogy melyik programról szeretnél kicsit többet olvasni.
4. Miért van szükség a php-ra a flash-mysql közötti kapcsolathoz?
5. A flash, php és mysql közül melyik program fut a szerver oldalon és melyik a kliens oldalon?
6. Miért van szüksége a flash-nek visszaigazolásokra a php-tól?
7. Gyakorlat: Készítsd el a leckében szereplő kis példaprogramot a saját kreatív design elképzelésed szerint. A feladat nem kötelező, későbbiekben a lépések részletesebben is levezetésre kerülnek.