Základy HTML, URL, HTTP, druhy skriptování, formuláře

Transkript

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&param2=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>
<option>
</select>
Položka jedna </option>
Položka dva
</option>
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ě.

Základy HTML, URL, HTTP, druhy skriptování, formuláře

Transkript

Podobné dokumenty

(Microsoft PowerPoint - 07-JavaScript.ppt [Re\236im kompatibility])

Greasemonkey

Tvorba webových aplikací pomocí AJAX

Porovnání klasických konstrukcí – typy

Prezentace aplikace PowerPoint

prezentace

Úprava textu - People(dot)tuke(dot)sk

on-line interview