HOWTO: Guestbook/comment-system in AJAX e PHP con un pizzico di… Twitter
**ENGLISH VERSION CLICK HERE**
Da qualche mese ho finalmente aggiornato il mio Guestbook (vedilo in azione), che risaliva a quasi un decennio fa (2003!).
Era in HTML, non si poteva modificare se non per il colore dei caratteri, ed aveva un aspetto piuttosto “antiquato”.
Quale migliore idea che crearne uno nuovo, sfruttando le ultime tecnologie?
Prendendo spunto da due ottime guide (Tutorialzine e 9Lessons), ed aggiungendo nuove caratteristiche, ho creato un nuovo Guestbook che è 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.
Per caricare gli altri risultati (in questo caso, le firme lasciate nel Guestbook in passato), è possibile cliccare su un pulsante identico a quello che in Twitter permette di aggiornare la timeline, ed i risultati più vecchi appariranno dinamicamente nella pagina, con un effetto a scomparsa molto gradevole.
Veniamo alle caratteristiche:
– Supporta gli avatar Gravatar (a patto di inserire un indirizzo email valido)
– E’ possibile compilare automaticamente il modulo (nome, sito web, email, località) loggandosi tramite Facebook
– Sistema CAPTCHA antispam, che consiste in un codice numerico casuale da inserire nell’apposita casella di testo
– Località (città e paese) dell’utente aggiunta automaticamente, con tanto di bandierina del paese di provenienza aggiunta vicino ad ogni commento
– Elenco dei 3 paesi da cui si sono ricevute più firme/commenti
– Validazione dei campi (per controllare che l’indirizzo email o il sito web inseriti siano validi)
– Ad ogni nuovo commento, verrà inviata una e-mail automatica al proprietario del Guestbook, col nome ed il testo dell’utente. A quest’ultimo, verrà inviata una mail di ringraziamenti
– Ogni email che riceverete dopo ogni commento, conterrà un link per cancellare, con un solo click, eventuali commenti contenenti spam (update del 26-8-2014)
– Il numero totale delle firme/commenti sarà indicato nella pagina principale del Guestbook
– Validazione W3C al 100%
Andiamo a vedere la pagina principale del guestbook:
<?php
// **THIS NOTE MUST STAY INTACT FOR LEGAL USE**
// Work by flapane.com (last update 26/aug/2014)
// More details at https://www.flapane.com/blog/2012/09/howto-guestbookcomment-system-in-ajax-e-php-con-un-pizzico-di-twitter/
// 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
// 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.
// You need to create a Deveoper Account on Facebook, and a Developer Account on ipinfodb.com for the API keys
// 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
// copypaste.js fools spambots by disabling copy/paste function for the confirmation code textfield, so that you MUST manually digit the confirmation code
session_start(); //facebook login
ob_start(); //started buffering - avoid facebook "headers alredy sent" error
// Error reporting:
error_reporting(E_ALL^E_NOTICE);
include "inc/connect.php";
include "inc/locate_ip.php";
include "inc/comment.class.php";
$result = mysqli_query($link, "SELECT * FROM gbook_comments ORDER BY dt ASC"); //total number of comments
$num_rows = mysqli_num_rows($result); //total number of comments
$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
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AJAX guestbook with Twitter-like timeline</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<div>
<h1>AJAX Guestbook! .:. <? echo "$num_rows people signed it"; ?></h1>
</div>
<div class="box">
<?php
echo "<div id='top_countries'><b>Top countries:</b><br />"; //top commenters
while ($row = mysqli_fetch_array($top_countries))
{
$image = strtolower($row[0]) . ".png";
echo "<img src='/guestbook/inc/img/flags/$image' alt='$image user flag' /> <i>".$row[1]." firme</i><br />";
}
echo "</div>";
mysqli_free_result($top_countries);
include "inc/loadmore.php"; //Output the comments
?>
<div id="addCommentContainer">
<p><b>Firma il Guestbook! / Sign the Guestbook!</b></p>
<? include "inc/fb.php"; ?>
<br /><br />
<form id="addCommentForm" method="post" action="">
<div>
<label for="name">Nome / Your Name</label>
<input type="text" name="name" id="name" value="<? echo $fbname; ?>" />
<label for="email">Email / Your Email (nascosta / won't be shown)</label>
<input type="text" name="email" id="email" value="<? echo $fbmail; ?>" />
<label for="url">Sito / Website (not required)</label>
<input type="text" name="url" id="url" value="<? echo $fblink; ?>" />
<label for="location">Città / Your Location</label>
<input type="text" name="location" id="location" value="<? echo $guest_ip; ?>" />
<input type="hidden" name="country_code" id="country_code" value="<? echo $guest_ccode; ?>" />
<label for="body">Testo / Comment Body</label>
<textarea name="body" id="body" cols="20" rows="5"></textarea>
<label for="security_code">Digita questo codice / Enter this code: <b><? echo $random_code; ?></b></label>
<input type="text" name="security_code" id="security_code" />
<input name="randomness" type="hidden" id="randomness" value="<?php echo $random_code; ?>" />
<input type="submit" id="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="inc/jquery.min.js"></script>
<script type="text/javascript" src="inc/script.js"></script>
<script type="text/javascript" src="inc/ajax_more.js"></script>
<script type="text/javascript" src="inc/copypaste.js"></script>
</body>
</html>
Come indicato nelle note ad inizio file (da NON rimuovere), bisogna prima di tutto procurarsi una API key su ipinfodb (per abilitare il riconoscimento automatico della città e del Paese di provenienza dell’utente), e registrarsi su Facebook for Developers, 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 del blog.
Il file guestbook.php mostra il form di inserimento (nome, città, 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)
Bisognerà creare un nuovo database SQL, chiamato gbook_comments, utilizzando la riga di comando inclusa nel file table.sql disponibile per il download alla fine di questo post.
Il file connect.php andrà modificato con i vostri parametri di connessione, ovvero l’indirizzo del vostro server sql, ed i vostri username e password.
Il file fb.php andrà modificato, sostituendo ad ogni YOURAPPID e YOURSECRETKEY, i dati ottenuti registrandosi a Facebook for Developers.
Il file locate_ip.php andrà modificato, sostituendo ad YOURIPINFODBAPIKEY la propria API key ottenuta registrandosi ad ipinfodb.
Il file submit.php andrà modificato alle righe 9, 10, 60, 70, andando ad aggiungere il vostro indirizzo email (per essere avvisati via email quando un nuovo commento sarà aggiunto al Guestbook), il vostro indirizzo web, ed il testo personalizzato da inviare agli utenti, una volta firmato il Guestbook.
Il file styles.css contiene il css del Guestbook, e può essere modificato a proprio piacimento.
Dopo aver seguito questi passi, il file guestbook.php dovrebbe apparire proprio come nel Guestbook del mio sito, e dovrebbe essere perfettamente funzionante!
Tutto il materiale è disponibile per il download a QUESTO LINK.
Se utilizzate come host Altervista, che disabilita la funzione file_get_contents, utilizzate questa versione del file locate_ip.php.
Qualsiasi commento, aggiunta e link che mostrano il vostro guestbook in funzione, sono i benvenuti!