Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Logowanie oraz rejestracja w Ajaxie

Salur

Przez Salur
w Niezbędnik Programisty - Archiwum

Rekomendowane odpowiedzi

Salur Znawca

Salur

Opublikowano
Znawca

Salur

Opublikowano

Uszanowanko!

 

Ostatnio mało poradników widzę w dziale, aby nie było tak cicho stwierdziłem że coś małego napiszę. Nie widziałem co, więc na początek logowanie bez odświeżania strony oraz rejestrację za pomocą AJAX. Nie jest to coś dużego, ale zapewne nowym i początkującym się przyda :)

 

Kod jest w miarę wytłumaczony, więc nie powinno być problemów, gdyby jednak jakieś zaistniały śmiało piszcie w temacie. 

 

 

CODE LOGOWANIE:

 

<!DOCTYPE html>

<html lang="pl">

<head>

    <meta charset="UTF-8">
	
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <title>Ajaxowe Logowanie!</title>
	
</head>

<body>

    <header>
     
		<h1>Ajax</h1>

    </header>

    <main>
      
        <section id="content">
			
			<form method="POST">
			
				<fieldset>
				
					<legend>Logowanie</legend>
				
					<p>
					
						<label>Nazwa Użytkownika:</label>
						<input type = "text" id = "login" />
						
					</p>
					<p>
							
							<label>Hasło Uzytkownika:</label>
							<input type = "password" id = "password"/>
							
					</p>
					<p>
							
							<input type = "button" value = "Zaloguj" id="log" />
      
					</p>
					
				</fieldset>
				
			</form>
			
			<span id = "raport" style = "display: none"></span>
           
        </section>

    </main>

    <footer>
	
		<p> © Salur | 2015 </p>
        
    </footer>
	
    <script>
        
		$(document).ready(function() {
		
			/* $('#log') -> Odwołujemy się tak do elementu HTML */
			/* .click() -> Wywołujemy zdarzenie click(), które następuje po kliknięciu 
				na element, do którego wcześniej się odwołaliśmy */
			
			$('#log').click(function() {
				
				/* Po zdarzeniu click(); wywołujemy anonimową funkcję w której na początku 
					przypiszemy sobie wartości z naszego formularza do zmiennych */
				/* Funkcja val(); sluży do pobierania wartości z danego elementu */
				
				var _Login = $('#login').val();
				var _Password = $('#password').val();
				
				/* Wyślijmy teraz nasze zmienne do których przypisaliśmy wartości 
					z inputów do pliku .php który obsłuży nam dalszą część logowania */
					
				$.ajax({ type: 'POST', url: 'ścieżka_do_pliku_php', data: { Login: _Login, Password: _Password } })
				
				/* Teraz nasze zmienne zostały już przekazane do naszego pliku php, możemy je odebrać w nastepujący
					sposób: $_POST['Login']; oraz $_POST['Password']; */
					
				/* Sprawdźmy teraz czy nasz plik php do którego wcześniej wysłaliśmy zmienne coś nam zwrócił. */
				

				.done(function( msg ) {
				
					/* W pliku php sprawdzamy dane czy są poprawne i możemy coś zwrócić 
						np. echo 1; <- będzie to znak że dane są poprawne i nadano sesje
						w przypadku nieudanego logowaniu zwróćmy
						np. echo 0; <- będzie to znak że dane są niepoprawne lub wystąpił błąd */
					
					
					/* Sprawdzamy to if'em */
					
					if(msg == 1) { 
					
						/* Plik zwrócił nam liczbę 1, znaczy to że dane się zgadzają oraz nadano sesje */
						/* W takim wypadku możemy przeładować stronę lub wysłać użytkownika 
							na konkretny adres url np. stronę dla zalogowanego */
							
						/* Funkcja odpowiadająca za przeładowanie strony */
					
						location.reload(); 
						
						/* Funkcja odpowiadająca za przekierowanie na konkretny adres url */
						
						location.href = 'link_do_strony_zalogowanego';
					
					} else {
					
						/* Coś poszło nie tak, serwer zwrócił 0. */
						/* W tym miejscu możemy zwrócić do konkretnego div'a lub komunikatem
							treść danego błędu, (wszystkie echo XXXX; z naszego pliku są w zmiennej msg) */
							
							
						/* Odwołujemy się do konkretnego elementu, w tym przypadku do div'a i za pomocą 
							funkcji html(); uzupełniamy diva komunikatem zawartym w zmiennej msg */
							
						/* Ja zrobię to w nieco inny sposób i użyję jeszcze jednej funkcji show(); <- funkcja 
							ta 'pokazuje' nam dany element, dokładniej usuwa nam display: none z CSS. */
							
						$('#raport').html(msg).show();
						
						/* Jeżeli byśmy chcieli jednak wyświetlić alert wyglądało by to tak: */
						
						alert(msg);
						
						/* Trzecią opcją może być przekierowanie użytkownika na jakiś link 
							z np. stroną z błędem logowania */
							
						location.href = 'link_do_strony_z_bledem';
					
					}
					
			});
			
		});
	
	});
		
    </script>

</body>

</html>

 

CODE REJESTRACJA:

 

<!DOCTYPE html>

<html lang="pl">

<head>

    <meta charset="UTF-8">
	
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <title>Ajaxowa rejestracja</title>
	
</head>

<body>

    <header>
     
		<h1>Ajax</h1>

    </header>

    <main>
      
        <section id="content">
			
			<form method="POST">
			
				<fieldset>
				
					<legend>Rejestracja</legend>
				
					<p>
					
						<label>Nazwa Użytkownika:</label>
						<input type = "text" id = "login" />
						
					</p>
					<p>
							
							<label>Hasło Uzytkownika:</label>
							<input type = "password" id = "password"/>
							
					</p>
					<p>
							
							<label>Powtórz Hasło Uzytkownika:</label>
							<input type = "password" id = "r_password"/>
							
					</p>
					<p>
							
							<label>Adres e-mail:</label>
							<input type = "email" id = "email"/>
							
					</p>
					<p>
							
							<input type = "button" value = "Zarejestruj" id="register" />
      
					</p>
					
				</fieldset>
				
			</form>
			
			<span id = "raport" style = "display: none"></span>
           
        </section>

    </main>

    <footer>
	
		<p> © Salur | 2015 </p>
        
    </footer>
	
    <script>
        var validate = false;
		
		$(document).ready(function() {
		
			/* $('#register') -> Odwołujemy się do buttonu HTML */
			/* .click() -> Wywołujemy zdarzenie click(), które następuje po kliknięciu 
				na element, do którego wcześniej się odwołaliśmy */
			
			$('#register').click(function() {
				
				/* Po zdarzeniu click(); wywołujemy anonimową funkcję w której na początku 
					przypiszemy sobie wartości z naszego formularza do zmiennych */
				/* Funkcja val(); sluży do pobierania wartości z danego elementu */
				
				var _Login = $('#login').val();
				var _Password = $('#password').val();
				var _RPassword = $('#r_password').val();
				var _Email = $('#email').val();
				
				/* Czas na sprawdzenie poprawności i długości wpisanych danych */
				/* Wpakujmy sobie inputy do tablicy (mi jest tak wygodniej) oraz dzieki
					temu mozemy rozbudowac bardziej skrypt */
				
				var inputValue = new Array(_Login, _Password, _RPassword, _Email);
				
				/* Okej, teraz możemy już odwoływać się do naszych inputów w następujący
					sposób: inputValue[0]; itd. */
					
				/* Tutaj są dwa sposoby walidacji uzyć gotowego pluginu validate({}) lub napisać
					po swojemu, osobiście pokażę drugi sposób */
					
				/* Na początek sprawdzimy czy użytkownik wypełnił wszystkie pola */
				
				if( inputValue[0].length == 0 || inputValue[1].length == 0 || inputValue[2].length == 0 || inputValue[3].length == 0 ){
					
					$('#raport').html('<b>Uzupełnij wszystkie pola!</b>').show();
					
						return false;
					
				} else if ( inputValue[0].length < 4 ) {
					
					$('#raport').html('<b>Login musi zawierać minimum 4 znaki.</b>').show();
					
						return false;
					
				} else if( inputValue[1].length < 6 ) {
					
					$('#raport').html('<b>Hasło musi zawierać minimum 6 znaków.</b>').show();	

						return false;					
					
				} else if( inputValue[1] !== inputValue[2] ){
					
					$('#raport').html('<b>Podane hasła nie zgadzają się.</b>').show();
					
						return false;
					
				} else if(ValidateEmail(inputValue[3]) == false) {
					
					$('#raport').html('<b>Adres Email jest niepoprawny.</b>').show();
					
						return false;
						
				} else {
					
					/* Przeszliśmy przez etap werfikacji teraz możemy nasze dane wyslać do pliku
						php aby obsłuzył nam dodanie konta do bazy */
					
					$.ajax({ type: 'POST', url: 'test.php', data: { Login: _Login, Password: _Password, Email: _Email } })
					
					/* W samym pliku php nie jest potrzebna juz wertfikcja danych, jak już to tylko
						filtrowanie zmiennych lub wyswietlenie komunikatu np. echo 'Taki login juz istnieje'; */
						
					.done(function( msg ) {
				
					/* W pliku php sprawdzamy dane czy są poprawne i możemy coś zwrócić 
						np. echo 1; <- będzie to znak że dane są poprawne i nadano sesje
						w przypadku nieudanego logowaniu zwróćmy
						np. echo 0; <- będzie to znak że dane są niepoprawne lub wystąpił błąd */
					
					
					/* Sprawdzamy to if'em */
					
					if(msg == 1) { 
					
						/* Plik zwrócił nam liczbę 1, znaczy to że dane się zgadzają oraz nadano sesje */
						/* W takim wypadku możemy przeładować stronę lub wysłać użytkownika 
							na konkretny adres url np. stronę dla zalogowanego */
							
						/* Funkcja odpowiadająca za przeładowanie strony */
					
						location.reload(); 
						
						/* Funkcja odpowiadająca za przekierowanie na konkretny adres url */
						
						location.href = 'link_do_strony_zalogowanego';
					
					} else {
					
						/* Tutaj zostaną zwrócone wszystkie te wiadomości typu: 
							echo 'Login zajęty'; aby tak się stało musimy wczesniej zwrócić 0 */
							
						/* Odwołujemy się do konkretnego elementu, w tym przypadku do div'a i za pomocą 
							funkcji html(); uzupełniamy diva komunikatem zawartym w zmiennej msg */
							
						/* Ja zrobię to w nieco inny sposób i użyję jeszcze jednej funkcji show(); <- funkcja 
							ta 'pokazuje' nam dany element, dokładniej usuwa nam display: none z CSS. */
							
						$('#raport').html(msg).show();
						
						/* Jeżeli byśmy chcieli jednak wyświetlić alert wyglądało by to tak: */
						
						alert(msg);
						
						/* Trzecią opcją może być przekierowanie użytkownika na jakiś link 
							z np. stroną z błędem logowania */
							
						location.href = 'link_do_strony_z_bledem';
					
					}
					
					});
					
					return true;
									
				}
			
			});
	
		});
	
	/* Funkcja sprawdzająca email */ 
	
	function ValidateEmail(email) {
		
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		
        if(!regex.test(email)) {
			
           return false;
		   
        } else {
			
           return true;
		   
        }
		
      }
		
    </script>

</body>

</html>  

 

 

Przydatne strony oraz funkcje użyte w kodzie:

 

https://jquery.com/

http://api.jquery.com/val/

http://api.jquery.com/jquery.ajax/

http://api.jquery.com/show/

http://api.jquery.com/length/

http://jqueryvalidation.org/

 

 

Gdybyście mieli jakieś pomysły co mógłbym stworzyć również piszcie pod tematem.

 

Nie zezwalam na kopiowanie na inne fora i strony.

 

 

@Edit Podczas wklejania kod troszkę się rozjechał ale myślę że się doczytacie :D

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista


"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer


 


Potrzebujesz czegoś? Oznacz mnie @Salur

Salur Znawca

Salur

Opublikowano
Znawca

Salur

  • Autor
Opublikowano

Aktualizacja, dodałem walidacje rejestracji. Starałem się zrobić to w miarę najprościej aby każdy zrozumiał.

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista


"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer


 


Potrzebujesz czegoś? Oznacz mnie @Salur

  •  carbonx zmienił(a) tytuł na Logowanie oraz rejestracja w Ajaxie

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...