VYSOKÉ
UČENÍ
TECHNICKÉ
V BRNĚ
BRNO UNIVERSITY OF TECHNOLOGY
FAKULTA STROJNÍHO INŽENÝRSTVÍ ÚSTAV AUTOMATIZACE A INFORMATIKY FACULTY OF MECHANICAL ENGINEERING INSTITUTE OF AUTOMATION AND COMPUTER SCIENCE
WWW APLIKACE PRO SPRÁVU DAT POPISUJÍCÍCH PLÁNKY BUDOV FSI WWW FACULTY MAP DATA MANAGMENT SYSTEM
BAKALÁŘSKÁ PRÁCE BACHELOR'S THESIS
AUTOR PRÁCE
Petr Morávek
AUTHOR
VEDOUCÍ PRÁCE SUPERVISOR
BRNO 2007
Ing. Jan Roupec Ph.D
ZADÁNÍ ZÁVĚREČNÉ PRÁCE
ZADÁNÍ ZÁVĚREČNÉ PRÁCE
Strana 3
LICENČNÍ SMLOUVA
LICENČNÍ SMLOUVA
Strana 5
ABSTRAKT
Strana 7
ABSTRAKT Následující bakalářská práce je zaměřena na zobrazení a editaci plánků areálu Fakulty strojního inženýrství. Samotné plánky již fungují na fakultních webových stránkách, protože neexistuje rozhrání pro pohodlnou a jednoduchou editaci (např. po různých stavebních úpravách v budovách fakulty). Zmiňovaný editor je předmětem této práce.
ABSTRACT This bachelor piece is focused on plan viewing and editing for the faculty of machine engineering. The plans already worked on web pages of the faculty, but it doesn't exist comfortable and easy editing interface (e.g. changes after various construction works in the faculty buildings). Adverted editor is the subject of this research.
KLÍČOVÁ SLOVA Webová aplikace, informační systém, PHP, SQL, plánky budov FSI, editor místnosti, editor dveří.
KEYWORDS Web application, information system, PHP, SQL, plans of FSI buildings, room editor, door editor.
PODĚKOVÁNÍ
Strana 9
PODĚKOVÁNÍ Chtěl bych poděkovat vedoucímu bakalářské práce Ing. Janu Roupcovi Ph.D. za konzultace vstřícnou pomoc a věcné připomínky k vylepšení bakalářské práce. Dále bych chtěl poděkovat Bc. Romanu Kabelkovi za vysvětlení použití některých PHP funkcí, které byly použity v bakalářské práci a rodičům za podporu při studiu.
OBSAH
Strana 11
OBSAH ZADÁNÍ ZÁVĚREČNÉ PRÁCE ........................................................................................ 3 LICENČNÍ SMLOUVA ....................................................................................................... 5 ABSTRAKT .......................................................................................................................... 7 PODĚKOVÁNÍ ..................................................................................................................... 9 1 ÚVOD .......................................................................................................................... 13 1.1 INFORMAČNÍ SYSTÉMY ................................................................................. 14 1.2 CÍL PRÁCE ......................................................................................................... 14 2 TECHNOLOGIE PRO WWW APLIKACE ............................................................ 15 2.1 APACHE ............................................................................................................... 15 2.2 HTML ................................................................................................................... 15 2.3 KASKÁDOVÉ STYLY CSS .............................................................................. 15 2.4 PHP ....................................................................................................................... 16 2.5 JAVASCRIPT ....................................................................................................... 16 2.6 DATABÁZOVÉ SYSTÉMY ............................................................................... 16 2.6.1 MYSQL ......................................................................................................... 16 2.6.2 ORACLE ....................................................................................................... 17 2.6.3 MICROSOFT ACCESS ............................................................................... 17 2.7 PŘÍSTUPNOST WEBOVÝCH STRÁNEK ....................................................... 17 3 MAPA AREÁLU FSI ................................................................................................ 19 3.1 DATOVÝ MODEL.............................................................................................. 19 3.1.1 MAPA BUDOV FSI .................................................................................... 21 3.1.2 VÝBĚR PATER VE ZVOLENÉ BUDOVĚ .............................................. 21 3.1.3 PLÁNEK ZVOLENÉHO PATRA .............................................................. 22 4 EDITOR AREÁLU FSI ............................................................................................. 23 4.1 VYHLEDÁNÍ A VÝBĚR EDITOVANÉ MÍSTNOSTI .................................. 23 4.2 EDITOR MÍSTNOSTI ......................................................................................... 23 4.2.1 VYTVOŘENÍ NOVÉ MÍSTNOSTI ............................................................ 24 4.2.2 EDITACE MÍSTNOSTI ................................................................................ 24 4.2.3 FORMULÁŘ PRO EDITACI A VYTVOŘENÍ MÍSTNOSTI ................ 24 4.3 EDITOR DVEŘÍ .................................................................................................. 25 4.3.1 VYTVOŘENÍ NOVÝCH DVEŘÍ ............................................................... 25 4.3.2 EDITACE DVEŘÍ ........................................................................................ 26 4.3.3 FORMULÁŘ PRO EDITACI A VYTVOŘENÍ DVEŘÍ .......................... 26 4.4 SMAZÁNÍ MÍSTNOSTI NEBO DVEŘÍ .......................................................... 27 4.5 MOŽNOSTI ZPĚTNÉHO KROKU PŘI NEKOREKTNÍ EDITACI .................. 27 4.6 PŘEVOD APLIKACE MEZI RŮZNÝMI DATABÁZEMI ............................ 28 5 ZÁVĚR ........................................................................................................................ 29 6 POUŽITÁ LITERATURA ......................................................................................... 31 7 PŘÍLOHY .................................................................................................................... 33 7.1 PRAKTICKÝ PŘÍKLAD EDITACE ................................................................. 33 7.1.1 ODSTRANĚNÍ MÍSTNOSTI....................................................................... 34 7.1.2 EDITACE MÍSTNOSTI ............................................................................... 35 7.1.3 EDITACE DVEŘÍ ........................................................................................ 35 7.1.4 VYHODNOCENÍ EDITACE ....................................................................... 36
ÚVOD
Strana 13
1 ÚVOD Během posledních 15 let zasáhl vývoj počítačů lidstvo natolik, že dnes si bez nich většina lidí už neumí představit život. Urychlují práci ve většině odvětví lidské činnosti. Historicky se nejdříve začaly počítače využívat v tzv. dávkovém režimu. Uživatelé, kterými byli hlavně programátoři, zadávali své požadavky obsluze na děrných štítcích. Se zrychlováním počítačů vzniklo zařízení zvané terminál, který umožňoval textový vstup z klávesnice a výstup na papír nebo obrazovku. Protože výroba počítačů byla velmi drahá, začal se používat víceuživatelský režim, kde k jednomu počítači bylo připojeno několik terminálů. Mluvilo se o architektuře střediskového počítače s terminálovou sítí. Po vynálezu mikroprocesoru v roce 1971 se začaly vyrábět osobní mikropočítače. Výroba těchto mikropočítačů byla mnohem levnější, takže každý uživatel mohl mít trvale k dispozici svůj mikropočítač. U osobních počítačů nebylo možné používat sdílení dat ani periferií, protože každý počítač pracoval samostatně. Snaha o zachování výhodných vlastností střediskových počítačů s terminálovou sítí i u osobních mikropočítačů logicky vyústilo ve vývoj počítačových sítí. Propojily se všechny technické prostředky sítě, kterými byly střediskové počítače, mikropočítače a periferní zařízení. V síti se uživatel identifikoval svým jménem a heslem. V průběhu studené války bylo nutno zajistit komunikaci mezi vládními a armádními úřady během a po případné atomové válce. Bylo nutno vytvořit komunikační síť, která nemá žádné centrum tak, aby fungovala i po vyřazení některé její části. Byl zahájen vývoj protokolu TCP/IP a sítě Internet, který sahá do šedesátých let 20. století, kdy pro všechny datové i hlasové přenosy se používalo výhradně propojování okruhů. Vzniká služba www (World Wide Web), kterou vymysleli badatelé v oblasti vysokoenergetických fyzikálních polí, kteří potřebovali pohodlným rychlým způsobem předávat informace o své badatelské činnosti i na různá geograficky položená místa na světě. Tim Berners-Lee použil hypertextový systém a k přenosu dat navrhl protokol http (Hyper Text Transfer Protocol.) Stejným autorem byl navržen jazyk HTML. Na začátku roku 1992 byla služba poprvé veřejně spuštěna. O rok později už existovalo 60 www serverů. Ve stejném roce vznikl první webový grafický prohlížeč nazvaný Mosaic. S rychlým rozšířením sítě internet bylo nutno vytvořit jednotnou adresu pro všechny služby. Tato adresa se jmenuje URL (Uniform Resource Locator) a její tvar je: typ://uživatel:heslo@počítač:port/cesta;parametry?dotaz • TYP - název služby např. http, ftp atd., • UŽIVATEL a HESLO - přihlašovací údaje uživatele, • POČÍTAČ - identifikace počítače (jméno počítače nebo IP adresa), • PORT - číslo komunikačního portu TCP/IP, • CESTA - označení požadovaného souboru včetně cesty k němu, • PARAMETRY a DOTAZ - blíže specifikují požadavky na server a jejich význam se v různých aplikacích liší. Služba WWW je typu klient/server. Klientem je www prohlížeč a jím požadovanou adresu server zpracuje a pošle uživateli požadovaná data. Protože IP adresy se uživateli hůře pamatují, byla vyvinuta služba DNS (Domain Name System), která umožňuje používat textová jména počítačů, které se lidem lépe pamatují. Textová jména počítačů mohou mít při vhodné volbě intuitivně vypovídající
Strana 14
ÚVOD
hodnotu. Jmenný prostor služby DNS se skládá z kořenové domény, která je nepojmenovaná, za ní následují domény nejvyšší úrovně. Jejich členění je geografické (podle státu, výjimkou jsou Spojené státy) nebo organizační podle typu instituce (vzdělávací, vládní, vojenská atd., používá se zejména v USA.) Pod touto nejvyšší doménou není úroveň dalšího větvení omezena. Všechna jména v rámci každé domény musí být unikátní.[1]
1.1 INFORMAČNÍ SYSTÉMY Obecně v teorii systémů je informační systém manuální nebo automatizovaný systém, který zahrnuje lidi, stroje a postupy ustanovené pro sběr, zpracování, přenos a distribuci uživatelských dat. Jako příklad lze uvést on-line katalog produktů, které určitá firma vyrábí. U školních institucí je to například informace o tom, v jaké kanceláři najdeme hledané osoby. Pokud se osoba přestěhuje, měla by mít možnost na základě autorizace (svým uživatelským jménem a heslem) v informačním systému dané školy tuto informaci změnit. Informační systémy jsou velmi užitečným a silným nástrojem, pomocí kterého můžeme zjistit potřebné informace, a po přihlášení jsme schopni také provézt potřebné změny. Pokud je informační systém dobře navržen, může organizaci, která aplikaci provozuje, ušetřit nezanedbatelné množství práce. V dnešní době některé informační systémy nahrazují i papírovou formu dokumentů - jako například elektronická přihláška ke studiu na vysoké škole nebo zápis do studia elektronickou formou, elektronické indexy v informačních systémech vysokých škol apod. Po přihlášení do systému si student může zkontrolovat své známky nebo se přihlásit k studiu předmětu, o který má zájem. Všechny uvedené příklady mají velkou výhodu, protože si uživatel z pohodlí svého domova může vše potřebné zařídit.[5]
1.2 CÍL PRÁCE Na www stránkách FSI se zobrazují interaktivní plánky areálu fakulty. Jejich hlavním účelem je usnadnit orientaci návštěvníkům fakulty a snadnější lokalizace sídla hledané osoby. Samotné plánky fakulty již byly vytvořeny v roce 2006 v rámci diplomové práce [4]. Zmíněná práce neobsahuje uživatelsky přívětivý modul k editaci dat, na jejichž základě jsou plánky zobrazovány. Úkolem mého projektu je vytvořit editor k plánkům tak, aby práce s editorem byla uživatelsky jednoduchá, pohodlná a snadno pochopitelná. Aplikace má být vytvořena v jazyce PHP s pomocí dotazovacího jazyka SQL. Po vyhotovení editoru bude aplikace zařazena do fakultního informačního systému Herodis. Aby implementace byla co nejjednodušší, je třeba dodržovat strukturu a technologii fakultních webových stránek. Pro přehlednost samotného kódu bylo rozhodnuto obsluhovat HTML kód pomocí PHP funkcí.
TECHNOLOGIE PRO WWW APLIKACE
Strana 15
2 TECHNOLOGIE PRO WWW APLIKACE V následující části budou popsány programy, značkovací a programovací jazyky, databázové systémy a technologie, které byly při vývoji aplikace využity.
2.1 APACHE Apache je aplikační služba, pomocí které vytvoříme webový server z počítače připojeného k sítí internet. Registrací domény a přiřazením k IP adrese dosáhneme plnohodnotného webového serveru. Mají-li být na serveru provozovány dynamické www stránky, je obvykle třeba nainstalovat i modul příslušného skriptovacího jazyka. V návaznosti na skriptování na straně serveru bývá často využita vhodná databáze, např. MySQL, Firebird, Oracle atd..[5]
2.2 HTML Značkovací jazyk HTML se používá pro popis webových stránek. Vznikl jako podmnožina dříve vyvinutého univerzálního značkovacího jazyka SGML. HTML je standardizován od roku 2000 jako ISO norma 15445. Tvůrci nepředpokládali, že by se stránky vyvíjely přímo v HTML jazyku, nýbrž že bude existovat generátor webových stránek založený na WYSIWYG principech. V dnešní době existuje mnoho editorů webových stránek, ale jejich výstup není příliš kvalitní. Proto většina programátorů raději vyvíjí stránky přímo jejich zápisem v jazyce HTML. Vývoj jazyka má na starosti konsorcium W3C, protože však většina rozšíření jazyka HTML byla zaváděna živelně autory webových prohlížečů, nebyla jeho úloha v procesu sjednocování jednoduchá. Jazyk HTML se skládá z elementů a jejich značek (tagů), které jsou párové a nepárové, při čemž těch párových je většina a označují se začáteční značkou v úhlových závorkách <xxx> a koncovou . HTML stránka se skládá z hlavičky (sekce ) a obsahu stránky (). Prvním elementem v dokumentu je a je ukončen . Jde o jazyk nezávislý na platformě a aplikaci.[5]
2.3 KASKÁDOVÉ STYLY CSS CSS styly neboli tabulky kaskádových stylů jsou používány jako prostředek pro pohodlnější zápis atributů určujících vzhled stránek v jazyce HTML. Původně mělo být formátování vzhledu stránek implementováno přímo v HTML, ale vlivem konkurenčních bojů výrobců webových prohlížečů vznikl samostatný standard. Jazyk CSS byl navržen konsorciem W3C. Aktuální verzí v době psaní tohoto textu je CSS3. Hlavní myšlenkou CSS stylů byla možnost oddělit vzhled stránky od obsahu. V externím souboru či přímo ve stránce je sekvencí stylů a jejich pravidel vytvořen vzhled webové stránky. Při externí aplikaci připojujeme vše pomocí meta znaků do souborů s HTML kódem. Vytvoříme-li nový vzhled, po výměně souboru stylu dojde ke změně vzhledu všech stránek.[5]
Strana 16
TECHNOLOGIE PRO WWW APLIKACE
2.4 PHP PHP je skriptovací programovací jazyk pracující na serveru. Pokud v souboru je část kódu PHP, tento kód server zpracuje a vygeneruje HTML nebo jiný výstup. O vývoj PHP se zasloužil Rasmus Lerdof, který jej vytvořil v roce 1994. Jazyk se velmi rychle stal oblíbeným. Byl zdokonalován dalšími talentovanými lidmi. Prošel čtyřmi etapami vývoje. Nejaktuálnější verzí v době psaní tohoto textu je PHP 5. Dnes jazyk PHP běží na většině webových serverů nabízejících hostování. Stal se velmi oblíbeným programovacím jazykem hlavně díky jednoduchosti a možnosti kombinace s dalšími technologiemi. Mnoho tvůrců dynamických stránek si již výrobu webové stránky bez PHP neumí představit. Na základě PHP funguje mnoho webových aplikací jako například informační systémy, redakční systémy nebo E-Shopy. PHP se vpisuje přímo do HTML kódu stránky a uzavírá se v základním nastavení do značek . Mezi těmito značkami jsou vlastní PHP instrukce.[2]
2.5
JAVASCRIPT
JavaScript je multiplatformní skriptovací jazyk, který na rozdíl od PHP pracuje na straně klienta. Vytvořil ho Brendan Eich z tehdejší společnosti Netscape. Vpisuje se do určených atributů elementů v HTML kódu nebo do vyhrazeného elementu script. Interpret jazyka JavaScript je součástí webového prohlížeče. Pomocí příkazů JavaScriptu lze definovat chování aplikace při různých akcích uživatele. Další výhodou javascriptu je možnost formálně zkontrolovat vstup uživatele pomocí regulárních výrazů a daných podmínek ještě před odesláním formuláře. Dochází k snížení zátěže serveru. Je-li potřeba nějakou důležitou změnu potvrdit ještě před odesláním PHP skriptu, řešíme to také pomocí javascriptu. Není vždy z nejrůznějších důvodů možno na straně klienta Javascript použít, proto programátor nesmí spoléhat jen na jeho funkcionalitu v rámci aplikace.[5]
2.6
DATABÁZOVÉ SYSTÉMY
Databázové systémy se používají pro ukládání dat. Ulehčují a zrychlují práci s daty. Většinou databáze používají ke komunikaci dotazovací jazyk SQL podle normy SQL92. Jedná se o celosvětově používaný standard pro tyto systémy používaný od roku 1996. Mezi nejrozšířenější databázové systémy patří MySQL, Oracle a Microsoft Access. Výhodou je, že s databází může pracovat více uživatelů současně se zajištěním konzistence dat.
2.6.1 MYSQL MySQL patří v kombinaci s PHP mezi nejrozšířenější databázové systémy. Jde v nejnovějších verzích o velmi rychlý a výkonný relační databázový systém. MySQL vytvořila švédská firma MYSQL AB. Hlavními autory jsou Michael „Monty“ Widenius a
TECHNOLOGIE PRO WWW APLIKACE
Strana 17
David Axmark. Aktuální verzí v době psaní tohoto textu je MySQL 4.0. [2] Nabízí se ve dvou licencích: - bezplatná licence - komerční licence
2.6.2 ORACLE Oracle patří mezi systémy pro multiplatformní databázové aplikace, který má velmi pokročilé zpracování dat, s vysokým výkonem a snadnou škálovatelností. Oracle vyrábí firma Oracle Comporation. Mezi aktuální verzi v době psaní tohoto textu patří Oracle Database 10g. Oracle nabízí nad rámec standardního SQL firemní rozšíření, programovací jazyk PL/SQL, rozšíření funkcí SQL, objektové databáze a databáze uložené v XML databázích pomocí jazyka XSQL.[5]
2.6.3 MICROSOFT ACCESS Microsoft Access je nástroj na správu relačních databází od společnosti Microsoft. Plným názvem Microsoft Office Access, který se dodává v balíku Microsoft Office. Aktuální verzí v době psaní tohoto textu je balík Microsoft Office 2007 s Microsoft Office Access 2007. Microsoft Access kombinuje Microsoft Jet Database Engine s uživatelsky příjemným grafickým rozhraním. Připojí se k datům z Access/Jet, Microsoft SQL Server, Oracle, nebo k jiné databázi pomocí rozhraní ODBC.[5]
2.7 PŘÍSTUPNOST WEBOVÝCH STRÁNEK Zakladatel technologie WWW a ředitel W3C konsorcia Tim Berners-Lee pronesl větu, která je základním kamenem přístupnosti webových stránek: „Síla webu je v jeho univerzalitě. Přístup pro každého nezávisle na schopnostech je jeho základní prvek“. Jednou větou lze přístupnost webových stránek charakterizovat: „Přístupná webová stránka je použitelná pro každého uživatele Internetu, a to nezávisle na jeho postižení, schopnostech, znalostech, zkušenostech či zobrazovacích možnostech“[3]. Přístupný web je výsledkem kvalitně odvedené práce. Bohužel někteří webdesigneři a programátoři nedodržují zásady přístupnosti, což vede k tomu, že někteří uživatelé nezískají na takovém webu potřebné informace. Z hlediska přístupnosti můžeme www stránky rozdělit do tří skupin – nepřístupné, z části přístupné a přístupné. Přístupnost webových stránek umožňuje lepší vyhledávání v známých internetových vyhledávačích (např. google.com). Roboti vyhledávačů denně prochází mnoho webových stránek, kde si indexují odkazy a text do své databáze. Pokud roboti zaregistrují nepřístupné stránky (např. flash), přeskočí robot obsah bez indexace, neboť si s takovým obsahem neporadí. Přístupnost webových stránek je důležitá pro zdravotně postižené uživatele, pro uživatele, kteří nemohou použít stejné technické a softwarové vybavení jako většina.
Strana 18
TECHNOLOGIE PRO WWW APLIKACE
Například přistupují ke stránce přes PDA či mobilní telefon nebo nemohou používat grafický webový prohlížeč. Základním problémem nepřístupného webu jsou obrázky. Pokud jsou na webu důležité graficky znázorněné informace, musí obsahovat alternativní popisek, ze kterého bude pochopitelné, co obrázek znamená. Webové stránky musí fungovat i bez všech doplňků, jako jsou např. CSS styly nebo JavaScript. Kontrast webových stránek se volí tak, aby byl čitelný i na černobílém monitoru.[3]
MAPA AREÁLU FSI
Strana 19
3 MAPA AREÁLU FSI Na fakultě strojního inženýrství je v informačním systému na webových stránkách zařazena mapa areálu FSI. Aplikace zobrazuje skutečné rozmístění budov, pater i místností, každá budova i místnost mají svůj jednoznačný popisek. Mapu je možno na současných webových stránkách fakulty zobrazit až po vyhledání osoby. Na vizitkové stránce osoby je odkaz na místnost, pomocí něhož se dostaneme na mapu areálu FSI. Mapa se skládá ze tří částí: • mapa budov FSI, • výběr pater ve zvolené budově, • plánek místností zvoleného patra.
3.1 DATOVÝ MODEL Všechny plánky jsou generovány dynamicky php skriptem na základě dat popisujících areál. Data k mapě areálu FSI jsou uložena v databázi (centrální datový sklad VUT, schéma FMEADM). Datový popis areálu se skládá ze tří následujících tabulek: •
AREÁL: tabulka w_areal Tab.1 Areál Sloupec nazev souradnice meritko rozmer oramovani klikaci patra
•
Typ varchar(3) text varchar(4) text text enum('a','n') varchar(2)
Popis Název budov v souladu se stavebními plány. Udává souřadnice polohy budovy na obrázku. Měřítko pro zobrazení budov na obrázku. Rozměr budov na obrázku. Orámovaní budovy na obrázku. Udává jestli se budova bude chovat jako odkaz. Počet pater v budově.
MÍSTNOST: tabulka w_mistnost Tab. 2 Místnost Sloupec budova mistnost souradnice barva klikaci popis xline yline zobrazit_popis
Typ vardar(5) varchar(20) varchar(80) varchar(6) enum('a','n') varchar(50) varchar(2) varchar(2) enum('a','n','z')
Popis Název budov v souladu se stavebními plány Číslo místnosti podle stavebních plánků. Umístění místnosti. Barevné označení druhu místnosti. Vytváří z místnosti odkaz. Speciální požadavek na popis místnosti. Umístění popisu u složitější místnosti. Umístění popisu u složitější místnosti. Jakým způsobem se zobrazí popis.
Strana 20
•
MAPA AREÁLU FSI
DVEŘE: tabulka w_dvere Tab. 3 Dveře Sloupec mistnost dvere Zed vzdalenost otevreni Typ druh velikost
Typ varchar(8) varchar(8) tinyint(3) varchar(4) char(1) char(1) enum('','d') varchar(4)
Popis Popis místnosti podle stavebních plánů. Popis dveří podle stavebních plánů. Umístění dveří na určité zdi. Vzdálenost od počátku místnosti. Otevření dveří podle světových stran. Otevření dveří levá/pravá. Možnost dvojitých dveří. Velikost dveří.
PŘÍKLAD ŘÁDKŮ TABULEK: Tab. 4 Řádek tabulky „W_AREAL2“ NÁZEV SOURADNICE MERITKO ROZMER ORAMOVANI KLIKACI PATRA A1
46,221,121,246 20
28,12
28,12
A
19
Tab. 5 Řádek tabulky „W_MISTNOST“ BUDOV. A1
MÍST.
SOURAD. BARV. KLIK. POPIS XLINE YLINE
A1/0731 12,8,18,12 main
ZOBR._P.
a
N
Tab. 6 Řádek tabulky „W_DVERE“ MISTNOST DVEŘE ZED VZDALENOST OTEVRENI TYP DRUH VELIKOST A1/0731
A1/0731 2
0.5
j
l
1
Na Obr. 1 je vidět relace dané databáze. Jak se můžeme přesvědčit jde o velmi jednoduchou relaci.[4]
Obr.1 Relace
MAPA AREÁLU FSI
Strana 21
V Tabulce „W_AREAL2“ jsou názvy budov dle stavebních plánů fakulty, název je použit jako primární klíč. Položka „Místnost“ v tabulce „W_MISTNOST“ a „W_DVERE“ zajišťuje propojení tabulek pomocí názvu budovy (např. A1), za kterým následuje lomítko a končí číslem místnosti (např. A1/0718) (jedná se o cizí klíče z tabulky W_AREAL2).
3.1.1 MAPA BUDOV FSI
Obr. 2 Mapa areálu FSI Mapa budov FSI zobrazuje všechny budovy areálu FSI, jak je vidět na Obr. 2. Budovy jsou značeny písmeny a čísly v souladu se stavební dokumentací, jejich označení se běžně používá při určení místnosti a na orientačních pláncích. V databázi jsou obsaženy kompletní plánky pater pouze pro budovy A1 až A4. U A5 existují plánky také, ale nejsou zveřejněny. Pod mapou budov se zobrazují odkazy na patra a na konci je plánek patra zvolené budovy. Klikneme-li na nějakou budovu, automaticky se zobrazí 1. nadzemní podlaží (tzn. ve skutečnosti přízemí) zvolené budovy. Následující obrázek je jako jediný statický a klikací mapa se generuje pomocí PHP skriptu z tabulky „W_AREAL2”..
3.1.2 VÝBĚR PATER VE ZVOLENÉ BUDOVĚ Každá budova má určitý počet pater. Pod mapou jsou odkazy na patra formou čísel. Na webových stránkách následuje nadpis, aby bylo jasně řečeno, na kterém patře se nacházíme. Popis se skládá z budovy, za lomítkem následuje číslo označující vybrané patro – např. A1/07, A4/7 atd. Dvě číslice za lomítkem se nalézají jen u budovy A1, protože má více než devět podlaží. Čísla pater jsou generována pomocí skriptu PHP z sloupce „patra“ v tabulce „W_AREAL2”.
Strana 22
3.1.3
MAPA AREÁLU FSI
PLÁNEK ZVOLENÉHO PATRA
Plánek zvoleného patra se skládá z místností, které mají svůj popis. První tři až čtyři znaky rozdělené lomítkem mají stejný formát jako u nadpisu popsaného v předchozí kapitole, poslední dvě číslice určují číslo místnosti – např. A1/1214, A4/705 atd. Některé místnosti jsou popsány textem, který charakterizuje užití místnosti – např. „Spořitelna“, „Areálová studovna“.
Obr. 3 Mapka zvoleného patra (A4/7xx) Na Obr. 3 je vidět rozložení místností a dveří ve zvoleném patře. Místnosti se barevně rozlišují: • Kanceláře, učebny atd. – šedá • Výtah – oranžová • Schody – zelená • wc – světle modrá Obrázky jsou dynamicky generovány pomocí PHP skriptu z tabulky „W_MISTNOST“ a dveře jsou načteny z tabulky „W_DVERE“.
EDITOR AREÁLU FSI
Strana 23
4 EDITOR AREÁLU FSI Lze předpokládat, že v budovách FSI budou probíhat různé stavební úpravy. Např. Zbourá se stěna mezi dvěmi místnostmi. Abychom mohli provedené stavební úpravy aktualizovat i v mapě, musíme mít v informačním systému zařazen efektivní editor. Vytvoření tohoto editoru bylo hlavním cílem práce.
4.1 VYHLEDÁNÍ A VÝBĚR EDITOVANÉ MÍSTNOSTI Nejprve je potřeba vybrat místnost, kterou potřebujeme editovat. V editoru si lze vybrat mezi těmito možnostmi: • vyhledání místnosti na základě názvu, • vyhledání místnosti s využitím mapy areálu FSI. Místnost najdeme pomocí vyhledávacího políčka v editoru. Nejprve vybereme budovu k vyhledávání a zadáme číslo místnosti. Pokud vyhledávač najde více shod, zobrazí pod mapou tabulku se všemi nalezenými shodami (Obr. 4), v opačném případě označí vyhledanou místnost červenou barvou v mapě (Obr. 5).
Obr. 4 Tabulka s možnostmi
Obr. 5 Označení vyhledané místnosti Také máme možnost vybrat danou místnost pomocí mapy areálu FSI. Pro výběr stačí kliknout na zvolenou místnost pro editaci nebo na tlačítko „edituj“ ve zvoleném řádku v tabulce.
4.2 EDITOR MÍSTNOSTI Webová stránka k editaci místnosti se skládá z několika částí. Obsahuje plánek patra, pod nímž jsou možnosti na vytvoření nové místnosti a dveří. Dále obsahuje formulář s možnostmi editace, kde jsou hodnoty editované místnosti předvyplněny. Na konci webové stránky jsou tlačítka na odstranění místnosti a informace o dveřích, které místnost obsahuje. Pokud chceme editovat dveře musíme kliknout na jejich název.
Strana 24
EDITOR AREÁLU FSI
4.2.1 VYTVOŘENÍ NOVÉ MÍSTNOSTI Jakmile klikneme na vytvoření nové místnosti, zobrazí se nám webová stránka velmi podobná výše popsané. Obsahuje plánek patra a formulář pro vytvoření nové místnosti. Po kliknutí na tlačítko dojde k odeslání vyplněných dat a kontrole vstupu korektními hodnotami. Jestliže je vše v pořádku, dojde k vytvoření nové místnosti a načtení editující webové stránky. Na této stránce můžeme zkontrolovat, jestli je místnost správně zadána. Formulář pro vytvoření nové místnosti je totožný s formulářem pro editaci, který bude popsán v další části.
4.2.2 EDITACE MÍSTNOSTI Při editaci místnosti většinou upravujeme předvyplněné hodnoty ve formuláři. V drtivé většině všech editací budeme upravovat souřadnice dané místnosti. Formát souřadnic bude popsán v následující části. Pro upravení souřadnic budeme potřebovat znát souřadnice všech sousedních místností, které zjistíme umístěním kurzoru myši na sousedící místnosti. V popisu se zobrazí název místnosti a její souřadnice. Jestliže se editace nepovede, je možné poslední editaci vrátit do původního stavu.
4.2.3 FORMULÁŘ PRO EDITACI A VYTVOŘENÍ MÍSTNOSTI
Obr. 6 Formulář pro editaci místnosti Nyní si vysvětlíme všechna políčka ve formuláři pro editaci (Obr. 6) a vytvoření nové místnosti. Formulář se skládá z následujících políček: • MÍSTNOST: políčko obsahuje číselné označení místnosti např. A4/706 • SOUŘADNICE: slouží k určení pozice, kde se místnost nachází. Nula začíná v levém horním rohu. Formát souřadnic je závislý na tvaru místnosti: o Místnost čtvercového půdorysu: textová hodnota se skládá ze čtyř čísel oddělených čárkou, kde výraz (a,b,c,d) znamená: A) vzdálenost od levé strany patra B) vzdálenost od horní strany patra C) ukončení místnosti od souřadnice A) D) ukončení místnosti od souřadnice B)
Obr. 7 Tvar místnosti pro popis souřadnic polygonního půdorysu
EDITOR AREÁLU FSI
• •
• • • •
Strana 25
o Místnost polygonního půdorysu: textová hodnota se skládá z více čísel oddělených čárkovou např. Obr. 7, kde výraz (a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,r) znamená: A, P) vzdálenost od levé strany patra B, D) vzdálenost od horní strany patra C, E) ukončení místnosti od souřadnic A, P) F, H) ukončení místnosti od souřadnic B, D) v pravém výřezu G, I) ukončení výřezu místnosti od souřadnic A, P) J, M) ukončení místnosti od souřadnic B, D) K, N) vzdálenost od souřadnic A, P) udává začátek výřezu místnosti, který je ukončen G,I) O, R) ukončení místnosti od souřadnic B, D) v levém výřezu Čísla mohou obsahovat i desetinnou tečku, proto je velmi důležité věnovat pozornost, kdy psát čárku a kdy desetinou tečku. Zaměněním desetinné tečky za čárku vede k nekorektnímu zadání souřadnic. BARVA: z rozbalovacího menu vybereme o jakou místnost se jedná např. výtah, WC atd. MOŽNOST KLIKNOUT: Tato možnost říká, jestli má místnost fungovat jako odkaz. Protože v mapě areálu FSI, který je funkční na webových stránkách fakulty, je tato možnost odstraněna přímo v kódu, doporučuje se tuto možnost nechat stále zvolenou, jinak si v editoru zamezíme výběr dané místnosti, pokud se tak stane, vyhledáme si danou místnost pomocí vyhledávače a klikneme na tlačítko „Edituj“. POPIS: pokud je potřeba přiblížit, co se v dané místnosti nachází, např. „Spořitelna“, „Areálová studovna“ atd. vyplníme políčko ZOBRAZIT POPIS: z rozbalovacího menu vybereme, co se má zobrazit. XLINE: používá se u polygonních místností pro umístění popisu ve směru osy x. YLINE: používá se u polygonních místností pro umístění popisu ve směru osy y.
4.3 EDITOR DVEŘÍ Dojde-li například k zbourání zdi mezi místnostmi, pravděpodobně se zruší i jedny dveře. K této editaci nám poslouží editor dveří. Tento editor je přístupný z editované místnosti. Webová stránka obsahuje plánek patra. Pod tímto plánkem je možnost na vytvoření nových dveří. Dále formulář k editaci s předvyplněnými hodnotami. Na konci webové stránky jsou tlačítka na odstranění dveří.
4.3.1 VYTVOŘENÍ NOVÝCH DVEŘÍ Klikneme-li na odkaz vytvoření nových dveří v editoru místností nebo dveří, zobrazí se nám stránka podobná výše popsané. Obsahuje plánek patra a formulář k vytvoření nových dveří. Klikneme-li na tlačítko pro vytvoření dveří, proběhnou stejné operace jako u nové místnosti. Dojde k přesměrování na webovou stránku pro editaci právě
Strana 26
EDITOR AREÁLU FSI
vytvořených dveří. Pokud se editace nepovede, můžeme dveře editovat nebo smazat a opakovat zadání.
4.3.2 EDITACE DVEŘÍ U editace dveří stejně jako u editace místnosti se provádí změny předvyplněných hodnot. Nejčastěji budeme měnit vzdálenost, která nám určuje polohu dveří od začátku místnosti. Klikneme-li na tlačítko pro editaci, provedou se zadané změny. Nejsme-li spokojeni se změnami, můžeme editaci vrátit do původního stavu.
4.3.3
FORMULÁŘ PRO EDITACI A VYTVOŘENÍ DVEŘÍ
Obr. 8 Formulář pro editaci dveří Nyní si popíšeme všechny políčka, které se nachází ve formuláři pro editaci a vytvoření nových dveří (Obr. 8). • MÍSTNOST: jde o název místnosti, který je v políčku vždy předvyplněný. • ČÍSLO DVEŘÍ: jde o označení dveří. Jsou označeny stejně jako místnost. Pokud je v místnosti více dveří, je k názvu doplněno písmeno pro odlišení. • SMĚR OTEVÍRÁNÍ DVEŘÍ: z rozbalovacího menu si vybereme, na kterou světovou stranu se dveře otevírají. • DVEŘE JSOU: z rozbalovacího menu vybereme jestli se jedná o dveře pravé nebo levé. • ZEĎ: v tomto políčku je číslo, které udává, na které zdi jsou dveře umístěny. o ČTVERCOVÉ MÍSTNOSTI: 0 – horní, 1 – pravá, 2 – dolní, 3 – levá strana čtverce. o POLYGONÍ MÍSTNOSTI: zde záleží na jejich složitosti. Příklad označení čísel zdí daného půdorysu je znázorněn na Obr. 9. U jiných či složitějších tvarů se čísla zdí budou pravděpodobně lišit.
Obr. 9 Čísla zdí daného půdorysu
EDITOR AREÁLU FSI
• • •
Strana 27
VZDÁLENOST: určuje vzdálenost dveří od začátku místnosti. Počátek místnosti je nula s rostoucí vzdáleností od počátku se číslo zvětšuje VELIKOST: určuje velikost dveří. Většinou zadáváme 1, což je také přednastavená hodnota. Když číslo zvětšíme dojde i k zvětšení dveří. DVOJTÉ DVEŘE: pokud zaklikneme tuto možnost, vytvoří se nám dvoukřídlové dveře.
4.4 SMAZÁNÍ MÍSTNOSTI NEBO DVEŘÍ Potřebujeme-li nějakou místnost nebo dveře smazat, pak tuto možnost najdeme v editoru místností nebo dveří. • U všech místnosti můžeme smazat: 1) místnost 2) místnost i všechny dveře, které se v místnosti nachází. • U všech dveří můžeme smazat: 1) dveře 2) místnost i všechny dveře, které se v místnosti nachází. Obě tlačítka jsou zabezpečeny javascriptem, který se dotazuje, jestli mají být místnost nebo dveře opravdu odstraněny. Klikneme-li na tlačítko „OK“ dojde k provedení operace. Pokud je ve webovém prohlížeči javascript vypnutý, musí se s těmito tlačítky zacházet velmi opatrně.
4.5 MOŽNOSTI ZPĚTNÉHO KROKU PŘI NEKOREKTNÍ EDITACI Dojde-li k zadání nekorektních hodnot do formuláře, jde tuto operaci vrátit. U místnosti i dveří se po odeslání editace zobrazí webová stránka zeditovaného patra. V případě, že budeme souhlasit se změnami, klikneme na tlačítko „Souhlasím“ v opačném případě použijeme „Nesouhlasím“. Funkci zpětného kroku si vysvětlíme na následujících obrázcích. Obr. 10 nám ukazuje změny, které provádíme u souřadnic. Číslo šest jsme přepsali na číslo tři.
Obr. 10 Změna souřadnic
Obr. 11 Výsledek editace
Strana 28
EDITOR AREÁLU FSI
Na Obr. 11 vidíme, že místnost číslo 1213 zasahuje do místnosti 1214, jedná se o nekorektní editaci, a proto klikneme na tlačítko „Nesouhlasím“, které nám vrátí změny editace zpět. Výsledek viz Obr. 12
Obr. 12 Vrácení změn do původního stavu.
4.6 PŘEVOD APLIKACE MEZI RŮZNÝMI DATABÁZEMI Aplikace je naprogramována tak, aby se dala jednoduše převádět mezi různými platformami databázových systémů. Při exportu z dané databáze do dávkového SQL souboru můžeme dále tento naimportovat do všech dostupných systémů, jež jsme zvyklí používat. Následně stačí upravit skript, pomocí kterého se připojujeme k databázi. Samotný kód aplikace je nezávislý na typu databáze. Je však důležité si uvědomit, že dotazovací jazyk SQL není u všech databází stejný, každá z implementací se mírně liší. Například pokud chceme určit kolik řádků se má do výsledku načíst, u Oracle použijeme klíčové slovo „TOP“ v projekční části dotazu, zatímco u MySQL restrikční klauzuli „LIMIT“. U MySQL je třeba dodržovat velká a malá písmena v názvech tabulek a sloupců, což u jiných systému není nutné. Proto při přechodu na jiný druh databáze nelze vyloučit nutnost úprav SQL dotazů. Připojení k databázi je řešeno pomocí OOP. Pro veškeré přístupy k databázi je použit objekt. Po přepsání implementace tohoto objektu lze aplikaci připojit k potřebné jiné databázi.
ZÁVĚR
Strana 29
5 ZÁVĚR Na webových stránkách FSI existuje mapa areálu, která je generovaná dynamicky na základě dat uložených v databázi. Úkolem této práce bylo třeba vytvořit aplikaci pro snadnou editaci těchto dat. V rámci této práce byly vytvořeny webové stránky v jazyce PHP splňující požadovaný účel. Uživatelé mohou pomocí tohoto editoru jednoduše upravovat místnosti i dveře, u kterých došlo k rekonstrukčním úpravám. Bakalářská práce popisuje problematiku map areálu FSI. Je rozdělena na dvě části. V první části tohoto textu bylo pojednáno obecně o historii počítače, počítačových sítích, internetu a informačních systémech. Byly vysvětleny technologie pro www aplikace, které byly použity při vývoji. Druhá část popisuje datový model, se kterým se pracuje, a funkce plánků areálu FSI. Zbytek práce podrobně popisuje samotný editor plánků, jenž byl hlavním úkolem této bakalářské práce. Jedná se o základní funkce editoru, kterými jsou (např. vytvoření a editace místností, dveří). V příloze bakalářské práce je praktický příklad editace daného problému doplněný o obrázky. Na vzhled ovládacích prvků aplikace jako např. obrázky plánků, formuláře atd. byly kladeny požadavky přehlednosti a grafické propracovanosti tak, aby aplikace byla připravena k zařazení do fakultního informačního systému Herodis. Bylo by vhodnější vytvořit mapu všech budov Vysokého učení technického v Brně, který by byl integrován do stránek školy. Přes tuto mapu by bylo možné zobrazit také mapu areálu FSI. Bohužel celouniverzitní systém plánků zatím vytvořen nebyl, proto se fakulta rozhodla zprovoznit vlastní řešení. Pro nasazení aplikace do ostrého provozu je ji třeba zařadit do fakultního informačního systému Herodis a odladit jí v tomto systému. Po jejím zařazení může aplikace sloužit dlouhá léta a okamžitě můžeme pomocí tohoto editoru provádět úpravy po různých rekonstrukcích na fakultě.
Strana 30
POUŽITÁ LITERATURA
Strana 31
6 POUŽITÁ LITERATURA [1] ROUPEC, J.: Počítačové sítě [elektronický studijní materiál]. Poslední revize listopad 2002. [cit. 2007-03-25]. Dostupné z: http://drogo.fme.vutbr.cz/opory/pdf/p_site.pdf [2] WELLING, L. – THOMSON, L.: PHP a MySQL rozvoj webových aplikací. SoftPress, Praha, 2004. 830 s. ISBN 80-86497-83-6 [3] ŠPINAR, David. Tvoříme přístupné webové stránky. Zoner Press, Brno, 2004. 360 s. ISBN 80-86815-11-0 [4] CEPL, M.: Interaktivní mapa FSI. [Diplomová práce] FSI VUT v Brně, Brno, 2006. [5] WIKIPEDIA, Otevřená encyklopedie [online]. Poslední revise 20.3.2007 [cit. 2007-0324]. Dostupné z: http://www.wikipedia.org
Strana 32
PŘÍLOHY
Strana 33
7 PŘÍLOHY 7.1 PRAKTICKÝ PŘÍKLAD EDITACE V akademickém roce 2006/2007 vznikla na naší fakultě nová Internetová studovna, která se nachází v budově A4 v 7. patře na půdě Ústavu automatizace a informatiky.
Obr. 13 Vybraná webová stránka pro editaci
Strana 34
PŘÍLOHY
Internetová studovna vznikla z místností číslo 704 a 705, které vidíte na Obr. 13. Naším úkolem je provézt potřebné změny tak, aby z výše uvedených místností vznikla místnost číslo 705. Nyní bude probrána editace daného problému krok za krokem. Předpokládejme, že jsme již přihlášeni v informačním systému Herodis a máme vyhledaný plánek patra pro editaci.
7.1.1 ODSTRANĚNÍ MÍSTNOSTI Nejprve klikneme na místnost číslo 704, abychom měli možnost tuto místnost odstranit.
Obr. 14 Vybraná místnost k editaci 704 Jakmile se nám načte webová stránka pro editaci, zvolíme tlačítko odstranit místnost i dveře.
Obr. 15 Tlačítka k odstranění Potvrdíme, že opravdu chceme místnost i dveře odstranit.
Obr. 16 Potvrzení Místnost se nám odstraní.
Obr. 17 Odstraněná místnosti
PŘÍLOHY
Strana 35
7.1.2 EDITACE MÍSTNOSTI Nyní vybereme místnost 705 a umístíme kurzor myši na místnost 703 a zjistíme její souřadnice.
Obr. 18 Vybraná místnost k editaci 705 a zjištěné souřadnice U souřadnic nás zejména zajímá třetí číslice (8.5). Ve formuláři první číslici souřadnic 12.5 změníme na 8.5 tak jak vidíme na Obr. 19 a klikneme na „Pokračovat v editaci“.
Obr. 19 Vyplněný formulář k editaci místnosti. Pokud je editace správná, potvrdíme tlačítkem „Souhlasím“. V opačném případě klikneme na „nesouhlasím“ a opakujeme zadání podle kapitoly 7.1.2.
Obr. 20 Výsledek editace místnosti
7.1.3 EDITACE DVEŘÍ Nyní je potřeba zeditovat dveře. Aktivujeme odkaz A4/705.
Obr. 21 Výběr dveří k editaci Změníme v poli „Vzdálenost“ 3 na 7 a klikneme na tlačítko „Pokračuj v editaci“.
Strana 36
PŘÍLOHY
Obr. 22 Vyplněný formulář k editaci dveří
7.1.4 VYHODNOCENÍ EDITACE Pokud jsme s výsledkem spokojeni, potvrdíme pomocí „Souhlasím“, v opačném případě zrušíme zadání tlačítkem „Nesouhlasím“ a opakujeme zadání podle kapitoly 7.1.3. Tímto krokem jsme vytvořili místnost 705 a splnili úkol.
Obr. 23 Výsledek editace
