DELTA – STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, S.R.O. KE KAMENCI 151, PARDUBICE
ASP.NET Gallery Internetová galerie
Vařečka, Martin 4. B. 18-20-M/01 Správce informačních systémů
2012/2013
Já Martin Vařečka čestně prohlašuji, že jsem maturitní projekt vypracoval samostatně s použitím uvedené literatury pod vedením Bc. Adama Poleta.
V Hlinsku 28. 3. 2013
__________________
Na tomto místě bych rád poděkoval Bc. Adamu Poletovi za vstřícné a podnětné vedení maturitní práce, za cenné rady a připomínky, a také za trpělivost a čas, který mi věnoval při konzultacích i mimo ně.
Resumé Tato práce je z oboru informačních technologií. Cílem projektu je vytvoření kompletní prezentace fotek v C#. Galerie je vytvořena ve formě webového úložiště pro fotografie s jejich následnou prezentací. Systém dále umožňuje přidávat komentáře k fotkám a přátelit se s jinými uživateli. Klíčová slova Webová galerie, úložiště fotografií, tvorba webové galerie, prezentace fotografií, zakládání galerií, propojení s přáteli, sdílení fotografií, sdílení galerií Resumé This work is in the field of information technology. The aim of the project is to create a complete presentation of images in C#. The gallery is created in the form of web storage for photos with their subsequent presentations. The system also allows you to add comments to the photos and make friends with other users.
Keywords Web gallery, store photos, creating web galleries, photo slideshows, creating galleries, connecting with friends, sharing photos, sharing gallerie
Vařečka Martin
ASP.Net Gallery
2012/2013
Obsah 1. Úvod ...................................................... 6 1.1 Volba projektu ......................................... 6 1.2 Řešení projektu ........................................ 6 2. Tvorba systému ............................................ 6 2.1 Použité nástroje ....................................... 6 2.2 Použité technologie .................................... 6 3. Prameny a použitá literatura .............................. 7 4. Metody práce .............................................. 7 4.1 Vytvoření designu ...................................... 7 4.2 Datové modelování ...................................... 8 4.3 Programování ........................................... 8 5. Vlastní řešení ............................................ 8 5.1 Dokončená práce ........................................ 8 5.2 Známé chyby systému .................................... 8 6. Datový model .............................................. 9 6.1 Tabulka BDOUzivatel ................................... 10 6.2 Tabulka BDOPritel ..................................... 10 6.3 Tabulka BDOGalerie .................................... 11 6.4 Tabulka BDOFotografie ................................. 11 6.5 Tabulka BDOKomentar ................................... 12 6.6 Vazby mezi tabulkami .................................. 12 7. Popis systému - Uživatelská příručka ..................... 13 8. Návod k instalaci systému ................................ 18 8. Závěr .................................................... 19
5
Vařečka Martin
ASP.Net Gallery
2012/2013
1. Úvod 1.1 Volba projektu Tento projekt jsem si vybral z důvodu, že by se dále projekt mohl využít v praxi. Po zhlédnutí ostatních webových galerií jsem zjistil, co mají za nedostatky, a těmto věcem jsem se chtěl vyvarovat.
1.2 Řešení projektu Projekt jsem pojal jako klasickou webovou galerii, který slouží jako úložiště fotografií. Od většiny ostatních webových galerií se odlišuje možností vyhledání přátel v systému, se kterými můžete sdílet své fotografie. Galerie je navržena tak, aby byla dostupná pro registrované i neregistrované uživatele. Soukromí pro registrované uživatelé je samozřejmostí. Galerie můžete sdílet pro přátele v systému, pouze pro své vlastní potřeby nebo pro všechny ostatní uživatele, kdy bude galerie dostupná i neregistrovaným uživatelům.
2. Tvorba systému 2.1 Použité nástroje Microsoft Visual Web Developer 2010 Express – nástroj, ve kterém bylo vytvořeno 90 % systému. Použil jsem ho pro programování v jazyce C#, stylování pomocí CSS, tvorbu stránek v HTML a vytvoření modelu databáze. Microsoft Management Studio – nástroj, který využívám pro vkládání a manipulaci s daty v databázi.
2.2 Použité technologie ASP.NET – technologie pro tvorbu webových aplikací. ASP.NET AJAX Control Toolkit – open-source technologie, která poskytuje nové nebo rozšiřuje stávající prvky pro použití na stránkách.
6
Vařečka Martin
ASP.Net Gallery
2012/2013
3. Prameny a použitá literatura Při práci na projektu jsem se občas setkával s problémy, u kterých jsem nevěděl, jak je vyřešit. Zde uvádím prameny, ze kterých jsem čerpal: - Stackoverflow: C# : How to resize image proportionately with max height. Tears shatter the reflection [online]. [United States: s.n., 2001 [cit. 2013-03-29]. Dostupné z: http://stackoverflow.com/questions/10329010/c-sharp-howto-resize-image-proportionately-with-max-height - Codeproject: ASP.NET AJAX Control Toolkit ModalPopupExtender Control in Action. Codeproject [online]. 2009 [cit. 2013-03-29]. Dostupné z: http://www.codeproject.com/Articles/34996/ASP-NET-AJAXControl-Toolkit-ModalPopupExtender-Co - WALTHER, Stephen. Stephen Walther: ASP.NET, Metro, and HTML5. Stephen Walther [online]. 2012 [cit. 2013-03-29]. Dostupné z: http://stephenwalther.com/archive/2012/05/01/ajaxcontrol-toolkit-may-2012-release.aspx - HTML5 and CSS3: Free HTML5 Templates and Free Css3 Menus. HOGAN, Brian P. HTML5 and CSS3: develop with tomorrow's standards today [online]. Dallas: Pragmatic Bookshelf, c2010 [cit. 2013-03-29]. Dostupné z: http://www.html5xcss3.com/
4. Metody práce 4.1 Vytvoření designu Pro design sem použil responsivní webovou šablonu Ansimuz, ze které jsem dále musel vytvořit MasterPage. Šablonu jsem upravil tak, aby vyhovovala a ladila s prvky stránky.
7
Vařečka Martin
ASP.Net Gallery
2012/2013
4.2 Datové modelování Databázi jsem vytvořil a upravoval v MS Visual Studiu a MS SQL Management Studiu.
4.3 Programování Veškeré další programování v ASP.NET bylo vytvářeno v MS Visual Studiu.
5. Vlastní řešení 5.1 Dokončená práce Podařilo se mi vytvořit kompletní fungující systém. Hlavní funkcí systému je: registrace uživatelů, správa profilu, vytváření galerií, naplnění galerie fotografiemi, prezentace fotografií, přidávání komentářů k fotografiím a galeriím, vyhledávání přátel v systému, propojování se s přáteli, sdílení galerií mezi registrovanými i neregistrovanými uživateli. Design systému je založen na responsivní šabloně, nýbrž se přizpůsobuje aktuálnímu rozlišení na zobrazovacím zařízení. Proto je zde i možnost využívat systém i na přenosném zařízení, kterými jsou například mobilní telefon, tablet aj…
5.2 Známé chyby systému - Odhlášení uživatele po smazání galerie s fotografiemi (odstranění Session, ve které je přenášen přihlášený uživatel z důvodu mazání adresářové struktury) - Po nahrání fotek do systému je nutno provést ruční přenačtení stránky (stisknutí klávesy F5)
8
Vařečka Martin
ASP.Net Gallery
2012/2013
6. Datový model
Jednoduchý datový model, který je naprosto dostačující pro systém. Rozšíření je možné (např.: přidání sloupečku Popis na BDOFotografie a BDOGalerie, vytvoření další vazby mezi BDOPritel a BDOUzivatel). V následující části jsou uvedeny hlavní významy tabulek, s popisem jednotlivých sloupečků a jejich významem v projektu.
9
Vařečka Martin
ASP.Net Gallery
2012/2013
6.1 Tabulka BDOUzivatel Tabulka uchovává záznamy o uživatelích, kteří se do systému registrovali. Popis jednotlivých sloupečků a jejich význam v systému: Název sloupečku
Datový typ
Význam v praxi
Id
int
Jmeno
nvarchar(MAX) Jméno uživatele (např.: Martin)
Prijmeni
nvarchar(MAX) Příjmení uživatele (např.: Vařečka)
Email
nvarchar(MAX) Email uživatele
DatumVytvoreni
datetime
Login
nvarchar(MAX) Login uživatele
Heslo
nvarchar(MAX) Heslo uživatele (zašifrované)
ProfilovaFotka
nvarchar(MAX) Path k profilové fotografii
NovyPritel
bit
Automaticky generující se číselný index záznamu v tabulce
Datum při vytvoření účtu
Nabývá dvou hodnot: 1 – Nová žádost o přátelství, 0 – Nic nového
6.2 Tabulka BDOPritel Tabulka uchovává záznamy o přátelství mezi uživateli, nikoliv přátele. Popis jednotlivých sloupečků a jejich význam v systému: Název sloupečku
Datový typ
Význam v praxi
Id
int
Potvrzeno
bit
Pritel
int
ID uživatele z tabulky BDOUzivatel
BDOUzivatelId
int
ID uživatele z tabulky BDOUzivatel
ZadatelId
int
Automaticky generující se číselný index záznamu v tabulce Nabývá dvou hodnot: 1 – Vztah je potvrzen, 0 – Čeká na schválení
ID uživatele z tabulky BDOUzivatel, který žádost o přátelství podal
10
Vařečka Martin
ASP.Net Gallery
2012/2013
6.3 Tabulka BDOGalerie Tabulka uchovává záznamy o vytvořených galeriích uživatele. Popis jednotlivých sloupečků a jejich význam v systému: Název sloupečku
Datový typ
Význam v praxi
Id
int
Nazev
nvarchar(MAX) Název galerie
BDOUzivatelId
int
FotkaGalerie
nvarchar(MAX) Path k titulní fotografii galerie
Typ
nvarchar(MAX) Typ galerie (veřejná, soukromá, …)
Automaticky generující se číselný index záznamu v tabulce
ID vlastníka galerie z tabulky BDOUzivatel
6.4 Tabulka BDOFotografie Tabulka uchovává záznamy o fotografiích v galeriích uživatele. Popis jednotlivých sloupečků a jejich význam v systému: Název sloupečku
Datový typ
Význam v praxi
Id
int
Path
nvarchar(MAX) Path k fotografii v plném rozlišení
BDOUzivatelId
int
FotkaGalerie
nvarchar(MAX) Path k titulní fotografii galerie
Typ
nvarchar(MAX) Typ galerie (veřejná, soukromá, …)
Automaticky generující se číselný index záznamu v tabulce
ID vlastníka galerie z tabulky BDOUzivatel
11
Vařečka Martin
ASP.Net Gallery
2012/2013
6.5 Tabulka BDOKomentar Tabulka uchovává záznamy o komentářích k fotografiím nebo galeriím od uživatele. Popis jednotlivých sloupečků a jejich význam v systému: Název sloupečku
Datový typ
Význam v praxi
Id
int
Datum
datetime
Komentar
nvarchar(MAX) Text komentáře
BDOUzivatelId
int
BDOGalerieId
int
BDOFotografieId
int
Automaticky generující se číselný index záznamu v tabulce Datum vytvoření komentáře
ID vlastníka komentáře z tabulky BDOUzivatel ID galerie, ke které se komentář vztahuje (může být null) ID fotografie, ke které se komentář vztahuje (může být null)
6.6 Vazby mezi tabulkami Tabulka BDOUzivatel je propojena s tabulkou: BDOGalerie vazbou 1:N (jeden uživatel může mít 0-N galerií). BDOPritel vazbou 1:N (jeden uživatel může mít 0-N přátel). BDOKomentář vazbou 1:N (jeden uživatel může udělit 0-N komentářů). Tabulka BDOGalerie je propojena s tabulkou: BDOFotografie vazbou 1:N (jedna galerie může mít 0-N fotografií). BDOKomentar vazbou 0-1:N, tato vazba je vytvořena z důvodu jedné tabulky BDOKomentar pro komentáře ke galeriím i fotografiím. Hodnota záznamu sloupečku BDOGalerieId
12
Vařečka Martin
ASP.Net Gallery
2012/2013
v tabulce BDOKomentar může být null. Díky tomu se dají odlišit komentáře k galeriím nebo k fotografiím Tabulka BDOFotografie je propojena s tabulkou: BDOKomentar vazbou 0-1:N, důvod vytvoření této vazby je stejný jako u vazby na tabulce BDOGalerie.
7. Popis systému - Uživatelská příručka Výchozí stránka projektu (Default.aspx) je stránka, na které se uživatel může přihlásit do systému.
Pokud uživatel nemá založený účet, přesune se ze stránky pro přihlášení odkazem na registraci (Registrace.aspx), kde si může kdokoliv založit účet. Data, která uživatel zadává, se musejí shodovat s validacemi. Pokud uživatel nesplní podmínky pro registraci, bude mu vypsán seznam chyb.
13
Vařečka Martin
ASP.Net Gallery
2012/2013
Po registraci je uživatel přesměrován na stránku galerií (Galerie.aspx). Zde je možnost založení nové galerie.
Po vytvoření galerie jsme přesměrovány do vytvořené galerie (Fotky-v-galerii.aspx). Kde přidáme fotky do galerie.
14
Vařečka Martin
ASP.Net Gallery
2012/2013
Galerii můžeme pomocí tlačítek v pravé horní části buď editovat, nebo smazat. Každá fotografie v galerii má v levém horním rohu miniatury ovládací tlačítka (smazat fotografii, nastavit jako titulní fotku galerie). Po kliknutí na fotografii jsme přesměrovány na detail fotografie (Detailfotografie.aspx)
15
Vařečka Martin
ASP.Net Gallery
2012/2013
U každé fotografie je možnost přidat komentář, pokud je uživatel přihlášen. Mezi fotografiemi se můžete pohybovat pomocí šipek na klávesnici, nebo kliknutí do fotografie (levá strana 30% - posun zpět, pravá strana 70% - posun vpřed). Profil uživatele je možno upravovat na stránce profilu (Profil.aspx)
Hledání přátel je možno na stránce přátelé (Pratele.aspx) Do pole zadáme jméno a příjmení uživatele (systém nám našeptává). Rozlišují se velká a malá písmena. Po výběru z našeptávače, nebo dopsání celého jména a příjmení stačí stisknout klávesu enter a budete přesměrováni na vybraného uživatele (Uzivatel.aspx)
16
Vařečka Martin
ASP.Net Gallery
2012/2013
Zde si můžete uživatele přidat jako přítele, nebo procházet jeho veřejné galerie. Po kliknutí na tlačítko přidat mezi přátele Vás musí uživatel potvrdit jako přítele. Učiní li tak, pak můžete již procházet veškeré galerie uživatele, kromě galerií označených jako soukromé. Nyní můžete např.: komentovat fotografie svých přátel.
Ze systému se odhlásíte kliknutím na položku v menu „Odhlásit“. Budete přesměrováni na stránku (Logout.aspx), kde budete informováni, že jste byli úspěšně odhlášeni. Po 3s budete automaticky přesměrováni na stránku, kde se můžete přihlásit (Default.aspx)
17
Vařečka Martin
ASP.Net Gallery
2012/2013
8. Návod k instalaci systému 1. Do adresáře na serveru zkopírujeme systém (obsah složky ASP.net Gallery) 2. U složky DATA => Vlastnosti => Zabezpečení=>
Nastavit úplné řízení pro běžné uživatele na serveru (z důvodu přidávání fotografií a vytváření struktury) 3. Přes MS SQL Management Studio se připojit k DB
nastavit kaskádové mazání komentářů cizích klíčů.
18
Vařečka Martin
ASP.Net Gallery
2012/2013
8. Závěr Nyní je projekt hotový. Nedá se říci, že by na projektu nebylo dále co upravovat, a že je dokonalý, ale funguje bez problémů. Určitě budu projekt dále rozvíjet a pokusím se ho nasadit do ostrého provozu. Můj názor na nasazení produktu do ostrého provozu je takový, že nebude velmi úspěšný z důvodu velké konkurence ostatních systémů zajišťující stejné služby. Při tvorbě projektu jsem nevyužil žádné literatury, nýbrž mých znalostí a vědomostí, materiálů nastřádaných z vyučujících hodin a webových stránek (zdroje jsou uvedeny v kapitole „Prameny a použitá literatura“) Svůj projekt hodnotím velice kladně. Díky práci na projektu jsem se zdokonalil v práci s použitými technologiemi a rozšířil jsem si znalosti získané ve škole.
Možné vylepšení projektu: 1. Vytvoření komunikace mezi uživateli ve formě zpráv 2. Chat 3. Spuštění prezentace fotek 4. Stahování celých galerií
19
