Hướng dẫn php mysql chat application - ứng dụng trò chuyện php mysql

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article)

Nội dung chính Show

• Giới thiệu
• Bước 1: Markup HTML
• Bước 2: Phong cách CSS
• Bước 3: Sử dụng PHP để tạo một Form Đăng nhập.
• Bước 4: Xử lý Input
• Bước 5: Hiển thị Nội dung Chat Log (log.html)
• Hoàn tất

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.

  

		
Welcome, 
		
Exit Chat
		

	
	
	

	
	

		
		
	

• 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.

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }

Không có gì đặc biệt về css ở trên ngoại trừ thực tế rằng một số id hoặc lớp mà chúng ta đã thiết lập một phong cách cho chúng, sẽ được thêm sau chốc lát nữa.

Như bạn có thể thấy ở trên, chúng ta đã hoàn tất việc xây dựng giao diện người dùng của ứng dụng chat.

Bước 3: Sử dụng PHP để tạo một Form Đăng nhập.

Bây giờ chúng ta sẽ cài đặt một form đơn giản sẽ yêu cầu người dùng nhập tên của họ trước khi tiếp tục.

	

		
Please enter your name to continue:
		Name:
		
		
	
	

Hàm loginForm() mà chúng ta tạo ra được tạo thành từ một form đăng nhập đơn giản yêu cầu người dùng nhập tên của họ. Sau đó chúng ta sử dụng một câu lệnh if và else để xác nhận rằng người đó nhập vào một tên. Nếu người đó nhập vào một cái tên, chúng ta thiết lập tên là $ _SESSION[ 'name']. Vì chúng ta đang sử dụng một session dựa trên cookie để lưu trữ tên, nên chúng ta phải gọi session_start() trước khi bất cứ điều gì được xuất ra trên trình duyệt.

Một điều mà bạn có thể cần chú ý kỹ, là chúng ta đã sử dụng hàm htmlspecialchars(), trong đó chuyển đổi ký tự đặc biệt cho các đối tượng HTML, để bảo vệ biến name khỏi trở thành nạn nhân của phương pháp tấn công Cross-site scripting (XSS). Sau đó, chúng ta cũng sẽ thêm hàm này vào biến text mà sẽ được đăng vào chatlog.

Hiển thị Form Đăng nhập

Để hiển thị form đăng nhập trong trường hợp người dùng chưa đăng nhập và do đó chưa tạo một session, chúng ta sử dụng câu lệnh if và else khác xung quanh div #wrapper và các thẻ script trong code ban đầu của chúng ta. Đối với trường hợp ngược lại, việc này sẽ ẩn form đăng nhập, và hiển thị hộp thoại nếu người dùng đã đăng nhập và đã tạo ra một session.

	

		
Welcome, 
		
Exit Chat
		

	
	
	

	
	

		
		
	

Menu Chào mừng và Đăng xuất

Chúng ta vẫn chưa hoàn tất việc tạo hệ thống đăng nhập cho ứng dụng chat này. Chúng ta vẫn cần phải cho phép người dùng đăng xuất, và kết thúc session chat. Nếu bạn còn nhớ, markup HTML ban đầu của chúng ta bao gồm một menu đơn giản. Hãy quay trở lại và thêm một số code PHP sẽ cung cấp thêm chức năng cho menu.

Trước hết, hãy thêm tên người dùng vào thông điệp chào mừng. Chúng ta làm điều này bằng cách xuất ra tên của người dùng ở trong session.

Welcome, 

Để cho phép người dùng đăng xuất và kết thúc session, chúng ta sẽ sử dụng một jQuery ngắn gọn.

Code jquery ở trên đơn giản là hiển thị một cảnh báo xác nhận nếu người dùng nhấp vào liên kết #exit. Nếu người dùng xác nhận việc đăng xuất, từ đó kết thúc session, thì chúng ta chuyển hướng đến index.php?logout=true. Việc đơn giản này tạo ra một biến gọi là logout với giá trị true. Chúng ta cần phải catch biến này với PHP:

if(isset($_GET['logout'])){	
	
	//Simple exit message
	$fp = fopen("log.html", 'a');
	fwrite($fp, "
User ". $_SESSION['name'] ." has left the chat session.
");
	fclose($fp);
	
	session_destroy();
	header("Location: index.php"); //Redirect the user
}

Bây giờ chúng ta xem một biến "logout" có tồn tại hay không bằng cách sử dụng hàm isset(). Nếu biến đã được truyền vào một địa chỉ url, chẳng hạn như liên kết nêu trên, chúng ta tiến hành kết thúc session của tên người dùng đó.

Trước khi hủy session tên của người dùng với hàm session_destroy(), chúng ta cần viết một thông điệp thoát đơn giản vào chat log. Nó sẽ nói rằng người dùng đã rời session chat. Chúng ta làm điều này bằng cách sử dụng hàm fopen(), fwrite(), và fclose() để thao tác trên tập tin log.html, như chúng ta sẽ thấy sau đây, sẽ được tạo ra như là chat log của chúng ta. Xin lưu ý rằng chúng ta đã thêm một lớp 'msgln' vào div. Chúng ta đã xác định phong cách css cho div này.

Sau khi làm điều này, chúng ta huỷ session, và chuyển hướng người dùng đến cùng một trang nơi mà form đăng nhập sẽ xuất hiện.

Bước 4: Xử lý Input

Sau khi một người dùng submit form, chúng ta cần lấy input của người đó và ghi nó vào chat log của chúng ta. Để làm điều này, chúng ta phải sử dụng jQuery và PHP để làm việc đồng bộ trên client và server.

jQuery

Hầu như tất cả mọi thứ mà chúng ta sẽ làm với jQuery để xử lý dữ liệu, sẽ xoay quanh yêu cầu POST jQuery.

	//If user submits the form
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});

1. Trước khi chúng ta làm bất cứ điều gì, chúng ta phải lấy input của người dùng, hoặc những gì mà người đó đã nhập vào input #submitmsg. Điều này có thể đạt được với hàm val(), nó sẽ lấy giá trị thiết lập trong một trường của form. Bây giờ chúng ta lưu trữ giá trị này vào biến clientmsg.
2. Ở đây là phần quan trọng nhất của chúng ta: yêu cầu POST trong jQuery. Điều này sẽ gửi một yêu cầu POST đến tập tin post.php mà chúng ta sẽ tạo ra trong một lát nữa. Nó post input của client, hoặc những gì đã được lưu vào biến clientmsg.
3. Cuối cùng, chúng ta xoá input #usermsg bằng cách thiết lập thuộc tính value thành rỗng.

Xin lưu ý rằng code ở trên sẽ nằm trong thẻ script của chúng ta, nơi chúng ta đặt code logout bằng jQuery.

PHP - post.php

Tại thời điểm này dữ liệu POST đang được gửi đến tập tin post.php mỗi khi người dùng submit form, và gửi một thông báo mới. Mục tiêu của chúng ta bây giờ là lấy dữ liệu này, và ghhi nó vào chat log của chúng ta.

(".date("g:i A").") ".$_SESSION['name'].": ".stripslashes(htmlspecialchars($text))."
");
	fclose($fp);
}
?>

1. Trước khi chúng ta làm bất cứ điều gì, chúng ta phải bắt đầu tập tin post.php với hàm session_start() vì chúng ta sẽ sử dụng session tên của người dùng trong tập tin này.
2. Sử dụng boolean isset, chúng ta kiểm tra xem session cho 'name' có tồn tại hay không trước khi làm bất cứ điều gì khác.
3. Bây giờ chúng ta lấy dữ liệu POST được gửi đến tập tin này bằng jQuery. Chúng ta lưu trữ dữ liệu này vào biến $text.
4. Dữ liệu này, cũng như tổng thể tất cả các dữ liệu của người dùng, sẽ được lưu trữ vào tập tin log.html. Để làm điều này, chúng ta mở tập tin với chế độ 'a' trong hàm fopen, mà theo php.net mở tập tin để chỉ ghi; đặt con trỏ tập tin ở phần cuối của tập tin. Nếu tập tin không tồn tại, hãy cố gắng tạo ra nó. Sau đó chúng ta ghi thông điệp của chúng ta vào tập tin bằng cách sử dụng hàm fwrite().
   • Thông điệp mà chúng ta sẽ ghi sẽ được gắn vào bên trong div .msgln. Nó sẽ chứa ngày tháng và thời gian được tạo ra bằng hàm date(), session tên của người dùng, và văn bản, nó còn được bao quanh bởi hàm htmlspecialchars() để ngăn chặn tấn công XSS.

   Cuối cùng, chúng ta đóng trình xử lý tập tin của chúng ta sử dụng hàm fclose().

Bước 5: Hiển thị Nội dung Chat Log (log.html)

Tất cả những gì người dùng đã submit được xử lý và post bằng jQuery; nó được ghi vào chat log với PHP. Điều duy nhất còn lại để làm là hiển thị chat log được cập nhật đến người dùng.

Để tiết kiệm thời gian, chúng ta sẽ tải trước chat log vào div #chatbox nếu có sẵn nội dung.

	
 0){
		$handle = fopen("log.html", "r");
		$contents = fread($handle, filesize("log.html"));
		fclose($handle);
		
		echo $contents;
	}
	?>

Chúng ta sử dụng một công việc tương tự như chúng ta đã sử dụng tập tin post.php, ngoại trừ lần này chúng ta chỉ đọc và xuất ra nội dung của tập tin.

Yêu cầu jQuery.ajax

Yêu cầu ajax là cốt lõi của tất cả mọi thứ mà chúng ta đang làm. Yêu cầu này không chỉ cho phép chúng ta gửi và nhận dữ liệu thông qua form mà không làm mới trang web, mà còn cho phép chúng ta xử lý dữ liệu được yêu cầu.

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }

Chúng ta đặt yêu cầu ajax bên trong một hàm Bạn sẽ thấy lý do trong một lát nữa. Như bạn thấy ở trên, chúng ta sẽ chỉ sử dụng ba đối tượng yêu cầu ajax của jQuery.

• url: Một chuỗi URL để yêu cầu. Chúng ta sẽ sử dụng tên tập tin log.html của chat log.: Một chuỗi URL để yêu cầu. Chúng ta sẽ sử dụng tên tập tin log.html của chat log.
• cache: Cái này sẽ ngăn chặn tập tin của chúng ta khỏi bị cache. Nó sẽ đảm bảo rằng chúng ta nhận được một cập nhật chat log mỗi khi chúng ta gửi một yêu cầu.: Cái này sẽ ngăn chặn tập tin của chúng ta khỏi bị cache. Nó sẽ đảm bảo rằng chúng ta nhận được một cập nhật chat log mỗi khi chúng ta gửi một yêu cầu.
• sucess: Cái này sẽ cho phép chúng ta đính kèm một hàm sẽ chuyển dữ liệu mà chúng ta yêu cầu.: Cái này sẽ cho phép chúng ta đính kèm một hàm sẽ chuyển dữ liệu mà chúng ta yêu cầu.

Như bạn thấy, chúng ta sau đó di chuyển dữ liệu mà chúng ta yêu cầu (html) vào div #chatbox.

Tự động cuộn

Như bạn có thể nhìn thấy trong các ứng dụng chat khác, nội dung tự động cuộn xuống nếu container chat log (#chatbox) bị tràn. Chúng ta sẽ cài đặt một tính năng đơn giản và tương tự, mà sẽ so sánh chiều cao cuộn của container trước và sau khi chúng ta thực hiện yêu cầu ajax. Nếu chiều cao cuộn lớn sau khi yêu cầu, chúng ta sẽ sử dụng hiệu ứng động của jQuery để cộn div #chatbox.

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }

• Đầu tiên chúng ta lưu trữ chiều cao cuộn của div #chatbox vào biến oldscrollHeight trước khi chúng ta thực hiện yêu cầu.
• Sau khi yêu cầu của chúng ta đã trả về thành công, chúng ta lưu trữ chiều cao scrollbar của div #chatbox vào biến newscrollHeight.
• Sau đó chúng ta so sánh cả hai biến chiều cao cuộn sử dụng một câu lệnh if. Nếu newscrollHeight lớn hơn oldscrollHeight, chúng ta sử dụng hiệu ứng động để cuộn div #chatbox.

Liên tục Cập nhật Chat Log

Giờ đây, nảy sinh thêm một câu hỏi, làm thế nào chúng ta liên tục cập nhật dữ liệu mới được gửi qua lại giữa những người dùng? Hoặc diễn đạt lại câu hỏi, làm thế nào chúng ta giữ cho việc gửi yêu cầu cập nhật dữ liệu một cách liên tục?

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }

Câu trả lời cho câu hỏi của chúng ta nằm trong hàm setInterval. Hàm này sẽ chạy hàm loadLog() của chúng ta mỗi 2,5 giây, và hàm loadLog sẽ yêu cầu tập tin được cập nhật và tự động cuộn thẻ div.

Hoàn tất

Chúng ta đã hoàn thành nó! Tôi hy vọng rằng bạn đã học được cách một hệ thống chat cơ bản hoạt động, và nếu bạn có bất kỳ đề xuất về bất cứ điều gì, tôi rất vui mừng được thấy chúng. Hệ thống chat này là một hệ thống đơn giản mà bạn có được với một ứng dụng chat. Bạn có thể nâng cao cái này và xây dựng một ứng dụng nhiều phòng chat, thêm một back-end quản lý, thêm các biểu tượng cảm xúc, vv. Không có giới hạn cho bạn.

Dưới đây là một số liên kết mà bạn có thể muốn kiểm tra xem bạn có đang nghĩ đến việc mở rộng ứng dụng chat này hay không:

• Bảo mật Form của bạn với Form Keys - ngăn chặn tấn công XSS (Cross-site scripting) và yêu cầu giả mạo Cross-site.
• Submit một Form mà không Refresh lại Trang bằng cách sử dụng jQuery - Mở rộng yêu cầu ajax của bạn
• Cách tạo các Yêu cầu AJAX thuần Javascript - Tìm hiểu cách tạo các yêu cầu ajax thuần javascript.

• Hãy theo dõi chúng tôi trên Twitter, hoặc đăng ký NETTUTS RSS Feed để cập nhật các bài viết và bài hướng dẫn về phát triển web mỗi ngày.