Feltétel nélküli bejelentkezési űrlap html. Bejelentkezés és regisztrációs űrlap HTML5 és CSS3 segítségével

HTML címkék HTML űrlapok meghatározása az oldalon

Weboldalakat és egyedi oldalakat hozunk létre az Interneten kommunikálni a látogatókkal.

HTML űrlapok látogatók regisztrálására szolgálnak az oldalon, interaktív szavazásokhoz és szavazásokhoz, lehetővé teszik üzenetek küldését, vásárlást stb. HTML Az űrlapot egyetlen céllal hozzák létre: információk összegyűjtése és utólagos továbbítása feldolgozásra programszkriptbe vagy e-mailben.

Minta HTML űrlap | Bejelentkezés

Címkék, attribútumok és értékek

  • - határozza meg az alakot.
  • name = "" - az űrlap nevét határozza meg.
  • method = "" - meghatározza az adatok űrlapról történő küldésének módját. Értékek: "get" (alapértelmezett) és "post". A "post" módszert gyakran használják, mivel nagy mennyiségű adat átvitelét teszi lehetővé.
  • action = "" - meghatározza azt az URL-t, amelyen az adatokat feldolgozásra küldik. Esetünkben az enter_data.php ..
  • - meghatározni olyan űrlapelemeket, mint a gombok, rádiógombok, szövegmezők az adatbevitelhez.
  • type = "text" - egy szövegmezőt határoz meg az adatbevitelhez.
  • type = "password" - meghatároz egy mezőt a jelszó megadásához, miközben a szöveg csillagok vagy körök formájában jelenik meg.
  • type = "checkbox" - jelölőnégyzetet határoz meg.
  • type = "rejtett" - határozza meg rejtett elem nyomtatványok – átadásra szolgálnak további információ a szerverre.
  • méret = "25" - hosszúság szövegdoboz szimbólumokban.
  • maxlength = "30" - a beírható karakterek maximális száma.
  • value = "" - meghatározza azt az értéket, amelyet a rendszer feldolgozásra küld, ha rádiógombokra vagy kapcsolókra vonatkozik. Ennek az attribútumnak az értéke egy szövegmező vagy gomb részeként a fenti példában például Vasya vagy Login néven jelenik meg.

Minta HTML űrlap | Megjegyzések az oldalon

<a href="https://obanracer.ru/hu/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">Példa HTML</a> alak




Név



Levél








Címkék, attribútumok és értékek

  • action = "http: //site/comments.php" - meghatározza azt az URL-t, amelyre az űrlap adatai elküldésre kerülnek.
  • id = "" - az űrlapelem nevét, azonosítóját határozza meg.
  • name = "" - az űrlapelem nevét határozza meg.
  • - definiáljon egy szövegmezőt egy űrlap részeként.
  • cols = "" - meghatározza az oszlopok számát az űrlap szövegmezőjében.
  • rows = "" - meghatározza a sorok számát az űrlap szövegmezőjében.

Ha között szöveget, akkor a dobozban látható példaként, amely könnyen eltávolítható.

Minta HTML űrlap | Legördülő lista

HTML űrlapok




Címkék, attribútumok és értékek

  • - definiáljon egy listát a kiválasztandó pozíciókkal.
  • size = "" - a lista látható pozícióinak számát határozza meg. Ha az érték 1, akkor egy legördülő listával van dolgunk.
  • - meghatározza a lista pozícióit (elemeit).
  • value = "" - azt az értéket tartalmazza, amelyet az űrlap a megadott URL-en feldolgozásra küld.
  • selected = "selected" - Kiválasztja a lista pozícióját példaként.

Minta HTML űrlap | Gördülő lista

A size = "" attribútum értékének növelésével egy listát kapunk görgetősávval:

Első pozíció Második pozíció Harmadik pozíció Negyedik pozíció

HTML űrlapok




Ennél a lehetőségnél a multiple = "multiple" jelzőt használjuk, amely lehetővé teszi több pozíció kiválasztását. Távolléte csak egy elem kiválasztását teszi lehetővé.

  • type = "submit" - meghatározza a gombot.
  • type = "reset" - a reset gombot határozza meg.
  • value = "" - a gomb címkéjét határozza meg.
  • Lásd még:

    A bejelentkezési űrlap kialakítása nagyon fontos minden webhely számára. Összegyűjtöttünk néhány reszponzív bejelentkezési oldal sablont ingyenes letöltés... A bejelentkezési űrlap egy weboldal része. Amikor felkeresünk egy webhelyet, és teljes hozzáférést szeretnénk elérni, regisztrálnunk és bejelentkeznünk kell. Bármely webhely bejelentkezési űrlapja a webhely bármely oldalán megtalálható. Jobb vagy bal oldal lesz. Nincs olyan webhely, ahol nincs kitöltve a bejelentkezés és a regisztrációs űrlap. Tehát minden webhely számára fontos. Professzionális fejlesztő nélkül nagyon nehéz bejelentkezési űrlapot létrehozni HTML CSS-en keresztül.

    A HTML egy struktúra, a CSS pedig a tervezés. A HTML5 és a CSS3 a tervezés frissített verziója. A frissítési kóddal létrehozott bejelentkezési űrlapok némelyike ​​közvetlenül letölthető. A fejlesztő ingyenesen osztotta meg ezt az űrlapot. Ezeket bármilyen személyes szükségletre vagy üzleti célra fel lehet használni.

    Használja ezt a reszponzív bejelentkezési oldalsablont ingyenesen, és építheti fel magát. Bármilyen színt vagy stílust testreszabhat és megváltoztathat. Csatlakoztathatja az adatbázisát is, a jquery-t. Tehát ez a bejelentkezési sablon igazán hasznos és fontos.

    Megosztottuk ezt a bejegyzést néhány ingyenes bejelentkezési űrlapsablonnal html5 css3. Ez a gyűjtemény bővülni fog. Igyekszünk több bejelentkezési oldal sablont gyűjteni.

    Anyagtervezési űrlap

    Ez a bejelentkezési űrlap nagyon lenyűgözőnek és egyszerűnek tűnik. Szerkesztheti és módosíthatja a felület színét. Egyszerű kialakítás, de nagyon profi.

    DEMO LETÖLTÉS

    Ha bármilyen jelentkezési bejelentkezési űrlapot kell megterveznie, használja ezt a Material Design bejelentkezési űrlapot. Tökéletes lesz az alkalmazásához.

    DEMO LETÖLTÉS

    Animált SVG Avatar

    Az animált bejelentkezési sablonra nagy az igény. Ha használni akarod a szakmádban. Ez az Animált SVG Avatar bejelentkezési űrlap jobb az Ön számára.

    DEMO LETÖLTÉS

    Bejelentkezési űrlap shake hatása

    Ez egy egyszerű bejelentkezési űrlap, és van némi hatása, és az Ön professzionális tevékenységét használja.

    DEMO LETÖLTÉS

    CSS3 Animation Cloud és bejelentkezési űrlap

    Ha felhőalapú vállalkozása van, vagy bármilyen típusú felhőalapú vállalkozást tervez, használhatja ezt a CSS3 Animation Cloud- és bejelentkezési űrlapot.

    DEMO LETÖLTÉS

    Tiszta bejelentkezési űrlap

    Ez egy nagyon letisztult dizájn, és a név is ugyanaz a Tiszta bejelentkezési űrlap. Használja ezt az űrlapot tiszta webhelyén.

    DEMO LETÖLTÉS

    Bejelentkezési űrlap HTML5-ön

    Ezt a bejelentkezési űrlapot HTML5-re tervezték, és az Ön legjobb webhelyéhez használható.

    DEMO LETÖLTÉS

    Bejelentkezési űrlap csak CSS érvényesítés

    DEMO LETÖLTÉS

    Css bejelentkezési űrlap

    DEMO LETÖLTÉS

    Batman bejelentkezési űrlap

    DEMO LETÖLTÉS

    Bejelentkezési űrlap a Materializecss segítségével

    DEMO LETÖLTÉS

    Angular Material bejelentkezési űrlap

    DEMO LETÖLTÉS

    Reszponzív bejelentkezési űrlap

    DEMO LETÖLTÉS

    Reszponzív bejelentkezési űrlap

    DEMO LETÖLTÉS

    Egyszerű lapos forma forgó rakodóval

    DEMO LETÖLTÉS

    Jelentkezzen be Everdwellbe

    Az űrlapokat úgy tervezték, hogy adatokat küldjenek a felhasználótól a webszerverhez. A HTML-ben lévő űrlapok szövegdobozokból és szövegterületekből, jelölőnégyzetekből és választógombokból, valamint legördülő listákból állhatnak. Ezek mind formaelemek. Mindegyik elem valamilyen jelentést közvetít a webhely számára.
    Lényegében a HTML-űrlap egy olyan weboldal, amelyen az adatok megadására szolgáló területek láthatók. Miután kitöltötte az űrlapot, és rákattint a küldés gombra, az űrlapon lévő információk becsomagolódnak és elküldésre kerülnek a webszervernek egy szerver szkripttel (kezelőfájl) történő feldolgozásra. A feldolgozás után egy másik weboldalt küldünk vissza válaszként. Az alábbi ábra jól szemlélteti az űrlap működését:

    A HTML űrlapok létrehozásában nincs semmi nehéz. A legegyszerűbb módja annak, hogy képet kapjunk az űrlapokról, ha elemzünk egy kis HTML-kódot, majd megnézzük, hogyan működik. A következő példa egy egyszerű HTML-űrlap létrehozásának szintaxisát mutatja be:

    Példa: Egyszerű HTML-űrlap

    • Próbáld ki magad "

    Az első formám:
    Név:
    Vezetéknév:



    Egyszerű alak

    Az első formám:
    Név:
    Vezetéknév:


    Elem

    Az űrlapok az elem segítségével illeszthetők be a weboldalakba ... Ez egy tároló az űrlap összes tartalmának, beleértve az olyan elemeket, mint a szövegdobozok és gombok, valamint minden más címkét HTML nyelv... Más elemet azonban nem tartalmazhat. .
    Az űrlap szerverre küldéséhez használja a "Küldés" gombot, ugyanezt az eredményt kapja, ha az űrlapon belül megnyomja az "Enter" billentyűt. Ha a "Küldés" gomb nem található az űrlapon, az "Enter" billentyűvel lehet beküldeni.
    A legtöbb elem attribútuma az űrlap feldolgozását befolyásolják, nem a kialakítását. Ezek közül a leggyakoribbak akcióés módszer... Tulajdonság akció tartalmazza azt az URL-t, amelyre az űrlapon szereplő információkat elküldi a szerver feldolgozásra. Tulajdonság módszer a HTTP-módszer, amelyet a böngészőknek használniuk kell az űrlapadatok elküldésére.

    Elem

    Szinte minden űrlapmező az elem használatával jön létre (angol bemenetről - input). Kinézet elem attribútumának értékétől függően változik típus:

    Íme néhány attribútumérték típus:

    Szöveg és jelszó beírása

    Az űrlapelemek egyik legegyszerűbb típusa a szövegdoboz, amely lehetővé teszi a szöveg egy sorban történő bevitelét. Ez a típus A szövegbevitel alapértelmezés szerint be van állítva, ezért ez az egysoros mező jelenik meg, ha elfelejti megadni az attribútumot típus... Ha egysoros szövegbeviteli mezőt szeretne hozzáadni egy űrlaphoz, lépjen be az elembe regiszter attribútum típus szöveges értékkel:

    A jelszóbeviteli mező egyfajta normál szövegmező. Ugyanazokat az attribútumokat támogatja, mint az egysoros szövegmező. Tulajdonság név beállítja a jelszó beviteli mező nevét, amely a felhasználó által megadott jelszóval együtt elküldésre kerül a szervernek. A jelszó megadására szolgáló mező létrehozásához be kell állítania a jelszó értékét az attribútumhoz típus(jelszó (angol) - jelszó):

    Példa egy jelszómezővel rendelkező űrlap létrehozására:

    Példa: Jelszó beviteli mező

    • Próbáld ki magad "

    Az Ön bejelentkezési neve:

    Jelszó:




    Az Ön bejelentkezési neve:

    Jelszó:


    Ezzel az attribútummal együtt használhatja az attribútumot is max hossz, melynek értéke határozza meg a beírható karakterek maximális számát adott sor... Az attribútum segítségével beállíthatja a beviteli mező hosszát is méret... Alapértelmezés szerint a legtöbb böngésző 20 karakterre korlátozza a szövegmező szélességét. Új űrlapok elemeinek szélességének szabályozása az attribútum helyett méret, javasolt a Cascading Style Sheets (CSS) szolgáltatás használata.
    Tulajdonság érték beállítja azt az értéket, amely alapértelmezés szerint megjelenik a szövegmezőben az űrlap betöltésekor. A mezőbe alapértelmezett érték megadásával elmagyarázhatja a felhasználónak, hogy milyen adatokat és milyen formátumban szeretne itt megadni. Olyan, mint egy minta, mert a felhasználónak sokkal kényelmesebb kitölteni az űrlapot, példát látva maga előtt.

    Kapcsolók (rádió)

    Elem típus rádió olyan kapcsolókat hoz létre, amelyek a logikai „VAGY” elvet használják, lehetővé téve, hogy több érték közül csak egyet válasszon: ha kiválaszt egy pozíciót, akkor az összes többi inaktívvá válik. A váltóelemek alapvető szintaxisa a következő:

    Tulajdonság név rádiógombokhoz szükséges, és fontos szerepet játszik több választógomb csoportosításában. A kapcsolók csoportba vonásához be kell állítania ugyanaz az érték tulajdonság névés különböző attribútumértékek érték... Tulajdonság érték beállítja a kiválasztott rádiógomb értékét, amelyet el kell küldeni a szervernek. Az egyes választógombok értékének egyedinek kell lennie a csoporton belül, hogy a szerver tudja, melyik választ választotta a felhasználó.
    Attribútum jelenléte ellenőrizve(angolból - set) a kapcsoló elemnél jelzi, hogy a javasolt opciók közül melyiket kell alapértelmezés szerint kiválasztani az oldal betöltésekor, ha szükséges. Ez az attribútum csak egy kapcsolóelemhez állítható be a csoportból:

    • Próbáld ki magad "

    Hány éves vagy?

    1. 18 alatt
    2. 18-24-ig
    3. 25-től 35-ig
    4. több mint 35




    Hány éves vagy?

    1. 18 alatt
    2. 18-24-ig
    3. 25-től 35-ig
    4. több mint 35

    Jelölőnégyzetek

    Elem típus jelölőnégyzetet jelölőnégyzeteket hoz létre, amelyek rádiógombokhoz hasonlítanak, mivel lehetővé teszik a felhasználó számára, hogy válasszon az Ön által megadott lehetőségek közül. A fő különbség a rádiógombokhoz képest az, hogy a látogató egyszerre több lehetőséget is kiválaszthat, és magukat a zászlókat négyzetek jelzik, nem körök. A választógombokhoz hasonlóan a jelölőnégyzetek csoportja úgy jön létre, hogy minden elemhez ugyanazt az attribútumértéket rendeli hozzá név azonban minden jelölőnégyzetnek megvan a maga jelentése. A jelölőnégyzet alapvető szintaxisa a következő:

    Tulajdonság ellenőrizve A választógombokhoz hasonlóan azt határozza meg, hogy a jelölőnégyzetet alapértelmezés szerint be kell jelölni az oldal betöltésekor. Ez az attribútum egyszerre állítható be a csoport több jelölőnégyzetéhez.
    A következő példa jelölőnégyzeteket használ több alapértelmezett válaszbeállítás beállításához:

    Példa: kapcsolók használata

    • Próbáld ki magad "
    1. Dzsessz
    2. Blues
    3. Szikla
    4. Chanson
    5. Ország




    Milyen zenei műfajokat szeretsz?

    1. Dzsessz
    2. Blues
    3. Szikla
    4. Chanson
    5. Ország

    Elküldés és visszaállítás gombok

    Elem típus Beküldés létrehoz egy gombot, amelyre kattintva a böngésző elküldi a szerver szkriptet a felhasználó által az űrlapba bevitt adatok feldolgozására. Ha létrehozunk egy gombot, amely törli az űrlapot, akkor hozzárendeljük az attribútumot típus a "reset" érték. Elem típus Beküldés opcionális attribútum rendelhető hozzá név... Tulajdonság érték ebben az elemben a gombon lévő címkét jelölő szöveg megadására szolgál. Alapértelmezés szerint a böngészőkben a gomb "Küldés" feliratú, ha nem elégedett ezzel a felirattal - írja be saját maga. Mivel a megerősítő gombok stílusa a különböző böngészőkben eltérő lehet, jobb, ha saját maga állítja be a gomb stílusát CSS-eszközök segítségével, vagy grafikus gombokat használ.
    Hozzon létre megerősítést és törlés gombokat:

    Példa: Elküldés és visszaállítás használata

    • Próbáld ki magad "

    A Reset gombra kattintva visszaállítja a felhasználó által megadott adatokat.





    Action attribútum.

    A fő dolog az elem számára

    attribútum akció amely megadja az űrlap adatkezelőjét. Az adatkezelő egy fájl, amely leírja, hogy mit kell tenni az űrlapadatokkal. A feldolgozás eredményeként egy új HTML oldal kerül visszaadásra és visszakerül a böngészőbe. Más szóval, az attribútumban akció megadja az űrlap feldolgozásához szükséges kiszolgálókezelő fájl URL-útvonalát (ezt néha parancsfájloldalnak is nevezik). A szintaxis a következő:

    A feldolgozó fájl a szerveren van mytestserver.com a mappában névmappaés az adatokat feldolgozó szerver szkript neve - obrabotchik.php... Neki kerül átadásra az Ön által a weboldalon található űrlapon megadott összes adat. A .php kiterjesztés azt jelzi, hogy a megadott űrlapot egy PHP nyelven írt szkript dolgozza fel. Maga a kezelő más nyelven is írható, lehet például Python, Ruby stb. szkriptnyelv.
    Célszerű mindig az attribútum értékét beállítani akció... Ha az űrlapnak ugyanarra az oldalra kell küldenie az értékeket, ahol található, adjon meg egy üres karakterláncot az action attribútum értékeként: action = "".

    Method attribútum

    Tulajdonság módszer meghatározza, hogyan kell az információkat továbbítani a szerverre. Az űrlap elküldésének választott módja a küldeni kívánt adatoktól függ. Ezen adatok mennyisége játszik itt nagy szerepet. A legnépszerűbb két módszer az űrlap eredeti adatainak átvitelére a böngészőből a szerverre: KAPés POST... A módszer tetszőlegesre van beállítva, és ha nem adta meg, akkor a rendszer az alapértelmezettet használja KAP... Tekintsük mindegyik alkalmazását.

    POST módszer

    Módszer POST becsomagolja az űrlapadatokat, és láthatatlanul elküldi a szerverre a felhasználónak, mivel az adatokat az üzenet törzse tartalmazza. Webböngésző a módszer használatakor POST kérést küld a szervernek, amely speciális fejlécekből, majd az űrlapadatokból áll. Mivel ennek a kérésnek a tartalma csak a szerver számára érhető el, a metódus POST bizalmas adatok, például jelszavak, bankkártya adatok és a felhasználók egyéb személyes adatainak továbbítására szolgál. Módszer POST nagy mennyiségű információ küldésére is alkalmas, mivel a módszertől eltérően KAP, nincs korlátozása a továbbított karakterek számára.

    GET módszer

    Mint már tudja, a böngésző fő feladata a weblapok fogadása a szervertől. Tehát, amikor a módszert használja KAP, a böngészője ugyanúgy fogadja a weboldalt, mint mindig. Módszer KAP becsomagolja az űrlapadatokat is, de hozzáfűzi az url végéhez, mielőtt elküldi a kérést a szervernek. Hogy megértsük a módszer működését KAP, lássuk működés közben. Nyissa meg az első példát ebből a leckéből (Példa: Egyszerű HTML űrlap) a Jegyzettömbben (például Jegyzettömb ++), és végezzen egy kis módosítást a HTML-kódon:

    azok. cserélje ki POST a KAP.
    Mentse el a fájlt másként file_name.htmlés frissítse a böngésző oldalát (F5), majd töltse ki az űrlapot Vasya Pupkin, majd kattintson a "Küldés" gombra. A böngésző címsorában valami ilyesmit fog látni:

    Fájl_név.html Keresztnév = Vasya & vezetéknév = Kölyök

    Most már láthatja az egyes űrlapelemek nevét és értékét itt, az URL-ben.
    Az URL-t kérdőjel választja el az űrlap többi adatától, a változóneveket és értékeket pedig és jel választja el (&) .
    Ezt a módszert akkor kell használni, ha nem visz át nagy mennyiségű információt.
    Ez a módszer nem működik, ha az űrlapon szereplő adatok bizalmasak, például bankkártyaszámot vagy jelszót tárol.
    Valamint a módszer KAP nem megfelelő, ha az űrlappal együtt fájlokat szeretne küldeni a szerverre.

    Űrlapelemek csoportosítása

    A jelentés szerint összefüggő űrlapelemek csoportosíthatók a címkék között

    és
    ... Megjelenik a böngésző
    formaelemek csoportja körüli keretként. A keret megjelenése a Cascading Style Sheets (CSS) segítségével módosítható.
    Ha minden csoporthoz címet szeretne adni, szüksége van az elemre , amely meghatározza a keretben lévő csoportcím szövegét.

    A jelszóbeviteli mező egy normál szövegmező, amelyben a beírt szöveg a böngészőtől függően csillagok vagy pontok formájában jelenik meg. Ezt a funkciót úgy tervezték, hogy senki ne tudja leolvasni a beírt jelszót. Bár a beírt szöveg nem jelenik meg a képernyőn, a beírt információ titkosítás nélkül, tiszta szöveggel kerül továbbításra a szerverre. Ezért ennek a mezőnek a használata nem biztosít adatbiztonságot, és lehallgatható.

    A létrehozás szintaxisa a következő.

    Az attribútumok megegyeznek a szövegdoboz attribútumaival, és a táblázatban vannak felsorolva. egy.

    A jelszómezőt széles körben használják a webhelyeken a felhasználók engedélyezésére és a hozzáférés megkülönböztetésére a webhely azon részeihez, ahol meg kell erősítenie jogosultságát. Az 1. példa bemutatja, hogyan lehet ilyen mezőket létrehozni.

    Példa 1. Jelszó mező

    Jelszó mező

    Belépés:

    Jelszó:

    Ennek eredményeként a következőket kapjuk (1. ábra).

    Rizs. 1. A jelszómező nézete

    A jelszómezőre stílustulajdonságok vonatkoznak, amelyek meghatározzák a szín, a háttér, a keret stb. paramétereit. A 2. példa a háttérképek hozzáadását mutatja be az űrlapmezőkhöz. Vegyük a szövegmezők stílusát alapul.

    2. példa Kép hozzáadása egy szövegdobozhoz

    Jelszó mező

    Ennek a példának az eredménye az ábrán látható. 2. A képek háttérként kerülnek hozzáadásra, ezért a szöveget jobbra kell tolni a padding-bal-on keresztül, különben a kép fölött jelenik meg.

    Ebből a cikkből megtudhatja hogyan lehet regisztrációs és meghatalmazási űrlapot létrehozni HTML, JavaScript, PHP és MySql használatával. Az ilyen űrlapokat szinte minden webhelyen használják, függetlenül annak típusától. Mind a fórum, mind az online áruház, valamint a közösségi hálózatok (például Facebook, Twiter, Odnoklassniki) és sok más típusú webhely számára készültek.

    Ha van webhelye a helyi számítógépén, akkor remélem, már megvan. Semmi sem fog működni nélküle.

    Táblázat létrehozása az adatbázisban

    A felhasználói regisztráció megvalósításához mindenekelőtt adatbázisra van szükségünk. Ha már megvan, akkor nagyszerű, ellenkező esetben létre kell hozni. Ebben a cikkben részletesen elmagyarázom, hogyan kell ezt megtenni.

    Tehát van egy adatbázisunk (rövidítve adatbázis), most létre kell hoznunk egy táblát felhasználókat melybe felvesszük regisztrált felhasználóinkat.

    A cikkben azt is elmagyaráztam, hogyan lehet táblázatot adatbázisban létrehozni. A táblázat létrehozása előtt meg kell határoznunk, hogy milyen mezőket tartalmazzon. Ezek a mezők megfelelnek a regisztrációs űrlap mezőinek.

    Szóval, gondoltuk, elképzeltük, milyen mezők lesznek az űrlapunkon, és létrehoztunk egy táblázatot felhasználókat ilyen mezőkkel:

    • id- Azonosító. Terület id az adatbázisból minden táblának rendelkeznie kell.
    • keresztnév- Hogy mentse a nevet.
    • vezetéknév- A vezetéknevek mentéséért.
    • email- A postacím mentéséhez. Bejelentkezésként az e-mailt fogjuk használni, tehát ennek a mezőnek egyedinek kell lennie, azaz EGYEDI indexűnek kell lennie.
    • email_status- Mező, amely jelzi, hogy a levél megerősítve van-e vagy sem. Ha a levél visszaigazolásra kerül, akkor annak értéke 1, ellenkező esetben 0 lesz.
    • Jelszó- A jelszó mentéséhez.


    Ha azt szeretné, hogy a regisztrációs űrlapon több mező legyen, itt is felveheti azokat.

    Minden, az asztalunk felhasználókat kész. Térjünk át a következő lépésre.

    Adatbázis kapcsolat

    Elkészítettük az adatbázist, most csatlakozni kell hozzá. A PHP MySQLi kiterjesztéssel fogunk csatlakozni.

    Webhelyünk mappájában hozzon létre egy fájlt, melynek neve dbconnect.php, és beleírjuk a következő szkriptet:

    DB csatlakozási hiba... Hiba leírása: ".mysqli_connect_error ()."

    "; kilépés ();) // Állítsa be a kapcsolat kódolását $ mysqli-> set_charset (" utf8 "); // A kényelem kedvéért adjunk ide egy változót, amely a webhelyünk nevét fogja tartalmazni $ address_site =" http: // testsite.local " ;?>

    Ez a fájl dbconnect.php be kell kötni az űrlapkezelőkhöz.

    Ügyeljen a változóra $ cím_hely, itt feltüntettem a tesztoldalam nevét, amin dolgozni fogok. Ön adja meg webhelye nevét.

    A webhely szerkezete

    Most pedig vessünk egy pillantást oldalunk HTML szerkezetére.

    A webhely fejlécét és láblécét áthelyezzük ide külön fájlokat, header.phpés lábléc.php... Minden oldalon feltüntetjük őket. Mégpedig a fő (fájl index.php), a regisztrációs űrlapot tartalmazó oldalra (fájl form_register.php) és az engedélyezési űrlapot tartalmazó oldalra (fájl form_auth.php).

    Blokkolás linkjeinkkel, bejegyzésés felhatalmazást, adja hozzá a webhely fejlécéhez, hogy azok minden oldalon megjelenjenek. Egy link fog megjelenni regisztrációs űrlap oldala(fájl form_register.php), a másikat pedig az oldalra meghatalmazási űrlap(fájl form_auth.php).

    A header.php fájl tartalma:

    Oldalunk neve

    Ennek eredményeként a főoldal így néz ki:


    Természetesen lehet, hogy az Ön webhelye teljesen más szerkezetű, de ez most nem fontos számunkra. A lényeg az, hogy vannak linkek (gombok) a regisztrációhoz és az engedélyezéshez.

    Most pedig térjünk át a regisztrációs űrlapra. Amint azt már megértette, megvan a fájlban form_register.php.

    Lépjen az adatbázisba (a phpMyAdminban), nyissa meg a táblázat szerkezetét felhasználókatés nézzük meg, milyen mezőkre van szükségünk. Ez azt jelenti, hogy szükségünk van a vezeték- és utónév megadására szolgáló mezőkre, egy postai cím (Email) és egy jelszó megadására szolgáló mezőre. És biztonsági okokból hozzáadunk egy mezőt a captcha beviteléhez.

    A szerveren a regisztrációs űrlap feldolgozása következtében különböző hibák léphetnek fel, amelyek miatt a felhasználó nem tud regisztrálni. Ezért ahhoz, hogy a felhasználó megértse, miért sikertelen a regisztráció, üzeneteket kell megjeleníteni ezekről a hibákról.

    Az űrlap megjelenítése előtt adjon hozzá egy blokkot a munkamenet hibaüzeneteinek megjelenítéséhez.

    És még valami, ha a felhasználó már jogosult, és az érdeklődés kedvéért közvetlenül belép a regisztrációs oldalra úgy, hogy ír a böngésző címsorába site_address / form_register.php, akkor ebben az esetben a regisztrációs űrlap helyett egy jogcímet jelenítünk meg számára, amely szerint már regisztrált.

    Általában a fájl kódja form_register.phpígy kaptuk:

    Már regisztráltál

    A böngészőben a regisztrációs űrlapot tartalmazó oldal így néz ki:


    Keresztül kötelező attribútum, minden mezőt kötelezővé tettünk.

    Ügyeljen a regisztrációs űrlap kódjára, ahol captcha jelenik meg:


    A kép src attribútumának értékében megadtuk a fájl elérési útját captcha.php amely ezt a captcha-t generálja.

    Nézzük a fájl kódját captcha.php:

    A kód jól meg van írva, ezért csak egy pontra koncentrálok.

    A funkció belsejében imageTtfText (), a betűtípus elérési útja meg van adva verdana.ttf... Tehát ahhoz, hogy a captcha megfelelően működjön, létre kell hoznunk egy mappát betűtípusok, és helyezze oda a fontfájlt verdana.ttf... Megtalálhatja és letöltheti az internetről, vagy átveheti az archívumból a cikk anyagaival együtt.

    Elkészültünk a HTML szerkezettel, ideje továbblépni.

    Az e-mail érvényességének ellenőrzése a jQuery segítségével

    Minden űrlapnak ellenőriznie kell a bevitt adatok érvényességét, mind a kliens oldalon (JavaScript, jQuery használatával), mind a szerver oldalon.

    Különös figyelmet kell fordítanunk az E-mail mezőre. Nagyon fontos, hogy a megadott postacím érvényes legyen.

    Mert ezen a területen input, beállítjuk az email típust (type = "email"), ez egy kicsit figyelmeztet minket a helytelen formátumok ellen. Ez azonban nem elég, mert a böngésző által rendelkezésünkre bocsátott kódellenőrrel könnyedén megváltoztathatja az attribútum értékét. típus Val vel email a szövegés ennyi, a csekkünk többé nem lesz érvényes.


    És ebben az esetben megbízhatóbb ellenőrzést kell végeznünk. Ehhez a JavaScript jQuery könyvtárát fogjuk használni.

    A jQuery könyvtár csatlakoztatásához a fájlban header.php címkék között , a záró címke előtt , add hozzá ezt a sort:

    Közvetlenül e sor után adja hozzá az e-mail-ellenőrző kódot. Itt hozzáadunk egy kódot a beírt jelszó hosszának ellenőrzéséhez. A hossza legalább 6 karakter legyen.

    A szkript segítségével ellenőrizzük a megadott e-mail cím érvényességét. Ha a felhasználó hibás e-mailt adott meg, akkor erről hibaüzenetet jelenítünk meg, és kikapcsoljuk az űrlap elküldésére szolgáló gombot. Ha minden rendben van, akkor eltávolítjuk a hibát és aktiváljuk az űrlap beküldésére szolgáló gombot.

    És ezzel készen is vagyunk az űrlap ügyféloldali érvényesítésével. Most már elküldhetjük a szerverre, ahol szintén elvégzünk pár ellenőrzést és hozzáadjuk az adatokat az adatbázishoz.

    Felhasználó regisztráció

    Az űrlapot feldolgozásra a fájlba küldjük register.php, a POST módszerrel. Név ebből a fájlból attribútumértékben megadott kezelő akció... A küldési mód pedig az attribútum értékében van megadva módszer.

    Nyissa meg ezt a fájlt register.phpés az első dolgunk, hogy írjunk egy függvényt a munkamenet indításához, és kapcsoljuk össze a korábban létrehozott fájlt dbconnect.php(Ebben a fájlban hoztunk létre kapcsolatot az adatbázissal). És mégis, azonnal deklaráljuk a sejteket error_messagesés siker_üzenetek a munkamenet globális tömbjében. V hibaüzenetek minden hibaüzenetet rögzítünk, amely az űrlap feldolgozása során jelentkezik, és ben siker_üzenetek, örömteli üzeneteket rögzítünk.

    Mielőtt továbblépnénk, ellenőriznünk kell egyáltalán benyújtották-e az űrlapot... A támadó megnézheti egy attribútum értékét akció az űrlapról, és megtudja, melyik fájl dolgozza fel ezt az űrlapot. És felmerülhet az ötlet, hogy közvetlenül ehhez a fájlhoz lépjen a következő cím beírásával a böngésző címsorába: http://arees_site/register.php

    Ezért ellenőriznünk kell, hogy van-e olyan cella a globális POST tömbben, amelynek neve megegyezik az űrlapon található "Regisztráció" gombunk nevével. Így ellenőrizzük, hogy a „Regisztráció” gombra kattintottak-e vagy sem.

    Ha egy támadó megpróbál közvetlenül ehhez a fájlhoz navigálni, hibaüzenetet kap. Hadd emlékeztesselek arra, hogy a $ address_site változó tartalmazza a webhely nevét, és ez deklarálva lett a fájlban dbconnect.php.

    Hiba! kezdőlap.

    "); } ?>

    A munkamenetben lévő captcha értéke előállításkor hozzáadásra került a fájlban captcha.php... Emlékeztetőül ismét megmutatom ezt a kódrészletet a fájlból. captcha.php, ahol a captcha értéke hozzáadódik a munkamenethez:

    Most folytassuk magával az ellenőrzéssel. Fájlban register.php, az if blokkon belül, ahol ellenőrizzük, hogy a "Regisztráció" gombra kattintottak-e, vagy inkább hol van megadva a megjegyzés " // (1) A következő kódrészlet helye"mi írunk:

    // A kapott captcha ellenőrzése // Vágja le a szóközöket a sor elejétől és végétől $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! üres ($ captcha)) (// Hasonlítsa össze a kapott értéket a munkamenet értékével. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Ha a captcha nem megfelelő, akkor visszaküldjük a felhasználót a regisztrációs oldalra, és ott hibaüzenetet jelenítünk meg, hogy rossz captcha-t írt be $ error_message = "

    Hiba! Rossz captcha-t adott meg

    "; // Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION [" error_messages "] = $ error_message; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: " . $ Address_site . "/ form_register.php"); // A szkript kilépésének leállítása ();) // (2) Helyezze a következő kódrészletet) else (// Ha a captcha nem került átadásra vagy üres, lépjen ki () "

    Hiba! Nincs ellenőrző kód, vagyis a captcha kód. Mehet a kezdőlapra.

    "); }

    Ezután a POST tömbből kapott adatokat kell feldolgoznunk. Először is ellenőriznünk kell a globális POST tömb tartalmát, vagyis vannak-e olyan cellák, amelyek neve megegyezik az űrlapunk beviteli mezőinek nevével.

    Ha a cella létezik, akkor ebből a cellából vágjuk le a szóközöket a sor elejétől és végétől, ellenkező esetben a felhasználót visszairányítjuk a regisztrációs űrlapot tartalmazó oldalra.

    Továbbá, miután levágtuk a szóközöket, adjunk hozzá egy sort a változóhoz, és ellenőrizzük, hogy ez a változó üres-e, ha nem üres, akkor folytassa, ellenkező esetben a regisztrációs űrlappal visszairányítjuk a felhasználót az oldalra.

    Illessze be ezt a kódot a megadott helyre " // (2) A következő kódrészlet helye".

    / * Ellenőrizze, hogy a $ _POST globális tömb tartalmaz-e az űrlapból küldött adatokat, és a beküldött adatokat közönséges változókba foglalja. * / If (isset ($ _ POST ["first_name"])) (// Vágja le a szóközöket az elejétől, és a string végétől $ first_name = trim ($ _ POST ["first_name"]); // Ellenőrizze a változó ürességét if (! üres ($ first_name)) (// A biztonság kedvéért konvertálja a speciális karaktereket HTML entitásokká $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Adja meg nevét

    A név mező hiányzik

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); ) if ( isset ($ _ POST ["last_name"])) (// Szóközök levágása a string elejétől és végétől $ last_name = trim ($ _ POST ["last_name"]); if (! üres ($ vezetéknév) )) (// A biztonság kedvéért konvertálja át a speciális karaktereket HTML entitásokká $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Írja be vezetéknevét

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); )) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    A vezetéknév mező hiányzik

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); ) if ( isset ($ _ POST ["email"])) (// Szóközök kivágása a sor elejétől és végétől $ email = trim ($ _ POST ["email"]); if (! üres ($ email )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Az e-mail cím formátumának és egyediségének ellenőrzésére szolgáló kód helye) else (// A hibaüzenet mentése a munkamenetbe. $ _SESSION [ "error_messages"]. = "

    Írd be az email címed

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); )) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); ) if ( isset ($ _ POST ["jelszó"])) (// Szóközök levágása a karakterlánc elejétől és végétől $ jelszó = trim ($ _ POST ["jelszó"]); if (! üres ($ jelszó )) ($ jelszó = htmlspecialchars ($ jelszó, ENT_QUOTES); // A paprol titkosítása $ jelszó = md5 ($ jelszó. "top_secret");) else (// Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages" "]. = "

    Írd be a jelszavad

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); )) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); ) // (4) A felhasználó adatbázishoz való hozzáadásához szükséges kód helye

    Különösen fontos a terület email... Az adatbázisban ellenőriznünk kell a kapott postai cím formátumát, egyediségét. Vagyis van-e már regisztrált felhasználó ugyanazzal a levelezési címmel?

    a megadott helyen" // (3) Kód helye a postai cím formátumának és egyediségének ellenőrzéséhez"adja hozzá a következő kódot:

    // Ellenőrizze a kapott e-mail cím formátumát a $ reg_email = "/^**@(+(*+)*\.)++/i" reguláris kifejezéssel; // Ha a kapott e-mail cím formátuma nem egyezik a reguláris kifejezéssel if (! Preg_match ($ reg_email, $ email)) (// Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Érvénytelen e-mail-címet adott meg

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); ) // Ellenőrizzük, hogy van-e már ilyen cím az adatbázisban $ Result_query = $ mysqli-> query ("SELECT` email` FROM `users` WHERE` email` = "". $ Email. "" "); // Ha a kapott sorok száma pontosan egy, tehát egy felhasználó ezzel az email címmel már regisztrálva van if ($ result_query-> num_rows == 1) (// Ha az eredmény nem hamis if (($ sor = $ result_query -> fetch_assoc ())! = false) (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Az ezzel az e-mail címmel rendelkező felhasználó már regisztrálva van

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php ");) else (// Mentse el a hibaüzenetet a munkamenethez . $ _SESSION ["error_messages"]. = "

    Hiba az adatbázis lekérdezésében

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php ");) / * bezárja a kijelölést * / $ result_query-> bezárás (); // A szkript kilépésének leállítása ();) / * a kijelölés bezárása * / $ result_query-> bezárás ();

    És készen vagyunk az összes ellenőrzéssel, ideje hozzáadni a felhasználót az adatbázishoz. a megadott helyen" // (4) A felhasználó adatbázishoz való hozzáadásához szükséges kód helye"adja hozzá a következő kódot:

    // Felhasználó hozzáadása az adatbázishoz $ result_query_insert = $ mysqli-> query ("INSERT INTO` users` (first_name, last_name, email, password) VALUES ("". $ Keresztnév. "", "". $ Vezetéknév . " "," ". $ email." "," ". $ jelszó." ")"); if (! $ result_query_insert) (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Nem sikerült felhasználót hozzáadni az adatbáziskéréshez

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); ) else ( $ _SESSION ["success_messages"] = "

    A regisztráció sikeresen lezárult!!!
    Most már bejelentkezhet felhasználónevével és jelszavával.

    "; // Küldje el a felhasználót az engedélyezési oldal fejlécére (" HTTP / 1.1 301 Permanently Moved "); header (" Hely: ". $ Address_site." / Form_auth.php ");) / * A kérés befejezése * / $ result_query_insert-> close (); // Az adatbázis-kapcsolat bezárása $ mysqli-> close ();

    Ha hiba történik a felhasználó adatbázishoz való felvételére vonatkozó kérésben, a hibáról üzenetet adunk a munkamenethez, és visszaküldjük a felhasználót a regisztrációs oldalra.

    Ellenkező esetben, ha minden jól ment, egy üzenetet is adunk a munkamenethez, de már kellemesebb, vagyis közöljük a felhasználóval, hogy a regisztráció sikeres volt. És átirányítjuk az engedélyezési űrlapot tartalmazó oldalra.

    Az e-mail cím formátumának és a jelszó hosszának ellenőrzésére szolgáló szkript a fájlban található header.php, így ebből az űrlapból is hatni fog a mezőkre.

    A munkamenet is elindul a fájlban header.php, tehát a fájlban form_auth.php nem kell elindítania a munkamenetet, mert hibaüzenetet kapunk.


    Mint mondtam, itt is működik az email cím formátumát és a jelszó hosszát ellenőrző szkript. Ezért ha a felhasználó hibás email címet vagy rövid jelszót ad meg, azonnal hibaüzenetet kap. És a gomb bejönni inaktívvá válik.

    A hibák kiküszöbölése után a gombot bejönni aktívvá válik, és a felhasználó elküldheti az űrlapot a szervernek, ahol azt feldolgozzák.

    Felhasználói jogosultság

    Érték tulajdonításához akció az engedélyezési hendikepnek van egy fájlja auth.php, ez azt jelenti, hogy az űrlap ebben a fájlban kerül feldolgozásra.

    És hát nyissa meg a fájlt auth.phpés írja be a kódot az engedélyezési űrlap feldolgozásához. Az első dolog, hogy elindít egy munkamenetet, és csatlakoztatja a fájlt dbconnect.php az adatbázishoz való csatlakozáshoz.

    // Egy cella deklarálása az űrlap feldolgozása közben esetlegesen előforduló hibák hozzáadásához. $ _SESSION ["error_messages"] = ""; // A cella deklarálása a sikeres üzenetek hozzáadásához $ _SESSION ["success_messages"] = "";

    / * Ellenőrizze, hogy az űrlapot elküldték-e, vagyis a Bejelentkezés gombra kattintottak-e. Ha igen, akkor folytassa, ha nem, akkor jelenítsen meg egy hibaüzenetet a felhasználónak arról, hogy közvetlenül erre az oldalra ment. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! üres ($ _ POST ["btn_submit_auth"])) (// (1) Szóköz a következő kódrészlethez) else (exit ("

    Hiba!Ön közvetlenül erre az oldalra lépett, így nincs feldolgozandó adat. Mehet a kezdőlapra.

    "); }

    // Ellenőrizze az eredményül kapott captcha if (isset ($ _ POST ["captcha"])) (// Vágja le a szóközöket a sor elejétől és végétől $ captcha = trim ($ _ POST ["captcha"]); if (! Üres ($ captcha )) (// Hasonlítsa össze a kapott értéket a munkamenet értékével. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Ha a captcha nem megfelelő , akkor visszaküldjük a felhasználót az engedélyezési oldalra, és ott hibaüzenetet jelenítünk meg, hogy rossz captcha-t írt be. $ error_message = "

    Hiba! Rossz captcha-t adott meg

    "; // Mentse a hibaüzenetet a munkamenetbe. $ _SESSION [" error_messages "] = $ error_message; // A felhasználó visszaadása az engedélyezési oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: " . $ Address_site . "/ form_auth.php"); // A szkript kilépésének leállítása ();)) else ($ error_message = "

    Hiba! A captcha beírására szolgáló mező nem lehet üres.

    "; // Mentse a hibaüzenetet a munkamenetbe. $ _SESSION [" error_messages "] = $ error_message; // A felhasználó visszaadása az engedélyezési oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: " . $ Address_site . "/ form_auth.php"); // A szkript kilépésének leállítása ();) // (2) Az e-mail cím feldolgozásának helye // (3) A jelszó feldolgozásának helye // (4) lekérdezés az adatbázisban) else (// Ha a captcha nincs átadva, lépjen ki ("

    Hiba! Hiányzik az ellenőrző kód, vagyis a captcha kód. Mehet a kezdőlapra.

    "); }

    Ha a felhasználó helyesen adta meg az ellenőrző kódot, akkor folytassa, ellenkező esetben visszaküldjük az engedélyezési oldalra.

    Postacím ellenőrzése

    // Vágja le a szóközöket a sor elejétől és végétől $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! üres ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Ellenőrizze a kapott e-mail cím formátumát a reguláris kifejezéssel $ reg_email = " /^**@(+(*+)*\.)++/i "; // Ha a kapott e-mail cím formátuma nem egyezik a reguláris kifejezéssel if (! preg_match ($ reg_email, $ email)) (// Mentés a munkamenet hibaüzenetébe. $ _SESSION ["error_messages"]. = "

    Rossz e-mail címet adott meg

    "; // A felhasználó visszaadása az engedélyezési oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_auth.php "); // A szkript kilépésének leállítása (); )) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    A postai cím (e-mail) megadására szolgáló mező nem lehet üres.

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_register.php "); // A szkript kilépésének leállítása (); )) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Az e-mail mező hiányzik

    "; // A felhasználó visszaadása az engedélyezési oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_auth.php "); // A szkript kilépésének leállítása (); ) // (3) Hely a jelszó feldolgozására

    Ha a felhasználó hibás formátumban adott meg postai címet, vagy a postai cím mező értéke üres, akkor azt visszaküldjük az engedélyezési oldalra, ahol erről üzenetet jelenítünk meg.

    Jelszó ellenőrzés

    A következő feldolgozandó mező a jelszómező. A megadott helyre" // (3) A jelszó feldolgozásának helye", mi írunk:

    If (isset ($ _ POST ["jelszó"])) (// Szóközök levágása a karakterlánc elejétől és végétől $ jelszó = trim ($ _ POST ["jelszó"]); if (! Üres ($ jelszó) ) ($ jelszó = htmlspecialchars ($ jelszó, ENT_QUOTES); // A jelszó titkosítása $ jelszó = md5 ($ jelszó. "top_secret");) else (// Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages" ]. = "

    Írd be a jelszavad

    "; // Visszatérés a felhasználónak a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_auth.php "); // A szkript kilépésének leállítása (); )) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Nincs mező a jelszó megadására

    "; // Visszatérés a felhasználónak a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_auth.php "); // A szkript kilépésének leállítása (); )

    Itt az md5 () függvény segítségével titkosítjuk a kapott jelszót, mivel az adatbázisban titkosított formában vannak jelszavaink. Egy további titkos szó a titkosításban, esetünkben " titkos"aznak kell lennie, amelyet a felhasználó regisztrálásakor használtak.

    Most egy olyan felhasználó mintájára kell lekérdezni az adatbázist, akinek a levelezési címe megegyezik a kapott levelezési címmel, a jelszava pedig a kapott jelszóval.

    // Lekérdezés az adatbázisban a felhasználó kiválasztásáról. $ result_query_select = $ mysqli-> query ("SELECT * FROM` users` WHERE email = "". $ email. "" ÉS jelszó = "". $ jelszó. "" "); if (! $ result_query_select) (// Mentse el a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Hibakérés a felhasználó adatbázisból való lekérésekor

    "; // A felhasználó visszaadása a regisztrációs oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_auth.php "); // A szkript kilépésének leállítása (); ) else ( // Ellenőrizd, hogy nincs-e ilyen adatokkal rendelkező felhasználó az adatbázisban, majd hibaüzenetet jeleníts meg if ($ result_query_select-> num_rows == 1) (// Ha a megadott adatok megegyeznek az adatbázisból származó adatokkal, akkor mentse $ _SESSION ["email"] = $ e-mail; $ _SESSION ["jelszó"] = $ jelszó; // A felhasználó visszaadása kezdőlap fejléc ("HTTP / 1.1 301 véglegesen áthelyezve"); header ("Hely:". $ cím_hely. "/ index.php"); ) else (// Mentse a hibaüzenetet a munkamenetbe. $ _SESSION ["error_messages"]. = "

    Helytelen felhasználónév és/vagy jelszó

    "; // Visszatérés a felhasználónak az engedélyezési oldal fejlécéhez (" HTTP / 1.1 301 Permanently Moved "); fejléc (" Hely: ". $ Address_site." / Form_auth.php "); // A szkript kilépésének leállítása (); ))

    Jelentkezzen ki az oldalról

    És az utolsó dolog, amit teszünk a helyszín elhagyásának eljárása... Jelenleg a fejléc az engedélyezési oldalra és a regisztrációs oldalra mutató hivatkozásokat jelenít meg.

    A webhely fejlécében (fájl header.php), a munkamenet segítségével ellenőrizzük, hogy a felhasználó már bejelentkezett-e. Ha nem, akkor a regisztrációs és engedélyezési linkeket jelenítjük meg, ellenkező esetben (ha engedélyezett) akkor a regisztrációs és engedélyezési hivatkozások helyett a linket jelenítjük meg Kijárat.

    Módosított kódrészlet a fájlból header.php:

    bejegyzés

    Kijárat

    Ha rákattint a kilépési linkre az oldalról, eljutunk a fájlhoz logout.php, ahol egyszerűen megsemmisítjük a munkamenetből származó levelezési címet és jelszót tartalmazó cellákat. Ezt követően visszaküldjük a felhasználót arra az oldalra, amelyen a linkre kattintott kijárat.

    Fájl kódja logout.php:

    Ez minden. Most már tudod, hogyan regisztrációs és engedélyezési űrlapok végrehajtása és feldolgozása felhasználó a webhelyén. Ezek az űrlapok szinte minden oldalon megtalálhatók, így minden programozónak tudnia kell, hogyan hozhatja létre őket.

    Megtanultuk a bemeneti adatok érvényesítését is, mind kliens oldalon (böngészőben, JavaScript, jQuery segítségével), mind szerver oldalon (használva PHP nyelv). Mi is tanultunk hajtsa végre a helyszín elhagyására vonatkozó eljárást.

    Minden szkript tesztelt és működik. Ezen a linken töltheti le a kis oldal fájljait tartalmazó archívumot.

    A jövőben írok egy cikket, ahol leírom. És tervezek egy cikket is írni, ahol elmagyarázom (az oldal újratöltése nélkül). Tehát, hogy értesüljön az új cikkek megjelenéséről, feliratkozhat az oldalamra.

    Ha kérdése van, forduljon hozzánk, ha hibát észlel a cikkben, kérem jelezze felém.

    Óraterv (5. rész):

    1. Hozzon létre HTML-struktúrát a bejelentkezési űrlaphoz
    2. A kapott adatokat feldolgozzuk
    3. A webhely fejlécében megjelenítjük a felhasználó üdvözlését

    Tetszett a cikk?