DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Live chat adalah salah satu fitur yang sering kita temukan di berbagai situs web. Fitur ini memungkinkan pengunjung untuk berkomunikasi langsung dengan pemilik situs atau customer service. Jika kamu sedang mencari cara membuat live chat dengan menggunakan PHP dan MySQL, kamu berada di tempat yang tepat. Di bawah ini adalah langkah-langkah mudah yang dapat kamu ikuti.
Sebelum memulai, pastikan kamu sudah memiliki database di MySQL. Kamu bisa membuat sebuah database dengan nama live_chat
.
Dalam database live_chat
, buat tabel dengan nama messages
. Tabel ini akan menyimpan data percakapan.
CREATE TABLE `messages` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`message` text NOT NULL,
`timestamp` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Buat file config.php
untuk menyimpan informasi koneksi ke database MySQL kamu.
<?php
$koneksi = mysqli_connect("localhost","username_mysql","password_mysql","nama_database");
if (mysqli_connect_errno()){
echo "Gagal melakukan koneksi ke MySQL: " . mysqli_connect_error();
}
?>
Ganti username_mysql
, password_mysql
, dan nama_database
dengan kredensial database kamu.
Buat file chat_handler.php
yang akan menangani pengiriman dan penerimaan pesan.
<?php
include 'config.php';
// Menerima pesan dari pengguna dan menyimpannya ke database
if(isset($_POST['message'])){
$username = $_POST['username'];
$message = $_POST['message'];
$query = "INSERT INTO messages (username, message) VALUES ('{$username}', '{$message}')";
if(mysqli_query($koneksi, $query)){
echo "Pesan berhasil dikirim.";
}
}
// Mengambil pesan dari database
$query = "SELECT * FROM messages";
$result = mysqli_query($koneksi, $query);
$chat = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($chat);
?>
Dengan script ini, kamu sudah bisa mengirim pesan dan juga menampilkan pesan yang sudah tersimpan di database.
Buat file index.php
untuk tampilan chat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Chat</title>
</head>
<body>
<div id="chat-box">
<!-- Tempat untuk menampilkan chat -->
</div>
<input type="text" id="username" placeholder="Nama Kamu">
<textarea id="message" placeholder="Tulis pesan kamu..."></textarea>
<button id="send-message">Kirim Pesan</button>
<script>
// Script untuk mengirim dan menerima pesan
</script>
</body>
</html>
Tambahkan script JavaScript pada index.php
untuk mengontrol kirim dan terima pesan.
document.getElementById('send-message').addEventListener('click', function(){
var username = document.getElementById('username').value;
var message = document.getElementById('message').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'chat_handler.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
// Tampilkan pesan
console.log(this.responseText);
};
xhr.send('username=' + username + '&message=' + message);
});
Jangan lupa untuk refresh pesan secara teratur agar pengguna dapat melihat pesan masuk secara real-time tanpa harus memuat ulang halaman.
setInterval(function(){
/* Domin diisi dengan Kode Untuk Mengambil Pesan dari Server dan menampilkannya */
}, 1000);
Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat sistem live chat sederhana menggunakan PHP dan MySQL. Selamat mencuba!
Link terkait: