Beznosacījumu pieteikšanās veidlapa html. Pieteikšanās un reģistrācijas forma ar HTML5 un CSS3

HTML tagi HTML formu noteikšana vietnē

Mēs veidojam vietnes un atsevišķas lapas internetā sazināties ar apmeklētājiem.

HTML veidlapas tiek izmantoti, lai reģistrētu vietnes apmeklētājus, veiktu interaktīvās aptaujas, ļautu sūtīt ziņas, veikt pirkumus utt. HTML Veidlapa ir izveidota ar vienu mērķi: informācijas apkopošana un turpmāka nodošana apstrādei programmas skriptā vai pa e-pastu.

HTML veidlapas paraugs | Ievadiet vietni

Tagi, atribūti un vērtības

  • - noteikt formu.
  • name = "" — definē formas nosaukumu.
  • metode = "" — nosaka datu nosūtīšanas metodi no veidlapas. Vērtības: "get" (noklusējums) un "post". Bieži tiek izmantota "post" metode, jo tā ļauj pārsūtīt lielus datu apjomus.
  • action = "" — definē URL, uz kuru dati tiek nosūtīti apstrādei. Mūsu gadījumā enter_data.php ..
  • - definēt tādus formas elementus kā pogas, radio pogas, teksta lauki datu ievadei.
  • type = "text" — definē teksta lauku datu ievadei.
  • type = "password" - definē lauku paroles ievadīšanai, kamēr teksts tiek parādīts kā zvaigznītes vai apļi.
  • type = "checkbox" — definē izvēles rūtiņu.
  • tips = "slēpts" - definē slēptais elements veidlapas - izmanto pārsūtīšanai Papildus informācija uz serveri.
  • izmērs = "25" - garums teksta lodziņš simbolos.
  • maxlength = "30" - maksimālais ievadāmo rakstzīmju skaits.
  • value = "" — nosaka vērtību, kas tiks nosūtīta apstrādei, ja tā attiecas uz radiopogām vai slēdžiem. Šī atribūta vērtība kā daļa no teksta lauka vai pogas tiks parādīta, piemēram, Vasya vai Login iepriekš minētajā piemērā.

HTML veidlapas paraugs | Komentāri vietnē

<a href="https://obanracer.ru/lv/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">HTML piemērs</a> forma




Vārds



Pasts

Tagi, atribūti un vērtības

  • action = "http: //site/comments.php" — definē URL, uz kuru tiks nosūtīti veidlapas dati.
  • id = "" - definē formas elementa nosaukumu, identifikatoru.
  • name = "" — definē formas elementa nosaukumu.
  • - definēt teksta lauku kā veidlapas daļu.
  • cols = "" — nosaka kolonnu skaitu veidlapas teksta laukā.
  • rows = "" — nosaka rindu skaitu veidlapas teksta laukā.

Ja starp ievietojiet tekstu, tas tiks parādīts lodziņā kā piemērs, ko ir viegli noņemt.

HTML veidlapas paraugs | Izvēlnes saraksts

HTML veidlapas

Tagi, atribūti un vērtības

  • - definēt sarakstu ar pozīcijām atlasei.
  • izmērs = "" — nosaka redzamo saraksta pozīciju skaitu. Ja vērtība ir 1, mums ir darīšana ar nolaižamo sarakstu.
  • - definēt saraksta pozīcijas (posteņus).
  • vērtība = "" — satur vērtību, ko veidlapa nosūtīs apstrādei norādītajā URL.
  • atlasīts = "atlasīts" — kā piemēru atlasa saraksta pozīciju.

HTML veidlapas paraugs | Ritināms saraksts

Palielinot atribūta size = "" vērtību, mēs iegūstam sarakstu ar ritjoslu:

Pirmā pozīcija Otrā pozīcija Trešā pozīcija Ceturtā pozīcija

HTML veidlapas

Šai opcijai mēs izmantojam vairāku = "vairāku" karogu, kas ļauj atlasīt vairākas pozīcijas. Viņa prombūtne ļauj atlasīt tikai vienu vienumu.

  • type = "iesniegt" - definē pogu.
  • type = "atiestatīt" - nosaka atiestatīšanas pogu.
  • vērtība = "" — nosaka pogas etiķeti.

    • Skatiet papildus:

    Pieteikšanās veidlapas dizains ir patiešām svarīgs jebkurai vietnei. Mēs apkopojām dažas adaptīvas pieteikšanās lapas veidnes bezmaksas lejupielāde... Pieteikšanās forma ir vietnes sastāvdaļa. Kad mēs ejam uz vietni un vēlamies iegūt pilnu piekļuvi, ir jāreģistrējas un jāpiesakās. Jebkuras vietnes pieteikšanās veidlapu var atrast jebkurā vietnes pusē. Tā būs labā vai kreisā puse. Neviena vietne bez pieteikšanās un reģistrēšanās veidlapas nav aizpildīta. Tāpēc tas ir svarīgi jebkurai vietnei. Ir ļoti grūti izveidot pieteikšanās veidlapu, izmantojot HTML CSS bez profesionāla izstrādātāja.

    HTML ir struktūra, un CSS ir dizains. HTML5 un CSS3 ir atjauninātā versija projektēšanai. Dažas no pieteikšanās veidlapām, kas izveidotas, izmantojot šo atjauninājumu kodējumu, var lejupielādēt tieši. Izstrādātājs šo veidlapu kopīgoja bez maksas. Tos var izmantot jebkurām personīgām vajadzībām vai biznesam.

    Izmantojiet šo adaptīvās pieteikšanās lapas veidni bez maksas, un varat izveidot sevi. Jūs varat pielāgot un mainīt jebkuru krāsu vai stilu. Varat arī savienot savu datu bāzi, jquery. Tāpēc šī pieteikšanās veidne ir patiešām noderīga un svarīga.

    Mēs esam kopīgojuši šo ziņu ar dažām bezmaksas pieteikšanās veidlapu veidnēm html5 css3. Šī kolekcija tiks papildināta. Mēs cenšamies apkopot vairāk pieteikšanās lapas veidņu sāknēšanas.

    Materiāla dizaina veidlapa

    Šī pieteikšanās forma izskatās patiešām lieliska un vienkārša. Varat rediģēt un mainīt interfeisa krāsu. Vienkāršs dizains, bet ļoti profesionāls.

    DEMO LEJUPIELĀDE

    Ja jums ir jāizstrādā jebkura pieteikuma pieteikšanās veidlapa, varat izmantot šo Materiāla dizaina pieteikšanās veidlapu. Tas būs lieliski piemērots jūsu lietojumprogrammai.

    DEMO LEJUPIELĀDE

    Animēts SVG iemiesojums

    Animētai pieteikšanās veidnei ir liels pieprasījums. Ja vēlaties to izmantot savā profesijā. Šī animētā SVG Avatar pieteikšanās veidlapa ir piemērota jums.

    DEMO LEJUPIELĀDE

    Pieteikšanās veidlapas kratīšanas efekts

    Šī ir vienkārša pieteikšanās veidlapa, un tai ir zināms efekts, un tā izmanto jūsu profesionālo uzņēmējdarbību.

    DEMO LEJUPIELĀDE

    CSS3 Animation Cloud un pieteikšanās forma

    Ja jums ir mākoņdatošanas bizness vai plānojat jebkāda veida mākoņdatošanas biznesu, varat izmantot šo CSS3 Animation Cloud un pieteikšanās veidlapu.

    DEMO LEJUPIELĀDE

    Notīriet pieteikšanās veidlapu

    Šis ir ļoti tīrs dizains, un tā nosaukums ir arī tāda pati Clean pieteikšanās forma. Izmantojiet šo veidlapu savai tīrai vietnei.

    DEMO LEJUPIELĀDE

    Pieteikšanās veidlapa HTML5

    Šī pieteikšanās veidlapa ir izstrādāta HTML5 un izmantot jūsu labākajai vietnei.

    DEMO LEJUPIELĀDE

    Pieteikšanās veidlapas tikai CSS validācija

    DEMO LEJUPIELĀDE

    Css pieteikšanās forma

    DEMO LEJUPIELĀDE

    Betmena pieteikšanās veidlapa

    DEMO LEJUPIELĀDE

    Pieteikšanās forma ar Materializecss

    DEMO LEJUPIELĀDE

    Angular Material pieteikšanās veidlapa

    DEMO LEJUPIELĀDE

    Atsaucīga pieteikšanās forma

    DEMO LEJUPIELĀDE

    Atsaucīga pieteikšanās forma

    DEMO LEJUPIELĀDE

    Vienkārša plakana forma ar vērpšanas iekrāvēju

    DEMO LEJUPIELĀDE

    Piesakieties Everdvelā

    Veidlapas ir paredzētas datu sūtīšanai no lietotāja uz tīmekļa serveri. HTML veidlapas var sastāvēt no tekstlodziņiem un teksta apgabaliem, izvēles rūtiņām un radiopogām, kā arī nolaižamajiem sarakstiem. Tie visi ir formas elementi. Katrs elements kalpo, lai vietnei piešķirtu kādu nozīmi.
    HTML veidlapas pamatā ir tīmekļa lapa, kurā ir redzamas informācijas ievadīšanas zonas. Kad esat aizpildījis veidlapu un noklikšķinājis uz pogas Iesniegt, informācija no veidlapas tiek iesaiņota un nosūtīta uz tīmekļa serveri apstrādei ar servera skriptu (apdarinātāja failu). Pēc apstrādes cita tīmekļa lapa jums tiek atgriezta kā atbilde. Šis attēls skaidri parāda, kā veidlapa darbojas:

    HTML veidlapu izveidē nav nekā sarežģīta. Vienkāršākais veids, kā iegūt priekšstatu par veidlapām, ir parsēt nelielu HTML kodu un pēc tam redzēt, kā tas darbojas. Šajā piemērā ir parādīta vienkāršas HTML veidlapas izveides sintakse:

    Piemērs: vienkārša HTML veidlapa

    • Izmēģiniet pats"

    Mana pirmā forma:
    Vārds:
    Uzvārds:



    Vienkārša forma

    Mana pirmā forma:
    Vārds:
    Uzvārds:


    Elements

    Veidlapas tiek ievietotas tīmekļa lapās, izmantojot elementu ... Tas ir konteiners visam veidlapas saturam, tostarp tādiem elementiem kā tekstlodziņi un pogas, kā arī jebkuri citi tagi HTML valoda... Tomēr tajā nevar būt citu elementu. .
    Lai nosūtītu veidlapu uz serveri, izmantojiet pogu "Iesniegt", tāds pats rezultāts tiks iegūts, ja formas ietvaros nospiedīsit taustiņu "Enter". Ja veidlapā nav pogas "Iesniegt", iesniegšanai var izmantot taustiņu "Enter".
    Lielākā daļa elementu atribūtu ietekmēt veidlapas apstrādi, nevis tās dizainu. No kuriem visizplatītākie ir darbība un metodi... Atribūts darbība satur URL, uz kuru veidlapā esošā informācija tiks nosūtīta apstrādei serverī. Atribūts metodi ir HTTP metode, kas pārlūkprogrammām jāizmanto, lai iesniegtu veidlapas datus.

    Elements

    Gandrīz visi veidlapas lauki tiek izveidoti, izmantojot elementu (no angļu valodas ievades - ievade). Izskats elements mainās atkarībā no tā atribūta vērtības veids:

    Šeit ir dažas atribūtu vērtības veids:

    Teksta un paroles ievadīšana

    Viens no vienkāršākajiem formas elementu veidiem ir tekstlodziņš, kas ļauj ievadīt tekstu vienā rindā. Šis tips teksta ievade ir iestatīta pēc noklusējuma, un tāpēc tas ir vienas rindiņas lauks, kas tiks parādīts, ja aizmirsīsit norādīt atribūtu veids... Lai veidlapai pievienotu vienas rindiņas teksta ievades lauku, atveriet elementu reģistra atribūts veids ar teksta vērtību:

    Paroles ievades lauks ir sava veida parasts teksta lauks. Tas atbalsta tos pašus atribūtus kā vienas rindiņas tekstlodziņš. Atribūts nosaukums iestata paroles ievades lauka nosaukumu, kas tiks nosūtīts serverim kopā ar lietotāja ievadīto paroli. Lai izveidotu lauku paroles ievadīšanai, atribūtam jāiestata paroles vērtība veids(parole (angļu valodā) - parole):

    Veidlapas izveides piemērs ar paroles lauku:

    Piemērs: Paroles ievades lauks

    • Izmēģiniet pats"

    Jūsu pieteikšanās:

    Parole:




    Jūsu pieteikšanās:

    Parole:


    Kopā ar šo atribūtu varat izmantot atribūtu maksimālais garums, kuras vērtība nosaka maksimālo rakstzīmju skaitu, ko var ievadīt dotā līnija... Varat arī iestatīt ievades lauka garumu, izmantojot atribūtu Izmērs... Pēc noklusējuma lielākā daļa pārlūkprogrammu ierobežo tekstlodziņa platumu līdz 20 rakstzīmēm. Lai kontrolētu jaunu formu elementu platumu, nevis atribūtu Izmērs, ieteicams izmantot Cascading Style Sheets (CSS) iespējas.
    Atribūts vērtību iestata vērtību, kas pēc noklusējuma tiek parādīta tekstlodziņā, kad veidlapa tiek ielādēta. Ievadot laukā noklusējuma vērtību, varat lietotājam paskaidrot, kādus datus un kādā formātā vēlaties ievadīt šeit. Tas ir kā paraugs, jo lietotājam ir daudz ērtāk aizpildīt veidlapu, ieraugot sev priekšā piemēru.

    Slēdži (radio)

    Elements veids radio izveido slēdžus, kas izmanto loģisko "OR" principu, ļaujot izvēlēties tikai vienu no vairākām vērtībām: ja atlasāt vienu pozīciju, tad visas pārējās kļūst neaktīvas. Pārslēgšanas elementa pamata sintakse ir:

    Atribūts nosaukums ir nepieciešama radiopogām, un tai ir svarīga loma vairāku radiopogu grupēšanā. Lai apvienotu slēdžus grupā, ir jāiestata tāda pati vērtība atribūts nosaukums un dažādas atribūtu vērtības vērtību... Atribūts vērtība iestata atlasītās radio pogas vērtību, kas jānosūta serverim. Katras radio pogas vērtībai ir jābūt unikālai grupā, lai serveris zinātu, kuru atbildi lietotājs ir izvēlējies.
    Atribūta klātbūtne pārbaudīts(no angļu valodas - set) pie pārslēgšanas elementa norāda, kura no piedāvātajām opcijām pēc noklusējuma ir jāizvēlas, kad lapa tiek ielādēta, ja nepieciešams. Šo atribūtu var iestatīt tikai vienam pārslēgšanas elementam no grupas:

    • Izmēģiniet pats"

    Cik tev gadu?

    1. zem 18
    2. no 18 līdz 24
    3. no 25 līdz 35
    4. vairāk nekā 35




    Cik tev gadu?

    1. zem 18
    2. no 18 līdz 24
    3. no 25 līdz 35
    4. vairāk nekā 35

    izvēles rūtiņas

    Elements veids izvēles rūtiņa izveido izvēles rūtiņas, kas atgādina radio pogas, jo tās ļauj lietotājam izvēlēties kādu no jūsu sniegtajām opcijām. Galvenā atšķirība no radio pogām ir tā, ka apmeklētājs var izvēlēties vairākas opcijas vienlaikus, un paši karodziņi tiek apzīmēti ar kvadrātiem, nevis apļiem. Tāpat kā ar radiopogām, izvēles rūtiņu grupa tiek izveidota, piešķirot katram vienumam vienu un to pašu atribūta vērtību nosaukums tomēr katrai izvēles rūtiņai ir sava nozīme. Izvēles rūtiņas pamata sintakse ir:

    Atribūts pārbaudīts, tāpat kā radiopogām, norāda, ka izvēles rūtiņa pēc noklusējuma ir jāatzīmē lapas ielādes laikā. Šo atribūtu var iestatīt vienlaikus vairākām grupas izvēles rūtiņām.
    Tālāk sniegtajā piemērā tiek izmantotas izvēles rūtiņas, lai iestatītu vairākas noklusējuma atbildes opcijas.

    Piemērs: Slēdžu izmantošana

    • Izmēģiniet pats"
    1. Džezs
    2. Blūzs
    3. Akmens
    4. Šansons
    5. Valsts




    Kādi mūzikas žanri tev patīk?

    1. Džezs
    2. Blūzs
    3. Akmens
    4. Šansons
    5. Valsts

    Iesniegšanas un atiestatīšanas pogas

    Elements veids Iesniegt izveido pogu, uz kuras noklikšķinot, pārlūkprogramma tiek nosūtīta uz servera skriptu, lai apstrādātu lietotāja formā ievadītos datus. Ja izveidojam pogu, kas notīra formu, tad piešķiram atribūtam veids vērtība "atiestatīt". Elements veids Iesniegt var piešķirt neobligātu atribūtu nosaukums... Atribūts vērtība izmanto šajā elementā, lai norādītu tekstu, kas apzīmē etiķeti uz pogas. Pēc noklusējuma pārlūkprogrammās poga ir rakstīta "Iesniegt", ja jūs neapmierina šis uzraksts - ievadiet to pats. Tā kā apstiprinājuma pogu stili dažādās pārlūkprogrammās var atšķirties, pogas stilu labāk pielāgot pašam, izmantojot CSS rīkus vai grafiskās pogas.
    Izveidojiet apstiprinājumu un notīriet pogas:

    Piemērs: Iesniegšanas un atiestatīšanas izmantošana

    • Izmēģiniet pats"

    Noklikšķinot uz pogas Atiestatīt, visi lietotāja ievadītie dati tiek atiestatīti.





    Darbības atribūts.

    Galvenais elementam

    ir atribūts darbība kas norāda veidlapas datu apstrādātāju. Datu apstrādātājs ir fails, kurā aprakstīts, kā rīkoties ar veidlapas datiem. Šīs apstrādes rezultātā tiek atgriezta jauna HTML lapa, kas tiek atgriezta pārlūkprogrammā. Citiem vārdiem sakot, atribūtā darbība norāda URL ceļu uz servera apdarinātāja failu (dažreiz sauktu par skripta lapu) veidlapas apstrādei. Sintakse ir šāda:

    …

    Apstrādes fails atrodas serverī mytestserver.com mapē nosaukumu mape un servera skripta nosaukums, kas apstrādās datus - obrabotchik.php... Viņam tiks pārsūtīti visi jūsu ievadītie dati tīmekļa lapas veidlapā. Paplašinājums .php norāda, ka norādīto formu apstrādā PHP valodā rakstīts skripts. Pats apdarinātājs var būt rakstīts citā valodā, piemēram, tā var būt skriptu valoda Python, Ruby utt.
    Ieteicams vienmēr iestatīt atribūta vērtību darbība... Ja veidlapai ir jānosūta vērtības uz to pašu lapu, kurā tā atrodas, kā darbības atribūta vērtību norādiet tukšu virkni: action = "".

    Metodes atribūts

    Atribūts metodi norāda, kā informācija jāpārsūta uz serveri. Veidlapas iesniegšanas veids ir atkarīgs no datiem, ko vēlaties nosūtīt ar to. Šo datu apjomam šeit ir liela nozīme. Populārākās ir divas metodes, kā pārsūtīt veidlapas sākotnējos datus no pārlūkprogrammas uz serveri: GŪT un POSTĪT... Metode ir iestatīta uz jebkuru pēc jūsu izvēles, un, ja jūs to nenorādījāt, tiks izmantota noklusējuma metode GŪT... Apskatīsim katra no tām pielietojumu.

    POST metode

    Metode POSTĪT iesaiņo veidlapas datus un nosūta tos uz serveri lietotājam neredzamā veidā, jo dati ir ietverti ziņojuma pamattekstā. Web pārlūkprogramma, izmantojot metodi POSTĪT nosūta serverim pieprasījumu, kas sastāv no īpašām galvenēm, kam seko veidlapas dati. Tā kā šī pieprasījuma saturs ir pieejams tikai serverim, metode POSTĪT tiek izmantots, lai pārsūtītu konfidenciālus datus, piemēram, paroles, bankas karšu datus un citu lietotāju personisko informāciju. Metode POSTĪT piemērots arī liela apjoma informācijas nosūtīšanai, jo atšķirībā no metodes GŪT, tai nav ierobežojumu attiecībā uz pārraidīto rakstzīmju skaitu.

    GET metode

    Kā jau jūs zināt, pārlūkprogrammas galvenais uzdevums ir saņemt tīmekļa lapas no servera. Tātad, kad jūs izmantojat metodi GŪT, jūsu pārlūkprogramma tāpat kā vienmēr saņem tīmekļa lapu. Metode GŪT arī iesaiņo veidlapas datus, bet pievieno tos url beigās pirms pieprasījuma nosūtīšanas uz serveri. Lai saprastu, kā šī metode darbojas GŪT, redzēsim to darbībā. Atveriet pirmo šīs nodarbības piemēru (Piemērs: vienkārša HTML forma) piezīmju grāmatiņā (piemēram, Notepad ++) un veiciet nelielas izmaiņas HTML kodā:

    tie. aizvietot POSTĪT ieslēgts GŪT.
    Saglabājiet failu kā faila_nosaukums.html un atsvaidziniet pārlūkprogrammas lapu (F5), pēc tam aizpildiet veidlapu, piemēram Vasja Pupkina un noklikšķiniet uz pogas Iesniegt. Pārlūkprogrammas adreses joslā jūs redzēsit kaut ko līdzīgu:

    Faila_nosaukums.html Vārds = Vasja un uzvārds = kucēns

    Tagad šeit, vietrādī URL, varat redzēt katra veidlapas elementa nosaukumu, kā arī tā vērtību.
    URL ir atdalīts no pārējiem veidlapas datiem ar jautājuma zīmi, un mainīgo nosaukumi un vērtības ir atdalītas ar &  (&) .
    Šo metodi vajadzētu izmantot, ja nepārsūtāt lielu informācijas apjomu.
    Šī metode nedarbosies, ja jūsu veidlapas dati ir konfidenciāli, piemēram, tajā ir saglabāts bankas kartes numurs vai parole.
    Arī metode GŪT nav piemērots, ja vēlaties nosūtīt failus uz serveri kopā ar veidlapu.

    Veidlapas elementu grupēšana

    Veidlapas elementus, kas ir saistīti pēc nozīmes, var grupēt starp tagiem

    un
    ... Parādīsies pārlūkprogramma
    kā rāmis ap formas elementu grupu. Rāmja izskatu var mainīt, izmantojot kaskādes stila lapas (CSS).
    Lai katrai grupai pievienotu nosaukumu, ir nepieciešams elements , kas norāda grupas nosaukuma tekstu, kas jāatrodas rāmī.

    Paroles ievades lauks ir parasts teksta lauks, kurā ievadītais teksts atkarībā no pārlūkprogrammas tiek parādīts kā zvaigznītes vai punkti. Šī funkcija ir izstrādāta tā, lai neviens nevarētu apskatīt ievadīto paroli. Lai gan ievadītais teksts netiek parādīts ekrānā, ievadītā informācija tiek pārsūtīta uz serveri skaidrā tekstā bez šifrēšanas. Tāpēc šī lauka izmantošana nenodrošina datu drošību un to var pārtvert.

    Izveidošanas sintakse ir šāda.

    Atribūti ir tādi paši kā tekstlodziņa atribūti un ir norādīti tabulā. 1.

    Paroles lauks tiek plaši izmantots vietnēs, lai autorizētu lietotājus un atšķirtu piekļuvi vietnes sadaļām, kurās jums jāapstiprina sava pilnvara. 1. piemērā parādīts, kā izveidot šādus laukus.

    Piemērs 1. Paroles lauks

    Paroles lauks

    Pieslēgties:

    Parole:

    Rezultātā iegūstam sekojošo (1. att.).

    Rīsi. 1. Paroles lauka skats

    Paroles laukam tiek lietoti stila rekvizīti, kas norāda krāsu, fona, rāmja utt. parametrus. 2. piemērs parāda fona attēlu pievienošanu formas laukiem. Par pamatu ņemsim stilu kā teksta laukiem.

    2. piemērs. Attēla pievienošana tekstlodziņam

    Paroles lauks

    Šī piemēra rezultāts ir parādīts attēlā. 2. Attēli tiek pievienoti kā fons, tāpēc teksts ir jāpārvieto pa labi, izmantojot polsterējumu-pa kreisi, pretējā gadījumā tas tiks parādīts virs attēla.

    Šajā rakstā jūs uzzināsit kā izveidot reģistrācijas un autorizācijas veidlapu izmantojot HTML, JavaScript, PHP un MySql. Šādas veidlapas tiek izmantotas gandrīz katrā vietnē neatkarīgi no tās veida. Tie ir izveidoti gan forumam, gan tiešsaistes veikalam, gan sociālajiem tīkliem (piemēram, Facebook, Twiter, Odnoklassniki) un daudzu citu veidu vietnēm.

    Ja jūsu lokālajā datorā ir vietne, ceru, ka jums tā jau ir. Bez tā nekas nedarbosies.

    Tabulas izveide datu bāzē

    Lai ieviestu lietotāju reģistrāciju, pirmkārt, mums ir nepieciešama datu bāze. Ja jums tas jau ir, tad lieliski, pretējā gadījumā jums tas ir jāizveido. Šajā rakstā es sīki paskaidrošu, kā to izdarīt.

    Un tā, mums ir datu bāze (saīsināti kā datu bāze), tagad mums ir jāizveido tabula lietotājiem kurā pievienosim savus reģistrētos lietotājus.

    Kā izveidot tabulu datu bāzē, es arī paskaidroju rakstā. Pirms tabulas izveides mums ir jādefinē, kādi lauki tajā būs. Šie lauki atbildīs reģistrācijas veidlapas laukiem.

    Tātad, mēs domājām, iedomājāmies, kādi lauki būs mūsu veidlapā, un izveidojām tabulu lietotājiem ar šādiem laukiem:

    • id- Identifikators. Lauks id jābūt katrai tabulai no datu bāzes.
    • vārds- Lai saglabātu vārdu.
    • uzvārds- Par uzvārdu saglabāšanu.
    • e-pasts- Lai saglabātu pasta adresi. Mēs izmantosim e-pastu kā pieteikšanos, tāpēc šim laukam ir jābūt unikālam, tas ir, tam ir jābūt UNIKĀLAM indeksam.
    • e-pasta_statuss- Lauks, lai norādītu, vai pasts ir apstiprināts vai nē. Ja pasts ir apstiprināts, tam būs vērtība 1, pretējā gadījumā vērtība 0.
    • parole- Lai saglabātu paroli.


    Ja vēlaties, lai reģistrācijas veidlapā būtu vēl daži lauki, varat tos pievienot arī šeit.

    Viss, mūsu galds lietotājiem gatavs. Pāriesim pie nākamās darbības.

    Datu bāzes savienojums

    Mēs esam izveidojuši datu bāzi, tagad mums ir jāpieslēdzas tai. Mēs izveidosim savienojumu, izmantojot PHP MySQLi paplašinājumu.

    Mūsu vietnes mapē izveidojiet failu ar nosaukumu dbconnect.php, un tajā mēs ierakstām šādu skriptu:

    DB savienojuma kļūda... Kļūdas apraksts: ".mysqli_connect_error ()."

    "; iziet ();) // Iestatiet savienojuma kodējumu $ mysqli-> set_charset (" utf8 "); // Ērtības labad pievienosim šeit mainīgo, kurā būs mūsu vietnes nosaukums $ adrese_vietne =" http: // testsite.local " ;?>

    Šis fails dbconnect.php būs jāpieslēdz, lai veidotu apstrādātājus.

    Pievērsiet uzmanību mainīgajam $ adrese_vietne, šeit es norādīju savas pārbaudes vietnes nosaukumu, kurā strādāšu. Jūs attiecīgi norādiet savas vietnes nosaukumu.

    Vietnes struktūra

    Tagad apskatīsim mūsu vietnes HTML struktūru.

    Mēs pārvietosim vietnes galveni un kājeni uz atsevišķi faili, header.php un kājene.php... Mēs tos iekļausim visās lapās. Proti, galvenajā (fails indekss.php), uz lapu ar reģistrācijas veidlapu (failu form_register.php) un uz lapu ar autorizācijas veidlapu (fails form_auth.php).

    Bloķēt ar mūsu saitēm, reģistrācija un autorizācija, pievienojiet vietnes galvenei, lai tie tiktu parādīti visās lapās. Tiks ieslēgta viena saite reģistrācijas veidlapas lapa(fails form_register.php) un otru uz lapu ar pilnvarojuma veidlapa(fails form_auth.php).

    Header.php faila saturs:

    Mūsu vietnes nosaukums

    Rezultātā galvenā lapa izskatās šādi:


    Protams, jūsu vietnei var būt pavisam cita struktūra, taču tas mums šobrīd nav svarīgi. Galvenais, ka ir saites (pogas) reģistrācijai un autorizācijai.

    Tagad pāriesim uz reģistrācijas veidlapu. Kā jūs jau sapratāt, mums tas ir failā form_register.php.

    Dodieties uz datu bāzi (phpMyAdmin), atveriet tabulas struktūru lietotājiem un redzēt, kādi lauki mums ir vajadzīgi. Tas nozīmē, ka mums ir nepieciešami lauki vārda un uzvārda ievadīšanai, lauks pasta adreses ievadīšanai (Email) un lauks paroles ievadīšanai. Un drošības nolūkos mēs pievienosim lauku captcha ievadīšanai.

    Serverī reģistrācijas veidlapas apstrādes rezultātā var rasties dažādas kļūdas, kuru dēļ lietotājs nevarēs reģistrēties. Tāpēc, lai lietotājs saprastu, kāpēc reģistrācija neizdodas, ir jāparāda ziņojumi par šīm kļūdām.

    Pirms veidlapas parādīšanas pievienojiet bloku, lai parādītu sesijas kļūdu ziņojumus.

    Un vēl viena lieta, ja lietotājs jau ir autorizēts, un intereses labad viņš ieiet reģistrācijas lapā tieši, rakstot pārlūkprogrammas adreses joslā vietnes_adrese / form_register.php, tad šajā gadījumā reģistrācijas veidlapas vietā mēs viņam parādīsim nosaukumu, kas norāda, ka viņš jau ir reģistrēts.

    Kopumā faila kods form_register.php mēs to saņēmām šādi:

    Jūs jau esat reģistrēts

    Pārlūkprogrammā lapa ar reģistrācijas veidlapu izskatās šādi:


    Izmantojot nepieciešamais atribūts, esam aizpildījuši visus nepieciešamos laukus.

    Pievērsiet uzmanību reģistrācijas formas kodam, kur tiek parādīts captcha:


    Mēs norādījām ceļu uz failu attēla atribūta src vērtībā captcha.php kas ģenerē šo captcha.

    Apskatīsim faila kodu captcha.php:

    Kods ir labi komentēts, tāpēc es koncentrēšos tikai uz vienu punktu.

    Funkcijas iekšpusē imageTtfText (), ir norādīts ceļš uz fontu verdana.ttf... Tātad, lai captcha darbotos pareizi, mums ir jāizveido mape fonti, un ievietojiet tur fonta failu verdana.ttf... To var atrast un lejupielādēt no interneta vai paņemt no arhīva kopā ar šī raksta materiāliem.

    Esam pabeiguši ar HTML struktūru, ir pienācis laiks doties tālāk.

    E-pasta derīguma pārbaude, izmantojot jQuery

    Jebkurai formai ir jāpārbauda ievadīto datu derīgums gan klienta pusē (izmantojot JavaScript, jQuery), gan servera pusē.

    Īpaša uzmanība jāpievērš laukam E-pasts. Ir ļoti svarīgi, lai ievadītā pasta adrese būtu derīga.

    Priekš no šī lauka ievadi, mēs iestatām veidu e-pasts (tips = "e-pasts"), tas mūs nedaudz brīdina par nepareiziem formātiem. Bet ar to nepietiek, jo, izmantojot koda inspektoru, ko mums nodrošina pārlūkprogramma, jūs varat viegli mainīt atribūta vērtību veids Ar e-pasts ieslēgts tekstu un viss, mūsu čeks vairs nebūs derīgs.


    Un tādā gadījumā mums ir jāveic uzticamāka pārbaude. Šim nolūkam mēs izmantosim jQuery bibliotēku no JavaScript.

    Lai savienotu jQuery bibliotēku, failā header.php starp tagiem , pirms beigu atzīmes , pievienojiet šo rindu:

    Uzreiz aiz šīs rindas pievienojiet e-pasta validācijas pārbaudes kodu. Šeit mēs pievienojam kodu ievadītās paroles garuma pārbaudei. Tā garumam jābūt vismaz 6 rakstzīmēm.

    Ar šī skripta palīdzību mēs pārbaudām ievadītās e-pasta adreses derīgumu. Ja lietotājs ievadījis nepareizu e-pasta adresi, mēs viņam par to parādām kļūdu un deaktivizējam veidlapas iesniegšanas pogu. Ja viss ir labi, tad kļūdu noņemam un aktivizējam veidlapas iesniegšanas pogu.

    Un tā, esam pabeiguši veidlapas validāciju klienta pusē. Tagad varam nosūtīt uz serveri, kur arī veiksim pāris pārbaudes un pievienosim datus datu bāzei.

    Lietotāja reģistrācija

    Veidlapu nosūtām apstrādei uz failu register.php, izmantojot POST metodi. Vārds no šī faila apdarinātājs, kas norādīts atribūta vērtībā darbība... Un nosūtīšanas metode ir norādīta atribūta vērtībā metodi.

    Atveriet šo failu register.php un pirmā lieta, kas mums jādara, ir ierakstīt funkciju sesijas sākšanai un savienot iepriekš izveidoto failu dbconnect.php(Šajā failā mēs izveidojām savienojumu ar datu bāzi). Un tomēr tūlīt deklarēsim šūnas error_messages un veiksmes_ziņojumi sesijas globālajā masīvā. V kļūdu_ziņojumi mēs reģistrēsim visus kļūdu ziņojumus, kas rodas veidlapas apstrādes laikā, un Succes_Messages, mēs ierakstīsim priecīgas ziņas.

    Pirms turpināt, mums ir jāpārbauda veidlapa vispār bija iesniegta... Uzbrucējs varētu apskatīt atribūta vērtību darbība no veidlapas un uzziniet, kurš fails apstrādā šo veidlapu. Un viņam var rasties doma doties tieši uz šo failu, pārlūkprogrammas adreses joslā ierakstot šādu adresi: http://arees_site/register.php

    Tāpēc mums ir jāpārbauda, ​​vai globālajā POST masīvā nav šūnas, kuras nosaukums atbilst mūsu pogas "Reģistrēties" nosaukumam no veidlapas. Tādējādi mēs pārbaudām, vai poga "Reģistrēties" tika noklikšķināta vai nē.

    Ja uzbrucējs mēģina pāriet tieši uz šo failu, viņš saņems kļūdas ziņojumu. Atgādināšu, ka mainīgais $ address_site satur vietnes nosaukumu un tas tika deklarēts failā dbconnect.php.

    Kļūda! mājas lapa.

    "); } ?>

    Captcha vērtība sesijā tika pievienota failā, kad tā tika ģenerēta captcha.php... Atgādinājumam vēlreiz parādīšu šo faila koda daļu. captcha.php, kur sesijai tiek pievienota captcha vērtība:

    Tagad pāriesim pie pašas pārbaudes. Failā register.php, if blokā, kur mēs pārbaudām, vai tika noklikšķināta uz pogas "Reģistrēties", vai drīzāk, kur ir norādīts komentārs " // (1) Vieta nākamajam koda fragmentam"mēs rakstām:

    // Pārbaudiet iegūto captcha // Apgrieziet atstarpes no rindas sākuma un beigām $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! tukšs ($ captcha)) (// Salīdziniet saņemto vērtību ar sesijas vērtību. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Ja captcha nav pareiza, mēs atgriezīsim lietotāju reģistrācijas lapā, un tur parādīsim kļūdas ziņojumu, ka viņš ievadījis nepareizu captcha $ error_message = "

    Kļūda! Jūs ievadījāt nepareizu captcha

    "; // Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION [" error_messages "] = $ error_message; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: " . $ Address_site . "/ form_register.php"); // Apturiet skripta izeju ();) // (2) Vieta nākamajai koda daļai) else (// Ja captcha nav nodota vai tā ir tukša, iziet () "

    Kļūda! Nav verifikācijas koda, tas ir, captcha koda. Jūs varat doties uz sākumlapu.

    "); }

    Tālāk mums ir jāapstrādā saņemtie dati no POST masīva. Pirmkārt, mums ir jāpārbauda globālā POST masīva saturs, tas ir, vai ir šūnas, kuru nosaukumi atbilst mūsu veidlapas ievades lauku nosaukumiem.

    Ja šūna pastāv, mēs apgriežam atstarpes no šīs šūnas rindas sākuma un beigām, pretējā gadījumā mēs novirzām lietotāju atpakaļ uz lapu ar reģistrācijas veidlapu.

    Pēc tam, kad esam apgriezuši atstarpes, pievienojiet mainīgajam rindiņu un pārbaudiet, vai šis mainīgais nav tukšs, ja tas nav tukšs, turpiniet, pretējā gadījumā mēs novirzām lietotāju atpakaļ uz lapu ar reģistrācijas veidlapu.

    Ielīmējiet šo kodu norādītajā vietā " // (2) Vieta nākamajam koda fragmentam".

    / * Pārbaudiet, vai globālajā masīvā $ _POST ir dati, kas nosūtīti no formas, un iekļaujiet iesniegtos datus parastajos mainīgajos. * / If (isset ($ _ POST ["first_name"])) (// Apgrieziet atstarpes no sākuma un no virknes beigām $ first_name = trim ($ _ POST ["first_name"]); // Pārbaudiet, vai mainīgajā nav tukšums if (! tukšs ($ first_name)) (// Drošības nolūkos konvertējiet speciālās rakstzīmes par HTML entītijām $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Ievadiet savu vārdu

    Trūkst nosaukuma lauka

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); ) if ( isset ($ _ POST ["last_name"])) (// Apgriezt atstarpes no virknes sākuma un beigām $ last_name = trim ($ _ POST ["last_name"]); if (! tukšs ($ uzvārds )) (// Drošības nolūkos konvertējiet speciālās rakstzīmes par HTML entītijām $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Ievadiet savu uzvārdu

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); )) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Trūkst uzvārda lauka

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); ) if ( isset ($ _ POST ["email"])) (// Apgriezt atstarpes no rindas sākuma un beigām $ email = trim ($ _ POST ["email"]); if (! tukšs ($ e-pasts )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Koda vieta e-pasta adreses formāta un tās unikalitātes pārbaudei) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION [ "error_messages"]. = "

    Ievadi savu epastu

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); )) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); ) if ( isset ($ _ POST ["parole"])) (// Apgriezt atstarpes no virknes sākuma un beigām $ parole = trim ($ _ POST ["parole"]); if (! tukšs ($ parole )) ($ parole = htmlspecialchars ($ parole, ENT_QUOTES); // Šifrēt paprol $ paroli = md5 ($ parole. "top_secret");) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages" "]. = "

    Ievadiet savu paroli

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); )) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); ) // (4) Vieta koda lietotāja pievienošanai datu bāzei

    Īpaši svarīga ir joma e-pasts... Mums ir jāpārbauda saņemtās pasta adreses formāts un unikalitāte datu bāzē. Tas ir, vai ir kāds lietotājs, kas jau ir reģistrēts ar to pašu pasta adresi?

    Norādītajā vietā" // (3) Koda vieta, lai pārbaudītu pasta adreses formātu un tās unikalitāti"pievienojiet šādu kodu:

    // Pārbaudiet saņemtās e-pasta adreses formātu, izmantojot regulāro izteiksmi $ reg_email = "/^**@(+(*+)*\.)++/i"; // Ja saņemtās e-pasta adreses formāts neatbilst regulārajai izteiksmei if (! Preg_match ($ reg_email, $ email)) (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Jūs ievadījāt nederīgu e-pasta adresi

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); ) // Pārbaudām, vai datu bāzē jau ir šāda adrese $ Result_query = $ mysqli-> query ("SELECT` email` FROM `users` WHERE` email` = "". $ E-pasts. "" "); // Ja saņemto rindu skaits ir tieši viena, tātad lietotājs ar šo e-pasta adresi jau ir reģistrēts if ($ result_query-> num_rows == 1) (// Ja rezultāts nav nepatiess if (($ row = $ result_query -> fetch_assoc ())! = false) (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Lietotājs ar šo e-pasta adresi jau ir reģistrēts

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php ");) else (// Saglabājiet kļūdas ziņojumu uz sesiju . $ _SESSION ["error_messages"]. = "

    Kļūda datu bāzes vaicājumā

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php ");) / * aizvērt atlasi * / $ result_query-> aizvērt (); // Apturēt skripta iziešanu ();) / * aizverot atlasi * / $ result_query-> aizvērt ();

    Un tā, mēs esam pabeiguši visas pārbaudes, ir pienācis laiks pievienot lietotāju datu bāzei. Norādītajā vietā" // (4) Vieta koda lietotāja pievienošanai datu bāzei"pievienojiet šādu kodu:

    // Pieprasījums pievienot lietotāju datu bāzei $ result_query_insert = $ mysqli-> vaicājums ("INSERT INTO` users` (first_name, last_name, email, password) VALUES ("". $ First_name. "", "". $ Last_name . " "," ". $ e-pasts." "," ". $ parole." ")"); if (! $ result_query_insert) (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Neizdevās datu bāzes pieprasījumam pievienot lietotāju

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); ) else ( $ _SESSION ["success_messages"] = "

    Reģistrācija veiksmīgi pabeigta!!!
    Tagad jūs varat pieteikties, izmantojot savu lietotājvārdu un paroli.

    "; // Nosūtiet lietotāju uz autorizācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php ");) / * Pieprasījuma pabeigšana * / $ result_query_insert-> aizvērt (); // Aizvērt datu bāzes savienojumu $ mysqli-> aizvērt ();

    Ja pieprasījumā pievienot lietotāju datu bāzei rodas kļūda, mēs sesijai pievienojam ziņojumu par šo kļūdu un atgriežam lietotāju reģistrācijas lapā.

    Citādi, ja viss noritēja labi, sesijai pievienojam arī ziņu, bet jau patīkamāk, proti, pasakām lietotājam, ka reģistrācija bija veiksmīga. Un mēs to novirzām uz lapu ar autorizācijas veidlapu.

    Failā ir skripts e-pasta adreses formāta un paroles garuma pārbaudei header.php, tāpēc tas darbosies arī laukos no šīs veidlapas.

    Sesija tiek sākta arī failā header.php, tāpēc failā form_auth.php jums nav jāsāk sesija, jo mēs saņemsim kļūdu.


    Kā jau teicu, šeit darbojas arī skripts e-pasta adreses formāta un paroles garuma pārbaudei. Tāpēc, ja lietotājs ievadīs nepareizu e-pasta adresi vai īsu paroli, viņš nekavējoties saņems kļūdas ziņojumu. Un poga ienākt kļūs neaktīvs.

    Pēc kļūdu novēršanas poga ienākt kļūst aktīva un lietotājs varēs iesniegt veidlapu serverī, kur tā tiks apstrādāta.

    Lietotāja autorizācija

    Lai piešķirtu vērtību darbība autorizācijas handikapam ir fails auth.php, tas nozīmē, ka veidlapa tiks apstrādāta šajā failā.

    Un tā, atveriet failu auth.php un uzrakstiet kodu, lai apstrādātu autorizācijas veidlapu. Pirmā lieta, kas jādara, ir sākt sesiju un savienot failu dbconnect.php lai izveidotu savienojumu ar datu bāzi.

    // Deklarējiet šūnu, lai pievienotu kļūdas, kas var rasties, apstrādājot veidlapu. $ _SESSION ["error_messages"] = ""; // Deklarēt šūnu veiksmīgu ziņojumu pievienošanai $ _SESSION ["success_messages"] = "";

    / * Pārbaudiet, vai forma ir iesniegta, tas ir, vai tika noklikšķināts uz pogas Pieteikties. Ja jā, turpiniet, ja nē, tad parādiet lietotājam kļūdas ziņojumu, norādot, ka viņš tieši ir devies uz šo lapu. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! tukšs ($ _ POST ["btn_submit_auth"])) (// (1) Atstarpe nākamajai koda daļai) else (iziet ("

    Kļūda! Jūs esat ievadījis šo lapu tieši, tāpēc nav datu, ko apstrādāt. Jūs varat doties uz sākumlapu.

    "); }

    // Pārbaudiet iegūto captcha if (isset ($ _ POST ["captcha"])) (// Izgrieziet atstarpes no rindas sākuma un beigām $ captcha = trim ($ _ POST ["captcha"]); if (! Tukšs ($ captcha )) (// Salīdziniet saņemto vērtību ar sesijas vērtību. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Ja captcha nav pareizs , mēs atgriezīsim lietotāju autorizācijas lapā, un tur parādīsim kļūdas ziņojumu, ka viņš ievadījis nepareizu captcha. $ error_message = "

    Kļūda! Jūs ievadījāt nepareizu captcha

    "; // Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION [" error_messages "] = $ error_message; // Atgriezt lietotāju uz autorizācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: " . $ Address_site . "/ form_auth.php"); // Apturiet skripta iziešanu ();)) else ($ error_message = "

    Kļūda! Lauks captcha ievadīšanai nedrīkst būt tukšs.

    "; // Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION [" error_messages "] = $ error_message; // Atgriezt lietotāju uz autorizācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: " . $ Address_site . "/ form_auth.php"); // Apturēt skripta iziešanu ();) // (2) Vieta pasta adreses apstrādei // (3) Vieta paroles apstrādei // (4) Vieta vaicājuma veikšana datu bāzē) else (// Ja captcha nav nodota, iziet ("

    Kļūda! Trūkst verifikācijas koda, tas ir, captcha koda. Jūs varat doties uz sākumlapu.

    "); }

    Ja lietotājs ievadīja verifikācijas kodu pareizi, turpiniet, pretējā gadījumā mēs to atgriežam autorizācijas lapā.

    Pasta adreses pārbaude

    // Apgrieziet atstarpes no rindas sākuma un beigām $ e-pasts = trim ($ _ POST ["e-pasts"]); if (isset ($ _ POST ["e-pasts"])) (if (! tukšs ($ e-pasts)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Pārbaudiet saņemtās e-pasta adreses formātu, izmantojot regulāro izteiksmi $ reg_email = " /^**@(+(*+)*\.)++/i "; // Ja saņemtās e-pasta adreses formāts neatbilst regulārajai izteiksmei if (! preg_match ($ reg_email, $ e-pasts)) (// Saglabāt sesijas kļūdas ziņojumā. $ _SESSION ["error_messages"]. = "

    Jūs ievadījāt nepareizu e-pasta adresi

    "; // Atgriezt lietotāju uz autorizācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php "); // Apturēt skripta iziešanu (); )) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Lauks pasta adreses (e-pasta) ievadīšanai nedrīkst būt tukšs.

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_register.php "); // Apturēt skripta iziešanu (); )) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Trūkst e-pasta lauka

    "; // Atgriezt lietotāju uz autorizācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php "); // Apturēt skripta iziešanu (); ) // (3) Vieta paroles apstrādei

    Ja lietotājs pasta adresi ievadījis nepareizā formātā vai pasta adreses lauka vērtība ir tukša, mēs to atgriežam autorizācijas lapā, kur par to parādām ziņojumu.

    Paroles pārbaude

    Nākamais apstrādājamais lauks ir paroles lauks. Uz norādīto vietu" // (3) Vieta, kur apstrādāt paroli", mēs rakstām:

    If (isset ($ _ POST ["parole"])) (// Apgriezt atstarpes no virknes sākuma un beigām $ parole = trim ($ _ POST ["parole"]); if (! Tukšs ($ parole) ) ($ parole = htmlspecialchars ($ parole, ENT_QUOTES); // Šifrēt paroli $ parole = md5 ($ parole. "top_secret");) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages" ]. = "

    Ievadiet savu paroli

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php "); // Apturēt skripta iziešanu (); )) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Paroles ievadīšanai nav lauka

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php "); // Apturēt skripta iziešanu (); )

    Šeit, izmantojot funkciju md5 () mēs šifrējam saņemto paroli, jo datu bāzē mums ir paroles šifrētā veidā. Papildu slepenais vārds šifrēšanā, mūsu gadījumā " liels noslēpums"jābūt tam, kas tika izmantots, reģistrējot lietotāju.

    Tagad jums ir jāveic vaicājums datu bāzē par lietotāja paraugu, kura pasta adrese ir vienāda ar saņemto pasta adresi un parole ir vienāda ar saņemto paroli.

    // Vaicājums datu bāzē par lietotāja izvēli. $ result_query_select = $ mysqli-> vaicājums ("SELECT * FROM` users` WHERE email = "". $ e-pasts. "" UN parole = "". $ parole. "" "); if (! $ result_query_select) (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Pieprasījuma kļūda, lietotāja ielādei no datu bāzes

    "; // Atgriezt lietotāju uz reģistrācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php "); // Apturēt skripta izeju (); ) else ( // Pārbaudām, vai datu bāzē nav lietotāja ar šādiem datiem, tad parādām kļūdas ziņojumu if ($ result_query_select-> num_rows == 1) (// Ja ievadītie dati sakrīt ar datiem no datu bāzes, tad mēs saglabājam pieteikumvārdu un paroli sesijas masīvā. $ _SESSION ["email"] = $ e-pasts; $ _SESSION ["parole"] = $ parole; // Atgriezt lietotāju uz mājas lapa galvene ("HTTP / 1.1 301 Moved Permanently"); galvene ("Atrašanās vieta:". $ adrese_vietne. "/ index.php"); ) else (// Saglabājiet kļūdas ziņojumu sesijā. $ _SESSION ["error_messages"]. = "

    Nepareizs lietotājvārds un/vai parole

    "; // Atgriezt lietotāju uz autorizācijas lapas galveni (" HTTP / 1.1 301 Moved Permanently "); galvene (" Atrašanās vieta: ". $ Address_site." / Form_auth.php "); // Apturēt skripta iziešanu (); ))

    Izrakstieties no vietnes

    Un pēdējā lieta, ko mēs darām, ir vietnes pamešanas procedūra... Šobrīd galvenē ir redzamas saites uz autorizācijas lapu un reģistrācijas lapu.

    Vietnes galvenē (fails header.php), izmantojot sesiju, mēs pārbaudām, vai lietotājs jau ir pieteicies. Ja nē, tad mēs parādām reģistrācijas un autorizācijas saites, pretējā gadījumā (ja tas ir autorizēts) tad reģistrācijas un autorizācijas saišu vietā mēs parādām saiti Izvade.

    Modificēta koda daļa no faila header.php:

    reģistrācija

    Izvade

    Noklikšķinot uz vietnes izejas saites, mēs nokļūstam failā logout.php, kur mēs vienkārši iznīcinām šūnas ar pasta adresi un paroli no sesijas. Pēc tam mēs atgriezīsim lietotāju atpakaļ lapā, kurā tika noklikšķināts uz saites izvade.

    Faila kods logout.php:

    Tas ir viss. Tagad jūs zināt, kā ieviest un apstrādāt reģistrācijas un autorizācijas veidlapas lietotājs jūsu vietnē. Šīs veidlapas ir atrodamas gandrīz katrā vietnē, tāpēc katram programmētājam ir jāzina, kā tās izveidot.

    Mēs arī uzzinājām, kā apstiprināt ievades datus gan klienta pusē (pārlūkprogrammā, izmantojot JavaScript, jQuery), gan servera pusē (izmantojot PHP valoda). Mēs arī mācījāmies īstenot no vietas atstāšanas procedūru.

    Visi skripti ir pārbaudīti un darbojas. Šajā saitē varat lejupielādēt arhīvu ar šīs mazās vietnes failiem.

    Nākotnē es uzrakstīšu rakstu, kurā aprakstīšu. Un vēl plānoju uztaisīt rakstu, kur paskaidrošu (bez lapas pārlādēšanas). Tātad, lai būtu informēts par jaunu rakstu iznākšanu, varat abonēt manu vietni.

    Ja jums ir kādi jautājumi, lūdzu, sazinieties, kā arī, ja pamanāt kādu kļūdu rakstā, lūdzu, informējiet mani par to.

    Nodarbības plāns (5. daļa):

    1. Izveidojiet pieteikšanās veidlapas HTML struktūru
    2. Mēs apstrādājam saņemtos datus
    3. Vietnes galvenē mēs rādām lietotāja sveicienu

    Vai jums patika raksts?

    LĪDZĪGI RAKSTI