In navolging van mijn eerdere post over jQuery inladen via Google Code, hebben we ook maar daadwerkelijk iets in elkaar geknutseld. Een shoutbox, volledig via AJAX d.m.v. jQuery. Oh, voor wat extra’s heb ik er maar het stempeltje “happy” bij geplakt. Geef me feedback of leer er zelf van!
De demo vindt je hier, de bijbehorende stylesheet hier en de code hieronder:
<?php
/* Stef van der Linden 2010 */
/*
CREATE TABLE `shoutbox` (
`shout_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(25) NOT NULL,
`message` varchar(140) NOT NULL,
`date` int(11) NOT NULL,
`ipaddress` int(15) NOT NULL,
PRIMARY KEY (`shout_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
*/
// mySQL connectie
if ( !mysql_connect('localhost', '', '') || !mysql_select_db('') ) {
die('Er is een storing opgetreden, onze excuses voor het ongemak.');
}
$action = ( $_GET['do'] ) ? htmlspecialchars(trim($_GET['do'])) : '';
$colours = array("blue", "green", "purple", "brown", "red", "orange", "green_2", "blue_2", "red_2");
switch($action) {
case 'load':
$sql = "SELECT `username`, `message`, `date`
FROM `shoutbox`
ORDER BY `date` DESC";
$result = mysql_query($sql);
while ( $row = mysql_fetch_array($result) ) {
echo '<div class="entry ' . $colours[rand(0,9)] . '"><p>' . stripslashes($row['message']) . '<small>' . stripslashes($row['username']) . ' - ' . date("d/m/Y H:i", $row['date']) . '</small></p></div>';
}
exit;
break;
case 'save':
$username = ( isset($_POST['username']) ) ? addslashes(htmlspecialchars($_POST['username'])) : '';
$message = ( isset($_POST['message']) ) ? addslashes(htmlspecialchars($_POST['message'])) : '';
$date = time();
$ipaddress = $_SERVER['REMOTE_ADDR'];
$sql = "INSERT INTO `shoutbox`
(`username`, `message`, `date`, `ipaddress`)
VALUES ('$username', '$message', '$date', '$ipaddress');";
mysql_query($sql);
exit;
break;
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>jQuery: Happy Shoutbox</title>
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
<script src="http://www.google.com/jsapi"></script>
<script language="Javascript" type="text/javascript">
google.load("jquery", '1');
function saveShout() {
if ( document.shoutbox.username.value == '' ) {
alert('Fill in your username please!');
document.shoutbox.username.focus();
} else {
jQuery.post('./index.php?do=save', { username: document.shoutbox.username.value, message: document.shoutbox.message.value }, function(data) {
loadShout();
document.shoutbox.message.value = '';
});
}
}
function checkMaxLength(textarea) {
var maxlength = 140;
var valuelength = textarea.value.length;
if ( valuelength > maxlength ) {
alert('Oops! Only 140 chars max..');
textarea.value = textarea.value.substring(0, maxlength)
}
}
function loadShout () {
jQuery("#shouts").load('./index.php?do=load');
}
google.setOnLoadCallback(function() {
loadShout();
});
setInterval("loadShout()", 1000);
</script>
</head>
<body>
<div id="container">
<h1>happy shoutbox</h1>
<form name="shoutbox" onsubmit="saveShout(); return false;">
<fieldset>
<legend>Try me!</legend>
<label for="username">username</label>
<input type="text" name="username" id="username" size="18" maxlength="20" /> <br />
<label for="message">message</label>
<textarea name="message" id="message" cols="25" rows="2" onkeyup="return checkMaxLength(this)"></textarea> <br />
<input type="submit" name="submit" value="Shout!" />
</fieldset>
</form>
<div id="shouts"></div>
</div>
</body>
</html>
/* Stef van der Linden 2010 */
/*
CREATE TABLE `shoutbox` (
`shout_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(25) NOT NULL,
`message` varchar(140) NOT NULL,
`date` int(11) NOT NULL,
`ipaddress` int(15) NOT NULL,
PRIMARY KEY (`shout_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
*/
// mySQL connectie
if ( !mysql_connect('localhost', '', '') || !mysql_select_db('') ) {
die('Er is een storing opgetreden, onze excuses voor het ongemak.');
}
$action = ( $_GET['do'] ) ? htmlspecialchars(trim($_GET['do'])) : '';
$colours = array("blue", "green", "purple", "brown", "red", "orange", "green_2", "blue_2", "red_2");
switch($action) {
case 'load':
$sql = "SELECT `username`, `message`, `date`
FROM `shoutbox`
ORDER BY `date` DESC";
$result = mysql_query($sql);
while ( $row = mysql_fetch_array($result) ) {
echo '<div class="entry ' . $colours[rand(0,9)] . '"><p>' . stripslashes($row['message']) . '<small>' . stripslashes($row['username']) . ' - ' . date("d/m/Y H:i", $row['date']) . '</small></p></div>';
}
exit;
break;
case 'save':
$username = ( isset($_POST['username']) ) ? addslashes(htmlspecialchars($_POST['username'])) : '';
$message = ( isset($_POST['message']) ) ? addslashes(htmlspecialchars($_POST['message'])) : '';
$date = time();
$ipaddress = $_SERVER['REMOTE_ADDR'];
$sql = "INSERT INTO `shoutbox`
(`username`, `message`, `date`, `ipaddress`)
VALUES ('$username', '$message', '$date', '$ipaddress');";
mysql_query($sql);
exit;
break;
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>jQuery: Happy Shoutbox</title>
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
<script src="http://www.google.com/jsapi"></script>
<script language="Javascript" type="text/javascript">
google.load("jquery", '1');
function saveShout() {
if ( document.shoutbox.username.value == '' ) {
alert('Fill in your username please!');
document.shoutbox.username.focus();
} else {
jQuery.post('./index.php?do=save', { username: document.shoutbox.username.value, message: document.shoutbox.message.value }, function(data) {
loadShout();
document.shoutbox.message.value = '';
});
}
}
function checkMaxLength(textarea) {
var maxlength = 140;
var valuelength = textarea.value.length;
if ( valuelength > maxlength ) {
alert('Oops! Only 140 chars max..');
textarea.value = textarea.value.substring(0, maxlength)
}
}
function loadShout () {
jQuery("#shouts").load('./index.php?do=load');
}
google.setOnLoadCallback(function() {
loadShout();
});
setInterval("loadShout()", 1000);
</script>
</head>
<body>
<div id="container">
<h1>happy shoutbox</h1>
<form name="shoutbox" onsubmit="saveShout(); return false;">
<fieldset>
<legend>Try me!</legend>
<label for="username">username</label>
<input type="text" name="username" id="username" size="18" maxlength="20" /> <br />
<label for="message">message</label>
<textarea name="message" id="message" cols="25" rows="2" onkeyup="return checkMaxLength(this)"></textarea> <br />
<input type="submit" name="submit" value="Shout!" />
</fieldset>
</form>
<div id="shouts"></div>
</div>
</body>
</html>
