1 of 13

Tvorba webu IX.

Mgr. Michal Jakl

LS 2022

2 of 13

Obsah lekce

  1. jQuery
  2. JavaScript + PHP -> AJAX
  3. Polohové služby
  4. Identifikace uživatele
  5. .htaccess

​

​

​

​

​

​

Praktické cvičení: Využití JavaScriptu pro webové projekty

3 of 13

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 13

1. jQuery - připojení

  • Knihovnu můžeme buď stáhnout a umístit na své stránky nebo na ní můžeme linkovat.
  • Často se odkazuje na web Google, kde je tato knihovna nahrána.
    • Má to značnou výhodu, protože všichni, co používají Google mají tuto knihovnu již načtenou v cache prohlížeče.
    • Načtení našeho webu bude tedy rychlejší a pro nás je to méně práce.
    • Stačí do hlavičky naší HTML stránky vložit následující kód:

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/VERZE/jquery.min.js"></script>

​

    • Tímto jsme knihovnu načetli a můžeme ji používat.

Stažení zde

5 of 13

1. jQuery – události (výběr)

  • click() - Vyvolá se při kliknutí myší a to nejen na tlačítko, ale na libovolný element (např. obrázek).
  • dblclick() - Vyvolá se při dvojkliku.
  • change() - Vyvolá se, pokud se změnil obsah nějakého formulářového prvku.
  • focus() - Vyvolá se, když se na formulářové pole klikne (zaktivní se).
  • blur() - Vyvolá se, když se formulářové pole opustí.
  • mouseenter() - Vyvolá se ve chvíli, kdy na element najedeme myší.
  • mouseleave() - Vyvolá se ve chvíli, kdy kurzor element opustí.
  • keydown() - Vyvolá se ve chvíli stisknutí klávesy.
  • keypress() - Vyvolává se když klávesu držíme.
  • keyup() - Vyvolá se ve chvíli puštění klávesy.
  • resize() - Vyvolá se při změně velikosti okna prohlížeče.
  • scroll() - Vyvolá se při scrollování stránkou v prohlížeči.

Více zde

6 of 13

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

​

7 of 13

2. AJAX – příklad volání

var data = {

bar : 'bar value',

time: calculatedTimeStamp,

hash: calculatedHash,

uid: userID,

sid: sessionID,

iid: itemID

};

​

$.ajax({

method: 'POST',

crossDomain: true,

dataType: 'json',

crossOrigin: true,

async: true,

contentType: 'application/json',

data: data,

headers: {

'Access-Control-Allow-Methods': '*',

"Access-Control-Allow-Credentials": true,

"Access-Control-Allow-Headers" : "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization",

"Access-Control-Allow-Origin": "*",

"Control-Allow-Origin": "*",

"cache-control": "no-cache",

'Content-Type': 'application/json'

},

url: 'https://yoururl.com/somephpfile.php',

success: function(response){

console.log("Respond was: ", response);

},

error: function (request, status, error) {

console.log("There was an error: ", request.responseText);

}

});

8 of 13

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

​

9 of 13

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

10 of 13

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é.

​

​

11 of 13

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

12 of 13

Praktické cvičení + cvičení na doma

Vytvořte pro svůj web rozhraní pro záznam návštěvnosti (tedy záznam do databáze i výpis z databáze)

13 of 13

mail@mjakl.cz

Tel. 608 544 839

Web: mjakl.cz

Telegram: t.me/mikimikimikia

Děkuji za pozornost a těším se příště!��Prostor pro zpětnou vazbu