Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Logowanie za pomocą PHP oraz AJAX – dynamiczny skrypt


AJAX i PHP Dynamiczne strony internetowe w dzisiejszych czasach to nic nowego. Witryny przepełnione są ułatwiającymi nawigację na stronie skryptami JavaScript oraz biblioteki jQuery. Logowanie za pomocą PHP oraz AJAX to jeden z wielu przykładów jak można wykorzystać AJAX’a. Innym przykładem wykorzystania tej technologii może być dodawanie lub usuwanie danych z bazy danych.


Kod na Githubie

Przedstawienie kodu:

1. index.html

Ważne są identyfikatory dla inputów – dzięki nim będziemy wiedzieli co wpisał użytkownik.
W tym pustym divie za pomocą jQuery będziemy wyświetlać komunikaty jakie wygenerował kod PHP.

Pod koniec pliku zostało załadowane jQuery oraz plik script.js z kodem odpowiadającym za dynamiczne sprawdzanie pól formularza.

2. Script.js

Temu kodu przyjrzymy się nieco dokładniej.
Na początku stworzyłem funkcję redirect. Jest ona bardzo prosta, przyjmuje dwa argumenty:
I. to – gdzie ma zostać przekierowany użytkownik,
II. delay – czas po jakim ma zostać wywołane przekierowanie.

Stworzyłem ją aby nie powtarzać dwa razy kodu w dalszej części skryptu.

DIV możemy utworzyć za pomocą:

Kod doda pustego diva tuż przed formularzem.

Następnie mamy:

Ta linijka sprawdza, czy formularz został wysłany. Dzięki niej skrypt wie skąd wziąć dane do zmiennych email i password. Argument e będzie potrzebny przy wywołaniu funkcji e.preventDefault();.

Potem pobieramy dane z formularza:

Tworzymy dwie zmienne: email oraz password i dzięki .val() pobieramy wartość (value) z każdego pola formularza. Trzecia zmienna string jedynie tworzy ciąg znaków jaki ma zostać wykorzystany przez AJAX’a.

„Serce” skryptu:

Do zmiennej request przypisujemy to co zwróci mam AJAX.
Wewnątrz funkcji ustaliliśmy kilka warunków:
I. URL – gdzie jest skrypt PHP,
II. type – jaką metodą ma zostać wysłane zapytanie,
III. datatype – format w jakim zostaną zwrócone dane z poziomu PHP,
IV. data – ciąg znaków jaki ma zostać wysłany do skryptu PHP

Cała reszta 🙂

request.done(function(html) {}); – Zapis sprawdzający czy skrypt wykonał się poprawnie.
Z racji, że PHP zwróciło dane w formacie JSON, trzeba dane te sparsować. Służy do tego funckaj $.parseJSON. Argument html to właśnie ciąg zwrócony przez PHP. Po sparsowaniu ciągu z poziomu JavaScript wynik zostaje zapisany do zmiennej array.

– array[0] zawiera wartość boolean’owską: true lub false i w naszym skrypcie określa czy jaki rodzaj komunikatu wyświetlić: success czy error,
– array[1] zawiera treść komunikatu.

Jeśli array[0] ma wartość true do div’a o id #info zostanie dodana klasa alert alert-success oraz wyświetlony zostanie tekst(array[1])
A następnie po 1s użytkownik zostanie przekierowany na stronę my_page.php

W przeciwnym razie:

Jeśli array[0] ma wartość false, alert będzie typu error, czyli coś poszło nie tak i zostanie wyświetlony komunikat o będzie z tablicy array[1].

3.checker.php

Tu są przetwarzane dane pochodzące z formularza. Na początku istnieje tablica $textMessages, która zawiera komunikaty, które skrypt zwraca. Następnie zdefiniowałem dwie zmienne: $correctEmail i $correctPassword.
UWAGA! To dane stworzone jedynie na potrzeby tego skryptu. W rzeczywistości powinny pochodzić i z bezpiecznego źródła, np. bazy danych.

Tego kawałka chyba nie trzeba tłumaczyć 🙂

Walidacja danych:

Skrypt po kolei sprawdza warunki. Jeżeli coś pójdzie nie tak zapisuje informacje do tablicy $array. Tablica ta zawiera dwa klucze i dwie wartości. Kluczami są liczby: 0 i 1 a wartościami kolejno true/false oraz informacja.

Uwaga! Zwróć uwagę na $_SERVER[‚HTTP_HOST’]. Aby skrypt dział poprawnie w miejsce 127.0.0.1 wpisz nazwę twojej strony! Jeśli działasz na localhoscie, ta linijka nie powinna sprawiać problemów.

Jeśli wszystko przebiegnie sprawie wykona się skrypt w instrukcji else:

Zostaną stworzone dwie zmienne sesyjne oraz w tablicy array będzie informacja, że logowanie przebiegło pomyślnie.

Na samym końcu:

Zamieniamy tablicę $array w format JSON aby można było użyć tej tablicy w skrypcie JavaScript.

4. Plik my_page.php

Prosty skrypt wyświetlający dane o użytkowniku pochodząc z sesji. Skrypt sprawdza czy istnieje sesja, jeśli nie to pojawia się komunikat i zostaniemy przekierowani do pliku index.html.

Pliki style.css oraz jquery.js z oczywistych względów nie zostaną już zaprezentowane 🙂

  • „pusty div( konieczna konieczność 🙂 )”
    a udowodnić Ci, że nie? 😉 wstawiasz przy inicjalizacji skryptu. i raczej przed formularzem a nie po.
    poza tym: pusty action formularza raczej nie pomoże userom, u których nie zadziała JS
    $(document).ready nie jest potrzebny, gdy skrypt jest po elemencie, który wykorzystuje
    a od htmlspecialchars jest fajne rozwiązanie: array_map
    Dzięki za pozdrowienia i nawzajem 😉

    • Dzięki za wypowiedź na temat skryptu. Zmiany można zobaczyć tutaj.

  • $(‚.form’).before(”);

    – ambitniejsza część kodu. najpierw identyfikujesz formy po klasie, a następnie wstawiasz tam id, które może być jedno w całym dokumencie.

  • Dopiero teraz zauważyłem, że z jakiegoś powodu zostałem pozdrowiony. Dzięki! 🙂

  • bla

    czy to komuś w ogóle działałoo ??

    co to znaczy ” [false,null] ” ….. ze chyba nie wysłało formularza a dlaczego powie Mi Ktoś ??

    • Najlepiej za pomocą funkcji var_dump() sprawdzać czy skrypt działa prawidłowo w twoim środowisku. Co do [false,null], co jest gdzie pojawia się ten błąd?

  • Bartosz

    A więc przykład w Skryptotece nie działa, tak jak i mój własny skrypt – wyrzuca automatycznie do checker.php. Proszę o pomoc.