Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a modul kezdőlapjáraUgrás a tananyag előző oldaláraUgrás a tananyag következő oldaláraFogalom megjelenítés (nem elérhető funckió)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintéseSúgó megtekintése

Tanulási útmutató

Összefoglalás

A fejezetben megismerkedünk a webes alkalmazások tervezésének alapjaival és eszközeivel. A fejezetben egy konkrét alkalmazás tervezésén keresztül mutatjuk be az egyes lépéseket.

Követelmény

A fejezetet elsajátítva képesnek kell lenni arra, hogy kis vagy közepes méretű alkalmazás tervezését saját magunk elvégezzük.

Önállóan megoldható feladatok

Fel a lap tetejéreTartalomjegyzék

Webes alkalmazások tervezése, tervezési eszközök

A tananyagban a példákat egyetlen példaalkalmazás keretein belül szándékozzuk bemutatni. A példaalkalmazás lehetőséget ad arra, hogy ne csak a technikai problémákat mutassunk be és oldjunk meg apróbb példákon keresztül, hanem azzal is szembesüljünk, hogy egy nagyobb alkalmazás készítésekor ezek az apróbb részletek hogyan állnak egésszé, és milyen további kihívásokat rejtenek magukba. Látni fogjuk, hogy egy nagy egész több mint részeinek összessége. Ebből a célból egy megfelelően nagy, de mégis átlátható méretű példaalkalmazás készítését tűztük ki célul, mely lehetőséget ad mind a kisebb feladatok megoldására, mind pedig a nagy egésszé kovácsolás bemutatására.

A tananyagban célunk egy olyan webes alkalmazás készítése, mely lehetővé teszi fényképbemutatók készítését, megtekintését és publikálását.

A fenti szöveg azonban nagyon sok kérdést vet fel:

Ezekre a kérdésekre (és még talán egyéb felvetődött kérdésekre) mind válaszolnunk kell AZELŐTT, hogy a konkrét fejlesztésekbe belekezdenénk. Részletes tervezéssel sok későbbi felesleges munkát kiküszöbölhetünk. Ugyanakkor ne áltassuk magunkat: fejlesztés közben vagy akár az alkalmazás (főleg webes alkalmazás) használata közben sok olyan igény felmerülhet, amely az eredeti koncepciónkat megváltoztathatja, felboríthatja.

Nézzük végig módszeresen az egyes tervezési szempontokat:

Követelmények összegyűjtése

Ebben a fázisban a fejlesztő felméri, összegyűjti a megrendelő funkcionális és nem funkcionális igényeit, elvárásait, ez alapján meghatározza, vagy közösen meghatározzák az elvárandó funkciókat, definiálják a marketing- és stratégiai célokat.

A további tervezési lépések az összegyűjtött követelményekre épülnek, azok kifejtéseinek, fejlesztési szempontból részletezéseinek tekinthetőek.

A követelmények összegyűjtésének célja az alábbiak, meghatározása, figyelembe véve a rendelkezésre álló erőforrásokat.

Példánkban felmértük az alkalmazással szemben támasztott követelményeket, ezeket felsorolás-szerű leírásban írjuk le:

Funkcionális követelmények

Azaz a nyújtandó szolgáltatások ismertetése, esetleg rövid leírása.

Nem funkcionális követelmények

A jellemzően nem funkcionális követelményeket, azaz megszorítások a szolgáltatásokra (funkciók) érdemes kategorizálni.

Legalább az alábbi kategóriák szerint:

Természetesen megadhatunk egyéb kategóriákat is, például:

Alkalmazásunkkal szemben támasztott nem funkcionális igények lehetnek például az alábbiak:

Jelen jegyzetben nem foglalkozunk a stratégiai követelményekkel, célokkal, de itt kellene felsorolni az erre vonatkozó elvárásainkat is, melyek meghatározzák a marketing eszköztárat, valamint az alkalmazás üzleti modelljét.

Vissza a tartalomjegyzékhez

Szerepkörök, használati esetek, folyamatok meghatározása

Szerepkörök

Ebben a részben egyrészt arról kell döntenünk, hogy milyen jogosultsági csoportokat szeretnénk kialakítani. Másrészt meg kell adnunk, hogy az egyes jogosultsági csoportok milyen funkciókat érnek el, majd meghatározhatjuk a folyamatok pontos menetét, azaz az egyes funkciók végrehajtásának lépéseit.

A jogosultsági csoportokat szerepköröknek hívjuk, a felhasználókat pedig legalább egy szerepkörhöz rendeljük. Az alkalmazásunkban a fenti igények alapján háromféle szerepkör körvonalazódik ki:

Az azonosításon kívül még arra is figyelnünk kell, hogy a bejelentkezett felhasználók milyen tartalmakhoz férhetnek hozzá. Ezt a lépés autorizációnak hívjuk, és a példaalkalmazásban kimerül annyiban, hogy minden bejelentkezett felhasználó csak a saját bemutatóit szerkesztheti, másét nem.

A felhasználókhoz hozzárendelhetjük az egyes funkcionális követelményekhez, szkenáriókhoz, azaz a használati esetekhez. Táblázatos formában érdemes összefoglalni az egyes szerepkörök tulajdonságait:

Szerepkör neve:

RegisztráltUser

Leírás:

Regisztrált felhasználó. Az alkalmazás teljes funkcionalitása csak ebbe a csoportba tartozó felhasználók számára érhető el.

Profil adatok:

oid, userName, password, email

Super-group:

User

Sub-group:

Nincs

Kapcsolódó use-case:

Login, Bemutató megtekintés, Keresés, Bemutató információk lekérése, Új bemutató, Kép feltöltés, Bemutató szerkesztése, Kép törlése, Bemutató törlése, Kedvencnek jelöl

Objektumok – olvasási joggal

Bemutato, Kep

Objektumok – módosítási joggal

Bemutato, Kep

Használati esetek

Ezt követően a követelmények alapján össze kell szedni a használati eseteket, szcenáriókat, forgatókönyveket, melyeket az áttekinthetőség kedvéért szokás ún. használati eset (use case) diagramon ábrázolni:

Az alkalmazás használati eset diagrammjaAz alkalmazás használati eset diagrammja

Folyamatok meghatározása

Az egyes használati esetek részletes folyamatait is le kell írni, erre is több lehetőség van. Jelen példánkban az UML Activity Diagramot (egyéb ajánlott leírási formátum lehet például az ún. Business Process Modeling Notation) és a táblázatos formát használjuk.

Példa: Új bemutató készítése:

Használati eset, folyamat leírása activity diagrammalHasználati eset, folyamat leírása activity diagrammal

Cím

Új bemutató készítése

Cél

Új bemutató album készítése.

Előfeltétel

Csak regisztrált felhasználó (RegisztráltUser) tud új bemutatót készíteni.

Utófeltétel

A bemutató mentése sikeres.

Folyamat leírása

Az alábbi lépések végrehajtása szükséges:

Az alábbi adatokat kell a felhasználónak kötelezően megadnia egy új bemutató készítésekor: cím, leírás, szerzo (automatikus).

Opcionális adatok: nincs

Bemutató mentése

Vissza a tartalomjegyzékhez

Oldalfunkciók

Az alkalmazás általános leírását ebben a részben váltjuk aprópénzre. Meghatározzuk, hogy az alkalmazás nagyjából milyen oldalakból áll, és ezeken körülbelül milyen adattartalom jelenik meg és milyen funkciókat képzelünk el. Ezek természetesen később finomodhatnak és változhatnak.

Főoldal

Az alkalmazás nyitóképernyője, általában ez fogadja a látogatókat. Alapvető szerepe, hogy bemutassa, miről szól ez az alkalmazás, mit várhat tőle a felhasználó. A szöveges információn túl ízelítőt kell adnia a működésről, valamint a legjobb vagy legaktuálisabb, magyarán szólva a legcsalogatóbb tartalmakat is meg kell jelenítenie. Ezek mellett lehetőséget kell adnia a tartalmak különböző szempontú keresésére, böngészésére, valamint a bejelentkezésre, regisztrálásra. Ennek megfelelően a következő funkciók, elemek jelennek meg az oldalon:

Bemutató megtekintése

Az alkalmazás központi, kulcsfontosságú része, hiszen az oldal fényképbemutatókat hirdet. Ennek megfelelően kellően attraktívnak és könnyen használhatónak kell lennie. Csak publikus bemutató jeleníthető meg!

Címke szerinti keresés

Készítő adatai

Saját bemutatók

Bejelentkezett felhasználó érheti csak el a saját bemutatóit.

Új bemutató létrehozása

Csak bejelentkezett felhasználó érheti el.

Bemutató szerkesztése

Csak bejelentkezett felhasználó érheti el, csak saját bemutatót.

Új kép feltöltése

Bemutató adatainak szerkesztése

Csak bejelentkezett felhasználó érheti el, csak saját bemutatót.

Kép szerkesztése

Bemutató törlése

Csak bejelentkezett felhasználó, csak saját bemutatót. Eldöntendő, hogy törlés vagy inaktívvá tétel legyen?

Kedvenc bemutatók listája

Profil szerkesztése

Vissza a tartalomjegyzékhez

Oldalvázlatok készítése

Az oldalak funkcióinak összeírásával párhuzamosan elkezdhetjük az egyes oldalak körülbelüli elrendezéseit megrajzolni. E két feladat nagyon gyakran hatással van egymásra. Az összeírt adattartalom és funkcionalitás ugyanis sokszor meghatározza az elrendezést, és fordítva, az oldalvázlatok rajzolása közben új funkciók kerülhetnek az alkalmazásba.

Az oldalak elrendezésének előzetes tervezését drótvázkészítésnek hívják, az eredménye pedig az oldal drótváz rajza, vagy másképp angolul mockup-nak is hívják. A tervezést általában papíron végezzük el. Természetesen vannak a tervezés ezen fázisát segítő szoftverek is, az ún. mockup editorok vagy drótvázkészítő eszközök (wireframing tools). Ezek működése nagyon hasonlít a prezentációkészítő alkalmazásokra (pl. Powerpoint). Általában sok, speciálisan a webes alkalmazásoknál előforduló komponensekkel rendelkeznek, amelyeket az oldalon elhelyezve készíthetjük el a vázlatot. Sokszor ezen komponensek megjelenése szándékosan hasonlít a ceruzarajzra. Ennek az a célja, hogy hangsúlyozza a készítő vagy a megrendelő felé: a mockup nem a végleges design, hanem az oldal körülbelüli elrendezését tartalmazza, amely azonban már figyelembe veszi a megjelenő tartalmat és funkciókat. A mockup lesz majd az alapja a designnak.

Sokféle Mockup szerkesztő található, sok ingyenes is nagyon jól használható:

Az oldalfunkciókat figyelembe véve az alábbi oldalakhoz érdemes elkészíteni a drótváz rajzokat:

Főoldal

Főoldal mockup terveFőoldal mockup terve

Bemutató

Bemutató megtekintése oldal - mocup tervBemutató megtekintése oldal - mocup terv

Saját bemutatók listája

Saját bemutatók - mockup tervSaját bemutatók - mockup terv

Bemutató szerkesztése

Bemutató szerkesztése - mockup tervBemutató szerkesztése - mockup terv

Kép adatainak szerkesztése

Kép adatainak szerkesztése - mockup tervKép adatainak szerkesztése - mockup terv

Vissza a tartalomjegyzékhez

Oldaltérkép, site struktúra

Bár az oldalak és funkciók összeírásakor már jelezzük az oldalak kapcsolatait, az oldaltérkép kifejezetten azt a célt szolgálja, hogy az egyes oldalak egymáshoz viszonyított kapcsolatait bemutassa. A site struktúra ábrázolásakor nem az a lényeges, hogy az egyes oldalakon milyen tartalom jelenik meg, hanem az, hogy az alkalmazásunk oldalaira és kapcsolataira madártávlatból tekintsünk. A példaalkalmazás oldaltérképéből jól kiviláglik a publikus és a bejelentkezéshez kötött oldalak kapcsolatrendszere.

Site struktúra diagramSite struktúra diagram

Vissza a tartalomjegyzékhez

Adatbázis tervezése

A fejlesztés viszonylag korai szakaszában szükséges az adatok tárolásához szükséges struktúrát megtervezni. Példaalkalmazásunk relációs adatmodellbe szánt normalizált terve a következő:

AdatbázisAdatbázis

Táblák

Név

felhasznalo

Szinonimák

Felhasználó, user

Leírás

A felhasználó adatai ebben a táblában kerülnek tárolásra.

Attribútumok

  • id (egész) – felhasználó azonosítója (adatbázisban)
  • azonosito (szöveg(30)) – felhasználó látható azonosító neve, belépési neve, beceneve
  • jelszo (szöveg(20)) – a felhasználó jelszava (kódolt)
  • email (szöveg(60)) – e-mail címe
  • utolso_belepes (dátum/idő) – utolsó belépés időpontja
  • belepes_db (egész) – bejelentkezések száma

Kapcsolatok

Név

bemutato

Szinonimák

Bemutató, album, fényképalbum,

Leírás

A felhasználók által készített bemutatók adatai ebben a táblában kerülnek tárolásra.

Attribútumok

  • id (egész) – a bemutató azonosítója (adatbázisban)
  • cim (szöveg(100)) – a bemutató címe
  • leiras (szöveg(300)) – a bemutató szöveges leírása
  • indexkep (blob) – indexkép, a fő kép kicsinyített, bélyegkép változata, ez látszik áttekintő nézetben
  • indexfajl (szöveg(100)) – az indexkép fájlneve
  • megtekintes (egész) – megtekintések száma
  • felhasznalo_id (egész) – a készítő/tulajdonos felhasználó adatbázis oldali azonosítója
  • publikus (logikai) – publikus-e a bemutató
  • letrehozas_datuma (dátum/idő) – létrehozás dátuma, ideje

Kapcsolatok

  • BemutatoToFelhasznalo – a bemutatók kapcsolása a létrehozó felhasználóhoz. Tulajdonos leírása

Név

címke

Szinonimák

Címke, tags,

Leírás

A rögzített címkék listája található ebben a táblában.

Attribútumok

  • id (egész) – a címke azonosítója (adatbázisban)
  • cimke (szöveg(30)) – a tag szövege

Kapcsolatok

Név

bemutato_cimke

Szinonimák

Bemutató-címke,

Leírás

Az egyes bemutatókhoz hozzákapcsolt címkék

Attribútumok

  • bemutato_id (egész) – a bemutató azonosítója
  • cimke_id (egész) – a címke azonosítója

Kapcsolatok

  • Bemutato_cimkeToBemutato – a címkék kapcsolása bemutatóhoz (bemutató irány)
  • Bemutato_cimkeToCimke - a címkék kapcsolása bemutatóhoz (címke irány)

Név

kedvenc

Szinonimák

Kedvencek, favorits

Leírás

A felhasználó által kedvenceknek jelölt albumok.

Attribútumok

  • felhasznalo_id (egész) – a felhasználó azonosítója, aki a bemutatót kedvencének jelölte
  • bemutato_id (egész) – a kedvencnek jelölt bemutató azonosítója

Kapcsolatok

  • KedvencToBemutato – a kedvencek kapcsolása bemutatóhoz (bemutató irány)
  • KedvencToFelhasznalo – a kedvencek kapcsolása felhasználóhoz (felhasználó irány)

Név

kep

Szinonimák

kép, képek, fotók, photo

Leírás

Az egyes albumokban szereplő képeket tartalmazó tábla

Attribútumok

  • id (egész) – a kép azonosítója (adatbázisban)
  • kep (blob) – képfájl
  • kepfajl (szöveg(100)) – képfájl neve
  • belyegkep (blob) – bélyegképfájl
  • belyegkepfajl (szöveg(100)) – bélyegképfájl neve
  • kepurl (szöveg(100)) – a kép url címe
  • cim (szöveg(100)) – a kép címe
  • leiras (szöveg(300)) – szöveges leírás a képhez
  • hely (szöveg(100)) – a kép készítésének helye
  • lat (valós(10,6)) – szélességi koordináta
  • lng (valós(10,6)) – hosszúsági koordináta
  • sorszam (egész – bemutatóbeli sorszáma a képnek
  • aktiv (logikai) – aktív-e a kép a bemutatóban
  • bemutato_id (egész) – bemutató azonosítója, melybe a kép tartozik
  • mime_tipus (szöveg(30)) – mime típus

Kapcsolatok

  • KepToBemutato – a kép bemutatóhoz történő hozzárendelése

Tárolt eljárások

Nézetek

Vissza a tartalomjegyzékhez

Adatokkal kapcsolatos műveletek előkészítése

Bár az oldalak összeírásánál megjelentek az adattartalommal kapcsolatos követelmények is, a fejlesztést nagy mértékben elősegítheti, ha összeírjuk, melyik oldalon milyen jellegű adatokat várunk. Ez előrevetítheti azt, hogy hányféle adatbázis lekérdezés szükséges egy oldal megjelenítéséhez, körülhatárolhatja az egyes lekérdezések adattartalmát (pl. egy összekapcsolt lekérdezés, vagy két külön lekérdezés legyen), pontosíthatja egyes mezők vagy területek adatforrását, stb. A tervezésnek ebben a szakaszában készíthetjük elő a megfelelő lekérdezéseket, nézeteket, tárolt eljárásokat.

Gyakran ezt a feladatot az egyes oldalak fejlesztése előtt végezzük el. Kisebb alkalmazásoknál ez működik is, nagyobb alkalmazásoknál azonban nehezebben ismerhetők fel különböző oldalakon ismétlődő adatigények, lekérdezési minták.

Példaalkalmazásunkban a következőképpen néz ez ki pár oldal esetén:

Főoldal

 select b.*, f.azonosito, count(k.bemutato_id) as kedvencek_szama
 from bemutato b left join kedvenc k on b.id = k.bemutato_id inner join felhasznalo f on b.felhasznalo_id = f.id
 where b.publikus = 1
 group by b.id
 order by b.letrehozas_datuma desc
 limit 10

 select b.*, f.azonosito, count(k.bemutato_id) as kedvencek_szama
 from bemutato b left join kedvenc k on b.id = k.bemutato_id inner join felhasznalo f on b.felhasznalo_id = f.id
 where b.publikus = 1
 group by b.id
 order by kedvencek_szama desc
 limit 10

 select c.id, c.cimke, count(bc.cimke_id) as db
 from bemutato_cimke bc, cimke c, bemutato b
 where bc.cimke_id = c.id
     and bc.bemutato_id = b.id
     and b.publikus = true
 group by bc.cimke_id

Bemutató

Bemutató adatainak szerkesztése

Vissza a tartalomjegyzékhez

Designtervek készítése

A drótvázrajzok alapján elkészíthetjük az oldal designtervét. Ebben mindent definiálunk, ami az oldal megjelenéséhez szükséges: háttérképeket, elrendezéseket, színeket, stb. A designterv egy kép, amely általában megfelelő képszerkesztő program segítségével áll elő (Photoshop vagy GIMP). A folyamat ezen szakaszában történik az egyeztetés a megrendelővel, akinek ezen a ponton van lehetősége a kinézeti elemekhez javaslatokat tenni.

A kép alapján készülnek el az oldalsablonok, amik nem mások, mint a designterv alapján készült statikus oldalvázak. Ezek már definiálják az oldalaink HTML kereteit, kijelölve azokat a részeket ahova a dinamikus tartalom kerülhet, a megjelenésről pedig külön állományban elhelyezett stíluslap gondoskodik, amely ugyancsak fel van készítve arra, hogy az alkalmazásban előforduló különböző elemek (űrlapelemek, hibaüzenetek, oldalpanelek, stb) megjelenítését kezelje.

Példaalkalmazásunkban az alábbi oldalak designtervét készítettük el:

Főoldal

A többi oldaltól eltérő kinézetű és elrendezésű oldal, ezért külön szükséges a definiálása

Főoldal designterveFőoldal designterve

Címkelista

Hozzá hasonló lesz a felhasználói lista, valamint a bejelentkezési és regisztrációs felületek, így elég csak ezt megrajzolni.

Egy aloldal (címkelista) designterveEgy aloldal (címkelista) designterve

Bemutató

Megint csak egy egyedi oldal, az alkalmazás legfontosabb felülete

A bemutató oldal designterveA bemutató oldal designterve

Bejelentkezett felhasználó bemutatólistája

A bejelentkezett felhasználónál kicsit másabb az oldal elrendezése a bal menü miatt.

Bejelentkezett felhasználó bemutatólistájának designterveBejelentkezett felhasználó bemutatólistájának designterve

Bemutató szerkesztése

A szerkesztéseknél megint csak egy egyedi oldal.

Bemutatós szerkesztésének designterveBemutatós szerkesztésének designterve

Kép szerkesztése

Hozzá hasonló lesz a bemutató szerkesztése, új kép feltöltése

Kép szerkesztésének designterveKép szerkesztésének designterve

A designtervek alapján az alábbi statikus oldalak készültek el (ld. a mellékelt állományt, mindegyik oldal a dyss.css és a keplista.css stíluslapok valamelyikét használja):

Vissza a tartalomjegyzékhez

Dinamikus tartalmak jelölése

Az elkészült statikus oldalsablonokban érdemes a dinamikus tartalomnak megfelelő részeket HTML megjegyzésekkel jelölni. A saját bemutatók listájában például az alábbi képen jelzett régió lesz dinamikusan töltve, amelyet a következőképpen jelezhetünk az oldal HTML kódjában:

Dinamikus tartalom jelöléseDinamikus tartalom jelölése
<!DOCTYPE html>
<html>
    ...
    <body>
        ...
        <div id="content">
            ...
            <div id="main_content">
                <div id="inner_content">
                    <h2>Bemutatók listája</h2>
                    <ul class="lista">
                    <!-- Dinamikus tartalom kezdete: bemutatólista -->
                        <li>
                            <div class="fo">
                                <a href="">
                                    <img src="indexkep.png" /><br />
                                </a>
                                <div class="info">
                                    <h4>Példa bemutató</h4>
                                    <p class="kisbetu">Példa bemutató leírásaaaa</p>
                                    <p class="kisbetu">
                                        Megtekintések: 49<br />
                                        Kedvencek: 1<br />
                                        Publikus<br />
                                    </p>
                                    <p class="cimkek kisbetu">Címkék: </p>
                                    <ul class="cimkek kisbetu">
                                        <li><a href="címke1">címke1</a></li>
                                        <li><a href="címke2">címke2</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="funkciok">
                                <ul>
                                    <li><a href="">Megtekint</a></li>
                                    <li><a href="">Szerkeszt</a></li>
                                    <li><a href="">Töröl</a></li>
                                </ul>
                            </div>
                        </li>
                    <!-- Dinamikus tartalom vege: bemutatólista -->
                    </ul>
                    <div class="separator"></div>
                </div>
            </div>
            <div class="separator"></div>
        </div>
        <footer>© Horváth Győző, Eötvös Loránd Tudományegyetem, Informatika Kar</footer>
    </body>
</html>

Vissza a tartalomjegyzékhez

Fel a lap tetejére
Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.