Komentarze w AJAX

13 listopada 2010 vonski AJAX, jQuery, 12

Czyli komentarze „takie jak na youtubie”

Wbrew pozorom implementacja takiego systemu komentarzy na własnej stronie jest bardzo szybka i do tego prosta. Wystarczą podstawy PHP, HTML i jQuery. I naprawdę – mam na myśli podstawy.

Pobierz źródło

Demo

HTML i CSS

Zaczynamy standardowo od utworzenia jakiegoś prostego formularza na stronie, na której będziemy dodawać i wyświetlać komentarze.

<form name="ajaxForm" id="ajaxForm" method="post" action="" onsubmit="postForm();return false;">
 
	<label for="yourName">Imię</label>
	<input type="text" name="yourName" id="yourName" />
	<br />
 
	<label for="yourAge">Wiek</label>
	<input type="text" name="yourAge" id="yourAge" />
 
	<br />
 
	<label for="yourMail">Email</label>
	<input type="text" name="yourMail" id="yourMail" />
 
	<br />
 
	<label for="yourComment">Komentarz</label>
	<textarea name="yourComment" id="yourComment"></textarea>
 
	<label for="submitForm">&nbsp;</label>
	<input type="submit" id="submitForm" value="Submit" />
 
	<input type="hidden" name="formPosted" value="true" />
 
</form>
<div id="loading" style="display: none;">
	<img src="loader.gif" />
</div>
 
<div id="comments">
<!-- tutaj będą "wrzucane" komentarze" -->
</div>

Jak widać, mamy tutaj prosty formularz z czterema polami: Imię, Wiek, Mail oraz Komentarz. Do tego dochodzi również jedno ukryte pole o nazwie „formPosted”. Jest to pole pomocnicze, które będzie informowało nasz skrypt czy formularz został wysłany. Oczywiście, można się bez niego obejść, ale z doświadczenia wiem, że dobrym nawykiem jest przesyłać sobie takie pole w formularzu. To co się rzuca w oczy to to, że nie mamy tutaj podanej akcji, natomiast mamy coś takiego: onSubmit=”postForm();return false;”. No tak. Bo przecież nie chcemy wysyłać formularza w tradycyjny sposób z przeładowaniem strony. Chcemy to zrobić bez przeładowania, dlatego w onSubmit dajemy do zrozumienia, że w momencie wciśnięcia ‘Wyślij’ ma się wykonać funkcja postForm() i nic poza tym ma się nie dziać (strona się nie przeładuje dzięki temu, że zaraz po wywołaniu funkcji podaliśmy return false). Pod formularzem mamy div z loaderem, który pojawiać się będzie po przyciśnięciu ‘Wyślij’ przez użytkownika. Loadery w formacie gif znajdziesz na tej stronie: http://www.preloaders.net/ W sekcji <head></head> dodajemy sobie jeszcze styl diva, w którym będziemy wyświetlać dane wpisane przez użytkownika.

<style type="text/css">
.comment { border:solid 2px black;width:300px;background-color:#e0e0e0;padding:10px;font-family:Arial;margin:15px; }
</style>

I to tyle jeśli chodzi o HTML i CSS.

jQuery

Skrypt zajmujący się przekazaniem danych z formularza do serwera oraz pobraniem i wyświetleniem odpowiedzi napisany będzie w jQuery. Jeśli jeszcze nie ściągnąłeś jQuery, teraz będzie dobry moment by to zrobić

(Ostatnia stabilna wersja jQuery). Oczywiście należy pamiętać o dołączeniu pobranej biblioteki do naszego skryptu! Po wykonaniu tych czynności piszemy sobie nasz skrypcik:

function postForm() {
	$("#loading").show("fast");
	$.post("index.php", $("#ajaxForm").serialize(),
		function(data) {
			$("#loading").hide("fast");
			$("#comments").append(
			'<div class="comment"><div><strong>'+data.name+'</strong>'+
			'('+data.email+') - '+data.age+' lata'+
			'<div>'+data.comment+'</div>'+
			'</div></div>'
			);
		}, "json");
}

Ok, po kolei co my tu mamy. W pierwszej linijce wywołujemy nasz loader, za pomocą:

$("#loading").show("fast");

Podanie argumentu „fast” do funkcji show() spowoduje dodanie eleganckiego efektu „fade-in” w momencie pojawiania się loadera. Następnie mamy wywołanie AJAX-a, które prześle nasz formularz. W tym tutorialu użyty został $.post, symulujący jak nie trudno się domyślić POST, ale równie dobrze można użyć $.get, który będzie zachowywał się jak GET. Więcej o $.post tutaj. Do funkcji post() podajemy cztery argumenty: 1. Stronę, do której wysyłamy dane i która zajmie się ich obsługą. W tym wypadku jest to ta sama strona, na której jest formularz i komentarze. 2. Dane, które zostaną wysłane do serwera. Dane te muszą być w formacie klucz / wartość, lub być wynikiem funkcji serialize(), której to właśnie w tym wypadku używamy. 3. Funkcja, która jest wykonywana jak tylko dane zostały wysłane. Innymi słowy – funkcja ta wykonuje się zaraz po uzyskaniu odpowiedzi od strony do której przesyłaliśmy dane. 4. Czwarty to typ danych jakich spodziewamy się w odpowiedzi. Dla tego tutorialu przyjąłem, że będzie to JSON.

JSON (JavaScript Object Notation) jest formatem danych, pozwalającym nam traktować grupę danych, jako jeden obiekt. Jest to coś w stylu wielowymiarowej tablicy w PHP. Aby odnieść się do danych zapisanych w takim obiekcie używamy po prostu kropki (np. jsonObject.imie, jsonObject.wiek itd.).

Jeszcze szybki rzut oka, jak działa funkcja wykonująca się po otrzymaniu odpowiedzi od serwera (trzeci argument podany do $.post):

function(data) {
			$("#loading").hide("fast");
			$("#comments").append(
			'<div class="comment"><div><strong>'+data.name+'</strong>'+
			'('+data.email+') - '+data.age+' lata'+
			'<div>'+data.comment+'</div>'+
			'</div></div>'
			);
		}

Funkcja ta przyjmuje argument, w którym znajdują się dane przetworzone przez serwer (w tym przykładzie zmienna przechowująca dane nazywa się „data”, jednak możemy ją nazwać jak tylko chcemy). Pierwszą rzecz jaką robi, to schowanie diva z loaderem, jako że dane zostały już załadowane. Następnie po prostu „wrzucamy” do diva o id równym „comments” dane otrzymane z serwera (realizowane za pomocą funkcji append()).

Funkcja append() jest funkcją jQuery, która dołącza kod HTML do elementu na rzecz którego została wywołana. Więcej na jej temat znajdziesz w dokumentacji.

PHP & MySQL

Jedyne co nam zostało to obsługa danych wysłanych z formularza po stronie serwera. Co musimy zrobić? Przede wszystkim trzeba te dane odebrać, następnie wykonać zapytanie umieszczające je w bazie danych a na końcu przekazać je do przeglądarki. Zatem zanim się do tego zabierzemy, trzeba w ogóle mieć jakąś bazę danych. Zakładam, że zapytanie tworzące tabele każdy potrafi sobie ułożyć samemu, a jeśli nie to można użyć phpMyAdmin. W naszej przykładowej bazie danych mamy tabelę o nazwie „comments”, a w niej pola: - id (to będzie oznaczone jako auto_increment) - name (imię / nick dodającego komentarz) - age - email - comment Mając utworzoną tabelę, przystępujemy do pisania skrytpu:

 
mysql_connect('localhost', 'root', '');
mysql_select_db('comments');
 
if(isset($_POST['formPosted']))
{
	$returnData['name'] = $_POST['yourName'];
	$returnData['age'] = $_POST['yourAge'];
	$returnData['email'] = $_POST['yourMail'];
	$returnData['comment'] = $_POST['yourComment'];
 
	$query = "INSERT INTO comments VALUES('', '".$returnData['name']."','".$returnData['age']."','".$returnData['email']."','".$returnData['comment']."')";
 
	mysql_query($query);
 
	echo json_encode($returnData);
	exit;
}

Jak widać nie ma tu jakiejś większej filozofii. Jak już wspomniałem funkcja $.post imituje POST więc wszystkie dane przesłane za jej pomocą znajdziemy w tablicy superglobalnej $_POST. Z niej też pobieramy wszystko do naszej nowej tablicy $returnData, którą następnie kodujemy do JSON za pomocą json_encode() i „echujemy” do JavaScriptu. Ostatnia rzecz jaką trzeba zrobić to zakończyć wykonywanie skryptu – robimy to zawsze, gdy kończymy wywołanie AJAX-a.

string json_encode (mixed$value [, int $options = 0]) Funkcja ta przyjmuje jako parametr zmienną i zwraca ją w postaci zakodowanej do JSON. Przykładowo:

$myArray = array("a"=>1, "b"=>2, "c"=>3, "d"=>4);
 
echo json_encode($myArray); // wyświetli: {"a":1,"b":2","c":3,"d":4}

Ot, cała filozofia

Więcej, jak zwykle w manualu.

No i to wszystko! Od teraz możemy się już cieszyć działającym i zarazem efektownym systemem komentarzy. Dziękuję za uwagę

ajax, jquery, json, komentarze, mysql, php

Wprowadzenie Eleganckie formularze na stronie WWW

12 Responses to “Komentarze w AJAX”

Polskie Tutoriale pisze:

15 listopada 2010 o 06:49
Gratuluję świetnego tutoriala! Tak właśnie powinny być przygotowywane poradniki. Z miłą chęcią dodałem go do zbioru najlepszych polskich tutoriali. Dziękuję za zgłoszenie. Mam nadzieję, że Twoja strona będzie się coraz prężniej rozwijać, bo początki są bardzo obiecujące.
Odpowiedz
RaFe pisze:

15 listopada 2010 o 16:03
Good job
Odpowiedz
Ja pisze:

27 stycznia 2011 o 23:01
Nie rozumiem czemu po odświeżeniu strony komentarze mi znikają. Co mam dopisać by zostawały? I jak blokować komentarze wysyłane bez danych? (z pustymi polami) Proszę o pomoc.
Odpowiedz
Michał pisze:

31 stycznia 2011 o 13:10
Hehe naprawdę dobre Ajax mnie zadziwia
Odpowiedz
Logos pisze:

28 marca 2011 o 12:14
No nieźle, chociaż ostatnia część mysql… odkąd używam yii framework i active record już nie pamiętam jak to się robiło ^^ Good tut
Odpowiedz
reaaski pisze:

16 kwietnia 2011 o 17:32
Coś nie działa, po odświeżeniu strony komentarze znikają niczym spaghetti z mojego talerza …
Odpowiedz
Piotr pisze:

21 maja 2011 o 13:15
Mam ten sam problem. Nie rozumiem czemu po odświeżeniu strony komentarze mi znikają. Co mam dopisać by zostawały? I jak blokować komentarze wysyłane bez danych? (z pustymi polami) Proszę o pomoc.
Odpowiedz
Dawid pisze:

11 czerwca 2011 o 21:32
Poda ktoś gotowe zapytanie SQL bo nie umiem zrobić
Odpowiedz
Kyen pisze:

21 grudnia 2011 o 18:32
Komentarze znikają po odświeżeniu lub załadowaniu strony! Co zrobić by się wyświetlały!
Odpowiedz
scorpion_1982 pisze:

31 grudnia 2011 o 02:00
Komentarze znikają ?, co zrobić ?? Np. Napisać sobie odczytywanie komentarzy z bazy danych, tu jest tylko przykład jak je dodawać dynamicznie i zapisywać w bazie. Pozdrawiam.
Odpowiedz
przesq pisze:

9 marca 2012 o 12:01
Jak odwrócić kolejność wyświetlania dodanych komentarzy – od najnowszych do najstarszych? Nie chodzi mi o napisanie zapytania po odświeżeniu strony tylko o to pokazuje ten tutorial – w odwrotnej kolejności.
Odpowiedz
- vonski pisze:
  
  9 marca 2012 o 12:21
  Cześć,
  
  Wystarczy zastąpić funkcję append funkcją prepend,czyli:
  
  $(„#comments”).prepend(
  // tutaj wszystko tak samo jak w kodzie powyżej
  );
  Odpowiedz

Komentarze w AJAX

HTML i CSS

jQuery

PHP & MySQL

12 Responses to “Komentarze w AJAX”

Dodaj komentarz Anuluj pisanie odpowiedzi

Kategorie

Archiwum