Membuat Chatbox Sederhana dengan Ajax jQuery dan PHP PDO Oleh: Ananda Mukhammad Ikhsan
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 dibutu...
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: 1. Index.php (UI dari Aplikasi) 2. 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. <meta charset="UTF-8">
Aplikasi Chatting <script src="libs/jquery-2.1.4.min.js"> <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; }
<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(""); }); }); 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.
query($sql); while($res = $query->fetch(PDO::FETCH_OBJ)){ echo "
".$res->name." : ".$res->massage."
$res->datetime
"; } }
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 "
".$res->name." : ".$res->massage."
$res->datetime
";
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.
Tentang Penulis
Ananda Mukhammad Ikhsan Hanya Pelajar yang terobsesi dengan bahasa pemrograman
