Ứng dụng trò chuyện với PHP

Trong hướng dẫn này, chúng ta sẽ phát triển một ứng dụng trò chuyện hỗ trợ trực tiếp linh hoạt và tương tác với AJAX [JavaScript], PHP và MySQL. Chúng tôi sẽ tận dụng AJAX để nhận và gửi tin nhắn trong thời gian thực mà không phải tải lại trang

Bạn đã bao giờ thấy biểu tượng trò chuyện xuất hiện trên nhiều trang web ở góc dưới cùng bên phải chưa?

nội dung

1. Giới thiệu

Trong thời đại ngày nay, việc triển khai hỗ trợ trực tiếp vào trang web của bạn là điều cần thiết vì nó sẽ mang lại cảm giác tin cậy giữa người tiêu dùng và doanh nghiệp, cho dù bạn bán hàng hóa thực hay hàng hóa ảo. Để một doanh nghiệp xây dựng sự chính trực, doanh nghiệp đó phải cung cấp sự hỗ trợ vững chắc cho người tiêu dùng, đây là nền tảng cơ bản cho bất kỳ doanh nghiệp nào

Hơn nữa, khi người tiêu dùng hỏi về các sản phẩm mà họ do dự khi mua, điều đó có thể dẫn đến doanh số bán hàng và do đó tăng lợi nhuận kinh doanh vì với hỗ trợ trò chuyện trực tiếp, bạn có thể trả lời các câu hỏi một cách kịp thời

Với sự tiến bộ của công nghệ web, chúng ta có thể tận dụng các phương pháp hiện đại để phát triển ứng dụng trò chuyện thời gian thực và trôi chảy

2. Bắt đầu

Trước khi bắt đầu mã hóa ứng dụng trò chuyện hỗ trợ trực tiếp, chúng tôi cần một máy chủ web đang hoạt động và cài đặt các công cụ sẽ giúp chúng tôi phát triển ứng dụng

2. 1. Yêu cầu

• Tôi thực sự khuyên bạn nên tải xuống và cài đặt XAMPP trên môi trường phát triển của mình. Tuy nhiên, hãy nhớ rằng XAMPP chỉ được sử dụng cho mục đích phát triển và không được khuyến nghị sử dụng cho sản xuất
• Đảm bảo máy chủ web của bạn đang chạy PHP >= 5. 5 và MySQL >= 5. 6. Phiên bản mới nhất của XAMPP sẽ được xây dựng sẵn với các thành phần mới nhất và do đó không phải là vấn đề
• Tải xuống và cài đặt trình chỉnh sửa mã. Bạn có thể sử dụng Notepad để chỉnh sửa các tập tin, nhưng tôi không khuyên dùng nó. Thay vào đó, hãy cài đặt một trong những thứ sau. Notepad++, Visual Studio Code hoặc Atom

2. 2. Bạn sẽ học được gì trong Hướng dẫn này

• Triển khai AJAX — Tận dụng AJAX để cập nhật các cuộc hội thoại theo thời gian thực
• Điền vào các bản ghi SQL — Truy xuất các thông báo từ cơ sở dữ liệu và điền vào các bản ghi đó cho phù hợp
• Thiết kế linh hoạt với CSS3 — Chuyển đổi liền mạch giữa các tab trò chuyện
• Xác thực — Xác thực người vận hành và tạo tài khoản cho khách
• Tìm kiếm thông minh — Tự động tìm người vận hành và khách bằng thuật toán thông minh

2. 3. Cấu trúc & Thiết lập Tệp

Chúng tôi cần khởi động máy chủ web của mình và tạo các thư mục và tệp mà chúng tôi sẽ sử dụng cho ứng dụng trò chuyện hỗ trợ trực tiếp của mình. Nếu bạn đã cài đặt XAMPP, hãy làm theo hướng dẫn bên dưới

• Mở Bảng điều khiển XAMPP
• Bên cạnh mô-đun Apache, nhấp vào Bắt đầu
• Bên cạnh mô-đun MySQL, nhấp vào Bắt đầu
• Điều hướng đến thư mục cài đặt của XAMPP [C. \xampp]
• Mở thư mục htdocs
• Tạo các thư mục và tệp sau

Cấu trúc tệp

\-- trò chuyện hỗ trợ trực tiếp
    . -- phong cách. css
    . -- xác thực. php
    . -- cuộc hội thoại. php
    . -- hội thoại. php
    . -- find_conversation. php
    . -- chủ yếu. php
    . -- post_message. php
    . -- mục lục. html

Mỗi tập tin sẽ bao gồm những điều sau đây

• phong cách. css — Biểu định kiểu [CSS3] cho ứng dụng trò chuyện hỗ trợ trực tiếp của chúng tôi, được sử dụng để định dạng nội dung có cấu trúc [HTML] của chúng tôi
• xác thực. php — Sẽ được sử dụng cùng với biểu mẫu đăng nhập, biểu mẫu này sẽ xác thực người dùng dựa trên địa chỉ email được cung cấp
• cuộc hội thoại. php — Tệp hội thoại sẽ truy xuất thư từ cơ sở dữ liệu MySQL được liên kết với người gửi và người nhận
• cuộc trò chuyện. php — Tệp hội thoại sẽ truy xuất tất cả các hội thoại được liên kết với người dùng và điền vào chúng dựa trên ngày tháng
• find_conversation. php — Tệp hội thoại tìm thấy sẽ kết nối người dùng với một nhà điều hành, nhưng chỉ khi cả hai người dùng nhấp vào nút "Trò chuyện mới"
• chủ yếu. php — Tệp chính sẽ chứa các hàm chung mà chúng tôi sẽ sử dụng trong các tệp khác của mình, chẳng hạn như mã kết nối cơ sở dữ liệu, hàm is_loggedin, v.v.
• post_message. php — Tệp tin đăng sẽ được sử dụng để gửi tin nhắn và chèn chúng vào cơ sở dữ liệu

3. Tạo cơ sở dữ liệu

Cơ sở dữ liệu MySQL sẽ lưu trữ tất cả tin nhắn, cuộc hội thoại, tài khoản và dữ liệu khác liên quan đến ứng dụng của chúng tôi. Chúng ta có thể sử dụng cơ sở dữ liệu để lưu trữ, cập nhật, chèn và truy xuất dữ liệu

Để bắt đầu, hãy làm theo hướng dẫn bên dưới

• Điều hướng đến phpMyAdmin trong trình duyệt của bạn. http. //localhost/phpmyadmin/
• Nhấp vào tab Cơ sở dữ liệu trong menu điều hướng trên cùng
• Trong phần Tạo cơ sở dữ liệu, nhập phpsupportchat làm tên cơ sở dữ liệu và utf8_general_ci làm đối chiếu
• Nhấp vào nút Tạo
• Chọn cơ sở dữ liệu mới được tạo trong bảng điều khiển bên trái
• Nhấp vào tab SQL
• Thực hiện câu lệnh SQL dưới đây

SQL

CREATE TABLE IF NOT EXISTS `accounts` [
  `id` int[11] NOT NULL AUTO_INCREMENT,
  `email` varchar[255] NOT NULL,
  `password` varchar[255] NOT NULL,
  `full_name` varchar[255] NOT NULL,
  `role` enum['Guest','Operator'] NOT NULL,
  `secret` varchar[255] NOT NULL DEFAULT '',
  `last_seen` datetime NOT NULL,
  `status` enum['Occupied','Waiting','Idle'] NOT NULL DEFAULT 'Idle',
  PRIMARY KEY [`id`]
] ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `accounts` [`id`, `email`, `password`, `full_name`, `role`, `secret`, `last_seen`, `status`] VALUES
[1, 'operator@example.com', '$2y$10$thE7hIJF/EJvKjmJy7hd5uH3a/BNgSUepkYoES0q80YEzi7VqWsRG', 'Operator', 'Operator', '', '2022-05-03 14:14:35', 'Idle'];

CREATE TABLE IF NOT EXISTS `conversations` [
  `id` int[11] NOT NULL AUTO_INCREMENT,
  `account_sender_id` int[11] NOT NULL,
  `account_receiver_id` int[11] NOT NULL,
  `submit_date` datetime NOT NULL,
  PRIMARY KEY [`id`]
] ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE IF NOT EXISTS `messages` [
  `id` int[11] NOT NULL AUTO_INCREMENT,
  `conversation_id` int[11] NOT NULL,
  `account_id` int[11] NOT NULL,
  `msg` varchar[255] NOT NULL,
  `submit_date` datetime NOT NULL,
  PRIMARY KEY [`id`]
] ENGINE=InnoDB DEFAULT CHARSET=utf8;

Câu lệnh SQL trên sẽ tạo các bảng sau

• tài khoản — bảng này sẽ lưu trữ tất cả khách và người điều hành của chúng tôi
  • id — Cột ID sẽ tự động tăng và do đó mỗi cột mới sẽ có một số nguyên duy nhất
  • email — Địa chỉ email được liên kết với người dùng
  • mật khẩu — Trường mật khẩu bắt buộc đối với người vận hành
  • full_name - Tên đầy đủ được liên kết với người dùng
  • vai trò — Cột vai trò sẽ xác định xem người dùng là khách hay người điều hành
  • bí mật — Mã duy nhất bí mật được yêu cầu để tự động xác thực khách và người điều hành
  • last_seen — Ngày cuối cùng người dùng kích hoạt một hành động
  • trạng thái — Trạng thái của người dùng, có thể là Đang bận [trò chuyện với người dùng], Đang chờ [tìm một cuộc trò chuyện mới] hoặc Không hoạt động
• cuộc trò chuyện - bảng này sẽ lưu trữ tất cả các thông tin quan trọng liên quan đến cuộc trò chuyện
  • id — ID duy nhất
  • account_sender_id — ID tài khoản của người gửi, sẽ được liên kết với bảng tài khoản
  • account_receiver_id — ID tài khoản của người nhận, sẽ được liên kết với bảng tài khoản
  • submit_date - Ngày cuộc trò chuyện được tạo
• tin nhắn - bảng này sẽ lưu trữ tất cả các tin nhắn đã gửi
  • id — ID duy nhất
  • cuộc hội thoại_id - ID cuộc hội thoại, sẽ được liên kết với bảng hội thoại
  • account_id — ID tài khoản của người gửi, sẽ được liên kết với bảng tài khoản
  • msg — Tin nhắn đã gửi
  • submit_date - Ngày tin nhắn được tạo

Ngoài những điều trên, câu lệnh SQL sẽ tạo một tài khoản người điều hành, tài khoản này sau này chúng ta có thể sử dụng khi kiểm tra tiện ích trò chuyện

Trong phpMyAdmin, cấu trúc cơ sở dữ liệu sẽ giống như sau

http. // localhost/phpmyadmin

Nút sẽ xuất hiện ở góc dưới cùng bên phải. Như bạn có thể thấy, chúng tôi sử dụng thư viện Font Awesome để hiển thị biểu tượng

Thêm vào sau

HTML

    

        ‹
        ×
    
    

        

            

                
                    
                    
                    

                    Submit
                
            
            

            

        
    

Đoạn mã trên sẽ là mẫu cho tiện ích trò chuyện của chúng tôi, tiện ích này sau đó sẽ mở khi nhấp vào nút đã khai báo trước đó

Tiện ích trò chuyện sẽ bao gồm ba tab

• Tab 1 — Sẽ được sử dụng để hiển thị biểu mẫu xác thực [tên, email, mật khẩu, v.v. ]
• Tab 2 — Sẽ chứa danh sách các cuộc trò chuyện được liên kết với người dùng
• Tab 3 — Sẽ là cuộc hội thoại chứa tin nhắn từ người gửi và người nhận

Mỗi tab sẽ chứa một quá trình chuyển đổi sẽ tạo hiệu ứng hướng trên trục X. Đó là để chúng tôi có thể chuyển đổi giữa các tab một cách mượt mà

6. Tạo tệp chính

Tệp chính sẽ chứa các chức năng và mã kết nối cơ sở dữ liệu sẽ được yêu cầu trong các tệp PHP khác của chúng tôi. Không cần triển khai cùng một mã trong mọi tệp

chỉnh sửa chính. tập tin php và thêm

PHP

Chúng tôi sẽ tận dụng các phiên để xác định xem người dùng của chúng tôi có đăng nhập hay không. Ngoài ra, cookie bí mật sẽ tự động xác thực người dùng của chúng tôi nếu nó được khai báo

Bạn có biết không? Hàm password_hash[] là thuật toán băm một chiều mạnh và do đó kẻ tấn công cực kỳ khó giải mã chuỗi đã băm

Đảm bảo cập nhật các biến cơ sở dữ liệu để phản ánh chính bạn. Nếu bạn gặp lỗi kết nối cơ sở dữ liệu, rất có thể là do thông tin đăng nhập được cung cấp không chính xác

7. Triển khai xác thực

Trong phần này, chúng tôi sẽ triển khai mã sẽ xác thực người dùng, cho dù đó là khách hay nhà điều hành và cung cấp phản hồi ở giao diện người dùng bằng AJAX

Chỉnh sửa xác thực. tập tin php và thêm

PHP