History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Banki alkalmazás készítése 2. rész: Bejelentkezési és regisztrációs űrlap létrehozása

Előadás előtti kvíz

Bevezetés

Szinte minden modern webalkalmazásban lehetőséged van fiók létrehozására, hogy saját privát tered legyen. Mivel egyszerre több felhasználó is hozzáférhet egy webalkalmazáshoz, szükség van egy mechanizmusra, amely külön tárolja az egyes felhasználók személyes adatait, és kiválasztja, hogy mely információkat jelenítse meg. Nem térünk ki arra, hogyan kell biztonságosan kezelni a felhasználói azonosítást, mivel ez önmagában is egy kiterjedt téma, de gondoskodunk arról, hogy minden felhasználó létrehozhasson egy (vagy több) bankszámlát az alkalmazásunkban.

Ebben a részben HTML-űrlapokat fogunk használni a bejelentkezés és regisztráció hozzáadásához a webalkalmazásunkhoz. Megnézzük, hogyan lehet programozottan adatokat küldeni egy szerver API-nak, és végül hogyan lehet alapvető érvényességi szabályokat meghatározni a felhasználói bemenetekhez.

Előfeltétel

El kell végezned a webalkalmazás HTML sablonok és útvonalak leckéjét. Telepítened kell a Node.js alkalmazást, és helyileg futtatnod kell a szerver API-t, hogy adatokat tudj küldeni a fiókok létrehozásához.

Fontos megjegyzés
Két terminált kell egyszerre futtatnod, az alábbiak szerint:

Az általunk készített fő banki alkalmazás számára, amelyet a HTML sablonok és útvonalak leckében készítettünk.
A Banki alkalmazás szerver API számára, amelyet az előzőekben állítottunk be.

A lecke folytatásához mindkét szervert futtatnod kell. Ezek különböző portokon hallgatnak (port 3000 és port 5000), így minden rendben kell, hogy működjön.

Ellenőrizheted, hogy a szerver megfelelően fut-e, ha végrehajtod az alábbi parancsot egy terminálban:

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

Űrlapok és vezérlők

A <form> elem egy HTML-dokumentum azon szakaszát foglalja magában, ahol a felhasználó adatokat adhat meg és küldhet el interaktív vezérlők segítségével. Számos felhasználói felület (UI) vezérlő használható egy űrlapon belül, amelyek közül a leggyakoribbak a <input> és <button> elemek.

Számos különböző típus létezik a <input> elemekhez. Például, ha egy mezőt szeretnél létrehozni, ahol a felhasználó megadhatja a felhasználónevét, használhatod az alábbi kódot:

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

A name attribútumot a tulajdonság nevének használják, amikor az űrlap adatait elküldik. Az id attribútumot pedig arra használják, hogy egy <label> elemet társítsanak az űrlapvezérlőhöz.

Nézd meg a <input> típusok és egyéb űrlapvezérlők teljes listáját, hogy képet kapj az összes natív UI-elemről, amelyet használhatsz az UI építésekor.

✅ Fontos megjegyezni, hogy a <input> egy üres elem, amelyhez nem kell záró címkét hozzáadni. Használhatod azonban az önzáró <input/> jelölést, de ez nem kötelező.

A <button> elem egy űrlapon belül kicsit különleges. Ha nem adsz meg type attribútumot, akkor alapértelmezés szerint elküldi az űrlap adatait a szervernek, amikor megnyomják. Az alábbiakban láthatók a lehetséges type értékek:

submit: Alapértelmezett érték egy <form>-on belül, a gomb az űrlap elküldését indítja el.
reset: A gomb visszaállítja az összes űrlapvezérlőt az eredeti értékeire.
button: Nem rendel alapértelmezett viselkedést a gombhoz. Egyedi műveleteket rendelhetsz hozzá JavaScript segítségével.

Feladat

Kezdjük azzal, hogy hozzáadunk egy űrlapot a login sablonhoz. Szükségünk lesz egy felhasználónév mezőre és egy Bejelentkezés gombra.

<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>

Ha közelebbről megnézed, észreveheted, hogy itt egy <label> elemet is hozzáadtunk. A <label> elemeket arra használják, hogy nevet adjanak a UI-vezérlőknek, például a felhasználónév mezőnknek. A címkék fontosak az űrlapok olvashatósága szempontjából, de további előnyökkel is járnak:

Egy címke társítása egy űrlapvezérlőhöz segíti a segítő technológiákat használó felhasználókat (például képernyőolvasót), hogy megértsék, milyen adatokat várnak tőlük.
A címkére kattintva közvetlenül a kapcsolódó bemenetre helyezheted a fókuszt, ami megkönnyíti az elérést érintőképernyős eszközökön.

A hozzáférhetőség a weben egy nagyon fontos téma, amelyet gyakran figyelmen kívül hagynak. A szemantikus HTML-elemek használatával nem nehéz hozzáférhető tartalmat létrehozni, ha megfelelően használod őket. Olvass többet a hozzáférhetőségről, hogy elkerüld a gyakori hibákat, és felelősségteljes fejlesztővé válj.

Most adjunk hozzá egy második űrlapot a regisztrációhoz, közvetlenül az előző alá:

<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>

A value attribútum használatával alapértelmezett értéket adhatunk meg egy adott bemenethez.
Figyeld meg, hogy a balance mezőhöz a number típust használtuk. Másképp néz ki, mint a többi mező? Próbáld ki, hogyan lehet vele interakcióba lépni.

✅ Tudsz navigálni és interakcióba lépni az űrlapokkal csak billentyűzet használatával? Hogyan tennéd ezt?

Adatok elküldése a szervernek

Most, hogy van egy működő felhasználói felületünk, a következő lépés az adatok elküldése a szervernek. Próbáljuk ki gyorsan a jelenlegi kódunkkal: mi történik, ha rákattintasz a Bejelentkezés vagy Regisztráció gombra?

Észrevetted a változást a böngésződ URL-sávjában?

Az alapértelmezett művelet egy <form> esetében az, hogy az űrlapot elküldi az aktuális szerver URL-jére a GET metódus használatával, az űrlap adatait közvetlenül az URL-hez fűzve. Ez a módszer azonban néhány hátránnyal jár:

Az elküldött adatok mérete nagyon korlátozott (kb. 2000 karakter).
Az adatok közvetlenül láthatók az URL-ben (nem ideális jelszavak esetén).
Nem működik fájlok feltöltésével.

Ezért megváltoztathatod a metódust POST metódusra, amely az űrlap adatait a HTTP-kérés törzsében küldi el a szervernek, az előző korlátozások nélkül.

Bár a POST a leggyakrabban használt módszer az adatok elküldésére, bizonyos speciális esetekben előnyösebb lehet a GET metódus használata, például keresőmező megvalósításakor.

Feladat

Adj hozzá action és method tulajdonságokat a regisztrációs űrlaphoz:

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

Most próbálj meg regisztrálni egy új fiókot a neveddel. A Regisztráció gombra kattintás után valami ilyesmit kell látnod:

Ha minden rendben van, a szerver válaszol a kérésedre egy JSON válasszal, amely tartalmazza a létrehozott fiók adatait.

✅ Próbálj meg újra regisztrálni ugyanazzal a névvel. Mi történik? Tipp: A :valid és :invalid CSS pszeudo-osztályok használatával testre szabhatod az űrlapvezérlők megjelenését attól függően, hogy érvényesek-e vagy sem.

Feladat

Egy új fiók létrehozásához két kötelező mező van: a felhasználónév és a pénznem, a többi mező opcionális. Frissítsd a form HTML-jét úgy, hogy a required attribútumot és a mező címkéjében szereplő szöveget is használd:

<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>

Bár ez a konkrét szervermegvalósítás nem szab meg konkrét korlátokat a mezők maximális hosszára, mindig jó gyakorlat ésszerű korlátokat meghatározni a felhasználói szövegbevitelnél.

Adj hozzá egy maxlength attribútumot a szövegmezőkhöz:

<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">

Ha most megnyomod a Regisztráció gombot, és egy mező nem felel meg az általunk meghatározott érvényességi szabályoknak, akkor valami ilyesmit kellene látnod:

Az ilyen validáció, amely mielőtt bármilyen adatot elküldenénk a szervernek történik, kliensoldali validációnak nevezik. De vedd figyelembe, hogy nem mindig lehetséges minden ellenőrzést elvégezni az adatok elküldése nélkül. Például itt nem tudjuk ellenőrizni, hogy létezik-e már egy fiók ugyanazzal a felhasználónévvel, anélkül hogy kérés küldenénk a szervernek. A szerveren végzett további ellenőrzést szerveroldali validációnak nevezzük.

Általában mindkettőt meg kell valósítani, és bár a kliensoldali validáció javítja a felhasználói élményt azáltal, hogy azonnali visszajelzést ad a felhasználónak, a szerveroldali validáció elengedhetetlen annak biztosításához, hogy a kezelt felhasználói adatok megbízhatóak és biztonságosak legyenek.

🚀 Kihívás

Mutass egy hibaüzenetet a HTML-ben, ha a felhasználó már létezik.

Íme egy példa arra, hogyan nézhet ki a végleges bejelentkezési oldal egy kis stílus hozzáadása után:

Előadás utáni kvíz

Áttekintés és önálló tanulás

A fejlesztők nagyon kreatívak lettek az űrlapkészítési megoldásaikban, különösen a validációs stratégiák terén. Ismerd meg a különböző űrlapfolyamatokat a CodePen böngészésével; találsz érdekes és inspiráló űrlapokat?

Feladat

Stílusozd a banki alkalmazásodat

Felelősségkizárás:
Ez a dokumentum az Co-op Translator AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.