ZÁKLADNÍ ŠKOLA ČESKÝ KRUMLOV ABSOLVENTSKÁ PRÁCE MODERNÍ FORMY TVORBY WEBOVÝCH STRÁNEK. Za Nádražím 222, Český Krumlov

Transkript

1 ZÁKLADNÍ ŠKOLA ČESKÝ KRUMLOV Za Nádražím 222, Český Krumlov ABSOLVENTSKÁ PRÁCE MODERNÍ FORMY TVORBY WEBOVÝCH STRÁNEK Autor práce: Martin Šebela, IX.A Konzultant: Mgr. Jan Kříž Školní rok: Základní škola Český Krumlov, Za Nádražím 222

2 Obsah: ÚVOD 3 1. JAK TO TEDY FUNGUJE? PO ZADÁNÍ ADRESY STROJE S DATY STRÁNEK APACHE WINDOWS IIS 4 2. CO SE SKRÝVÁ NA POZADÍ? HTML PHP ASP.NET JAVASCRIPT CGI 8 3. ABY TO PĚKNĚ VYPADALO CSS FLASH ANIMACE FORMÁTY OBRÁZKŮ 9 4. DATABÁZE PLNÉ OBSAHU MYSQL MSSQL POSTGRESQL SPOJENÍ NÁVŠTĚVNÍKŮ S WEBEM SESSIONS COOKIES PŘIHLAŠOVÁNÍ UŽIVATELŮ POUŽITÍ V PRAXI REDAKČNÍ SYSTÉMY FIREMNÍ PREZENTACE E-SHOPY BANKOVNÍ APLIKACE ÚSKALÍ ÚNIKY DAT XSS SQL INJECTION BACKDOOR 15 ZÁVĚR 15 LITERATURA 16 PŘÍLOHY 17 LEXIKON 21 2

3 Úvod Ve své práci se věnuji programovacím jazykům, návrhu webových stránek a samotnému principu fungování. Webová prezentace je nedílnou součástí každé firmy, která chce prorazit i na internetu. A nejen firmy. Programování statických webových stránek se děti (žáci) učí už na základní škole a někteří si následně vytvoří i vlastní stránky, které nadále zdokonalují. Na následujících několika stránkách si popíšeme, jak to všechno vlastně funguje. Objasníme si, co vytváří lidé, jak s tím pracují počítače, zmíníme se o významných redakčních systémech, díky kterým ani nemusíte umět programovat a nakousneme i závažnou problematiku, a to úskalí webových stránek. 1. Jak to tedy funguje? Co se skrývá na pozadí a odkud se ten obsah webových stránek bere? 1.1. Po zadání adresy Kliknutí na určitý odkaz (obvykle modře zbarvený a podtržený) nebo zadání adresy stránek ve webovém prohlížeči do adresního řádku není pro nikoho asi nic zvláštního. Ale co se stane během těch několika málo milisekund? Vše funguje na jednoduchém principu. Počítači, kde jsou uložena data k webovým stránkám (obrázky, text, média), se říká server. A návštěvníkovi, který chce navštívit určitou stránku, se říká klient. Po tom, co klient zadá adresu a potvrdí ji stisknutím tlačítka, nastává mezi serverem a klientem komunikace. Klientův požadavek pro otevření stránky je zaslán serveru. Server požadavek vyhodnotí, aby věděl, co má vlastně klientovi zaslat, a všechna potřebná data pošle. Následně se návštěvníkovi stránek na monitoru ve webovém prohlížeči zobrazí přesně ta stránka, kterou si žádal. Tímto způsobem to funguje v případě, že jsou stránky statické, což znamená, že na nich 3

4 není umístěn například prvek pro zanechání vzkazu od návštěvníků. Opakem statických stránek jsou dynamické stránky. Jak se to ale liší v komunikaci mezi klientem a serverem? Dynamické neboli interaktivní stránky mají většinou články uložené v databázích. Server, který tak dostane požadavek, aby otevřel interaktivní stránku, musí ještě zaslat požadavek databázi s články, která mu je poskytne. Vše dál funguje stejně jako v případě statických stránek. Tato komunikace je odborníky popisována jako HTTP protokol a triviálně je znázorněna v příloze Stroje s daty stránek Obsah webových stránek je ukládán na serverech, na kterých je stejně jako na osobním počítači nainstalován operační systém. Jak bylo popsáno v předchozí kapitole starají se o to, aby došla všechna vyžádaná data Apache Jedním z programů, který se stará o správný běh a vyřízení všech požadovaných úkonů webového serveru, se nazývá Apache. Je šířen pod licencí GPL, tudíž je zdarma dostupný a jeho zdrojový kód je možné upravovat. Podle statistik je tato možnost využívána na většině webových serverů. Lze jej navíc provozovat na různých operačních systémech (Linux, Unix, Windows) Windows IIS Alternativou je software pocházející ze společnosti Microsoft. Je součástí operačních systémů Windows a Windows Server. Není tak rozšířen a není zdarma. 4

5 2. Co se skrývá na pozadí? Jsou to takzvané programovací jazyky, které na základě posloupnosti příkazů (což může být i velmi dlouhý a pro laika nepřehledný soubor) vykonávají operace podle přání svého programátora. Některé jazyky mají více možností, některé toho naopak umí méně. Kód webových stránek sepisují lidé, kteří danému programovacímu jazyku rozumí. Existují ale i editory, jež umí kód vygenerovat. Dá se to srovnat s dokumentem psaným například v programu Microsoft Word a následně uloženým jako webová stránka. Editor veškerý kód tvoří za Vás a Vy pouze přidáváte vlastní materiály a upravujete formátování. Kód generovaný z editorů ovšem není zrovna na úrovni a většinou se v něm vyskytují chyby HTML HTML 1 je základní jazyk pro tvorbu jednoduchých webových stránek. Vytvářejí se s ním statické stránky je tedy zpracován až u klienta. Nemůžete tak od HTML očekávat vytvoření objednávkového systému nebo možnost naprogramování návštěvní knihy. Struktura kódu HTML obsahuje takzvané tagy značky, do kterých se uzavírá text, který bude následně zformátován upraven pro tisk. Webový prohlížeč následně text obalený tagy například pozmění na tučný. Záleží na použitých značkách každá má jinou funkci s případnými volitelnými parametry. Aktuálně (jaro 2011) je ve vývoji pátá verze tohoto jazyka, která by měla práci s ním oproti předchozím verzím usnadnit a má přidat i další značky s novými funkcemi, které dosud v HTML chyběly. 1 HTML HyperText Markup Language 5

6 Nadstavbou HTML je XHTML 2. Tento jazyk je rozšířením HTML a má trochu jiné standardy PHP PHP 3 je pokročilejší jazyk, který se zpracovává už na serveru. Ve webovém prohlížeči klienta se následně zobrazí vygenerovaný HTML kód nebo například i obrázek. Dnes je na PHP postavena velká skupina stránek. Zajišťuje možnost sestavit různé interaktivní prvky, jako například ankety (za pomoci databáze) nebo vyhledávání a v praxi jsou v něm programovány velké redakční systémy a e-shopy. Struktura kódu je trochu rozsáhlejší. PHP má mnoho funkcí a umožňuje pracovat s proměnnými nebo třeba vytvářet podmínky. Podmínky lze laicky popsat například takto: bude-li hodnota rovna pěti, pak zobrazit zprávu Nedostatečná měl by ses začít učit!, v opačném případě zobrazit zprávu Pětku jsi naštěstí nedostal!. Podmínky mohou být samozřejmě mnohem rozsáhlejší a nejsou jediným plusem PHP. Tvůrce stránek si může vytvořit i vlastní funkce a využití tohoto jazyka je tak velmi široké. Pro tento jazyk vychází stále nové verze přidávají se nové funkce, ty stávající se vylepšují (případně odstraňují z důvodu zabezpečení) a opravují se chyby ASP.NET Další programovací jazyk pochází z dílny firmy Microsoft. Opět je to jazyk, který je zpracováván už na serveru. 2 XHTML Extensible HyperText Markup Language 3 PHP Hypertext Preprocessor 6

7 ASP.NET 4 tvoří rozhraní pro dynamické zpracování webového obsahu. Výstupem pro uživatele je opět HTML kód, ale na straně serveru mohou běžet skripty (programy) v různých jazycích, které ASP.NET podporuje, například C# JavaScript JavaScript je spíše doplňkovým jazykem, který je závislý na HTML. Pokud bychom jej totiž chtěli použít, musíme nejprve v souboru s HTML kódem aktivovat JavaScript určitým příkazem. Stejně jako HTML je tento jazyk zpracováván až ve webovém prohlížeči klienta. Využíván je například pro vyvolání varovné hlášky o nesprávném vyplnění formuláře, jednodušších animací (efekt sněžení apod.), otevírání nových oken s různými parametry (bez možnosti posouvat stránku, zobrazení okna v určité velikosti ) anebo akcí vyvolaných po najetí myši (záměna obrázku za jiný). JavaScript také dokáže pracovat s různými proměnnými, podmínkami nebo například cykly. S prvky na stránce pak spolupracuje pomocí jejich jmen uvedených v HTML (jestliže bychom například chtěli vědět, zda je textové pole adresa opravdu vyplněné, museli bychom si ho pojmenovat určitým názvem, který bychom následně použili i v javasriptovém kódu). Dnešní webové prohlížeče ale již umožňují JavaScript vypnout. Pokud by se tak na webové stránce měl objevit určitý efekt a uživatel by měl jazyk v prohlížeči vypnutý, nic by se mu nezobrazilo. Trochu problematická je i jeho podpora ve webových prohlížečích někdy nastane situace, že je tvůrce webu donucen vytvořit pro každý webový prohlížeč jiný javascriptový kód. 4 ASP Active Server Pages 7

8 2.5. CGI CGI 5 je metoda přenosu dat mezi webovým serverem a klientem. Server požadavky předává skriptům na serveru, které mohou být i v různých jazycích a historicky jde o první způsob tvorby dynamického obsahu. Dnes se už téměř nepoužívá, protože je technicky překonán. 3. Aby to pěkně vypadalo První dojem. Každého návštěvníka by na stránce měl udržet právě její návrh (rozložení jednotlivých prvků) a grafické zpracování. Kód, který mají na starosti programovací jazyky, bude drtivá většina návštěvníků ignorovat a právě grafika webu je buď nadchne a stránku si prohlédnou, možná i něco přečtou, nebo kliknou ve svém webovém prohlížeči na kouzelné tlačítko zpět a tvůrce stránek bude mít o návštěvníka méně CSS Grafické rozvržení jako je šířka, výška, okraje, pozadí a mnoho dalších vlastností zajišťuje jazyk CSS 6 (nazývaný kaskádové styly). CSS zajišťuje pomocí příkazů, kterých je celá řada, takzvané nastylování. Ve struktuře kódu jsou uvedeny jednotlivé názvy stylů a k nim jsou přiřazeny příkazy, jak má prvek na stránce vypadat. Zda bude obsahovat obrázek na pozadí, pokud ano, tak zda se má opakovat, pokud se má opakovat, tak zda na ose X nebo Y apod. Jazyk samotný je v podstatě možnost, jak graficky vylepšit HTML prvky, které by jinak nebyly dostatečně atraktivní. Aby mohl být využit, potřebuje k sobě právě 5 CGI Common Gateway Interface 6 CSS Cascading Style Sheets 8

9 HTML soubor, do kterého se bude grafické rozšíření importovat. Je tak jasné, že to určitě nebude jazyk, který bude zpracováván už na serveru, nýbrž u klienta. Aktuálně (jaro 2011) je k dispozici třetí verze CSS, která obsahuje nové příkazy, ale prozatím ne všechny webové prohlížeče ji podporují v plném rozsahu Flash animace Pravděpodobně jste již někdy na internetu narazili na různé animace, které Vás informovaly o tom, že jste například v pořadí 999. návštěvník stránky, a po kliknutí obdržíte odměnu. Právě tyto lákavé (místy až odpudivé) animace byly sestaveny v programu Adobe Flash. V softwaru firmy Adobe vytvoříte určitou animaci, a pak ji jen pomocí HTML kódu uveřejníte na stránkách. V grafice v dnešní době nahrazuje především animovaný formát GIF. Někdy je dokonce v technologii Flash naprogramován celý web, například různé firemní prezentace. Větší množství animací na stránce může ale také zatěžovat výkon klientova počítače Formáty obrázků Na web je možné dávat několik formátů obrázků (druhů uložení), ale každý má jiné vlastnosti. Snad nejpoužívanější JPEG (nebo JPG), je formát, ve kterém obrázky prochází ztrátovou kompresí a oproti originálu tak ztrácí na kvalitě (po několikátém uložení jsou patrné čtverečky pixely). Formát JPEG neumožňuje používat průhlednost. Téměř opakem je formát PNG. Uložením v tomto formátu na kvalitě obrázek neztrácí a je navíc možné využít průhlednost, což se v některých případech hodí. 9

10 Třetí z významných formátů je GIF. Ten sice dokáže vytvářet animace (více obrázků v jednom souboru), ale omezuje ho použití maximálně 256 barev. 4. Databáze plné obsahu Dynamické stránky spolupracují s databázemi, ve kterých mají uložené různé informace články, přihlašovací jména a hesla návštěvníků stránek atd. Obsáhlé databáze nalezneme například u e-shopů. Uložená data v databázích musí pak být velmi dobře chráněna, aby se k nim nedostala cizí osoba a údaje nezneužila MySQL MySQL je jeden ze systémů, ve kterém jsou tvořeny a spravovány databáze. Pro nekomerční účely je poskytován zdarma. Běží na několika různých operačních systémech, včetně Linuxu a Windows. Ovládá se jazykem SQL, přes který jsou do databáze posílány různé dotazy (například otevřít tabulku a změnit text) MSSQL Placenou alternativou databázového systému je Microsoft SQL Server. Ten samozřejmě běží pouze na Windows. K ovládání se používá rovněž jazyk SQL, příkazy se ale mezi jazyky zčásti liší PostgreSQL Zdarma dostupný je databázový systém PostgreSQL. Je sice především programován pro operační systém Linux, ale lze jej používat i na Windows. 10

11 5. Spojení návštěvníků s webem Registrace na portálech, vlastní nastavení navštěvované stránky Přizpůsobení stránek na míru návštěvníkovi určitě přijde vhod s čím se v takových případech vlastně pracuje? 5.1. Sessions Sessions jsou soubory, které na určitou dobu ukládají informace o návštěvníkovi na server. Ke své funkci ale potřebují mít zapnuté cookies (viz následující kapitola), které ukládají do klientova počítače dlouhý identifikátor, aby mohl následně server poznat, zda se jedná o stejného návštěvníka. Používají se například v případě, kdy se ověřuje, zda byl už návštěvník na stránce úspěšně přihlášen Cookies Textové soubory s omezenou velikostí, které jsou ukládány do klientova počítače, se nazývají cookies. Pokud je možné si například na stránce vybrat mezi dvěma druhy grafického rozvržení, informaci o tom, které bylo vybráno, si webový prohlížeč ze serveru uloží do klientova počítače. Při další návštěvě stránek webový server zkontroluje, zda cookies existují a zobrazení provede podle dříve uložených parametrů. Cookies mohou mít zadanou určitou dobu platnosti po vypršení přestávají platit. Mohou být i jednoduše měnitelná klientem a čitelná dalšími skripty, nedoporučují se tak pro ukládání citlivějších dat (například hesla) Přihlašování uživatelů Registrace a následná možnost přihlášení (neboli login) na stránkách je hojně využívaná funkce. Přihlašování může mít ohlas jak u návštěvníků, tak u tvůrce 11

12 stránek. Návštěvníci si budou moci například upravit svůj vlastní profil, pomocí svého u se zaregistrovat mezi odběratele novinek, psát neanonymní komentáře k jednotlivým článkům a podobně. Tvůrce pak může z aktivit zaregistrovaných návštěvníků vycházet jejich zpětnou vazbou a upravovat stránky právě pro ně anebo různě měnit jejich oprávnění. Zároveň ale může vývojář naprogramovat stránky tak, že si je mohou pročítat pouze registrovaní uživatelé a ostatním přístup zamítne. V horších případech může zaregistrovaných uživatelů zneužívat k reklamě, která jim do elektronické schránky přijde, aniž by o tom někde někomu dali svolení. 6. Použití v praxi Tvůrce webových stránek musí mít ponětí o tom, jak by měl kterou funkci využívat a snažit se vyhnout chybám, které později může někdo zneužít. K jakým významným věcem se vlastně všechny programovací jazyky mohou využívat? 6.1. Redakční systémy Kdo není zrovna v tvorbě webových stránek zdatný a nechce platit firmám, které by mu osobní webovou prezentaci vytvořily, může vyzkoušet redakční systémy. Jsou to naprogramované systémy ve verzi komerční nebo ke stažení zdarma, které po nahrání na webový server jenom uživatel nainstaluje a začne nový web plnit vlastními články, fotografiemi a jinými médii. A k tomu je možné využít ještě další hromady funkcí, jako je oprávnění redaktorů nebo třeba statistiky návštěvnosti. Mezi známé a zdarma dostupné redakční systémy patří například WordPress, Joomla! nebo Drupal. Redakční systém je ale i ten, který učitelé a žáci používají v naší škole k přidávání článků a fotografií na stránky. Je ale tvořen pouze pro naši školu, tudíž jej nemůže nikdo jiný získat. 12

13 6.2. Firemní prezentace Firma, která není na internetu snad jako by neexistovala. Zákazník nebo zájemce o zaměstnání si může v klidu stránky firmy prohlédnout a rozhodnout se, zda je opravdu tohle správná volba. Prezentace menších firem jsou povětšinou stránky o pár kategoriích, kde jsou vypsány základní informace. U společností s působností i v jiných zemích je už možné zpracovat i jazykové mutace. Samozřejmě ty nejrozsáhlejší firmy mají stránky mnohem obsáhlejší (například výrobci spotřebičů) nabízejí ke stažení příručky, fotografie výrobků a podobně E-shopy Nakupování pomocí internetu je dnes zcela normální e-shopů existuje spousty. K sestavení e-shopů jsou rozhodně využívány databáze, ve kterých jsou uloženy jak informace o zboží, tak adresy, na kterých zákazníci bydlí. Zabezpečení takových údajů musí být na velmi dobré úrovni Bankovní aplikace Mistrovsky zabezpečené stránky jsou bankovní aplikace. Možnost, kdy uživatel může spravovat svůj bankovní účet ve webovém prohlížeči, je lákává pro hackery. Odcizení čísel platebních karet, vyprázdnění kont nebo odeslání peněz na jiný účet by nebylo nic příjemného. Tyto aplikace používají protokol SSL 7, který komunikaci mezi klientem a webovým serverem šifruje. 7 SSL Secure Sockets Layer 13

14 7. Úskalí Existují samozřejmě i úskalí webových stránek. Za jejich zneužití mohou programátoři, kteří se dostatečně nevěnovali zabezpečení anebo na bezpečnostní trhlinu v programu zapomněli. Ovšem takové nabourání do stránek může mít i fatální důsledky s mnoha ukradenými údaji Úniky dat Účel hackování webových stránek je ve většině případů získat z databází citlivé informace uživatelů a následně je zneužít. Úniky mohou probíhat několika metodami, například pomocí SQL injection. V roce 2007 kvůli špatnému zabezpečení útočník hacknul touto metodou stránky britského Microsoftu. Nebo rok 2009 jeden americký a dva ruští hackeři získali stejnou metodou více jak 130 milionů čísel platebních karet XSS Zneužití stránek pomocí XSS 8 je možné za předpokladu, že na webu je umístěn formulář například pro zanechání vzkazu, který ovšem není ošetřen a všechny příkazy, které budou zaslány ve vzkazu, budou vykonány jako příkazy, které sepsal programátor. Útočník by tak mohl návštěvníky stránek jednoduše přesměrovat na úplně jinou stránku nebo zaspamovat web různými reklamami SQL injection Tento hack může být proveden, když není formulář ošetřen proti příkazům přicházejícím zvenčí (od klienta) a je zároveň spojen s databází. Pokud by tak klient zadal příkaz pro vypsání nebo smazání dat z databáze a formulář by proti tomuto 8 XSS Cross Site Scripting 14

15 útoku nebyl ošetřen, příkaz by se úspěšně vykonal a útočník by dostal to, co potřeboval Backdoor Metodou zadní vrátka je možné obejít například přihlášení uživatele podstrčením určitých parametrů do adresy. Do testovacích verzí programů nebo webových stránek se někdy zadní vrátka vkládají úmyslně, občas se ale zapomenou odstranit. Závěr Mít vlastní webové stránky nemusí být zase až tak složité. Není zapotřebí umět všechny programovací jazyky. K těm dalším se spíše dostanete poté, co Vás už ty jednoduché přestanou bavit. Z vlastní zkušenosti hlavně nedoporučuji používat pro tvorbu webových stránek editory, které generují kód za Vás. Bude Vám stačit program, jenž zvýrazní jednotlivé úseky kódu, trochu zapřemýšlet a případnou nápovědu si obstaráte na internetu. Na paměti je samozřejmě potřeba mít i budoucnost. Styl tvorby webových stránek se mění ještě nedávno byly weby strohé s pár obrázky, jednotvárným pozadím a dnes jsou tu samé efekty, které Vás mají za úkol okouzlit, abyste zůstali. Programování bych se chtěl věnovat i nadále. Programovacích jazyků je spousty, a to jsem se věnoval ve své práci jen několika málo z nich přitom k výrobě počítačových aplikací potřebujete využít jazyky úplně jiné (strukturou jsou ale v některých ohledech podobné). Občas se říká, že více zábavy si užijete při programování her než při jejich hraní. 15

16 Literatura ULLMAN, Larry: PHP a MySQL názorný průvodce tvorbou dynamických WWW stránek, 1. vydání, Brno 2004, Computer Press, ISBN LACKO, Luboslav: Vytváříme webové stránky v programu Microsoft Visual Web Developer 2005, 1. vydání, Brno 2005, Computer Press, ISBN ŠKULTÉTY, Rastislav: JavaScript programujeme internetové aplikace, 2. aktualizované vydání, Brno 2004, Computer Press, ISBN NÁDBĚLA, Josef: Velký počítačový slovník, 1. vydání, 2004, Computer Media s.r.o., ISBN TAYLOR, Chris: ASP.NET for PHP Developers, přístup z internetu: MACICH, Jiří: Web Microsoftu byl hacknut pomocí SQL injection, přístup z internetu:

17 Přílohy Příloha 1 17

18 Příloha 2 Ukázková komunikace mezi klientem a webovým serverem v praxi ( Klientův dotaz: Odpověď od webového serveru: 18

19 Příloha 3 Ukázka HTML kódu: 19

20 Příloha 4 Ukázka PHP kódu: 20

21 Příloha 5 Lexikon operační systém soubor základních programů, které umožňují pracovat se součástmi počítače a i dalšími externími aplikacemi skriptovací jazyk programovací jazyk, který umožňuje vytvářet dynamické stránky skript program, ve kterém jsou zapsány všechny příkazy, jež mají být vykonány protokol soubor různých pravidel pro přenos dat HTML HyperText Markup Language, programovací (značkovací) jazyk pro tvorbu statických webových stránek XHTML Extensible HyperText Markup Language, programovací jazyk pro tvorbu statických webových stránek (nadstavba HTML) PHP Hypertext Preprocessor (dříve Personal Home Page), programovací jazyk pro tvorbu dynamických webových stránek ASP.NET Active Server Pages s programem.net Framework, programovací jazyk pro tvorbu dynamických webových stránek CGI Common Gateway Interface, metoda přenosu dat mezi webovým serverem a klientem CSS Cascading Style Sheets, jazyk pro tvorbu stylů k HTML prvkům SSL Secure Sockets Layer, protokol šifrující komunikaci mezi serverem a klientem XSS Cross site scripting, metoda ke zneužití dynamických webových stránek 21