Menu
Jest wolny
Zameldować się
główny  /  Instalacja i konfiguracja/ Formularze rejestracji i logowania w Jquery. Rejestracja krok po kroku w jQuery

Formularze rejestracyjne i autoryzacyjne JQuery. Rejestracja krok po kroku w jQuery

W tym artykule dowiesz się jak stworzyć formularz rejestracyjny i autoryzacyjny za pomocą HTML, JavaScript, PHP i MySql. Takie formularze są stosowane na prawie każdej stronie, niezależnie od jej rodzaju. Tworzone są zarówno na forum, jak i na sklep internetowy oraz na portale społecznościowe (takie jak np. Facebook, Twiter, Odnoklassniki) oraz na wiele innych rodzajów witryn.

Jeśli masz witrynę na swoim lokalnym komputerze, mam nadzieję, że już ją masz. Bez tego nic nie będzie działać.

Tworzenie tabeli w bazie danych

W celu wdrożenia rejestracji użytkowników potrzebujemy przede wszystkim Bazy Danych. Jeśli już to masz, to świetnie, w przeciwnym razie musisz to stworzyć. W tym artykule wyjaśnię szczegółowo, jak to zrobić.

I tak mamy bazę danych (w skrócie baza danych), teraz musimy stworzyć tabelę użytkownicy w którym dodamy naszych zarejestrowanych użytkowników.

W artykule wyjaśniłem również, jak stworzyć tabelę w bazie danych. Przed utworzeniem tabeli musimy określić, jakie pola będzie ona zawierać. Pola te będą odpowiadały polom z formularza rejestracyjnego.

Pomyśleliśmy więc, wyobraziliśmy sobie, jakie pola będzie miał nasz formularz i utworzymy tabelę użytkownicy z polami takimi jak:

  • ID- Identyfikator. Pole ID każda tabela z bazy danych powinna mieć.
  • Imię- Aby zapisać nazwę.
  • nazwisko- Za zapisywanie nazwisk.
  • e-mail- Aby zapisać adres pocztowy. Będziemy używać e-maila jako loginu, więc to pole musi być unikalne, czyli musi mieć UNIKALNY indeks.
  • stan_e-mail- Pole wskazujące, czy wiadomość jest potwierdzona, czy nie. Jeśli mail jest potwierdzony, to będzie miał wartość 1, w przeciwnym razie wartość 0. Domyślnie to pole będzie miało wartość 0.
  • hasło- Aby zapisać hasło.

Wszystkie pola typu „VARCHAR” muszą mieć domyślną wartość NULL.


Jeśli chcesz, aby Twój formularz rejestracyjny zawierał więcej pól, możesz je również dodać tutaj.

Wszystko, nasz stół użytkownicy gotowy. Przejdźmy do następnego kroku.

Połączenie z bazą danych

Stworzyliśmy bazę danych, teraz musimy się z nią połączyć. Połączymy się za pomocą rozszerzenia PHP MySQLi.

W folderze naszej witryny utwórz plik o nazwie dbconnect.php, a w nim piszemy następujący skrypt:

Błąd połączenia z bazą danych... Opis błędu: ".mysqli_connect_error ()."

"; exit ();) // Ustaw kodowanie połączenia $ mysqli-> set_charset (" utf8 "); // Dla wygody dodajmy tutaj zmienną, która będzie zawierała nazwę naszej strony $ address_site =" http: // testsite.local " ;?>

Ten plik dbconnect.php będą musiały być podłączone do form obsługi.

Zwróć uwagę na zmienną $ adres_witryny, tutaj podałem nazwę mojej strony testowej, nad którą będę pracował. Powinieneś odpowiednio podać nazwę swojej witryny.

Struktura strony

Przyjrzyjmy się teraz strukturze HTML naszej witryny.

Przeniesiemy nagłówek i stopkę strony do osobnych plików, header.php i stopka.php... Zamieścimy je na wszystkich stronach. Mianowicie na głównej (plik index.php), na stronę z formularzem rejestracyjnym (plik formularz_rejestr.php) oraz do strony z formularzem autoryzacji (plik formularz_auth.php).

Blokuj za pomocą naszych linków, Zameldować się i upoważnienie, dodaj do nagłówka witryny, aby były wyświetlane na wszystkich stronach. Jeden link wejdzie dalej strona formularza rejestracyjnego(plik formularz_rejestr.php) a drugi do strony z formularz autoryzacyjny(plik formularz_auth.php).

Zawartość pliku header.php:

Nazwa naszej strony

W rezultacie strona główna wygląda tak:


Oczywiście Twoja strona może mieć zupełnie inną strukturę, ale nie jest to dla nas teraz ważne. Najważniejsze jest to, że istnieją linki (przyciski) do rejestracji i autoryzacji.

Przejdźmy teraz do formularza rejestracyjnego. Jak już zrozumiałeś, mamy to w aktach formularz_rejestr.php.

Przejdź do bazy danych (w phpMyAdmin), otwórz strukturę tabeli użytkownicy i zobacz, jakich pól potrzebujemy. Oznacza to, że potrzebujemy pól do wpisania imienia i nazwiska, pola do wpisania adresu pocztowego (Email) oraz pola do wpisania hasła. A ze względów bezpieczeństwa dodamy pole do wpisania captcha.

Na serwerze w wyniku przetworzenia formularza rejestracyjnego mogą wystąpić różne błędy, przez które użytkownik nie będzie mógł się zarejestrować. Dlatego, aby użytkownik zrozumiał, dlaczego rejestracja się nie powiodła, konieczne jest wyświetlanie komunikatów o tych błędach.

Przed wyświetleniem formularza dodaj blok, aby wyświetlić komunikaty o błędach z sesji.

I jeszcze jedno, jeśli użytkownik jest już zalogowany i w trosce o zainteresowanie wchodzi na stronę rejestracji bezpośrednio pisząc w pasku adresu przeglądarki adres_strony / form_register.php, to w takim przypadku zamiast formularza rejestracyjnego wyświetlimy mu tytuł z informacją, że jest już zarejestrowany.

Ogólnie kod pliku formularz_rejestr.php mamy to tak:

Jesteś już zarejestrowany

W przeglądarce strona formularza rejestracyjnego wygląda tak:


Przez wymagany atrybut, wypełniliśmy wszystkie wymagane pola.

Zwróć uwagę na kod formularza rejestracyjnego, gdzie wyświetla się captcha:


Ścieżkę do pliku określiliśmy w wartości atrybutu src dla obrazu captcha.php który generuje ten captcha.

Spójrzmy na kod pliku captcha.php:

Kod jest dobrze skomentowany, więc skupię się tylko na jednym punkcie.

Wewnątrz funkcji obrazTtfText (), ścieżka do czcionki jest określona verdana.ttf... Aby captcha działała poprawnie, musimy utworzyć folder czcionki i umieść tam plik czcionki verdana.ttf... Możesz go znaleźć i pobrać z Internetu lub pobrać z archiwum z materiałami tego artykułu.

Skończyliśmy ze strukturą HTML, czas przejść dalej.

Sprawdzanie poprawności wiadomości e-mail za pomocą jQuery

Każdy formularz musi sprawdzać poprawność wprowadzonych danych, zarówno po stronie klienta (za pomocą JavaScript, jQuery), jak i po stronie serwera.

Musimy zwrócić szczególną uwagę na pole E-mail. Bardzo ważne jest, aby wprowadzony adres pocztowy był prawidłowy.

Dla tego pola wejściowego ustawiliśmy typ e-mail (type = "email"), co trochę ostrzega nas przed nieprawidłowymi formatami. Ale to nie wystarczy, ponieważ za pomocą inspektora kodu, który udostępnia nam przeglądarka, możesz łatwo zmienić wartość atrybutu rodzaj z e-mail na tekst i tyle, nasz czek nie będzie już ważny.


W takim przypadku musimy przeprowadzić bardziej wiarygodną kontrolę. W tym celu wykorzystamy bibliotekę jQuery z JavaScript.

Aby podłączyć bibliotekę jQuery, w pliku header.php między tagami , przed tagiem zamykającym , dodaj ten wiersz:

Zaraz po tym wierszu dodaj kod sprawdzania poprawności adresu e-mail. Tutaj dodajemy kod do sprawdzenia długości wprowadzonego hasła. Jego długość musi wynosić co najmniej 6 znaków.

Za pomocą tego skryptu sprawdzamy poprawność wpisanego adresu e-mail. Jeśli użytkownik wprowadził niepoprawny adres e-mail, wyświetlamy o tym błąd i dezaktywujemy przycisk do przesłania formularza. Jeśli wszystko jest w porządku, usuwamy błąd i aktywujemy przycisk do przesłania formularza.

I tak kończymy walidację formularza po stronie klienta. Teraz możemy wysłać go na serwer, gdzie również dokonamy kilku sprawdzeń i dodamy dane do bazy danych.

Rejestracja Użytkownika

Przesyłamy formularz do przetworzenia do pliku rejestr.php, metodą POST. Nazwa tego pliku obsługi, określona w wartości atrybutu akcja... A metoda wysyłania jest określona w wartości atrybutu metoda.

Otwieram ten plik rejestr.php a pierwsze co musimy zrobić to napisać funkcję uruchamiającą sesję i połączyć utworzony wcześniej plik the dbconnect.php(W tym pliku wykonaliśmy połączenie z bazą danych). A jednak od razu zadeklarujmy komórki komunikaty o_błędach i sukces_wiadomości w globalnej tablicy sesji. W komunikaty o_błędach będziemy rejestrować wszystkie komunikaty o błędach, które pojawią się podczas przetwarzania formularza i w sukces_wiadomości, będziemy nagrywać radosne wiadomości.

Przed kontynuowaniem musimy sprawdzić czy formularz w ogóle został złożony?... Atakujący może spojrzeć na wartość atrybutu akcja z formularza i dowiedz się, który plik przetwarza ten formularz. I może pomyśleć o przejściu bezpośrednio do tego pliku, wpisując następujący adres w pasku adresu przeglądarki: http: //arees_site/register.php

Dlatego musimy sprawdzić obecność komórki w globalnej tablicy POST, której nazwa odpowiada nazwie naszego przycisku "Zarejestruj" z formularza. W ten sposób sprawdzamy, czy przycisk „Zarejestruj” został kliknięty, czy nie.

Jeśli atakujący spróbuje przejść bezpośrednio do tego pliku, otrzyma komunikat o błędzie. Przypomnę, że zmienna $ address_site zawiera nazwę strony i została zadeklarowana w pliku dbconnect.php.

Błąd! strona główna.

"); } ?>

Wartość captcha w sesji została dodana podczas generowania, w pliku captcha.php... Dla przypomnienia pokażę ponownie ten fragment kodu z pliku. captcha.php gdzie do sesji dodawana jest wartość captcha:

Przejdźmy teraz do samej weryfikacji. W pliku rejestr.php, wewnątrz bloku if, w którym sprawdzamy, czy został kliknięty przycisk „Zarejestruj”, czy raczej, gdzie podany jest komentarz „ // (1) Miejsce na kolejny fragment kodu"piszemy:

// Sprawdź wynikowy captcha // Przytnij spacje od początku i końca wiersza $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! empty ($ captcha)) (// Porównaj otrzymaną wartość z wartością z sesji. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Jeśli captcha nie jest poprawna, zwracamy użytkownikowi stronę rejestracji, a tam wyświetlamy komunikat o błędzie, że wprowadził niewłaściwą captcha $ error_message = "

Błąd! Wpisałeś niewłaściwą captcha

"; // Zapisz komunikat o błędzie w sesji. $ _SESSION [" error_messages "] = $ error_message; // Zwróć użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesione na stałe "); nagłówek (" Lokalizacja: " $ Address_site . "/ form_register.php"); // Zatrzymaj skrypt exit();) // (2) Miejsce na następny fragment kodu) else (// Jeśli captcha nie jest przekazana lub jest pusta exit ( "

Błąd! Nie ma kodu weryfikacyjnego, czyli kodu captcha. Możesz przejść do strony głównej.

"); }

Następnie musimy przetworzyć odebrane dane z tablicy POST. Przede wszystkim musimy sprawdzić zawartość globalnej tablicy POST, czyli czy są tam komórki, których nazwy odpowiadają nazwom pól wejściowych z naszego formularza.

Jeżeli komórka istnieje, to wycinamy spacje od początku i od końca wiersza z tej komórki, w przeciwnym razie przekierowujemy użytkownika z powrotem na stronę z formularzem rejestracyjnym.

Dalej, po przycięciu spacji, dodajemy wiersz do zmiennej i sprawdzamy, czy ta zmienna jest pusta, jeśli nie jest pusta, to śmiało, w przeciwnym razie przekierowujemy użytkownika z powrotem na stronę z formularzem rejestracyjnym.

Wklej ten kod w określonej lokalizacji ” // (2) Miejsce na kolejny fragment kodu".

/ * Sprawdzamy czy w globalnej tablicy $ _POST znajdują się dane wysłane z formularza i umieszczamy przesłane dane w zwykłych zmiennych * / If (isset ($ _ POST ["first_name"])) (// Ucinamy spacje z początku i od końca ciągu $ first_name = trim ($ _ POST ["first_name"]); // Sprawdź, czy zmienna jest pusta, jeśli (! empty ($ first_name)) (// Dla bezpieczeństwa przekonwertuj znaki specjalne na Encje HTML $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Wpisz swoje imię

Brak pola nazwy

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) if ( isset ($ _ POST ["last_name"])) (// Przytnij spacje od początku i końca ciągu $ last_name = trim ($ _ POST ["last_name"]); if (! empty ($ last_name )) (// Ze względów bezpieczeństwa , przekonwertuj znaki specjalne na encje HTML $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Wpisz swoje nazwisko

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Brak pola nazwiska

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) if ( isset ($ _ POST ["email"])) (// Utnij spacje od początku i końca linii $ email = trim ($ _ POST ["email"]); if (! empty ($ email )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Miejsce kodu do sprawdzenia formatu adresu e-mail i jego unikalności) else (// Zapisz komunikat o błędzie do sesji. $ _SESSION [ "komunikaty o_błędach"]. = "

Wprowadź swój email

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) if ( isset ($ _ POST ["hasło"])) (// Utnij spacje od początku i końca ciągu $ hasło = trim ($ _ POST ["hasło"]); if (! pusty ($ password)) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Zaszyfruj paprol $ password = md5 ($ password. "top_secret");) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION [" komunikaty o_błędach"]. = "

Wprowadź hasło

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) // (4) Miejsce na kod dodawania użytkownika do bazy danych

Szczególnie ważne jest pole e-mail... Musimy sprawdzić format otrzymanego adresu pocztowego i jego unikalność w bazie danych. To znaczy, czy jest już zarejestrowany użytkownik z tym samym adresem pocztowym?

W określonej lokalizacji ” // (3) Miejsce kodu do sprawdzenia formatu adresu pocztowego i jego unikalności"dodaj następujący kod:

// Sprawdź format otrzymanego adresu e-mail za pomocą wyrażenia regularnego $ reg_email = "/^**@(+(*+)*\.)++/i"; // Jeśli format otrzymanego adresu e-mail nie jest zgodny z wyrażeniem regularnym if (! Preg_match ($ reg_email, $ email)) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Wpisałeś nieprawidłowy adres e-mail

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) // Sprawdzamy czy taki adres już istnieje w bazie $ Result_query = $ mysqli-> zapytanie ("SELECT` email` FROM `users` WHERE` email` = "". $ Email. "" "); // Jeśli liczba otrzymanych wierszy wynosi dokładnie jeden, więc użytkownik o tym adresie e-mail jest już zarejestrowany if ($ result_query-> num_rows == 1) (// Jeśli wynik nie jest fałszywy if (($ row = $ result_query -> fetch_assoc ())! = false) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Użytkownik z tym adresem pocztowym jest już zarejestrowany

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesione na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php ");) else (// Zapisz komunikat o błędzie do sesji $_SESSION ["komunikaty_o_błędach"]. = "

Błąd w zapytaniu do bazy danych

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesione na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_register.php ");) / * zamknij zaznaczenie * / $ result_query-> close ();// zatrzymanie wyjścia skryptu ();) / * zamknięcie zaznaczenia * / $ result_query-> close ();

I tak skończyliśmy ze wszystkimi sprawami, czas dodać użytkownika do bazy. W określonej lokalizacji ” // (4) Miejsce na kod dodawania użytkownika do bazy danych"dodaj następujący kod:

// Żądanie dodania użytkownika do bazy danych $ result_query_insert = $ mysqli-> zapytanie ("INSERT INTO` users` (imię, nazwisko, e-mail, hasło) VALUES ("". $ First_name. "", "". $ Last_name . " "," ". $ e-mail." "," ". $ hasło." ")"); if (! $ result_query_insert) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Nie udało się dodać użytkownika do żądania bazy danych

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); ) else ( $ _SESSION ["success_messages"] = "

Rejestracja zakończona sukcesem!!!
Teraz możesz się zalogować, używając swojej nazwy użytkownika i hasła.

"; // Wyślij użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesione na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php ");) / * Uzupełnienie żądania * / $ result_query_insert-> close ();// Zamknij połączenie z bazą danych $ mysqli-> close ();

W przypadku wystąpienia błędu w żądaniu dodania użytkownika do bazy, dodajemy do sesji komunikat o tym błędzie i zwracamy użytkownika na stronę rejestracji.

W przeciwnym razie, jeśli wszystko poszło dobrze, dodajemy również wiadomość do sesji, ale już przyjemniej, a mianowicie mówimy użytkownikowi, że rejestracja się powiodła. A my przekierowujemy go na stronę z formularzem autoryzacyjnym.

Skrypt do sprawdzania formatu adresu e-mail i długości hasła znajduje się w pliku header.php, więc będzie działać również na polach z tego formularza.

Sesja jest również uruchamiana w pliku header.php, więc w pliku formularz_auth.php nie musisz rozpoczynać sesji, bo dostaniemy błąd.


Jak już wspomniałem, działa tutaj również skrypt do sprawdzania formatu adresu e-mail i długości hasła. Dlatego jeśli użytkownik wprowadzi niepoprawny adres e-mail lub krótkie hasło, natychmiast otrzyma komunikat o błędzie. I przycisk wejść stanie się nieaktywny.

Po usunięciu błędów przycisk, wejść stanie się aktywny i użytkownik będzie mógł przesłać formularz na serwer, na którym zostanie przetworzony.

Autoryzacja użytkownika

Do wartości atrybutu akcja handicap autoryzacyjny ma plik auth.php, oznacza to, że formularz zostanie przetworzony w tym pliku.

A więc otwórz plik auth.php i napisz kod do przetworzenia formularza autoryzacji. Pierwszą rzeczą do zrobienia jest rozpoczęcie sesji i podłączenie pliku dbconnect.php połączyć się z bazą danych.

// Zadeklaruj komórkę, aby dodać błędy, które mogą wystąpić podczas przetwarzania formularza. $_SESSION ["komunikaty o_błędach"] = ""; // Zadeklaruj komórkę do dodawania wiadomości, które zakończyły się sukcesem $ _SESSION ["success_messages"] = "";

/ * Sprawdź, czy formularz został przesłany, czyli czy został kliknięty przycisk Zaloguj. Jeśli tak, to śmiało, jeśli nie, wyświetl użytkownikowi komunikat o błędzie, że przeszedł bezpośrednio na tę stronę. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! pusty ($ _ POST ["btn_submit_auth"])) (// (1) Miejsce na następny fragment kodu) else (exit ("

Błąd! Wszedłeś na tę stronę bezpośrednio, więc nie ma danych do przetworzenia. Możesz przejść do strony głównej.

"); }

// Sprawdź wynikowy captcha if (isset ($ _ POST ["captcha"])) (// Utnij spacje od początku i końca wiersza $ captcha = trim ($ _ POST ["captcha"]); if (! Empty ($ captcha )) (// Porównaj otrzymaną wartość z wartością z sesji. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Jeśli captcha nie jest poprawna, zwracamy użytkownikowi stronę autoryzacji i tam wyświetlamy komunikat o błędzie, że wprowadził niepoprawny kod captcha. $ error_message = "

Błąd! Wpisałeś niewłaściwą captcha

"; // Zapisz komunikat o błędzie w sesji. $ _SESSION [" error_messages "] = $ error_message; // Zwróć użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 Moved Permanently "); header (" Location: " . $ Address_site . "/ form_auth.php"); // Zatrzymaj wyjście ze skryptu ();)) else ($ error_message = "

Błąd! Pole wejściowe captcha nie może być puste.

"; // Zapisz komunikat o błędzie w sesji. $ _SESSION [" error_messages "] = $ error_message; // Zwróć użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 Moved Permanently "); header (" Location: " $ Address_site . "/ form_auth.php"); // Zatrzymanie wyjścia skryptu ();) // (2) Miejsce do przetwarzania adresu e-mail // (3) Miejsce do przetwarzania hasła // (4) Miejsce do wykonanie zapytania do bazy danych) else (// Jeśli nie przekazano captcha exit ("

Błąd! Nie ma kodu weryfikacyjnego, czyli kodu captcha. Możesz przejść do strony głównej.

"); }

Jeśli użytkownik poprawnie wpisał kod weryfikacyjny, kontynuuj, w przeciwnym razie zwracamy go na stronę autoryzacyjną.

Sprawdzanie adresu pocztowego

// Przytnij spacje od początku i końca linii $ email = trim ($ _ POST ["email"]); if (isset ($ _ POST ["email"])) (if (! empty ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Sprawdź format otrzymanego adresu e-mail za pomocą wyrażenia regularnego $ reg_email = " /^**@(+(*+)*\.)++/i "; // Jeśli format otrzymanego adresu e-mail nie pasuje do wyrażenia regularnego if (! preg_match ($ reg_email, $ email)) (// Zapisz w komunikacie o błędzie sesji. $ _SESSION ["error_messages"]. = "

Wpisałeś niepoprawny adres e-mail

"; // Powrót użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Pole do wpisania adresu pocztowego (e-mail) nie powinno być puste.

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_register.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Brak pola e-mail

"; // Powrót użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); ) // (3) Przestrzeń do przetwarzania hasła

Jeżeli użytkownik wpisał adres pocztowy w niepoprawnym formacie lub wartość pola adresu pocztowego jest pusta, to zwracamy go do strony autoryzacyjnej, gdzie wyświetlamy komunikat o tym.

Sprawdzanie hasła

Kolejnym polem do przetworzenia jest pole hasła. Do określonej lokalizacji ” // (3) Miejsce do przetwarzania hasła", piszemy:

If (isset ($ _ POST ["hasło"])) (// Utnij spacje od początku i końca ciągu $ hasło = trim ($ _ POST ["hasło"]); if (! Empty ($ hasło )) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Zaszyfruj hasło $ password = md5 ($ password. "top_secret");) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages "]. = "

Wprowadź hasło

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesione na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); )) else (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["komunikaty_o_błędach"]. = "

Nie ma pola do wpisania hasła

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_auth.php "); // Zatrzymanie wyjścia skryptu (); )

Tutaj za pomocą funkcji md5() szyfrujemy otrzymane hasło, ponieważ hasła są w bazie danych w postaci zaszyfrowanej. Dodatkowe tajne słowo w szyfrowaniu, w naszym przypadku” ściśle tajne„musi być tym, który został użyty podczas rejestracji użytkownika.

Teraz należy wykonać zapytanie do bazy danych na próbce użytkownika, którego adres pocztowy jest równy otrzymanemu adresowi pocztowemu, a hasło jest takie samo jak otrzymane hasło.

// Zapytanie w bazie danych dotyczące wyboru użytkownika. $ result_query_select = $ mysqli-> zapytanie ("SELECT * FROM` users` WHERE email = "". $ email. "" AND hasło = "". $ hasło. "" "); if (! $ result_query_select) (// Zapisz komunikat o błędzie w sesji. $ _SESSION ["error_messages"]. = "

Błąd żądania podczas pobierania użytkownika z bazy danych

"; // Powrót użytkownika do nagłówka strony rejestracji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny."/Form_auth.php "); // Zatrzymanie wyjścia skryptu (); ) else ( // Sprawdź, czy w bazie danych nie ma użytkownika z takimi danymi, a następnie wyświetl komunikat błędu if ($ result_query_select-> num_rows == 1) (// Jeśli wprowadzone dane zgadzają się z danymi z bazy, to zapisz login i hasło do tablicy sesji $ _SESSION ["email"] = $ e-mail; $ _SESSION ["hasło"] = $ hasło; // Powrót użytkownika do nagłówka strony głównej ("HTTP / 1.1 301 przeniesiony na stałe" nagłówek ("Location:". $ Address_site . "/ index.php");) else (// Zapisz komunikat o błędzie do sesji. $ _SESSION ["error_messages"]. = "

Nieprawidłowa nazwa użytkownika i/lub hasło

"; // Powrót użytkownika do nagłówka strony autoryzacji (" HTTP / 1.1 301 przeniesiony na stałe "); header (" Lokalizacja: ". $ Adres_witryny." / Form_auth.php "); // Zatrzymanie wyjścia skryptu (); ))

Wyloguj się ze strony

A ostatnią rzeczą, którą robimy, jest procedura opuszczenia terenu... W tej chwili w nagłówku wyświetlamy linki do strony autoryzacji oraz do strony rejestracji.

W nagłówku witryny (plik header.php), korzystając z sesji sprawdzamy, czy użytkownik jest już zalogowany. Jeśli nie, to wyświetlamy link rejestracyjny i autoryzacyjny, w przeciwnym razie (jeśli jest autoryzowany), to zamiast linku rejestracyjnego i autoryzacyjnego wyświetlamy link Wynik.

Zmodyfikowany fragment kodu z pliku header.php:

Zameldować się

Wynik

Kiedy klikniesz na link wyjścia ze strony, dostaniemy się do pliku wyloguj.php, gdzie po prostu niszczymy komórki z adresem pocztowym i hasłem z sesji. Następnie wracamy do strony, na której kliknął link wynik.

Kod pliku wyloguj.php:

To wszystko. Teraz wiesz jak wdrażamy i przetwarzamy formularze rejestracyjne i autoryzacyjne, użytkownika w Twojej witrynie. Formularze te znajdują się na prawie każdej stronie, więc każdy programista powinien wiedzieć, jak je tworzyć.

Dowiedzieliśmy się również, jak walidować dane wejściowe, zarówno po stronie klienta (w przeglądarce za pomocą JavaScript, jQuery) jak i po stronie serwera (za pomocą języka PHP). Nauczyliśmy się też wdrożyć procedurę opuszczenia terenu.

Wszystkie skrypty są przetestowane i działają. Możesz pobrać archiwum z plikami tej małej witryny pod tym linkiem.

W przyszłości napiszę artykuł, w którym opiszę. Planuję też napisać artykuł, w którym wyjaśnię (bez przeładowywania strony). Tak więc, aby być świadomym wydania nowych artykułów, możesz subskrybować moją stronę.

Jeśli masz jakieś pytania, również jeśli zauważysz jakiś błąd w artykule, proszę o informację.

Scenariusz lekcji (część 5):

  1. Utwórz strukturę HTML dla formularza logowania
  2. Przetwarzamy otrzymane dane
  3. Wyświetlamy powitanie użytkownika w nagłówku strony

Podobał Ci się artykuł?

Jeśli chcesz udostępnić jedną z sekcji swojej witryny dla ograniczonego, ale nieokreślonego kręgu osób, najłatwiej to zrobić, rejestrując i autoryzując użytkowników. Istnieje wiele sposobów autoryzacji użytkowników. Można używać zarówno narzędzi serwera WWW, jak i narzędzi języka programowania. Porozmawiamy o przypadku, w którym używane są sesje PHP.

Zapewne chciałbyś zobaczyć bardziej nowoczesny sposób tworzenia takiego kształtu. Wciąż mam kompletną, nowoczesną i aktualną prezentację, ale widać, że formularz opinii można zbudować przy użyciu technik obiektowych w PHP.

Najpierw omówmy wszystkie kroki, które podejmiemy dalej. Czego w ogóle potrzebujemy? Potrzebujemy skryptu, który zarejestruje użytkownika, autoryzuje użytkownika, przekieruje go gdzieś po autoryzacji. Będziemy też musieli stworzyć stronę, która będzie chroniona przed dostępem nieautoryzowanych użytkowników. Do rejestracji i autoryzacji będziemy musieli stworzyć formularze HTML. Będziemy przechowywać informacje o zarejestrowanych użytkownikach w bazie danych. Oznacza to, że nadal potrzebujemy skryptu do połączenia z DBMS. Cała nasza praca będzie wykonywana przez funkcje, które sami napiszemy. Funkcje te zapiszemy w osobnym pliku.

Potrzebujemy więc następujących plików:

  • połączenie z DBMS;
  • funkcje niestandardowe;
  • upoważnienie;
  • Zameldować się;
  • strona chroniona;
  • skrypt zamykający użytkownika;
  • skrypt sprawdzający status autoryzacji użytkownika;
  • arkusz stylów dla najprostszego projektu naszych stron.

Wszystko to będzie bezcelowe, jeśli nie masz odpowiedniej tabeli w swojej bazie danych. Uruchom narzędzie do zarządzania DBMS (PhpMyAdmin lub wiersz poleceń, w zależności od tego, co jest wygodniejsze) i uruchom w nim następujące zapytanie:

CREATE TABLE `users` (`id` int (11) NOT NULL AUTO_INCREMENT, `login` char (16) NOT NULL,` password` char (40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (` id`)) ENGINE = MyISAM DOMYŚLNY ZESTAW ZNAKÓW = utf8 AUTO_INCREMENT = 1;

Nazwę nasze pliki skryptów w ten sposób (wszystkie będą w tym samym katalogu):

  • baza danych.php;
  • funkcje.php;
  • login.php;
  • rejestracja.php;
  • index.php;
  • wyloguj.php;
  • checkAuth.php;
  • styl.css.

Jestem pewien, że cel każdego z nich jest dla ciebie jasny. Zacznijmy od skryptu połączenia DBMS. Widziałeś to wcześniej. Wystarczy zapisać kod tego skryptu w pliku o nazwie database.php. Funkcje niestandardowe zadeklarujemy w pliku functions.php. Jak to wszystko będzie działać? Nieautoryzowany użytkownik próbuje uzyskać dostęp do chronionego dokumentu index.php, system sprawdza, czy użytkownik jest autoryzowany, jeśli użytkownik nie jest autoryzowany, zostaje przekierowany na stronę autoryzacji. Na stronie autoryzacji użytkownik powinien zobaczyć formularz autoryzacji. Zróbmy to.

Autoryzacja użytkownika

zarejestrować.

Teraz musimy nadać naszej formie określony wygląd. Jednocześnie określimy zasady dla pozostałych elementów. Mam zamiar przedstawić pełną zawartość arkusza stylów, patrząc w przyszłość.

/ * plik style.css * / .row (margin-bottom: 10px; width: 220px;) .row label (display: block; font-weight: bold;) .row input.text (font-size: 1.2em; padding: 2px 5px;) .to_reg (rozmiar czcionki: 0.9em;).instrukcja (rozmiar czcionki: 0.8em; kolor: #aaaaaa; margines lewy: 2px; kursor: domyślnie;) .error (kolor: czerwony; margines lewy: 3px;)

Jeśli wszystko jest zrobione poprawnie, powinieneś mieć w swojej przeglądarce:

Oczywiście nie mamy jeszcze jednego zarejestrowanego użytkownika, a aby się zalogować, musisz się zarejestrować. Zróbmy formularz rejestracyjny.

Rejestracja Użytkownika

" />

Zapewne zauważyłeś, że w kodzie HTML znajdują się zmienne PHP. Są to zawartość atrybutów pól tekstowych formularzy, zawartość kontenerów przeznaczonych do wyświetlania błędów. Ale nie zainicjalizowaliśmy tych zmiennych. Zróbmy to.

Rejestracja Użytkownika

" />
Nazwa użytkownika może zawierać tylko znaki łacińskie, cyfry, symbole „_”, „-”, „.”. Nazwa użytkownika musi mieć co najmniej 4 znaki i nie więcej niż 16 znaków
W haśle możesz używać tylko znaków łacińskich, cyfr, symboli "_", "!", "(", ")". Hasło musi mieć co najmniej 6 znaków i nie dłuższe niż 16 znaków
Powtórz poprzednio wprowadzone hasło

W atrybucie działania znacznika formularza nie określono żadnego parametru. W takim przypadku podczas przesyłania danych formularza zostaną one przetworzone w tym samym skrypcie, z którego zostały przesłane. Więc musimy napisać kod, który przetwarza dane formularza. Ale najpierw omówmy algorytm ich przetwarzania.

Pola loginu i hasła nie mogą być puste. Następnie musisz sprawdzić login pod kątem zgodności z wymaganiami. Hasło musi również spełniać opisane wymagania, a ponownie wprowadzone hasło musi mu odpowiadać, a ponadto muszą być identyczne. Jeśli którykolwiek z tych warunków nie jest spełniony, przetwarzanie danych formularza powinno zostać zatrzymane, odpowiednie powiadomienie powinno zostać zapisane w tablicy komunikatów o błędach i wyświetlone użytkownikowi. Dla wygody użytkownika zapiszemy wprowadzony przez niego login (o ile go podał), wpisując jego wartość do tablicy $fields.

Jeśli wszystko jest w porządku, w oknie przeglądarki, odwołując się do dokumentu registration.php, powinieneś zobaczyć coś takiego:

Załóżmy teraz, że użytkownik klika przycisk rejestracji bez wypełniania pól formularza. Według naszego algorytmu login i hasło nie mogą być puste. Jeśli ten warunek nie jest spełniony, rejestracja nie jest możliwa. Pamiętamy, że przetwarzanie danych formularza odbywa się w obecnym skrypcie. Musimy więc zmienić jego kod, dodając odpowiednie sprawdzenia. Niezwłocznie określimy następujące kontrole. W przypadku wprowadzenia loginu i hasła należy sprawdzić ich zgodność z określonymi wymaganiami. Aby sprawdzić login i hasło, utworzymy niestandardowe funkcje w pliku functions.php.

/ ** * functions.php * Plik z niestandardowymi funkcjami * / // Dołącz plik z parametrami do połączenia z DBMS require_once ("database.php"); // Sprawdzenie funkcji nazwy użytkownika checkLogin ($ str) (// Zainicjuj zmienną z możliwym komunikatem o błędzie $ error = ""; // Jeśli nie ma ciągu logowania, zwróć komunikat o błędzie if (! $ Str) ($ error = " Nie wpisałeś nazwy użytkownika "; zwróć błąd $ ;) / ** * Sprawdź nazwę użytkownika za pomocą wyrażeń regularnych * Login musi mieć co najmniej 4, nie dłuższy niż 16 znaków * Musi zawierać znaki łacińskie, cyfry, * może być symbolami "_", "-", "." * / $ pattern = "/^ [-_.az\d ](4,16)$/i"; $ result = preg_match ($ pattern, $ str) ; // Jeśli sprawdzenie się nie powiedzie, zwróć komunikat o błędzie if (! $ Wynik) ($ error = "Nieprawidłowe znaki w nazwie użytkownika lub nazwa użytkownika jest za krótka (długa)"; zwróć $ error;) // Jeśli wszystko jest w porządku , return true return true;) // Sprawdź funkcję hasła użytkownika checkPassword ($ str) (// Zainicjuj zmienną z możliwym komunikatem o błędzie $ error = ""; // Jeśli nie ma pojawi się napis z loginem, zwróć komunikat o błędzie if (! $ str) ($ error = "Nie wpisałeś hasła"; zwróć błąd $; ) / ** * Sprawdź hasło użytkownika za pomocą wyrażeń regularnych * Hasło nie może być krótsze niż 6, nie dłuższe niż 16 znaków * Musi zawierać znaki łacińskie, cyfry, * może zawierać symbole "_", "!", " ( ",") "* / $ wzorzec =" /^ [_!)(.az\d"(6,16)$/i "; $ wynik = preg_match ($ wzorzec, $ str); // Jeśli sprawdzenie nie powiodło się, zwróć komunikat o błędzie if (! $ wynik) ($ error = "Nieprawidłowe znaki w haśle użytkownika lub hasło jest za krótkie (długie)"; return $ error;) // Jeśli wszystko jest w porządku, zwróć true return true ; )

Teraz musimy zmodyfikować plik registration.php, aby korzystał z zadeklarowanych przez nas funkcji. Dodamy warunek do skryptu, aby sprawdzić, czy przycisk rejestracji został kliknięty. W tym stanie rozpoczyna się sprawdzanie loginu i hasła. Jeśli którakolwiek z kontroli się nie powiedzie, ponownie renderujemy formularz i wyświetlamy komunikat o błędzie. Jeśli nie ma błędów, rejestrujemy użytkownika, nie wyświetlamy już formularza rejestracyjnego, informujemy użytkownika o udanej rejestracji, a korzystając z funkcji nagłówka () przekierowujemy go do formularza autoryzacji.

Pomyślnie zarejestrowałeś się w systemie. Zostaniesz teraz przekierowany na stronę logowania. Jeśli tak się nie stało, przejdź do niego za pomocą bezpośredniego linku.

"; header (" Odśwież: 5; URL = login.php ");) // W przeciwnym razie poinformuj użytkownika o błędzie else ($ błędy [" full_error "] = $ reg;)))?> Rejestracja Użytkownika
" />
Nazwa użytkownika może zawierać tylko znaki łacińskie, cyfry, symbole „_”, „-”, „.”. Nazwa użytkownika musi mieć co najmniej 4 znaki i nie więcej niż 16 znaków
W haśle możesz używać tylko znaków łacińskich, cyfr, symboli "_", "!", "(", ")". Hasło musi mieć co najmniej 6 znaków i nie dłuższe niż 16 znaków
Powtórz poprzednio wprowadzone hasło

Powinieneś zauważyć kolejną nową funkcję w skrypcie - rejestrację (). I jeszcze tego nie ogłosiliśmy. Zróbmy to.

// Rejestracja funkcji rejestracji użytkownika ($ login, $ hasło) (// Zainicjuj zmienną z możliwym komunikatem o błędzie $ error = ""; // Jeśli nie ma ciągu logowania, zwróć komunikat o błędzie if (! $ Login) ($ error = "Nie określono logowania"; zwróć błąd $;) elseif (! $ hasło) ($ error = "Nie określono hasła"; return $ error;) // Sprawdź, czy użytkownik jest już zarejestrowany // Połącz się z DBMS connect() ; // Napisz zapytanie $ sql = "SELECT` id` FROM `users` WHERE` login` = "". $ Login. "" "; // Wykonaj zapytanie do bazy danych $ query = mysql_query ($ sql) or die ( ""); // Sprawdź liczbę użytkowników z tym loginem, jeśli jest przynajmniej jeden, // zwróć komunikat o błędzie if (mysql_num_rows ($ query)> 0) ($ error = "Użytkownik o podanym loginie jest już zarejestrowany"; zwróć błąd $;) // Jeśli nie ma takiego użytkownika, zarejestruj go // Napisz zapytanie $ sql = "INSERT INTO` users` (`id`,` login `, `hasło`) WARTOŚCI (NULL," ". $ login." "," ". $ hasło. "") "; // Wykonaj zapytanie do bazy danych $ query = mysql_query ($ sql) lub die ("

Nie można dodać użytkownika: ". Mysql_error ().". Wystąpił błąd w wierszu „. __LINE__.”

"); // Nie zapomnij odłączyć się od DBMS mysql_close (); // Zwróć true, oznaczający pomyślną rejestrację użytkownika, return true;)

Jeśli wszystko jest w porządku, Twój użytkownik zostanie zarejestrowany. Możesz przetestować formularz. Spróbuj zarejestrować użytkowników z tymi samymi loginami. Po udanej rejestracji użytkownik zostanie przekierowany do formularza autoryzacji. Wcześniej po prostu utworzyliśmy znacznik, aby wyświetlić ten formularz. Ponieważ w jego atrybucie action nie ma określonego parametru, dane przesłane przez formularz będą przetwarzane w tym samym skrypcie. Musimy więc napisać kod do przetworzenia i dodać go do dokumentu login.php.

Autoryzacja użytkownika

;">

Jeśli nie jesteś zarejestrowany w systemie, zarejestruj się.

Zapewne zauważyłeś, że w skrypcie autoryzacji mamy inną nieznaną nam funkcję - autoryzację (). Funkcja ta powinna autoryzować użytkownika poprzez sprawdzenie, czy w bazie danych jest zarejestrowany użytkownik o tej samej nazwie użytkownika i haśle. Jeśli taki użytkownik nie zostanie znaleziony, autoryzacja zostanie przerwana, a na ekranie pojawi się komunikat o niepowodzeniu. Jeśli sprawdzenie się powiedzie, funkcja autoryzacji () uruchomi sesję i zapisze do niej wartości nazwy użytkownika i hasła, poinformuje skrypt o udanej autoryzacji, a skrypt przekieruje użytkownika na stronę chronionego zasobu.

/ ** * Funkcja autoryzacji użytkownika. * Autoryzacja użytkowników u nas zostanie przeprowadzona * przy użyciu sesji PHP. * / autoryzacja funkcji ($ login, $ hasło) (// Zainicjuj zmienną z możliwym komunikatem o błędzie $ error = ""; // Jeśli nie ma linii logowania, zwróć komunikat o błędzie if (! $ login) ($ error = "Nie określono loginu"; zwróć błąd $;) elseif (! $ Hasło) ($ błąd =" Nie określono hasła "; zwróć błąd $;) // Sprawdź, czy użytkownik jest już zarejestrowany // Połącz z połączeniem DBMS ( // Musimy sprawdzić, czy wśród zarejestrowanych jest taki użytkownik // Ułożenie zapytania $ sql = "SELECT` id` FROM `users` WHERE` login` = "". $ Login. "" AND `hasło` =" ". $ Hasło . "" "; // Uruchom zapytanie $ query = mysql_query ($ sql) lub die ("

Nie można wykonać zapytania: ". Mysql_error ().". Wystąpił błąd w wierszu „. __LINE__.”

"); // Jeśli nie ma użytkownika z takimi danymi, zwróć komunikat o błędzie if (mysql_num_rows ($ zapytanie) == 0) ($ error =" Użytkownik z określonymi danymi nie jest zarejestrowany "; return $ error;) // Jeśli użytkownik istnieje , uruchom sesję session_start ();// I wpisz w nim nazwę użytkownika i hasło // W tym celu używamy tablicy superglobalnej $ _SESSION $ _SESSION ["login"] = $ login; $ _SESSION [" password"] = $ password; // Nie zapomnij zamknąć połączenia z bazą danych mysql_close (); // Zwróć true w przypadku komunikatu o pomyślnej autoryzacji użytkownika return true;)

Gdy użytkownik wchodzi na chronioną stronę, należy sprawdzić poprawność jego danych autoryzacyjnych. Do tego potrzebujemy jeszcze jednej niestandardowej funkcji. Nazwijmy to checkAuth (). Jego zadaniem będzie uzgodnienie danych autoryzacyjnych użytkownika z tymi, które znajdują się w naszej bazie danych. Jeśli dane się nie zgadzają, użytkownik zostanie przekierowany na stronę autoryzacji.

Funkcja checkAuth ($ login, $ hasło) (// Jeśli nie ma nazwy użytkownika lub hasła, zwróć false if (! $ Login ||! $ Password) return false; // Sprawdź, czy taki użytkownik jest zarejestrowany // Połącz się z DBMS connect (); // Utwórz ciąg zapytania $ sql = "SELECT` id` FROM `users` WHERE` login` = "". $ Login. "" AND `password` =" ". $ Password." "" ; // Wykonaj zapytanie $ query = mysql_query ($ sql) lub die ("

Nie można wykonać zapytania: ". Mysql_error ().". Wystąpił błąd w wierszu „. __LINE__.”

"); // Jeśli nie ma użytkownika z takimi danymi, zwróć false; if (mysql_num_rows ($ zapytanie) == 0) (return false;) // Nie zapomnij zamknąć połączenia z bazą danych mysql_close (); // Inaczej , zwróć prawdę, zwróć prawdę;)

Teraz, gdy użytkownik znajduje się na bezpiecznej stronie, musimy wywołać funkcję, aby sprawdzić dane autoryzacyjne. Skrypt call i check umieścimy w osobnym pliku checkAuth.php i połączymy go ze stronami, które zostaną zamknięte dla publicznego dostępu.

/ ** * Skrypt do sprawdzania autoryzacji użytkowników * / // Uruchamiamy sesję, z której wyciągniemy login i hasło // zalogowanych użytkowników session_start(); // Dołącz plik z niestandardowymi funkcjami require_once ("functions.php"); / ** * Aby określić, czy użytkownik jest zalogowany, musimy * sprawdzić, czy w bazie danych znajdują się rekordy dotyczące jego loginu * i hasła. W tym celu wykorzystamy funkcję niestandardową * do sprawdzenia poprawności danych zalogowanego użytkownika. * Jeśli ta funkcja zwraca wartość false, oznacza to brak autoryzacji. * W przypadku braku autoryzacji po prostu przekierowujemy * użytkownika na stronę autoryzacji. * / // Jeśli sesja zawiera zarówno dane logowania, jak i hasła, // sprawdź je, // czy (isset ($ _ SESSION ["login"]) && $ _SESSION ["login"] && isset ($ _ SESSION ["hasło" ] ) && $ _SESSION ["hasło"]) (// Jeśli walidacja istniejących danych nie powiedzie się if (! CheckAuth ($ _ SESSION ["login"], $ _SESSION ["hasło"])) (// Przekieruj użytkownika do nagłówek strony autoryzacji ("location: login.php"); // Zatrzymaj wykonywanie skryptu exit;)) // Jeśli nie ma danych o loginie lub haśle użytkownika, // uważaj, że nie ma autoryzacji, przekieruj użytkownik // do strony autoryzacji else ( header ("location: login.php"); // przerwanie wyjścia skryptu;)

Teraz utwórzmy kod dla naszej bezpiecznej strony. To będzie całkiem proste.

Autoryzacja i rejestracja użytkownika

Udana autoryzacja.

Masz dostęp do bezpiecznej strony. Możesz wylogować się z systemu.

Jak widać, w bezpiecznym dokumencie umieszczamy tylko jeden plik - checkAuth.php. Wszystkie inne pliki są zawarte w innych skryptach. Dlatego nasz kod nie wygląda na nieporęczny. Zorganizowaliśmy rejestrację i autoryzację użytkowników. Teraz musisz zezwolić użytkownikom na wylogowanie. W tym celu stworzymy skrypt w pliku logout.php.

/ ** * Skrypt wylogowania użytkownika. Ponieważ użytkownicy są * autoryzowani poprzez sesje, ich nazwa użytkownika i hasło są przechowywane * w tablicy $_SESSION supergloban. Aby się wylogować*, po prostu zniszcz wartości * tablicy $ _SESSION ["login"] i $ _SESSION ["password"], po czym * przekierowujemy użytkownika na stronę autoryzacji * / // Koniecznie uruchom sesja session_start (); unset ($_SESSION ["logowanie"]); unset ($ _ SESSION ["hasło"]); nagłówek ("lokalizacja: login.php");

Skrypt do rejestracji, autoryzacji i weryfikacji użytkowników jest gotowy. Możesz go używać w domu, uzupełniać, zmieniać według własnych potrzeb. Jeśli masz jakieś pytania, możesz je zadać w komentarzach. Wszystkie wymienione tutaj pliki możesz pobrać samodzielnie, spakowane do jednego archiwum.

PS Zdaję sobie sprawę, że lepiej pisać kod obiektowy, wiem, że nie warto przekazywać i przechowywać hasła w postaci zwykłego tekstu, że informacje wprowadzone do bazy należy wcześniej sprawdzić. Wiem. Nie będę o tym tutaj mówić.

Wszystko dzieje się pod kontrolą PHP, a dane są przechowywane w bazie danych MySQL.

System wykorzystuje doskonały wysuwany panel opracowany przez Web-kreation.

Krok 1 - MySQL

Najpierw musimy stworzyć tabelę, która będzie zawierała wszystkie dane o zarejestrowanych użytkownikach. Kod żądania jest dostępny w pliku tabela.sql w archiwum źródłowym.

tabela.sql

--
- Struktura tabeli `tz_members`
--
UTWÓRZ TABELĘ `tz_members` (
`id` int (11) NOT NULL auto_increment,
`usr` varchar (32) sortuj utf8_unicode_ci NOT NULL default" ",
`pass` varchar (32) sortuj utf8_unicode_ci NOT NULL default" ",
`email` varchar (255) sortuj utf8_unicode_ci NOT NULL default" ",
`regIP` varchar (15) sortuj utf8_unicode_ci NOT NULL default" ",
`dt` datetime NOT NULL domyślnie" 0000-00-00 00:00:00 ",
KLUCZ GŁÓWNY ('id'),
UNIKALNY KLUCZ `usr` (`usr`)
) SILNIK = MyISAM DOMYŚLNY ZESTAW ZNAKÓW = UKŁADANIE utf8 = utf8_unicode_ci;

Definiujemy id jako liczbę całkowitą z opcją auto_inkrementacja- zostanie automatycznie przypisana każdemu nowemu zarejestrowanemu użytkownikowi. Również usr zdefiniowana jako unikalny klucz- tabela nie pozwala na istnienie dwóch rekordów o tej samej nazwie użytkownika.

Później użyjemy określonych właściwości podczas procesu rejestracji, gdy zostanie wprowadzona nazwa użytkownika.

Po utworzeniu tabeli należy w pliku uzupełnić zmienne służące do połączenia z bazą danych connect.php aby kod mógł działać na twoim serwerze.

Krok 2 — XHTML

Najpierw musimy osadzić formularz tworzenia stron internetowych na naszej stronie.

demo.php






Pasek suwaka JQuery


Rozwiązanie do rejestracji/logowania użytkowników do serwisu



if (! $ _ SESSION ["id"]):
// Jeśli nie jesteś jeszcze zarejestrowany
?>



Zaloguj się dla zarejestrowanych użytkowników


if ($ _ SESSION ["msg"] ["login-err"])
{
Echo "
". $ _ SESSION [" msg "] [" login-err "]."
";
unset ($ _ SESSION ["msg"] ["login-err"]);
// Spowoduje to wyświetlenie błędów logowania, jeśli występują
}
?>












Jeszcze nie zarejestrowany? Wprowadź swoje dane!


if ($ _ SESSION ["msg"] ["reg-err"])
{
Echo "
". $ _ SESSION [" msg "] [" reg-err "]."
";
unset ($ _ SESSION ["msg"] ["reg-err"]);
// Tutaj wyświetlamy błąd rejestracji, jeśli występuje
}
if ($ _ SESSION ["msg"] ["reg-sukces"])
{
Echo "
". $ _ SESSION [" msg "] [" reg-success "]."
";
unset ($ _ SESSION ["msg"] ["reg-sukces"]);
// Tutaj wyświetlamy komunikat o udanej rejestracji
}
?>








jeszcze:
// Jeśli jesteś zalogowany
?>

Dla zarejestrowanych użytkowników


Przykładowe dane


Przejdź do strony użytkownika

Wyloguj



endif;
// Zamknij konstrukcję IF-ELSE
?>






W kilku miejscach w kodzie znajdują się instrukcje PHP, które sprawdzają, czy $ _SESSION ["usr"] lub $ _SESSION ["id"]... Są one prawdziwe tylko wtedy, gdy odwiedzający stronę jest zarejestrowanym użytkownikiem, co pozwala nam wyświetlać ukryte treści zarejestrowanym odwiedzającym.

Po formularzu umieszczamy pozostałą zawartość strony.




Pasek suwaka JQuery


Proste zarządzanie rejestracją za pomocą PHP i jQuery




Jakiś tekst ...




W kodzie nie ma nic specjalnego.

Krok 3 - PHP

Teraz przekształcimy formularz w kompletny system rejestracji i logowania. Aby rozwiązać ten problem, będziesz potrzebować czegoś poza zwykłym kodem PHP. Cały kod jest podzielony na dwie części.

Jeśli planujesz coś dodać, najlepiej podzielić wszystko na kilka oddzielnych plików i dołączyć je w razie potrzeby. Takie podejście pomaga opracowywać duże projekty przy jednoczesnym ponownym użyciu kodu w różnych częściach witryny.

Tak to jest tutaj zaimplementowane.

demo.php

zdefiniuj ("INCLUDE_CHECK", prawda);
wymagają "connect.php";
wymagają "functions.php";
// Te dwa pliki można dołączyć tylko wtedy, gdy zdefiniowano INCLUDE_CHECK
nazwa_sesji ("tzLogin");
// Rozpocznij sesję
session_set_cookie_params (2 * 7 * 24 * 60 * 60);
// Określa czas życia ciasteczek na dwa tygodnie
start_sesji ();
if ($ _ SESSION ["id"] &&! isset ($ _ COOKIE ["tzRemember"]) &&! $ _ SESSION ["rememberMe"])
{
// Jeśli jesteś zalogowany, ale nie masz plików cookie tzRemember (zrestartuj przeglądarkę)
// i nie zaznaczyłeś checkboxa Zapamiętaj mnie:
$_SESJA = tablica ();
session_destroy ();
// Usuń sesję
}
if (isset ($ _ GET ["logoff"]))
{
$_SESJA = tablica ();
session_destroy ();
nagłówek ("Lokalizacja: demo.php");
Wyjście;
}
if ($ _ POST ["wyślij"] == "Zaloguj się")
{
// Sprawdź, czy żądanie pochodzi z formularza logowania
$ błąd = tablica ();
// Zapisz błąd
if (! $ _ POST ["nazwa użytkownika"] ||! $ _ POST ["hasło"])
$err = "Wszystkie pola muszą być wypełnione!";
if (! count ($ err))
{

$_POST ["hasło"] = mysql_real_escape_string ($_POST ["hasło"]);
$_POST ["rememberMe"] = (int) $_POST ["rememberMe"];
// Przygotuj wszystkie dane
$ row = mysql_fetch_assoc (mysql_query ("SELECT id, usr FROM tz_members WHERE usr =" ($ _ POST ["nazwa użytkownika")]) "AND pass =" ". md5 ($ _ POST [" hasło "])." "" )) ;
if ($ wiersz ["usr"])
{
// Jeśli wszystko jest w porządku, zaloguj się
$ _SESSION ["usr"] = $ wiersz ["usr"];
$ _SESSION ["id"] = $ wiersz ["id"];
$_SESSION ["zapamiętajMnie"] = $_POST ["zapamiętajMnie"];
// Zapisz trochę danych w sesji
setcookie ("tzRemember", $_POST ["rememberMe"]);
// Utwórz pliki cookie tzRemember
}
else $ err = "Niewłaściwa nazwa użytkownika lub / i hasło!";
}
jeśli ($ błąd)
$ _SESSION ["msg"] ["login-err"] = implodować ("
", $ błąd);
// Zapisz komunikat o błędzie w sesji
nagłówek ("Lokalizacja: demo.php");
Wyjście;
}

Tutaj ciasteczka tzPamiętaj pełni rolę elementu kontrolnego określającego, czy konieczne jest wylogowanie użytkownika, który nie zaznaczył pola wyboru „Zapamiętaj mnie”. Jeśli nie ma pliku cookie (z powodu ponownego uruchomienia przeglądarki), a odwiedzający nie zaznaczył opcji „zapamiętaj mnie”, usuwamy sesję.

Sama sesja pozostanie aktywna przez dwa tygodnie (zgodnie z parametrem) session_set_cookie_params).

A oto druga część demo.php.

Inaczej, jeśli ($ _ POST ["wyślij"] == "Zarejestruj")
{
// Jeśli żądanie zostanie wysłane z formularza rejestracyjnego
$ błąd = tablica ();
if (strlen ($ _ POST ["nazwa użytkownika"])<4 || strlen($_POST["username"])>32)
{
$err = "Nazwa użytkownika musi mieć od 3 do 32 znaków!";
}
if (preg_match ("/ [^ a-z0-9 \ - \ _ \.] + / i", $ _ POST ["nazwa użytkownika"]))
{
$ err = "Nazwa użytkownika zawiera nieprawidłowe znaki!";
}
if (! checkEmail ($ _ POST ["email"]))
{
$ err = "Twój adres e-mail jest nieprawidłowy!";
}
if (! count ($ err))
{
// Jeśli nie ma błędów
$ pass = substr (md5 ($ _ SERVER ["REMOTE_ADDR"]. microtime (). rand (1,100000)), 0,6);
// Wygeneruj losowe hasło
$_POST ["e-mail"] = mysql_real_escape_string ($_POST ["e-mail"]);
$_POST ["nazwa użytkownika"] = mysql_real_escape_string ($_POST ["nazwa użytkownika"]);
// przygotuj dane
mysql_query ("WSTAW DO tz_members (usr, pass, email, regIP, dt)
WARTOŚCI (
"". $ _ POST ["nazwa użytkownika"]. "",
"" .md5 ($ pass). "",
"". $ _ POST ["e-mail"]. "",
"". $_SERWER ["ZDALNY_ADDR"]. "",
TERAZ ()
)");
if (mysql_affected_rows ($ link) == 1)
{
Wyślij maila (" [e-mail chroniony] stronie internetowej",
$ _POST ["e-mail"],
„Demonstracja systemu rejestracji – generowanie haseł”,
"Twoje hasło:". $ Pass);
$ _SESSION ["msg"] ["reg-success"] = "Wysłaliśmy Ci e-mail z Twoim nowym hasłem!";
}
else $ err = "Ta nazwa użytkownika jest już używana!";
}
if (liczba ($ err))
{
$ _SESSION ["msg"] ["reg-err"] = implodować ("
", $ błąd);
}
nagłówek ("Lokalizacja: demo.php");
Wyjście;
}
$ skrypt = "";
jeśli ($ _ SESJA ["msg"])
{
// Skrypt wyświetla wyskakujący pasek na stronie ładowania
$ skrypt = "
";
}

Przechowuj wszystkie zdefiniowane błędy w tablicy $ błąd która jest później przypisywana do zmiennej $_SESJA... Dzięki temu dostęp do niego jest zachowany po przekierowaniu przeglądarki.

Niektóre witryny mogą otrzymać ostrzeżenie po przesłaniu formularza lub przy następnym odświeżeniu strony, że dane zostały już przesłane. Może to stanowić problem, ponieważ prowadzi do zduplikowanych rejestracji i niepotrzebnego obciążenia serwera.

Używamy funkcji nagłówka, aby zapobiec błędowi, przekierowując przeglądarkę na tę samą stronę. Spowoduje to zaktualizowanie widoku strony, a przeglądarka nie rozpoznaje go jako żądania formularza. W efekcie strona jest odświeżana i żadne dane nie są przesyłane.

Ale skoro używamy $_SESJA aby zapisać wszystkie znalezione błędy, bardzo ważne jest, aby zresetować wszystkie zmienne, gdy tylko błąd zostanie wyświetlony użytkownikowi. W przeciwnym razie będzie wyświetlany przy każdym wyświetleniu strony.

Używany jest również dodatkowy skrypt, który wyświetla panel na stronie pobierania, dzięki czemu wiadomość jest widoczna dla użytkownika.


Krok 4 - CSS

Panel wysuwany używa własnego pliku stylu. Dlatego musimy tylko stworzyć styl dla naszej strony.

demo.css

treść, h1, h2, h3, p, cytat, mały, formularz, dane wejściowe, ul, li, ol, etykieta (
/ * Zresetuj reguły * /
margines: 0px;
dopełnienie: 0px;
}
ciało (
kolor: # 555555;
rozmiar czcionki: 13px;
tło: #eeeeee;
rodzina czcionek: Arial, Helvetica, bezszeryfowa;
szerokość: 100%;
}
h1 (
rozmiar czcionki: 28px;
grubość czcionki: pogrubiona;
rodzina czcionek: „Trebuchet MS”, Arial, Helvetica, bezszeryfowy;
odstęp między literami: 1px;
}
h2 (
rodzina czcionek: „Arial Narrow”, Arial, Helvetica, bezszeryfowy;
rozmiar czcionki: 10px;
grubość czcionki: normalna;
odstęp między literami: 1px;
dopełnienie lewe: 2px;
transformacja tekstu: wielkie litery;
spacja: zawijana;
margines górny: 4px;
kolor: # 888888;
}
#główne p (
dopełnienie-dolne: 8px;
}
.jasny (
oba czyste;
}
#Główny (
szerokość: 800px;
/ * Środek na środku strony * /
margines: 60px auto;
}
.pojemnik (
margines górny: 20px;
tło: #FFFFFF;
obramowanie: 1px stałe # E0E0E0;
wypełnienie: 15px;
/ * Zaokrąglone rogi * /
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-obramowanie-promień: 20px;
promień obramowania: 20px;
}
.błąd (
kolor czerwony;
}
.sukces (
kolor: # 00CC00;
}
a, a: odwiedzone (
kolor: # 00BBFF;
dekoracja tekstu: brak;
zarys: brak;
}
a: najedź (
dekoracja tekstu: podkreślenie;
}
.tutorial-informacje (
wyrównanie tekstu: środek;
wypełnienie: 10px;
}

Krok 5 - jQuery

Wysuwany panel posiada własne jQuery.

demo.php








Pierwsza linia zawiera bibliotekę jQuery z Google CDN. Po tym następuje łatka IE6 PNG dla elementów przezroczystości. Następnie skrypt panelu jest dołączony

W razie potrzeby zmienna skryptowa $ wyświetla panel na stronie pobierania.

W tym artykule przeprowadzimy Cię krok po kroku przez proces rejestracji przy użyciu jQuery.

Jeśli rejestracja na Twojej stronie wiąże się z wypełnieniem kilkudziesięciu pól, nie jest zbyt racjonalne umieszczanie ich na jednej stronie. W końcu użytkownik jest bardzo leniwym stworzeniem i nie będzie chciał wypełniać wszystkich tych pól.

Alternatywną opcją jest podzielenie rejestracji na kilka etapów. Generuje to od razu wiele pozytywnych opinii – w końcu, rozpoczynając wykonywanie kroków, użytkownik najczęściej ma chęć dokończenia ich realizacji.

Logiczne jest również podzielenie rejestracji na logiczne bloki - dane kontaktowe, adres, dane osobowe i tak dalej.

W przypadku rejestracji krok po kroku nie ma absolutnie żadnego powodu, aby tworzyć kilka formularzy i osobno wysyłać dane na serwer. O wiele wygodniej jest umieścić wszystko w jednym formularzu, ale na każdym kroku pokazać użytkownikowi tylko określoną część formularza. Taka właśnie będzie logika w naszym przykładzie.

Oprócz logiki należy pamiętać, że na początku widoczny jest tylko link "Naprzód"/"Następny krok", ale na ostatnim kroku nie widać, ale widać "Z powrotem" i "Zameldować się".

Spójrzmy na sam przykład:

Strona

Krok 1

Zaloguj sie:

E-mail:

Hasło:

Krok 2

Nazwa:

Nazwisko:

Wiek:

Krok 3

Kraj:

Miasto:

Ulica:

Wstecz Następny krok

body (margin: 0;) / * Ogólne style się skończyły * / form (szerokość: 30%; margines: 0 auto;) form div.step (wyświetlanie: brak;) form div.step p.step (text-align: center ; font-size: 28px;) form div.step p () form div.step p input (float: right;) a.back (display: none;) form input (display: none;) a (kolor: # 006600 ; text-decoration: brak;) forma p.talign (text-align: center;)

Skrypt odpowiedzialny za przełączanie kroków umieścimy w js/steps_registration.js, nie zapomnij też zawrzeć biblioteki jQuery:

$ (dokument) .ready (funkcja () (// Poczekaj, aż strona załaduje var steps = $ ("formularz")). children (".step"); // znajdź wszystkie kroki formularza $ (steps) .show (); // pokaż pierwszy krok var current_step = 0; // ustaw bieżący krok $ ("a.next"). click (function () (// zdarzenie kliknięcia linku "Next step" jeśli (current_step == steps.length-2) (// sprawdź, czy następny krok będzie ostatnim $ (this) .hide (); // ukryj link "Następny krok" $ ("wejście formularza"). show (); // pokaż przycisk "Zarejestruj") $ (" a.back "). show (); // pokaż link "Wstecz" bieżący_krok ++; // zwiększ licznik bieżącej zmiany slajduStep (bieżący_krok) ; // zmiana kroku)); $ (" a.back "). click (funkcja ( ) (// zdarzenie kliknięcia małego obrazka if (current_step == 1) (// sprawdź, czy poprzedni krok będzie pierwszy $ (this) .hide ();// ukryj link "Wstecz") $ ("wejście formularza") .hide ();// ukryj przycisk "Zarejestruj" $ ("a.next"). show (); // pokaż link "Następny krok" current_step--; // zmniejsz licznik bieżącego slajdu changeStep (current_step); // zmiana kroku)); function changeStep (i) (// zmiana kroku funkcji $ (kroki) .hide (); // ukrycie wszystkich kroków $ (kroki [i]). pokaż (); // pokaż bieżący));

Nie będziemy tutaj pisać kodu do wysyłania php, ponieważ nie dotyczy to tej lekcji. Należy jedynie zaznaczyć, że pismo wysyłane jest na adres podany w pierwszym kroku formularza. W każdym razie możesz pobrać pliki demo i przekonać się sam.