A táblához tartozó idegen kulcsok: ............................................................................................................... 40 3.3.2.7
Napjainkban egyre több vásárlás történik online felületről, az emberek egyre jobban megbíznak az ilyen módon árusító áruházakban, így lehetővé téve ezek elszaporodását a weben. A feladat egy webes felület létrehozása egy online áruházhoz. Az oldal célja növények online megrendelésének biztosítása. Sokkal egyszerűbb és kényelmesebb a felhasználók számára, ha otthonról tudják intézni a vásárlást, és az utána folyó procedúrákat: például, hogy nyomon tudják követni, hogy a termék kiszállítása melyik fázisban tart éppen. Fontos szempont a kényelem, és az egyszerűség mind a felhasználói, mind az adminisztrációs felületen. Az oldal célja nyilvánvaló: minél több vásárlót vonzani és minél szélesebb kínálatot felsorakoztatni. Specifikusan, mivel egy online növény áruházról van szó, minél szélesebb igényeknek eleget tenni, például segíteni a felhasználót a megfelelő növény kiválasztásához. A felület két részre bontható: egy adminisztrációs felületre és egy felhasználói felületre. Ezek eltérő modulokkal rendelkeznek. A felhasználói felület két részre taglalódik: az egyik esetben a felhasználó nincs bejelentkezve, a másik esetben pedig a korábban regisztrált felhasználónév és jelszó párosával lépett be a rendszerbe. Amíg a felhasználó nincs beléptetve a rendszerbe, addig is el tud érni bizonyos funkciókat: regisztráció, a termékek böngészése, keresése, ám az oldal fő funkcióit, a megrendelést és a kosár funkciót csak bejelentkezés után tudja használni. Az adminisztrációs felület csak a megrendelő számára elérhető és használható. Fő feladatai: termékek feltöltése, szerkesztése, hírek, akciók létrehozása, a megrendelések kezelése, illetve archiválása, az archívumban szereplő rekordokból olyan statisztikák lekérdezése, mint például a havi termékfogyás, illetve a havi bevétel. Az adminisztrációs felülethez tartozik egy mobil felület, amely halad a kor vívmányaival: okostelefonról elérhető webes felületet biztosít az úton lévő megrendelő számára, melyről két fő funkció érhető el: a megrendelések listázása, illetve a felhasználók közötti keresés, és adatlapjuk megtekintése. Ezen két funkció elérhetősége a legfontosabb, amikor a megrendelő úton van: ha éppen terméket szállít ki, akkor legyen lehetősége a felhasználó elérhetőségeinek kikeresésére, illetve, hogy napjában többször, számítógép nélkül is tudja ellenőrizni a bejövő megrendeléseket. Mindehhez kompakt design tartozik, mellyel az adatforgalom is kordában tartható.
3
1.2
A program felépítése
A program maga egy webes felület, mely egy tetszőleges tárhely szolgáltató szerverén fut. Itt Apache webszerver biztosítja a PHP scriptnyelvben megírt program működését. A program MySQL adatbázisszervert használja adatbázis háttérnek. A program elsődleges célja az online árusítás, melynek során a felhasználó termékeket tud megnézni és megvásárolni. Ez természetesen nem működne megfelelő háttér nélkül. Az oldal üzemeltetőjének (vagy megbízott alkalmazottjának) lehetőséget kell nyújtani a termékek gyors és egyszerű felvitelére, szerkeszthetőségére, illetve amennyiben szükséges, elrejtésére. Egy növényről meg lehet adni egy leírást, amelyben a növény főbb jellemzőit írjuk le, ez teljesen a megrendelőtől függ, illetve ki kell töltenünk a növénnyel kapcsolatban egy táblázatot, amely megadja, hogy milyen fény-, illetve vízigénye van, milyen gyakran kell tápszert adni a növénynek, illetve milyen típusú föld szükséges neki. Ez segítséget nyújt a növény kiválasztásában. Azt viszont nem feltételezzük, hogy a felhasználó minden egyes leírást végig fog olvasni. Célja, hogy gyorsan megtalálja a számára legmegfelelőbb növényt. Ezt a célját egy keresőrendszer fogja segíteni, ami tartalmaz egy egyszerű keresést (növény nevére keresés), illetve egy összetett keresést, amely a bevitt adatok alapján (fényigény, vízszükséglet, stb.…) kiadja a legoptimálisabb növényeket az adatbázisból. A fő funkcionalitás ennek megfelelően a fentiek megvalósítása. Az adminisztrációs felületen a feltöltött termékek közötti keresést egy szűrő könnyíti meg, mely a megadott attribútumok alapján szűri a listát, hogy az adminisztrátor hamarabb találhassa meg az általa keresett növényt, hogy ezután szerkeszteni tudja az adatlapját, vagy törölni. Az adminisztrációs felület további fontos része a megrendelések kezelése. Ezt egy ticket rendszer fogja működtetni, így a felhasználó is nyomon követheti a megrendelési folyamatot a felhasználói felületen: látni fogja, hogy a megrendelt terméket épp beszállítják, vagy akár már postázták is. Amennyiben a felhasználó visszavonja a rendelését, az adminisztrátornak lehetősége van törölni a megrendelést. A program jelszavas védelmet biztosít felhasználók belépésénél, és megakadályozza, hogy jogosulatlan felhasználók elérhessék a különféle jogkörökhöz kötött funkcionalitást.
1.3
Megvalósítás, koncepció
A webes felület kialakításánál az egyik legfőbb koncepciója az egyszerűség volt. Ne kelljen bonyolult procedúrákon átesnie a felhasználónak, mire sikerül megrendelniük egy terméket. Egy másik fontos koncepció, hogy az adminisztrációs felület használatához elég legyen minimális informatikai tudás, ugyanis ha a megrendelőnek nincs megbízott informatikus 4
alkalmazottja (kisebb cégeknél ez általános), vagy ha inkább saját maga szeretné használni, akkor olyan felületet és megoldásokat kell használni, amit egy az informatikához kevésbé értő személy is elsajátíthat. Ezért fontos a logikus felépítés és az átláthatóság, illetve az ismerős és egyértelmű ikonok. A mobil adminisztrációs felületen a fő szempont az egyszerűség és a könnyű kezelhetőség volt. A nagy betűtípusok és beviteli mezők egyszerűsítik a kezelést az érintőképernyős okostelefonok böngészőjében. Az egyszerűség azért fontos szempont egy ilyen felületen, mert több dologra is kell figyelnünk: első sorban a menüpontok könnyű használatára kell koncentrálni. Egy érintőképernyős eszköz sokszor okozhat bosszúságot használójának, amennyiben még nem sajátította el használatát teljes mértékben, sőt gyakran még utána is. A másik szempont pedig a készülék adatforgalma. Napjainkban a legtöbb szolgáltató adatforgalom alapú számlázást használ, így nem mindegy, hogy a készüléknek milyen méretű grafikákat kell letölteniük minden egyes oldalgenerálás során. A design teljes mértékben saját kézzel készült, grafikai szerkesztőprogram felhasználásával. Fő célja a figyelemfelkeltés, és a felhasználóbarát környezet megteremtése. A HTML kód megfelel a weblapoktól általában elvárt szerkesztési normáknak: nem használ frameket, táblázatos szerkezet felépítés helyett a diveket részesíti előnyben. Stíluslapok használatával a külalak elkülönül a kódtól. Az adatbázisnak biztonságosnak, kellően tagoltnak, ám redundánsnak kell lennie az adatok hatékony elérése miatt, azaz ne tároljunk le feleslegesen egy adatot többször, mikor azt elérhetjük összekapcsolásokkal. Ez a helyzet olykor elkerülhetetlen, például a statisztika miatt például le kell tárolnunk az aktuális árat, hogy a későbbi árváltoztatások ne okozzanak hibát visszamenőleg a statisztikában, illetve a megrendelésben. Ekkor szükséges a részben redundáns tárolás. Kódolási szempontból az is fontos lehet, hogy a kód öndokumentáló legyen, hogy továbbfejlesztés esetén a projektet átvevő programozó könnyebben boldoguljon a fejlesztéssel. A következőkben a felhasználói dokumentációban részletesen is bemutatásra kerülnek a program felépítésénél felsorolt elemek, a fejlesztői dokumentációban pedig megtalálható a felhasznált technikai megoldások kifejtése, a részletek a programkóddal és az adatbázissal kapcsolatban.
5
2.
Felhasználói dokumentáció
2.1
A feladat rövid ismertetése
A feladat egy tetszetős online vásárlási felület kialakítása, melyet bárki elérhet és használhat az interneten keresztül. Az ehhez tartozó adminisztrációs felületet a megrendelő (vagy annak megbízottja) használja. A küllem mellett a belbecs is fontos: a megbízható működés és a személyes adatok védelme elsőbbséget élvez. Ez utóbbit jelszavas védelem garantálja, az előbbit pedig a lehető legkülönbözőbb hibákra kiterjedő hibakezelés. A programot gyakorlatilag bárki használhatja, aki rendelkezik alapvető internetes tudással. Az adminisztrációs felület is úgy lett kialakítva, hogy minimális informatikai ismerettel rendelkező egyén is tudja kezelni.
2.2
A használathoz szükséges információk
Feltesszük, hogy a program maga már telepítve van egy webszerverre, és a felhasználó rendelkezik aktív hozzáféréssel ehhez. Mivel az oldal egyelőre nem kerül élesítésre, ezért a fejlesztői tesztverzióját lokális hálózaton érhetjük el. Ehhez a wampserver nevű alkalmazást használom, mely egybefoglalja az Apache, PHP és MySql modulokat. Jelen dokumentációban mindenhol a tesztverzióból származó példák szerepelnek majd. A program egy webes felület, használatához egy tetszőleges modern böngészőre és operációs rendszerre, és természetesen internetkapcsolatra van szükség. A régebbi böngészőverziókkal való kompatibilitás a jellemző felhasználás mellett nem lenne feltétlenül szükséges, ugyanakkor az oldal követi a megfelelő szabványokat, és az utóbbi néhány évben megjelent, elterjedtebb böngészőkkel problémamentesen használható. Ilyen böngészők például az Microsoft Internet Explorer 8-as verziója, a Google Chrome 10-es verziója, vagy a Firefox 3-as verziója mely Linux és Windows alatt is elérhető. A program tesztelése is ezekkel történt, és az adminisztrátor, illetve a felhasználók is nagy valószínűséggel ezt használják munkájuk során.
6
Böngészőhasználat 2011-ben 4% 2% 26% Internet Explorer
25%
Firefox Chrome Safari Opera
43%
1. ábra - Böngészőhasználati statisztika [1]
Minimális hardverkonfiguráció Processzor
Pentium 233 MHz
Memória
64 MB RAM
Tárhely
75 MB tárterület
Videokártya
64 MB video gyorsító
ISDN Internetkapcsolat
Optimális hardverkonfiguráció Processzor
Pentium 500 MHz
Memória
128 MB RAM
Tárhely
75 MB tárterület
Videokártya
128 MB video gyorsító
DSL, vagy gyorsabb Internetkapcsolat
7
Szükséges szoftverek Microsoft Windows Xp,
Operációs rendszer
vagy újabb verzió) Linux Firefox 3
Böngésző
Google Chrome 10 Microsoft Explorer 8. Wampserver
Fejlesztéshez
Xampp
8
Internet
2.3
Telepítési útmutató
A telepítéshez szükségünk lesz egy domain névre, és egy hozzá tartozó tárhelyre, továbbá egy adatbázisra. Amennyiben ezek a feltételek nem adottak, akkor csak helyi szerveren futhat a program, a világhálóra nem kerül ki. Webtárhely esetén a program teljes tartalmát mappástól másoljuk a public_html könyvtárba. Az adatbázis létrehozásához a database.sql fájlban található srcipt futtatása szükséges. Amennyiben csak tesztelni szeretnénk, akkor a database_dump.sql fájl előre feltöltött adatokat tartalmaz. A program root könyvtára tartalmazza a felhasználói felületet, az admin könyvtár az adminisztrációs felületet, az admin mappában található m könyvtár pedig a mobil eszköz böngészője alá gyártott mobil adminisztrációs felületet. Ezek mindegyikében található egy img, egy PARTS és egy FUNCTIONS mappa, mely sorra a megjelenéshez használt képi elemeket, a modulokat, és a modulok által használt függvényeket és osztályokat tartalmazzák. A program független az egyes felületek mappáinak elnevezésétől: például az „admin” mappát átnevezhetjük „novenyadminra”, anélkül, hogy ez bármit befolyásolna a program működésében. Az img, PARTS, FUNCTIONS mappák maradjanak eredeti nevükön.
2.4
A program leírása
Jelen leírások egy lokális szerveren futó verzióra vonatkoznak. A lokális szerver létrehozásához a wampserver alkalmazást használtam. Amennyiben a feltöltött verziót szeretnénk használni, akkor a böngésző címsorában a „localhost” szöveget helyettesítsék oldaluk domain nevével, Pl.: http://localhost/szobanoveny/ helyett www.mydomain.hu/ 2.4.1 Felhasználói felület A felhasználói felületet két módban lehet használni: bejelentkezett, és nem bejelentkezett módban. Amennyiben a felhasználó a regisztráció során általa megadott felhasználónév-jelszó párossal belépett a rendszerbe, lehetősége van a megrendelésre az oldalon keresztül. Bejelentkezés nélkül nem tud a kosárba pakolni, ebből kifolyólag megrendelni sem. A jobb és baloldalon található panelek segítik a felhasználót a tájékozódásban az oldalon.
9
2.4.1.1 Kezdőoldal A kezdőoldal a http://localhost/szobanoveny/ cím alatt érhető el. Elsődleges célja a vásárlójelölt figyelmének felkeltése. Az oldal köszöntőszöveggel kezd, melynek hangvitele személyes, ez szimpátiát ébreszthet az oldalt böngészőben. Figyelemfelkeltés céljára hivatott az üdvözlőszöveg alatt található „ízelítő a terméklistából” funkció, mely minden oldalbetöltésnél más véletlenszerű terméket állít elő egy táblázatban. Ezzel van esély arra, hogy a felhasználó figyelmét megfogja az oldal és kedvet kapjon további kereséshez, mely kétféle módon is elérhető: a Keresés menüpontban, melyet a dokumentáció később fog taglalni, illetve a jobb oldalon elhelyezett panelen található keresőmezővel. A bal oldali panelen a termékek kategóriái sorakoznak menüpontokként. Rájuk kattintva elérhető a webshop, ahol a növények kerülnek listázásra.
2. ábra - Felhasználói felület, nyitó oldal
Amennyiben még nem rendelkezik felhasználói fiókkal, a „Bejelentkezés” gomb alatt található Regisztrációval megteheti.
10
2.4.1.2 Regisztráció A regisztráció bárki számára lehetséges, aki megadja adatait. Az oldal csak olyan adatokat kér a felhasználótól, melyek a sikeres megrendelés, szállítás és kapcsolatfelvétel elengedhetetlen komponensei. A regisztráció önkéntes alapon működik. A jelszóra jelenleg csak annyi megszorítás vonatkozik, hogy léteznie kell, ezt a későbbiekben tovább lehet fejleszteni.
3. ábra - Regisztrációs űrlap
A regisztráció menete a következő:
A felhasználó kitölti a regisztrációs űrlapot
Amennyiben adatait helyesen adta meg (érvényes e-mail cím, megfelelő hosszúságú irányítószám) és az általa választott felhasználónév nem foglalt, létrejön felhasználói fiókja. Továbbfejlesztési lehetőségként az oldal elküldheti a felhasználó e-mail címére az általa megadott adatokat, de ezzel akkor érdemes foglalkozni, ha az oldalt éles használatba helyezzük.
Amennyiben valamelyik mező üresen maradt, vagy hibás, az oldal figyelmezteti a felhasználót és javítás után elkészül a fiók.
Ezután lehetséges a bejelentkezés.
A regisztrációs oldal a bejelentkezés után már nem érhető el, amennyiben a felhasználó belépett, már nincs szüksége a regisztrációs modulra. Kilépés után újra elérhető a regisztráció. A regisztráció során megadott adatokat (a felhasználónév kivételével) az adatmódosítás modul teszi lehetővé a beléptetett felhasználó számára.
11
2.4.1.3 Belépés Amennyiben nem lépett be a felhasználó, egy bejelentkezés űrlap jelenik meg, ahova a felhasználónevét és jelszavát írhatja be. A belépés gombra kattintva az oldal ellenőrzi, hogy a megadott adatok egyeznek-e az adatbázisban eltároltakkal, és amennyiben minden helyes, belépteti, amennyiben valamelyik adatot hibásan adta meg, hibaüzenetet kap: „Hibás felhasználónév, vagy jelszó”. Biztonsági okokból a program nem mondja meg, hogy melyik adat nem egyezik.
4. ábra - Felhasználói panel, bejelentkezés
Amennyiben a bejelentkezés sikeres, az űrlap eltűnik, és helyette a kosár, a megrendelés illetve a felhasználó adatainak módosítására mutató hivatkozás jelenik meg, egy felhasználói menü formájában.
5. ábra - Felhasználói menü
12
2.4.1.4 Adatmódosítás Az adatmódosítás a Felhasználói panelen található „Adatmódosítás” menüpontra kattintva érhető el. Itt a regisztrációs űrlaphoz hasonló űrlapot találunk kitöltve, ennek mezőit lehet módosítani. A „Jelszó módosítása” feliratra kattintva előjön még egy űrlap: a jelszó módosító űrlap, melyben meg kell adni a régi jelszót egyszer és az új jelszót kétszer (a biztonság kedvéért).
6. ábra - Jelszómódosítás űrlapja
2.4.1.5 Főmenü A főmenü minden menüpontja elérhető, amennyiben a felhasználó be van jelentkezve, ám amennyiben nincs, a „Megrendelés” menüpont nem jelenik meg, mivel nincs rá szükség.
7. ábra - Főmenü bejelentkezett állapotban
A menüpontok neveiknek megfelelően a programmal végezhető műveletek a következő csoportokba sorolhatók:
Főoldal: Ugrás a főoldalra, köszöntőszöveg és termékajánló
Hírek: Az adminisztrátor által létrehozott hírek olvasása
Akciók: Az adminisztrátor által meghirdetett kedvezmények kilistázása
Megrendelés: Amennyiben már van termék a kosárban, lehetőség van a rendelés leadására az adminisztrátor felé. Ez a menüpont csak akkor jelenik meg, ha a felhasználó bejelentkezett.
Keresés: A termékek listájának a szűkítésére szolgál. Kétféle módja van: gyorskeresés és összetett keresés. Előbbi a termék nevében keres, utóbbi pedig megadott kritériumok alapján.
Szabályzat: A felhasználó elolvashatja az oldalra vonatkozó szabályzatot, melynek szövege egy korábbi munkám aktualizálása (www.legtomegmero.eu)
Kapcsolat: Az oldal üzemeltetőjének elérhetőségei
13
2.4.1.6 Termékeink panel A panel szerves része az oldalnak: minden egyes generált lapon megjelenik, hogy a felhasználó könnyen eljuthasson a keresett termékig és ne vesszen el könnyen az oldalon. Mivel a lap fő célja az árusítás, az áruknak (jelen esetben növényeknek) könnyen megtalálhatónak kell lenniük. A menü egyegy eleme egy-egy kategóriának felel meg, mely szerint a webshopban elhelyezett termékeket csoportosíthatjuk. Fontos a panel kiemelése az 8. ábra - Termékeink panel
oldalszerkezetből, egy minimális elkülönülés, hogy jobban megragadja az olvasó tekintetét.
2.4.1.7 Webshop modul A növények kilistázása kategóriánként. Ezt a modult a bal oldali „Termékeink” panelből érhetjük el. Táblázatokban jelennek meg a termékek, annyi információval, amennyi elegendő lehet a felhasználó számára a megrendeléshez (termék neve, ára, és a leírás első három mondata). Amennyiben több információra van szüksége a termékkel kapcsolatban, a termék nevére kattintva elérheti a növény adatlapját, ahol további információt szerezhet a növényről. Amennyiben az adott kategóriába az adminisztrátor még nem töltött fel terméket, az „Ebben a kategóriában még nem található termék” felirat jelenik meg.
9. ábra - Termékek listázása bejelentkezés nélkül és bejelentkezéssel
Bejelentkezett állapotban megjelenik a kosárba pakolás funkció. Ehhez egyszerűen meg kell adnia a felhasználónak (egész számként) a felhasználónak, hogy hány darabot szeretne a termékből, majd a
ikonra kattintva a kosárba tudja helyezni. Egyszerre csak egy terméket
tud belerakni a kosarába, tetszőleges mennyiségben. Amennyiben a termék már a kosárban van, a kívánt darabszámmal megnöveli a kosárban levő növény számát, ha még nem volt benne, akkor egy új rekordként szúrja be.
10. ábra - Kosár a felhasználói panelon
14
Bepakolás után a jobb oldali panelon megjelenik, a termék neve, rendelni kívánt darabszáma és a kosár tartalmából összesített fizetendő összeg. Ez a kosár módosításával frissül. 2.4.1.8 Termék adatlapja Bővebb információval szolgál a termékről, amely iránt a felhasználó érdeklődik. A listázáshoz képest olyan addicionális információk jelennek meg, mint a növény fényigénye( ), tápoldat igénye (
), vízigénye (
), illetve az, hogy milyen földtípust igényel a termék, illetve a teljes
termékleírás. A termékek listázásához hasonlóan, amennyiben a felhasználó bejelentkezett a termék képe alatt megjelenik a kosárba pakolás funkció, melynél ismét ki kell tölteni, hogy mennyit szeretne az adott termékből, és a gombra kattintva a termék bekerül a kosárba. Amennyiben a termék már a kosárban van, a kívánt darabszámmal megnöveli a kosárban levő növény számát, ha még nem volt benne, akkor egy új rekordként szúrja be. Amennyiben a termék az akciós termékek között is szerepel, az eredeti ára áthúzva jelenik meg, hogy a felhasználó láthassa az akciózás mértékét. Kosárba pakoláskor az akciós ár érvényesül.
11. ábra - Termék adatlapja
Amennyiben a felhasználó nincs bejelentkezve a kosárba pakolás űrlap helyén egy szöveg jelenik meg a következő felszólítással: „A megrendeléshez kérem, jelentkezzen be!”
15
A leírás alatt egy felirat jelenik meg, mely a termék állapotát mutatja. Egy növény állapota a következő lehet:
Raktáron: Amikor a termék raktáron van, és gond nélkül kiszállítható rendelés után.
Nincs raktáron: Amikor a termék raktárra kerüléséhez várni kell
Átmeneti készlethiány: Amikor a beszerzés nem lehetséges egy bizonyos termékből
Nem rendelhető: Növény esetében például idénynövények esetében történhet: vannak időszakok, amikor bizonyos növényeket nem lehet kapni (pl. a Begóniát csak nyáron).
2.4.1.9 Keresés Amennyiben a felhasználó nem találná az általa megrendelni kívánt növényt lehetősége van keresni a feltöltött termékek között. Ezt kétféle módon teheti meg: a Felhasználói panelen található keresősávval, illetve a Keresés menüponttal. A Keresés menüpont két részre taglalódik
Gyorskeresés
Összetett keresés
A keresési modulok közötti váltás egyszerű: a gyorskeresésnél az „Összetett keresés”, az összetettnél a „Gyorskeresés” feliratra kell kattintani. Alapértelmezetten a Gyorskeresés modul töltődik be a Keresés menüpontra kattintva, mivel azt szeretnénk, ha a felhasználó gyorsan találná meg azt, amit szeretne. A gyorskeresés több szó esetén összetartozó részként kezeli a keresési kritériumokat. 2.4.1.9.1 Gyorskeresés A gyorskeresés modult két helyről érheti el a felhasználó: a jobb oldalon található felhasználói panelről, és a keresés menüpontból. Mindkét esetben a keresés a termék nevében fogja keresni az egyezéseket. Az eredményeket a webshoppal azonos módon listázza ki.
12. ábra - Keresés a Felhasználói panelon
16
2.4.1.9.2 Összetett keresés Az összetett keresés lehetőséget nyújt összetettebb keresési kritériumok szerinti szűrésre. Megadhatjuk többek közt, hogy maximum milyen víz-, vagy fényigényű növényt keresünk, anélkül, hogy a nevét tudnánk. Ez akkor is hasznos, ha nem kifejezetten egy növényt keresünk, hanem bizonyos feltételeknek megfelelőt.
13. ábra - Összetett keresési űrlap
Azokat a mezőket, amelyeket nem szeretnénk, hogy a keresésben részt játsszanak, egyszerűen hagyjuk üresen. 2.4.1.10 Akciók A keresés egy speciális fajtája: azokat a termékeket listázza ki, melyeknek a rendszer adminisztrátora kedvezményes árat adott. Az akciós termék eredeti ára áthúzva jelenik meg, hogy a felhasználó láthassa az akciózás mértékét. Kosárba pakoláskor az akciós ár érvényesül. 2.4.1.11 Kosár rendezése Ez a modul két menüpontból is elérhető: a Megrendelés menüpontból, illetve a Felhasználói panelen található Kosaram menüpontból. A Kosár rendezése és a megrendelés azért lett összevonva, hogy mielőtt a felhasználó elküldené megrendelését még lehetősége legyen áttekinteni és rendeznie a megrendelt termékek listáját.
14. ábra - Kosár rendezése
17
A felhasználó a kosárba pakolt elemekkel két műveletet végezhet:
A
gombra kattintva eltávolíthatja a terméket a kosárból
A
gombra kattintva pedig eggyel csökkentheti a termék elemszámát a kosárban.
Amennyiben egy termék van behelyezve és erre a gombra kattint a felhasználó, hatása megegyezik a
gombéval, így nem adunk esélyt negatív elemszámra.
2.4.1.12 Megrendelés Ez a modul két menüpontból is elérhető: a Megrendelés menüpontból, illetve a Felhasználói panelen található Kosaram menüpontból. Egy egyszerű űrlapot kell kitöltenie a felhasználónak: milyen szállítási módot szeretne, illetve el kell fogadnia a vásárlási feltételeket, melyeket a „Szabályzat menüpont alatt talál. Megrendelés után a felhasználó kosara kiürül.
15. ábra - Megrendelő űrlap
2.4.1.13 Megrendeléseim A Felhasználói panel „Megrendelésim” menüpontjában a felhasználó nyomon követheti megrendelései állapotát. Változtatni itt már nem tud semmin, viszont megspórol magának néhány telefonhívást, és az adminisztrátornak is időt takarít meg ez a funkció, ugyanis nem kell az megrendeléseik állapota után érdeklődő felhasználók telefonjaira válaszolnia. A megrendelések állapotait a 2.4.2.9. fejezet taglalja.
16. ábra - Felhasználó függő megrendelései
18
2.4.2 Adminisztrációs felület Az adminisztrációs felület legfőbb feladata, hogy kezelje a felhasználói felületen megjelenő adatokat, kezelje a megrendeléseket és a felhasználókat. 2.4.2.1 Belépés A http://localhost/szobanoveny/admin címen érhető el az adminisztrációs felület, ahol a nyitóoldal fog minket fogadni egy navigációs panellel, és egy figyelmeztetéssel, hogy jelentkezzünk be.
17. ábra – Belépési panel
Ezt a képet látjuk, amikor először érkezünk erre az oldalra, ha hosszú időn keresztül voltunk inaktívak, vagy ha az adminisztrációs felületen a Kijelentkezés feliratra kattintunk. Írjuk be a felhasználónevünket és a jelszavunkat a megfelelő mezőbe, majd kattintsunk a Bejelentkezés gombra. Figyeljünk arra, hogy mind a felhasználónév, mind a jelszó mező kis-, és nagybetű érzékeny. Amennyiben elírtuk volna a felhasználónév illetve a jelszó mezőt, hibaüzenetet kapunk a következő felirattal: „Hibás felhasználónév vagy jelszó!”. Biztonsági okokból nem mondjuk meg, hogy a jelszót, vagy a felhasználónevet rontotta-e el a felhasználó. Sikeres belépés esetén megjelenik az adminisztrációs felületének menüsora, illetve betöltődik az első oldal is: a termékek listázása, továbbá a bal oldali navigációs báron egy kényelmi funkció: az utolsó három megrendelőnk felhasználói profiljára mutató link.
19
2.4.2.2 Főmenü A banner alatt találjuk a főmenüt, mely csak akkor jelenik meg, ha a bejelentkezés sikeres volt.
18. ábra – a főmenü
A menüpontok neveiknek megfelelően a programmal végezhető műveletek a következő csoportokba sorolhatók:
Feltöltés menüpont: Egy vagy több termék feltöltése
Akciók menüpont: Meglevő akciók szerkesztése illetve törlése.
Megrendelések menüpont: Megrendelések megtekintése, archiválása. A menüpont melletti szám megmutatja, hogy hány eddig nem „Felvett” állapotú megrendelés van, így a menüpont megnyitása nélkül láthatják, hogy beérkezett-e új kérés.
Hírek menüpont: Hírek létrehozása, szerkesztése és törlése.
Felhasználók menüpont: Regisztrált felhasználók közötti keresés, illetve felhasználói profiljuk megtekintése, törlése.
Statisztika menüpont: Adott hónapra vonatkozó termékfogyás, és bevétel lekérdezése.
Saját adatbázis: Funkcióját tekintve megegyezik a Listázás menüponttal, azzal a különbséggel, hogy itt azokkal a termékekkel végezhetünk műveleteket, melyek nem láthatóak a felhasználói felületről.
20
2.4.2.3 Listázás Ez a modul a leggyakrabban használt modul a webshop feltöltése után, így ez az oldal töltődik be elsőként a belépés után. A listázás modul az összes terméket kilistázza oldalakra bontva. A modul a következő főbb részeire bomlik:
Szűrés
Termékek listája
19. ábra - a listázás oldala
A könnyű kezelés érdekében az utolsó három megrendelő adatlapjára mutató link minden oldal szélén megjelenik. A termékek listája tartalmazza a szűrési feltételeknek megfelelő termékeket. Amennyiben a szűrő űrlap nincsen kitöltve, minden terméket kilistáz. Ha üres szűrőmezővel szűrünk, akkor is hasonló eredményt érhetünk el. 2.4.2.3.1 Szűrés
20. ábra - a szűrő
Az oldal tetején egy szűrő van, amely kitöltésével szűkíteni tudjuk a kilistázott termékek listáját. A mezők kitöltése értelemszerűen történik. A szűkítés a „Szűrés” gombra való kattintás után történik meg.
21
2.4.2.3.2 Termékek listája Miután megtaláltuk a terméket, amellyel dolgozni szeretnénk, négy lehetőségünk van:
A
gombra kattintva törölhetjük a terméket
A
gombra kattintva új, kedvezményes árat állíthat be a terméknek. Amennyiben
már van beállítva rá ár, nem enged újat létrehozni, arra kéri az adminisztrátort, hogy egy meglévő akciót módosítson.
A
A
gombra kattintva elérhetjük a termék adatlapját és szerkeszthetjük azt. gombbal áthelyezhetjük a saját adatbázisba, ezzel a webshopban nem fog
megjelenni a termék, viszont törölnünk sem kell. 2.4.2.4 Termék adatlapjának szerkesztése
21. ábra - Termék adatlapjának szerkesztése
Ezen az oldalon az összes mezőt módosíthatjuk. A módosítások alkalmazásához a „Módosítás” gombra kell kattintani. Amennyiben a „Kis kép” és a „Nagy kép” mező üresen marad, ez nem jelent majd változtatást: továbbra is a régi kép marad a termék adatlapján. Amennyiben a kép törlése mellett döntenénk, akkor képként a felhasználói felület img mappában található ures.png fájlt adjuk meg a programnak képként.
22
2.4.2.5 Akció létrehozása A termékek listázása modulból érhetjük el ezt a funkciót. Felülete azonos az Akciók moduléval. Új kedvezmény létrehozásakor az alábbi űrlap látható:
22. ábra - Akció létrehozása
2.4.2.6 Akciók Az akciók menüpontban lehetőség van azon termékek kedvezményes árának módosítására és törlésére, melyeket a felhasználó már a Listázás modulban leértékelt. A találatok táblázatban jelennek meg.
23. ábra – akciók
Ezen az oldalon két lehetőségünk van:
A
gombra kattintva a leértékelés törölhető
A
gombra kattintva a leértékelés mértéke szerkeszthető
Kedvezmény szerkesztésekor az alábbi űrlap jelenik meg:
24. ábra - Akció szerkesztése
Akció létrehozásakor, illetve szerkesztésekor az egyetlen, amire figyelni kell, hogy a kedvezményes ár kisebb legyen, mint az eredeti, különben a „Hiba az akcióban, az akciós érték nem kisebb, vagy egyenlő, mint a régi érték”. Az egyenlőséget marketing célokból engedélyezi a program.
23
2.4.2.7 Feltöltés A feltöltés modulra kattintva a program megkérdezi a felhasználót, hogy hány terméket szeretne egyszerre feltölteni.
25. ábra - Feltöltés, első lépés
Ezután a következő űrlapo(ka)t kapjuk, pontosan annyit, amennyit az első lépésben a felhasználó megadott.
26. ábra - Feltöltés, második lépés
Amennyiben a felhasználó rájönne, hogy több űrlapot generált, mint amennyire szüksége lenne, egyszerűen csak üresen kell hagyni és úgy a „Feltöltés” gombra kattintani. Ha egy terméknek nincs „Köznyelvi név” megadva, akkor az nem kerül feltöltésre. A láthatóság mezőnél, ha a termék „Látható”, akkor egyből megjelenik a webshopban, amennyiben „Nem Látható”, akkor a saját adatbázisba kerül be, elrejtve a felhasználói felületről. Termék feltöltésénél az összes mező kitöltése javallott.
24
2.4.2.8 Megrendelés Az oldal kulcsfontosságú modulja. A táblázatban félkövér jelölést kapnak azok a megrendelések, melyek állapota sorra „Függő”, azaz az adminisztrátor még nem jelölte meg „Felvett”-ként. A megrendelés menüpontban azok a megrendelések tartoznak össze, melyek adott felhasználótól adott napon adott időpontban érkeztek a rendszerbe.
27. ábra – Megrendelések
A
gombra kattintva archiválhatjuk az összes, az idő szerint csoportba foglalt megrendelést,
de csak akkor, ha állapota „Szállítva”. 2.4.2.9 Felhasználó adatlapja A felhasználó adatlapján találhatóak személyes adatai úgy, mint név, cím, irányítószám, e-mail cím és telefonszám. Ezek a legfontosabb (és legszükségesebb) információk, melyeket egy felhasználóról le kell tárolunk ahhoz, hogy a megrendelés sikeres legyen, a felhasználót pedig el tudja érni az oldal adminisztrátora. Az adatok alatt találhatóak a felhasználó megrendelései. A megrendelések utolsó három oszlopa teszi lehetővé a megrendelés rendezését. Az „Állapot” legördülő menü teszi lehetővé a termék állapotának módosítását.
28. ábra - Felhasználó adatlapja
25
Egy megrendelés állapotai a következők lehetnek:
Függő: Abban az esetben függő egy megrendelt termék állapota, amennyiben az adminisztrátor még nem jelzett vissza a felhasználónak, hogy a rendelését rögzítették. Minden termék kezdetben erről az állapotról indul.
Felvéve: Az adminisztrátor ezzel jelzi a felhasználónak, hogy rendelését rögzítette, a beszerzés folyamat alatt van. Továbbfejlesztési lehetőségként itt a rendszer küldhet egy e-mailt a felhasználónak, hogy rendelését rögzítettük.
Raktáron: Egy termék akkor kapja ezt az állapotot, ha már raktáron van, és hamarosan szállításra kerül.
Szállítva: Az archiválás előtti állapot: akkor kapja egy termék, ha már kiszállították, vagy kiszállítás alatt van.
Ez a ticket rendszer ahhoz szükséges, hogy a felhasználó a felhasználói felületen tudja követni, hogy megrendelése hol tart. A
gombra kattintva az adminisztrátornak lehetősége van archiválni a megrendelést, de csak
akkor, ha a termék állapota „Szállítva”. Az archivált megrendelésekből készül majd a statisztika.
26
2.4.2.10 Hírek A hírek modulban 3 műveletet hajthatunk végre:
Új hírt tölthetünk fel
Meglevő hírt szerkeszthetünk
Meglevő hírt törölhetünk
A hírekkel az adminisztrátor felhívhatja a felhasználó figyelmét új termék érkezésére, akciós termékre, illetve egyéb, az oldallal kapcsolatos információra. Az adminisztrátor így kommunikálhat a felhasználóval.
29. ábra - Hírek modul
2.4.2.10.1 Új hír feltöltése Hír feltöltésénél egy űrlapot kell kitöltenünk, melyben megadjuk a hírhez tartozó adatokat. Az adatok kitöltése értelem szerűen történik. A „Link” mezőbe annak az oldalnak a címsorból kimásolt hivatkozását kell beillesztenünk, amelyik oldalra (vagy oldalunkra) szeretnénk, hogy a hír mutasson. Kitöltése opcionális, akárcsak a „Kis kép” mezőé.
30. ábra - Új hír feltöltése
27
2.4.2.10.2 Meglevő hír szerkesztése A szerkesztés során az előző pontban taglalt táblázat értékeket kap, korábban kitöltött adatok alapján. A Kép mező kitöltésének folyamata megegyezik a „Termék adatlapjának szerkesztése” pontban taglalttal, azaz amennyiben nem töltjük ki a mezőt, a régi kép marad érvényben.
31. ábra - Meglevő hír szerkesztése
2.4.2.11 Felhasználók A felhasználók modul egy keresés. Kezdetben a keresőmező üres, ám amint az adminisztrátor elkezd feltételt írni a mezőbe a lista szűrésre kerül az oldal frissítése nélkül. Ez segít a megrendelők gyors megtalálásában. Mindegy, hogy felhasználónevet, e-mail címet, vagy telefonszámot kezd el beírni, a szűrő mindegyikre működik.
32. ábra - Felhasználók modul
Amennyiben az adminisztrátor az
gombra kattint, lehetősége van a felhasználó törlésére. A
felhasználói névre kattintva elérhető a felhasználó adatlapja, melyet a 2.1.4.9-es pont taglal. 2.4.2.12 Statisztika A statisztika modulban egy hónapra vonatkozó termékfogyás, illetve havi bevétel kérdezhető le. Értelemszerűen ezért meg kell adnunk, hogy melyik év melyik hónapjára vonatkozó statisztikákra vagyunk kíváncsiak. Az űrlap az évek múlásával nem szorul frissítésre, ugyanis az aktuális évtől számított 3 évre visszamenőleg képes statisztikát készíteni, természetesen csak abban az esetben, amennyiben az adminisztrátor archivált megrendelést abból az évből.
33. ábra - Statisztika, első lépés
28
Az űrlap kitöltése után a „Számold” gombra kattintva megkapjuk a kért hónapról szóló összegzést.
34. ábra - Statisztika, végeredmény
Amennyiben az adminisztrátor olyan hónapról kérne le statisztikát, amiről nincs adat, a „A kért hónapról nem tudunk statisztikával szolgálni.” hibaüzenet fogadja. 2.4.2.13 Saját adatbázis A „Saját adatbázis” modul lehetőségei gyakorlatilag megegyeznek a „Listázás” moduléval, azzal az egy kivétellel, hogy a saját adatbázisban levő termékhez nem lehet kedvezmény létrehozni.
35. ábra - Saját adatbázis modul
A
gombra kattintva törölhetjük a felhasználó szeme elől elrejtett terméket
A
gombbal szerkeszthetjük az elrejtett termék adatlapját
A
gombbal visszahelyezhetjük a webshopba, így lehetővé téve a felhasználó
számára a termék megrendelését.
29
2.4.3 Mobil adminisztrációs felület Ez a felület azért jött létre, hogy az adminisztrátornak ne legyen szüksége számítógépre ahhoz, hogy néhány alapvető modult el tudjon érni az adminisztrációs felületről. A mobil felületet a http://localhost/szobanoveny/admin/m címen lehet elérni. Helyi hálózaton való tesztelése a http://www.testiphone.com/ oldalon történt. 2.4.3.1 Bejelentkezés A főoldalon a számítógépes verzióból ismert bejelentkező képernyő fogadja az adminisztrátort, mely kitöltése és a „Belépés” gombra való nyomás után eljut a kezelőfelületre.
36. ábra - Mobil felület, iPhone
2.4.3.2 Menü Az egyszerűsített felület két menüpontot tartalmaz: „Megrendelések” és „Felhasználók”. A Megrendelések melletti számláló itt is azon az elven működik, mint a hagyományos felületen. A menüpontok nagyobb betűtípust kaptak, hogy könnyebben lehessen rájuk kattintani az érintőképernyős készüléken.
37. ábra - Mobil felület, menü
30
2.4.3.3 Megrendelések Belépés után a megrendelések modul fogadja az adminisztrátort. A mobil felületből kikerült az archiválás művelet, ez nem olyan sürgős, hogy telefonról kelljen elintézni. A felhasználónévre kattintva itt is a felhasználó adatlapját érhetjük el.
38. ábra - Mobil felület, megrendelések
2.4.3.4 Felhasználó adatlapja Funkciójában az adminisztrációs felület „Felhasználó adatlapja” moduljának felel meg. Ahogy a „Megrendelések”, a „Felhasználók” modul sem tartalmazza az archiválás műveletet. Táblázatát kicsit módosítani kellett, hogy alkalmazkodjon az okostelefonok képernyőjéhez, amely átlagosan 320 pixel.
39. ábra - Mobil felület, Felhasználók
31
Erről a lapról az adminisztrátor lekérdezheti a megrendelő címét, vagy telefonszámát, amennyiben ez nem állna rendelkezésre szükség esetén (például kiszállítás során), ez könnyű, egyszerű és gyors módja a felhasználói adatok kinyerésének. A megrendelés állapotának változtatására itt is van lehetőségünk.
2.4.3.5 Felhasználók Ez a menüpont funkciójában megegyezik az adminisztrációs felület „Felhasználók” moduljával, azzal a különbséggel, hogy itt felhasználónévre, illetve telefonszámra tudunk szűrni.
40. ábra - Mobil felület – Felhasználók
A felhasználónévre kattintva ezen a felületen is a felhasználói profilt érhetjük el.
32
3.
Fejlesztői dokumentáció
3.1
A program leírása
A program fejlesztése Windows 7 operációs rendszer alatt történt. A szervernek, adatbázisszervernek és a PHP scriptnyelvnek (http://ww.php.net/) is létezik több operációs rendszerre való kiadása, így elméletben nincs akadálya annak sem, hogy a programot GNU/Linux operációs rendszer alatt használjuk. Jelen dokumentációban csak a fejlesztő gépen történő használat kerül leírásra. A lokális szerverhez a Wampserver alkalmazást használtam, mely egyesíti az Apache, a MySql és a PHP futtatókörnyezetet egyetlen programba. (www.wampserver.com) A Wampserver alkalmazásban az Apache 2.2-es verziója a kiszolgáló webszerver. A használt PHP srcipt nyelv verzióbeli eltéréseket mutat: A PHP 5-ben több beépített ún. „kényelmi” függvényt kínál, melyek a 4-es verzióban nem szerepelnek, így figyelni kell arra, hogy üzembe helyezéskor a webszerver a PHP 5-ös verzióját használják. Szerencsére manapság már a legtöbb szolgáltatónál a PHP 5-ös verziója fut. Az adatbázisszervert a MySQL 5.5.8-as verziója szolgáltatja, itt a verziótól függetlenül tudunk dolgozni, ugyanis nem volt szükség azokra a kényelmi funkciókra, amelyeket az adatbázisszerver új verziója nyújt. Használok továbbá egy adatbázis-kezelő modult, melyet egyik egyetemi hallgatótársam bocsátott rendelkezésemre a program kényelmesebb kezeléséhez. Ez a BNXDB modul (bnxdb.inc.php), mely helyettesíti a natív PHP-SQL kapcsolatot. Ez problémát okozott a mysql_real_escape_string() függvény használatában, ugyanis ennek a függvénynek aktív natív kapcsolatra van szüksége. Habár nem használom másra, csak a rendszer biztonsági lekezelésére, egy segédkapcsolatot is nyitottam natív SQL kapcsolattal. Mivel az oldal írásának célja, hogy egyszer kikerüljön a webre, ezért kitűntetett figyelmet kell szentelni az adatban eltárolt jelszavak és személyes adatok védelmének.
3.2
Telepítés
Feltéve a kellő szoftverkörnyezet meglétét, a program telepítése két részletből áll: az adatbázis létrehozása és a PHP file-ok elérhetővé tétele. Az utóbbi lépés nem jár különösebb nehézségekkel, ha működik a PHP támogatás a webszerverünkön. Ekkor elegendő egy, a
33
webszerver számára elérhető alkönyvtárba bemásolni a mellékelt PHP file-okat (a program belső könyvtárstruktúráját megőrizve), és máris elérhetjük az oldalt az adott helyen. Az oldal működése nem függ az alkönyvtár nevétől. Wampserver használata esetén semmit sem az alkalmazáson kívül semmit sem kell telepíteni, hiszen tartalmazza az Apache, a MySQL telepítését is. Szolgáltatónál bérelt tárhely és domain páros esetén nincs szükség semmilyen telepítésre, ugyanis ezt a szolgáltató adminisztrátorai már megtették. A továbbiakban ezeknek megfelelően feltesszük, hogy a program futtatásához kellő szoftverek telepítve és megfelelően konfigurálva vannak. A program által használt adatbázis létrehozásához a program részét képező database.sql importálására van szükségünk, melyet a DATABASE mappában találhatunk meg. Amennyiben nincs
lehetőségünk
általunk
elnevezett
adatbázis
létrehozására,
használjuk
az
existing_database.sql fájlt, és amennyiben csak tesztelni szeretnénk a rendszert a database_dump.sql fájlt. A phpMyAdmin felületen ezt az importálás ikonra kattintva tehetjük meg. Amennyiben az adatbázis-hátteret is létrehoztuk és a PHP file-okat is a megfelelő helyre másoltuk, máris megkezdhetjük a használatot, belépve az alapértelmezett felhasználói illetve adminisztrátori felhasználóval. (A felhasználónév és az induló jelszó a fenti SQL file-ban található.)
3.3
Adatbázis háttér
3.3.1 A telepítő srcipt A telepítő srcipt első parancsaként létrehozza a webshop nevű adatbázist, és az alapértelmezett illesztést és karakterkészletet latin2-re állítja. A generáló script a következő sorrendben hozza létre az adatbázis-hátteret:
Táblák: Ebben a lépésben jön létre maga a fő struktúra, a program által használt táblák (a vonatkozó megszorításokkal együtt) és az esetleges induló táblabejegyzések. (Bővebben lásd a 3.4.2. pontban.)
Idegen kulcsok: Ebben a lépésben a fenti struktúrára vonatkozó további megszorítások jönnek létre. A program elvileg gondoskodik róla, hogy az adatbázisig ne jusson el "hibás" utasítás, de az itt létrehozott megszorítások biztosítják, hogy a konzisztencia programhiba esetén se sérüljön. Minden olyan helyen, ahol egy másik táblából 34
származó értékek szerepelhetnek csak egy adott oszlopban, idegen kulcs került megadásra az adott tábla megfelelő oszlopára. 3.3.2 Táblák A program által használt táblák logikailag a következő csoportokba tartoznak
Felhasználók: adminisztrátor és felhasználók táblája. Csak utóbbiakról tartunk nyilván személyes adatukat, az adminisztrátorokról csak a felhasználónevüket és a jelszavukat tároljuk le.
Termékek: A termékek egységbe tartozik a termékek táblája illetve a termékekre kiszabott kedvezmények táblája.
Megrendelések: Az ebbe a csoportba tartozó táblák a megrendelések nyomon követését, illetve a megrendelések alapján történő statisztikák létrehozását tartalmazzák.
Hírek: A hírek modul által használt táblák.
Segédtáblák: A megrendelések és a termékek állapotait tartalmazó segédtáblát jelenti.
A következő, a fenti csoportoknak megfelelő sorrendben készült, részletes táblaleírásokban az egyszerűség kedvéért a továbbiakban elhagyjuk az oszlopok és táblák nevei körül elhelyezett idézőjeleket. Néhány használt konvenció, technikai megoldás:
A táblák elnevezése egyes számban az általa tartalmazott dolog nevéről történik angol nyelven. Például: order, user, product táblák.
Az elsődleges kulcs mindig a tábla neve mellé alulvonással kapcsolt id. Például order tábla elsődleges kulcsa: order_id.
A boolean típusú mezőket 1 biten eltárolt integerekkel reprezentáljuk, ahol 0 a hamisat, 1 pedig az igazat reprezentálja. Az integer azért jó választás, mert ez bármilyen más adatbázisba való implementáláskor rendelkezésünkre áll ez a típus.
A táblák összefüggéseit a következő diagram foglalja össze:
35
41. ábra - Táblázatok Egyed/Kapcsolat diagramja
3.3.2.1 User tábla Felépítés Oszlop neve user_id username password name city address zip email phone
Típus int(32) varchar(20) varchar(32) varchar(130) varchar(70) varchar(150) int(4) varchar(200) varchar(15)
Leírás felhasználó azonosítója felhasználónév jelszó felhasználó teljes neve számlázási adatok: város számlázási adatok: cím számlázási adatok: irányítószám e-mail cím telefonszám
Megszorítások NOT NULL primary key NOT NULL NOT NUL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL
A táblához nem tartozik idegen kulcs. A tábla készítése során néhány alapérték került beszúrásra. Ezeket lásd a generáló SQL fileban. Leírás A user táblában tároljuk a felhasználók által megadott személyes adatokat, illetve a felhasználónevet és a jelszót. A jelszó beszúrás előtt md5 kódolást kap, hogy a felhasználó jelszavát még a mező kiíratása esetén se lehessen visszafejteni. 3.3.2.2 Admin tábla Felépítés Oszlopnév admin_id username password
Megszorítások NOT NULL primary key NOT NULL NOT NULL
A táblához nem tartozik idegen kulcs. A tábla készítése során néhány alapérték került beszúrásra. Ezeket lásd a generáló SQL fileban. Leírás Az admin táblában az adminisztrátor(ok) felhasználónevét és jelszavát tároltuk el a hagyományos felhasználóktól elkülönítve. A jelszó itt is md5-ös kódolást kap, mielőtt bekerülne a táblázatba.
37
3.3.2.3 Product tábla Felépítés Oszlopnév Típus product_id int(12) p_name varchar(200) p_alias varchar(200) description varchar(1000) category varchar(35) tags varchar(1000) price int(6) purchase_price int(6) is_visible int(1) state int(3) thumb varchar(200) photo varchar(200) A táblához tartozó idegen kulcsok:
Leírás termék azonosítója termék latin neve termék köznyelvi neve termék leírása termék kategóriája a termékhez tartozó címkék termék ára termék beszerzési ára termék láthatósága (0 vagy 1) termék állapota termék indexképe termék képe
Megszorítások NOT NULL primary key NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL
product-state: a state tábla state_id oszlopai közül veheti értékeit
Leírás A product tábla tárolja a termékekről letárolt adatokat: nevüket, latin nevüket, leírásukat, kategóriájukat, árukat, beszerzési árukat, láthatóságukat, állapotukat, index képüket, illetve képüket. A tags mező tárolja a növény tulajdonságait: vízigény, fényigény, tápoldat igény és földtípus. 3.3.2.4 Discount tábla Felépítés Oszlopnév discount_id product_id
Típus int(10) int(12)
amount
int(6)
Leírás kedvezményazonosító a termék azonosítója, melyhez a kedvezmény tartozik
Megszorítások NOT NULL primary key NOT NULL NOT NULL
A táblához tartozó idegen kulcsok:
discount-product: a product tábla azonos nevű oszlopából veheti értékét.
Leírás A discount tábla tartalmazza a termékekhez csatolt kedvezményes árakat. Amennyiben egy termékhez nem tartozik kedvezmény, akkor ez a tábla nem tartalmazza.
38
3.3.2.5 Order tábla Felépítés Oszlopnév order_id who what how_much price when time state shipping
Típus int(10) int(10) int(10) int(3) int(6) date time int(3) varchar(20)
Leírás a megrendelés azonosítója a megrendelő azonosítója a megrendelt termék azonosítója a megrendelt termék darabszáma a termék egységára megrendelés dátuma megrendelés ideje megrendelés állapotának azonosítója kiszállítás módja
Megszorítások NOT NULL primary key NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL
A táblához tartozó idegen kulcsok:
order-user: az order tábla who mezeje a user tábla user_id oszlopából veheti fel értékeit. order-product: az order tábla what mezeje a product tábla product_id oszlopából veheti fel értékeit. order-state: az order tábla state mezeje a state tábla state_id oszlopából veheti fel értékeit.
Leírás Az order tábla tartalmazza a megrendelés-bejegyzéseket. Feldolgozás során felhasználó, dátum és az idő óra-perc része adja a csoportosítási alapot. A termék egységárát azért kell eltárolni, mert nem lehet tudni, hogy a megrendelés pillanatában fennálló kedvezmény fennáll-e abban az időpontban, amikor az adminisztrátor a rendelést felveszi. A megrendeléskori állapotokat kell fenntartani. Ez az ár szerepet fog játszani később, az archívum táblánál is. 3.3.2.6 Archive tábla Felépítés Oszlopnév archive_id who what price how_much when time
Típus int(11) int(11) int(11) int(6) int(3) date time
Leírás archívum bejegyzés azonosítója megrendelő azonosítója a termék azonosítója termék megrendeléskori ára darabszám megrendelés dátuma megrendelés ideje
39
Megszorítások NOT NULL primary key NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL
A táblához tartozó idegen kulcsok:
archive-user: az archive tábla who mezeje a user tábla user_id oszlopának értékeit veheti fel archive-product: az archive tábla what mezeje a products tábla product_id oszlopának értékeit veheti fel
Leírás Az archívum táblában jelenleg több adatot tárolok le, mint amennyire szükségünk van, de továbbfejlesztési szempontokból a megrendelőt és a megrendelés pontos idejét is letároltam, hogy egy későbbi modul a már archivált megrendelések olvasására is lehetőséget adjon (például garanciális reklamációval kapcsolatban). Jelenleg ez nem indokolt, ugyanis növényekre nem vállalnak garanciát, de amennyiben tápoldatok, vagy egyéb termékek kerülnek be az adatbázisba egy bővítés során, szükség lehet a modulra. 3.3.2.7 News tábla Felépítés Oszlopnév news_id header text photo link when
Típus int(5) varchar(150) varchar(1000) varchar(150) varchat(200) date
Leírás hír azonosítója hír fejléce hír szövege hírhez tartozó kép link, amire a hír mutat a fejlécben szereplő dátum, amikor a hír készült A táblához nem tartoznak idegen kulcsok
Megszorítások NOT NULL primary key NOT NULL NOT NULL NULL NULL NOT NULL
Leírás A hírek tábla külön áll az összes többitől: ezen keresztül tud kommunikálni az adminisztrátor a felhasználókkal. A link helyére termék adatlapjára, webshopbeli hivatkozást, vagy társoldalra való hivatkozást helyezhet
40
3.3.2.8 State tábla Felépítés Oszlopnév Típus state_id int(3) state_name varchar(30) A táblához nem tartoznak idegenkulcsok
Leírás állapotazonosító állapot neve
Megszorítás NOT NULL primary key NOT NULL
Leírás A state táblát két másik tábla használja: az order és a product tábla. Mindkét tábla esetén másmás azonosítók jelentik a rájuk vonatkozó állapotokat
41
3.4
Támadásvédelem
3.4.1 SQL Injection Ez a módszer bárhol alkalmazható egy adatbázis feltöréséhez, illetve tönkretételéhet, ahol űrlapból feldolgozott adatokkal dolgozunk az adatbázison és a programozó óvatlan volt. A módszer annyiból áll, hogy kihasználja a PHP nyelv speciális karaktereit (ilyen például a -- vagy a '). Amennyiben ezeket nem védjük le, és a lekérdezést így futtatjuk, megváltoztathatja a lekérdezés működését. Vegyünk egy példát, hogy jobban érthető legyen a módszer: a felhasználó bejelentkezésekor használt lekérdezést. [2] $query = 'SELECT * FROM USER WHERE username \''.$_POST['username'].'\' AND password=\''.md5($_POST['password']).'\''; Ezt futtatva visszakapjuk a bejelentkezés kérvényező adatait. Ám amennyiben a $_POST['username']
és
a
$_POST*'password'+
nincs
levédve
például
a
mysql_real_escape_string() függvénnyel, könnyen bejuthat olyan felhasználó is, aki egyébként nem lenne jogosult a belépésre. Ha az űrlapban felhasználónévnek a következőt írjuk „plenyus'--”, akkor máris plenyus felhasználó fiókjában találjuk magunkat. Igaz, már az adatbázist is úgy alakítottam ki, hogy ne legyen könnyű dolga annak, aki fel akarja törni a rendszert, így az adminisztrátor részéhez nehezebb hozzáférni. Az illetéktelen belépés a következőképpen zajlik: a ' karakterrel a támadó lezárja a $query változónak adott stringet, és a – karakterekkel pedig megjegyzéssé teszik a lekérdezés hátralevő részét, így a lekérdezés értéke: 'SELECT * FROM user WHERE username = 'plenyus'. A támadó így kivédte a felhasználó jelszavának ellenőrzését. Innentől hozzáfér a felhasználó személyes adataihoz, illetve a nevében rendelhet. Mivel a PHP nyelv nem erősen típusos, ezért ebből akadó támadásokkal is szembe kell néznünk. A felhasználói felületen típuskezelésből adódó támadást egyedül a product.php modulnál kaphatunk, mely a termék adatlapja. Ezt a támadást az intval() függvénnyel tudjuk kivédeni, mely meggátolja az illetéktelen felhasználót a számként használt címsorbeli változó (int) más típusként (string) történő használatát.
42
3.5
A PHP-s program
Az adatbázis háttér megismerése után tekintsük át a PHP scriptnyelven írt programot magát. A programról általánosságban elmondható, hogy a menüponthoz tartozó műveletek egy PHP file-ban találhatók meg, néhány segédfájl felhasználásával. Felületekre lebontva az egyes PHP file-ok az alábbi műveleteket valósítják meg. 3.5.1 Megvalósítási terv Mindhárom felületen egy index.php fogja kezelni az oldalt és a modulokat a következő módon:
az index oldal lekéri a címsori változóként definiált stringet, és ettől függően húzza be a megfelelő modult egy divbe. Szükség lesz két adatbázis kapcsolatra: az egyikre a lekérdezések futtatása, a másik pedig a mysql_real_escape_string függvény futtatásához, a nagyobb biztonság elérése érdekében. Szükség van session változókra, amik egy felhasználó bejelentkezése során élnek. Az egyik divben a felhasználó navigációs felülete lesz, ahol a kosár tartalma is meg fog jelenni. Szükség lesz egy kosár osztályra, ami a megfelelő műveleteket valósítja meg. Hogy a kóddal később is dolgozni lehessen, lehetőség szerint minél több függvényt kell használni. Ezeket egy külön mappában kell tárolni a könnyebb elérhetőség céljából. A termékek megrendelésének megoldása történhet nested table-lel is, de egyszerűbb és hatékonyabb, ha minden egyes termék megrendeléséhez új adatbázis bejegyzés tartozik. Ami a külalakot illeti: a designnak mindenképpen egyszerűnek kell lennie, ugyanis az árult termékeken kell lennie a hangsúlynak, melyek egyébként is tetszetősek. Stíluslapok használatával a megjelenést különválaszthatjuk a kódtól, amennyire ez lehetséges.
3.5.2 Felhasználói felület A felhasználói felület moduljait a PARTS mappa tartalmazza. Az index.php úgy működik, hogy a címsorváltozóként megadott $mode változó által meghatározott modul kerül betöltésre. (ha $mode=order, akkor az order.php kerül betöltésre).
43
3.5.2.1 Felhasználói felület által használt modulok Modul neve
Leírás
index.php
A kezdőoldal. Használja az order_manager.php és a cart_manager.php modulokat, ahhoz, hogy az oldalon mindenhol konzisztens maradjon a kosár. Használja továbbá a bnxdb.inc.php modult, melyről a következő pontban írok bővebben. Egy szintén a konzisztencia megőrzésére használt függvénypár is szükséges: a login_handler és a logout_handler függvények. Ezek használatának indoklásáról egy későbbi pontban írok. A program által használt adatbázis eléréséhez szükséges kódot tartalmazza. Egy adatbázis-kezelő modult implementál. Az adatbázishoz szükséges felhasználónevet, jelszót és adatbázisnevet tartalmazza. Pontosabban az indexben található változók értékadását.
A Felhasználói panelen megjelenő kosarat valósítja meg. A kosár konzisztens állapotban tartására használjuk. Dinamikus tartalom nincs benne: a kapcsolat menüpont HTML kódját tartalmazza. Az Akciók menüpontot valósítja meg: kilistázza azokat a termékeket, melyekhez kedvezményes ár tartozik. A felhasználói fiók adatainak módosítását valósítja meg. A bejelentkező űrlap, dinamikus tartalom nélkül. A kijelentkezéskor elküldött kérés feldolgozására használt srcipt. A főmenü, azaz a vízszintes menü. A webshopba feltöltött termékek kategóriáit listázza ki. Az adminisztrátor által felöltött híreket írja ki. A kosár rendezését, és a megrendelés elküldését implementálja. A megrendeléskor elküldött űrlap feldolgozását valósítja meg. A függő megrendelések kilistázását valósítja meg. Egy termék adatlapjának megjelenítésére használjuk. A regisztrációs modult implementálja. Az oldal szabályzatát tartalmazza, szintén dinamikus tartalom nélkül. A Keresés menüpontot valósítja meg, a gyorskeresést és az összetett keresést. A felhasználói panelbe beépülő keresősáv. az űrlap feldolgozása a search.php modulban történik meg. A beléptetett felhasználó navigációs felülete. A termékek kilistázását implementálja. Az üdvözlőképernyő. Ez töltődik be automatikusan az index.php megnyitása során.
44
3.5.2.2 Felhasználói felület által használt függvénykönyvtár Modul neve
Leírás
cart_class.php
A kosár osztály implementációja.
log_func.php
A
bejelentkezést
ellenőrző
függvények
modulja. random_product.php
Maximum
6db
véletlenszerű
termék
generálása. reg_functions.php webshop_func.php
A regisztrációs űrlap, illetve az adatmódosító űrlap helyes kitöltésének ellenőrzése. A webshop.php modul által használt függvények, mint például az első „.” karakter keresése,
illetve
a
kosárba
pakolás
megjelenítése.
3.5.2.3 Felhasználói felület során használt érdekesebb metódusok 3.5.2.3.1
A kosár osztály (cart_class.php)
Mivel a PHP nem típusorientált nyelv, ezért nem indokolt osztályok definiálása, ebben az esetben azonban kivételt teszünk: sokkal kényelmesebb egy kosár osztályt létrehozni, és azt kezelni, minthogy több adatszerkezetet tartsunk a $_SESSION változókban.
42. ábra – A kosár osztály diagramja
45
Metódusai:
Cart(): a konstruktorban értéket adunk az osztály tagjainak. A $cart változó egy $_SESSION típusú PHP változóra történő hivatkozást kap, így egy bejelentkezés során a kosár értéke változatlan marad, habár minden oldalgeneráláskor létre kell hozni. Ha a „hagyományos” módon definiálnánk, akkor problémákba ütköznénk: nem tudnánk elérni a $cart változót, csak a bejelentkezés modul során (ahol létrehoztuk). Ezzel a módszerrel viszont, mivel csak hivatkozunk egy session változóra, újragenerálódáskor nem ürül ki a változó értéke, és elérhető is lesz az egész oldalon. A kosarat egy asszociatív tömb adatszerkezet valósítja meg, ahol kulcs és érték párosul a következő módon: a kulcs egy termék indexe, a hozzá tartozó érték pedig annak a kosárban levő darabszáma. __get($i): A $i változónak int típusúnak kell lennie. Visszaadja a $i kulcshoz tartozó értéket, esetünkben megadja, hogy hány darabot helyezett be a felhasználó $i indexű termékből a kosarába. getCounter(): visszaadja, hogy hány termék van a kosárban. add($item, $pc): a kosárba helyez egy elemet. Amennyiben egy elem már benne van a kosárban, a darabszámát növeli meg. contains($item): Megállapítja egy elemről, hogy benne van-e a kosárban, avagy sem. remove($item, $modifier): Eltávolít egy elemet. A $modifier változóban egy módosítót tárolunk: értéke „one” hogyha csak a darabszámot akarjuk csökkenteni eggyel, értéke „all”, ha az termék összes előfordulását ki akarjuk venni. makeEmpty(): átállítja a kosár által hivatkozott tömböt egy üres tömbre.
3.5.2.3.2
Managerek
A managerek használata a kosár konzisztens állapotban tartása. Vegyük például a megrendelés modult, ahol a felhasználó a kosarát rendezi. Ekkor, a kosár két helyen is megjelenik. A jobb oldali panel definiálása a kódban hamarabb történik, mint a középső tartalmi részé, ezért ha az order.php fájlban történne a kosár módosításának lekérdezése, akkor a kosár az order.php által generált lapon az aktuális értéket mutatná, ám a Felhasználói panelen található kosár kijelzésnél még a rendezés előtti állapot látszana, és a módosított állapot csak a következő oldalgenerálásnál történne meg. Ugyanez a helyzet a kosárba pakolással. A termékek kilistázása később történik meg, mint a kosár kiíratása. Így, ha nem az index modul elején kezelnénk le a kosárba pakolási kérelmet, akkor az elem csak a következő oldalbetöltéskor kerülne be a kosárba. Ezt elkerülni egyébként más oldalszerkezettel (például ha a felhasználói panel a bal oldalon lenne) lehetne, ám az általam használtat tekintem a legkényelmesebbnek és praktikusnak a felhasználó szempontjából.
46
Végső soron a kosár frissítése a managerek segítségével, az index.php elején történik. Így mindig konzisztens állapotban tarthatjuk a kosarat és a változtatások az egész lapra érvényesek lesznek. 3.5.2.3.3
FindIt függvény (webshop_func.php)
A findIt függvény megírásához a leírás első n mondatának kinyerésére volt szükség. Megkeresi a $where szövegben a $what karakter $th-adik előfordulását és visszatér annak pozíciójával. A keresés indexelése az első előfordulástól kezdődik (nulladik előfordulás esetén a függvény hamis értékkel tér vissza). Ez a megoldás is a PHP típusfüggetlenségét reprezentálja: normális esetben extremális karakterre lenne szükség annak jelzésére, hogy nem találtuk meg a karaktert, így viszont logikai változóval is visszatérhetünk, ugyanis a típusok nem kötik meg a kezünket. 3.5.2.3.4
Ez egy érdekes függvény. Első lépésként kigyűjti egy tömbbe az összes terméket, amiből szeretnénk ízelítőt mutatni a vásárlónak a kezdőlap megnyitásakor. Ezt a lekérdezést még módosíthatjuk úgy is, hogy például a 2000 Ft-nál olcsóbb termékeket ne mutassa az ízelítőben, ez egész jó marketing stratégia. Miután kigyűjtöttük a termékeket, ki kell választani belőlük maximum 6 darabot. A függvény egy korábbi verziója mindenképpen 6 terméket listázott ki, ám kevesebb, mint hat termék esetén végtelen ciklusba lépett a véletlen szám generálása során. Ezen hiba kijavítására vezettem be a minimum kiválasztást a tömb hossza és a 6 között, majd egy oszlop-sorformázással rendezem őket, ugyanis a függvény még mindig hajlamos volt végtelen ciklusba lépni, ha a kapott eredményhalmaz nem volt osztható 3-mail (oszlopok száma). Vezetünk továbbá egy tabuhalmazt, amely tartalmazza az eddig legenerált sorazonosítókat egy tömb formájában. Addig generálunk egy véletlenszerű számot a tömb hosszán, amíg egy olyan indexet sikerül előállítanunk, ami még nincs benne a tabu halmazba. Az ezen indexen levő lekérdezés eredményt hozzáfűzzük az eredménylistához ($products). 3.5.3 Adminisztrációs felület A dokumentálás során a mobil adminisztrációs felületet, illetve az adminisztrációs felületet egy fejezet alá veszem, ugyanis a felhasznált technológia mindkét felületnél ugyanaz, egyedül a kinézet változik, illetve a mobil felületen a funkciók nagy része nincs implementálva, mivel mobil készüléken nincs rájuk égető szükség.
47
3.5.3.1 Adminisztrációs felület által használt modulok Modul neve
Leírás
index.php
Ez a kezdőoldal. Nem mutat semmit a felhasználónak egészen addig, amíg nem jelentkezett be. Egy illetéktelen szemlélő jobb, ha nem látja mik az adminisztrátor lehetőségei.
bnxdb.inc.php
A program által használt adatbázis eléréséhez szükséges kódot tartalmazza. Egy adatbázis-kezelő modult implementál.
dbconnection.php
Az
adatbázishoz
szükséges
felhasználónevet,
jelszót
és
adatbázisnevet tartalmazza. Pontosabban az indexben található változók értékadását. discounts.php
A modul a kedvezményadást valósítja meg adott termékre. A products modulból hívódik meg, ha új kedvezményt szeretnénk kiszabni egy termékre. Amennyiben a menüből hívódik meg, akkor a meglevő kedvezményeket tudjuk rendezni.
edit.php
Egy feltöltött termék adatlapjának módosítását implementálja a modul.
login.php
A bejelentkezési űrlap, dinamikus tartalom nélkül.
logout.php
Kijelentkezés modul.
menu.php
A főmenü. A megrendelések menüpont után meghívódik a getNew($DB) függvény, mely a $DB adatbázis-kapcsolaton keresztül lekérdezi, hogy hány olyan megrendelés érkezett be, melynek állapota még nem függő. A megrendeléseket megrendelő, dátum, és idő szerint csoportosítjuk. Pontosabban az idő óra és perc része szerint, ugyanis a megrendelések nem egy csoportként érkeznek be: egy-egy termék megrendelése új bejegyzés az order táblában.
news.php
Hírek létrehozása és kezelése. Az itt feltöltött képek a felhasználói felület img/news mappájába kerülnek, így ügyeljünk arra, hogy ez a mappa létezzen.
orders.php
A
megrendelések
kilistázása.
Amennyiben egy
felhasználó
megrendeléseire vagyunk kíváncsiak, a felhasználó adatlapján nézhetjük meg. owndatabase.php
A saját adatbázis kezelése. Funkciójában hasonló a products
48
Modul neve
Leírás moduléhoz, csak itt a webshopban meg nem jelenő termékeket lehet kezelni. Mivel korábbi munkáimból azt a tapasztalatot szűrtem le, hogy a saját adatbázisban lényegesen kevesebb elem van, mint a publikusban, ezért nincs szükség szűrőre.
products.php
A termékek kezelését implementálja. Ebből a modulból tudjuk a terméket szerkeszteni, elrejteni, kedvezményt kiszabni, illetve törölni. A modul tartalmaz egy szűrőt is, hogy a nagy elemszámú terméklista között könnyedén megtalálja az adminisztrátor azt az elemet, amelyet keres. Segítségül hívja az archive_func.php scriptben definiált függvényt.
profile.php
Egy felhasználó (vásárló) adatlapja. Tartalmazza a személyes adatait, illetve az általa megrendelt termékeket.
statistics.php
A statisztikát az archive tábla soraiból készítjük. Egyelőre csak hónapokra
lebontott
statisztikát
készítünk,
egy
későbbi
továbbfejlesztés során elkészíthetjük az éves statisztikát is. upload.php
Egy termék feltöltése. Az itt feltöltött képek a felhasználó felület img/thumbs és img/normal mappáiba kerülnek, ezért ügyeljünk arra, hogy ezek a mappák létezzenek.
user_bar.php
Az adminisztrátor navigációs panele. Amennyiben további funkciókat szeretnénk hozzáadni az adminisztrátor, lehetőségei közé, akkor itt tehetjük meg.
users.php
Az egyik legérdekesebb modul. a felhasználók közötti keresést implementálja, ám nem a megszokott PHP-s módszerrel, hanem az angular használatával, ami egy kliens oldali újítás: segítségével úgy jeleníthetünk
meg
dinamikus
tartalmat,
hogy
nem
kell
újragenerálni az oldalt, mint a PHP-nál.
3.5.3.2 Adminisztrációs felület által használt függvénykönyvtár Modul neve
Leírás
archive_func.php
A modulban definiált függvényt az archiválás során
használjuk.
Az
orders.php
profile.php modulok használják. 49
és
a
edit_functions.php
A modulban definiált függvény megvizsgálja hogy
a
termék
módosítása
során
módosítottunk e a termék valamelyik képén. Amennyiben nem, abban az esetben nem történik semmi, ellenkező esetben frissíti az adatbázist az új értékekkel és feltölti a képet. log_func.php
A felhasználói felületéhez nagyon hasonló ki és bejelentkeztető függvénypárost tartalmaz.
menu_counter.php
A felhasználói felületéhez nagyon hasonló ki és bejelentkeztető függvénypárost tartalmaz.
user_func.php
Ebben a fájlban definiált függvény visszaadja.
3.5.3.3 Adminisztrációs felület által használt érdekesebb metódusok Mivel az adminisztrációs felületen leginkább rutinműveletek folynak – módosítások, törlések, adatfelvitel, ezért talán egy érdekesebb részt emelnék ki a sok közül. 3.5.3.3.1
Felhasználók modul
Mint már korábban említettem, az angular bővítményt használtam a modul felépítésekor. Ez egy érdekes és fantáziadús lehetőség, amivel gyorsan használhatunk szűréseket, tartalmaz egyébként űrlap validációt, ám mivel a módszerrel akkor találkoztam, mikor a szakdolgozat kódja már elkészült, ezért csak a filterelés funkciót használtam a függvénykönyvtárából. Használata lényegesen lerövidítheti a kódot, és gyors eredményhez vezetnek a keresései, mivel a PHP-vel ellentétben új tartalom generálása esetén nem szükséges az oldal újratöltése, így lassabb internetkapcsolat (például 3G mobil internet) esetén is viszonylag hamar találhatjuk meg azt, amit keresünk. Az angular bővítmény alkalmazása esetén a hagyományos HTML tagek kapnak kibővítő paramétereket. [3] A felhasználók közti keresés a következő elven alapul:
először egy div új ng:init paraméterével inicializáljuk a tömböt, amelybe az elemeket az adatbázisból töltjük be. A tömb a következő módon néz ki: egy sorban lesz username, email, phone, és id mezője, mintha egy adatbázis táblájának struktúráját definiálnánk. A következő lépésben létrehozzuk a keresőmezőt, ami egy közönséges HTML form input. Mivel korábban az index fájl headerében beállítottuk az angular script alkalmazási formájának az ng:autobind módot, ezért folyamatosan ellenőrizni fogja majd az input mezőt. Egyébként ha ng:autobind módot használunk, az űrlapok olyan bemeneti mezői is folyamatosan frissülnek, melyek ugyant a nevet kapták. Ez érdekes jelenséghez vezetett, amikor a felhasználói felületre is próbáltam angulart bevezetni.
50
Miután elkészült a bemeneti mező, elkezdhetjük a HTML táblázat rajzolását. a
tag is kapott egy kiegészítő angular paramétert, mégpedig egy ng:repeat nevűt, ami egy ciklust jelöl. Szintaktikája hasonló a Javas foreach cikluséhoz: <elem> in . Ennek hatására annyi
páros rajzolódik ki, ahány sora van a feltételként megadott tömbnek. Amennyiben a feltételben használt tömbre meghívjuk a $filter(input_neve) függvényt, akkor a tömböt az input mezőbe beírt adatok szerint szűri. A tömb egyes sorainak elemét a következőképpen érhetjük el: {{<elem>.<mezőnév>}}. Nincs szükség az idézőjelek levédésére, vagy egyéb konkatenációra, mint a PHP-ban, hivatkozás mellé külön művelet nélkül beírhatjuk és soronként helyettesítődik. További lépésekre nincs szükség: az angular már működik úgy, hogy egyszerűen HTML kódot írtunk ng paraméterekkel kibővítve.
51
3.5.4 Tesztelés A program tesztelése több lépésben történt. Minden egyes modul elkészülése után a három főbb böngészőben (Firefox, MSIE, Google Chrome) tesztelésre került mind a design, mind pedig az eljárások. Ez azért szükséges, mivel a weblapokat különböző böngészők máshogy értelmezhetik. A részegységek tesztelése és javítása addig folyt, amíg a kívánt módon nem működött minden. A leggyakoribb művelet az inputok feldolgozása volt. Ezeknél tesztelésre került minden alkalommal, hogy hogyan viselkedik a feldolgozott eljárás
null érték esetén
várt érték esetén (megfelelő típusú adat érkezésekor helyesen feldolgozásra kerülneke az adatok?)
váratlan érték esetén (korábban említett SQL injection támadások, illetve típusérték kezelésből adódó hibák kezelése)
A listázó eljárások tesztelése egyszerűen történt: a helyes értékek a megfelelő helyeken jelennek-e meg az listázás során [. Szűrésnél minden szűrő különállóan tesztelésre került. A program végső változatának minden oldala ellenőrzésre került a html helyesség ellenőrzővel, és megfelelt a használt szabványnak. [4] 3.5.4.1 Felhasználói felület tesztelése A felhasználói felület tesztelése esetén a felhasználó által kezdeményezett főbb folyamatokat teszteljük. 3.5.4.1.1
Regisztrációs folyamat tesztelése
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
registration modul
Üresen küldjük el a
A program figyelmezteti a
Megegyezik a
tesztelése
regisztrációs űrlapot
felhasználót, hogy nem adta
várt
meg adatait egy hibaüzenet
eredménnyel.
formájában. Részben üres
Részben üres
űrlap esetén a hiányzó
űrlapra a
mezőket írja ki a
hiányzó
hibajelentés.
mezőket jelzi ki.
52
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
registration.php
Helytelen formátumú
Figyelmezteti a felhasználót,
Megegyezik a
modul tesztelése:
adatok megadása (e-
hogy rosszul adta meg az e-
várt
e-mail cím
mail cím: nincs @
mail címét
eredménnyel.
karakter, számmal kezdődik) registration.php
Helytelen formátumú
Figyelmezteti a felhasználót,
Megegyezik a
modul tesztelése:
adatok megadása (túl
hogy rosszul adta meg az
várt
irányítószám
rövid irányítószám
irányító számot.
eredménnyel.
kevesebb, mint 4 karakter) registration.php
Már használatban levő
Figyelmezteti a felhasználót,
Megegyezik a
modul tesztelése:
felhasználónévvel
hogy az általa választott
várt
felhasználónév
történő regisztráció
felhasználónév már
eredménnyel.
kezdeményezése.
használatban van.
Egy korábbi reguláris kifejezés nem engedte meg a [email protected] alapú e-mail címeket. Erre a hibára a tesztelés során derült sor. A végleges verzióban ez a hiba javításra került. 3.5.4.1.2
Bejelentkezési folyamat tesztelése
Teszteset
Bemenő-értékek
Várt eredmény
Értékelés
login_handler
üres felhasználónév
Nem léptet be a
Megegyezik a várt
függvény tesztelése
és jelszó páros
program,
eredménnyel
hibaüzenetet ír ki.
login_handler
Rossz felhasználónév
A program
Megegyezik a várt
függvény tesztelése
illetve jelszó párossal
visszautasítja a
eredménnyel. A
rossz adatokkal.
próbálunk belépni.
bejelentkezési
program nem mondja
kérelmet,
meg a felhasználónak,
hibaüzenetet ír ki az
hogy melyik adat a
az űrlap alá.
hibás.
login_handler
Helyes
A program beenged
Megegyezik a várt
függvény tesztelése
felhasználónév illetve
az autentikált
eredménnyel.
53
Teszteset
Bemenő-értékek
helyes adatokkal.
Várt eredmény
jelszó párossal
felületre, és a
próbálunk belépni.
bejelentkező panel
Értékelés
helyére betölti a navigációs panelt, és a kosarat. login_handler SQL
Bemenet:
Nem lépteti be a
Megegyezik a várt
injection támadás
’ --
program a
eredménnyel.
esetén
.
rendszerbe.
3.5.4.1.3
Bejelentkezés utáni lehetőségek: Adatmódosítás
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
edit.php modul
Üresen küldjük el a
A program
Megegyezik a várt
tesztelése
módosító űrlapot
figyelmeztet.
eredménnyel.
edit.php modul
Helytelen formátumú
Figyelmezteti a
Megegyezik a várt
tesztelése: e-mail
adatok megadása (e-
felhasználót, hogy
eredménnyel.
cím
mail cím: nincs @
rosszul adta meg az
karakter, számmal
e-mail címét
kezdődik) edit.php modul
Helytelen formátumú
Figyelmezteti a
Megegyezik a várt
tesztelése:
adatok megadása (túl
felhasználót, hogy
eredménnyel.
irányítószám
rövid irányítószám
rosszul adta meg az
kevesebb, mint 4
irányító számot.
karakter)
3.5.4.1.4
Keresések tesztelése
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
search.php modul
Egyszerű keresésnél
Minden termék
Megegyezik a várt
tesztelése
keresőmezőbe nem
kilistázásra kerül, ami
eredménnyel.
írunk semmit, és úgy
látható a
nyomunk a keresésre
webshopban
54
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
search.php modul
Összetett keresésnél
Minden termék
Megegyezik a várt
tesztelése
üresen hagyunk
kilistázásra kerül, ami
eredménnyel
minden mezőt
látható állapotú
search.php modul
Gyorskereséssel
A keresés 4
Megegyezik a várt
tesztelése
listázzuk ki azokat a
eredményt fog hozni.
eredménnyel
termékeket, aminek a nevében „pálma” van.
3.5.4.1.5
Megrendelés folyamatának tesztelése
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
webshop.php modul
type címsori változó
Összes termék
Megegyezik a várt
tesztelése
nincs definiálva
kilistázása
eredménnyel.
„Termékeink” headerrel webshop.php modul
Type címsori
Nem listáz ki semmit
Megegyezik a várt
tesztelése
változónak integer
a program: tudatja a
eredménnyel.
típust adunk.
felhasználóval, hogy nincs ilyen termék az adatbázisban.
cart_manager modul
A kosárba pakolt
Nem történik semmi,
Megegyezik a várt
tesztelése
elemszám 0
az elem nem kerül be
eredménnyel, nem
a kosárba
kerül be elem 0 elemszámmal a kosárba
product.php modul
az id címsori változó
Nem történik adatlap
Megegyezik a várt
tesztelése
nincs definiálva
kiíratás, a program
eredménnyel. A
(értéke null)
közli, hogy „Ez a
program nem hagyja
termék nem szerepel
a felhasználót olyan
az adatbázisban”
adatlap megtekintésére, amelyhez nem tartozik érték.
55
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
order.php modul
Üres kosárral való
A program
Megegyezik a várt
tesztelése
megnyitás.
tájékoztatja a
eredménnyel
felhasználót, hogy amíg a kosara üres, nem tudja rendezni a kosarát. cart_manager modul
A kosárban 1 termék
A termék kikerül a
Megegyezik a várt
tesztelése, elem
van. Csökkentsük 1-
kosárból
eredménnyel.
csökkentése
gyel a darabszámát
cart_manager modul
Negatív elemszám
Nem történik semmi,
Megegyezik a várt
tesztelése negatív
kosárba helyezése.
az elem nem kerül be
eredménnyel.
értékkel.
a kosárba.
cart_manager modul
Nem egész szám
A megadott érték
Megegyezik a várt
tesztelése nem egész
megadása
alsó egész részét
eredménnyel. Olyan
értékkel.
elemszámként.
teszi csak be a
értéknél, mint pl. 0,5
kosárba.
nem történik semmi.
cart_manager modul
Pozitív egész szám
Az elem a megadott
Megegyezik a várt
tesztelése pozitív
megadása
elemszámmal
eredménnyel.
egész értékkel.
elemszámként.
bekerül a kosárba.
order.php modul
2-es elemszám
Az elemszám
Megegyezik a várt
tesztelése: elemszám csökkentése 1-re.
csökken, Ha az 1,
eredménnyel.
csökkentése 1-gyel.
akkor töröljük.
cart_manager.php
Egy elem összes
Az elem kikerül a
Megegyezik a várt
modul tesztelése:
előfordulásának
kosárból.
eredménnyel.
elem eltávolítása a
eltávolítása.
kosárból. cart_manager modul
Bemenő
Az elem nem kerül be
Megegyezik a várt
tesztelése: váratlan
elemszámként
a kosárba. A szöveges
értékkel.
típusú adatokkal
szöveget adunk meg.
értéket integerré alakítjuk, melynek értéke 0.
56
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
order.php modul
Megrendelés
A kosár tartalma
Megegyezik a várt
tesztelése:
elküldése a feltételek
változatlan. Egy
eredménnyel
megrendelés
elfogadása nélkül
hibaüzenet
elküldésének
figyelmezteti a
feltétele nem
felhasználót, hogy el
teljesül
kell fogadnia a feltételeket.
order.php modul
Megrendelés
A kosár kiürül. Az
Megegyezik a várt
tesztelése:
elküldése a feltételek
eddig a kosárban
eredménnyel
megrendelés
elfogadásával
levő elemek
elküldésének
bekerültek az order
feltétele nem
táblába.
teljesül
3.5.4.2 Adminisztrációs felület tesztelése A mobil adminisztrációs felület és a hagyományos adminisztrációs felület tesztelése egybevonva történik, mivel moduláris feladataik, és azok szintaktikája megegyezik. 3.5.4.2.1
Bejelentkezési folyamat tesztelése
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
login_handler
Üres felhasználónév
A program nem
Megegyezik a várt
függvény tesztelése
és jelszó páros
léptet be az
értékkel.
adminisztrációs felületre, a menü is láthatatlan marad.
login_handler
Az adatbázisban nem
A program nem
Megegyezik a várt
függvény tesztelése
szereplő
léptet be az
értékkel
helytelen adatokkal
felhasználónév és
adminisztrációs
jelszó páros
felületre, a menü is
használata
láthatatlan marad.
bejelentkezés során
57
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
login_handler
Az adatbázisban
A program beenged
Megegyezik a várt
függvény tesztelése
szereplő
az adminisztrációs
értékkel
helyes adatokkal
felhasználónév és
felületre.
jelszó páros használata bejelentkezés előtt login_handler
Nem engedi be a
Megegyezik a várt
függvény tesztelése
neve>’ -- a
támadót
értékkel.
SQL injection
felhasználónévhez
támadás esetén
3.5.4.2.2
Terméklistázás szűrésének tesztelése
Teszteset
Bemenő értékek
products.php modul
A szűrőmezőbe nem
Minden termék
Megegyezik a várt
tesztelése: üres
írunk semmit
kilistázásra kerül, ami
eredménnyel.
szűrő
Várt eredmény
Értékelés
látható a webshopban
products.php modul
A szűrőmezőt elvárás
A feltételeknek
Megegyezik a várt
tesztelése: helyes
szerint töltjük ki.
megfelelő termékek
eredménnyel.
szűrő
jelennek meg
products.php modul
A szűrőmezőbe olyan
Hibaüzenet jelenik
Megegyezik a várt
tesztelése: helytelen
adatot írunk, ami
meg, és tudatja, hogy
eredménnyel.
szűrő
biztosan nincs. pl.
a keresés nem hozott
„állateledel”
eredményt.
58
3.5.4.2.3
Termék feltöltésének tesztelése
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
upload.php modul
Üres adatok
Nem történik semmi,
Megegyezik a várt
tesztelése
megadása termék
a termék nem kerül
eredménnyel
feltöltése esetén
felöltésre
upload.php modul
Név mező kitöltve, de Hibaüzenetet
Megegyezik a várt
tesztelése
az ár nincs.
eredménnyel
kapunk, hogy az ár 0, ám vehetjük azt a lehetőséget, hogy ezt a felhasználó tudatosan csinálta, így a saját adatbázisba kerül a termék
upload.php modul
Teljesen kitöltött
A termék feltöltésre
Megegyezik a várt
tesztelése helyes
űrlapot küldünk
kerül a megadott
eredménnyel.
adatokkal
feldolgozásra
értékek szerint.
upload.php modul
Helytelenül kitöltött
Hibaüzenetet
Megegyezik a várt
tesztelése helytelen
űrlapot küldünk
kapunk, hogy az ár 0,
eredménnyel.
adatokkal
feldolgozásra (ár
ám vehetjük azt a
helyére stringet)
lehetőséget, hogy ezt a felhasználó tudatosan csinálta, így a saját adatbázisba kerül a termék.
Amennyiben nem töltünk fel képet, egy „ures.png” nevű kép lesz beállítva képként. Ezt a képet állítsuk be akkor is, ha törölni szeretnénk egy már meglevő termék képét.
59
3.5.4.2.4
Hírek létrehozásának folyamata
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
news.php modul
Üres a fejléc és a
Hibaüzenetet
Megegyezik a várt
tesztelése üres hír
szöveg mező.
kapunk: ez a két adat
eredménnyel.
feltöltése esetén
elengedhetetlen egy hír létrehozásához.
news.php modul
A fejléc és a szöveg
A feltöltés
Megegyezik a várt
tesztelése részben
mező nem üres
megtörténik.
eredménnyel.
news.php modul
Minden mezőt
A feltöltés
Megegyezik a várt
tesztelése részben
kitöltünk
megtörténik.
eredménnyel.
üres hír feltöltése esetén
üres hír feltöltése esetén
3.5.4.2.5
Kedvezmény létrehozásának folyamata
Teszteset
Bemenő értékek
Várt eredmény
Értékelés
discounts.php modul
Kedvezmény
Nem engedi a
Megegyezik a várt
tesztelése:
kiszabása olyan
program.
eredménnyel
kedvezmény
termékre, amire már
Hibaüzenettel tér
kedvezményes
van kedvezmény
vissza
discounts.php modul
Kedvezmény
A program
Megegyezik a várt
tesztelése helyes
kiszabása olyan
megkérdezi a
eredménnyel
adatokkal
termékre, amire még
kedvezményes árat,
nincs kedvezmény
és amennyiben az
termékre
kevesebb, vagy egyenlő az eredeti árral, létrehozza a kedvezményt.
60
3.5.4.2.6
Megrendelések archiválása
Teszteset
Bemenő értékek
Várt eredmény
archivate függvény
Olyan
Csak a „Szállítva”
tesztelése,
megrendeléscsoportot állapotú elemek
orders.php
akarunk archiválni,
kerülnek
modulban kezeletlen
ahol nem minden
archiválásra.
megrendelésen
termék állapota
Értékelés Megegyezik a várt eredménnyel
„Szállítva” archivate függvény
Olyan
A „Szállítva” állapotú
Megegyezik a várt
tesztelése,
megrendeléscsoportot elemek archiválásra
orders.php
akarunk archiválni,
kerülnek. A
modulban már
ahol minden termék
megrendeléscsoport
kiszállított
állapota „Szállítva”
eltűnik a listáról.
archivate függvény
Olyan megrendelést
A program
Megegyezik a várt
tesztelése,
akarunk archiválni,
figyelmeztet, hogy
eredménnyel
profile.php
ahol a termék állapota
ilyet nem tehetünk.
modulban kezeletlen
nem „Szállítva”
eredménnyel
megrendelésen
megrendelésen archivate függvény
Olyan megrendelést
A termék eltűnik a
Megegyezik a várt
tesztelése,
akarunk archiválni,
listáról, és üzenetet
eredménnyel
orders.php
ahol a termék állapota
kapunk, hogy az
modulban már
„Szállítva”
archiválás sikeres
kiszállított
volt.
megrendelésen
61
Összegzés
4.
Azért választottam ezt a témát, mivel modulokra bomlik, és így könnyebb betartani az ütemtervet, továbbá jó volt az is, hogy néhány éves tapasztalat után használhattam olyan újításokat is a munka során, mint az angular. Egy webshop sosem tekinthető befejezettnek. Mindig akadnak új igények mind a felhasználók, mind a megrendelő részéről, ezért a fejlesztési lehetőségek a programozó, illetve a megrendelő fantáziájától függenek. A teljesség igénye nélkül néhány továbbfejlesztési lehetőséget megjegyzek:
E-mail küldés mind a felhasználó, mind az adminisztrátor részére. Ezzel a funkcióval azért nem foglalkoztam, mivel a lokális szerveren való használat esetén nincs értelme levelet küldeni.
Üzenetküldési lehetőség oldalon belül – amennyiben nem sikerülne a felhasználónak a megrendelés, legyen lehetősége felvenni a kapcsolatot az adminisztrátorral, hogy segítséget kérjen. A jelenlegi verzióban ez e-mailen keresztül folyna. A továbbfejlesztés egy további tábla hozzáadását és kezelését igényelné.
Növényápolási, illetve gondozási fórum. Javítaná a találatokat a keresőkben és további vásárlókat vonzana.
Keresőoptimalizálás. Bár munkám során a „szobanövény” és „webshop” kulcsszavakra igyekeztem optimalizálni az oldalt, de mindig jöhetnek újabb keresőszavak. Továbbá olyan keresőoptimalizálási lépéseket nem tettem meg, amik egy élesített webshop esetén megtörténnének: ilyen módszer például a linkcsere, és a hivatkozásnövelés.
Az oldalaknak kétévente arculatváltás javallott, hogy fenntartsa a felhasználók érdeklődését. Érdemes új funkciókkal megjelenni, erről akár egy hírlevél is tájékoztathatja a felhasználókat. Ezeket a fejlesztéseket az oldal profitjától függően érdemes bevezetni.
