Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019
0 likes330 views
Petr vám v prezentaci ukáže, že knihovna poskytuje nástroje, pomocí kterých je možné zaregistrovat vlastní validační pravidla do Nette\Forms a navíc poskytuje podporu pro live, měkkou a ajaxovou validaci, které lze zaregistrovat v PHP kódu. Řešení vychází z nativní podpory Nette pro custom validační pravidla, ale nespoléhá ani nekopíruje interní quirks Nette frameworku.
Péhápkaři v Pecce: pd/forms – Petr Klobás – 16. 10. 2019
- 1. Jednoduché rozšíření pro komplexní validace v Nette formulářích Petr Klobás pd/forms FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás
- 2. O čem bude řeč FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • terminologie formulářových validací • motivace vzniku pd/forms • podpora Nette pro custom validace • pd/forms • PdFormsRuleOptions • Live validace, měkká validace a validační kontext • Měkká validace pomocí Nette pravidel • Je libo AJAX? • Závislé inputy a manipulace s formulářem po validaci • pár slov závěrem
- 3. Terminologie formulářových validací FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • “Standardní” validace: validace, která je zpracována na straně serveru a může být zpracována i na straně klienta • Live validace: bezprostřední validace formuláře na straně klienta (v prohlížeči) při interakci s formulářem • Měkká validace: live validace, která upozorní uživatele na problém ve formuláři, ale umožní odeslání formuláře (není kontrolována na straně serveru) • AJAX validace: live validace, která pro výsledek validace volá asynchronně zpracování na backendu
- 4. Proč pd/forms? FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás Vznik samostatné knihovny pd/forms: 1. Zachování původní funkcionality měkkých a ajaxových validací po aktualizaci Nette 2. Vylepšení / usnadnění použitelnosti v aplikaci 3. Snazší údržba, více verzí, rozšiřitelnost, dokumentace, testy Základní myšlenka: “Možnost přidat komplexní validaci na backendu s minimální nutností psát frontendovou obsluhu.”
- 5. FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás
- 6. FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás
- 7. FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás
- 8. Podpora Nette pro custom validace FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • Nette nabízí podporu pro vytváření vlastních validačních pravidel, pokud vestavěná pravidla nestačí • BaseControl::addRule(MyRules::RULE, ‘_msg_’, $args); • https://pla.nette.org/cs/vlastni-validacni-pravidla • Argumenty addRule() => data-nette-rules • poslední parametr addRule není typovaný, čehož se dá s výhodou využít
- 9. PdFormsRuleOptions FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • jednoduchý value object, který je serializovatelný do JSONu • v balíčku k dispozici továrna jako služba pro instanciaci • nese všechny potřebné informace pro zpracování validace na frontendu i backendu
- 10. Live validace, měkká validace a validační kontext FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • (nejen) live validaci zajišťuje na frontendu javascriptová obsluha pdForms.js • vzhledem k tomu, že máme koncept přidávání komplexních validací řízen z backendu, musíme tam vyřešit obsluhu pravidla • tu vyřešíme poměrně jednoduše pomocí RuleOptions objektu
- 11. Live validace, měkká validace a validační kontext FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • backend máme vyřešen, zbývá vytvořit validátor pro frontend, o který nám jde u měkké validace především • PdFormsRules::phone => PdFormsRules_phone • hotovo 🤝
- 12. Live validace, měkká validace a validační kontext FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • může se objevit potřeba dodat validátoru sadu dat, proti kterým se bude hodnota formulářového pole validovat • taková sada může být v čase proměnná, takže ji nelze hard- kodóvat do validátoru (na BE řešitelné, ale co FE?) • tento typ dat předáme pravidlu jako validační kontext
- 13. Měkká validace Nette pravidel FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • Nette obsahuje sadu obecných validátorů, které ovšem nelze jednoduše použít při měkké validaci, což nám přišlo škoda • PdFormsRules::NETTE_RULE_PROXY + createNetteOptional() • netřeba řešit frontendovou obsluhu, funguje out of the box
- 14. Je libo AJAX? FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • asynchronní volání pro live validaci vstupu • kdy zapojit? • validace je příliš komplikovaná pro zpracování na frontendu • validace je závislá na externí službě • kombinace obojího • pd/forms nabízí podporu jak na backendu tak frontendu • Rules::AJAX + RuleOptions::enableAjax($endpoint, $validationService) • PdFormsValidationServiceInterface • PdFormsValidationControllerInterface • PdFormsAbstractValidationController
- 15. Je libo AJAX? FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • Příklad - povinná validace lékové karty na lékárenském eshopu • vytvoření pravidla • endpoint + validationService • více validačních stavů
- 16. Je libo AJAX? FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • ValidationServiceInterface + ValidationResult
- 17. Je libo AJAX? FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • ValidationControllerInterface
- 18. Je libo AJAX? FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • AbstractValidationController • pomocí tohoto kontroleru jsme pokryly všechny implementované ajaxové validace
- 19. Závislé inputy a manipulace s formulářem po validaci FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • v našem kontextu při AJAXu • rozlišujeme dva typy validace, která pracuje s více inputy • na vstupu: validace závislá na hodnotách více inputů ve formuláři; např. zadání správné kombinace město + psč • na výstupu: validace vrací výsledek, který chceme doplnit do formuláře nebo změnit nějaký prvek (select, checkbox); např. validace DIČ firmy a doplnění jména firmy a IČ do formuláře • pd/forms pro tyto situace poskytuje mechanismus závislých inputů
- 20. FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • Příklad - validace DIČ firmy a doplnění jména firmy a IČ do formuláře Závislé inputy a manipulace s formulářem po validaci
- 21. FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • ValidationServiceInterface + ValidationResult Závislé inputy a manipulace s formulářem po validaci
- 22. Závěrem FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás • https://github.com/peckadesign/pdforms • knihovna je volně k použití, publikovaná na packagistovi => composer • obsahuje pár validátorů, které se můžou hodit v českém rybníčku (telefon, vstup obsahuje číslo (ulice), IČO firmy) • udržujeme verzi pro Nette 2.3 a 2.4 (3.0 ve výrobě) • má dokumentaci i testy (zatím jen PHP), chceme doplnit JS testy • knihovna má obsáhlejší JS obsluhu, díky @zipper
- 23. FB facebook.com/peckadesign TW @peckadesignpd/forms Petr Klobás Díky za pozornost E-mail [email protected] Twitter @klobinoid LinkdeIn /petrklobas