{"id":1130,"date":"2012-09-21T21:07:55","date_gmt":"2012-09-21T19:07:55","guid":{"rendered":"http:\/\/www.flapane.com\/blog\/?p=1130"},"modified":"2014-10-22T22:04:21","modified_gmt":"2014-10-22T21:04:21","slug":"howto-guestbookcomment-system-in-ajax-e-php-con-un-pizzico-di-twitter","status":"publish","type":"post","link":"https:\/\/www.flapane.com\/blog\/2012\/09\/howto-guestbookcomment-system-in-ajax-e-php-con-un-pizzico-di-twitter\/","title":{"rendered":"HOWTO: Guestbook\/comment-system in AJAX e PHP con un pizzico di… Twitter"},"content":{"rendered":"

Prendendo spunto da due ottime guide (Tutorialzine<\/a> e 9Lessons<\/a>), ed aggiungendo nuove caratteristiche, ho creato un nuovo Guestbook che \u00e8 piacevole alla vista, grazie ad ombreggiature ed angoli arrotondati via CSS, e permette di mostrare un numero limitato di risultati per volta (9, nel mio caso), per non creare una pagina troppo lunga.
\nPer caricare gli altri risultati (in questo caso, le firme lasciate nel Guestbook in passato), \u00e8 possibile cliccare su un pulsante identico a quello che in Twitter permette di aggiornare la timeline, ed i risultati pi\u00f9 vecchi appariranno dinamicamente nella pagina, con un effetto a scomparsa molto gradevole.<\/p>\n

Veniamo alle caratteristiche:
\n– Supporta gli avatar Gravatar (a patto di inserire un indirizzo email valido)<\/em>
\n– E’ possibile compilare automaticamente il modulo (nome, sito web, email, localit\u00e0) loggandosi tramite Facebook<\/em>
\n– Sistema CAPTCHA antispam, che consiste in un codice numerico casuale da inserire nell’apposita casella di testo<\/em>
\n– Localit\u00e0 (citt\u00e0 e paese) dell’utente aggiunta automaticamente, con tanto di bandierina del paese di provenienza aggiunta vicino ad ogni commento<\/em>
\n– Elenco dei 3 paesi da cui si sono ricevute pi\u00f9 firme\/commenti<\/em>
\n– Validazione dei campi (per controllare che l’indirizzo email o il sito web inseriti siano validi)<\/em>
\n– Ad ogni nuovo commento, verr\u00e0 inviata una e-mail automatica al proprietario del Guestbook, col nome ed il testo dell’utente. A quest’ultimo, verr\u00e0 inviata una mail di ringraziamenti<\/em>
\n– Ogni email che riceverete dopo ogni commento, conterr\u00e0 un link per cancellare, con un solo click, eventuali commenti contenenti spam<\/em> (update del 26-8-2014<\/span>)
\n– Il numero totale delle firme\/commenti sar\u00e0 indicato nella pagina principale del Guestbook<\/em>
\n– Validazione W3C al 100%<\/em><\/p>\n

Andiamo a vedere la pagina principale del guestbook:<\/p>\n<\/span><\/p>\n

<?php\r\n\/\/ **THIS NOTE MUST STAY INTACT FOR LEGAL USE**\r\n\/\/ Work by flapane.com (last update 26\/aug\/2014)\r\n\/\/ More details at https:\/\/www.flapane.com\/blog\/2012\/09\/howto-guestbookcomment-system-in-ajax-e-php-con-un-pizzico-di-twitter\/\r\n\/\/ AJAX commenting system\/guestbook with a Twitter-like timeline which allows to show just a few comments per time. Captcha code for anti spam purposes included. All credits for the original code go to http:\/\/tutorialzine.com\/2010\/06\/simple-ajax-commenting-system\/ and http:\/\/www.9lessons.info\/2009\/12\/twitter-style-load-more-results-with.html\r\n\/\/ I mixed up both ideas, fixed some glitches, and added a Facebook widget, icons with the flag of the countries, automatic location system, captcha code, text validation, possibility to delete SPAM with a click, automated email system for guestbook owner and user who signed it.\r\n\/\/ You need to create a Deveoper Account on Facebook, and a Developer Account on ipinfodb.com for the API keys\r\n\/\/ Also, don't forget to setup your parameters on connect.php, and your email and website address at the top of submit.php for automated emails\r\n\/\/ copypaste.js fools spambots by disabling copy\/paste function for the confirmation code textfield, so that you MUST manually digit the confirmation code\r\nsession_start(); \/\/facebook login\r\nob_start(); \/\/started buffering - avoid facebook \"headers alredy sent\" error\r\n\r\n\/\/ Error reporting:\r\nerror_reporting(E_ALL^E_NOTICE);\r\n\r\ninclude \"inc\/connect.php\";\r\ninclude \"inc\/locate_ip.php\";\r\ninclude \"inc\/comment.class.php\";\r\n\r\n$result = mysqli_query($link, \"SELECT * FROM gbook_comments ORDER BY dt ASC\"); \/\/total number of comments\r\n$num_rows = mysqli_num_rows($result); \/\/total number of comments\r\n\r\n$top_countries = mysqli_query($link, \"SELECT country_code,COUNT(*) as count FROM gbook_comments GROUP BY country_code ORDER BY count DESC LIMIT 3\"); \/\/top commenters\r\n?>\r\n\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\">\r\n<head>\r\n<title>AJAX guestbook with Twitter-like timeline<\/title>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\" \/>\r\n<\/head>\r\n<body>\r\n\u00a0 <div>\r\n\u00a0\u00a0 \u00a0<div>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<h1>AJAX Guestbook! .:. <? echo \"$num_rows people signed it\"; ?><\/h1>\r\n\u00a0\u00a0 \u00a0<\/div>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<div class=\"box\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<?php\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"<div id='top_countries'><b>Top countries:<\/b><br \/>\"; \/\/top commenters\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0while ($row = mysqli_fetch_array($top_countries))\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$image = strtolower($row[0]) . \".png\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"<img src='\/guestbook\/inc\/img\/flags\/$image' alt='$image user flag' \/> <i>\".$row[1].\" firme<\/i><br \/>\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"<\/div>\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0mysqli_free_result($top_countries);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0include \"inc\/loadmore.php\"; \/\/Output the comments\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0?>\r\n\r\n<div id=\"addCommentContainer\">\r\n\u00a0\u00a0 \u00a0<p><b>Firma il Guestbook! \/ Sign the Guestbook!<\/b><\/p>\r\n\u00a0\u00a0 \u00a0<? include \"inc\/fb.php\"; ?>\r\n\u00a0\u00a0 \u00a0<br \/><br \/>\r\n\u00a0\u00a0 \u00a0<form id=\"addCommentForm\" method=\"post\" action=\"\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<label for=\"name\">Nome \/ Your Name<\/label>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<input type=\"text\" name=\"name\" id=\"name\" value=\"<? echo $fbname; ?>\" \/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label for=\"email\">Email \/ Your Email (nascosta \/ won't be shown)<\/label>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" name=\"email\" id=\"email\" value=\"<? echo $fbmail; ?>\" \/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label for=\"url\">Sito \/ Website (not required)<\/label>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" name=\"url\" id=\"url\" value=\"<? echo $fblink; ?>\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<label for=\"location\">Citt&agrave; \/ Your Location<\/label>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" name=\"location\" id=\"location\" value=\"<? echo $guest_ip; ?>\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"hidden\" name=\"country_code\" id=\"country_code\" value=\"<? echo $guest_ccode; ?>\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label for=\"body\">Testo \/ Comment Body<\/label>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <textarea name=\"body\" id=\"body\" cols=\"20\" rows=\"5\"><\/textarea>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 <label for=\"security_code\">Digita questo codice \/ Enter this code: <b><? echo $random_code; ?><\/b><\/label>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" name=\"security_code\" id=\"security_code\" \/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input name=\"randomness\" type=\"hidden\" id=\"randomness\" value=\"<?php echo $random_code; ?>\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"submit\" id=\"submit\" value=\"Submit\" \/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0 <\/form>\r\n<\/div> \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/div>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<\/div>\r\n\r\n<script type=\"text\/javascript\" src=\"inc\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"inc\/script.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"inc\/ajax_more.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"inc\/copypaste.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/span>\nCome indicato nelle note ad inizio file (da NON rimuovere<\/strong>), bisogna prima di tutto procurarsi una API key su ipinfodb<\/a> (per abilitare il riconoscimento automatico della citt\u00e0 e del Paese di provenienza dell’utente), e registrarsi su Facebook for Developers<\/a>, per ottenere l’API key e la secret key. Per i dettagli sul funzionamento e la configurazione di Facebook for Developers, rimando a questo vecchio post<\/a> del blog.<\/p>\n
Il file guestbook.php mostra il form di inserimento (nome, citt\u00e0, testo, codice CAPTCHA, ecc ecc), e va a richiamare i file secondari (connect.php per connettersi al database sql, locate_ip.php per la geolocalizzazione, fb.php per il login tramite Facebook, loadmore.php per caricare i commenti precedenti)<\/p>\n
Bisogner\u00e0 creare un nuovo database SQL, chiamato gbook_comments, utilizzando la riga di comando inclusa nel file table.sql disponibile per il download<\/strong> alla fine di questo post.<\/p>\n
Il file connect.php andr\u00e0 modificato con i vostri parametri di connessione, ovvero l’indirizzo del vostro server sql, ed i vostri username e password.<\/p>\n
Il file fb.php andr\u00e0 modificato, sostituendo ad ogni YOURAPPID e YOURSECRETKEY, i dati ottenuti registrandosi a Facebook for Developers.<\/p>\n
Il file locate_ip.php andr\u00e0 modificato, sostituendo ad YOURIPINFODBAPIKEY la propria API key ottenuta registrandosi ad ipinfodb.<\/p>\n
Il file submit.php andr\u00e0 modificato alle righe 9, 10, 60, 70, andando ad aggiungere il vostro indirizzo email (per essere avvisati via email quando un nuovo commento sar\u00e0 aggiunto al Guestbook), il vostro indirizzo web, ed il testo personalizzato da inviare agli utenti, una volta firmato il Guestbook.<\/p>\n
Il file styles.css contiene il css del Guestbook, e pu\u00f2 essere modificato a proprio piacimento.<\/p>\n
Dopo aver seguito questi passi, il file guestbook.php dovrebbe apparire proprio come nel Guestbook<\/a> del mio sito, e dovrebbe essere perfettamente funzionante!<\/p>\n
Tutto il materiale \u00e8 disponibile per il download a QUESTO LINK<\/a><\/strong>.<\/p>\n
Se utilizzate come host Altervista, che disabilita la funzione file_get_contents, utilizzate questa versione del file locate_ip.php<\/a>.<\/p>\n
Qualsiasi commento, aggiunta e link che mostrano il vostro guestbook in funzione, sono i benvenuti!<\/p>\n","protected":false},"excerpt":{"rendered":"
Da qualche mese ho finalmente aggiornato il mio Guestbook (vedilo in azione), che risaliva a quasi un decennio fa (2003!).
\nQuale migliore idea che crearne uno nuovo, sfruttando le ultime tecnologie?
\nPrendendo spunto da due ottime guide, ed aggiungendo nuove caratteristiche, ho creato un nuovo Guestbook che \u00e8 piacevole alla vista, grazie ad ombreggiature ed angoli arrotondati via CSS, e permette di mostrare un numero limitato di risultati per volta (9, nel mio caso), per non creare una pagina troppo lunga.[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[134,161,212,108,211,210,24,14,138],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts\/1130"}],"collection":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/comments?post=1130"}],"version-history":[{"count":0,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts\/1130\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/media?parent=1130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/categories?post=1130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/tags?post=1130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}