Na zegarku jest 1:19, lany poniedziałek.Dziś zajmiemy się panelem logowania opartym o dane jednego użytkownika i sesje.
Kod będę umieszczać kawałkami, opisując działanie skryptu. A więc zaczynamy.
Skrypt będzie się opierał o jeden plik php. Tworzymy pusty plik w naszym edytorze i nadajemy mu kodowanie UTF-8 bez BOM.
- Kod: Zaznacz cały
<?php //1
session_start(); //2
// edytuj dane do logowania
$login = 'admin'; //5
$haslo = 'haslo'; //6
Pierwszej linijki chyba nikomu nie muszę tłumaczyć. Zaczniemy od drugiej linijki. Zaczynamy od otwarcia sesji. Musimy pamiętać, że sesje otwieramy na samym
początku naszego skryptu i nie może być poprzedzona żadnymi innymi znakami. Linijka piąta i szósta to nasze dane do logowania, z których będziemy korzystać.
Należy je zmienić na własne, unikalne i nie znane nikomu hasła. Dzięki nim będziemy mogli zalogować się do panelu.
- Kod: Zaznacz cały
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Panel Logowania</title>
<meta http-equiv="content-language" content="pl" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>';
Tworzymy nagłówek, head oraz otwieramy znacznik body naszej strony. Teraz przejdziemy do serca naszego skryptu. Cały skrypt będzie miał kilka zadań. Pierwszym
z nich będzie wyświetlenie formularzu logowania, sprawdzenie poprawności wpisanych danych i wylogowanie. Zaczniemy trochę od tyłu, gdyż najpierw
zajmiemy siÄ™ wylogowywaniem.
- Kod: Zaznacz cały
// wylogowywanie z panelu
if ($_GET['s'] == 'wyloguj'){
unset($_SESSION['logowanie']);
echo 'Zostałeś pomyślnie wylogowany. Przejdź do <a href="index.php">logowania</a>.';
}
Wylogowywanie będzie odbywało się poprzez dodawanie do adresu strony, w naszym przypadku index.php, kilku znaków a dokładniej ?s=wyloguj i właśnie tą sytuację wychwytują powyższe linijki. Cała zabawa polega na tym, że musimy usunąć sesję którą przypiszemy podczas logowania, ale o tym poniżej.
- Kod: Zaznacz cały
// wyświetlanie zawartości panelu
elseif ($_SESSION['logowanie'] == 'zalogowany'){
echo 'Witaj w panelu. <a href="index.php?s=wyloguj">Wyloguj</a>.';
}
Drugą opcją, którą będzie rozpatrywał nasz skrypt będzie sytuacja, w której użytkownik został już zalogowany. Nastąpi wyświetlenie zawartości panelu. Jak
widzimy sesja logowanie została porównana do wartości zalogowany, jeśli sesja przechowuje wartość zalogowany, to nastąpi wyświetlenie zawartości panelu. W
naszym wypadku będzie to treść Witaj w panelu. oraz link do wylogowania.
- Kod: Zaznacz cały
// logowanie do panelu
elseif((!empty($_POST['login'])) && (!empty($_POST['haslo']))){
//sprawdzania poprawności danych
if(($_POST['login'] == $login) && ($_POST['haslo'] == $haslo)){
$_SESSION['logowanie'] = 'zalogowany';
echo 'Witaj w panelu. <a href="index.php?s=wyloguj">Wyloguj</a>.';
}
// wyświetlanie komunikatu w przypadku błędnych danych
else{
echo 'Podane błędne dane. <a href="javascript:history.back()">Cofnij</a>.';
}
}
Przechodzimy teraz do walidacji danych do logowania. Sprawdzimy czy wpisane w formularzu dane sÄ… takie same jak te podane na samym poczÄ…tku naszego skryptu.
Jeśli będą poprawne przypiszemy dla sesji logowanie wartość zalogowany i wyświetlimy zawartość naszego panelu. Jeśli dane będą błędne wyświetli się komunikat
o niepoprawności danych i link do cofnięcia.
- Kod: Zaznacz cały
// formularz logowania
else{
echo '<form action="index.php" method="post">
<table class="logowanie">
<tbody>
<tr>
<td colspan="2">Panel Logowania</td>
</tr>
<tr>
<td>Login: </td>
<td><input type="text" name="login" /></td>
</tr>
<tr>
<td>Hasło: </td>
<td><input type="password" name="haslo" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Wyślij" /></td>
</tr>
</tbody>
</table>
</form>';
}
Wyświetlamy ostatnią część naszego panelu, a mianowicie formularz logowania. Musimy pamiętać, żeby wartości name były takie same jak wartości w $_POST w poprzednim
kodzie.
- Kod: Zaznacz cały
?>
</body>
</html>
Na sam koniec pozostaje nam zamknięcie kodu PHP i znaczników html.
Demo (admin/haslo)
Cały kod
- Kod: Zaznacz cały
<?php
session_start();
// dane do logowania
$login = 'admin';
$haslo = 'haslo';
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Panel Logowania</title>
<meta http-equiv="content-language" content="pl" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>';
// wylogowywanie z panelu administracyjnego
if ($_GET['s'] == 'wyloguj'){
unset($_SESSION['logowanie']);
echo 'Zostałeś pomyślnie wylogowany. Przejdź do <a href="index.php">logowania</a>.';
}
// wyświetlanie zawartości panelu administracyjnego
elseif ($_SESSION['logowanie'] == 'zalogowany'){
echo 'Witaj w panelu. <a href="index.php?s=wyloguj">Wyloguj</a>.';
}
// logowanie do panelu administracyjnego
elseif((!empty($_POST['login'])) && (!empty($_POST['haslo']))){
//sprawdzania poprawności danych
if(($_POST['login'] == $login) && ($_POST['haslo'] == $haslo)){
$_SESSION['logowanie'] = 'zalogowany';
echo 'Witaj w panelu. <a href="index.php?s=wyloguj">Wyloguj</a>.';
}
// wyświetlanie komunikatu w przypadku błędnych danych
else{
echo 'Podane błędne dane. <a href="javascript:history.back()">Cofnij</a>.';
}
}
// formularz logowania
else{
echo '<form action="index.php" method="post">
<table class="logowanie">
<tbody>
<tr>
<td colspan="2">Panel Logowania</td>
</tr>
<tr>
<td>Login: </td>
<td><input type="text" name="login" /></td>
</tr>
<tr>
<td>Hasło: </td>
<td><input type="password" name="haslo" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Wyślij" /></td>
</tr>
</tbody>
</table>
</form>';
}
?>
</body>
</html>
Artykuł jest moją własnością i zakazuje wykorzystywania go bez pytania na innych stronach lub forach.
