Web-Dev-For-Beginners/translations/cs/7-bank-project/2-forms/README.md

Vytvoření bankovní aplikace, část 2: Přihlášení a registrační formulář

Kvíz před lekcí

Kvíz před lekcí

Úvod

V téměř všech moderních webových aplikacích si můžete vytvořit účet, abyste měli svůj vlastní soukromý prostor. Protože k webové aplikaci může přistupovat více uživatelů současně, je potřeba mechanismus, který umožní ukládat osobní údaje každého uživatele odděleně a vybrat, které informace zobrazit. Nebudeme se zabývat tím, jak bezpečně spravovat identitu uživatele, protože je to samostatné rozsáhlé téma, ale zajistíme, aby si každý uživatel mohl vytvořit jeden (nebo více) bankovních účtů v naší aplikaci.

V této části použijeme HTML formuláře k přidání přihlášení a registrace do naší webové aplikace. Ukážeme si, jak programově odesílat data na serverovou API, a nakonec jak definovat základní pravidla validace pro vstupy uživatele.

Předpoklady

Musíte mít dokončenou část HTML šablony a směrování webové aplikace pro tuto lekci. Také je potřeba nainstalovat Node.js a spustit serverovou API lokálně, abyste mohli odesílat data pro vytvoření účtů.

Poznámka Budete mít spuštěné dva terminály současně, jak je uvedeno níže:

1. Pro hlavní bankovní aplikaci, kterou jsme vytvořili v lekci HTML šablony a směrování
2. Pro serverovou API bankovní aplikace, kterou jsme právě nastavili výše.

Pro pokračování v lekci je potřeba mít oba servery spuštěné. Poslouchají na různých portech (port 3000 a port 5000), takže by vše mělo fungovat bez problémů.

Můžete otestovat, zda server běží správně, spuštěním tohoto příkazu v terminálu:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

---

Formulář a ovládací prvky

Element <form> obklopuje část HTML dokumentu, kde uživatel může zadávat a odesílat data pomocí interaktivních ovládacích prvků. Existuje mnoho různých uživatelských rozhraní (UI) ovládacích prvků, které lze použít v rámci formuláře, nejběžnějšími jsou elementy <input> a <button>.

Existuje mnoho různých typů <input>, například pro vytvoření pole, kde uživatel může zadat své uživatelské jméno, můžete použít:

<input id="username" name="username" type="text">

Atribut name bude použit jako název vlastnosti při odesílání dat formuláře. Atribut id se používá k propojení <label> s ovládacím prvkem formuláře.

Podívejte se na celý seznam typů <input> a dalších ovládacích prvků formuláře, abyste získali představu o všech nativních UI prvcích, které můžete použít při vytváření svého rozhraní.

✅ Všimněte si, že <input> je prázdný element, ke kterému byste neměli přidávat odpovídající uzavírací tag. Můžete však použít samouzavírací notaci <input/>, ale není to nutné.

Element <button> v rámci formuláře je trochu speciální. Pokud nespecifikujete jeho atribut type, automaticky odešle data formuláře na server při stisknutí. Zde jsou možné hodnoty atributu type:

• submit: Výchozí hodnota v rámci <form>, tlačítko spustí akci odeslání formuláře.
• reset: Tlačítko resetuje všechny ovládací prvky formuláře na jejich počáteční hodnoty.
• button: Nepřiřazuje žádné výchozí chování při stisknutí tlačítka. Můžete mu pak přiřadit vlastní akce pomocí JavaScriptu.

Úkol

Začněme přidáním formuláře do šablony login. Budeme potřebovat pole pro uživatelské jméno a tlačítko Přihlásit.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm">
      <label for="username">Username</label>
      <input id="username" name="user" type="text">
      <button>Login</button>
    </form>
  </section>
</template>

Pokud se podíváte blíže, můžete si všimnout, že jsme zde také přidali element <label>. Elementy <label> se používají k přidání názvu k UI ovládacím prvkům, jako je naše pole pro uživatelské jméno. Popisky jsou důležité pro čitelnost vašich formulářů, ale přinášejí také další výhody:

• Propojením popisku s ovládacím prvkem formuláře pomáhá uživatelům, kteří používají asistivní technologie (například čtečku obrazovky), pochopit, jaká data se od nich očekávají.
• Kliknutím na popisek můžete přímo zaměřit přidružený vstup, což usnadňuje jeho dosažení na zařízeních s dotykovou obrazovkou.

Přístupnost na webu je velmi důležité téma, které je často přehlíženo. Díky semantickým HTML elementům není obtížné vytvářet přístupný obsah, pokud je používáte správně. Můžete si přečíst více o přístupnosti, abyste se vyhnuli běžným chybám a stali se odpovědným vývojářem.

Nyní přidáme druhý formulář pro registraci, hned pod ten předchozí:

<hr/>
<h2>Register</h2>
<form id="registerForm">
  <label for="user">Username</label>
  <input id="user" name="user" type="text">
  <label for="currency">Currency</label>
  <input id="currency" name="currency" type="text" value="$">
  <label for="description">Description</label>
  <input id="description" name="description" type="text">
  <label for="balance">Current balance</label>
  <input id="balance" name="balance" type="number" value="0">
  <button>Register</button>
</form>

Pomocí atributu value můžeme definovat výchozí hodnotu pro daný vstup. Všimněte si také, že vstup pro balance má typ number. Vypadá jinak než ostatní vstupy? Zkuste s ním interagovat.

✅ Dokážete navigovat a interagovat s formuláři pouze pomocí klávesnice? Jak byste to udělali?

Odesílání dat na server

Nyní, když máme funkční UI, dalším krokem je odeslání dat na server. Udělejme rychlý test pomocí našeho aktuálního kódu: co se stane, když kliknete na tlačítko Přihlásit nebo Registrovat?

Všimli jste si změny v sekci URL vašeho prohlížeče?

Výchozí akce pro <form> je odeslání formuláře na aktuální URL serveru pomocí metody GET, připojením dat formuláře přímo k URL. Tato metoda má však některé nedostatky:

• Odesílaná data jsou velmi omezená velikostí (asi 2000 znaků)
• Data jsou přímo viditelná v URL (není ideální pro hesla)
• Nepracuje s nahráváním souborů

Proto ji můžete změnit na použití metody POST, která odesílá data formuláře na server v těle HTTP požadavku, bez předchozích omezení.

Zatímco POST je nejčastěji používaná metoda pro odesílání dat, v některých specifických scénářích je vhodnější použít metodu GET, například při implementaci vyhledávacího pole.

Úkol

Přidejte vlastnosti action a method do registračního formuláře:

<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">

Nyní zkuste zaregistrovat nový účet se svým jménem. Po kliknutí na tlačítko Registrovat byste měli vidět něco takového:

Pokud vše proběhne správně, server by měl odpovědět na váš požadavek JSON odpovědí obsahující data účtu, který byl vytvořen.

✅ Zkuste se zaregistrovat znovu se stejným jménem. Co se stane?

Odesílání dat bez obnovení stránky

Jak jste si pravděpodobně všimli, existuje drobný problém s přístupem, který jsme právě použili: při odeslání formuláře se dostaneme z naší aplikace a prohlížeč přesměruje na URL serveru. Snažíme se vyhnout všem obnovením stránky v naší webové aplikaci, protože vytváříme jednostránkovou aplikaci (SPA).

Abychom odeslali data formuláře na server bez vynucení obnovení stránky, musíme použít JavaScriptový kód. Místo zadání URL do vlastnosti action elementu <form> můžete použít jakýkoli JavaScriptový kód předcházený řetězcem javascript:, abyste provedli vlastní akci. Použití tohoto přístupu také znamená, že budete muset implementovat některé úkoly, které byly dříve prováděny automaticky prohlížečem:

• Získání dat formuláře
• Konverze a kódování dat formuláře do vhodného formátu
• Vytvoření HTTP požadavku a jeho odeslání na server

Úkol

Nahraďte vlastnost action registračního formuláře:

<form id="registerForm" action="javascript:register()">

Otevřete app.js a přidejte novou funkci s názvem register:

function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const data = Object.fromEntries(formData);
  const jsonData = JSON.stringify(data);
}

Zde získáváme element formuláře pomocí getElementById() a používáme pomocníka FormData k extrakci hodnot z ovládacích prvků formuláře jako sadu dvojic klíč/hodnota. Poté data převedeme na běžný objekt pomocí Object.fromEntries() a nakonec data serializujeme do JSON, formátu běžně používaného pro výměnu dat na webu.

Data jsou nyní připravena k odeslání na server. Vytvořte novou funkci s názvem createAccount:

async function createAccount(account) {
  try {
    const response = await fetch('//localhost:5000/api/accounts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: account
    });
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

Co tato funkce dělá? Nejprve si všimněte klíčového slova async. To znamená, že funkce obsahuje kód, který bude prováděn asynchronně. Při použití spolu s klíčovým slovem await umožňuje čekat na provedení asynchronního kódu – například čekání na odpověď serveru – před pokračováním.

Zde je rychlé video o použití async/await:

🎥 Klikněte na obrázek výše pro video o async/await.

Používáme API fetch() k odeslání JSON dat na server. Tato metoda přijímá 2 parametry:

• URL serveru, takže zde zadáme //localhost:5000/api/accounts.
• Nastavení požadavku. Zde nastavíme metodu na POST a poskytneme body požadavku. Protože odesíláme JSON data na server, musíme také nastavit hlavičku Content-Type na application/json, aby server věděl, jak interpretovat obsah.

Protože server odpoví na požadavek JSONem, můžeme použít await response.json() k analýze JSON obsahu a vrácení výsledného objektu. Všimněte si, že tato metoda je asynchronní, takže zde používáme klíčové slovo await, abychom zajistili, že budou zachyceny i chyby během analýzy.

Nyní přidejte nějaký kód do funkce register, aby volala createAccount():

const result = await createAccount(jsonData);

Protože zde používáme klíčové slovo await, musíme přidat klíčové slovo async před funkci register:

async function register() {

Nakonec přidejme nějaké logy pro kontrolu výsledku. Finální funkce by měla vypadat takto:

async function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const jsonData = JSON.stringify(Object.fromEntries(formData));
  const result = await createAccount(jsonData);

  if (result.error) {
    return console.log('An error occurred:', result.error);
  }

  console.log('Account created!', result);
}

Bylo to trochu dlouhé, ale dostali jsme se tam! Pokud otevřete nástroje pro vývojáře prohlížeče a zkusíte zaregistrovat nový účet, neměli byste vidět žádnou změnu na webové stránce, ale v konzoli se objeví zpráva potvrzující, že vše funguje.

✅ Myslíte si, že data jsou odesílána na server bezpečně? Co kdyby někdo dokázal zachytit požadavek? Můžete si přečíst o HTTPS, abyste se dozvěděli více o bezpečné komunikaci dat.

Validace dat

Pokud se pokusíte zaregistrovat nový účet bez zadání uživatelského jména, můžete vidět, že server vrátí chybu se stavovým kódem 400 (Špatný požadavek).

Před odesláním dat na server je dobré validovat data formuláře předem, kdykoli je to možné, abyste zajistili, že odesíláte platný požadavek. HTML5 ovládací prvky formuláře poskytují vestavěnou validaci pomocí různých atributů:

• required: pole musí být vyplněno, jinak nelze formulář odeslat.
• minlength a maxlength: definují minimální a maximální počet znaků v textových polích.
• min a max: definují minimální a maximální hodnotu číselného pole.
• type: definuje typ očekávaných dat, jako number, email, file nebo jiné vestavěné typy. Tento atribut může také změnit vizuální zobrazení ovládacího prvku formuláře.
• pattern: umožňuje definovat regulární výraz pro testování, zda jsou zadaná data platná nebo ne.

Tip: vzhled ovládacích prvků formuláře můžete přizpůsobit podle toho, zda jsou platné nebo neplatné, pomocí pseudo-tříd CSS :valid a :invalid.

Úkol

Existují 2 povinná pole pro vytvoření platného nového účtu: uživatelské jméno a měna, ostatní pole jsou volitelná. Aktualizujte HTML formuláře tak, aby používalo atribut required a text v popisku pole:

<label for="user">Username (required)</label>
<input id="user" name="user" type="text" required>
...
<label for="currency">Currency (required)</label>
<input id="currency" name="currency" type="text" value="$" required>

I když tato konkrétní implementace serveru neomezuje maximální délku polí, je vždy dobrým zvykem definovat rozumné limity pro jakýkoli textový vstup od uživatele.

Přidejte atribut maxlength do textových polí:

<input id="user" name="user" type="text" maxlength="20" required>
...
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
...
<input id="description" name="description" type="text" maxlength="100">

Pokud nyní stisknete tlačítko Registrovat a některé pole nesplňuje pravidlo validace, které jsme definovali, měli byste vidět něco takového:

Validace, která se provádí před odesláním jakýchkoli dat na server, se nazývá validace na straně klienta. Ale mějte na paměti, že není vždy možné provést všechny kontroly bez odeslání dat. Například zde nemůžeme ověřit, zda již existuje účet se stejným uživatelským jménem, aniž bychom odeslali požadavek na server. Další validace prováděná na serveru se nazývá validace na straně serveru.

Obvykle je potřeba implementovat obě. Zatímco validace na straně klienta zlepšuje uživatelský zážitek tím, že poskytuje okamžitou zpětnou vazbu uživateli, validace na straně serveru je klíčová pro zajištění, že data uživatele, se kterými pracujete, jsou správná a bezpečná.

---

🚀 Výzva

Zobrazte chybovou zprávu v HTML, pokud uživatel již existuje.

Zde je příklad, jak může vypadat finální přihlašovací stránka po troše stylování:

Kvíz po přednášce

Kvíz po přednášce

Přehled & Samostudium

Vývojáři byli velmi kreativní při vytváření formulářů, zejména pokud jde o strategie validace. Zjistěte více o různých způsobech práce s formuláři prohlížením CodePen; najdete nějaké zajímavé a inspirativní formuláře?

Zadání

Stylujte svou bankovní aplikaci

---

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nenese odpovědnost za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.