Készítette: Tóth Attila
This repository has been created for the course of 'Alkalmazások fejlesztése' at ELTE University. Here I keep the files of my project organised, and updated.
Ez a repository az ELTE 'Alkalmazások fejlesztése' című kurzusához jött létre. Az itt található fileok mindig a legfrissebb állást tükrözik.
Az alkalmazás célja az, hogy egy élvezhetően használható, kellemes felületet biztosítson kontaktjaink kezeléséhez, azok rendezetten tartásához, konktakcsoportok meghatározásához. Az alkalmazás használatához registráció szükséges.
Vendégként (nem regisztrált felhasználó)
- Vendégként a főoldalon szeretnék egy üdvözlő üzenetet látni
- Vendégként szeretnék egy üdvözlő oldalt látni
- Vendégként szeretnék regisztrációs lehetőséget
Felhasználóként (regisztrált felhasználó)
- Felhasználóként szeretném a saját kontaktjaimat látni a főoldalon.
- Felhasználóként szeretném a kedvenc kontaktjaimat elsőként látni.
- Felhasználóként szeretnék új kontaktot létrehozi.
- Felhasználóként képet szeretnék tudni csatolni egy-egy kontakthoz.
- Felhasználóként meg szeretnék adni több telefonszámot egy-egy kontakthoz.
- Felhasználóként akár e-mail címet is szeretnék társítani egy-egy kontakthoz.
- Felhasználóként szeretnék egy saját kontaktot.
- Felhasználóbarát, ergonomikus elrendezés és kinézet.
- Gyors működés.
- Biztonságos működés: jelszavak hashének tárolása.
- Egyszerű, következetes felhasználói felület, egyszerű használat.
- Kellemes kinzet.
- Kontakt: Egy ismerős adatait reprezentáló objektum, hozzá tartozik kép is telefonszámok is.
- Kontakt csoport: kontakt objektumokból álló csoport.
Vendég
Csak a főoldalt, és a regisztrációt éri el.
- Főoldal
- Bejelentkezés
- Regisztráció
Bejelentkezett felhasználó
A publikus oldalakon kívül ezeket is eléri:
- Új kontakt hozzáadása
- Kontakthoz kép csatolása
- Kontakthoz e-mail cím csatolása
- Kontakthoz telefonszámok csatolása
- Kontakthoz megjegyzés csatolása
- Becenév megadása
- Lakhely beírása
Egy eset bemutatása: kontakt hozzáadása
- A felhasználó az oldalra érkezve bejelentkezik, vagy regisztrál.
- A regisztráció után elérhetővé vált menük közül kiíválsztja a kontakt hozzáadását.
- Ez után az elé kerülő formot kitölti, melynek kötelező eleme csak egy név.
- (Opcionálisan megad telefonszámot, képet, lakhelyet...)
- Mentés gombra kattintva véglegesíti az adatokat.
- Főoldal
- Bejelentkezési oldal
- Regisztrációs oldal
- Főoldal
- Új kontakt hozzáadása
- Listaoldal
- kontaktcsoportok megjelenítése
- kontaktok megjelenítése
- Szerkesztő oldalak
- kontakt szerkesztése
- kontaktcsoport szerkesztése
- Képfeltöltő oldal
- GET / : Főoldal
- GET,POST /registration : Regisztráció
- GET /login : Bejelentkezés
- POST /loginaction : Bejelentkezés
- GET /logout : Kijelentkezés
- GET /contact/new-contact : Kontakt létrehozása
- POST /contact/save-contact : Kontakt mentése
- GET,POST /contact/edit/:id : Kontakt szerkesztése
- GET /contact/:id : Kontakt megtekintése
- GET /contacts : Kontaktok oldal
- GET /contacts/contact-groups : Kontaktcsoportok megjelenítése
- POST /contacts/contact-groups/save-group : Kontaktcsoportok mentése
- POST /contacts/contact-groups/remove-group/:id : Kontaktcsoportok törlése
A tervektől való esetleges eltérések megeshetnek, ugyan is előfordulhat, hogy szerkesztés közben derül ki, hogy minimális változtatással sokkal esztétikusabb eredményt érhetek el.
Vegyünk például egy regisztrációt, majd egy új kontakt felvételét, szerkesztését, törlését.
PHPStorm, local IDE
VCS: git
Github kódtárban tárolom a projekt kódjait.
-
the-contacter
-
config
-
controllers,
- HomeController.js
- ContactController.js
-
models
- Cgroup.js
- Contact.js
- Image.js
- Address.js
- Tnum.js
-
views:
- login
- loginpage.njk
- home
- home.njk
- contact
- add.njk
- list.njk
- master.njk
- login
-
bower.json
-
package.json
-
server.js
A Selenium IDE-t könnyedén telepíthetjük a következő linket használva: https://addons.mozilla.org/hu/firefox/addon/selenium-ide/. Ezen link segítségével egy firefox pluginként települ fel a program és ezentúl használhatjuk bármely projektünkhöz.
A tests könyvtárban találhatóak. Tesztelve vannak a következő esetek, és egymásra épülnek:
- Új kontakt létrehozása
- Előbb létrehozott kontakt módosítása
- Új kontaktcsoport létrehozása
- Előbb létrehozott kontaktcsoport törlése
Futtatáshoz szükséges operációs rendszer: Tetszőleges operációs rendszer
A futtatáshoz szükséges hardver: Operációs rendszerek szerint megadva
Egyéb követelmények: Internet böngésző telepítése, JavaScript ajánlott
Program használata:
- Böngészőben nyissuk meg a főoldalt
- Jelentkezzünk be az oldalra a "Bejelentkezés" gomb segítségével
- Bejelentkezés/Regisztráció után a Lista oldalra jutunk
- Oldalt a "+" gombra kattintva tudunk új kontaktot az adatbázishoz adni
- Töltsük ki az űrlapot
- Hibás adatok esetén az űrlap jelezni fogja a hibát
- "Mentés" gombra kattintva mentsük el az adatokat
- Lista oldalon: "Szerkesztés" gombra kattintva a szerkesztés oldalra jutunk
- Lista oldalon: Megtekint gombra kattintva a Megtekint oldalra jutunk
- Megtekintés oldalon található a szerkesztés gomb
- Szerkesztés oldal: megegyezik az új kontakt oldallal, viszont előre ki van töltve.
http://webprogramozas.inf.elte.hu/alkfejl.php
http://ade.web.elte.hu/wabp/lecke2_lap1.html
http://webprogramozas.inf.elte.hu/alkfejl/A_dokumentacio_felepitese.pdf
Megjegyzés: Engedélyezett JavaScript mellett működik a képfeltöltés is, viszont figyelni kell arra, hogy a "temp" mappa, és az alkalmazás közös partíción legyenek. (Legalább is Windows alatt biztosan.)