WA

Zpět

Užitečné odkazy

Nové anglické skripta APV - opakování a informace o SQL
Kniha Eloquent JavaScript
MDN - specifikace JS pro Firefox
W3 schools - rychlá referenční příručka pro HTML/CSS/JS
Jukub Vrána - PHP blog
Bootstrap - CSS framework
PHP - manuál a stažení
Framework Laravel
Framework Slim - vhodný jako backend pro SPA
Nette - český PHP framework
Adminer - správa databáze
Nástroj Composer - stažení závislostí PHP projektů
XAMPP a WAMP - prostředí pro lokální vývoj
JS Fiddle - snadno otestujete kousek JS/CSS/HTML
NodeJS - JS pro backend
jQuery - JS knihovna
AngularJS a Angular - JS frameworky
Vue.js - další framework

Info o předmětu

V předmětu je nutné zpracovat projekt - projekt se průběžně odevzdává do odevzdávárny a je průběžně hodnocen. Podrobné zadání je v dokumentovém serveru předmětu. Zkouška je písemná, teoretická (bez internetu) + praktická (s internetem), píše se na počítači. Hodnocení předmětu se skládá z projektu (50%) a vlastní zkoušky (50%). Z obojeho je nutné dosáhnout alespoň 50%.
Zadání projektu je zde nebo v DS UIS.
Můžete si stáhnout a použíz strukturu databáze MySQL nebo pro PostgreSQL.

Podpora

Pro práci a vývoj doma je vhodné nainstalovat Apache s PHP a MySQL/MariaDB na lokální PC (zkuste např. WAMP nebo XAMPP). Je vhodné nainstalovat i NodeJS.
Pokud si nechcete tyto balíky instalovat přímo na váš počítač, je vhodné použít VirtualBox apod. návod na instalaci Linux Mint s Apache, MariaDB a PHP je ZDE.
Je možné také rovnou stáhnout virtuální počítač připravený podle uvedeného návodu (návod si i tak projděte, jsou tam rady k obecnému užívání Linuxu). Uživatelský účet do OS i do DB je "student" a heslo je také "student". Na http://localhost najdete ve virtuálním stroji malý pokusný projekt, který je vytvořen v NetBeans, a Adminer. Pro informace o používání virtuálního stroje nahlédněte do návodu.
Dále je možné pročíst připravená walkthrough pro různé frameworky:

Samozřejmě je možné tyto postupy zkusit v poskytnutém virtuálním stroji.

Cest k vytvoření projektu vede několik, je možné použít libovolný PHP framework a/nebo libovolné JS knihovny (naopak je zakázané nepoužít framework nebo knihovny). Pokud chcete použít na backendu jiný jazyk než PHP, konzultujte to nejprve se mnou.

Týden 1

Slidy z přednášky - Úvod, HTTP

Týden 2

Slidy z přednášky - PHP, frameworky

Týden 3

Slidy z přednášky - REST + JSON

Týden 4

Slidy z přednášky - JavaScript

Týden 5

Slidy z přednášky - JavaScript - události

Týden 6

Slidy z přednášky - AJAX

Týden 7

Slidy z přednášky - JS knihovny

Týden 8

Slidy z přednášky - Vue

Týden 9

Slidy z přednášky - Vue

Týden 10

Slidy z přednášky - Autentizace, autorizace, l10n, i18n

Týden 11

Slidy z přednášky - Komunikace, hybridni aplikace, HTML5

Týden 12

Slidy z přednášky - Jak být dobrým webovým vývojářem


Checklist:

1. týden - HTTP

  • Umět poslat data metodou POST a GET z formuláře.
  • Umět nastavit v PHP hlavičku, rozumět tomu, proč nesmí být jiný výstup před header().
  • Umět v PHP přesměrovat prohlížeč.
  • Umět poslat soubor jako přílohu na stažení.
  • Umět v PHP podstrčit obsah jako jiný datový typ.
  • Chápat souvislost hlaviček a cookies a session.
  • Umět používat konzolu prohlížeče pro analýzu hlaviček a odeslaných dat.
  • Umět vytvořit validní HTML5 dokument.
  • Umět použít online HTML validátor.
  • Umět připojit CSS soubor, inline CSS.
  • Umět použít DOM inspektor a CSS editor.

2. týden - PHP OOP

  • Umět vytvořit v PHP třídu.
  • Umět v PHP použít dědičnost a interface a trait.
  • Umět použít namespace a natáhnout z něj třídu.
  • Chápat autoloader PSR-0.
  • Umět nastavit úroveň a vlastní funkci pro error reporting a exception handler.
  • Umět zapsat do souboru na disk data a chápat proč je nutné nastavit právo k zápisu pro other (chmod 0777).

3. týden - Slim, routing

  • Umět se orientovat ve struktuře projektu se Slim.
  • Chápat instalaci závislostí přes Composer.
  • Umět nastavit .htaccess a .env.
  • Pochopit routování.

4. týden - Slim jako REST API

  • Umět vytvořit modelovou třídu.
  • Umět nastavit Composer aby načítal zdrojové kódy dle PSR-0.
  • Umět přijmout a poslat data v JSON formátu.

5. týden - základy JS

  • Umět připojit JS soubor. Umět napsat inline JS (a proč to nedělat). Umět použít značku <script>.
  • Znát syntaxi JS, funkce, podmínka, cyklus, for...in, deklarace proměnné, datové typy.
  • Globální/lokální proměnné, objekty, pole.
  • Znát základní funkce pro práci s polem - push(), pop(), splice(), indexOf(), find()...Dokumentace
  • Umět využít událost window.onload = function() {}.

6. týden - JS a DOM

  • Získání prvků různými způsoby a práce s DOM.
  • Umět nastavit vlastnosti HTML prvků vč. CSS stylů a tříd.
  • Chápat nastavení obsluhy událostí na elementech, proměnná this v události a objekt popisující událost.
  • Chápat princip uzávěru.
  • Znát funkce setTimeout(), setInterval(), clearTimeout(), clearInterval().

7. týden - JS AJAX

  • Chápat Promise() a obsluhy.
  • Umět načíst a odeslat data ve formátu JSON - komuniace s REST API.
  • Umět zabránit odeslání formuláře a odeslat jej přes AJAX.

8. týden - Vue

  • Umět inicializovat projekt pomocí Vue CLI a spustit vývojový server.
  • Chápat systém komponent.
  • Chápat router.
  • Umět zobrazit v šabloně data.
  • Umět spustit metodu a upravit data komponenty.

9. týden - Vue

  • Umět v routeru přidat novou cestu a komponentu k ní.
  • Umět nainstalovat a použít Axios.
  • Umět odeslat z formuláře data a uložit je do databáze přes REST.
  • Umět ošetřit návratové stavy z backendu.

10. týden - Vue

  • Chápat JWT tokeny.
  • Umět ověřit uživatele a vygenerovat mu JWT token.
  • Umět přidat middleware, který tokeny ověřuje.
  • Umět ve frontendu JWT token uložit jako hlavičku pro následující HTTP požadavky.
  • Umět rozkódovat obsah JWT tokenu pomocí debuggeru na jwt.io.

11. týden - Vue

  • Umět předat token do dalších HTTP požadavků přes globální hlavičky Axios-u.
  • Umět zaregistrovat handler Vue Routeru pro kontrolu přístupu k určitým routám pro přihlášené/nepřihlášené uživatele.
  • Umět v komponentě zaregistrovat časovač v mounted() a odregistrovat jej v beforeDestroy().

12. týden - Vue

  • Umět JWT token uložit do LocalStorage a zase jej vyvolat.
  • Umět připojit Bootstrap Vue knihovnu a použít v projektu.

Použité knihovny - odkazy na dokumentaci

Backend

  • Slim - backendový framework (obsahuje logger Monolog)
  • PDO - komunikace s DB
  • Knihovna dotenv - pro načtení nastavení z .env souboru
  • Latte - knihovna na šablony
  • Latte view - náš vlastní wrapper kolem knihovny Latte pro Slim (aby se Latte Lépe integrovalo se Slimem)
  • JWT implementace - generuje a ověřuje tokeny

Frontend

  • Vue - frontendový framework
  • Vue Router - frontendový router
  • Vuex - drží globální stav Vue aplikace - na cvičeních jsme nepoužili
  • Axios - HTTP komunikace s REST API
  • Bootstrap Vue - wrapper pro BS4
  • Font awesome - ikonový font, BS4 nemá vestavěné ikony

Poznámka: ne vždy se všechno na cvičení stihne, ale je dobré doma projít všechny body.