Chatbox adalah fitur yang cukup penting di website berbasis sosial media. Nah, kali ini saya akan memberikan tutorial dasar untuk membuat chatbox ini. Langsung saja, Aplikasi ini terdapat 2 file:
- Index.php (UI dari Aplikasi)
- proses.php (file untuk memproses data)
Dan untuk membuat aplikasi ini dibutuhkan :
- PHP 5.4
- MySQL
- Notepad++
- jQuery 2.1.4
LANGKAH PERTAMA: Membuat Database
Database ini kita beri nama latihan dan memiliki fungsi untuk menyimpan data-data yang user masukan.
lalu buat tabel dengan struktur sebagai berikut:
CREATE TABLE `ajax` (
`name` varchar(12),
`massage` text,
`datetime` Date
)
LANGKAH KEDUA: Membuat file index.php
Seperti dijelaskan diatas tadi file ini berfungsi sebagai user interface dari aplikasi dan juga proses AJAX terjadi di sini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aplikasi Chatting</title>
<script src="libs/jquery-2.1.4.min.js"></script>
<style>
.box{
width: 400px;
background: #BDBDBD;
padding: 10px;
}
.content{
padding: 0;
height: 350px;
overflow: hidden;
background: #FFF;
}
.content li{
font-size: 12px;
list-style: none;
}
.content li .date{
text-align: right;
}
.form{
margin: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div class="box">
<ul class='content'>
</ul>
<div class="form">
<input type="text" id="name">
<input type="text" id="massage">
<input type="submit" id="send" value="Send">
</div>
</div>
</body>
<script>
$(document).ready(function(){
function show(){
$.ajax({
type: "POST",
url: "proses.php",
data: "action=show",
success: function(data){
$('.content').html(data);
}
});
};
setInterval(function(){
show();
},1000);
$("#send").click(function(){
var name = $("#name").val();
var massage = $("#massage").val();
$.ajax({
type: "POST",
url: "proses.php",
data: "action=insert&nama="+name+"&pesan="+massage,
success: function(data){
show();
}
});
$("#name").val("");
$("#massage").val("");
});
});
</script>
</html>
Langsung bahas saja skrip JavaScript:
-
function show(){ $.ajax({ type: "POST", url: "proses.php", data: "action=show", success: function(data){ $('.content').html(data); } }); };
Skrip diatas adalah untuk membuat function yang berisi proses AJAX yang mengirim data action yang memiliki value show.
data ini berfungsi untuk pemrosesan nantinya.
-
setInterval(function(){ show(); },1000);
File ini berfungsi untuk merefresh halaman setiap detik agar aplikasi lebih responsif.
-
$("#send").click(function(){ var name = $("#name").val(); var massage = $("#massage").val(); $.ajax({ type: "POST", url: "proses.php", data: "action=insert&nama="+name+"&pesan="+massage, success: function(data){ show(); } }); $("#name").val(""); $("#massage").val(""); });
Skrip diatas juga terdapat proses AJAX yang mengirim data action yang memiliki value insert dan mengirim data dari value form input dari aplikasi.
LANGKAH KETIGA: Membuat file proses.php
File ini berfungsi sebagai pemrosesan data dari index.php ke database dan sebaliknya.
<?php
if(isset($_POST['action'])){
$db = new PDO('mysql:host=localhost;dbname=latihan','root','mysql');
$action = $_POST['action'];
if($action == "show"){
$sql = "SELECT * FROM ajax";
$query = $db->query($sql);
while($res = $query->fetch(PDO::FETCH_OBJ)){
echo "<li><p class='pesan'>".$res->name." : ".$res->massage."</p><p class='date'>$res->datetime</p></li>";
}
}
elseif($action == "insert"){
$d = date('Y-m-d');
$sql = "INSERT INTO ajax(name,massage,datetime) VALUES('$_POST[nama]','$_POST[pesan]','$d')";
$query = $db->query($sql);
}
}
?>
Penjelasan:
-
if(isset($_POST['action'])){
File hanya akan belajar jika $_POST['action'] telah diset
-
$db = new PDO('mysql:host=localhost;dbname=latihan','root','mysql');
Membuat koneksi dengan teknik PDO.
-
if($action == "show"){ $sql = "SELECT * FROM ajax"; $query = $db->query($sql); while($res = $query->fetch(PDO::FETCH_OBJ)){ echo "<li><p class='pesan'>".$res->name." : ".$res->massage."</p><p class='date'>$res->datetime</p></li>";
Ini adalah skripp untuk melakukan interaksi dengan database untuk menampilkan data di index.php
-
elseif($action == "insert"){ $d = date('Y-m-d'); $sql = "INSERT INTO ajax(name,massage,datetime) VALUES('$_POST[nama]','$_POST[pesan]','$d')"; $query = $db->query($sql); }
Ini adalah skrip untuk melakukan inserting data ke database.
Oke sekian Tutorial kali ini. Aplikasi ini sangat sederhana. Dan masih dapat dikembangkan dengan hal-hal menarik. Tinggal sejauh mana kreatifitas kalian.
