- Code: Selecteer alles
<?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>
Evt. stylesheet: http://stefft.nl/temp/jquery-happy-shou ... esheet.css
Wat denken jullie ervan, is het leuk, zouden jullie stukjes anders doen? TELL ME!
maar ik heb leuk met jquery en google.load gewerkt enzo.