Phit
Cú Đêm Member
- Tham gia
- 17/8/21
- Bài viết
- 397
- Lượt thích
- 281
Đây là code tạo chatbox đơn giản sử dụng ajax, bootstrap, supabase, php và phân trang.
Demo:
Đây là các bước cơ bản để tạo một chatbox đơn giản sử dụng ajax, bootstrap, supabase, php và phân trang. Tuy nhiên, còn nhiều cải tiến và tùy chỉnh khác bạn có thể thực hiện để tạo ra một chatbox hoàn chỉnh và chuyên nghiệp hơn.
Nguồn : KhaiPhan - tiaxgame.tk
Demo:
1. Tạo cơ sở dữ liệu trên Supabase:
Trước tiên, bạn cần đăng ký tài khoản Supabase và tạo một cơ sở dữ liệu mới. Sau đó, bạn có thể sử dụng Supabase để lưu trữ các tin nhắn trong chatbox của bạn.
Mã:
CREATE TABLE messages (
id SERIAL PRIMARY KEY,
username TEXT,
message TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);2. Tạo trang web cho chatbox:
Tạo một trang web đơn giản với một form để người dùng nhập tin nhắn và một danh sách để hiển thị các tin nhắn đã được gửi. Bạn có thể sử dụng Bootstrap để tạo giao diện cho trang web của bạn. Lưu trữ trang web dưới dạng tệp HTML và đặt tên là index.html.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>Chatbox</h1>
<form id="chat-form" class="form-inline mt-3">
<input type="text" name="username" placeholder="Username" class="form-control mr-2">
<input type="text" name="message" placeholder="Message" class="form-control mr-2">
<button type="submit" class="btn btn-primary">Send</button>
</form>
<div id="chat-messages" class="mt-3"></div>
<nav aria-label="Pagination" id="pagination">
<ul class="pagination">
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="chatbox.js"></script>
</body>
</html>3. Viết mã PHP để xử lý các yêu cầu của chatbox:
Tạo một tệp PHP để nhận các yêu cầu từ trang web của bạn và trả về dữ liệu cần thiết. Tên tệp PHP có thể là chatbox.php.
PHP:
<?php
require('vendor/autoload.php');
use \Supabase\Client;
use \Supabase\SupabaseException;
$client = new Client($SUPABASE_URL, $SUPABASE_KEY);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$message = $_POST['message'];
$username = $_POST['username'];
try {
$result = $client->from('messages')
->insert([
'username' => $username,
'message' => $message,
])
->execute();
} catch (SupabaseException $e) {
http_response_code(500);
echo $e->getMessage();
exit();
}
http_response_code(200);
echo 'Message sent.';
exit();
}
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$page = $_GET['page'] ?? 1;
$limit = 10;
try {
$result = $client->from('messages')
->select('*')
->order('created_at', Client::ORDER_DESC)
->range(($page - 1) * $limit, $page * $limit - 1)
->execute();
} catch (SupabaseException $e) {
http_response_code(500);
echo $e->getMessage();
exit();
}
$messages = $result->getRows();
echo json_encode($messages);
exit();
}4. Viết mã JavaScript để thực hiện các yêu cầu AJAX và hiển thị các tin nhắn:
Viết một tệp JavaScript để thực hiện các yêu cầu AJAX và hiển thị các tin nhắn được lưu trữ trong cơ sở dữ liệu. Tên tệp JavaScript có thể là chatbox.js.
JavaScript:
$(document).ready(function() {
// Load messages on page load
loadMessages(1);
// Submit message form
$('#chat-form').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'chatbox.php',
type: 'POST',
data: $(this).serialize(),
success: function(response) {
$('#chat-form')[0].reset();
loadMessages(1);
},
error: function(xhr, status, error) {
alert('Error: ' + xhr.responseText);
}
});
});
});
function loadMessages(page) {
$.ajax({
url: 'chatbox.php?page=' + page,
type: 'GET',
dataType: 'json',
success: function(response) {
// Clear messages
$('#chat-messages').empty();
// Append messages
$.each(response, function(key, message) {
$('#chat-messages').append('<div><strong>' + message.username + ':</strong> ' + message.message + '</div>');
});
// Update pagination
updatePagination(page);
},
error: function(xhr, status, error) {
alert('Error: ' + xhr.responseText);
}
});
}
function updatePagination(currentPage) {
$.ajax({
url: 'chatbox.php',
type: 'HEAD',
success: function(response, status, xhr) {
var totalItems = xhr.getResponseHeader('X-Total-Count');
var totalPages = Math.ceil(totalItems / 10);
// Clear pagination
$('#pagination ul').empty();
// Create pagination links
for (var i = 1; i <= totalPages; i++) {
var active = i === currentPage ? ' active' : '';
var listItem = '<li class="page-item' + active + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
$('#pagination ul').append(listItem);
}
// Add click event to pagination links
$('#pagination ul li a').click(function(e) {
e.preventDefault();
loadMessages($(this).data('page'));
});
},
error: function(xhr, status, error) {
alert('Error: ' + xhr.responseText);
}
});
}5. Đưa trang web và mã PHP và JavaScript lên máy chủ web:
Sử dụng FTP hoặc các công cụ đưa tệp lên máy chủ web để đưa các tệp HTML, PHP và JavaScript lên máy chủ web của bạn. Sau đó, truy cập trang web của bạn để kiểm tra chatbox của bạn hoạt động như thế nào.Đây là các bước cơ bản để tạo một chatbox đơn giản sử dụng ajax, bootstrap, supabase, php và phân trang. Tuy nhiên, còn nhiều cải tiến và tùy chỉnh khác bạn có thể thực hiện để tạo ra một chatbox hoàn chỉnh và chuyên nghiệp hơn.
Nguồn : KhaiPhan - tiaxgame.tk
Sửa lần cuối:
