Making an AJAX Web Chat – PHP and MySQL

Description:   When discussing real time communication, there aren’t many solutions that can rival the power of a simple webchat. What is even better, is that you already have all the tools you need to create one – your web browser. This, coupled with the fact that this is also one of the most requested tutorials by Tutorialzine’s readers, means that it is about time to start coding.

Author: Tutorialzine
下載:  Download  (密碼:  見壓縮檔註解)

By dowloading you accept our Terms & Disclaimer.


An AJAX Web Chat with PHP, MySQL and jQuery
An AJAX Web Chat with PHP, MySQL and jQuery

As usual, the first step is to lay down the HTML markup. Our document is structured as HTML5 for convenience, as this allows us to use the new, shorter (and more memorable) doctype, and skip the type attribute on the script tags.

To optimize the load time, the stylesheets are included in the head section, and the JavaScript files in the footer, just before the closing body tag.

We are using the jScrollPane plugin to create the scrollable area with the chats entries. This plugin comes with its own stylesheet, which is the first thing we’ve included into the page.

The markup of the chat consists of four main divs – the top bar, the chat container, the user container and the bottom bar. The latter holds the login and submit forms. The submit form is hidden by default and only shown if the user has successfully logged in the chat system.

Lastly we include the JavaScript files. Starting with the jQuery library, we add the mousewheel plugin (used by jScrollPane), the jScrollPane plugin itself and our script.js file.

    If you believe that your work has been copied in a way that constitutes copyright infringement, or that your intellectual property rights have been otherwise violated, please e-mail us

0 留言:



建議: 為方便留言回覆,請不要用匿名方式 留言。