Lekce 4 - Popis vybraných technologií 2

JavaScript

Jazyk JavaScript je nedílnou součástí webů. Je to poměrně jednoduchý skriptovací (to znamená, že pro svůj chod se nemusí kompilovat, ale je interpretován) jazyk, který se využívá na logiku front endu. Nejedná se však o jazyk Java, který se částečně shoduje jen v názvu, jinak jsou velmi rozdílné.

Pomocí JavaScriptu můžeme na stránce měnit obsah, přidávat/odebírat elementy, přesouvat se plynule po stránce atp. Jazyk běží na straně klienta, konkrétně v prohlížeči. Pomocí jednoduchého scriptu můžeme do stránky přidat nějaký text, resp. s ním stránku přepsat.

document.write("Nový text na stránce.");

V JavaScriptu můžeme využívat také např. proměnné, které se definují pomocí klíčového slova var. Pokud klíčové slovo var při deklaraci proměnné nezadáme, stává se proměnná globální, tedy dostupnou v celém programu. Můžeme však využívat také podmínky, switche, ternární operátory, cykly, funkce atd. Zajímavé na tomto jazyku je, že do proměnných můžeme uložit také funkce.

var a = 40;
var b = "pes";
c = "auto";

V JavaScriptu můžeme také jednoduše vypsat hlášku – kde se využívá vyskakovacího okénka. Využívá se pro to funkce alert.

var chyba = function(hlaska) {
  alert(hlaska);
}

chyba("Nastala nějaká chyba.");

Pokud budeme chtít pracovat např. s HTML elementem, který má nějaký atribut id a změnit mu obsah elementu, můžeme to provést ukázkovým kódem níže. Nejdříve si do proměnné uložíme element, který získáme podle ID tlacitko. Následně pro tento element změníme textový obsah.

var element = document.getElementById("tlacitko");
element.textContent = "Klikni na mě!";

Knihovna jQuery

Knihovna jQuery zjednodušuje výběr elementů, který můžeme napsat stejným způsobem, jako selektory v CSS. Kromě zjednodušené možnosti výběru elementu, či elementů, knihovna poskytuje zjednodušené ovládání např. pro změnu textu/HTML v elementu, animace atp.

$('.clanek p').text('Změnil jsem text článku.');

V ukázce výše byly vybrány všechny elementy p, které jsou potomky elementu s třídou clanek. Pomocí funkce text byl následně změněn textový obsah těchto elementů. Pokud bychom napsali HTML kód, zapsal by se jako text.

PHP

Jazyk PHP je nejběžnější jazyk, který se používá pro vývoj webu na straně back endu. V tomto jazyku píšeme kód, který nám následně vygeneruje HTML kód podle nějakých parametrů – většinou podle url adresy webu.

Syntaxe se podobá běžným jazykům, jako například jazyku C nebo Java. Jazyk je hojně využíván začátečníky, právě díky jeho jednoduché syntaxi a velké komunitě, na kterou se mohou, na nejrůznějších diskuzních fórech, obrátit s pomocí.

PHP je sestavován na serveru, který musíme mít i pro lokální vývoj webu. PHP aplikace, jak jsem již nastínil výše, reaguje vždy na požadavek, kterému se pokusí vyhovět a vrátí výstup, např. v podobě HTML. To také znamená, že se nedá s aplikací interagovat jinak, než pomocí požadavků, které se odešlou pouze při obnově záložky prohlížeče – tzv. refresh, nebo při příchodu na web.

Samozřejmě existují způsoby, jak tento problém částečně odstínit. Jednou z možností může být technologie Ajax, která posílá speciální požadavky i bez refreshe webu, a to například pomocí funkce dostupné v JavaScriptové knihovně jQuery.

Základní konstrukce jazyka

Na začátek každého souboru musíme vložit speciální značku, která říká, že začíná PHP kód. Značka, včetně ukončovací, která není povinná a ukončí se automaticky koncem souboru, je ukázána na ukázce níže.

<?php

?>

Základním příkazem jazyka je funkce echo, která vypíše obsah argumentu funkce do webu. V PHP můžeme využívat proměnné, které se píší s prefixem dolaru – znak $. Pro proměnné se neurčuje datový typ, jelikož je jazyk dynamicky typovaný, stejně jako JavaScript.

<?php

$a = 5;
$b = "Ahoj světe!";

Oproti jiným programovacím jazykům spojování textových řetězců neprovádíme znakem plus, ale tečkou.

<?php

$a = 1;
$b = 2;

echo($a + $b); // Výstup 3
echo($a . $b); // Výstup 12

V PHP se rozlišuje mezi textovým řetězcem napsaným v uvozovkách a v apostrofech. Pokud do textového řetězce zapsaného v uvozovkách vložíme název proměnné, proměnná se vypíše.

Dále můžeme využívat v PHP klasických funkcí jako podmínky, cykly, pole, seznamy atp. V PHP se dá psát objektově orientovaný kód, a tedy můžeme využívat i třídy. Příklad objektově orientovaného kódu je ukázán na ukázce níže, ve které je třída člověka, který má metodu pro chození a promluvení.

<?php

class Clovek {

  public function krok() {}

  public function promluv($zprava) {}
}

Architektura MVC

Pokud chceme vytvářet náročnější webové aplikace, je nutné, abychom se drželi nějaké architektury, která vytváří pomyslnou strukturu aplikace a zjednodušuje její chod.

Jednou z nejpoužívanějších metod je metoda MVC nebo MVP. Tyto dvě metody si jsou velmi podobné a někdy jsou i zaměňovány. Pro jednoduchost budeme nazývat tuto metodu architekturou MVC.

Princip spočívá v tom, že oddělujeme logiku a výstup. Aplikaci rozdělujeme do tří typů – Model, View (pohled), Controller (kontroler). Modely obstarávají celou logiku aplikace a může to být například odesílání emailu, správce uživatelů atp., pohledy jsou zpravidla HTML šablony, které jsou obohaceny o jednoduchý PHP kód a cykly a kontrolery vytvářejí propojení mezi modely a pohledy a řeší co vykonat na základě daných parametrů pro sestavení stránky – které se získají např. z url adresy webu.

Uživatel stránky zadá url adresu. Adresu zjistí kontroler, který ji zpracuje a rozloží na jednotlivé části. Pokud kontroler rozhodne, že je adresa platná, zavolá příslušný model, který vykoná své funkce a vrátí data kontroleru. Kontroler zavolá pohled, kterému dodá data, které se pomocí cyklů atp. vypíší. Web se nechá vykreslit a uživatel vidí novou stránku.

Git

Git je verzovací systém, který se stará o verzování projektu, rozklad projektu na více částí a případné řešení nesrovnalostí, resp. kolizí, pokud např. dva lidé vloží do stejné části souboru rozdílný kód. Git si stáhneme z webových stránek projektu a po úspěšné instalaci dostaneme možnost jej používat v konzoli. K dispozici je také řada grafických programů, mezi nimiž je oblíbený např. ten od společnosti GitHub Inc. V ročníkové práci budu ukazovat příkazy používané v konzoli, kterou na svých projektech používám.

Každá uložená skupina změn, ta obsahuje jednotlivé dílčí změny v souborech, se nazývá commit.

Řešení kolizí

Pokud nastane problém, kdy dvě verze kolidují, mohou nastat 2 případy. V první případě, tom lepším, systém sám rozdíl detekuje a správně výsledný soubor uloží. V druhém případě, pokud si systém nebude vědět rady, která verze je ta správná, vypíše do konzole hlášku. Z hlášky je vždy patrné, jaký soubor, či soubory, kolidují a je pak jen na uživateli, aby kolizi ručně upravil.

Základní příkazy

Git obsahuje mnoho příkazů, které může uživatel používat, avšak pro základní práci jich uživatel potřebuje znát jen několik.

Příkaz git status do konzole vypíše aktuální informace o změnách v souborech. Vypíše, které soubory byly změněny, které smazány a které byly uloženy pro budoucí commit.

Příkaz git pull nahraje nejnovější verzi ze sdíleného repozitáře. Tento příkaz také musíme zadat vždy před tím, než odešleme data na sdílený repozitář.

Příkaz git add --all uloží všechny změněné soubory pro budoucí commit. Namísto --all můžeme také zadat cestu k chtěnému souboru.

Příkaz git commit -m "Popis commitu." uloží dané soubory do lokálního repozitáře s příslušným popisem.

Příkaz git push nahraje změny z lokálního repozitáře do repozitáře sdíleného. Před použitím tohoto příkazu je nutné zadat příkaz git pull.

Vytvoření sdíleného repozitáře

Vytvoření sdíleného repozitáře se provádí na speciálních webových aplikacích, které většinou poskytují veřejné repozitáře zdarma. Nejznámější a zároveň nejpoužívanější je úložiště GitHub. Na tomto úložišti si může každý uživatel vytvořit neomezeně mnoho veřejných repozitářů, za soukromé se však již platí.

Pro získání dat z repozitáře se musí tzv. naklonovat. Příkaz, kterým repozitář naklonujete do svého počítače, najdete na pravé straně webu. Na klonování se využívá příkazu git clone.

Automatizační systém gulp

Pro automatizaci projektu doporučuji využívat systém gulp, který funguje na bázi streamů. To znamená, že na začátku procesu se jednou načtou data a na konci, klidně po nesčetném množství úprav, se jednou data uloží. Díky tomuto, jelikož práce s diskem je pomalá, je gulp velmi rychlý. Data, a všechny procesy na nich, jsou po celou dobu v paměti RAM.

Instalace

Jelikož gulp funguje nad platformou Node.js, je zapotřebí jako první nainstalovat Node.js. V konzoli, pro instalaci doplňků atp., budeme využívat příkazu npm, který přistupuje k balíčkovému systému Node.js. Samotná instalace gulpu poté probíhá v konzoli, kde nejdříve nainstalujeme gulp globálně pomocí příkazu npm install --global gulp. Přepneme se do složky projektu a jako první nainstalujeme doplněk gulp, pomocí příkazu npm install --save-dev gulp.

Po instalaci gulpu musíme vytvořit soubor gulpfile.js, kam budeme psát naše automatizační úlohy. Do souboru vložíme následující kód. Na řádku 3 můžeme vidět princip, jak se jednotlivé úlohy zapisují.

var gulp = require('gulp');

gulp.task('default', function() {});

Instalace doplňků

Instalace doplňků probíhá obdobným způsobem, jako instalace gulpu, což je také doplněk. V balíčkovém systému npm si najdeme chtěný gulp doplněk, které mají z pravidla prefix gulp. Zjistíme si název doplňku, namátkou např. gulp-sass, a do konzole zadáme příkaz npm install --save-dev gulp-sass.

Doporučené doplňky

Pro webové projekty je vhodné použít doplněk gulp-sass, který se stará o kompilaci CSS preprocesoru Sass, doplněk gulp-autoprefixer, který přidává do výsledného CSS kódu prefixy pro dané CSS vlastnosti, doplněk gulp-rename, díky kterému můžeme přejmenovat výsledný soubor, doplněk gulp-notify, který nám např. při chybě může zobrazit informační bublinu a např. doplněk gulp-sourcemaps, který nám propojí CSS kód se zdrojovým Sass kódem.

Je dobré najít si doplňky, které sami využijete na vašem projektu a při vašem stylu práce.