2 of 17

Obsah lekce

JavaScript + PHP -> AJAX
Polohové služby
Identifikace uživatele
.htaccess

Praktické cvičení: Využití AJAXu pro webový projekt

3 of 17

1. jQuery

veřejně přístupná a volně šiřitelná JS knihovna, určená pro rychlejší a snazší práci.
DOM = objektově orientovaná reprezentace XML nebo HTML dokumentu). DOM umožňuje dynamicky vkládat obsah na webové stránky či aplikace, nahrazovat ho, klonovat, odstraňovat a měnit.

4 of 17

Sbohem, jQuery...

5 of 17

2. JavaScript + PHP -> AJAX

AJAX = Asynchronous JavaScript And XML.

Tedy označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich kompletního znovunačítání za pomoci asynchronního zpracování webových stránek

AJAX není programovacím jazykem!
Poprvé se veřejně objevil v dubnu 2005. Myšlenky, na kterých je AJAX založen, jsou však výrazně starší.
= DOM + XHR

XMLHttpRequest (XHR) = rozhraní umožňující webovým aplikacím komunikaci mezi serverem a klientem prostřednictvím protokolu HTTP

6 of 17

Praktické cvičení – Zadání

Cíl: Načíst a zobrazit seznam fiktivních uživatelů z veřejného API.
API Endpoint (URL): https://jsonplaceholder.typicode.com/users

Úkoly:

Vytvořte v HTML tlačítko s textem „Načíst uživatele“ a prázdný seznam <ul>.
Pomocí JavaScriptu (Fetch API) zachyťte kliknutí na tlačítko.
Pošlete asynchronní požadavek na API.
Získaná JSON data projděte pomocí cyklu a pro každého uživatele vytvořte element <li> s jeho jménem (user.name), který přidáte do seznamu.

7 of 17

Praktické cvičení – Pojmy

8 of 17

Praktické cvičení – Řešení

9 of 17

Praktické cvičení – Moderní řešení

Čitelnost a přehlednost
Jednotné chytání chyb (try...catch)
Snazší debuggování (hledání chyb)
Jednoduchost v cyklech

10 of 17

Praktické cvičení – odeslání s parametry

GET

POST

11 of 17

3. Polohové služby

Jednou z novinek v HTML5 je geolokační rozhraní
Jednoduchá služba pro různé webové aplikace, pracující s aktuální polohou uživatelů. Se svolením uživatelů lze jednorázově nebo opakovaně získat jejich aktualizovanou polohu pomocí dat z GPS, mobilních sítí, Wi-Fi a podobně
Funkce vrací polohu získanou zařízením dle IP, Wi-Fi či GPS
Umožňuje například i opakované získávání polohy

12 of 17

4. Identifikace uživatele

var userAgent = window.navigator.userAgent,

platform = window.navigator.platform,

macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],

iosPlatforms = ['iPhone', 'iPad', 'iPod'],

os = null;

if (macosPlatforms.indexOf(platform) !== -1)

{ os = 'Mac OS'; }

else if (iosPlatforms.indexOf(platform) !== -1)

{ os = 'iOS'; }

else if (windowsPlatforms.indexOf(platform) !== -1)

{ os = 'Windows'; }

else if (/Android/.test(userAgent))

{ os = 'Android'; }

else if (!os && /Linux/.test(platform))

{ os = 'Linux'; }

Zjištění OS uživatele pomocí JS

$actual_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

Aktuální URL pomocí PHP

$ip = $_SERVER['REMOTE_ADDR‘];

IP adresa uživatele pomocí PHP

13 of 17

5. .htaccess

Soubor .htaccess je zvláštní textový soubor určený k tomu, aby si autor stránek mohl sám upravit některé vlastnosti serveru bez toho, aby o to žádal správce.

Soubor .htaccess umístěný v určitém webovém adresáři dovoluje autorovi webu upravit chování adresáře stejnými instrukcemi, které se normálně píšou do konfiguračního souboru serveru.
Adresář se potom bude chovat jinak, aniž by to správce serveru musel sám nastavovat.
Tento soubor a instrukce v něm tedy vždy platí pouze pro daný adresář a adresáře v něm umístěné (pokud některý z nich obsahuje vlastní .htaccess soubor!

Podmínky fungování:

Na serveru (hardwarovém stroji) musí běžet server Apache (softwarový program)
Admin musí v souboru http.conf povolit, že hostující uživatelé smějí .htaccess používat

V některých operačních systémech (tj. na Linuxu, Unixu a na jejich klonech) se soubory začínající tečkou považují za skryté. Proto tečka na začátku názvu. A opravdu nemá příponu souboru ☺
I když .htaccess funguje, mohou být některé věci nefunkční. Spousta funkčností totiž závisí na modulech, které jsou na serveru nainstalované.

14 of 17

5. .htaccess – zajímavé funkce

chybové stránky
přesměrování (i složitější)
kešování souborů
ochrana adresáře heslem
zákaz přístupu z určitých IP adres nebo povolení jenom některých
zapnutí nebo vypnutí procházení adresářů
nastavení jiného výchozího souboru namísto index.html
komprese přenášení souborů

deny from 123.156.189.123

1 of 17