W tym poradniku spróbujemy stworzyć prosty system logowania z możliwością rejestracji. Wykorzystamy po raz pierwszy w naszych poradnikach bazę MySQL, w której będziemy przechowywać dane naszych użytkowników. Będzie to prosty system który pozwoli nam dodać użytkownika do bazy danych bezpośrednio z formularza oraz zalogować się na niego.
Serwer HTTP oraz MySQL zainstalowaliśmy w jednym z wcześniejszych poradników więc jak ktoś jeszcze tego nie zrobił to zapraszam do nadrobienie zaległości. Do zarządzania serwerem MySQL będziemy używali phpMyAdmin (zainstalowaliśmy go również razem z XAMPP’em), pozwoli on nam w prosty sposób tworzyć bazy danych, dodawać tabele itp. Na samym początku chce również dodać, że w tym poradniku nie będziemy się za dużo skupiać na stylach CSS, użyjemy Bootstrapa, jeśli ktoś chce bardzie się zagłębić w temat to polecam zobaczyć dokumentacje. Więcej o bootstrap’ie dowiemy się w kolejnych poradnikach.
A więc zaczynajmy. Na samym początku przygotujmy sobie bazę danych, w której będziemy przechowywać wszystkich naszych użytkowników. Otwórzmy w przeglądarce localhost/phpmyadmin powinniśmy zobaczyć stronę, która pozwoli nam w prosty sposób zarządzać serwerem MySQL. Stwórzmy nową bazę tak, jak na obrazku poniżej:
Wewnątrz nowo utworzonej bazy danych, stwórzmy tabelę users, która będzie zawierała wszystkie dane o naszych użytkownikach tj.:
- id – numer porządkowy użytkownika w bazie danych, unikalny, typ danych integer (liczba), Auto Increment (Automatycznie dodawana kolejna liczba)
- username – nazwa użytkownika, typ danych Varchar (tekst), uniklany
- password – hasło, typ danych Varchar (tekst)
- first_name – imię, typ danych Varchar (tekst)
- last_name – nazwisko, typ danych Varchar (tekst)
- email – adres email, typ danych Varchar (tekst), unikalny
Jeśli chodzi o MySQL to na razie to wszystko. Przejdźmy do tworzenia kodu, który pozwoli nam dodawać, rejestrować nowych użytkowników oraz logować się na zarejestrowanych już użytkowników.
A więc zacznijmy tworzyć naszą stronę. Na sam początek stwórzmy sobie katalog portal, w którym będą leżały wszystkie plik w folderze xampp/htdocs, a wewnątrz plik index.php, będzie on zawsze ładowany podczas wejścia na naszą stronę:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <title>Strona logowania</title> </head> <body> <?php //Rozpoczynamy sessje session_start(); // Sprawdzamy czy użytkownik jest zalogowany if (!empty($_SESSION['user'])) { // Sprawdzamy czy użytkownik nie wcisnął przyciska "Wyloguj", sprawdzamy czy istnieje parametr logout w url if (isset($_GET['logout'])) { // Jeśli tak to usuwamy użytkownika z sesji unset($_SESSION['user']); // Ładujemy na nowo plik index.php header('Location: index.php'); } // Wyświetlamy treść dostępną do zalogowanych użytkowników $user = $_SESSION['user']; echo ' <div id="loggedin"> Jesteś zalogowany jako <b>'.$user['first_name'].' '.$user['last_name'].' </b> <br /><br /> <a class="btn btn-default" href="index.php?logout=1">Wyloguj się</a> </div> '; } else { // Jeżeli użytkownik nie jest zalogowany wysyłamy go do login.php require_once __DIR__. 'login.php'; } ?> </body> </html> |
Oraz plik config.php który będzie zawierał wszystkie ustawienia tj. dane dostępowe do serwera MySQL itd.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php // Zmienne globane zawierające dane logowania naszej bazy danych // Adres serwera MySQL const DB_HOST = 'localhost'; // Nazwa użytkownika const DB_USER = 'root'; // Hasło użytkownika const DB_PASS = ''; // Nazwa bazy danych const DB_NAME = 'portal'; ?> |
Plik login.php, który będzie odpowiadał za logowanie.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <title>Strona logowania</title> </head> <body> <div id="login-form"> <h1>Zaloguj się</h1> <!-- Formularz logowania --> <form class="login-form" action="index.php" method="post"> <div class="form-group"> <label for="usernameInput">Login:</label> <input class="form-control" id="usernameInput" type="text" name="username" /><br /> </div> <div class="form-group"> <label for="passwordInput">Hasło:</label> <input class="form-control" type="password" name="password" /><br /> </div> <input type="submit" name="submit" class="btn btn-default" value="Login" /> </form> <p>Nie masz konta? <a href="register.php">Zarejstruj się</a> </p> <?php // Sprawdzamy czy formularz został wysłany if (isset($_POST['submit'])){ // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . "config.php"; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } // Pobieramy nazwe użytkownika i hasło do zmiennej $username = $_POST['username']; // hashujemy hasło, dla bespieczeństwa przechowywuje się go w bazie danych zakryptowane przez algorytm sha1 $password = sha1($_POST['password']); // Sprawdzamy czy w bazie istnieje użytkownik z loginem i hasłem takim jaki został podany w formularzu $sql = "SELECT id, username, first_name, last_name, email from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1"; $result = $mysqli->query($sql); // Jeżeli zapytanie zwróciło nam 0 rekordów, to znaczy że w bazie danych nie ma użytkownika o podanym loginie i haśle if ($result->num_rows === 0) { // Wyświetlamy wiadomośc na ekranie echo '<p class="red">Zły login/hasło!</p>'; } else { // A jeżeli zapytanie zwróciło nam użytkownika, to znaczy że podany login i hasło pasują do użytkownika w bazie danych // Zapisujemy id użytkownika do sesji co pozwoli nam potem sprawdzić czy użytkownik jest zalogowany $user = $result->fetch_array(); $_SESSION['user'] = $user; // i na koniec przekierowywujemy użytkownika z powrotem do pliku index.php header('Location: index.php'); } } ?> </div> </body> </html> |
Teraz zajmijmy się rejestracją nowych użytkowników, stwórzmy plik register.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <title>Formularz rejestracji</title> </head> <body> <div id="register-form"> <h1>Rejstracja</h1> <form action="<?=$_SERVER['PHP_SELF']?>" method="post"> <div class="form-group"> <label for="usernameInput">Login:</label> <input id="usernameInput" class="form-control" type="text" name="username" /> </div> <div class="form-group"> <label for="passwordInput">Hasło:</label> <input id="passwordInput" class="form-control" type="password" name="password" /> </div> <div class="form-group"> <label for="firstnameInput">Imię:</label> <input id="firstnameInput" class="form-control" type="text" name="first_name" /> </div> <div class="form-group"> <label for="lastnameInput">Nazwisko:</label> <input id="lastnameInput" class="form-control" type="text" name="last_name" /> </div> <div class="form-group"> <label for="emailInput">Email:</label> <input id="emailInput" class="form-control" type="text" name="email" /> </div> <input type="submit" class="btn btn-default" name="submit" value="Register" /> </form> <?php // Sprawdzamy czy użytkownik kliknął "Register" if (isset($_POST['submit'])) { // Jeśli tak to // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . 'config.php'; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p class='red'>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } // Pobieramy pobieramy dane z formularza do zmienych $username = $_POST['username']; $password = sha1($_POST['password']); $first_name = $_POST['first_name']; $last_name = $_POST['last_name']; $email = $_POST['email']; // Sprawdzamy czy hasło, login i email nie są puste if (empty($username) || empty($password) || empty($email)) { echo '<p class="red">Login, hasło i email nie mogą być puste</p>'; } else { $isLoginTaken = false; $isEmailTaken = false; // Sprawdzamy czy użytkownik z taki loginem już istnieje $result = $mysqli->query("SELECT username from users WHERE username = '{$username}' LIMIT 1"); if ($result->num_rows === 1) { $isLoginTaken = true; } // Sprawdzamy czy użytkownik z takim emailem już nie istnieje $result = $mysqli->query("SELECT email from users WHERE email = '{$email}' LIMIT 1"); if ($result->num_rows === 1) { $isEmailTaken = true; } if ($isLoginTaken && $isEmailTaken) { // Wyświetlamy błąd że email i login już istnieją w bazie danych echo '<p class="red">Konto z podaną nazwą użytkownika i adresem email już istnieje!</p>'; } elseif($isLoginTaken) { // Wyświetlamy błąd że login już istnieje w bazie danych echo '<p class="red">Nazwa użytkownika jest zajęta!</p>'; } elseif ($isEmailTaken) { // Wyświetlamy błąd że email już istnieje w bazie danych echo '<p class="red">Konto z podanym adresem email już istnieje!</p>'; } else { // Jeżeli dane przeszły przez nasza walidacje dodajemy użytkownika do bazy danych $sql = "INSERT INTO `users` (`id`, `username`, `password`, `first_name`, `last_name`, `email`) VALUES (NULL, '{$username}', '{$password}', '{$first_name}', '{$last_name}', '{$email}')"; if ($mysqli->query($sql)) { // Jeżeli nie było żadnych błedów przekierowywujemy użytkownika do formularza logowania header('Location: index.php'); } else { // Jeśli coś poszło nie tak i wystąpiły jakieś błędy wyświetlamy je na ekranie echo "<p class='red' '>Wystąpił błąd podczas dodawania użytkownika: {$mysqli->connect_error}</p>"; exit(); } } } } ?> </div> </body> </html> |
A na sam koniec stwórzmy plik ze stylami CSS
|
1 2 3 4 5 6 7 8 9 10 |
#login-form, #register-form, #loggedin{ margin: 30px auto; width: 20%; border: 3px solid green; padding: 30px; } .red { color: red; } |
To wszystko jeżeli chodzi o sam system logowania i rejestracji. W kolejnych poradnikach postaramy się go bardziej rozbudować oraz dodać funkcjonalności dostępne tylko dla zalogowanych użytkowników. Jeśli macie jakieś pomysły albo problemy to piszcie w komentarzach. Możecie też sami spróbować rozbudować według własnych pomysłów.
[caldera_form id=”CF5994b000b673f”]
61
Wow, nie sądziłem, że taki system logowania może być tak prosty w wykonaniu. Fajny poradnik
Bardzo fajny poradnik. Te zagadnienia wydają się być ciekawe i na pewno niejednego zachęcą do dalszej nauki 🙂
Fajny i prosty system, ale może w następnych poradnikach można dać coś na “zadanie domowe”.
W drugiej części poradnika, który jest kontynuacją tego poradnika, daliśmy właśnie takie zadanie domowe. Ciekawe, czy ktoś wysili się na tyle, żeby do swojego projektu dodać również komentarze 🙂