VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB Projekt Návrh a implementace systému správy obsluhy pro informační screen VOŠIS Zadavatel: Ing. Antonín Skopec Petr Bednář vedoucí týmu Ondřej Vandas zástupce vedoucího týmu Martin Černý Josef Dufek Luboš Souček 11.12.2011
1. Zadání a cíl projektu Hlavním cílem zadaného projektu je renovovat aplikaci pro načítání dat a jejich zobrazování na vstupní obrazovce LCD v budově školy VOŠIS. Dále je úkolem navrhnout, co by se mělo na úvodní obrazovce promítat a v jaké formě. Zadavatel je nespokojen především s nespolehlivostí dosavadního řešení a časově náročnou obsluhou. V současné době promítá počítač s operačním systémem Windows XP svoji obrazovku na LCD. Na počítači je spuštěna aplikace Opera, která je přepnutá do Fullscreen režimu. Pomocí skriptu je přepínáno mezi jednotlivými stránkami. Požadavky na aplikaci jsou komunikace s MySQL databází jednoduché ovládání. Jednoduchostí ovládání je myšleno, že nebude potřeba měnit zdrojový kód, ručně znovu načítat a přihlašovat se. Data se budou aktualizovat samy. Dále je třeba umožnit zobrazování všech nově navrhnutých dat. Se zadavatelem panem Ing. Antonínem Skopcem jsme se dohodli na možnosti zobrazování obrázků. 1.1. USE Case diagram
Se systémem vstupují do kontaktu dva aktéři, uživatel systému a jeho správce. Všechny činnosti, které mohou aktéři v systému vykonávat, jsou propojeny s aktéry pomocí vazeb. Z diagramu tak máme možnost vyčíst, že správce systému může například vložit záznam do databáze, editovat obsah, odstranit záznam a další činnosti. Uživatel je o proti správci pasivním aktérem v systému, který má pouze možnost prohlížet výstupy v podobě textu nebo obrázků na informačním panelu. Některé činnosti jsou rozšířeny pomocí speciálních vazeb include a extend. Include znamená, že činnost předcházející zahrnuje činnost (činnosti) následující. V diagramu se například jedná o činnost editovat obsah, která zahrnuje činnosti vložit obrázek a vložit textový soubor. Extend znamená, že jeden use case rozšiřuje druhý use case. Toto můžeme opět uvést na příkladu v diagramu, kde činnost vložit obrázek je rozšířena o činnost převést z jiného formátu. 2. Harmonogram řešení projektu 26.9 První hodina Na první hodině jsme se dozvěděli, čeho se bude předmět Projekt týkat, a domluvili jsme se na složení našeho týmu. Dále si od nás Petr Bednář vzal naše emailové adresy, aby nás mohl kontaktovat kvůli volbě vedoucího týmu a tématu naší práce. 3.10 Druhá hodina Po elektronické komunikaci byl vedoucím týmu zvolen Petr Bednář a Ondřej Vandas jeho zástupcem. Zvolili jsme si téma Návrh a implementace systému správy obsahu pro informační screen VOŠIS. Dále byl Ondřej Vandas pověřen Petrem Bednářem kontaktoval ing. Skopce a dohodl s ním termín konzultace k zadání daného tématu. Na konzultaci jsme se dostavili v pondělí 10.10.2011 v 8 hodin. Bylo nám sděleno zadání našeho projektu. 10.10 Třetí hodina Po konzultaci jsme začali vymýšlet možná řešení zadaného projektu. Jako nejlepší možnost jsme zvolili vytvořit webovou stránku, která za pomocí PHP bude načítat nejnovější aktuality ze školní databáze, bude načítat obrázky ze složky, která bude umístěná na PC, který je spojen s televizí. Po vybrání této možnosti nám byla vedoucím týmu rozdělena práce a to následovně: Petr Bednář- dokumentace a kontrola Ondřej Vandas- PHP kód, dokumentace a kontrola Martin Černý - Popis PHP, instalace XAMPP a dokumentace Josef Dufek- Diagramy a dokumentace Luboš Souček- HTML kód a CSS styly 17.10 Čtvrtá hodina Luboš Souček předal Ondřeji Vandasovi HTML kód stránky a CSS styly.
24.10 Pátá hodina Ondřej Vandas dokončil PHP kód pro stránky. Začali jsme s dokumentací. 7.11 Šestá hodina Kompletace dokumentace. 28.11 Prezentace věcných výsledků naší práce. 12.12 Dokončení dokumentace. 22.12 Odevzdání dokumentace. 3. Technická dokumentace řešení projektu 3.1. XAMPP Nainstalujete program XAMPP. Program XAMPP Lite dostupný z http://www.apachefriends.org/en/xampp.html obsahuje Apache a MySQL, které budeme potřebovat. Doporučujeme zachovat výchozí konfiguraci. Po nainstalování zapnete server ikonou xampp-control.exe. V otevřeném okně spustíte jednotlivé komponenty stisknutím tlačítka Start. Následně se u příslušné komponenty objeví Running. Zástupce programu přesuňte do složky Po spuštění. Server se bude spouštět automaticky při zapnutí PC. Rozbalte soubor sks.7z a složku zkopírujte do složky xampp/htdocs standardně se nachází v C:/Program Files/
V nejnovějších verzích prohlížečů Mozilla Firefox, Google Chrome nebo Internet Exporer se stránka zobrazí po vložení http://127.0.0.1/sks/ do příkazového řádku. Stránka se každých 60 sekund automaticky aktualizuj. Během aktualizace se obnoví aktuality a náhodně se vybere nový obrázek. Obrázek musí být vložen ve složce xampp/htdocs/obrazky. 3.2. PHP Celá stránka se automaticky každých 60 sekund obnoví. Stránka se připojí k serveru s IP adresou 195.113.78.99, přihlašovacím jménem skola a heslem skola. Vybere se databáze skola.
Vyhledá 20 nejnovějších aktualit, seřazených od nejnovější. Zobrazí datum a autora aktuality. Zobrazí text aktuality. Načte obrázek ze složky obrazky. Obrázky se střídají při obnovení stránky. Vyhledá nejnovější aktualitu. Vypíše nejnovější aktualitu. 3.3. CSS 3.3.1. CSS pro rámec s načítanými obrázky hlavni { font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000; background-attachment: fixed; background-color: #CCCCCC; // Odkaz na příslušný CSS styl // Typ písma // Velikost písma // Styl písma // Styl podtržení písma // Styl tloušťky písma // Varianta stylu písma // Barva písma // Fixace pozadí // Barva pozadí
background-repeat: no-repeat; // Nastavení neopakující se ho pozadí border-left-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: solid; border-left-color: #174D41; // Levá čára tabulky bude středně silná // Horní čára tabulky se nebude zobrazovat // Pravá čára tabulky se nebude zobrazovat // Spodní čára tabulky se nebude zobrazovat // Styl levé čáry tabulky // Barva levé čáry tabulky } 3.3.2. CSS pro levý rámec s aktualitami.hlavni2 { font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000; background-attachment: fixed; background-color: #CCCCCC; // Odkaz na příslušný CSS styl // Typ písma // Velikost písma // Styl písma // Styl podtržení písma // Styl tloušťky písma // Varianta stylu písma // Barva písma // Fixace pozadí // Barva pozadí background-repeat: no-repeat; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; // Nastavení neopakující se ho pozadí // Horní čára tabulky se nebude zobrazovat // Pravá čára tabulky se nebude zobrazovat // Spodní čára tabulky se nebude zobrazovat // Levá čára tabulky se nebude zobrazovat } 3.3.3. CSS pro levý horní roh obrázek a flash.panel { // Odkaz na příslušný CSS styl background-attachment: scroll; // Nastavení posouvání pozadí
background-color: #174D41; // Barva pozadí background-repeat: repeat; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-size: 70px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; // Nastavení opakující se ho pozadí // Horní čára tabulky se nebude zobrazovat // Pravá čára tabulky se nebude zobrazovat // Spodní čára tabulky se nebude zobrazovat // Levá čára tabulky se nebude zobrazovat // Velikost písma // Styl písma // Styl podtržení písma // Styl tloušťky písma // Varianta stylu písma font-family: "Times New Roman", Times, serif; color: #FFFFFF; // Typ písma // Barva písma } 3.3.4. CSS pro pravý horní roh s Vítejte.panel2 { font-family: "Times New Roman", Times, serif; font-size: 72px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #FFFFFF; background-attachment: scroll; background-color: #174D41; // Odkaz na příslušný CSS styl // Typ písma // Velikost písma // Styl písma // Styl podtržení písma // Styl tloušťky písma // Varianta stylu písma // Barva písma // Nastavení posouvání pozadí // Barva pozadí }
3.3.5. CSS pro spodní rámec s pohybujícími se aktualitami.spodni { // Odkaz na příslušný CSS styl font-family: "Times New Roman", Times, serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; background-color: #174D41; // Typ písma // Velikost písma // Styl písma // Styl podtržení písma // Styl tloušťky písma // Varianta stylu písma // Barva pozadí border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; color: #FFFFFF; // Horní čára tabulky se nebude zobrazovat // Pravá čára tabulky se nebude zobrazovat // Spodní čára tabulky se nebude zobrazovat // Levá čára tabulky se nebude zobrazovat // Barva písma } 4. Jmenovitý podíl členů týmu na řešení projektu Petr Bednář Kompletace, vedení týmu, kontrola Ondřej Vandas Vytvoření PHP kódu, vedení týmu Martin Černý Kompletace materiálu, vytvoření technické dokumentace Luboš Souček HTML kód, CSS styly Josef Dufek Diagramy, dokumentace 5. Problémy, s nimiž se tým setkal při řešení projektu Problémy spočívali především v technickém řešení. Ze začátku se nám nedařilo stanovit, jak bude úloha řešena.
6. Přínos pro členy týmu Petr Bednář V tomto projektu jsem zjistil jaké to je vést skupinu lidí a věřím, že mi to bude ku prospěchu v praktickém životě. A hlavně, že ne vždy jde vše po dobrém. Ondřej Vandas Při tomto projektu, jsem se jako zástupce vedoucího týmu naučil v jeho nepřítomnosti vést tým. Dále jsem si zopakoval své znalosti kódu PHP, který jsme v projektu použili. Martin Černý Přínosem pro mě byla především práce v týmu a tvorba dokumentace, kterou začínám využívat v praxi. Zjistil jsem, že po správné analýze úkolů a jejich rozdělení, pracuje tým efektivněji. Během vypracování dokumentace pro PHP kód jsem mohl využít znalosti z předmětu databáze pro web. Bohužel jsem znalosti získal, když už byl zdrojový kód vytvořen a tak jsem se nemohl podílet na jeho tvorbě. Největší problémem bylo stanovení počátečního postupu, kdy před nás byl položen problém a měly jsme ho vyřešit podle vlastního zvážení. Luboš Souček Naučil jsem se pracovat s programem Macromedia Dreamweaver 8 a dozvěděl jsem se jak efektivněji pracovat s CSS. Josef Dufek Velkým přínosem pro mě byla možnost vyzkoušet si práci v týmu. Zjistil jsem, jak se v praxi delegují úkoly, jak se kontroluje jejich plnění, jak se píší zápisy ze schůzí a mnoho dalších věcí spojených s týmovou prací. Také jsem se mnoho přiučil od kolegů, kteří jsou zběhlejší v programování pomocí php a css. Z literatury, kterou jsem vyhledal a přečetl z důvodu porozumění problému jsem se dozvěděl, jakým způsobem fungují takovéto informační panely, jaké jsou oblasti jejich nasazení a jaké programové vybavení je možno využít při implementaci.