Miskolci Egyetem Gépészmérnöki és Informatikai Kar Általános Informatikai Intézeti Tanszék
Webes képgaléria tervezése és implementációja SZAKDOLGOZAT
KÉSZÍTETTE:
Vajóczki Erika HD7W3N
3943 Bodrogolaszi, Kossuth Lajos út 4.
Tartalomjegyzék 1. Bevezetés ............................................................................................................... 1 2. A weboldalak építőkövei ....................................................................................... 3 2.1 A HTTP protokoll ............................................................................................ 3 2.2 A HTML leíró nyelv ........................................................................................ 4 2.2.1 A dinamikus tartalom ............................................................................... 5 2.2.2 HTML formok .......................................................................................... 5 2.2.3 A HTML 5 újdonságai .............................................................................. 6 2.3 A CSS .............................................................................................................. 7 2.3.1 CSS attribútumok...................................................................................... 7 2.3.2 Szelektorok ............................................................................................... 8 3 A Java EE- és a .Net környezet összehasonlítása ................................................... 9 3.1 A JAVA EE környezet..................................................................................... 9 3.1.1 A Java nyelv rövid története ..................................................................... 9 3.1.2 A Java EE alkalmazásszerver és az n rétegű architektúra ........................ 9 3.1.3 A megjelenítési réteg .............................................................................. 10 3.1.4 Az adatréteg ............................................................................................ 11 3.1.5 Az alkalmazásszerver (Glassfish) ........................................................... 11 3.2 A .Net környezet ............................................................................................ 11 3.2.1 A .Net framework története röviden ....................................................... 12 3.2.2 Megjelenítési réteg.................................................................................. 13 3.2.3 Az adatréteg ............................................................................................ 13 3.3 Összehasonlítás .............................................................................................. 13 4. Az ASP.Net.......................................................................................................... 14 4.1 A klasszikus ASP ........................................................................................... 14 4.2 Webes fejlesztés............................................................................................. 15 I
4.3 ASP.Net fejlődése .......................................................................................... 15 4.4 HTML kód és végrehajtható kód együtt ........................................................ 16 4.5 Szerver oldali végrehajtható blokkok ............................................................ 17 4.6 Az ASP.Net architektúrája ............................................................................. 18 4.7 Kódolási lehetőségek ..................................................................................... 22 4.7.1 Az ASP.Net 1.x stílusa ........................................................................... 22 4.7.2 A modern ASP.Net stílusa ...................................................................... 23 5. Az alkalmazás tervezése és implementációja ...................................................... 25 5.1 Az alkalmazás funkcióinak tervezése ............................................................ 25 5.1.1 Regisztráció ............................................................................................ 25 5.1.2 Bejelentkezés .......................................................................................... 25 5.1.3 Új galéria létrehozása ............................................................................. 26 5.1.4 Galériák törlése ....................................................................................... 26 5.1.5 Képek feltöltése ...................................................................................... 26 5.1.6 Képek törlése .......................................................................................... 27 5.1.7 Hozzászólások készítése ......................................................................... 27 5.1.8 Hozzászólások törlése ............................................................................. 27 5.1.9 Címkék készítése .................................................................................... 28 5.1.10 Címkék törlése ...................................................................................... 28 5.1.11 Galériák megosztása ............................................................................. 28 5.1.12 Megosztott galériák megtekintése ........................................................ 29 5.1.13 Keresés a képek között ......................................................................... 29 5.1.14 Admin felület ........................................................................................ 30 5.2 Az adatbázis tervezése ................................................................................... 30 5.2.1 ER modell ............................................................................................... 30 5.2.2 Relációs modell ...................................................................................... 32
II
5.2.3 Az adatbázis megvalósítása .................................................................... 33 5.3 Az alkalmazás implementációja .................................................................... 34 5.3.1 Regisztráció folyamata ........................................................................... 34 5.3.2 A bejelentkezés folyamata ...................................................................... 35 5.3.3 Új galéria létrehozása ............................................................................. 36 5.3.4 Galériák megjelenítése............................................................................ 37 5.3.5 Képek feltöltése a galériákba .................................................................. 38 5.3.6 Galériákban található képek előnézete ................................................... 39 5.3.7 Galériákban található képek megjelenítése............................................. 40 5.3.8 Komment írása egy adott képhez ............................................................ 41 5.3.9 Kommentek megjelenítése...................................................................... 42 5.3.10 Tagek hozzáadása a képekhez .............................................................. 42 5.3.11 A megosztás beállítás menüjének felépítése ......................................... 44 5.3.12 A megosztás állapotának megjelenítése ............................................... 45 5.3.13 A megosztás típusának megváltoztatása és beállítása .......................... 45 5.3.14 Galéria törlése ....................................................................................... 46 5.3.15 Kép törlése galériából ........................................................................... 47 5.3.16 Tag törlése ............................................................................................ 48 5.3.17 Hozzászólás törlése ............................................................................... 49 5.3.18 Megosztott tartalmak elérése ................................................................ 49 5.3.19 Keresés a képek között ......................................................................... 50 5.3.20 Admin felület ........................................................................................ 51 5.4 Tesztelés ........................................................................................................ 53 5.5 Továbbfejlesztési lehetőségek ....................................................................... 53 6. Összegzés ............................................................................................................. 54 7. Summary .............................................................................................................. 55
1. Bevezetés A fénykép készítés alapja egészen az ókorig vezethető vissza, ahol a görögök a camera obscura nevű eszközzel a valósághoz hű képeket tudtak előállítani. A szerkezet elején kivájtak egy lyukat, melyen keresztül fénysugarak törtek át egészen a sötét dobozig. A doboz belsejében fordított állású, kicsinyített kép keletkezett. A kapott képet kezdetben szabadkézi rajzzal örökítették meg az utókor számára. Később, a XVI. században egy lencsét helyeztek a lyuk elé, így jelentősen élesebb képet kaptak. Kezdetben csak tájképek körvonalairól készítettek alkotásokat. A világ első fényképét Nicéphore Niépce, francia feltaláló készítette 1826-ban. Az exponálási idő 8 óra volt, fekete- fehér képet kapva. A világ fejlődése a fénykép készítés folyamatát két részre osztotta. Az első részben magát a képrögzítést, a második részben pedig a képelőhívást valósították meg egy sötétkamrában. Az előhívást só oldat segítségével vitték véghez. A Kodak gyárban kidolgozták, hogy hogyan lehet a képeket tekercsen rögzíteni. A XX. század elején a Lumiérre testvérek feltalálták a színes celluloid filmet. Az első sorozatban gyártott fényképezőgép, melynek a neve a Leica volt, 1925-ben lehetővé tette, hogy a fényképezés elterjedjen a világ minden részén. A II. Világháború és a számítógépek megjelenése lehetővé tették, hogy a készített képek digitalizálásával továbbíthatóak legyenek analóg jeleken keresztül. Az 1960-as években a NASA dolgozta ki az első digitális jeltovábbítási módszert. Kezdetben az űrkutatásban és a különböző kémműholdak megjelenésében játszott nagy szerepet. Hiába kezdett elterjedni a képek digitalizálása, a fényképeket még mindig hagyományos fényképezőgépekkel készítették. Az első digitális fényképezőgép prototípusát a Kodak mérnökei 1975-ben fejlesztették ki. Az eszköz a képeket egy mágneses kazettára rögzítette. Akkoriban a számítógépek nem tudták kezelni a képeknek megfelelő adatmennyiséget, ezért használtak kazettákat. A Fuji mérnökeinek 1988-ban sikerült megtervezni az első olyan digitális fényképezőgépet, ami már a képeket a saját 16MB-os belső memóriájában tudta tárolni. 1995-ben jelent meg az első LCD kijelzős fényképezőgép. Napjainkra már a mobiltelefonokba is beépítették a digitális fényképezőt.
1
Webes képgaléria tervezése és implementációja
A hordozható digitális eszközök elterjedése lehetővé tették, hogy a képeinket már nem kell magunknál hordani egy nehéz fotóalbumban, hanem bárhol, bármikor megkereshetjük és megoszthatjuk azokat másokkal. Az internet és a rohamosan elterjedő közösségi oldalak lehetővé tették, hogy a képeinket nem csak a barátainkkal és ismerőseinkkel oszthatjuk meg, hanem ha úgy akarjuk, akkor az egész világgal. A digitalizált emlékképeket szerkeszthetjük különböző képszerkesztő programokkal, olykor a valóságot is meghazudtolva, kedvünk szerint. [1] Feladatomban egy olyan képfeltöltő és megosztó rendszert szeretnék tervezni és megvalósítani, amely könnyebbé teszi képek megosztását, továbbá kényelmessé teszi ezek rendezését és tárolását egy online felhasználói felületen keresztül. Az alkalmazást webes alkalmazásként fogom megvalósítani a Microsoft ASP.Net technológiáját használva. A felhasználók az alkalmazás oldalán regisztrálhatnak és bejelentkezhetnek. A bejelentkezés után létrehozhatnak saját galériákat és ezen galériákba képeket tölthetnek fel. A galériákból képeket törölhetnek. A feltöltött képnek címet adhatnak és különböző címkéket fűzhetnek hozzá. A felhasználó galériáit megoszthatja bizonyos felhasználókkal vagy minden felhasználóval. A saját és a vele megosztott képek között a felhasználó tud keresni különböző tulajdonságok alapján. A felhasználók kommenteket írhatnak a saját és a velük megosztott galériák képeihez. Az adminisztrátorok minden felhasználó galériáját elérik, saját maguk is hozhatnak létre galériákat és azokba képeket tölthetnek fel. Az adminisztrátorok is végezhetnek keresést a képek között. Az adminisztrátorok különböző grafikonokat láthatnak. Ilyen grafikon lehet a feltöltött képek száma az idő folyamán és az adott felbontású képek száma.
2
Webes képgaléria tervezése és implementációja
2. A weboldalak építőkövei
2.1 A HTTP protokoll A HTTP (Hypertext Transfer Protocol) az a kommunikációs mechanizmus, amelynek segítségével a böngészők és a webszerverek kommunikálnak egymással. Az ISO OSI modelljének alkalmazási rétegében helyezkedik el, a TCP/IP protokollra támaszkodva. A HTTP kezdeti verziói egy egyszeri GET kérést támogattak, egy nevesített erőforrás elérésére. A kérés hatására a szerver feladata volt, hogy a fájlt szövegfolyamként elküldje. A HTTP protokoll első hivatalos specifikációja (HTTP 1.0) az 1990-es évek közepén került kiadásra, ami már összetettebb üzenet áramlást tett lehetővé. Napjainkban a HTTP 1.1 verzióját használjuk. A HTTP több egyszerű parancsra épül. A két legfontosabb a GET és a POST, de hasonlóan fontos a HEAD és a PUT parancs. A GET parancs lekéri a kérésben egy URI által azonosított információt. A HEAD parancs csak a fejléc információt kéri le, a válasznak nincs törzse. A POST metódus olyan információt tartalmaz, amelyet szeretnénk, hogy a szerver feldolgozzon. A PUT szintén információ küldésére használatos. Az alábbiakban egy GET kérés látható, amit egy böngésző küldött a helloworld.htm lekérésére. A böngésző a kérést a Host HTTP header mezőben szereplő szerverre küldi. A header tartalmaz még részleteket a böngésző típusáról, az operációs rendszerről, a beállított nyelvről, stb. Amikor a szerver megkapja ezt a kérést, a kért erőforrást szövegfolyamként küldi vissza. A böngésző ezt értelmezi és formázva jeleníti meg a tartalmat. GET /aspnet4sbs/helloworld.htm HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, ... , */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; ... .NET CLR 3.0.04506.30) Host: localhost:80 Connection: Keep-Alive
A következő kód a szerver által küldött választ mutatja. A válasz egyszerű HTML tartalmat is magába foglal. A böngészőben a válaszban szereplő header információkat nem látjuk. Az első sor a protokoll verziót és a visszatérési kódot mutatja. A 200-as kód azt jelenti, hogy „OK”. A válasz tartalmazza még a kérés idejét, a kért fájl utolsó módosításának idejét és hogy milyen típusú tartalom kerül küldésre. Ezen információk a cachelés során hasznosak. A válasz további része a tényleges HTML fájl szövegtartalma a szerverről. [2] 3
Webes képgaléria tervezése és implementációja HTTP/1.1 200 OK Server: Microsoft-IIS/5.1 X-Powered-By: ASP.NET Date: Thu, 01 Nov 2007 23:44:04 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Mon, 22 Oct 2007 21:54:20 GMT ETag: "04e9ace185fc51:bb6" Content-Length: 130
Hello World
Nothing really showing here yet, except some HTML...
2.2 A HTML leíró nyelv A HTML (Hypertext Markup Language), olyan egységes leíró nyelv, melyet minden böngésző támogat. A HTML fájlok szöveges állományok, amiket a legegyszerűbb szövegszerkesztővel is szerkeszthetünk. Ebben a fájlban találhatóak a nyers szövegek és a szimbólumok, amelyek leírják a böngészőnek, hogy jelenítse meg és hogyan dolgozza fel a fájl tartalmát. Valójában egy HTTP kérés végrehajtásakor egy formázott szövegtartalmat kapunk eredményül. A HTML 1.0-ás verziójában alakult ki az alapvető szerkezet, a nyitó és záró tagek " ", a fejléc , és a törzs, azaz a " ". Ezeknek az elemeknek a zárótagje nem volt elhagyható. A tartalom a dokumentum törzsében helyezkedik el, létre lehet hozni bekezdéseket, hivatkozásokat, felsorolásokat. A HTML 2.0ás verzió, mindazon által, hogy magába foglalja az előző verzió tulajdonságait, ezen felül elkülönül még a böngésző által szabályozott és a dokumentum szerkezetében létrehozott formázás. A következő kiadott verzióba kerültek bele az űrlapok, az ezen belüli többsoros szövegbevitel, és a kiválasztható opciók. Később a HTML 3.2 verziót 1996-ban fogadta el a W3C, ami jelentős változásokat hozott. Innentől van lehetőségünk Java appletek beágyazására, és scripteket is innentől használhatunk. Lehetőségünk van táblázat készítésre, és betűtípust állítani. A HTML 4.0 igazából egy SGML (Standard Generalized Markup Language) alkalmazás. Fejlesztésekor szem előtt tartották a csökkent képességűek érdekeit, a nemzetközi karakter készleteket, a jobbról balra olvasás támogatását. Tovább fejlesztették az űrlapok és táblázatok használhatóságát, a keretek (frame-ek) használata hivatalossá vált. Az XHTML 1.0-ás verzió magába foglalja a HTML 4-et, és az XML-t is. XML alapokon 4
Webes képgaléria tervezése és implementációja
nyugszik, mivel együtt kell működniük az XML alapú böngészőkkel. Az XHTML a HTML 4 három dokumentumtípusának XML alapú továbbfejlesztése. Ez kompatibilis az XML és a HTML4-es böngészőkkel is. Számos előnye van a használatának. Megfelel az XML előírásainak, szerkeszthetők alap XML eszközökkel is, és régebbi szerkesztő programmal is. Hasznosíthatják az alkalmazásokat (Java appleteket, scripteket), aminek futtatásához szükséges vagy a HTML DOM (Document Object Modell), vagy XML DOM. Az XML-ben viszonylag könnyű új elemet bevezetni. Az XHTML család úgy lett megtervezve, hogy ezeket a kiterjesztéseket hozzáillessze az XHTML technikákon keresztül az újonnan kifejlesztendő XHTML modulokhoz. Úgy lett kifejlesztve, hogy rugalmasan működjön együtt a különböző böngészőkkel. [2] 2.2.1 A dinamikus tartalom Kezdetben a weboldalak statikus HTML lapok használatával épültek fel, melyek akkoriban elegendőek voltak, ám a későbbiekben igényt tartottak a dinamikus tartalmakra. A HTML tartalmaz olyan tageket, mint például a <select> , ezt a böngésző úgy értelmezi, mint egy legördülő listát. A <select> tagen belül az egyes opciókat az taggel jelöljük. A tageknek lehetnek attribútumaik, amelyek módosíthatják vagy alakíthatják a tag viselkedését. Az tag használatával beviteli mezőket és gombokat adhatunk meg a különböző attribútumok használatával. A HTML biztosít egy speciális taget, a taget, amely csoportosít beviteli tageket és az a célja, hogy a kinyert információt feldolgozásra küldje a szervernek. [2] 2.2.2 HTML formok A nyitó és záró tag használatakor a böngésző ezen elemek által magába foglalt beviteli vezérlők tartalmát küldi el a szervernek feldolgozásra. Ezt a tartalmat fogja feldolgozni a szerver és visszaküldi a kliensnek a kapott eredményt. Ezt a folyamatot postbacknek hívjuk. Ez az oka annak is, hogy HTTP használata során, az a HTML dokumentum lekérése a GET metódussal történik, az adatok visszaküldése a szerverre pedig a POST metódussal (vagy a GET egy speciális változatával). A
