Membuat Aplikasi Chat Dengan PHP Ajax

Pada Kesempatan kali ini saya akan memberikan tutorial mengenai cara membuat aplikasi chat dengan php, aplikasi ini dapat anda gunakan di website anda sehingga akan lebih menarik dengan adanya chat dengan pengunjung web kita.

Sebelum kita memulai membuat aplikasi chat, alangkah baiknya kita mempersiapkan alat dan aplikasi yang akan kita gunakan dalam proses pembuatan aplikasi chat ini.

Aplikasi Yang Digunakan Untuk Membuat Aplikasi Chat dengan PHP

Aplikasi Xampp
Aplikasi Web Browser
Aplikasi Text Editor

Ketiga aplikasi inilah yang akan kita gunakan, langkah awal yaitu dengan menginstall dan mengaktifkan Apache dan MySQL pada aplikasi Xammp yang sudah terinstall ke dalam aplikasi anda.

Langkah kedua yaitu membuat database MySQL dengan cara membuka aplikasi web browser yang ada pada komputer anda, seperti : Mozila Firefox, Opera Mini, Windows Explorer, dll. Kemudian ketikkan "localhost" pada address bar, kemudian buatlah sebuah database dengan nama "massages" dan tabel "massages".

Setelah membuat database MySQL, selanjutnya yaitu dengan membuka aplikasi text editor yang sudah terinstall pada komputer anda, sebagai contoh text editor yang bisa anda gunakan yaitu : Notepad, Notepad ++, Sublime Text, Dreamweaver, Microsoft Front Page, dll. Namun pada kesempatan kali ini saya akan menggunakan text editor yang paling banyak digunakan yaitu Sublime Text.

Buatlah sebuah halaman index.php seperti berikut ini.

<!doctype>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jscolor.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#messages').hide();
$('#messages').show();
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
},
complete: function() {
$('#messages').hide();
$('#messages').show();
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
},
success: function() {
$('#messages').hide();
$('#messages').show();
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
}
});
var $container = $("#messages");
$container.load('ajaxload.php?id=<?php echo 'a' ?>');
var refreshId = setInterval(function()
{
$container.load('ajaxload.php?id=<?php echo 'a' ?>');
}, 3000);
$("#userArea").submit(function() {

$.post('ajaxPost.php', $('#userArea').serialize(), function(data) {
$("#messages").append(data);
$("#messages").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");
document.getElementById("output").value = "";
});
return false;
});
});
</script>

</head>
<body>
<div id="chatwrapper">


<div id="messages"></div>

<form id="userArea">
<div id="usercolor">
<input type="text" name="user" placeholder="User" required="required" value="argie" id="text" style="margin-bottom: 5px;" />
<input name="text" class="color" id="text" maxlength="6" value="000000" />
</div>
<div id="messagesntry">
<textarea id="output" name="messages" placeholder="Message" /></textarea>
</div>
<div id="messagesubmit">
<input type="submit" value="Post message" id="submitmessage" />
</div>
</form>
</div>
</body>
</html>

Selanjutnya simpan dengan nama "index.php" . Untuk langkah selanjutnya silahkan download sourcecode aplikasi chat dengan php dibawah ini.

Membuat Aplikasi Chat Dengan PHP Ajax