Home / Tutoriale

Adaugarea de comentarii cu Ajax

La fiecare blog sau articol de ziar, utilizatorului i se da posibilitatea sa comenteze pe acea tema. Astfel, acest tutorial se ocupa de adaugarea unui comentariu cu jQuery . Exista pentru WordPress si un plug care face acest lucru. Mai multe detalii gasiti pe un site dedicat in exclusivitate Ajax-ului si anume Ajaxian Comentariile de la sectiunea Tutoriale sunt realizate in acest mod.

index.html

Pagina xhtml este relativ simpla, aceasta contine un div articol care este static, luat de pe Lipsum si pe baza caruia se adauga comentarii, dupa care este declarat div folosit pentru preloader ( initial este ascuns). Div-ul cu id-ul comentarii, initial gol, dar care va fi populat imediat ce pagina s-a terminat de incarcat, va contine comentarii adaugate dinamic. Urmatorul div si ultimul contine doua input-uri text, unul pentru nume si celalalt pentru email, un input de tip buton care va recepta evenimentul de "click" si un obiect textarea in care se va scrie comentariul propriu zis.

<html>
<head>
       <title>Comentarii ajax </title>
       <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript" src="js/code.js"></script>
       <script type="text/javascript" src="js/preloader.js"></script>
</head>
<body>
      <div  id="articol">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat facilisis leo. Sed lacinia tortor id massa.
         Phasellus diam tortor, mattis ac, luctus vitae, convallis at, augue. Cras rhoncus velit et turpis.
         Sed semper porttitor dui. Vestibulum consectetuer arcu et mauris. Donec porta tincidunt purus.
         Vivamus tristique nibh. Suspendisse in augue. Nam gravida egestas risus.
         Sed arcu pede, tempor consectetuer, dignissim ut, interdum id, felis.
          In nonummy malesuada nulla. Aenean tincidunt. Quisque nunc erat, scelerisque eget, commodo eget, luctus sit amet, sapien.
          Praesent venenatis malesuada turpis. Suspendisse venenatis, metus at tincidunt commodo, tortor orci sagittis libero, at fringilla magna sem sed diam.
          Curabitur condimentum. Mauris a diam sed mauris pharetra fermentum.
      </div>
      
     <div style="display:none;" id="loading">
            <img alt="prealoder" title="Se incarca" src='images/preloader.gif'/>       
     </div>          

     <div id="cometarii"></div>
     
     <div id="adaugare_comentarii">     
             <fieldset title="Adaugare comentariu">
             <legend>Adaugare comentariu</legend> 
             <table>
                 <tr>
                        <td>Nume: </td>
                        <td> <input type="text" name="nume" /> </td>
                </tr>
                <tr> 
                       <td>Email:  </td>
                       <td> <input type="text" name="email" /> </td>
                </tr>           
                 <tr>
                       <td> Comentariu: </td>
                       <td> <textarea rows="8" cols="50" name="comentariu"> </textarea> </td>
                </tr>           
                <tr>
                       <td colspan="2"> <input type="button" name="trimite" value="Adauga" /> </td>
               </tr>
        </table>
        </fieldset>     
     </div> 
     
</body>
</html>    

preloader.js

Script-ul care se ocupa cu prealoader-ul

//Pt centrarea preloader-ului
var Page = new Object();
Page.width;
Page.height;
Page.top;
Page.getPageCenterX = function ()
{
       var fWidth;
       var fHeight; 
       //For old IE browsers 
       if(document.all) 
       { 
              fWidth = document.body.clientWidth; 
              fHeight = document.body.clientHeight; 
       } 
       //For DOM1 browsers 
       else if(document.getElementById &&!document.all)
       { 
              fWidth = innerWidth; 
              fHeight = innerHeight; 
       } 
       else if(document.getElementById) 
       { 
              fWidth = innerWidth; 
              fHeight = innerHeight; 
       } 
       //For Opera 
       else if (is.op) 
       { 
              fWidth = innerWidth; 
              fHeight = innerHeight; 
       } 
       //For old Netscape 
       else if (document.layers) 
       { 
              fWidth = window.innerWidth; 
              fHeight = window.innerHeight; 
       }

       Page.width = fWidth;
       Page.height = fHeight;
       Page.top = window.document.body.scrollTop;
}
jQuery().ajaxStart(showPreloader);
jQuery().ajaxStop(hidePreloader);

function showPreloader()
{
       Page.getPageCenterX();
       $('#loading').show(); 
       $('#loading').css('top' ,(Page.top + Page.height/2)-100);
       $('#loading').css('left',Page.width/2-75); 
       $('#loading').css('position','absolute');
}
function hidePreloader()
{
       $('#loading').hide();
}

code.js

$(document).ready(function() este explicata mai pe larg pe site-ul oficial al framework-ului Jquery. Ideea: atunci cand DOM este pregatit, atunci se executa codul din interiorul functiei.

Atunci cand utilizatorul intra pentru prima data pe pagina se va face automat o cerere prin care se vor afisa toate comentariile anterior facute. Atunci cand utilizatorul adauga un comentariu se face o cerere in care sunt trimise ca parametri numele, emailul si comentariul utilizatorului si este trimis inapoi un obiect Json. Aici am realizat acest lucru pentru a vedea cum se foloseste JSON, mai facil ar fi fost sa adaug imediat nume si comentariu la div-ul cu id-uri comentarii. Daca exista un utilizator cu numele Xsulescu si comentariu "comentariu", obiect-ul va avea forma : {"nume":"Xsulescu ","comentariu":"comentariu"}. Obiectul JSON este un obiect nativ JSON si astfel este usor de accesat. Dupa ce comentariul este adaugat, se golesc input-urile de tip text si obiectul textarea pentru un nou comentariu. Aici puteam foarte bine sa ascundem div-ul cu id-ul "adaugare_comentarii" $('#adaugare_comentarii').hide('slow'); pentru ca utilizatorul sa nu mai poate adauga un nou comentariu. Aici pot fi mai multe variatii pe aceasi tema, se pot folosi cookie-uri, se pot vedea ip-urile utilizatorilor si se poate adapta in functie de situatia dorita.

$(document).ready(function()
{
       /* sunt afisate comentariile facute anterior 
       Aici se face o cere catre script ul afisare.php din directorul php
       iar daca acesta se face cu success este populat div ul cu id ul comentarii 
       */

       $.ajax({
       type: "GET",
       url: "php/afisare.php", 
       success: function(comentarii){ 
       $('#cometarii').html(comentarii);
       }
});

/*
$("input[@type=button]") - acesta declaratie vizeaza toate inputurile de tip button iar bind("click") realizeaza capturarea
evenimentului click
var paramentri1 - serializeaza toate valorile introduse in input - urile de tip text
astfel daca la nume avem Xsulescu iar la email avem x@x.ro parametri1 = 'nume=Xsulescu&email=x%40x.ro';
var paramentri2 - se serializeaza textul din textarea .
In loc de $("textarea").serialize(); am fi putut folosi $("textarea[@name=comentariu]")

*/

$("input[@type=button]").bind("click", function(){
var parametri1 = $("input[@type=text]").serialize();
var parametri2 = $("textarea").serialize();
var parametri = parametri1+'&'+parametri2;

$.ajax({
type: "POST",
url: "php/adaugare.php",
data: parametri,
dataType : 'json',
success: function(jsonObj){
var comentariu = '<b>Nume :</b> '+jsonObj.nume+' <br/> <b>Comentariu : </b> '+jsonObj.comentariu+' <hr/>';
$('#cometarii').append(comentariu);
$('input[@type=text]').val('');
$('textarea').val('');
}
});
});
});

creare.sql

Script-ul Mysql de creare a tabelei comentarii

CREATE TABLE `comentarii` (                                                        
              `id` int(10) unsigned NOT NULL auto_increment,                                   
              `nume` varchar(50)  default NULL,                       
              `email` varchar(120)  default NULL,                     
              `comentariu` text ,                                     
              `data` datetime default NULL,                                                    
              PRIMARY KEY  (`id`)                                                              
            )

conectare.php

Acest script realizeaza conectarea la baza de date

<php
   $host       = "localhost";  
   $user       = "root";
   $parola     = "parola";
   $bazadedate = "ajax";
   
   
   
   global $conexiune;
    $conexiune = mysqli_connect($host,$user,$parola)  or die("Conectare esuata,  " . mysqli_error($conexiune)); 
    mysqli_select_db($conexiune,$bazadedate)  or die("Selectare baza de date esuata.");  
?>

afisare.php

Acest script selecteaza toate comentariile facute pana atunci din baza de date

<?php
include('conectare.php');
$sql = "SELECT nume,comentariu FROM comentarii";
$result = $conexiune->query($sql);
$comentarii = '<h2>Comentarii</h2>';
while ($comentariu = mysqli_fetch_assoc($result))
{
       $comentarii .= '<b>Nume : </b>'.$comentariu['nume'].'<br/> <b>Comentariu : </b>'.$comentariu['comentariu'].'<hr/>';
}

echo $comentarii;
?>

adaugare.php

Acest script este apelat atunci cand utilizatorul adauga un comentariu si il insereaza in baza de date

<?php
include('conectare.php');
foreach ($_POST as $key=>$value) $$key = $value; // transforma $_POST['nume'] = 'Xsulescu' in $nume = 'XSulescu'; cu toate variabile din POST
$sql = "INSERT INTO comentarii

(nume,email,comentariu,data)
VALUES
('$nume','$email','$comentariu',now())";
$result = $conexiune->query($sql);
if (mysqli_error($conexiune)) { echo mysqli_error($conexiune); exit(); }
echo '{"nume":"'.$nume.'","comentariu":"'.$comentariu.'"}'; //se returneaza ajax ului obiect ul json
?>

Demo cod sursa

Nume:nex
Comentariu:dap, foarte ajutator acest tutorial, multumesc mult!
Nume:good
Comentariu:foarte bun recomand !!
Nume:awef
Comentariu:awefawef
Nume:Vali
Comentariu:merci mult fratele meu
Nume:Zack
Comentariu:Tare
Nume:vali.t
Comentariu:Cum se face in prototype fara a folosi json din kquery?Vreau sa spun o emulare json.http://getahead.org/blog/joe/2007/03/05/json_is_not_as_safe_as_people_think_it_is.html
Nume:testare
Comentariu:test
Nume:alexandru.b
Comentariu:De ce cand imi da eroare"Fatal error: Call to a member function on a non-object in..."la "$result = $conexiune->query($sql);"? :|
Nume:alexandru.b
Comentariu:Nu stiu de ce dar daca adaug o noua linie in comentariu (pe site-ul meu), chiar daca informatia se introduce in baza de date, in pagina de comentarii nu primesc nici un raspuns.Stie cineva de ce?
Nume:stefan
Comentariu:verica conexiunea
Nume:Dode
Comentariu:Test comentarii
Nume:ere
Comentariu:erfd
Nume:cdscds
Comentariu:dcscdscds
Nume:tttttttttttttttttttttt
Comentariu:ttttttttttttttt
Nume:kl;kl;
Comentariu:kl;kl;
Nume:kiki
Comentariu:kikyik
Nume:benjamino
Comentariu:de ce imi da eroarea "Warning: mysqli_fetch_assoc() expects exactly 1 parameter, 0 given in /home/virtualhosts/benjamino.internet-caffe.net/comentarii/php/afisare.php on line 13"? ce trebuie sa fac?
Nume:benjamino
Comentariu:iar fisierul "creare.sql" unde trebuie pus?
Nume:Sandu
Comentariu:Cind fac refresh mi se trimit date de pe optimized.rmxads.com pina la infinit , ce sa fac?
Nume:dddd
Comentariu:sdadaasd
Nume:luc
Comentariu:comment aici
Nume:anahi
Comentariu:am id lu anahi este anahiportilla99
Nume:Sergiu
Comentariu:Frumos, imi place ajax, desii nu este chiar complicat.. e cool
Nume:Sergiu
Comentariu:bah dar nu mai comentati atat daca nu stiti cum se face, uitativa in cod si incercati sa il intelegeti tot, apoi sunt sigur ca nu veti mai avea intrebari de genu cum?ce?unde?ce sa fac?asta e aiurea, e un fel de copy/past in plm, nu veti invata niciodata nimic cu intrebarile si massurile voastre imputzite,PS: scuzatimi vocabularu , Daca cineva are ceva de comentat am o adresa de mai Temporara :)) break_boty@yahoo.com
Nume:Ciprian
Comentariu:multumesc.......
Nume:?
Comentariu:proba
Nume:gigi mirel
Comentariu:site sadk fgsd;lk adaiu ewflkj few rr ew
Nume:ijd sak we;qlk
Comentariu:nf dsi
Nume:test
Comentariu:asdasds
Nume:Florin
Comentariu:Cum se poate face sa se imparta comentariile pe pagini, deoarece, daca sunt multe comentarii e dificil de dat dins crool in jos ?Si a 2 chestiune: Daca am un site php, cum pot s aimplementez ca pe fiecare pagina a siteului, sa apara numai comentariile de pe aceea pagina ?
Nume:adas
Comentariu:asdasd
Nume:nume
Comentariu:nume
Nume:andreea
Comentariu:dak vreti sa ajutati un copil sarac dati clik http://www.e-album.ro/membru.php?id=17158
Nume:monica
Comentariu:ce mai faceti?misto
Nume:DRE
Comentariu:Este foarte prost
Nume:Claudia C
Comentariu:Infiintata in 1993, cu capital privat romanesc RURIS este producator de motoutilaje ce acopera o gama intreaga de lucrari necesare in microagricultura: motoferastraie, motocultoare, motocositori, masini de tuns gazon, motopompe, generatoare de curent, atomizoare . Cu utilajele RURIS se pot executa:•Prelucrari de teren in calitate buna; •Extirparea buruienilor; •Introducerea in sol a ingrasemintelor; •Activitati forestiere; •Cositul ierburilor si a buruienilor; •Inlaturarea zapezii; •Transport; •Ierbicidare •Irigare De-a lungul anilor, RURIS si-a castigat pe piata romaneasca reputatia de producator ce ofera utilaje de calitate si servicii pentru o larga paleta de clienti: persoane juridice si persoane fizice.SC RURIS IMPEX SRL se angajeaza sa indeplineasca intr-o masura din ce in ce mai mare cerintele tuturor partilor interesate: clienti, organisme si organizatii neguvernamentale, servicii si institutii publice, persoane juridice, societati comerciale, parteneri din tara si din strainatate.Contact: SC RURIS IMPEX SRL, Craiova, tel: 40351.46.46.32, www.ruris.ro
Nume:klemi
Comentariu:e foarte prost sg tampit sorry pt voi :(:(:(
Nume:xdcz
Comentariu:www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am / www.justdownload.do.am /
Nume:asd
Comentariu:asdasdasda
Nume:dfdg
Comentariu:dsdsds
Nume:sdf
Comentariu:sdf
Nume:Sylvinho
Comentariu:Cum sa fac sa apara o imagine langa nume si comentariu sa fie postat oeste o imagine nu intre linii
Nume:valentin
Comentariu:sa traiesti uploader \:d/
Nume:fsdfsd
Comentariu:fsdfsdfsd
Nume:cristinutza
Comentariu:sunt cea mai urata si cea mai proasta fata din tot tr
Nume:cristinutza
Comentariu:sunt proasta tampita si urata nr meu o769755427
Nume:costi
Comentariu:sunt urat ce fata am de gigolo nr meu 0762089889
Nume:adina
Comentariu:adinastanescu17 id meu
Nume:cristismen
Comentariu: http://www.e-joculet.ro/punctaj.php?user=cristismen
Nume:giulian
Comentariu:www.miniclip.ro sa stiti baieti da
Nume:giulian
Comentariu:ba sau intrati pe www.adidaspumanike.roda
Nume:giulian
Comentariu:stiti ca vasilica i cel mai prost din romania ca tati canta cu selin fine
Nume:giulian
Comentariu:numaru meu e 0722949323
Nume:giulian
Comentariu:sa stiti dabaieti
Nume:rtwgtr
Comentariu:linksLondon has undoubtedly established itself as a key luxury destination and we areLinks London Earrings links of London in the Middle ValentineLove Tag Necklace
Nume:RaMoNa
Comentariu:Chamau tu iubitu :X:X:X:
Nume:RaMoNa
Comentariu:Te iubesc tipul de baiat cu chitara vreau sa te am tuk gulitza ta am id daca vrei:ramona_puma2002 am 14 ani is din oradea
Nume:asdadad
Comentariu:asdad
Nume:dasdasdas
Comentariu:aaa
Nume:speca
Comentariu:http://sloturi.eu
Nume:asda
Comentariu:www.sloturi.eu
Nume:Bogdanescu
Comentariu:Hopa hopa ce misto testing ;) SuperSimplu si eficient
Nume:bogdan222
Comentariu:Super frate superssassaasassasasasas
Nume:Bogdanescu
Comentariu:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lectus quis nisi dapibus consectetur vitae id mauris. Curabitur sagittis vestibulum tincidunt. In et sem sit amet magna accumsan gravida. Vestibulum ligula augue, sagittis sed ultricies egestas, hendrerit non quam. Nullam ut dui non arcu convallis varius. Maecenas at tincidunt lectus. Nunc nunc mauris, fermentum eu varius in, gravida et nunc. Fusce ornare, turpis vel iaculis venenatis, lacus nisl faucibus urna, ut commodo ligula dui pulvinar leo. In hendrerit hendrerit mi, bibendum congue tortor suscipit a. Praesent elit eros, euismod ac tempus feugiat, cursus fermentum enim.
Nume:Mark
Comentariu:E foarte bun tutorialul!
Nume:Tony
Comentariu:E foarte bun tutorialul.Chiar si eu l-am inteles.
Nume:fwewef
Comentariu:wefwef
Nume:mst123
Comentariu:imi da o eroare...Fatal error: Call to undefined function mysqli_connect() in /home/mst123/public_html/php/conectare.php on line 17
Nume:mst123
Comentariu:linia 17 este$conexiune = mysqli_connect($host,$user,$parola)
Nume:etst
Comentariu:test
Nume:etst
Comentariu:test
Nume:ttt
Comentariu:asd asd asd
Nume:adasd
Comentariu:http://download-now.do.am /
Nume:filme online
Comentariu:www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am / www.download-now.do.am /
Nume:laura
Comentariu:buna
Nume:hjuh
Comentariu:test
Nume:aske
Comentariu:sfsf
Nume:dorin
Comentariu:http://www.thewar.ro/link.php?nume=dorin.upps va rog acesatil pt a ajuta comunitatea cs
Nume:andy
Comentariu:foarte cool. hormigon impreso valencia


Nume:andy
Comentariu:very interesting this blog. hormigon impreso

navegando the internet I found this blog very interesting. pavimento impreso

I found this blog and are very impressed .hormigon impreso valencia


Nume:hormigon impreso
Comentariu:ami this blog is good thanks hormigon impreso madrid

a very special blog hormigon impreso

Have fun. hormigon pulido

Have fun. hormigon impreso santander


Nume:hormigon impreso
Comentariu:navegand the net I found this blog and am very pleased. hormigon impreso valencia

very pleased about acetic articles. hormigon impreso

K I appreciate you put this article available to Have fun. cemento impreso


Nume:hormigon impreso
Comentariu:multumim pentru ajutoeul oferit hormigon impreso

Thanks and regards
Nume:sdbshb
Comentariu:sfnshn
Nume:Evrika
Comentariu:Accounts with good information very useful, thanks for the note of your bloghormigon impreso murcia
Nume:elodia
Comentariu:Thank you for your blog, you are very interesting topics and modern, I really liked your blog. hormigon impreso ontinyent
Nume:andy
Comentariu:Wow, amazing weblog format! How long have you been blogging for. beton imprime
Nume:admin
Comentariu:iiiiiiiiiiiii
Nume:rewafea
Comentariu:http://www.dafdfsa.info/ [url=http://www.dafdfsa.info/]fdsg[/url] dafd
Nume:Virgil
Comentariu:NU am inteles nimic!!!!-----hormigon impreso
Nume:Marian
Comentariu:beton imprime
Nume:totansilviu
Comentariu:Eu da :))
Nume:elodia
Comentariu:I just like the valuable information you supply for your articleshormigon impreso alicante
Nume:Cioaca
Comentariu:Inca nu am inteles, trebuie sa fi mai explicit! :))hormigon impreso valencia
Nume:Problem
Comentariu:Conversati asta incepa sa ia proportii neproportionate....beton amprentat
Nume:crbl
Comentariu:Oooo, dar ce-avem noi aicea...e plin de caprioare, bine ca mi-am luat alicea! :Dhormigon impreso alicante
Nume:Marius
Comentariu:salut, testez :D
Nume:somersbi
Comentariu:
Nume:tert
Comentariu:egegeg
Nume:sdghsdf
Comentariu:sdfgadfga
Nume:TEST
Comentariu:TEST
Nume:test
Comentariu:http://filmehd-online.biz
Adauga comentariu
*nu va fi afisat pe site
 
  • Hosting in timp real pe servere Linux si Windows
  • US 400

    Trafic / luna : 10 GB
    Conturi E-mail : 1000
    Subdomenii : 40
    Baze de date MySQL : 1
    Domenii parcate : 2
    Spatiu stocare : 400MB
    Pret : 6 euro/luna
    Cumpara
  • US 600

    Trafic / luna : 15 GB
    Conturi E-mail : 1000
    Subdomenii : 50
    Baze de date MySQL : 4
    Domenii parcate : 4
    Spatiu stocare : 600MB
    Pret : 8 euro/luna
    Cumpara
  • US 800

    Trafic / luna : 20 GB
    Conturi E-mail : 1000
    Subdomenii : 60
    Baze de date MySQL : 20
    Domenii parcate : 6
    Spatiu stocare : 800MB
    Pret : 10 euro/luna
    Cumpara
  • US 1000

    Trafic / luna : 25 GB
    Conturi E-mail : 1000
    Subdomenii : 80
    Baze de date MySQL : 20
    Domenii parcate : 10
    Spatiu stocare : 1000MB
    Pret : 14 euro/luna
    Cumpara
  • US 1200

    Trafic / luna : 35 GB
    Conturi E-mail : 1000
    Subdomenii : 100
    Baze de date MySQL : 20
    Domenii parcate : 15
    Spatiu stocare : 1200MB
    Pret : 20 euro/luna
    Cumpara