Základy HTML, URL, HTTP, druhy skriptování, formuláře Skriptování na straně klienta a serveru Skriptování na straně klienta se provádí pomocí programovacího jazyka JavaScript, který je vkládán do HTML kódu stránky. JavaScript se používá zejména tam, kde potřebujeme ovládat různé interaktivní prvky stránky (tlačítka, kontrola formulářů, zvýrazňování textu, našeptávač ). Výhodou JavaScriptu je, že umožňuje změnit obsah stránky bez nutnosti znovunačtení celé stránky. Máme dvě možnosti jak vložit JavaScript do naší stránky. 1. Přímo do stránky: <script type="text/javascript"> alert( Já jsem javascript.. ); </script> 2. Volání externího souboru: <script type="text/javascript" src="cesta/soubor.js"></script> Pro skriptování na straně serveru máme k dispozici více jazyků. Nejrozšířenějším je PHP (Hypertext Preprocesor). Na rozdíl od skriptování na straně klienta se php skript interpretuje ještě před odesláním stránky uživateli. Z tohoto důvodu můžeme pomocí php téměř neomezeně měnit obsah i vzhled stránky. Soubory (stránky), které obsahují php kód, mají koncovku.php. Php můžeme použít například pro: kompletní generování stránek zpracování formulářů spolupráci s databází přihlašování uživatelů.
Příklad <html> <head> <title> Výpis PHP </title> </head> <body> <?php echo Toto je text vygenerovaný pomocí PHP\n ;?> </body> </html> Odesílání požadavku na webový server Protokol HTTP nám umožňuje vyžádat si od webového serveru konkrétní soubor pomocí příkazu GET (pozor, neplést s metodou odesílání u formulářů). Ukázka odeslaných dat webovému serveru prohlížečem: GET /wiki/wikipedie HTTP/1.1 Host: cs.wikipedia.org User-Agent: Opera/9.80 (Windows NT 5.1; U; cs) Presto/2.5.29 Version/10.60 Accept-Charset: UTF-8,* Často ale potřebujeme také odeslat serveru data, se kterými by mohl vyžádaný soubor pracovat. K tomu se nejčastěji používají formuláře. U formuláře si můžeme vybrat ze dvou způsobů jeho odeslání: 1. metoda GET - data se zakódují do URL adresy. Celková délka požadavku GET je 512 bajtů, proto se nehodí pro odesílání obsáhlejších dat. 2. metoda POST - data se vloží do těla HTTP dotazu. Používá se tam, kde potřebujeme odeslat více než 512 b. Při použití této metody data nejsou vidět v URL adrese. Hlavičky a funkce header() Požadavek se skládá mimo jiné z hlaviček. Ty mohou obsahovat některé důležité věci o tazateli (tedy prohlížeči) nebo o jeho prostředí. PHP umí zjistit, jaké hlavičky byly v požadavku, a umí je zobrazit. Slouží k tomu funkce getallheaders()
<? $hlavicky = getallheaders(); while (list ($nazev, $hodnota) = each ($hlavicky)) echo "$nazev: $hodnota<br>\n";?> Funkce header() se používá pro odesíláni hlaviček HTTP. Pamatujte na to, že tato funkce musí být zavolána před odesláním jakýchkoliv dat (HTML tagů, bílých znaků, výstupu z PHP,...). Problém nastane i v případě, že máme v souboru před tagem <?php prázdný řádek! Použití: Přesměrování: header("location: http://www.example.com/"); Chybová stránka typu stránka nenalezena : header("status: 404 Not Found"); Výstup je ve formátu PDF header('content-type: application/pdf'); Výstupem bude soubor pojmenovaný downloaded.pdf header('content-disposition: attachment; filename="downloaded.pdf"'); Technologie Ajax Asynchronous JavaScript and XML, jméno AJAX vzniklo v roce 2005 JavaScriptu na straně klienta umožňuje volat v pozadí server a podle potřeby tak získat potřebná data (aktualizace stránek bez nutnosti opětovného načítání celé stránky) Jedná se o propojení JavaScriptu na straně klienta a serverového PHP. Problémy: nefunguje v prohlížečích bez JavaScriptu obtížné vkládání do oblíbených položek špatná spolupráce s vyhledávacími stroji
Použití: Abychom mohli vytvářet asynchronní požadavky na server, musíme nejprve vytvořit objekt XMLHttpRequest. var xmlhttp = vytvorxmlhttprequestobject(); //uchovava instanci /* vytvoření instance XMLHttpRequest */ function vytvorxmlhttprequestobject() var xmlhttp; try xmlhttp = new XMLHttpRequest(); // pro novější než IE6 catch(e) // pro prohlížeče IE6 a starší var verze = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); // snažíme se vytvořit co nejnovější verzi for (var i=0; i<verze.length &&!xmlhttp; i++) try xmlhttp = new ActiveXObject(xmlHttpVersions[i]); catch(e) alert("chyba při vytváření objektu XMLHttpRequest"); if (!xmlhttp) alert("objekt XMLHttpRequest se nepodařilo vytvořit"); else return xmlhttp;
Důležité metody a vlastnosti objektu XMLHttpRequest: metoda XMLHttp.open() Používá se pro deklaraci požadavku. vlastnost XMLHttp.onreadystatechange Zde nastavujeme adresu funkce, která se má zavolat po změně stavu objektu. metoda XMLHttp.send(data) Slouží pro odeslání požadavku. vlastnost XMLHttp.responseText Obsahuje odpověd serveru uloženou jako řetězec. vlastnost XMLHttp.status Vrátí stavový kód požadavku (bez chyby = 200) Tělo požadavku může být ve formátu: textový řetězec zaslaný metodou GET textový řetězec zaslaný metodou POST XML dokument zaslaný metodou POST function process() if (xmlhttp) try // načtení souboru ze serveru xmlhttp.open("get", "async.txt", true); xmlhttp.onreadystatechange = handlerequeststatechange; xmlhttp.send(null); catch(e) alert("chyba při připojování na server" + e.tostring()); /* pro metodu POST xmlhttp.open("post", "http://localhost/ajax/test.php", true); xmlhttp.onreadystatechange = handlerequeststatechange;
xmlhttp.send("param1=x¶m2=y"); */ Stavy požadavku a zpracování odpovědi serveru: můžeme získat informaci o stavu zpracování požadavku readystate = vrátí stav požadavku: 0 = neinicializovaný... uninitialized 1 = zavádí se... loading 2 = je zaveden... loaded 3 = přechodný... intermediate (část. přijata) 4 = kompletní... complete některé prohlížeče nepodporují všechny stavy sledujeme jen stav 4, ten je podporován vždy musíme ještě ověřit, že během zpracování nedošlo k chybě: vlastnost status je rovna hodnotě 200 popis stavu je uložen v proměnné statustext, můžeme použít při vypsání chyby function handlerequeststatechange() if (xmlhttp.readystate == 4) if (xmlhttp.status == 200) try // zpracování odpovědi alert("server odpověděl: " + xmlhttp.responsetext); catch(e) alert("chyba čtení odpovědi" + e.tostring()); else alert("při zpracování na serveru došlo k chybě: " + XMLHttpRequest.statusText);
Formuláře v HTML základní prvky, vlastnosti, způsoby zpracování formuláře Formuláře se v HTML zapisují do tagu form. Form je párovým tagem, který uvozuje a ukončuje formulář. Pro funkčnost formuláře je naprosto nezbytným tagem. <form action=./index.php method= GET >.. </form> V parametru action uvádíte cestu a název skriptu, který má data z formuláře zpracovat. Parametr Method slouží k určení metody, jak mají být data odeslána - na výběr máte metodu post a get. V případě použití post se data odešlou na server v těle HTTP dotazu. Pokud použijete metodu get, data s formuláře se vloží do URL adresy (adresní řádky prohlížeče). Input U základního tagu formuláře můžeme určit o jaký konkrétní druh se jedná pomocí atributu type. text - textové pole, můžeme omezit jeho max. délku pomocí size. <input type= text name= pole size= 10 value= přednastavená hodnota > hidden - skrytý element; možno použít např. stejně jako cookie <input type= hidden name= skryty value= id-1 > password - heslo; při psaní do tohoto elementu se místo znaků zobrazují pouze tečky <input type= password name= heslo > checkbox - zaškrtávací políčko; pokud není zaškrtnuto tak se neodesílá. Pokud použijeme atribut checked tak bude pole po načtení zaškrtnuté. <input type="checkbox" value="odber-novinek" checked> radio - výběr z více možností; Elementy, ze kterých si má uživatel vybrat, musí mít shodné jméno. Pro předdefinovaný elemtent použijeme atribut default. <input type="radio" name="oblibeny-jazyk" value="c++" default> <input type="radio" name="oblibeny-jazyk" value="java"> submit - tlačítko pro odeslání formuláře. <input type="submit" value="odeslat"> reset - tlačítko pro vynulování formuláře na původní hodnoty <input type="reset" value="reset">
TextArea Párový tag textarea se hlavně používá pro větší množství textu. Jeho syntaxe je následující: <textarea cols="cislo" rows="cislo" name="jmeno" wrap="off/virtual/ physical">implicitní text</textarea> Parametr Cols udává počet znaků - tedy šířku textového pole. Rows udává naopak počet řádků. Wrap znamená druh zalomení - implicitní hodnota, která se nemusí zadávat je "physical". V takovém případě se text zalamuje podle velikosti textového pole a automaticky zalomené řádky jsou poslány na server jako skutečné zalomení. V případě použití "virtual" se text rovněž automaticky zalamuje, nicméně na server je text poslán jako jeden řádek (pokud nestisknete sami klavesu enter - pak se daný řádek zalomí) a p případě použití "off" se text nezalamuje vůbec Pokud chcete vložit do textarea nějaký předem připravený text, vložte jej mezi tagy <textarea> a </textarea> Select Párový tag select slouží k vytvoření roletového menu, ze kterého vybíráte jednotlivé položky. Jednotlivé položky se tvoří pomoci <option>. Příklad použití je zhruba následující: <select> <option> Položka jedna </option> <option> Položka dva </option> </select> Parametry tagu select jsou name="hodnota" a multiple. Name slouží pouze pro účely skriptu, který bude formulář zpracovávat. Pokud vložíte multiple, bude vybírat více položek současně pomocí kurzoru myši. Parametr size určuje velikost rolovacího menu - tedy kolik položek se zobrazí současně.