Upload
kecskesadam
View
233
Download
0
Embed Size (px)
Citation preview
8/16/2019 Web application developer studio
1/82
EÖTVÖS LORÁND TUDOMÁNYEGYETEM
INFORMATIKAI KAR
PROGRAMOZÁSI NYELVEK ÉS FORDÍTÓPROGRAMOK
TANSZÉK
Webalkalmazás szerkesztő
Témavezető: Szerző:
Leskó Dániel Kecskés Ádám
Tanársegéd programtervező informatikus BSc,
ELTE IK nappali tagozat
Programozási Nyelvek és Fordítóprogramok
Tanszék
Budapest, 2016
8/16/2019 Web application developer studio
2/82
Tartalomjegyzék
1. Bevezető ................................................................................................................................... 1
1.1 Feladat ................................................................................................................................ 1
1.2 Fogalmak ............................................................................................................................. 1
1.2.1 Webes Alkalmazás ....................................................................................................... 1
1.2.2 Fejlesztőkörnyezet....................................................................................................... 1
1.2.3 Fordítóprogram ........................................................................................................... 2
1.2.4 HTML ............................................................................................................................ 2
1.3 A feladat értelmezése ........................................................................................................ 2
1.4 Alkalmazott technológiák .................................................................................................. 3
1.4.1 Web Components ........................................................................................................ 3
1.4.2 File API ......................................................................................................................... 4
2. Felhasználói dokumentáció...................................................................................................... 5
2.1 Bevezetés ............................................................................................................................ 5
2.2 Rendszerkövetelmények .................................................................................................... 5
2.2.3 Operációs rendszer: ..................................................................................................... 5
2.2.4 Böngésző ...................................................................................................................... 5
2.2.5 PHP ............................................................................................................................... 5
2.2.6 Ajánlott követelmények: ............................................................................................. 5
2.3 Telepítés ............................................................................................................................. 6
2.4 A felhasználói felület .......................................................................................................... 7
2.4.1 Áttekintés .................................................................................................................... 7
2.4.2 Menü ............................................................................................................................ 8
2.4.3 Projektfa ...................................................................................................................... 9
2.4.4 Adatmódosító panel .................................................................................................... 9
2.4.5 Szerkesztőpanel ......................................................................................................... 10
2.5 Projekt elemei .................................................................................................................. 11
2.5.1 Platform ..................................................................................................................... 11
8/16/2019 Web application developer studio
3/82
8/16/2019 Web application developer studio
4/82
2.8.17 SESSION.................................................................................................................... 25
2.8.18 Template .................................................................................................................. 26
2.8.19 TemplateConfig ....................................................................................................... 26
2.8.20 File (Media) .............................................................................................................. 27
2.8.21 Image (Media) ......................................................................................................... 27
2.9. Csevegő alkalmazás ......................................................................................................... 28
3. Fejlesztési dokumentáció ....................................................................................................... 30
3.1 A kitűzött feladatok, és megvalósításuk .......................................................................... 30
3.1.1 Projektfájl .................................................................................................................. 31
3.1.2 Vizuális fejlesztés ....................................................................................................... 33
3.1.3 Projekt fordítása (exportálás) ................................................................................... 34
3.1.4 Modulok ..................................................................................................................... 37
3.2 Használati esetek .............................................................................................................. 41
3.3 Osztályok és funkciók ....................................................................................................... 42
3.3.1 Bevezetés ................................................................................................................... 42
3.3.2 GUI (JS) ....................................................................................................................... 43
3.3.3 Projekt logika (JS) ...................................................................................................... 63
3.3.4 Szerveroldal (PHP) ..................................................................................................... 71
3.3.5 WebApp (PHP) ........................................................................................................... 72
3.4 Tesztelés ........................................................................................................................... 73
3.4.1 Tesztelés használati esetek alapján .......................................................................... 73
3.4.2 Strukturális tesztelés ................................................................................................. 74
3.4.3 Tanulságok levonása ................................................................................................. 75
3.4.4. Hatékonyságvizsgálat ............................................................................................... 76
4. Összegzés ................................................................................................................................ 77
Irodalomjegyzék: ........................................................................................................................ 78
8/16/2019 Web application developer studio
5/82
1
1. Bevezető
1.1 Feladat
A laikusok számára mindig nehéz feladat volt webes alkalmazások elkészítése. Ha
szerettek volna maguk elkészíteni egy saját alkalmazást, akkor ahhoz az egyik lehetőség,
hogy meg kellett tanulniuk a programozás alapjait, ami sok időt vehet igénybe, és még
úgy sem rendelkeznek a szükséges rutinnal és tapasztalattal, hogy egy jól működő, és
biztonság szempontjából is megfelelő alkalmazást készítsenek. A másik lehetőség, hogy
felhasználnak egy weblap szerkesztő programot, amivel viszont csak statikus
weboldalakat lehet készíteni, de mindenképp meg van kötve a felhasználó keze, ha nincs
programozói ismerete.
A szakdolgozatom célja egy olyan fejlesztőkörnyezet létrehozása, amely lehetőséget ad
a programozáshoz nem értők számára is egy egyszerűbb, dinamikus webes alkalmazás
elkészítésére. A program elsődleges feladata, hogy egy modulokkal bővíthető grafikus
felhasználói felületen készülő alkalmazásból egy projektfájlt hozzon létre, melyet később
újra be tud tölteni. Továbbá képes legyen a projektfájlokat és a projekthez tartozó
modulokat lefordítani webszerveren futtatható állományokká. A modulok php és
javascript osztályokat tartalmaznak, melyeket a generált kód hív meg a projekt
beállításaitól függően.
1.2 Fogalmak
1.2.1 Webes lkalmazás
A statikus weboldalakat a webes alkalmazásoktól az különbözteti meg, hogy nem csak
ugyanazt az állandó tartalmat jelenítik meg, hanem a felhasználói interakció hatására,-
például bejelentkezés vagy egy fájl feltöltése esetén-, az alkalmazás erre reagál, és a
felhasználó visszajelzést kap. Illetve az alkalmazás üzemeltetéséhez nem szükséges
emberi beavatkozás, a legtöbb feladatát önállóan látja el.[1]
1.2.2 Fejlesztőkörnyezet
A fejlesztőkörnyezet egy olyan eszköz, mely tartalmazza azokat az eszközöket, melyek
egy alkalmazás létrehozásához szükségesek. Többek között a szükséges
kódkönyvtárakat, grafikus felületet és általában a fordítóprogramot.
8/16/2019 Web application developer studio
6/82
2
1.2.3 Fordítóprogram
Ha a forrásnyelv egy magasszintű nyelv és a számítógép által végrehajtható gépi kód
nagyon különböznek egymástól, akkor ezt valahogy át kell hidalni. Az egyik megoldás az,
hogy a magasszintű nyelven megírt programból egy alacsonyabb szintű programotkészítünk. Az ilyen átalakítást végző fordítóprogramot compiler nek nevezzük.[2]
Jelen esetben a magasszintű nyelv egy vizuális leíró nyelv, a végrehajtható kód pedig a
PHP kód. A fejlesztőkörnyezet compilere pedig a vizuális nyelvről fordít PHP nyelvre.
1.2.4 HTML
A HTML egy olyan leírónyelv, mellyel weboldalak struktúráját írhatjuk le, és ami alapján
a böngésző majd megjeleníti azt.
1.3 feladat értelmezése
Amikor először próbáltam megoldást találni a feladatra, elkezdtem kutatni a meglévő
megoldások után, hogy megfigyeljem, hogy a többi fejlesztőeszköz milyen módon teszi
lehetővé a webes alkalmazásfejlesztést.
A legtöbb eszköz csupán statikus weblapok (html fájlok) előállítására volt alkalmas.
Ennél fejlettebb, és kiforrottabb megoldás volt a WordPress és a Joomla, melyekkel márlétre lehet hozni dinamikus weboldalakat, illetve bővíthetőek számos komponenssel.
Egy dolgot viszont ezek az eszközök sem tudnak nyújtani: ha a felhasználó egy olyan
egyedi alkalmazást, vagy funkciót kíván megvalósítani, amit jelenleg egyik komponens
sem nyújt, akkor programkód írása nélkül nem tudja elkészíteni azt.
Tovább kutatva egy nem várt helyen találtam rá a megoldásra: az EpicGames Inc. által
fejlesztett UnrealEngine-ben. Az UnrealEngine egy számítógépes játék készítésére való
fejlesztőeszköz, mely tartalmaz egy vizuális szkriptnyelvet. A 3-as verzióban jelent meg
először ez a lehetőség Kismet néven, majd a 4-es verzió ugyanennek a továbbfe jlesztett
változatával érkezett BluePrint néven. Használatával a programot teljesen vizuálisan,
programkód írása nélkül állíthatjuk elő. A szerkesztőfelületre betölthetjük a használni
kívánt funkciókat. Megjelennek a neveik, és a be- illetve kimeneti paramétereik. Ezeket
a funkciókat összekötve lehet elkészíteni egy-egy funkciót.[3]
A vizuális szkriptnyelvek használata lett így a legkézenfekvőbb megoldás. A BluePrint-et
mintául véve készítettem el a fejlesztőkörnyezetet annyi különbséggel, hogy most egy
8/16/2019 Web application developer studio
7/82
3
webes környezetre kell alkalmazást készíteni vele, nem pedig egy játékot. A
fejlesztőkörnyezetet továbbá képessé tettem arra, hogy a már korábban megírt
programot a felhasználó felhasználja, illetve igénybe vegye annak funkcióit. Ezt hívjuk
modulnak, vagy külső könyvtárnak. Továbbá készítettem még néhány olyan modult, amiszükséges lehet egy alkalmazás számára, hogy a felhasználó ne csak a PHP alapból
elérhető funkcióit használhassa.
1.4
lkalmazott technológiák
1.4.1 Web Components
A Web Components olyan technológiák gyűjteménye, melyekkel saját widgetek
(komponensek) definiálhatóak webes környezetre. Szakdolgozatom írásakor csak a
Google Chrome böngésző támogatja teljes körűen, viszont a nem támogatott
böngészőkre is elérhető egy függvénykönyvtár, mellyel működnek a rá hivatkozó kódok,
ez került felhasználásra a projektemben is.[4] A Web Components négy részből tevődik
össze:
- CustomElements
- HTML Templates
-
Shadow DOM
- HTML Imports
A felsorolt négy technológia közül a CustomElements került felhasználásra a projektben.
A CustomElements annyit jelent, hogy a HTML eddig meglévő elemei mellé saját
elemeket is létrehozhatunk.[5] Mielőtt a HTML 5-ös verzióját kidolgozták, a weboldalak
nagy része csak DIV elemekből állt, mely nem rendelkezett semmilyen tulajdonsággal:
úgy jelent meg, ahogy a CSS stíluslapokkal megformázták, és javascript segítségével
lehetett a viselkedését definiálni. Ha szükség van az elemek egy osztályára, például egy
blogon a bejegyzések csoportjának elkülönítésére, hogy azokat egységes
stílusdefiníciókkal ruházzuk fel, akkor lehetőség van egy vagy akár több osztálynév
megadására a class attribútumban.
Az elemek elkülönítése már megoldott volt az osztálynevek segítségével, viszont
továbbra is DIV elemekből állt az oldalak döntő része, ami a forráskódot nézve nem
árulkodik annak tartalmáról, illetve funkciójáról. Éppen ezért a HTML 5 -ös verziójában
8/16/2019 Web application developer studio
8/82
4
bevezetésre került több szemantikai elem is, melyek funkcionálisan nem nyújtottak
többet a DIV-nél, viszont beszédes nevük miatt utaltak az oldalban betöltött szerepükre.
A NAV elem például a navigációs linkeket tartalmazza, HEADER a fejlécet, FOOTER a
láblécet. A stílusdefiníciókhoz már nem volt feltétlenül szükséges az osztálynevekhasználata, vagy az elemek azonosítójára (id) való hivatkozás. Az új szemantikai elemek
használata megkönnyíti a kód olvashatóságát, és a keresőrobotok hatékonyságát is.[6]
A weboldal forrásának szemantikai felépítése és az egyszerűbb stílusdefiníciók már
megoldottak voltak. Viszont még nem volt lehetőség saját, eddig nem létező elemek
definiálására. Például egy webáruházban a termékeknek, vagy egy fórumban a
hozzászólásoknak. Az elemek viselkedésének leírása osztályonként továbbra is
körülményes volt, erre jelentett megoldást a CustomElements technológia, melynek
segítségével egyedi névvel ellátott, egyedi viselkedésű és stílusú elem-osztályok írhatóak
le. Definiálható a létrejöttükkor és az eltávolításukkor, illetve az attribútumaik
változásakor bekövetkező esemény is.[7]
A program grafikus felhasználói felületét szinte teljes mértékben CustomElement
használatával építettem fel. Minden osztály viselkedését, és tulajdonságait előre
definiáltam, így a projekt logikai része már nem tartalmaz semmilyen interakciót
közvetlenül magával a HTML dokumentummal, csupán ezekkel a definiált osztályokkal,
mint például a menü, a projekt fájlokat megjelenítő fa struktúra, vagy a vizuális
fejlesztést lehetővé tevő dobozok, és az azokat összekötő görbék.
1.4.2 File API
A File API egy olyan interfészt nyújt, mellyel lehetőség nyílik az adatok szerverre történő
feltöltése nélkül, kliens oldalon a felhasználó böngészőjében fájlokat beolvasni. A
megnyitott fájlokat szövegként, vagy akár pufferekkel is be lehet olvasni.[8] A
projektben csak a szöveges beolvasásra volt szükség, mivel a projektfájlok JSON
formátumban kerültek eltárolásra. A JSON fájlok objektummá alakítását már a JavaScript
beépített JSON könyvtára végezte el.
Projektfájl mentését a ’saveAs’ funkció végzi. Szakdolgozatom megírásakor még nem
támogatott minden modern böngészőben ez a funkció, ezért egy a nem támogatott
böngészőkbe a funkciót implementáló könyvtárat használtam fe l hozzá. (FileSaver.js)[9]
8/16/2019 Web application developer studio
9/82
5
2. Felhasználói dokumentáció
2.1 Bevezetés
A felhasználói dokumentációban a rendszerkövetelményeket a program telepítését,
azaz a f uttatásához szükséges lépéseket és a program használatát mutatom be.
2.2 Rendszerkövetelmények
A program futtatásához, illetve a program által előállított kód futtatásához egy HTTP
kiszolgáló, PHP és MySQL szükséges. A XAMPP projekt egy telepítőn keresztül kínálja az
összes szükséges komponenst, így ennek a követelményeit vettem alapul:[10]
2.2.3 Operációs rendszer:
-
Windows 2008, 2012, Vista, 7, 8 vagy újabb
- Debian, RedHat, CentOS, Ubuntu, Fedora, Gentoo, Arch, SUSE Linux
- Mac OS X 10.6 vagy újabb
2.2.4 Böngésző
A program Google Chrome böngészőben lett kialakítva és tesztelve, így ez az ajánlott
böngésző is, ahol minden funkció elérhető. A főbb funkciók úgy kerültek kialakításra,
hogy a legújabb böngészőkben ugyanúgy probléma nélkül fussanak. Ezen böngészők:
- Google Chrome 42
- Mozilla Firefox 37
- Internet Explorer 11
2.2.5 PHP
A szerveroldali kódok futtatásához PHP 5.3-as verzió szükséges.
2.2.6
jánlott követelmények:
A megadott operációs rendszereknek is van minimális rendszerkövetelménye, amin a
program elméletileg futtatható, viszont nem állt módomban minden lehetőséget
letesztelni, így egy ajánlott rendszerminimumot tudok ajánlani, amin biztosan
akadálytalanul fog futni az alkalmazás:
- 4GB RAM
-
2,4 GHz dual-core processzor- 1366x768 képernyőfelbontás
8/16/2019 Web application developer studio
10/82
6
2.3 Telepítés
Magának a fejlesztőkörnyezetnek a futtatásához csupán egy HTTP kiszolgáló és egy PHP
értelmező telepítése és konfigurálása szükséges. De mivel a fejlesztés egyik célja az volt,
hogy laikusok is egyszerűbben tudják igénybe venni, ezért egy webfejlesztéshezösszeállított programcsomag, a XAMPP telepítésével mutatom be, hogy hogyan lehet
eljutni a futtatásra kész állapotba.
A projekt legfrissebb verziója elérhető online is a http://visualscripting.net címen. Ha
viszont a projekt jelenlegi változatát kívánja használni a felhasználó, vagy
internetkapcsolat nélkül, illetve helyi hálózaton is elérhetővé kívánja tenni, akkor
szükséges a saját szerver beüzemelése, melynek lépései a következőek:
Töltsük le a XAMPP legújabb változatát, majd futtassuk a telepítő varázslót. Válasszunk
ki a telepítéskor minden elérhető komponenst. Miután végzett a telepítő, nyissuk is meg
a programot. Ha a rendszer újraindítását kéri előtte, akkor tegyünk úgy.
Ha megnyitottuk a vezérlőpanelt, indítsuk el az Apache-ot, ha még nem fut. Nyissuk meg
továbbá a mappát, ahova telepítettük a szervert és keressük meg a htdocs mappát.
Készítsünk róla biztonsági másolatot, majd töröljük ki a tartalmát és másoljuk bele a CD
mellékleten található fájlokat.
Esetenként szükséges lehet a php.ini fájl módosítása. A WebApp modulhoz engedélyezni
kell a php_gd2.dll és php_exif.dll extensionöket.
Navigáljunk a webböngészővel a http://localhost címre, és ha mindent megfelelően
csináltunk, akkor megjelenik a fejlesztőkörnyezet.
8/16/2019 Web application developer studio
11/82
7
2.4 A felhasználói felület
2.4.1 Áttekintés
A program a könnyű kezelhetőség és az átláthatóság figyelembevételével négy fő
blokkból tevődik össze. Felül helyezkedik el egy menüsor, alatta pedig háromátméretezhető panel, melyeket az alábbiakban részletesebben is megismerhetünk.
Alapesetben üresek, ugyanis nincs egy projekt sem betöltve.
Kattintsunk a File menüre, majd itt a New Project gombra. A megjelenő menüben
válasszuk ki az első PHP projektet, majd kattintsunk a Create gombra. Az eddig üres
panelekbe betöltődnek a projekt f ájljai, és annak tulajdonságai:
A bal felső panelen láthatjuk az aktuális projekt objektumait. Az alatta lévő panelen
pedig az épp kijelölt objektum tulajdonságai tekinthetőek meg, amik szerkeszthetőek. A
projekt objektumai közt a funkciókat, vagyis a végrehajtandó feladatokat az f(x)
szimbólum jelöli. Ezeket a funkciókat tudjuk majd szerkeszteni. Kattintsunk rá kétszer,
hogy megnyissuk a jobb oldali panelen:
1. ábra: Üres projekt
8/16/2019 Web application developer studio
12/82
8
2.4.2 Menü
A menüsor három menüpontot tartalmaz, melyek közül az első további almenükre
bomlik, ha fölé visszük a kurzort:
- File: Ebben a menüben érhetőek el a projekttel kapcsolatos fájl megnyitási , illetve
mentési műveletek. További öt almenüt tartalmaz:
o New Project: Új projekt készítése
o Open project: Korábban elmentett projekt megnyitása
o Save Project: Projekt elmentése
o
Export Project: Projekt lefordítása webszerveren futtatható állományokká
o Close Project: Projekt bezárása, a felület visszaállítása alaphelyzetbe
- Help: Az alábbi dokumentáció tölthető le elektronikus formában.
- Contact: Az elérhetőségeimet tartalmazza arra az esetre, ha valaki kapcsolatba
szeretne lépni a projekt készítőjével.
A fájl megnyitási, illetve mentési műveletek mind a böngésző fájltallózó ablakát hívják
elő. Kivétel az új projekt készítése, ahol nem a felhasználó böngészőjén keresztül
történik fájlművelet, ugyanis ebben az esetben egy doboz jelenik meg a kiválasztható
sablonokkal, illetve az adott programozási nyelv (jelen esetben mindenhol PHP)
ikonjával:
2. ábra: Szerkesztőfelület
8/16/2019 Web application developer studio
13/82
9
Egy sablont kijelölve alul megjelenik annak leírása. A Close gombbal bezárhatjuk a
dobozt, a Create gombra kattintva pedig betöltődik a kiválasztott sablon.
2.4.3 Projektfa
Vizuálisan megjeleníti a projekt elemeit egy fa struktúrába rendezve. Legfelső szinten
található az úgynevezett platform, ami egy programozási nyelvet jelent egy adott
környezetben. Jelen esetben egy platform áll rendelkezésre, ami egy szerveroldali
alkalmazás PHP nyelven. Az első eleme a platformnak a Libraries nevű mappa, ami a
platformra betöltött könyvtárakat tartalmazza. Ezután szerepelnek a névterek,
osztályok, funkciók és változók egymás alá rendezve aszerint, hogy melyik elem
melyikeket tartalmazza. Az elemekre egyszeri kattintással az adatmódosító panelbe
betöltődnek az adott elem adatai. Jobb gomb lenyomásával egy környezeti menü jelenik
meg, mely az elemen elérhető funkciókat tartalmazza. Ha az elem egy funkció, akkor
dupla kattintással megnyílik szerkesztésre a szerkesztőfelületen.
Ez az alfejezet magát a Projektfa szerkezetét hivatott bemutatni. A projekt részletes
leírása a Projekt fejezetben olvasható.
2.4.4 datmódosító panel
Egy dupla oszlopú táblázat, melyben a bal oldali oszlop egy tulajdonság nevét, a jobb
oldali táblázat pedig a hozzá tartozó értéket, illetve annak módosítását lehetővé tevő
szerkesztőt tartalmazza. Alapesetben projekt létrehozásakor a projekt adatai, egyébként
pedig a Projektfában kijelölt elem tulajdonságai jelennek meg benne.
3. ábra: Új projekt létrehozása
8/16/2019 Web application developer studio
14/82
10
Öt féle adattípus szerkeszthető a panelen:
- Szöveg: A szövegre kattintva az szerkeszthetővé válik
- Szám: A számra kattintva az szerkeszthetővé válik a böngészőben elérhető
számbeviteli mezővel
- Kapcsoló: Igaz/hamis érték (angolul: boolean), mely pipálható dobozként jelenik
meg
- Lista: Egy legördülő lista a választható lehetséges értékekkel
- Egyéb: Szövegesen megjelenítni az aktuális értéket, illetve még tartalmaz egy
gombot, melyre kattintva az megváltoztathatóvá válik
2.4.5 Szerkesztő
panel
A szerkesztőpanel egy több szerkesztőt is tartalmazó panel, melyek között fülekkel
válthatunk. A szerkesztő továbbá dobozokat tartalmaz, melyeket az egér lenyomásával
tudunk mozgatni. Egy dobozra kattintáskor az kijelöltté válik. Ha a control gombot
lenyomva tartjuk, akkor több doboz is kijelölhető, illetve a kijelölés megszüntethető. A
delete gombot lenyomva törölhetőek a kijelölt dobozok. A doboz tartalmazhat egy
címsort, alatta pedig a be-, illetve kimenetek szerepelnek. Mindegyik be- és kimenet
tartalmaz egy ikont, melynek színe a típusát jelöli, illetve egy címet vagy esetenként egy
szerkesztőt. A bemenetek a kimenetekkel vonalakkal köthetőek össze. Egy bemenet
ikonjára jobb egérgombbal kattintva megszűntethetőek az oda mutató vonalak, illetve
a kimenetre jobb egérgombbal kattintva a belőle kiinduló vonalak. A bal egérgombot
lenyomva tartva egy ikonon, onnan vonal indítható, majd egy másik ikon felett az
egérgombot elengedve létrejön a kapcsolat a be és kimenet közt, amennyiben minden
feltételnek megfelelnek. Ha az adott doboz egy feladatot jelöl, akkor tartalmaz még egy
sort a címsor alatt, mely az előző illetve a következő feladatra mutat.
Ez az alfejezet magát a Szerkesztőpanel szerkezetét hivatott bemutatni. A projekt
részletes leírása a Funkciószerkesztő felépítése fejezetben olvasható.
8/16/2019 Web application developer studio
15/82
8/16/2019 Web application developer studio
16/82
12
2.5.3 Névtér
A névtér nem más, mint egy mappa, amely további névtereket (mappákat), illetve
elemeket tartalmazhat. Névtér csak egy másik névtér alatt, vagy egy platform alatt
hozható létre.
2.5.4 Osztály
Az osztály olyan funkciók és változók összessége, melyek logikailag egy egységbe
tartoznak. Az osztály mintájára példányok hozhatóak létre. Hogy könnyen érthető
legyen, a következő példát érdemes megjegyezni: Legyen például az „ember” az osztály.
Ekkor ez az osztály nem az egyes emberekre utal, hanem az emberre , mint fogalomra.
Az egyes személyek pedig az ember osztály „példányai”, mivel mindegyikük ember.
Minden osztály rendelkezik egy névvel. Definiálható egy osztály konstruktor, mely nem
más, mint egy új példány létrehozásakor végrehajtódó funkció. Továbbá ha rendelkezik
az osztály egy statikus, main nevű funkcióval, akkor futtathatóvá válik. Tehát PHP esetén
a böngészővel ránavigálva tudjuk futtatni a programot.
2.5.5 Funkció
A funkció egy parancs, vagy függvény, mely egy előre definiált feladat végrehajtására
hivatott. Minden függvény rendelkezik egy névvel. A függvény lehet statikus, vagy nem
statikus. Ha statikus, akkor a feladat amit végrehajt, az osztályra vonatkozik. Ha nem,
akkor pedig egy adott példányra. Például ha az emberes példára gondolunk, akkor az
ember magasságának lemérése egy nem statikus feladat, mivel egy adott emberre
vonatkozik. Viszont az emberiség átlagéletkorát kiszámító feladat egy statikus funkció
lesz. Minden funkció rendelkezik továbbá egy láthatóság (visibility) adattal, mely lehet
publikus, (public) vagy privát (private). Ha egy funkció privát, akkor csak az őt tartalmazó
osztály funkcióiból hajtható végre, ha publikus, akkor bárhonnan. Minden funkció
rendelkezhet egy kimeneti, és akár több bemeneti értékkel is. A bemeneti értékek,
(input) vagy más néven attribútumok a feladat végrehajtásához szükséges adatok. A
kimeneti érték (output) pedig a feladat eredménye. Például ha az a feladat, hogy mérjük
meg egy ember magasságát, akkor a bemeneti érték, hogy hüvelykben, (inch) vagy cm-
ben mérjük, a kimeneti érték pedig a szám, amit mértünk, mely az embertől és a mérés
módjától is függ. Azoknak a funkcióknak, melyek nem statikusak, az első bemeneti
értékük a példány lesz, amelyikre a feladatot végre kell hajtani.
8/16/2019 Web application developer studio
17/82
13
2.5.6 Változó
A változó egy olyan eleme a projektnek, mely rendelkezik névvel, típussal és egy aktuális
értékkel. Lehetőséget ad, hogy eltároljunk különböző típusú adatokat, majd a változó
nevével hivatkozhatunk rá. Típusa lehet szám, szöveg, vagy akár egy osztály, aminek apéldányát tárolni szeretnénk. A funkcióhoz hasonlóan rendelkezik láthatósággal és lehet
statikus is.
8/16/2019 Web application developer studio
18/82
14
2.6 Funkciószerkesztő felépítése
A 2.4.5 pont alatt a szerkesztő grafikai megjelenése, ebben a fejezetben pedig a funkciói
és használata kerül bemutatásra. A funkciószerkesztő dobozokat tartalmaz, melyeket
vonalak kötnek össze. Nevezzük a dobozokat ezentúl node-oknak. Nyolc féle nodelétezik:
- Start node: A kiinduló node, ahol a feladat végrehajtása kezdődik. Rendelkezik a
végrehajtható funkciókat jelölő első sorral, de csak a következő funkcióra mutató
ikon jelenik meg rajta. Előzőre mutatót nem tartalmaz.
- Végrehajtható funkció: Egy olyan funkció, melyet végre szeretnénk hajtani. Az
előző illetve a következő funkcióra a mutatót aszerint állítsuk be, hogy mikor
hajtódjon végre.
- Nem végrehajtható funkció: Egy olyan funkció, melynek felhasználásra kerül a
kimeneti értéke egy másik funkció bemeneteként. Nem adható meg, hogy melyik
funkció előtt vagy után fusson, csak az, hogy a kimeneti érték hol kerüljön
felhasználásra.
- Változó módosítása (SET): Egy adott változó értékét változtatja meg a kapott
bemeneti értékre. Végrehajtható funkcióként jelenik meg, megadható a
következő és előző végrehajtandó feladat.
- Változó értékének lekérdezése (GET): Egy változó értékét adja vissza
kimenetként. Úgy viselkedik, mint egy nem végrehajtható funkció.
- Új példány létrehozása (create): Új példányt hoz létre egy adott osztályból, vagy
típusból. Osztály esetén a bemenetek a konstruktor paraméterei lesznek, a
kimenet pedig a létrehozott példány. Szöveg, szám, vagy kapcsoló esetén pedig
a bemeneti érték helyett egy szerkesztőfelület jelenik meg, melyen beállítható aváltozó értéke. A kimenet pedig maga a létrehozott változó lesz.
- Elágazás (branch): Egy olyan node, aminek bemeneti paramétere egy kapcsoló.
Kimeneti értéke nincs, viszont nem csak egy kifelé mutatóval rendelkezik, hanem
kettővel; aszerint, hogy igaz vagy hamis, másik funkció fog végrehajtódni utána.
- Ciklus (forloop): Egy ciklus, ami azt jelenti, hogy egy megadott feladatot többször
is végrehajt. Bemenetkért két számot vár: egy kezdő (from) és egy befejező (to)
értéket. A többször végrehajtandó funkciót a loop nevű ágba kell kötni. A ciklus
8/16/2019 Web application developer studio
19/82
15
végiglép minden számon, beleértve a megadott kezdő befejezőt is és lefuttatja a
megadott feladatot, ami az aktuális számot a kimenetből tudja elérni. A
futtatható funkcióhoz hasonlóan megadható a ciklus befejeződése után
végrehajtandó feladat.
Új nodeot egy szabad helyre való jobb kattintással hozhatunk létre. Ekkor előugrik egy
környezeti menü, ahol rákereshetünk a kívánt elemre. Legfelül az elágazás és a ciklus,
alatta a meghívható funkciók, az alatt pedig a példányosítható osztályok és az elérhető
változótípusok jelennek meg. Legvégül az elérhető változók listája található, melyekhez
lekérdező, és módosító node-ok készíthetőek. Ha egy funkciót választunk, és annak van
kimeneti értéke is, akkor a program megkérdezi, hogy végre akarjuk hajtani, vagy csak a
kimenetét használjuk fel. Ennek kiválasztása után ad hozzá egy Végrehajtható funkciót,
vagy Nem végrehajtható funkciót.
Fehér színű vonalakkal a végrehajtást jelöli a program, melynek a nyíl ikon mutatja az
irányát. A végrehajtható funkciók mutatóit értelemszerűen csak egy másik funkcióra,vagy végrehajtható feladatra lehet beállítani. Csak egy következő nodeot lehet
beállítani, viszont egy node-ra akárhány másik hivatkozhat.
A be- illetve kimeneteket más-más szín jelöli. Csak azonos típusúakat lehet összekötni,
kivéve, ha a bemenet mixed típusú, mert akkor bármilyen bemenetet elfogad. Egy
bemenetre csak egy kimenet mutathat egyszerre, viszont egy kimenetből több vonal is
kiindulhat.
4. ábra: Példa egy ciklusra
8/16/2019 Web application developer studio
20/82
16
Az alkalmazott színjelölések a következők:
- szöveg (string): lila
- egész szám (integer): világoskék
-
törtszám (float): világoszöld
- kapcsoló (boolean): zöld
- vegyes (mixed): szürke
- osztály példány (instance): kék
A fejlesztőkörnyezet színben nem tesz különbséget különböző osztályok példányai közt,
viszont a be- és kimenetek összekötésekor figyeli azt.
8/16/2019 Web application developer studio
21/82
17
2.7 Egy projekt készítésének bemutatása
Az alábbi fejezetben egy projekt készítése kerül bemutatásra modulok használata nélkül.
2.7.1 Projekt létrehozása
Új projektet létrehozni a File menüben a New Project almenüre kattintva hozhatunk
létre. A megjelenő ablakban válasszuk ki az első PHP ikont, majd kattintsunk a Create
gombra. Ekkor létrejön egy új projekt, és betöltődik a programba. Megjelennek az
elemek a baloldalon a Projektfában és alatta a projekt tulajdonságai. Ha már korábban
készítettünk egy projektet és azt folytatnánk, akkor azt az Open Project almenüre
kattintva tölthetjük be.
2.7.2 Feladat összeállítása
Készítsünk egy olyan programot, mely összeadja 1-től 10-ig a számokat, majd kiírja az
eredményt. Nyissuk meg a main függvényt szerkesztésre, majd töröljük ki a start node
kivételével mindegyik nodeot.
Ha szeretnénk egy számot tárolni, jelen esetben a számítás rész- illetve végeredményét,
akkor ahhoz egy változóra lesz szükség. A projektfában a main függvényre jobb gombbal
kattintva nyissuk meg a környezeti menüt és válasszuk ki az új helyi változó opciót (add
local variable). Miután létrehozta, kattintsunk rá és változtassuk a nevét „osszeg”-re a
típusát integer-re (ST::integer). A::ST azt jelöli, hogy a PHP standard könyvtárából való a
típus.
Ha egy 1-től 10-ig szeretnénk összeadni a számokat, ahhoz egy 1-től 10-ig futó ciklusra
lesz szükség. Hozzuk létre, és kössünk be paraméternek két újonnan létrehozott számot
1 illetve 10 értékkel. A ciklus minden lépése során hozzáadjuk az aktuális számot az
összeghez, így végül az összeg változó tartalmazza a végeredményt.
Az összeadáshoz egyszerűen csak írjuk be a keresőbe angolul, hogy egész szám
összeadás (integer summation). Válasszuk ki, hogy csak a kimenetet használjuk fel.
Bemenethez kössük be a ciklusváltozót (index) és az összeg változót. Az összeg változó
értékét úgy kérhetjük le, hogy a keresőbe beírjuk az „osszeg” szót, kiválasztjuk a
változót, majd a GET-re kattintva megkapjuk a kívánt dobozt, melynek kimenete az
összeg lesz.
8/16/2019 Web application developer studio
22/82
18
Keressünk rá újra a változóra, de most hozzáadáskor a SET-et válasszuk ki. Bemenetnek
kössük be az összeadás kimenetét, és Loop-nak pedig magát a funkciót. Ha ezzel
végeztünk, akkor elkészült a ciklus, mely összeadja a számokat. Viszont nem működik
még, mivel nincs bekötve a START-hoz, és nem jelzi a végeredményt sem.
Kössük össze a START nodeot a ciklussal. Keressünk rá az „echo” kulcsszóra. Ez a parancs
ír ki adatot a PHP nyelvben a képernyőre. Bemenetként egy szöveget vár, így nem tudjuk
közvetlenül bekötni az összeget, át kell alakítani azt számmá. Keressünk rá a „strval”
kulcsszóra, mely egy bármilyen típusú változót alakít szöveggé. Vezessük rajta keresztül
az összeg értékét, majd kössük az echo nodehoz. Kössük be a kiíratást végző feladatot a
ciklus után, és így el is készült a program:
5. ábra: Ciklus alkalmazása
6. ábra: Számítás végzése ciklussal, majd az eredmény kiírása a képernyőre
8/16/2019 Web application developer studio
23/82
19
2.7.3 Projekt fordítása (Exportálás)
A projektet úgy fordíthatjuk le PHP fájlokká, hogy rákattintunk a File menü Export
Project almenüjére. Rövid időn belül a böngésző elkezdi letölteni az elkészült
alkalmazást ZIP fájlba tömörítve. A generált kód az alábbiak szerint van rendezve:
- Legfelül a platform mappája látható
- A platform mappáján belül találhatóak annak névterei, és könyvtárai
hierarchikusan elrendezve
- Minden osztályból egy külön PHP fájl készül, mely neve az osztály neve,
kiter jesztése pedig PHP
2.7.4 Lefordított projekt futtatása
Csomagoljuk ki a kapott tömörített fájlt a webszerverünk egy mappájára, majd nyissuk
meg a böngészőben, és navigáljuk a php/MySite mappára. A képernyőn ekkor egy 55-ös
szám jelenik meg, ami a számítás végeredménye.
8/16/2019 Web application developer studio
24/82
20
2.8 Web pp modul használata
A fejlesztőkörnyezet lehetőséget kínál a programozók által fejlesztett külső könyvtárak
(modulok) hozzáadására. Viszont elérhető egy WebApp nevű modul, mely nagyon
alapvető funkciókat biztosít egy egyszerű webes alkalmazás létrehozásához. WebApp
modult tartalmazó új projektet a New Project menüre kattintva, a második lehetőséget
kiválasztva lehet létrehozni. Tartalmaz továbbá a fejlesztőkörnyezet egy mintaként
megírt egyszerű csevegő alkalmazást, melyet a harmadik lehetőségre kattintva
tölthetünk be. A WebApp modul funkcióinak elsajátítása közben lehet átnézni, ugyanis
használja annak majdnem minden funkcióját.
A továbbiakban a modul osztályai és funkciói kerülnek bemutatásra:
2.8.1 Database
A database osztály az adatbázist kezeli. Az adatbázis célja, hogy adatokat tárolhassunk a
számítógépen táblázatokba rendezve. Például a felhasználók listája egy táblázat, vagy
tábla (table) az adatbázisban. Sorai a felhasználók, oszlopai pedig a felhasználó egy-egy
tulajdonsága. Például név, email cím, jelszó. Az adatbázis-kezelő osztály öt fő funkciót
tartalmaz:
- runQuery: Egy adatbázis művelet végrehajtása. Paramétere a végrehajtandó
művelet.
- numberOfRows: Megadja, hogy a legutóbb végrehajtott adatbázis művelet
eredménye hány soros. Például ha szeretnénk megtudni, hogy hány felhasználó
múlt el 18 éves, akkor az, hogy összegyűjtsük a 18 év felettieket az egy adatbázis
művelet. A kigyűjtött elemek számát pedig ezután az előbbi funkcióval
kérdezhetjük le.
- singleResult: Amennyiben a legutóbbi adatbázis művelet eredménye egy sor, a
kimenetként visszaadja azt egy TableRow példányként. Többsoros eredmény
esetén az első sort kapjuk meg.
- nextRecord: Beolvas egy sort az adatbázis művelet eredményéből. Még egyszer
végrehajtva a funkciót már a következő sort fogja visszaadni. Egy TableRow
példányt ad kimenetként.
8/16/2019 Web application developer studio
25/82
21
- hasNextRecord: Egy igaz-hamis értéket ad vissza aszerint, hogy van-e még hátra
rekord, ami nem került beolvasásra.
2.8.2 CreateTable
Táblák létrehozásáért felelős adatbázis művelet. Megadhatóak a kívánt oszlopnevek,
majd amennyiben a tábla nem létezik, létrejön az. Öt fő funkciót tartalmaz:
- addIdentifier: Azonosító hozzáadása a táblázathoz. Paramétere egy szöveg, mely
az azonosítókat tartalmazó oszlop neve lesz. Az azonosító egy olyan adat, mely
egyértelműen azonosítja a táblázat egy adott sorát. Például ilyen az emberek
személyi igazolvány száma, ami szintén egyértelműen azonosít egy embert.
- addStringColumn: Szöveg tárolását lehetővé tevő oszlop hozzáadása a táblához.
Első paramétere az oszlop neve, a második pedig a szöveg maximális hossza.
- addIntegerColumn: Egész számot tároló oszlop hozzáadása a táblához. Egy
paraméterrel rendelkezik, ami az oszlop neve.
- addFloatColumn: Törtszámot tároló oszlop hozzáadása a táblázathoz. Bemeneti
értéke az oszlop neve.
- addTextColumn: Hosszabb szöveg tárolását lehetővé tevő oszlop hozzáadása.
Egyetlen bemeneti értékével az oszlop neve adható meg.
2.8.3 Insert
Az Insert egy olyan adatbázis művelet, mely új sor beszúrását teszi lehetővé egy táblába.
Így adható hozzá például új felhasználó a meglévőek közé. Fontos megjegyezni, hogy
csak akkor fog ténylegesen hozzáadódni az új sor a táblához, mikor az adatbázis
runQuery funkcióján meghívjuk. Funkciói:
- addStringValue: Szöveges érték hozzáadása. Két paramétere van: az első az
oszlop neve, ami alá az érték tartozik, a másik pedig maga az érték.
- addTextValue: Hosszabb szöveg hozzáadása a sorhoz. Két paramétere van: az
első az oszlop neve, ami alá az érték tartozik, a másik pedig maga az érték.
- addIntegerValue: Egész szám hozzáadása. Két paramétere van: az első az oszlop
neve, ami alá az érték tartozik, a másik pedig maga az érték.
8/16/2019 Web application developer studio
26/82
22
- addFloatValue: Egy törtszám hozzáadása a sorhoz. Két paramétere van: az első
az oszlop neve, ami alá az érték tartozik, a másik pedig maga az érték.
2.8.4 Select
A Select a sorok kiválasztásáért felelős adatbázis művelet. Egyfajta szűrő, mellyel
kiválaszthatjuk előre megadott feltételek alapján a tábla megfelelő sorait. Funkciói:
- addColumn: Oszlop hozzáadása a lekérdezéshez. A végeredményben az így
megadott oszlopok fognak csak szerepelni. Ha nem adtunk meg egyet sem, akkor
mindegyik oszlop meg fog jelenni.
- addConditionEqual: Egyenlőségi feltétel hozzáadása a lekérdezéshez. Egy sor
akkor kerül bele a végeredménybe, ha megfelel a feltételnek. Az első paraméteraz oszlop, melynek értékét a második paraméterben megadott változóhoz
hasonlítjuk. Ha a sornak az oszlop alatt szereplő értéke megegyezik a megadott
változóéval, akkor igaz a feltétel.
- addConditionGreater: „Nagyobb mint” feltétel hozzáadása a lekérdezéshez. Ha
a sornak az oszlop alatt szereplő értéke nagyobb, mint a megadott változóé,
akkor igaz a feltétel.
-
addConditionLess: „Kisebb mint” feltétel hozzáadása a lekérdezéshez. Ha a
sornak az oszlop alatt szereplő értéke kisebb, mint a megadott változóé, akkor
igaz a feltétel.
- setLimit: Paraméternek egy számot vár, mellyel megadható, hogy legfeljebb
hány sort szeretnénk eredményül kapni.
- setOrder: Megváltoztatható az eredményül kapott sorok sorrendje. Két
paramétert vár: az első az oszlop neve, amely szerint sorba rendezzük a sorokat,
a második pedig egy igaz/hamis érték aszerint, hogy növekvő vagy csökkenő
sorrendben szerepeljenek.
2.8.5 Delete
A konstruktorában a Select osztálynak egy példányát várja. Kitörli a tábla azon elemeit,
melyekre teljesülnek a Select példányában meghatározott feltételek.
8/16/2019 Web application developer studio
27/82
23
2.8.6 TableRow
Valamely adatbázisbeli tábla egy sorát ábrázolja. Önállóan nem funkcionál: az adatbázis
osztályból kérhető le egy művelet végrehajtása után a singleResult és nextRecord
funkciókkal. Három funkciót tartalmaz:
- getString: Szöveg kinyerése a paraméterül megadott oszlop alól.
- getInteger: Egész szám kinyerése a paraméterül megadott oszlop alól.
- getFloat: Törtszám kinyerése a paraméterül megadott oszlop alól.
2.8.7 Page
A Page osztály egy weblapot reprezentál. Beállítható a címe és tartalom adható hozzá.
Hat funkciót tartalmaz:
- setTitle: Megváltoztatja a weblap címét a paraméterben megadottra.
- add: Hozzáad egy új elemet az oldalhoz. Ez az elem lehet egy űrlap, szöveg,
gomb, vagy akár címsor is.
- autoRefresh: A weboldalt automatikusan frissíti a bemenetben másodpercben
megadott időközönként.
- addScript: Egy javascript fájl vagy modul hozzáadása az oldalhoz.
- addStyle: Stílisdefiníció csatolása az oldalhoz.
- setStyle: Téma kiválasztása az oldalhoz. Ha paraméter nélkül hívjuk meg, akkor a
„default ” nevű téma lesz kiválasztva.
- send: Ha már minden elemet hozzáadtunk az oldalhoz, akkor ezzel a funkcióval
véglegesíthetjük és küldhetjük el a felhasználó gépének.
2.8.8 Form
A Form osztály az űrlap, melyre a felhasználó adatokat vihet fel és be tudja küldeni aszervernek feldolgozásra azokat. Például ha egy űrlap a regisztráció, ahol ki kell tölteni
az adatokat, majd a kitöltés után beküldeni azokat. A beküldött adatokat a REQUEST
osztály segítségével lehet majd feldolgozni. Funkciói:
- setAction: A paraméterként megadott futtatható osztály main függvényének
fogja átadni az űrlap az adatokat.
8/16/2019 Web application developer studio
28/82
8/16/2019 Web application developer studio
29/82
25
- getString: A paraméterként megadott nevű űrlapelem tartalmát adja vissza
szövegként.
- getInteger: A paraméterként megadott nevű űrlapelem tartalmát adja vissza
egész számként. - getFloat: A paraméterként megadott nevű űrlapelem tartalmát adja vissza
törtszámként.
2.8.17 SESSION
A session magyarul munkamenetet jelent. Amint a felhasználó megnyitja a böngészőt,
egy új munkamenet indul, és akkor fejeződik be, mikor bezárja azt. Minden felhasználó
külön munkamenettel rendelkezik. A SESSION osztály lehetővé teszi, hogy egy
munkamenethez változókat adjunk hozzá és olvassuk ki azokat. Az új projekt
létrehozásakor elérhető csevegő alkalmazás is ezt használja a felhasználó nevének
tárolásakor. Ha még nem tartalmaz a munkamenet „name” nevű változót, akkor
megkérdezi a felhasználót, hogy mi a neve, majd letárolja azt. Ezután mikor a felhasználó
elküld egy üzenetet, a program már emlékezni fog a nevére. Az osztályt hét statikus
funkció alkotja, melyek az alábbiak:
-
has: Ez a funkció egy igaz/hamis értéket ad kimenetként aszerint, hogy a
munkamenet tartalmaz-e megadott nevű változót.
- getString: A paraméterként megadott nevű változó tartalmát adja vissza a
munkamenetből szövegként.
- setString: Egy szöveget ment el a munkamenet adott nevű változójába.
- getInteger: A paraméterként megadott nevű változó tartalmát adja vissza a
munkamenetből egész számként.
-
setInteger: Egy egész számot ment el a munkamenet adott nevű változójába.
- getFloat: A paraméterként megadott nevű változó tartalmát adja vissza a
munkamenetből törtszámként.
- setFloat: Egy törtszámot ment el a munkamenet adott nevű változójába.
8/16/2019 Web application developer studio
30/82
26
2.8.18 Template
A template magyarul sablont jelent. A sablonok olyan szövegek, vagy HTML fájlok,
melyeket a program egy, vagy akár több helyen felhasznál. Ezek a sablonok úgy könnyítik
meg a fejlesztést, hogy nem kell mindenhova beírni ugyanazt a szöveget, elég csak asablonra hivatkozni és annak a tartalmát módosítani. Továbbá ha a sablonon módosítást
végzünk, akkor úgy módosíthatjuk az alkalmazást, hogy nem fordítottuk újra azt. A
WebApp modul sablonjai a szövegek tárolásán kívül lehetőséget adnak a szövegen belül
úgynevezett tag-ek megadására, melyeket {} jelek közé írunk. Ezek helyére a sablon
betöltésekor egyedi tartalmat tölthetünk be. Pé ldául ha a sablon a következő: „Hello
{username}” , akkor a username tag helyére az aktuális felhasználónak a nevét
behelyettesítve kapjuk meg a megfelelő megszólítást. Az osztály funkciói a következők:
- applyConfig: Két bemeneti értéke van. Az elsőben a sablon nevét, a másodikban
pedig a konfigurációt adhatjuk meg egy TemplateConfig példányként.
Eredményül a betöltött sablon szövegét adja, a tagek helyére a megadott
adatokat behelyettesítve.
- push: Ugyanaz a funkciója mint az applyConfig-nak annyi eltéréssel, hogy nem
adja vissza a kapott szöveget, hanem egy belső tárolóban eltárolja azt. Ha már
tartalmaz a tároló szöveget, akkor a meglévő szöveg végére illeszti.
- clear: Kitörli a belső tároló tartalmát.
- get: Visszaadja a belső tároló tartalmát szövegként, és kiüríti azt.
- send: A belső tároló értékét a képernyőre írja.
2.8.19 TemplateConfig
Ennek az osztálynak a példányai tartalmazzák a sablonokra vonatkozó konfigurációs
adatokat. Eltárolhatók benne név-érték párok, melyek egy adott sablonba
behelyettesíthetőek lesznek. Az osztály a következő funkciókat biztosítja:
- add: Egy új név-érték pár hozzáadása. Az első paraméter a név, a második az
érték.
- remove: A paraméterben megadott nevű érték törlése.
8/16/2019 Web application developer studio
31/82
27
A Template osztálynak a push és applyConf funkciói várnak bemenetként egy
TemplateConfig példányt. A sablon felhasználása után a konfiguráció nem veszik el,
annak beállításait bármikor újra lehet alkalmazni egy sablonra.
2.8.20 File Media)
Szerveroldalon a fájlok kezeléséért felel. Két funkció segítségével tud fájlt betölteni:
- loadFromUpload: A paraméterben átadott néven feltöltött fájlra fog hivatkozni.
- loadFromPath: A megadott elérési úton elérhető fájlra fog hivatkozni.
Egy File osztály példányán ellenőrizhető hogy létezik-e a hivatkozott fájl ( fileExists),
továbbá átmozgatható egy másik könyvtárba (moveTo).
2.8.21 Image Media)
Szerveroldali képkezelő osztály. Paraméterként egy File példányt vár. Az osztály a
következő funkciókat biztosítja:
- isImageValid: Ellenőrzi, hogy a konstruktorban átadott fájl képfáj-e.
- saveToPNG: Kép eltárolása PNG formátumban a megadott elérési útvonalra.
- storeIn: A kép eltárolása a megadott mappába. A kép neve véletlenszerűen
generálódik, melyet a getPath metódussal lehet később ellenőrizni.
8/16/2019 Web application developer studio
32/82
28
2.9. Csevegő alkalmazás
Az új projekt készítésekor betölthető harmadik minta alkalmazás egy csevegő
alkalmazás, mely tartalmazza a WebApp modul legtöbb elemét.
Az alkalmazás két oldalt tartalmaz. A csevegőt és egy rövid leírást ( About ). A
VisualScripting menüpont a fejlesztőkörnyezet online elérhető változatára mutat.
7 . ábra A csevegő alkalmazás forrása a fejlesztőkörnyezetben
8 . ábra Az exportált csevegő alkalmazás futás közben
8/16/2019 Web application developer studio
33/82
29
Mikor egy új felhasználó érkezik az oldalra, az alkalmazás kéri a nevét. Ezután az ő általa
írt üzenetek előtt a megadott név fog szerepelni. Lehetőség van szövegen kívül képeket
is beküldeni. 10 másodpercenként újratöltődnek az üzenetek.
Mivel a WebApp modul felhasználásával készült, ezért nem volt szükség a
szerveroldalon az SQL injection és kliens oldalon az XSS támadások elleni felkészülésre.
Az adatbázis a database interfész osztályain keresztül érhető el, melyek ellenőriznek
minden bemenetet. Az element interfész osztályai pedig minden szöveges tartalmat a
htmlspecialchars funkción keresztül továbbítanak a HTML kódba.
8/16/2019 Web application developer studio
34/82
30
3. Fejlesztési dokumentáció
A fejlesztési dokumentáció négy fő fejezetből áll. Az első fejezet a kitűzött feladatokat
és azoknak a lehetséges megoldásait vizsgálja. A második fejezet a program főbb
használati eseteit részletezi. Ezután kerülnek bemutatásra a programot alkotó osztályok
és struktúrák, majd az utolsó fejezetben a tesztelés.
Még a fejlesztés menetének részletes leírása előtt érdemes megjegyezni, hogy a vizuális
fejlesztés módját és a fejlesztőkörnyezet design- ját is az UnrealEngine4 inspirálta.
Nagyon sok hasonlóság fedezhető fel közöttük ebből kifolyólag. Viszont az UnrealEngine
játékok fejlesztésére készült, C++ modulokkal bővíthető, és a fejlesztőkörnyezet is C++ -
ban íródott. Éppen ezért is a szakdolgozatban nem került felhasználásra az Unrealprogramkódjának semmilyen része sem, csupán néhány vizuális fejlesztést lehetővé
tévő ötlet, illetve a grafikus felhasználói felület színvilága.
3.1 kitűzött feladatok, és megvalósításuk
A feladat egy programkód írása nélkül is használható fejlesztőkörnyezet létrehozása,
mely webes alkalmazás létrehozását teszi lehetővé akár programozáshoz nem értő
felhasználóknak is. A fejlesztőkörnyezet modulokkal bővíthető legyen, és képes legyen
projekteket menteni, illetve újra betölteni. Először a feladatot részfeladatokra
bontottam:
- Projekt szerkezetének megtervezése, annak fájlba írása, és fájlból olvasása
- Programkód írása nélküli fejlesztés megvalósítása
- Projekt fordítása webes alkalmazássá (webszerveren futtatható állományokká)
- Egy könnyedén használható modul készítése, mellyel a kezdő felhasználók is
képesek egyszerűbb alkalmazásokat létrehozni
Mindegyik részfeladat az alábbi felsorolásban az előtte szereplőre épül és ebben a
sorrendben kerültek megvalósításra. Mindegyik részfeladat komoly tervezést és
átgondolt megvalósítást igényel. A következőkben ezekről lesz szó egy-egy alfejezetben.
8/16/2019 Web application developer studio
35/82
31
3.1.1 Projektfájl
A projektfájl szerkezetének megvalósításakor először össze kell gyűjteni, hogy mi
mindent is akarunk eltárolni, és ezek az eltárolandó elemek hogyan viszonyulnak
egymáshoz. A projektnek tartalmaznia kell először is az önmagára vonatkozó adatokat:
- Projekt neve
- Projekt verziója
- Szerző neve
A projekten belül kell szerepelniük az alkalmazás elemeinek. A későbbi fejleszthetőséget
szem előtt tartva bevezettem a platform jelölést. A platform egy programozási nyelvet
jelöl (jelen esetben PHP) mely egy elkülönített egységet alkot a projekten belül.Tartalmazza a benne létrehozott elemeket, és a betöltött könyvtárakat (modulokat). Az
elemek az alábbiak lehetnek:
- Névtér
- Osztály
- Funkció
- Változó
A funkciókon belül további elemek is eltárolásra kerülnek, melyek a vizuális fejlesztést
lehetővé tevő szerkesztőfelület állapotát írják le.
Mivel a fejlesztőkörnyezet is webes környezetben készül, ezért érdemes egy a webes
platformon könnyen feldolgozható adatstruktúrát választani. Két ilyen lehetőség áll
rendelkezésre: az XML és a JSON. Mindkét típus alkalmas a projektadatok tárolására,
viszont a JSON feldolgozását a Javascript natívan támogatja oly módon, hogy közvetlenül
saját objektummá alakítja, így erre esett a választás.
A projekt elemeinek a hierarchiája adott, viszont a rengeteg fajta objektumot a
feldolgozhatóság megkönnyítése érdekében érdemes csoportosítani, és a hasonló
elemeket egy osztályba szervezni. A Javascript nyelv ugyan objektumorientált, de nem
lehet úgy osztályokat definiálni, mint a Java esetén. Egy prototype nevű objektum
módosításával érhető el a funkciók osztályszerű viselkedése. Ebből kifolyólag interfészek
sem készíthetőek. A funkcióikban nagyon hasonló elemeket így egy osztályba
8/16/2019 Web application developer studio
36/82
32
szerveztem, de adattagjaikban továbbra is elérhető minden tulajdonságuk, többek
között az adott elem fajtája is. Végül a következő osztályok jöttek létre:
- Object: Egy platform alá tartozó objektum, mely lehet névtér, osztály, funkció,
vagy változó.
- Platform: Az alá tartozó elemek, egy programozási nyelv, és a hozzá betöltött
könyvtárak összessége.
- Library: Más néven könyvtár, vagy modul, egy kívülről betölthető
kódgyűjtemény, melynek funkciói a projektben felhasználhatóvá válnak.
- Node: A szerkesztőfelületen a funkció utasításait leíró blokk.
A JSON előnye, hogy mentéskor egyszerűen kiírhatjuk az adatokat egy objektumba, és aJSON.stringify metódus szöveges formátummá alakítja. Visszafele pedig a JSON.parse
alakítja a szöveget objektummá.
Miután a projekt tárolásának módja már megoldott, azt is meg kell fontolni, hogy
futásidőben milyen struktúrában tároljuk a projektet. A legegyszerűbb megoldás az
lenne, ha egy nagy objektumban hagynánk az egészet, mint ahogy beolvassuk a
projektfájlból. Előnye, hogy a feldolgozás nem igényel semmifajta további funkciót.
Hátránya viszont, hogy nem definiálható az objektumokra osztályszintű funkció. Nincs
információjuk a projekten belüli elhelyezkedésükről sem, és a projektben való keresést
is megnehezíti.
A megoldás egy az objektumhoz nagyon hasonló hierarchia felépítése a projektfájl
beolvasásakor, viszont az adott objektum típusának megfelelő osztály példánya fog
benne szerepelni. Mentéskor pedig a példányok adatainak lekérésével egy projekt
adatait tartalmazó objektum fog felépülni.
Projekt megnyitására és mentésére is két féle lehetőség volt. A régebben használt
modell szerint minden fájlbetöltés és letöltés csak a szerveren keresztül működött. A
mai modern böngészőkben viszont már nem szükséges feleslegesen a szerverre
feltölteni és letölteni a fájlokat, azokat a böngészőn belül is lehet írni illetve olvasni az új
API-knak köszönhetően. Szöveges fájlok betöltését és mentését a már említett FileAPI
és saveAs használatával implementáltam.
8/16/2019 Web application developer studio
37/82
33
3.1.2 Vizuális fejlesztés
Amikor a program funkcióinak szerkesztését lehetővé tevő vizuális fejlesztőeszköz
készült, meg kellett tervezni, hogy milyen elemekből épüljön fel, azok hogyan
kapcsolódjanak egymáshoz, illetve hogy érdemes úgy kialakítani a rendszert, hogy azviszonylag egyszerűbben fordítható legyen. Magának a vizuális fejlesztésnek az ötlete
már megvolt, viszont annak a háttérben működő megvalósítását még meg kellett
tervezni. A cél végül egy programmá fordítás, tehát érdemes erről az oldalról vizsgálni a
kérdést: Milyen elemekből áll egy funkció kódja?
- Változódefiniálás
- Értékadás
- Példányosítás
- Függvényhívás
- Elágazás
- Ciklusok
Ezek a műveletek jelenjenek meg a szerkesztőfelületen egy-egy dobozként.
A funkció működését nem csak a benne található utasítások, hanem azoknak a sorrendje
is meghatározza. Tegyük tehát lehetővé ezen blokkok sorrendjének meghatározását. Ez
úgy lehetséges, hogy minden végrehajtható utasítást jelölő doboznak tartalmaznia kell
egy mutatót az előző, és a következő utasításra.
A végrehajtandó feladatok sorrendje és típusa már meghatározható. De a
függvényeknek vannak paraméterei is, melyekhez változókat adhatunk át. Ráadásul a
függvények egymásba is ágyazhatóak, így bemeneti paraméternek egy másik függvény
kimenete is felhasználható.
Erre szolgálnak a dobozok jobb és bal oldalán található ki- és bemenetek. Különböző
színnel a különböző típusok vannak jelölve, és a felhasználó csak azonos típusú
kimenetet tud belekötni egy bemenetbe. Egy kimenetet több helyen is fel lehet
használni, viszont értelemszerűen egy bemeneti paraméter egyszerre csak egy értéket
kaphat.
Az így létrejövő blokkok, és azoknak a hálózata már egyértelműen definiál egyprogramkódot, melyet az exportálás során előállít a program. A fejlesztés közben mikor
8/16/2019 Web application developer studio
38/82
34
a felhasználó képes dinamikus tartalmat előállítani, érdemes mindig törekedni arra,
hogy legyen egy algoritmus, mely azt egy előre definiált módon fel tudja dolgozni.
3.1.3 Projekt fordítása (exportálás)
A projekt lefordítása nem más, mint az összeállított JSON formátumú projektfájl és a
felhasznált könyvtárak átalakítása futtatható állományokká, melyek szintén szöveges
PHP kódok.
Az első felmerülő kérdés a következő: Érdemes továbbra is csak a kliensoldalon a
felhasználó böngészőjében végezni a fordítást is, vagy adjuk át a szervernek a feladatot?
A PHP legnagyobb előnye e téren a natív ZIP támogatás, így az elkészített projektfájlokat
össze tudja csomagolni a fejlesztőkörnyezet végül egyetlen állománnyá. A Javascriptellenben nem támogatja a lokális fájlműveleteket, vagy legalábbis a File API-n keresztül.
Viszont jelenleg nincs meg az a több böngésző által is támogatott egységes fájlkezelő
rendszer, amire szükség volna. A PHP ellenben egy könnyen érthető utasításkészletet és
osztályokat bocsát rendelkezésre a területen.
Mielőtt elkezdenénk fejleszteni a fordítót, érdemes megtervezni, hogy milyen lépéseken
keresztül jutunk el a projektfájlból a webalkalmazásig. A projekt melyik eleméből az
alkalmazás milyen elemét állítjuk majd elő.
Az alkalmazás osztályainak hierarchikus elrendezéséről a névterek, vagy mappák
gondoskodnak. Ezt a névtér struktúrát érdemes nem csak kódszinten, hanem fájlszinten
is megőrizni, elősegítve a későbbi áltáthatóságot. A program átláthatóságát, és az
előfeltételek kezelését is elősegíti, továbbá ha az osztályokat is mind-mind külön fájlban
tároljuk. Így a fájl neve már eleve az osztály nevét mutatja, és azt az osztályt tartalmazza,
mást nem.
Továbbra is érdemes kiemelni, hogy a program további bővíthetősége egy nagyon
fontos szempont. Így érdemes egy projekt exportáló interfészt definiálni, melyet az
adott programozási nyelvek fordítói implementálnak majd.
A fordítás lényegi része a funkciók belsejében történik, mikor a node-ok halmazából
akarunk kódot generálni. A feladat megoldásán gondolkodva a következő megoldás
született:
8/16/2019 Web application developer studio
39/82
35
Hagyjuk el a nem meghívható node-okat, így csak azok maradnak, melyeket futtatni
szeretnénk. Nem csak egymás után egy sorba köthetőek, hanem definiálható elágazás
és ciklus is, így lehetőség van a program futását visszavezetni egy korábban már
végrehajtott funkcióhoz, és onnan folytatni, pont mint egy GOTO esetén. Vegyük észre,hogy az ezen módon összekötött node-ok a csúcsok, a következő funkcióra hivatkozó
mutató pedig irányított él lesz.
Ha meg szeretnénk valósítani egy GOTO-hoz hasonló szerkezetet, akkor meg kell
határoznunk először is azokat a funkciókat, melyekre egynél több másik funkció
hivatkozik a következőként. Bontsuk fel a gráfot olyan részgráfok halmazára, ahol
minden részgráfnak csak egy bemenő éle lehet. A gráf megfelelő felbontása a
következőképpen néz ki:
- Válasszuk ki azokat a node-okat, amelyekhez több bemenő él is tartozik, illetve a
kezdő csúcsot. Ezek lesznek egy-egy részgráf kiinduló pontjai.
- Induljunk el ezekből az élekből, és amíg nem egy másik részgráf kiinduló pontjára
mutat az él, addig még ahhoz a részgráfhoz tartozik, amelyik kiindulópontjából
indítottuk azt.
-
Amint elértünk egy ilyen ponthoz, a részgráf véget ér abban az irányban. Viszont
jegyezzük fel, hogy ezen a helyen nem egy következő funkció kerül végrehajtásra,
hanem a funkció egy adott pontjához ugrunk.
7 . ábra: A nodeok ábrázolása feldolgozás előtt (vázlat)
8/16/2019 Web application developer studio
40/82
36
Ha már felbontottuk a gráfot, akkor úgy valósíthatjuk meg egy részgráfba ugrást, hogy a
függvény törzsébe egy switch blokkot helyezünk, melynek esetei maguk a körmentes
részgráfok által reprezentált programkódok. A függvény egy opcionális paramétere a
következő részgráf azonosítója. Tehát ugrás esetén a funkció önmagát hívja meg, csakmásik ág fut le aszerint, hogy melyik komponensbe lépünk be.
Azok a funkciók, melyek egyik részgráfból sem elérhetőek, nem kerülnek a
programkódba.
Annak érdekében, hogy a lokális változók ne vesszenek el a rekurzív hívások közben sem,
egy tömbben tároljuk őket, melyet szintén átad a funkció majd paraméterként. Viszont
ezt a tömböt referenciaként adjuk át, hogy az egyik komponensben megváltoztatott
érték a másikban is ugyanúgy viselkedjen.
A futtatható funkciók gráfjának felépítése után dolgozzuk fel a csak visszatérési értéket
produkáló függvényeket. Ezt úgy tesszük, hogy a futtatható funkciók generálása közben
figyeljük, van-e bemeneti értékük. Ha van, akkor behelyettesítjük a belekötött értéket,
vagy az azt produkáló funkció kimenetét. Ha funkció, akkor azt szúrjuk be a bemenet
helyére, majd rekurzívan ennek is hasonlóképpen feldolgozzuk a paramétereit.
8 . ábra: Részgráfokra bontás (vázlat)
8/16/2019 Web application developer studio
41/82
37
Mikor szövegként visszaadjuk a feldolgozott blokkot, többféle eredmény kerülhet a
fájlba aszerint, hogy miképp hivatkoztunk rá.
- Statikus függvényhívás: Osztálynév::függvény(…)
-
Statikus változólekérdezés: Osztálynév::$változó
- Lokális változólekérés: $változó
- függvényhívás: függvény(…)
- példány egy metódusának hívása: $példány->metódus(…)
- osztály példányosítás: new Osztálynév(…)
3.1.4 Modulok
A fejlesztőkörnyezet teljességét és bővíthetőségét egy modulkezelő rendszer biztosítja.Lehetőséget ad külső könyvtárak importálására, hogy ne csak a beépített funkciók
legyenek használhatóak. Tulajdonképpen a PHP standard könyvtára is egy modulként
lett megvalósítva egy olyan PHP fájl beimportálásával, mely a PHP által alapból
biztosított függvényeket tartalmazza. Ehhez a gyűjteményhez egy PHP-code-hints [11]
nevű projektet felhasználva jutottam.
Egy modulkezelőnek az alábbi funkciókat kell biztosítania:
- Külső könyvtárak beimportálása, lehetőleg minél kevesebb megkötéssel.
- A könyvtár feldolgozása, és az általa felhasznált funkciók kigyűjtése, majd egy
kliens által értelmezhető formátummá alakítása.
- Kliens oldalon a szerkesztő képes legyen hivatkozni a könyvtár tartalmaira, és a
lefordított projekt is elérje azt.
Fájl értelmezése
Legfontosabb és legösszetettebb feladat a PHP fájlok értelmezése. Először érdemes a
nyelv által alapból elérhető lehetőségek után nézni, hogy ne kelljen a teljes feldolgozást
az alapoktól elindulva implementálni. A PHP rendelkezik egy beépített tokenizer[12]- rel,
mely a PHP fájlok tokenekre bontását végzi. Ezen eszköz használatával már csak a
tokeneket kell feldolgozni.
Magát a fájlt nem akarjuk értelmezni, csupán az elérhető névtereket, osztályokat és
funkciókat kívánjuk kigyűjteni. A PHP nyelv alapesetben nem típusos, azaz nem
8/16/2019 Web application developer studio
42/82
38
adhatóak meg a változóknak a típusaik, viszont a funkciók paramétereinek megadásakor
lehetőséget ad azok típusának meghatározására feltéve, ha egy osztály példányát várja,
a skaláris típusokat nem támogatja. Létezik továbbá egy PHPDoc [13] nevű dokumentáló
szabvány, mely komment blokkokban teszi lehetővé egy funkció típusainak és leírásánakmegadását. Mindezeket szem előtt tartva a fájlfeldolgozó feladata a következő:
- A fájl tokenekre bontása
- Osztály és funkciódefiníciók felismerése
- Típusok megállapítása Typehint-ek és PHPDoc kommentek figyelembevételével
- A feldolgozott osztályok és funkciók rögzítése
Tokenek feldolgozása
A tokenizálás után egy tömböt kapunk eredményül, melyen végig kell iterálni, hogy
feldolgozzuk. Mivel funkciókat tárolunk le, illetve azt, hogy melyik osztályban, melyik
névterekben vannak, ezért a funkciók értelmezése a legfőbb feladat, illetve azok
paramétereinek lekérdezése. A tokenek elemzésekor egy funkcióhoz érve a
következőket kell megtennünk:
- A funkció nevének és tulajdonságainak rögzítése
- A funkció paramétereinek és azok típusának megállapítása
- A funkció helyének lekérdezése a névtereken és osztályon belül
Hogy ezeket a feladatokat ellássuk, iteráció közben a következőkkel kell tisztába
lennünk:
- Melyik névtéren belül vagyunk?
- Egy osztályon belül vagyunk-e? Ha igen, mi az osztály neve?
- A funkció paraméterdefinícióin belül vagyunk?
- Mi volt az előző megjegyzés blokk?
- Mi volt az előző funkciódefiníció?
- Hány nyitott zárójel van jelenleg?
Mivel a token típusának különböző esetei szerint más-más módon dolgozzuk fel a
meglévő adatokat, így az iteráción belül érdemes egy switch-case szerkezet használata.
Egy asszociatív tömbben tároljuk el, hogy minden típusból mi volt az előző elem, hogy
8/16/2019 Web application developer studio
43/82
39
tudjunk hivatkozni rá. Illetve hozzunk létre egy-egy tömböt az osztályok és funkciók
tárolására.
Ha elérünk egy T_NAMESPACE tokent, akkor a következő szöveg a namespace
definíciója lesz T_NS_SEPARATOR elemekkel elválasztva.
T_FUNCTION tokenhez érve a következő szöveg a funkció neve lesz, az utolsó
T_DOC_COMMENT pedig a hozzá tartozó dokumentációs blokk. A funkció nevének
definiálása után kezdődő nyitó, majd azt lezáró zárójelek közt helyezkednek el a
paraméterek, ami néhol typeHint-el van ellátva. Egy nyitó zárójelhez érve (ha egy
funkció definíciónál tartunk) a paramétereket kell vizsgálni, melyek a következőképp
néznek ki: [typehint] $variable_name [= default_value]. A dokumentációt feldolgozófunkció eredményét összevetjük a hint-ekkel, melyek végül együtt adják a paraméterek
típusait. A függvény belsejét nem vizsgáljuk, az a könyvtár struktúrájának ismerete
szempontjából irreleváns.
Osztályok a T_CLASS definíció után kezdődnek, egyetlen tulajdonsága a neve. Tartalma
a {} zárójelek közt helyezkedik el, mely végére érve az osztálynév definíciója óta
feldolgozott funkciókat az osztály funkciói közé másoljuk.
A tokenizer nem bontja fel a dokumentációt, azt nekünk kell elvégezni. Szerkezete igen
egyszerű: /** karakterekkel kezdődik, és */ karakterekkel végződik. Több soros
megjegyzés, melyben lehetőség van speciális jelentéstartalmú elemek beillesztésére.
Ezek a kulcsszavak @ jellel kezdődnek. Nekünk a következőkre van szükségünk:
- @param: Egy paraméter megadása, majd a neve, típusa és leírása következik
- @return: Visszatérési érték típusának és megjegyzésének megadása
-
@var: Változó típusának definiálása
Egyszerűen bontsuk sorokra a dokumentációt, és keressük meg a kulcsszavakat.
Érdemes megjegyezni, hogy a sorok * és szóköz karakterek kombinációjával kezdődnek,
ezeket ne vegyük figyelembe. Továbbá megadható többsoros megjegyzés is, ekkor a
kulcsszó nélküli sort az előző tartalmához kell hozzáadni, kivéve az első sort, ahol maga
a funkció leírása szerepel.
Projektfájllá alakítás és értelmezés
8/16/2019 Web application developer studio
44/82
40
A fájlok feldolgozása után rendelkezünk a funkciók és osztályok névterekkel ellátott
gyűjteményével. Rendezzük ezeket egy projektfájlokat leíró asszociatív tömbhöz
hasonló szerkezetbe azzal a különbséggel, hogy az osztályoknak tároljuk el az elérési
útját is, ahonnan elérhetőek azok az alkalmazás futásakor.
A rendezett tömböt alakítsuk JSON formátummá a PHP beépített json könyvtárával, és
adjuk vissza az eredményt a kliensnek, mely azt be tudja tölteni a könyvárak közé. A
könyvtár szerkezete teljesen ugyanolyan, mint a projekté annyi különbséggel, hogy a
funkciói nem szerkeszthetőek, csak meghívhatóak. A könyvtár fájljait nem tároljuk el a
projektfájlban hogy ezzel helyet, és feldolgozási időt takarítsunk meg. A projektfájl a
szerveren kerül elmentésre egy egyedi azonosítóval. Ezt az azonosítót kapja meg a
kliens, majd a projektfájlban eszerint hivatkozik rá. A fordításkor is a fejlesztőkörnyezet
ezen azonosító alapján keresi ki, és másolja be a felhasznált könyvtárakat a lefordított
fájlok mellé.
Korlátozások
A modulkezelő célja, hogy külső osztályokat be tudjon tölteni a projektbe. Viszont a
típusok és névterek használata miatt, illetve az öröklődések hiányából fakadóan az
importálandó könyvtárakra az alábbi megkötések és javaslatok vonatkoznak:
- A könyvtárat egy ZIP archívumba kell csomagolni, hogy egy fájlként feltölthető
lehessen a szerverre.
- A könyvtár gyökerében el kell helyezni egy config.json fájlt, melynek egy
kötelező kulcsa a name, melynek értéke a projekt neve kell hogy legyen.
- Hogy a projektkezelőhöz hasonló szerkezetet kapjunk, érdemes fájlonként egy
osztály használata. A funkciókat osztálydefiníción belül definiáljuk, illetve
fájlonként csak egy névtér definiálható.
- Érdemes minden esetben PHPDoc és typehint-ek alkalmazása, mikor
függvényeket definiálunk. Ha nem található típus, akkor a változó mixed lesz.
- Az importáló nem ismeri az öröklődést, így nem látja az osztály szülőjének
metódusait, ezért érdemes minden szükséges elérni kívánt funkciót
implementálni. Az interfészek nem kerülnek feldolgozásra.
8/16/2019 Web application developer studio
45/82
41
3.2 Használati esetek
A felhasználónak a következő célkitűzésben szereplő feladatokat kell tudnia elvégezni a
fejlesztőkörnyezeten:
-
Új projektet létrehozni
- Meglévő projektet fájlból betölteni
- Projektet fájlba menteni
- Új projektelemet létrehozni
- Funkciók elemeinek törlése és módosítása
- Modulok hozzáadása a projekthez
8/16/2019 Web application developer studio
46/82
42
3.3 Osztályok és funkciók
3.3.1 Bevezetés
A program két különböző programozási nyelven íródott: PHP, mint szerveroldali nyelv
és Javascript, mint kliensoldali nyelven. A kliensoldalon Javascript-el megírt rendszerviszont további két részre bomlik: a fejlesztőkörnyezet vizuális megjelenítő, és
felhasználói interakciókat kezelő (GUI), illetve a projektet kezelő, a GUI eseményeire
reagáló részre. A Javascript nyelvben nem olyan formában léteznek az osztályok, mint
például a Java, vagy a PHP nyelvben. Funkcióként kell definiálni azokat, mely a
konstruktor lesz, és a prototype objektum segítségével lehet futásidőben megadni a
metódusait. A new operátorral példányosítható, és a metódusai a this operátorral
hivatkozhatnak az aktuális példányra, így jogosan hívhatjuk az ezen megvalósítással létrehozott
struktúrákat osztályoknak. A PHP nyelven íródott kód is két részre osztható. Az egyik a
fejlesztőkörnyezet része, a másik pedig a WebApp modul.
8/16/2019 Web application developer studio
47/82
8/16/2019 Web application developer studio
48/82
44
- onload: Egy új elem létrehozásakor futó funkció
Minden paraméterhez elkészíti a hozzá tartozó gettert és settert. Ha tömb a paraméter
típusa, akkor kibővíti még egy add, egy remove és has funkcióval is, melyek hozzáadnak,
törölnek és ellenőrzik hogy létezik-e egy adott elem.
WB MsgBox
Egy funkció, mely egy a win paraméterben megadott ablakon egy title paraméterben
definiált című, és text szerinti szövegű üzenetdobozt (WB.Alert) hoz létre.
WB setStyle
Megváltoztatja a GUI stílusát a paraméterben átadott nevű stíluslapra. Csak az „Unreal”stílus érhető el, de úgy lett kialakítva a rendszer, hogy le lehessen cserélni azt.
WB openTextFile
A mime paraméterben átadott fájltípus megnyitását lehetővé tevő fájltallózót nyit meg.
Sikeres fájlkiválasztás és beolvasás esetén a callback paraméterben átadott funkciót
hívja meg.
WB openJSONFile
Ugyanaz a feladata, mint a WB.openTextFile funkciónak, csak itt rögzített a típus (json).
WB loadText
A paraméterben megadott URL-ről szöveges fájl betöltése, és visszaadása kimenetként.
WB loadJSON
Ugyanaz a funkciója, mint a WB.loadText-nek, csak rögzített a fájltípus (json);
WB uploadZIP
Egy fájltallózó ablakot nyit meg, melyen ZIP fájlt lehet kiválasztani, melyet a
paraméterben adott URL-re tölt fel (path) majd meghívja a callback függvényt.
WB saveJSONFile
8/16/2019 Web application developer studio
49/82
45
Megnyit egy fájltallózót, mely egy JSON fájl mentését teszi lehetővé. Az obj paraméter
az objektum, amit JSON formátummá alakítunk, a name pedig a fájlnév.
WB.Object osztály
Minden WB elem őse, lehetőséget ad a szövege módosítására (setText), elem
hozzáadására (add), tartalmának törlésére, és önmagának az elem kitörlésére is
(destroy).
A WB.Object egy absztrakt osztály szerepét tölti be, még ha ez a kifejezés Javascriptben
nincs is definiálva. Kódszinten lehetőség van ugyan példányosítani, de nincs értelme,
csupán mint ősosztály lett létrehozva. Funkciói elérhetőek az összes leszármazott
osztályból.
8/16/2019 Web application developer studio
50/82
46
WB.Whiteboard osztály
Ez az elem a funkciószerkesztő, melyeken a vonalakkal összeköthető dobozok jelennek
meg. Adható hozzá környezeti menü (setContextMenu), és biztosít hozzáférést a
dobozokhoz, melyek ki vannak jelölve (getSelectedBoxes). Továbbá tárolható benne egy
szöveg; például megjegyzés, vagy cím (setTag) és egy tetszőleges objektumra utaló
referencia (setObject).
8/16/2019 Web application developer studio
51/82
47
WB Menu osztály
A felület felső részén található a menücsík. Ablakonként csak egy hozható létre. Nem
tartalmaz új funkciót a WB.Object-hez képest, viszont egyedi stílus tartozik hozzá.
Továbbá tartalmaz egy rejtett tárolót, ahova az almenüket helyezi az add funkció
hívásakor.
WB.SubMenu osztály
A menü elemeit tartalmazó tároló.
WB.MenuSplitter osztály
A menüpontokat elválasztó vízszintes vagy függőleges csík. Nem tartalmaz semmilyen
funkciót, csupán stílusdefiníciót.
8/16/2019 Web application developer studio
52/82
48
WB.MenuItem osztály
A menü elemei. Lehetnek főmenük, vagy almenük aszerint, hogy a menücsík, vagy egy
másik menü elem tartalmazza-e. Legfeljebb két szint mélységig egymásba ágyazhatóak.
WB.Panel osztály
A panel egy olyan eleme a GUI-nak, mely sem funkció, sem stílusdefiníciókat nem
tartalmaz. A WB.Object legközelebbi leszármazottja.
WB.Tab osztály
A fülekbe rendezett panelek egy fülét reprezentálja. Biztosítja események definiálását,
melyeket a fül bezárásakor (setOnclose), illetve fül kijelölésekor (onSelect) hív meg.
Tartalmaz továbbá egy címkét is, mely a fülek közt megjelenő cím lesz (setCaption).
8/16/2019 Web application developer studio
53/82
49
WB.Tabs osztály
A füleket tartalmazó panel. Felül találhatóak a fülek, alattuk pedig az épp előtérben
lévő panel.
WB.HorizontalSplitter osztály
Két egymás mellett elhelyezkedő, egy elválasztóval elszeparált panel, melyek méretei