Szakdolgozat. Responsive webáruház elkészítése. Készítette: Szakos Péter. Gazdaságinformatikus Bsc. Témavezető: Krizsán Zoltán egyetemi tanársegéd

Szakdolgozat Responsive webáruház elkészítése Készítette: Szakos Péter Gazdaságinformatikus Bsc Témavezető: Krizsán Zoltán egyetemi tanársegéd Konzulens: Dr. Házy Attila egyetemi docens Miskolci Egyetem 2013

Tartalom 1 2 Bevezető... 1 A webáruházakról... 3 2.1 Mi az a webáruház?... 3 2.2 Webáruház követelményei... 3 2.2.1 Jogi követelmények... 3 2.2.2 Tájékoztatási kötelezettségek... 4 2.3 E-kereskedelmi trendek Magyarországon... 6 3 Responsive webdesign... 9 3.1 A responsive design bemutatása... 10 3.2 A responsive design előnyei... 10 3.3 Szükséges technológiák... 11 3.3.1 HTML5... 12 3.3.2 CSS3... 13 4 Keresőoptimalizálás... 17 4.1 Onsite SEO... 17 4.1.1 Title elem... 17 4.1.2 Meta Description elem... 18 4.1.3 Címsorok... 18 4.1.4 Keresőbarát URL... 19 4.2 Keresőoptimalizálhatóság megvalósítása... 20 5 A webáruház alkalmazás elkészítése... 22 I

5.1 Általános követelmények... 22 5.2 Funkció specifikáció... 24 5.2.1 Használati eset diagram... 24 5.3 Adatok tárolása... 28 5.3.1 ER modell... 28 5.3.2 Relációs modell... 29 5.4 Osztályok tervezése... 30 5.5 Kérések kiszolgálása... 40 5.6 Keresőoptimalizálás megvalósítása... 42 5.6.1 Dedikált oldalak... 42 5.6.2 Kategória oldalak... 45 5.6.3 Egyéb terméklista oldalak... 46 5.6.4 Terméklapok... 47 5.7 Responsive felhasználói felület... 49 5.7.1 Terméklista oldalak... 54 5.8 Cél teljesítése és továbbfejlesztési lehetőségek... 57 6 Összegzés... 59 Summary... 60 Irodalomjegyzék... 61 Melléklet... 62 II

Ábrajegyzék 1. ábra: Forgalomváltozás a magyar webáruházaknál az előző évhez képest... 6 2. ábra: A webáruházak forgalomnövekedésének nagysága a fejlesztések függvényében... 7 3. ábra: Magyarországon használt webáruház-rendszerek... 7 4. ábra: Magyar webáruházak mobilra való optimalizáltsága... 8 5. ábra: Aktorok... 24 6. ábra: Dedikált oldalak beállításai az Admin felületen... 43 7. ábra: Termékfeltöltés az Admin felületen... 48 8. ábra: Felhasználói felület elrendezésének vázlata... 51 9. ábra: Elkészült webáruház kezdőoldala 1... 52 10. ábra: Elkészült webáruház kezdőoldala 2... 53 11. ábra: Elkészült webáruház kezdő oldala mobilon nézve... 53 12. ábra: Terméklista oldal kinézete monitoron és mobilon... 56 13. ábra: Use Case diagram 1... 62 14. ábra: Use Case diagram 2... 63 15. ábra: ER modell... 64 16. ábra: Relációs modell... 65 III

1 Bevezető Informatikai tanulmányaimon belül mindig is a webes alkalmazások készítése volt az a témakör, ami legjobban érdekelt, és amivel a legtöbbet foglalkoztam. Már több éve foglalkozom weboldalak készítésével hobbi szinten, és jelenleg is több saját honlapot üzemeltetek. Ezen érdeklődésemből kifolyólag nem volt kétséges, hogy mindenképpen ebben a témakörben szeretnék szakdolgozatot írni. Mivel egy egyszerű weboldal elkészítése nem jelent elegendő kihívást, ezért mindenképpen egy komolyabb és összetettebb webes alkalmazás elkészítését tűztem ki célul. Több ötlet közül végül egy komplett webáruház motor elkészítését választottam feladatnak, mivel már régóta szeretnék egy komoly, működő webshopot csinálni. Már nagyon sok ilyen program létezik, és van köztük jó néhány ingyenes rendszer is, de mégsem volt köztük olyan, ami maradéktalanul kielégítené azokat az igényeket, amiket támasztottam, így mindenképpen egy teljesen új, saját rendszer elkészítésébe fogtam bele. A legfontosabb követelményeim egyike, amit a legtöbb korábbi rendszer még nem támogat, az a mobil eszközökön való megfelelő megjelenés. A legtöbb oldalnál ezt úgy oldják meg utólag, hogy csinálnak egy mobil verziójú, külön weblapot, és erre irányítják a felhasználót, ha mobil eszközről böngésznek. Ez azonban sok szempontból nem szerencsés, amit majd ki is fejtek bővebben a szakdolgozat későbbi részében. A másik fontos követelmény, amit mindenképpen tudnia kell az alkalmazásnak, az a keresőbarát kialakítás. Minden webáruház sikere azon múlik, hogy lesz-e megfelelő számú látogatója, és ehhez elengedhetetlen az internetes keresőkben való jó szereplés. Az elkészített alkalmazás egy általános célú kiskereskedelmi webáruház, ami kis módosításokkal szinte bármilyen kisebb boltnak, üzletnek megfelelő lehet az internetes megjelenésre. Egy működő példa webshopot is készítettem, ami egy régiségboltként működik, és a RégiségOnline fantázianevet viseli. A következő, azaz második fejezetben, általánosságban fogok írni a webáruházakról. Itt leírom, hogy mik is azok webshopok, milyen jogi és egyéb követelményeknek kell 1

megfelelniük, illetve ismertetem azokat a jelenlegi magyarországi e-kereskedelmi trendeket, amik hatással lehetnek az elkészített alkalmazásra. A harmadik fejezet a responsive webdesignról fog szólni, mivel ez az egyik fő különlegessége az alkalmazásomnak. Leírom, hogy hol foglal helyet a responsive webdesign a mobil eszközökre való optimalizálási lehetőségek között, illetve hogy hogyan működik, és milyen technológiák szükségesek hozzá. A negyedik fejezetben a keresőoptimalizálási alapelveket fogom ismertetni, mivel ezeknek az ismerete elengedhetetlenül szükséges egy keresőbarát weboldal létrehozásához és működésének megértéséhez. Az ötödik fejezet már konkrétan az elkészített webáruházról fog szólni. Először ismertetem az általam támasztott általános követelményeket, majd specifikálom a webshop funkcióit és felépítését. Mivel a kész alkalmazás igen bonyolult és szerteágazó funkciókkal rendelkezik, ezért csak néhány kiragadott részt fogok részletesebben is ismertetni, így a keresőoptimalizált felépítésről és a responsive felület megvalósításáról lesz részletes beszámoló. Az utolsó, azaz hatodik fejezet lesz az összefoglaló, ahol leírom, hogy milyen tapasztalatokat szereztem a szakdolgozat és az alkalmazás elkészítése során. 2

2 A webáruházakról Egy webáruház elkészítéséhez elengedhetetlen, hogy először tisztázzuk a webáruházak fogalmát és leggyakoribb jellemzőit. Ezen kívül figyelembe kell még venni, hogy milyen követelmények vannak Magyarországon egy webshoppal szemben, valamint érdemes megemlíteni a magyar internetes kereskedelem jelenlegi helyzetét is. 2.1 Mi az a webáruház? A webáruház, vagy más néven webshop, egy olyan weboldal, aminek legfőbb célja egy termék vagy szolgáltatás értékesítése, vagyis az online kereskedelem. Szerepelni kell tehát egy ilyen weboldalon értékesíteni kíván áruknak, amikről lehetőleg minél több információ megjelenik. Ezen kívül pedig kell, hogy legyen vásárlási lehetőség, ami a leggyakrabban online bevásárlókosárral történik. Ebbe a kosárba a látogatók virtuálisan pakolhatnak termékeket, majd ezután a virtuális pénztárnál befejezhetik a vásárlást. 2.2 Webáruház követelményei Egy webshop üzemeltetési, működési szempontból nagyon sok jogi és fogyasztóvédelmi követelménynek meg kell, hogy feleljen, és ezeket kivonatosan ismertetni is fogom. 2.2.1 Jogi követelmények Egy webáruház üzemeltetéséhez mindenképpen szükséges valamilyen vállalkozási forma megléte. Ez lehet egyéni vállalkozás, betéti társaság, korlátolt felelősségű társaság stb. Ezen kívül fontos a termék vagy szolgáltatás értékesítéséhez szükséges tevékenységi körök megléte (például: 4791 - Csomagküldő, internetes kiskereskedelem tevékenységi kör). Speciális termék esetén pedig még külön szakhatósági engedélyre is szükséges lehet. Fontos változás a korábbi jogszabályokhoz képest, hogy 2008. március 31-től csomagküldő kereskedelem esetén nem szükséges üzletet, vagy vevőszolgálati helyiséget fenntartani. Ettől azonban csak akkor lehet eltekinteni, ha a vevőnek nem személyesen kell átvennie a megrendelt terméket. 3

Az előzőeken kívül pedig a kereskedelemről szóló 2005. évi CLXIV. törvény 2009 júniusában módosított és 2009. október 1-jétől hatályos 3. (1) bekezdése szerint köteles a webáruház tulajdonos kereskedelmi tevékenységét bejelenteni a székhelye szerinti jegyzőnél és ez a bejelentés illetékköteles. A jogi követelmények leírása az [1] hivatkozás alapján történt, ahol részletesebb információk is megtalálhatók. 2.2.2 Tájékoztatási kötelezettségek Egy webáruháznak meg kell felelni különböző tájékoztatási kötelességeknek és ezt a hatóságok próbavásárlások során ellenőrzik is. Amennyiben hibát találnak, a törvényben előírtak szerint járnak-e el. A következő adatokat mindenképpen meg kell jeleníteni a webáruházunkban: 1. A cég, vagy cégszerű elnevezésünk, 2. Adószámunk, Cégjegyzékszámunk és a kibocsátó cégbíróság megnevezése (vállalkozás esetén vállalkozói igazolvány számunk, és a kibocsátó okmányiroda megnevezése), 3. Elektronikus elérhetőségünk (pl.: e-mail címünk), 4. Telefonszámunk (amin elérhetőek is vagyunk!), 5. Engedélyhez kötött termék, vagy szolgáltatás értékesítése esetén annak meglétének igazolása, nyilvántartási szám feltüntetése, 6. Továbbá még szükséges megjelenítenünk az oldalunkon a kapcsolattartó személy nevét, 7. A szerződésünk nyelvét (még akkor is, ha magyar), 8. A megkötött szerződésünk írásban kötöttnek minősül-e, iktatják-e, illetve az a későbbiekben visszakereshető-e? 9. A szerződésünk utal-e valamely magatartási kódexre, ha nem akkor is közölnünk kell a vásárlóval! Vásárlóknak kötelezően biztosítandó további információk: 1. A termékkínálatunk meghatározása: azaz milyen termékeket / szolgáltatásokat kínál a webáruházunk, 2. Rendelési információk: amelyben ismertetésre kerül, hogy a vásárlás regisztrációhoz kötött-e vagy sem, továbbá mikor történik a megrendelések 4

feldolgozása, visszaigazolása, teljesítése (Jó tanács: nem árt tájékoztatni a vásárlókat, hogy a megjelenített termékképek csak illusztrációként szerepelnek, és eltérhetnek a valóságtól!), 3. A teljes általános szerződés feltételek dokumentumot letölthetővé kell tenni a vásárló számára (ugyanakkor tartalmaznia kell a visszaigazoló levélnek melyet elektronikus formában küld a webáruház rendszer a vásárló részére), 4. Adatkezelési információk, melyben tájékoztatva van a webáruházunk felhasználója, és vásárlója az adatai kezelésének módjáról, tárolásának időtartamáról, továbbá az adatok törlésének / töröltetésének lehetőségéről, 5. Rendelés menetének ismertetése: azaz milyen lépéseket kell tennie a vásárlónknak a termékek megrendeléséhez, 6. A megrendelt termék(ek) / szolgáltatás(ok) kifizetésének, ismertetése: azaz a házhoz szállítás díja és információk a kézbesítésről, csomagolásról, stb. 7. Garanciális feltételek: avagy mi a teendő, ha a megrendelt termék esetlegesen hibás, stb. A hibásan leadott, vagy teljesített megrendelések alkalmával szükséges teendők, korrigálási lehetőségek, 8. Az elállás jogának ismertetése: a 17/1999. (II. 5.) Korm. rendelet a távollevők között kötött szerződésekről szóló törvény alapján. (Jó tanács: Az sem baj ha a törvény teljes egészében elérhetővé tesszük, továbbá a vásárlóknak hétköznapi nyelvre átfogalmazva is megjelenítjük a törvény tartalmát az oldalunkon) 9. Végül, de nem utolsó sorban az elállás jogának gyakorlása esetén az ügyintézés menetének ismertetése: azaz milyen formában kell jeleznie a vásárlónak az elállási szándékát (pl.: írásban, stb.). Termékekkel kapcsolatos kötelező információk, amiket meg kell jelenítenünk: 1. A termék(ek) neve(i), 2. A termék(ek) ismertetője magyar nyelven, 3. Jó minőségű termék fotó(k) 4. Akciós ár megjelenítése esetén, az akció időtartamának megjelölése (kezdete, vége). A különböző tájékoztatási kötelezettségek felsorolása az [1] és [2] hivatkozások alapján történt, ahol bővebben is lehet olvasni témáról. 5

Az előzőekben ismertetett jogszabályok és kötelezettségek ismeretében kell kialakítani a webáruház motort, hogy az megfelelhessen minden követelménynek. 2.3 E-kereskedelmi trendek Magyarországon A kedvezőtlen gazdasági körülmények ellenére is folyamatosan nő a csomagküldéssel és internetes kereskedelemmel foglalkozó cégek száma és az összesített éves árbevételük is. A növekedés ütemét mi sem mutatja jobban, mint az, hogy 2007-ben még csak kicsit több mint 900 cég jelölte meg főtevékenységként a csomagküldő internetes kereskedelmet, 2012-ben ez a szám viszont már meghaladta a 2900-at. Szintén nagy növekedés figyelhető meg akkor is, ha azt nézzük, hogy 2007-ben az e-kereskedelemmel foglalkozó cégek összesen 25 milliárd forint bevételt produkáltak, és ez a szám 2011-ben elérte a 72 milliárd forintot. [3] A Webshop Experts 2013-as felmérése [4] szerint a webáruházak több mint 60%-ának nőtt a forgalma 2012-ben az előző évhez képest, és nagyjából 30%-nál stagnált ez az érték. Részletesebb adatok láthatók az 1. ábrán. 1. ábra: Forgalomváltozás a magyar webáruházaknál az előző évhez képest [4] 6

Az eredmények arra is rámutatnak, hogy a webáruházakon történő fejlesztés mértéke kapcsolatba hozható a forgalom növekedésével. Ahol komolyabb változásokat, újításokat vezettek be, ott nagyobb növekedés volt tapasztalható, ahogyan az a 2. ábrán is látható. 2. ábra: A webáruházak forgalomnövekedésének nagysága a fejlesztések függvényében [4] Az is érdekes kérdés, hogy a Magyarországon üzemelő webáruházak milyen rendszert használnak. A 3. ábrán látható, hogy a legtöbben bérelhető megoldásokkal élnek (41%), második helyen pedig az egyedi fejlesztésű webáruházak állnak 26%-kal. 3. ábra: Magyarországon használt webáruház-rendszerek [4] 7

Fontos téma még a webáruházak mobil eszközökre való optimalizáltsága, amire az enet és az Árukereső.hu közös 2012-as felméréséből [5] kapunk választ. Ez alapján kiderül, hogy a felmérésben résztvevő magyar webáruházak 20-25%-a rendelkezik mobilra optimalizált oldallal, de a legtöbben 2013-ra tervezik ennek a bevezetését. Az is kiderül, hogy minél nagyobb egy oldal látogatottsága, annál nagyobb a hajlandóság a mobil eszközökre való optimalizálásra. Részletesebb adatokat mutat erről a 4. ábra: 4. ábra: Magyar webáruházak mobilra való optimalizáltsága [5] 8

3 Responsive webdesign Néhány éve még elhanyagolható volt a mobil eszközökről internetezők száma, most azonban már feltétlenül számolnunk kell velük. A StatCounter nemzetközi kutató cég adatai [6] szerint 2013-ban a teljes internetforgalom 16%-át a mobilról érkező forgalom tette ki. 2012-ben ez a szám még csak 11% volt, ami jól mutatja, hogy nagymértékű a növekedés. A kutatásban egyébként mobil alatt csak a zsebben hordható mérettel rendelkező telefonokat értik, és nem az összes mobil eszközt, azaz a táblagépeket a másik kategóriába sorolták. Egyre nagyobb szerepet kapnak tehát a mobil eszközök, ami azt jelenti, hogy a mobiltelefonokról és táblagépekről érkező látogatókat nem szabad figyelmen kívül hagyni. Gondolni kell arra, hogy a kisebb képernyőméreteken hogyan fog kinézni a weboldalunk, mennyire lesz az jól olvasható és használható. A mobil eszközökön való megfelelő megjelenést alapvetően kétféle módon lehet megoldani. Az egyik módszer az, ha a normál weboldalunk mellett csinálunk egy mobilra optimalizált oldalt is, és ha a rendszer azt érzékeli, hogy mobilról böngészik az oldalt, akkor automatikusan átirányít az ennek megfelelő változatra. Ez azonban több szempontból sem szerencsés. Először is megnehezíti a keresőoptimalizálást, mivel így más lesz az URL-cím és külön kell optimalizálni a mobil verziót is. A második nagy probléma ezekkel az weblapokkal kapcsolatban, hogy túlságosan leegyszerűsítik a mobil oldalt, és sok olyan funkció nem lesz elérhető, amit már a weblap normál verziójánál megszoktunk. A fenti problémák miatt döntöttem úgy, hogy a legújabb trendeket követve a másik módszerét választom a mobil eszközökre való optimalizálásnak, és egy responsive designnal ellátott webshopot készítek. Ez azt jelenti, hogy ugyanaz a weblap jelenik meg asztali gépeken és mobil eszközökön is, csak az elrendezés igazodik a képernyőmérethez. A responsive webdesign-nak megvan az az előnye, hogy a tartalom általában nem változik, és a funkciók hiánytalanul megmaradnak, így nem fogja azt érezni a felhasználó, hogy egy lebutított honlapon jár, csak azt veszi észre, hogy mennyire kézre áll az elrendezés. 9

3.1 A responsive design bemutatása A responsive webdesign azt jelenti, hogy van egy adott tartalma az oldalnak, amihez külön stíluslapokat illetve stílusbejegyzéseket rendelünk, és ezek különböző képernyőfelbontásokhoz igazodó elrendezéseket hoznak létre. Ennek segítségével tehát nem kell külön weboldalakat fejleszteni mobilra vagy tabletre, mert a tartalom előre megírt módon igazodik a különböző felbontású készülékekhez, és így az mindig jól áttekinthető és olvasható marad. [7] A technika már 2010 óta jelen van, és azóta is terjed, de még mindig nagyon kevesen használják. Sokan vannak, akik nem igazán tartják előnyösnek ezt a megoldást, de azért a legtöbben, akik ismerik ezt a technológiát, pozitív véleménnyel vannak róla és elismerik, hogy nagyon sok előnnyel jár a használata. 3.2 A responsive design előnyei Az egyik legjelentősebb előnye a responsive webdesign-nak a költséghatékonyság. Több különálló oldal esetén több oldalt kell karban tartani, és a kifejlesztés is több energiát és pénzt emészt fel. Igaz, hogy egy responsive oldal kifejlesztése némileg többe kerül, mint egy átlagos weblapé, viszont ha külön készítünk mobilra optimalizált verziót is a honlapunknak, akkor már jelentősen olcsóbb egy responsive oldal. A költségeken túl, azt is be kell látnunk, hogy lehetetlen az összes készülékre külön weboldalt készíteni. Nagyon sokféle mobil eszköz van és nagyon különböző felbontással rendelkezhetnek. Számolni kell a mobiltelefonokkal, a tabletekkel, elterjedőben vannak az okostévék, illetve ott vannak az asztali számítógépek. A responsive webdesignban akár az összes képernyőfelbontáshoz is külön elrendezést hozhatunk létre anélkül, hogy külön weboldalakat kellene készítenünk. A gyakorlatban azonban 3-5 különböző elrendezést szoktak megtervezni, és mindig az adott eszközhöz legjobban illeszkedő jelenik meg, a képernyőfelbontásnak megfelelően. A responsive webdesign előnyihez sorolható az az alapvető tervezési szempont is, hogy a tartalom jól elkülönül a megjelenéstől, és így bármilyen eszközről is nézzük a weboldalt, a tartalom nem változik, csak a megjelenés. 10

Az, hogy a tartalom állandó, és csak a megjelenés változik, nem csak tervezési szempontból, hanem a felhasználók szempontjából is előnyös. Gyakran esnek abba a hibába a mobil változatot kifejlesztő személyek, hogy lebutítják a tartalmat. Ezt a legtöbb felhasználó nem szereti, sőt, egyenesen idegesíti őket és kényelmetlenül érzik magukat a weboldalon, mivel nem tudják az összes, jól megszokott funkciót igénybe venni, vagy a kívánt tartalmat elérni. Ez jobb esetben csak oda vezet, hogy átváltanak mobil eszközön is a desktop verzióra, rosszabb esetben elnavigálnak az oldalról és esetleg pont a konkurenciánál kötnek ki. Ha az első eset következik be, akkor az azt jelenti, hogy feleslegesen költöttünk rengeteg pénzt a mobil verzió kifejlesztésére. A második esetnél pedig értelemszerűen bevételkiesés, illetve adott esetben fontos ügyfelek elvesztése is bekövetkezhet. Ezért is előnyös tehát a responsive weboldal, mivel itt ugyanazokat a funkciókat és tartalmakat érheti el a felhasználó, csak egy olyan elrendezésben, ami kényelmesebben olvasható és áttekinthető az adott eszközön. Utolsó, de nagyon fontos előnyként szeretném megemlíteni a keresőoptimalizálást. A Google és a Microsoft (Bing) is hivatalosan jelezte, hogy az egy és közös URL-t ajánlják, szemben a külön mobilokra létrehozott aldomaines és egyéb megoldásokkal (pl. m.domain.hu). Ezen kívül a Google külön elérhetővé tett olyan segédanyagokat, amik a responsive weboldal megvalósításában nyújtanak segítséget. Nem kérdés tehát, hogy mindenképpen helye van a webfejlesztésben a responsive webdesignnak, és egyre jobban terjed majd az elkövetkezendő években, követve a mobil eszközök térnyerését és fejlődését. 3.3 Szükséges technológiák A responsive weboldalak elődjének tekinthetők a fluid, azaz változó szélességű oldalak. Ezek úgy működnek, hogy az elemek szélességét százalékosan adjuk meg, és így ez igazodik a képernyőhöz. Ezt lehet kombinálni a max-width és min-width CSS attribútumokkal, amivel megadhatjuk, hogy mi az a maximális és minimális szélesség, amit az adott elem felvehet. Amíg a fluid weboldalaknál korábbi technológiák is használhatóak voltak, addig a valódi responsive webdesign megvalósításához már mindenképpen HTML5 és CSS3 technológiák szükségesek. 11

3.3.1 HTML5 A HTML5 korábbi verziója a HTML4.01, ami még 1999-ben jelent meg. Könnyen belátható, hogy ez már nagyon elavult, mivel azóta rengeteg változás és fejlődés ment végbe az internet világában. A HTML5 fejlesztése még most is folyamatban van, de már használható, és sok böngésző támogatja. Az új szabványban elhagytak néhány elemet a korábbiakból. Ilyenek például a <font> és a <center> elemek. Ezeket most már mindenképpen CSS kóddal kell megvalósítani. Rengeteg újítás került bele a HTML5-be. Ilyenek az újonnan megjelent tartalom specifikus elemek, mint például az <article>, a <footer>, a <header>, a <nav> és a <section> elemek. Ezek jelentése értelemszerűen következik a nevek magyar jelentéséből, így például a <nav> elem a navigációt jelenti, a <header> a fejléc, a <footer> pedig a lábléc. Ezeknek megfelelően egy általános HTML5 oldal így néz ki: <!DOCTYPE html> <html lang="hu"> <head> </head> <body> <header> <h1>főcím</h1> </header> <section> <nav> Navigáció </nav> Egyéb tartalom </section> <footer> Lábléc tartalma </footer> 12

</html> </body> A HTML5 újításai közé tartozik a jobb médiatámogatás. A <video> és az <audio> elemek segítségével könnyebb videót és hangfájlokat az oldalunkba ágyazni. Emellett jobb a 2D és 3D grafika támogatása is. A <canvas> elemmel 2 dimenziós rajzokat, alakzatokat készíthetünk, SVG segítségével pedig vektoros grafikai elemeket tudunk megjeleníteni, aminek nagy előnye, hogy minőségromlás nélkül nagyítható, kicsinyíthető és skálázható. A HTML5 támogatja a drag and drop -ot is, azaz egyszerűen meg tudjuk oldani, hogy a felhasználó bizonyos HTML elemeket (például képeket) meg tudjon fogni a kurzorral és át tudja helyezni őket valahova máshova az oldalon. A sok más előny között még érdemes megemlíteni azt is, hogy a HTML5 teljes mértékben támogatja a CSS3-at. A változások ellenére úgy tervezték a HTML5-öt, hogy visszafelé kompatibilis legyen és a korábbi HTML szabványokhoz készült elemzők a szokásos elemeket megértik. A HTML5-ről szóló információk a w3schools oldaláról [8] származnak, ahol a bemutatott kivonaton kívül sok más információ is elérhető. 3.3.2 CSS3 A HTML5-höz hasonlóan a CSS3 is még fejlesztés alatt áll, de a legtöbb böngésző már támogatja. Sok újítást tartalmaz a korábbi verzióhoz (CSS2) képest. Új attribútumok jelentek meg, például olyanok, amelyek segítségével létrehozhatunk lekerekített kerettel rendelkező elemeket, árnyékokat, háttér és szöveg effekteket, vagy akár 2D-s és 3D-s transzformációkat (forgatás, nyújtás stb.) is. A responsive webdesign szempontjából azonban a legfontosabb újítás a Media Query-k támogatása. CSS2-ben még csak a különböző média típusokhoz tudtunk különböző formázást rendelni. Ilyen volt például a nyomtatási nézet. A Media Query-k segítségével már azt is meg tudjuk adni, hogy különböző képernyőfelbontások esetén milyen CSS formázás érvényesüljön. [9] 13

A Media Query-vel sokféle paramétertől tudjuk függővé tenni az éppen használni kívánt formázást. A legegyszerűbb width/height és a device-width/device-height tulajdonságok használata. A device-with és a device-height a képernyő teljes felbontását jelöli, míg a width és a height a látható terület szélességét és magasságát, tehát azt a területet, amin megjelenik a weblapunk. Ezeknek a tulajdonságoknak megadhatunk minimum és maximum értéket, és így különböző intervallumokat hozhatunk létre, amikhez egyedi formázást rendelhetünk. @media screen and (min-device-width: 600px) and (max-devie-width: 900px) {.menu { width: 600px; } } A fenti példán jól látszik, hogy egyszerre több feltételt is megadhatunk. A kód hatására a menu osztályba tartozó elem 600 pixel széles lesz, amennyiben legalább 600 pixel és legfeljebb 900 pixel széles az adott eszköz képernyőfelbontása és a media értéke screen, azaz normál képernyő módban nézzük a weboldalt. A felbontáson kívül azt is vizsgálhatjuk, hogy az eszköz éppen álló vagy fekvő módban van. Erre az orientation-t használjuk, aminek az értéke lehet landscape, azaz fekvő, vagy portrait, azaz álló. Az alábbi példa egy álló módban lévő eszközön megjelenő formázást mutat: @media screen and (orientation: portrait) {.menu { width: 600px; } } Van még lehetőség a képarány (aspect-ratio) vizsgálatára is, de akár konkrét eszköz típushoz (pl. iphone 4) is megadhatunk egyedi formázást. A különböző formázási egységek tárolásának alapvetően két módja van. Az egyik módszer az, hogy egy darab CSS fájlban tároljuk az összes eszköztípusnak megfelelő formázást. Ekkor ezt az egy CSS fájlt kapcsoljuk az oldalhoz, és ebben van az összes Media Query. 14

Általában a fájl elején megadjuk az általános formázásokat, azaz azokat, amiket alapértelmezettnek szeretnénk tekinteni. Ezek után pedig a különböző képernyőfelbontásokra vagy eszköztípusokra megadjuk azokat a formázásokat, amiken módosítani szeretnénk, ha az adott feltételek teljesülnek. Példa:.menu { } width: 800px; @media screen and (min-device-width: 600px) and (max-devie-width: 800px) {.menu { width: 600px; } } @media screen and (max-devie-width: 599px) {.menu { width: 100%; } } A fenti példában a menu osztállyal ellátott elem 800 pixel széles alapértelmezetten, de ha 800 és 600 pixel között van a kijelző felbontása, akkor csak 600 pixel széles lesz az elem. Ha pedig kisebb a felbontás, mint 600 pixel akkor a menu elem szélessége 100% lesz, azaz pontosan a rendelkezésre álló helyet fogja kiölteni. A másik lehetőség a formázás tárolására, hogy több CSS fájlban tároljuk a különböző eszközöknek megfelelő formázásokat, és így annyi CSS fájlunk lesz, ahány különböző elrendezése van az adott honlapnak. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 15

A fenti kódrészletben két különböző CSS fájlunk van, és attól függ, hogy melyik lesz érvényben, hogy a készülékünk álló, vagy fekvő módban van-e. A példák részben a [9] és [10] források alapján kerültek ismertetésre. 16

4 Keresőoptimalizálás A responsive webdesign-on túl nagy hangsúlyt szeretnék arra fordítani, hogy könnyű legyen a webáruház keresőoptimalizálását megvalósítani. Ehhez azonban először tisztázni kell, hogy milyen követelményei is vannak a keresőoptimalizálásnak vagy más néven a SEO-nak (Search Engine Optimalization). Alapvetően két részre lehet bontani a keresőoptimalizálást: van onsite SEO és offsite SEO. Az első jelenti azokat a tennivalókat, amiket az optimalizálni kívánt weboldalon kell megcsinálni. Ez nagyészt az oldal tartalmi, szerkezeti követelményeit foglalja magába. Az offsite SEO pedig ezzel szemben az oldalunkon kívüli optimalizálási feladatokat jelenti. Ide tartozik például a linképítés, a blogírás, a sajtóközlemények, a PR cikkek, vagy az SMO (Social Media Optimalization), azaz a közösségi média optimalizálása. 4.1 Onsite SEO A webáruház kifejlesztése szempontjából az onsite SEO-t kell figyelembe venni és könnyen kezelhetővé tenni, mivel ez az, ami közvetlen kapcsolatban van az oldal taralmával és felépítésével. A következőekben a legfontosabb néhány elemet fogom bemutatni a teljesség igénye nélkül. 4.1.1 Title elem A Google webmastereknek szóló ajánlása [11] szerint a <title> tag mind a felhasználók, mind pedig a keresőmotorok számára közli az adott oldal témáját. A <title> tag elemet a HTML dokumentum <head> részében kell elhelyezni. Ideális esetben a webhely minden egyes oldalához egyedi fejlécet érdemes készíteni. Minden aloldalnak olyan címet kell adni, ami tükrözi a témáját, és tartalmaznia kell azokat a kulcsszavakat, amelyeket az aloldalon fontosnak gondolunk. Emellett jó, ha tartalmazza az oldal címe a vállalkozás nevét is, mivel ez is egy fontos információ. Az <title> elem címének tartalma megjelenik a keresési találatokban is, tehát érdemes nagy hangsúlyt fektetni a kialakítására. A cím ajánlott hossza maximum 70 karakter. 17

Példa egy jó title elemre egy mobil webshop főoldalán: Olcsó mobiltelefon vásárlás, webáruház MobilShop.hu Leggyakrabban megjelenő hibás title elemek: mobilshop.hu, Főoldal, webáruház, mobilshop stb. Az előzőekben az volt a hiba, hogy túl rövidek és általánosak voltak a leírások, de ugyanúgy rossz, ha nagyon hosszú a title elem egy oldalon, vagy csak kulcsszavakat sorolunk fel: Mobil, telefon, olcsó mobil, mobil vásárlás, telefon webáruház. 4.1.2 Meta Description elem Az oldalt leíró description metatag célja, hogy tájékoztassa a keresőmotorokat az oldal tartalmával kapcsolatban. Amíg a fejléc csak néhány szó vagy kifejezés lehet, a description metatag lehet egy-két mondat, vagy egy rövidebb bekezdés is - írja a Google útmutatója [11]. A <title> elemhez hasonlóan ez az elem is a HTML dokumentum <head> tagjei között helyezkedik el. Itt is fontos, hogy mindenhova különböző leírást adjunk meg, és elkülönüljenek az aloldalaink tartalmilag. A leírás szintén megjelenhet a keresési találatok között, amennyiben az releváns a keresett kulcsszóra. Ezért ennek a megfelelő kialakítása jó lehetőség arra, hogy felkeltsük a felhasználók érdeklődését, akik így nagyobb valószínűséggel látogatják meg a weboldalunkat. A meta leírás helyes formája: <meta name="description" content="oldal leírása"> Maradva a mobilos webáruház példánál, egy jó leírás lehet az oldalról a következő: Mobiltelefonok és mobilos kiegészítők webáruháza. Folyamatos akciók és kedvező árak, ingyenes szállítás!. A leggyakrabban előforduló hibák közé tartozik az üres, hiányzó leírás, a túl rövid vagy hosszú leírás, az oldal tartalmától eltérő leírás, vagy ha a leírásunk csak kulcsszavak felsorolásából áll. 4.1.3 Címsorok A címsornak az fő feladata, hogy hangsúlyozza az oldal tartalmi szerkezetét a felhasználó felé. Hatféle méretű címsor elemet használhatunk, ezek közül a <h1> a leghangsúlyosabb, a <h6> pedig a legkevésbé fontos. A címsor elemekben lévő szöveg általában nagyobb 18

méretben jelenik meg, és ez felhívja a felhasználó figyelmét, hogy az adott szöveg fontos, és tájékoztatást ad az alatta lévő szövegről vagy más tartalomról. A különféle címsor méretekkel egy hierarchikus szöveget tudunk kialakítani, ami lehetővé teszi, hogy a felhasználók jobban átlássák az oldalt, és könnyebben tájékozódjanak a szövegben. [11] A keresők nagyobb hangsúllyal veszik figyelembe a címsorokat, mint a többi szöveget, ezért ajánlott ezekben is szerepeltetni az oldalunk főbb kulcsszavait. Kerülni kell azonban a túlzott használatukat is, mert fontos hogy a címsorok legyenek egyensúlyban az oldal többi tartalmi részével. Azt még mindenképp figyelembe kell venni, hogy minden oldalon egy darab <h1> elem legyen és mivel ez a leghangsúlyosabb, szerepeljen benne az adott oldalra vonatkozó legfontosabb kulcsszó vagy kulcsszavak. Egy webáruház főoldalán a Címsor1, azaz H1 elem lehet például a következő: Mobiltelefon webáruház. Az egyik kategóriaoldalon pedig így nézhet ki ugyanez: Nokia mobiltelefonok. A tipikus hibák itt is hasonlítanak az előzőekhez, azaz nem jó például, ha hiányzik a címsor elem, nem illeszkedik az oldal tartalmához, esetleg túl hosszú, vagy ha túl sok címsort használunk és a többi szöveg pedig kevés ehhez képest. 4.1.4 Keresőbarát URL A jó URL cím nemcsak a webhely könnyű átláthatóságában segít, de ahhoz is nagyban hozzájárul, hogy a keresők jobban megértsék az oldalunk struktúráját és könnyebben feltérképezhessék azt. Ezen kívül szívesebben is hivatkoznak mások a weboldalunkra, ha könnyen használható, rövid és barátságos URL címe van. Sok látogatót megrémíthet, ha nagyon hosszú az URL cím, és könnyen felismerhető szavak helyett ismeretlen és beazonosíthatatlan karaktersorozatokat tartalmaz. Bevett szokás az is, hogy úgy hivatkoznak egy oldalra, hogy az URL-t használják horgonyszövegként, és ilyenkor még inkább szerencsés, ha az a tartalomhoz kapcsolódó szavakat tartalmaz. Végezetül érdemes számításba venni azt is, hogy az oldalhoz tartozó URL cím megjelenik a keresési eredményekben az oldal címe alatt. A fejléchez és a leíráshoz hasonlóan a keresett szavak az URL-ben is félkövéren jelennek meg. [11] Jó példák URL címekre: 19

mobilshop.hu/kategoria/nokia mobilshop.hu/tartozekok/nokia/fulhallgato.html Rossz URL példák: mobilshop.hu/index.php?ka_id=120&termek_id=3412 mobilshop.hu/hu/component/content/article/2-uncategorised/110-telefonok 4.2 Keresőoptimalizálhatóság megvalósítása Mint az előzőekben kiderült, rengeteg paramétert szükséges megfelelően beállítani ahhoz, hogy oldalunk jól teljesítsen a keresőben. Ezeket azonban nem a forráskódba kell rögzíteni, hanem beállíthatóak és módosíthatóak kell, hogy legyenek egy admin felületről. Ez azt jelenti, hogy be kell, hogy lehessen állítani az admin felületen az oldal fontosabb elemeit. Ilyenek többek között a <title> és a <meta name= description > elemek. Fontos hogy ezek minden aloldalon külön testreszabhatóak legyenek az igényeknek megfelelően. Tehát be kell, hogy tudjunk állítani minden fontos elemet és leírást külön a főoldalra, a kapcsolat oldalra, vagy például a vevőszolgálat oldalra. Vannak azonban olyan dinamikusan generálódó oldalak, ahol ez nem megvalósítható. Ilyenek például a webshopnál a termékoldalak, vagy a termékkategóriák oldalai. Ezeknél az oldalaknál a webshop maga kell, hogy legenerálja a fontos elemeket: a title elemet, a meta description elemet, a keresőbarát URL-t és a H1 taget. Ezek az elemek célszerűen a termék megnevezéséből állnak elő az előre beállított módon. Például a termék neve legyen Nokia mobiltelefon, ekkor a legenerált title elem lehet az Eladó Nokia mobiltelefon XY webáruház, az URL pedig weboldal.hu/termekek/nokia-mobiltelefon/. A termék megnevezése alapján legenerált ékezet, szóköz és különleges karakter nélküli URLrészletet érdemes külön tárolni az adatbázisban, és így ha valamilyen okból változtatunk valamit a termék megnevezésén, akkor sem fog változni az elérési út. Ez azért jó, mivel ha már korábban beindexelte a keresőmotor az adott termék oldalát, akkor azt az URL-t fogja kihozni a találatok között, de ha ez közben megváltozik, akkor a felhasználó rossz helyre 20

kerül, és valószínűleg 404-es hiba következik be. Emiatt az URL-t csak nagyon kevés esetben érdemes megváltoztatni. A keresőoptimalizálás megvalósításához tartozik még, hogy meg lehessen adni egy általános megnevezést az oldalnak. Ilyen lehet például az XY autó kereskedés. Ha ez meg van, akkor célszerű ezt a nevet minden legenerált fejlécszöveg végére beszúrni, így az jól leírja az oldal tartalmát és azt is, hogy milyen weboldalon járunk. Ekkor egy megfelelően legenerált fejlécszöveg lehet például az Eladó BMV gépkocsi - XY autó kereskedés. Ha egy ilyen szöveg jelenik meg a kereső találati listájában, akkor a felhasználó egyből tudni fogja, hogy miről szól az oldal, és hogy hova kerül, ha rákattint a hivatkozásra. 21

5 A webáruház alkalmazás elkészítése Ebben a fejezetben már a konkrét alkalmazásról lesz szó. Először kifejtem, hogy milyen követelményeknek kell, hogy megfeleljen a webáruház, és leírom a tervezés lépéseit. Ezek után bemutatom a már elkészített alkalmazás működését. Mivel az elkészült webshop motor nagyon összetett, ezért nincs lehetőség minden részére kitérni, és így legfőképpen a responsive megjelenést és a keresőbarát felépítést fogom részletezni. 5.1 Általános követelmények A webshop motor elkészítése előtt fontos felállítani azokat az általános követelményeket, amiknek mindenképpen meg kell, hogy feleljen az alkalmazás. Ezek az elvárások elengedhetetlen feltételei a hatékony működésnek és a felhasználói igények kielégítésének. A legelső követelmény természetesen az alapvető webáruház funkciók megléte. Kezelni kell, hogy tudjon a rendszer termékeket. Fontos, hogy a termékek elérhetőek, megtalálhatóak legyenek, ehhez kategóriákba kell őket rendezni. Ezek a kategóriák egyfajta csoportosítását jelentik a termékeknek, de ez legtöbbször nem elég, így jó, ha a kategóriákat nem lefedő tulajdonságok szerint is lehet böngészni, ezért egy másikfajta csoportosításként címkékkel is érdemes a termékeket megjelölni. Ha valaki egy konkrét dolgot szeretne megtalálni, akkor ahhoz pedig egy jól működő kulcsszavas kereső szükséges. A termékek ára is meg kell, hogy jelenjen a webshopban. Mivel a rendszer magyarországi használatra és kiskereskedelmi célokra készül, ezért az árakat forintban kell megadni és a vásárlók által ténylegesen fizetendő bruttó összegeket kell kiírni. Alapvető követelmény még, hogy lehessen a termékhez akciós árat is megadni, amiket a rendszer külön kiemelve jelenít meg. Sok webáruháznál probléma, hogy nincs egyértelműen feltüntetve minden termékhez a szállítási díj, ezért a készülő webshop termékoldalán külön helyet kell kapnia a szállítási opcióknak és díjaknak. Mivel a rendszer olyan termékekhez készül, amik jelentősen eltérhetnek méretben és súlyban is, ezért fontos, hogy minden termékhez egyedileg lehessen megadni a szállítási díjakat. Manapság nagyon sok helyen lehet ingyenes 22

szállítással is vásárolni, és ez jelentősen megnöveli a vásárlói kedvet, ezért ennek a lehetőségét is be kell építeni a rendszerbe. Kritikus pontja a webáruházaknak a vásárlás folyamata, ezért ennek a megtervezése nagy körültekintést igényel. Fontos, hogy a vásárlás menete egyszerű legyen, és ne álljon sok lépésből, valamint a vásárlóknak csak a legszükségesebb adatokat kelljen megadniuk. A vásárlás legalapvetőbb módja a webshopokban a kosár használata, ezért lehetőséget kell biztosítani a felhasználóknak, hogy egy virtuális kosárba tudjanak termékeket rakni, majd utána ezeket egyben megvásárolni. Ha valaki csak egy terméket szeretne a legegyszerűbben és leggyorsabban megvenni, akkor kell egy gyors vásárlási mód, ami a kosártól függetlenül működik. A vásárláshoz tartozó követelmény még, hogy ne csak regisztráció után lehessen megvenni valamit, hanem akár vendégként is. Ekkor ugyanúgy kell működnie a kosárnak és az egyetlen termék gyors megvásárlásának is. Ez azért fontos, mert a regisztráció kikényszerítése elrettentően hathat, és a sokan emiatt nem vásárolnak. A mai trendeket követve, meg kell valósítani a közösségi média integrációt is. Biztosítani kell, hogy a látogatók többféle hálózaton is megoszthassák az ismerőseikkel a különböző termékeket, vagy az egész weboldalt. Mivel manapság nagyon nehéz sikerre vinni egy webáruházat, ha nem szerepel jól az internetes keresőkben, ezért nagyon fontos a keresőbarát felépítés. Ez az egész rendszer kialakítására hatással van, ezért a tervezés folyamata során mindig szem előtt kell tartani a keresőoptimalizálási alapelveket, amiket korábban már említettem is. Egy korábbi fejezetben már kifejtettem azt a tényt is, hogy egyre többen interneteznek mobil eszközökről. Ha egy weboldal nem jól jelenik meg mobilon vagy táblagépen, akkor az felhasználói elégedetlenséghez vezet, és sok vásárlót veszíthetünk így el. Ezért meg kell oldani, hogy megfelelően jelenjen meg a webáruház mindenféle eszközön, mégpedig úgy, hogy az összes funkció elérhető maradjon. 23

5.2 Funkció specifikáció Az alkalmazás három különböző felhasználói típussal kerül kapcsolatba működése során. Ezek a látogatók, a regisztrált felhasználók és az adminisztrátorok. Az egyes csoportok jellemzői, és a velük kapcsolatos elvárások: Látogató: Bejelentkezés nélkül használják az alkalmazást. Számukra is elérhetővé kell tenni a főbb funkciókat, mint például a termékek böngészését, vagy a vásárlást. Felhasználó: A látogatók regisztrálhatnak a rendszerbe, ami után be tudnak lépni, és így regisztrált felhasználóvá válnak. A külön nekik szánt funkciók csak bejelentkezés után érhetőek el. Van egy személyes menü a bejelentkezett felhasználók részére, itt tudják kezelni az üzeneteiket, a rendeléseiket, illetve a személyes beállításaikat. Adminisztrátor: Különleges jogosultságokkal rendelkező felhasználó, aki be tud lépni a külön adminisztrációs célokra létrehozott oldalra, ahol tudja kezelni a termékeket, illetve minden fontos beállítást el tud végezni, ami a webáruházzal kapcsolatos. 5.2.1 Használati eset diagram A használati eset, vagy Use Case diagram megrajzolásának első lépéseként, meg kell határozni, hogy mik azok a külső elemek, amik kapcsolatban állnak, kommunikálnak az alkalmazással. Ezeket hívjuk aktoroknak, és ezek azonosak a három felhasználói csoporttal. Az aktorokat az 5. ábra mutatja: 5. ábra: Aktorok A három lehetséges aktor tehát a látogató, a bejelentkezett felhasználó és az adminisztrátor. Ha megvizsgáljuk az aktorok közötti viszonyokat, akkor kiderül, hogy a felhasználó a 24

látogató egy speciális változata, mivel minden funkciót használhat, amit a látogató, és ezen kívül még plusz funkciókhoz is hozzáfér. Így tehát általánosítás viszony van közöttük. Az adminisztrátor nem áll kapcsolatban a másik két aktorral. Az aktorok meghatározása után a hozzájuk tartozó használati eseteket kell megadni. Vegyük sorra, hogy az egyes felhasználói típusok milyen funkciókon keresztül kapcsolódnak a webáruházhoz. 5.2.1.1 Látogatók használati esetei Termékek listázása o Utoljára nézett termékek o Akciós termékek o Legújabb termékek o Adott kategória termékei o Adott címke termékei Termékek megtekintése o Képek megtekintése Nagyítás o Kedvencekhez adás o Kosárba helyezés o Megosztás a közösségi médiában Kosár kezelése o Vásárlás o Törlés Kedvenc termékek kezelése o Vásárlás o Törlés Hírlevél feliratkozás Regisztráció Termékek listázása: A látogató megtekintheti az eladásra kínált termékeket. Ezt megteheti például úgy, hogy kiválaszt egy konkrét kategóriát vagy alkategóriát. Ezen kívül megnézhet egy adott címkéhez tartozó termékeket, vagy kiválaszthatja a legújabb vagy az 25

akciós termékeket is. A rendszer eltárolja azt is, hogy egy adott látogató miket nézett meg, így a korábban nézett termékek között is böngészhet. Termék megtekintése: Egy adott termékről minden információ elérhető kell, hogy legyen, például a részletes leírás, a szállítási opciók, vagy a termékképek. Lehetőség van a kedvencekhez adásra, kérdés feltevésére, vagy a terméklap többféle megosztására. A látogató ezeken kívül még beteheti a kosarába a terméket, de akár azonnal meg is veheti. Kosár kezelése: Ha a látogató belerakott a kosarába egy vagy több terméket, akkor törölhet is onnan, valamint lehetőség van az összes kosárban lévő termék megrendelésére. Kedvencek kezelése: Itt tárolja el a látogató azokat a termékeket, amik tetszenek neki, vagy esetleg később szeretne belőlük vásárolni. Lehetőség van innen is törölni, vagy egy terméket azonnal megvásárolni. Feliratkozás a hírlevélre: Bárki feliratkozhat, ehhez csak az email-címét és a keresztnevét kell megadnia. Regisztráció: A regisztrációnál meg kell adni a felhasználói nevet és a jelszót, valamint a szállítási adatokat, így ha később vásárol, akkor már semmit sem kell újra beírni, minden adatot kitölt a rendszer. 5.2.1.2 Bejelentkezett felhasználók használati esetei Üzenetek kezelése o Üzenetek megtekintése o Üzenet küldése o Válasz írása Beállítások elvégzése o Adatok módosítása Rendelések kezelése o Rendelések megtekintése o Rendelés értékelése Belépés Kilépés 26

Üzenetek kezelése: A belépett felhasználók tehetnek fel kérdéseket az egyes termékekhez, és egy helyen megtekinthetik a korábban elküldött kérdéseiket és az azokra kapott válaszokat, ezen kívül további üzenetváltásokra is lehetőség van. Beállítások elvégzése: Lehet módosítani a személyes adatokat, a belépési jelszót, valamint a szállítási és számlázási adatokat. Rendelések kezelése: Egy helyen meg lehet tekinteni az összes korábbi rendelést, nyomon lehet követni a státuszukat, valamint véleményt is írhatnak a rendelés teljesülése után. Belépés: A belépés szükséges az összes felhasználói funkció eléréséhez. Kilépés: A felhasználóknak ki is kell tudniuk lépni biztonsági okokból, így ha utánuk más böngészi ugyan onnan az oldalt, akkor nem tudnak kárt okozni. 5.2.1.3 Adminisztrátorok használati esetei Termékek kezelése o Termék szerkesztése o Új termék felvitele Rendelések kezelése o Rendelések megtekintése o Megjelölés postázottnak Kérdések kezelése o Válasz írása o Engedélyezés, hogy megjelenjen a terméklapon o Kérdés törlése Felhasználók kezelése o Felhasználók megtekintése o Felhasználó törlése Kategóriák kezelése o Kategória szerkesztése o Új kategória felvitele o Kategória törlése 27

Beállítások elvégzése o Oldal címének és leírásának módosítása o ÁSZF módosítása Termékek kezelése: Az adminisztrátornak lehetősége van új termék feltöltésére, illetve a korábban feltöltött termékek szerkesztésére. Rendelések kezelése: A leadott rendeléseket meg lehet tekinteni, illetve meg lehet azokat jelölni postázottnak. Kérdések kezelése: Lehetőség van a kérdések engedélyezésére, hogy megjelenjenek a terméklapon és mások is láthassák. Ezen kívül lehet válaszolni a kérdésekre és törölni őket véglegesen. Felhasználók megtekintése: Lehetőség van a regisztrált felhasználókat kilistázni, és megnézni a hozzájuk tartozó adatokat, információkat. Kategóriák kezelése: Lehetőség van a kategóriák adatainak szerkesztésére, például a nevek, leírások, URL-ek megváltoztatására. Ezen kívül lehet új kategóriát hozzáadni, vagy egy régit törölni. A kategóriák lehetnek fő és alkategóriák is. Beállítások elvégzése: Be lehet állítani az oldalakhoz tartozó általános adatokat, ilyen például a fejléc szövege, a meta leírás, vagy a keresőbarát URL. Ezen kívül lehet még módosítani az Általános Szerződési Feltételek szövegét. A felhasználói és admin funkciók Use Case diagramjai a melléklet 13-14. ábráin láthatók. 5.3 Adatok tárolása A webshop adatainak a tárolásához a MySQL-t választottam, ami egy többfelhasználós, többszálú, SQL-alapú relációs adatbázis-kezelő rendszer. 5.3.1 ER modell Az adatbázis megtervezésénél először egy ER modellt (15. ábra a mellékletben) készítettem, ahol a következő egyedek szerepelnek: Felhasználók, Termékek, 28

Főkategóriák, Alkategóriák, Képek, Címek és Rendelések. A kapcsolatok között vannak több-több kapcsolatok, mint az Üzenetek, a Megtekintések, a Kedvencek és a Rendelt termékek, ezeken kívül pedig számos egy-több kapcsolat is van. 5.3.2 Relációs modell Az elkészített relációs modell a 16. ábrán látható. Egyes táblák magyarázatai: users: itt kerülnek tárolásra a regisztrált felhasználók belépési és egyéb személyes adatai, kivéve a postázási és szállítási címeket, mivel ezekből többet is meg lehet adni. users_cimek: itt tárolódnak a regisztrált felhasználókhoz kapcsolt címek, amik lehetnek számlázási, vagy postázási címek is. termekek: ebben a táblában van az áruházba feltöltött termékek összes adata. termek_kepek: mivel egy termékhez több képet is fel lehet tölteni, ezért egy külön táblában vannak letárolva a képek linkjei. Minden kép négy különböző méretben is el van mentve. fokategoriak: itt tárolódnak a fő termékkategóriák adatai, a sorrendjük, valamint a kategóriaoldalak keresőoptimalizálásához szükséges szövegek (pl. title, meta description). alkategoriak: itt tárolódnak a alkategóriák adatai, a sorrendjük, valamint a kategóriaoldalak keresőoptimalizálásához szükséges szövegek (pl. title, meta description). kosar: ez egy kapcsoló tábla, ami összekapcsolja a termékek tábláját a felhasználók, vagy a vendégek táblájával, és így az összes kosárba betett elem itt kerül tárolásra. kedvencek: ez a tábla teljesen megegyezik a kosar táblával, viszont itt az kerül tárolásra, hogy a felhasználók, vagy a vendégek mely termékeket tették be a kedvenceik közé. hirlevel: ebben a táblában kerülnek tárolásra a hírlevélre feliratkozott személyek adatai, azaz a keresztnevük és az e-mail címük. uzenetek: a teljes üzenetküldő rendszer adatai itt kerülnek tárolásra, azaz az üzenetek szövegei, a feladók és a címzettek. Lehet egy üzenetre válaszolni is, és így az üzenet előzménye is letárolásra kerül. A termékekhez érkezett kérdések is ide tartoznak. 29

megtekintesek: ez a tábla tárolja azt, hogy a felhasználók, vagy a látogatók mely termékeket nézték már meg. Ez alapján kerülnek listázásra az utoljára megtekintett termékek, valamint az is innen derül ki, hogy hányan néztek meg egy adott terméket. rendelesek: a rendelések adatai ebben a táblában kerülnek tárolásra, például az, hogy melyik felhasználóhoz vagy látogatóhoz tartozik. rendeles_cimek: minden rendeléshez tartozhat egy szállítási és egy számlázási cím, és ezek ebbe a táblába kerülnek. rendeles_termekek: akár egy, akár több terméket vesz meg valaki, a megvásárolt termékek listája ide kerül, az vásárlás pillanatában aktuális árakkal és egyéb adatokkal együtt. szovegek: ide olyan módosítható szövegek kerülnek, amik kiírásra kerülnek a webáruház valamelyik oldalán. seo: ide kerül a legtöbb oldalhoz tartozó SEO elemek szövege, azaz például a title elem, vagy a meta description. 5.4 Osztályok tervezése Mivel a webáruház elkészítésénél a keresőoptimalizált felépítést és a responsive megjelenést kezeltem nagyobb hangsúllyal, ezért az osztályok tervezésére és megvalósítására kevesebb figyelmet fordítottam. A fő cél az volt, hogy működjön a rendszer, és élesben is kipróbálható legyen az összes funkció. A megírt osztályok többségének fő feladata az adatok lekérdezése az adatbázisból, és ezen adatok tárolása. A következőkben leírom, hogy milyen osztályokat készítettem el: DBConnection: ez az osztály felelős az adatbázis kapcsolatért. Ezen belül történik a kapcsolat létrehozása, bontása, és az adatbázis kiválasztása. A megvalósított osztály így néz ki: <?php class DBConnection { var $host = ""; var $user = ""; 30

var $pass = ""; var $name = ""; var $dbconn; function DBConnection($dbhost, $dbuser, $dbpass, $dbname) { $this->host = $dbhost; $this->user = $dbuser; $this->pass = $dbpass; $this->name = $dbname; } function connect() { $conn = mysql_connect($this->host,$this->user,$this->pass); if(!$conn) { die ("Adatbázis kapcsolódási hiba"); } else { $this->dbconn = $conn; } return $this->dbconn; } function selectdatabase() { mysql_select_db($this->name); if(mysql_error()) { echo "Nem található az adatbázis"; } } function closeconnection() { } mysql_close($this->dbconn); }?> 31

adattagok: Név host user pass name dbconn Leírás adatbázis host-ja adatbázis felhasználói név adatbázis jelszó adatbázis neve kiszolgáló azonosító metódusok: Név Visszatérési érték Leírás DBConnection nincs Konstruktor, beállítja a kapcsolat objektum tulajdonságait connect nincs Létrehozza az adatbázis kapcsolatot selectdatabase nincs Kiválasztja az adatbázist closeconnection nincs Zárja az adatbázis kapcsolatot Oldal: ez az osztály kérdezi le és tárolja a különböző oldalak olyan tulajdonságait, mint például a Title, vagy a Meta Description elem. Nagy jelentősége van ennek az osztálynak az aloldalak keresőoptimalizált struktúrájának kialakításában. adattagok: Név title description keywords Leírás egy oldal title eleme egy oldal meta description eleme egy oldal meta keywords eleme 32

metódusok: Név Visszatérési érték Leírás lekerdez nincs az adatbázisban letárolt, nem dinamikusan generálódó oldalak tulajdonságait állítja be cimke nincs egy adott címkéhez tartozó terméklista oldal tulajdonságait állítja be termek nincs a terméklapok tulajdonságait állítja be fokategoria nincs a főkategória oldalak tulajdonságait állítja be alkategoria nincs az alkategória oldalak tulajdonságait állítja be Felhasznalo: ez az osztály kérdezi le a regisztrált felhasználók adatait. adattagok: Név id vez_nev ker_nev username belepes_id password_hash email Leírás egy felhasználó egyedi azonosítója egy felhasználó vezetékneve egy felhasználó keresztneve egy felhasználó belépési neve belépéskor generált biztonsági azonosító kódolt jelszó egy felhasználó email címe 33

uj_jelszo_kod uj_jelszo_kod_datum új jelszó generálásához szükséges azonosító új jelszó generálásához szükséges azonosító létrehozásának ideje metódusok: Név Visszatérési érték Leírás getfelhasznalobyid nincs beállítja a felhasználó adatait az egyedi azonosítója alapján getfelhasznalobyusername nincs beállítja a felhasználó adatait a felhasználói neve alapján getfelhasznalobyemail nincs beállítja a felhasználó adatait az email címe alapján Fokategoria: ez az osztály kérdezi le a fő termékkategóriák adatait. adattagok: Név id nev Leírás egy főkategória egyedi azonosítója egy főkategória neve azon egy főkategória nevéből generált ékezetmentes és leegyszerűsített sztring, ami megjelenik a keresőbarát url-ben leiras title keywords egy főkategória leírása, ami megjelenik a főkategória oldalon egy főkategória title eleme egy főkategória meta keywords eleme 34

description egy főkategória meta description eleme metódusok: Név Visszatérési érték Leírás getfokategoriabyid boolean beállítja a főkategória adatait az egyedi azonosítója alapján getfokategoriabyazon boolean beállítja a főkategória adatait az URL-ben megjelenő azonosító alapján vantermek boolean lekérdezi, hogy van-e megjelenítendő termék a kategóriában Alkategoria: ez az osztály kérdezi le az alkategóriák adatait. adattagok: Név id nev Leírás egy alkategória egyedi azonosítója egy alkategória neve azon egy alkategória nevéből generált ékezetmentes és leegyszerűsített sztring, ami megjelenik a keresőbarát url-ben fokat_id title keywords description a szülő főkategória egyedi azonosítója egy alkategória title eleme egy alkategória meta keywords eleme egy alkategória meta description eleme 35

metódusok: Név Visszatérési érték Leírás getalkategoriabyid boolean beállítja az alkategória adatait az egyedi azonosítója alapján getalkategoriabyazon boolean beállítja az alkategória adatait az URL-ben megjelenő azonosító alapján Termek: ez az osztály kérdezi le és tárolja a termékek adatait. adattagok: Név id megnevezes termek_azon leiras fokategoria alkategoria aktiv eladott ar akcios regi_ar hozzaadva Leírás egy termék egyedi azonosítója egy termék neve egy termék leegyszerűsített neve, ami az URL-ben is megjelenik egy termék leírása egy termék főkategóriájának azonosítója egy termék alkategóriájának azonosítója jelzi, hogy a termék aktív-e jelzi, hogy a termék el van-e adva a termák aktuális ára jelzi, hogy a termék akciós-e akciós terméknél ez a régi ár egy termék feltöltésének ideje 36

lejarat kepek_azon szall_ingyenes szall_dij szall_bp szall_m_ingyenes c1-c6 egy termék lejáratának ideje egyedi azonosító a termékhez tartozó képekhez ingyenes-e a szállítás egy termék szállítási díja belföldre kedvezményes szállítási díj Bp-re ingyenes-e a szállítás Miskolcon belül maximum 6 db címke metódusok: Név Visszatérési érték Leírás gettermekbyid boolean beállítja a termék adatait az egyedi azonosítója alapján TermekKep: egy termékkép különböző méretű változatainak elérési útjait tárolja. adattagok: Név kep_max kep_mid Leírás egy kép nagyméretű változata egy kép közepes méretű változata a terméklaphoz kep_termeklista egy kép kisméretű változata a terméklistához kep_min egy kép bélyegkép méretű változata 37

metódusok: Név Visszatérési érték Leírás gettermekfokep nincs egy termékhez tartozó fő kép adatainak lekérdezése és beállítása Uzenet: egy üzenet adatait tárolja. adattagok: Név id felado_id cimzett_id termek_id elozmeny_id tema uzenet olvasott engedelyezve feladas_datum Leírás egy üzenet egyedi azonosítója egy üzenet feladója egy üzenet címzettje egy üzenethez kapcsolódó termék egy üzenet előzménye, ha van ilyen egy üzenet témája üzenet szövege olvasta-e már a címzett az üzenetet engedélyezték-e az üzenet termék alatti megjelenését üzenet feladásának dátuma metódus nincs Rendeles: ez az osztály egy rendelés adatait tárolja. adattagok: 38

Név azon user_id vendeg_id nev email termekek_ara posta_koltseg_osszes datum fizetve feladva fizetesi_mod szallitasi_mod Leírás egy rendelés egyedi azonosítója rendelő felhasználó azonosítója rendelő vendég azonosítója rendelő neve rendelő email címe rendelt termékek összára postaköltség rendelés dátuma ki van-e fizetve postázva van-e a rendelés fizetési mód szállítási mód metódus nincs Cim: ez az osztály egy szállítási vagy számlázási cím adatait kérdezi le és tárolja. adattagok: Név tipus nev varos Leírás cím típusa, lehet szállítási vagy számlázási címhez tartozó név város 39

cím irsz tel adoszam utca, házszám stb. irányító szám telefonszám számlázási cím és cég esetén adószám metódusok: Név Visszatérési érték Leírás getcim boolean a rendelési azonosító alapján lekérdezi a szállítási vagy számlázási címet PHPMailer: előre megírt osztály, amit csak felhasználok. Az email-ek küldését végzi. Számtalan adattagot és metódust tartalmaz. 5.5 Kérések kiszolgálása A webáruház belépési pontja az index.php fájl. Bármelyik oldalt is akarjuk betölteni, az mind ezen keresztül történik. A következőképpen néz ki: <?php header( 'Content-type: text/html; charset=utf-8' ); ini_set("default_charset","utf-8"); require_once "load.php"; $conn = new DBConnection(DB_HOST, DB_USER, DB_PASS, DB_NAME); $conn->connect(); $conn->selectdatabase(); 40

require_once "muveletek.php"; require_once "header.php"; require_once "menu1.php"; require_once "menu2.php"; require_once "main.php"; require_once "footer.php"; $conn->closeconnection();?> Először megtörténnek a teljes oldalra vonatkozó karakterkódolási beállítások, ezután pedig betöltődik a load.php fájl, ami betölti a szükséges beállításokat, osztályokat és függvényeket tartalmazó fájlokat: <?php require_once "include/config.php"; require_once "include/mailer/mailer.php"; require_once "include/dbconnection.php"; require_once "include/dbfunctions.php"; require_once "include/functions.php"; require_once 'include/mobile_detect.php';?> Ezek után megtörténik az adatbázishoz való kapcsolódás a config.php fájlban letárolt beállítások és a DBConnection.php-ben lévő kapcsolódási osztály segítségével. Az adatbázis kapcsolat létrehozása után további szükséges fájlok töltődnek be. Az első a muveletek.php, és az ebben található összes kód még azelőtt fut le, mielőtt bármilyen kimenet generálódna. Itt történik a munkamenet kezelés, a felhasználók beléptetése, kiléptetése, és más POST és GET kérések feldolgozása. Ezután történik a webáruház különböző tartalmi részeit tároló fájlok betöltése. A header.php tartalmazza a html kód <head>..</head> részét, valamint a <body> elemnek az első részét, ami az oldal fejlécének felel meg. A menu1.php és a menu2.php fájlok felelősek a két menüsáv megjelenéséért, azaz a felhasználói menüért és a termékekkel kapcsolatos menüsávért. 41

Az eddigi részek alapvetően állandónak mondhatók a webáruház minden oldalán, utánuk következik viszont a main.php fájl, ami már a különböző oldalak tartalmait tölti be. Egy GET kérésben történik elküldésre, hogy a felhasználó hova is szeretne navigálni, és ebben a main.php fájlban történik ezeknek a kéréseknek a kiértékelése valamint a kért tartalom betöltése. Itt különül el a legjobban, hogy például a főoldalon vagyunk, a terméklistát böngésszük, esetleg éppen egy vásárlást fejezünk be. Végül eljutunk a footer.php-hoz. Ez az oldal láblécét tartalmazza, ami egy állandó, fix tartalom. Ezután pedig az adatbázis kapcsolat bontásával befejeződik az alkalmazás futása. 5.6 Keresőoptimalizálás megvalósítása Sokszor említettem már, hogy nagy hangsúlyt fordítottam a webáruház motor elkészítése során arra, hogy az elkészített oldal megfeleljen a keresőoptimalizálás alapelveinek. Az már leírtam, hogy mik is ezek az alaplevek, most pedig ismertetem, hogy hogyan is történt a rendszer egyszerű keresőoptimalizálhatóságának a megvalósítása. Először is létrehoztam egy globális változót a config.php fájlban, ami SITE_NAME nevet viseli. Itt lehet megadni az oldal nevét, ami minden aloldal betöltődésénél kifejti majd a hatását, tehát ez az egész webáruházra vonatkozó név. Ez lehet egy egyszerű név, mint például az elkészült példa weshopnál a RégiségOnline, vagy akár a domain nevet is megadhatjuk: regisegonline.hu. Ezen kívül minden más SEO beállítás attól függ, hogy melyik oldalról van szó. Több csoportba sorolhatjuk az oldalakat aszerint, hogy hogyan generálódnak le a keresőoptimalizáláshoz fontos elemek. Ezek a csoportok a következők: dedikált oldalak, kategória oldalak, egyéb terméklista oldalak és a terméklapok. 5.6.1 Dedikált oldalak Ezek olyan állandó oldalak, ahol lehetőség van előre beállítani a fontos elemeket. A következő oldalak tartoznak ide például: Főoldal Regisztráció Belépés oldala 42

Kapcsolatfelvétel oldal Oldaltérkép Rólunk oldal Vevőszolgálat Általános és szerződési feltételek Felhasználók személyes oldalai Kedvencek Vásárlási oldal A dedikált oldalak listája akár bővíthető is szükség szerint. Azt kell tudni ezekről az oldalakról, hogy minden hozzájuk kapcsolódó adat az adatbázisban tárolódik, és különkülön kell mindre beállítanunk a SEO szempontjából fontos elemek tartalmát az admin felületen, ami a következőképpen néz ki: 6. ábra: Dedikált oldalak beállításai az Admin felületen Vegyük példának a Kedvencek oldalt: Ennek meg kell adnunk egy általános nevet, ami lehet például a Kedvenc termékeim. Ez fog kerülni a kedvencek oldal H1 tagjába, azaz ez lesz a Címsor1. Ezután jön egy azonosító, ami egy egyedi karaktersorozat, és ez alapján történik az oldal adatainak a lekérdezése. Legyen ez például egyszerűen kedvencek. Itt 43

tudjuk még megadni a <title> elemet, valamint a <meta name= description > és a <meta name= keywords > elemeket. Ezekből a title lehet például a következő a kedvencek oldalon: Kedvenc termékeim. Az oldalak adatait az Oldal osztály tárolja, és a dedikált oldalak SEO elemeit a lekerdez() függvénnyel tudjuk beállítani. Tehát ha a kedvencek oldal töltődik be például, akkor a következőképpen történik a lekérdezés: $shop_oldal = new Oldal(); $shop_oldal->lekerdez( kedvencek ); Ez után a következőképpen történik a fontosabb elemek kiírása: <head> <title><?php echo $shop_oldal->title." - ".SITE_NAME;?></title> <meta name="keywords" content="<?php echo $shop_oldal->keywords;?>" /> <meta name="description" content="<?php echo $shop_oldal->description;?>" />... </head> Észrevehető, hogy a title elemhez még hozzáíródik az oldal neve is, ami így a fenti példánál maradva a következő lesz: Kedvenc termékeim - RégiségOnline. A dedikált oldalak létrehozása és teljes felügyelete még nem oldható meg az admin felületről, ez azt jelenti például, hogy hozzá tudunk adni új oldalt, mint az a 10. ábrán látható is, de ekkor még csak az adatbázisba kerülnek be az oldal adatai, és nem fog megjelenni a webáruházban. Ennek a legfőbb oka, hogy ezek az oldalak teljesen különbözőek lehetnek, és különböző szerepeket töltenek be a webáruházban, illetve a rájuk mutató linkek is más-más helyen találhatóak. Ahhoz, hogy egy új oldal működjön is, ki kell egészíteni a webshop forráskódját több helyen: kézzel kell létrehozni a rámutató linkeket egy tetszőleges részén az oldalnak létre kell hozni az oldal tartalmát egy tetszőleges, új oldal-neve.php fájlban a.htaccess fájlban létre kell hozni egy új bejegyzést a keresőbarát URL-hez például: RewriteRule ^kedvencek.htm$ index.php?oldal=8 [QSA] 44

a main.php fájlban be kell állítani, hogy az új oldal-neve.php fájl betöltődjön a megfelelő index.php?oldal=id kérés esetén. Új dedikált oldalak létrehozása tehát meglehetősen bonyolult feladat és ezek nagyrész egyedi megvalósítást igényelnek, de a már kész oldalak könnyen módosíthatók, kezelhetők. 5.6.2 Kategória oldalak A kategória oldalak abban hasonlítanak a dedikált oldalakhoz, hogy külön-külön be tudjuk állítani a fontosabb SEO elemek értékeit az admin felületről. A kategóriák és az oldalaik létrehozása azonban teljesen automatikus. Az admin felületen csak fel kell vinni egy új kategóriát, és az azonnal elérhetővé válik a webáruház megfelelő részeiből, és ezután már termékeket is hozzáadhatunk. A kategóriarendszer kétszintű, azaz vannak fő és alkategóriák. A fő és alkategóriáknál nagyrész ugyanazokat az elemeket tudjuk beállítani, mint a dedikált oldalaknál, de több helyen is van különbség. Itt a megadott azonosítóból áll elő automatikusan a keresőbarát URL, ami a hierarchiát is figyelembe veszi. Legyen például egy főkategória az Antik bútorok, és egy ezen belüli alkategória az Asztalok. Ezek azonosítói legyenek a következők: antik-butorok és asztalok. Ekkor ezek a kategóriák a következő URL címeken lesznek elérhetőek: regisegonline.hu/antik-butorok.htm regisegonline.hu/antik-butorok/asztalok.htm Így néznek ki tehát a követelményeknek megfelelő keresőbarát URL-ek, és ezeket teljesen automatikusan kezeli a rendszer. Az ezekre mutató linkek is automatikusan generálódnak a lenyíló Kategóriák menüből. A title, a description, és a keywords elmek generálása hasonlóan történik a dedikált oldalakhoz, csak más függvények állítják be az Oldal osztály attribútumait: $shop_oldal = new Oldal(); $shop_oldal->fokategoria($fokat_azon); //illetve 45

$shop_oldal = new Oldal(); $shop_oldal->alkategoria($alkat_azon); A $fokat_azon és a $alkat_azon változók megegyeznek az URL-ben is szereplő azonosítókkal, amiket szintén a.htaccess fájl ír át a következő módon: RewriteRule ^([^/]+)/([^/]+).htm$ index.php?kat=$1&alkat=$2 [QSA] RewriteRule ^([^/]+).htm$ index.php?kat=$1 [QSA] Az előzőekben mutatott regisegonline.hu/antik-butorok/asztalok.htm URL tehát a következő kéréssé alakul: regisegonline.hu/index.php?kat=antik-butorok&alkat=asztalok. Ezt már tudja értelmezni az oldal és ez alapján történik a megfelelő kategóriaoldal betöltése. Nem volt még szó a kategória oldalak H1-tagjáról, ami a főkategória/alkategória nevével egyezik meg. A főkategóriáknál van még egy plusz lehetőség az alkategóriákhoz képet. Itt meg lehet adni egy tetszőlegesen formázható ajánlót/leírást, ami megjelenik a főkategória oldalának a tetején, a H1-es címsor alatt. Ha ez megfelelőn van kitöltve, akkor növeli az oldal kulcsszósűrűségét, és ez elősegíti, hogy a kategória-oldalak is jobb helyen szerepeljenek a keresőkben. 5.6.3 Egyéb terméklista oldalak Ide tartozik az összes terméklista oldal, az előzőekben bemutatott kategória oldalakon kívül. Ezek az adott címkéhez tartozó termékek oldalai, a termékkereső által kiadott találatok oldala, valamint az akciós és friss termékek oldala. Az első kettő automatikusan generálódik, ha egy felhasználó rákattint egy címkére, vagy beír valamit a keresőbe. Az, hogy milyen módon generálódnak ezek az oldalak, az Oldal osztályban van rögzítve, és ezt kell átírni ha más szöveget szeretnénk. A címke oldalaknál így néznek ki a legenerált elemek jelenleg, ha például a porcelán címkéhez tartozó termékeket keressük: title: porcelán címke termékei RégiségOnline description: RégiségOnline webáruház termékei porcelán témában!... keywords: porcelán, antik, régiség 46

keresőbarát URL: regisegonline.hu/címke/porcelán H1 tag: porcelán termékek A címke neve tehát kiegészül egy előre beállított tetszőleges karaktersorozattal. A keresési találatoknál hasonlóan történik minden az előzőhöz, csak kicsit más a generált szöveg. Az akciós és a friss termékek oldala pedig a korábban leírt dedikált oldalakhoz hasonlóan működik, azaz az admin felületen lehet beállítani a hozzájuk kapcsolódó SEO elemek értékét. 5.6.4 Terméklapok A terméklapok azok az oldalak, ahol egyetlen termékhez tartozó információkat látunk. Ezek kiemelten fontosak keresőoptimalizálás szempontjából, mivel a legtöbben általában nem a webáruházunk általános tevékenységére keresnek rá, hanem egy konkrét termékre. Azért is érdekesek a terméklapok, mert itt SEO elemek több dologból generálódhatnak le, ugyanis egy terméknek nem csak neve, hanem leírása és kategóriája is van. A címke oldalakhoz hasonlóan a terméklapok SEO elemeinek a megalkotási módja az Oldal osztályban van megadva. Vegyünk példának egy 6 személyes ebédlőasztal terméket, ami az Antik bútorok/asztalok kategóriákban helyezkedik el. Ekkor a következőképpen történik a különböző elemek legenerálása: title: 6 személyes ebédlőasztal eladó RégiségOnline description: 6 személyes ebédlőasztal a Régiség Online-on kedvező áron. Nézze meg most! keywords: antik, régiség, eladás (erre nem szükséges nagy hangsúlyt fektetni, mivel mára már elvesztette jelenőségét a keywords elem) keresőbarát URL: regisegonline.hu/antik-butorok/asztalok/6-szemelyesebedloasztal-012.htm H1 tag: 6 személyes ebédlőasztal Az első három elem előállítási módja egyértelmű, az URL viszont igényel egy kis magyarázatot. Először is ugye beleíródnak a kategóriák is, ez azért jó, mert struktúráltabbá, átláthatóbbá teszi az oldal hierarchiáját. Nem kötelező a termékekhez alkategóriát is 47

megadni, és ha ez hiányzik, akkor egyszerűen csak eltűnik ez a rész az URL-ből. Például: regisegonline.hu/antik-butorok/elado-egyeb-butor-014.htm. Hozzáadódik még az URL-hez egy szám is, ami a termék egyedi azonosítója. Ez alapján azonosítja be a rendszer, hogy melyik terméket is kell mutatni. A.htaccess file-ban a következők szerint alakul át a keresőbarát URL ha van alkategória, vagy akkor ha nincs: RewriteRule ^([^/]+)/([^/]+)/([^/]+)-0([^/]+).htm$ index.php?kat=$1&alkat=$1&termek_nev=$3&termek=$4 [QSA] RewriteRule ^([^/]+)/([^/]+)-0([^/]+).htm$ index.php?kat=$1&termek_nev=$2&termek=$3 [QSA] Az alsó esetben tehát az előzőekben mutatott regisegonline.hu/antik-butorok/elado-egyebbutor-014.htm URL tehát a következő kéréssé alakul: regisegonline.hu/index.php?kat= antik-butorok&termek_nev=elado-egyeb-butor&termek=14. A terméklap keresőoptimalizálásához tartozik a jól megírt termékleírás. Ehhez különböző kiemeléseket is lehet használni, mint például a félkövér (<strong>), vagy a dőlt (<i>) betű. Ezekre a TinyMCE szerkesztővel nyílik lehetőség, amit integráltam az alkalmazásba: 7. ábra: Termékfeltöltés az Admin felületen 48

5.7 Responsive felhasználói felület A webáruház elkészítése során, a megfelelő működés mellett, a felhasználóbarát felületre is nagy hangsúlyt fordítottam. Arról már írtam korábban, hogy alapvető cél a mobilbarát megjelenés, így minden oldalnak a kinézetét és elrendezését több képernyőméretre is külön meg kellett tervezni. Alapvetően három verziót készítettem: egy mobil, egy tablet és egy asztali felhasználói felületet. Ha a kijelző kevesebb, mint 768 pixel széles, akkor a mobilos elrendezés töltődik be. Ekkor minden lényegi elem egymás alá kerül, és így a szűkebb képernyőkön is jól olvasható és átlátható marad a tartalom, nagyítás nélkül is. A 768 pixeles korlát, azért fontos, mivel így egy 1024x768 képponttal rendelkező képernyőnél még nem vált át mobilos nézetre, az ennél kisebbeknél viszont igen. A CSS fájlban így néz ki a mobilos nézet kódja: @media only screen and (max-width: 767px) { //Mobilos nézet CSS formázása } Ez tehát úgy működik, hogy ha 767 pixel, vagy kisebb kijelzővel rendelkező eszközön töltődik be az oldal, akkor a fent leírt részben lévő formázás felülírja a korábbiakat, és megváltozik az elrendezés. Ilyenkor minden elem 100%-os szélességgel jelenik meg, azaz kitöltik a teljes rendelkezésre álló teret. A legkisebb méret, amit számításba vettem a tervezés során, az a 480 pixel szélesség, ezt tehát egy 800x480-as, vagy egy 640x480-as készüléket jelent állított módban. Manapság már viszonylag kevés okostelefon rendelkezik ennél kisebb felbontással. Ennek ellenére a tapasztalatok szerint még 320 képpont szélességen is jól használható az oldal, de erre már nem végeztem komolyabb vizsgálatokat. Ha a kijelző 768 pixel széles vagy annál nagyobb, akkor az úgynevezett táblagépes elrendezés töltődik be. Ez egészes 980 képpont szélességig aktív. Az oldal teljes szélessége ekkor is mindig 100%, azaz kitölti a teljes rendelkezésre álló teret, azonban ekkor már 49

nincs minden egymás alá rendezve. Valójában ekkor minden ugyanúgy helyezkedik el egymáshoz képet, mint az asztali nézetben, csak a teljes szélesség igazodik a kijelzőhöz. @media only screen and (max-width: 980px) { //CSS formázás } Jól látszik tehát, hogy ha nagyobb a képernyő szélessége, mint 980 képpont, akkor a fenti CSS kód már érvényét veszti, és ekkor a teljes, asztali mód érvényesül. Az oldal szélessége ekkor rögzül 960 képpontra, és középre igazítódik, azaz ha ennél szélesebb a rendelkezésre álló hely, akkor két oldalt üres tér jön létre. Az oldalak teljes szélességét minden elrendezésnél a wrapper id-vel ellátott div elem határozza meg. Így elég csak ezt változtatni, mivel a közvetlen leszármazott elemei mind 100% szélességűek. Asztali elrendezésnél: div#wrapper { max-width: 958px; margin: 0 auto; } Egy-egy pixel szélesség a keretnek van meghagyva, ezért nem pontosan 960 képpont a szélesség. Mobilos és tabletes elrendezésnél: div#wrapper { max-width: 96%; margin: 0 auto; } Itt 2-2% margó marad mindkét oldalon kinézeti megfontolások miatt. A wrapper elemen belül vannak azok az elemek, amik megadják az oldal fő tagolását. Ezek a következőképpen néznek ki: 50

8. ábra: Felhasználói felület elrendezésének vázlata A 6. ábrán látható bal oldali elrendezés érvényes az asztali és a tabletes nézetre, a jobb oldali pedig a mobilosra. A főbb részek a következők: Fejléc: A fejléc az oldal legfelső része, tartalma pedig állandó. Itt található a webáruház címe és/vagy logója. Valamilyen reklám banner is elhelyezhető ide, vagy bármilyen tartalom, amit ki szeretnénk emelni. Menüsáv1: Közvetlenül a fejléc alatt helyezkedik el a felhasználói menü. Itt olyan menüpontok találhatóak meg, mint a személyes oldalra való belépés, a kosár, vagy a kedvenc termékek. A belépett felhasználóknak pedig itt tudnak kilépni is. Menüsáv2: A második menüsávban találhatóak a termékekkel kapcsolatos menüpontok. Itt lehet kiválasztani a termékkategóriákat egy lenyíló menüben, illetve külön el lehet érni az akciós illetve a legújabb termékeket. A kereső mező is itt található. Mobilos nézetben 51

annyi változik, hogy nem jelenik meg a lenyíló kategória menü, helyette itt a Kategóriák menüpontra kattintva egy új oldal jön be, ahol az összes termékkategória látható. Tartalom: Míg az előző három résznek nem függ a tartalma attól, hogy melyik aloldalon vagyunk, addig ez a rész mindig változik. Itt jelenik meg a főoldal tartalma, a terméklista, a termékoldal, a személyes menü stb. A 9. ábrán látható az előző négy elkülönülő rész megvalósítva a főoldalon. Jól kivehető a fejléc, a két menüsáv és a tartalmi rész az asztali nézetben. 9. ábra: Elkészült webáruház kezdőoldala 1 Oldalsáv: Ez egy olyan függőleges elrendezésű tartalmi egység, ahol tetszőlegesen meg tudunk jeleníteni olyan dolgokat, mint például a kosár tartalma, hírlevél feliratkozó űrlap, címkék listája, vagy termékajánlók. Nem minden lapon van oldalsáv, a főoldalon például nincs, de a terméklistánál, vagy a terméklapon már megjelenik. Lábléc: Ez a webáruház legalsó tartalmi egysége. Itt olyan menüpontok vannak például, mint a kapcsolatfelvétel, az általános szerződési feltételek, vagy az oldaltérkép. Ezen kívül egy hírlevél feliratkozó űrlap is került a láblécbe, ami a 10. ábrán látható. 52

10. ábra: Elkészült webáruház kezdőoldala 2 A 9. és 10. ábrán tehát a főoldal alsó és felső részének asztali gépekre szánt változatát lehet látni, a 11. ábrán pedig ugyanezek a részek láthatóak a mobilra szánt nézetben: 11. ábra: Elkészült webáruház kezdő oldala mobilon nézve 53

Azt is észre lehet venni, hogy van néhány elem, ami nem látszik a mobil nézetben. Ide tartozik egy-két banner illetve reklám, valamint a már korábban említett lenyíló kategória menü. Ezek eltüntetésének legfőbb oka, hogy így egyszerűsödik a mobilos oldal. Az adminisztrációs felület nem responsive. Ez azért maradt ki, mert a felhasználói felületen fontosabbnak tartottam ennek a megvalósítását. Az admin felület mobil eszközökre való optimalizálása egy későbbi fejlesztés lehet majd. 5.7.1 Terméklista oldalak Az előzőekben ismertettem, hogy hogyan néz ki a responsive felhasználói felület általánosan, most pedig egy konkrét oldal kialakítását fogom bemutatni. A terméklista oldalak megjelenésének a megvalósítása nem volt egyszerű, mivel sok terméknek kell rajta megjelenni, ráadásul egy oldalsávnak is el kell férnie ezek mellett. Az elemek elrendezése itt úgy néz ki, hogy bal oldalt található az oldalsáv, amiben több doboz is helyet kapott, mint például a kosár, a címkék, vagy az utoljára nézett termékek. Az oldalsáv az asztali és a tabletes nézetben 16%-ot foglal el a tartalmi részből: div#balsav { width: 16%; float: left; } Jobb oldalt helyezkedik el a terméklista, ami pedig 86%-át foglalja el a rendelkezésre álló helynek, a maradék egy százalék pedig üresen marad a bal és a jobb oldali rész között. div#jobbsav { width: 83%; float: right; } Ez a rész is tartalmaz további elemeket. Felül található az oldal címe, ami lehet az adott termékkategória neve, a keresett kulcsszó stb. Ez alatt lehet még lapozó is, ha több oldalnyi termék van. Ezek az elemek teljes szélességben elfoglalják a terméklistát. 54

Alattuk találhatók a termékek, amikből az asztali és a tabletes nézetben is négy darab található egy sorban. Ezeknek a CSS kódja a következőképpen néz ki: div.termek_doboz { width: 22.8%; margin-top: 10px; margin-left: 1.85%; height: 250px; background-color: #F9F9F9; border: 1px solid #EEE; float: left; } Jól látható, hogy minden elem szélessége eddig százalékos értékekkel volt megadva, így ha nem férne ki teljes szélességében az oldal, akkor arányosan kisebbé válik minden elem. Ez persze a tabletes vagy az asztali nézetre vonatkozik, azaz, ha a képernyő szélessége legalább 768 pixel. Ha ennél kisebb a szélesség, akkor a korábban leírtaknak megfelelően a mobilos nézet töltődik be. Ahogy a korábbi, 8-as ábrán is jól látszik mobilos nézetben teljesen megváltozik az elrendezés. A terméklista oldalakon létható oldalsáv ilyenkor alulra kerül, és teljes szélességében kitölti a teret. Pontosabban 80%-ot fog elfoglalni, mivel két oldalt kimarad 10-10% margó, hogy szellősebbnek tűnjön az elrendezés. A terméklistát tartalmazó rész ugyan így néz ki, csak az oldalsáv fölé kerül. A CSS kódjuk ilyenkor a következő: div#balsav { width: 80%; margin-top: 45px; margin-left: 10%; margin-right: 10%; } div#jobbsav { width: 80%; margin-top: 45px; margin-left: 10%; 55

margin-right: 10%; } A termékekből itt már egy sorban csak egy helyezkedik el, így ezek is teljesen egymás alá rendeződnek. A CSS kódjuk a következőképpen változik: div.termek_doboz { width: 100%; margin: 10px 0; font-size: 14px; } Alul és felül marad 10 pixeles margó, hogy elkülönüljenek egymástól a termékek dobozai, a betűméretet pedig megnöveltem, hogy jobban olvasható legyen a kisebb kijelzőkön. A terméklista oldalak végleges kinézetét a 12. ábra mutatja. Bal oldalon az asztali számítógépeken megjelenő elrendezés látszik, jobb oldalon pedig a mobilos nézet. 12. ábra: Terméklista oldal kinézete monitoron és mobilon 56

5.8 Cél teljesítése és továbbfejlesztési lehetőségek Úgy gondolom, hogy az eredetileg kitűzött célomat nagyrészt sikerült teljesíteni, mivel elkészült egy működő webáruház, ami megfelel az előre meghatározott követelményeknek, azaz mobil eszközökön is megfelelően jelenik meg, és a keresőoptimalizálás alapelveinek is eleget tesz. Ennek ellenére az elkészített alkalmazás inkább csak egy példaként szolgál az előbb említett tulajdonságok bemutatására, és néhány helyen még hiányos, valamint a php kód is hagy némi kivetnivalót maga után, így nagyon sok lehetőség adódik majd a későbbiekben a továbbfejlesztésre. Most ezekből szeretnék néhányat kiemelni. A szállítási lehetőségek már teljes mértékben működnek, de a fizetési lehetőségek kiválasztásának a lehetősége nem készült el. Ezen kívül többféle fizetési mód integrációjára is szükség lesz a későbbiekben. A legfontosabb ezek közül talán a PayPal és a bankkártyás fizetés lehetőségének a megteremtése. A jelenlegi állapotba csak előre utalásos fizetési lehetőségre alkalmas a webshop, esetleg utánvétes megoldásra. A hírlevél feliratkozó űrlapok működnek, de még nincs lehetőség szerkeszthető hírlevelek kiküldésére. A későbbiekben meg lehetne oldani, hogy a TinyMCE szerkesztő segítségével lehessen hírleveleket készíteni, és ezeket azonnal, vagy esetleg időzítve kiküldeni a feliratkozottaknak. Az is meg lehetne oldani, hogy különböző szempontok szerint csoportosítsa a rendszer a feliratkozottakat, és így személyre szabott hírlevél küldésére is lehetőség nyílna. Jelenleg viszonylag nehézkes a webáruház telepítése, és sok mindent kell a programkódban is módosítani, hogy megfelelően működjön. Ezt a későbbiekben mindenképpen meg szeretném változtatni, és egy egyszerű, néhány lépéses telepítőt készíteni, amivel bárki be tudja üzemelni az alkalmazást, és testre is tudja szabni az alapvető beállításokat. A legkevésbé kidolgozott rész jelenleg az adminisztrációs felület, ezért ennek a bemutatására kevésbé is törekedtem a szakdolgozat megírása során. Jelenleg ez a rész csak tesztelési célokat szolgál. Ennek megfelelően lehet termékeket feltölteni, módosítani, rendeléseket megtekinteni, kérdésekre válaszolni, a termékkategóriákat kezelni, illetve néhány egyéb beállítást elvégezni. A php kód is csak minimálisan kidolgozott, és nem felel meg a modern követelményeknek, ezért ennek teljes újraírása szükséges a későbbiekben. Néhány új funkciót is szeretnék majd az adminisztrációs felületen létrehozni. Az első ilyen 57

a banner-képek és logók egyszerű cseréjét lehetővé tétele. Szintén fontos admin funkció a különböző statisztikai adatok lekérdezése, például hogy hányan, és kik látogatják a webáruházat, illetve hogy melyek a legnézettebb termékek és termékkategóriák. Ezen kívül szeretném megoldani azt is, hogy a Google Analytics statisztikai szolgáltatás követőkódját, illetve a Google Webmaster Tools hitelesítő kódját az admin felületről be lehessen szúrni az oldalba. Az előbb felsorolt fejlesztéseken kívül még mindenképpen törekedni fogok arra, hogy minél több beállítási lehetőség legyen elérhető az adminisztrációs felületről, és minél kevesebbet módosítást kelljen a programkódban alkalmazni, ha valamin változtatni szeretnék. Az admin felület hiányosságaihoz tartozik továbbá, hogy ez még nem rendelkezik responsive felülettel, ezért egy későbbi fejlesztés során ezt is igyekszem pótolni majd. 58

6 Összegzés A szakdolgozat megírása során sikerült rávilágítani arra, hogy milyen fontos szerepet tölt be az internetes kereskedelem a gazdaságban, és ennek egyik fő színterét a webáruházak jelentik. Az életmódunk egyre kényelmesebbé válik, és egyre kevésbé szívesen hagyjuk el a lakásunkat, ha vásárolni szeretnénk valamit. Az is megfigyelhető, hogy egyre jobban kötődünk a számítástechnikai eszközökhöz, és ez is az elektronikus kereskedelmet erősíti. A vásárlói szokások gyorsan változnak: 5-10 éve még csak nagyon kevesen mertek az interneten venni valamit, és a vásárlók féltek előre kifizetni egy olyan terméket, amit még a kezükbe sem foghattak, és tartottak attól, hogy esetleg nem azt kapják, amit rendelnek, vagy esetleg semmit sem kapnak. Persze ma is ügyelni kell, hogy megbízható internetes áruházakból rendeljünk, de most már egyre kevesebb az alaptalan félelem az ilyen tranzakcióktól. A legfrissebb trendek szerint pedig már nem is csak számítógépekről történnek az internetes vásárlások, hanem egyre többen használnak táblagépet, vagy okostelefont ilyen célra. Így elengedhetetlenné válik a mobil eszközök számításba vétele egy webáruház megtervezésénél, és sajnos ezen a területen még igen rossz a helyzet Magyarországon, mint ahogy az ki is derült a kutatásaim során. Persze egyre többen ismerik fel ezt a tényt, és a mobilra való optimalizálás lassan már nem egy különleges funkció lesz, hanem alapvető követelmény. Ezért is örülök utólag is, hogy ezt a témát választottam, mivel így rengeteg tapasztalatot és ismeretet sikerült szereznem a témában. Ami az elkészített alkalmazást illeti, mindenképpen szeretném továbbfejleszteni illetve kibővíteni, hogy a későbbiek során élesben is működhessen akár több webáruház is a segítségével. Igaz, hogy sok webshop motor érhető el jelenleg, de bízok benne, hogy egy egyszerűen kezelhető, keresőbarát és olcsó rendszerre van igény a mikro- és kisvállalkozások körében. 59

Summary In my thesis, I managed to point out that e-commerce plays an important role in the economy. The way of life is becoming more and more comfortable therefore we often don t want to leave our home in order to buy something. It is also observable that we are increasingly depending on computing devices which also strengthens the electronic trade. The consumer habits are changing very rapidly: 5-10 years ago, only a few people dared to buy something on the Internet and customers bewared of paying for something in advance because they were not sure about recieving what they ordered. Of course, we should still buy only in reliable online stores but now there is less irrational fear of such transactions. The latest trends show that not only desktop computers are suitable for online purchases but more and more people are using tablets or smartphones for this purpose. That is why we have to reckon with mobile devices when we are designing a webshop and my research proved that unfortunately this area is very bad in Hungary. Of course, more and more people recognize this fact so mobile optimalization won t be a specific function but an essential requirement soon. That s why I am glad that I have chosen this topic and I managed to experience a lot about webpage optimalization for mobile devices. About the application I made, I definitely would like to keep developing it in the future. It is true that many webshop engines are available at the moment but I hope there is a demand among micro- and small enterprises on a system which is easy to use, search engine friendly and low-cost. 60

Irodalomjegyzék [1] http://www.netfort.hu/kotelezo-adatok-mukodesi-szabaly-webaruhaz-webshop-nyitasinditas-inditaskor-keszites-jogi-feltetelei [2] http://torvenyeswebaruhaz.com/img/torvenyeswebaruhaz/webaruhaz_torveny_2010_a prilis.pdf [3] http://www.minuszos.hu/e-kereskedelem-hihetetlen-novekedes/ [4] http://brandtrend.hu/2013/06/11/a-nagy-webaruhaz-felmeres-2013/ [5] http://brandtrend.hu/2013/04/16/magyarorszagi-e-kereskedelmi-felmeres-2012/ [6] http://gs.statcounter.com/download/statcounter-internet-wars-report.pdf [7] http://blog.fps.hu/post/25018528771/magyar-responsive-web-design [8] http://www.w3schools.com/html/html5_intro.asp [9] http://webdesignerwall.com/tutorials/css3-media-queries [10] http://www.w3schools.com/css3/default.asp [11] http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.h u/hu/hu/intl/hu/webmasters/docs/search-engine-optimization-starter-guide-hu.pdf 61

Melléklet 13. ábra: Use Case diagram 1 62