Tvorba internetových aplikací

Jakub Klinkovský

:: České vysoké učení technické v Praze
:: Fakulta jaderná a fyzikálně inženýrská
:: Katedra softwarového inženýrství

Akademický rok 2022-2023

Skriptovací technologie

Od statických stránek k dynamickým aplikacím

Jazyk HTML byl navržen jako statický pro poskytování neměnného obsahu. Postupně vznikly různé skriptovací technologie, které umožňují generovat a/nebo měnit obsah dynamicky.

Skriptovací technologie

  • na straně klienta (kód je prováděn přímo v prohlížeči bez zapojení serveru, přístup k objektové reprezentaci dokumentu)
    Použití: změna stránky v reakci na vstup uživatele (kliknutí myši, stisknutí klávesy)

  • na straně serveru (komunikace pomocí formulářů a URL parametrů, server vygeneruje a odešle příslušný HTML dokument)
    Použití: změna stránky na základě parametrů, datech z formuláře, stavu databáze, uplynulého času, atd.

Statický vs dynamický web server

  1. Statický web server:
    • odesílá pouze soubory uložené na disku
    • adresa URL je převedena na cestu v souborovém systému
    • nepotřebná vstupní data (URL parametry, formuláře) se ignorují
    • velmi jednoduchý, efektivní, bezpečný
  2. Dynamický web server:
    • požadavky předává nakonfigurovanému programu včetně všech vstupních dat
    • složitá konfigurace, velké množství protokolů a rozhraní
    • riziko zahlcení a bezpečnostních děr
    • může převzít úlohu statického web serveru

Skriptovací technologie na straně serveru

  1. Dynamický web server (software) – např. Apache, Nginx, Microsoft IIS
  2. Rozhraní pro spuštění programu na serveru
  3. Program v daném skriptovacím jazyku
  4. Databázový systém, souborový systém, operační systém...
  • Možnosti: plnohodnotné aplikace, spolupráce s formuláři, databázemi, soubory na serveru a s elektronickou poštou
  • Potřebné znalosti: HTML, komunikace mezi HTML a serverem (URL, formuláře, HTTP protokol), zkušenost s programováním, případně databáze a OS

Nejběžnější operační systém pro web servery

Systém Podíl
Unix 80.7%
Windows 19.6%

Poznámka:
Unix = Linux + BSD + Darwin + macOS + HP-UX + Solaris + Minix + Unknown

Nejběžnější web servery

Server Podíl
Nginx 34.2%
Apache 32.6%
Cloudflare Server 20.2%
LiteSpeed 11.6%
Microsoft-IIS 5.7%
Node.js 2.0%
Google Servers 1.0%

CGI (Common Gateway Interface)

  • rozhraní, které definuje způsob spuštění programu a předání dat mezi WWW serverem a CGI skriptem = programem, který generuje HTML dokumenty
  • formát pro předávání parametrů je složitý
  • pro psaní skriptů se používaly interpretované jazyky nebo příkazové shelly Unixu (typicky Perl, ale i C++, ...)
  • správa větších aplikací je programátorsky náročná
  • vytlačen „lepšími“ technologiemi – FastCGI, SCGI
  • v současné době mají nejpopulárnější skriptovací jazyky vlastní API, např. PHP FastCGI Process Manager, Python WSGI nebo ASGI, ASP.NET HTTP Handler, ...

SSI (Server Side Includes)

SSI je jednoduchý skriptovací jazyk, kde se do HTML stránky zadávají jednoduché příkazy (jako HTML komentáře). Patří k nejstarším skriptovacím jazykům.

Příklad:

<!--# if expr="$name = /(.+)@(?P<domain>.+)/" -->
    <!--# echo var="1" -->
    <!--# echo var="domain" -->
<!--# endif -->
<!--# include file="footer.html" -->
  • typická přípona .shtml, .stm, nebo .shtm
  • výhoda: pokud server nebyl schopen provést SSI, uživatel viděl alespoň neinterpretovaný obsah stránky
  • nevýhoda: nelze zpracovávat data od uživatele

Nejběžnější serverové skriptovací jazyky

Jazyk Podíl 2022 Podíl 2023
PHP 78.1% 77.6%
ASP.NET 7.9% 7.2%
Ruby 6.0% 5.1%
Java 3.7% 4.7%
Scala 2.3% 2.9%
JavaScript 1.8% 2.0%
static files 1.5% 1.9%
Python 1.4% 1.4%

PHP

PHP = PHP: Hypertext Preprocessor je skriptovací jazyk, který je navržený přímo pro programování webových aplikací.

  • open-source, multiplatformní
  • příkazy se zadávají do HTML mezi tagy <?php a ?>
  • rychlý vývojový cyklus, současná verze 8.2 (prosinec 2022)
  • výhody:
    • velké množství dostupných frameworků
    • vestavěné funkce zaměřené na výkon a bezpečnost
  • nevýhody:
    • není vhodný pro vývoj desktopových a mobilních aplikací
    • nestačí jazykům jako Python nebo Ruby co do počtu dostupných knihoven

ASP, ASP.NET, ASP.NET Core

ASP (Active Server Pages) je první serverový skriptovací jazyk od Microsoftu.

  • příkazy se zadávají do HTML mezi značky <% a %>

ASP.NET je framework firmy Microsoft pro vývoj webových aplikací.

  • rozšiřuje ASP o mnoho nových možností: práce s plnohodnotnými jazyky a .NET Frameworkem – rozsáhlý objektový model, přes který se pracuje s databázemi, soubory, cookies, sessions, grafikou atd.
  • open-source

ASP.NET Core

  • modulární reimplementace frameworku ASP.NET
  • open-source

Java, Scala

Java je obecný objektový programovací jazyk a s ním související platforma kombinující různé technologie pro vývoj velkých aplikací. V současnosti je populární pro tvorbu webových aplikací postavených na architektuře klient-server.

  • nevýhoda: komplikovaný systém
  • výhoda: umožňuje provozovat více serverů v rámci jedné aplikace
  • aplikační servery jsou od různých dodavatelů

Scala je objektový a funkcionální programovací jazyk, který lze provozovat na platformě Java. Populární framework pro vývoj webu je Play!

JavaScript

První pokusy použít JavaScript na serveru: SSJS (server-side JavaScript) od firmy Netscape, JScript a JScript.NET od firmy Microsoft.

V současnosti je nejpoužívanější prostředí Node.js:

  • výkonný engine V8 z Google Chrome
  • open-source
  • multiplatformní (MS Windows, GNU/Linux, macOS, Android, ...)
  • hojně využívá model událostí a asynchronní I/O operace (minimalizace režie procesoru, maximalizace výkonu)
  • velký ekosystém dostupných knihoven

Ruby on Rails

Ruby („rubín“) je obecný, vysokoúrovňový, dynamický, interpretovaný programovací jazyk vziklý roku 1995 v Japonsku.

Ruby on Rails je vysokoúrovňový framework pro vývoj webových aplikací, který používá návrhový vzor MVC (model-view-controller) a filozofii CRUD (create, read, update, delete)

  • ke spuštění webové aplikace stačí databáze a WWW server
  • základní princip: konvence má přednost před konfigurací (programátor konfiguruje pouze ty části aplikace, které se liší od běžného nastavení)
  • další princip: don't repeat yourself

Python

Python je obecný, vysokoúrovňový, dynamický, interpretovaný programovací jazyk navržený s důrazem na čitelnost kódu. Jeho principy jsou shrnuty v dokumentu Zen of Python.

Skriptovací technologie na straně klienta

  • Příklady: JavaScript, WebAssembly, VBScript, ActionScript, Flash, ...
  • Požadavky: podpora prohlížeče a uživatele (ten nesmí mít zakázáno používání klientských skriptů)
  • Možnosti: stejné jako skriptování na straně serveru (kompletní kontrola nad objektovou reprezentací dokumentu, možnost asynchronního načítání zdrojů)
  • Potřebné znalosti: HTML, základy programování, CSS

Princip webových aplikací s klientskými skripty

  1. Klient (prohlížeč na počítači uživatele) načte HTML dokument, ke kterému jsou připojeny skripty.
  2. Během načítání a renderování dokumentu klient také načítá a vykonává skripty.
  3. Skripty pracují s objektovým modelem dokumentu (DOM), který mohou měnit.
  4. Skripty mohou využívat AJAX (Asynchronous JavaScript and XML)
    • koncept je postaven na technologiích: HTML a CSS (prezentace uživateli), DOM (reprezentace stavu), JSON nebo XML (výměna dat), XMLHttpRequest (asynchronní komunikace se serverovou částí aplikace), JavaScript

Document Object Model (DOM)

center contain

Asynchronous JavaScript and XML (AJAX)

center contain

Representational state transfer (REST)

REST je popis softwarové architektury, který se snaží definovat „standardní“ chování webových aplikací. Ne všechny služby mu odpovídají.

Je založen na šesti omezeních:

  1. komunikace mezi klienty a servery – předpoklad nějakého API
    (oddělení zodpovědnosti, klientská část má na starosti UI, server se stará o data)
  2. bezstavová komunikace – vede k efektivitě
    (server neudržuje informace o session, ty musí přijít v každém požadavku)
  3. cacheování – vede k efektivitě a škálovatelnosti
    (opakované požadavky lze eliminovat po dobu platnosti daného zdroje)
  4. jednotné rozhraní (identifikace zdrojů pomocí URI, DOM, media type, HATEOAS)
  5. vrstvený systém (proxy, load balancer, content delivery network)
  6. code on demand (přenos spustitelného kódu – skriptování na straně klienta)

REST v praxi

API splňující požadavky konceptu REST se označují jako „RESTful“. Např. MediaWiki.

Protipříklady:

  • kódování údajů o uživatelském stavu (session) do URL porušuje REST a může negativně ovlivnit cacheování a škálovatelnost serverové aplikace
  • HTTP cookies často porušují REST – mohou se desynchronizovat
  • ignorování hypertextu, media type, návratových kódů, a další protipříklady

Nevýhody:

  • komplikované udržování stavu na straně klienta
  • neřeší bezpečnost

JavaScript

Úvod do skriptování na straně klienta

JavaScript

JavaScript je klientský skriptovací jazyk vyvinutý společnostmi Netscape a Sun roku 1995. První standardizovaná verze ECMAScript 1997, aktuální ECMAScript 2021.
Více o historii: w3schools, zdrojak.cz.

Charakteristiky jazyka:

  • dynamicky typovaný
  • objektově orientovaný
  • case-sensitive (rozlišuje velikost písmen klíčových slov, identifikátorů, atd.)
  • interpretovaný, resp. just-in-time kompilovaný (multiplatformní)

Poznámka: Funguje, když uživatel nevypnul podporu JavaScriptu v prohlížeči.

Příklady použití JavaScriptu

  • validace dat zadaných uživatelem do formuláře, která se provede před jeho odesláním na server (kontrolu provede prohlížeč, a proto odpadá HTTP dotaz + čekání na odpověď v případě chybně zadaných dat)
  • reakce na události přicházející od uživatele (např. se schová či odkryje nějaký text, otevře se nové okno, ...)
  • tvorba jednostránkových aplikací pro webový prohlížeč (AJAX)

JavaScript: výhody

  • může modifikovat, přidávat a odebírat libovolné elementy v dokumentu
  • může reagovat na události (např. kliknutí, změna dat ve formuláři)
  • může měnit některé vlastnosti prohlížeče (např. text ve stavovém řádku)
  • pomáhá eliminovat komunikaci se serverem (zpracování kódu přímo v prohlížeči)
  • možnost načtení části stránky ze serveru (AJAX)

JavaScript: omezení

  • nemá přístup k souborovému systému uživatele (bezpečnostní riziko)
  • uživatel jej může v prohlížeči zakázat
  • kompatibilita mezi verzí jazyka a verzí prohlížeče
  • nemůže trvale ukládat data (stav aplikace) – jediné spolehlivé a bezpečné úložiště je na serveru

Začlenění JavaScriptu do HTML

Začlenění do webové stránky napsané v HTML:

  1. Externí soubor připojený pomocí značky script:

    <script src="soubor.js" type="text/javascript"></script>

  2. Interní skript napsaný uvnitř značky script.

  3. Kód napsaný v hodnotě vhodného atributu nějaké značky. Většinou se týká událostí. Např. <input onclick="funkce()">

Značka script se může vyskytovat ve značce head (typické použití) nebo i ve značce body (umístění na konec dokumentu pro optimalizaci přístupnosti).

Syntaxe JavaScriptu

Syntaxe jazyka JavaScript je podobná jazykům C/C++/Java.

Základy:

  • Komentář
    • jednořádkový: // text poznámky
    • víceřádkový: /* text dlouhé poznámky */
  • Výraz se tvoří z konstant, proměnných, operátorů a volání funkcí.

Proměnné

Deklarace proměnné se provádí pomocí klíčových slov var, let, nebo const, možno i s inicializací. Deklarace proměnné není povinná, stačí přiřazení. Datový typ se rozpozná automaticky.

Příklady:

var x;
let x2 = undefined;
const a = "this value cannot be reassigned";

Název musí začínat písmenem (resp. podtržítkem), poté lze použít i číslice.

Datové typy

Primitivní datové typy:

  • Undefined (nedefinovaný typ): speciální hodnota undefined
  • Number: 1, 2.3, 3e4, atd. (pouze 64-bitová s plovoucí desetinnou čárkou)
  • BigInt: 9999999999999999n, BigInt(1234567890123456789012345)
  • String: "já jsem string", 'já jsem taky string'
    (řetězec ve dvojitých uvozovkách interpretuje metaznaky, např. \n)
  • Boolean: true a false
  • Symbol

Další datové typy: Object (zahrnuje vše ostatní, včetně funkcí)

Operátory

  1. řetězcové: + (spojení řetězců)
  2. aritmetické:
    • unární: +, -, ++, --,
    • binární: +, -, *, / (neceločíselné), % (zbytek po dělení), ** (mocnění)
  3. bitové: ∼ (negace), & (and), | (or), ^ (xor)
  4. bitové posuny: <<, >>, >>>
  5. logické (mají zkrácené vyhodnocování): ! (negace), && (and), || (or), podmíněný operátor: c ? t : f
  6. relační: >, <, >=, <=, ==, !=, ===, !==
  7. přiřazovací: = a kombinace s binárním operátorem (např. +=),
  8. a další...

Priorita operátorů

Priorita operátorů (od nejvyšší po nejnižší, na téže úrovni zleva doprava):

  1. závorky ()
  2. unární operátory: ! ∼ - ++ --
  3. * / %
  4. binární aritmetické operátory: + (řetězce!) + (čísla) - (čísla)
  5. << >> >>>
  6. <= >= < >
  7. == === != !===
  8. & ^ |
  9. && || ?:
  10. = += -= atd.
  11. , (operátor čárka, např. uvnitř kulatých nebo hranatých závorek)

Řízení běhu skriptu I

  • Podmíněný příkaz if-else
    Příklad:
    if (a < 5)
  b += 2;
else // nepovinná část
  b = 0;
  • Přepínač switch
    Příklad:
    switch (a) {
  case 1: b = 5; c = 10; break;
  case 2: b = 7; break;
  default: b = 0; // nepovinná část
}

Řízení běhu skriptu II

  • Cyklus for
    Příklad:
    for (let i = 0; i < 10; i++) {
  b += 4;
  t += "ha";
}

// iterování přes prvky pole
const items = ["a", "b", "c"];
for (let i in items) {
  text += items[i];
}

// iterování přes atributy objektu
const person = {fname: "John", lname: "Doe", age: 25};
for (let key in person) {
  text += person[key];
}

Řízení běhu skriptu III

  • Cyklus while s podmínkou na začátku      Příklad:
    while (a < 5) {
  text += a + "a";
  a++;
}
  • Cyklus do-while s podmínkou na konci     Příklad:
    do {
  b += 3;
  a--;
} while (a > 3); // provede se alespoň 1x
  • Příkazy continue a break

Uživatelské funkce

  • definice a deklarace nové funkce:
    function jmeno(vstup1, vstup2...) {
  příkazy_těla_fce
}
    • Vstupů může být libovolné množství nebo nemusí být žádný (závorky povinné, třebaže prázdné).
    • Je-li mezi příkazy těla funkce uveden příkaz return x;, pak funkce vrátí hodnotu výrazu x a skončí.
    • Funkce smí vrátit nejvýše jednu hodnotu.
  • volání funkce: výraz jmeno(hodnoty_vstupů) (výsledek může být undefined)

Více na w3schools: JavaScript function Statement nebo JavaScript Functions.

Nativní objekty

  • null

  • Array: const array_name = [item1, item2, ...];

  • Date: const d = new Date("2022-03-25"); (celkem 9 různých „konstruktorů“)

  • Error: throw new Error("Something went wrong.");

  • Math: Math.PI atd.

  • Regular Expression: /pattern/modifiers;

  • Function: var add = function(x, y) { return x + y; };

Uživatelské objekty

Zápis pomocí JSON (JavaScript Object Notation):

const person = {
  name: {
    first: "John",
    last: "Doe"
  },
  age: 25,
  hobbies: ["chess", "programming"]
};

Přistup k atributům:

  • pomocí tečky: person.name.first
  • pomocí hranatých závorek: person["name"]["first"]

Jiné způsoby definice objektů: viz w3schools.

JavaScript v prostředí prohlížeče

JavaScript = ECMAScript + BOM + DOM

  • window = objekt poskytující interakci s prohlížečem (browser object model, BOM)
    • document = objekt reprezentující obsah dokumentu (DOM)
    • location – objekt reprezentující aktuální URL
    • history – poskytuje rozhraní pro navigaci mezi navštívenými stránkami
    • navigator – sada vlastností prohlížeče
    • ...

JavaScript v prostředí prohlížeče

center contain

Práce s objektovým modelem dokumentu (DOM)

Přístup k jednotlivým objektům: tečková notace. Např. window.document.body. Jelikož všechny objekty jsou potomky window, lze tento vynechávat: document.body.

Přístup k elementům v dokumentu:

  • document.children – kolekce potomků (začíná od <html>)
  • document.head, document.body – elementy <head> a <body> v HTML
  • document.forms, document.images, document.links – kolekce elementů
  • vyhledávací metody getElementById(), getElementsByClassName(),
    getElementsByName(), getElementsByTagName(), getElementsByTagNameNS()

Reprezentace elementů v DOM

  • obecný objekt Element – „base třída“ pro všechny elementy
    • atributy children, parentElement, outerHTML, innerHTML, innerText, textContent, ...
    • metody hasAttribute(), setAttribute(), removeAttribute(),
      appendChild(), removeChild(), contains(), ...
  • každá značka má svůj vlastní objekt se svými atributy
    • např. značka <a> je reprezentovaná objektem Anchor s atributy href, hostname, atd.

Příklad: vytvoření a přidání nového elementu

// vytvoření
var e = document.createElement("p")

// nastavení textu
e.innerText = "Hello, world!"

// nastavení atributů
e.style = "color: red;"

// přidání do dokumentu
document.body.appendChild(e)

Poznámka: Vysokoúrovňové frameworky pro tvorbu UI umožňují poskytují pohodlnější a efektivnější způsob pro vytváření elementů a obecně pro interakci s DOM (viz dále).

Zajímavosti k formulářům I

JavaScriptem lze skrýt některé prvky formuláře. Pak ale jejich hodnoty nebudou odeslány na server!

Validace dat z formuláře:

  1. Vytvoříme funkci pro kontrolu jednotlivých položek formuláře (funkci zapíšeme např. do samostatného souboru, který připojíme ke stránce).
  2. V atributu onsubmit značky form uvedeme kód, kde použijeme vytvořenou funkci a předáme jí objekt this (toto klíčové slovo zastupuje aktuální objekt).
  3. Pokud chceme znemožnit odeslání chybných dat na server, tak v atributu onsubmit můžeme vrátit false. Např. pokud kontrola vrací true/false:
    <form onsubmit="return kontrola(this)">

Viz také atributy a metody objektu form.

Zajímavosti k formulářům II

Tipy k funkci pro kontrolu dat ve formuláři:

  • vstupem funkce může být objekt, který zastupuje celý formulář (ten pak funkci předáme při jejím volání)
  • funkce by měla vracet true nebo false
  • přístup k hodnotám elementů input poskytuje atribut value
  • pro pokročilejší kontroly textových údajů lze využít regulární výrazy

Interakce s uživatelem

JavaScript může být s uživatelem v interakci prostřednictvím:

  • formulářů v HTML (JavaScript slouží pro kontrolu dat před odesláním na server, pro doplnění položek formuláře na žádost uživatele, ...)
  • dialogových oken (viz dále)
  • změny objektového modelu dokumentu (DOM) – lze např. přidávat a odebírat elementy, měnit jejich atributy a obsah (text)

Dialogová okna v JavaScriptu

Pomocí JavaScriptu lze uživateli zobrazit tři typy dialogových oken:

  1. funkce alert(): informační okno se zprávou (uživatel jej uzavře kliknutím na OK), např. alert("Hello, world!");
  2. funkce confirm: okno s otázkou a volbou ano/ne (resp. OK/Storno), např.
    let vysledek = confirm("Chcete pokračovat?");
  3. funkce prompt: okno pro zadání textu s výchozí hodnotou, např.
    let jmeno = prompt("Zadej jméno: ", "John");

Další zdroje informací

Frameworky a nadstavby pro tvorbu webu

Preprocesory CSS

Preprocesory CSS jsou stylovací jazyky, které se „překládají“ do jazyka CSS. Oproti CSS poskytují pokročilejší funkce a/nebo jednodušší, čitelnější syntaxi.

Příklady: LESS, SASS, Stylus.

Základy:

– An Introduction to CSS Pre-Processors: SASS, LESS and Stylus
– Popular CSS Preprocessors With Examples: Sass, Less & Stylus

české články:

Nadstavby JavaScriptu

  • Dart (Google)
    • statické typování, lze kompilovat do nativního kódu nebo JavaScriptu
  • CoffeScript
    • podobný Pythonu, Ruby či Lispu, kompilace do JavaScriptu
  • TypeScript (Microsoft)
    • statické typování, rozšíření syntaxe JavaScriptu

Další jazyky ovlivněné JavaScriptem: Wikipedia

Frameworky pro HTML a CSS

Knihovny umožňující rychlý design webu. Poskytují jednotný/standardní vzhled a layout, ale dají se konfigurovat, rozšířit nebo upravit vlastním potřebám.

Příklady: (free and open-source)

Více informací: Wikipedia

Front-endové frameworky

Knihovny pro tvorbu uživatelského rozhraní (user interface (UI), front-end) pro „jednostránkové aplikace“, kde se webová stránka uživateli jeví stále se stejnou adresou URL, ale obsah se dynamicky mění pomocí skriptů vykonaných na straně klienta. Nejčastěji využívají JavaScript.

Příklady:

Více informací: Wikipedia, Best Frontend Frameworks for Web Development in 2023

Generátory statických stránek

Konverze do HTML z jednodušších značkovacích jazyků nebo šablon.

Viz také Top 5 Static Site Generators in 2023 (and When to Use Them)

Back-endové frameworky

Téměř každý programovací jazyk (včetně C++) má svůj web framework pro „skriptování“ na straně serveru (back-end). Viz např. srovnání na Wikipedii. Umožňují rychlý vývoj udržitelnějších a bezpečnějších webových aplikací.

Nejznámější/nejpoužívanější frameworky jsou:

  • ASP.NET Core (C#)
  • CakePHP, Fat-Free, FuelPHP, Nette, Drupal, Wordpress, a další... (PHP)
  • Ruby on Rails (Ruby)
  • Django, Flask, FastAPI, JupyterLab, Voilà (Python)
  • Node.js (JavaScript)
    • ve skutečnosti kompletní prostředí včetně JavaScript enginu umožňující programovat libovolné, nejen webové aplikace