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]

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.

Exit Chat

// jQuery Document $[document].ready[function[]{ }];

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.

Bước 2: Phong cách CSS

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

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề