Trong hướng dẫn này, chúng ta sẽ tạo ra một ứng dụng chat đơn giản trên nền web với PHP và jQuery. Loại tiện ích này sẽ hoàn hảo cho một hệ thống hỗ trợ trực tiếp đối với trang web của bạn.
Giới thiệu
Ứng dụng chat mà chúng ta sẽ xây dựng hôm nay là khá đơn giản. Nó sẽ bao gồm một hệ thống đăng nhập và đăng xuất, các tính năng theo phong cách AJAX, và cũng sẽ hỗ trợ đa người dùng.
Bước 1: Markup HTML
Chúng ta sẽ bắt đầu hướng dẫn này bằng cách tạo ra tập tin đầu tiên của chúng ta gọi index.php.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
</body>
</html>- Chúng ta bắt đầu html với các thẻ DOCTYPE, html, head, và body. Trong thẻ head, chúng ta thêm tiêu đề, và liên kết đến stylesheet css của chúng ta (style.css).
- Bên trong thẻ body, chúng ta cấu trúc layout của chúng ta bên trong thẻ div #wrapper. Chúng ta sẽ có ba khối chính: một Menu đơn giản, chatbox, và input để nhập tin nhắn của chúng ta; mỗi cái đi kèm với div và id tương ứng của nó.
- Thẻ div #menu sẽ bao gồm hai phần tử đoạn văn. Phần tử đầu tiên sẽ là một thông điệp chào mừng người dùng và sẽ trôi về bên trái và phần tử thứ hai sẽ là một liên kết thoát và sẽ trôi về bên phải. Chúng ta cũng bao gồm một div để xóa các phần tử.
- Thẻ div #chatbox sẽ chứa chatlog của chúng ta. Chúng ta sẽ nạp log từ một tập tin bên ngoài bằng cách sử dụng yêu cầu ajax của jQuery.
- Phần tử cuối cùng trong div #wrapper sẽ là form của chúng ta, trong đó sẽ bao gồm một input cho tin nhắn của người dùng và một nút submit.
- Chúng ta thêm các script của chúng ta ở cuối để tải trang nhanh hơn. Đầu tiên chúng ta sẽ liên kết với jQuery CDN của Google, vì chúng ta sẽ sử dụng thư viện jQuery cho hướng dẫn này. Thẻ script thứ hai sẽ là nơi mà chúng ta làm việc. Chúng ta sẽ nạp tất cả các code sau khi tài liệu đã sẵn sàng.
Bước 2: Phong cách CSS
Bây giờ chúng ta sẽ thêm một số css để làm cho ứng dụng chat trông tốt hơn so với phong cách mặc định của trình duyệt. Đoạn code dưới đây sẽ được thêm vào tập tin style.css của chúng ta.
