Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT LIVE CHAT PHP MYSQL

Panduan langkah demi langkah membuat sistem live chat menggunakan PHP dan MySQL, cocok untuk pemula yang ingin menambahkan fitur percakapan secara real-time pada situs web mereka.

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.

Persiapan Database

Sebelum memulai, pastikan kamu sudah memiliki database di MySQL. Kamu bisa membuat sebuah database dengan nama live_chat.

Membuat Tabel Percakapan

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;

Koneksi ke Database

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.

Membuat Script Untuk Mengirim dan Menerima Pesan

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.

Membuat Tampilan Chat

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!

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding