Web sitemizde yer alan; ürün, haber, kitap, hikaye vb gibi verilere kullanıcıların yorum yapmaları ve düşünceleri yazmalarını sağlayan formlar oldukca popülerdir. Bu örnegimizde kullanıcı adı ve mesajını yazdığı anda sayfa yenilemesi olmadan Ajax ile mesajı veri tabanına kaydediyoruz ve mesajların yer aldığı “Son Mesajlar” bölümünde gösteriyoruz.
Verileri veri tabanımızda tutarken veritabanı adı exmpleshort, tablo adı ise shoutbox. shoutbox tablomuz içerisinde; id, user, message , date veri sütunları var. Veri tabanı dosyalarımız ugulama örneği içerisindedir.
Html sayfa kodlarımız
<!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" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Gumusluoglu.com - AJAX ile jQuery Kullanıcı Mesaj Formu</title> <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" /> </head> <body> <form method="post" id="form"> <table> <tr> <td><label>Kullanıcı Adı</label></td> <td><input id="nick" type="text" MAXLENGTH="25" /></td> </tr> <tr> <td><label>Mesaj</label></td> <td><input id="message" type="text" MAXLENGTH="255" /></td> </tr> <tr> <td></td> <td><input id="send" type="submit" value="Mesajı Yola" /></td> </tr> </table> </form> <div id="container"> <ul> <li>Mesaj Kutusu</li> </ul> <span></span> <div> <h1>Son Mesajlar</h1> <div id="loading"><img src="css/images/loading.gif" alt="Loading..." /></div> <ul> <ul> </div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="shoutbox.js"></script> </body> </html>
Javascript kodlarımız (shoutbox.js)
$(document).ready(function(){
//global vars
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > ul");
//functions
function updateShoutbox(){
//just for the fade effect
messageList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn(2000);
}
});
}
//check if all fields are filled
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
//Load for the first time the shoutbox data
updateShoutbox();
//on submit event
$("#form").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
//we deactivate submit button while sending
$("#send").attr({ disabled:true, value:"Sending..." });
$("#send").blur();
//send the post to shoutbox.php
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data){
messageList.html(data.responseText);
updateShoutbox();
//reactivate the send button
$("#send").attr({ disabled:false, value:"Shout it!" });
}
});
}
else alert("Lütfen boş alanları doldurunuz.");
return false;
});
});
Sıra, verileri veri tabanımıza kaydeden ve mevcut verileri formumuzun olduğu sayfada gösteren shoutbox.php dosyamızı oluşturmada.
<?php
define("HOST", "localhost");
define("USER", "root");
define("PASSWORD", "");
define("DB", "exmpleshort");
function connect($db, $user, $password){
$link = @mysql_connect($db, $user, $password);
if (!$link)
die("Bağlantı sağlanamıyor ".mysql_error());
else{
$db = mysql_select_db(DB);
if(!$db)
die("Veri tabanı seçilemiyor: ".mysql_error());
else return $link;
}
}
function getContent($link, $num){
$res = @mysql_query("SELECT date, user, message FROM shoutbox ORDER BY date DESC LIMIT ".$num, $link);
if(!$res)
die("Error: ".mysql_error());
else
return $res;
}
function insertMessage($user, $message){
$tarih=date(Y.'-'.m.'-'.d);
$query = sprintf("INSERT INTO shoutbox(user, message,date) VALUES('%s', '%s', '".$tarih."');", mysql_real_escape_string(strip_tags($user)), mysql_real_escape_string(strip_tags($message)));
$res = @mysql_query($query);
if(!$res)
die("Error: ".mysql_error());
else
return $res;
}
if(!$_POST['action']){
header ("Location: index.html");
}
else{
$link = connect(HOST, USER, PASSWORD);
switch($_POST['action']){
case "update":
$res = getContent($link, 20);
while($row = mysql_fetch_array($res)){
$result .= "<li><strong>".$row['user']."</strong><img src=\"css/images/bullet.gif\" alt=\"-\" />".$row['message']." </li>";
}
echo $result;
break;
case "insert":
echo insertMessage($_POST['nick'], $_POST['message']);
break;
}
mysql_close($link);
}
?>
3 Comments
uygulama dosyaları yok indirilemiyor
iyide bunun veritabanı yok. sadece kodlarını paylaşmişsin
adam veritabanına acılcak dosyaları söylemiş dosya içeriklerinide vermiş daha ne istionuz :=