OSTRAVSKÁ UNIVERZITA V OSTRAVĚ PŘÍRODOVĚDECKÁ FAKULTA

KATEDRA INFORMATIKY A POČÍTAČŮ

VYTVOŘENÍ NÁSTROJE PRO HROMADNÉ NAHRÁVÁNÍ RŮZNÝCH

SOUBORŮ V JAZYCE PHP

BAKALÁŘSKÁ PRÁCE

Autor práce: Daniel Kilian Vedoucí práce: RNDr. Bogdan Walek Ph.D.

2014

UNIVERSITY OF OSTRAVA FACULTY OF SCIENCE

DEPARTMENT OF INFORMATICS AND COMPUTERS

CREATING TOOL FOR BULKLOADING VARIOUS FILES IN PHP

BACHELOR THESIS

Author: Daniel Kilian Supervisor: RNDr. Bogdan Walek Ph.D.

2014

ČESTNÉ PROHLÁŠENÍ

Já, níže podepsaný student, tímto čestně prohlašuji, že text mnou odevzdané závěrečné

práce v písemné podobě i na CD nosiči je totožný s textem závěrečné práce vloženým v

databázi DIPL2.

Ostrava dne

………………………………

podpis studenta

ABSTRAKT

Tato bakalářská práce pojednává o hromadném nahrávání různých druhů souborů na

webové stránky v jazyce PHP. V první části této práce se zaměřuji na analýzu současných

nástrojů, které byly pro tento účel vytvořeny. Každý z těchto nástrojů následně osobně

vyzkouším a porovnám jejich funkce, možnosti a využití. Nástroje budou poté porovnány

ve srovnávací tabulce. V další fázi vyberu na základě předchozího srovnání nejlepší

z daných nástrojů a navrhnu nový komplexní nástroj, který bude využívat možnosti

hromadného nahrávání různých druhů souborů pomocí dříve vybraného nástroje a navíc

usnadní uživatelům další práci s nahranými soubory, jako je trvalé zobrazování nahraných

souborů, jejich přejmenovávání nebo např. vytváření galerií v případě nahrávání fotografií.

Nakonec nový nástroj naimplementuji do komplexní webové aplikace a otestuji jeho

funkčnost v praxi na reálných webových stránkách.

Klíčová slova: PHP, hromadné nahrávání souborů, analýza, srovnání, návrh, vytváření

galerií, webová aplikace, testování.

ABSTRACT

This bachelor thesis is about bulkloading various files on web pages using the PHP

language. In the first part of this thesis, I focus on analysis of currently existing tools which

were made for this purpose. I personally will try out each of these tools and compare their

functions, possibilities and usability and then will show them in a well arranged table. I

will choose the Best of these tools on the basis of the previous comparison and then design

a new complex tool which would be possible to upload multiple different files with, using

the previously chosen tool which will also additionally help users handle the uploaded files

in ways of permanent showing or renaming the files or creating galleries in the case of

uploading pictures. In the end I will implement the new tool in a complex web application

and test its function on a real website.

Keywords: PHP, bulkloading files, analysis, comparison, design, gallery making, web

application, testing.

Poděkování

Chtěl bych poděkovat RNDr. Bogdanu Walkovi, Ph.D. za jeho vedení a rady, které mi

velmi pomohly při psaní této práce.

Také bych chtěl poděkovat bratranci Zdeňkovi Kilianovi za zapůjčení jeho notebooku a

svým babičkám za finanční pomoc při koupi nového, čímž mi umožnili realizaci této

práce.

Prohlašuji, že předložená práce je mým původním autorským dílem, které jsem vypracoval

samostatně. Veškerou literaturu a další zdroje, z nichž jsem při zpracování čerpal, v práci

řádně cituji a jsou uvedeny v seznamu použité literatury.

V Ostravě dne . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

(podpis)

OBSAH

1 ÚVOD .......................................................................................................................... 11

1.1 PHP ....................................................................................................................... 11

1.2 Upload ................................................................................................................... 12

1.3 JavaScript .............................................................................................................. 13

1.4 Flash ...................................................................................................................... 13

1.5 AJAX..................................................................................................................... 13

2 ANALÝZA SOUČASNÉHOSTAVU ....................................................................... 14

2.1 Uploadify............................................................................................................... 14

2.2 Plupload................................................................................................................. 14

2.3 Jupload .................................................................................................................. 15

2.4 Drag and Drop ....................................................................................................... 16

2.5 Blueimp ................................................................................................................. 17

2.6 SWFUpload ........................................................................................................... 18

2.7 Shrnutí ................................................................................................................... 19

3 CÍLE ............................................................................................................................ 20

4 NÁVRH NÁSTROJE ................................................................................................ 21

4.1 Sekvenční diagram ................................................................................................ 21

4.2 Hlavní funkcionality navrhovaného nástroje ........................................................ 22

4.2.1 Obrázky .......................................................................................................... 23

4.2.2 Hudba a videa ................................................................................................ 24

4.2.3 Dokumenty ..................................................................................................... 24

4.2.4 Ostatní ............................................................................................................ 25

4.3 Předpokládaná funkčnost webové aplikace .......................................................... 26

4.4 Shrnutí ................................................................................................................... 26

5 IMPLEMENTACE NÁSTROJE.............................................................................. 27

5.1 Použité technologie ............................................................................................... 27

5.2 Třídy a skripty aplikace ......................................................................................... 27

5.2.1 Třída Uploads ................................................................................................ 27

5.2.2 TřídaSQLCommands ..................................................................................... 27

5.2.3 GetInfo ........................................................................................................... 28

5.2.4 Třída ShowData ............................................................................................. 28

5.2.5 Uploadify ....................................................................................................... 28

5.2.6 SetThumb ....................................................................................................... 28

5.2.7 Třída PHPThumb [12] ................................................................................... 28

5.2.8 Třída Mp3file [28] ......................................................................................... 29

5.2.9 GetID3 [29] .................................................................................................... 29

5.3 Webová aplikace ................................................................................................... 29

5.4 Index ...................................................................................................................... 29

5.5 Nahrávací stránky .................................................................................................. 30

5.5.1 Ovládací panel ............................................................................................... 30

5.5.1.1 Okno pro nastavení galerie ......................................................................... 31

5.5.1.2 Okno pro zobrazení existující galerie ........................................................ 31

5.5.1.3 Formulář pro nahrání souborů .................................................................... 32

5.5.2 Část pro nahrané soubory .............................................................................. 32

5.5.2.1 Ikona ........................................................................................................... 32

5.5.2.2 Datová část ................................................................................................. 33

5.5.2.3 Formulář pro komentáře ............................................................................. 34

5.6 Databáze ................................................................................................................ 34

5.6.1 Vysvětlení názvů ............................................................................................ 34

5.6.2 Tabulky pro databázi ..................................................................................... 35

5.7 Shrnutí ................................................................................................................... 35

6 OVĚŘENÍ VYTVOŘENÉHO NÁSTROJE ............................................................ 36

6.1 Parametry webu ..................................................................................................... 36

6.2 Nahrání a nastavení souborů ................................................................................. 36

6.3 Testování ............................................................................................................... 37

6.3.1 Nahrávání souborů ......................................................................................... 37

6.3.2 Nastavení galerie pro nahrávání .................................................................... 37

6.3.3 Vybrání galerie k zobrazení ........................................................................... 37

6.3.4 Manipulace se soubory .................................................................................. 37

6.3.5 Příklad nahrávání ........................................................................................... 38

6.4 Shrnutí ................................................................................................................... 41

ZÁVĚR ................................................................................................................................. 42

SEZNAM POUŽITÉ LITERATURY .............................................................................. 43

SEZNAM POUŽITÝCH SYMBOLŮ .............................................................................. 47

SEZNAM OBRÁZKŮ ....................................................................................................... 49

SEZNAM TABULEK ........................................................................................................ 50

SEZNAM PŘÍLOH ............................................................................................................ 51

PŘÍLOHA Č. 1 ................................................................................................................... 52

PŘÍLOHA Č. 2 ................................................................................................................... 55

11

1 ÚVOD

Na úvod bych Vás chtěl seznámit s problematikou tématu nahrávání souborů na internet a

s několika důležitými pojmy, se kterými se v průběhu této práce budete setkávat.

Co se týče hromadného nahrávání souborů na web, tak k tomu dnes již existuje spousta

nástrojů, které umožňují i nahrávání různých typů souborů. Některé z nich mají i další

nastavení, jako zobrazení nahraných souborů, nebo nastavení limitů týkajících se počtu,

velikosti nebo typu souborů, které lze nahrát. Nicméně po vlastním výzkumu jsem zjistil,

že většina z nástrojů, které jsem zkoumal, nemá žádnou další možnost práce s nahranými

soubory, jako například jejich zobrazování, přejmenovávání, mazání nebo tvorba celých

galerií.

Hlavní motivací této práce je vytvořit komplexní nástroj pro nahrávání různých typů

souborů bez jakýchkoliv omezení. Tato omezení bude možné v případě potřeby upravit.

Dále má aplikace zajistí, že se z nahraných souborů ihned vytvoří kolekce (galerie), které

se přehledně zobrazí uživateli na obrazovce. Každá nahrávací stránka bude mít v hlavičce

ovládací panel, který umožní uživateli jednoduše manipulovat se soubory ve smyslu

přejmenovávání, mazání, upravování popisu nebo přesouvání mezi galeriemi. Uživatel

bude mít možnost vytvářet galerie dle vlastního uvážení.

V první části práce provedu analýzu současných nástrojů a poté je porovnám ve formě

tabulky. V další části provedu návrh aplikace. Poté začnu s vytvářením nástroje a webové

aplikace a implementací navrhnutých funkcí. Nakonec provedu test vytvořeného nástroje

na skutečném webu.

1.1 PHP

Asi tím nejdůležitějším pojmem, se kterým se v této práci setkáte, je PHP (PHP: Hypertext

Preprocessor). PHP vzniklo v roce 1996 a původně znamenalo PersonalHomePage [2], od

té doby prošlo mnoha změnami. Je to skriptovací programovací jazyk pracující na straně

serveru, což znamená, že veškeré procesy funkcí a výpočty probíhají na serveru, kde jsou

uloženy všechny zdrojové kódy. Zde se po přijetí požadavku od uživatele spustí daný

skript, který vygeneruje HTML stránku, a vrátí ji zpět uživateli, který tím pádem vidí

pouze výsledek – všechny procesy a postupy napsané autorem kódu jsou skryty [1].

12

Jazyk PHP používá dynamické typování – není nutné uvádět datové typy ani deklaraci

proměnných, čímž dochází k zobecnění kódu a zároveň se zvýší i jeho flexibilita. Na

druhou stranu si musí programátor dávat větší pozor při psaní kódu, neboť kontrola

dynamického typování probíhá až za běhu programu, takže bývá těžší odhalit případné

chyby.

Aktuálně používaná verze PHP je PHP5. Její největší výhodou oproti starším verzím je ta,

že využívá model objektově orientovaného programování založený na takzvaném

„Zendengine 2“ [1].

Mezi další výhody PHP5 patří:

lepší podpora MySQL,

vestavěná podpora pro SQLite,

účinnější kontrola chyb umožňující vyhazování výjimek,

možnost využívání jmenných prostorů (namespace),

zkrácené podmíněné výrazy,

nové funkce a příkazy [3].

1.2 Upload

Nahrávání (upload) různých druhů souborů na webové stránky je v dnešní době velice

důležitým aspektem webových stránek. Jedním ze způsobů nahrávání souborů je možnost

použít jazyk PHP. Často je ale nutné nahrát více souborů najednou a právě toho se dá

docílit kombinací jazyka PHP a nějakého nástroje. Nahrávání mnoha souborů najednou je

nezbytná funkce například při vytváření online galerie obrázků. Díky současným

nástrojům a PHP lze jednoduše vybrat všechny potřebné soubory najednou, nebo dokonce

celé složky, jejichž obsah chcete nahrát a ušetřit si tak ohromné množství času, které by

jinak zabralo jednotlivé vybírání souborů.

Nástroje pro nahrávání jsou založeny převážně na technologiích JQuery nebo Flash, které

budou popsány dále v textu.

13

1.3 JavaScript

JavaScript je skriptovací jazyk, který je možno vkládat do webových stránek. Nekompiluje

se a ne všechny skripty fungují ve všech prohlížečích. Mezi využití JavaScriptu patří

tvorba dynamických webových stránek, lze vytvářet různé animace, slideshow a jiné

interaktivní komponenty. JavaScript bývá používán také pro vývoj webových aplikací a

her. JQuery je JavaScriptová knihovna vytvořená pro jeho zjednodušení. JQuery bylo

navrženo speciálně pro přenos souborů, animace, slideshow a práci s AJAXem [4].

1.4 Flash

Flash je technologie převážně využívaná ve webových prohlížečích pro přehrávání videí a

animací. Musí se do prohlížečů instalovat a není kompatibilní se všemi zařízeními. Vypadá

stejně ve všech prohlížečích a podporuje 3D.V dnešní době se od Flashe upouští z důvodu

HTML5, který zastává podobné funkce jako Flash, ale není třeba ho instalovat a funguje na

většině platforem [5]. Jednou z hlavních výhod HTML5 je zabudovaný přehrávač pro

přehrávání videí a hudby.

1.5 AJAX

AJAX (Asynchronous JavaScript and XML) se zabývá hlavně dynamickými

komponentami na webových stránkách. Hlavní výhoda je ta, že například umožňuje

pracovat s anketami, měnit písmo nebo vzhled stránky bez jejího opětovného načtení [13].

14

2 ANALÝZA SOUČASNÉHOSTAVU

Jak již bylo řečeno, aktuálně se na internetu vyskytuje mnoho nástrojů, díky kterým

můžete na webové stránky přidat funkci hromadného nahrávání souborů. V této části

popíši několik open-source nástrojů, které jsou v dnešní době často používány. Na konci

této kapitoly bude shrnutí těchto nástrojů ve formě tabulky.

2.1 Uploadify

Uploadify je JQuery plugin, který obsahuje mnoho funkcí. Je dostupný ve dvou verzích –

HTML5 a Flash. Hlavní z nich je samotné nahrávání souborů.HTML5 verze podporuje

funkci „Drag and Drop“, kdy stačí požadované soubory přetáhnout do prohlížeče a sobory

se automaticky přidají do fronty. Dále při nahrávání zobrazuje indikátor průběhu a

předpokládanou dobu trvání. Je taky možné nastavit různá omezení – maximální velikost

nahrávaných souborů, jejich počet nebo typ [6].

Dokumentace k nalezení na http://www.uploadify.com/documentation/.

Nástroj ke stažení na http://www.uploadify.com/download/.

Obrázek 1: Uploadify – ukázka [6]

2.2 Plupload

Plupload využívá HTML5, ale funguje i v prohlížečích, které HTML5 nepodporují, neboť

si umí emulovat náhradní prostředí. Podporuje funkci „Drag and Drop“, dokonce i celých

15

složek. Ihned po nahrání souborů dovoluje zobrazit miniatury obrázků. Také lze nahrávat

miniatury s předdefinovanými rozměry. Upload probíhá po částech, aby bylo možné

bezpečně nahrávat i soubory větších velikostí. Je k dispozici v mnoha jazycích [7].

Dokumentace je na http://www.plupload.com/docs/.

Nástroj ke stažení na http://www.plupload.com/.

Obrázek 2: Plupload – ukázka [7]

2.3 Jupload

Jupload je applet umožňující nahrávat mnoho souborů různých typů. Je k dispozici

v mnoha jazycích včetně češtiny. Lze nastavit povolené typy nahrávaných souborů i jejich

velikost. U obrázků můžeme upravovat velikost, otočení a změnu formátu. Pokud se při

nahrávání přeruší spojení, Jupload po jeho obnovení naváže tam, kde došlo k přerušení –

není třeba nahrávat opět všechny soubory. Není podporován všemi prohlížeči [8].

Dokumentace je k dispozici na http://jupload.sourceforge.net/howto-compile.html.

Nástroj ke stažení na http://sourceforge.net/projects/jupload/.

16

Obrázek 3: Jupload – ukázka [8]

2.4 Drag and Drop

HTML5 Drag and Drop MultipleFileUploader je JQuery plugin, který využívá HTML5.Za

normálních okolností nefunguje v prohlížeči Internet Explorer. Lze nahrávat více souborů

libovolného typu i velikosti. Zobrazuje indikátor procesu nahrávání [9].

Nástroj ke stažení i dokumentace nahttp://www.script-tutorials.com/html5-drag-and-drop-

multiple-file-uploader/.

17

Obrázek 4: Drag and Drop – ukázka [9]

2.5 Blueimp

Blueimp je JQuery plugin. Umožňuje nahrávat soubory libovolného typu, počtu a velikosti.

Při nahrávání se zobrazuje indikátor průběhu a podporuje i Drag and Drop funkci [10].

Dokumentace k nalezení na https://github.com/blueimp/jQuery-File-Upload/wiki.

Nástroj ke stažení na https://github.com/blueimp/jQuery-File-Upload/releases.

Obrázek 5: Blueimp – ukázka [10]

18

2.6 SWFUpload

SWFUpload využívá Flash. Lze nahrávat soubory libovolného typu, počtu i velikostí.

Umožňuje filtrování typů souborů a upravování rozměrů obrázků. Zobrazuje indikátor

průběhu nahrávání. Několik posledních let nebyl aktualizován [11].

Dokumentace k nalezení na https://code.google.com/p/swfupload/wiki/FAQ.

Nástroj ke stažení na

https://code.google.com/p/swfupload/downloads/detail?name=SWFUpload%20v2.2.0.1%2

0Core.zip.

Obrázek 6: SWFUpload – ukázka [11]

Tabulka 1: Srovnání nástrojů

Libovolný typ Libovolná velikost Libovolný

počet Indikátor

Uploadify Ano Ano Ano Ano

Plupload Obrázky Ano Ano Ne

Jupload Ano Ano Ano Ano

Drag and Drop Ano Ano Ano Ano

Blueimp Ano Ano Ano Ano

SWFUpload Ano Ano Ano Ano

19

Tabulka 2: Srovnání nástrojů - pokračování

Drag and drop Podpora v

prohlížečích

Flash / JS Dokumentace

Uploadify Ano Vše Oba Ano

Plupload Ano Vše JavaScript Ano

Jupload Ne Ne IE Flash Ano

Drag and Drop Ano Ne IE JavaScript Ne

Blueimp Ano Vše JavaScript Ano

SWFUpload Ne Vše Flash Ne

Vysvětlivky k tabulce 1:

Libovolný typ – typ souborů, které je možné nahrát (obrázky, hudba, videa…).

Libovolná velikost – omezení velikosti nahrávaných souborů.

Libovolný počet – omezení maximálního počtu souborů, které lze nahrát na jeden výběr.

Indikátor – zobrazování indikátoru procesu nahrávání souborů.

Drag and Drop – soubory lze nahrát automaticky přetažením do prohlížeče.

2.7 Shrnutí

Závěrem kapitoly lze konstatovat, že všechny nástroje mají své klady a zápory. Po analýze

těchto konkrétních nástrojů jsem se rozhodl, že nejvhodnější pro vytvoření nového nástroje

bude použít nástroj Uploadify, který v této analýze vyšel nejlépe a jehož hlavními plusy

jsou rozsáhlé možnosti nastavení a velmi přehledná dokumentace.

20

3 CÍLE

Hlavním cílem této práce je vytvoření nového nástroje pro hromadné nahrávání různých

typů souborů libovolného množství a velikostí na server a jejich další zpracování za

pomocí jazyka PHP. Nový nástroj bude vytvořen na základě existujícího nástroje

Uploadify.

Nový nástroj bude využívat některých funkcionalit současného nástroje vybraného na

základě analýzy současných nástrojů pro nahrávání souborů.

Dalším cílem bude návrh a implementace nástroje pro nahrávání různých typů souborů ve

formě webové aplikace.

Posledním cílem bude otestování hotového nástroje na různých typech souborů na reálném

webu.

21

4 NÁVRH NÁSTROJE

V této části provedu návrh sekvenčního diagramu a rozeberu hlavní funkce nového

nástroje. Poté provedu návrh webové aplikace.

4.1 Sekvenční diagram

Pro návrh sekvenčního diagramu jsem se rozhodnul využít program AgroUML, protože se

jedná o jeden z rozšířených a přehledných nástrojů pro modelování UML.

Nástroj je ke stažení na http://argouml.en.softonic.com/download.

Obrázek 7: Sekvenční diagram

Sekvenční diagram popisuje, jak v mé webové aplikaci probíhají jednotlivé akce

v přesném pořadí, v jakém jdou.

22

Na tomto diagramu je stručně popsáno, jak probíhá nahrávání souborů a obecně jejich

upravování.

Skládá se ze tří rolí – uživatele, serveru a databáze, na kterých je zobrazení

nejpochopitelnější.

Nahrávání probíhá tak, že uživatel vybere libovolný soubor, který chce nahrát a zobrazit na

svých webových stránkách. Ten se uloží na server a zároveň aplikace zašle příkaz

k uložení informací o souboru do databáze. Následně se z databáze tento soubor načte a

zobrazí se na nahrávací stránce v přehledné formě.

Úprava souborů se mírně liší podle typu úpravy. Obecně lze říct, že uživatel klikne na

tlačítko, díky kterému bude možné upravovat nahrané soubory a poté provede

požadovanou úpravu (přejmenování, změna galerie, přidání popisu, smazání). Hned potom

se tato změna uloží do databáze, která vrátí aktuální data, která se zobrazí uživateli na

obrazovce.

Podrobněji budou tyto procesy rozepsány v další části práce.

4.2 Hlavní funkcionality navrhovaného nástroje

Nástroje pro nahrávání souborů neumožňují nijak pracovat s nahranými soubory, nebo

pouze velmi omezeně, proto přidám do své aplikace několik nových funkcí. Tyto nové

funkce by měly uživateli usnadnit práci při vytváření přehledného webu. Uživatel nástroje

bude mít možnost hromadného nahrávání souborů na web. Nahrávané soubory budou

libovolného typu a velikosti. Dalšími funkcemi bude přehrávání či stažení nahraného

souboru, jeho přejmenování, změna galerie, smazaní nebo přidání popisu. Zároveň se při

nahrání souborů uloží informace o nich do předpřipravené databáze, která se bude

aktualizovat při každé změně souboru. Každá změna bude zobrazena ihned po jejím

provedení bez nutnosti aktualizace celé stránky, čehož dosáhneme pomocí AJAXu.

Typy souborů, které bude moci uživatel nahrát, budou rozděleny do pěti kategorií:

Obrázky,

hudba,

videa,

dokumenty

23

ostatní (směs různých typů souborů).

4.2.1 Obrázky

V sekci pro nahrávání obrázků bude mít uživatel možnost hromadného nahrání obrázků

typů jpg, jpeg, bmp, png a gif.

Obrázek 8: Nastavení obrázků

Při jejich nahrávání se budou záznamy o nich automaticky ukládat do databáze a vytvoří se

i jejich zmenšenina, která se také uloží na webový. Tyto zmenšeniny budou ihned

v průběhu nahrávání umísťovány na stránky a budou plnit funkci odkazu na jejich originál,

takže po kliknutí na zmenšeninu se zobrazí obrázek v originální velikosti. Ve stejný

okamžik se z databáze načtou uložené informace zvlášť o každém obrázku, které se

zobrazí pod jeho zmenšeninou.

Zmenšeniny obrázků se vytvoří pomocí třídy pro zmenšování obrázků a jejich okamžité

zobrazování bez nutnosti obnovování stránky bude zajištěno pomocí AJAXu.

Proces nahrávání obrázků:

1. Uživatel vybere obrázek na nahrání,

2. nahrávací skript nahraje obrázek na server,

3. informace o nahraném obrázku se uloží do databáze,

4. nahrávací skript pošle název a cestu k právě nahranému souboru do skriptu, který

tvoří zmenšeniny,

5. zobrazení zmenšeniny a informací o obrázku na obrazovce.

24

4.2.2 Hudba a videa

Hudba a videa budou na stránkách zobrazeny s ikonami. U těchto souborů budou

zobrazovány informace o jejich velikosti, typu a délce. Bude zde možnost jejich přehrání

pomocí FlowPlayeru, což je volně stažitelný flashový přehrávač videí a hudby [36] (ke

stažení na https://flowplayer.org/pricing/#downloads). Povolené typy souborů pro videa

budou mp4, mov, flv, m4v, f4v a pro hudbump3 a m4a.

Obrázek 9: Nastavení videa

Proces nahrávání písniček a videí:

1. Uživatel vybere soubor na nahrání,

2. nahrávací skript nahraje soubor na server,

3. informace o nahraném souboru se uloží do databáze,

4. zobrazení ikony a informací o souboru na obrazovce.

4.2.3 Dokumenty

Další z funkcí nástroje bude nahrávání dokumentů různých typů. Uživatel bude moci měnit

jejich názvy, přesouvat je mezi galeriemi a mazat je. Povolené typy dokumentů budou pdf,

doc, docx, xls, xlsx, pps, ppt, pptx, txt. Každý nahraný dokument bude mít ikonku

specifickou podle jeho typu. Uživatel bude mít možnost tyto soubory otevřít přímo v

prohlížeči, nebo pokud to nebude možné, tak stáhnout do počítače.

Obrázek 10: Nastavení dokumentů

Proces nahrávání dokumentů – viz proces nahrávání písniček a videí.

25

4.2.4 Ostatní

Poslední z funkcí nástroje týkající se nahrávání, je nahrávání ostatních souborů. Zde

nebude žádné typové omezení, uživatel bude moci nahrávat jakékoliv soubory podle

libosti. Každý soubor bude mít svou ikonku podle skupiny, do které se bude řadit,

popřípadě ikonku s otazníkem, bude-li neznámý. Hudební a video soubory zde bude možné

přehrát díky implicitního přehrávače HTML5 nebo je bude možno stáhnout. Pokud nebude

ostatní soubory možné zobrazit na obrazovce, bude uživateli nabídnuto i jejich stažení.

Uživatel bude mít možnost jejich přejmenovávání, mazání a přesouvání mezi galeriemi.

Obrázek 11: Nastavení ostatních

Proces nahrávání ostatních souborů – viz proces nahrávání písniček a videí.

26

4.3 Předpokládaná funkčnost webové aplikace

Zobrazení vytvořených galerií,

vlastní nastavení galerie pro nahrávání,

automatické nastavení galerie (v případě, že uživatel žádnou nezadá),

mazání celých galerií,

přejmenování souborů,

přesouvání souborů mezi galeriemi,

mazání jednotlivých souborů,

přidávání komentářů k nahraným souborům,

zobrazení, přehrání či stažení souboru v závislosti na jeho typu.

4.4 Shrnutí

V této kapitole jsem na základě cílů práce a srovnání nástrojů zvolil nové funkce aplikace a

provedl jsem návrh sekvenčního diagramu, díky čemuž jsem zjistil všechny potřebné

informace pro další fázi – implementaci.

27

5 IMPLEMENTACE NÁSTROJE

Tato část bakalářské práce je věnována tvorbě webové aplikace. Vypíši zde všechny hlavní

třídy a popíši databázi, do které se budou ukládat všechny informace o uložených

souborech.

5.1 Použité technologie

Pro webovou aplikaci jsem využil programovací jazyk PHP s webovým serverem Apache.

Druhotným programovacím jazykem je JavaScript, který obstarává mnohé funkce

v aplikaci. Dále zde využívám javascriptové knihovny JQuery a technologie AJAX, aby

nebylo třeba stále načítat celou stránku, ale pouze její části. Pro databázi jsem zvolil

databázový systém MySQL.

Pro úpravu vzhledu stránek jsem použil kaskádové styly.

V aplikaci používám konfigurační soubor obsahující informace o databázi (její název,

uživatele a heslo) a připojení k ní. Dále v ní jsou uloženy cesty ke všem složkám

v aplikaci.

5.2 Třídy a skripty aplikace

5.2.1 Třída Uploads

Jednou ze základních tříd je třída Uploads.php, která obsahuje všechny hlavní proměnné a

funkce aplikace. Tato třída je děděna pěti dalšími třídami, jejichž instance jsou použity pro

všechny typy nahrávání. Mezi její hlavní funkce patří nastavování cest pro ukládání

nahrávaných souborů. Každý z potomků této třídy využívá všechny její metody, zjišťuje

existenci galerií a navíc obsahuje ovládací panel jednotlivých nahrávacích stránek a jejich

nastavení.

5.2.2 TřídaSQLCommands

Třída vytvořená speciálně pro vykonávání SQL příkazů. Obsahuje dvě základní metody.

Jednu zvlášť pro SELECT příkazy, protože vrací data z databáze a jednu pro ostatní, která

se stará o příkazy INSERT, UPDATE a DELETE.

28

5.2.3 GetInfo

Skript je využit k získání základních informací o nahrávaných souborech. Využívá také

třídy mp3file.class [28] pro získání speciálních informací o hudbě a třídu getID3 [29] pro

získání speciálních informací o videích. Dále zajišťuje vložení informací o právě

nahrávaných souborech do databáze za pomoci instance třídy SQLCommands. Zároveň se

stará o vkládání a ukládání souborů s duplicitními názvy tím, že na konec duplicitního

souboru přidá číslo v závorkách.

5.2.4 Třída ShowData

Třída obstarává za pomoci třídy SQLCommands výběr informací z databáze o nahraných

souborech, podle uživatelem nastavené galerie a zobrazení těchto souborů na obrazovce.

Jsou zde i formuláře pro přejmenovávání souborů a přidávání komentářů.

5.2.5 Uploadify

Skript obsahující funkci „move_uploaded_file()“ zajišťuje uložení souborů na server.

Zároveň se stará o vkládání a ukládání souborů s duplicitními názvy tím, že na konec

duplicitního souboru přidá číslo v závorkách.

5.2.6 SetThumb

Skript zajišťuje nastavení velikosti ikon obrázků, které se ke každému nahrávanému

obrázku tvoří. Využívá k tomu třídu PhpThumb.

5.2.7 Třída PHPThumb [12]

Třída obsahuje funkce pro vytvoření a uložení zmenšeniny obrázků. Přebírá parametry ze

skriptu setThumb. Tato třída je převzata z internetu a je volně šiřitelná.

Ke stažení na http://phpthumb.sourceforge.net/#download.

29

5.2.8 Třída Mp3file [28]

Třída obsahuje funkce pro zjištění informací o hudebních souborech. Tato třída je převzata

z internetu a je volně šiřitelná.

Ke stažení na http://www.zedwood.com/article/php-calculate-duration-of-mp3.

5.2.9 GetID3 [29]

Třída obsahuje funkce pro zjištění informací o videích. Tato třída je převzata z internetu a

je volně šiřitelná.

Ke stažení na http://sourceforge.net/projects/getid3/files/getID3%28%29%201.x/.

Ostatní třídy a skripty zajišťují funkce aplikace a kontrolu dat.

5.3 Webová aplikace

Webová aplikace bude složena ze šesti stránek. Těmito stránkami jsou index, upload

obrázků, upload hudby, upload videí, upload dokumentů a upload ostatních.

Součástí budou i javascriptové skripty obsahující funkce s využitím technologie AJAX,

které budou ovládat aplikaci a dva soubory s kaskádovými styly – jeden pro index a druhý

pro zobrazované soubory, aby se zjednodušila a zvýšila přehlednost aplikace.

5.4 Index

Stránka index.php obsahuje pět tlačítek, každé pro jeden typ nahrávání. Tato tlačítka budou

mít ve svých parametrech jméno, které bude obsahovat název stránky pro přesměrování.

Po kliknutí na vybrané tlačítko dojde k přesměrování na zvolenou nahrávací stránku.

30

Obrázek 12: Index

5.5 Nahrávací stránky

Jedná se o stránky picture_upload.php, document_upload.php, music_upload.php,

video_upload.php a ostatni_upload.php.

Tyto stránky v hlavičce obsahují skripty zajišťující podporu JQuery a odkaz na stránku

s kaskádovými styly.

Celkově je stránka rozdělena na dvě části – ovládací panel a tělo, ve kterém se zobrazují

nahrané soubory.

5.5.1 Ovládací panel

Ovládací panel je umístěn v horní části stránky. Skládá se ze čtyř částí – okna

s formulářem pro nastavení galerie, okna s formulářem obsahujícím výběrové pole pro

zobrazení existující galerie, formuláře pro vybrání souborů k nahrání a tlačítka odkazující

na úvodní stránku index.php.

Jsou zde pomocí SQL příkazů získána data z databáze o příslušné skupině, která budou

dále použita pro možnosti výběru galerie ve formuláři pro zobrazení galerie.

Dále je v této části obsažen kód, kterým zjišťuji, zda zobrazovaná galerie není prázdná.

V případě že ano, je zde vypsáno hlášení o této skutečnosti.

Dále je zde provedeno implicitní nastavení galerie na „Netříděné“ pomocí podmínky, která

zároveň ošetřuje i poslání prázdného řetězce pro nastavení galerie.

31

Obrázek 13: Ovládací panel

5.5.1.1 Okno pro nastavení galerie

Toto okno je složeno z jeho názvu a formulářového pole určeného pro zadání názvu

galerie, která má být zobrazena nebo vytvořena pro použití nově nahraných souborů. Dále

je zde tlačítko pro odeslání formuláře a text informující o aktuálně nastavené galerii.

Obrázek 14: Nastavení galerie

5.5.1.2 Okno pro zobrazení existující galerie

Toto okno je složeno z jeho názvu a výběrového pole určeného pro výběr galerie, která má

být zobrazena. Ta se zároveň nastaví jako galerie pro nahrávání.

Možnosti jsou zde nastaveny načítáním jednotlivých galerií z databáze.

Pod formulářem je umístěno tlačítko pro smazání celé galerie.

Obrázek 15: Výběr galerie

32

5.5.1.3 Formulář pro nahrání souborů

Tento formulář obsahuje pouze jedno tlačítko pro výběr souborů, které mají být nahrány.

Je zde povolen výběr více souborů najednou.

5.5.2 Část pro nahrané soubory

V této části je umístěn skript zobrazující vybranou galerii. Pokud není žádná galerie

vybrána, je zde pomocí podmínky ošetřeno zobrazení implicitní galerie.

Každý zobrazený prvek je složen ze čtyř částí. V první části je ikona nahraného souboru,

ve druhé jsou vypsána data o souboru, ve třetí je formulář pro komentáře a čtvrtá část

obsahuje tlačítko pro odstranění daného záznamu.

Obrázek 16: Nahrané soubory

5.5.2.1 Ikona

Ikona se zde zobrazuje pomocí bloku podmínek, kde se zjišťuje typ souboru. Každý typ má

svou ikonu. Tyto ikony jsou uloženy na serveru ve složce „web-pictures“. V případě, že se

jedná o nahrávací stránku pro obrázky, tak je zde místo ikony uvedena zmenšenina

obrázku, která má určený odkaz na svůj originál.

33

Obrázek 17: Ikony

5.5.2.2 Datová část

Datová část je opět rozdělena na několik částí:

1. Tlačítko pro stažení, zobrazení nebo přehrání daného souboru,

2. textové pole zobrazující název souboru, ve kterém se dá daný soubor i přejmenovat,

3. další informace o souboru, jako je jeho typ, velikost a galerie, u hudby a videa

navíc jejich délka a u videí i jejich rozlišení,

4. formulář obsahující výběrové pole, ve které je defaultně pomocí podmínky

nastavené jméno galerie, ve které se daný soubor nachází. V „dropdown“ listu jsou

zobrazeny další názvy galerií. Po kliknutí na jinou galerii dojde ke spuštění funkce

přesunu souboru do vybrané galerie a jejímu následnému zobrazení.

34

Obrázek 18: Datová část souboru

5.5.2.3 Formulář pro komentáře

Formulář obsahuje textové pole pro zadání popisu a tlačítko pro jeho uložení.

5.6 Databáze

MySQL databáze je vytvořena z pěti tabulek, kdy každá zastupuje jeden typ nahrávání.

Jejich názvy jsou pictures, music, video, document a other.

Všechny tabulky mají sloupce id, title, title_nodia, type, size, other a gallery.

Tabulka pro obrázky má navíc sloupce width a height.

Tabulka pro hudbu má navíc sloupec duration.

Tabulka pro videa má navíc sloupce duration a resolution.

5.6.1 Vysvětlení názvů

id – unikátní identifikační číslo souboru. Je primárním klíčem pro všechny tabulky.

title – skutečný název souboru zobrazovaný uživateli.

title_nodia – unikátní název souboru, je bez diakritiky, aby nenastal problém při nahrání

souboru na server. Má nastavený prefix, kterým je název galerie, do které patří, což dodává

tomuto sloupci unikátnost.

type – typ nahraného souboru (jpg, mp3, doc...).

size – velikost souboru v bytech nebo megabytech.

35

other – zde jsou uloženy komentáře k souborům.

gallery – název galerie, do které je každý soubor zařazen.

width – šířka obrázku.

height – výška obrázku.

duration – délka hudby nebo video souboru.

resolution – rozlišení videa.

5.6.2 Tabulky pro databázi

Graficky znázorněné tabulky včetně sloupců, jejich datových typů a primárních klíčů.

Obrázek 19: Tabulky pro databázi

5.7 Shrnutí

V této části jsem se zabýval kódováním. Úspěšně jsem vytvořil webovou aplikaci, která se

všemi funkcemi bez problémů funguje na lokálním severu na mém osobním počítači.

36

6 OVĚŘENÍ VYTVOŘENÉHO NÁSTROJE

V této části vyberu vhodný web pro aplikaci a na tomto webu otestuji její funkčnost.

Pro hosting své webové aplikace jsem se z finančních a praktických důvodů rozhodl využít

hosting „www.webzdarma.cz“.

Tento hosting pro ukázku aplikace nabízí dostatek volného místa, podporuje PHP5 a

MySQL.

6.1 Parametry webu

Název: http://file-uploader.wz.cz/ .

Parametry:

- vlastní doména třetího řádu,

- až 500 MB úložného prostoru,

- podpora MySQL s kapacitou 20 MB,

- podpora PHP [14],

- je možné použít konfigurační soubor .htaccess.

6.2 Nahrání a nastavení souborů

Pro nahrání PHP skriptů a ostatních souborů na server jsem použil nástroj

FileZillaPortable, díky kterému byl přenos rychlý a pohodlný.

Jako další krok jsem vytvořil v databázi všechny potřebné databázové tabulky.

Nakonec jsem nastavil cesty a připojení k databázi v souboru conf.php a Uploads.php a

začal jsem postupně testovat všechny funkce nástroje.

37

6.3 Testování

V této části popíši průběh testování. Aplikaci jsem testoval na současných verzích

nejrozšířenějších internetových prohlížečů.

6.3.1 Nahrávání souborů

Po kliknutí na tlačítko „Vybrat soubory pro nahrání“ se otevřelo okno pro výběr souborů.

Typ souborů byl podmíněn tím, ve které galerii jsem se nacházel.

Bylo možné vybrat více souborů najednou.

Pokud se ve složce, kam se nahrávalo, nacházel soubor se stejným názvem, tak se

nahrávaný soubor automaticky přejmenoval – za původní název se před příponu napsalo

číslo v závorkách (soubor.doc -> soubor(1).doc, popřípadě soubor(2).doc atd.).

6.3.2 Nastavení galerie pro nahrávání

Při nevyplnění pole pro nastavení galerie se po kliknutí na tlačítko „Nastavit“ automaticky

nastavila galerie na „Netříděné“.

Při vyplnění pole pro nastavení galerie se galerie nastavila podle něj.

Galerie pro nahrávání se nastavila i při vybrání existující galerie ve výběrovém poli.

6.3.3 Vybrání galerie k zobrazení

Po vybrání existující galerie ve výběrovém poli se galerie zobrazila.

Při ručním napsání galerie do pole pro její nastavení se po kliknutí na tlačítko nastavit daná

galerie zobrazila.

Při změně galerie souboru se zobrazila galerie, do které se soubor přesunul.

Po nahrání souboru se zobrazila galerie, do které se soubor nahrál.

6.3.4 Manipulace se soubory

Při změně názvu souboru a následném kliknutím jinam či potvrzení Enterem došlo

k přejmenování souboru. Při pokusu přejmenovat soubor na existující vyskočilo dotazovací

38

okno, zda chceme soubor přepsat. Po kliknutí na „ano“ se soubor přepsal, po kliknutí na

„ne“ žádná změna nenastala. Funguje i diakritika.

Po vybrání galerie z výběrového pole došlo k přesunutí souboru do vybrané galerie. Pokud

ve vybrané galerii již soubor s tímto názvem existoval, došlo k dotazu, zda chceme soubor

přepsat. Po zvolení „ne“ se nic nestalo, po zvolení „ano“ došlo k přesunutí a přepsání

souboru v cílové galerii.

Při přidání popisu a následnému kliknutí na tlačítko uložit došlo k uložení přidaného

komentáře. Při pokusu o uložení prázdného komentáře se vypsala hláška, že jsme nic

nevyplnili.

6.3.5 Příklad nahrávání

Ukázka vytvoření hudební galerie:

Obrázek 20: Ukázka vytvoření hudební galerie

39

Obrázek 21: Ukázka vytvoření hudební galerie – nahrané soubory

Ukázka vytvoření fotogalerie:

Obrázek 22: Ukázka vytvoření fotogalerie

40

Obrázek 23: Ukázka vytvoření fotogalerie – nahrané soubory

Ukázka vytvoření kolekce ostatních souborů:

Obrázek 24: Ukázka vytvoření kolekce souborů

41

Obrázek 25: Ukázka vytvoření kolekce souborů – nahrané soubory

6.4 Shrnutí

Po nastavení cest a přístupu k databázi jsem zjistil, že aplikace je funkční i na reálném

webu v současných verzích nejrozšířenějších internetových prohlížečů. Úplný návod na

použití je uveden v příloze.

42

ZÁVĚR

Nahrávání souborů na internet a jejich sdílení je nedílnou součástí dnešních webových

aplikací. Proto jsem chtěl vytvořit nástroj, který by tyto funkce usnadňoval všem, kteří

mají zájem sdílet různé soubory na svých osobních stránkách.

Cílem mé práce bylo navrhnout nástroj pro hromadné nahrávání souborů libovolného typu

a velikosti v programovacím jazyce PHP a další manipulace s nimi. Tomu předcházela

analýza současných nástrojů s funkcí nahrávání souborů. Následně jsem vypracoval návrh

nového nástroje, k jehož realizaci bylo potřebné zvládnutí programovacího jazyka PHP a

JavaScriptu (AJAXu). Po vypracování návrhu jsem vytvořil na lokálním serveru webovou

aplikaci, do které jsem průběžně tento nástroj implementoval.

Po úspěšných testech na lokálním serveru jsem pro získání co nejpřesnějších výsledků

nahrál hotovou aplikaci na reálný web, kde jsem testoval a zprovoznil všechny její funkce

ve všech současných verzích internetových prohlížečů.

Tímto se mi úspěšně podařilo vytvořit nástroj pro pohodlné nahrávání různých druhů

souborů na internet.

43

SEZNAM POUŽITÉ LITERATURY

1. ACHOUR, M., BETZ, F., DOVGAL, A. a kol. PHP: General Information – Manual.

PHP: Hypertext Preprocessor [Online]. 20. Listopadu 2013 [Citace: 2. Března 2014].

Dostupné z WWW: <http://cz2.php.net/manual/en/faq.general.php>.

2. Tvorba-webu.cz. PHP /základy/. Tvorba webu: tvorba www stránek [Online]. [Citace:

2. Března 2014]. Dostupné z WWW: <http://www.tvorba-webu.cz/php/>.

3. VRÁNA, Jakub. Jmenné prostory a další novinky v PHP 5.3 – Root.cz. Root.cz –

informace nejen ze světa Linuxu [Online]. 1. Července 2009 [Citace: 2. Března 2014].

Dostupné z WWW: <www.root.cz/clanky/php-5-3/>. ISSN 1212-8309.

4. WILDE, Bryan. JQuery vs. JavaScript: What’s the Difference Anyway?. Udemy Blog

[Online]. 31. Října 2013[Citace: 2. Března 2014]. Dostupné z

WWW:<https://www.udemy.com/blog/jquery-vs-javascript/>.

5. DLL. Flash vs Javascript (JQuery) Pros and Cons. Logic Pool – Web Developers

Resource [Online]. 30. Března 2009[Citace: 2. Března 2014]. Dostupné z

WWW:<http://logicpool.com/archives/30>.

6. Reactive Apps. About Uploadify™ - Uploadify. HTML5 File Upload Script, JQuery

Multiple File Upload Plugin – Uploadify / UploadiFive – Uploadify [Online]. [Citace: 24.

Února 2014]. Dostupné z WWW:<http://www.uploadify.com/about/>.

7. Moxiecode Systems AB. Plupload: Multi-runtime File-Uploader. Plupload: Multi-

runtime File-Uploader [Online]. [Citace: 24. Února 2014]. Dostupné z

WWW:<http://www.plupload.com/>.

8. GAUTHIER, Etienne. JUpload project on Sourceforge - JUpload - File Upload Applet

- General presentation. JUpload project on Sourceforge - JUpload - File Upload Applet -

General presentation [Online]. 27. Ledna 2014 [Citace: 24. Února 2014]. Dostupné z

WWW:<http://jupload.sourceforge.net>.

9. Andrey. HTML5 Drag and Drop Multiple File Uploader | Script Tutorials. Web

Development Tutorials | HTML5 and CSS3 | Script Tutorials [Online].9. Dubna 2012

[Citace: 24. Února 2014]. Dostupné z WWW:<http://www.script-tutorials.com/html5-drag-

and-drop-multiple-file-uploader/>.

44

10. TSCHAN, Sebastian. jQuery File Upload Demo. blueimp (Sebastian Tschan) ·

GitHub [Online].[Citace: 24. Února 2014]. Dostupné z

WWW:<http://blueimp.github.io/jQuery-File-Upload/>.

11. jakeroberts@gmail.com.,robloach. swfupload - JavaScript & Flash Upload Library -

Google Project Hosting. Google Code [Online].[Citace: 24. Února 2014]. Dostupné z

WWW:<https://code.google.com/p/swfupload/>.

12. HEINRICH, James. phpThumb() - The PHP thumbnail generator. SourceForge -

Download, Develop and Publish Free Open Source Software [Online]. [Citace: 10. Března

2014]. Dostupné z WWW:<http://phpthumb.sourceforge.net/>.

13. VRÁNA, Jakub. AJAX - Root.cz. Root.cz – informace nejen ze světa Linuxu [Online].

3. Září2005[Citace: 10. Března 2014]. Dostupné z WWW:

<http://www.root.cz/clanky/ajax/>.ISSN 1212-8309.

14. AYA CZ, spol. s r.o.. webzdarma– kontakt. webzdarma.cz - web, e-mail a databáze ...

zdarma [Online]. [Citace: 23. Dubna 2014]. Dostupné z WWW:

<https://www.webzdarma.cz/podminky.html>.

15. JORDAN, Michael. doc Icons, free doc icon download, Iconhot.com. Free icons and

png icons download | IconHot [Online]. [Citace: 30. Března 2014]. Dostupné z WWW:

<http://www.iconhot.com/icon/file-icons-vs-2/doc-3.html>.

16. JORDAN, Michael. docx Icons, free docx icon download, Iconhot.com. Free icons

and png icons download | IconHot [Online]. [Citace: 30. Března 2014]. Dostupné z

WWW: <http://www.iconhot.com/icon/file-icons-vs-2/docx-3.html>.

17. IconDrawer. IconDrawer | Icons. IconDrawer | Free & Stock Icons for Mac OS X

software, web design [Online]. [Citace: 30. Března 2014]. Dostupné z WWW:

<http://icondrawer.com/icons.php>.

18. ClipArt Best. Tiny Music Note 25280 Hd Wallpapers Widescreen in Music - Telusers.

- ClipArt Best - ClipArt Best. Free Cliparts - ClipArtBest [Online]. [Citace: 30. Března

2014]. Dostupné z WWW: <http://www.clipartbest.com/clipart-yikLX8BiE>.

19. debivort. Mimetypes File:Unknown toxicity icon.png - Wikimedia Commons.

Wikimedia Commons [Online]. Říjen 2006 [Citace: 30. Března 2014]. Dostupné z WWW:

<http://commons.wikimedia.org/wiki/File:Unknown_toxicity_icon.png>.

45

20. COELHO, Everaldo. Mimetypes PDF Icon - Crystal Clear Icons - SoftIcons.com.

Free Icon Sets, Social Media Icons, Web Icons, Toolbar Icons, Icon Tools - SoftIcons.com

[Online]. 26. Června 2011 [Citace: 30. Března 2014]. Dostupné z WWW:

<http://www.softicons.com/system-icons/crystal-clear-icons-by-everaldo-

coelho/mimetypes-pdf-icon>.

21. Microsoft Certified Partner: EZ Freeware, LLC. Open PPS Files For Free - Free

Opener. Free Opener - Open Over 80 File Formats For Free [Online]. 14. Května 2011

[Citace: 30. Března 2014]. Dostupné z WWW: <http://www.freeopener.com/open-my-

files/?ext=pps>.

22. JORDAN, Michael. powerpoint Icons, free powerpoint icon download, Iconhot.com.

Free icons and png icons download | IconHot [Online]. [Citace: 30. Března 2014].

Dostupné z WWW: <http://www.iconhot.com/icon/file-icons-vs-2/ppt-3.html>.

23. JORDAN, Michael. pptx Icons, free pptx icon download, Iconhot.com. Free icons and

png icons download | IconHot [Online]. [Citace: 30. Března 2014]. Dostupné z WWW:

<http://www.iconhot.com/icon/file-icons-vs-2/pptx-3.html>.

24. JORDAN, Michael. txt Icons, free txt icon download, Iconhot.com. Free icons and

png icons download | IconHot [Online]. [Citace: 30. Března 2014]. Dostupné z WWW:

<http://www.iconhot.com/icon/file-icons-vs-2/txt-3.html>.

25. Hengl, T. Video icon | GEOSTAT courses. GEOSTAT courses | "Applied Spatio-

temporal Data Analysis with FOSS: R+OSGeo" [Online]. 15. Května 2012 [Citace: 30.

Března 2014]. Dostupné z WWW: <http://geostat-course.org/node/984>.

26. Gurat. XLS File Icon - Lozengue Filetype Icons - SoftIcons.com. Free Icon Sets,

Social Media Icons, Web Icons, Toolbar Icons, Icon Tools - SoftIcons.com [Online]. 15.

Září 2010 [Citace: 30. Března 2014]. Dostupné z WWW:

<http://www.softicons.com/system-icons/lozengue-filetype-icons-by-gurato/xls-file-icon>.

27. Gurat. XLSX File Icon - Lozengue Filetype Icons - SoftIcons.com. Free Icon Sets,

Social Media Icons, Web Icons, Toolbar Icons, Icon Tools - SoftIcons.com [Online]. 15.

Září 2010 [Citace: 30. Března 2014]. Dostupné z WWW:

<http://www.softicons.com/system-icons/lozengue-filetype-icons-by-gurato/xlsx-file-

icon>.

46

28. JONES, Mark. PHP Calculate Duration of MP3 :: zedwood.com. Code for Monkeys -

C++, PHP, CSS, Programming Resource :: zedwood.com [Online]. [Citace: 4. Června

2014]. Dostupné z WWW:<http://www.zedwood.com/article/php-calculate-duration-of-

mp3>.

29. HEINRICH, James. getID3() - The PHP media file parser. SourceForge - Download,

Develop and Publish Free Open Source Software [Online]. [Citace: 2. Června 2014].

Dostupné z WWW:<http://getid3.sourceforge.net/>.

30. CASTAGNETTO, Jesus. PHP: programujeme profesionálně. 1. vyd. Přeložil Ludvík

Roubíček. Praha: Computer Press, 2001, xxiv, 656 s. ISBN 80-7226-310-2.

31. LEISS, O. & SCHMIDT, J. PHP v praxi: pro začátečníky a mírně pokročilé. 1. vyd.

Praha: Grada, 2010, 242 s. ISBN 978-80-247-3060-8.

32. KOFLER, M. &ÖGGL, B. PHP 5 a MySQL 5: průvodce webového programátora. 1.

vyd. Brno: Computer Press, 2007, 607 s. ISBN 978-80-251-1813-9.

33. LACKO, Ľuboslav. PHP 5 a MySQL 5: hotová řešení. 1. vyd. Brno: Computer Press,

2007, 320 s. ISBN 978-80-251-1695-1.

34. SMIDEK, V., BERIT, J. & MRÁZEK, L. PHP v příkladech. 1. vyd. České

Budějovice: Kopp, 2001, 117 s. ISBN 80-7232-162-5.

35. WELLING, L & THOMSON, L. PHP a MySQL - rozvoj webových aplikací. Praha:

SoftPress, c2002, 718 s. ISBN 80-86497-20-8.

36. SUCHÝ, Miroslav. Softwarová sklizeň (13. 2. 2008) - Root.cz. Root.cz – informace

nejen ze světa Linuxu [Online]. 13. Února2008 [Citace: 10. Března 2014]. Dostupné z

WWW: <http://www.root.cz/clanky/softwarova-sklizen-13-2-2008/#flowplayer>.ISSN

1212-8309.

37. Refsnes Data. XML Introduction - What is XML?. W3Schools Online Web Tutorials

[Online]. [Citace: 12. Června 2014]. Dostupné z

WWW:<http://www.w3schools.com/xml/xml_whatis.asp>.

47

SEZNAM POUŽITÝCH SYMBOLŮ

PHP PHP: Hypertext Preprocesor – skriptovací programovací jazyk pracující na

straně serveru.

HTML HyperTextMarkupLanguage – značkovací jazyk pro vytváření

www stránek, které je pak možné publikovat na Internetu.

SQL StructuredQueryLanguage – dotazovací jazyk používající se pro manipulaci

dat v databázi.

3D Trojdimenzionální

AJAX Asynchronous JavaScript and XML – součást JavaScriptu, umožňuje

manipulaci s obsahem webových stránek bez nutnosti jejich opětovného

načtení.

XML ExtensibleMarkupLanguage – značkovací jazyk určený primárně pro nesení

informací, na rozdíl od HTML, které je určeno pro jejich zobrazení [37].

JS JavaScript – skriptovací jazyk používaný primárně pro tvorbu interaktivních

webových stránek.

IE Internet Explorer – internetový prohlížeč.

UML UnifiedModelingLanguage – jazyk určen pro návrh modelů aplikací.

JPEG, JPG Joint PhotographicExperts Group – přípona souboru označující obrázek.

BMP Bitmap – přípona souboru označující obrázek.

PNG Portable Network Graphics – přípona souboru označující obrázek.

GIF GraphicsInterchangeFormat – přípona souboru označující obrázek.

MP4, M4V MPEG Layer-4 Audio – video soubory.

MPEG Moving Picture Experts Group – video soubory.

MOV QuickTimeMovie – video soubory.

FLV, F4V FlashVideo – video soubory.

MP3 MPEG-1 Audio Layer-3 – hudební soubory.

PDF Portable document format – formát označující soubor určený pro čtení

48

dokumentů.

DOC MS Word dokument – formát označující soubor pro úpravu textových

dokumentů.

DOCX MS Word dokument – novější verze DOC.

XLS MS Excel soubor – formát označující soubor pro práci se statistikou a

matematikou.

XLSX MS Excel soubor – novější verze XLS.

PPS MS PowerPoint prezentace – formát dokumentů označující spustitelnou

prezentaci.

PPT MS PowerPoint prezentace – formát označující soubor pro úpravu a tvorbu

prezentací.

PPTX MS PowerPoint prezentace, novější verze PPT.

TXT Textový dokument – základní editační program určený pro jednoduchou

editaci textu.

CSS Cascading Style Sheets – styly pro úpravu vzhledu webových stránek.

MS Microsoft – společnost zabývající se převážně vývojem operačních systémů.

49

SEZNAM OBRÁZKŮ

Obrázek 1: Uploadify – ukázka [6] ...................................................................................... 14 Obrázek 2: Plupload – ukázka [7] ........................................................................................ 15 Obrázek 3: Jupload – ukázka [8] ......................................................................................... 16 Obrázek 4: Drag and Drop – ukázka [9] .............................................................................. 17 Obrázek 5: Blueimp – ukázka [10] ...................................................................................... 17

Obrázek 6: SWFUpload – ukázka [11] ................................................................................ 18 Obrázek 7: Sekvenční diagram ............................................................................................ 21

Obrázek 8: Nastavení obrázků ............................................................................................. 23

Obrázek 9: Nastavení videa ................................................................................................. 24 Obrázek 10: Nastavení dokumentů ...................................................................................... 24 Obrázek 11: Nastavení ostatních ......................................................................................... 25 Obrázek 12: Index ................................................................................................................ 30 Obrázek 13: Ovládací panel ................................................................................................. 31

Obrázek 14: Nastavení galerie ............................................................................................. 31 Obrázek 15: Výběr galerie ................................................................................................... 31 Obrázek 16: Nahrané soubory ............................................................................................. 32

Obrázek 17: Ikony ............................................................................................................... 33 Obrázek 18: Datová část souboru ........................................................................................ 34 Obrázek 19: Tabulky pro databázi ....................................................................................... 35

Obrázek 20: Ukázka vytvoření hudební galerie .................................................................. 38

Obrázek 21: Ukázka vytvoření hudební galerie – nahrané soubory .................................... 39 Obrázek 22: Ukázka vytvoření fotogalerie .......................................................................... 39 Obrázek 23: Ukázka vytvoření fotogalerie – nahrané soubory ........................................... 40

Obrázek 24: Ukázka vytvoření kolekce souborů ................................................................. 40 Obrázek 25: Ukázka vytvoření kolekce souborů – nahrané soubory .................................. 41

Obrázek 26: Návod ovládací panel ...................................................................................... 53 Obrázek 27: Návod soubor .................................................................................................. 54 Obrázek 28: Ikona 1 [15] ..................................................................................................... 55 Obrázek 29: Ikona 2 [16] ..................................................................................................... 55

Obrázek 30: Ikona 3 [17] ..................................................................................................... 55

Obrázek 31: Ikona 4 [18] ..................................................................................................... 55

Obrázek 32: Ikona 5 [19] ..................................................................................................... 55 Obrázek 33: Ikona 6 [20] ..................................................................................................... 55

Obrázek 34: Ikona 7 [21] ..................................................................................................... 55 Obrázek 35: Ikona 8 [22] ..................................................................................................... 55 Obrázek 36: Ikona 9 [23] ..................................................................................................... 55

Obrázek 37: Ikona 10 [24] ................................................................................................... 55 Obrázek 38: Ikona 11 [25] ................................................................................................... 55 Obrázek 39: Ikona 12 [26] ................................................................................................... 55 Obrázek 40: Ikona 13 [27] ................................................................................................... 55

50

SEZNAM TABULEK

Tabulka 1: Srovnání nástrojů ............................................................................................... 18 Tabulka 2: Srovnání nástrojů - pokračování ........................................................................ 19

51

SEZNAM PŘÍLOH

Příloha č. 1 – Návod na ovládání aplikace,

příloha č. 2 – Ikony z aplikace,

příloha č. 3 – CD se zdrojovým kódem aplikace a SQL skriptem.

52

PŘÍLOHA Č. 1

Návod na instalaci a použití aplikace

Pro používání aplikace je nutné mít hosting podporující PHP5 (nebo vyšší) a databáze

MySQL.

A) Návod na instalaci aplikace

1. Nahrání všech souborů aplikace na webové úložiště.

2. Upravení souboru conf.php a Uploads.php.

a. Nastavení cest s koncovkou „root“ na absolutní cesty k souborům.

b. Nastavení ostatních cest – relativně ke složce „Uploadify“.

c. Nastavení databáze (web, uživatel, heslo).

3. Vytvoření databáze a tabulek.

4. V případě potřeby lze upravit v jednotlivých skriptech document_upload,

music_upload, picture_upload, video_upload a other_upload na řádku 181

maximální velikost nahrávaných souborů.

5. Hotovo.

B) Návod na použití aplikace

1. Úvodní stránka – index

Vyberte si, co chcete nahrát:

Obrázky – soubory s příponami jpg, jpeg, bmp, png a gif.

Hudba – soubory s příponou mp3 a m4a.

Video – soubory s příponami mp4, mov, flv, m4v a f4v.

Dokumenty – soubory s příponami pdf, doc, docx, xls, xlsx, pps, ppt, pptx, txt.

Ostatní – ostatní druhy souborů.

53

2. Nahrávací stránka

a. Ovládací panel

Obrázek 26: Návod ovládací panel

1) Textové pole pro zadání galerie, do které se budou ukládat nahrané soubory. Pokud

napsaná galerie existuje, tak se rovnou zobrazí.

2) Tlačítko pro potvrzení a nastavení vybrané galerie z bodu „1)“.

3) Indikátor aktuálně nastavené galerie pro nahrávání a mazání galerie.

4) Pokud je nějaká galerie vytvořena, zde je možné vybrat ji k zobrazení. Zároveň se

nastaví jako galerie pro nahrávání.

5) Toto tlačítko smaže všechny soubory v právě nastavené galerii.

6) Po kliknutí na tlačítko se otevře okno, kde je možné vybrat soubory pro nahrání na

web.

7) Tímto tlačítkem se vrátíte zpět na rozcestník – stránku index.

54

b. Soubory

Věci ukázané na obrázku pod čísly 3, 5, 6, 7 a 8 budou možné změnit pouze po

kliknutí na tlačítko „Upravit soubory“ na ovládacím panelu.

Obrázek 27: Návod soubor

1) Ikona označující typ nahraného souboru, pokud není známý, zobrazí se ikona

s otazníkem. V případě že jste v sekci pro nahrávání obrázků, tak se zde ukazuje

zmenšenina obrázku. Pokud na ni kliknete, tak se zobrazí v plné velikosti.

2) Tlačítko pro zobrazení, přehrání nebo stažení daného souboru. V sekci nahrávání

obrázků se nevyskytuje.

3) Název souboru. Po úpravě stačí stisknout Enter nebo jen kliknout kamkoliv mimo

pole a dojde automaticky k přejmenování.

4) Prostor, ve kterém se zobrazují neměnné informace o souboru.

5) Zde je možné změnit galerii souboru.

6) Do tohoto textového pole se píše popis souboru.

7) Potvrzení a uložení popisu z bodu „6)“.

8) Smaže soubor.

55

PŘÍLOHA Č. 2

Ikony z aplikace

Všechny ikonky, které jsem v aplikaci použil, jsou v případě nekomerčního použití zdarma

ke stažení na internetu.

Obrázek 28: Ikona 1

[15]

Obrázek 29: Ikona 2

[16]

Obrázek 30: Ikona 3

[17]

Obrázek 31: Ikona 4

[18]

Obrázek 32: Ikona 5

[19]

Obrázek 33: Ikona 6

[20]

Obrázek 34: Ikona 7

[21]

Obrázek 35: Ikona 8

[22]

Obrázek 36: Ikona 9

[23]

Obrázek 37: Ikona

10 [24]

Obrázek 38: Ikona

11 [25]

Obrázek 39: Ikona

12 [26]

Obrázek 40: Ikona

13 [27]