close
18123159230_30bcce3d03_o

W tej części kursu pt. “Tworzenie gry przeglądarkowej” napiszemy klasę UserManager, która będzie realizowała rejestracje i logowanie użytkownika. Dodamy też proste zabezpieczenie przed wejściem na strony gry bez zalogowania. Zaczynajmy.

Na początku przejdźmy do bazy danych i usuńmy tabelę users, która stworzyliśmy w trzeciej lekcji. Wymaga sporo zmian i najprościej będzie stworzyć ją od nowa. Możemy to zrobić klikając na nazwę bazy w menu po lewej stronie. Wyświetli się lista tabel:

lista tabel

 

Klikamy usuń.

zniszcz table

Potwierdzamy usunięcie klikając OK.

Możemy teraz przejść do stworzenia nowej tabeli.

nowa_tabela

Możesz kliknąć na obrazek aby go powiększyć. Zmieniły się przede wszystkim dopuszczalne długości poszczególnych kolumn. Kolumna username uzyskała indeks UNIQUE.

Zanim przejdziemy do pisania klas zmieńmy jedną rzecz w pliku index.php. Interesuje nas ta linijka:

Chcemy aby domyślną stroną było home.library.php a nie statystyki.library.php ponieważ jest to strona na której będzie gra. Na stronie home będzie logowanie i rejestracja, więc chcemy tam kierować ruch.

 

Przejdźmy teraz do klasy ModuleLoader i dodajmy moduły, które wyświetlą formularz rejestracji i logowania. Poniżej case ranking dodaj następujący kod:

Możemy zauważyć że formularz rejestracji jest całkiem inny niż logowania. Jest tak dlatego, że na formularzu rejestracji przeprowadzimy walidację a na formularzu logowania nie.

Wypełnijmy teraz plik home.library.php.

Plik home.library.php:

Na samym początku sprawdzamy czy ustawiona jest sesja. Jeśli jest to znaczy że użytkownik jest zalogowany i wysyłamy go do gry – na stronę ze statystykami.

Zanim zajmiemy się walidacją formularza, dodajmy kilka reguł CSS, które ostylują formularze. W pliku style.css dodaj następujące reguły:

Są to bardzo proste reguły i myślę, że nie trzeba ich tłumaczyć. Nie ma żadnego znaczenia jakie te reguły będą – możesz dodać jakie chcesz. 🙂

Szczególnie ważne są cztery ostatnie reguły. Skorzystamy z nich przy walidacji formularza, którą teraz napiszemy. Wypełnijmy plik wlasny.js.

Plik wlasny.js:

Jest to bardzo prosta walidacja formularza. Tłumaczyłem ją w tym poście.

Możemy przejść teraz do napisania klasy UserManager. W folderze Managers utwórz plik UserManager.class.php.

Plik UserManager.class.php:

To cała klasa obsługująca logowanie i rejestrację. Całość zawiera komentarze, które tłumaczą co się dzieje. Za rejestrację odpowiada metoda CreateUser. Reszta metod dotyczy logowania.

Przejdźmy teraz do zastosowania. W klasie ModuleLoader możemy zobaczyć że formularz dotyczący rejestracji zostaje wysłany pod adres register a formularz logowanie pod adres login. Musimy więc utworzyć dwa pliki – register.library.php oraz login.library.php. Stwórz te pliki w folderze LIBRARY.

Plik register.library.php:

W pierwszym if przeprowadzamy podstawową walidację dotyczącą długości pól oraz poprawności emaila. Zawsze powinno się przeprowadzać walidację również po stronie serwera, ponieważ walidację w javascript można łatwo ominąć (np. wyłączając javascript). Następnie przesyłamy tablicę $_POST do metody CreateUser. Jeśli metoda zwróci true  to logujemy użytkownika i następuje przekierowanie do gry. Jeśli nie to kończymy działanie skryptu. W ramach ćwiczeń, możesz zrobić w tym miejscu przekierowanie na prostą stronę błędu.

Przejdźmy teraz do logowania.

Plik login.library.php:

Na początku sprawdzamy że login i hasło zostały w ogóle wysłane. Jeśli tak to wysyłamy te dane do metody LogIn. Jeśli ta metoda zwróci true to wysyłamy użytkownika na stronę gry. Jeśli nie to kończymy pracę skryptu.

Możemy teraz napisać plik odpowiadający za wylogowanie użytkownika. W folderze LIBRARY utwórz plik logout.library.php.

Plik logout.library.php:

 

Jest to bardzo prosty plik, który sprawdza czy sesja jest ustawiona. Jeśli tak to zastosowana zostaje motoda LogOut, która niszczy sesję. Musimy teraz dodać te strony do klasy MainPage. Przejdź do pliku MainPage.class.php i pod ostatnim case dodaj poniższy kod:

Teraz logowanie i rejestracja działają 🙂

Musimy teraz zabezpieczyć strony gry (statystyki,walka,sklep,ranking ranking) przed niezalogowanymi użytkownikami. W plikach wewnątrz folderu LIBRARY, które odpowiadają za ładowanie tych stron dodaj na początku tą instrukcję:

Nie pozwoli to niezalogowanym użytkownikom wejść na strony gry. Zablokujmy teraz wyświetlanie menu dla niezalogowanych użytkowników (na stronie home). Zmieńmy case navbar w klasie ModuleLoader.

Zmienne button oraz menu przyjmują treść tylko wtedy gdy użytkownik jest zalogowany. Zmienna menu przechowuje wcześniejsze odnośniki i jeden nowy – Wylogowanie, który niszczy sesję. Zmienna button to przycisk, który pojawiał się przy niższych rozdzielczościach.

Wszystko gotowe. Już od kolejnej lekcji zaczniemy pisać komponenty gry.

Przerabiany przykład możesz zobaczyć tutaj.

Paczkę możesz pobrać tutaj.

Tags : jquerymysqlphptworzenie gry przeglądarkowej
  • Lukasz Kowalski

    Cześć. Podmieniłem tylko w config.php db_username na root oraz ustawilem brak hasla i rejestracja dziala, dodalem kilku uzytkownikow bez problemu na localhost;p Natomiast od okolo 2h mam problem z logowaniem… “Nieprawidłowa nazwa użytkownika lub hasło.” Mimo iz ten wpis byl umieszczony kilka msc temu to moze jest jeszcze szansa na odp? 😛

    • Cześć,

      dodajesz użytkowników przez formularz rejestracyjny czy bezpośrednio w bazie danych? Hasło jest szyfrowane podczas rejestracji i odszyfrowane podczas logowania. Jeśli dodasz użytkowników bezpośrednio w bazie danych, to hasło nigdy nie będzie prawidłowe 🙂

  • Piotr

    Przy rejestracji wywala błąd w userManager.class.php w 83linijce

  • Piotr

    uporałem się z podawaniem hasla do localhost zamieniając w komentarz w userManager.class.php od 38 do 46 linijki ale teraz próbuje się zalogować do konta które jest w phpmyadmin zrobione i wyświetla “Nieprawidłowa nazwa użytkownika lub hasło.” …

  • Piotr

    Używam XAMP-a i tam jak kiedyś robiłem system rejestracji tylko na localhost to nie używam hasła, tak też teraz usunąłem hasło z fragmentu “define(‘DB_PW’, ”);” ale wyskakuje http://scr.hu/2lq6/iei47

  • Piotr
    • Cześć.

      Podmieniłeś dane dostępowe do bazy danych w pliku config.php?

  • Arkadiusz

    Bardzo ciekawy kurs, doszedłem do tego momentu i crash. Prawdopodobnie metoda lub jej prywatność sypie system logowania . Myślałem że to wina iż przepisywalem kod ale pobrałam paczkę i dalej to samo. Cały czas wyskakuje błąd z Niepoprawnym użytkownikiem lub haslem. Czyli nie może pobrać dokładnie danych prawdopodobnie z protected od isExist lub getIdByUsername . Pozdrawiam

    • Cześć 🙂

      Po pobraniu paczki podmieniłeś dane dostępu do bazy danych w pliku config.php?

      Pozdrawiam.