Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 31

BUDAPESTI KOMPLEX SZAKKÉPZÉSI CENTRUM

WEISS MANFRÉD SZAKGIMNÁZIUMA,


SZAKKÖZÉPISKOLÁJA ÉS KOLLÉGIUMA

KUPONOK

Témavezető: Készítette:
Kovács László Kunzer Kevin László
Szoftverfejlesztő
Tartalom
1 Bevezetés............................................................................................................................4
1.1 Szakdolgozatom témája..............................................................................................4
1.2 Miért ezt választottam?...............................................................................................4
2 Fejlesztői dokumentáció.....................................................................................................5
2.1 Adatszerkezet, típusok, változok.................................................................................5
2.2 Az adatbázis különböző táblái és azok mezői..............................................................6
2.2.1 A users tábla.........................................................................................................6
2.2.2 A login tábla.........................................................................................................7
2.2.3 A userarchiv tábla................................................................................................8
2.2.4 A kuponok tábla...................................................................................................9
2.2.5 A llearazottermekek tábla.................................................................................10
2.3 A weblapon használt változók...................................................................................11
2.4 Egyedi algoritmusok az oldalon.................................................................................11
2.4.1 A regisztráció algoritmusa..................................................................................11
2.4.2 A beléptetés algoritmusa...................................................................................12
2.4.3 A kupon és leárazott termék feltöltésének algoritmusa....................................12
2.4.4 A kupon beváltásának algoritmusa....................................................................13
2.4.5 A keresés algoritmusa........................................................................................13
2.5 Tesztdokumentáció...................................................................................................14
2.5.1 hibajelzések........................................................................................................14
3 A felhasználói dokumentáció............................................................................................17
3.1 A webes felület célja..................................................................................................17
3.2 Hardware és software igény......................................................................................17
3.3 A webhely megnyitása...............................................................................................17
3.4 Lehetőségek a weboldalon........................................................................................17
3.4.1 Regiszráció és bejelentkezés nélkül elérhető opciók:........................................17
3.4.2 Bejelentkezéssel elérhető opciók:.....................................................................18
3.5 Regisztráció és bejelentkezés....................................................................................18
3.5.1 A regisztráció......................................................................................................19
3.5.2 A bejelentkezés..................................................................................................21
3.6 Kupon és leárazott termék feltöltése........................................................................22
3.6.1 Kupon lehetőség................................................................................................22
3.6.2 Leárazott termék................................................................................................24
3.7 Keresés, Kupon beváltás............................................................................................25
3.8 Profil..........................................................................................................................26
3.9 A Kezdőlap.................................................................................................................27
3.10 Elérhetőségek............................................................................................................28
4 Összefoglalás.....................................................................................................................29
4.1 Célja...........................................................................................................................29
4.2 Megvalósítás..............................................................................................................29
4.3 További célkitűzések..................................................................................................30
4.4 Köszönetnyilvánítás...................................................................................................30
5 Irodalom jegyzék...............................................................................................................31
1 Bevezetés
1.1 Szakdolgozatom témája
Egy olyan oldalt szerettem volna létre hozni, ami segíthet sok, velem egy
helyzetbe lévő fiatalnak. Az oldal lényege, hogy ha van egy kuponod valamelyik
nagyobb üzletláncba egy termékre, amit te nem szeretsz, vagy éppen nem
szeretnél felhasználni esetleg találtál egy nagyon jó árban lévő és/vagy akciós
dolgot, ami több embert is érdekelne, azt feltöltöd és más felhasználja
helyetted. Ezzel segíthetsz másokon vagy te is beválthatsz kupont, ami tetszik,
vagy ami kell.

1.2 Miért ezt választottam?


Voltam olyan helyzetbe, amikor jól jött volna egy ilyesmi oldal és volt pár
kollégiumban élő barátom, aki szerintem ugyan ezt elmondhatja magáról. Az
ötletet egy facebook-os csoport ihlette, amiben voltak már ilyen kuponok és
leárazott vagy jó árban lévő termékek feltöltve ezzel egy gond volt szerintem,
hogy természetesen nem erről szolt a csoport és a sok poszt közül megtalálni
egy ilyet elég nehéz.

3
2 Fejlesztői dokumentáció
Mivel egy weboldal fejlesztését választottam ezért az ehhez szükséges alap
eszközöket használtam. A felhasznált szoftverek pedig a következők:
A weboldalamat egy Windows 10-es laptopon kezdtem el, mivel ehhez vagyok
hozzá szokva fel se merült, hogy mást válasszak.
Visual Studio Code a kódoláshoz, ez a kódolási környezet számomra nagyon át
látható ezért döntöttem ez mellett.
Avast Secure Browser használtam a weboldalam teszteléséhez, valamint
böngészéshez, mivel gyerekkorom óta ezt használom igy erre esett a választás.
Valamint használtam még a Windows 10-en alap értelmezett programként
megtalálható fájlkezelőt.
A XAMPP v3.3.0 a lokális környezet kialakításához.
A XAMPP v3.3.0 tartalmazza:
 az Apache 2.4.17 -ös verzióját,
 a MySql Database-t ami az oldalak hátterében lévő adatbázist
szolgáltatja,
 phpMyAdmin 4.5.1-ot, ami az adatbázis létrehozásához és kezeléséhez
szükséges.

2.1 Adatszerkezet, típusok, változok


A Weblaphoz jár egy minimalista adatbázis, amelyben a regisztrációs adatokat,
illetve a kepéknek nevét fel töltési idejét és sok más adatot el tárolok. A
következő oldalon látható az adatbázisban található táblák szerkezete, amiben
a következő adat típusok láthatóak int, varchar, text, date illetve datetime.
Ezek elengedhetetlenek voltak a Weboldal készítése közben.

5
2.2 Az adatbázis különböző táblái és azok mezői

Az oldalra beérkező adatokat kuponTest adatbázisan tárolom el.


2.2.1 A users tábla

Az első tábla a users tábla, ami Elsősorban a be regisztráló személyek adatait


tárolja.
 Userdatum(datetime) a regisztráció idejét tárolja, hogy tudjuk az
egyén mikor regisztrált be az oldalra.
 A userip(varchar) az egyén ipv4 vagy ipv6 címét tárolja el,
pontosabban azt az ip címet amelyik eszközről be regisztrált.
 A useremail(varchar) a felhasználó email címét tárolja el, amit a
regisztráció fülön meg kell adnia.

6
 A usernick(varchar) a felhasználónevet tárolja, amit szintén meg a
kell adni a regisztráció során, majd ezt lehet látni minden egyes
feltöltött képen.
 A következő a userpw(varchar) ami a regisztráció során, illetve a
jelszóváltoztatás után megadott email címhez tartozó jelszót tárolja.
 A UserID(Int)-el tárolom el minden felhasználó id-jét ez a mező auto
increment ami annyit tesz, hogy amint egy új felhasználó be regisztrál
ez a mező automatikusan feltöltődik egy számmal. Ez a rekord az
egyik legfontosabb, mert ez lesz a felhasználó azonosítója és erre
fogok hivatkozni minden algoritmusba valamint ez különbözteti meg
a rekordokat egymástól, illetve ez köti össze a táblákat egymással.
 A userstatus(varchar) a felhasználók státuszát tárolja el.
2.2.2 A login tábla

A következő a login adattábla ez nem egy elengedhetetlen tábla viszont meg


van a szerepe.
 A luid(int) az előbb említett UserID-t tartalmazza az imént leírtam,
hogy minden felhasználóra ezzel az AI(auto increment) mezőben
található számmal hivatkozok, ebben a táblában sincs másképp.
 Az ldatum(datetime) rekordban a felhasználók bejelentkezésének
idejét tárolom el.
 A lid(int) szintén egy AI(auto increment) mező, amely minden
bejelentkezésnek ad egy számot.
 A lip(varchar) mező a felhasználó
bejelentkezéskor használt ipv4 illetve
ipv6 címét tárolja el.
2.2.3 A userarchiv tábla

7
A soron következő userarchiv tábla ebben a táblában tárolom el a jelszó, illetve
a későbbiekben majd esetleges email vagy felhasználó névmódosítás előtti
adatokat.
 A uaid(int) szintén auto increment ez minden egyes módosításnak az
egy id-t.
 A uanick(varchar) a jelszót módosítandó személy felhasználó nevét
tárolja el, illetve majd, ha nevet szeretne váltani a módosítás előtti
nevet tárolja el.
 A uaemail(varchar) a jelszót módosítandó személy e-mailjét tárolja
el, illetve majd ha ezt szeretné módosítani a módosítás előtti e-
mailjét fogja le tárolni.
 A uapw(varchar) a jelszó módosítás előtti jelszót tárolja el.
 A uaip(varchar) mező a felhasználó jelszó változtatáskor használt ipv4
illetve ipv6 címét tárolja el.
 Az uadatum(datetime) rekordban a jelszó változtatás idejét tárolom
el.
 A uastatus(varchar) a felhasználók státuszát tárolja el.
 Az uid(int) a felhasználó idjét tárolja el, valamint ezzel a mezővel
kötöm össze a táblát a többivel.
2.2.4 A kuponok tábla

 A kid(int) mező szintén egy auto increment rekord, ebben tárolom el


az egyes kuponoknak az id-jét és majd később ezzel hivatkozok
magára a kuponra.
 A kep(varchar) ez a rekord tárolja el a feltöltött képeket, vagyis a
feltöltött képek nevét. Az ebben tárolt szöveggel (azaz a képek

8
nevével) hasonlítom ősszé a „kepek” mappába található képek nevét
és így töltődik fel a weboldalra.
 A nev(varchar) mezőben a feltöltött kupon nevét tárolom el.
Pontosabban a kuponon található termék nevét, ezzel majd a
felhasználó tudja, hogy milyen kupont vált be.
 Az uzlet(varchar) mezőben tárolom el azt, hogy a kupon hol található
meg vagyis, hogy melyik üzletben esetleg alkalmazásban, vagy
weboldalon lehet felhasználni.
 A UserID(int). Ebben található annak a felhasználónak az ID-je azaz
azonosítója, amely ezt a kupont feltöltötte igy lathatom, hogy melyik
fehasználó melyik kupont töltötte fel.
 A Lejarat(date) mezőben a kupon lejáratát tárolom. Mivel minden
kuponnak van határideje így ez elengedhetetlen.
 A statusz(varchar) rekordban tárolom a feltöltött kupon státuszát.
Pontosabban, hogy be van-e váltva vagy nincs.
 A buserid(int). Ebben a táblarészben van el tárolva, hogy a kupont ki
váltotta be. Pontosabban annak a felhasználónak az ID-je, aki
beváltotta. (Ez a mező csak akkor töltődik fel, amikor be váltják a
kupont)
 A bido(datetime)-ben van eltárolva a kupon beváltásának pontos
ideje. (Ez a mező csak akkor töltődik fel, amikor beváltják a kupont)
2.2.5 A llearazottermekek tábla

 A ltid(int) mezőben tárolom el az egyes leárazott terméknek az id-jét


és majd később ezzel hivatkozok magára az egész leárazott termékre.
A mező szintén egy auto increment rekord.

9
 A ltnev(varchar) mező. Ebben a mezőben tárolom el a feltöltött
termék nevét, azaz, hogy milyen termékről van szó, majd a
felhasználó ezek alapján tud keresni a weboldalon.
 A ltUserID(int) rekordban tárolom el a feltöltő azonosítóját ez segít,
hogy felhasználók szerint csoportosítsam a feltöltött képeket.
 A ltuzlet(varchar). Ebben a mezőben található az üzlet neve, vagyis,
hogy melyik üzletláncban esetleg weboldalon lehet megtalálni.
 A hely(varchar) táblarészben található a feltöltött termék pontos
helye például, hogy melyik városban esetleg pontos címe az üzletnek.
 A lkep(varchar) mezőben találhatóak a feltöltött képeket, vagyis a
feltöltött képek nevét. Az ebben tárolt szöveggel (azaz a képek
nevével) hasonlítom ősszé a „kepek” mappába található képek nevét
és így töltődik fel a weboldalra.
 Az ltido(date) mező arra szolgál, hogy a kupon feltöltésének idejét
tároljam el benne ez igen fontos, mert ha jó árba van egy termek nem
lesz úgy hónapokig, hamar elkapkodják.
 A statusz(varchar). Ebben magának a posztnak a státuszát tárolom.

2.3 A weblapon használt változók


Az weblapon használt $_SESSION[UserID] változó az oldalra való belépéstől az
oldalról való kijelentkezésig él. Minden egyes regisztrációnál generálódik az
adatbázisban a users táblán belül egy UserID mezőben letárolt érték ami a
felhasználó azonosítója lesz. A $_SESSION[UserID] értékét a bejelentkezésnél
az előbb említett mezőből kapja, tehát meg fog egyezni UserID mezőben
letárolt értékkel. Az oldalon továbbá $_GET[] illetve $_POST[] változókat is
használtam. A $_GET[] változókat az oldal paraméterezésére illetve keresések
működtetéséhez, míg a $_POST[] változókat a feldolgozó programokhoz való
adatok eljuttatására használjuk fel. A feldolgozó programok ezeket az adatokat
küldik tovább az adatbázisba.
2.4 Egyedi algoritmusok az oldalon
Pár különlegesebb kódrészletet mutatok be, amit az oldalon használtam.
2.4.1 A regisztráció algoritmusa
Célja, hogy a személy, aki használja az oldalt beléptetés után saját felhasználó
címsor alatt is tudjon ténykedni az oldalon, illetve plusz funkciókat tudjon
használni.

10
Lépései:
 Felület létrehozása, ahol tud regisztrálni a felhasználó.
 A felhasználó által kötelezően kitöltendő mezők (e-mail cím,
jelszó) ellenőrzése nem maradt-e üres, ha igen hibaüzenet
küldése.
 A jelszó hosszának ellenőrzése strlen függvénnyel megvan-e a 4
karakter hosszúság, amennyiben nincs hibaüzenet küldése
 A használni kívánt e-mail cím leellenőrzése egy eldöntés tétellel
nincs-e már használatban az oldalon amennyiben már használt
hibaüzenet küldése.
 Abban az esetben, ha kitöltötte a két regisztrációs mezőt, valamint
az e-mail cím még nincs használatban adatbázisba való feltöltés és
visszaigazoló üzenet küldése. (Sikeres regisztráció)

Ez pár ellenőrzés, amellyel az e-mailt, a felhasználónevet, illetve a jelszót


ellenőrzöm, hogy minden feltételnek megfelelő-e.
2.4.2 A beléptetés algoritmusa
A beléptetés célja, hogy a regisztrált felhasználó be tudjon lépni és saját
profilja legyen. És több funkciót tudjon használni.
Lépései:
 Felület létrehozása, ahol a felhasználó be tud jelentkezni.
 A fent említett $_POST[]-os változókból a $_POST[useremail]
összehasonlítása az adatbázisban, ehhez a fiókhoz tartozó useremail
mezővel.
 Majd a $_POST[userpw] összehasonlítás userpw mező tartalmával.
 Eltérés vagy üresen hagyott mező esetén hibaüzenet küldése.
 Amennyiben az ellenőrzés sikeres felhasználó beléptetése.
 A felhasználó belépési idejének és azonosítójának eltárolása.
 Mindezt követően Főoldalra ugrás beléptetett módban.

11
Ezzel ellenőrzöm, hogy létezik-e az az e-mail és hozzá társított jelszó, amellyel
megpróbált bejelentkezni.
2.4.3 A kupon és leárazott termék feltöltésének algoritmusa
Célja, hogy a beregisztrált, illetve bejelentkezett személy fel tudjon tölteni az
oldalra kuponokat vagy olyan terméket, ami jó árban van.
Lépései:
 Egy felület létrehozása, ahol a bejelentkezett felhasználó ki tudja,
választani, hogy pontosan mit szeretne feltölteni, majd egy
javascript utasítással feltétele a keresősávba.
 $_GET[] utasítással megnézni, hogy mit választott a felhasználó és
a megfelelő Form megjelenítése.
 Megvizsgálás, hogy minden mezőt megfelelően töltött ki, ha nem
hibaüzenet küldése.

 Megvizsgálás, hogy ha az „válasz üzletet”($_POST[uzlet])


opciónál az egyéb válaszlehetőség van ki választva akkor egy
textbox jelenjen meg. A $_POST[uzlet] a textbox tartalmával
teszem egyelővé
 A feltöltött fájl formátumának megvizsgálása, hogy kép-e, ha nem
hibaüzenet küldése.
 Ha minden megfelelő egy megerősítő üzenet küldése, hogy
„Sikeres feltöltés”, ezt követően feltöltés az adatbázisba.
 Adatbázisból lekérdezés majd stílus adassál együtt kiíratása az
oldalra. Kupon feltöltése esetén a fő oldalra íratás és
elhomályosítás majd egy „Beváltás” Gomb rátétele, Leárazott
termék esetén egy másik oldalra íratás.

12
2.4.4 A kupon beváltásának algoritmusa
Célja, hogy egy kupont be lehessen váltani és a felhasználó be tudja váltani.
Lépései:
 Megnézni, hogy melyik azonosítóval ellátott személy váltja be a kupont
($_SESSION[UserID]) majd adatbázisba az a sor frissítése, amelyik
azonosítóval ellátott kupont váltotta be.
 Adatbázisba való kiíratás, hogy melyik azonosítóval váltották be és, hogy
pontosan mikor. Frissíteni a kupon státuszát.
2.4.5 A keresés algoritmusa
Kettő féle keresés létezik az oldalon az első a gombos keresés, amit az oldalon
látható négy gomb közül lehet választani. A második a szokványos keresés
mező, melybe a termék neve szerint lehet keresni.
Lépései:
 Meghatározott gombos keresés:
o Egy eldöntés tételével kiválasztani, hogy melyik oldalon van a
$_GET[] metódussal.(Kupon/Leárazott termék)
o Oldal szerint a megfelelő termékek lekérdezése adatbázisból.
o Ezek kiíratása az oldalra
 Szokványos keresés mező
o $_POST[] metódussal átküldése a „kereses” mező tartalmát
o Adatbázisból való lekérdezése azon termékeknek mely nevében
szerepel az, ami a $_POST[] metódusban van.
o Ezek ki íratása az oldalra

2.5 Tesztdokumentáció
Az oldal ki lett próbálva a következő böngészőkben: Google Chrome, Avast
Security Browser, Mozilla Firefox illetve Microsoft Edge-be. Nagy különbséget
nem vetem észre a böngészők között. Mobileszközre is valamilyen szinten
optimalizálva lett a weboldal, tehát nagy részt reszponzív.
Biztosítottam tesztelői hozzáférést: E-mail: Testemail@gmail.com
Jelszó: tesztjelszo
2.5.1 hibajelzések
Regisztráció:

13
Ha az e-mail cím mezőbe nem jó
formátumba kerül be az e-mail címe
vagy nem került bele semmi.

abban az esetben, ha már az e-mail


cím használatban .

amennyiben nem megfelelő hosszúságú a


jelszó vagy nincs a mezőbe írva semmit.

abban az esetben, ha a két mezőbe beírt


jelszó nem egyezik

14
Bejelentkezés:
Így jelenik meg, ha rossz
formátumban van írva az e-
mail cím vagy, ha nem
megfelelő hosszúságú jelszó.

Amennyiben elírásra kerül az


e-mail cím vagy nem az e-
mail címhez társított jelszót
adták meg, egy ilyen
hibaüzenet fog megjelenni.

Kupon feltöltés:
 Amikor nem adják meg
az üzlet nevét:

 Ha nincs kiválasztva a
kupon lejáratának pontos
dátumát:

15
 Amennyiben nem adtak
meg képet, illetve nem
megfelelő formátumban
szeretnék feltölteni:
(png, jpeg, jpg)

 Amennyiben nem adják


meg a termék nevét:

Jelszómódosítás:
 Amennyiben hibásan
adták meg a régi jelszót:

 Ha a választott jelszó túl


rövid

 Ha a két új jelszó mezőbe beírt jelszavak nem egyeznek

16
3 A felhasználói dokumentáció
3.1 A webes felület célja
A weboldal célja, hogy segítséget nyújtson az emberek számára. Biztosítson
egy kis spórolási lehetőséget és a megjelent kuponok kihasználhatóságát is
eredményezi, mivel rendszeresen kárba vesznek, viszont így átadható másnak
is.

3.2 Hardware és software igény


Ez egy weboldal, amely külön nem igényel letöltést viszont egy eszközt igen,
mely biztosít internet hozzáférést ez lehet akár PC, Laptop, Mobiltelefon vagy
Táblagép is. Kell internet, illetve egy böngésző, amin keresztül
kapcsolódhatunk a weboldalhoz ez a böngésző lehet esetleg a Google Chrome,
Firefox, Internet Explorer.

3.3 A webhely megnyitása


Abban az esetben, ha az eszköz biztosítva van nincs más hátra, mint
bekapcsolni majd várni, amíg teljesen elindul a rendszer. Ezután rákattintani a
kiválasztott böngészőre, majd a kereső sávba beilleszteni a következő linket:

https://kupon.deak.one/

Ezt követően weboldal kezdőlapján találhatod magad.


3.4 Lehetőségek a weboldalon

3.4.1 Regisztráció és bejelentkezés nélkül elérhető opciók:


 megtekinthetők a kuponok,
 megtekinthetők a leárazott termékek,
 kupon beváltása (ehhez ajánlott a regisztráció, illetve
bejelentkezés),
 megtekinthető a kapcsolat is.

17
3.4.2 Bejelentkezéssel elérhető opciók:
 az összes bejelentkezés nélküli opció,
 kupon feltöltésének lehetősége,
 leárazott termék feltöltése,
 az eddig beváltott kuponok listájának megtekintése a profil
fülnél,
 az eddig feltöltött kuponok, illetve leárazott termékek
listájának megtekintése.
3.5 Regisztráció és bejelentkezés
Tapasztalatok szerint az emberek nagy része nem szeret bajlódni a regisztráció,
néha egészen hosszas folyamatával, így ezt figyelembe véve vált néhány alap
funkció elérhetővé bejelentkezés és regisztráció nélkül is (mint pl.: a már
említett kuponbeváltó funkció), emellett a regisztráció rövid és egyszerű.
Ennek ellenére vannak olyan funkciók is, melyekhez viszont a bejelentkezés
elengedhetetlenné válik (mint pl.: a kuponfeltöltés opció). Viszont előszöris
regisztrációra lesz szükség. Ezt a lehetőséget a kezdőlapon a Regisztráció
gombra kattintva érhetjük el, miután megjelenik a regisztráció fül, amely egy
felhasználónevet, egy e-mail címet és egy jelszót kér. Amint ez megtörtént
ugorhatunk a bejelentkezésre, ami szintén a kezdőlapon található. A belépés
gombra kattintva az oldal közepén előugrik a bejelentkezéshez szükséges
ablak, melyhez a regisztráció során megadott e-mail címre és jelszóra lesz
szükség.
Ha telefonon szeretnéd használni az oldalt a bejelentkezés, illetve regisztrációs
gombot az oldal tetején található „Kezdőlap” melletti gombot kell megnyomni.
Ez után egy legördülő listát fogsz látni:

18
A regisztrációs felület kinézete:
(Ezt fogod látni amennyiben rá
nyomsz a regisztráció gombra)

A bejelentkezési felület kinézete:


(Ezt fogod látni amennyiben rá nyomsz
a belépés gombra)

3.5.1 A regisztráció
 Felhasználónév: ebbe a mezőbe minimum 4 karakter hosszúságú nevet
kell írni és nem lehet már egyszer akár más által lefoglalt felhasználó
nevet írni. Ez a felhasználónév fog megjelenni a profilodnál, illetve ez a
név jelenik meg minden egyes feltöltött kuponod, leárazott terméked
tetején.

ha nem megfelelő hosszúságú a ha a felhasználónév, amit


felhasználónév vagy nem adtál választottál foglalt ezt a
megsemmit ezt a hibaüzenetet hibaüzenetet fogod látni az előugró
fogod látni. ablak alján.

19
 E-mail cím: ebbe a mezőbe az e-mail címedet kell beírni. Természetesen
az e-mail címednek is olyannak kell lennie, amit nem használt senki.

amennyiben az e-mail cím mezőbe


abban az esetben, ha már az
nem jó formátumban írtad be az
e-mail címed használatban van
címed vagy nem került bele semmi
ezt a hibaüzenetet fogod látni az
ezt a hibaüzenetet fogod kapni.
előugró ablak alján.

 Jelszó: Ebbe a mezőbe kell beírni a jelszavadat. A jelszavadat ne felejtsd


el, mert nem lehet megváltoztatni. Ezzel a jelszóval tudsz majd
bejelentkezni, ez lesz a kulcs a profilodhoz. Ebbe a mezőbe beírt jelszó
szintén minimum 4 karakter hosszúnak kell lennie.

 Jelszó ismét: Ebbe a mezőbe kell beírni a jelszavadat ismét. Ügyelj arra,
hogy pontosan megegyező legyen az előző mezőbe beírt jelszóval. Ez a
mező azt a célt szolgálja, hogy meg erősítsed a jelszavadat.

amennyiben nem megfelelő abban az esetben, ha a két


hosszúságú a jelszó vagy nem mezőbe beírt jelszó nem egyezik
adtál meg semmit, ezt a ezt a hibaüzenetet fogod látni az
hibaüzenetet fogod látni. előugró ablak alján.

 Amennyiben mindent a szabályoknak megfelelően csináltál ezt az


üzenetet fogod látni az előugró ablak alján:
máris tovább ugorhatsz a
bejelentkezéshez.

20
3.5.2 A bejelentkezés
A bejelentkezéshez a regisztráció során kiválasztott e-mail címre és jelszóra lesz
szükséged.
 E-mail cím: ebbe a mezőbe kerül az e-mail címed, melyet már
kiválasztottál a regisztráció alatt.
 Jelszó: itt a megadott jelszavadat kell használnod.

Így jelenik meg, ha rossz


formátumban írtad az e-mail
címed vagy, ha nem
megfelelő hosszúságú jelszót
adtál meg.

Amennyiben elírtad az e-mail


címed vagy nem az e-mail
címhez társított jelszót adtad
meg, egy ilyen hibaüzenet fog
megjelenni.

így néz ki, ha a bejelentkezésed


sikeres.
Teszt@gmail.com

*****

21
3.6 Kupon és leárazott termék feltöltése
Bejelentkezés után egyből a kezdőlapon (telefonon egy kicsit lejjebb görgetve)
található egy „Kupon feltöltése” gomb. Erre kattintva behozhatjuk a feltöltő
felületet. Ez után ki kell választani, hogy kupont vagy leárazott terméket
szeretnénk feltölteni.

3.6.1 Kupon lehetőség


Amennyiben a „Kupon” lehetőséget választjuk, ezt a felületet fogjuk látni:

A Név melletti mezőbe a kuponon szereplő termék nevét kell beírni. Ezt
követően ki kell választanunk, hogy melyik üzlethez tartozik a kuponunk. Ha
kuponunk nem kapcsolódik a felsorolt üzletek közé, akkor az „egyéb” mezőt
kell választanunk.
Majd a mellette megjelenő szövegdobozba kell beírnunk az üzlet nevét.
Következő a Lejárat, melynél a kupon beválthatósági idejét kell feltüntetni. A

22
Fájl kiválasztása gomra kattintva ki kell választanunk a kupon (vonalkódjáról is)
készült képet, majd a beküldés gombra kattintva elküldhetjük a feltölteni
kívánt kuponunkat.
Hibaüzenetek:
 Amennyiben nem adjuk
meg a termék nevét:

 Ha az Üzlet melletti mező


üresen marad:

 Ha nem választod ki a
kupon lejáratának pontos
dátumát:

 Amennyiben nem a
képet, illetve nem
megfelelő formátumban
szeretnél feltölteni:
(png, jpeg, jpg)

 Ha mindent megfelelően
kitöltöttél:
3.6.2 Leárazott termék
Amennyiben a „Leárazott termék” opciót választjuk, ezt a felületet fogjuk látni:

23
Itt azok a termékek kerülnek feltöltésre, melyeket egy üzletben találtál és
olcsónak véltél, úgy gondoltad, hogy másokat is érdekel, és talán segítségükre
lenne ezen az áron hozzáférni.
A Név melletti szövegdobozba kerül a termék neve. Ezt követően ki kell
választanunk, hogy melyik üzlethez tartozik a termék. Ha termék nem
kapcsolódik a felsorolt üzletek közé, akkor az „egyéb” mezőt kell választanunk.

Majd a mellette megjelenő mezőbe kell beírnunk az üzlet nevét, ahol


megtaláltuk ezt a jó árban lévő terméket. Ezek után a Cím, Hely részbe kerül az
üzlet helyének pontos meghatározása (pl.: a kiválasztott üzlet a Tesco, a cím,
hely pedig a Campona). A Fájl kiválasztása gombot megnyomva pedig
tölthetünk fel a termékről képet (lehetőleg olyat, amely bizonyítja a terméket
és az árát is).
Hibaüzenetek:
 Amennyiben nem adjuk
meg a termék nevét:

 Ha az Üzlet melletti mező


üresen marad:

24
 Ha nem választod ki a
kupon lejáratának pontos
dátumát:

 Amennyiben nem a
képet illetve nem
megfelelő formátumban
szeretnél feltölteni:
(png, jpeg, jpg)

 Ha mindent megfelelően
kitöltöttél:

3.7 Keresés, Kupon beváltás


Menü részben (telefonon az előbb említett
legördülő listában) található keresés
mezőben rá lehet keresni pontosan a
termékre (termék neve által). Ha meg
találtuk a nekünk tetsző kupont a felület
közepén látható egy beváltás gomb. Ha rá
nyomunk a kupon már a miénk. A
beváltásra került kupon a profilon lesz
majd megtalálható. Ha minden jól
működött ezt fogjuk látni:

25
3.8 Profil
A profilunkat a saját nevünkre kattinthatva tekinthetjük meg, ezt is menü
sávban találjuk (telefonon az előbb említett legördülő listában). A profilon
található három gomb:

A három gomb mindegyike csinál valamit. Kezdjük az elsővel


 Beváltott kuponok: itt található mindegyik kupon, amit beváltottunk
időrendi sorrendbe kezdve a legutóbb beváltottal.
 Feltöltött kuponok: ez a gomb megnyomása után jelennek meg az
általunk feltöltött kuponok.
 Saját leárazott termékek: ez a fül alatt találhatjuk a magunk által
feltöltött leárazott termékeket.
Ezek felett találunk egy jelszó módosítás gombot is. Ez a nevéből adódóan arra
való, hogy meg tudjuk változtatni a jelszavunkat. Ha rá nyomunk a gombra 3
szövegdobozt láthatunk, az elsőbe a régi jelszót kell írni, amelyikkel eddig
bejelentkeztél a másodikba a választott új jelszót, illetve a harmadikba is, ez
egyfajta megerősítés, hogy biztos ezt a jelszót szeretnéd. Mikor mindennel
megvagyunk a jelszó módosítása gombbal véglegesíthetjük.

Hibaüzenetek:
 Amennyiben hibásan adtad
meg a régi jelszavadat:

 Ha a választott jelszó túl


rövid

26
 Ha a két új jelszó mezőbe
beírt jelszavak nem
egyeznek

 Amennyibe mindent
megfelelően írtál

Más profilját is megtekinthetjük ezt egy kupon,


illetve leárazott termék tetején található néven
tehetjük meg. Itt ugyan azokat a gombokat
találjuk, ugyan azokkal a funkciókkal.

3.9 A Kezdőlap
A kezdőlapról általánosan elérhető az oldal összes funkciója. A profil, a
bejelentkezés, a regisztráció, viszont itt található alapvetően Feltöltött
kuponok és a Leárazott termékek fül is, illetve a Kapcsolat.
A kezdőlapon található a felsorolt üzletek alatt a Feltöltött kuponok és a
Leárazott termékek gomb. Ha a kuponokat szeretnénk megtekinteni, nincs más
dolgunk, mint megnyomni az oldal tetején található kezdőlap gombot vagy az
előbb említett Feltöltött kuponok-at. Ha rá nyomtunk, akkor a Feltöltött
kuponok gomb zöldre változik így biztosak lehetünk abban, hogy a kuponokat
látjuk éppen. Amennyiben leárazott termékeket szeretnénk nézni a fent
említett Leárazott termékek gombra kell kattintanunk, és ha rá nyomunk ez a
gomb zöldre változik, innen tudhatjuk, hogy ezen az oldalon vagyunk.

27
Jelenleg a feltöltött kuponok oldalon vagy, és a kuponokat nézed.
Jelenleg a Leárazott termékek oldalon vagy, és az termékeket nézed.

3.10 Elérhetőségek
Remélem az oldal használóinak segíthettem, ha már csak egy emberhez is eljut,
amit szerettem volna ezzel elérni az már örömet jelent számomra . Ezek
mellett szeretném még oldalamat tovább építeni, amihez vannak még
ötleteim, de ha bárki szeretne, még építeni az oldalon szívesen elfogadok építő
jellegű tanácsokat.
Amennyiben megérintett az oldal és lenne ötleted, a következő
elérhetőségeken bármit meghallgatok.
kevinkunzer@gmail.com Illetve +36 70 907 8975

28
4 Összefoglalás
4.1 Célja
Weboldalam célja elsősorban, hogy akár egy minimális segítséget nyújthassak
vele azok számára, akiknek szükségük van, egy kis megtakarításra vagy
éppenséggel van olyan termék, amit szívesen vásárolnának, viszont sokszor
horror árakon mennek. Az oldal célközönsége elősorban (saját tapasztalat által)
például a diákok/kollégisták, akiknek nincs, illetve kevés bevételük van, a
kollégiumi életet pedig nemigen mondanám virágzónak, így nekem is volt, hogy
sokszor töprengeni kellett az étel megoldásán. Tudom, hogy annó nekem is jól
jött volna valami hasonló segítség, hogy olcsóbban hozzáférjek néhány
élelmiszerhez, így szeretnék most nekik segítő kezet nyújtani, viszont
természetesen az oldal nem csak őket várja tárt karokkal, hanem bárkit, aki
spórolni szeretne vagy szimplán bárkit, akinek jól jön egy-egy információ vagy
kupon.
4.2 Megvalósítás
Először egy adatbázist hoztam létre, majd ebbe két táblát a users és a login
táblát. Ezek után megcsináltam a weboldalam fő oldalát az index.php-t, majd itt
hozzárendeltem a többi php fájlt; regisztráció, illetve bejelentkezést. Aztán
megírtam ezeknek a kinézetét és azokat a php fájlokat, amivel kiírom
adatbázisba ezeknek a tartalmát. Innentől működött is a regisztráció és a
bejelentkezés.
Ezután adatbázisba létrehoztam a kupon táblát, majd az ehhez tartozó <form>
felületet is megírtam. Következőként létrehoztam a kezdőlap php-t, majd erre
kiirattam az összes kupont, amit tartalmaz a kupon adattábla. A következő
lépés volt a beváltás gomb, minden kezdőlapon szereplő kuponra ráraktam ezt,
aztán egy kis CSS, mellyel minden képet elhomályosítottam, egészen addig,
amíg beváltásra nem kerül. A gombokhoz írtam egy SQL utasítást, ami a kupon
táblában a statusz rekordot frissíti.
A bootstrap segítségével létrehoztam egy navbar-t, amin szerepelt egy keresés
mező, így úgy döntöttem, hogy egy keresési lehetőséget is csinálok az oldalon.
Ehhez nem kellett más, mint a $_POST[] változóval átküldeni a kezdőlap php
oldalra, majd egy SQL utasítással, azokat lekérdezni, amely megegyezik a
keresni kívánt szöveggel.
Ezek után minden lépés magától értetődően következett, például a leárazott
termékek szinte ugyanazzal a folyamattal jött létre, mint a kuponok.

29
4.3 További célkitűzések
 Az oldalon ugyebár miután beváltottál egy kupont, azt megtalálod a saját
profilodon a beváltott kuponok gomb alatt. Szeretnék majd még
létrehozni egy hasonló koncepciót a leárazott termékekkel is, annyi
különbséggel, hogy ezeket lementeni lehet majd, aztán elmentődnek a
profilban, ahol később összeszedetten megtekinthetőek lesznek.
 Szeretnék egy beváltási limitet is létrehozni. Ezalatt azt értem, hogy egy
felhasználó például egy nap alatt csak három kupont tud beváltani. Ezzel
azt szeretném elérni, hogy a kuponok szétosztódjanak a felhasználók
között és ne egy ember által legyen beváltva az összes, így kikerülve
(limitálva a kárt) azokat a felelőtlen embereket, akik csak szórakozásból
szeretnék az oldal célját tönkre tenni.
 Meg szeretném oldani még azt a problémát is, hogy csak valódi e-mail
címmel lehessen lebonyolítani a regisztrációt. Ezt úgy tervezem majd
megvalósítani, hogy a rendszer a megadott címre egy automatizált
visszaigazoló emailt fog küldeni, amit, ha elfogadnak, akkor válik majd
sikeressé a regisztráció.
Ezek mellett vannak még kisebb megvalósításra váró célok is, ilyen például a
profilon való utolsó simítások (pl.: lehessen hozzáadni profilképet).
4.4 Köszönetnyilvánítás
Ezúton is szeretném megköszönni az engem tanító tanároknak, mert
nélkülük ez a szakdolgozat nem készülhetett volna el. Hálával tartozom
Kovács László Bálint tanár úrnak, valamint Fodor Péter tanár úrnak, akik a
tanórákon nagyon sok tudással halmoztak el engem. Illetve a barátnőmnek
az ötletelés és a dokumentáció megfogalmazása miatt.

30
5 Irodalom jegyzék
A szakdolgozathoz használt források:
http://www.infojegyzet.hu/ : dokumentáció
www.w3schools.com : html tartalmak és css segítség
https://stackoverflow.com/ : A javascript és hibakezelések.

31

You might also like