VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Počítačové systémy

Rozměr: px
Začít zobrazení ze stránky:

Download "VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Počítačové systémy"

Transkript

1 VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Počítačové systémy Webové stránky s malým databázovým systémem pro firmu PAPOS Trade s.r.o. bakalářská práce Autor: Lukáš Helus Vedoucí práce: PaedDr. František Smrčka, Ph.D. Jihlava 2014

2

3 Abstrakt Tato bakalářská práce popisuje webovou aplikaci databázového systému navrženou pro firmu PAPOS Trade, společnost s ručením omezeným. Aplikace má zpřehlednit množství aktuálně používaných počítačových stanic ve firmě, včetně hardware a software. Vedení firmy umožňuje náhled do této databáze, její prohledávání a tisk kompletních seznamů pro další použití. Správci sítě pak aktualizaci a správu celého systému. K tvorbě jsem použil jazyk hypertextového preprocesoru společně se strukturovaným dotazovacím jazykem. Klíčová slova Databáze, PHP, SQL, Správce, Uživatel Abstract This bachelor thesis describes the web application of database system designed for the company PAPOS Trade, a limited liability company. The application is supposed to streamline amount of currently used computer workstations in the company, including hardware and software. It provides insight into the database for top management, scanning and printing of complete lists for future use. Updating and managing entire system for administrator. I used for creation hypertext preprocessor language together with structured query language. Key words Database, PHP, SQL, Administrator, User

4 Prohlašuji, že předložená bakalářská práce je původní a zpracoval/a jsem ji samostatně. Prohlašuji, že citace použitých pramenů je úplná, že jsem v práci neporušil/a autorská práva (ve smyslu zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů, v platném znění, dále též AZ ). Souhlasím s umístěním bakalářské práce v knihovně VŠPJ a s jejím užitím k výuce nebo k vlastní vnitřní potřebě VŠPJ. Byl/a jsem seznámen s tím, že na mou bakalářskou práci se plně vztahuje AZ, zejména 60 (školní dílo). Beru na vědomí, že VŠPJ má právo na uzavření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že s o u h l a s í m s případným užitím mé bakalářské práce (prodej, zapůjčení apod.). Jsem si vědom/a toho, že užít své bakalářské práce či poskytnout licenci k jejímu využití mohu jen se souhlasem VŠPJ, která má právo ode mne požadovat přiměřený příspěvek na úhradu nákladů, vynaložených vysokou školou na vytvoření díla (až do jejich skutečné výše), z výdělku dosaženého v souvislosti s užitím díla či poskytnutí licence. V Jihlavě dne... Podpis

5 Poděkování Na tomto místě bych rád poděkoval svému vedoucímu práce PaedDr. Františku Smrčkovi, Ph.D. za poskytnutí tématu a možnost vytvářet ho pod jeho vedením.

6 Obsah 1 Úvod Současný stav PAPOS Trade s.r.o Situace ve firmě Existující řešení MiCoS - Správce IT Evidence softwaru Evidence hardware a majetku Srovnání s vlastním řešením Použité technologie Programovací jazyky PHP MySQL CSS JavaScript RegEx Nástroje pro vývoj Analýza řešeného problému Popis implementace PC sestavy Hardware Software Uživatelé Kanceláře Zaměstnanci Výrobci a Práva Možnosti z pohledu uživatele Pohled běžného uživatele Pohled správce Popis E-R modelu Databáze Model případů užití dle UML Realizace Rozdělení menu Zabezpečení... 25

7 6.3 Vlastní kód sekcí Vložení a úprava položek Filtrování položek Vyhledávání položek Řazení položek Kontrola a integrita dat jquery Datepicker Export do PDF Testování Postup testování a výsledky Odstranění chyb Závěr Problémy a jejich řešení Budoucnost Seznam použité literatury Seznam obrázků Seznam použitých zkratek Přílohy Obsah přiloženého CD... 44

8 1 Úvod K tématu této bakalářské práce jsem se dostal díky mému nynějšímu zaměstnání, a to správce sítě ve firmě PAPOS Trade s.r.o. Cílem mé práce je dosažení dostačujícího přehledu výpočetní techniky ve firmě a tím zjednodušit jejich vysledovatelnost. Aplikace by měla být lehce pochopitelná bez jakýchkoliv školení zaměstnanců a uživatelů. Hlavním stavebním kamenem má být seznam aktuálně používaných stanic, dále pak hardwarového a softwarového vybavení v celé firmě. Půjde o přehled jednotlivých atributů položek (čísla, název, popis, počet, umístění, zodpovědný pracovník, datum nákupu, datum poslední údržby, licence softwaru atd.) spojený s vyhledáváním, tříděním a řazením podle zadaných kritérií a výstup kompletních seznamů ve formátu PDF pro zjednodušení tisku. Důležitost výsledku mé práce je jednoznačná odstranit neznámé tabu hmotného majetku firmy. Pokud má člověk ve své práci přehled o dostupném vybavení, může ji vykonávat na sto procent. Nedostatky v nynějším řešení jsou jasné nikdo neví, kde se daná věc nachází, kdo za ni zodpovídá, nebo se dozvíme den předem, že důležitému softwaru končí licence. Aplikace bude mít dvě úrovně, lépe řečeno dva pohledy, pokud se na to díváme ze strany uživatelů. První z nich je pohled vedení jako běžného uživatele, kteří budou mít přístup do domluvených kategorií, tyto kategorie prohlížet, třídit, řadit, vyhledávat v nich a exportovat kompletní seznam dané kategorie ve formátu PDF. Nebudou moci položky přidávat, měnit, ani mazat. Rovněž nebudou mít přístup do sekcí uživatelů, umístění ad. Druhou úrovní bude pohled správce jako administrátora celého systému. K výše uvedeným možnostem má možnost do všech sekcí položky přidávat, upravovat je a také mazat. Některé sekce nebudou mít pro jejich úpravu vytvoření grafické prostředí, proto se bude muset jejich úprava provést manuálně přímo v databázi. Bude se jednat o sekce málo používané a aktualizované. Nebudou chybět ani kontroly duplicitních dat, kde se to vyžaduje, správné formáty zadávaných údajů a také nemožnost odeslání prázdných políček formulářů. 8

9 Vše bude naprogramováno pomocí jazyka PHP s využitím databázového systému MySQL a design aplikace bude využívat kaskádových stylů. Během studia předmětů Tvorba www aplikací a Databázové systémy jsem se setkal s výše zmíněnými nástroji. 9

10 2 Současný stav 2.1 PAPOS Trade s.r.o. Úplný začátek počínání této firmy čítá rok 1992, kdy vznikl PAPOS v.o.s. v původním areálu továrny Západočeských papíren s. p., závod Ostrov. Nyní pokračuje ve stoleté tradici výroby lepenky, kde materiálem pro výrobu jsou čistě druhotné suroviny sběrový papír a sběrový textil, což při spotřebě tun surovin za rok činí z firmy PAPOS v.o.s. celorepublikově významného recyklátora a zpracovatele odpadů. Na počátku minulého roku přebíral firmu jeden ze dvou posledních majitelů, Ing. Jan Volejník, a firma dostala nový název PAPOS Trade s.r.o. V současné době firma zaměstnává přes 120 zaměstnanců. [4] Obrázek 1: Papírenský stroj 2.2 Situace ve firmě Celý areál firmy se skládá z více než desítkou budov, jednotlivé budovy jsou propojené pomocí optické kabeláže. Areál je zabezpečen kamerovým systémem. V celé firmě se momentálně nachází přes tři desítky uživatelských stanic, z čehož nám vyplývá 10

11 nepřeberné množství výpočetní techniky. Po mém nástupu do firmy jsem byl uvrhnut do víru chaosu, kde se snažím nastolit nějaký řád. Ohledem na současný způsob vedení evidence výpočetní techniky je více než jasné, že potřebuje jistou inovaci. Prozatím vše spočívá na vnitřním informačním systému, ale kde není zdaleka úplně vše, zbytek leží na bedrech jednotlivých zaměstnanců, v kopě souborů a papírů, které jsou roztahané po celé fabrice, anebo se to neví. Obrázek 2: Expediční hala 11

12 3 Existující řešení 3.1 MiCoS - Správce IT Jedním možným řešením je program Správce IT od MiCoS Software s.r.o. Jedná se o specializovaný systém pro Software Asset Management, zkráceně SAM. Je určen především pro SW audit, správu licencí, HW audit a evidenci výpočetní techniky. Program je vyvíjen od roku 1992 a řadí se tak ke špičce systémů, které lze využít pro inventuru počítačů a instalovaného software. [5] Evidence softwaru Pro softwarovou evidenci je v programu vytvořen propracovaný systém, ve kterém lze evidovat všechny typy licencí, jejich časové nebo jiné omezení. Program umožňuje také zobrazit celkovou bilanci využití licencí Evidence hardware a majetku Velkým přínosem programu v evidenci počítačů je automatické zjištění hardwarové konfigurace počítače. U některých typů komponent lze zjistit kromě názvu i výrobní číslo, výrobce a další podrobné údaje. Pro kompletnost evidence lze tyto načtené údaje ručně doplnit o další údaje jako je inventární číslo, zodpovědná osoba, ekonomické nebo vlastní údaje. Systém sleduje podrobně veškerou historii a změny oproti poslednímu stavu. 3.2 Srovnání s vlastním řešením Program Správce IT má již zažitou mnohaletou tradici a neustále se vyvíjí. Z hlediska firmy by takovýto software nenašel uplatnění už jen z důvodu menšího počtu stanic, s tím rovněž souvisí i cena softwaru. Nehledě na to, že by pro manipulaci se softwarem musel být proškolen personál, což by souviselo s dalšími náklady, zejména časovými. Dalo by se říct, že mé řešení bude jen holý základ výše zmíněného řešení, který firmě postačí pro její bezproblémový chod. 12

13 4 Použité technologie 4.1 Programovací jazyky PHP PHP je zkratka anglického originálu Hypertext Preprocessor, původně pro Personal Home Page. Důležitým aspektem je to, že je jedná o skriptovací programovací jazyk určený hlavně pro tvoření dynamických internetových stránek a webových aplikací ve známých formátech HTML či XHTML. Při používání jazyku PHP jsou skripty prováděny na straně serveru, uživatel vidí až výsledek jejich činnosti. Interpret PHP skriptu je možné volat třemi způsoby: pomocí příkazového řádku, dotazovacích metod HTTP nebo pomocí webových služeb. Tento jazyk je nezávislý na používané platformě, skripty lze většinou mezi operačními systémy přenášet bez jakýchkoliv úprav. PHP je nejrozšířenějším a nejznámějším skriptovacím jazykem pro web. Oblíbeným se stal hlavně díky jednoduchosti použití a bohaté zásobě funkcí. V souvislosti s operačním systémem Linux, databázovým systémem MySQL a webovým serverem Apache je často využíván k tvorbě webových aplikací. Z toho důvodu vznikla zkratka LAMP z počátečních písmen použitých prostředků tedy Linux, Apache, MySQL a PHP. [1] MySQL MySQL je jeden z nejznámějších databázových systémů. Jak už z názvu vyplývá, používá se zde jazyk SQL. Podobně jako u jiných databázových systému se jedná o dialekt s určitými rozšířeními. MySQL má v současné době velký podíl mezi používanými databázemi, a to díky snadné implementovatelnosti, vysokému výkonu a hlavně, že se jedná o volně šiřitelný software. MySQL bylo z počátku optimalizováno hlavně pro zisk dobré rychlosti, a to i za cenu zjednodušení některých aspektů. Má jen jednoduché způsoby zálohování, až donedávna nepodporovalo pohledy, triggery a uložené procedury. Tyto vlastnosti jsou přidávány až 13

14 v posledních letech, kdy po nich vznikla poptávka od programátorů webových stránek. [2] CSS CSS je zkratkou pro anglický originál Cascading Style Sheets, v češtině známé jako Kaskádové styly. Jedná se o jazyk pro určení způsobu zobrazení stránek či aplikací napsaných v jazycích PHP nebo XHTML. Prozatím jsou vydány dvě verze kaskádových stylů a to CSS1 a CSS2, v půlce roku 2011 byla vydána revize 2.1 a nyní se pracuje na verzi CSS3. Hlavním smyslem tohoto jazyka je umožnit programátorům oddělit vzhled stránky od obsahu. Nevýhodou tohoto systému je zmatek ve standardizaci a jejím dodržování jednotlivými prohlížeči, tím pak vzniká rozdílné zobrazení. [3] JavaScript JavaScript je objektově orientovaný skriptovací jazyk. Používá se z pravidla jako interpretovaný programovací jazyk pro www stránky, vkládá se přímo do HTML kódu stránky. Ovládají se jím různé interaktivní prvky GUI, tvoření animací nebo efekty obrázků. Je programován v Jazyce C/C++/Java. [6] RegEx Regulární výraz (regular expression), označovaný též zkráceně jako regexp či regex je speciální řetězec znaků, který představuje určitý vzor (chcete-li masku) pro textové řetězce. Regulární výrazy se proto nejčastěji používají ke kontrole dat zadávaných ve formulářích (například ová adresa či PSČ) nebo parsování kódu (třeba HMTL, XML či CSV). Regulární výrazy můžete v současné době najít téměř ve všech programovacích jazycích (C#, Java, Visual Basic.NET,Perl, PHP, Javascript aj.) a mnoha programech zvláště pro Unix/Linux. I základní znalost regulárních výrazů vám při programování může ušetřit mnoho řádků kódu (především různých if-then-else konstrukcí). Existují různé odnože regulárních výrazů nejznámější dvě odnože jsou Perlcompatible regulání výrazy a POSIX regulární výrazy. Ačkoliv většina novějších programovacích jazyků používá regulární výrazy odvozené od jazyka Perl, drobné 14

15 rozdíly v implementaci tu stále přetrvávají (například Javascript nepodporuje všechny Perl regular expressions konstrukce). [7] V regulárních výrazech existuje několik typů metaznaků. Velmi důležitým metaznakem je. (tečka) ta zastupuje právě jeden libovolný znak. Velmi významnou skupinou metaznaků jsou kvantifikátory (quantifiers) ty určují, kolikrát se smí opakovat znak předcházející kvantifikátoru. Na jednotlivé kvantifikátory se podíváme níže. Pokud chceme v určitém místě povolit právě jeden ze skupiny znaků, uzavřeme takovou skupinu znaků do hranatých závorek ([ a ]). Pokud chceme naopak definovat, že v daném místě smí být libovolný znak s výjimkou několika určitých znaků, uzavřeme zakázané znaky opět do hranatých závorek a za [ jestě doplníme ^. Zápis [^ab], tak bude znamenat, že se v daném místě má vyskytovat jeden libovolný znak kromě znaků a a b. Pro často používané skupiny znaků existují speciální zkratky (například zápis \d zastupuje všechny číslice 0-9) viz tabulku níže. Pokud chceme definovat skupinu znaků, které následují v abecedě (resp. přesněji v tabulce znaků) za sebou, můžeme je zapsat jako interval, například [1-5], [a-e] nebo třeba [A-Z] Pokud potřebujeme zajistit, opakování určité sekvence znaků (ne jen znaku jednoho), můžeme sekvenci znaků uzavřít do závorek (( a )), a pokud za pravou kulatou závorku doplníme kvantifikátor, bude se počet opakování vztahovat na celou sekvenci znaků uzavřenou do závorek. Pokud chceme dát na výběr několik variant textu (třeba Petr nebo Pavel), jako oddělovač variant použijeme metaznak (výraz bude tedy Petr Pavel) 4.2 Nástroje pro vývoj Notepad++ v6.3.3 Notepad++ je vydařená plnohodnotná náhrada poznámkového bloku Windows se zvýrazněním syntaxe několika programovacích jazyků včetně HTML, XML a dalších kódů. Program může fungovat i jako jednoduchý WYSIWYG editor HTML stránek. 15

16 Podporuje drag and drop, otevření více dokumentů současně, uložení oblíbených dokumentů atd. Mezi podporované programovací jazyky patří: C, C++, Java, C#, XML, HTML, PHP, Javascript, ASP, CSS, SQL a mnoho dalších. [8] PhpMyAdmin Tento nástroj se používá pro jednoduchou správu MySQL. PhpMyAdmin je napsaný v jazyce PHP, který umožňuje zálohování, vytváření, vkládaní, editaci a mazání záznamu v tabulkách, dále vytváření databázi apod. PhpMyAdmin se spouští přes webové rozhraní. [9] 16

17 5 Analýza řešeného problému 5.1 Popis implementace Než začnu cokoliv dělat, musím si promyslet a rozvrhnout, jak vlastně má evidence bude fungovat. Hlavní přínos této aplikace má být usnadnění při kontrolách a inventurách majetku, které se ve firmě provádějí každoročně, včetně příchodů a odchodů zaměstnanců a předání majetku firmy do zodpovědnosti. Pro práci jsem použil programovací jazyky HTML a PHP. Tyto jazyky jsem si zvolil z toho důvodu, že se již nějakou dobu snažím do této problematiky dostat a tímto jsem také využil příležitost k získání dalších zkušeností a osvojení nových věcí. K ukládání dat jsem použil databázi MySQL, která byla více popsána výše, jelikož je snadno implementovatelná v jazyce PHP. Skriptovací jazyk JavaScript jsem v mé práci použil ojediněle, především zde řeší problém zadávání dat v podobě klikacího kalendáře. Rovněž je zde důležitá třída kontroly regulárních výrazů, zejména při registraci uživatele aplikace. Je využita při ověření správnosti zadání jména, hesla a správného tvaru u. Webové stránky jsou po celou dobu provozované na serveru uperaka.cz (který spravuji ve volném čase) pod adresou uperaka.cz/vspj. Až budou tyto stránky hotové, schválené a otestované, budou přesunuty na firemní doménu. Při najetí do aplikace se musíme nejprve přihlásit. Zde budou dvě úrovně přihlášení správce a běžný uživatel. Následně se dostaneme do hlavní nabídky, na kterou bude mít každý uživatel svůj pohled dle nastavení práv. Výpočetní technika bude rozdělena do tří hlavních sekcí a to na PC sestavy, hardware, kde budou jednotlivé komponenty, tiskárny, monitory, kamery, síťové prvky, příslušenství (klávesnice, myš) a software. PC sestavy Budou se evidovat jednotlivé pracovní stanoviště zaměstnanců. Mezi atributy bude inventární číslo, výrobce a popis sestavy, zodpovědný pracovník, umístění, datum poslední údržby a datum nákupu. 17

18 Hardware Mezi hardware se budou evidovat jednotlivé nepoužité a náhradní komponenty, ale také monitory, tiskárny, síťové prvky, kamery atd. Atributy bude inventární číslo, výrobce a popis hardware, zodpovědný pracovník, umístění, kde se právě nachází, datum nákupu a počet kusů daného hardware. Software Zde se budou evidovat veškeré programy, které jsou placené, a váže se na ně licence. Budou zde hlavně operační systémy, kancelářské systémy a vnitřní programy potřebné pro chod jednotlivých stanic. Atributy bude inventární číslo, název software, licenční kód/číslo, pc stanice, na kterém je software nainstalován, a k ní vázané umístění a zodpovědný pracovník, datum nákupu a platnost licence. Uživatelé Zde budou vedení uživatelé, kteří mají nějaký přístup do aplikace. Atributy bude ID, přihlašovací jméno, , typ účtu a heslo. Kanceláře Zde budou vedeny jednotlivé kanceláře, sklady, místnosti, objekty, v nichž se nachází nějaká část výpočetní techniky. Atributy bude interní číslo a popis/název. Zaměstnanci Zde se budou nacházet zaměstnanci firmy, kteří mají dočinění s nějakou částí výpočetní techniky. Atributy bude osobní firemní číslo, jméno, příjmení a místo, kde se nacházejí. Výrobci a Práva Poslední dvě tabulky jsou bez grafického ovládání a jejich změna je proveditelná přímo v databázi. Mezi výrobci jsou zařazeny nejpoužívanější a nejvyskytovanější ve firmě, atributy mají číslo a název, práva jsou prozatím dvě, označeny číslem 1 (správce) a 2 (uživatel). 18

19 5.2 Možnosti z pohledu uživatele Pohled běžného uživatele Tento typ účtu bude mít majitel firmy a případně pověřený pracovník firmy, např.: skladník. Jeho funkce jsou omezené. Vidí pouze tři hlavní sekce, tj. PC sestavy, Hardware a Software. V těchto tabulkách můžete vyhledávat, třídit a řadit. Hledat může dle inventárního čísla či názvu. Třídit může dle zodpovědného pracovníka či umístění. Řadit může dle inventárního čísla a dat. Také má možnost si vytisknout materiál obsahující seznam všech položek v dané sekci. V těchto sekcích nemůže položky přidávat, měnit, ani mazat. Nemá možnost jakkoliv manipulovat s tabulkou uživatelů, zaměstnanců a možnostmi umístění Pohled správce Správce po přihlášení má zpřístupněny veškeré funkce aplikace, které byly zmíněny výše. Může položky ve všech třech sekcích přidávat, upravovat, mazat položky. Současně má možnost registrace nových uživatelů, jejich změnu (změnit oprávnění) či mazání. Rovněž může přidávat/upravovat/mazat další položky umístění do příslušné tabulky (pokud je zprovozněna nová kancelář či k firmě přibyl další objekt). Také může přidávat, upravovat a mazat zaměstnance. 5.3 Popis E-R modelu Nyní si rozepíšeme jednotlivé tabulky včetně popisu jejich atributů. UZIVATELE id INT(2) jmeno VARCHAR(255) heslo VARCHAR(255) VARCHAR(255) prava INT(1) cizí klíč; id oprávnění ZAMESTNANCI id INT(3) osobní číslo zaměstnance jmeno VARCHAR(50) 19

20 prijmeni VARCHAR(50) kancelar INT(2) cizí klíč; id kanceláře KANCELARE id INT(2) popis VARCHAR(50) PC_SESTAVY id INT(5) inventární číslo znacka INT(2) cizí klíč; id výrobce komponenty VARCHAR(255) z jakých se skládá komponent datum_n VARCHAR(10) datum nákupu položky datum_u VARCHAR(10) datum poslední údržby kancelar INT(2) cizí klíč; id kanceláře zamestnanec INT(3) cizí klíč; id zaměstnance SOFTWARE id_sw INT(5) inventární číslo nazev VARCHAR(255) licence VARCHAR(255) licenční číslo/kód datum_n VARCHAR(10) datum nákupu položky datum_p VARCHAR(10) datum konce platnosti pc_sestava INT(2) cizí klíč; id pc stanice HARDWARE id INT(5) inventární číslo znacka INT(2) cizí klíč; id výrobce komponenta VARCHAR(255) datum_n VARCHAR(10) datum nákupu položky pocet INT(2) kancelar INT(2) cizí klíč; id kanceláře zamestnanec INT(3) cizí klíč; id zaměstnance 20

21 ZNACKY id INT(2) vyrobce VARCHAR(50) PRAVA id INT(1) popis VARCHAR(50) Integritní omezení daný uživatel může mít pouze jeden druh práv a zároveň daný druh práv může mít vícero uživatelů, ale také žádný daný zaměstnanec může mít pouze jeden účet v aplikaci za danou PC sestavu či hardware může zodpovídat pouze jeden zaměstnanec, daný zaměstnanec může mít na zodpovědnost vícero položek, ale také žádnou daný zaměstnanec má pouze jednu přiřazenou kancelář daný hardware či PC sestava má vždy určenou jednu danou lokaci daný software může být nainstalován na více počítačích (v případě multilicence) 21

22 Obrázek 3: E-R model aplikace 22

23 5.4 Databáze Na obrázku vidíme konkrétní databázi datového modelu. Obrázek 4: Pohled na databázi ve PhpMyAdmin 23

24 5.5 Model případů užití dle UML Obrázek 5: Diagram aktérů dle UML 24

25 6 Realizace V této části textu se zaměřím již na použité řešení, vždy uvedu kus kódu s vysvětlením, o co se stará. 6.1 Rozdělení menu Chtěl jsem se zbavit zdlouhavého vytváření nových PHP souborů s celým balastem okolo, který sčítá stejnou hlavičku a stejné funkce. Proto jsem se rozhodl pro hlavní index.php, na který je uživatel přesměrován po přihlášení. Po následném vybrání položky z menu se přes podmínku, atribut zobraz a kontrolu, zda hledaný soubor existuje, připojí k již načtenému index.php další část kódu, který náleží vybrané položce z menu. if (isset($_get["zobraz"]) && substr_count($_get["zobraz"], "/") < 1) $zobraz = $_GET["zobraz"]; else $zobraz = "uvod"; $soubor = "$zobraz.php"; if (file_exists($soubor)) include $soubor; else include "stranka_nenalezena.php"; } 6.2 Zabezpečení Po úspěšném přihlášení uživatele se jeho údaje (jméno, heslo a úroveň práv) uloží do session a tím je uživatel ověřován při každém načtení stránky. Ověření zajišťuje funkce check_user(), která vyhodnotí, zda je přihlášen stále platný uživatel po zkontrolování jeho údajů v databázi. Při neplatnosti je využita funkce unauth_header(), která uživateli vyhodí chybový kód 401 a ukončí spojení. function unauth_header() { } header("location:../index.php?code=401", 401); die(); function check_user() { 25

26 if ( isset($_session['jmeno']) && isset($_session['heslo']) && isset($_session['prava']) ) { $select = mysql_query("select `id` FROM `uzivatele` WHERE `jmeno`='{$_session['jmeno']}' AND `heslo`='{$_session['heslo']}'") or die (mysql_error()); $udaje = mysql_fetch_assoc($select); if (mysql_num_rows($select)!=1) { unauth_header(); } } else { unauth_header(); } } check_user(); Dále jsem u přihlašování využil obrázkové písmo Awesome, které je volně stažitelné na adrese Přihlašovací formulář s využitím tohoto písma vypadá takto: <form class="form-1" method="post"> <p class="field"> <input type="text" name="jmeno" placeholder="jméno"> <i class="fa fa-user fa-lg"></i> </p> <p class="field"> <input type="password" name="heslo" placeholder="heslo"> <i class="fa fa-lock fa-lg"></i> </p> <p class="clearfix"> <input type="submit" name="submit" value="přihlásit"> </p> </form> 26

27 Obrázek 6: Přihlášení uživatele do aplikace Co se týče uživatelů a jejich hesel, tak při registraci se hashují pomocí algoritmu MD5, což znamená, že po vložení nového uživatele nelze heslo zjistit v případě zapomenutí. Nelze vidět ani v databázi, nelze změnit, ani zpětně dešifrovat. V případě zapomenutí se musí daný uživatel smazat a vytvořit nový. V tabulce uživatelů pak správce ani heslo nevidí, vidí pouze křížky, nevidím důvod, aby byl vidět dlouhý nic neříkající hash kód. 6.3 Vlastní kód sekcí Vložení a úprava položek Data se vkládají do databáze pomocí formuláře. Cizí klíče jakožto umístění, zodpovědného pracovníka či výrobce jsou vybírány pomocí rolovací lišty, která načítá data vždy z příslušné tabulky. Vkládání aktivujeme tlačítkem v podsekci Funkce, úpravu pak ikonkou v tabulce dle vybrané položky. 27

28 Obrázek 7: Pohled uživatele Filtrování položek Filtrování je řešeno pomocí rolovací lišty, která má nastavený atribut onchange="this.form.submit();, který zaručí změnu výpisu tabulky při každém výběru. Nutno dodat, že filtrování je víceúrovňové, tudíž pokud vybereme např.: pc sestavy umístěné v kanceláři správce sítě, další filtrace zodpovědnou osobou filtruje již pouze sestavy umístěné v této místnosti. Pokud byste chtěli filtrovat zde všech sestav, je potřeba nastavit výchozí bod Nezáleží Vyhledávání položek Vyhledávání naopak není víceúrovňové, je tvořeno jedním formulářem, po potvrzení formuláře se odešle SQL dotaz, zobrazí se výsledek a zadaná (hledaná) kritéria se vynulují a opět se hledá z celé tabulky. Co se týče vyhledávání dle identifikačního čísla (ID), stačí zadat pouze číslo z onoho inventárního čísla, tzn. při hledání PC sestavy 13- PC-5 zadáme do pole pouze číslo 5 a potvrdíme formulář. Nezadáváme celé inventární číslo, ale pouze část (numero). Celé toto vyhledávání a filtrování položek je pak řešeno přes proměnné, které jsou vložené do daného SQL dotazu, pak se zobrazí požadovaný výsledek. 28

29 if(!empty($_get['sort'])){ $sort="order by `$_GET[sort]` $_GET[order]"; } else { $sort="order by `id` ASC";} if(!empty($_get['kancelar'])){ $filtr_kancelare="and `kancelare`.`id` = '$_GET[kancelar]'"; } else { $filtr_kancelare="";} if(!empty($_get['zamestnanec'])){ $filtr_zamestnanci="and `zamestnanci`.`id` = '$_GET[zamestnanec]'"; } else { $filtr_zamestnanci="";} if(!empty($_get['znacka'])){ $filtr_vyrobci="and `znacky`.`id` = '$_GET[znacka]'"; } else { $filtr_vyrobci="";} if(!empty($_get['datum_n'])){ $filtr_nakup="and `pc_sestavy`.`datum_n` = '$_GET[datum_n]'"; } else { $filtr_nakup="";} if(!empty($_get['datum_u'])){ $filtr_udrzba="and `pc_sestavy`.`datum_u` = '$_GET[datum_u]'"; } else { $filtr_udrzba="";} if(!empty($_get['id'])){ $filtr_id="and `pc_sestavy`.`id` LIKE '%$_GET[id]%'"; 29

30 } else { $filtr_id="";} if(!empty($_get['komponenty'])){ $filtr_sestavy="and `pc_sestavy`.`komponenty` LIKE '%$_GET[komponenty]%'"; } else { $filtr_sestavy="";} Řazení položek Řazení je řešeno jako odkaz pomocí parametrů sort a order kliknutím na příslušné tlačítko. Sestupně šipka dolů, vzestupně šipka nahoru. Obrázek 8: Pohled správce Kontrola a integrita dat Pro správnou funkci aplikace je zavedeno několik kontrol při zadávání dat. U všech formulářů je přítomna kontrola zadání všech polí (vyjma v sekci Software, pole Datum konce platnosti zde kontrola není aplikována z důvodu využití nezadání pole). U kanceláří a zaměstnanců je zavedena kontrola duplicity identifikačního čísla. V sekci uživatelů je to kontrola duplicity jména, kontrola použití zadaných znaků u jména a hesla, kontrola opakovaného zadání hesla a správný zadání u ve standardním formátu. 30

31 Ukázka kódu na kontrolu regularních výrazů: if (!preg_match("#^[_a-z0-9\.\-]*$#", $_POST['jmeno'])!preg_match("#^[_a-z0-9\.\- ]*$#", $_POST['heslo'])) { $message = "Neplatné znaky v některém z polí jména nebo hesla!"; } else if (!preg_match("#^[_a-za-z0-9\.\-]+@[_a-za-z0-9\.\-]+\.[a-za-z]{2,4}$#", $_POST[' '])) { $message = "Zadejte platný !"; Popisy PC sestav, hardwar a licence software je ošetřena proti html special chars (zobrazí se i speciální znaky jako < > atd.). Byla zavedena i kontrola mazání v kaskádě, při smazání dané kanceláře by při neošetření zmizelo vše, co je na danou místnost vázáno, tedy zaměstnanci, sestavy, hardware. Z toho důvodu zavedena kontrola, která znemožňuje smazat danou věc či osobu, dokud na ni tíhne břemeno. Př.: Máme zaměstnance, který je zodpovědný za 2 sestavy a pár kusů hardware. Tento zaměstnanec nepůjde smazat, dokud nezměním zodpovědného zaměstnance za dané sestavy a hardware, či je nesmažu z databáze. Pro správné zadávání dat ze strany uživatele jsou u většiny polí (hlavně sporných situací) vytvořené nápovědy, které se objeví při najetí ukazatele na dané pole jquery Datepicker JQuery Datepicker je klikací kalendář napsaný jazykem javascript. Tento kalendář jsem využil z důvodu správného zadání data a omezení chyb při zadání dat uživatelem ve správném formátu. Tento kalendář je volně ke stažení na adrese 31

32 Obrázek 9: Klikací kalendář jquery Datepicker Abych docílil požadovaných vlastností kalendáře a zároveň počeštění, musel jsem ve funkci Datepicker() pozměnit tyto parametry: this.regional[""] = { // closetext: "Zavřít", // Text pro zavření kalendáře prevtext: "Předchozí", // Šipka vlevo = PŘEDCHOZÍ nexttext: "Další", // Šipka vpravo = DALŠÍ currenttext: "Dnes", // Aktuální datum = DNES monthnames: ["Leden","Únor","Březen","Duben","Květen","Červen", "Červenec","Srpen","Září","Říjen","Listopad","Prosinec"], monthnamesshort: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"], // názvy měsíců daynames: ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"], //názvy dnů daynamesshort: ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"], daynamesmin: ["Ne","Po","Út","St","Čt","Pá","So"], dateformat: "yy-mm-dd", // Formát ve tvaru rok-měsíc-den firstday: 1, // Kalendář začne dnem PONDĚLÍ }; Pro nastavení, aby kalendář fungoval při stisknutí tlačítka jsem musel nastavit tyto parametry: this._defaults = { showon: "button", // Nastavení spuštění na tlačítko buttonimage: "css/smoothness/images/calendar5.png", // Obrázek tlačítka yearrange: "c-20:c+20", // Rozpětí výběru roků }; Pro zavedení kalendáře se nakonec musí do hlavičky stránky uvést následující skript. 32

33 Rovněž se v tomto skriptu řeší zemezí výběru víkendů a maximální či minimální datum výběru. <script> $(function() { $( "#datepicker" ).datepicker({ beforeshowday: $.datepicker.noweekends, maxdate: '0' </script> Export do PDF Zajímavou funkcí je export dat přímo z jazyka PHP. K tomu, abych toho mohl dosáhnout, jsem musel použít volně dostupnou knihovnu MDPF. Ta se dá zdarma stáhnout ze stránek Soubor obsahuje jak samotnou knihovnu, ale také ilustrativní příklady a základní sadu fontů. Její hlavní výhodou a také důvodem, proč jsem zvolil právě tuto knihovnu, je, že podporuje české znaky, proto jsem nemusel nijak složitě získávat font pro tuto knihovnu. K samotnému exportu se pak využije jednoduchý kód. require("mpdf/mpdf.php"); $mpdf = new mpdf('utf-8','a4'); $mpdf->useonlycorefonts = true; $mpdf->setdisplaymode('fullpage'); $mpdf->setautofont(0); // CSS soubor $stylesheet = file_get_contents('faktura.css'); // faktura v HTML (PHP, atd.) $html = file_get_contents('faktura.html'); $mpdf->writehtml($stylesheet,1); $mpdf->writehtml($html,2); $name = "danovy-doklad.pdf"; $mpdf->output($name,"d"); // download Můj kód je o něco rozšířený, jelikož jsem exportoval celou tabulku, kterou jsem musel nadefinovat včetně stylů, jak má tabulka vypadat. Po stlačení tlačítka na export se automaticky stáhne vygenerovaný seznam a uživatel může pokračovat v užívání aplikace. <?php $html = ' 33

34 <html><head> <style> // nadefinování tabulky </style> </head> <body> // nadefinovat, co chceme exportovat </table> </body> </html> '; //=================================================== //=================================================== //=================================================== include('mpdf/mpdf.php'); $mpdf=new mpdf('utf-8','a4','','',10,10,10,10,6,3); $mpdf->setdisplaymode('fullpage'); $mpdf->writehtml($html); $mpdf->output('nazev.pdf','d'); exit; //=================================================== //=================================================== //===================================================?> 34

35 Obrázek 10: Ukázka exportu do PDF 35

36 7 Testování Poslední kontrolní fází při vytváření aplikace je část testování. 7.1 Postup testování a výsledky Při vytváření webové aplikace byla každá funkcionalita otestována zvlášť na serveru. Po následném seskupení pak byly všechny části a funkce aplikace znovu otestovány. Regulární výrazy a vkládání správných údajů byla vyzkoušeno na jednotlivých případech. Po úspěšném testu byly dále sloučeny do jednotlivých sekcí a testování na formulářích pro vkládání, úpravu a mazání položek včetně vyhledávání, třídění, řazení a převodu do PDF. Po vytvoření celé webové aplikace bylo rovněž vyzkoušeno, zda se stránky správně zobrazují v nejvíce využívaných prohlížečích jako je Google Chrome, Interner Explorer a Mozilla Firefox. Test prokázal, že se sice vytvořené stránky zobrazují v různých prohlížečích lehce odlišně v designu, což ale nemá razantní vliv na funkci aplikace. Velikost zobrazovací plochy byla zvolena v rozlišení 1360px na šířku a výška je automaticky upravována dle obsahu stránky. Zvolená šířka je na dnešní dobu typická vzhledem k širokoúhlým monitorům. 7.2 Odstranění chyb Při testování funkčnosti stránek bylo odhaleno několik chyb, které byly postupně opraveny. Jednalo se o následující chyby: Při vkládání popisu PC sestavy či hardware jsem narazil na chybu u vkládání speciálních znaků jako & či závorky, které se při vložení do databáze nezobrazovaly korektně. Z toho důvodu jsem použil ošetření proti htmlspecialchars. Při mazání jednotlivých položek nastal problém u mazání v kaskádě, kdy se objevil problém, pokud měl dotyčný pracovník k zodpovědnosti danou PC sestavu a smazal se daný pracovník, nezobrazovala se ani daná sestava. Chyba byla vyřešena kontrolou návazných prvků a to tak, že pokud chceme smazat daného pracovníka, tato možnost se nám odblokuje, až když nebude na něm váznout žádné zodpovědnosti jako PC sestavy či hardware. 36

37 Nastal problém při vkládání dat, které bylo prvně řešené definovaným prvkem v PHP a to prvkem DATE, u kterého šlo i v poli zadávat ručně datum a mohlo tak dojít k chybě z pohledu uživatele. Toto bylo vyřešeno implementací klikacího kalendáře napsaného jazykem Javascript, rovněž byla ošetřena nemožnost zadat datum údržby nižší než datum nákupu, zadání data je možné pouze výběrem z kalendáře, nikoliv zapsáním do pole a nemožnost nastavit např. u data nákupu datum vyšší, než aktuální. 37

38 8 Závěr Cílem mé bakalářské práce bylo vytvořit webovou aplikaci s databázovým systémem pro evidenci výpočetní techniky s možností vyhledávání a exportu seznamů ve formátu PDF. Aplikace má sloužit především pro majitele a správce sítě ke zpřehlednění výpočetní techniky ve firmě PAPOS Trade s.r.o. a korektnímu provedení inventur tohoto hmotného majetku. Webové stránky byly uživatelsky rozděleny do dvou částí. Každá část má přidělena určitá práva a k těmto právům se váží určité funkce. První část je pro pracovníky skladu, kdy mohou nahlédnout do seznamů výpočetní techniky a vyhledat, co potřebují. Cílem druhé části je kompletní administrace pro majitele a správce sítě, kde je jich umožněno manipulovat s jednotlivými sekcemi. Všechny zadané požadavky na vytvoření aplikace se podařilo splnit. 8.1 Problémy a jejich řešení Při vytváření webových stránek se vyskytly problémy, které byly lehce i hůře odstranitelné. Jeden ze závažnějších důvodů, který se ale nepovedlo odstranit, bylo zobrazování designu stránky v různých prohlížečích. Internet Explorer nepodporuje všechny kaskádové styly, avšak v použitých stylech dochází opravdu k drobným odchylkám. Aplikace byla vyvíjena a testována hlavně pro Google Chrome, který je ve firmě hojně využíván a zde se aplikace zobrazuje zcela korektně. Méně závažným problémem bylo chybně zobrazování při mazání položek, které na sebe navazovaly určitým vztahem, to však bylo záhy testováním vyřešeno. Mezi nezávažné problémy, které se také vyskytly, avšak byly ihned po zjištění odstraněny, patřilo například chybné zobrazení tabulek, vkládání duplicit položek, rozházený převod do formátu PDF a jiné. 8.2 Budoucnost Aplikace je možné rozšířit o převod do formátu.xls, pokud by byl zájem také o seznamy v tabulkové prezentaci. V dalším vývoji by se mohlo zaměřit na export konkrétních dat s ohledem na zadaná kritéria či kritéria hledání. Rovněž by se mohla 38

39 připojit funkce pro přímý tisk dat. Dále by se mohla přidat ještě jedna úroveň práv, kde by mohli uživatelé položky přidávat či editovat, což by mohl využít skladník či majitel, ale prozatím je vše, co se týče výpočetní techniky, na bedrech správce. Na škodu by ani nebylo upozornění na firemní mail v případě data poslední údržby PC stanice delšího než 6 měsíců, v některých případech i kratší interval, jelikož pár stanic se nachází přímo ve výrobě, a jak je známo, prach je jeden z největších nepřátel techniky. Aplikaci jsem vyzkoušel se zadáním reálných dat náležící firmě, ve které pracuji. Vymyšlené byly pouze licence softwaru, který jsem z bezpečnostních důvodů nikde nepublikoval. Chod aplikace proběhl bez problému, po zadání dat proběhla kontrola pár místností, zda data opravdu odpovídají realitě. Na zadání dat se mnou spolupracoval skladník firmy. Aplikaci si rovněž vyzkoušel majitel firmy, kterému byl zřízen uživatelský účet. Celá webová aplikace pro firmu PAPOS Trade s.r.o. byla vytvořena v souladu s požadavky vedení s ohledem na jejich funkčnost a design. Z výše uvedeného vysvětlení tak soudím, že byl praktický přínos práce splněn. 39

40 Seznam použité literatury [1] BELL, Dave. PHP. In: Wikipedia: The Free Encyclopedia [online] vyd [cit ]. Dostupné z: [2] SQL. In: Wikipedia: The Free Encyclopedia [online] vyd [cit ]. Dostupné z: [3] Cascading Style Sheets. In: Wikipedia: The Free Encyclopedia [online] vyd [cit ]. Dostupné z: [4] O firmě. PAPOS [online] [cit ]. Dostupné z: [5] Správce IT - audit SW a HW. Micos Software [online] [cit ]. Dostupné z: [6] JavaScript. JavaScript Wikipedie [online] [cit ]. Dostupné z: [7] Regulární výrazy. Regulární výrazy - Regexp tutoriály, testery PHP, Perl, Javascript,.NET [online] [cit ]. Dostupné z: [8] Notepad++. [online] [cit ]. Dostupné z: [9] PhpMyAdmin. Artic Studio Webdesign - tvorba internetových stránek [online] [cit ]. Dostupné z: pojmu/databazemysql/ GUTMANS, Andi. Mistrovství v PHP 5. Vyd. 2. Brno: Computer Press, 2007, 655 s. ISBN DELLWING, Ingo. HTML 4: příručka tvůrce webu. 1. vyd. Praha: Grada, 2002, 272 s. ISBN BUREŠ, Zbyněk. Databázové systémy 1: Studijní opora. Jihlava, BUREŠ, Zbyněk. Databázové systémy 2: Studijní opora. Jihlava,

41 GILMORE, W. Velká kniha PHP 5 a MySQL: kompendium znalostí pro začátečníky i profesionály. Nové, 3. vyd. Překlad Jan Pokorný. Brno: Zoner Press, 2011, 736 s. Encyklopedie Zoner Press. ISBN LEISS, Oliver a Jasmin SCHMIDT. PHP v praxi: pro začátečníky a mírně pokročilé. 1. vyd. Praha: Grada, 2010, 242 s. Průvodce (Grada). ISBN

42 Seznam obrázků Obrázek 1: Papírenský stroj Obrázek 2: Expediční hala Obrázek 3: E-R model aplikace Obrázek 4: Pohled na databázi ve PhpMyAdmin Obrázek 5: Diagram aktérů dle UML Obrázek 6: Přihlášení uživatele do aplikace Obrázek 7: Pohled uživatele Obrázek 8: Pohled správce Obrázek 9: Klikací kalendář jquery Datepicker Obrázek 10: Ukázka exportu do PDF

43 Seznam použitých zkratek SQL Structured Query Language (zkratka pro tento strukturovaný dotazovací jazyk) CSS Cascading Style Sheets (zkratka pro kaskádové styly) UML Unified Modeling Language (zkratka pro tento grafický jazyk pro vizualizaci) HW Hardware (technické vybavení počítače) SW Software (programové vybavení počítače) IT Information Technology (zkratka pro informační technologie) PC Personal Computer (zkratka pro osobní počítač) HTML Hypertext Markup Language (zkratka pro tento značkovací jazyk) PDF Portable Document Format (přenosný formát dokumentů) PHP Hypertext Preprocessor (zkratka pro tento skriptovací programovací jazyk) 43

44 Přílohy 1 Obsah přiloženého CD Na přiloženém CD se v kořenovém adresáři nachází tyto soubory a složky: složka naserver soubor databaze.sql naserver Obsah této složky byl stažen ze serveru, na kterém byla aplikace vyvíjena a aplikována. Stačí ji nahrát na server podporující PHP a obsahující MySQL. databaze.sql Tímto skriptem vytvoříte databázi pro webovou aplikaci. Pro usnadnění jsou zde připravena data ke vložení do tabulek Znacky a Prava, ke kterým není vytvořeno grafické rozhraní, a musely by se vložit manuálně. Rovněž jsou připraveny testovací uživatelé admin (heslo: admin) a user (heslo: user). 44