Debreceni Egyetem Informatikai Kar

Debreceni Egyetem Informatikai Kar

Webes alkalmazásfejlesztés szabadon választott témában „Kreatívminták”

Témavezető: Dr. Kuki Attila Egyetemi adjunktus

Készítette: Bokor Györk Programtervező informatikus

-1-

Debrecen 2011

Tartalomjegyzék TARTALOMJEGYZÉK ..................................................................................................................................... - 1 I. BEVEZETÉS ................................................................................................................................................ - 3 I.I. TÉMAVÁLASZTÁS ............................................................................................................................................. - 3 I.II. AZ ALKALMAZÁS LEÍRÁSA.................................................................................................................................. - 3 I.III. FELHASZNÁLÓI KÖVETELMÉNYEK ....................................................................................................................... - 4 I.IV. ALKALMAZOTT SZOFTVEREK............................................................................................................................. - 5 II. DINAMIKUS ADATOK KEZELÉSE ................................................................................................................ - 7 III. AZ OLDAL FELÉPÍTÉSE ............................................................................................................................ - 16 IV. FUNKCIÓK ............................................................................................................................................. - 21 IV.I. REGISZTRÁCIÓ, BEJELENTKEZÉS, ELFELEJTETT JELSZÓ ........................................................................................... - 21 IV.II. MINTÁK KEZELÉSE, ADATMÓDOSÍTÁS, STATISZTIKA, KIJELENTKEZÉS ....................................................................... - 22 IV.III. TERMÉKEK MEGJELENÍTÉSE .......................................................................................................................... - 24 IV.IV. FELHASZNÁLÓ ADATLAPOK, HOZZÁSZÓLÁSOK KEZELÉSE ..................................................................................... - 27 V. VÁSÁRLÁS .............................................................................................................................................. - 29 V.I. KOSÁR ....................................................................................................................................................... - 29 V.II. KÉZBESÍTÉS ................................................................................................................................................ - 32 VI. ADMINISZTRÁCIÓS FELÜLET.................................................................................................................. - 33 VI.I. BEVITELI MEZŐK.......................................................................................................................................... - 34 VI.II. ESEMÉNYEK FELVITELE, MÓDOSÍTÁSA, TÖRLÉSE, KERESÉSE .................................................................................. - 35 VII. FEJLESZTÉS MENETE ............................................................................................................................. - 38 VII.I. ELKÉSZÍTÉS MENETE .................................................................................................................................... - 38 VIII. ÖSSZEFOGLALÁS ................................................................................................................................. - 41 IRODALOMJEGYZÉK ................................................................................................................................... - 42 KÖNYVEK.......................................................................................................................................................... - 42 INTERNET ......................................................................................................................................................... - 42 FÜGGELÉK .................................................................................................................................................. - 43 PLÁGIUM - NYILATKOZAT ..................................................................................................................................... - 43 TÉMAVEZETŐI VÉLEMÉNYEZÉS ............................................................................................................................... - 44 KÖSZÖNETNYILVÁNÍTÁS ............................................................................................................................ - 45 -

-2-

I. Bevezetés I.I. Témaválasztás Lassan már másfél éve dolgozok egy webes alkalmazásokat, ezen belül főként weblapokat készítő cégnél, félállásban egyetem mellett. Itt a cég által fejlesztett keretrendszerrel dolgozunk, melynek alapja az objektum orientált php. Nap mint nap ezt a keretrendszert használva az elmúlt több mint egy évben alkalmam adódott számos weboldalt (bemutatkozó oldalaktól kezdve komolyabb webes alkalmazásokig) elkészíteni. Ezen munkák közül a legközelebb a „kreatívminták” került hozzám, nem is feltétlen a tartalma, hanem funkcionalitása miatt. Ez az oldal web áruház funkciója mellett még számos kiegészítéssel rendelkezik. Ezért döntöttem úgy, hogy szakdolgozatom témájául választom.

I.II. Az alkalmazás leírása Szakdolgozatom témája egy olyan internetes portálrendszer, melyen különböző gyöngyfűzési

technikákkal

készült

termékek

(főként

ékszerek)

készítését

leíró

dokumentumokat lehet megvásárolni. Az egyes termékek saját adatlappal rendelkeznek, melyen fel van tüntetve, hogy melyik felhasználó készítette azt, mennyire nehéz elkészíteni (1-4-es skálán lehet osztályozni), ezenkívül kép és egy leírás is található rajta, így a leendő vevők megfelelően informálódhatnak, mielőtt kiválasztják a számukra legmegfelelőbbet. A termékeknek (a későbbiekben mintaként is fogok rájuk utalni) kategóriákba vannak rendezve. A kategorizálás három szint mélységű. Azaz léteznie kell legalább egy főkategóriának. Ezen belül vannak további kategóriák, és ezek a kategóriák is tartalmazhatnak (de nem feltétlenül) még további alkategóriákat. Ezekhez a kategóriákhoz, illetve alkategóriákhoz vannak rendelve a különböző termékek. Az oldalra regisztrálva lehet mintát felvinni. A regisztrált felhasználók lehetőségük van az egyes áruk alá hozzászólásokat írni érdeklődve arról, illetve megvásárolhatják az ezen termékek elkészítési módját leíró dokumentumokat (fontos: nem konkrétan magát a kész terméket). Az egyes regisztrált felhasználók rendelkeznek saját felhasználói profillal, ahol látható a teljes, illetve bece (nick) nevük, a feltöltött avatar képük és egy rövid bemutatkozó szöveg

-3-

(természetesen a felhasználónak csak a kötelezőként feltüntetett mezőket kell kitöltenie, a többi kitöltése szabadon eldönthető). Ezenkívül még az is látható, hogy hány mintát küldött be idáig, illetve ezek közül hány lett elfogadva az adminisztrátor által. Az elfogadott, úgymond aktív termékei kilistázásra kerülnek a profilja alatt is. Vásárláskor fizetni kétféleképpen lehet: Pay Pal-on keresztül vagy a felhasználó egyenlegből levonva. (egyenleget egy megadott számlaszámra utalva lehet létrehozni, aminek az összegét az adminisztrátor a megfelelő felhasználónak jóváírja) Természetesen az áruk, a regisztrált felhasználók, és a többi dinamikus adat adatbázisban kerül eltárolásra.

I.III. Felhasználói követelmények

Fontos követelmény egy jól strukturált, könnyen használható, felhasználóbarát, interaktív webes alkalmazás készítése.

A weboldal kategóriákba rendezve jelenítse meg a termékkínálatot. A termékeknek legyen egy, a főbb információkat tartalmazó adatalapja, melyek az egyes kategóriák alatt legyenek kilistázva. Ezen kívül pedig lehessen részletesebben is megtekinteni az adott terméket, minden információt elérve róla.

Az oldalra lehessen regisztrálni. A regisztrált felhasználók tudjanak termékeket feltölteni, saját termékeiket lekérdezni/módosítani, személyes adatokat szerkeszteni illetve termékekhez hozzászólni.

A felhasználók által feltöltött termékek (minták) csak akkor kerüljenek megjelenítésre az oldalon, ha az adminisztrátor el is fogadta azt.

Az oldalhoz tartozzon adminisztrációs felület. Az adminisztrálható tartalmak a következők legyenek: •

termékek feltöltése (természetesen módosítási, törlési, bővítési lehetőséggel)

•

főkategóriák, illetve kategóriák/alkategóriák felvitele

•

regisztrált felhasználók nyomon követése

•

hozzászólások más néven kommentek (a felhasználók által az egyes termékek alá írt megjegyzések) adminisztrálása

•

hírlevélre jelentkezett emberek megtekintése

•

hírlevél létrehozása/szerkesztése, kiküldése

•

a regisztrált felhasználók rendeléseinek elérése

•

hasznos letöltések és szállítási költségek adminisztrálása -4-

Az oldal rendelkezzen keresési funkcióval, ami az egyes termékek nevében illetve leírásában keres.

A regisztrált tagok tudjanak vásárolni. Ezt a vásárlást a rendszer adminisztrátora tudja nyomon követni az adminisztrációs felületen.

Lehessen hírlevélre feliratkozni, név és e-mail cím megadásával

Az oldalon jelenjenek meg külön a legnépszerűbb (leggyakrabban megtekintett) termékek.

Legyen lehetőség az oldal bármely pontjáról az azonnali bejelentkezésre, ha pedig valaki még nem rendelkezik felhasználói profillal, akkor legyen lehetősége elkészíteni azt.

Elfelejtett jelszó esetén a rendszer legyen képes új jelszót generálni, és kiküldeni azt a regisztrált e-mail címre.

A felhasználók jelszavai legyenek biztonságban (hash formában legyen tárolva az adatbázisban).

Ha egy felhasználó feltölt egy árut, akkor az adminisztrátornak kell azt elfogadni ahhoz, hogy az az oldalon látható is legyen.

I.IV. Alkalmazott szoftverek I.IV.I. HTML (HyperText Markup Language) A HTML egy olyan egyszerű leírónyelv, amelyet Web-dokumentum formázásához használunk. Három fő elemből épül fel: csomópontokból (pl. egy HTML dokumentum), hiperhivatkozásokból (linkekből), és horgonyokból (belső linkekből), illetve egyéb különleges jelölésekből. Amikor a HTML segítségével hipertext dokumentumot készítünk, akkor jónéhány különböző szabályt kell betartanunk. A Web-dokumentumba sokféle formázó információt

ágyazhatunk

be.

A

dokumentumba

ágyazott

formázó

utasítások

a

dokumentumban lévő információk szerkezetét írják le a Web-böngészők számára, amelyek ennek alapján megjelenítik a dokumentumot a képernyő egy ablakában. I.IV.II. CSS és JavaSrcipt Manapság a HTML nyelv erősen összefonódott a CSS stíluslapokkal és JavaScript nyelvvel. A CSS (Cascading Style Sheets) egy olyan stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. Ezen kívül használható bármilyen XML alapú dokumentum stílusának leírására is, mint például az SVG, XUL stb. A HTML tartalom előállításánál ügyelni kell a böngésző-kompatibilitásra, a minél gyorsabb betöltésre és a keresőrobotok által könnyen értelmezhető forráskódra. Látványos és felhasználóbarát

-5-

megjelenést érhetünk el a JavaScript programozással. Az utóbbi időkben több nyílt forráskódú JS keretrendszert publikáltak, az egyik legelterjedtebb a jQuery, ezt a technológiát használom az alkalmazásomban is. I.IV.III. PHP (Hypertext Preprocessor) A PHP egy nyílt forráskódú, platformfüggetlen szkript nyelv, melyet szabad szoftverként tartanak számon. Mivel értelmezett szkriptnyelv, nem szükséges hozzá fordító. Legnagyobb felhasználási területe dinamikus weboldalak készítése, emiatt a PHP-t jórészt szerver-oldalon használják. Az 5-ös verzióval a nyelvet teljesen Java szerű objektum orientált alapokra helyezték a fejlesztők (jelenlegi fejlesztő csapat: „The PHP Group”). A PHP program kimenete egy HTML oldal, melyet valamilyen web-böngészővel tudunk megtekinteni. A PHP elég „szabad” nyelv, például változót nem kell előre deklarálni, bárhol létrehozható a kódban (a változó típusát sem külön megadni, automatikusan kap típust a változó annak alapján, hogy milyen értéket rendelünk hozzá). A sok kiváló és fontos tulajdonságból kiemelkedik az is, hogy az adatbázisokat széles körben támogatja (pl. Oracle, MySQL, Unix dbm, PostgreSQL, stb.) I.V.IV. MySQL A PHP alkalmazás és az adatbázis között a kapcsolatot egy adatbázismotor, a MySQL tartja fent. Az alkalmazások „kéréseit” melyek módosítások, törlések, lekérdezések lehetnek, a MySQL hajtja végre. A PHP hátrányai közé sorolnám, hogy a programozónak, sok mindent manuálisan kell létrehoznia: nézeteket, kapcsolatokat, frissítéseket. Ezekre a hiányosságokra különösképpen ügyelni kell, ugyanis ellenkező esetben az adatbázisunk könnyen ellentmondásossá (inkonzisztensé) és redundánsá válhat.

-6-

II. Dinamikus adatok kezelése A weboldal sok adattal dolgozik, melynek nagy része dinamikusan változik. Ezen adatok adatbázisba (adatbázis táblákba) rendezve kerülnek letárolásra. Célom az volt, hogy úgy alakítsam ki ezeket az adattáblákat, hogy azok minél könnyebben érthetőek, átláthatóak legyenek. Ezzel a jól strukturáltsággal kívánom elérni, hogy a későbbiekben, ha esetlegesen bármilyen változást kell eszközölni, akkor azt könnyen és egyszerűen lehessen megtenni. Lentebb bemutatom a különböző adatbázistáblák felépítését táblázatos formában, illetve ismertetem, hogy melyik tábla milyen jellegű információkat tárol, valamit azok milyen funkcionalitással bírnak az alkalmazásban. Minden adatbázis tábla előtt egy konstans prefixet használok, ennek célja, hogyha egy adatbázisban esetleg több munkához tartozó adattáblákat tárolok, akkor egyértelmű legyen, hogy melyik oldalhoz mely táblák tartoznak (aktuális prefix: kreativmintak_) A továbbiakban az egyszerűség és egyértelműség miatt az alábbi jelöléseket vezetem be: Elsődleges kulcs: vastag betűtípus Külső kulcs: dőlt betűtípus Továbbá az egyes adatbázistáblák sorait (rekordjait) a táblázatban az alábbi formában adom meg:

1 oszlop: a sor neve

2. oszlop: a sor típusa (ha van, akkor a maximális értéke decimális formában)

3. oszlop: sor leírása

A típusok az alábbiak lehetnek:

INT: numerikus típus, maximális hossza 10 számjegy lehet, plusz kiegészülhet egy előjellel (ekkor a hossza 11).

VARCHAR: karakter típus, maximális értéke 255.

BOOLEAN: Logikai konstans. Értéke 0 vagy 1 lehet (ezzel ekvivalensek az igaz/hamis értékek). Alapértelmezett értéke: 0.

TEXT: szöveges típus, terjedelme bármekkora lehet.

TIMESTAMP: időbélyeg Ezeknek az adatbázis tábláknak a nagy része adminisztrálható, a későbbiekben szóba

kerülő háttéroldalon. (lásd. VI. Adminisztrációs felület)

-7-

Adatbázis tábla neve: kreativmintak_dij Név

Típus

Leírás egyedi azonosító, értéke automatikusan kerül kitöltése (auto_increment)

id

INT(10)

szall

VARCHAR(100)

a szállítás költsége

nyomtat

VARCHAR(100)

nyomtatási költség

Ha valaki vásárol a webáruházban, lehetősége van a terméket nem elektronikus hanem nyomtatott formában átvenni. Ekkor a nyomtatás, illetve a szállítási díj költségét még a termék árán felül ki kell fizetnie. Ez a két adat van ebben a táblában letárolva. Erre azért van szükség, hogyha változnának ezek az árak, akkor az adminisztrációs felületen, könnyedén lehessen módosítani azokat. Ezt a lehetőséget választva, vásárláskor a kosárban megjelenik egy-egy plusz tételként a szállítás illetve a nyomtatás költsége. Adatbázis tábla neve: kreativmintak_felh Név

Típus

Leírás

id

INT(10)

egyedi azonosító, értéke automatikusan kerül kitöltése

nev

VARCHAR(100)

a felhasználó teljes (vezeték és kereszt) neve

bnev

VARCHAR(100)

nick, vagy más néven felhasználói (bece) név

cim

VARCHAR(100)

lakcím (itt csak az utca és házszám kerül letárolásra)

varos

VARCHAR(100)

isz

INT(4)

sz_cim

VARCHAR(100)

sz_varos

VARCHAR(100)

szállítási címhez tartozik, a város neve

sz_isz

INT(4)

szállítási irányítószám

tel

VARCHAR(20)

telefonszám (megadása nem lesz majd kötelező)

reg_mail

VARCHAR(100)

az e-mail cím, melyet a felhasználó regisztrációkor ad meg

reg_jelsz

VARCHAR(100)

regisztrációkor megadott jelszó hash-kódja

város neve, regisztrációnál dinamikus listából is ki lehet választani (lásd később) irányítószám, ez mindig fix 4 számjegy (csak magyarországi címekkel foglalkozunk) szállítási cím, szintén csak az utca és házszám kerül ebben a mezőben letárolásra

-8-

kep

VARCHAR(150)

a felhasználó avatar képének elérési útvonala

text

TEXT

leírás, melyet a regisztrált felhasználó szabadon kitölthet

egyenleg

INT(11)

szazalek

INT(10)

feltolto

BOOLEAN

datetime

TIMESTAMP

a felhasználó aktuális egyenlege (regisztrációkor ez az érték alapértelmezetten 0) részesedési százalék, hogy egy eladott termék árából a felhasználó hány százalékra jogosult azt jelöli, hogy a felhasználó jogosult-e termék feltöltésére, alapértelmezett értéke hamis, az adminisztrátor adhat neki feltöltési jogot időbélyeg, a regisztráció dátumát tárolja

A legfontosabb információkat, tartalmazza a felhasználókról. Elsőként egy személy regisztrációjakor kerülnek bele adatok, mikor is a leendő felhasználó megadja a regisztrációhoz szükséges kötelező információkat, melyek az alábbiak: felhasználói név, email cím, jelszó. Ezek mindenképpen szükségesek, a későbbi beléptetéshez. Belépés után lehetőség van az adatmódosításra (erről is lesz szó a későbbiekben). Adatbázis tábla neve: kreativmintak_fokat Név

Típus

Leírás

id

INT(10)


nev

VARCHAR(100)

főkategória neve

Mint a dolgozatom elején írtam, az oldalon a termékeket különböző (egyedi) kategóriákba rendezzük. Ebben az adattáblában semmi mást csak a legfelső szinten lévő főkategóriák neveit, illetve azok egyértelmű azonosítóját (id-jét) tárolom. Az „id” egy külső kulcs lesz a kategóriák táblában. Adatbázis tábla neve: kreativmintak_kat Név

Típus

Leírás

id

INT(10)


fokat_id

INT(10)

külső kulcs: kreativmintak_fokat(id), az a főkategória azonosító, amihez tartozik az aktuális kategória

nev

VARCHAR(100)

kategória megnevezése

-9-

szulo

INT(10)

kreativmintak_kat(id)

A főkategóriák alá besorolásra kerülnek további kategóriák. Ezek a kategóriák tovább bonthatóak alkategóriákra, így kialakítható egyfajta hierarchikus sorrend. Az itt található, fölé illetve alárendeltséget, a „szulo” mező alapján tudjuk megállapítani. Amelyik rekordban, a „szulo” mező értéke 0, az kategória lesz, ellenkező esetben a „szulo” értékével megegyező „id”-jű kategóriához tartozó alkategória.

Főkategória 1. (kötelező) • Kategória 1. (id=1) » Alkategória 1. (szulo=1) » Alkategória 2. (szulo=1) • Kategória 2. (id=2, szulo=0)

Ez a fajta besorolási sorrend lehetővé teszi, a kategóriák és alkategóriák egyszerű, egy táblában való kezelését, különválasztva a főkategóriáktól. Adatbázis tábla neve: kreativmintak_haszn Név

Típus

Leírás

id

INT(10)


nev

VARCHAR(100)

hasznos letöltés neve

url

VARCHAR(200)

az url címe, ahol a letöltés elérhető

text

TEXT

leírása, hogy miért érdemes letölteni

kep

VARCHAR(150)

hozzá tartozó kép

datetime

TIMESTAMP

időbélyeg, az adatbázisba kerülés dátuma

Azok a letöltések kerülnek ide, amik valamilyen szempontból fontosak az oldal, teljes mértékű használatához. Ha csak böngészni szeretnénk az oldalt, nincs szükségünk ezekre a letölthető programokra, de ha pl. mintát szeretnénk készíteni, akkor nagy valószínűséggel szükségünk lesz rájuk.

- 10 -

Adatbázis tábla neve: kreativmintak_hirl Név

Típus

Leírás

id

INT(10)


nev

VARCHAR(100)

hírlevélre jelentkezett személy neve

mail

VARCHAR(100)

e-mail címe

teszt

BOOLEAN

igaz érték esetén, olyan személy akinek teszt hírlevelet küld ki a rendszer

kesz

BOOLEAN

ki lett e küldve a hírlevél az adott személynek

datetime

TIMESTAMP


Hírlevélre jelentkezettek adatait tárolja. Hírlevelet az adminisztrációs felületen lehet létrehozni/szerkeszteni illetve kiküldeni. Fontos megemlíteni a „kesz” oszlop kiemelt funkcionalitását, ugyanis ez mező tárolja, hogy ki lett e küldve a hírlevél az adott személynek vagy sem, így bármilyen (hírlevél kiküldése közbeni) hiba esetén nyomon követhető, hogy melyek azok a személyek, akiknek ki kell küldeni a levelet, illetve kik azok akiknek már „kézbesítve” lett. Adatbázis tábla neve: kreativmintak_komment Név

Típus

Leírás

id

INT(10)

egyedi azonosító, értéke automatikusan kerül kitöltésre

userid

INT(10)

termekid

INT(10)

text

TEXT

a hozzászólás szövege

datetime

TIMESTAMP


külső kulcs: kreativmintak_felh(id), a kommentet író felhasználó azonosítója külső kulcsa a termékek táblának, a termék azonosítója, ahová a kommentet írták

A különböző termékekhez a bejelentkezett felhasználóknak lehetőségük van kérdéseket, megjegyzéseket írni. Ezek a hozzászólások (kommentek) kilistázásra kerülnek az oldalon az kapcsolódó termék alatt, melyet bárki (nem csak regisztrált személyek) szabadon megtekinthet.

- 11 -

Adatbázis tábla neve: kreativmintak_level Név

Típus

Leírás

id

INT(10)


nev

VARCHAR(100)

levél neve, csak az adminisztrációs felületen látszik

targy

VARCHAR(100)

a hírlevél tárgya

html

TEXT

hírlevél tartalmi része

datetime

TIMESTAMP

időbélyeg

Az adminisztrációs felületen létrehozható/szerkeszthető a hírlevél, ezeket a leveleket tárolom ebben a táblában. A megszerkesztett hírlevelet innen lehet kiküldeni. Adatbázis tábla neve: kreativmintak_rend_fej Név

Típus

Leírás

id

INT(10)


mail

VARCHAR(100)

melyik mail címről rendelték

nev

VARCHAR(100)

rendelő neve

data

TEXT

egyéb információk (számlázási, szállítási címek)

datetime

TIMESTAMP

időbélyeg

A beérkező rendeléseket tárolja. Konkrét termék azonosítók nem kerülnek a táblába, arra valók a rekordbejegyzések, hogy nyomon lehessen követni, hogy kik és mikor rendeltek az áruházból. Adatbázis tábla neve: kreativmintak_rend Név

Típus

Leírás

id

INT(10)


f_id

INT(10)

külső kulcs: kreativmintak_rend_fej(id)

nev

VARCHAR(100)

Termék neve

- 12 -

ar

VARCHAR(10)

ár

A „kreatívminták” oldalról beérkező rendelések eltárolása. Az egyes tételeket egyesével tárolja el. Ha egy rendelés folyamán több terméket is vásároltak, akkor annyi rekord kerül ebbe a táblába, ahány tételt vásároltak. Adatbázis tábla neve: kreativmintak_rendfej_felh Név

Típus

Leírás

id

INT(10)


rend_id

INT(10)

külső kulcs: kreativmintak_rend_fej(id)

termek_id

INT(10)

letoltve

BOOLEAN

datetime

TIMESTAMP

külső kulcs: kreativmintak_termek(id), rendelt termék azonosítója 0 vagy 1 lehet az értéke, attól függően, hogy hányszor töltöttek le (maximum kétszer lehet) időbélyeg

Ha online kézbesítést választ a megrendelő, akkor ennek a táblának az alapján lehet nyomonkövetni, hogy letöltötte e már a megvásárolt dokumentumot. Maximum kétszer van lehetőség a letöltésre (a második biztonsági okokból került beépítésre, ha az első letöltés valamilyen okból nem sikerülne, akkor fél órán belül legyen mód az újbóli próbálkozásra). Adatbázis tábla neve: kreativmintak_termek Név

Típus

Leírás

id

INT(10)


nev

VARCHAR(100)

termék megnevezése

kat

INT(10)

külső kulcs: kreativmintak_kat(id) azonosítója amihez a termék tartozik

alkoto

INT(10)

a termék készítőjének azonosítója

anyagsz

VARCHAR(100)

anyagszükséglet leírása

nehezseg

VARCHAR(100)

nehézségi fok kiválasztani)

fuzesi_tech VARCHAR(100)

fűzés technikája

- 13 -

(ezt

egy

az

legördülő

a

kategória

listából

lehet

text

TEXT

leírás, hogy hogyan kell a terméket elkészíteni

ar

INT(10)

termék ára

kep

VARCHAR(150)

hozzá tartozó kép elérési útvonala

pdf

VARCHAR(150)

magának a dokumentumnak (amit meg lehet vásárolni) az elérési útvonala

hit

INT(10)

hányan tekintették meg a terméket

vasar_szam INT(10)

hányan vásárolták meg a terméket

aktiv

BOOLEAN

csak igaz érték esetén kerül a termék kilistázásra az oldalon

datetime

TIMESTAMP

időbélyeg

Az egyes termékek adatlapján szereplő, plusz egyéb kiegészítő információk kerülnek letárolásra. Adatbázis tábla neve: kreativmintak_varos Név

Típus

Leírás

id

INT(10)


varos

VARCHAR(50)

Magyarország településeinek nevei

Regisztrációkor a felhasználót egy javasrcipt segítségével megvalósított dinamikus lista segíti lakhelyének (település) nevének kiválasztásában. Ebben a táblában ezek a településnevek találhatóak meg.

A következő oldalon a könnyebb érthetőség kedvéért mellékelek két ábrát, amelyek az adatbázis táblák szerkezetétet, és azok egymáshoz való viszonyukat mutatják. Az első ábrán a kapcsolatok kerülnek bemutatásra, a másodikon pedig a többi adatbázistábla, amik nincsenek közvetlen kapcsolatban egymással.

- 14 -

1. ábra:

2. ábra:

- 15 -

III. Az oldal felépítése Azz áruház megtekinthető a www.kreativmintak.hu webcímen. címen. Elrendezését tekintve tekin a lap három részre (sávra) bontható, vertikális és horizontális hor zontális irányban is. Vízszintes irányban fejlécről (ebben található meg a főmenü is), is) tartalmi részről és láblécről beszélünk, beszélünk míg függőleges irányban jobb és bal oldalt különböző „dobozokban” találhatóak meg a keresés, kategóriák, hasznos letöltések, Információk, Info hírlevélre jelentkezés stb. funkciók, míg középen dinamikusan mindig az aktuális tartalom kerül megjelenítésre. Az alábbiakban sorba veszem ezekben ezekbe a „dobozokban” elérhető egyes funkciókat, funkciókat illetve a főmenüt és láblécet. láblécet. Ezek az oldal bármely pontján elérhetőek (keretként körbefogják a tartalmi részt). részt) III.I. Főmenü Közvetlenül a fejléc legalján került elhelyezésre a vízszintes főmenü, melyben a fontosabb, statikus aloldalakra mutató grafikus hivatkozások találhatóak. Egy menüpontra kattintva va az elszíneződik, ezzel is segítve az átláthatóságot és navigációt. navigációt

III.II. Keresés Egy egyszerű gyorskereső, gyorskereső mely az adatbázisban a termékek ek között keres. A kereséshez minimum három karakter hosszúságú kulcsszót kell megadni amire a rendszer rászűr rás a termék nevében illetve leírásában. A kapott találatokat az oldal tartalmi részében rész jeleníti meg.

- 16 -

A beviteli mezőben található „Keresés...” szöveg automatikusan elel illetve előtűnik aszerint, hogy ki vagy éppen beleléptünk a mezőbe,, így téve látványosabbá az oldalt.

III.III. Kategóriák A minták kategorizálásról zálásról már sok szó esett a fentebbiekben, fentebbiekben most összefoglalva ismertetem a működési elvét. elvét Rendszerezése hierarchikus felépítésű,, terjedelme legfeljebb három szint mélységű ű lehet. lehet. Léteznie kell legalább egy főkategóriának. Ehhez az egy (vagy több) főkategóriához rendelhetők, további kategóriák, mely kategóriákhoz kat szintén rendelhetők alkategóriák. Ha egy kategória nem bontható tovább (vagyis nincs egyetlen alkategóriája sem), akkor „kattintható”. Ellenkező esetben, vagyis ha létezik alkategóriája, akkor csak az alkategória (alkategóriái), lesznek lesz kattinthatóak.

Néhány esetben előfordul, hogy az adott kategória már létezik, de még nem tartalmaz terméket, vagy egyszerűen a megadott URL hibás. Ekkor a felhasználót érdemes erről tájékoztatni. Ellenkező esetben ha nem tudja, hogy hol a hiba nagy valószínűséggel való elhagyja az oldalt. Természetesen ez semelyik se fél számára nem kedvező, ezért is próbáltam minél felhasználóbarátabbra, informatívra készíteni az oldat.

Ebbe beletartoznak az esetleges fellépő hibákról való tájékoztatás, tájékoztatás lényeges információkra való figyelmeztetés eztetés.

- 17 -

III.IV. Hasznos letöltések A hasznos letöltéseknél letöltések sorban egymás alatt kilistázásra kerülnek azoknak a programoknak/dokumentumoknak a nevei melyek valamilyen lyen szempontból szempo hasznosak (vagy elengedhetetlenek) az oldal teljes egészében való használatához (pl. (pl mintakészítés). A listázott (általában különböző programok nevei) elemekre kattintva a tartalmi részben kibomlik az adott letöltés,, és a néven illetve a letöltési etöltési linken kívül még megjelenítésre megjelen kerül a hozzárendelt kép és egy leírás, hogy pontosan miért is ajánlott az adott letöltés.

III.V. Információk Statikus aloldalakra mutató hiperhivatkozások összegyűjtése. összegyűjtése Többek között itt érhetőek el azoknak a HTML-dokumentumoknak HTML a linkjei, amik leírják az oldal működését, működését egészen a kezdeti lépésektől. sektől. A főmenüben megtalálható pontokat egészíti ki. Ez alól egyetlen menüpont a kivétel: az „Alkotóink”. Ez egy dinamikus menüpont, melyet részletesen lentebb ismertetek.

A statikus aloldalakra mutató hivatkozások az alábbiak: alábbiak • • • • • • •

Vevőszolgálat Felhasználói feltételek Szerzői jogok Vásárlási módok Fizetési módok Készíts saját mintát Legyél te is tervező

- 18 -

• • •

GY.I.K. : gyakran yakran felvetülő kérdések, illetve azok megválaszolása Biztonság Általános Szerződési és Felhasználási feltételek Az egyetlen etlen a fentebbiektől eltérő, eltérő dinamikus aloldalra mutató hivatkozás az

„Alkotóink”. Ez az oldal az alábbiak szerint épül fel: egymás alatt kilistázásra kerül az összes, minta feltöltésére jogosult felhasználó beceneve, teljes neve, avatar képe, elfogadott mintái száma illetve, hogy mely kategóriákban vannak feltöltött termékei.

Ha valamely felhasználóra részletesebben is kíváncsiak kíváncsiak vagyunk, akkor a „Tovább „ a részletes adatlapra »” linkre kattintva az oldal átirányít irányít minket a felhasználó adatlapjára. adatl III.VI.. Hírlevélre jelentkezés A hírlevélre való jelentkezési űrlapnak összesen kettő, kötelezően kitöltendő mezője van: név és e-mail mail cím. Ezeket megadva módunkban áll hírlevélre jelentkezni. jelentkezni Így értesülhetünk az újdonságokról, hírekről. A hírlevélre lre jelentkezetteket jelentkezette az adminisztrációs felületen könnyedén nyomon lehet követni. Szintén itt az adminisztrációs admin sztrációs felületen van lehetőség hírlevelet létrehozni (megszerkeszteni) illetve kiküldeni.

- 19 -

III.VII. Legnépszerűbbek Az öt legnépszerűbb termék kilistázása, tázása, képpel, névvel, fűzési technikával és árral. Adatbázisban tárolásra kerül (termékek tábla `hit` oszlop), hogy egy--egy terméket hányan tekintettek meg.. Ezt az információ ismerve már egyszerűen lekérdezhető lekér az öt leglátogatottabb. III.VIII. Lábléc Az oldalt a lábléc zárja le, amiben megtalálható a tulajdonjog tu ajdonjog védelmét jelölő © logó és a „Minden jog fenntartva!”” bejegyzés is. Ezenkívül található még néhány „gyorslink” az egyes kategóriákra, illetve felsorolásra felsor lásra kerül még néhány általános információkat tartalmazó aloldalakra mutató hivatkozás is.

Végül jobb oldalt legszélen, a cég logója kerül kirajzolásra,, melyre kattintva a annak hivatalos oldalára ára léphetünk.

- 20 -

IV. Funkciók A következőkben az oldalba beépített különböző funkciókat szeretném részletesebben részletes ismertetni.

IV.I. Regisztráció, bejelentkezés, bejelentkezés elfelejtett jelszó Mint azt már fentebb többször említettem, az oldalra módunkban áll regisztrálni. Ez nem kötelező jellegű a termékek így is megtekinthetőek, megtekinthetőek de bizonyos funkciók funkció nem érhetőek el (mint például a vásárlás vagy a hozzászólás írása). A fejléc jobb oldalán található a bejelentkezési panel, melyen a bejelentkezéshez szükséges beviteli mezőkön kívül megtalálható egy „Regisztráció”, illetve egy „Elfelejtett jelszó” link is. ni az alábbiak megadásával lehet: felhasználói név, e-mail e mail cím, jelszó illetve Regisztrálni jelszó megerősítése. A rendszer az a esetlegesen fellépő hibák elkerülése végett figyelmeztet ha nem töltjük ki valamely mezőt, illetve ellenőrzi, hogy az e-mail mail cím formailag helyes hel e. Regisztráció után azz előbb említett mezők helyes kitöltésével léphetünk be az oldalra.

Az elfelejtett jelszó link segítségével igényelhetünk új jelszót. jelszót. Ehhez szükséges megadni azt az e-mail címet, amellyel mellyel regisztráltunk. regisztráltunk A rendszer ellenőrzi, hogy az adatbázisban megtalálható-e a megadott e-mail cím (a rendszer nem ad információt ót arról, hogy a beírt cím megtalálható-ee vagy sem a regisztrált címek között, ezáltal is védve a rosszindulatú támadások ellen). Haa igen akkor erre erre a címre küld egy levelet, melyben egy hivatkozás található. Erre a hivatkozásra kattintva, kattintva a jelszó egy automatikusan generált jelszóra cserélődik le.

- 21 -

IV.II. Minták kezelése, adatmódosítás, statisztika, kijelentkezés ezés Sikeres belépés után megváltozik a bejelentkezési panel tartalma, tartalma és az alábbi lehetőségek kerülnek felsor elsorolásra: „Minta beküldése”, üldése”, „Saját mintáim”, „Adatmódosítás”, „Statisztika” illetve „Kijelentkezés”. „Kijelentkezés” Az oldal működési elve miatt fontos már most is megemlíteni, hogy a frissen regisztrált tagoknak még nincs joguk mintát beküldeni (vagyis ( még nem aktív tagok, ezt a jogot az oldal adminisztrátorának a szerepköre kiosztani), így számukra kezdetben csak az adatmódosítás, és a kijelentkezés funkció érhető el. Így ha nem ezt a két funkciót kciót szeretnék elérni, az alkalmazás figyelmezteti őket, hogy erre még nincsen megfelelő jogosultságuk.

IV.II.I. Minta beküldése Az aktív tagok, jogosultak mintát feltölteni az oldalra. Ezt egy űrlap kitöltésével tudják megtenni, az alábbi adatok megadásával: megadásával: a terméknek a neve, kategóriája (ezt egy legördülő listából tudják kiválasztani, ni, itt azok a kategóriák kerülnek felsorolásra, felsor ásra, amik az oldalon is megtalálhatóak),, anyagszükséglet, nehézségi fok (könnyű, közepes, haladó, haladó profi), fűzési technika, leírás a termékről, ár, egy kép, és maga a dokumentum, amin részletesen le van írva, hogy hogyan kell elkészíteni az adott terméket (ez az a dokumentum amit meg lehet vásárolni). A minta beküldése után az belekerül az adatbázisba, adatbázisba illetve megjelenik az oldalon, az adott kategória alatt (kap egy adatlapot). adatlapot)

- 22 -

IV.II.II. Saját mintáim A felhasználó a saját mintáit tudja itt megtekinteni illetve szerkeszteni. Egy-egy kisebb méretű adatlapon kerülnek felsorolásra, melyen megtalálható a neve, hogy eddig hányan tekintették meg, szóltak e hozzá az adott termékhez, illetve a hozzá tartozó képe és ára. Két link található rajta, a „Tovább az adatlapra”, és a „Minta szerkesztése”. A minta szerkesztésére lépve, bejön az a adott mintához tartozó, feltöltésnél is használt űrlap, adatbázisból betöltve az egyes mezőkbe a hozzájuk hozzáj tartozó adatokat okat. Ekkor tetszőlegesen lehet módosítani, illetve utána menteni ezeket a változásokat (adatbázisban (adatbázisba módosul). Így a következő betöltésnél már a friss adatokkal adato kerül kilistázásra a termék.

IV.II.III. Adatmódosítás

Ugyanazzal a szisztematikával működik, működik, mint a minták szerkesztése, csak itt a személyes profilunkat tudjuk alakítani. (Név, lakcím, rövid bemutatkozás, és egy avatar kép). A lakcím megadása azért fontos (és kötelező is), mert ha vásárolunk a webáruházban, akkor a dokumentumot, amit vettünk kérhetjük nyomtatott formában, postán feladva az a általunk megadott címre. A bemutatkozás és a kép azért szükséges, hogy a felhasználóknak felhasználó egy kis segítséget nyújtson,, hogy kitől vásárolnak v vagy kinek adnak el. (részletesebben lásd. Felhasználói adatlapok)

- 23 -

IV.II.IV. Statisztika

A statisztika menüpont alatt egy nagyon egyszerű kis kimutatás található a mintákkal kapcsolatban. Megmutatja, hogy eddig hány mintát küldtünk be, illetve ebből mennyit fogadtak el (az adminisztrátor dönti el, hogy a minta megfelel e a kritériumoknak, és ha igen aktivizálja a mintát, azaz megjelenik az adatlapja a weboldalon), illetve illetve ezeknek a százalékos aránya, amely a beküldött, illetve elfogadott minták hányadosaként kerül kiszámolásra. Továbbá a kimutatás tartalmazza a felhasználó aktuális egyenlegét forintban (az az összeg melyet vásárlásra fordíthat). fordíthat). Végül, de nem utolsó sorban, a részesedési százalékot, vagyis egy általa eladott terméknek, ténylegesen hány százalékát lékát kapja meg.

IV.II.V. Kijelentkezés

A felhasználó áló nevünk és jelszavunk, session ession segítségével kerül eltárolásra, így ha bezárjuk a lapot majd ismét megnyitjuk, nem kell újra azonosítani magunkat. A kijelentkezés gombra kattintva kiléphetünk az oldal személyes részéről. Így úgy böngészhetünk, böngészhet mintha nem is lennénk regisztrálva.

IV.III. Termékek megjelenítése A dinamikus tartalmi részben kerülnek megjelenítésre a termékek adatlapjai és a hozzájuk tartozó kiegészítések, mint a navigáció illetve a lapozás. IV.III.I Termékek ek felsorolása Egy kiválasztott kategória alatt kilistázásra kerülnek a hozzájuk tartozó termékek adatlapjai. Ez egy kisebb,, rövidebb adatlap melyeken a fontos információk találhatóak meg: név, készítő (más néven alkotó), nehézségi szint, és ár.

- 24 -

A nehézségi fokhoz érdemes megjegyezni, megjegyezni hogy négy féle nehézségi szint van, és annak alapján, hogy hanyas a szint (ezt feltöltésnél feltöltésnél a minta készítője állítja be), a képen látható kis gömböcskékből ből annyi kerül kilistázásra, illetve aszerint változtatják a színüket is. Ezzel is a minél felhasználóbarátabb, interaktív felület kialakítása volt a cél. Ezekkel a rövid, legfontosabb információkat tartalmazó adatlapokkal, a felhasználó kényelmesen, jól átláthatóan tudja böngészni az különböző kategóriákon kon belüli termékeket. Ha valamelyik elnyeri a tetszését és tovább információt szeretne szeretn kapni róla, akkor a „Bővebben »” linkre kattintva elérheti elérhet a részletes adatlapot. IV.III.II. Lapozás Ha egy kategória sok terméket tartalmaz, akkor a kilistázásuknál nem érdemes egymás alá az összeset megjelentetni. megjelentetni Ennek két oka is van: egyfelől kinézetre sem a legesztétikusabb, ha „kilo ométer” hosszú az oldal, másfelől pedig nagyban befolyásolja negatív irányba az oldalbetöltési sebességet is. Mindkettő olyan tényező ami jelentősen rontani tudja az oldal értékét.

Erre jelent megoldást a listázás oldalakba tördelése: ha több mint 10 darab találat van egy kategóriában vagy keresésben akkor automatikusan lapszerű felosztásra kerülnek a termékek. Vagyis egy oldalon egyszerre csak 10 termék kerül megjelenítésre. A következő 10-es csoport a következő lapon érhető el, és így tovább.

- 25 -

A mellékelt képen a keret elszíneződéből jól látszik, hogy éppen a második oldalnál járunk, illetve az is megfigyelhető, hogy jelenleg csak előrefelé lehet lapozni, ugyanis a képen látható esetben a második oldal egyben az utolsó is. IV.III.III. Termék kibontása (részletes adatlap) A részletes adatlapot választva, vagyis amikor kibontjuk a terméket, eltűnik a termék felsorolás, és csak az adott termék minden információja látszik. Vagyis kiegészül még két plusz információval, a leírással és az anyagszükséglettel. A kibontási lehetőséget használva, már egy elég kiterjed betekintést kapunk a vásárolható mintákról, így könnyítve a megvételre irányuló döntésünket, ha elnyerte tetszésünket egy gombnyomással rögtön kosárba tehető a termék (az adatlapon megjelenített bevásárlókocsi ikonra kattintva). A képre kattintva kinagyíthatjuk azt, ekkor az oldal elé felugrik a teljes méretű kép úgy, hogy az egy átlagos monitor felbontás használata mellett is kiférjen a képernyőre anélkül, hogy görgetni kelljen az oldalt (feltöltéskor korlátozásra kerül a képméret és a felbontás is).

A kibontott termék megtekintése után vagy kosárba tesszük azt, vagy az adatlap alján található „Vissza” linkre kattintva egyszerűen visszatérhetünk a terméklistához. IV.III.IV. Navigáció A tartalmi részben legfelül, ha terméket listázunk/keresünk/bontunk ki, akkor megjelenik egy navigációs sor ami segít a tájékozódásban. Rendszerezve, egymás után kiírja, hogy éppen melyik kategóriában járunk és az a kategória miből nyílik (mi a szülője). A hierarchikus sorrend jól nyomon követhető rajta.

- 26 -

Például: 1. Terméklistára mutató navigáció: Termékek » Főkategória 2 » Kategória 1 » Alkategória 2. Konkrét termékre mutató navigáció: Termékek » Főkategória 2 » Kategória 1 » Alkategória » Termék megnevezése 3. Keresésre mutató navigáció: Termékek » Keresés » Találat a „teszt” kulcsszóra A navigáció alatt latt pedig megjelenik megj lenik az aktuális tartalom (pl. a keresett termékek listája). listája) Ha nem létezik a keresett tartalom (lásd. III.III. Kategóriák), akkor a navigációt nem teszi ki, hanem jelzi a rendszer, hogy nem található a keresett tartalom.

IV.IV. Felhasználó adatlapok, adatlap hozzászólások kezelése IV.IV.I. Felhasználói adatlap Sokszor nem is gondolnánk, hogy mennyire hasznos tud lenni egy rövid bemutatkozás, néhány információ ó a leendő vevőről/eladóról. Ezek az adatlapok pontosan ezt a hasznosságot, kényelmességet séget szolgálják. Az összes regisztrált felhasználóhoz tartozik egy adatlap, amit ők tudnak tud szerkeszteni a fentebb már említett „Adatmódosítás Adatmódosítás” menüpont alatt. Az adatlap alatt kerül megjelenítésre megjele a felhasználó által feltöltött és el is fogadott (aktív) mintái, mintái, ugyanazzal a megjelenéssel, mint ami a termékek felsorolásánál is található.

A felhasználói adatlap tartalmazza a teljes és becenevet, a regisztráció időpontját, idő az avatar képet, és a bemutatkozó szöveget. Így könnyen megtekinthetők az egyes felhasználók, illetve a termékeik.

- 27 -

IV.IV.II. Hozzászólások (kommentek) Az egyes termékek alá a bejelentkezett felhasználóknak lehetőségük nyílik az egyes termékek alá hozzászólásokat írni (pl. kérdéseket feltenni, megjegyzéseket írni stb.). Ezt csak regisztrált és bejelentkezett felhasználók tehetik meg. Viszont bárki szabadon megtekintheti azokat. A hozzászólások adminisztrálhatóak. admin

Minden hozzászólás egy külön kis dobozban kerül megjelenítésre, így jól elkülönülnek egymástól a könnyű átláthatóság érdekében. Egy-egy Egy egy ilyen kis doboz a hozzászólás szövegén kívül tartalmazza a dátumot, amikor a komment az adatbázisba került, illetve a hozzászólást író becenevét és képét. A képre vagy nick névre kattintva, előjön az adott felhasználó adatlapja (lásd. felhasználó adatlap-nál) adatlap

- 28 -

V. Vásárlás Már sok szó esett a különböző funkciókról, de akkor lássuk, hogy hogyan is lehet megvásárolni egy (vagy több) mintát. Ez alatt a fejezet alatt az egész vásárlási folyamatot foly szeretném ismertetni, tni, egészen a kosárba tételtől a kézbesítésig.

V.I. Kosár A kibontott termék adatlapon az összes egyéb információn kívül megjelenik a kosárba gomb is.. Erre kattintva egyszerűen beletehetjük azt virtuális kosarunkba. Ebbe a kosárba akármennyi terméket tárolhatunk, és nyugodtan tovább böngészhetjük az oldalt anélkül, hogy a kosárból eltűnnének a bele tett adatokat. V.I.I. Kosár tartalma A vásárlás három lépésből áll: az első a kosár tartalma, mikor mikor a kiválasztott termékek szépen felsorolva egymás alatt megjelennek, névvel, árral és törlési lehetőséggel együtt.

Más jellegű web áruházakban ez a táblázatszerű felsorolás általában még kiegészül egy darabszámmal, hogy hányat szeretnénk az adott termékből vásárolni.. Jelen J helyzetben erre nincs szükség, mivel dokumentumokról dokumentum ról van szó amiből egy személynek teljesen felesleges lenne többet vásárolni. A rendszer intelligensen, ha ugyanazt a terméket akarjuk a kosárba tenni ami egyszer már kiválasztásra került, akkor azt egyszerűen nem veszi bele a listába. A átláthatóságot segíti azz egyes termékek sorban való elhelyezése és, hogy soronként változik a háttérszín (két soronként viszont megegyezik, így egy úgymond „csíkos” megjelenést kapva). Feltüntetésre ésre kerül továbbá, hogy összesen mennyibe kerülnek a kiválasztott termékek, vagyis a végösszeg. A kosárhoz újabb tételt hozzáadni, ozzáadni, egy másik termék adatlapján lévő kosár gombbal gom lehetséges. Ha ki szeretnénk venni a kosárból, kosárból akkor azt

- 29 -

egyszerűen az adott (törlendő) termékkel egy vonalban lévő „X” (törlés) gombbal tehetjük meg. V.I.II. Adatok egyeztetése Ha minden tételt kiválasztottunk, akkor következhet a következő lépés az adatok egyeztetése.. Fontos megemlíteni, hogy a vásárlás nincs regisztrációhoz kötve, ez azoknak lehet kedvező választás akik nem eladni, csak vásárolni szeretnének. szeretnéne

Az adatok egyeztetése egy nagy beviteli űrlap, melynek minden mezőjének kitöltése kitöltés kötelező. A könnyebb yebb áttekinthetőség érdekében három h kisebb alegységre lett osztva, melyek az alábbiak: 1. Kapcsolat 2. Postázási cím 3. Számlázási cím Kapcsolat: e-mail mail cím és telefonszám megadása, plusz a vásárlási és fizetési mód kiválasztása. A vásárlási mód kétféle lehet: online letölthető hető (ez díjmentes), vagy a már má fentebb is említett postai kiszállítás. Az utóbbi opciót választva sztva rögtön megjelenik egy figyelmeztetés, hogy ez a lehetőség plusz költségekkel jár (szállítási,, nyomtatási költség), és a végösszeghez is pluszban hozzáadódik.

A fizetési módnál szintén két két lehetőség közül választhatunk: meglévő egyenlegből levonva (csak regisztrált, és elegendő egyenleggel rendelkező felhasználóknak), felhasználóknak) vagy Pay Palon keresztül.

- 30 -

Postázási cím: vezeték és keresztnév, irányítószám, irány tószám, településnév, utca és házszámot szükséges itt megadni,, természetesen csak abban az esetben, ha a „Postán kérem” opció lett kiválasztva az előző (kapcsolat) pontnál. Számlázási cím: ez szintén csak akkor lényeges, ha postán kérjük a terméket. Szintén egy számlázási nevet, irányítószámot, településnevet, településnevet, utcát és házszámot kell megadni csakúgy mint a postázási címnél. Ha a két cím megegyezik akkor segítségünkre egítségünkre van az adatok másolása gomb, amit egyszerűen megnyomva átmásolhatjuk a postázási cím adatainkat a szállítási címhez.

Az űrlap utolsó mezője egy „Megjegyzés” rovat, ahová a megrendelő tetszőleges véleményt, kérdést stb. fogalmazhat meg. Ezek a megjegyzések, sokszor nagyon hasznos információk,, ugyanis így fény derülhet az esetleges problémákra vagy akár a felhasználói megelégedettségre. V.I.III. III. Rendelés véglegesítése A harmadik egyben utolsó lépés a rendelés elküldése. Ezen az oldalon az előző lépésben megadott adatok kerülnek kiírásra, kiírásra ellenőrzés céljából. Ha bármit szeretnénk változtatni, akkor azt egyszerűen visszalépve megtehetjük megt hetjük (természetesen (termé a rendszer megjegyzi az előző oldalon lévő adatokat, és vissza is tölti azokat).

Ha mindent rendben találtunk akkor nincs más dolgunk, csak a „Rendelés „Rend feladás” linkre kattintva feladni rendelésünket.

- 31 -

V.II. Kézbesítés A rendelés véglegesítése után történik a kézbesítés. Ennek a menete a következő: a megrendelő kap egy megerősítő e-mailt, hogy a rendelés sikeres volt. Ebben a levélben ugyanazok az adatok találhatóak, mint amik az utolsó („Rendelés véglegesítése”) lépésben. A kézbesítésnek két esete lehetséges: az egyik az online kézhezvétel, a másik a postai kiküldés. V.II.I. Online kézbesítés Ez az egyszerűbb és gyorsabb eset. Ha a megrendelő meglévő egyenleg levonását választja, akkor ha rendelkezik megfelelő összeggel, akkor az levonásra kerül, majd kap egy e-mailt benne egy hivatkozással, amelynek segítségével könnyen letöltheti a megvásárolt dokumentumot. Ha Pay Pal-on keresztül fizet, akkor amint az adminisztrátor értesül a tranzakció sikerességéről, akkor ezt jelzi az adminisztrációs felületen, és ekkor a fentebb említett eset játszódik le (vagyis a rendszer kiküldi a letöltési linket tartalmazó levelet).

V.II.II. Postai kézbesítés Postai kézbesítésnél ha a befizetés megtörtént (akár egyenlegből levonva, akár Pay Palon kereszül), a termékminta kinyomtatásra, majd a megrendelő által megadott címre kiküldésre kerül.

- 32 -

VI. Adminisztrációs felület A gyakran változó (dinamikus) adatok kezeléséhez mindenképpen szükséges egy olyan háttéroldal,, ahol programozói beavatkozás nélkül nélkül szerkeszthetőek az adatbázisban tárolt információk. Megfelelő jogosultság birtokában,, be tudunk lépni az adminisztrációs felületre. Ha ezt megtesszük egy egyszerű, letisztult, letisztul könnyen átlátható oldal tárul elénk. elén Fontos az oldal jól strukturáltsága, ráltsága, hogy minél egyszerűbben, gyorsan és hatékonyan lehessen dolgozni rajta. Ugyanúgy mint maga az oldal, az adminisztrációs felület is vízszintes szintes irányban i három részre bomlik: fej, tartalmi, és láb részre.

A fejlécben találhatóak meg az egyes adatbázistáblákhoz adatbázistáblákhoz tartozó fülek (egy egy fül, a hozzá tartozó adatbázistáblával van összekapcsolva, lehetővé téve a tábla szerkesztését). Logikailag sorba rendezettek az egyes menüpontok az alapján, hogy a gyakrabban használtak kerültek előre. Ha egy fül felé visszük az egeret az lenyílik, és az alábbi lehetőségeket kínálja kí fel: új esemény (esemény alatt most egy általános gyűjtőnevet értek, ami lehet bármi pl: termék, kategória, letöltés, díjszabás stb.) létrehozása, vagy a már meglévők szerkesztése.

Vegyük példának, hogy egy új kategóriát szeretnénk felvinni. Az Kategóriák fülre lépve a legördülő menüből az „Új kategória feltöltése”-ét feltöltése” ét választva ezt egyszerűen megtehetjük. Első lépésként megadható ható a kategória neve, majd kiválasztható, kiválasztható, hogy melyik főkategóriába főkategóri tartozik, illetve ha alkategória (ha ( pedig a legalsó szinten van akkor, hogy melyik a szülőkategóriája).. Ezeket megadva a beírt adatok rögtön a megfelelő adatbázis táblába kerülnek (jelenlegi esetben a ’kat’ nevűbe). nevűb

- 33 -

VI.I. Beviteli mezők Az adminisztrációs felület alapja a különböző beviteli mezők, melyekkel adatokat tudunk az adatbázisba menteni. A beviteli mezőknek több fajtája is megtalálható megtal itt. Ezek az alábbiak: Egyszerű szöveges beviteli mező (input): Ez adja a az űrlapok alapját, minden helyen megjelenik. Rövidebb szövegek bevitelére ajánlott (legfeljebb 150-200 150 200 karakter), az itt bevitt értékeke VARCHAR típusban tárolom, tárol melynek maximális értéke 255 lehet). lehet)

Jelen helyzetben olyan eset is lehetséges, mikor a mezői értékét nem lehet módosítani, csak kiírásra kerül benne információk (pl. hányan tekintették meg a terméket, vagy vásárolták meg eddig):

Textarea: szintén szöveges bevitelre szolgál, de ez inkább a hosszabb terjedelmű szövegekhez ajánlott. Adatbázisban Adatbázi TEXT típusként tárolom, mert abban tetszőleges hosszúságú szöveget menthetünk.

Szelekciós lista (selection list): list) legördülő lő listából lehet választani. A válaszható lehetőségek előre vannak definiálva, tehát úgymond fix adatok vannak bennük (ilyen például mikor egy alkategóriát besoroljuk valamelyik kategóriába)

- 34 -

A szelekciós lista nagyban nag megkönnyíti az adminisztrátor dolgát, mivel sokkal egyszerűbb kiválasztani egy fix listából, mint állandóan begépelni ugyanazt (ráadásul ( ekkor fent áll a tévesztés lehetősége). Pipa (checkbox): igaz/hamis értéket tudunk vele eldönteni (ha ha igaz az érték ki van pipálva, ellenkező esetben pedig hamis). hamis) Tárolás: BOOLEAN típusban.

Mentés: ha felvittük/m k/módosítottuk az adatokat, akkor a „Mehet”” gombra kattintva, tehetjük őket az adatbázisba.

VI.II. Események felvitele, módosítása, törlése, törlése keresése Egy új esemény (esemény alatt most egy általános gyűjtőnevet értek, ami lehet bármi pl: termék, kategória, letöltés, díjszabás stb.) a már fentebb is említett, az adott fül fölé visszük az egeret és az „Új esemény feltöltésére”-re re kattintva előjövő űrlapot kitöltve, majd elmentve tehetjük meg. Módosítani az egyes eseményekhez tartozó adatokat, ad , a megfelelő fülre lépve a legördülő listából a „Esemény semény módosítása” almenüpontra, vagy egyszerűen a fülre kattintva tehetjük meg. Az eredmény ugyanaz lesz: egy lista tárul elénk, az megfelelő fülhöz tartozó adatbázis táblában lévő rekordok főbb adatait jeleníti meg. (ezt ezt be lehet állítani, hogy mik legyenek ezek a fő adatok amik ilyenkor megjelenésre kerülnek). kerülnek

- 35 -

A listából valamelyik terméket kiválasztva ugyanaz az űrlap mint ami feltöltésnél volt használatos, csak most a betöltött adatokkal, amiket lehet módosítani, majd menteni. Ebben az esetben a tartalmi részben jobb oldalt fent az alábbi nyomógomokat láthatjuk: „Új”, „Újként szerkeszt”, „Lista” és „Töröl”.

Egyértelműen, az „Új”-al „Új” egy új eseményt tudunk létrehozni, az „Újként szerkeszt”, akkor jön jól, ha pl. két termék nagyon hasonló egymáshoz egymáshoz és csak minimálisan kell módosítani az egyiket, akkor ezt a funkciót használva könnyen létrehozhatjuk a másikat. A „Lista”-val visszatérhetünk térhetünk a nem sokkal ezelőtt említett aktuális esemény listájához, vagy pedig törölhetjük az aktuális rekordot. Ha egyszerre több mindent is szeretnénk törölni egy adatbázistáblában, akkor az megtehető az esemény listánál: egyszerűen kijelölve (checkbox-al), (checkbox al), a törlendőket, törlen majd a szemetes ikonra kattintva, egyszerűen és gyorsan üríthetjük őket az adatbázisból. adatbázisból Természetesen szetesen törlésnél a rendszer mindig kér megerősítést, megerősítést, nehogy emberi hiba folytán, véletlen fontos információk vesszenek el.

Keresni egy-egy egy fülre lépve (mikor előjön elő az aktuális esemény lista), rögtön a fő menüsor alatt megjelenő gyorskeresővel gyorskereső lehet, ami mi a megnevezésekben (névben) keres.

- 36 -

Összegezve

egy

megfelelően

működő,

átlátható

adminisztrációs

felület

elengedhetetlen egy mai modern, jól működő folyamatosan bővülő webes alkalmazás kialakításához. A cég által fejlesztett, letesztelt és sokszor alkalmazott, a megrendelői igényekhez szabott háttéroldal garantálja a minőségi, gyors és precíz adatfelvitelt.

- 37 -

VII. Fejlesztés menete Nagy előnyt jelent, hogy sok minőségi, ingyenes fejlesztő eszköz áll rendelkezésére a webprogramozóknak. Fejlesztéshez Notepad++ szövegszerkesztőt, és Mozilla Firefox böngészőt használok, a kifejezetten webes fejlesztésekhez készült kiegészítői (plugin-jai) miatt. Ilyen a web developer és a firebug plugin. Természetesen más böngészőkben is tesztelem az oldalt (mint Internet Explorer, Safari, Opera, Google Chrome, hogy csak a fontosabbakat említsem), ugyanis az egyes böngészők sokszor egész másképpen jelenítik meg ugyanazt az oldalt. Igazi kihívás mindegyikre optimalizálni, szerencsére sikerült elég nagy tapasztalatra szert tennem ezen a téren így mára ez nem jelent problémát. Az alábbiakban pedig röviden ismertetni szeretném, hogy hogyan készül el egy ilyen jellegű munka, mint a kreatívminták.

VII.I. Elkészítés menete Beérkező új megrendelés esetén, a megrendelő először kiválasztja a grafikus által elkészített látványtervekből a neki megfelelőt. A végleges látványterv kerül hozzám (sok esetben még ezen is módosítani kell a későbbiekben). VII.I.I. Váz kialakítása A látványterv „kézhez kapása” után, felbontom grafikus elemekre az-az és létrehozom az oldal HTML (újabban XHTML) vázát. Ügyelni kell a megfelelő optimalizálásra, vagyis ahol lehetséges minél több szöveg kerüljön beépítésre képelem helyett. Ennek két előnye van: először is sokkal kevesebb helyet foglal, így az oldal gyorsabban tud betölteni, másfelől pedig sokkal egyszerűbben módosítható (főleg dinamikus adatkezelésnél fontos). Kerülni kell a nagy felbontású képelemek használatát, amik sokszor nagy méretűek. Ügyelni szoktam továbbá a képelemek kiterjesztésére, ami nem követeli meg a több millió színt kezelő formátumot (mint a jpg, vagy png), azt elég egy kevesebb színt kezelő kiterjesztésbe konvertálni, ami sokkal kisebb méretű (ilyen a gif kiterjesztés). Ugyanígy sokat lehet javítani a betöltési sebességen, az ismétlődő hátterek kialakításával. Természetesen ez nem minden esetben lehetséges, igazodni kell a megrendelő igényeihez. Tény, hogy manapság szinte kivétel nélkül mindenki rendelkezik szélessávú internet hozzáféréssel, és nem jelent gondot egy ilyen tekintetben kevésbé optimalizált oldal betöltése, de gondolni kell az egyre nagyobb számban jelen lévő mobil internetezőkre, akiknek a hozzáférésük sok esetben jelentősen korlátozott.

- 38 -

VII.I.II. Funkciók beépítése Ez után jön az aloldalak kialakítása. A kész HTML vázat felbontom, három PHP részre: header.php, index.php, illetve footer.php. A header és a footer általában fixek, ezek fogják közre, az egyes aloldalakat, mint az index.php-t ami a középpont (nyitólap). Egy másik oldalra navigálva (pl. kapcsolat.php), a header.php meghívása az első a PHP forráskódban majd a footer.php meghívásával zárul. Ezekbe a php file-okba építem be az oldal funkcionalitását (mint a menüsor, gyorskereső, hasznos letöltések stb.) Az évek folyamán fejlesztett keretrendszer sok segítséget ad, pl. a fuggvenyek.php-ben rengeteg gyakran előforduló problémára készült már megoldás. Szintén nagy segítség a kialakított jól strukturált könyvtárszerkezet, melyek az alábbi mappákból áll: • • • • • • • •

admin class css elemek js sablon tartalom .

-

az adminisztrációs felület jelszóval védett könyvtára objektumorientált modulok gyűjtője css (stíluslap) file-ok a weboldal design-ját építő képelemek JavaScript file-ok HTML sablonok, amit a php file-ok használnak tartalomi részhez kapcsolódó file-ok (pl. képek) gyökérkönyvtár, tartalma főként PHP dokumentumok

VII.I.III. Javítások, tesztelés, utolsó lépések A beépített funkciók után, egy átfogó tesztelési fázis következik. Az esetek többségében feltöltésre kerül egy-egy ideiglenes tárhelyre az oldal (ez egyfajta tesztrendszer), amit a megrendelő is lát, így folyamatosan figyelemmel kísérheti a fejlesztési folyamatot, így sokkal hamarabb kiderülnek a hibák, amivel rengeteg időt és fáradságot lehet megtakarítani. Azért is hasznos ez a megoldás, mert a programozó csak egy szemszögből szemléli a készülő oldalt, és sokszor nem lát meg olyan hibákat amit egy felhasználó rögtön észrevesz, ezért is nagyon fontos a megrendelői visszajelzés. Az utolsó lépésekbe beletartozik a böngésző teszt (ezt érdemes a fejlesztés közben folyamatosan végezni, mert úgy rögtön, könnyebben javíthatóak az esetleges eltérések), a forráskód validálása (http://validator.w3.org/), ami segít a böngésző kompatibilitás megvalósításában (segít kiszűrni az eltéréseket), illetve képet ad az adott weboldalt készítő cég igényességéről, szakértelméről. Ide tartozik még az egyéb dokumentumok (a keretrendszer tartalmazza, de az adott projectnél nincs rá szükség) kivétele, illetve egyéb apróságok, amik nélkül is működik az oldal de a minőségi munka megköveteli ezek betartását is (pl. 404-es oldal kialakítása).

- 39 -

A mai webes világban az egyik legfontosabb feladat egy oldal megfelelő SEO-sítása (Search Engine Optimization), vagyis minél jobban keresőoptimalizálni az oldalt, így természetesen mi is erre törekszünk. Ennek a törekvésnek a gyümölcse, hogy folyamatos fejlődés jellemzi a céget ezen a téren is. Ha bárhol valami hiba kibukik (esetleg több), akkor a cél a minél hamarabbi megoldás, lehetőleg elkerülve még azt a fázist, mikor a rendszer úgymond „élesben” működik. Ha netán több hiba is felmerül, akkor azokat valamilyen szempont szerinti prioritási sorrendbe kell állítani és aszerint haladni, sorban megoldva a problémákat. VII.I.IV. Átadás (éles rendszer) Optimális esetben, ha határidőre az összes funkció a helyére került, és megfelelően le is lett tesztelve az alkalmazás, illetve a megrendelő is meg van elégedve, akkor az oldal kikerül az éles rendszerbe, vagyis a megfelelő (hivatalos) domain néven innentől kezdve elérhető lesz az oldal. VII.I.V. Fejlesztés, karbantartás Megrendelői igény szerint vállaljuk az oldal továbbfejlesztését, felügyeletét, karbantartását. Mint fentebb már említettem, hogy jól átlátható, minél egyszerűbben érthető forráskód előállítására törekszünk, és itt ez különösen fontos, mivel jelentősen megkönnyít a későbbi karbantartást, továbbfejlesztést.

- 40 -

VIII. Összefoglalás Munkám során gyakran találkoztam más weboldal készítő cégek honlapjaival, illetve azok forráskódjával, amik hozzánk kerültek újraírásra, továbbfejlesztése. Sajnos nem egyszer találkoztam korszerűtlen, átláthatatlan, túlbonyolított kódokkal. Megoldásaim során, sokszor szabad kezet kapok, (természetesen vannak cégen belüli konvenciók) és próbálok olyan megoldásokat találni amik minél könnyebben érthetőek, átláthatóak (nagyon fontos a megfelelő dokumentálás). Természetesen nem mindig sikerül mindig minden úgy ahogy tervezve volt, de pont ezekből a hibákból tanulok, és próbálom azokat a hasznomra fordítani. Inspirálóan hat rám, hogy érzem magamon a folyamatos fejlődést, főként az esik jól mikor pozitív visszajelzést kapok munkatárstól, megrendelőtől. A „kreatívminták” oldal esetén elég szerencsésnek mondhatom magamat, mert minden nagyobb fennakadás nélkül (ami nem feltétlenül általános) sikerült a támasztott célkitűzéseket szinte maradéktalanul sikerült teljesíteni. Apróbb hibák fordultak csak elő, amiket a megrendelő jelzett felénk, természetesen ezek azonnali javításra kerültek. Az oldal jól strukturált, a látványtervnek megfelelően készült el, a megfelelő funkcionalitással kiegészítve. Sikerült a cég által preferált, egy nem sablon alkalmazást készítenem, a megrendelő nagy megelégedése. Az oldal forráskódja megfelelően validált, funkciói kiválóan működnek. Remélem lehetőségem adódik az oldal további fejlesztéséhez, természetesen ha erre a megrendelő és a cég is igényt tart.

- 41 -

Irodalomjegyzék Könyvek •

Peter Moulding – PHP fekete könyv

•

George Schlossnagle - PHP fejlesztés felső fokon

•

Julie C. Meloni – A PHP, a MySQL és az Apache használata

•

Virginia Debolt - HTML és CSS Webszerkesztés stílusosan

Internet •

www.php.net

•

www.phpstudio.hu

•

www.css-tricks.com

•

www.jquery.com

•

www.sql.org

•

http://validator.w3.com

- 42 -

Függelék Plágium - Nyilatkozat Szakdolgozat készítésére vonatkozó szabályok betartásáról nyilatkozat. Alulírott (Neptunkód: FLM7SX) jelen nyilatkozat aláírásával kijelentem, hogy a „Webes alkalmazásfejlesztés szabadon választott témában” címő szakdolgozat (a továbbiakban: dolgozat) önálló munkám, a dolgozat készítése során betartottam a szerzıi jogról szóló 1999. évi LXXVI. tv. szabályait, valamint az egyetem által elıírt, a dolgozat készítésére vonatkozó szabályokat, különösen a hivatkozások és idézések tekintetében. Kijelentem továbbá, hogy a dolgozat készítése során az önálló munka kitétel tekintetében a konzulenst, illetve a feladatot kiadó oktatót nem tévesztettem meg. Jelen nyilatkozat aláírásával tudomásul veszem, hogy amennyiben bizonyítható, hogy a dolgozatot nem magam készítettem vagy a dolgozattal kapcsolatban szerzıi jogsértés ténye merül fel, a Debreceni Egyetem megtagadja a dolgozat befogadását és ellenem fegyelmi eljárást indíthat. A dolgozat befogadásának megtagadása és a fegyelmi eljárás indítása nem érinti a szerzıi jogsértés miatti egyéb (polgári jogi, szabálysértési jogi, büntetıjogi) jogkövetkezményeket.

Bokor Györk hallgató Debrecen, 2011. május 2.

- 43 -

Témavezetői véleményezés Bokor Györk a kreatívminták dolgozatát időszerű témaválasztás, világosan kijelölt kutatási irány, a terület alapos ismerete jellemzi. A dolgozat nyelvhasználatát tekintve, tárgyilagos fogalmazásmódjával, a szakkifejezések alkalmazásával a szakdolgozati követelmények kritériumait és értekező próza stilisztikai követelményeit messzemenően kielégíti. A dolgozatban részletesen bemutatásra kerül a www.kreativmintak.hu weboldal szerkezeti felépítése, mely felépítés a mai webes trendekbe tökéletesen bele illik. Az oldal egyes funkciói világosan megfogalmazásra kerültek, részletes bemutatást kaptak. Ezek a funkciók egyfelől a felhasználói igényekből tevődnek össze másrészt programozás technikai problémákat vet fel és old meg. Ezeken keresztül tökéletesen ismertethető a PHP és a mySQL nyelvek közös használata. A webes technológia további nyelveit is megemlítette. Nagyon helyes, hogy egy olyan egyszerű, de a weben mégis nélkülözhetetlen nyelv is szóba került, mit a HTML (XHTML). Ezek tiszta szintaktikájához vezethető vissza (ahogy olvashattuk) a böngésző kompatibilitás illetve a keresőkre optimalizáltság egy része. Ezeket még a legegyszerűbb weboldalak esetén is fontos hangsúlyt kapnak. A dolgozatot összességében igen sikeres munkának, témáját folytatandó kutatási iránynak tartom.

___________________________ Bollmann Krisztián, külső témavezető

- 44 -

Köszönetnyilvánítás Köszönettel tartozom, Dr. Kuki Atilla belső témavezetőmnek, aki sok éves vezetői tapasztalatával és hasznos tanácsaival segítette a munkámat. Köszönöm Bollmann Krisztán külső témavezetőmnek, és főnökömnek, aki rengeteg munkája mellett is vállalta a témavezetést, akár hétvégéjét sem kímélve fáradozott értem. Végül, de egyáltalán nem utolsósorban Bács Jenő designer barátomnak és munkatársamnak az oldal grafikus megtervezéséért, ami nélkül nem készülhetett volna el ez a nagyszerű alkalmazás.

- 45 -

Debreceni Egyetem Informatikai Kar

Recommend Documents