jQuery & PHP: Logowanie lub rejestracja

Autor: Arkadiusz Tobiasz 23 grudnia 2010

Przeważnie użytkownik nie mający konta w serwisie nie lubi formularzy rejestracyjnych, które przenoszą go na kolejne podstrony serwisu. W tym wpisie postaram się pokazać w jaki sposób można załatwić kwestię logowania lub rejestracji za pomocą jednego formularza.

Na wstępie tworzymy bardzo prosty formularz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form method="post" action="login.php">
<div>
   <label>Adres e-mail</label> <br/>
   <input type="text" name="email"/><br />
   <input type="radio" name="choose" id="login" checked="checked"/> Mam już konto <br />
   <input type="radio" name="choose" id="signup"/> Chcę założyć konto!<br />
</div>
<div id="login_block">
   <label>Hasło</label><br />
   <input type="password" name="password" id="password"/><br/>
   <input type="submit" value=" Zaloguj "/>
</div>
<div id="signup_block" style="display:none">
   <label>Wybierz hasło</label><br/>
   <input type="password" name="newpassword" id="newpassword" /><br/>
   <input type="submit" value=" Zarejestruj"/>
</div>
</form>

Jak widzisz domyślnie wyświetlany jest formularz dla logowania, czyli div o id login_block. Natomiast div o id signup_block domyślnie jest ukryty. Będziemy podmieniać te dwa divy w momencie zaznaczenia opcji „Chcę założyć konto!”

W tym celu wykorzystamy jQuery i w sekcji head naszego skryptu umieszczamy kod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   // funkcja wywoływana w momencie zaznaczenia elementu o id=signup, w tym przypadku inputa typu radio
   $('#signup').click(function(){
      $('#password').val(''); // czyścimy zawartosć inputa o id=password
      $('#login_block').hide(); // chowamy diva z logowaniem
      $('#signup_block').show(); // pokazujemy diva z rejestracją
   });
   // funkcja wywoływana w momencie zaznaczenia elementu o id=login, w tym przypadku inputa typu radio
   $('#login').click(function(){
      $('#newpassword').val(''); // czyścimy zwartośc inputa o id=newpassword
      $('#signup_block').hide(); // chowamy diva z rejestracją
      $('#login_block').show(); // pokazujemy diva z logowaniem
   });
});
</script>

Pozostaje jeszcze kod pliku login.php, do którego wysyłamy dane z formularza:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
include("db.php"); // plik odpowiedzialny za łączenie z bazą danych
if($_POST) {
   // przypisujemy dane z formularza do zmiennych
   $email = $_POST['email'];
   $password = ($_POST['password'];
   $newpassword = $_POST['newpassword'];
   // w przypadku podania adresu e-mail i hasła do konta sprawdzamy czy dane się zgadzają
   if(!empty($password) && !empty($email)) {
      $sql = mysql_query("SELECT user_id FROM users WHERE email='".$email."' AND password='".md5($password)."'");
      echo "Zalogowano poprawnie";
   } elseif(!empty($newpassword) && !empty($email)) {
      $sql = mysql_query("INSERT INTO users (user_id, email, password) VALUES (NULL, '".$email."', '".md5($newpassword)."')");
      echo "Konto zostało zarejestrowane";
   }
}
?>

Standardowo demo znajdziesz tutaj.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]